/* ============================================================
   JJ Stuff — Homepage
   ============================================================ */

/* Section scaffold (reusable) */
.section{max-width:var(--wrap);margin:0 auto;padding:56px clamp(16px,4vw,24px)}
.section--tight{padding-top:0}
.section__head{text-align:center;margin-bottom:32px}
.section__eyebrow{font-family:var(--font-hand);font-size:24px;color:var(--gold-text);display:block;margin-bottom:2px;letter-spacing:.01em}
.section__title{font-family:var(--font-head);font-size:clamp(28px,4vw,38px);font-weight:600;line-height:1.08}
.section__sub{font-family:var(--font-editorial);font-style:italic;color:var(--muted);font-size:16px;margin-top:8px;max-width:520px;margin-inline:auto}
/* Stitched divider under the section heading */
.section__head .section__title{position:relative;display:inline-block;padding-bottom:14px}
.section__head .section__title::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:56px;height:0;border-top:2px dashed var(--coral-lt);opacity:.7}
.section__cta{text-align:center;margin-top:28px}

/* ---------- Hero ----------
   The hero was two flat cream gradients, which left a large empty wash on the
   copy side. It now layers a warm coral bloom, a gold counter-bloom, and a faint
   stitch grid — the same craft language as the dashed dividers — so the space
   reads as textured paper rather than blank page. All decoration is behind the
   content and pointer-events:none, so nothing here can intercept a click. */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 120% at 85% 10%, rgba(212,116,104,.10), transparent 55%),
    radial-gradient(90% 90% at 8% 92%, rgba(200,152,80,.10), transparent 60%),
    linear-gradient(180deg, var(--warm-white), var(--linen));
}
/* Stitch grid — 2px dashes on a 26px rhythm, barely visible but enough to stop
   the background reading as pure white on large screens. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(28,46,71,.045) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(28,46,71,.045) 0 1px, transparent 1px 26px);
  mask-image:radial-gradient(80% 70% at 30% 45%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(80% 70% at 30% 45%, #000 0%, transparent 72%);
}
/* A soft thread-loop mark drifting behind the copy, echoing the ✦ used on the
   category tiles. Decorative only — no text alternative needed. */
.hero::after{
  content:"✦";position:absolute;left:-2%;top:6%;z-index:0;pointer-events:none;
  font-family:var(--font-hand);font-size:min(30vw,340px);line-height:1;
  color:rgba(212,116,104,.055);
  animation:jj-drift 18s ease-in-out infinite;
}
@keyframes jj-drift{
  0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}
  50%    {transform:translate3d(0,-18px,0) rotate(2deg)}
}
.hero__inner > *{position:relative;z-index:1}

/* Entrance: a short staggered rise. Runs once, forwards, so nothing re-animates
   on scroll or resize. */
@keyframes jj-rise{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to  {opacity:1;transform:none}
}
.hero__eyebrow,.hero__title,.hero__sub,.hero__actions,.hero__trust,.hero__media{
  animation:jj-rise .62s cubic-bezier(.2,.8,.3,1) both;
}
.hero__eyebrow{animation-delay:.02s}
.hero__title  {animation-delay:.10s}
.hero__sub    {animation-delay:.18s}
.hero__actions{animation-delay:.26s}
.hero__trust  {animation-delay:.34s}
.hero__media  {animation-delay:.16s}
.hero__inner{
  max-width:var(--wrap);margin:0 auto;padding:clamp(32px,5vw,64px) clamp(16px,4vw,24px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;
}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-hand);
  font-size:22px;color:var(--coral-dark);margin-bottom:8px;
}
.hero__title{
  font-family:var(--font-head);font-size:clamp(38px,6vw,58px);line-height:1.02;
  color:var(--navy);margin-bottom:16px;letter-spacing:-.01em;
}
.hero__sub{font-size:clamp(16px,2vw,18px);color:var(--muted);line-height:1.6;max-width:440px;margin-bottom:26px}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}
.hero__trust{display:flex;gap:20px;margin-top:26px;flex-wrap:wrap}
.hero__trust > span{font-size:12.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}
.hero__media{position:relative}
.hero__photo{
  aspect-ratio:4/5;border-radius:18px;overflow:hidden;
  background:linear-gradient(150deg,#D48A7C,#C8836A 45%,#B85C50);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-hand);font-size:18px;color:rgba(255,255,255,.85);
  border:6px solid var(--warm-white);
  box-shadow:0 22px 50px -14px rgba(28,46,71,.3);
  transform:rotate(-1.5deg);
  /* The float is applied to the wrapper, not here, so it cannot fight the
     rotation this element already carries. */
}
/* The rise + its delay are declared once, above, with the rest of the stagger.
   Only the float belongs here — re-declaring `animation` would reset that delay. */
.hero__media .hero__photo{animation:jj-float 7s ease-in-out 1.2s infinite}
@keyframes jj-float{
  0%,100%{transform:rotate(-1.5deg) translate3d(0,0,0)}
  50%    {transform:rotate(-1deg)   translate3d(0,-9px,0)}
}
.hero__note{
  position:absolute;bottom:-14px;right:-10px;background:var(--warm-white);
  border:1px solid var(--cream);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow-md);
  display:flex;align-items:center;gap:10px;max-width:230px;transform:rotate(2.5deg);z-index:2;
}
.hero__note .sig{font-family:var(--font-hand);font-size:20px;color:var(--coral)}
.hero__note small{font-size:11.5px;color:var(--muted);line-height:1.4;display:block}

/* ---------- Category grid ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cat-card{
  position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2;
  display:flex;align-items:flex-end;text-decoration:none;color:#fff;
  box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s;
}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.cat-card::after{content:"";position:absolute;inset:0;background-image:var(--tex-light),linear-gradient(180deg,rgba(28,46,71,0) 28%,rgba(28,46,71,.42) 58%,rgba(28,46,71,.86) 100%);border-radius:inherit}
.cat-card::before{content:"✦";position:absolute;top:2px;right:16px;font-family:var(--font-hand);font-size:66px;line-height:1;color:rgba(255,255,255,.18);z-index:1;transition:transform .25s ease}
.cat-card:hover::before{transform:scale(1.12) rotate(-4deg)}
.cat-card__label{position:relative;z-index:2;padding:16px 18px;font-family:var(--font-head);font-size:22px;font-weight:600}
.cat-card__label::before{content:"";display:block;width:26px;height:3px;background:var(--gold-lt);border-radius:2px;margin-bottom:8px}
.cat-card__count{display:block;font-family:var(--font-body);font-size:12px;font-weight:600;opacity:.9;margin-top:3px}

/* ---------- Featured products ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* ---------- Made to order band ---------- */
.mto{background:var(--coral-pale)}
.mto__inner{
  max-width:var(--wrap);margin:0 auto;padding:52px clamp(16px,4vw,24px);
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
}
.mto__title{font-family:var(--font-head);font-size:clamp(26px,4vw,32px);font-weight:600;margin-bottom:12px}
.mto__text{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:22px;max-width:420px}
.timeline{display:flex;gap:0;margin-bottom:8px}
.timeline__step{flex:1;text-align:center;position:relative}
.timeline__dot{
  width:34px;height:34px;border-radius:50%;background:var(--coral);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 8px;font-weight:700;font-size:14px;
}
.timeline__step:not(:last-child)::after{
  content:"";position:absolute;top:17px;left:calc(50% + 22px);right:calc(-50% + 22px);height:2px;background:var(--coral-lt);
}
.timeline__label{font-size:12px;color:var(--navy);font-weight:700;line-height:1.3}
.timeline__label small{display:block;color:var(--muted);font-weight:600}
.mto__card{
  background:var(--warm-white);border:1px solid var(--coral-lt);border-radius:var(--radius);
  padding:28px;text-align:center;
}
.mto__card .badge{margin-bottom:14px}
.mto__card-title{font-family:var(--font-head);font-size:22px;margin-bottom:8px}
.mto__card-text{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:18px}

/* ---------- Resale spotlight ---------- */
.resale{background:var(--navy);color:#fff}
.resale__inner{
  max-width:var(--wrap);margin:0 auto;padding:56px clamp(16px,4vw,24px);
  display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;
}
.resale__eyebrow{font-family:var(--font-hand);font-size:22px;color:var(--gold-lt);margin-bottom:6px}
.resale__title{font-family:var(--font-head);font-size:clamp(26px,4vw,34px);font-weight:600;margin-bottom:14px}
.resale__text{color:rgba(255,255,255,.72);font-size:15px;line-height:1.7;margin-bottom:24px;max-width:400px}
.resale__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.resale__item{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:#fff}
.resale__item-img{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:var(--font-hand);font-size:13px;color:rgba(255,255,255,.8);position:relative}
.resale__item-body{padding:10px 12px}
.resale__item-title{font-family:var(--font-head);font-size:15px}
.resale__item-meta{font-size:11px;color:var(--gold-lt);margin-top:2px}

/* ---------- About teaser ---------- */
.about__inner{
  max-width:var(--wrap);margin:0 auto;padding:56px clamp(16px,4vw,24px);
  display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center;
}
.about__photo{
  aspect-ratio:1;border-radius:20px;background:linear-gradient(150deg,#A8B89A,#8BA898);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-hand);
  font-size:17px;color:rgba(255,255,255,.85);box-shadow:var(--shadow-md);
}
.about__eyebrow{font-family:var(--font-hand);font-size:22px;color:var(--gold-text);margin-bottom:6px}
.about__title{font-family:var(--font-head);font-size:clamp(26px,4vw,34px);font-weight:600;margin-bottom:16px}
.about__text{color:var(--muted);font-size:15.5px;line-height:1.8;margin-bottom:14px;font-family:var(--font-editorial)}
.about__sig{font-family:var(--font-hand);font-size:26px;color:var(--coral);margin:6px 0 22px}

/* ---------- Newsletter band ---------- */
.news{background:linear-gradient(180deg,var(--linen),var(--warm-white))}
.news__inner{max-width:640px;margin:0 auto;padding:56px clamp(16px,4vw,24px);text-align:center}
.news__title{font-family:var(--font-head);font-size:clamp(24px,4vw,30px);font-weight:600;margin-bottom:8px}
.news__sub{color:var(--muted);font-size:15px;margin-bottom:22px}
.news__form{display:flex;gap:10px;max-width:440px;margin:0 auto}
.news__form input{flex:1;min-width:0;border:2px solid var(--cream);border-radius:var(--radius-sm);padding:0 16px;height:48px;font-family:var(--font-body);font-size:15px;background:var(--warm-white)}
.news__form input:focus-visible{border-color:var(--coral)}
.news__hint{font-size:12px;color:var(--light);margin-top:12px}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .hero__inner{grid-template-columns:1fr;gap:36px}
  .hero__media{order:-1;max-width:360px;margin:0 auto}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .mto__inner,.resale__inner,.about__inner{grid-template-columns:1fr;gap:28px}
  .about__photo{max-width:340px;margin:0 auto}
  .resale__inner{text-align:center}
  .resale__text,.hero__sub{margin-inline:auto}
}
@media (max-width:560px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .resale__grid{grid-template-columns:repeat(2,1fr)}
  .news__form{flex-direction:column}
  .news__form .btn{width:100%}
  .hero__actions{flex-direction:column}
  .hero__actions .btn{width:100%}
}

/* Hero image fills the 4/5 slot. The photo shipped in assets/images is exactly
   960x1200, so object-fit has nothing to crop; a Customizer upload of another
   ratio is cropped to the slot rather than distorting the layout. */
.hero__photo img{width:100%;height:100%;object-fit:cover;display:block}

/* Category tiles carry a real photo from that category. The gradient set
   inline on .cat-card stays underneath as the fallback for a category with no
   photographed products, and .cat-card::after keeps its scrim over the top so
   the label contrast holds against any image. */
.cat-card__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit;z-index:0;
  transition:transform .35s ease;
}
.cat-card{overflow:hidden}
.cat-card:hover .cat-card__img{transform:scale(1.05)}
.cat-card::after{z-index:1}
.cat-card::before{z-index:2}
.cat-card__label{z-index:3}
@media (prefers-reduced-motion:reduce){
  .cat-card:hover .cat-card__img{transform:none}
  /* Everything decorative in the hero resolves to its final state instantly.
     The staggered rise uses `both`, so without this the copy would be stuck at
     opacity 0 for anyone who asked for less motion. */
  .hero::after,
  .hero__eyebrow,.hero__title,.hero__sub,.hero__actions,.hero__trust,
  .hero__media,.hero__media .hero__photo{
    animation:none;opacity:1;transform:none;
  }
  .hero__media .hero__photo{transform:rotate(-1.5deg)}
  .nav-logo:hover img{transform:none}
}

/* Portrait in the "meet the maker" block. Cropped from the top so a subject's
   face stays in frame when a tall photo lands in this squarer slot. */
.about__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;border-radius:inherit}

/* Label legibility over photography.
   The tiles previously sat on flat brand gradients, where white text was
   always safe. Over real photographs — several of which are pale linen — the
   old scrim (transparent to 38%, then 0.6 navy) left "Clothing" and
   "Home & Kitchen" failing WCAG AA at mobile tile heights, where there is
   less vertical room for the gradient to ramp up. The scrim above now starts
   ramping earlier and finishes darker; this text shadow is the second line of
   defence for an unusually bright photo. */
.cat-card__label{text-shadow:0 1px 3px rgba(28,46,71,.55)}