/*
Theme Name:   Divi Child
Theme URI:    https://www.elegantthemes.com/gallery/divi/
Description:  Divi child theme for custom design and CSS.
Author:       Your Name
Template:     Divi
Version:      1.0.0
Text Domain:  divi-child
*/

/* ---------------------------------------------------------------------------
   Add your custom CSS below this line.

   Tip: the Etsy buy button (output by the plugin) uses the class
   .eps-buy-button — drop a rule here whenever you want to restyle it to
   match your design, e.g.:

   .eps-buy-button { background: #000; border-radius: 4px; }
--------------------------------------------------------------------------- */


/* =====================================================================
   CORNISH COTTON CRAFTS — stitch theme
   ---------------------------------------------------------------------
   Where to put this:
     • The component classes + buy button below work anywhere. Paste this
       whole file into Divi-child/style.css (under the "add custom CSS"
       line) OR into Divi -> Theme Options -> Custom CSS.
     • For the site-wide cream background + fonts, it's cleaner to also set
       them in Divi -> Theme Customizer (Background + Typography) so they
       win against Divi's own defaults. The body{} block here is a fallback.

   How to use the stitch pieces in Divi:
     Open any module -> Advanced -> CSS ID & Classes -> "CSS Class", and
     type one of: ccc-stitch-card  ccc-frame  ccc-tag  ccc-stitch-underline
     The divider is an <hr class="ccc-stitch-divider"> (use a Code module),
     and the "Buy on Etsy" button styles itself automatically.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Karla:wght@400;500;700&family=Caveat:wght@600;700&display=swap');

:root {
	--ccc-cream:       #f6f1e7;   /* cotton ground            */
	--ccc-paper:       #fffdf8;   /* card / patch             */
	--ccc-ink:         #2a2723;   /* hand-drawn ink           */
	--ccc-ink-soft:    #5f594f;   /* secondary text           */
	--ccc-thread:      #b04a35;   /* madder-red running stitch */
	--ccc-thread-deep: #8a3a29;   /* stitch on hover          */
	--ccc-line:        rgba(42, 39, 35, 0.55);

	--ccc-font-display: 'Fraunces', Georgia, serif;
	--ccc-font-body:    'Karla', system-ui, sans-serif;
	--ccc-font-hand:    'Caveat', cursive;

	--ccc-radius: 14px;

	/* Want a different thread colour? Swap --ccc-thread for one of these:
	   sage  #7d8a6a   |   denim  #5b7184   |   plum  #7a5168   |   keep red */
}

/* --- Optional site-wide cotton ground + type (or set these in Divi) --- */
body {
	background-color: var(--ccc-cream);
	background-image:
		repeating-linear-gradient(0deg,  rgba(42, 39, 35, 0.022) 0 1px, transparent 1px 6px),
		repeating-linear-gradient(90deg, rgba(42, 39, 35, 0.022) 0 1px, transparent 1px 6px);
	color: var(--ccc-ink);
	font-family: var(--ccc-font-body);
}

h1, h2, h3, h4,
.et_pb_module_header,
.entry-title {
	font-family: var(--ccc-font-display);
	font-weight: 500;
	color: var(--ccc-ink);
	letter-spacing: 0.2px;
}

/* --- Stitched patch card ------------------------------------------- */
.ccc-stitch-card {
	position: relative;
	background: var(--ccc-paper);
	border-radius: var(--ccc-radius);
	padding: 22px;
	box-shadow: 0 12px 26px -20px rgba(42, 39, 35, 0.55);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ccc-stitch-card::after {
	content: "";
	position: absolute;
	inset: 9px;
	border: 2px dashed var(--ccc-thread);
	border-radius: calc(var(--ccc-radius) - 4px);
	opacity: 0.85;
	pointer-events: none;
}
.ccc-stitch-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 32px -20px rgba(42, 39, 35, 0.55);
}

/* --- Framed image (like a mounted sampler) ------------------------- */
.ccc-frame {
	position: relative;
	padding: 8px;
	background: var(--ccc-paper);
	border: 1.5px solid var(--ccc-ink);
	border-radius: 10px;
}
.ccc-frame::after {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1.5px dashed var(--ccc-line);
	border-radius: 7px;
	pointer-events: none;
}
.ccc-frame img,
.ccc-frame svg {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 5px;
}

/* --- Seam divider --------------------------------------------------- */
.ccc-stitch-divider {
	border: 0;
	height: 0;
	border-top: 2px dashed var(--ccc-thread);
	opacity: 0.85;
	max-width: 220px;
	margin: 2.2rem auto;
	position: relative;
}
.ccc-stitch-divider::before,
.ccc-stitch-divider::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ccc-thread);
	transform: translateY(-50%);
}
.ccc-stitch-divider::before { left: -3px; }
.ccc-stitch-divider::after  { right: -3px; }

/* --- Running-stitch underline for headings ------------------------- */
.ccc-stitch-underline {
	display: inline-block;
	padding-bottom: 0.35em;
	position: relative;
}
.ccc-stitch-underline::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	border-bottom: 2px dashed var(--ccc-thread);
}

/* --- Little hand-written eyebrow ----------------------------------- */
.ccc-eyebrow {
	font-family: var(--ccc-font-hand);
	font-weight: 700;
	font-size: 1.35rem;
	color: var(--ccc-thread);
	letter-spacing: 0.4px;
}

/* --- Hang tag (prices, badges) ------------------------------------- */
.ccc-tag {
	display: inline-flex;
	align-items: center;
	font-family: var(--ccc-font-hand);
	font-weight: 700;
	font-size: 1.45rem;
	line-height: 1;
	color: var(--ccc-ink);
	background: var(--ccc-paper);
	border: 1.5px solid var(--ccc-ink);
	border-radius: 6px;
	padding: 6px 14px 6px 24px;
	position: relative;
}
.ccc-tag::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: 1.5px solid var(--ccc-ink);
	background: var(--ccc-cream);
	transform: translateY(-50%);
}

/* --- "Buy on Etsy" button (sewn fabric label) ----------------------
   Uses a.eps-buy-button so it overrides the plugin's default styling
   regardless of load order. ------------------------------------------ */
a.eps-buy-button {
	position: relative;
	display: inline-block;
	background: var(--ccc-ink);
	color: var(--ccc-cream);
	font-family: var(--ccc-font-body);
	font-weight: 700;
	letter-spacing: 0.4px;
	padding: 14px 28px;
	border-radius: 10px;
	box-shadow: none;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.15s ease;
}
a.eps-buy-button::after {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1.5px dashed var(--ccc-cream);
	border-radius: 6px;
	pointer-events: none;
}
a.eps-buy-button:hover,
a.eps-buy-button:focus {
	background: var(--ccc-thread);
	color: var(--ccc-cream);
	transform: translateY(-2px);
}
.eps-buy-button .eps-buy-price {
	font-family: var(--ccc-font-hand);
	font-weight: 700;
	font-size: 1.25em;
	opacity: 1;
	margin-left: 0.5em;
}