/*
 * WordPress-only adjustments on top of the design stylesheet (style.css).
 * Keep this small: the design itself is never edited here.
 */

/* Admin bar (logged-in editors only): keep the fixed header below it. */
.admin-bar .header{ top:32px; }
@media (max-width:782px){
  .admin-bar .header{ top:46px; }
}

/* Disabled buy button (sold out). */
.buy .btn[disabled]{ opacity:.55; cursor:not-allowed; }
.buy .btn[disabled] .btn__ico--move{ transform:none; }

/* Sending state for forms submitted to Fluent Forms. */
form.is-sending button[type="submit"]{ opacity:.6; pointer-events:none; }

/* No drop shadows under images (client request 2026-10-05). */
.product__media,
.cat__media,
.care__item,
.care__item:hover,
.fan__item{ box-shadow:none; }

/* ---------------------------------------------------------------------------
   Low photo hero for category pages (.stage--banner, on top of .stage--photo):
   about a third of the full hero, so the product grid starts above the fold.
   ------------------------------------------------------------------------- */
.stage--banner{ min-height:0; }
.stage--banner .stage__top{ flex:0 0 auto; }
.stage--banner .stage__intro{ margin-top:clamp(36px, 4.4vw, 68px); gap:clamp(12px, 1.2vw, 18px); }
.stage--banner .stage__title{ font-size:clamp(2rem, 3.3vw, 3.1rem); max-width:20em; }
.stage--banner .stage__blurb{
  max-width:56ch; font-size:clamp(14.5px, 1.05vw, 16px); line-height:1.65; color:rgba(247,239,236,.78);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.stage--banner .stage__bottom{ flex:0 0 auto; padding-top:0; padding-bottom:clamp(40px, 4.6vw, 72px); }

/* Sub-category tabs + trust line, a slim light row right under the hero. */
.subnav{
  background:var(--paper); border-radius:var(--panel-r);
  margin-bottom:var(--panel-gap);
}
.subnav__inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px 32px;
  min-height:64px;
}
.subnav__links{ display:flex; align-items:center; gap:clamp(18px, 2.2vw, 34px); overflow-x:auto; scrollbar-width:none; }
.subnav__links::-webkit-scrollbar{ display:none; }
.subnav__links a{
  position:relative; flex:0 0 auto; padding-block:20px;
  font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; transition:color .25s var(--ease);
}
.subnav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:14px; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.subnav__links a:hover{ color:var(--ink); }
.subnav__links a:hover::after{ transform:scaleX(1); }
.subnav__trust{ flex:0 0 auto; margin:0; font-size:11.5px; letter-spacing:.08em; color:var(--ink-mute); }
@media (max-width:980px){
  .stage--banner .stage__intro{ margin-top:clamp(20px, 6vw, 40px); }
  .stage--banner .stage__title{ font-size:clamp(1.75rem, 7vw, 2.3rem); }
  .subnav__trust{ display:none; }
}

/* Product grid directly under the hero: less air before the first row. */
:is(.hero, .subnav) + .section.products{ padding-top:clamp(20px, 2vw, 30px); }
:is(.hero, .subnav) + .section.products .sec-head{ margin-bottom:clamp(18px, 2vw, 28px); padding-bottom:14px; }
:is(.hero, .subnav) + .section.products .sec-head .sec-title{ font-size:clamp(1.4rem, 2.2vw, 2rem); }

/* Compact heading over the grid on category pages: count + title on one line. */
:is(.hero, .subnav) + .section.products .sec-head{ display:flex; align-items:baseline; gap:8px 18px; flex-wrap:wrap; }
:is(.hero, .subnav) + .section.products .sec-head > div{ display:flex; align-items:baseline; gap:8px 18px; flex-wrap:wrap; }
:is(.hero, .subnav) + .section.products .sec-head .eyebrow{ margin:0; order:2; }
:is(.hero, .subnav) + .section.products .sec-head .sec-note{ display:none; }

/* Mobile product grids: two per row (shop standard), compact card text. */
@media (max-width:680px){
  .products .grid-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px 12px; }
  .products .grid-4 .product__body{ padding-top:10px; }
  .products .grid-4 .product__cat{ font-size:9.5px; letter-spacing:.14em; margin-bottom:4px; }
  .products .grid-4 .product__name{ font-size:15px; line-height:1.25; }
  .products .grid-4 .product__meta{ display:none; }
  .products .grid-4 .product__price{ font-size:14px; margin-top:4px; }
  .products .grid-4 .product__hint{ display:none; }
  .products .grid-4 .product__buy{ padding-top:10px; }
  /* Category hero on phones: title, shortcuts and nothing else. */
  .stage--banner .stage__blurb,
  .stage--banner .stage__bottom{ padding-bottom:18px; }
}

/* Lists inside a reason's text are ordinary prose lists: undo the numbered
   grid row that .reasons li gives every li (it squeezed links into a narrow
   column with borders between them). */
.reasons .prose li{
  display:block;
  padding:0 0 0 22px;
  border-top:0;
  counter-increment:none;
}
.reasons .prose li + li{ margin-top:8px; }
.reasons .prose ul,
.reasons .prose ol{ margin-top:10px; }

/* The hidden attribute always wins over component display rules
   (e.g. .favs__empty{display:grid} showed the empty state next to products). */
[hidden]{ display:none !important; }

/* Inner pages: the front page's photo hero, a little lower (.stage--inner). */
.stage--inner{ min-height:min(68vh, 640px); }
@media (max-width:980px){ .stage--inner{ min-height:min(62vh, 560px); } }
.stage--photo .crumbs ol{ color:rgba(247,239,236,.8); }

/* Products mega menu in a light version (client request 2026-10-05). */
.mega__inner{
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink);
  box-shadow:0 40px 80px -44px rgba(47,40,43,.35);
}
.mega__media{ background:var(--tile); }
.mega__name{ color:var(--ink); }
.mega__card:hover .mega__name{ color:var(--gold); }
.mega__foot{ border-top-color:var(--line); }
.mega__links a{ color:var(--ink-soft); }
.mega__links a:hover{ color:var(--gold); }
.mega__note{ color:var(--ink-mute); }

/* ---------------------------------------------------------------------------
   Article cards (guides): no background image, editorial meta.
   ------------------------------------------------------------------------- */
.articles__grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(14px, 1.6vw, 22px); }
@media (max-width:980px){ .articles__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:620px){ .articles__grid{ grid-template-columns:1fr; } }
.art-filter{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 auto clamp(22px,2.4vw,34px); }
.art-filter__chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px;
  border:1px solid var(--line); border-radius:var(--pill-r); background:var(--paper);
  font:inherit; font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); cursor:pointer; transition:border-color .2s, background .2s, color .2s;
}
.art-filter__chip span{ font-size:11px; color:var(--ink-mute); letter-spacing:0; }
.art-filter__chip:hover{ border-color:var(--ink); }
.art-filter__chip.is-active{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.art-filter__chip.is-active span{ color:rgba(255,255,255,.65); }
.articles__grid .post-card[hidden]{ display:none !important; }
@media (max-width:620px){
  .art-filter{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; margin-inline:-16px; padding:0 16px 4px; scrollbar-width:none; }
  .art-filter__chip{ flex:0 0 auto; }
}
.post-card{ height:100%; }
.post-card__link{
  height:100%; display:flex; flex-direction:column; gap:14px;
  padding:clamp(22px, 2.2vw, 30px);
  background:var(--cream-soft); border:1px solid var(--line); border-radius:var(--card-r);
  color:var(--ink); text-decoration:none;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.post-card__link:hover{ background:var(--paper); border-color:var(--gold-line); transform:translateY(-3px); }
.post-card__meta{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }
.post-card__cat{ padding:5px 10px; border-radius:var(--pill-r); background:var(--paper); border:1px solid var(--gold-line); color:var(--gold); }
.post-card__link:hover .post-card__cat{ background:var(--cream-soft); }
.post-card__title{ font-size:clamp(1.25rem, 1.6vw, 1.5rem); line-height:1.2; }
.post-card__excerpt{ font-size:14.5px; line-height:1.65; color:var(--ink-soft); font-weight:300; }
.post-card__foot{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:12.5px; color:var(--ink-mute);
}
.post-card__cta{ display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.post-card__cta svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease); }
.post-card__link:hover .post-card__cta svg{ transform:translateX(4px); }

/* Dark sections (Materialet, "Steg for steg"): near-white, readable text.
   Steps are no longer dimmed before they are reached; the active step is
   still marked by its lit number. (client request 2026-10-05) */
.js .timeline .tl__body{ opacity:1; }
.section--dark .tl h3{ color:#FBF9F4; }
.section--dark .tl p,
.section--dark .tl li{ color:rgba(255,251,249,.9); font-weight:400; }
.section--dark .tl p.tl__kicker{ color:var(--gold-soft); font-weight:500; }
.section--dark .tl__marker{ color:rgba(255,251,249,.8); border-color:rgba(255,255,255,.22); }
.section--dark .tl__badge{ color:rgba(255,251,249,.9); }
.section--dark .sec-note--light{ color:rgba(255,251,249,.88); font-style:normal; }
.section--dark .material__art figcaption{ color:rgba(255,251,249,.75); }
.section--dark .eyebrow--light{ color:var(--gold-soft); }

/* Hero title and intro show at once: no wipe-in (client request 2026-10-05). */
.js .stage__title,
.js .stage__blurb,
.js.is-ready .stage__title,
.js.is-ready .stage__blurb{ clip-path:none; transition:none; }
.subnav__links{ flex:1 1 auto; min-width:0; }
.subnav__links:has(a:nth-child(5)){ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent); padding-right:40px; }
@media (max-width:1380px){ .subnav__trust{ display:none; } }

/* ---------------------------------------------------------------------------
   Instant search overlay (inc/search.php, assets/js/search.js)
   ------------------------------------------------------------------------- */
.search{ position:fixed; inset:0; z-index:400; }
.search__scrim{ position:absolute; inset:0; background:rgba(47,40,43,.38); opacity:0; transition:opacity .25s var(--ease); }
.search__panel{
  position:relative; z-index:1; background:var(--paper);
  border-radius:0 0 var(--panel-r) var(--panel-r);
  box-shadow:0 30px 60px -40px rgba(47,40,43,.6);
  transform:translateY(-16px); opacity:0; transition:transform .3s var(--ease), opacity .25s var(--ease);
  max-height:min(86vh, 760px); display:flex; flex-direction:column;
}
.search.is-open .search__scrim{ opacity:1; }
.search.is-open .search__panel{ transform:none; opacity:1; }
html.search-open{ overflow:hidden; }
.search__form{ display:flex; align-items:center; gap:16px; padding-block:22px; border-bottom:1px solid var(--line); }
.search__ico{ width:22px; height:22px; flex:0 0 auto; fill:none; stroke:var(--ink); stroke-width:1.4; }
.search__input{
  flex:1 1 auto; min-width:0; border:0; background:none; outline:none;
  font-family:var(--display); font-size:clamp(20px,2.2vw,28px); color:var(--ink);
}
.search__input::placeholder{ color:var(--ink-faint); }
.search__input::-webkit-search-cancel-button{ display:none; }
.search__close{ width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:none; cursor:pointer; color:var(--ink); }
.search__close svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.4; }
.search__close:hover{ border-color:var(--ink); }
.search__body{ overflow-y:auto; padding-block:22px 30px; }
.search__label{ margin:0 0 12px; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.search__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.search__chips button{
  height:36px; padding:0 16px; border:1px solid var(--line); border-radius:var(--pill-r); background:none;
  font:inherit; font-size:13.5px; color:var(--ink); cursor:pointer; transition:border-color .2s, background .2s;
}
.search__chips button:hover{ border-color:var(--ink); background:var(--cream-soft); }
.search__results{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:clamp(24px,3vw,48px); }
.search__results:has(> .search__col:only-child){ grid-template-columns:minmax(0,1fr); }
.search__prods{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 18px; }
.search__links{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:2px; }
.search__hit{ display:flex; align-items:center; gap:14px; padding:8px; margin:0 -8px; border-radius:var(--card-r); color:var(--ink); text-decoration:none; transition:background .15s; }
.search__links .search__hit{ font-size:15px; }
.search__hit:hover, .search__hit.is-active{ background:var(--blush-soft); }
.search__img{ flex:0 0 auto; width:56px; height:56px; border-radius:var(--card-r); overflow:hidden; background:#ECE9E7; }
.search__img img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.search__meta{ display:grid; gap:2px; min-width:0; }
.search__name{ font-family:var(--ui); font-weight:500; font-size:15.5px; line-height:1.3; }
.search__sub{ font-size:12.5px; color:var(--ink-mute); }
.search__empty{ margin:0; font-size:15px; color:var(--ink-soft); }
.search__empty a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--gold); }
@media (max-width:760px){
  .search__panel{ max-height:100vh; height:100%; border-radius:0; }
  .search__results, .search__prods{ grid-template-columns:minmax(0,1fr); }
}

/* ---------------------------------------------------------------------------
   Typography: Playfair Display stays on large headings (h1/h2, section
   titles, prices, big numbers). Small titles and UI text use Figtree, which
   reads far better at card and list sizes.
   ------------------------------------------------------------------------- */
.cat__name,
.tl h3,
.care__item h3,
.reasons h3,
.about__value h3,
.contact__card h3,
.post-card__title,
.acc summary,
.quote__name,
.pdp__quote blockquote p,
.stage__quote blockquote p,
.plp__group summary,
.co-acc__title,
.auth__guest-title{
  font-family:var(--ui); font-weight:500; letter-spacing:0;
}
.tl h3, .care__item h3, .reasons h3, .about__value h3, .contact__card h3{ font-size:clamp(17px,1.35vw,20px); line-height:1.35; }
.post-card__title{ font-size:clamp(17px,1.3vw,19px); line-height:1.4; }
.cat__name{ font-size:clamp(15.5px,1.15vw,17px); }
.plp__group summary{ font-size:15px; }
.pdp__quote blockquote p, .stage__quote blockquote p{ font-weight:400; line-height:1.55; }
.acc summary{ font-size:clamp(15.5px,1.15vw,17px); line-height:1.45; }
/* Category intro: always two clean lines (some mobile rules reset the clamp). */
.stage--banner .stage__blurb{ display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; max-height:calc(2 * 1.65em); }

/* Category quick links under the category cards: one quiet row. */
.cats__quick{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-top:clamp(32px,3.6vw,48px);
}
.cats__quick-label{ flex:0 0 auto; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.cats__quick-list{ display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; scrollbar-width:none; }
.cats__quick-list::-webkit-scrollbar{ display:none; }
.cats__quick-list a{
  flex:0 0 auto; display:inline-flex; align-items:center; height:38px; padding:0 16px;
  border-radius:var(--pill-r); background:rgba(255,253,251,.75); border:1px solid rgba(46,39,41,.12);
  font-size:13.5px; color:var(--ink); text-decoration:none; white-space:nowrap;
  transition:background .2s, border-color .2s, color .2s;
}
.cats__quick-list a:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
@media (max-width:980px){
  .cats__quick{ justify-content:flex-start; }
  .cats__quick-list{ margin-right:calc(var(--pad) * -1); padding-right:var(--pad); }
}
@media (max-width:620px){ .cats__quick-label{ display:none; } }
