:root{
  --ink:#150B0D; --crimson:#C00321; --crimson-deep:#8C0019;
  --nude:#E8C9B0; --cream:#FAF3EC; --muted:#8C7367;
  --border:rgba(21,11,13,0.12); --surface:#FFFFFF;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:inherit; margin:0;}
html{scroll-padding-top:72px; scroll-behavior:smooth;}
body{background:var(--cream); color:var(--ink); font-family:"Work Sans",-apple-system,sans-serif; line-height:1.55; overflow-x:hidden;}
h1,h2,h3{font-family:"Fraunces",Georgia,serif; font-weight:500; line-height:1.05; margin:0;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
.spicy-eyebrow{font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--crimson);}
.reveal{opacity:0; transform:translateY(24px); transition:opacity 0.8s ease, transform 0.8s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} *{animation:none !important; transition:none !important;} }

/* header */
.spicy-header{
  position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 2.5rem; padding-top:calc(1.1rem + env(safe-area-inset-top,0px));
  background:transparent; color:var(--cream);
  transition:background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease, color 0.4s ease;
  animation:headerIn 0.9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes headerIn{ from{opacity:0; transform:translateY(-14px);} to{opacity:1; transform:none;} }
.spicy-header.scrolled{ background:var(--cream); box-shadow:0 2px 20px rgba(21,11,13,0.08); border-bottom:1px solid var(--border); padding:0.7rem 2.5rem; color:var(--ink);}
.spicy-header.scrolled .spicy-icon-btn svg{stroke:var(--ink);}
.spicy-header.scrolled .spicy-nav a{color:var(--ink);}
.spicy-logo{display:inline-flex; align-items:center; background:var(--cream); padding:0.4rem 0.9rem; border-radius:3px; box-shadow:0 1px 6px rgba(21,11,13,0.1); transition:box-shadow 0.4s ease, padding 0.3s ease;}
.spicy-header.scrolled .spicy-logo{box-shadow:none; padding:0.25rem 0.7rem;}
.spicy-logo .wp-block-site-logo img{height:46px; width:auto; display:block; transition:height 0.3s ease;}
.spicy-header.scrolled .spicy-logo .wp-block-site-logo img{height:36px;}
.spicy-nav ul{list-style:none; display:flex; gap:2rem; padding:0; font-size:0.78rem; letter-spacing:0.07em; text-transform:uppercase;}
.spicy-nav a{position:relative; padding-bottom:4px;}
.spicy-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width 0.3s ease, background 0.4s ease;}
.spicy-header.scrolled .spicy-nav a::after{background:var(--crimson);}
.spicy-nav a:hover::after{width:100%;}
.spicy-header-icons{display:flex; gap:1.1rem; align-items:center;}
.spicy-icon-btn{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; transition:transform 0.25s ease, background 0.25s ease; position:relative;}
.spicy-icon-btn:hover{transform:translateY(-1px); background:rgba(192,3,33,0.08);}
.spicy-icon-btn svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.5;}
.spicy-menu-toggle{display:none;}
.spicy-search-form{position:absolute; top:100%; right:2.5rem; margin-top:0.5rem; max-width:320px; width:calc(100% - 5rem);
  opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity 0.3s ease, transform 0.3s ease;}
.spicy-search-form.open{opacity:1; transform:none; pointer-events:auto;}
.spicy-search-form input{width:100%; background:var(--cream); border:1px solid var(--border); padding:0.7rem 1rem; font-size:0.85rem; font-family:inherit; color:var(--ink);}
@media (max-width:860px){
  .spicy-nav{display:none;}
  .spicy-menu-toggle{display:flex;}
  .spicy-header{padding:0.75rem 1rem;}
  .spicy-logo .wp-block-site-logo img{height:34px;}
  .spicy-header.scrolled .spicy-logo .wp-block-site-logo img{height:30px;}
  .spicy-logo{padding:0.3rem 0.6rem;}
  .spicy-search-icon, .spicy-account-icon, .spicy-wishlist-icon{display:none;}
  .spicy-header-icons{gap:0.75rem;}
  .spicy-search-form{right:1rem; width:calc(100% - 2rem);}
}

/* mobile drawer */
.spicy-mobile-drawer{position:fixed; top:0; right:0; bottom:0; width:min(84vw,340px); z-index:70; background:var(--cream); color:var(--ink);
  padding:1.5rem; padding-top:calc(1.5rem + env(safe-area-inset-top,0px)); transform:translateX(100%); transition:transform 0.5s cubic-bezier(.2,.8,.2,1);}
.spicy-mobile-drawer.open{transform:translateX(0);}
.spicy-drawer-backdrop{position:fixed; inset:0; z-index:65; background:rgba(21,11,13,0.5); opacity:0; pointer-events:none; transition:opacity 0.4s ease;}
.spicy-drawer-backdrop.open{opacity:1; pointer-events:auto;}
.spicy-drawer-close{width:34px; height:34px; display:flex; align-items:center; justify-content:center; margin-left:auto;}
.spicy-drawer-close svg{width:20px; height:20px; stroke:var(--ink); fill:none; stroke-width:1.5;}
.spicy-mobile-drawer nav ul{list-style:none; padding:0; margin-top:2rem; display:flex; flex-direction:column; gap:1.5rem; font-family:"Fraunces",serif; font-style:italic; font-size:1.4rem;}
.spicy-drawer-utility{margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:1.1rem;}
.spicy-drawer-util-link{display:flex; align-items:center; gap:0.75rem; font-size:0.85rem; letter-spacing:0.03em;}
.spicy-drawer-util-link svg{width:17px; height:17px; stroke:var(--ink); fill:none; stroke-width:1.5;}
@media (prefers-reduced-motion: reduce){ .spicy-mobile-drawer, .spicy-drawer-backdrop{transition:none;} }

/* hero */
.spicy-hero{position:relative; height:92vh; min-height:560px; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink);}
.spicy-hero-bg{position:absolute; inset:0;
   background-image:
     var(--spicy-hero-photo, none),
     radial-gradient(ellipse at 70% 20%, rgba(161,19,49,0.6), transparent 55%),
     radial-gradient(ellipse at 15% 85%, rgba(232,201,176,0.12), transparent 50%),
     linear-gradient(200deg, #2A0C13 0%, var(--ink) 65%);
   background-size:cover; background-position:center;
   animation:drift 18s ease-in-out infinite alternate;
}
/* Film-grain texture so the gradient reads as a photographic surface
   rather than a flat fill — and blends seamlessly once a real photo
   is set as --spicy-hero-photo (see note below). */
.spicy-hero-bg::after{
   content:""; position:absolute; inset:0; opacity:0.5; mix-blend-mode:overlay; pointer-events:none;
   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.spicy-hero-bg::before{
   content:""; position:absolute; inset:0; z-index:1;
   background:linear-gradient(to top, var(--ink) 0%, rgba(21,11,13,0.35) 45%, rgba(21,11,13,0.15) 100%);
}
@keyframes drift{ from{transform:scale(1.02) translateY(0);} to{transform:scale(1.08) translateY(-1.5%);} }
/* The real product photo injected by [spicy_hero_image] — sits below
   the grain (::after) and legibility gradient (::before) above. */
.spicy-hero-bg .spicy-real-photo-link{position:absolute; inset:0; display:block;}
.spicy-hero-bg .spicy-real-photo-link img{width:100%; height:100%; object-fit:cover; display:block; opacity:0.88;}
/*
  To use a real campaign photo once you have one: Appearance > Editor >
  Styles > (or Customizer, if available) isn't wired for this yet — the
  fastest path is Appearance > Theme File Editor > assets/css/custom.css,
  and set --spicy-hero-photo on :root, e.g.:
    :root{ --spicy-hero-photo:url('/wp-content/uploads/2026/10/hero.jpg'); }
  Upload the photo via Media Library first, copy its URL, paste it in.
  The gradients and grain above are written to sit over any photo you
  add, so it blends rather than looking pasted on.
*/
.spicy-hero-content{position:relative; z-index:2; color:var(--cream); padding:0 2.5rem 4.5rem; max-width:760px;}
.spicy-hero-content .spicy-eyebrow{color:var(--nude);}
.spicy-hero-content h1{font-size:clamp(2.8rem,7vw,5.6rem); font-style:italic; margin-top:0.6rem;
  background:linear-gradient(100deg, var(--cream) 30%, var(--nude) 45%, var(--cream) 60%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 6s ease-in-out infinite;}
@keyframes shimmer{ 0%{background-position:0% center;} 50%{background-position:100% center;} 100%{background-position:0% center;} }
@media (prefers-reduced-motion: reduce){ .spicy-hero-content h1{animation:none;} }
.spicy-hero-content p{max-width:40ch; margin-top:1.1rem; font-size:1.05rem; color:var(--nude);}
.spicy-hero-ctas{display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap;}
.spicy-btn{display:inline-flex; align-items:center; gap:0.5rem; padding:0.95rem 1.9rem; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; border:1px solid var(--cream); transition:background 0.3s ease,color 0.3s ease, transform 0.25s ease;}
.spicy-btn:hover{transform:translateY(-2px);}
.spicy-btn::after{content:"→"; display:inline-block; transition:transform 0.3s ease;}
.spicy-btn:hover::after{transform:translateX(4px);}
.spicy-btn-solid{background:var(--cream); color:var(--ink);}
.spicy-btn-solid:hover{background:var(--crimson); border-color:var(--crimson); color:var(--cream);}
.spicy-btn-outline{color:var(--cream);}
.spicy-btn-outline:hover{background:rgba(250,243,236,0.1);}
.spicy-scroll-cue{position:absolute; bottom:1.5rem; left:2.5rem; z-index:2; width:1px; height:46px; background:rgba(250,243,236,0.5); overflow:hidden;}
.spicy-scroll-cue::after{content:"";position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--cream); animation:cue 2.2s ease-in-out infinite;}
@keyframes cue{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

section{padding:5.5rem 2.5rem;}
.spicy-trust-strip{display:flex; justify-content:center; gap:3rem; flex-wrap:wrap; padding:2.4rem 1.5rem; border-bottom:1px solid var(--border);}
.spicy-trust-item{display:flex; align-items:center; gap:0.6rem; font-size:0.75rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted);}
.spicy-trust-item svg{width:20px; height:20px; stroke:var(--crimson); fill:none; stroke-width:1.4;}
@media (max-width:640px){ .spicy-trust-strip{gap:1.6rem 2rem; padding:1.8rem 1rem;} .spicy-trust-item{font-size:0.68rem;} }
.spicy-section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:2.5rem; gap:1rem; flex-wrap:wrap;}
.spicy-section-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem); font-style:italic;}
.spicy-section-head p{color:var(--muted); max-width:38ch; font-size:0.95rem;}
.spicy-view-all{font-size:0.78rem; letter-spacing:0.07em; text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:3px; white-space:nowrap;}

/* collections */
.spicy-collections{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;}
.spicy-collection-card{position:relative; aspect-ratio:3/4; overflow:hidden; cursor:pointer;}
.spicy-collection-card .ph{position:absolute; inset:0; display:block; overflow:hidden; transition:transform 0.9s cubic-bezier(.2,.8,.2,1);}
.spicy-collection-card:hover .ph{transform:scale(1.07);}
.spicy-collection-card .ph img{width:100%; height:100%; object-fit:cover; display:block;}
/* Shown only until a category has at least one product with a photo —
   the moment spicy_category_image finds a real product, this is
   replaced by the <img> above and never seen. */
.spicy-collection-card:nth-child(1) .ph{background:linear-gradient(155deg,#3A0F1B,var(--crimson));}
.spicy-collection-card:nth-child(2) .ph{background:linear-gradient(155deg,var(--nude),#C9A98A);}
.spicy-collection-card:nth-child(3) .ph{background:linear-gradient(155deg,var(--ink),#3A2228);}
.spicy-collection-card::before{content:"";position:absolute; inset:0; background:linear-gradient(to top,rgba(21,11,13,0.55),transparent 55%); z-index:1;}
.spicy-collection-label{position:absolute; left:1.4rem; bottom:1.4rem; z-index:2; color:var(--cream);}
.spicy-collection-label .spicy-eyebrow{color:var(--nude);}
.spicy-collection-label h3{font-size:1.5rem; font-style:italic; margin-top:0.3rem;}
.spicy-collection-label span.cta{display:inline-block; margin-top:0.6rem; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; border-bottom:1px solid var(--cream); opacity:0; transform:translateY(6px); transition:opacity 0.3s ease, transform 0.3s ease;}
.spicy-collection-card:hover .cta{opacity:1; transform:none;}

/* product grid */
.spicy-product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2rem 1.5rem;}
.spicy-product-card{position:relative;}
.spicy-product-image{position:relative; aspect-ratio:3/4; overflow:hidden; background:
    repeating-linear-gradient(135deg, rgba(21,11,13,0.04) 0 2px, transparent 2px 9px),
    linear-gradient(165deg,var(--nude),#f0e2d3); box-shadow:inset 0 0 0 1px var(--border);}
.spicy-product-image .ph2{position:absolute; inset:0; opacity:0; background:
    repeating-linear-gradient(135deg, rgba(21,11,13,0.04) 0 2px, transparent 2px 9px),
    linear-gradient(165deg,#f0e2d3,var(--nude)); transition:opacity 0.4s ease;}
.spicy-product-card:hover .ph2{opacity:1;}
.spicy-badge{position:absolute; top:0.75rem; left:0.75rem; font-size:0.65rem; letter-spacing:0.06em; text-transform:uppercase; background:var(--crimson); color:var(--cream); padding:0.3rem 0.6rem; z-index:2;}
.spicy-wishlist-btn{position:absolute; top:0.75rem; right:0.75rem; z-index:2; width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:rgba(250,243,236,0.85); opacity:0; transform:translateY(-4px); transition:opacity 0.3s ease, transform 0.3s ease;}
.spicy-wishlist-btn:hover svg{fill:var(--crimson); stroke:var(--crimson); transition:fill 0.25s ease, stroke 0.25s ease;}
.spicy-product-card:hover .spicy-wishlist-btn{opacity:1; transform:none;}
.spicy-quick-add{position:absolute; left:0.75rem; right:0.75rem; bottom:0.75rem; z-index:2; background:var(--ink); color:var(--cream); text-align:center; padding:0.65rem; font-size:0.72rem; letter-spacing:0.07em; text-transform:uppercase; opacity:0; transform:translateY(8px); transition:opacity 0.3s ease, transform 0.3s ease;}
.spicy-product-card:hover .spicy-quick-add{opacity:1; transform:none;}
.spicy-product-info{padding-top:0.8rem; display:flex; justify-content:space-between; align-items:baseline; gap:0.5rem;}
.spicy-product-info h4{font-family:"Fraunces",serif; font-style:italic; font-weight:500; font-size:1rem;}
.spicy-product-info .price{font-size:0.85rem; color:var(--muted); white-space:nowrap;}
.price .sale{color:var(--crimson); margin-left:0.4rem;}
.spicy-rating{display:flex; gap:2px; margin-top:0.35rem;}
.spicy-rating svg{width:12px; height:12px; fill:var(--crimson); stroke:none;}
.spicy-rating svg.empty{fill:var(--border);}

/* editorial */
.spicy-editorial{position:relative; min-height:62vh; display:flex; align-items:center; background:var(--ink); color:var(--cream); overflow:hidden;}
.spicy-editorial .ph3{position:absolute; inset:0; background:radial-gradient(ellipse at 30% 60%,rgba(161,19,49,0.4),transparent 60%), linear-gradient(100deg,#120A0B,#2A131A);}
.spicy-editorial-content{position:relative; z-index:2; max-width:600px; padding:0 2.5rem;}
.spicy-editorial-content h2{font-size:clamp(2.2rem,5vw,3.6rem); font-style:italic;}
.spicy-editorial-content p{margin-top:1rem; color:var(--nude); max-width:42ch;}
.spicy-editorial-content .spicy-btn{margin-top:1.8rem;}

/* brand statement */
.spicy-statement{text-align:center; padding:7rem 2.5rem;}
.spicy-statement h2{font-size:clamp(2rem,6vw,4rem); font-style:italic; line-height:1.15;}

/* newsletter */
.spicy-newsletter{position:relative; overflow:hidden; background:var(--nude); padding:5.5rem 2.5rem; display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center;}
.spicy-newsletter > div{position:relative; z-index:2;}

/* Isometric cube cluster — decorative, mouse-reactive on desktop.
   Built as a single pre-computed SVG (true isometric grid projection,
   verified to tile with no gaps/overlap) rather than CSS transform
   tricks, so it renders identically and correctly everywhere. JS only
   adds a gentle mouse-follow translate on top of this static artwork. */
.spicy-cube-decor{position:absolute; top:50%; right:-20px; z-index:1; width:300px;
  transform:translateY(-50%); transition:transform 0.6s cubic-bezier(.2,.8,.2,1); pointer-events:none; opacity:0.9;}
.spicy-cube-decor svg{width:100%; height:auto; display:block;}
@media (prefers-reduced-motion: reduce){ .spicy-cube-decor{transition:none;} }
/* On phones the newsletter stacks to one column (see the 760px rule
   below), so the cube cluster moves to a smaller corner accent behind
   the heading instead of a large side panel — sized down and faded
   back so it reads as texture, not something fighting the text for
   attention. No mouse-follow on touch anyway (handled in JS), so it's
   simply static art here. */
@media (max-width:760px){
  .spicy-cube-decor{
    width:150px; top:-18px; right:-28px; left:auto;
    transform:none !important; opacity:0.35;
  }
}
.spicy-newsletter h2{font-style:italic; font-size:clamp(2.2rem,5vw,3.4rem);}
.spicy-newsletter p{color:var(--ink); opacity:0.75; max-width:40ch;}
.spicy-nl-form{display:flex; gap:0; margin-top:1.5rem; max-width:420px;}
@media (max-width:760px){ .spicy-newsletter{grid-template-columns:1fr; text-align:left;} }
.spicy-nl-form input{flex:1; background:transparent; border:1px solid var(--ink); border-right:none; padding:0.9rem 1rem; font-size:0.85rem; font-family:inherit;}
.spicy-nl-form button{background:var(--ink); color:var(--cream); padding:0.9rem 1.4rem; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;}
.spicy-nl-form button:hover{background:var(--crimson);}

/* footer */
footer{background:var(--ink); color:var(--cream); padding:4.5rem 2.5rem 2rem;}
.spicy-foot-grid{display:grid; grid-template-columns:1.8fr 1fr 1fr; gap:2.5rem; max-width:1000px; margin-inline:auto;}
.spicy-foot-grid h4{font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--nude); margin-bottom:1rem;}
.spicy-foot-grid ul{list-style:none; padding:0; display:flex; flex-direction:column; gap:0.6rem; font-size:0.85rem; opacity:0.85;}
.spicy-foot-grid ul a:hover{color:var(--crimson);}
.spicy-foot-bottom{max-width:1000px; margin:3rem auto 0; padding-top:1.5rem; border-top:1px solid rgba(250,243,236,0.12); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:0.78rem; opacity:0.75;}
.spicy-foot-left{display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap;}
.spicy-foot-left a:hover{color:var(--crimson);}
.spicy-foot-social{display:flex; gap:0.9rem;}
.spicy-foot-social a{display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; transition:background 0.25s ease;}
.spicy-foot-social a:hover{background:rgba(192,3,33,0.25);}
.spicy-foot-social svg{width:15px; height:15px; stroke:var(--cream); fill:none; stroke-width:1.4;}

/* WooCommerce product blocks: crossfade hover instead of scale/zoom pop,
   sale price in crimson to match the rest of the palette */
.wc-block-product-template .wc-block-product .wc-block-components-product-image{position:relative; overflow:hidden; aspect-ratio:3/4;}
.wc-block-product-template .wc-block-product .wc-block-components-product-image img:nth-child(2){position:absolute; inset:0; opacity:0; transition:opacity 0.35s ease;}
.wc-block-product-template .wc-block-product:hover .wc-block-components-product-image img:nth-child(2){opacity:1;}
.wc-block-components-product-price__value.is-discounted{color:var(--crimson);}
.wc-block-grid__product-onsale, .wc-block-components-product-sale-badge{background:var(--crimson) !important; color:var(--cream) !important; border-radius:0 !important;}
@media (prefers-reduced-motion: reduce){
  .wc-block-product-template .wc-block-product .wc-block-components-product-image img{transition:none !important;}
}
/* Mobile: stack any two-column split instead of squeezing narrow columns */
@media (max-width:782px){
  .wp-block-columns.alignfull{flex-wrap:wrap;}
  .wp-block-columns.alignfull > .wp-block-column{flex-basis:100% !important;}
}

a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--crimson); outline-offset:2px;}

@media (max-width:860px){
  .spicy-collections{grid-template-columns:1fr;}
  .spicy-product-grid{grid-template-columns:repeat(2,1fr);}
  .spicy-foot-grid{grid-template-columns:1fr 1fr; row-gap:2.2rem;}
  .spicy-foot-bottom{flex-direction:column; align-items:flex-start;}
  section{padding:3.5rem 1.25rem;}
  .spicy-hero-content{padding:0 1.25rem 3rem;}
}