/* ============================================================
   SKS Heritage hub pages (Explore by Heritage ×6).

   These reuse the clan-hub design system: 74 of the 104 classes in
   the page body are already styled by assets/sks-clan.css, which the
   heritage template loads first. This file adds ONLY the classes that
   stylesheet doesn't cover (sept-card*, var-product*, var-custom-cta*,
   sec, story-h/sources, related-relationship, nav-search, icon), plus
   the hero weave whose --c1/--c2/--c3 palette is set inline per page.

   Everything is scoped under #sks-heritage so generic names like
   .sec, .icon and .card can't leak into the rest of the theme.

   The page wrapper also carries .sks-clan-page, which is where
   sks-clan.css defines the shared design tokens (--amber, --onyx,
   --rule ...). Only --ok is missing from that set, so it's declared
   below. --c1/--c2/--c3 are set inline per page on .clan-hero.
   ============================================================ */

#sks-heritage {
  --ok: #1A5C2A;
}

#sks-heritage .icon {width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex-shrink:0;stroke-width:2}
#sks-heritage .nav-search {flex:1;max-width:360px;margin:0 auto;position:relative}
#sks-heritage .nav-search input {width:100%;background:var(--ivory);border:1px solid transparent;border-radius:var(--r);padding:11px 14px 11px 40px;font-family:inherit;font-size:13.5px;color:var(--onyx);transition:.2s}
#sks-heritage .nav-search input::placeholder {color:var(--muted)}
#sks-heritage .nav-search input:focus {outline:none;background:var(--white);border-color:var(--amber);box-shadow:0 0 0 3px rgba(184,82,10,.08)}
#sks-heritage .nav-search .icon {position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:16px}
#sks-heritage .mobile-drawer-search .icon {position:absolute;left:36px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:16px;pointer-events:none}
#sks-heritage .mobile-drawer-link .icon, #sks-heritage .mobile-drawer-section-toggle .icon {font-size:16px;color:var(--muted);transition:transform .25s}
#sks-heritage .mobile-drawer-footer-link .icon {font-size:20px;color:var(--amber)}
#sks-heritage .var-products-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
#sks-heritage .var-product {display:flex;flex-direction:column;background:transparent;text-decoration:none;color:inherit;transition:transform .25s}
#sks-heritage .var-product:hover {transform:translateY(-4px)}
#sks-heritage .var-product-img-wrap {aspect-ratio:4/5;border-radius:var(--r);margin-bottom:14px;overflow:hidden;border:1px solid var(--rule);background:var(--parch);position:relative}
#sks-heritage .var-product-img-wrap .tf-swatch {width:100%;height:100%}
#sks-heritage .var-product-badge {position:absolute;top:10px;left:10px;background:rgba(255,255,255,.95);color:var(--amber);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:5px 9px;border-radius:99px;z-index:3;box-shadow:0 1px 3px rgba(0,0,0,.08)}
#sks-heritage .var-product-badge[data-kind="stock"] {color:var(--ok);background:#fff}
#sks-heritage .var-product-name {font-family:'Playfair Display',serif;font-size:15.5px;color:var(--onyx);font-weight:600;line-height:1.3;margin-bottom:4px;letter-spacing:-.005em}
#sks-heritage .var-product:hover .var-product-name {color:var(--amber)}
#sks-heritage .var-product-meta {font-size:11.5px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px;font-weight:500}
#sks-heritage .var-product-price {font-family:'Playfair Display',serif;font-size:16px;color:var(--onyx);font-weight:600;font-style:italic;display:flex;align-items:baseline;gap:8px}
#sks-heritage .var-product-price-from {font-size:10.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-style:normal;font-weight:500;font-family:'Jost',sans-serif}
#sks-heritage .var-custom-cta {margin-top:48px;padding:28px 36px;background:linear-gradient(135deg,var(--slate) 0%,var(--slate-d) 100%);border-radius:var(--rxl);display:flex;align-items:center;justify-content:space-between;gap:24px;color:#fff;flex-wrap:wrap;position:relative;overflow:hidden}
#sks-heritage .var-custom-cta::before {content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;background:repeating-linear-gradient(45deg,transparent 0,transparent 40px,var(--cream) 40px,var(--cream) 41px)}
#sks-heritage .var-custom-cta-text {flex:1;min-width:240px;position:relative;z-index:1}
#sks-heritage .var-custom-cta-h {font-family:'Playfair Display',serif;font-size:20px;font-weight:600;color:#fff;margin-bottom:6px;letter-spacing:-.005em}
#sks-heritage .var-custom-cta-h em {font-style:italic;color:var(--cream);font-weight:500}
#sks-heritage .var-custom-cta-s {font-size:13.5px;color:rgba(245,240,232,.75);line-height:1.5;font-weight:300}
#sks-heritage .var-custom-cta-btn {display:inline-flex;align-items:center;gap:10px;padding:14px 24px;background:var(--cream);color:var(--slate-d);border-radius:var(--r);font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.04em;text-decoration:none;transition:.25s;flex-shrink:0;position:relative;z-index:1}
#sks-heritage .var-custom-cta-btn:hover {background:#F4D9B9;gap:13px;color:var(--slate-d)}
#sks-heritage .sec {padding:90px 48px}
#sks-heritage .sec-wrap {max-width:1080px;margin:0 auto}
#sks-heritage .sec-eb {font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);font-weight:600;margin-bottom:14px;text-align:center}
#sks-heritage .sec-h {font-family:'Playfair Display',serif;font-size:36px;color:var(--onyx);font-weight:600;text-align:center;margin-bottom:18px;letter-spacing:-.015em;line-height:1.1}
#sks-heritage .sec-h em {font-style:italic;color:var(--amber);font-weight:500}
#sks-heritage .sec-sub {font-size:15px;color:var(--body);line-height:1.65;text-align:center;max-width:700px;margin:0 auto 40px;font-weight:300}
#sks-heritage .story-h {font-family:'Playfair Display',serif;font-size:38px;color:var(--onyx);font-weight:600;letter-spacing:-.015em;line-height:1.1;margin-bottom:14px}
#sks-heritage .story-h em {font-style:italic;color:var(--amber);font-weight:500}
#sks-heritage .story-sources {margin-top:36px;padding-top:24px;border-top:1px solid var(--rule);font-size:12px;color:var(--muted);letter-spacing:.04em;line-height:1.6}
#sks-heritage .story-sources strong {color:var(--onyx);font-weight:500;letter-spacing:.005em}
#sks-heritage .story-sources a {color:var(--amber);text-decoration:none}
#sks-heritage .story-sources a:hover {text-decoration:underline}
#sks-heritage .sept-section {background:var(--white);padding:90px 48px;border-bottom:1px solid var(--rule)}
#sks-heritage .sept-wrap {max-width:1080px;margin:0 auto}
#sks-heritage .sept-intro {text-align:center;margin-bottom:40px}
#sks-heritage .sept-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:30px}
#sks-heritage .sept-card {display:flex;flex-direction:column;gap:6px;padding:18px 20px;background:var(--ivory);border:1px solid var(--rule);border-radius:var(--rl);text-decoration:none;color:inherit;transition:.22s;position:relative}
#sks-heritage .sept-card:hover {background:#fff;border-color:var(--amber);transform:translateY(-2px);box-shadow:0 6px 14px rgba(184,82,10,.06)}
#sks-heritage .sept-card-name {font-family:'Playfair Display',serif;font-size:17.5px;color:var(--onyx);font-weight:600;letter-spacing:-.005em;line-height:1.2;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#sks-heritage .sept-card:hover .sept-card-name {color:var(--amber)}
#sks-heritage .sept-card-alts {font-size:11.5px;color:var(--muted);font-style:italic;font-family:'Playfair Display',serif;font-weight:400;letter-spacing:.005em}
#sks-heritage .sept-card-blurb {font-size:12.5px;color:var(--body);line-height:1.55;font-weight:300}
#sks-heritage .sept-card-blurb strong {color:var(--onyx);font-weight:500}
#sks-heritage .sept-card-arrow {position:absolute;top:16px;right:16px;color:var(--amber);opacity:0;transform:translateX(-4px);transition:.2s;font-size:13px}
#sks-heritage .sept-card:hover .sept-card-arrow {opacity:1;transform:translateX(0)}
#sks-heritage .sept-footer {margin-top:30px;padding:24px 28px;background:var(--ivory);border-radius:var(--rl);text-align:center;font-size:14px;color:var(--body);line-height:1.65;font-weight:300}
#sks-heritage .sept-footer strong {color:var(--onyx);font-weight:500}
#sks-heritage .sept-footer a {color:var(--amber);font-weight:500;text-decoration:underline;text-decoration-color:rgba(184,82,10,.35);text-underline-offset:2px}
#sks-heritage .reviews-section .sec-eb {color:var(--cream)}
#sks-heritage .reviews-section .sec-h {color:#fff;font-size:34px}
#sks-heritage .reviews-section .sec-h em {color:var(--cream)}
#sks-heritage .reviews-section .sec-sub {color:rgba(245,240,232,.7)}
#sks-heritage .related-relationship {font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-weight:600;margin-bottom:4px;display:block}
@media (max-width:1280px){
#sks-heritage .var-products-grid {grid-template-columns:repeat(3,1fr);gap:20px}
}
@media (max-width:1100px){
#sks-heritage .qf-section, #sks-heritage .var-section, #sks-heritage .sec {padding:64px 24px}
#sks-heritage .story-section, #sks-heritage .america-section, #sks-heritage .sept-section, #sks-heritage .spell-section, #sks-heritage .branch-section, #sks-heritage .wear-section, #sks-heritage .reviews-section, #sks-heritage .related-section, #sks-heritage .faq-section {padding:70px 24px}
#sks-heritage .story-h {font-size:32px}
#sks-heritage .sept-grid {grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
#sks-heritage .var-products-grid {grid-template-columns:repeat(2,1fr);gap:16px}
#sks-heritage .var-custom-cta {flex-direction:column;text-align:center;align-items:center;padding:22px 24px}
#sks-heritage .story-section, #sks-heritage .america-section, #sks-heritage .sept-section, #sks-heritage .spell-section, #sks-heritage .branch-section, #sks-heritage .wear-section, #sks-heritage .reviews-section, #sks-heritage .related-section, #sks-heritage .faq-section {padding:64px 24px}
#sks-heritage .story-h {font-size:28px}
}
@media (max-width:760px){
#sks-heritage .nav-search {display:none}
#sks-heritage .qf-section, #sks-heritage .var-section, #sks-heritage .sec, #sks-heritage .pass-placeholder {padding:50px 16px}
#sks-heritage .story-section, #sks-heritage .america-section, #sks-heritage .sept-section, #sks-heritage .spell-section, #sks-heritage .branch-section, #sks-heritage .wear-section, #sks-heritage .reviews-section, #sks-heritage .related-section, #sks-heritage .faq-section {padding:50px 16px}
#sks-heritage .story-h {font-size:24px}
#sks-heritage .sept-grid {grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
#sks-heritage .var-products-grid {grid-template-columns:1fr 1fr;gap:12px}
#sks-heritage .sept-grid {grid-template-columns:1fr;gap:10px}
}
#sks-heritage .clan-hero::before {background:
  repeating-linear-gradient(90deg,transparent 0,transparent 60px,var(--c1) 60px,var(--c1) 62px,transparent 62px,transparent 130px,var(--c2) 130px,var(--c2) 132px,transparent 132px,transparent 200px,var(--c3) 200px,var(--c3) 203px,transparent 203px,transparent 280px),
  repeating-linear-gradient(0deg,transparent 0,transparent 60px,var(--c1) 60px,var(--c1) 62px,transparent 62px,transparent 130px,var(--c2) 130px,var(--c2) 132px,transparent 132px,transparent 200px,var(--c3) 200px,var(--c3) 203px,transparent 203px,transparent 280px);
  mix-blend-mode:screen}

/* Family cards for clans without a hub yet: rendered as non-clickable
   panels (data-clan-hub retained so launching a hub is a one-line flip). */
#sks-heritage .sept-card--pending {
  cursor: default;
  pointer-events: none;
}
#sks-heritage .sept-card--pending .sept-card-name {
  color: inherit;
}