/* ============================================================
   JJ Stuff — Global Theme
   Design tokens + reusable components shared across every screen.
   Brand: handmade, warm, small-business charm.
   ============================================================ */

:root{
  /* Brand */
  --coral:#D47468; --coral-lt:#EFA99F; --coral-pale:#FBF0EE; --coral-dark:#B85C50;
  --navy:#1C2E47; --navy-mid:#2E4A6A;
  --gold:#C09850; --gold-lt:#DEB96A;

  /* Warm neutrals */
  --cream:#D8D3C8; --linen:#FAF8F3; --warm-white:#FFFDF9;
  --muted:#607080; --light:#9AAABB;

  /* Semantic */
  --success:#3D8B4E;

  /* Type */
  --font-head:'Fredoka', system-ui, sans-serif;
  --font-body:'Nunito', system-ui, sans-serif;
  --font-hand:'Caveat', cursive;
  --font-editorial:'Lora', Georgia, serif;

  /* Spacing / shape */
  --wrap:1060px;
  --radius:12px;
  --radius-sm:8px;
  --shadow-sm:0 2px 12px rgba(28,46,71,.08);
  --shadow-md:0 6px 20px rgba(28,46,71,.12);
  --ring:0 0 0 3px rgba(212,116,104,.35);

  /* Accessible variants (WCAG AA on their backgrounds) */
  --coral-cta:#B0564A;       /* white text passes 4.5:1 */
  --coral-cta-dark:#9C4B40;
  --gold-text:#8A6A2E;       /* gold-toned text on light bg, ≥4.5:1 */
  --success-text:#2E6B3B;

  /* Fabric-weave textures (data-URI, no network) */
  --tex-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0H6M0 0V6' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
  --tex-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0H6M0 0V6' stroke='%231C2E47' stroke-opacity='0.05' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
}

/* Subtle paper/linen grain on the whole page */
body{background-image:var(--tex-dark)}

/* Reusable placeholder-image treatment: fabric texture + inset depth.
   Works over any inline background color; becomes a zero-layout frame for
   real <img> (which get object-fit:cover and scale gently on hover). */
.ph-frame{position:relative;overflow:hidden}
.ph-frame::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:var(--tex-light);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -46px 60px -34px rgba(28,46,71,.28);
}
.ph-frame > img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:var(--font-body);
  background:var(--linen);
  color:var(--navy);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;

  /* Sticky footer. On short pages — an empty cart, a thin policy page, a
     category with two products — the footer sat mid-screen with bare linen
     below it, which reads as a half-loaded page. Column flex with the footer
     pushed down by margin-top:auto keeps it at the bottom of the viewport
     without pinning it over content on long pages. */
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body > .footer{margin-top:auto}

img{max-width:100%;display:block}

a{color:inherit}

:focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-body);font-weight:700;font-size:15px;
  border-radius:var(--radius-sm);cursor:pointer;border:2px solid transparent;
  padding:0 20px;height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;transition:background .15s,border-color .15s,color .15s,transform .1s;
}
.btn:active{transform:translateY(1px)}
.btn--primary{
  background:var(--coral-cta);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 0 var(--coral-cta-dark), 0 6px 16px rgba(176,86,74,.32);
}
.btn--primary:hover{background:var(--coral-cta-dark);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 0 var(--coral-cta-dark), 0 9px 22px rgba(176,86,74,.4)}
.btn--primary:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 1px 0 var(--coral-cta-dark)}
.btn--secondary{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--secondary:hover{background:var(--navy);color:#fff}
.btn--tertiary{background:none;color:var(--coral-cta);padding:0;height:auto;border:none;font-weight:700}
.btn--tertiary:hover{text-decoration:underline}
.btn--block{width:100%}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.02em;
  padding:4px 11px;border-radius:5px;line-height:1;white-space:nowrap;
  border:1px solid transparent;
}
.badge--handmade{background:var(--coral-pale);color:var(--coral-cta-dark);border-color:var(--coral-lt)}
.badge--mto{background:#EEF3E9;color:var(--success-text);border-color:#CDE0CF}
.badge--one{background:var(--navy);color:#fff}
.badge--new{background:var(--coral-cta);color:#fff}
.badge--packed{background:#F6EFDD;color:#6E5220;border-color:#E7D6AE}
/* Corner badges on card images read as a stamped-on tag */
.product-card__badge{transform:rotate(-2deg)}

/* ---------- Announcement bar ---------- */
.announce{
  background:var(--navy);color:rgba(255,255,255,.9);
  text-align:center;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  padding:8px 16px;
}
.announce .hand{font-family:var(--font-hand);font-size:16px;color:var(--gold-lt)}

/* ---------- Header / Nav ---------- */
.nav{
  background:var(--navy);padding:0 clamp(16px,4vw,32px);height:58px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.18);
}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
/* The mark is an embroidered patch whose outer border is navy — the same navy
   as the header bar — so at 36px it read as a smudge and effectively vanished.
   Larger, plus a soft light halo instead of a dark drop-shadow, so the patch
   edge separates from the bar it sits on. */
/* The patch is now the whole wordmark — no text beside it — so it carries the
   brand on its own and is sized accordingly. It overhangs the bar slightly
   (negative margins) like a real patch sewn onto the header, which gives the
   navy strip some depth instead of a flat row of links. */
.nav-logo img{
  height:88px;width:88px;object-fit:contain;
  margin:-18px 0;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.28)) drop-shadow(0 3px 7px rgba(0,0,0,.38));
  transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
.nav-logo:hover img{transform:rotate(-3deg) scale(1.04)}
/* Only shown by the onerror fallback if the patch image fails to load. */
.nav-logo span{font-family:var(--font-head);font-size:24px;color:var(--coral-lt);letter-spacing:.01em}
@media (max-width:820px){
  .nav-logo img{height:60px;width:60px;margin:-10px 0}
  .nav-logo span{font-size:21px}
}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:13px;font-weight:700;color:rgba(255,255,255,.65);text-decoration:none;letter-spacing:.04em}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:#fff}
.nav-links a.is-resale{color:var(--coral-lt)}
.nav-right{display:flex;align-items:center;gap:12px}
.icon-btn{
  background:none;border:none;color:rgba(255,255,255,.75);cursor:pointer;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:18px;
}
.icon-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.cart-btn{
  background:var(--coral-cta);color:#fff;font-family:var(--font-body);font-weight:700;font-size:13px;
  padding:7px 16px;border-radius:8px;border:none;cursor:pointer;display:flex;align-items:center;gap:6px;text-decoration:none;
}
.cart-btn:hover{background:var(--coral-cta-dark)}
.cart-count{
  background:#fff;color:var(--coral);border-radius:50%;min-width:18px;height:18px;padding:0 4px;
  font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:700;
}
.nav-toggle{display:none}

/* Mobile drawer */
.mobile-drawer{
  position:fixed;inset:58px 0 auto 0;background:var(--navy);
  padding:8px 0 16px;box-shadow:0 12px 24px rgba(0,0,0,.25);
  transform:translateY(-120%);visibility:hidden;
  transition:transform .25s ease,visibility .25s ease;z-index:99;
}
.mobile-drawer.open{transform:translateY(0);visibility:visible}
.mobile-drawer a{
  display:block;padding:13px clamp(16px,4vw,32px);color:rgba(255,255,255,.8);
  text-decoration:none;font-weight:700;font-size:15px;border-bottom:1px solid rgba(255,255,255,.06);
}
.mobile-drawer a:hover{background:rgba(255,255,255,.05);color:#fff}
.mobile-drawer a.is-resale{color:var(--coral-lt)}

/* ---------- Product card (reusable) ---------- */
.product-card{
  background:var(--warm-white);border:1px solid var(--cream);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:transform .15s,box-shadow .15s;
}
.product-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(28,46,71,.16)}
.product-card__img{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-hand);font-size:14px;color:rgba(255,255,255,.85);position:relative;overflow:hidden;
}
.product-card:hover .product-card__img > img{transform:scale(1.05)}
.product-card__badge{position:absolute;top:10px;left:10px;z-index:2}
.product-card__body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:5px}
.product-card__cat{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text)}
.product-card__title{font-family:var(--font-head);font-size:17px;line-height:1.15}
.product-card__price{font-family:var(--font-head);font-size:16px;color:var(--navy);margin-top:2px}

/* Fabric texture + inset depth over every placeholder image surface.
   Sits above the color fill, below any positioned badge/caption (z-index:2). */
.product-card__img, .gallery__ph, .hero__photo, .about__photo,
.about-lead__photo, .resale__item-img, .cart-item__img, .co-line__img{position:relative;overflow:hidden}
.product-card__img::after, .gallery__ph::after, .hero__photo::after, .about__photo::after,
.about-lead__photo::after, .resale__item-img::after, .cart-item__img::after, .co-line__img::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background-image:var(--tex-light);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -42px 56px -32px rgba(28,46,71,.26);
}

/* ---------- Footer ---------- */
.footer{background:var(--navy);color:rgba(255,255,255,.72);margin-top:40px}
.footer__inner{
  max-width:var(--wrap);margin:0 auto;padding:44px clamp(20px,4vw,24px) 20px;
  display:grid;
  /* The newsletter column holds a whole card (intro, field, button, note),
     so it needs a floor. At 1.2fr it collapsed to ~239px and every line of
     Josie's copy wrapped two or three words at a time. */
  grid-template-columns:1.4fr 1fr 1fr minmax(280px,1.5fr);gap:32px;
}
.footer__brand .nav-logo span{font-size:24px}
.footer__tagline{font-family:var(--font-hand);font-size:19px;color:var(--gold-lt);margin:10px 0 6px}
.footer__note{font-size:13px;line-height:1.7;max-width:260px}
.footer__col h4{font-family:var(--font-head);font-size:15px;color:#fff;margin-bottom:12px;font-weight:600}
.footer__col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer__col a{font-size:13px;text-decoration:none;color:rgba(255,255,255,.72)}
.footer__col a:hover{color:var(--coral-lt)}
.footer__news p{font-size:13px;line-height:1.6;margin-bottom:12px}
.footer__news form{display:flex;gap:6px}
.footer__news input{
  flex:1;min-width:0;border:none;border-radius:8px;padding:9px 12px;font-family:var(--font-body);font-size:13px;
}

/* [jj_newsletter] renders a STACKED card — intro, field, button, note — not the
   one-line "email + button" signup the two .footer__news rules above were
   written for. Without these overrides the card inherits display:flex from
   `.footer__news form` and lays those four blocks out as ~70px columns, so
   every line wraps to a single word. Scoped to .jj-newsletter so the original
   inline form styling is untouched wherever it is still used. */
.footer__news .jj-newsletter form.form-card{display:block;gap:0}
.footer__news .jj-newsletter .form-intro{font-size:13px;line-height:1.6;margin:0 0 14px}
.footer__news .jj-newsletter .field{margin:0 0 12px}
.footer__news .jj-newsletter .field label{display:block;margin-bottom:6px;font-size:13px;font-weight:600}
.footer__news .jj-newsletter input[type=email]{flex:none;width:100%;box-sizing:border-box}
.footer__news .jj-newsletter .btn--block{display:block;width:100%}
.footer__news .jj-newsletter .form-note{font-size:12px;line-height:1.6;margin:12px 0 0;opacity:.85}
.footer__news .jj-newsletter .jj-hp{position:absolute;left:-9999px}

.footer__social{display:flex;gap:10px;margin-top:16px}
.footer__social a{
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;font-size:15px;text-decoration:none;
}
.footer__social a:hover{background:var(--coral)}
.footer__bar{
  border-top:1px solid rgba(255,255,255,.1);
  max-width:var(--wrap);margin:0 auto;padding:16px clamp(20px,4vw,24px);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:12px;color:rgba(255,255,255,.5);
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .footer__inner{grid-template-columns:1fr 1fr;gap:28px}
  .footer__brand,.footer__news{grid-column:1 / -1}
}
@media (max-width:520px){
  .cart-btn span.label{display:none}
  .footer__inner{grid-template-columns:1fr}
}

/* ============================================================
   Video (see jjstuff_video() / [jj_video] in functions.php)
   ============================================================ */
.jj-video{
  width:100%;height:100%;display:block;object-fit:cover;
  background:var(--cream);border-radius:var(--radius);
}
.jj-video[data-jj-autoplay]{pointer-events:none}

/* Honour the OS "reduce motion" setting: an ambient looping video is decorative,
   so pause it rather than forcing motion on someone who asked not to have it. */
@media (prefers-reduced-motion: reduce){
  .jj-video[data-jj-autoplay]{display:none}
}

/* Reserve layout space so media loading never shifts the page (CLS). */
.hero__media,.product-card__img,.gallery__ph,.resale__item-img{
  position:relative;overflow:hidden;background:var(--cream);
}
.product-card__img{aspect-ratio:1/1}
.resale__item-img{aspect-ratio:1/1}
.hero__photo{aspect-ratio:4/5}
.product-card__img img,.resale__item-img img,.gallery__ph img,.hero__media img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* ---------------------------------------------------------------------------
   WooCommerce button bridge.

   The theme defines .btn / .btn--primary, but WooCommerce renders its own
   buttons with class="button" (plus .alt on primary actions) and never gets
   those classes. Nothing in the theme styled .button, so every WooCommerce
   action in the store — Add to Cart, Reserve a Spot, Update Cart, Proceed to
   Checkout, Place Order — fell through to WooCommerce's default purple
   (#7f54b3), which is not in the JJ Stuff palette.

   Mapped here rather than by adding classes in a dozen templates, so buttons
   WooCommerce prints from its own uncustomised templates are covered too.

   Loaded last (the CSS glob enqueues alphabetically, so theme.css follows
   shop.css) and matched with the .woocommerce ancestor to clear WooCommerce's
   own specificity without !important.
--------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.woocommerce .checkout-button{
  font-family:var(--font-body);font-weight:700;font-size:15px;line-height:1;
  border-radius:var(--radius-sm);cursor:pointer;border:2px solid transparent;
  padding:0 20px;height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;transition:background .15s,border-color .15s,color .15s,transform .1s;
  background:var(--coral-cta);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 0 var(--coral-cta-dark), 0 6px 16px rgba(176,86,74,.32);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover{
  background:var(--coral-cta-dark);color:#fff;transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 0 var(--coral-cta-dark), 0 9px 22px rgba(176,86,74,.4);
}
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active{transform:translateY(1px)}

/* Disabled state must not read as a live coral CTA. */
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce a.button.disabled{
  background:var(--cream);color:var(--muted);box-shadow:none;cursor:not-allowed;
}

/* Secondary WooCommerce actions (Update Cart, Apply Coupon) read as navy
   outline, so the single primary action on the page stays unambiguous. */
.woocommerce button[name="update_cart"],
.woocommerce button[name="apply_coupon"]{
  background:transparent;color:var(--navy);border-color:var(--navy);box-shadow:none;
}
.woocommerce button[name="update_cart"]:hover,
.woocommerce button[name="apply_coupon"]:hover{background:var(--navy);color:#fff;box-shadow:none}

/* Quantity field, so it sits with the button instead of floating above it. */
.woocommerce div.product form.cart{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.woocommerce div.product form.cart div.quantity{margin:0;float:none}
.woocommerce .quantity input.qty{
  font-family:var(--font-body);font-weight:700;color:var(--navy);text-align:center;
  border:2px solid var(--cream);border-radius:var(--radius-sm);
  height:44px;width:72px;background:var(--warm-white);
}

/* ---------------------------------------------------------------------------
   WooCommerce notices and the cart remove control.

   Neither was styled anywhere, so both fell through to WooCommerce's defaults:
   the "remove item" control rendered as bare bright-red link text sitting on
   top of the quantity field, and add-to-cart / error notices arrived in
   WooCommerce's green-and-grey, which is not in this palette.
--------------------------------------------------------------------------- */
/* WooCommerce ships `.woocommerce a.remove { color: red !important; font-size:1.5em }`,
   so the override needs !important on colour and size to win. Kept as a small
   text link reading "Remove" rather than a bare ×: the word is clearer, and it
   stays a real accessible label instead of an icon needing aria text. */
.woocommerce a.remove,
.woocommerce a.cart-remove,
a.cart-remove.remove{
  display:inline-block;
  font-family:var(--font-body);
  font-size:12px !important;
  font-weight:700;
  line-height:1.2;
  width:auto !important;height:auto !important;
  padding:5px 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--cream);
  color:var(--muted) !important;
  background:transparent !important;
  text-decoration:none;text-indent:0 !important;
  transition:background .15s,color .15s,border-color .15s;
}
.woocommerce a.remove:hover,
.woocommerce a.cart-remove:hover,
a.cart-remove.remove:hover{
  background:var(--coral-pale) !important;
  color:var(--coral-cta-dark) !important;
  border-color:var(--coral-lt);
}

/* Notices. WooCommerce prints these above the content on cart/checkout. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border:1px solid var(--cream);border-left-width:4px;border-radius:var(--radius-sm);
  background:var(--warm-white);color:var(--navy);
  padding:14px 16px;margin:0 0 18px;list-style:none;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;
}
.woocommerce-message{border-left-color:var(--success)}
.woocommerce-info{border-left-color:var(--gold)}
.woocommerce-error{border-left-color:var(--coral-cta)}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{content:none}
.woocommerce-message .button,
.woocommerce-info .button{margin-left:auto}

/* Sold-out state on product cards. Navy so it reads as a status, not a
   promotion like the coral badges — and the card is desaturated so a browsing
   eye skips it without having to read the label. */
.badge--soldout{background:var(--navy);color:#fff;border-color:var(--navy)}
.product-card__badge--stock{top:auto;bottom:10px;left:10px;transform:rotate(0)}
.product-card:has(.badge--soldout) .product-card__img > img{filter:saturate(.55) opacity(.75)}
.product-card:has(.badge--soldout):hover{transform:none;box-shadow:var(--shadow-sm)}