/* =========================================================
   Shushan Sugar Shack — High-fidelity presentation layer
   Applied after Foundation, custom utilities, prototype base,
   and brand-variation tokens.
   ========================================================= */

:root { color-scheme: light dark; }
html { scroll-behavior: smooth; }
body[class*="brand-"] {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Finished-site header */
.prototype-bar { display:none !important; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom-width: 1px;
  box-shadow: 0 8px 28px rgba(17, 37, 25, .08);
}
.site-header .l-container--xl { max-width: 86rem; }
.desktop-top-bar { padding: .75rem 0; min-height: 5.25rem; }
.site-header .top-bar, .site-header .top-bar ul { background: transparent; }
.brand-logo-image { max-height: 3.75rem; }
.site-header .menu > li > a {
  padding: .9rem .85rem;
  font-size: .84rem;
  letter-spacing: .055em;
  text-decoration: none;
}
.site-header .nav-links a { border-bottom: 2px solid transparent; }
.site-header .nav-links .button { margin: 0 0 0 .5rem; border-bottom: 0; }
.theme-toggle { border-radius: 999px; }
.mobile-nav { border-top: 1px solid var(--brand-line); }
.mobile-nav a { padding: .8rem 0; }

/* Hero */
.hf-hero {
  position: relative;
  min-height: clamp(34rem, 66vw, 47rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: #173526;
}
.hf-hero__image,
.hf-hero__shade {
  position: absolute;
  inset: 0;
}
.hf-hero__image { width:100%; height:100%; object-fit:cover; object-position:center; z-index:-3; }
.hf-hero__shade {
  z-index:-2;
  background:
    linear-gradient(90deg, rgba(8,24,16,.88) 0%, rgba(8,24,16,.67) 38%, rgba(8,24,16,.15) 70%, rgba(8,24,16,.05) 100%),
    linear-gradient(0deg, rgba(8,24,16,.34), transparent 42%);
}
.hf-hero__content { width:100%; padding: clamp(4rem,8vw,7rem) 0 clamp(4rem,7vw,6.5rem); }
.hf-hero__copy { max-width: 43rem; color:#fff; }
.hf-hero__copy h1,
.hf-hero__copy p { color:#fff !important; }
.hf-hero__copy h1 { margin:.7rem 0 1rem; text-shadow:0 2px 18px rgba(0,0,0,.2); }
.hf-hero__copy .lead { max-width: 37rem; font-size: clamp(1.05rem,1.7vw,1.32rem); line-height:1.55; }
.hf-kicker {
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.hf-kicker::before { content:""; width:2.4rem; height:2px; background:var(--brand-accent); }
.hf-hero__copy .hf-kicker { color:#fff3df; }
.hf-hero__actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.7rem; }
.hf-hero__actions .button { margin:0; padding:1rem 1.35rem; }
.hf-hero__badge {
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-top:1.4rem;
  padding:.6rem .85rem;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  backdrop-filter: blur(8px);
  font-size:.82rem;
}
.hf-hero__badge img { width:1.15rem; height:1.15rem; }

/* Trust ribbon */
.hf-trust { background:var(--brand-header); color:var(--brand-nav); border-bottom:1px solid color-mix(in srgb, var(--brand-accent) 45%, transparent); }
.hf-trust__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.hf-trust__item { padding:1.05rem 1.25rem; text-align:center; border-right:1px solid color-mix(in srgb, var(--brand-nav) 18%, transparent); }
.hf-trust__item:last-child { border-right:0; }
.hf-trust__item strong { display:block; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; }
.hf-trust__item span { display:block; margin-top:.2rem; opacity:.78; font-size:.82rem; }

/* Section rhythm */
.hf-section { padding: clamp(4rem,7vw,7rem) 0; position:relative; overflow:hidden; }
.hf-section--compact { padding: clamp(3.25rem,5vw,5rem) 0; }
.hf-section--paper { background:var(--brand-paper); }
.hf-section--surface { background:var(--brand-surface); }
.hf-section--dark { background:var(--brand-footer); color:#fff4df; }
.hf-section--dark h2, .hf-section--dark h3, .hf-section--dark p { color:inherit !important; }
.hf-section .l-container--xl { max-width:86rem; }
.hf-heading { margin:.45rem 0 1rem; }
.hf-intro { max-width:44rem; font-size:1.06rem; line-height:1.65; }
.hf-section-head { margin-bottom:2.2rem; }
.hf-section-head--center { max-width:52rem; margin-left:auto; margin-right:auto; text-align:center; }
.hf-section-head--center .hf-kicker { justify-content:center; }

/* Category navigation cards */
.hf-category-grid .cell { display:flex; }
.hf-category {
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  overflow:hidden;
  background:var(--brand-surface);
  border:1px solid var(--brand-line);
  box-shadow:0 18px 45px rgba(33,46,36,.08);
  text-decoration:none;
  color:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
}
.hf-category:hover, .hf-category:focus-visible { transform:translateY(-5px); box-shadow:0 24px 56px rgba(33,46,36,.14); }
.hf-category__media { aspect-ratio: 16/10; overflow:hidden; background:var(--brand-soft); }
.hf-category__media img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.hf-category:hover img { transform:scale(1.025); }
.hf-category__body { padding:1.35rem 1.5rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.hf-category__body p { margin-bottom:1rem; }
.hf-category__link { margin-top:auto; color:var(--brand-button); font-weight:700; }

/* Large image-led collection blocks */
.hf-product-feature {
  display:grid;
  grid-template-columns:minmax(0, 1.55fr) minmax(20rem, .72fr);
  min-height:32rem;
  background:var(--brand-surface);
  border:1px solid var(--brand-line);
  box-shadow:0 24px 70px rgba(29,46,34,.09);
  overflow:hidden;
}
.hf-product-feature + .hf-product-feature { margin-top:2rem; }
.hf-product-feature--reverse { grid-template-columns:minmax(20rem,.72fr) minmax(0,1.55fr); }
.hf-product-feature--reverse .hf-product-feature__media { order:2; }
.hf-product-feature--reverse .hf-product-feature__copy { order:1; }
.hf-product-feature__media {
  min-height:32rem;
  background:color-mix(in srgb, var(--brand-paper) 74%, white 26%);
  overflow:hidden;
}
.hf-product-feature__media img { width:100%; height:100%; object-fit:cover; object-position:center; }
.hf-product-feature__copy { padding:clamp(2rem,4vw,4rem); display:flex; flex-direction:column; justify-content:center; }
.hf-product-feature__copy .button { align-self:flex-start; margin-top:.7rem; }
.hf-feature-list { margin:1rem 0 1.4rem; columns:2; column-gap:1.5rem; }
.hf-feature-list li { margin-bottom:.4rem; break-inside:avoid; }
.hf-product-note { font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--brand-accent); font-weight:700; }

/* Full-width product billboard */
.hf-billboard {
  position:relative;
  min-height:clamp(31rem,50vw,42rem);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--brand-paper);
}
.hf-billboard > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hf-billboard__shade { position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,37,25,.9), rgba(15,37,25,.62) 38%, rgba(15,37,25,.08) 68%, transparent); }
.hf-billboard__copy { position:relative; z-index:2; max-width:35rem; margin:clamp(2rem,5vw,4.5rem); padding:clamp(1.6rem,3vw,2.7rem); color:#fff; background:rgba(15,37,25,.72); backdrop-filter:blur(9px); border:1px solid rgba(255,255,255,.2); }
.hf-billboard__copy h2,.hf-billboard__copy p { color:#fff !important; }
.hf-billboard__copy .button { margin-bottom:0; }

/* Story */
.hf-story { display:grid; grid-template-columns:1.08fr .92fr; min-height:34rem; }
.hf-story__media { min-height:34rem; }
.hf-story__media img { width:100%; height:100%; object-fit:cover; object-position:center; }
.hf-story__copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(2.5rem,5vw,5rem); background:var(--brand-footer); color:#fff4df; }
.hf-story__copy h2,.hf-story__copy p { color:#fff4df !important; }
.hf-story__copy .button.hollow { border-color:#fff4df !important; color:#fff4df !important; }
.hf-story__copy .button.hollow:hover { background:#fff4df !important; color:var(--brand-footer) !important; }

/* FAQ and CTA */
.hf-faq { max-width:58rem; margin:0 auto; }
.hf-faq .faq-item { border-bottom:1px solid var(--brand-line); }
.hf-faq .faq-trigger { font-size:1.08rem; font-weight:700; padding:.2rem 0; }
.hf-cta { text-align:center; background:var(--brand-paper); position:relative; }
.hf-cta::before { content:""; position:absolute; inset:0; opacity:.07; background:linear-gradient(135deg,var(--brand-button) 25%,transparent 25%) 0 0/24px 24px; pointer-events:none; }
.hf-cta .l-container { position:relative; }
.hf-cta h2 { max-width:44rem; margin:.55rem auto 1rem; }
.hf-cta p { max-width:40rem; margin:0 auto 1.7rem; }

/* Footer */
.footer-block { padding-top:4rem; padding-bottom:2rem; }
.footer-block .brand-logo-image { max-height:6.75rem; }
.footer-block input { min-height:3rem; margin-bottom:.7rem; }
.footer-block .wire-rule { opacity:.65; }

/* Brand-specific finishing */
.brand-heritage .hf-category,
.brand-heritage .hf-product-feature { box-shadow:0 18px 45px rgba(86,64,28,.09); }
.brand-heritage .hf-product-feature__media { background:#fff8ec; }
.brand-heritage .hf-billboard__copy { border-left:4px solid var(--brand-gold); }

.brand-rustic .hf-category,
.brand-rustic .hf-product-feature { border-width:2px; box-shadow:7px 7px 0 rgba(88,60,42,.16); }
.brand-rustic .hf-product-feature__media { background:#f4e4c5; }
.brand-rustic .hf-billboard__copy { background:rgba(88,60,42,.86); border:2px solid #d3a51c; }
.brand-rustic .hf-trust { border-bottom:4px solid var(--brand-accent); }

.brand-modern .hf-category,
.brand-modern .hf-product-feature,
.brand-modern .hf-billboard,
.brand-modern .hf-story { border-radius:1.4rem; }
.brand-modern .hf-category,
.brand-modern .hf-product-feature { box-shadow:0 22px 55px rgba(45,81,60,.11); border:0; }
.brand-modern .hf-section--surface .l-container--xl { max-width:82rem; }
.brand-modern .hf-billboard__copy { border-radius:1rem; background:rgba(23,53,38,.82); }
.brand-modern .hf-product-feature__media { background:#edf7ef; }

.brand-script .hf-category,
.brand-script .hf-product-feature { box-shadow:0 17px 42px rgba(75,56,21,.11); }
.brand-script .hf-billboard__copy { border-bottom:4px solid var(--brand-orange); }
.brand-script .hf-hero__copy h1 { max-width:40rem; }
.brand-script .hf-section-head h2 { position:relative; display:inline-block; }
.brand-script .hf-section-head h2::after { content:""; display:block; width:5rem; border-bottom:3px solid var(--brand-orange); margin-top:.6rem; }

.brand-mercantile .hf-category,
.brand-mercantile .hf-product-feature { border:2px solid var(--brand-line); outline:1px solid rgba(211,165,28,.5); outline-offset:-7px; box-shadow:6px 6px 0 rgba(125,22,26,.1); }
.brand-mercantile .hf-product-feature__media { border-right:3px solid var(--brand-red); }
.brand-mercantile .hf-product-feature--reverse .hf-product-feature__media { border-right:0; border-left:3px solid var(--brand-red); }
.brand-mercantile .hf-billboard__copy { background:rgba(83,12,16,.84); border:2px solid var(--brand-harvest); }

/* Dark theme compatibility */
html[data-theme="dark"] .hf-category,
html[data-theme="dark"] .hf-product-feature { box-shadow:0 18px 55px rgba(0,0,0,.26); }
html[data-theme="dark"] .hf-product-feature__media { background:#202124; }
html[data-theme="dark"] .hf-cta { background:var(--brand-paper); }
html[data-theme="dark"] .hf-category__link { color:var(--brand-accent); }
html[data-theme="dark"] .hf-product-feature__copy .button.hollow { color:var(--brand-button); }

/* Responsive */
@media screen and (max-width: 63.99875em) {
  .hf-product-feature,
  .hf-product-feature--reverse { grid-template-columns:1fr; }
  .hf-product-feature--reverse .hf-product-feature__media,
  .hf-product-feature--reverse .hf-product-feature__copy { order:initial; }
  .hf-product-feature__media { min-height:27rem; }
  .hf-story { grid-template-columns:1fr; }
  .hf-story__media { min-height:28rem; }
}
@media screen and (max-width: 39.99875em) {
  .site-header { position:relative; }
  .hf-hero { min-height:36rem; align-items:flex-end; }
  .hf-hero__shade { background:linear-gradient(0deg,rgba(8,24,16,.91),rgba(8,24,16,.42) 70%,rgba(8,24,16,.18)); }
  .hf-hero__content { padding:3.2rem 0 2.8rem; }
  .hf-hero__copy h1 { font-size:clamp(2.65rem,13vw,4rem); }
  .hf-trust__grid { grid-template-columns:1fr 1fr; }
  .hf-trust__item:nth-child(2) { border-right:0; }
  .hf-trust__item:nth-child(-n+2) { border-bottom:1px solid color-mix(in srgb, var(--brand-nav) 18%, transparent); }
  .hf-section { padding:3.4rem 0; }
  .hf-product-feature__media { min-height:20rem; }
  .hf-product-feature__copy { padding:1.7rem; }
  .hf-feature-list { columns:1; }
  .hf-billboard { min-height:34rem; }
  .hf-billboard__shade { background:linear-gradient(0deg,rgba(15,37,25,.92),rgba(15,37,25,.28) 80%); }
  .hf-billboard__copy { margin:1rem; max-width:none; }
  .hf-story__media { min-height:22rem; }
  .hf-story__copy { padding:2rem 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hf-category, .hf-category__media img { transition:none; }
}