/* Manfare layout variants — activated by body classes from the backend
   Header/Footer settings (sf_theme_layout_classes). Native look = no class. */

@media (min-width: 901px) {
  /* Standard — logo left · search centre · icons right */
  body.mfh-logoleft .header-main { grid-template-columns: auto 1fr auto; }
  body.mfh-logoleft .header-main > .site-logo { grid-column: 1; grid-row: 1; justify-self: start; }
  body.mfh-logoleft .header-main > .header-left { grid-column: 2; grid-row: 1; display: flex; justify-content: center; }
  body.mfh-logoleft .header-main > .header-icons { grid-column: 3; grid-row: 1; }

  /* Split — logo left · search + icons right */
  body.mfh-split2 .header-main { grid-template-columns: auto 1fr auto; }
  body.mfh-split2 .header-main > .site-logo { grid-column: 1; grid-row: 1; justify-self: start; }
  body.mfh-split2 .header-main > .header-left { grid-column: 2; grid-row: 1; display: flex; justify-content: flex-end; margin-right: 14px; }
  body.mfh-split2 .header-main > .header-icons { grid-column: 3; grid-row: 1; }

  /* Minimal — logo left · compact search icon · icons right */
  body.mfh-minimal .header-main { grid-template-columns: auto 1fr auto; }
  body.mfh-minimal .header-main > .site-logo { grid-column: 1; grid-row: 1; justify-self: start; }
  body.mfh-minimal .header-main > .header-left { grid-column: 2; grid-row: 1; display: flex; justify-content: flex-end; }
  body.mfh-minimal .header-main > .header-icons { grid-column: 3; grid-row: 1; }
  body.mfh-minimal .header-search { width: auto; background: transparent; border: 0; box-shadow: none; }
  body.mfh-minimal .header-search input { width: 0; min-width: 0; padding: 0; border: 0; opacity: 0; }
  body.mfh-minimal .header-search button { font-size: 17px; }

  /* Legacy alias (pre-1.118.1 saved value) */
  body.mfh-split .header-main { grid-template-columns: auto 1fr auto; }
  body.mfh-split .header-main > .site-logo { grid-column: 1; grid-row: 1; justify-self: start; }
  body.mfh-split .header-main > .header-left { grid-column: 2; grid-row: 1; display: flex; justify-content: center; }
  body.mfh-split .header-main > .header-icons { grid-column: 3; grid-row: 1; }
}

/* Sticky behaviour */
body.mfh-nosticky .site-header { position: static; }
/* Sticky menu-bar-only: JS (v7.js) sets .site-header sticky with a negative top offset equal to the
   height above the nav, so the top row scrolls away and the nav pins to the top. */
@media (min-width: 901px) {
  body.mfh-stickynav .site-header { position: sticky; }
  body.mfh-stickynav .site-nav { z-index: 9001; }
}

/* Announcement / utility top bar off */

/* Footer column layouts (desktop; tablet/mobile keep responsive stacking) */
@media (min-width: 901px) {
  body.mff-3col .footer-grid { grid-template-columns: repeat(3, 1fr); }
  body.mff-2col .footer-grid { grid-template-columns: repeat(2, 1fr); }
  body.mff-1col .footer-grid { grid-template-columns: 1fr; max-width: 640px; }
}

/* Element visibility toggles */
body.mfh-nosearch .header-search { display: none !important; }
body.mfh-nophone .header-phone { display: none !important; }
body.mfh-nowish .header-icons .wishlist-icon-btn { display: none !important; }
body.mfh-nocart .header-icons .icon-btn[data-action="cart"] { display: none !important; }
body.mfh-noacct .header-icons #authTriggerBtn { display: none !important; }

/* Search is now a real form; phone can be a link */
form.header-search { margin: 0; }
a.header-phone { color: inherit; text-decoration: none; }
a.header-phone:hover span { color: var(--color-gold); }

/* ---- Element visibility (per device) ---- */
@media (min-width: 901px) {
  body.mfh-nosearch .header-search { display: none; }
  body.mfh-nophone .header-phone { display: none; }
  body.mfh-nowishlist .header-icons .wishlist-icon-btn { display: none; }
  body.mfh-nocart .header-icons .icon-btn[data-action="cart"] { display: none; }
  body.mfh-noaccount .header-icons #authTriggerBtn { display: none; }
  body.mfh-notopbar .topbar { display: none; }
}
@media (max-width: 900px) {
  body.mfhm-nosearch .header-search { display: none; }
  body.mfhm-nophone .header-phone { display: none; }
  body.mfhm-nowishlist .header-icons .wishlist-icon-btn { display: none; }
  body.mfhm-nocart .header-icons .icon-btn[data-action="cart"] { display: none; }
  body.mfhm-noaccount .header-icons #authTriggerBtn { display: none; }
  body.mfhm-notopbar .topbar { display: none; }
  body.mfhm-nosticky .site-header { position: static; }
}

/* ---- Search box styles ---- */
body.mfh-search-pill .header-search { border-radius: 999px; }
body.mfh-search-boxed .header-search { border: 2px solid var(--color-primary); border-radius: 8px; background: var(--color-white); }
body.mfh-search-underline .header-search { background: transparent; border: 0; border-bottom: 2px solid var(--color-primary); border-radius: 0; box-shadow: none; }

/* Empty top-bar (all items hidden) collapses cleanly */
.topbar-inner:empty, .topbar-left:empty, .topbar-right:empty { display: none; }

/* ---- Search icon-only (opens the search overlay) ---- */
.header-search-icon { display: none; background: transparent; border: 0; cursor: pointer; font-size: 18px; color: var(--color-dark, #2c1810); padding: 8px; align-items: center; justify-content: center; }
body.mfh-search-icon .header-search { display: none !important; }
body.mfh-search-icon .header-search-icon { display: inline-flex; }

/* ---- Header phone: WhatsApp icon-only mode ---- */
.header-phone.header-phone-wa { font-size: 20px; color: #25D366; }
.header-phone.header-phone-wa span { display: none; }

/* ---- Footer (mobile) ---- */
@media (max-width: 900px) {
  body.mffm-2col .footer-grid { grid-template-columns: 1fr 1fr; }
  body.mffm-1col .footer-grid { grid-template-columns: 1fr; }
  body.mffm-nobrand .footer-brand { display: none; }
  body.mffm-nopayment .payment-icons { display: none; }
}

/* ---- Phase E.2 custom homepage sections ---- */
.hp-custom{ padding:44px 0; }
.hp-custom .container{ max-width:var(--container-max,1280px); margin:0 auto; padding:0 20px; }
.hp-c-sub{ text-align:center; color:var(--color-text-muted,#777); margin:8px 0 0; font-size:15px; }
.hp-c-banner img{ border-radius:12px; }
.hp-c-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; margin-top:22px; }
.hp-c-card{ display:block; text-decoration:none; color:inherit; border:1px solid var(--color-border,#eee); border-radius:12px; overflow:hidden; background:var(--color-white,#fff); transition:box-shadow .15s,transform .15s; }
.hp-c-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-2px); }
.hp-c-img{ aspect-ratio:3/4; overflow:hidden; background:var(--color-bg-2,#f5f0e8); }
.hp-c-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.hp-c-info{ padding:12px 14px; }
.hp-c-name{ font-weight:600; font-size:14px; margin-bottom:4px; line-height:1.35; }
.hp-c-price{ color:var(--color-primary,#0fb39a); font-weight:700; }
@media (max-width:600px){ .hp-c-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } }

/* ===== Phase E.2 content blocks ===== */
/* Every section is a size container, so any block text sized in cqi units scales to the SECTION's own
   width. A block placed in a half/third column then gets a proportionally smaller title that fits,
   instead of a viewport-sized one that overflows. Only the inline (width) axis is contained → height,
   grids, carousels and the full-bleed negative margins are all unaffected. Nested containers
   (.hp-hero-section, .cbcta) still win for their own text via nearest-ancestor resolution. */
.hp-sec{ padding:44px 0; container-type:inline-size; }
.hp-sec .container{ max-width:var(--container-max,1280px); margin:0 auto; padding:0 20px; }
/* Descendant, not child: a block with its own Display settings is wrapped in a .cb-box, so a
   `section > .hp-hero-section` match would silently stop applying. Each section holds one block,
   so relaxing the combinator changes nothing else. */
.hp-sec-full .hp-hero-section, .hp-sec-full .hp-c-banner{ max-width:none; }
/* Per-block box (emitted only when a block has Display width/radius, Custom CSS or responsive
   spacing set). Layout-neutral by itself — it exists purely to scope those rules. */
.cb-box{ display:block; }

/* ---- Section-title underline: follow the heading's alignment ----------------------------
   The decorative gold bar is `.section-title::after`, a block-level element, so where it sits
   is decided by its own margins — not by the heading's text-align. style.css centres it
   (margin:12px auto 0) and then pins it left again inside a `.section-header` row
   (title + "View All"). Neither knows about a block's Title-position setting, which is applied
   as an inline text-align, so a centred title in a header row left its bar stranded at the far
   left, and a left-aligned title outside a header row got a centred bar.
   Renderers that know their alignment now stamp one of these classes on the <h2>.
   theme-variants.css loads last, so (0,2,1) here beats style.css's rule of equal specificity. */
.section-title.hp-tl-left::after   { margin-left:0;    margin-right:auto; }
.section-title.hp-tl-center::after { margin-left:auto; margin-right:auto; }
.section-title.hp-tl-right::after  { margin-left:auto; margin-right:0;    }
/* Width = Full must widen the CONTENT, not just the band.
   Previously only the Shop-by-Category grid released its inner .container; every other
   full-width section (Products, Features/USP, …) kept the centred 1400px cap, so Full
   width rendered identically to Contained — the band bled to the viewport edge but the
   grid inside stayed boxed. Now ANY full-width section drops the cap. The standard 20px
   side padding is kept so cards/text never touch the screen edge; Category keeps its own
   edge-to-edge rule below. A section that wants a full-bleed band with capped content can
   still set Design & Layout → Container width (that rule is !important and wins). */
.hp-sec-full .container,
.hp-sec-full .hp-container{ max-width:none; }
.hp-sec-full.hp-sec-category_grid .container{ max-width:none; padding-left:0; padding-right:0; }
.hp-hide-d{ } @media(min-width:1025px){ .hp-hide-d{ display:none!important; } }
@media(min-width:601px) and (max-width:1024px){ .hp-hide-t{ display:none!important; } }
@media(max-width:600px){ .hp-hide-m{ display:none!important; } }
.hp-c-btn{ display:inline-block; background:linear-gradient(135deg,var(--color-primary,#0fb39a),var(--color-secondary,var(--color-primary,#0b8a76))); color:#fff; padding:11px 26px; border-radius:8px; font-weight:700; text-decoration:none; border:0; cursor:pointer; }
.hp-c-btn-2{ background:transparent; border:2px solid currentColor; }
.hp-c-sub{ text-align:center; color:var(--color-text-muted,#777); margin:8px 0 0; }
.hp-c-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; margin-top:22px; }
.hp-c-carousel{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; margin-top:22px; padding-bottom:8px; }
.hp-c-carousel > .hp-c-card{ flex:0 0 240px; scroll-snap-align:start; }
.hp-c-card{ display:block; text-decoration:none; color:inherit; border:1px solid var(--color-border,#eee); border-radius:12px; overflow:hidden; background:var(--color-white,#fff); transition:box-shadow .15s,transform .15s; }
.hp-c-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-2px); }
.hp-c-img{ aspect-ratio:3/4; overflow:hidden; background:var(--color-bg-2,#f5f0e8); }
.hp-c-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.hp-c-info{ padding:12px 14px; } .hp-c-name{ font-weight:600; font-size:14px; margin-bottom:4px; line-height:1.35; }
.hp-c-price{ color:var(--color-primary,#0fb39a); font-weight:700; } .hp-c-old{ color:#9aa4b2; text-decoration:line-through; font-weight:400; font-size:12px; }
.hp-cat-grid{ display:grid; gap:18px; margin-top:22px; }
.hp-cat-card{ display:block; text-decoration:none; color:inherit; border-radius:12px; overflow:hidden; position:relative; background:var(--color-bg-2,#f5f0e8); }
.hp-cat-card img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; } .hp-cat-noimg{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:34px; color:var(--text-light,var(--color-text-light,#b5a090)); }
.hp-cat-card span{ position:absolute; left:0; right:0; bottom:0; background:linear-gradient(transparent,rgba(0,0,0,.7)); color:#fff; padding:20px 12px 12px; font-weight:700; text-align:center; }
.hp-it-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; } @media(max-width:768px){ .hp-it-grid{ grid-template-columns:1fr; gap:20px; } }
.hp-it-img img{ width:100%; border-radius:12px; display:block; } .hp-it-body{ color:var(--color-text-muted,#555); line-height:1.7; margin:10px 0 18px; }

/* ---- Image + Text, advanced layout -------------------------------------------------------
   Every piece below is optional and only exists in the markup when the admin filled it in, so a
   block using just Image / Title / Body is untouched by all of this. Per-block colours, ratio,
   gap and radius arrive as a scoped #uid rule from the renderer. */
.hp-it-eyebrow{ font-size:12.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-secondary,#0b8a76); margin-bottom:10px; }
.hp-it-eyebrow::after{ content:""; display:block; width:56px; height:3px; border-radius:2px; margin-top:8px;
  background:linear-gradient(90deg,var(--color-secondary,#0b8a76),var(--color-gold,#c8a13c)); }
.hp-it-tag{ font-size:1.02rem; font-weight:600; color:var(--color-secondary,#0b8a76); margin:0 0 4px; }
.hp-it-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }

/* The block heading is an IN-BLOCK title, not a page section heading, so it must not carry
   .section-title's 40px page-level bottom margin (style.css) — that left a large empty band
   between the gold underline and the next line. (0,2,0) beats (0,1,0), no !important needed. */
.hp-it-txt .section-title{ margin-bottom:16px; }
.hp-it-txt .section-title::after{ margin-top:10px; }
.hp-it-txt .hp-it-eyebrow{ margin-bottom:8px; }
@media(max-width:620px){ .hp-it-txt .section-title{ margin-bottom:12px; } }

/* Feature tick-list (block items) */
.hp-it-feats{ list-style:none; margin:4px 0 20px; padding:0; display:grid; gap:14px 26px; }
.hp-it-feats-1{ grid-template-columns:1fr; }
.hp-it-feats-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:620px){ .hp-it-feats-2{ grid-template-columns:1fr; } }
.hp-it-feats li{ display:flex; align-items:flex-start; gap:11px; line-height:1.5; }
.hp-it-feats i{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-size:11px; color:#fff; margin-top:1px;
  background:var(--color-primary,#0fb39a); }

/* Media column. Centred in its grid cell so that when the block stacks on a narrow screen the
   images sit in the middle of the column instead of hugging the left edge. */
.hp-it-media{ position:relative; width:100%; margin-left:auto; margin-right:auto; }
.hp-it-grid > .hp-it-media{ justify-self:center; }
.hp-it-main{ position:relative; }
/* Never distort a photo: with no explicit height the image keeps its own proportions. A height
   set in the block's Layout tab overrides this from a higher-specificity #uid rule, and that
   rule always ships an object-fit so it crops rather than stretches. */
.hp-it-media img{ height:auto; }
.hp-it-badge{ position:absolute; top:18px; left:-14px; display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px; border-radius:10px; font-size:13px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:#fff; background:var(--color-secondary,#0b8a76);
  box-shadow:0 14px 30px -12px rgba(2,6,23,.45); max-width:calc(100% - 10px); }
.hp-it-badge i{ font-size:15px; }
@media(max-width:620px){ .hp-it-badge{ left:0; top:10px; padding:9px 14px; font-size:11px; } }

/* Collage — one large photo with two smaller ones overlapping the bottom-left corner.
   Every dimension is a PERCENTAGE, so the composition scales with its container and stays
   intact at any width. It used to be flattened into a plain stack under 620px, which threw
   away the whole look on phones; it now keeps its layered arrangement everywhere and is
   simply centred and capped so it never gets cramped against the screen edges. */
.hp-it-ml-collage{ padding:0 0 22% 0; }
.hp-it-ml-collage > .hp-it-main{ width:84%; margin-left:auto; }
/* align-items:flex-start is load-bearing. A flex row defaults to align-items:stretch, which
   forced both collage photos to the tallest one's height and squashed the other out of shape.
   Aligning to the start lets each keep its own aspect ratio. */
.hp-it-ml-collage .hp-it-sub{ position:absolute; left:0; bottom:0; width:74%; display:flex; align-items:flex-end; gap:16px; }
/* flex:1 1 0 (not a fixed width %) is what lets a collage hold ANY number of small photos —
   the block now takes up to 5 from one multi-upload field, so the row has to divide itself. */
.hp-it-ml-collage .hp-it-sub img{ flex:1 1 0; min-width:0; width:auto; border:7px solid var(--card-bg,var(--color-card-bg,#fff)); border-radius:14px;
  box-shadow:0 18px 40px -18px rgba(2,6,23,.45); }

/* Clickable photos (Images → Click to enlarge). Cursor + a small lift so it reads as tappable;
   the tap target is the image itself, which is already large enough on a phone. */
.hp-it-media.hp-it-lb img{ cursor:zoom-in; transition:transform .18s ease, box-shadow .18s ease; }
.hp-it-media.hp-it-lb img:hover{ transform:translateY(-2px); }
@media(prefers-reduced-motion:reduce){ .hp-it-media.hp-it-lb img{ transition:none; } .hp-it-media.hp-it-lb img:hover{ transform:none; } }
/* Fancybox must clear the sticky site header (z-index 9500) and the floating buttons. */
.fancybox__container{ z-index:99999 !important; }

/* ---- Collage arrangement presets (Images → Collage arrangement) --------------------------
   Only the two smaller photos move; the main one is constant. Widths are percentages of the
   sub row and offsets are percentages of the media block, so every arrangement keeps its shape
   at any screen size. Sizes are deliberately UNEQUAL in most presets — that asymmetry is what
   makes a collage read as a collage rather than a pair of thumbnails. */

/* Every preset drives flex-grow and a vertical offset by nth-child, never a fixed width per
   photo, so the same rhythm holds whether the collage has 1 or 4 small photos. */

/* Staggered (default): smaller photos lifted, larger ones dropped — the reference look. */
.hp-it-cs-stagger .hp-it-sub{ width:80%; }
.hp-it-cs-stagger .hp-it-sub img:nth-child(odd) { flex-grow:.82; margin-bottom:9%; }
.hp-it-cs-stagger .hp-it-sub img:nth-child(even){ flex-grow:1.18; }

/* Even: equal photos, bottom-aligned. */
.hp-it-cs-even .hp-it-sub{ width:74%; }

/* Cascade: the mirror — the larger photo is the lifted one. */
.hp-it-cs-cascade .hp-it-sub{ width:80%; }
.hp-it-cs-cascade .hp-it-sub img:nth-child(odd) { flex-grow:1.2; margin-bottom:10%; }
.hp-it-cs-cascade .hp-it-sub img:nth-child(even){ flex-grow:.8; }

/* Corner accent: one small photo tucked into the corner; the rest are not shown. */
.hp-it-cs-corner{ padding-bottom:16%; }
.hp-it-cs-corner .hp-it-sub{ width:46%; }
.hp-it-cs-corner .hp-it-sub img:not(:first-child){ display:none; }

/* Column: the small photos run one above the other down the left edge. */
.hp-it-cs-column{ padding-bottom:10%; }
.hp-it-cs-column .hp-it-sub{ width:42%; flex-direction:column; align-items:stretch; gap:12px; }
.hp-it-cs-column .hp-it-sub img{ flex:0 0 auto; width:100%; }
.hp-it-cs-column .hp-it-sub img:nth-child(odd){ width:84%; align-self:flex-start; }

/* More photos need more room, or each one shrinks to a stamp. Specificity (0,3,0) beats the
   preset rules above (0,2,0), so these win wherever they apply. */
.hp-it-ml-collage.hp-it-n4{ padding-bottom:26%; }
.hp-it-ml-collage.hp-it-n5{ padding-bottom:29%; }
.hp-it-ml-collage.hp-it-n4 .hp-it-sub{ width:90%; gap:12px; }
.hp-it-ml-collage.hp-it-n5 .hp-it-sub{ width:100%; gap:10px; }
.hp-it-ml-collage.hp-it-n4 .hp-it-sub img,
.hp-it-ml-collage.hp-it-n5 .hp-it-sub img{ border-width:5px; border-radius:11px; }
/* The column preset stacks instead of spreading, so it needs the opposite treatment. */
.hp-it-cs-column.hp-it-n4 .hp-it-sub,
.hp-it-cs-column.hp-it-n5 .hp-it-sub{ width:38%; gap:9px; }
@media(max-width:620px){
  /* Keep the collage — just centre it and stop it filling the very edge of a phone screen.
     The white borders and gap shrink a little so the two small photos stay readable. */
  .hp-it-ml-collage{ width:min(100%, 420px); margin-left:auto; margin-right:auto; }
  .hp-it-ml-collage .hp-it-sub{ gap:10px; }
  .hp-it-ml-collage .hp-it-sub img{ border-width:5px; }
}

/* Side by side / stacked — the row takes as many columns as the block has photos (max 5). */
.hp-it-ml-twoup{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.hp-it-ml-twoup.hp-it-n3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.hp-it-ml-twoup.hp-it-n4{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.hp-it-ml-twoup.hp-it-n5{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.hp-it-ml-stack{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(max-width:900px){
  .hp-it-ml-twoup.hp-it-n4, .hp-it-ml-twoup.hp-it-n5{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .hp-it-ml-twoup.hp-it-n3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:620px){ .hp-it-ml-twoup, .hp-it-ml-twoup.hp-it-n3, .hp-it-ml-twoup.hp-it-n4, .hp-it-ml-twoup.hp-it-n5{ grid-template-columns:1fr; } }

/* ---- Styled bullet lists for rich-text (Jodit) content ------------------------------------
   The editor writes plain <ul><li>. These give those lists a designed marker chosen per block
   (Style → Body list style). "Theme default" adds the class-free base only, so existing content
   is unchanged. Markers are ::before, so the author's own text/markup is never touched. */
.hp-rt ul{ list-style:none; margin:10px 0 16px; padding:0; display:grid; gap:10px; }
.hp-rt ol{ margin:10px 0 16px; padding-left:1.15em; }
.hp-rt ul li{ position:relative; padding-left:32px; line-height:1.6; }
.hp-rt ul li::before{ position:absolute; left:0; top:.15em; width:21px; height:21px; display:inline-flex;
  align-items:center; justify-content:center; font-size:12px; font-weight:700; line-height:1; }

.hp-rt-check ul li::before{ content:"\2713"; border-radius:50%; color:#fff; background:var(--color-primary,#0fb39a); }
.hp-rt-tick  ul li::before{ content:"\2713"; color:var(--color-primary,#0fb39a); background:none; font-size:15px; }
.hp-rt-arrow ul li::before{ content:"\27A4"; color:var(--color-secondary,#0b8a76); background:none; font-size:12px; }
.hp-rt-dash  ul li::before{ content:""; height:2px; width:16px; top:.72em; border-radius:2px; background:var(--color-gold,#c8a13c); }
/* Numbered circles: counter on the list, rendered in the same pill as the check style. */
.hp-rt-num ul{ counter-reset:hprt; }
.hp-rt-num ul li{ counter-increment:hprt; }
.hp-rt-num ul li::before{ content:counter(hprt); border-radius:50%; color:#fff; background:var(--color-primary,#0fb39a); font-size:11px; }
@media(max-width:620px){ .hp-rt ul li{ padding-left:28px; } }

/* Decorative dotted squares */
.hp-it-dots{ position:absolute; width:120px; height:92px; pointer-events:none; z-index:0;
  background-image:radial-gradient(currentColor 2px, transparent 2px); background-size:16px 16px;
  color:var(--color-gold,#c8a13c); opacity:.55; }
.hp-it-dots-a{ top:-18px; right:-26px; }
.hp-it-dots-b{ left:-26px; bottom:16%; color:var(--color-primary,#0fb39a); opacity:.4; }
@media(max-width:620px){ .hp-it-dots{ display:none; } }
.hp-feat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; }
.hp-feat{ display:flex; gap:14px; align-items:center; } .hp-feat i{ font-size:26px; color:var(--color-primary,#0fb39a); } .hp-feat-t{ font-weight:700; } .hp-feat-x{ color:var(--color-text-muted,#777); font-size:13px; }
.hp-test-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:22px; }
.hp-test{ border:1px solid var(--card-border,var(--color-border,#e8ddd2)); border-radius:12px; padding:20px; background:var(--card-bg,var(--color-card-bg,#fff)); }
.hp-test-stars{ color:var(--accent,var(--color-gold,#c9a227)); margin-bottom:8px; }
.hp-test-name{ font-weight:700; margin-top:10px; color:var(--text,var(--color-text,#1a0f0a)); }

/* ============================================================================================
   TESTIMONIALS — five finished layouts
   Every layout shares one card, one carousel (native scroll-snap, no library) and one set of
   tokens, so switching layout in the admin swaps the frame around the same content.
   ============================================================================================ */
 /* Every colour and face below resolves through the active COLOUR PRESET and FONT PRESET.
    The chain is: professional token (set by theme-presets.php) -> legacy --color-* (style.css)
    -> a literal, which only ever applies if the stylesheet is used with no theme at all. */
.hp-tst{
  --tst-accent:var(--accent,      var(--color-gold,        #c9a227));
  --tst-card:  var(--card-bg,     var(--color-card-bg,     #ffffff));
  --tst-ink:   var(--text,        var(--color-text,        #1a0f0a));
  --tst-soft:  var(--text-muted,  var(--color-text-muted,  #7a6555));
  --tst-line:  var(--card-border, var(--color-border,      #e8ddd2));
  --tst-ok:    var(--success,     var(--color-success,     #4caf50));
  --tst-dark:  var(--color-dark,  #1a0f0a);
  --tst-av:74px;          /* customer photo diameter — Layout → Customer photo size */
  --tst-radius:16px;
  position:relative;
}

/* ---- header ---- */
.hp-tst-head{ text-align:center; max-width:760px; margin:0 auto 26px; }
.hp-tst-eyebrow{ display:block; font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--tst-accent); margin-bottom:12px; }
/* Deliberately NO font-weight here. The font preset sets the heading weight site-wide
   (h1..h6,.section-title{font-weight:N}); forcing 600 made the browser SYNTHESISE bold on a
   display face that only ships 400 — which is what made this heading look like a different
   typeface from every other section title on the page. Same reason for the colour and the
   letter-spacing: both now match .section-title so the two read as one type system. */
.hp-tst-title{ font-family:var(--font-display,'Playfair Display',serif); line-height:1.2;
  font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:.06em;
  color:var(--primary,var(--color-primary,#2c1810)); margin:0; text-wrap:balance; }
.hp-tst-title.is-script{ font-family:var(--font-script,'Dancing Script',var(--font-display,serif));
  font-weight:700; line-height:1.05; letter-spacing:0; font-size:clamp(2.4rem,5vw,3.9rem); }
.hp-tst-rule{ display:block; width:62px; height:3px; border-radius:2px; margin:14px auto 0;
  background:linear-gradient(90deg,var(--tst-accent),color-mix(in srgb,var(--tst-accent) 45%,transparent)); }
.hp-tst-sub{ margin:14px 0 0; color:var(--tst-soft); font-size:.96rem; line-height:1.6; }

/* ---- the card ---- */
.hp-tst-card{ background:var(--tst-card); border:1px solid var(--tst-line); border-radius:var(--tst-radius);
  padding:22px 20px 20px; height:100%; display:flex; flex-direction:column; gap:10px;
  box-shadow:0 16px 34px -26px rgba(2,6,23,.34); }
/* The photo sits astride the card's top edge, so the negative margin has to scale with the
   diameter — a fixed -56px would drift off the edge as soon as the size changed. */
.hp-tst-av{ display:block; width:var(--tst-av);
  height:calc(var(--tst-av) / var(--tst-av-ar, 1));     /* 1 = square, .8 = 4:5 portrait, … */
  overflow:hidden; border:4px solid var(--tst-card); box-shadow:0 10px 22px -12px rgba(2,6,23,.4);
  background:var(--color-bg-2,#f5f0e8); }
.hp-tst-av img{ width:100%; height:100%; display:block;
  object-fit:var(--tst-av-fit, cover); object-position:var(--tst-av-focus, center); }

/* ---- photo shape (Layout → Photo shape) ---- */
.hp-tst-as-circle  .hp-tst-av{ border-radius:50%; }
.hp-tst-as-rounded .hp-tst-av{ border-radius:calc(var(--tst-av) * 0.18); }
.hp-tst-as-square  .hp-tst-av{ border-radius:2px; }

/* ---- photo placement (Layout → Photo placement) ----
   Only the two overlapping options pull the photo above the card, so only they need the
   track headroom added further down. */
.hp-tst-ap-top .hp-tst-av{ margin:calc(var(--tst-av) * -0.76) auto 4px; }
.hp-tst-ap-top-left .hp-tst-av{ margin:calc(var(--tst-av) * -0.76) auto 4px 0; }
.hp-tst-ap-inline .hp-tst-av{ margin:0 auto 12px; }
.hp-tst-ap-inline-left .hp-tst-av{ margin:0 auto 12px 0; }
/* Beside the name: the photo sits in the reviewer row, text stacked next to it. */
.hp-tst-who.is-withav{ flex-direction:row; align-items:center; gap:12px; }
.hp-tst-who.is-withav .hp-tst-av{ margin:0; flex:0 0 auto; }
.hp-tst-whotxt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.hp-tst-stars{ display:flex; gap:3px; color:var(--tst-accent); font-size:13px; }
.hp-tst-stars .is-off{ opacity:.26; }
.hp-tst-q{ margin:0; color:var(--tst-ink); font-size:.96rem; line-height:1.62; flex:1 1 auto;
  font-family:var(--font-body,inherit); }
.hp-tst-q::before{ content:'\201C'; } .hp-tst-q::after{ content:'\201D'; }
.hp-tst-who{ display:flex; flex-direction:column; gap:3px; margin-top:2px; }
.hp-tst-n{ font-weight:700; color:var(--tst-ink); font-size:.94rem; }
.hp-tst-r{ font-size:.8rem; color:var(--tst-soft); }
.hp-tst-v{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--tst-ok); }
.hp-tst-v i{ font-size:12px; }

/* ---- carousel: native scroll-snap, arrows sit outside the track ---- */
.hp-tst-rail{ position:relative; }
.hp-tst-track{ display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 2px; margin:0 -2px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
/* Only an OVERLAPPING photo needs headroom — the track clips its own overflow, so without this
   a photo hanging above the card would be cut off. Both values follow --tst-av so any size
   works. Placements that keep the photo inside the card get no wasted space. */
.hp-tst-ap-top .hp-tst-track,
.hp-tst-ap-top-left .hp-tst-track{
  padding:calc(var(--tst-av) / var(--tst-av-ar, 1) * 0.82) 2px 6px;
  margin:calc(var(--tst-av) / var(--tst-av-ar, 1) * -0.70) -2px 0; }
.hp-tst-track::-webkit-scrollbar{ display:none; }
.hp-tst-cell{ flex:0 0 100%; scroll-snap-align:start; }
.hp-tst-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--tst-line); background:var(--tst-card); color:var(--tst-ink); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; font-size:14px;
  box-shadow:0 10px 24px -14px rgba(2,6,23,.45); transition:background .15s,color .15s; }
.hp-tst-nav:hover{ background:var(--tst-accent); color:#fff; border-color:var(--tst-accent); }
/* Arrows stay out of the way until the section is hovered. visibility (not display) keeps them
   in the tab order and lets the fade run; a keyboard user gets them back via :focus-within. */
.hp-tst-nav{ opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s ease,
  background .15s, color .15s; }
.hp-tst:hover .hp-tst-nav,
.hp-tst:focus-within .hp-tst-nav,
.hp-tst-nav:focus-visible{ opacity:1; visibility:visible; }
/* Touch devices never hover — there the arrows are always on. */
@media(hover:none){ .hp-tst-nav{ opacity:1; visibility:visible; } }
@media(prefers-reduced-motion:reduce){ .hp-tst-nav{ transition:none; } }
.hp-tst-nav.is-prev{ left:-14px; } .hp-tst-nav.is-next{ right:-14px; }
.hp-tst-dots{ display:flex; justify-content:center; gap:8px; margin-top:18px; }
.hp-tst-dots:empty{ display:none; }
.hp-tst-dot{ width:9px; height:9px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:color-mix(in srgb,var(--tst-ink) 22%,transparent); transition:width .2s,background .2s; }
.hp-tst-dot.is-on{ width:26px; border-radius:5px; background:var(--tst-accent); }

/* ---- handwritten accent ---- */
.hp-tst-script{ font-family:var(--font-script,'Dancing Script',cursive); font-weight:600; line-height:1.05; color:var(--tst-accent);
  font-size:clamp(1.5rem,2.6vw,2.1rem); }
.hp-tst-script.is-center{ display:block; text-align:center; margin-top:18px; }
.hp-tst-script.is-corner{ position:absolute; right:18px; bottom:16px; z-index:4; text-align:right; }
.hp-tst-script.is-inline{ display:block; margin-top:10px; text-align:center; }

/* ============ 02 — Split feature ============ */
.hp-tst-split{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:0; align-items:stretch; }
.hp-tst-split .hp-tst-head{ text-align:left; margin:0 0 18px; }
.hp-tst-split .hp-tst-rule{ margin-left:0; margin-right:auto; }
.hp-tst-side{ display:flex; flex-direction:column; justify-content:center; padding:38px clamp(18px,3vw,44px); }
.hp-tst-side-nav{ position:relative; display:flex; gap:12px; margin-top:22px; height:42px; }
.hp-tst-side-nav .hp-tst-nav{ position:static; transform:none; }
.hp-tst-stage{ position:relative; min-height:360px; display:flex; align-items:center; }
.hp-tst-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hp-tst-float{ position:relative; z-index:2; width:min(88%,420px); margin-left:clamp(-40px,-3vw,0px);
  background:var(--tst-card); border-radius:var(--tst-radius); padding:26px 24px 22px;
  box-shadow:0 28px 60px -30px rgba(2,6,23,.5); }
.hp-tst-float .hp-tst-track{ padding:6px 2px; margin:0 -2px; }
.hp-tst-float .hp-tst-cell{ flex:0 0 100%; }
.hp-tst-float .hp-tst-card{ border:0; box-shadow:none; padding:0; background:transparent; }
.hp-tst-float .hp-tst-av{ margin:0 0 10px; width:0; height:0; border:0; box-shadow:none; }
.hp-tst-mark{ position:absolute; right:14px; bottom:2px; font-family:var(--font-display,serif); font-size:96px;
  line-height:1; color:color-mix(in srgb,var(--tst-ink) 9%,transparent); pointer-events:none; }

/* ============ 03 — Dark spotlight ============ */
/* On dark the ink is derived FROM the preset's dark colour, so a warm-brown or navy palette
   reads as its own dark, not as a fixed green. */
.hp-tst-v-dark{ --tst-card:transparent;
  --tst-ink:color-mix(in srgb, var(--tst-dark) 8%, #ffffff);
  --tst-soft:color-mix(in srgb, var(--tst-dark) 26%, #ffffff);
  --tst-line:rgba(255,255,255,.16);
  position:relative; padding:clamp(44px,6vw,76px) clamp(16px,4vw,48px); overflow:hidden;
  background:var(--tst-dark); border-radius:inherit; }
.hp-tst-bg{ position:absolute; inset:0; background:var(--tst-dark) center/cover no-repeat; }
/* The darkening scrim is the preset's dark colour at the admin's chosen opacity — a plain
   overlay rather than a baked-in rgba(), so it recolours with the palette. */
.hp-tst-bg::after{ content:''; position:absolute; inset:0; background:var(--tst-dark);
  opacity:var(--tst-scrim,.66); }
.hp-tst-v-dark > *{ position:relative; z-index:1; }
.hp-tst-v-dark .hp-tst-title{ color:var(--tst-ink); }
.hp-tst-v-dark .hp-tst-card{ text-align:center; align-items:center; box-shadow:none; border:0; padding:0; }
.hp-tst-v-dark{ --tst-av:96px; }
.hp-tst-v-dark .hp-tst-av{ border-color:var(--tst-accent); }
/* Dark cards are borderless and transparent, so an overhang has no edge to straddle —
   neutralise the lift there but keep the chosen left/centre alignment. (0,3,0) > (0,2,0). */
.hp-tst-v-dark.hp-tst-ap-top .hp-tst-av,
.hp-tst-v-dark.hp-tst-ap-top-left .hp-tst-av{ margin-top:0; margin-bottom:14px; }
.hp-tst-v-dark .hp-tst-stars{ justify-content:center; }
.hp-tst-v-dark .hp-tst-who{ align-items:center; }
.hp-tst-v-dark .hp-tst-track{ padding:6px 2px; margin:0 -2px; }
.hp-tst-v-dark .hp-tst-nav{ background:transparent; color:var(--tst-ink); border-color:rgba(255,255,255,.3); }
.hp-tst-v-dark .hp-tst-dot{ background:rgba(255,255,255,.28); width:22px; height:4px; border-radius:2px; }
.hp-tst-v-dark .hp-tst-dot.is-on{ width:34px; background:var(--tst-accent); }
.hp-tst-v-dark .hp-tst-v{ color:color-mix(in srgb, var(--tst-ok) 58%, #ffffff); }

/* ============ 04 — Polaroid collage ============ */
.hp-tst-collage{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr) minmax(0,.9fr);
  gap:clamp(8px,2vw,26px); align-items:center; }
.hp-tst-pols{ position:relative; min-height:340px; }
.hp-tst-pol{ margin:0; position:absolute; width:58%; background:var(--tst-card); padding:9px; border-radius:4px;
  box-shadow:0 20px 42px -22px rgba(2,6,23,.5); }
.hp-tst-pol img{ width:100%; height:auto; display:block; border-radius:2px; }
.hp-tst-pol-1{ top:2%;  left:6%;  transform:rotate(-7deg); }
.hp-tst-pol-2{ top:4%;  right:4%; transform:rotate(6deg);  width:62%; }
.hp-tst-pol-3{ bottom:6%; left:22%; transform:rotate(5deg);  width:52%; }
.hp-tst-pol-4{ bottom:4%; right:12%; transform:rotate(-5deg); width:50%; }
.hp-tst-pol-5{ top:38%; left:0;    transform:rotate(9deg);  width:46%; }
.hp-tst-pols.is-right{ display:flex; flex-direction:column; justify-content:flex-end; }
.hp-tst-collage .hp-tst-track{ padding:6px 2px; margin:0 -2px; }
.hp-tst-collage .hp-tst-cell{ flex:0 0 100%; }
.hp-tst-collage .hp-tst-card{ text-align:center; align-items:center; }
.hp-tst-collage .hp-tst-stars{ justify-content:center; }
.hp-tst-collage .hp-tst-who{ align-items:center; }
.hp-tst-collage .hp-tst-av{ display:none; }

/* ============ 05 — Stats + reviews ============ */
.hp-tst-statsplit{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.3fr); gap:clamp(24px,4vw,56px); align-items:center; }
.hp-tst-statcol{ min-width:0; }
.hp-tst-statsplit .hp-tst-head{ text-align:left; margin:0 0 26px; max-width:none; }
.hp-tst-statsplit .hp-tst-rule{ margin-left:0; margin-right:auto; }
.hp-tst-statsplit .hp-tst-title{ font-size:clamp(1.75rem,3.4vw,2.5rem); }
.hp-tst-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.hp-tst-stat{ display:flex; flex-direction:column; gap:8px; }
.hp-tst-stat i{ font-size:22px; color:var(--secondary,var(--color-secondary,#8b6914)); }
/* The body face has a real 700; the display face may not. Numbers set in a faked bold look
   wrong next to the heading, so these use the body family. */
.hp-tst-stat-v{ display:block; font-family:var(--font-body,system-ui,sans-serif); font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.9rem); color:var(--tst-ink); line-height:1.1;
  letter-spacing:-.01em; }
.hp-tst-stat-l{ display:block; font-size:.8rem; color:var(--tst-soft); margin-top:2px; }
.hp-tst-stats .hp-tst-stat{ font-variant-numeric:tabular-nums; }
.hp-tst-stats .hp-tst-stat-l{ text-wrap:balance; }
.hp-tst-statrail{ min-width:0; }
.hp-tst-stats .hp-tst-stat > div{ display:block; }

/* ---- responsive ------------------------------------------------------------------------- */
@media(max-width:1024px){
  .hp-tst-statsplit{ grid-template-columns:1fr; }
  .hp-tst-statsplit .hp-tst-head{ text-align:center; margin-inline:auto; }
  .hp-tst-statsplit .hp-tst-rule{ margin-inline:auto; }
}
@media(max-width:900px){
  .hp-tst-cell{ flex:0 0 100%; }
  .hp-tst-split{ grid-template-columns:1fr; }
  .hp-tst-side{ padding:28px 4px 4px; text-align:center; }
  .hp-tst-split .hp-tst-head{ text-align:center; }
  .hp-tst-split .hp-tst-rule{ margin-inline:auto; }
  .hp-tst-side-nav{ justify-content:center; }
  .hp-tst-stage{ min-height:0; padding-bottom:18px; }
  .hp-tst-photo{ position:relative; height:clamp(220px,46vw,340px); border-radius:var(--tst-radius); }
  .hp-tst-float{ width:min(94%,460px); margin:-58px auto 0; }
  /* The scattered photos cannot hold their absolute positions on a phone — they become a
     tidy two-up strip above and below the quote instead of overlapping it. */
  .hp-tst-collage{ grid-template-columns:1fr; }
  .hp-tst-pols{ min-height:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .hp-tst-pol{ position:static; width:auto; transform:none; }
  .hp-tst-pol:nth-child(n+3){ display:none; }
  .hp-tst-script.is-corner{ position:static; display:block; text-align:center; margin-top:14px; }
}
@media(max-width:620px){
  .hp-tst-nav.is-prev{ left:2px; } .hp-tst-nav.is-next{ right:2px; }
  .hp-tst-nav{ width:38px; height:38px; }
  .hp-tst-stats{ grid-template-columns:1fr; gap:12px; }
  .hp-tst-stat{ flex-direction:row; align-items:center; gap:12px; }
}
@media(prefers-reduced-motion:reduce){ .hp-tst-track{ scroll-behavior:auto; } }
.hp-video{ position:relative; aspect-ratio:16/9; margin-top:22px; border-radius:12px; overflow:hidden; } .hp-video iframe{ width:100%; height:100%; border:0; }
/* The legacy .hp-nl / .hp-nl-form rules that lived here were removed with the block rewrite.
   They set text-align:center on the whole section and made .hp-nl-form a flex container, which
   fought the new layout: every child settled on a different centre line. */
/* (removed legacy .hp-hero custom-controller CSS — replaced by the .hp-hero-swiper Swiper hero below) */

/* ============ Phase E.2 universal block styles ============ */
/* Section headings (homepage sections AND content blocks) must render exactly
   as typed — never force ALL-CAPS. This overrides the theme's default
   .section-title{ text-transform:uppercase } so headings like "Best Sellers"
   or "Luxury Panjabi Collection" show with their entered casing. Buttons,
   badges and eyebrow labels keep their own intentional uppercase. */
.section-title,
[data-hpblock="1"] h1, [data-hpblock="1"] h2, [data-hpblock="1"] h3,
[data-hpblock="1"] h4, [data-hpblock="1"] h5, [data-hpblock="1"] h6,
.hp-heading, .hp-heading-sub{ text-transform:none; }
.hp-heading{ margin:0 0 6px; line-height:1.2; }
.hp-heading-sub{ margin:0; color:var(--text-muted,var(--color-text-muted,#7a6555)); font-size:15px; }

/* SweetAlert must always sit ABOVE storefront drawers/overlays — the quick-view
   sidebar (z-index 8100), the cart drawer, etc. — so messages like "Please select
   a colour/size", "Added to cart" and "Maximum stock reached" appear in front of
   the right sidebar instead of behind it. Default swal2 z-index is only 1060. */
.swal2-container{ z-index:200000 !important; }
.hp-c-btn{ display:inline-block; text-decoration:none; font-weight:600; border-radius:9px; transition:.15s; cursor:pointer; border:1px solid transparent; }
.hp-btn-sm{ padding:7px 14px; font-size:13px; } .hp-btn-md{ padding:10px 20px; font-size:14px; } .hp-btn-lg{ padding:14px 28px; font-size:16px; }
.hp-btn-solid{ background:linear-gradient(135deg,var(--primary,#0fb39a),var(--secondary,var(--primary-dark,#0b8a76))); color:#fff; }
.hp-btn-outline{ background:transparent; border-color:var(--primary,#0fb39a); color:var(--primary,#0fb39a); }
.hp-btn-light{ background:var(--color-bg-2,#f5f0e8); color:var(--text,var(--color-text,#1a0f0a)); }
.hp-btn-link{ background:transparent; color:var(--primary,#0fb39a); padding-left:0; padding-right:0; }
.hp-c-btn:hover{ filter:brightness(.96); transform:translateY(-1px); }
.hp-container{ }
.hp-cols{ display:flex; flex-wrap:wrap; }
.hp-col{ min-width:0; }
.hp-grid{ display:grid; }
.hp-grid-cell{ min-width:0; }
.hp-tabs{ }
.hp-tabnav{ display:flex; flex-wrap:wrap; gap:4px; border-bottom:2px solid var(--card-border,var(--color-border,#e8ddd2)); margin-bottom:16px; }
.hp-tab{ border:0; background:none; padding:10px 18px; font-weight:600; font-size:14px; color:var(--text-muted,var(--color-text-muted,#7a6555)); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; font-family:inherit; }
.hp-tab.active{ color:var(--primary,#0fb39a); border-bottom-color:var(--primary,#0fb39a); }
.hp-tabpanel{ display:none; } .hp-tabpanel.active{ display:block; }
.hp-acc-item{ border:1px solid var(--card-border,var(--color-border,#e8ddd2)); border-radius:10px; margin-bottom:10px; overflow:hidden; }
.hp-acc-h{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; background:var(--card-bg,var(--color-card-bg,#fff)); border:0; font-weight:600; font-size:15px; cursor:pointer; text-align:left; font-family:inherit; }
.hp-acc-h i{ transition:.2s; color:var(--text-light,var(--color-text-light,#b5a090)); }
.hp-acc-item.open .hp-acc-h i{ transform:rotate(180deg); }
.hp-acc-b{ display:none; padding:2px 16px 16px; color:var(--text-muted,var(--color-text-muted,#7a6555)); }
.hp-acc-item.open .hp-acc-b{ display:block; }
.hp-gallery{ display:grid; gap:12px; }
.hp-gal-item{ margin:0; border-radius:10px; overflow:hidden; }
.hp-gal-item img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:1/1; }
.hp-gal-item figcaption{ font-size:12px; color:var(--text-muted,var(--color-text-muted,#7a6555)); padding:6px 2px; }
.hp-carousel{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - (var(--cols) - 1) * 14px) / var(--cols)); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
.hp-carousel-slot{ scroll-snap-align:start; text-decoration:none; color:inherit; }
.hp-carousel-card{ border:1px solid var(--card-border,var(--color-border,#e8ddd2)); border-radius:12px; overflow:hidden; background:var(--card-bg,var(--color-card-bg,#fff)); }
.hp-carousel-card img{ width:100%; aspect-ratio:1/1; object-fit:var(--cr-fit,cover); display:block; }
.hp-carousel-t{ padding:10px 12px; font-weight:600; font-size:14px; }
.hp-cards{ display:grid; gap:20px; }
.hp-card{ border:1px solid var(--card-border,var(--color-border,#e8ddd2)); border-radius:14px; overflow:hidden; background:var(--card-bg,var(--color-card-bg,#fff)); display:flex; flex-direction:column; transition:.15s; }
.hp-card:hover{ box-shadow:0 10px 30px rgba(0,0,0,.08); transform:translateY(-2px); }
.hp-card-link{ text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.hp-card-img img{ width:100%; aspect-ratio:4/3; object-fit:var(--cd-fit,cover); display:block; }
.hp-card-ic{ font-size:34px; color:var(--primary,#0fb39a); padding:22px 22px 0; }
.hp-card-body{ padding:16px 18px 20px; }
.hp-card-t{ font-weight:700; font-size:16px; margin-bottom:6px; }
.hp-card-x{ color:var(--text-muted,var(--color-text-muted,#7a6555)); font-size:14px; line-height:1.5; margin-bottom:12px; }
.hp-pricing{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.hp-plan{ border:1px solid var(--card-border,var(--color-border,#e8ddd2)); border-radius:16px; padding:26px 22px; background:var(--card-bg,var(--color-card-bg,#fff)); text-align:center; }
.hp-plan.featured{ border-color:var(--primary,#0fb39a); box-shadow:0 12px 34px rgba(15,179,154,.16); transform:translateY(-4px); }
.hp-plan-name{ font-weight:700; font-size:18px; }
.hp-plan-price{ font-size:32px; font-weight:800; margin:10px 0 16px; color:var(--primary-dark,#0b8a76); }
.hp-plan-feat{ list-style:none; margin:0 0 18px; padding:0; text-align:left; }
.hp-plan-feat li{ padding:7px 0 7px 24px; position:relative; color:var(--text-muted,var(--color-text-muted,#7a6555)); font-size:14px; border-bottom:1px dashed var(--card-border,var(--color-border,#e8ddd2)); }
.hp-plan-feat li::before{ content:"\2713"; position:absolute; left:0; color:var(--primary,#0fb39a); font-weight:700; }
.hp-map{ border-radius:12px; overflow:hidden; line-height:0; }
.hp-map-addr{ font-size:13px; color:var(--text-muted,var(--color-text-muted,#7a6555)); padding:8px 2px; }
.hp-embed{ }
.hp-richtext{ line-height:1.6; }
@media (max-width:768px){
  .hp-cols{ flex-direction:column; } .hp-col{ max-width:100% !important; flex-basis:100% !important; }
  .hp-grid{ grid-template-columns:1fr 1fr !important; } .hp-gallery{ grid-template-columns:repeat(2,1fr) !important; }
  .hp-cards{ grid-template-columns:1fr 1fr !important; }
}
/* entrance animations (Advanced tab) */
.hp-anim-fade{ animation:hpFade .6s ease both; }
.hp-anim-slide-up{ animation:hpSlideUp .6s ease both; }
.hp-anim-slide-left{ animation:hpSlideLeft .6s ease both; }
.hp-anim-zoom{ animation:hpZoom .5s ease both; }
@keyframes hpFade{ from{opacity:0} to{opacity:1} }
@keyframes hpSlideUp{ from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }
@keyframes hpSlideLeft{ from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:none} }
@keyframes hpZoom{ from{opacity:0;transform:scale(.94)} to{opacity:1;transform:none} }

/* Hero slider — slider label eyebrow */
.hp-hero-label{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.18); backdrop-filter:blur(4px); margin-bottom:12px; }

/* rich (Jodit) content inside hero/cards — reset default paragraph spacing */
.hp-hero-cap .hp-hero-sub p, .hp-hero-cap .hp-hero-desc p{ margin:0 0 4px; }
.hp-hero-cap .hp-hero-sub p:last-child, .hp-hero-cap .hp-hero-desc p:last-child{ margin-bottom:0; }
.hp-card-x p{ margin:0 0 6px; } .hp-card-x p:last-child{ margin-bottom:0; }

/* ============================================================
   Content Library — Hero Slider (Swiper), styled like the
   theme Main Slider but scoped to .hp-hero-swiper so it never
   collides with the homepage .hero-swiper init.
   ============================================================ */
.hp-sec.hp-sec-hero_slider, .hp-sec.hp-sec-hero_banner{ padding:0; }  /* heroes are full-bleed by default; the block's Outer gap adds padding */
/* Icon-features / USP strip has its own white band, so drop the default section
   padding — it should sit flush under the hero with no white gap above/below. */
.hp-sec.hp-sec-icon_features{ padding-top:0; padding-bottom:0; }
/* container-type makes the hero a size container so its title/subtitle (sized in cqi units) scale to
   the hero's OWN width — a hero in a half/third column gets a proportionally smaller title instead of
   a viewport-sized one that overflows. Only the inline (width) axis is contained, so height is unaffected. */
.hp-hero-section{ position:relative; overflow:hidden; container-type:inline-size; }
.hp-hero-swiper{ width:100%; height:var(--hph,560px); }
.hp-hero-swiper > .swiper-wrapper{ height:100%; }
.hp-hero-slide.swiper-slide{ height:100%; }
/* Window-height mode (Hero "Height mode = Window height / vh"): fill the viewport at EVERY
   breakpoint. The compound .hp-hero-vh selector (specificity 0,2,0) outranks the fixed
   mobile heights in the media queries below, so full-window wins on phones and tablets too. */
.hp-hero-swiper.hp-hero-vh, .hp-hero-banner.hp-hero-vh{ height:var(--hph,100vh) !important; }
.hp-hero-banner{ position:relative; overflow:hidden; width:100%; }
.hp-hero-slide{ position:relative; overflow:hidden; }
.hp-hero-img{ width:100%; height:100%; object-fit:cover; display:block; }
/* YouTube background video */
.hp-hero-video{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; background:#000; }
.hp-hero-poster{ position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; transition:opacity .8s ease; }
.hp-hero-slide.video-ready .hp-hero-poster{ opacity:0; }
.hp-hero-video iframe{ position:absolute; top:50%; left:50%; width:100vw; height:56.25vw; min-height:100%; min-width:177.78vh; transform:translate(-50%,-50%); border:0; }
.hp-hero-overlay{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; padding:0 8%; }
.hp-hero-pos-middle{ justify-content:center; text-align:center; }
.hp-hero-pos-right{ justify-content:flex-end; text-align:right; }
.hp-hero-pos-middle .hp-hero-btns{ justify-content:center; }
.hp-hero-pos-right  .hp-hero-btns{ justify-content:flex-end; }
.hp-hero-content{ max-width:520px; }
.hp-hero-badge{ display:inline-block; background:var(--color-gold,#c9a227); color:#1a1a1a; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:5px 14px; border-radius:999px; margin-bottom:16px; }
.hp-hero-content h1{ font-size:clamp(2.2rem,5vw,3.8rem); font-weight:700; color:#fff; line-height:1.15; margin:0 0 16px; text-shadow:0 2px 20px rgba(0,0,0,.3); }
.hp-hero-sub{ font-size:.98rem; color:rgba(255,255,255,.85); margin-bottom:26px; line-height:1.7; }
.hp-hero-sub p{ margin:0 0 6px; } .hp-hero-sub p:last-child{ margin-bottom:0; }
.hp-hero-btns{ display:flex; gap:14px; flex-wrap:wrap; }
.hp-hero-btn{ background:var(--color-gold,#c9a227); color:#1a1a1a; padding:13px 32px; border-radius:999px; font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; transition:transform .2s, box-shadow .2s; box-shadow:0 4px 18px rgba(201,162,39,.28); display:inline-block; }
.hp-hero-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 28px rgba(201,162,39,.4); }
.hp-hero-btn-outline{ background:transparent !important; color:#fff !important; border:2px solid rgba(255,255,255,.6); box-shadow:none; }
.hp-hero-btn-outline:hover{ background:rgba(255,255,255,.12) !important; border-color:#fff; }
/* Swiper nav + pagination */
.hp-hero-section .swiper-button-next,
.hp-hero-section .swiper-button-prev{ color:#fff; background:rgba(44,24,16,.55); width:46px; height:46px; border-radius:50%; backdrop-filter:blur(4px); transition:background .2s, color .2s; }
.hp-hero-section .swiper-button-next::after,
.hp-hero-section .swiper-button-prev::after{ font-size:1rem; font-weight:700; }
.hp-hero-section .swiper-button-next:hover,
.hp-hero-section .swiper-button-prev:hover{ background:var(--color-gold,#c9a227); color:#1a1a1a; }
.hp-hero-section .swiper-pagination-bullet{ background:rgba(255,255,255,.5); width:8px; height:8px; opacity:1; transition:width .2s, background .2s; }
.hp-hero-section .swiper-pagination-bullet-active{ background:var(--color-gold,#c9a227); width:24px; border-radius:4px; }
/* Text animations — replay each time a slide becomes active.
   Content stays visible by default (so the hero never goes blank if Swiper
   is slow/absent); the entrance animation just replays on the active slide. */
.hp-hero-swiper .swiper-slide-active .hp-hero-content.hp-anim-fade-up{ animation:hpHeroFadeUp .85s ease forwards; }
.hp-hero-swiper .swiper-slide-active .hp-hero-content.hp-anim-fade{ animation:hpHeroFade .9s ease forwards; }
.hp-hero-swiper .swiper-slide-active .hp-hero-content.hp-anim-slide-left{ animation:hpHeroSlideL .8s ease forwards; }
.hp-hero-swiper .swiper-slide-active .hp-hero-content.hp-anim-slide-right{ animation:hpHeroSlideR .8s ease forwards; }
.hp-hero-swiper .swiper-slide-active .hp-hero-content.hp-anim-zoom{ animation:hpHeroZoom .9s ease forwards; }
.hp-hero-swiper .swiper-slide-active .hp-hero-content.hp-anim-none{ opacity:1; animation:none; }
@keyframes hpHeroFadeUp{ from{opacity:0;transform:translateY(34px);} to{opacity:1;transform:translateY(0);} }
@keyframes hpHeroFade{ from{opacity:0;} to{opacity:1;} }
@keyframes hpHeroSlideL{ from{opacity:0;transform:translateX(-48px);} to{opacity:1;transform:translateX(0);} }
@keyframes hpHeroSlideR{ from{opacity:0;transform:translateX(48px);} to{opacity:1;transform:translateX(0);} }
@keyframes hpHeroZoom{ from{opacity:0;transform:scale(.9);} to{opacity:1;transform:scale(1);} }
/* Responsive height — definite per-breakpoint heights (matching the theme Main Slider) so
   object-fit:cover always fills and there's no gap. !important beats the inline desktop height. */
@media (max-width:991px){
  .hp-hero-swiper, .hp-hero-banner{ height:420px !important; }
  .hp-hero-content{ max-width:100% !important; }
  .hp-hero-overlay{ padding:0 7% !important; }
}
@media (max-width:576px){
  .hp-hero-swiper, .hp-hero-banner{ height:320px !important; }
  .hp-hero-overlay{ padding:0 6% !important; align-items:center; }
  .hp-hero-content h1{ margin-bottom:12px; }
  .hp-hero-sub{ margin-bottom:16px; }
  .hp-hero-badge{ padding:4px 11px; margin-bottom:11px; }
  .hp-hero-btns{ gap:10px; }
  .hp-hero-btn{ padding:11px 22px; font-size:.74rem; }
}

/* Homepage builder — responsive multi-column grid (sections choose a width/span) */
/* Boxed by default so a Contained section sits inside the centred site container (not bleeding to the
   viewport edge). Individual Full-width sections break out to full-bleed via negative margins; the
   .hp-sections wrapper clips the sub-pixel bleed so no horizontal scrollbar appears. */
.hp-sections{ overflow-x:clip; }
.hp-page-grid{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:24px; row-gap:0; align-items:start; width:100%; max-width:var(--container-max,1280px); margin-left:auto; margin-right:auto; }
.hp-page-grid > .hp-sec{ grid-column:span 12; min-width:0; }
/* Full-bleed breakout applies ONLY to a full-width section that occupies the whole row
   (hp-col-12). A full-width section confined to a partial column (Half 1/2, Third 1/3, …)
   must fill its own column — NOT spill across the viewport, which overlapped its row
   neighbours. Partial columns keep the inline grid-column:span N and no negative margins. */
.hp-page-grid > .hp-sec-full.hp-col-12{ grid-column:1 / -1; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.hp-page-grid > .hp-sec-full:not(.hp-col-12){ margin-left:0; margin-right:0; }
/* A full-width partial section that sits at a row edge breaks out to the viewport edge on THAT side
   (the assembler tags it hp-bleed-l / hp-bleed-r). So two half-width Full-width banners together fill
   the page with no left/right gutter, while a lone half only bleeds on the edge it touches. */
/* Breakout = negative grid gutter (viewport edge − grid edge). NOTE: for a partial column we can't
   use calc(50% - 50vw) — a grid item's % margin resolves against its own (half-width) track, not the
   whole grid, which over-extends. Use the container gutter directly so it works for any column span.
   min(0,…) keeps it at 0 when the viewport is narrower than the container (no gutter to cross). */
.hp-page-grid > .hp-sec-full.hp-bleed-l:not(.hp-col-12){ margin-left:min(0px, calc((var(--container-max,1280px) - 100vw) / 2)); }
.hp-page-grid > .hp-sec-full.hp-bleed-r:not(.hp-col-12){ margin-right:min(0px, calc((var(--container-max,1280px) - 100vw) / 2)); }
.hp-page-grid > .hp-sec-full:not(.hp-col-12) .hp-hero-section,
.hp-page-grid > .hp-sec-full:not(.hp-col-12) .hp-c-banner{ width:100%; }
/* In a partial column, "Full width" must actually fill the column: drop the inner content
   gutter/cap so the block spans its column edge-to-edge. Without this it kept the standard
   .container max-width + 20px side padding, so Full width looked identical to Contained.
   (Contained partial columns still keep the gutter, so the two modes now differ visibly.) */
.hp-page-grid > .hp-sec-full:not(.hp-col-12) .container,
.hp-page-grid > .hp-sec-full:not(.hp-col-12) .hp-container{ max-width:none; padding-left:0; padding-right:0; }
@media (max-width:900px){ .hp-page-grid{ column-gap:16px; } .hp-page-grid > .hp-sec[class*="hp-col-"]{ grid-column:span 6 !important; } .hp-page-grid > .hp-sec.hp-col-12, .hp-page-grid > .hp-sec.hp-col-8{ grid-column:1 / -1 !important; } }
@media (max-width:600px){ .hp-page-grid{ grid-template-columns:1fr; column-gap:0; } .hp-page-grid > .hp-sec{ grid-column:1 / -1 !important; } }

/* ---- Categories content block (mirrors the theme's Browse Categories) ---- */
.cbcat .cbcat-title{ margin-bottom:22px; }
.cbcat-band-soft{ background:var(--color-bg-2,#f5f0e8); border-radius:18px; padding:26px 22px; }
.cbcat-swiper{ padding:10px 4px 20px; }
.cbcat-outer{ position:relative; }
.cbcat-grid{ display:grid; }
.cbcat-card{ display:block; }
.cbcat-card.cbcat-shape-round{ border-radius:22px; }
.cbcat-card.cbcat-shape-circle{ border-radius:50%; }
.cbcat-noimg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:var(--color-bg-2,#f5f0e8); color:var(--text-light,var(--color-text-light,#b5a090)); font-size:34px; }
.cbcat-badge{ position:absolute; top:10px; left:10px; z-index:3; color:#fff; font-size:11px; font-weight:700; padding:3px 11px; border-radius:20px; box-shadow:0 4px 10px rgba(0,0,0,.15); }
.cbcat-card .category-count{ display:block; color:rgba(255,255,255,.85); font-size:.72rem; font-weight:600; margin-top:3px; }

/* ---- Slider arrows: show on hover only (desktop). Touch devices keep them visible. ---- */
@media (hover:hover) and (pointer:fine){
  .swiper-outer .swiper-nav-btn,
  .hero-section .swiper-button-next,
  .hero-section .swiper-button-prev,
  .hp-hero-section .swiper-button-next,
  .hp-hero-section .swiper-button-prev{
    opacity:0; visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
  }
  .swiper-outer:hover .swiper-nav-btn{ opacity:1; visibility:visible; }
  .swiper-outer:hover .swiper-nav-btn.swiper-button-disabled{ opacity:.3; visibility:visible; }
  .hero-section:hover .swiper-button-next,
  .hero-section:hover .swiper-button-prev,
  .hp-hero-section:hover .swiper-button-next,
  .hp-hero-section:hover .swiper-button-prev{ opacity:1; visibility:visible; }
}


/* ============================================================================================
   INSTAGRAM / SOCIAL — six finished layouts
   Shared tile, shared header, one native scroll-snap carousel. Every colour resolves through
   the colour preset; no font-weight is forced on the display face (a preset face may ship one
   weight, and a forced weight it lacks is synthesised and reads as the wrong typeface).
   ============================================================================================ */
.hp-ig{
  --ig-accent:var(--accent,      var(--color-gold,        #c9a227));
  --ig-card:  var(--card-bg,     var(--color-card-bg,     #ffffff));
  --ig-ink:   var(--primary,     var(--color-primary,     #2c1810));
  --ig-body:  var(--text,        var(--color-text,        #1a0f0a));
  --ig-soft:  var(--text-muted,  var(--color-text-muted,  #7a6555));
  --ig-line:  var(--card-border, var(--color-border,      #e8ddd2));
  --ig-dark:  var(--color-dark,  #1a0f0a);
  --ig-ratio:4/5; --ig-gap:14px; --ig-radius:12px;
  position:relative; overflow-x:clip;
}

/* ---- header ---- */
.hp-ig-head{ text-align:center; max-width:760px; margin:0 auto 24px; }
.hp-ig-eyebrow{ display:block; font-family:var(--font-body,inherit); font-size:11.5px; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ig-soft); margin-bottom:12px; }
.hp-ig-title{ font-family:var(--font-display,'Playfair Display',serif); line-height:1.2;
  font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:.06em; color:var(--ig-ink); margin:0; text-wrap:balance; }
.hp-ig-rule{ display:block; width:56px; height:3px; border-radius:2px; margin:13px auto 0;
  background:linear-gradient(90deg,var(--ig-accent),color-mix(in srgb,var(--ig-accent) 40%,transparent)); }
.hp-ig-sub{ margin:13px 0 0; color:var(--ig-soft); font-size:.94rem; line-height:1.6;
  font-family:var(--font-body,inherit); }

/* ---- tile ---- */
.hp-ig-t{ position:relative; display:block; overflow:hidden; border-radius:var(--ig-radius);
  background:var(--color-bg-2,#f5f0e8); aspect-ratio:var(--ig-ratio); height:var(--ig-h, auto); text-decoration:none; }
.hp-ig-t img{ width:100%; height:100%; object-fit:var(--ig-fit,cover); display:block;
  transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.hp-ig-t:hover img{ transform:scale(1.06); }
.hp-ig-glyph{ position:absolute; left:8px; bottom:8px; z-index:2; width:22px; height:22px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff;
  background:rgba(15,23,42,.55); backdrop-filter:blur(3px); }
.hp-ig-like{ position:absolute; left:8px; bottom:8px; z-index:2; display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:99px; font-size:11.5px; font-weight:700; color:var(--ig-body);
  background:var(--ig-card); box-shadow:0 4px 12px -6px rgba(2,6,23,.4); font-variant-numeric:tabular-nums; }
.hp-ig-like i{ font-size:10px; color:var(--ig-accent); }
/* When a like chip is present the glyph would collide with it — the chip wins. */
.hp-ig-t:has(.hp-ig-like) .hp-ig-glyph{ left:auto; right:8px; }
.hp-ig-hov{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:26px; opacity:0; transition:opacity .22s;
  background:linear-gradient(135deg,rgba(131,58,180,.5),rgba(225,48,108,.5),rgba(252,176,69,.45)); }
.hp-ig-t:hover .hp-ig-hov, .hp-ig-t:focus-visible .hp-ig-hov{ opacity:1; }
@media(prefers-reduced-motion:reduce){ .hp-ig-t img{ transition:none; } .hp-ig-t:hover img{ transform:none; } }

/* ---- row + carousel ---- */
.hp-ig-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ig-gap); }
.hp-ig-rail{ position:relative; }
.hp-ig-track{ display:flex; gap:var(--ig-gap); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 2px; margin:0 -2px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.hp-ig-track::-webkit-scrollbar{ display:none; }
.hp-ig-cell{ flex:0 0 calc(50% - (var(--ig-gap) / 2)); scroll-snap-align:start; }
.hp-ig-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:40px; height:40px;
  border-radius:50%; border:1px solid var(--ig-line); background:var(--ig-card); color:var(--ig-body);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:13px;
  box-shadow:0 10px 24px -14px rgba(2,6,23,.45); transition:background .15s,color .15s; }
.hp-ig-nav:hover{ background:var(--ig-accent); color:#fff; border-color:var(--ig-accent); }
.hp-ig-nav{ opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s ease,
  background .15s, color .15s; }
.hp-ig:hover .hp-ig-nav,
.hp-ig:focus-within .hp-ig-nav,
.hp-ig-nav:focus-visible{ opacity:1; visibility:visible; }
@media(hover:none){ .hp-ig-nav{ opacity:1; visibility:visible; } }
@media(prefers-reduced-motion:reduce){ .hp-ig-nav{ transition:none; } }
.hp-ig-nav.is-prev{ left:4px; } .hp-ig-nav.is-next{ right:4px; }
@media(min-width:1260px){
  .hp-ig-nav.is-prev{ left:-12px; } .hp-ig-nav.is-next{ right:-12px; }
  .hp-ig-v-stories .hp-ig-nav.is-prev{ left:-20px; }
  .hp-ig-v-stories .hp-ig-nav.is-next{ right:-20px; }
}
.hp-ig-dots{ display:flex; justify-content:center; gap:8px; margin-top:16px; }
.hp-ig-dots:empty{ display:none; }
.hp-ig-dot{ width:9px; height:9px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:color-mix(in srgb,var(--ig-body) 22%,transparent); transition:width .2s,background .2s; }
.hp-ig-dot.is-on{ width:26px; border-radius:5px; background:var(--ig-accent); }

/* ---- follow button ---- */
.hp-ig-foot{ display:flex; justify-content:center; margin-top:24px; }
.hp-ig-btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 24px; border-radius:99px;
  font-family:var(--font-body,inherit); font-size:.9rem; font-weight:600; text-decoration:none;
  border:1px solid var(--ig-line); background:var(--ig-card); color:var(--ig-body);
  transition:transform .16s, box-shadow .16s, background .16s, color .16s; }
.hp-ig-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(2,6,23,.45); }
.hp-ig-btn.is-dark{ background:var(--ig-dark); color:#fff; border-color:transparent; }
.hp-ig-btn.is-dark:hover{ background:var(--ig-ink); }
.hp-ig-btn-go{ font-size:11px; opacity:.75; }

/* ============ 01 — Photo strip ============ */
.hp-ig-v-strip .hp-ig-head{ margin-bottom:26px; }

/* ============ 02 — Polaroid scatter ============ */
.hp-ig-split{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(20px,3.5vw,48px); align-items:center; }
.hp-ig-copy{ min-width:0; }
.hp-ig-split .hp-ig-head{ text-align:left; margin:0 0 22px; max-width:none; }
.hp-ig-split .hp-ig-rule{ margin-left:0; margin-right:auto; }
.hp-ig-scatter{ position:relative; min-height:360px; }
.hp-ig-pol{ position:absolute; display:block; margin:0; width:30%; background:var(--ig-card);
  padding:8px 8px 8px; border-radius:4px; box-shadow:0 22px 44px -24px rgba(2,6,23,.55); overflow:hidden; }
.hp-ig-pol img{ width:100%; height:auto; display:block; aspect-ratio:4/5; object-fit:var(--ig-fit,cover); border-radius:2px; }
.hp-ig-pol-1{ top:0;    left:2%;   transform:rotate(-8deg); z-index:2; }
.hp-ig-pol-2{ top:6%;   left:26%;  transform:rotate(4deg);  z-index:3; }
.hp-ig-pol-3{ top:1%;   left:50%;  transform:rotate(-4deg); z-index:4; }
.hp-ig-pol-4{ bottom:2%; left:14%; transform:rotate(6deg);  z-index:5; }
.hp-ig-pol-5{ bottom:6%; left:38%; transform:rotate(-6deg); z-index:6; }
.hp-ig-pol-6{ bottom:0;  left:62%; transform:rotate(5deg);  z-index:7; }
.hp-ig-pol:hover{ z-index:9; }

/* ============ 03 — Liked posts ============ */
.hp-ig-headrow{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.hp-ig-headrow .hp-ig-head{ margin:0 auto; }
.hp-ig-btn.is-pill{ flex:0 0 auto; }

/* ============ 04 — Story circles ============ */
.hp-ig-stories .hp-ig-t{ aspect-ratio:1/1; border-radius:50%; }
.hp-ig-stories .hp-ig-cell{ padding:4px; }
/* The gradient ring is a padded background behind a round tile — no extra element needed. */
.hp-ig-stories .hp-ig-t{ box-shadow:0 0 0 3px var(--ig-card), 0 0 0 6px transparent; }
.hp-ig-stories .hp-ig-cell{ position:relative; border-radius:50%;
  background:conic-gradient(from 210deg,#f9ce34,#ee2a7b,#6228d7,#f9ce34); }
.hp-ig-stories .hp-ig-glyph,.hp-ig-stories .hp-ig-like{ display:none; }
.hp-ig-stories .hp-ig-hov{ border-radius:50%; }


/* ============ 05 — Mosaic ============ */
.hp-ig-split.is-mosaic{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
.hp-ig-mosaic{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--ig-gap); min-width:0; }
/* An uneven rhythm: the first tile is tall, the rest fill around it. */
.hp-ig-mosaic > .hp-ig-t:nth-child(1){ grid-row:span 2; aspect-ratio:auto; }
.hp-ig-mosaic > .hp-ig-t:nth-child(6){ grid-column:span 2; aspect-ratio:auto; }
.hp-ig-more{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--ig-radius); background:var(--ig-dark); color:#fff; text-decoration:none;
  aspect-ratio:var(--ig-ratio); font-family:var(--font-body,inherit); font-size:.8rem; font-weight:600;
  text-align:center; padding:10px; line-height:1.35; transition:background .16s; }
.hp-ig-more:hover{ background:var(--ig-ink); }
.hp-ig-more-ic{ width:36px; height:36px; border-radius:50%; border:1.5px solid rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center; font-size:15px; }

/* ============ 06 — Dark band ============ */
.hp-ig-v-darkband{ --ig-card:transparent; --ig-ink:#fff; --ig-body:#fff;
  --ig-soft:color-mix(in srgb, var(--ig-dark) 24%, #ffffff);
  --ig-line:rgba(255,255,255,.22);
  position:relative; overflow:hidden; border-radius:inherit;
  padding:clamp(40px,5.5vw,72px) clamp(16px,4vw,48px); background:var(--ig-dark); }
.hp-ig-bg{ position:absolute; inset:0; background:var(--ig-dark) center/cover no-repeat; }
.hp-ig-bg::after{ content:''; position:absolute; inset:0; background:var(--ig-dark); opacity:var(--ig-scrim,.72); }
.hp-ig-v-darkband > *{ position:relative; z-index:1; }
.hp-ig-mark{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0 auto 16px;
  border-radius:50%; border:1px solid rgba(255,255,255,.32); color:#fff; font-size:19px; }
.hp-ig-v-darkband .hp-ig-nav{ background:transparent; color:#fff; }
.hp-ig-v-darkband .hp-ig-dot{ background:rgba(255,255,255,.3); }
.hp-ig-v-darkband .hp-ig-dot.is-on{ background:var(--ig-accent); }
.hp-ig-tagline{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px;
  margin-top:26px; font-family:var(--font-body,inherit); font-size:11.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.82); }
.hp-ig-tagline i{ width:1px; height:13px; background:rgba(255,255,255,.35); display:inline-block; }
.hp-ig-script.is-side{ display:block; margin-top:14px; text-align:center; }

/* ---- responsive ------------------------------------------------------------------------- */
@media(max-width:1024px){
  .hp-ig-split, .hp-ig-split.is-mosaic{ grid-template-columns:1fr; }
  .hp-ig-split .hp-ig-head{ text-align:center; margin-inline:auto; }
  .hp-ig-split .hp-ig-rule{ margin-inline:auto; }
  .hp-ig-copy{ display:flex; flex-direction:column; align-items:center; }
  /* Absolutely-placed polaroids cannot hold their overlap in a narrow column, so the scatter
     becomes a tidy three-up strip that keeps the tilt. */
  .hp-ig-scatter{ min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .hp-ig-pol{ position:static; width:auto; transform:rotate(-3deg); }
  .hp-ig-pol:nth-child(even){ transform:rotate(3deg); }
  .hp-ig-pol:nth-child(n+7){ display:none; }
  .hp-ig-script.is-corner{ position:static; display:block; text-align:center; margin-top:14px; }
}
@media(max-width:900px){
  .hp-ig-row{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hp-ig-cell{ flex:0 0 calc(33.333% - (var(--ig-gap) * 2 / 3)); }
  .hp-ig-mosaic{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hp-ig-mosaic > .hp-ig-t:nth-child(1),
  .hp-ig-mosaic > .hp-ig-t:nth-child(6){ grid-row:auto; grid-column:auto; aspect-ratio:var(--ig-ratio); }
  .hp-ig-headrow{ flex-direction:column; gap:16px; }
}
@media(max-width:620px){
  .hp-ig-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hp-ig-cell{ flex:0 0 calc(50% - (var(--ig-gap) / 2)); }
  .hp-ig-mosaic{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hp-ig-scatter{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hp-ig-pol:nth-child(n+5){ display:none; }
  .hp-ig-nav{ width:36px; height:36px; }
  .hp-ig-nav.is-prev{ left:0; } .hp-ig-nav.is-next{ right:0; }
  .hp-ig-btn{ padding:11px 20px; font-size:.85rem; }
  .hp-ig-tagline{ gap:10px; font-size:10.5px; letter-spacing:.16em; }
}
@media(max-width:420px){
  .hp-ig-stories .hp-ig-cell{ flex:0 0 calc(33.333% - (var(--ig-gap) * 2 / 3)); }
}
@media(prefers-reduced-motion:reduce){ .hp-ig-track{ scroll-behavior:auto; } }


/* ============================================================================================
   NEWSLETTER — six finished layouts
   One form, one header, one benefit list, reskinned per layout. Every colour resolves through
   the colour preset; the heading carries NO font-weight so the font preset owns it.
   ============================================================================================ */
.hp-nl{
  --nl-accent:var(--accent,      var(--color-gold,        #c9a227));
  --nl-surface:var(--card-bg,    var(--color-card-bg,     #ffffff));
  --nl-ink:   var(--primary,     var(--color-primary,     #2c1810));
  --nl-body:  var(--text,        var(--color-text,        #1a0f0a));
  --nl-soft:  var(--text-muted,  var(--color-text-muted,  #7a6555));
  --nl-line:  var(--card-border, var(--color-border,      #e8ddd2));
  --nl-dark:  var(--color-dark,  #1a0f0a);
  --nl-band:  transparent;
  /* Ink on the accent. The renderer overrides this per block with a contrast-checked value;
     white is the safe default because accents are far more often dark than light. */
  --nl-on-accent:#ffffff;
  --nl-radius:14px;
  position:relative; overflow-x:clip; background:var(--nl-band);
  padding-block:clamp(28px,4vw,56px);
}

/* ---- header ---- */
.hp-nl-head{ margin:0 0 20px; }
.hp-nl-eyebrow{ display:block; font-family:var(--font-body,inherit); font-size:11.5px; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; color:var(--nl-soft); margin-bottom:12px; }
.hp-nl-title{ font-family:var(--font-display,'Playfair Display',serif); line-height:1.18;
  font-size:clamp(1.65rem,3.4vw,2.5rem); letter-spacing:.02em; color:var(--nl-ink); margin:0; text-wrap:balance; }
.hp-nl-sub{ margin:14px 0 0; color:var(--nl-soft); font-size:.95rem; line-height:1.62;
  font-family:var(--font-body,inherit); max-width:46ch; }

/* ---- form ---- */
.hp-nl-form{ display:block; margin-top:22px; margin-inline:0; max-width:520px; }
.hp-nl-field{ display:flex; width:100%; align-items:center; gap:0; background:var(--nl-surface);
  border:1px solid var(--nl-line); border-radius:var(--nl-radius); padding:5px 5px 5px 14px;
  box-shadow:0 14px 30px -24px rgba(2,6,23,.5); }
.hp-nl-ic{ flex:0 0 auto; display:flex; align-items:center; color:var(--nl-soft); font-size:15px; margin-right:10px; }
.hp-nl-field input[type=email]{ flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent;
  font-family:var(--font-body,inherit); font-size:.92rem; color:var(--nl-body); padding:11px 4px; }
.hp-nl-field input[type=email]::placeholder{ color:var(--nl-soft); opacity:.85; }
.hp-nl-field:focus-within{ border-color:var(--nl-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--nl-accent) 22%,transparent); }
.hp-nl-btn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; border:0; cursor:pointer;
  padding:12px 22px; border-radius:calc(var(--nl-radius) - 4px);
  background:var(--nl-accent); color:var(--nl-on-accent,#fff);
  font-family:var(--font-body,inherit); font-size:.88rem; font-weight:600;
  transition:transform .15s, filter .15s; }
.hp-nl-btn:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.hp-nl-btn i{ font-size:11px; opacity:.85; }
.hp-nl-consent{ display:flex; align-items:flex-start; gap:9px; margin-top:12px; cursor:pointer;
  font-family:var(--font-body,inherit); font-size:.8rem; color:var(--nl-soft); line-height:1.5; }
.hp-nl-consent input{ margin-top:2px; accent-color:var(--nl-accent); width:15px; height:15px; flex:0 0 auto; }
.hp-nl-note{ margin:10px 0 0; font-size:.76rem; color:var(--nl-soft); font-family:var(--font-body,inherit); }

/* ---- benefits ---- */
.hp-nl-perks{ display:flex; flex-wrap:wrap; gap:18px 28px; margin-top:24px; }
.hp-nl-perk{ display:flex; align-items:center; gap:10px; font-family:var(--font-body,inherit);
  font-size:.84rem; font-weight:500; color:var(--nl-body); }
.hp-nl-perk-ic{ display:flex; align-items:center; justify-content:center; color:var(--nl-ink); font-size:15px; }
/* Circular tiles: icon above the label, centred. */
.hp-nl-perks.is-circle{ gap:22px; }
.hp-nl-perks.is-circle .hp-nl-perk{ flex-direction:column; gap:10px; text-align:center; max-width:110px; }
.hp-nl-perks.is-circle .hp-nl-perk-ic{ width:60px; height:60px; border-radius:50%;
  background:color-mix(in srgb,var(--nl-ink) 7%,transparent); font-size:20px; }
.hp-nl-perks.is-circle .hp-nl-perk-t{ line-height:1.35; }
/* Stacked list. */
.hp-nl-perks.is-list{ flex-direction:column; gap:18px; }
.hp-nl-perks.is-list .hp-nl-perk{ gap:14px; font-size:.9rem; }
.hp-nl-perks.is-list .hp-nl-perk-ic{ font-size:18px; }
/* Inline row gets dividers between items on wide screens. */
.hp-nl-perks.is-row .hp-nl-perk + .hp-nl-perk{ padding-left:28px; border-left:1px solid var(--nl-line); }

/* ---- stats + tagline ---- */
.hp-nl-stats{ display:flex; flex-wrap:wrap; gap:14px 34px; margin-top:26px; }
.hp-nl-stat{ display:flex; flex-direction:column; gap:2px; font-variant-numeric:tabular-nums; }
.hp-nl-stat + .hp-nl-stat{ padding-left:34px; border-left:1px solid var(--nl-line); }
.hp-nl-stat-v{ font-family:var(--font-display,serif); font-size:clamp(1.05rem,1.9vw,1.4rem); color:var(--nl-ink); line-height:1.15; }
.hp-nl-stat-l{ font-family:var(--font-body,inherit); font-size:.76rem; color:var(--nl-soft); }
.hp-nl-tagline{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:22px;
  font-family:var(--font-body,inherit); font-size:11px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--nl-soft); }
.hp-nl-tagline i{ width:1px; height:12px; background:var(--nl-line); display:inline-block; }

/* ---- split shell ---- */
.hp-nl-split{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(22px,4vw,56px); align-items:center; }
.hp-nl-split.is-flip > .hp-nl-copy{ order:2; }
/* One alignment axis for the whole column. Declared, not inherited, so a stray text-align on an
   ancestor can never scatter the parts onto different centre lines again. */
.hp-nl-copy{ min-width:0; text-align:left; }
.hp-nl-copy > *{ margin-inline:0; }
.hp-nl-aside{ position:relative; min-width:0; }
.hp-nl-photo{ border-radius:var(--nl-radius); overflow:hidden; }
.hp-nl-photo img{ width:100%; height:100%; max-height:420px; object-fit:cover; display:block; }

/* ---- centred shell (hero / soft) ---- */
.hp-nl-center{ position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center;
  padding-inline:clamp(16px,4vw,32px); }
.hp-nl-center.is-narrow{ max-width:660px; }
.hp-nl-center{ text-align:center; }
.hp-nl-center .hp-nl-sub, .hp-nl-center .hp-nl-form{ margin-inline:auto; }
.hp-nl-center .hp-nl-perks{ justify-content:center; }
.hp-nl-center .hp-nl-note{ text-align:center; }

/* ============ 03 — Photo hero (dark) ============ */
.hp-nl-v-hero{ --nl-surface:#fff; --nl-ink:#fff; --nl-body:#1a0f0a;
  --nl-soft:color-mix(in srgb, var(--nl-dark) 22%, #ffffff); --nl-line:rgba(255,255,255,.2);
  position:relative; overflow:hidden; background:var(--nl-dark);
  padding-block:clamp(42px,6vw,84px); border-radius:inherit; }
.hp-nl-bg{ position:absolute; inset:0; background:var(--nl-dark) center/cover no-repeat; }
.hp-nl-bg::after{ content:''; position:absolute; inset:0; background:var(--nl-dark); opacity:var(--nl-scrim,.58); }
.hp-nl-v-hero .hp-nl-perks{ color:#fff; }
.hp-nl-v-hero .hp-nl-perk{ color:#fff; }
.hp-nl-v-hero .hp-nl-perk-ic{ color:#fff; }
.hp-nl-v-hero .hp-nl-tagline{ justify-content:center; color:rgba(255,255,255,.8); }
.hp-nl-v-hero .hp-nl-field{ box-shadow:0 20px 44px -26px rgba(0,0,0,.7); }

/* ============ 04 — Soft band ============ */
.hp-nl-v-soft{ position:relative; overflow:hidden; border-radius:inherit;
  padding-block:clamp(38px,5.5vw,76px); }
.hp-nl-v-soft .hp-nl-bg::after{ opacity:calc(var(--nl-scrim,.58) * .35); }
.hp-nl-v-soft .hp-nl-title{ font-size:clamp(1.7rem,3.6vw,2.6rem); }
.hp-nl-v-soft .hp-nl-form{ max-width:560px; }
.hp-nl-v-soft .hp-nl-tagline{ justify-content:center; }

/* ============ 05 — Proof band ============ */
.hp-nl-v-stats{ position:relative; overflow:hidden; border-radius:inherit; }
.hp-nl-v-stats .hp-nl-split{ position:relative; z-index:1; max-width:1180px; margin:0 auto;
  padding-inline:clamp(16px,4vw,32px); }
.hp-nl-v-stats .hp-nl-bg::after{ opacity:calc(var(--nl-scrim,.58) * .55); }

/* ============ 06 — Offer badge ============ */
.hp-nl-roundel{ position:absolute; top:-10px; left:-10px; z-index:3; width:88px; height:88px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  background:var(--nl-accent); color:var(--nl-on-accent,#fff);
  font-family:var(--font-display,serif); font-size:1.25rem; line-height:1.05; text-align:center;
  box-shadow:0 14px 30px -14px rgba(2,6,23,.5); }
.hp-nl-roundel em{ display:block; font-style:normal; font-family:var(--font-body,inherit);
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-top:2px; }
.hp-nl-v-badge .hp-nl-photo{ border-radius:999px 999px var(--nl-radius) var(--nl-radius); }

/* ---- responsive ------------------------------------------------------------------------- */
@media(max-width:900px){
  .hp-nl-split, .hp-nl-v-stats .hp-nl-split{ grid-template-columns:1fr; }
  /* On one column the photo belongs UNDER the copy, whatever the flip setting says. */
  .hp-nl-split.is-flip > .hp-nl-copy{ order:0; }
  .hp-nl-copy{ text-align:center; }
  /* Centring the text is not enough — the sub (46ch) and the form (520px) are narrower than the
     column, so they must be centred as BOXES too or they stay left-anchored. */
  .hp-nl-copy > *, .hp-nl-head, .hp-nl-form, .hp-nl-sub{ margin-inline:auto; }
  .hp-nl-sub{ max-width:52ch; }
  .hp-nl-perks{ justify-content:center; }
  .hp-nl-stats{ justify-content:center; }
  .hp-nl-tagline{ justify-content:center; }
  .hp-nl-aside.is-photo{ max-width:520px; margin-inline:auto; }
  .hp-nl-script.is-corner{ position:static; display:block; text-align:center; margin-top:14px; }
  .hp-nl-roundel{ top:-8px; left:auto; right:-6px; width:74px; height:74px; font-size:1.05rem; }
}
@media(max-width:620px){
  /* The button drops below the field rather than squeezing the email to nothing. */
  .hp-nl-field{ flex-wrap:wrap; padding:12px; gap:10px; }
  .hp-nl-field input[type=email]{ flex:1 1 100%; order:1; padding:4px 2px; }
  .hp-nl-ic{ order:0; }
  .hp-nl-btn{ order:2; flex:1 1 100%; justify-content:center; padding:13px 20px; }
  .hp-nl-perks.is-row{ flex-direction:column; gap:14px; align-items:center; }
  .hp-nl-perks.is-row .hp-nl-perk + .hp-nl-perk{ padding-left:0; border-left:0; }
  .hp-nl-perks.is-circle{ gap:16px; }
  .hp-nl-perks.is-circle .hp-nl-perk-ic{ width:52px; height:52px; font-size:18px; }
  .hp-nl-stat + .hp-nl-stat{ padding-left:0; border-left:0; }
  .hp-nl-stats{ gap:14px 22px; }
  .hp-nl-tagline{ gap:10px; font-size:10px; letter-spacing:.16em; }
  .hp-nl-photo img{ max-height:280px; }
}
@media(prefers-reduced-motion:reduce){ .hp-nl-btn{ transition:none; } .hp-nl-btn:hover{ transform:none; } }


/* ============================================================================================
   SECTION DIVIDERS — 24 styles
   One element, one set of tokens. Colours resolve through the colour preset; every dimension
   comes from a --dv-* variable the renderer sets per block.
   ============================================================================================ */
.hp-dv{
  --dv-c:  var(--card-border, var(--color-border, #e8ddd2));
  --dv-c2: var(--accent,      var(--color-gold,   #c9a227));
  --dv-c3: var(--secondary,   var(--color-secondary, #8b6914));
  --dv-t:1px; --dv-a:10px; --dv-w:100%; --dv-gap:28px; --dv-sh:90px;
  display:flex; align-items:center; gap:14px;
  width:var(--dv-w); margin-block:var(--dv-gap); line-height:0;
}
.hp-dv.is-center{ margin-inline:auto; }
.hp-dv.is-left{ margin-inline:0 auto; }
.hp-dv.is-right{ margin-inline:auto 0; }
.hp-dv-bar, .hp-dv-rule{ display:block; flex:1 1 auto; min-width:0; height:var(--dv-t);
  background:var(--dv-c); border-radius:99px; }

/* 01 clean line — the base above is already it */
/* 02 hairline */
.hp-dv-hairline{ --dv-t:1px; }
.hp-dv-hairline .hp-dv-bar{ opacity:.7; }
/* 03 soft fade — solid in the middle, transparent at both ends */
.hp-dv-fade .hp-dv-bar{ background:linear-gradient(90deg,transparent,var(--dv-c) 18%,var(--dv-c) 82%,transparent); }
/* 04 centre dot */
.hp-dv-dot .hp-dv-dot{ flex:0 0 auto; width:var(--dv-a); height:var(--dv-a); border-radius:50%;
  background:var(--dv-c2); }
/* 05 triple dots */
.hp-dv-dots{ flex:0 0 auto; display:flex; gap:calc(var(--dv-a) * 0.8); }
.hp-dv-dots i{ width:var(--dv-a); height:var(--dv-a); border-radius:50%; background:var(--dv-c2); display:block; }
/* 06 centre diamond */
.hp-dv-gem{ flex:0 0 auto; width:var(--dv-a); height:var(--dv-a); transform:rotate(45deg);
  border:2px solid var(--dv-c2); border-radius:3px; }
/* 07 double line */
.hp-dv-double .hp-dv-bar{ height:calc(var(--dv-t) * 4); background:none;
  border-top:var(--dv-t) solid var(--dv-c); border-bottom:var(--dv-t) solid var(--dv-c); border-radius:0; }
/* 08 dashed · 09 dotted */
.hp-dv-dashed .hp-dv-bar{ height:0; background:none; border-radius:0;
  border-top:var(--dv-t) dashed var(--dv-c); }
.hp-dv-dotted .hp-dv-bar{ height:0; background:none; border-radius:0;
  border-top:calc(var(--dv-t) * 2) dotted var(--dv-c); }
/* 10 gradient line — colour into transparency */
.hp-dv-gradient .hp-dv-bar{ background:linear-gradient(90deg,transparent,var(--dv-c2),transparent); }
/* 11 brand gradient — three brand stops */
.hp-dv-brand .hp-dv-bar{ background:linear-gradient(90deg,var(--dv-c2),var(--dv-c3),var(--dv-c2)); }
/* 12 glow line */
.hp-dv-glow .hp-dv-bar{ background:linear-gradient(90deg,transparent,var(--dv-c2),transparent);
  box-shadow:0 0 calc(var(--dv-a) * 1.2) var(--dv-c2); }
/* 13 shadow divider — no line, just a cast shadow */
.hp-dv-shadow .hp-dv-bar{ height:1px; background:none;
  box-shadow:0 10px 18px -10px color-mix(in srgb, var(--dv-c) 85%, transparent); }
/* 14 space only — invisible, just the gap */
.hp-dv-space .hp-dv-bar{ background:none; }
/* 15 contrast band */
.hp-dv-band .hp-dv-bar{ height:calc(var(--dv-a) * 1.6); border-radius:4px;
  background:color-mix(in srgb, var(--dv-c2) 16%, transparent); }
/* 16 centre icon · 17 section label */
/* An explicit box, not one inferred from the glyph: .hp-dv sets line-height:0, so an icon that
   fails to load (wrong class, font blocked) would collapse the wrapper to 0 and leave a gap in
   the middle of the line. Reserving the square keeps the divider intact either way. */
.hp-dv-ic{ flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:calc(var(--dv-a) * 2.2); height:calc(var(--dv-a) * 2.2);
  font-size:calc(var(--dv-a) * 1.8); line-height:1; color:var(--dv-c2); }
.hp-dv-txt{ flex:0 0 auto; font-family:var(--font-body,inherit); font-size:.78rem; line-height:1.2;
  letter-spacing:.22em; text-transform:uppercase; color:var(--text,var(--color-text,#1a0f0a)); white-space:nowrap; }

/* ---- 18–24 SVG shapes ------------------------------------------------------------------- */
.hp-dv.is-shape{ display:block; height:var(--dv-sh); gap:0; }
.hp-dv-svg{ display:block; width:100%; height:100%; fill:var(--dv-c); stroke:var(--dv-c); }
.hp-dv-svg path{ fill:var(--dv-c); }
.hp-dv-zigzag .hp-dv-svg path{ fill:none; stroke:var(--dv-c2); }
.hp-dv-scallop .hp-dv-svg path{ fill:var(--dv-c2); }
.hp-dv-organic .hp-dv-svg path,
.hp-dv-layered .hp-dv-svg path{ fill:var(--dv-c2); }
/* Flip turns the silhouette over so it can meet the section above instead of the one below. */
.hp-dv.is-shape.is-flip .hp-dv-svg{ transform:scaleY(-1); }

@media(max-width:620px){
  .hp-dv{ margin-block:calc(var(--dv-gap) * 0.65); }
  .hp-dv.is-shape{ height:calc(var(--dv-sh) * 0.7); }
  .hp-dv-txt{ font-size:.7rem; letter-spacing:.16em; white-space:normal; text-align:center; }
}


/* ============================================================================================
   FAQ / ACCORDION — 24 styles
   One <details> row, one token set, 24 skins. Native <details> keeps it keyboard accessible and
   working without JavaScript; only search and category tabs need script.
   ============================================================================================ */
.hp-fq{
  --fq-acc:  var(--accent,      var(--color-gold,        #c9a227));
  --fq-card: var(--card-bg,     var(--color-card-bg,     #ffffff));
  --fq-ink:  var(--text,        var(--color-text,        #1a0f0a));
  --fq-head: var(--primary,     var(--color-primary,     #2c1810));
  --fq-soft: var(--text-muted,  var(--color-text-muted,  #7a6555));
  --fq-line: var(--card-border, var(--color-border,      #e8ddd2));
  --fq-dark: var(--color-dark,  #1a0f0a);
  --fq-r:16px; --fq-gap:12px; --fq-mw:840px;
  position:relative; overflow-x:clip;
}

/* ---- header ---- */
.hp-fq-head{ max-width:760px; margin:0 auto 22px; }
.hp-fq-head.is-center{ text-align:center; }
.hp-fq-head.is-left{ text-align:left; margin-inline:0; }
.hp-fq-title{ font-family:var(--font-display,'Playfair Display',serif); line-height:1.2;
  font-size:clamp(1.5rem,2.8vw,2.1rem); letter-spacing:.04em; color:var(--fq-head); margin:0; text-wrap:balance; }
.hp-fq-rule{ display:block; width:54px; height:3px; border-radius:2px; margin:12px auto 0; background:var(--fq-acc); }
.hp-fq-head.is-left .hp-fq-rule{ margin-inline:0 auto; }
.hp-fq-sub{ margin:12px 0 0; color:var(--fq-soft); font-size:.94rem; line-height:1.6; font-family:var(--font-body,inherit); }

/* ---- list + row ---- */
.hp-fq-list{ max-width:var(--fq-mw); margin:0 auto; display:grid; gap:var(--fq-gap); }
.hp-fq-list.is-2col{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.hp-fq-i{ background:var(--fq-card); border:1px solid var(--fq-line); border-radius:var(--fq-r);
  overflow:hidden; transition:box-shadow .18s, border-color .18s, background .18s; }
.hp-fq-i > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:13px;
  padding:17px 20px; font-family:var(--font-body,inherit); font-weight:600; font-size:.95rem;
  color:var(--fq-ink); }
.hp-fq-i > summary::-webkit-details-marker{ display:none; }
.hp-fq-i > summary:focus-visible{ outline:2px solid var(--fq-acc); outline-offset:-2px; }
.hp-fq-q{ flex:1 1 auto; min-width:0; }
.hp-fq-mk{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:8px; font-size:12px; color:var(--fq-acc);
  background:color-mix(in srgb, var(--fq-acc) 12%, transparent); transition:transform .22s, background .18s; }
.hp-fq-a{ padding:0 20px 18px; color:var(--fq-soft); font-size:.9rem; line-height:1.7;
  font-family:var(--font-body,inherit); }
.hp-fq-a > :first-child{ margin-top:0; } .hp-fq-a > :last-child{ margin-bottom:0; }
/* marker motion — plus becomes a cross, the rest simply turn */
.is-mk-plus    .hp-fq-i[open] .hp-fq-mk{ transform:rotate(135deg); }
.is-mk-chevron .hp-fq-i[open] .hp-fq-mk,
.is-mk-caret   .hp-fq-i[open] .hp-fq-mk{ transform:rotate(180deg); }
.is-mk-arrow   .hp-fq-i[open] .hp-fq-mk{ transform:rotate(90deg); }
.is-mk-none .hp-fq-mk{ display:none; }
/* leading number / icon */
.hp-fq-num{ flex:0 0 auto; font-family:var(--font-body,inherit); font-size:.78rem; font-weight:700;
  color:var(--fq-acc); font-variant-numeric:tabular-nums; min-width:26px; }
.hp-fq-ic{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:11px; font-size:15px;
  background:color-mix(in srgb, var(--fq-acc) 12%, transparent); color:var(--fq-acc); }

/* ---- search + tabs ---- */
.hp-fq-search{ position:relative; max-width:var(--fq-mw); margin:0 auto 18px; }
.hp-fq-search i{ position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--fq-soft); font-size:13px; }
.hp-fq-sf{ width:100%; padding:13px 44px 13px 16px; border:1px solid var(--fq-line); border-radius:var(--fq-r);
  background:var(--fq-card); color:var(--fq-ink); font-family:var(--font-body,inherit); font-size:.9rem; outline:0; }
.hp-fq-sf:focus{ border-color:var(--fq-acc); box-shadow:0 0 0 3px color-mix(in srgb,var(--fq-acc) 20%,transparent); }
.hp-fq-tabs{ display:flex; flex-wrap:wrap; gap:8px; max-width:var(--fq-mw); margin:0 auto 18px; }
.hp-fq-tab{ border:1px solid var(--fq-line); background:var(--fq-card); color:var(--fq-soft); cursor:pointer;
  padding:8px 16px; border-radius:99px; font-family:var(--font-body,inherit); font-size:.8rem; font-weight:600;
  transition:background .15s, color .15s, border-color .15s; }
.hp-fq-tab:hover{ color:var(--fq-ink); }
.hp-fq-tab.is-on{ background:var(--fq-dark); color:#fff; border-color:transparent; }
.hp-fq-empty{ max-width:var(--fq-mw); margin:14px auto 0; text-align:center; color:var(--fq-soft); font-size:.88rem; }

/* ============ the 24 skins ============ */
/* 01 classic clean — soft round marker on the left */
.hp-fq-v-classic .hp-fq-mk{ border-radius:50%; }
/* 02 minimal line — no card, just a rule under each row */
.hp-fq-v-minimal .hp-fq-i{ background:none; border:0; border-bottom:1px solid var(--fq-line); border-radius:0; }
.hp-fq-v-minimal .hp-fq-mk{ background:none; }
.hp-fq-v-minimal{ --fq-gap:0px; }
/* 03 filled card */
.hp-fq-v-filled .hp-fq-i{ background:color-mix(in srgb, var(--fq-ink) 4%, transparent); border-color:transparent; }
.hp-fq-v-filled .hp-fq-mk{ background:none; }
/* 04 soft shadow */
.hp-fq-v-shadow .hp-fq-i{ border-color:transparent; box-shadow:0 10px 26px -18px rgba(2,6,23,.4); }
.hp-fq-v-shadow .hp-fq-i[open]{ box-shadow:0 18px 38px -20px rgba(2,6,23,.45); }
.hp-fq-v-shadow .hp-fq-mk{ background:none; }
/* 05 outline */
.hp-fq-v-outline .hp-fq-i{ background:none; border-color:color-mix(in srgb, var(--fq-acc) 45%, transparent); }
.hp-fq-v-outline .hp-fq-i[open]{ border-color:var(--fq-acc); }
.hp-fq-v-outline .hp-fq-mk{ background:none; }
/* 06 left border */
.hp-fq-v-leftbar .hp-fq-i{ border-left:4px solid var(--fq-acc); border-radius:0 var(--fq-r) var(--fq-r) 0; }
.hp-fq-v-leftbar .hp-fq-mk{ background:none; }
/* 07 icon style */
.hp-fq-v-icons .hp-fq-mk{ background:none; }
/* 08 numbered */
.hp-fq-v-numbered .hp-fq-num{ display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9px; background:color-mix(in srgb,var(--fq-acc) 12%,transparent); }
.hp-fq-v-numbered .hp-fq-mk{ background:none; }
/* 09 modern split — the open row is tinted so the answer reads as a panel */
.hp-fq-v-split .hp-fq-i[open]{ background:color-mix(in srgb, var(--fq-acc) 7%, var(--fq-card)); border-color:transparent; }
.hp-fq-v-split .hp-fq-i[open] > summary{ color:var(--fq-head); }
/* 10 gradient — each row a soft wash, cycling through the brand hues */
.hp-fq-v-gradient .hp-fq-i{ border-color:transparent; }
.hp-fq-v-gradient .hp-fq-i:nth-child(3n+1){ background:linear-gradient(100deg,color-mix(in srgb,var(--fq-acc) 13%,transparent),transparent); }
.hp-fq-v-gradient .hp-fq-i:nth-child(3n+2){ background:linear-gradient(100deg,color-mix(in srgb,var(--secondary,var(--color-secondary,#8b6914)) 13%,transparent),transparent); }
.hp-fq-v-gradient .hp-fq-i:nth-child(3n+3){ background:linear-gradient(100deg,color-mix(in srgb,var(--fq-head) 10%,transparent),transparent); }
.hp-fq-v-gradient .hp-fq-mk{ background:none; }
/* 11 pill */
.hp-fq-v-pill .hp-fq-i{ border-radius:99px; }
.hp-fq-v-pill .hp-fq-i[open]{ border-radius:calc(var(--fq-r) + 8px); }
.hp-fq-v-pill .hp-fq-i > summary{ padding-inline:24px; }
.hp-fq-v-pill .hp-fq-a{ padding-inline:24px; }
/* 12 dark mode */
.hp-fq-v-dark{ --fq-card:color-mix(in srgb, var(--fq-dark) 88%, #ffffff);
  --fq-ink:#fff; --fq-head:#fff; --fq-soft:color-mix(in srgb, var(--fq-dark) 30%, #ffffff);
  --fq-line:rgba(255,255,255,.14);
  background:var(--fq-dark); border-radius:inherit; padding-block:clamp(28px,4vw,52px); }
/* 13 image + FAQ */
.hp-fq-split{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(20px,3vw,42px); align-items:center; }
.hp-fq-photo img{ width:100%; height:var(--fq-h, 100%); max-height:var(--fq-h, 460px); object-fit:var(--fq-fit,cover); display:block; border-radius:var(--fq-r); }
.hp-fq-side{ min-width:0; }
.hp-fq-v-image .hp-fq-list{ max-width:none; }
/* 14 two column handled by .is-2col */
.hp-fq-v-twocol .hp-fq-list{ max-width:none; }
/* 15 tabs · 16 search — the controls carry these */
/* 17 card with icons — coloured icon tiles, cycling hues */
.hp-fq-v-cardicons .hp-fq-i{ border-color:transparent; box-shadow:0 10px 26px -20px rgba(2,6,23,.35); }
.hp-fq-ic-0{ background:color-mix(in srgb,var(--fq-acc) 14%,transparent); color:var(--fq-acc); }
.hp-fq-ic-1{ background:color-mix(in srgb,var(--secondary,var(--color-secondary,#8b6914)) 14%,transparent);
             color:var(--secondary,var(--color-secondary,#8b6914)); }
.hp-fq-ic-2{ background:color-mix(in srgb,var(--fq-head) 12%,transparent); color:var(--fq-head); }
.hp-fq-ic-3{ background:color-mix(in srgb,var(--success,var(--color-success,#4caf50)) 14%,transparent);
             color:var(--success,var(--color-success,#4caf50)); }
/* 18 styled typography — a serif display heading over bare rows */
.hp-fq-v-typo .hp-fq-title{ font-size:clamp(1.9rem,4vw,2.8rem); letter-spacing:.01em; }
.hp-fq-v-typo .hp-fq-rule{ width:80px; height:1px; background:var(--fq-ink); opacity:.5; }
.hp-fq-v-typo .hp-fq-i{ background:none; border:0; border-bottom:1px solid var(--fq-line); border-radius:0; }
.hp-fq-v-typo .hp-fq-mk{ background:none; }
.hp-fq-v-typo{ --fq-gap:0px; }
/* 19 bordered container — a dashed frame around the whole list */
.hp-fq-v-bordered .hp-fq-list{ border:1px dashed color-mix(in srgb,var(--fq-ink) 26%,transparent);
  border-radius:var(--fq-r); padding:16px; }
.hp-fq-v-bordered .hp-fq-i{ background:none; border:0; border-radius:0; }
.hp-fq-v-bordered .hp-fq-i + .hp-fq-i{ border-top:1px solid var(--fq-line); }
.hp-fq-v-bordered .hp-fq-mk{ background:none; }
.hp-fq-v-bordered{ --fq-gap:0px; }
/* 20 alternating background */
.hp-fq-v-alt{ --fq-gap:0px; }
.hp-fq-v-alt .hp-fq-i{ border:0; border-radius:0; background:none; }
.hp-fq-v-alt .hp-fq-i:nth-child(odd){ background:color-mix(in srgb, var(--fq-ink) 4%, transparent); }
.hp-fq-v-alt .hp-fq-i:first-child{ border-radius:var(--fq-r) var(--fq-r) 0 0; }
.hp-fq-v-alt .hp-fq-i:last-child{ border-radius:0 0 var(--fq-r) var(--fq-r); }
.hp-fq-v-alt .hp-fq-mk{ background:none; }
/* 21 boxed list — one box, rows divided */
.hp-fq-v-boxed{ --fq-gap:0px; }
.hp-fq-v-boxed .hp-fq-list{ border:1px solid var(--fq-line); border-radius:var(--fq-r); overflow:hidden; }
.hp-fq-v-boxed .hp-fq-i{ border:0; border-radius:0; }
.hp-fq-v-boxed .hp-fq-i + .hp-fq-i{ border-top:1px solid var(--fq-line); }
.hp-fq-v-boxed .hp-fq-mk{ background:none; }
/* 22 expandable arrow */
.hp-fq-v-arrow .hp-fq-mk{ background:none; color:var(--fq-soft); }
.hp-fq-v-arrow .hp-fq-i[open] .hp-fq-mk{ color:var(--fq-acc); }
/* 23 elegant centred */
.hp-fq-v-elegant .hp-fq-head{ margin-bottom:26px; }
.hp-fq-v-elegant .hp-fq-title{ font-weight:inherit; }
.hp-fq-v-elegant .hp-fq-rule{ display:none; }
.hp-fq-v-elegant .hp-fq-i{ background:none; border:0; border-bottom:1px solid var(--fq-line); border-radius:0; }
.hp-fq-v-elegant .hp-fq-i > summary{ padding-inline:4px; font-weight:500; }
.hp-fq-v-elegant .hp-fq-a{ padding-inline:4px; }
.hp-fq-v-elegant .hp-fq-mk{ background:none; }
.hp-fq-v-elegant{ --fq-gap:0px; }
/* 24 creative modern — a timeline rail with a node per question */
.hp-fq-v-creative .hp-fq-list{ position:relative; padding-left:34px; }
.hp-fq-v-creative .hp-fq-list::before{ content:''; position:absolute; left:11px; top:6px; bottom:6px;
  width:2px; border-radius:2px; background:color-mix(in srgb, var(--fq-acc) 35%, transparent); }
.hp-fq-v-creative .hp-fq-i{ position:relative; border-color:transparent;
  box-shadow:0 10px 26px -20px rgba(2,6,23,.35); }
.hp-fq-v-creative .hp-fq-i::before{ content:''; position:absolute; left:-28px; top:22px; width:11px; height:11px;
  border-radius:50%; background:var(--fq-card); border:2.5px solid var(--fq-acc); }
.hp-fq-v-creative .hp-fq-mk{ background:none; }

/* ---- responsive ---- */
@media(max-width:900px){
  .hp-fq-split{ grid-template-columns:1fr; }
  .hp-fq-photo img{ max-height:280px; }
}
@media(max-width:620px){
  .hp-fq-list.is-2col{ grid-template-columns:1fr; }
  .hp-fq-i > summary{ padding:15px 16px; gap:10px; font-size:.9rem; }
  .hp-fq-a{ padding:0 16px 16px; }
  .hp-fq-v-pill .hp-fq-i > summary, .hp-fq-v-pill .hp-fq-a{ padding-inline:18px; }
  .hp-fq-ic{ width:32px; height:32px; font-size:13px; }
  .hp-fq-tabs{ gap:6px; }
  .hp-fq-tab{ padding:7px 13px; font-size:.75rem; }
  .hp-fq-v-creative .hp-fq-list{ padding-left:26px; }
  .hp-fq-v-creative .hp-fq-i::before{ left:-22px; }
}
@media(prefers-reduced-motion:reduce){ .hp-fq-mk{ transition:none; } }

/* ================================================================= RICH TEXT — 12 DESIGNS
 * Wrapper: .hp-rtx .hp-rtx-v-<style> .is-<align> [.is-flip]   (renderer: sf_cb_render_rich_text)
 * Every colour resolves through the professional token -> legacy token -> literal chain, so the
 * block follows whichever colour preset is active. Headings use var(--font-display) WITHOUT a
 * font-weight: several preset faces ship a single weight and forcing 600/700 makes the browser
 * synthesise bold, which reads as the wrong typeface.
 * ------------------------------------------------------------------------------------------ */
.hp-rtx{
  --rtx-acc:  var(--accent,      var(--color-gold,        #c9a227));
  --rtx-card: var(--card-bg,     var(--color-card-bg,     #ffffff));
  --rtx-ink:  var(--primary,     var(--color-primary,     #2c1810));
  --rtx-body: var(--text,        var(--color-text,        #1a0f0a));
  --rtx-soft: var(--text-muted,  var(--color-text-muted,  #7a6555));
  --rtx-line: var(--card-border, var(--color-border,      #e8ddd2));
  --rtx-dark: var(--color-dark,  #1a0f0a);
  --rtx-tint: var(--color-bg-2,  #f5f0e8);
  --rtx-band: transparent;
  /* Ink on the accent — the renderer overrides this per block with a contrast-checked value. */
  --rtx-on-acc:#ffffff;
  --rtx-r:16px;
  --rtx-mw:none;
  --rtx-scrim:.55;
  position:relative; overflow-x:clip; background:var(--rtx-band);
  padding-block:clamp(26px,3.6vw,54px);
  color:var(--rtx-body);
}
.hp-rtx > .container{ position:relative; z-index:2; }
.hp-rtx *{ min-width:0; }

/* ---- photo backdrop + scrim ---- */
.hp-rtx-bg{ position:absolute; inset:0; z-index:0; background-position:center; background-size:cover;
  background-repeat:no-repeat; }
.hp-rtx-bg::after{ content:""; position:absolute; inset:0; background:var(--rtx-dark); opacity:var(--rtx-scrim); }
.hp-rtx-bg.is-solid::after{ opacity:1; }

/* ---- head ---- */
.hp-rtx-head{ margin:0 0 16px; }
.hp-rtx-eyebrow{ display:block; font-family:var(--font-body,inherit); font-size:11.5px; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; color:var(--rtx-soft); margin-bottom:12px; }
.hp-rtx-title{ font-family:var(--font-display,'Playfair Display',serif); line-height:1.17;
  font-size:clamp(1.55rem,3.2vw,2.4rem); letter-spacing:.01em; color:var(--rtx-ink); margin:0;
  text-wrap:balance; }
.hp-rtx-rule{ display:block; width:54px; height:3px; border-radius:3px; background:var(--rtx-acc); margin-top:14px; }

/* ---- rich body ---- */
.hp-rtx-body{ font-family:var(--font-body,inherit); color:var(--rtx-soft); line-height:1.72;
  font-size:.97rem; max-width:66ch; }
.hp-rtx-body > *:first-child{ margin-top:0; }
.hp-rtx-body > *:last-child{ margin-bottom:0; }
.hp-rtx-body p{ margin:0 0 14px; }
.hp-rtx-body a{ color:var(--rtx-acc); }
.hp-rtx-body h1,.hp-rtx-body h2,.hp-rtx-body h3,.hp-rtx-body h4{
  font-family:var(--font-display,'Playfair Display',serif); color:var(--rtx-ink); line-height:1.26; margin:22px 0 10px; }
.hp-rtx-body img{ max-width:100%; height:auto; border-radius:12px; }
.hp-rtx-body blockquote{ margin:16px 0; padding-left:18px; border-left:3px solid var(--rtx-acc); font-style:italic; }

/* ---- alignment ---- */
.hp-rtx.is-center .hp-rtx-copy,.hp-rtx.is-center .hp-rtx-center{ text-align:center; }
.hp-rtx.is-right  .hp-rtx-copy,.hp-rtx.is-right  .hp-rtx-center{ text-align:right; }
.hp-rtx.is-center .hp-rtx-rule,.hp-rtx.is-center .hp-rtx-body{ margin-inline:auto; }
.hp-rtx.is-right  .hp-rtx-rule,.hp-rtx.is-right  .hp-rtx-body{ margin-left:auto; }
.hp-rtx.is-center .hp-rtx-li,.hp-rtx.is-right .hp-rtx-li{ text-align:left; }

/* ---- text width ----
   The centred column is only auto-centred when the block is actually centre-aligned; a
   left-aligned banner or overlay keeps its copy against the container's left edge. */
.hp-rtx-copy,.hp-rtx-center{ max-width:var(--rtx-mw); }
.hp-rtx.is-center .hp-rtx-center{ margin-inline:auto; }
.hp-rtx.is-right  .hp-rtx-center{ margin-left:auto; }

/* ---- button ---- */
.hp-rtx-btn{ display:inline-flex; align-items:center; gap:9px; margin-top:22px; padding:13px 28px;
  border-radius:999px; text-decoration:none; font-family:var(--font-body,inherit); font-size:.83rem;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; line-height:1;
  background:var(--rtx-dark); color:#fff; border:1.5px solid transparent;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, gap .16s ease; }
.hp-rtx-btn i{ font-size:.78em; }
.hp-rtx-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 28px -14px rgba(0,0,0,.5); color:#fff; gap:13px; }
.hp-rtx-btn.is-accent{ background:var(--rtx-acc); color:var(--rtx-on-acc); }
.hp-rtx-btn.is-accent:hover{ color:var(--rtx-on-acc); }
.hp-rtx-btn.is-square{ border-radius:6px; }
.hp-rtx-btn.is-outline{ background:transparent; color:var(--rtx-ink); border-color:var(--rtx-line); }
.hp-rtx-btn.is-outline:hover{ color:var(--rtx-acc); border-color:var(--rtx-acc); box-shadow:none; }
.hp-rtx-btn.is-link{ padding:0; margin-top:18px; background:none; border:0; border-radius:0;
  color:var(--rtx-acc); text-transform:none; letter-spacing:.02em; font-size:.92rem; }
.hp-rtx-btn.is-link:hover{ transform:none; box-shadow:none; color:var(--rtx-acc); }

/* ---- handwritten accent ---- */
.hp-rtx-script{ display:block; margin-top:18px; font-family:'Dancing Script',cursive;
  font-size:clamp(1.35rem,2.6vw,2rem); line-height:1.25; color:var(--rtx-acc); }

/* ---- icon features ---- */
.hp-rtx-feats{ display:grid; gap:clamp(18px,2.4vw,34px); margin-top:30px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.hp-rtx-f-ic{ display:inline-flex; align-items:center; justify-content:center; width:66px; height:66px;
  border-radius:50%; background:var(--rtx-card); border:1.5px solid var(--rtx-line);
  color:var(--rtx-acc); font-size:23px; margin-bottom:16px; }
.hp-rtx-f-t{ font-family:var(--font-display,'Playfair Display',serif); font-size:1.06rem;
  color:var(--rtx-ink); margin:0 0 8px; line-height:1.3; }
.hp-rtx-f-x{ margin:0; color:var(--rtx-soft); font-size:.9rem; line-height:1.65; font-family:var(--font-body,inherit); }

/* ---- list ---- */
.hp-rtx-list{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:15px; }
.hp-rtx-li{ display:flex; gap:14px; align-items:flex-start; }
.hp-rtx-li-mk{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-family:var(--font-body,inherit); font-size:.84rem;
  font-weight:700; background:var(--rtx-acc); color:var(--rtx-on-acc); }
.hp-rtx-list.is-check .hp-rtx-li-mk{ width:26px; height:26px; margin-top:2px; font-size:.72rem;
  background:transparent; border:2px solid var(--rtx-acc); color:var(--rtx-acc); }
.hp-rtx-list.is-dash .hp-rtx-li-mk{ width:22px; height:2px; border-radius:2px; margin-top:12px;
  background:var(--rtx-acc); }
.hp-rtx-li-b strong{ display:block; font-family:var(--font-body,inherit); font-weight:700;
  color:var(--rtx-ink); font-size:.96rem; line-height:1.45; }
.hp-rtx-li-b em{ display:block; font-style:normal; margin-top:4px; color:var(--rtx-soft);
  font-size:.88rem; line-height:1.6; }

/* ---- split shell ---- */
.hp-rtx-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.hp-rtx.is-flip .hp-rtx-aside{ order:-1; }
.hp-rtx-photo img{ display:block; width:100%; height:auto; border-radius:var(--rtx-r); object-fit:cover; }
.hp-rtx-panel{ display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:230px; padding:clamp(26px,4vw,52px); border-radius:var(--rtx-r);
  background:var(--rtx-acc); color:var(--rtx-on-acc); }
.hp-rtx-panel p{ margin:0; font-family:var(--font-display,'Playfair Display',serif);
  font-size:clamp(1.1rem,2.2vw,1.6rem); line-height:1.42; }

/* ---- video ---- */
.hp-rtx-video{ position:relative; display:block; max-width:100%; aspect-ratio:16/10;
  border-radius:var(--rtx-r); overflow:hidden; background:var(--rtx-dark); }
.hp-rtx-video img{ width:100%; height:100%; object-fit:cover; display:block; }
.hp-rtx-play{ position:absolute; inset:0; margin:auto; width:74px; height:74px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:22px; padding-left:4px;
  background:rgba(255,255,255,.94); color:var(--rtx-dark);
  box-shadow:0 18px 36px -16px rgba(0,0,0,.65); transition:transform .18s ease; }
.hp-rtx-video:hover .hp-rtx-play{ transform:scale(1.08); }

/* =============================== 01 · Simple Text =============================== */
.hp-rtx-v-simple .hp-rtx-card{ background:var(--rtx-card); border:1px solid var(--rtx-line);
  border-radius:var(--rtx-r); padding:clamp(24px,3.4vw,46px); }
.hp-rtx-v-simple .hp-rtx-head{ padding-left:18px; border-left:3px solid var(--rtx-acc); }
.hp-rtx-v-simple .hp-rtx-rule{ display:none; }
.hp-rtx-v-simple.is-center .hp-rtx-head,.hp-rtx-v-simple.is-right .hp-rtx-head{ padding-left:0; border-left:0; }
.hp-rtx-v-simple.is-center .hp-rtx-rule,.hp-rtx-v-simple.is-right .hp-rtx-rule{ display:block; }

/* =============================== 02 · Text with Image (side) =============================== */
.hp-rtx-v-side .hp-rtx-split{ grid-template-columns:1.02fr .98fr; }
.hp-rtx-v-side .hp-rtx-photo img{ aspect-ratio:4/3; }

/* =============================== 03 · Centered Content =============================== */
.hp-rtx-v-centered{ --rtx-band:var(--rtx-tint); padding-block:clamp(40px,5.4vw,80px); }
.hp-rtx-v-centered .hp-rtx-center{ max-width:min(700px,100%); text-align:center; }
.hp-rtx-v-centered .hp-rtx-title{ font-size:clamp(1.7rem,3.8vw,2.7rem); }
.hp-rtx-v-centered .hp-rtx-rule,.hp-rtx-v-centered .hp-rtx-body{ margin-inline:auto; }

/* =============================== 04 · Text over Background Image =============================== */
.hp-rtx-v-overlay{ padding-block:clamp(58px,8.5vw,134px); }
.hp-rtx-v-overlay .hp-rtx-center{ max-width:min(660px,100%); }
.hp-rtx-v-overlay .hp-rtx-title{ color:#fff; }
.hp-rtx-v-overlay .hp-rtx-eyebrow{ color:rgba(255,255,255,.8); }
.hp-rtx-v-overlay .hp-rtx-body{ color:rgba(255,255,255,.88); }
.hp-rtx-v-overlay .hp-rtx-body h1,.hp-rtx-v-overlay .hp-rtx-body h2,
.hp-rtx-v-overlay .hp-rtx-body h3,.hp-rtx-v-overlay .hp-rtx-body h4{ color:#fff; }
.hp-rtx-v-overlay .hp-rtx-rule{ background:rgba(255,255,255,.85); }
.hp-rtx-v-overlay .hp-rtx-btn.is-outline{ color:#fff; border-color:rgba(255,255,255,.8); }
.hp-rtx-v-overlay .hp-rtx-btn.is-outline:hover{ background:#fff; color:var(--rtx-dark); border-color:#fff; }

/* =============================== 05 · Icon + Text =============================== */
.hp-rtx-v-icons .hp-rtx-feats{ margin-top:28px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.hp-rtx-v-icons .hp-rtx-f-ic{ width:72px; height:72px; font-size:25px; }
.hp-rtx-v-icons .hp-rtx-head{ margin-bottom:6px; }

/* =============================== 06 · Highlighted Content =============================== */
.hp-rtx-v-highlight{ --rtx-band:var(--rtx-tint); }
.hp-rtx-v-highlight .hp-rtx-card{ position:relative; background:var(--rtx-card);
  border-radius:var(--rtx-r); padding:clamp(24px,3.6vw,48px); border-left:5px solid var(--rtx-acc);
  box-shadow:0 24px 48px -34px rgba(0,0,0,.4); }
.hp-rtx-v-highlight .hp-rtx-rule{ display:none; }
.hp-rtx-v-highlight .hp-rtx-list{ margin-top:20px; }

/* =============================== 07 · Split Background =============================== */
.hp-rtx-v-split .hp-rtx-split{ gap:clamp(20px,3vw,40px); align-items:stretch; }
.hp-rtx-v-split .hp-rtx-copy{ display:flex; flex-direction:column; justify-content:center; }
.hp-rtx-v-split .hp-rtx-aside{ display:flex; }
.hp-rtx-v-split .hp-rtx-panel{ flex:1 1 auto; }
.hp-rtx-v-split .hp-rtx-photo{ flex:1 1 auto; }
.hp-rtx-v-split .hp-rtx-photo img{ height:100%; min-height:230px; }

/* =============================== 08 · Rich Content (Text + Icons) =============================== */
.hp-rtx-v-richicons .hp-rtx-center{ max-width:min(680px,100%); text-align:center; }
.hp-rtx-v-richicons .hp-rtx-rule,.hp-rtx-v-richicons .hp-rtx-body{ margin-inline:auto; }
.hp-rtx-v-richicons .hp-rtx-feats{ margin-top:38px; text-align:center; }
.hp-rtx-v-richicons .hp-rtx-f-ic{ width:70px; height:70px; border:0;
  background:var(--rtx-acc); color:var(--rtx-on-acc); }
.hp-rtx-v-richicons .hp-rtx-f-x{ max-width:34ch; margin-inline:auto; }

/* =============================== 09 · Quote / Testimonial =============================== */
.hp-rtx-v-quote{ padding-block:clamp(52px,7.5vw,120px); }
.hp-rtx-v-quote .hp-rtx-center{ max-width:min(820px,100%); text-align:center; }
.hp-rtx-v-quote .hp-rtx-qmark{ display:block; font-family:var(--font-display,'Playfair Display',serif);
  font-size:clamp(58px,9vw,112px); line-height:.72; color:var(--rtx-acc); margin-bottom:10px; }
.hp-rtx-v-quote .hp-rtx-head{ margin-bottom:10px; }
.hp-rtx-v-quote .hp-rtx-eyebrow{ color:rgba(255,255,255,.72); }
.hp-rtx-v-quote .hp-rtx-title{ color:#fff; font-size:clamp(1.15rem,2.7vw,1.8rem); font-style:italic; line-height:1.48; }
.hp-rtx-v-quote .hp-rtx-rule{ display:none; }
.hp-rtx-v-quote .hp-rtx-body{ color:rgba(255,255,255,.92); margin-inline:auto;
  font-family:var(--font-display,'Playfair Display',serif); font-style:italic;
  font-size:clamp(1.12rem,2.5vw,1.7rem); line-height:1.5; max-width:44ch; }
.hp-rtx-qrule{ display:block; width:62px; height:2px; background:rgba(255,255,255,.55); margin:26px auto; }
.hp-rtx-qby{ display:block; font-family:var(--font-body,inherit); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; font-size:.76rem; color:#fff; }
.hp-rtx-qrole{ display:block; margin-top:7px; font-family:var(--font-body,inherit); font-size:.8rem;
  color:rgba(255,255,255,.72); }

/* =============================== 10 · Banner (Text + CTA) =============================== */
.hp-rtx-v-banner{ padding-block:clamp(56px,8vw,128px); }
.hp-rtx-v-banner .hp-rtx-center{ max-width:min(730px,100%); }
.hp-rtx-v-banner .hp-rtx-title{ color:#fff; font-size:clamp(1.9rem,4.6vw,3.1rem); }
.hp-rtx-v-banner .hp-rtx-eyebrow{ color:rgba(255,255,255,.78); }
.hp-rtx-v-banner .hp-rtx-body{ color:rgba(255,255,255,.86); max-width:56ch; }
.hp-rtx-v-banner .hp-rtx-rule{ display:none; }
.hp-rtx-v-banner .hp-rtx-btn.is-outline{ color:#fff; border-color:rgba(255,255,255,.8); }

/* =============================== 11 · Rich Text with List =============================== */
.hp-rtx-v-list .hp-rtx-split{ grid-template-columns:1.08fr .92fr; align-items:start; }
.hp-rtx-v-list .hp-rtx-photo img{ aspect-ratio:3/4; position:sticky; top:96px; }
.hp-rtx-v-list .hp-rtx-rule{ display:none; }

/* =============================== 12 · Video + Text =============================== */
.hp-rtx-v-video .hp-rtx-split{ grid-template-columns:1.05fr .95fr; }
.hp-rtx-v-video .hp-rtx-rule{ width:38px; height:2px; }

/* =============================== responsive =============================== */
@media(max-width:900px){
  .hp-rtx-split,
  .hp-rtx-v-side .hp-rtx-split,
  .hp-rtx-v-split .hp-rtx-split,
  .hp-rtx-v-list .hp-rtx-split,
  .hp-rtx-v-video .hp-rtx-split{ grid-template-columns:1fr; gap:26px; }
  .hp-rtx-v-side .hp-rtx-photo img,
  .hp-rtx-v-list .hp-rtx-photo img{ aspect-ratio:16/10; max-height:380px; position:static; }
  .hp-rtx-v-split .hp-rtx-photo img{ min-height:0; max-height:340px; }
  .hp-rtx-panel{ min-height:170px; }
  .hp-rtx-body{ max-width:none; }
}
@media(max-width:620px){
  .hp-rtx{ padding-block:clamp(22px,6vw,40px); }
  .hp-rtx-v-overlay,.hp-rtx-v-banner,.hp-rtx-v-quote{ padding-block:clamp(42px,12vw,76px); }
  .hp-rtx-feats{ grid-template-columns:1fr; gap:22px; }
  .hp-rtx-f-ic,.hp-rtx-v-icons .hp-rtx-f-ic,.hp-rtx-v-richicons .hp-rtx-f-ic{ width:56px; height:56px; font-size:20px; margin-bottom:12px; }
  .hp-rtx-btn{ padding:12px 22px; font-size:.78rem; }
  .hp-rtx-li-mk{ width:30px; height:30px; font-size:.8rem; }
  .hp-rtx-list.is-check .hp-rtx-li-mk{ width:24px; height:24px; }
  .hp-rtx-play{ width:56px; height:56px; font-size:18px; }
  .hp-rtx-v-simple .hp-rtx-head{ padding-left:14px; }
  .hp-rtx-panel{ min-height:0; }
}
@media(prefers-reduced-motion:reduce){
  .hp-rtx-btn,.hp-rtx-play{ transition:none; }
  .hp-rtx-btn:hover{ transform:none; }
  .hp-rtx-video:hover .hp-rtx-play{ transform:none; }
}

/* ================================================================= ANNOUNCEMENT BAR (hp-anb)
 * Wrapper: .hp-anb .hp-anb-v-<style> .is-tone-<tone> .is-<size> .is-al-<align> [.is-full] [.is-sticky]
 * Renderer: sf_cb_render_announcement(). The default "theme" tone resolves entirely through the
 * professional token -> legacy token -> literal chain, so the bar follows the active colour
 * preset; the named tones are fixed tints for bars that must read as a specific signal
 * (urgent = red, discount = amber, and so on). Background / Text colour override either.
 * ----------------------------------------------------------------------------------------- */
.hp-anb{
  /* structural defaults — every tone below re-declares the colour four */
  --anb-bg:   var(--color-bg-2,   #f5f0e8);
  --anb-ink:  var(--primary,      var(--color-primary,    #2c1810));
  --anb-soft: var(--text-muted,   var(--color-text-muted, #7a6555));
  --anb-acc:  var(--accent,       var(--color-gold,       #c9a227));
  --anb-line: var(--card-border,  var(--color-border,     #e8ddd2));
  --anb-chip: var(--card-bg,      var(--color-card-bg,    #ffffff));
  --anb-dark: var(--color-dark,   #1a0f0a);
  /* the renderer overrides this per block with a contrast-checked value */
  --anb-on-acc:#ffffff;
  --anb-pill-bg:var(--anb-acc);
  --anb-pill-ink:var(--anb-on-acc);
  --anb-r:0px; --anb-pad:11px; --anb-fs:13.5px; --anb-scrim:.45;
  position:relative; overflow-x:clip;
  background:var(--anb-bg); color:var(--anb-ink); border-radius:var(--anb-r);
  font-family:var(--font-body,inherit);
}
.hp-anb.is-sticky{ position:sticky; top:0; z-index:60; }
.hp-anb.is-compact{ --anb-pad:7px;  --anb-fs:12.5px; }
.hp-anb.is-normal { --anb-pad:11px; --anb-fs:13.5px; }
.hp-anb.is-roomy  { --anb-pad:16px; --anb-fs:14.5px; }

.hp-anb-bg{ position:absolute; inset:0; z-index:0; background-position:center; background-size:cover; background-repeat:no-repeat; }
.hp-anb-bg::after{ content:""; position:absolute; inset:0; background:var(--anb-dark); opacity:var(--anb-scrim); }

.hp-anb-in{ position:relative; z-index:2; display:flex; align-items:center; gap:14px;
  max-width:var(--container-max,1300px); margin-inline:auto;
  padding-block:var(--anb-pad); padding-inline:20px; min-width:0; }
.hp-anb.is-full .hp-anb-in{ max-width:none; }
.hp-anb-main{ display:flex; align-items:center; gap:12px; flex:1 1 auto; min-width:0;
  flex-wrap:wrap; justify-content:center; }
.hp-anb.is-al-left .hp-anb-main{ justify-content:flex-start; }
.hp-anb-end{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }

/* ---- shared parts ---- */
.hp-anb-ic{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; background:var(--anb-chip); color:var(--anb-acc);
  font-size:15px; }
.hp-anb-msg{ display:inline-flex; align-items:baseline; gap:7px; flex-wrap:wrap; min-width:0;
  font-size:var(--anb-fs); line-height:1.35; }
.hp-anb-msg strong{ font-weight:700; color:var(--anb-ink); }
.hp-anb-msg > span{ color:var(--anb-soft); }
.hp-anb-meta{ font-size:var(--anb-fs); color:var(--anb-soft); }
.hp-anb-sep{ flex:0 0 auto; width:1px; height:18px; background:var(--anb-line); }
.hp-anb-stack{ display:flex; flex-direction:column; min-width:0; }
.hp-anb-stack strong{ font-size:var(--anb-fs); font-weight:700; line-height:1.25; color:var(--anb-ink); }
.hp-anb-stack em{ font-style:normal; font-size:calc(var(--anb-fs) - 1.5px); color:var(--anb-soft); line-height:1.3; }

.hp-anb-cta{ display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-size:var(--anb-fs); font-weight:700; color:var(--anb-acc); white-space:nowrap;
  transition:gap .15s ease, opacity .15s ease; }
.hp-anb-cta i{ font-size:.78em; }
.hp-anb-cta:hover{ gap:11px; color:var(--anb-acc); }
.hp-anb-cta.is-pill{ background:var(--anb-pill-bg); color:var(--anb-pill-ink);
  padding:8px 18px; border-radius:999px; }
.hp-anb-cta.is-pill:hover{ color:var(--anb-pill-ink); }
.hp-anb-cta.is-outline{ border:1.5px solid currentColor; padding:7px 17px; border-radius:999px; }

.hp-anb-x,.hp-anb-pause{ flex:0 0 auto; width:30px; height:30px; border:0; border-radius:50%;
  background:transparent; color:var(--anb-soft); cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; font-size:14px; padding:0;
  transition:background .15s ease, color .15s ease; }
.hp-anb-x:hover,.hp-anb-pause:hover{ background:var(--anb-chip); color:var(--anb-ink); }

/* ---- 03 marquee ---- */
.hp-anb-mq{ flex:1 1 240px; min-width:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent); }
.hp-anb-mq-track{ display:flex; width:max-content; animation:hpanbmq 30s linear infinite; }
.hp-anb.is-paused .hp-anb-mq-track{ animation-play-state:paused; }
.hp-anb-mq-set{ display:flex; align-items:center; }
.hp-anb-tick{ position:relative; display:inline-flex; align-items:center; padding:0 22px;
  white-space:nowrap; font-size:var(--anb-fs); font-weight:600; color:var(--anb-ink); }
.hp-anb-tick::after{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:1px; height:14px; background:var(--anb-line); }
@keyframes hpanbmq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---- 04 countdown (reuses the shared .cbcd-timer ticker script) ---- */
.hp-anb-timer{ display:flex; align-items:center; }
.hp-anb .cbcd-timer{ display:flex; align-items:center; gap:15px; }
.hp-anb .cbcd-cell{ position:relative; display:inline-flex; flex-direction:column; align-items:center;
  min-width:46px; padding:4px 8px; border-radius:9px; background:var(--anb-chip); }
.hp-anb .cbcd-cell + .cbcd-cell::before{ content:":"; position:absolute; left:-10px; top:50%;
  transform:translateY(-52%); font-weight:700; color:var(--anb-soft); }
.hp-anb .cbcd-num{ font-size:15px; font-weight:800; line-height:1.15; color:var(--anb-acc);
  font-variant-numeric:tabular-nums; }
.hp-anb .cbcd-lbl{ font-size:9px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--anb-soft); margin-top:1px; }
.hp-anb .cbcd-exp,.hp-anb-exp{ font-size:var(--anb-fs); font-weight:700; color:var(--anb-ink); }

/* ---- 05 multi item ---- */
.hp-anb-cols{ display:flex; align-items:center; flex-wrap:wrap; justify-content:center;
  flex:1 1 auto; min-width:0; }
.hp-anb-col{ position:relative; display:flex; align-items:center; gap:11px; padding:0 26px; min-width:0; }
.hp-anb-col + .hp-anb-col::before{ content:""; position:absolute; left:0; top:50%;
  transform:translateY(-50%); width:1px; height:26px; background:var(--anb-line); }
.hp-anb-col-ic{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; font-size:16px; color:var(--anb-acc); }
.hp-anb-col-b{ display:flex; flex-direction:column; min-width:0; }
.hp-anb-col-b strong{ font-size:var(--anb-fs); font-weight:700; line-height:1.25; color:var(--anb-ink); }
.hp-anb-col-b em{ font-style:normal; font-size:calc(var(--anb-fs) - 1.5px); color:var(--anb-soft); line-height:1.3; }

/* ---- 06 discount code chip ---- */
.hp-anb-code{ display:inline-flex; align-items:center; gap:8px; font-size:var(--anb-fs); }
.hp-anb-code em{ font-style:normal; color:var(--anb-soft); }
.hp-anb-code-v{ border:1px dashed var(--anb-line); background:var(--anb-chip); color:var(--anb-ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:700;
  font-size:calc(var(--anb-fs) - .5px); letter-spacing:.06em; padding:4px 10px; border-radius:6px;
  cursor:pointer; line-height:1.3; }
.hp-anb-code-v:hover{ border-style:solid; }

/* ---- 09 edge photos ---- */
.hp-anb-edge{ position:absolute; top:0; bottom:0; z-index:1; width:clamp(90px,15%,200px); pointer-events:none; }
.hp-anb-edge.is-l{ left:0; } .hp-anb-edge.is-r{ right:0; }
.hp-anb-edge img{ width:100%; height:100%; object-fit:cover; display:block; }
.hp-anb-edge::after{ content:""; position:absolute; inset:0; }
.hp-anb-edge.is-l::after{ background:linear-gradient(90deg,transparent 25%,var(--anb-bg)); }
.hp-anb-edge.is-r::after{ background:linear-gradient(270deg,transparent 25%,var(--anb-bg)); }

/* ---- 11 subscribe form ---- */
.hp-anb-form{ display:flex; align-items:stretch; border-radius:8px; overflow:hidden; background:#fff; }
.hp-anb-form input{ border:0; outline:0; background:#fff; color:#1b1b1b; min-width:0;
  width:clamp(130px,22vw,230px); padding:9px 14px; font-size:13px; font-family:var(--font-body,inherit); }
.hp-anb-form button{ border:0; cursor:pointer; padding:9px 18px; font-size:12.5px; font-weight:700;
  font-family:var(--font-body,inherit); background:var(--anb-pill-bg); color:var(--anb-pill-ink); }

/* ---- 12 store buttons ---- */
.hp-anb-stores{ display:flex; align-items:center; gap:8px; }
.hp-anb-store{ display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  background:var(--anb-dark); color:#fff; border-radius:8px; padding:6px 14px; }
.hp-anb-store:hover{ color:#fff; opacity:.9; }
.hp-anb-store i{ font-size:17px; }
.hp-anb-store span{ display:flex; flex-direction:column; line-height:1.15; }
.hp-anb-store em{ font-style:normal; font-size:8.5px; text-transform:uppercase; letter-spacing:.08em; opacity:.82; }
.hp-anb-store strong{ font-size:12px; font-weight:700; }

/* ---- 13 stars (a rating amber is semantic, not the brand accent) ---- */
.hp-anb-stars{ display:inline-flex; gap:2px; color:#f2a93b; font-size:13px; }

/* ---- 15 / 16 segment strip ---- */
.hp-anb-segs{ display:inline-flex; align-items:center; flex-wrap:wrap; min-width:0; }
.hp-anb-seg{ position:relative; padding:0 16px; font-size:var(--anb-fs); color:var(--anb-soft); white-space:nowrap; }
.hp-anb-seg.is-lead{ font-weight:700; color:var(--anb-ink); }
.hp-anb-seg + .hp-anb-seg::before{ content:""; position:absolute; left:0; top:50%;
  transform:translateY(-50%); width:1px; height:14px; background:var(--anb-line); }

/* =============================== colour themes =============================== */
.hp-anb.is-tone-theme{ --anb-bg:var(--color-bg-2,#f5f0e8); }
.hp-anb.is-tone-accent{
  --anb-bg:var(--accent,var(--color-gold,#c9a227)); --anb-ink:var(--anb-on-acc);
  --anb-soft:var(--anb-on-acc); --anb-acc:var(--anb-on-acc);
  --anb-line:rgba(255,255,255,.34); --anb-chip:rgba(255,255,255,.17);
  --anb-pill-bg:var(--anb-on-acc); --anb-pill-ink:var(--accent,var(--color-gold,#c9a227)); }
.hp-anb.is-tone-mint{ --anb-bg:#e7f6ef; --anb-ink:#10402f; --anb-soft:#42705d; --anb-acc:#0f766e;
  --anb-line:#c3e4d5; --anb-chip:#ffffff; --anb-pill-bg:#0f766e; --anb-pill-ink:#ffffff; }
.hp-anb.is-tone-sky{ --anb-bg:#e8f1fd; --anb-ink:#14345c; --anb-soft:#4a6d99; --anb-acc:#1d4ed8;
  --anb-line:#c7dcf7; --anb-chip:#ffffff; --anb-pill-bg:#1d4ed8; --anb-pill-ink:#ffffff; }
.hp-anb.is-tone-cream{ --anb-bg:#fdf4e3; --anb-ink:#5a4213; --anb-soft:#8a6c2c; --anb-acc:#b45309;
  --anb-line:#f0dcb4; --anb-chip:#ffffff; --anb-pill-bg:#b45309; --anb-pill-ink:#ffffff; }
.hp-anb.is-tone-blush{ --anb-bg:#fdeaf0; --anb-ink:#6b2036; --anb-soft:#98546a; --anb-acc:#be185d;
  --anb-line:#f7cdda; --anb-chip:#ffffff; --anb-pill-bg:#be185d; --anb-pill-ink:#ffffff; }
.hp-anb.is-tone-lilac{ --anb-bg:#eee9fc; --anb-ink:#372a63; --anb-soft:#6a5c9a; --anb-acc:#6d28d9;
  --anb-line:#ddd2f6; --anb-chip:#ffffff; --anb-pill-bg:#6d28d9; --anb-pill-ink:#ffffff; }
.hp-anb.is-tone-forest{ --anb-bg:#123f2c; --anb-ink:#ffffff; --anb-soft:rgba(255,255,255,.78);
  --anb-acc:#ffffff; --anb-line:rgba(255,255,255,.24); --anb-chip:rgba(255,255,255,.13);
  --anb-pill-bg:#ffffff; --anb-pill-ink:#123f2c; }
.hp-anb.is-tone-crimson{ --anb-bg:#e6172c; --anb-ink:#ffffff; --anb-soft:rgba(255,255,255,.88);
  --anb-acc:#ffffff; --anb-line:rgba(255,255,255,.34); --anb-chip:rgba(255,255,255,.17);
  --anb-pill-bg:#ffffff; --anb-pill-ink:#a8101f; }
.hp-anb.is-tone-navy{ --anb-bg:#12233f; --anb-ink:#ffffff; --anb-soft:rgba(255,255,255,.74);
  --anb-acc:#7fb0ff; --anb-line:rgba(255,255,255,.22); --anb-chip:rgba(255,255,255,.12);
  --anb-pill-bg:#2f6df0; --anb-pill-ink:#ffffff; }
.hp-anb.is-tone-royal{ --anb-bg:#3b1d78; --anb-ink:#ffffff; --anb-soft:rgba(255,255,255,.8);
  --anb-acc:#ffffff; --anb-line:rgba(255,255,255,.26); --anb-chip:rgba(255,255,255,.14);
  --anb-pill-bg:#ffffff; --anb-pill-ink:#3b1d78;
  background-image:linear-gradient(100deg,#2c1566 0%,#5a2ba6 55%,#3b1d78 100%); }
.hp-anb.is-tone-ink{ --anb-bg:#0c0a09; --anb-ink:#ffffff; --anb-soft:rgba(255,255,255,.72);
  --anb-acc:#d8b25a; --anb-line:rgba(255,255,255,.18); --anb-chip:rgba(255,255,255,.1);
  --anb-pill-bg:#d8b25a; --anb-pill-ink:#1a1508; }

/* =============================== per-design =============================== */
/* 01 Simple Text — a bare megaphone, no chip */
.hp-anb-v-simple .hp-anb-ic{ background:transparent; width:auto; height:auto; font-size:16px; }
/* 02 Icon + Text — rounded-square icon tile */
.hp-anb-v-icon .hp-anb-ic{ border-radius:10px; }
/* 03 Scrolling */
.hp-anb-v-marquee .hp-anb-ic{ background:transparent; width:auto; height:auto; font-size:15px; }
.hp-anb-v-marquee .hp-anb-in{ gap:10px; }
/* 04 Countdown */
.hp-anb-v-countdown .hp-anb-ic{ background:transparent; width:auto; height:auto; font-size:17px; }
.hp-anb-v-countdown .hp-anb-msg strong{ font-size:calc(var(--anb-fs) + .5px); }
/* 05 Multi item */
.hp-anb-v-multi .hp-anb-in{ padding-block:calc(var(--anb-pad) - 2px); }
/* 06 Discount */
.hp-anb-v-discount .hp-anb-ic{ background:transparent; width:auto; height:auto; font-size:17px; }
/* 07 Urgent — everything reads as one loud line */
.hp-anb-v-urgent .hp-anb-ic{ background:transparent; width:auto; height:auto; font-size:17px; }
.hp-anb-v-urgent .hp-anb-msg,.hp-anb-v-urgent .hp-anb-msg > span{ font-weight:700; color:var(--anb-ink); }
/* 08 Category — the label takes the accent */
.hp-anb-v-category .hp-anb-ic{ border-radius:10px; }
.hp-anb-v-category .hp-anb-msg strong{ color:var(--anb-acc); }
/* 09 Image */
.hp-anb-v-image .hp-anb-in{ min-height:56px; }
/* 10 Location */
.hp-anb-v-location .hp-anb-ic{ background:transparent; width:auto; height:auto; font-size:16px; }
/* 11 Newsletter */
.hp-anb-v-newsletter .hp-anb-ic{ border-radius:9px; }
.hp-anb-v-newsletter .hp-anb-msg strong{ font-size:calc(var(--anb-fs) + .5px); }
/* 12 App download */
.hp-anb-v-app .hp-anb-ic{ background:transparent; width:auto; height:auto; font-size:17px; }
/* 13 Social proof */
.hp-anb-v-social .hp-anb-ic{ border-radius:10px; }
/* 14 Policy — outlined icon, accent label */
.hp-anb-v-policy .hp-anb-ic{ background:transparent; border:1.5px solid var(--anb-line); }
.hp-anb-v-policy .hp-anb-msg strong{ color:var(--anb-acc); }
/* 15 Seasonal — a light sparkle wash over the gradient */
.hp-anb-v-seasonal::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:radial-gradient(circle at 8% 30%,rgba(255,255,255,.30) 0 1.5px,transparent 2px),
                   radial-gradient(circle at 22% 74%,rgba(255,255,255,.22) 0 1.5px,transparent 2px),
                   radial-gradient(circle at 61% 24%,rgba(255,255,255,.26) 0 1.5px,transparent 2px),
                   radial-gradient(circle at 84% 66%,rgba(255,255,255,.20) 0 1.5px,transparent 2px); }
.hp-anb-v-seasonal .hp-anb-ic{ background:transparent; width:auto; height:auto; font-size:17px; }
/* 16 Branded — tracked, uppercase segments */
.hp-anb-v-branded .hp-anb-ic{ background:transparent; width:auto; height:auto; font-size:16px; }
.hp-anb-v-branded .hp-anb-seg{ text-transform:uppercase; letter-spacing:.13em;
  font-size:calc(var(--anb-fs) - 1.5px); }
.hp-anb-v-branded .hp-anb-seg.is-lead{ color:var(--anb-acc); }

/* =============================== responsive =============================== */
@media(max-width:860px){
  .hp-anb-in{ flex-wrap:wrap; gap:10px; padding-inline:16px; padding-right:46px; }
  .hp-anb-main,.hp-anb.is-al-left .hp-anb-main{ flex:1 1 100%; justify-content:center; text-align:center; }
  .hp-anb-end{ flex:1 1 100%; justify-content:center; }
  .hp-anb-x{ position:absolute; top:6px; right:8px; }
  .hp-anb-col{ padding:0 14px; }
  .hp-anb-edge{ width:clamp(70px,12%,120px); }
}
@media(max-width:620px){
  .hp-anb{ --anb-fs:12.5px; }
  /* The vertical rule becomes a dot — a full-height rule between wrapped lines reads as a stray mark. */
  .hp-anb-sep{ width:3px; height:3px; border-radius:50%; }
  /* Segments stack; their left-hand dividers would otherwise open each wrapped line with a stray rule. */
  .hp-anb-segs{ flex-direction:column; align-items:center; gap:2px; }
  .hp-anb-seg{ padding:0; white-space:normal; }
  .hp-anb-seg + .hp-anb-seg::before{ display:none; }
  .hp-anb-ic{ width:30px; height:30px; font-size:14px; }
  .hp-anb-msg{ justify-content:center; }
  .hp-anb-cols{ flex-direction:column; align-items:stretch; width:100%; }
  .hp-anb-col{ padding:7px 0; justify-content:center; }
  .hp-anb-col + .hp-anb-col::before{ left:0; right:0; top:0; width:auto; height:1px; transform:none; }
  .hp-anb-v-image .hp-anb-edge{ display:none; }
  .hp-anb-stores{ flex-wrap:wrap; justify-content:center; }
  .hp-anb-store{ padding:5px 12px; }
  .hp-anb-form input{ width:clamp(110px,44vw,200px); }
  .hp-anb .cbcd-timer{ gap:13px; }
  .hp-anb .cbcd-cell{ min-width:40px; padding:3px 6px; }
  .hp-anb .cbcd-num{ font-size:14px; }
  .hp-anb-seg{ padding:0 10px; }
  .hp-anb-tick{ padding:0 16px; }
}
@media(max-width:400px){
  .hp-anb-in{ padding-inline:12px; padding-right:42px; }
  .hp-anb-cta.is-pill,.hp-anb-cta.is-outline{ padding-inline:14px; }
}
@media(prefers-reduced-motion:reduce){
  .hp-anb-mq-track{ animation:none; }
  .hp-anb-cta,.hp-anb-x,.hp-anb-pause{ transition:none; }
  .hp-anb-cta:hover{ gap:7px; }
}

/* ================================================================= GALLERY — 26 LAYOUTS
 * Wrapper: .hp-gal .hp-gal-v-<style> .is-<align> .is-fx-<hover> .is-cap-<pos> [.is-full]
 * Renderer: sf_cb_render_gallery(). Every colour resolves through the professional token ->
 * legacy token -> literal chain so the block follows the active colour preset, and headings use
 * var(--font-display) WITHOUT a font-weight (several preset faces ship one weight; forcing 600/700
 * makes the browser synthesise bold and the typeface reads wrong).
 * ------------------------------------------------------------------------------------------- */
.hp-gal{
  --gl-acc:  var(--accent,      var(--color-gold,        #c9a227));
  --gl-ink:  var(--primary,     var(--color-primary,     #2c1810));
  --gl-body: var(--text,        var(--color-text,        #1a0f0a));
  --gl-soft: var(--text-muted,  var(--color-text-muted,  #7a6555));
  --gl-line: var(--card-border, var(--color-border,      #e8ddd2));
  --gl-card: var(--card-bg,     var(--color-card-bg,     #ffffff));
  --gl-dark: var(--color-dark,  #1a0f0a);
  --gl-tint: var(--color-bg-2,  #f5f0e8);
  --gl-band: transparent;
  /* the renderer overrides this per block with a contrast-checked value */
  --gl-on-acc:#ffffff;
  --gl-r:12px; --gl-gap:14px; --gl-cols-d:4; --gl-cols:var(--gl-cols-d,4);
  --gl-rows:2; --gl-ar:1/1; --gl-fit:cover; --gl-min:215px;
  position:relative; overflow-x:clip; background:var(--gl-band);
  padding-block:clamp(24px,3.4vw,50px);
  font-family:var(--font-body,inherit);
}
.hp-gal *{ min-width:0; }

/* ---- head ---- */
.hp-gal-head{ margin:0 0 22px; }
.hp-gal-head.is-center{ text-align:center; }
.hp-gal.is-full .hp-gal-head{ max-width:var(--container-max,1300px); margin-inline:auto; padding-inline:20px; }
.hp-gal-eyebrow{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gl-soft); margin-bottom:11px; }
.hp-gal-title{ font-family:var(--font-display,'Playfair Display',serif); font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1.2; letter-spacing:.01em; color:var(--gl-ink); margin:0; text-wrap:balance; }
.hp-gal-rule{ display:block; width:54px; height:3px; border-radius:3px; background:var(--gl-acc); margin-top:12px; }
.hp-gal-head.is-center .hp-gal-rule{ margin-inline:auto; }
.hp-gal-sub{ margin:12px 0 0; color:var(--gl-soft); font-size:.93rem; line-height:1.6; max-width:62ch; }
.hp-gal-head.is-center .hp-gal-sub{ margin-inline:auto; }

/* ---- the tile ---- */
.hp-gal-i{ margin:0; position:relative; }
.hp-gal-ph{ position:relative; display:block; overflow:hidden; border-radius:var(--gl-r);
  background:var(--gl-tint); text-decoration:none; }
.hp-gal-ph img{ display:block; width:100%; aspect-ratio:var(--gl-ar); height:var(--gl-h, auto); object-fit:var(--gl-fit);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.hp-gal.is-fx-zoom .hp-gal-ph:hover img{ transform:scale(1.06); }
.hp-gal.is-fx-fade .hp-gal-ph:hover img{ opacity:.82; }
.hp-gal.is-fx-lift .hp-gal-i{ transition:transform .25s ease, box-shadow .25s ease; }
.hp-gal.is-fx-lift .hp-gal-i:hover{ transform:translateY(-5px); box-shadow:0 22px 40px -24px rgba(0,0,0,.45); }

.hp-gal-cap{ padding:10px 2px 0; display:flex; flex-direction:column; gap:3px; }
.hp-gal-cap strong{ font-size:.92rem; font-weight:700; color:var(--gl-ink); line-height:1.3; }
.hp-gal-cap em{ font-style:normal; font-size:.82rem; color:var(--gl-soft); line-height:1.45; }

.hp-gal-ov{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; padding:16px; text-align:center; color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.62)); transition:opacity .3s ease; }
.hp-gal.is-cap-hover .hp-gal-ov{ opacity:0; }
.hp-gal.is-cap-hover .hp-gal-ph:hover .hp-gal-ov,
.hp-gal.is-cap-hover .hp-gal-ph:focus-within .hp-gal-ov{ opacity:1; }
.hp-gal-ov.is-text{ align-items:flex-start; justify-content:flex-end; text-align:left; }
.hp-gal-ov-t{ font-family:var(--font-display,'Playfair Display',serif); font-size:1.02rem; line-height:1.25; }
.hp-gal-ov-s{ font-size:.8rem; opacity:.86; line-height:1.4; }
.hp-gal-ov.is-icons{ flex-direction:row; flex-wrap:wrap; }
.hp-gal-ov.is-icons .hp-gal-ov-t{ flex:1 1 100%; font-size:.9rem; }
.hp-gal-ov-ic{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.94);
  color:var(--gl-dark); display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
.hp-gal-ov-go{ position:absolute; right:14px; bottom:14px; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--gl-dark); display:flex; align-items:center;
  justify-content:center; font-size:11px; }

.hp-gal-play{ position:absolute; inset:0; margin:auto; z-index:2; width:62px; height:62px; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--gl-dark); display:flex; align-items:center;
  justify-content:center; font-size:19px; padding-left:3px;
  box-shadow:0 16px 32px -16px rgba(0,0,0,.6); transition:transform .2s ease; }
.hp-gal-ph:hover .hp-gal-play{ transform:scale(1.08); }
.hp-gal-zoom{ position:absolute; right:10px; bottom:10px; z-index:2; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--gl-dark); display:flex; align-items:center;
  justify-content:center; font-size:13px; box-shadow:0 8px 18px -10px rgba(0,0,0,.5); }

.hp-gal-btns{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.hp-gal-btn{ flex:1 1 auto; text-align:center; text-decoration:none; font-size:.78rem; font-weight:700;
  padding:8px 12px; border-radius:8px; border:1px solid var(--gl-line); background:var(--gl-card);
  color:var(--gl-ink); transition:background .16s ease, color .16s ease, border-color .16s ease; }
.hp-gal-btn:hover{ border-color:var(--gl-acc); color:var(--gl-acc); }
.hp-gal-btn.is-2{ background:var(--gl-acc); color:var(--gl-on-acc); border-color:var(--gl-acc); }
.hp-gal-btn.is-2:hover{ color:var(--gl-on-acc); opacity:.92; }

/* ---- grids ---- */
.hp-gal-grid{ display:grid; gap:var(--gl-gap);
  grid-template-columns:repeat(var(--gl-cols),minmax(0,1fr)); }
.hp-gal-masonry{ columns:var(--gl-min) var(--gl-cols); column-gap:var(--gl-gap); }
.hp-gal-masonry .hp-gal-i{ break-inside:avoid; display:inline-block; width:100%; margin-bottom:var(--gl-gap); }
.hp-gal-masonry .hp-gal-ph img{ aspect-ratio:auto; height:auto; }

/* ---- carousels ---- */
.hp-gal-car{ position:relative; }
.hp-gal-track{ display:flex; gap:var(--gl-gap); overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth; }
.hp-gal-track::-webkit-scrollbar{ display:none; }
.hp-gal-cell{ flex:0 0 100%; scroll-snap-align:start; }
.hp-gal-car.is-one .hp-gal-track{ gap:0; border-radius:var(--gl-r); overflow-y:hidden; }
.hp-gal-car.is-one .hp-gal-ph{ border-radius:0; }
.hp-gal-track.is-grid{ display:grid; grid-auto-flow:column;
  grid-auto-columns:min(var(--gl-min),72%); grid-template-rows:repeat(var(--gl-rows),auto);
  gap:var(--gl-gap); }
.hp-gal-track.is-grid .hp-gal-cell{ flex:none; }

.hp-gal-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:44px; height:44px;
  border-radius:50%; border:0; cursor:pointer; padding:0; background:rgba(255,255,255,.95);
  color:var(--gl-dark); box-shadow:0 10px 24px -12px rgba(0,0,0,.55); display:inline-flex;
  align-items:center; justify-content:center; font-size:15px; opacity:0; transition:opacity .2s ease; }
.hp-gal-car:hover .hp-gal-nav,.hp-gal-stager:hover .hp-gal-nav,
.hp-gal-nav:focus-visible{ opacity:1; }
.hp-gal-nav.is-prev{ left:12px; } .hp-gal-nav.is-next{ right:12px; }

.hp-gal-dots{ display:flex; gap:7px; justify-content:center; margin-top:14px; }
.hp-gal-car.is-one .hp-gal-dots{ position:absolute; left:0; right:0; bottom:16px; margin:0; z-index:4; }
.hp-gal-dot{ width:8px; height:8px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.55); transition:width .2s ease, background .2s ease; }
.hp-gal-dot.is-on{ width:22px; background:#fff; }

/* ---- slide copy (slider / full width / carousel with text / featured / stacked) ---- */
.hp-gal-slidecopy{ position:absolute; inset:auto 0 0 0; z-index:3; padding:clamp(18px,3vw,44px);
  color:#fff; text-align:center; background:linear-gradient(180deg,transparent,rgba(0,0,0,.62));
  pointer-events:none; }
.hp-gal-slidecopy > *{ pointer-events:auto; }
.hp-gal-slide-t{ font-family:var(--font-display,'Playfair Display',serif); margin:0;
  font-size:clamp(1.25rem,3.2vw,2.5rem); line-height:1.16; color:#fff; text-wrap:balance; }
.hp-gal-slide-s{ margin:9px 0 0; font-size:.92rem; color:rgba(255,255,255,.88); line-height:1.5; }
.hp-gal-slide-b{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; text-decoration:none;
  padding:10px 22px; border-radius:999px; background:#fff; color:var(--gl-dark);
  font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  transition:gap .16s ease, transform .16s ease; }
.hp-gal-slide-b i{ font-size:.78em; }
.hp-gal-slide-b:hover{ gap:12px; transform:translateY(-2px); color:var(--gl-dark); }

/* ---- stage + thumbnails (04 / 25 / 26) ---- */
.hp-gal-stager{ position:relative; }
.hp-gal-stage{ position:relative; border-radius:var(--gl-r); overflow:hidden; background:var(--gl-tint); }
.hp-gal-stage img{ display:block; width:100%; aspect-ratio:var(--gl-ar); object-fit:var(--gl-fit);
  transition:transform .35s ease; }
.hp-gal-stage.is-zoom{ cursor:zoom-in; }
.hp-gal-stage.is-zoom:hover img{ transform:scale(1.9); }
.hp-gal-thumbs{ display:flex; gap:10px; margin-top:12px; overflow-x:auto; scrollbar-width:none; }
.hp-gal-thumbs::-webkit-scrollbar{ display:none; }
.hp-gal-th{ flex:0 0 auto; width:84px; padding:0; border:2px solid transparent; border-radius:10px;
  overflow:hidden; background:none; cursor:pointer; transition:border-color .16s ease, opacity .16s ease; opacity:.72; }
.hp-gal-th.is-on{ border-color:var(--gl-acc); opacity:1; }
.hp-gal-th:hover{ opacity:1; }
.hp-gal-th img{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; }

/* ---- before / after (09) ---- */
.hp-gal-cmp{ position:relative; border-radius:var(--gl-r); overflow:hidden; --p:50%; }
.hp-gal-cmp > img{ display:block; width:100%; aspect-ratio:var(--gl-ar); object-fit:cover; }
.hp-gal-cmp-b{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--p)) 0 0); }
.hp-gal-cmp-b img{ width:100%; height:100%; object-fit:cover; display:block; }
.hp-gal-cmp::after{ content:""; position:absolute; top:0; bottom:0; left:var(--p); width:2px;
  margin-left:-1px; background:#fff; z-index:2; pointer-events:none; }
.hp-gal-cmp-h{ position:absolute; top:50%; left:var(--p); transform:translate(-50%,-50%); z-index:3;
  width:42px; height:42px; border-radius:50%; background:#fff; color:var(--gl-dark);
  display:flex; align-items:center; justify-content:center; font-size:13px;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.55); pointer-events:none; }
.hp-gal-cmp-l{ position:absolute; top:14px; z-index:3; padding:5px 14px; border-radius:6px;
  font-size:.74rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  background:rgba(0,0,0,.55); color:#fff; }
.hp-gal-cmp-l.is-b{ left:14px; } .hp-gal-cmp-l.is-a{ right:14px; }
.hp-gal-cmp-r{ position:absolute; inset:0; z-index:4; width:100%; height:100%; margin:0; opacity:0;
  cursor:ew-resize; -webkit-appearance:none; appearance:none; background:transparent; }
.hp-gal-cmp-r::-webkit-slider-thumb{ -webkit-appearance:none; width:46px; height:200px; }
.hp-gal-cmp-r::-moz-range-thumb{ width:46px; height:200px; border:0; background:transparent; }

/* ---- filter tabs (20) ---- */
.hp-gal-tabs{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:20px; }
.hp-gal.is-left .hp-gal-tabs{ justify-content:flex-start; }
.hp-gal-tab{ border:1px solid var(--gl-line); background:var(--gl-card); color:var(--gl-soft);
  border-radius:999px; padding:8px 18px; font-size:.8rem; font-weight:600; cursor:pointer;
  font-family:var(--font-body,inherit); transition:background .16s ease, color .16s ease, border-color .16s ease; }
.hp-gal-tab:hover{ color:var(--gl-ink); border-color:var(--gl-acc); }
.hp-gal-tab.is-on{ background:var(--gl-dark); color:#fff; border-color:var(--gl-dark); }

/* =============================== per-layout =============================== */
/* 05 Image with Captions */
.hp-gal-caps{ display:grid; gap:var(--gl-gap); grid-template-columns:1.35fr .65fr; }
.hp-gal-caps > .hp-gal-i.is-lead{ grid-row:1 / span 2; }
.hp-gal-caps > .hp-gal-i.is-lead .hp-gal-ph{ height:100%; }
.hp-gal-caps > .hp-gal-i.is-lead .hp-gal-ph img{ aspect-ratio:4/5; height:100%; object-fit:cover; }
/* the side tiles stretch to fill their row, otherwise the hero's taller ratio leaves a
   dead band between them */
.hp-gal-caps > .hp-gal-i:not(.is-lead){ display:flex; flex-direction:column; }
.hp-gal-caps > .hp-gal-i:not(.is-lead) .hp-gal-ph{ flex:1 1 auto; }
.hp-gal-caps > .hp-gal-i:not(.is-lead) .hp-gal-ph img{ aspect-ratio:auto; height:100%; min-height:110px; }

/* 07 Category Gallery */
.hp-gal-v-category .hp-gal-cap{ text-align:center; align-items:center; padding-top:12px; }

/* 08 Collage */
.hp-gal-collage{ display:grid; gap:var(--gl-gap); grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:minmax(118px,1fr); }
.hp-gal-collage > .hp-gal-i:nth-child(1),
.hp-gal-collage > .hp-gal-i:nth-child(2){ grid-row:span 2; }
.hp-gal-collage .hp-gal-ph,.hp-gal-collage .hp-gal-ph img{ height:100%; aspect-ratio:auto; }
.hp-gal-txtile{ background:var(--gl-tint); border-radius:var(--gl-r); display:flex; align-items:center;
  padding:clamp(16px,2.4vw,30px); }
.hp-gal-txtile-in strong{ display:block; font-family:var(--font-display,'Playfair Display',serif);
  font-size:clamp(1.05rem,2.1vw,1.65rem); line-height:1.22; color:var(--gl-ink); }
.hp-gal-txtile-in em{ display:block; font-style:normal; margin-top:10px; font-size:.85rem; color:var(--gl-soft); }

/* 12 Rounded / 19 Circle */
.hp-gal-v-circle .hp-gal-ph{ border-radius:50%; }
.hp-gal-v-circle .hp-gal-cap{ text-align:center; align-items:center; }

/* 13 Polaroid */
.hp-gal-polas{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(14px,2.4vw,32px);
  padding-block:16px; }
.hp-gal-polas .hp-gal-i{ flex:0 0 auto; width:clamp(148px,20vw,220px); background:#fff;
  padding:11px 11px 0; border-radius:4px; box-shadow:0 16px 32px -18px rgba(0,0,0,.5);
  transform:rotate(-3deg); transition:transform .25s ease; }
.hp-gal-polas .hp-gal-i:nth-child(even){ transform:rotate(3deg); }
.hp-gal-polas .hp-gal-i:hover{ transform:rotate(0deg) translateY(-6px); z-index:3; }
.hp-gal-polas .hp-gal-ph{ border-radius:2px; }
.hp-gal-polas .hp-gal-cap{ padding:12px 4px 16px; text-align:center; align-items:center; }
.hp-gal-polas .hp-gal-cap strong{ font-family:'Dancing Script',cursive; font-size:1.25rem; color:#3a3a3a; }

/* 14 Stacked */
.hp-gal-stack{ position:relative; display:flex; align-items:center; justify-content:center;
  min-height:clamp(230px,28vw,380px); }
.hp-gal-stack .hp-gal-i{ position:absolute; width:clamp(132px,17vw,235px); border-radius:var(--gl-r);
  overflow:hidden; box-shadow:0 22px 42px -24px rgba(0,0,0,.55); transition:transform .3s ease; }
.hp-gal-stack .hp-gal-i:nth-child(1){ transform:translateX(-96%) rotate(-8deg); }
.hp-gal-stack .hp-gal-i:nth-child(2){ transform:translateX(-34%) rotate(-3deg); }
.hp-gal-stack .hp-gal-i:nth-child(3){ transform:translateX(34%) rotate(4deg); }
.hp-gal-stack .hp-gal-i:nth-child(4){ transform:translateX(96%) rotate(9deg); }
.hp-gal-stack .hp-gal-i:nth-child(5){ transform:translateX(150%) rotate(13deg); }
.hp-gal-stack .hp-gal-i:hover{ z-index:6; }
.hp-gal-stack .hp-gal-slidecopy{ position:relative; inset:auto; z-index:7; background:rgba(255,255,255,.95);
  color:var(--gl-ink); border-radius:var(--gl-r); padding:20px 26px; text-align:center;
  box-shadow:0 22px 44px -22px rgba(0,0,0,.45); }
.hp-gal-stack .hp-gal-slide-t{ color:var(--gl-ink); font-size:clamp(1.1rem,2.4vw,1.7rem); }
.hp-gal-stack .hp-gal-slide-s{ color:var(--gl-soft); }
.hp-gal-stack .hp-gal-slide-b{ background:var(--gl-dark); color:#fff; }
.hp-gal-stack .hp-gal-slide-b:hover{ color:#fff; }

/* 15 Full Width — the copy sits in the middle of the slide */
.hp-gal-v-fullwidth .hp-gal-slidecopy{ inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.46)); }
.hp-gal-v-fullwidth .hp-gal-car.is-one .hp-gal-track{ border-radius:0; }

/* 21 Carousel with Text — bottom-left copy */
.hp-gal-v-carouseltext .hp-gal-slidecopy{ text-align:left; }

/* 16 Video + Image */
.hp-gal-video{ display:grid; gap:var(--gl-gap); grid-template-columns:1fr 1fr; align-items:start; }
.hp-gal-video > .hp-gal-i.is-lead .hp-gal-ph img{ aspect-ratio:3/4; }
.hp-gal-video .hp-gal-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }

/* 18 Bordered */
.hp-gal-v-bordered .hp-gal-i{ border:1px solid var(--gl-line); border-radius:var(--gl-r);
  padding:10px; background:var(--gl-card); }
.hp-gal-v-bordered .hp-gal-ph{ border-radius:calc(var(--gl-r) - 5px); }
.hp-gal-v-bordered .hp-gal-cap{ padding:10px 4px 2px; }

/* 23 Text on Hover — the copy slides up as it fades in */
.hp-gal-v-texthover .hp-gal-ov.is-text{ transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease; }
.hp-gal-v-texthover .hp-gal-ph:hover .hp-gal-ov.is-text{ transform:none; }

/* 25 Large Featured + Thumbnails */
.hp-gal-feat{ display:grid; gap:var(--gl-gap); grid-template-columns:1.12fr .88fr; align-items:start; }
.hp-gal-feat-main .hp-gal-stage img{ aspect-ratio:4/5; }
.hp-gal-feat-main .hp-gal-slidecopy{ text-align:left; }
.hp-gal-feat-side{ display:grid; gap:var(--gl-gap); grid-template-columns:1fr 1fr; align-content:start; }

/* 04 / 26 — a single stage should not become a full-width wall on a wide screen */
.hp-gal-v-thumbs .hp-gal-stager,.hp-gal-v-zoom .hp-gal-stager{ max-width:1000px; margin-inline:auto; }

/* 26 Product Gallery (Zoom) — thumbnails run down the left */
.hp-gal-v-zoom .hp-gal-stager{ display:grid; grid-template-columns:92px minmax(0,1fr);
  gap:14px; align-items:start; }
.hp-gal-v-zoom .hp-gal-stage{ order:2; }
.hp-gal-v-zoom .hp-gal-thumbs{ order:1; flex-direction:column; margin-top:0;
  max-height:clamp(320px,42vw,560px); overflow-y:auto; overflow-x:hidden; }
.hp-gal-v-zoom .hp-gal-th{ width:100%; }

/* =============================== responsive =============================== */
/* The column ladder. Each step falls back to the block's own count when that is already
   smaller, so a 2-column gallery never becomes a 3-column one on a narrower screen. */
@media(max-width:1200px){ .hp-gal{ --gl-cols:var(--gl-cols-4,4); } }
@media(max-width:1000px){ .hp-gal{ --gl-cols:var(--gl-cols-3,3); } }
@media(max-width:760px){  .hp-gal{ --gl-cols:var(--gl-cols-2,2); } }
@media(max-width:460px){
  .hp-gal{ --gl-cols:1; }
  /* photo-only walls stay two-up — one giant square per screen reads as a mistake */
  .hp-gal-v-insta,.hp-gal-v-circle,.hp-gal-v-category,
  .hp-gal-v-rounded,.hp-gal-v-lightbox,.hp-gal-v-bordered{ --gl-cols:var(--gl-cols-2,2); }
}
@media(max-width:900px){
  .hp-gal-caps,.hp-gal-video,.hp-gal-feat{ grid-template-columns:1fr; }
  .hp-gal-caps > .hp-gal-i.is-lead{ grid-row:auto; }
  .hp-gal-caps > .hp-gal-i.is-lead .hp-gal-ph img{ aspect-ratio:16/10; height:auto; }
  .hp-gal-caps > .hp-gal-i:not(.is-lead) .hp-gal-ph img{ aspect-ratio:16/9; height:auto; }
  .hp-gal-video > .hp-gal-i.is-lead .hp-gal-ph img{ aspect-ratio:16/10; }
  .hp-gal-feat-main .hp-gal-stage img{ aspect-ratio:4/3; }
  .hp-gal-collage{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hp-gal-stack .hp-gal-i:nth-child(1){ transform:translateX(-60%) rotate(-7deg); }
  .hp-gal-stack .hp-gal-i:nth-child(2){ transform:translateX(-22%) rotate(-3deg); }
  .hp-gal-stack .hp-gal-i:nth-child(3){ transform:translateX(22%) rotate(4deg); }
  .hp-gal-stack .hp-gal-i:nth-child(4){ transform:translateX(60%) rotate(8deg); }
  .hp-gal-stack .hp-gal-i:nth-child(5){ display:none; }
}
@media(max-width:620px){
  .hp-gal-head{ margin-bottom:18px; }
  .hp-gal-nav{ width:38px; height:38px; font-size:13px; opacity:1; }
  .hp-gal-nav.is-prev{ left:8px; } .hp-gal-nav.is-next{ right:8px; }
  .hp-gal-th{ width:64px; }
  .hp-gal-v-zoom .hp-gal-stager{ grid-template-columns:1fr; }
  .hp-gal-v-zoom .hp-gal-stage{ order:1; }
  .hp-gal-v-zoom .hp-gal-thumbs{ order:2; flex-direction:row; margin-top:12px; max-height:none; overflow-x:auto; }
  .hp-gal-v-zoom .hp-gal-th{ width:64px; }
  .hp-gal-collage{ grid-template-columns:1fr; grid-auto-rows:minmax(150px,auto); }
  .hp-gal-collage > .hp-gal-i:nth-child(1),
  .hp-gal-collage > .hp-gal-i:nth-child(2){ grid-row:auto; }
  .hp-gal-video .hp-gal-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hp-gal-polas .hp-gal-i{ width:clamp(132px,42vw,190px); }
  .hp-gal-stack{ min-height:250px; }
  .hp-gal-stack .hp-gal-i{ width:clamp(112px,32vw,160px); }
  .hp-gal-stack .hp-gal-i:nth-child(1){ transform:translateX(-52%) rotate(-7deg); }
  .hp-gal-stack .hp-gal-i:nth-child(4){ display:none; }
  .hp-gal-ov-ic{ width:34px; height:34px; font-size:12px; }
  .hp-gal-play{ width:50px; height:50px; font-size:16px; }
  .hp-gal-tab{ padding:7px 14px; font-size:.75rem; }
  .hp-gal-cmp-l{ top:10px; padding:4px 10px; font-size:.68rem; }
  .hp-gal-cmp-l.is-b{ left:10px; } .hp-gal-cmp-l.is-a{ right:10px; }
}
@media(max-width:400px){
  .hp-gal-th{ width:56px; }
  .hp-gal-slide-b{ padding:9px 16px; font-size:.74rem; }
}
@media(prefers-reduced-motion:reduce){
  .hp-gal-ph img,.hp-gal-stage img,.hp-gal-i,.hp-gal-ov,.hp-gal-play,.hp-gal-slide-b{ transition:none; }
  .hp-gal.is-fx-zoom .hp-gal-ph:hover img,.hp-gal-stage.is-zoom:hover img{ transform:none; }
  .hp-gal.is-fx-lift .hp-gal-i:hover{ transform:none; }
  .hp-gal-track{ scroll-behavior:auto; }
}

/* A gallery row whose photo has not been uploaded yet — keeps the layout readable. */
.hp-gal-empty{ display:flex; align-items:center; justify-content:center; width:100%;
  aspect-ratio:var(--gl-ar); background:var(--gl-tint); color:var(--gl-soft); font-size:22px;
  border:1px dashed var(--gl-line); border-radius:inherit; }
.hp-gal-empty.is-stage{ aspect-ratio:var(--gl-ar); min-height:180px; }
.hp-gal-masonry .hp-gal-empty{ aspect-ratio:4/3; }
.hp-gal-th .hp-gal-empty{ aspect-ratio:1/1; font-size:13px; border:0; }

/* ================================================================= VIDEO LIGHTBOX (cbvm)
 * One shared in-page player used by the Rich Text "Video + Text" design and the Gallery's
 * video tiles (sf_cb_video_modal_script). The frame keeps a 16:9 box and is capped by the
 * viewport height so the close button is always reachable, including in landscape.
 * -------------------------------------------------------------------------------------- */
.cbvm{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center;
  padding:clamp(12px,4vw,40px); }
.cbvm.is-on{ display:flex; animation:cbvmin .18s ease both; }
@keyframes cbvmin{ from{ opacity:0; } to{ opacity:1; } }
.cbvm-bd{ position:absolute; inset:0; background:rgba(10,12,14,.9); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.cbvm-box{ position:relative; z-index:2; width:min(1100px,100%); max-width:calc((100vh - 120px) * 16 / 9); }
.cbvm-frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  background:#000; box-shadow:0 30px 70px -20px rgba(0,0,0,.8); }
.cbvm-frame iframe,.cbvm-frame video{ position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block; background:#000; }
.cbvm-x{ position:absolute; top:-46px; right:0; width:38px; height:38px; border:0; border-radius:50%;
  cursor:pointer; padding:0; background:rgba(255,255,255,.92); color:#12161a;
  display:inline-flex; align-items:center; justify-content:center; font-size:15px;
  transition:background .15s ease, transform .15s ease; }
.cbvm-x:hover{ background:#fff; transform:scale(1.06); }
html.cbvm-lock{ overflow:hidden; }
@media(max-width:620px){
  .cbvm-box{ max-width:calc((100vh - 96px) * 16 / 9); }
  .cbvm-x{ top:-40px; width:34px; height:34px; font-size:13px; }
  .cbvm-frame{ border-radius:9px; }
}
@media(max-width:400px){ .cbvm{ padding:10px; } }
@media(prefers-reduced-motion:reduce){
  .cbvm.is-on{ animation:none; }
  .cbvm-x{ transition:none; }
  .cbvm-x:hover{ transform:none; }
}

/* ================================================================= CAROUSEL — 24 DESIGNS
 * Wrapper: .hp-car .hp-car-v-<style> .is-<align> .is-fx-<hover> [.is-full] [.is-gray]
 * The scrolling mechanics (track, arrows, dots, thumbnails, before/after, autoplay) are the
 * SHARED gallery ones — sf_cb_carousel_script() drives both blocks — so this file only aliases
 * the --gl-* tokens those classes read, then styles the cards.
 * ------------------------------------------------------------------------------------------ */
.hp-car{
  --cr-acc:  var(--accent,      var(--color-gold,        #c9a227));
  --cr-ink:  var(--primary,     var(--color-primary,     #2c1810));
  --cr-body: var(--text,        var(--color-text,        #1a0f0a));
  --cr-soft: var(--text-muted,  var(--color-text-muted,  #7a6555));
  --cr-line: var(--card-border, var(--color-border,      #e8ddd2));
  --cr-card: var(--card-bg,     var(--color-card-bg,     #ffffff));
  --cr-dark: var(--color-dark,  #1a0f0a);
  --cr-tint: var(--color-bg-2,  #f5f0e8);
  --cr-band: transparent;
  --cr-on-acc:#ffffff;
  --cr-r:14px; --cr-gap:16px; --cr-ar:3/4; --cr-rows:1;
  --cr-cols-d:4; --cr-cols:var(--cr-cols-d,4);
  /* the reused gallery primitives read these */
  --gl-r:var(--cr-r); --gl-gap:var(--cr-gap); --gl-acc:var(--cr-acc); --gl-on-acc:var(--cr-on-acc);
  --gl-dark:var(--cr-dark); --gl-tint:var(--cr-tint); --gl-line:var(--cr-line); --gl-card:var(--cr-card);
  --gl-soft:var(--cr-soft); --gl-ink:var(--cr-ink); --gl-ar:var(--cr-ar); --gl-fit:cover; --gl-min:215px;
  position:relative; overflow-x:clip; background:var(--cr-band);
  padding-block:clamp(24px,3.4vw,52px); font-family:var(--font-body,inherit);
}
.hp-car *{ min-width:0; }

/* ---- head ---- */
.hp-car-head{ display:flex; align-items:flex-end; gap:16px; margin:0 0 22px; }
.hp-car-head.is-center{ flex-direction:column; align-items:center; text-align:center; }
.hp-car-head-t{ flex:1 1 auto; min-width:0; }
.hp-car.is-full .hp-car-head{ max-width:var(--container-max,1300px); margin-inline:auto; padding-inline:20px; }
.hp-car-eyebrow{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.26em;
  text-transform:uppercase; color:var(--cr-soft); margin-bottom:11px; }
.hp-car-title{ font-family:var(--font-display,'Playfair Display',serif); font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1.2; color:var(--cr-ink); margin:0; text-wrap:balance; }
.hp-car-rule{ display:block; width:54px; height:3px; border-radius:3px; background:var(--cr-acc); margin-top:12px; }
.hp-car-head.is-center .hp-car-rule{ margin-inline:auto; }
.hp-car-sub{ margin:12px 0 0; color:var(--cr-soft); font-size:.93rem; line-height:1.6; max-width:62ch; }
.hp-car-head.is-center .hp-car-sub{ margin-inline:auto; }
.hp-car-viewall{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-size:.85rem; font-weight:700; color:var(--cr-acc); white-space:nowrap; transition:gap .15s ease; }
.hp-car-viewall:hover{ gap:11px; color:var(--cr-acc); }
.hp-car-viewall i{ font-size:.78em; }

/* ---- track sizing (exact per-view count, relaxed by the ladder at the bottom) ---- */
.hp-car .hp-gal-track.is-grid{
  grid-auto-columns:calc((100% - (var(--cr-cols) - 1) * var(--cr-gap)) / var(--cr-cols));
  grid-template-rows:repeat(var(--cr-rows),auto); gap:var(--cr-gap); }
.hp-car .hp-gal-car.is-one .hp-gal-track{ border-radius:var(--cr-r); }
.hp-car .hp-gal-cell{ display:flex; }
.hp-car .hp-gal-cell > *{ flex:1 1 auto; }

/* ---- the card ---- */
.hp-car-c{ position:relative; display:flex; flex-direction:column; min-width:0; width:100%;
  border-radius:var(--cr-r); }
.hp-car-ph{ position:relative; display:block; overflow:hidden; border-radius:var(--cr-r);
  background:var(--cr-tint); text-decoration:none; }
.hp-car-ph img{ display:block; width:100%; aspect-ratio:var(--cr-ar); height:var(--cr-h, auto); object-fit:var(--cr-fit,cover);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.hp-car.is-fx-zoom .hp-car-ph:hover img{ transform:scale(1.06); }
.hp-car.is-fx-fade .hp-car-ph:hover img{ opacity:.84; }
.hp-car.is-fx-lift .hp-car-c{ transition:transform .25s ease, box-shadow .25s ease; }
.hp-car.is-fx-lift .hp-car-c:hover{ transform:translateY(-5px); box-shadow:0 22px 40px -24px rgba(0,0,0,.45); }
.hp-car-empty{ display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:var(--cr-ar);
  background:var(--cr-tint); color:var(--cr-soft); font-size:22px; border:1px dashed var(--cr-line); }

.hp-car-b{ display:flex; flex-direction:column; gap:5px; padding:12px 4px 0; min-width:0; }
.hp-car-t{ font-size:.92rem; font-weight:600; color:var(--cr-ink); margin:0; line-height:1.35; }
.hp-car-s{ font-size:.8rem; color:var(--cr-soft); line-height:1.35; }
.hp-car-x{ margin:0; font-size:.86rem; color:var(--cr-soft); line-height:1.6; }
.hp-car-p{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.hp-car-p b{ font-size:.95rem; font-weight:700; color:var(--cr-acc); }
.hp-car-p del{ font-size:.82rem; color:var(--cr-soft); }
.hp-car-stars{ display:inline-flex; gap:2px; color:#f2a93b; font-size:12px; }
.hp-car-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; margin-top:8px;
  align-self:flex-start; text-decoration:none; padding:9px 18px; border-radius:999px;
  background:var(--cr-dark); color:#fff; font-size:.78rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; transition:gap .15s ease, transform .15s ease; }
.hp-car-btn i{ font-size:.78em; }
.hp-car-btn:hover{ gap:11px; color:#fff; transform:translateY(-1px); }
.hp-car-badge{ position:absolute; top:10px; left:10px; z-index:2; background:var(--cr-acc);
  color:var(--cr-on-acc); padding:4px 10px; border-radius:6px; font-size:.68rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; }
.hp-car-play{ position:absolute; inset:0; margin:auto; z-index:2; width:54px; height:54px; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--cr-dark); display:flex; align-items:center;
  justify-content:center; font-size:17px; padding-left:3px; box-shadow:0 14px 28px -14px rgba(0,0,0,.6);
  transition:transform .2s ease; }
.hp-car-ph:hover .hp-car-play{ transform:scale(1.08); }
.hp-car-quick{ position:absolute; top:10px; right:10px; z-index:3; display:flex; flex-direction:column; gap:6px;
  opacity:0; transform:translateX(6px); transition:opacity .2s ease, transform .2s ease; }
.hp-car-ph:hover .hp-car-quick{ opacity:1; transform:none; }
.hp-car-qa{ width:30px; height:30px; border-radius:50%; background:#fff; color:var(--cr-dark);
  display:flex; align-items:center; justify-content:center; font-size:12px;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.45); }

/* ---- copy laid over the photo ----
   A light photograph would leave white text unreadable, so an overlay card always carries a
   base scrim plus a stronger foot gradient — the copy is legible whatever is uploaded. */
.hp-car-c.is-ov .hp-car-ph::after{ content:""; position:absolute; inset:0; z-index:1;
  background:rgba(12,15,18,.22); pointer-events:none; }
.hp-car-c.is-ov .hp-car-b{ position:absolute; inset:auto 0 0 0; z-index:2; padding:clamp(16px,3vw,36px);
  color:#fff;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 42%,rgba(0,0,0,.82) 100%); }
.hp-car-c.is-ov .hp-car-t{ font-family:var(--font-display,'Playfair Display',serif);
  font-size:clamp(1.15rem,2.8vw,2rem); color:#fff; line-height:1.2; }
.hp-car-c.is-ov .hp-car-s,.hp-car-c.is-ov .hp-car-x{ color:rgba(255,255,255,.88); }
.hp-car-c.is-ov .hp-car-p b{ color:#fff; }
.hp-car-c.is-ov .hp-car-btn{ background:#fff; color:var(--cr-dark); }
.hp-car-c.is-ov .hp-car-btn:hover{ color:var(--cr-dark); }

/* =============================== per design =============================== */
/* 02 Category / 12 Team — round portraits, centred caption */
.hp-car-v-category .hp-car-ph,.hp-car-v-team .hp-car-ph{ border-radius:50%; }
.hp-car-v-category .hp-car-b,.hp-car-v-team .hp-car-b{ align-items:center; text-align:center; }
.hp-car-v-team .hp-car-t{ font-weight:700; }

/* 03 Banner / 07 Image+Text / 23 Autoplay — one big slide, three different tempers */
.hp-car-v-banner .hp-car-ph img,.hp-car-v-imagetext .hp-car-ph img,
.hp-car-v-autoplay .hp-car-ph img{ aspect-ratio:16/7; }
/* 03 — a hero: the copy sits vertically centred and reads largest */
.hp-car-v-banner .hp-car-c.is-ov .hp-car-b{ inset:0; justify-content:center;
  background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.25) 60%,transparent); }
.hp-car-v-banner .hp-car-c.is-ov .hp-car-t{ font-size:clamp(1.6rem,4vw,3rem); max-width:18ch; }
/* 07 — a collection tease: bottom-left, quieter */
.hp-car-v-imagetext .hp-car-c.is-ov .hp-car-t{ font-size:clamp(1.25rem,2.6vw,1.9rem); }
/* 23 — the loudest: a heavier scrim under an auto-advancing sale line */
.hp-car-v-autoplay .hp-car-c.is-ov .hp-car-b{ background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.82)); }
.hp-car-v-autoplay .hp-car-c.is-ov .hp-car-t{ font-size:clamp(1.5rem,3.6vw,2.6rem); }

/* 04 Multi-Item — compact bordered tiles */
.hp-car-v-multi .hp-car-c{ border:1px solid var(--cr-line); background:var(--cr-card); padding:8px; }
.hp-car-v-multi .hp-car-b{ padding:9px 2px 2px; gap:3px; }
.hp-car-v-multi .hp-car-t{ font-size:.84rem; }

/* 05 Testimonial — the quote leads, the face follows */
.hp-car-v-testimonial .hp-car-c{ background:var(--cr-card); border:1px solid var(--cr-line);
  border-radius:var(--cr-r); padding:clamp(22px,3.4vw,40px); align-items:center; text-align:center; }
.hp-car-v-testimonial .hp-car-ph{ order:2; width:52px; flex:0 0 auto; border-radius:50%; margin-top:16px; }
.hp-car-v-testimonial .hp-car-ph img{ aspect-ratio:1/1; }
.hp-car-v-testimonial .hp-car-b{ order:1; align-items:center; padding:0; }
.hp-car-v-testimonial .hp-car-x{ font-family:var(--font-display,'Playfair Display',serif);
  font-style:italic; font-size:clamp(1rem,2.2vw,1.35rem); color:var(--cr-ink); line-height:1.55; max-width:52ch; }

/* 06 Brand Logos */
.hp-car-v-logos .hp-car-ph{ background:transparent; display:flex; align-items:center; justify-content:center;
  padding:10px 14px; }
.hp-car-v-logos .hp-car-ph img{ aspect-ratio:auto; height:clamp(26px,3vw,40px); width:auto; max-width:100%;
  object-fit:contain; }
.hp-car.is-gray .hp-car-v-logos .hp-car-ph img,.hp-car-v-logos.is-gray .hp-car-ph img{ filter:grayscale(1); opacity:.6; }
.hp-car-v-logos .hp-car-ph:hover img{ filter:none; opacity:1; }
.hp-car-v-logos .hp-car-b{ display:none; }

/* 08 Quick actions / 01 Product / 15 Cards */
.hp-car-v-cards .hp-car-c{ background:var(--cr-card); border:1px solid var(--cr-line); padding:10px;
  box-shadow:0 14px 30px -26px rgba(0,0,0,.45); }
.hp-car-v-cards .hp-car-b{ padding:11px 3px 3px; }

/* 09 Featured Collection — a copy panel floats over one side */
.hp-car-v-collection .hp-car-ph img{ aspect-ratio:16/8; }
.hp-car-v-collection .hp-car-c.is-ov .hp-car-b{ inset:0 auto 0 0; width:min(46%,420px);
  justify-content:center; background:linear-gradient(90deg,rgba(0,0,0,.72) 40%,transparent); }

/* 10 Video */
.hp-car-v-video .hp-car-ph img{ aspect-ratio:16/9; }

/* 13 Collection Lookbook */
.hp-car-lookbook{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--cr-gap); align-items:center; }
.hp-car-lbtile{ display:flex; flex-direction:column; gap:10px; }
.hp-car-lbtile h3{ font-family:var(--font-display,'Playfair Display',serif);
  font-size:clamp(1.4rem,3.2vw,2.4rem); line-height:1.15; color:var(--cr-ink); margin:0; }
.hp-car-lbtile p{ margin:0; color:var(--cr-soft); font-size:.93rem; line-height:1.6; }
.hp-car-lbgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--cr-gap); }
.hp-car-lbph{ display:block; border-radius:var(--cr-r); overflow:hidden; background:var(--cr-tint); }
.hp-car-lbph img{ display:block; width:100%; aspect-ratio:3/4; height:var(--cr-h, auto); object-fit:var(--cr-fit,cover); }

/* 14 Product Banner — a tinted promo slide */
.hp-car-v-promo .hp-car-ph{ background:var(--cr-tint); }
.hp-car-v-promo .hp-car-ph img{ aspect-ratio:16/7; }
.hp-car-v-promo .hp-car-c.is-ov .hp-car-ph::after{ background:none; }
.hp-car-v-promo .hp-car-c.is-ov .hp-car-b{ inset:0 auto 0 0; width:min(52%,520px); justify-content:center;
  background:linear-gradient(90deg,rgba(255,255,255,.94) 55%,transparent); color:var(--cr-ink); }
.hp-car-v-promo .hp-car-c.is-ov .hp-car-t{ color:var(--cr-ink); }
.hp-car-v-promo .hp-car-c.is-ov .hp-car-x,.hp-car-v-promo .hp-car-c.is-ov .hp-car-s{ color:var(--cr-soft); }
.hp-car-v-promo .hp-car-c.is-ov .hp-car-btn{ background:var(--cr-dark); color:#fff; }

/* 16 Instagram — tight square wall inside the track */
.hp-car-v-insta .hp-car-ph{ border-radius:6px; }
.hp-car-v-insta .hp-car-b{ display:none; }

/* 17 Dual Banner */
.hp-car-v-dual .hp-car-ph img{ aspect-ratio:4/3; }

/* 18 Text Only */
.hp-car-tonly{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  text-align:center; padding:clamp(22px,4vw,48px) 20px; }
.hp-car-tic{ width:44px; height:44px; border-radius:50%; background:var(--cr-tint); color:var(--cr-acc);
  display:inline-flex; align-items:center; justify-content:center; font-size:18px; }
.hp-car-tonly strong{ font-family:var(--font-display,'Playfair Display',serif);
  font-size:clamp(1.15rem,2.6vw,1.8rem); color:var(--cr-ink); line-height:1.25; }
.hp-car-tonly em{ font-style:normal; color:var(--cr-soft); font-size:.92rem; }

/* 19 Large Product Focus / 20 Thumbnail Navigation */
.hp-car-stager{ max-width:1000px; margin-inline:auto; }
.hp-car-v-focus .hp-car-stager{ display:grid; grid-template-columns:1.25fr .75fr;
  grid-template-areas:"stage side" "thumbs side"; gap:14px; align-items:start; }
.hp-car-v-focus .hp-gal-stage{ grid-area:stage; }
.hp-car-v-focus .hp-gal-thumbs{ grid-area:thumbs; }
.hp-car-focus-b{ grid-area:side; display:flex; flex-direction:column; gap:10px; justify-content:center;
  align-self:stretch; }
.hp-car-focus-b .hp-car-t{ font-family:var(--font-display,'Playfair Display',serif);
  font-size:clamp(1.15rem,2.4vw,1.7rem); }

/* 21 Centered (3D) — the track becomes a centre-snapping flex row */
.hp-car-v-center .hp-gal-track.is-grid{ display:flex; scroll-snap-type:x mandatory;
  padding-inline:21%; gap:var(--cr-gap); }
.hp-car-v-center .hp-gal-cell{ flex:0 0 58%; scroll-snap-align:center; }
.hp-car-v-center .hp-car-c{ transform:scale(.93); opacity:.72;
  transition:transform .3s ease, opacity .3s ease; box-shadow:0 24px 50px -30px rgba(0,0,0,.6); }
.hp-car-v-center .hp-gal-cell:hover .hp-car-c,
.hp-car-v-center .hp-gal-cell:focus-within .hp-car-c{ transform:none; opacity:1; }

/* 22 Vertical */
.hp-car-vlist{ display:flex; flex-direction:column; gap:10px; max-width:640px; margin-inline:auto; }
.hp-car-vrow{ display:flex; align-items:center; gap:14px; text-decoration:none; padding:10px 14px;
  border:1px solid var(--cr-line); border-radius:var(--cr-r); background:var(--cr-card);
  transition:border-color .16s ease, transform .16s ease; }
.hp-car-vrow:hover{ border-color:var(--cr-acc); transform:translateX(3px); }
.hp-car-vnum{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--cr-tint);
  color:var(--cr-soft); display:inline-flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:800; }
.hp-car-vph{ flex:0 0 auto; width:52px; border-radius:9px; overflow:hidden; background:var(--cr-tint); }
.hp-car-vph img{ display:block; width:100%; aspect-ratio:1/1; object-fit:var(--cr-fit,cover); }
.hp-car-vb{ flex:1 1 auto; display:flex; flex-direction:column; gap:3px; min-width:0; }
.hp-car-vb strong{ font-size:.9rem; font-weight:600; color:var(--cr-ink); }
.hp-car-vb em{ font-style:normal; font-size:.85rem; font-weight:700; color:var(--cr-acc); }

/* 24 Mixed Media */
.hp-car-v-mixed .hp-car-ph img{ aspect-ratio:1/1; }

/* =============================== responsive =============================== */
/* the column ladder — each step falls back to the block's own count when already smaller */
@media(max-width:1200px){ .hp-car{ --cr-cols:var(--cr-cols-4,4); } }
@media(max-width:1000px){ .hp-car{ --cr-cols:var(--cr-cols-3,3); } }
@media(max-width:760px){  .hp-car{ --cr-cols:var(--cr-cols-2,2); } }
@media(max-width:900px){
  .hp-car-lookbook{ grid-template-columns:1fr; }
  .hp-car-v-focus .hp-car-stager{ grid-template-columns:1fr; grid-template-areas:"stage" "thumbs" "side"; }
  .hp-car-v-collection .hp-car-c.is-ov .hp-car-b,
  .hp-car-v-promo .hp-car-c.is-ov .hp-car-b{ inset:auto 0 0 0; width:auto;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.7)); color:#fff; }
  .hp-car-v-promo .hp-car-c.is-ov .hp-car-t{ color:#fff; }
  .hp-car-v-promo .hp-car-c.is-ov .hp-car-x,.hp-car-v-promo .hp-car-c.is-ov .hp-car-s{ color:rgba(255,255,255,.88); }
  .hp-car-v-banner .hp-car-ph img,.hp-car-v-imagetext .hp-car-ph img,
  .hp-car-v-autoplay .hp-car-ph img,.hp-car-v-promo .hp-car-ph img,
  .hp-car-v-collection .hp-car-ph img{ aspect-ratio:16/10; }
  .hp-car-head{ flex-direction:column; align-items:flex-start; }
  .hp-car-head.is-center{ align-items:center; }
}
@media(max-width:620px){
  .hp-car-v-center .hp-gal-track.is-grid{ padding-inline:10%; }
  .hp-car-v-center .hp-gal-cell{ flex:0 0 80%; }
  .hp-car-v-center .hp-car-c{ transform:none; opacity:1; }
  .hp-car-lbgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hp-car-btn{ padding:8px 15px; font-size:.74rem; }
  .hp-car-play{ width:44px; height:44px; font-size:14px; }
  .hp-car-quick{ opacity:1; transform:none; }
  .hp-car-vrow{ padding:8px 11px; gap:10px; }
}
@media(max-width:460px){
  .hp-car{ --cr-cols:1; }
  .hp-car-v-insta,.hp-car-v-logos,.hp-car-v-category,.hp-car-v-team{ --cr-cols:var(--cr-cols-2,2); }
  .hp-car-lbgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:reduce){
  .hp-car-ph img,.hp-car-c,.hp-car-btn,.hp-car-play,.hp-car-vrow{ transition:none; }
  .hp-car.is-fx-zoom .hp-car-ph:hover img,.hp-car.is-fx-lift .hp-car-c:hover{ transform:none; }
  .hp-car-v-center .hp-car-c{ transform:none; opacity:1; }
}

/* ================================================================= PRICING — 16 DESIGNS
 * Wrapper: .hp-pr .hp-pr-v-<style> .is-<align> [.is-yearly]
 * Renderer: sf_cb_render_pricing(). Colours resolve through the professional -> legacy -> literal
 * token chain; headings use var(--font-display) with no font-weight of their own.
 * ------------------------------------------------------------------------------------------- */
.hp-pr{
  --pr-acc:  var(--accent,      var(--color-gold,        #c9a227));
  --pr-ink:  var(--primary,     var(--color-primary,     #2c1810));
  --pr-body: var(--text,        var(--color-text,        #1a0f0a));
  --pr-soft: var(--text-muted,  var(--color-text-muted,  #7a6555));
  --pr-line: var(--card-border, var(--color-border,      #e8ddd2));
  --pr-card: var(--card-bg,     var(--color-card-bg,     #ffffff));
  --pr-dark: var(--color-dark,  #1a0f0a);
  --pr-tint: var(--color-bg-2,  #f5f0e8);
  --pr-band: transparent;
  --pr-on-acc:#ffffff;
  --pr-r:16px; --pr-gap:20px; --pr-scrim:.55;
  --pr-cols-d:3; --pr-cols:var(--pr-cols-d,3);
  position:relative; overflow-x:clip; background:var(--pr-band);
  padding-block:clamp(28px,4vw,60px); font-family:var(--font-body,inherit); color:var(--pr-body);
}
.hp-pr *{ min-width:0; }

.hp-pr-head{ margin:0 0 24px; }
.hp-pr-head.is-center{ text-align:center; }
.hp-pr-eyebrow{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.26em;
  text-transform:uppercase; color:var(--pr-soft); margin-bottom:11px; }
.hp-pr-title{ font-family:var(--font-display,'Playfair Display',serif); font-size:clamp(1.5rem,3.2vw,2.4rem);
  line-height:1.2; color:var(--pr-ink); margin:0; text-wrap:balance; }
.hp-pr-sub{ margin:12px 0 0; color:var(--pr-soft); font-size:.95rem; line-height:1.6; max-width:60ch; }
.hp-pr-head.is-center .hp-pr-sub{ margin-inline:auto; }

/* ---- billing toggle ---- */
.hp-pr-bill{ display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 26px;
  font-size:.88rem; color:var(--pr-soft); flex-wrap:wrap; }
.hp-pr-sw{ position:relative; display:inline-block; width:44px; height:24px; cursor:pointer; }
.hp-pr-sw input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.hp-pr-sw i{ position:absolute; inset:0; border-radius:999px; background:var(--pr-line); transition:background .18s ease; }
.hp-pr-sw i::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .18s ease; }
.hp-pr-sw input:checked + i{ background:var(--pr-acc); }
.hp-pr-sw input:checked + i::after{ transform:translateX(20px); }
.hp-pr-sw input:focus-visible + i{ outline:2px solid var(--pr-acc); outline-offset:2px; }
.hp-pr-save{ font-style:normal; font-size:.74rem; font-weight:700; padding:3px 10px; border-radius:999px;
  background:var(--pr-acc); color:var(--pr-on-acc); }

/* ---- the plan card ---- */
.hp-pr-grid{ display:grid; gap:var(--pr-gap); grid-template-columns:repeat(var(--pr-cols),minmax(0,1fr));
  align-items:stretch; }
.hp-pr-c{ position:relative; display:flex; flex-direction:column; gap:10px; min-width:0;
  background:var(--pr-card); border:1px solid var(--pr-line); border-radius:var(--pr-r);
  padding:clamp(20px,2.6vw,32px); text-align:center; }
.hp-pr-c.is-hot{ border-color:var(--pr-acc); box-shadow:0 26px 50px -30px rgba(0,0,0,.45); }
.hp-pr-ribbon{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); z-index:2;
  background:var(--pr-acc); color:var(--pr-on-acc); font-size:.66rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 14px; border-radius:999px; white-space:nowrap; }
.hp-pr-badge{ align-self:center; font-size:.66rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; padding:3px 10px; border-radius:999px;
  background:var(--pr-tint); color:var(--pr-soft); }
.hp-pr-ic{ align-self:center; width:60px; height:60px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-size:22px; background:var(--pr-tint); color:var(--pr-acc); }
.hp-pr-img{ display:block; border-radius:calc(var(--pr-r) - 6px); overflow:hidden; background:var(--pr-tint); }
.hp-pr-img img{ display:block; width:100%; aspect-ratio:4/3; height:var(--pr-h, auto); object-fit:var(--pr-fit,cover); }
.hp-pr-name{ font-family:var(--font-display,'Playfair Display',serif); font-size:1.1rem;
  color:var(--pr-ink); margin:0; line-height:1.3; }
.hp-pr-price{ display:inline-flex; align-items:baseline; justify-content:center; gap:2px; }
.hp-pr-cur{ font-size:1.1rem; font-weight:700; color:var(--pr-ink); }
.hp-pr-amt{ font-size:clamp(1.9rem,4vw,2.6rem); font-weight:800; line-height:1; color:var(--pr-ink);
  font-variant-numeric:tabular-nums; }
.hp-pr-per{ font-size:.82rem; color:var(--pr-soft); margin-left:3px; }
.hp-pr-old{ font-size:.85rem; color:var(--pr-soft); }
.hp-pr-tag{ margin:0; font-size:.85rem; color:var(--pr-soft); line-height:1.5; }
.hp-pr-feat{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:9px; text-align:left; }
.hp-pr-feat li{ display:flex; gap:9px; align-items:flex-start; font-size:.88rem;
  color:var(--pr-soft); line-height:1.5; }
.hp-pr-feat i{ flex:0 0 auto; margin-top:3px; font-size:.72rem; color:var(--pr-acc); }
.hp-pr-btn{ display:inline-flex; align-items:center; justify-content:center; margin-top:auto;
  padding:12px 22px; border-radius:999px; text-decoration:none; background:var(--pr-card);
  color:var(--pr-ink); border:1.5px solid var(--pr-line); font-size:.82rem; font-weight:700;
  letter-spacing:.04em; transition:background .16s ease, color .16s ease, border-color .16s ease; }
.hp-pr-btn:hover{ border-color:var(--pr-acc); color:var(--pr-acc); }
.hp-pr-c.is-hot .hp-pr-btn{ background:var(--pr-dark); color:#fff; border-color:var(--pr-dark); }
.hp-pr-c.is-hot .hp-pr-btn:hover{ color:#fff; opacity:.92; }

/* =============================== per design =============================== */
/* 02 Modern — the highlighted plan lifts and takes the accent outline */
.hp-pr-v-modern .hp-pr-c.is-hot{ border-width:2px; transform:translateY(-8px); }
.hp-pr-v-modern .hp-pr-c.is-hot .hp-pr-btn{ background:var(--pr-acc); color:var(--pr-on-acc); border-color:var(--pr-acc); }

/* 05 Minimal — no cards at all, just rules between the columns */
.hp-pr-v-minimal .hp-pr-c{ background:none; border:0; border-radius:0; box-shadow:none;
  border-left:1px solid var(--pr-line); }
.hp-pr-v-minimal .hp-pr-grid > .hp-pr-c:first-child{ border-left:0; }
.hp-pr-v-minimal .hp-pr-c.is-hot{ box-shadow:none; transform:none; }

/* 06 Gradient */
.hp-pr-v-gradient{ background-image:linear-gradient(135deg,#eef2ff,#f6f1ff 55%,#eefaf6); }
.hp-pr-v-gradient .hp-pr-c{ border:0; box-shadow:0 22px 44px -32px rgba(20,20,60,.5); }
.hp-pr-v-gradient .hp-pr-c.is-hot{ background:linear-gradient(160deg,#5b2ba8,#3b1d78); color:#fff; }
.hp-pr-v-gradient .hp-pr-c.is-hot .hp-pr-name,.hp-pr-v-gradient .hp-pr-c.is-hot .hp-pr-amt,
.hp-pr-v-gradient .hp-pr-c.is-hot .hp-pr-cur{ color:#fff; }
.hp-pr-v-gradient .hp-pr-c.is-hot .hp-pr-tag,.hp-pr-v-gradient .hp-pr-c.is-hot .hp-pr-feat li,
.hp-pr-v-gradient .hp-pr-c.is-hot .hp-pr-per{ color:rgba(255,255,255,.85); }
.hp-pr-v-gradient .hp-pr-c.is-hot .hp-pr-feat i{ color:#fff; }
.hp-pr-v-gradient .hp-pr-c.is-hot .hp-pr-btn{ background:#fff; color:#3b1d78; border-color:#fff; }

/* 08 Detailed — a photo leads each card */
.hp-pr-v-detailed .hp-pr-c{ text-align:left; padding-top:0; overflow:hidden; }
.hp-pr-v-detailed .hp-pr-img{ margin:0 calc(clamp(20px,2.6vw,32px) * -1) 8px; border-radius:0; }
.hp-pr-v-detailed .hp-pr-price,.hp-pr-v-detailed .hp-pr-badge{ align-self:flex-start; }

/* 12 Dark */
.hp-pr-v-dark{ --pr-band:#0f1621; --pr-card:#182231; --pr-line:#26334a; --pr-ink:#ffffff;
  --pr-soft:rgba(255,255,255,.7); --pr-tint:#212d40; }
.hp-pr-v-dark .hp-pr-btn{ color:#fff; }
.hp-pr-v-dark .hp-pr-c.is-hot{ background:#1d2a3d; }

/* 07 Icon based / 15 Creative */
.hp-pr-v-creative .hp-pr-c{ background:none; border:0; }
.hp-pr-v-creative .hp-pr-c::before{ content:""; position:absolute; inset:6% 8% auto 8%; height:72%;
  border-radius:46% 54% 52% 48% / 48% 44% 56% 52%; background:var(--pr-tint); z-index:0; }
.hp-pr-v-creative .hp-pr-c > *{ position:relative; z-index:1; }
.hp-pr-v-creative .hp-pr-c:nth-child(2)::before{ background:#e9f4ef; }
.hp-pr-v-creative .hp-pr-c:nth-child(3)::before{ background:#eaf0f8; }

/* 09 Vertical highlight / 13 Enterprise focus — a copy panel beside the plans */
.hp-pr-split{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(20px,3vw,44px); align-items:center; }
.hp-pr-side{ display:flex; flex-direction:column; gap:12px; }
.hp-pr-v-vertical .hp-pr-grid{ grid-template-columns:1fr; }
.hp-pr-v-vertical .hp-pr-c{ flex-direction:row; align-items:center; text-align:left; gap:16px;
  padding:16px 20px; }
.hp-pr-v-vertical .hp-pr-name{ flex:1 1 auto; }
.hp-pr-v-vertical .hp-pr-feat{ display:none; }
.hp-pr-v-vertical .hp-pr-btn{ margin-top:0; }
.hp-pr-v-enterprise .hp-pr-c{ padding:18px 16px; }
.hp-pr-v-enterprise .hp-pr-feat{ display:none; }

/* 10 Slider */
.hp-pr-car .hp-gal-track.is-grid{ grid-auto-columns:min(340px,78%); gap:var(--pr-gap);
  grid-template-rows:auto; }
.hp-pr-car{ --gl-acc:var(--pr-acc); --gl-dark:var(--pr-dark); }
.hp-pr-car .hp-gal-cell{ display:flex; }
.hp-pr-car .hp-gal-cell > *{ flex:1 1 auto; }

/* 11 CTA banner above the plans */
.hp-pr-v-ctabanner .hp-pr-head{ background:var(--pr-tint); border-radius:var(--pr-r);
  padding:clamp(20px,3vw,36px); }

/* 04 Comparison table */
.hp-pr-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.hp-pr-table{ width:100%; min-width:560px; border-collapse:separate; border-spacing:0;
  background:var(--pr-card); border:1px solid var(--pr-line); border-radius:var(--pr-r); overflow:hidden; }
.hp-pr-table th,.hp-pr-table td{ padding:13px 14px; text-align:center; font-size:.88rem;
  border-bottom:1px solid var(--pr-line); }
.hp-pr-table tr:last-child td{ border-bottom:0; }
.hp-pr-table th{ background:var(--pr-tint); color:var(--pr-ink); }
.hp-pr-table th span{ display:block; font-weight:700; }
.hp-pr-table th b{ display:block; margin-top:3px; font-size:.82rem; color:var(--pr-soft); font-weight:600; }
.hp-pr-table th.is-hot{ background:var(--pr-acc); color:var(--pr-on-acc); }
.hp-pr-table th.is-hot b{ color:var(--pr-on-acc); opacity:.85; }
.hp-pr-th0,.hp-pr-td0{ text-align:left !important; font-weight:600; color:var(--pr-ink); }
.hp-pr-table td{ color:var(--pr-soft); }
.hp-pr-table td i{ color:var(--pr-acc); }
.hp-pr-no{ color:var(--pr-line); }

/* 16 Full width banner */
.hp-pr-banner{ position:relative; border-radius:var(--pr-r); overflow:hidden;
  min-height:clamp(240px,32vw,400px); display:flex; align-items:center; }
.hp-pr-bg{ position:absolute; inset:0; z-index:0; background-position:center; background-size:cover;
  background-repeat:no-repeat; }
.hp-pr-bg::after{ content:""; position:absolute; inset:0; background:var(--pr-dark); opacity:var(--pr-scrim); }
.hp-pr-bg.is-solid::after{ opacity:1; }
.hp-pr-banner-in{ position:relative; z-index:2; padding:clamp(24px,4vw,56px); max-width:min(680px,100%);
  display:flex; flex-direction:column; gap:12px; color:#fff; }
.hp-pr-banner-in .hp-pr-title{ color:#fff; }
.hp-pr-banner-in .hp-pr-sub{ color:rgba(255,255,255,.88); }
.hp-pr-banner-in .hp-pr-eyebrow{ color:rgba(255,255,255,.8); }
.hp-pr-banner-in .hp-pr-btn{ align-self:flex-start; margin-top:4px; background:#fff;
  color:var(--pr-dark); border-color:#fff; }
.hp-pr-trust{ display:flex; flex-wrap:wrap; gap:14px 22px; margin-top:8px; }
.hp-pr-trust span{ display:inline-flex; align-items:center; gap:7px; font-size:.82rem; color:rgba(255,255,255,.88); }
.hp-pr-trust i{ color:#fff; opacity:.8; font-size:.9em; }

/* =============================== responsive =============================== */
@media(max-width:980px){ .hp-pr{ --pr-cols:var(--pr-cols-2,2); } }
@media(max-width:900px){
  .hp-pr-split{ grid-template-columns:1fr; }
  .hp-pr-v-minimal .hp-pr-c{ border-left:0; border-top:1px solid var(--pr-line); padding-top:22px; }
  .hp-pr-v-minimal .hp-pr-grid > .hp-pr-c:first-child{ border-top:0; }
}
@media(max-width:640px){
  .hp-pr{ --pr-cols:1; }
  .hp-pr-v-modern .hp-pr-c.is-hot{ transform:none; }
  .hp-pr-v-vertical .hp-pr-c{ flex-direction:column; align-items:flex-start; text-align:left; }
  .hp-pr-bill{ gap:8px; font-size:.82rem; }
  .hp-pr-banner-in{ padding:22px 18px; }
  .hp-pr-trust{ gap:10px 16px; }
  .hp-pr-v-detailed .hp-pr-img{ margin-inline:-20px; }
}
@media(prefers-reduced-motion:reduce){
  .hp-pr-sw i,.hp-pr-sw i::after,.hp-pr-btn{ transition:none; }
  .hp-pr-v-modern .hp-pr-c.is-hot{ transform:none; }
}

/* ==========================================================================
   TEAM CONTENT BLOCK — 16 designs
   .hp-tm-v-<style>.  The root also carries .hp-gal so the shared carousel /
   filter-tab handler in sf_cb_carousel_script() drives the slider and the
   department tabs without a second script.
   ========================================================================== */

.hp-tm{
  /* --- tokens: professional first, legacy second, literal last --- */
  --tm-acc:  var(--color-accent, var(--accent, #0fb39a));
  --tm-on-acc: #fff;
  --tm-bg:   transparent;
  --tm-ink:  var(--text-primary, var(--color-text, #1c2b28));
  --tm-mute: var(--text-muted, var(--color-text-muted, #6b7d78));
  --tm-card: var(--surface-1, var(--color-card, #fff));
  --tm-line: var(--border-subtle, var(--color-border, rgba(20,32,29,.10)));
  --tm-soft: var(--surface-2, rgba(20,32,29,.04));
  --tm-dark: #101a18;
  --tm-r:    14px;
  --tm-gap:  20px;
  --tm-ph-r: var(--tm-r);
  --tm-ar:   1/1;
  --tm-scrim:.55;
  --tm-cols-d:4; --tm-cols-3:3; --tm-cols-2:2;

  /* the shared carousel script reads gallery tokens */
  --gl-r:var(--tm-r); --gl-gap:var(--tm-gap); --gl-acc:var(--tm-acc);
  --gl-on-acc:var(--tm-on-acc); --gl-card:var(--tm-card); --gl-line:var(--tm-line);
  --gl-ink:var(--tm-ink); --gl-soft:var(--tm-soft); --gl-dark:var(--tm-dark);

  color:var(--tm-ink);
  background:var(--tm-bg);
}

/* ---------- head ---------- */
.hp-tm-head{ margin:0 0 22px; }
.hp-tm-head.is-center{ text-align:center; }
.hp-tm-head.is-left{ text-align:left; }
.hp-tm-eyebrow{
  display:inline-block; margin:0 0 8px; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tm-acc);
}
.hp-tm-title{
  margin:0 0 6px; font-family:var(--font-display, inherit);
  font-size:clamp(1.45rem, 1.1rem + 1.5vw, 2.25rem); line-height:1.18; text-wrap:balance;
}
.hp-tm-sub{ margin:0; color:var(--tm-mute); font-size:.95rem; }
.hp-tm-body{ margin:0 0 16px; color:var(--tm-mute); font-size:.95rem; line-height:1.65; }

.hp-tm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:18px; padding:.7rem 1.4rem; border-radius:999px;
  background:var(--tm-acc); color:var(--tm-on-acc); text-decoration:none;
  font-size:.86rem; font-weight:600; border:1px solid transparent;
  transition:filter .18s ease, transform .18s ease;
}
.hp-tm-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); color:var(--tm-on-acc); }
.hp-tm.is-center > .hp-tm-btn{ display:flex; width:max-content; margin-left:auto; margin-right:auto; }

/* ---------- the grid ---------- */
.hp-tm-grid{
  display:grid; gap:var(--tm-gap);
  grid-template-columns:repeat(var(--tm-cols-d), minmax(0,1fr));
}

/* ---------- the card ---------- */
.hp-tm-c{
  display:flex; flex-direction:column; gap:12px; min-width:0;
  background:var(--tm-card); border:1px solid var(--tm-line);
  border-radius:var(--tm-r); padding:14px; text-align:center;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hp-tm-c:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(16,26,24,.10); }
.hp-tm-c.is-hot{ border-color:var(--tm-acc); }

.hp-tm-ph{
  display:block; position:relative; overflow:hidden; min-width:0;
  border-radius:var(--tm-ph-r); aspect-ratio:var(--tm-ar); height:var(--tm-h, auto);
  background:var(--tm-soft); text-decoration:none;
}
.hp-tm-ph img{ width:100%; height:100%; object-fit:var(--tm-fit,cover); display:block; }
.hp-tm-ph > i{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:2rem; color:var(--tm-acc);
}
.hp-tm-ini{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-display, inherit); font-size:1.6rem;
  color:var(--tm-acc); letter-spacing:.04em;
}

.hp-tm-b{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.hp-tm-name{
  margin:0; font-family:var(--font-display, inherit);
  font-size:1rem; line-height:1.3; overflow-wrap:anywhere;
}
.hp-tm-role{ margin:0; color:var(--tm-mute); font-size:.8rem; }
.hp-tm-bio{ margin:4px 0 0; color:var(--tm-mute); font-size:.85rem; line-height:1.6; }
.hp-tm-bio p{ margin:0 0 .5em; }
.hp-tm-bio p:last-child{ margin-bottom:0; }

/* ---------- social row ---------- */
.hp-tm-soc{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:8px; }
.hp-tm.is-left .hp-tm-soc{ justify-content:flex-start; }
.hp-tm-soc a{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  color:var(--tm-mute); font-size:.72rem; text-decoration:none;
  border:1px solid var(--tm-line); background:transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.hp-tm-soc a:hover{ background:var(--tm-acc); color:var(--tm-on-acc); border-color:var(--tm-acc); }

/* ==========================================================================
   01 · Classic Grid — rounded-square photos, everything centred
   ========================================================================== */
.hp-tm-v-classic{ --tm-ph-r:var(--tm-r); --tm-ar:1/1; }
.hp-tm-v-classic .hp-tm-c{ padding:12px; }

/* ==========================================================================
   02 · Modern Card — slider, the active card wears a dark panel
   ========================================================================== */
.hp-tm-v-modern{ --tm-ar:3/4; }
.hp-tm-v-modern .hp-tm-c{
  position:relative; padding:0; border:0; background:transparent; overflow:hidden;
  border-radius:var(--tm-r);
}
.hp-tm-v-modern .hp-tm-c:hover{ transform:none; box-shadow:none; }
.hp-tm-v-modern .hp-tm-ph{ border-radius:var(--tm-r); }
.hp-tm-v-modern .hp-tm-panel{
  position:absolute; left:0; right:0; bottom:0; padding:14px 12px;
  display:flex; flex-direction:column; gap:4px; text-align:center;
  color:#fff; background:linear-gradient(to top, rgba(10,16,15,.92), rgba(10,16,15,.55) 60%, transparent);
  opacity:0; transform:translateY(12px); transition:opacity .22s ease, transform .22s ease;
}
.hp-tm-v-modern .hp-tm-cell:hover .hp-tm-panel,
.hp-tm-v-modern .hp-tm-cell:focus-within .hp-tm-panel{ opacity:1; transform:none; }
.hp-tm-v-modern .hp-tm-panel .hp-tm-name{ color:#fff; }
.hp-tm-v-modern .hp-tm-panel .hp-tm-role{ color:rgba(255,255,255,.82); }
.hp-tm-v-modern .hp-tm-panel .hp-tm-soc a{ color:#fff; border-color:rgba(255,255,255,.4); }

/* ==========================================================================
   03 · Horizontal Style — compact list, small circles
   ========================================================================== */
.hp-tm-v-horizontal{ --tm-ph-r:50%; --tm-ar:1/1; }
.hp-tm-v-horizontal .hp-tm-c{
  border:0; background:transparent; padding:6px; gap:8px;
}
.hp-tm-v-horizontal .hp-tm-c:hover{ transform:none; box-shadow:none; }
.hp-tm-v-horizontal .hp-tm-ph{ width:74px; height:74px; margin:0 auto; }
.hp-tm-v-horizontal .hp-tm-name{ font-size:.86rem; }
.hp-tm-v-horizontal .hp-tm-role{ font-size:.72rem; }
.hp-tm-v-horizontal .hp-tm-soc a{ width:22px; height:22px; border:0; font-size:.68rem; }

/* ==========================================================================
   04 · Image with Text — one member large, bio beside
   ========================================================================== */
.hp-tm-feature{
  display:grid; gap:clamp(18px, 3vw, 38px); align-items:center;
  grid-template-columns:minmax(0, 320px) minmax(0, 1fr);
}
.hp-tm-feature .hp-tm-ph.is-lead{ aspect-ratio:1/1; border-radius:var(--tm-r); }
.hp-tm-feature .hp-tm-b{ text-align:left; gap:8px; }
.hp-tm-feature .hp-tm-name{ font-size:clamp(1.25rem, 1rem + 1vw, 1.7rem); }
.hp-tm-feature .hp-tm-role{ font-size:.9rem; color:var(--tm-acc); }
.hp-tm-feature .hp-tm-soc{ justify-content:flex-start; }
.hp-tm-strip{
  display:grid; gap:var(--tm-gap); margin-top:26px;
  grid-template-columns:repeat(var(--tm-cols-d), minmax(0,1fr));
}
.hp-tm-mini{ display:flex; flex-direction:column; gap:8px; text-align:center; min-width:0; }
.hp-tm-mini .hp-tm-ph{ border-radius:var(--tm-ph-r); }

/* ==========================================================================
   05 · Overlay Style — photo with a dark panel riding over it
   ========================================================================== */
.hp-tm-v-overlay{ --tm-ar:4/3; }
.hp-tm-ov{
  position:relative; padding:0; border:0; background:transparent; overflow:hidden;
  border-radius:var(--tm-r); text-align:left;
}
.hp-tm-ov:hover{ transform:none; }
.hp-tm-ov .hp-tm-ph{ border-radius:var(--tm-r); }
.hp-tm-ov .hp-tm-panel{
  position:absolute; right:0; top:0; bottom:0;
  width:min(52%, 250px); padding:18px 16px 44px;
  display:flex; flex-direction:column; gap:8px; justify-content:center;
  color:#fff; background:rgba(12,20,18,.88);
  border-radius:0 var(--tm-r) var(--tm-r) 0;
}
.hp-tm-ov .hp-tm-name{ color:#fff; font-size:.98rem; }
.hp-tm-ov .hp-tm-role{ color:rgba(255,255,255,.8); }
.hp-tm-quote{
  margin:0; font-size:.82rem; line-height:1.55; color:rgba(255,255,255,.9);
  font-style:italic;
}
.hp-tm-quote::before{ content:'\201C'; }
.hp-tm-quote::after{ content:'\201D'; }
.hp-tm-ov .hp-tm-soc{ justify-content:flex-start; }
.hp-tm-ov .hp-tm-soc a{ color:#fff; border-color:rgba(255,255,255,.38); }
.hp-tm-go{
  position:absolute; right:12px; bottom:12px;
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--tm-acc); color:var(--tm-on-acc); text-decoration:none; font-size:.78rem;
}
.hp-tm-go:hover{ color:var(--tm-on-acc); filter:brightness(1.08); }

/* ==========================================================================
   06 · Creative Layout — copy left, collage right
   ========================================================================== */
.hp-tm-split{
  display:grid; gap:clamp(18px, 3vw, 40px); align-items:center;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);
}
.hp-tm-copy{ text-align:left; }
.hp-tm-copy .hp-tm-head{ text-align:left; margin-bottom:12px; }
.hp-tm-collage{
  display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr));
}
.hp-tm-tile{ margin:0; position:relative; border-radius:var(--tm-r); overflow:hidden; }
.hp-tm-tile .hp-tm-ph{ aspect-ratio:4/5; border-radius:var(--tm-r); }
/* alternate tints so the collage reads as one composition */
.hp-tm-tile:nth-child(2),
.hp-tm-tile:nth-child(3){ background:color-mix(in srgb, var(--tm-acc) 16%, transparent); padding:6px; }
.hp-tm-tile:nth-child(1),
.hp-tm-tile:nth-child(4){ background:var(--tm-soft); padding:6px; }
.hp-tm-tile figcaption{
  position:absolute; left:6px; right:6px; bottom:6px; padding:8px 10px;
  border-radius:calc(var(--tm-r) - 4px);
  background:rgba(12,20,18,.78); color:#fff; text-align:left;
}
.hp-tm-tile figcaption .hp-tm-name{ color:#fff; font-size:.82rem; display:block; }
.hp-tm-tile figcaption .hp-tm-role{ color:rgba(255,255,255,.8); font-size:.7rem; }
.hp-tm-tile:nth-child(n+3){ margin-top:18px; }

/* ==========================================================================
   07 · Center Style — centred heading, circular photos
   ========================================================================== */
.hp-tm-v-center{ --tm-ph-r:50%; --tm-ar:1/1; }
.hp-tm-v-center .hp-tm-head{ text-align:center; margin-bottom:26px; }
.hp-tm-v-center .hp-tm-grid{ justify-content:center; }
.hp-tm-v-center .hp-tm-c{ border:0; background:transparent; }
.hp-tm-v-center .hp-tm-c:hover{ transform:none; box-shadow:none; }
.hp-tm-v-center .hp-tm-ph{ width:min(150px, 100%); margin:0 auto; }
.hp-tm-v-center .hp-tm-name{ font-size:1.02rem; }
.hp-tm-v-center .hp-tm-role{ color:var(--tm-acc); }

/* ==========================================================================
   08 · Team with Roles — card + short role description
   ========================================================================== */
.hp-tm-v-roles{ --tm-ar:1/1; }
.hp-tm-v-roles .hp-tm-c{ padding:0; overflow:hidden; }
.hp-tm-v-roles .hp-tm-ph{ border-radius:var(--tm-r) var(--tm-r) 0 0; }
.hp-tm-v-roles .hp-tm-b{ padding:12px; }
.hp-tm-v-roles .hp-tm-role{ color:var(--tm-acc); font-weight:600; }
.hp-tm-v-roles .hp-tm-bio{ font-size:.8rem; }

/* ==========================================================================
   09 · Minimal Style — monochrome, a "+" instead of a social row
   ========================================================================== */
.hp-tm-v-minimal{ --tm-ar:1/1; }
.hp-tm-v-minimal .hp-tm-c{ border:0; background:transparent; padding:4px; }
.hp-tm-v-minimal .hp-tm-c:hover{ transform:none; box-shadow:none; }
.hp-tm-v-minimal .hp-tm-ph img{ filter:grayscale(1); transition:filter .25s ease; }
.hp-tm-v-minimal .hp-tm-c:hover .hp-tm-ph img{ filter:grayscale(0); }
.hp-tm-v-minimal .hp-tm-name{ font-size:.9rem; }
.hp-tm-v-minimal .hp-tm-role{ font-size:.74rem; }
/* the social row collapses to a single round "+" that opens on hover */
.hp-tm-v-minimal .hp-tm-soc{ position:relative; height:28px; justify-content:center; }
.hp-tm-v-minimal .hp-tm-soc::before{
  content:'+'; position:absolute; inset:0; margin:auto;
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; font-size:.95rem; line-height:1;
  border:1px solid var(--tm-line); background:var(--tm-card); color:var(--tm-mute);
  transition:opacity .18s ease;
}
.hp-tm-v-minimal .hp-tm-soc a{ opacity:0; transition:opacity .18s ease; }
.hp-tm-v-minimal .hp-tm-c:hover .hp-tm-soc::before,
.hp-tm-v-minimal .hp-tm-c:focus-within .hp-tm-soc::before{ opacity:0; pointer-events:none; }
.hp-tm-v-minimal .hp-tm-c:hover .hp-tm-soc a,
.hp-tm-v-minimal .hp-tm-c:focus-within .hp-tm-soc a{ opacity:1; }

/* ==========================================================================
   10 · Large Feature — one big card, the rest as a side list
   ========================================================================== */
.hp-tm-feat{
  display:grid; gap:clamp(16px, 2.5vw, 30px);
  grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); align-items:stretch;
}
.hp-tm-feat-main{ position:relative; border-radius:var(--tm-r); overflow:hidden; }
.hp-tm-feat-main .hp-tm-ph.is-lead{
  aspect-ratio:4/5; border-radius:var(--tm-r); height:100%;
  /* Without a cap a wide column makes the featured portrait taller than the viewport. */
  max-height:min(540px, 78vh);
}
.hp-tm-feat-cap{
  position:absolute; left:0; right:0; bottom:0; padding:16px 14px; text-align:left;
  color:#fff; background:linear-gradient(to top, rgba(10,16,15,.92), transparent);
}
.hp-tm-feat-cap .hp-tm-name{ color:#fff; }
.hp-tm-feat-cap .hp-tm-role{ color:rgba(255,255,255,.82); }
.hp-tm-feat-cap .hp-tm-soc{ justify-content:flex-start; }
.hp-tm-feat-cap .hp-tm-soc a{ color:#fff; border-color:rgba(255,255,255,.4); }
.hp-tm-side{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:12px; justify-content:center;
}
.hp-tm-side li{ display:flex; align-items:center; gap:12px; min-width:0; }
.hp-tm-side .hp-tm-ph{ width:52px; height:52px; flex:0 0 52px; border-radius:50%; aspect-ratio:1/1; }
.hp-tm-side span{ min-width:0; text-align:left; }
.hp-tm-side .hp-tm-name{ font-size:.9rem; }

/* ==========================================================================
   11 · Department Style — filter pills over the grid
   ========================================================================== */
.hp-tm-tabs{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px;
}
.hp-tm.is-center .hp-tm-tabs{ justify-content:center; }
.hp-tm-tab{
  appearance:none; cursor:pointer; padding:.42rem 1rem; border-radius:999px;
  font-size:.78rem; font-weight:600; line-height:1.2;
  border:1px solid var(--tm-line); background:var(--tm-card); color:var(--tm-mute);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.hp-tm-tab:hover{ border-color:var(--tm-acc); color:var(--tm-ink); }
.hp-tm-tab.is-on{ background:var(--tm-dark); color:#fff; border-color:var(--tm-dark); }
.hp-tm-v-department .hp-gal-i{ min-width:0; display:block; }
.hp-tm-v-department .hp-gal-i[hidden]{ display:none !important; }

/* ==========================================================================
   12 · Team with Background — copy panel + photo band
   ========================================================================== */
.hp-tm-band{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr);
  align-items:stretch; border-radius:var(--tm-r); overflow:hidden;
  background:var(--tm-soft);
}
.hp-tm-band-copy{ padding:clamp(18px, 3vw, 38px); text-align:left; align-self:center; }
.hp-tm-band-copy .hp-tm-head{ text-align:left; margin-bottom:10px; }
.hp-tm-bg{
  min-height:220px; background-size:cover; background-position:center;
  background-color:var(--tm-soft);
}
.hp-tm-v-background .hp-tm-grid{ margin-top:26px; }

/* ==========================================================================
   13 · Carousel Style — 3 up, the middle one enlarged
   ========================================================================== */
.hp-tm-car{ position:relative; }
.hp-tm-v-carousel{ --tm-ar:3/4; }
.hp-tm-v-carousel .hp-tm-c{ padding:0; border:0; background:transparent; position:relative; overflow:hidden; border-radius:var(--tm-r); }
.hp-tm-v-carousel .hp-tm-c:hover{ transform:none; box-shadow:none; }
.hp-tm-v-carousel .hp-tm-cap{
  position:absolute; left:0; right:0; bottom:0; padding:12px 10px; text-align:center;
  color:#fff; background:linear-gradient(to top, rgba(10,16,15,.9), transparent);
}
.hp-tm-v-carousel .hp-tm-cap .hp-tm-name{ color:#fff; font-size:.9rem; }
.hp-tm-v-carousel .hp-tm-cap .hp-tm-role{ color:rgba(255,255,255,.82); font-size:.72rem; }
.hp-tm-v-carousel .hp-tm-cap .hp-tm-soc a{ color:#fff; border-color:rgba(255,255,255,.4); }
/* the middle cell sits taller so the row reads as a stage */
.hp-tm-v-carousel .hp-tm-cell{ transition:transform .25s ease; }
.hp-tm-v-carousel .is-emph3 .hp-tm-cell:nth-child(3n+2){ transform:scale(1.04); z-index:1; }

/* The track also carries .hp-gal-track.is-grid so the shared handler drives it, and that
   rule sets grid-template-rows from --gl-rows — which for a team block is unset and falls
   back to 2, wrapping the slides into two rows. Match .hp-car's precedent and restate both
   axes at the same specificity, one row, slides sized from --tm-slides. */
.hp-tm .hp-gal-track.is-grid{
  grid-auto-flow:column;
  --tm-slides: var(--tm-slides-d, 3);
  grid-auto-columns:calc((100% - (var(--tm-slides, 3) - 1) * var(--tm-gap)) / var(--tm-slides, 3));
  grid-template-rows:repeat(1, auto);
  gap:var(--tm-gap); padding:14px 2px;
}
.hp-tm-track{ overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; }
/* A slide cell computes to flex-direction:column with align-items:center, so the card's
   WIDTH is a cross-axis size and collapses to its content — it floats in the middle of an
   otherwise empty slide. Stretch the cross axis; flex:1 grows it down the main axis. */
.hp-tm .hp-gal-cell{ display:flex; flex-direction:column; align-items:stretch; }
.hp-tm .hp-gal-cell > *{ flex:1 1 auto; min-width:0; }
.hp-tm-track::-webkit-scrollbar{ display:none; }
.hp-tm-cell{ scroll-snap-align:start; min-width:0; }

.hp-tm-car .hp-gal-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:.8rem;
  border:1px solid var(--tm-line); background:var(--tm-card); color:var(--tm-ink);
  box-shadow:0 6px 18px rgba(16,26,24,.12);
  opacity:0; transition:opacity .2s ease, background .2s ease, color .2s ease;
}
.hp-tm-car:hover .hp-gal-nav,
.hp-tm-car:focus-within .hp-gal-nav{ opacity:1; }
.hp-tm-car .hp-gal-nav:hover{ background:var(--tm-acc); color:var(--tm-on-acc); border-color:var(--tm-acc); }
/* Inside the box, never outside it: a negative offset on an absolutely positioned
   control bleeds past the section and shows up as horizontal overflow on the page. */
.hp-tm-car .hp-gal-nav.is-prev{ left:6px; }
.hp-tm-car .hp-gal-nav.is-next{ right:6px; }

.hp-tm-dots{ display:flex; gap:6px; justify-content:center; margin-top:14px; }
.hp-tm-dots .hp-gal-dot{
  appearance:none; cursor:pointer; width:7px; height:7px; padding:0; border:0;
  border-radius:50%; background:var(--tm-line); transition:background .2s ease, width .2s ease;
}
.hp-tm-dots .hp-gal-dot.is-on{ background:var(--tm-acc); width:18px; border-radius:999px; }

/* ==========================================================================
   14 · Card with Skills — photo beside a set of bars
   ========================================================================== */
.hp-tm-skill{
  display:grid; grid-template-columns:minmax(0, 150px) minmax(0, 1fr);
  gap:16px; align-items:center; text-align:left; padding:14px;
}
.hp-tm-skill .hp-tm-ph{ aspect-ratio:1/1; border-radius:var(--tm-r); }
.hp-tm-skill .hp-tm-b{ gap:6px; }
.hp-tm-sk{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.hp-tm-sk li{
  display:grid; grid-template-columns:1fr auto; gap:2px 8px; align-items:baseline;
}
.hp-tm-sk-l{ font-size:.78rem; color:var(--tm-ink); min-width:0; overflow-wrap:anywhere; }
.hp-tm-sk-v{ font-size:.72rem; color:var(--tm-mute); font-variant-numeric:tabular-nums; }
.hp-tm-sk-bar{
  grid-column:1 / -1; display:block; height:5px; border-radius:999px;
  background:var(--tm-soft); overflow:hidden;
}
.hp-tm-sk-bar i{ display:block; height:100%; border-radius:999px; background:var(--tm-acc); }
.hp-tm-skill .hp-tm-soc{ justify-content:flex-start; }

/* ==========================================================================
   15 · Circle Team — plain circular portraits
   ========================================================================== */
.hp-tm-v-circle{ --tm-ph-r:50%; --tm-ar:1/1; }
.hp-tm-v-circle .hp-tm-c{ border:0; background:transparent; }
.hp-tm-v-circle .hp-tm-c:hover{ transform:none; box-shadow:none; }
.hp-tm-v-circle .hp-tm-ph{
  width:min(140px, 100%); margin:0 auto;
  outline:3px solid transparent; outline-offset:4px; transition:outline-color .2s ease;
}
.hp-tm-v-circle .hp-tm-c:hover .hp-tm-ph{ outline-color:color-mix(in srgb, var(--tm-acc) 45%, transparent); }

/* ==========================================================================
   16 · Full Width Banner — dark band, copy left, stat row beneath
   ========================================================================== */
.hp-tm-banner{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--tm-r); background:var(--tm-dark); color:#fff;
  min-height:280px; display:grid; align-items:center;
}
.hp-tm-banner .hp-tm-bg{
  position:absolute; inset:0; z-index:-2; min-height:0;
  background-size:cover; background-position:center;
}
.hp-tm-banner::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(10,16,15,calc(.35 + var(--tm-scrim) * .6)) 0%,
             rgba(10,16,15,calc(var(--tm-scrim) * .78)) 45%, rgba(10,16,15,.28) 100%);
}
.hp-tm-banner-in{ padding:clamp(22px, 4vw, 48px); text-align:left; max-width:min(100%, 720px); }
.hp-tm-banner-in .hp-tm-head{ text-align:left; margin-bottom:10px; }
.hp-tm-banner-in .hp-tm-title,
.hp-tm-banner-in .hp-tm-name{ color:#fff; }
.hp-tm-banner-in .hp-tm-sub,
.hp-tm-banner-in .hp-tm-body{ color:rgba(255,255,255,.86); }
.hp-tm-banner-in .hp-tm-eyebrow{ color:#fff; }
.hp-tm-stats{
  list-style:none; margin:22px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:18px 26px;
}
.hp-tm-stats li{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:84px; }
.hp-tm-stats i{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28);
  color:#fff; font-size:.8rem;
}
.hp-tm-stats span{ font-size:.76rem; color:rgba(255,255,255,.9); text-align:center; }

/* ==========================================================================
   Breakpoints — every ladder step relaxes an INPUT (--tm-cols-*), never the
   grid property itself, which an #id rule would otherwise win outright.
   ========================================================================== */
@media (max-width: 1024px){
  .hp-tm-grid,
  .hp-tm-strip{ grid-template-columns:repeat(var(--tm-cols-3), minmax(0,1fr)); }
  .hp-tm-v-skills .hp-tm-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 860px){
  .hp-tm-feature,
  .hp-tm-split,
  .hp-tm-feat,
  .hp-tm-band{ grid-template-columns:minmax(0,1fr); }
  .hp-tm-feature .hp-tm-ph.is-lead{ max-width:320px; margin:0 auto; }
  .hp-tm-copy,
  .hp-tm-copy .hp-tm-head{ text-align:center; }
  .hp-tm-copy .hp-tm-btn{ margin-left:auto; margin-right:auto; }
  .hp-tm-tile:nth-child(n+3){ margin-top:0; }
  .hp-tm .hp-gal-track.is-grid{ --tm-slides:var(--tm-slides-2, 2); }
}
@media (max-width: 640px){
  .hp-tm-grid,
  .hp-tm-strip{ grid-template-columns:repeat(var(--tm-cols-2), minmax(0,1fr)); }
  .hp-tm-feature .hp-tm-b,
  .hp-tm-band-copy,
  .hp-tm-banner-in{ text-align:center; }
  .hp-tm-feature .hp-tm-soc,
  .hp-tm-band-copy .hp-tm-soc{ justify-content:center; }
  .hp-tm-band-copy .hp-tm-head,
  .hp-tm-banner-in .hp-tm-head{ text-align:center; }
  .hp-tm-stats{ justify-content:center; }
  .hp-tm-ov .hp-tm-panel{ position:static; width:auto; border-radius:0 0 var(--tm-r) var(--tm-r); top:auto; }
  .hp-tm-ov{ background:rgba(12,20,18,.88); }
  .hp-tm-side li{ justify-content:center; }
  .hp-tm-v-carousel .is-emph3 .hp-tm-cell:nth-child(3n+2){ transform:none; }
}
@media (max-width: 560px){
  .hp-tm-grid,
  .hp-tm-strip{ grid-template-columns:minmax(0,1fr); }
  .hp-tm-skill{ grid-template-columns:minmax(0,1fr); text-align:center; }
  .hp-tm-skill .hp-tm-ph{ max-width:180px; margin:0 auto; }
  .hp-tm-skill .hp-tm-soc{ justify-content:center; }
  .hp-tm-collage{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hp-tm .hp-gal-track.is-grid{ --tm-slides:var(--tm-slides-1, 1); }
  .hp-tm-car .hp-gal-nav{ opacity:1; }
  .hp-tm-car .hp-gal-nav.is-prev{ left:2px; }
  .hp-tm-car .hp-gal-nav.is-next{ right:2px; }
}

@media (prefers-reduced-motion: reduce){
  .hp-tm-c, .hp-tm-cell, .hp-tm-panel, .hp-tm-btn, .hp-tm-ph img{ transition:none !important; }
  .hp-tm-c:hover{ transform:none; }
}

/* ==========================================================================
   DEAL OF THE DAY — 16 designs
   .hp-dd-v-<style>.  The root also carries .hp-gal so the shared carousel
   handler drives the Product Slider without a second script.  Countdown
   markup stays .cbcd-* so sf_cb_countdown_script() keeps ticking it.
   ========================================================================== */

.hp-dd{
  --dd-acc:  var(--color-accent, var(--accent, #dc2626));
  --dd-on-acc:#fff;
  --dd-bg:   var(--surface-1, var(--color-card, #fff));
  --dd-ink:  var(--text-primary, var(--color-text, #1c2b28));
  --dd-mute: var(--text-muted, var(--color-text-muted, #6b7d78));
  --dd-line: var(--border-subtle, var(--color-border, rgba(20,32,29,.10)));
  --dd-soft: var(--surface-2, rgba(20,32,29,.04));
  --dd-dark: #0e1418;
  --dd-r:    18px;
  --dd-gap:  18px;
  --dd-scrim:.58;
  --dd-cols-d:3; --dd-cols-3:3; --dd-cols-2:2;

  --gl-r:var(--dd-r); --gl-gap:var(--dd-gap); --gl-acc:var(--dd-acc);
  --gl-on-acc:var(--dd-on-acc); --gl-card:var(--dd-bg); --gl-line:var(--dd-line);
  --gl-ink:var(--dd-ink); --gl-soft:var(--dd-soft); --gl-dark:var(--dd-dark);

  color:var(--dd-ink);
}

/* ---------- section head ---------- */
.hp-dd-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin:0 0 16px;
}
.hp-dd-title{
  margin:0; font-family:var(--font-display, inherit);
  font-size:clamp(1.3rem, 1.05rem + 1.2vw, 1.9rem); line-height:1.2; text-wrap:balance;
}
.hp-dd-viewall{
  display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
  color:var(--dd-mute); font-size:.82rem; font-weight:600;
}
.hp-dd-viewall:hover{ color:var(--dd-acc); }
.hp-dd-viewall i{ font-size:.7rem; }

/* ---------- shared copy pieces ---------- */
.hp-dd-eyebrow{
  display:inline-block; margin:0 0 8px; font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dd-acc);
}
.hp-dd-badge{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  margin:0 0 10px; padding:.34rem .78rem; border-radius:999px;
  background:var(--dd-acc); color:var(--dd-on-acc);
  font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.hp-dd-t{
  margin:0 0 8px; font-family:var(--font-display, inherit);
  font-size:clamp(1.15rem, .95rem + 1vw, 1.75rem); line-height:1.2;
  text-wrap:balance; overflow-wrap:anywhere;
}
.hp-dd-sub{ margin:0 0 10px; color:var(--dd-mute); font-size:.88rem; line-height:1.6; }
.hp-dd-x{ margin:0 0 12px; color:var(--dd-mute); font-size:.86rem; line-height:1.65; }

.hp-dd-price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
.hp-dd-now{
  font-size:clamp(1.15rem, 1rem + .7vw, 1.6rem); font-weight:800;
  color:var(--dd-acc); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.hp-dd-old{ color:var(--dd-mute); font-size:.9rem; font-variant-numeric:tabular-nums; }

.hp-dd-rate{ display:flex; align-items:center; gap:8px; margin:0 0 10px; }
.hp-dd-stars{ display:inline-flex; gap:2px; color:#f5a524; font-size:.76rem; }
.hp-dd-revs{ color:var(--dd-mute); font-size:.76rem; }

.hp-dd-feat{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:7px; }
.hp-dd-feat li{ display:flex; align-items:flex-start; gap:8px; font-size:.82rem; color:var(--dd-mute); }
.hp-dd-feat i{ color:var(--dd-acc); font-size:.76rem; margin-top:.18em; }

/* ---------- buttons ---------- */
.hp-dd-btn, .hp-dd-cart{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1.4rem; border-radius:999px; text-decoration:none;
  font-size:.84rem; font-weight:700; border:1px solid transparent;
  transition:filter .18s ease, transform .18s ease;
}
.hp-dd-btn{ background:var(--dd-dark); color:#fff; }
.hp-dd-cart{ background:var(--dd-acc); color:var(--dd-on-acc); }
.hp-dd-btn:hover, .hp-dd-cart:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.hp-dd-btn:hover{ color:#fff; }
.hp-dd-cart:hover{ color:var(--dd-on-acc); }
.hp-dd-btn i{ font-size:.7rem; }

.hp-dd-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hp-dd-wish{
  appearance:none; cursor:pointer; display:grid; place-items:center;
  width:38px; height:38px; border-radius:50%; font-size:.86rem;
  border:1px solid var(--dd-line); background:transparent; color:var(--dd-mute);
  transition:color .18s ease, border-color .18s ease;
}
.hp-dd-wish:hover{ color:var(--dd-acc); border-color:var(--dd-acc); }

/* ---------- discount badges ---------- */
.hp-dd-pct{
  position:absolute; top:12px; right:12px; z-index:2;
  display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  background:var(--dd-acc); color:var(--dd-on-acc); line-height:1;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.hp-dd-pct b{ font-size:.95rem; font-weight:800; font-variant-numeric:tabular-nums; }
.hp-dd-pct span{ font-size:.52rem; letter-spacing:.08em; font-weight:700; }
.hp-dd-big{
  position:absolute; left:-14px; top:50%; transform:translateY(-50%); z-index:3;
  display:grid; place-items:center; width:104px; height:104px; border-radius:50%;
  background:var(--dd-acc); color:var(--dd-on-acc); line-height:1.05; text-align:center;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}
.hp-dd-big b{ font-size:1.6rem; font-weight:800; font-variant-numeric:tabular-nums; }
.hp-dd-big span{ font-size:.6rem; letter-spacing:.1em; font-weight:700; }

/* ---------- the photo ---------- */
.hp-dd-ph{
  display:block; position:relative; overflow:hidden;
  border-radius:var(--dd-r); aspect-ratio:1/1; height:var(--dd-h, auto); background:var(--dd-soft); min-width:0;
}
.hp-dd-ph img{ width:100%; height:100%; object-fit:var(--dd-fit,cover); display:block; }

/* ---------- countdown ---------- */
.hp-dd-timer{ margin:0 0 14px; }
.hp-dd-timer .cbcd-timer{ display:flex; gap:8px; flex-wrap:wrap; }
.hp-dd-cell{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  min-width:56px; padding:.5rem .6rem; border-radius:10px;
  background:color-mix(in srgb, var(--dd-acc) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--dd-acc) 26%, transparent);
}
.hp-dd-cell .cbcd-num{
  font-size:1.05rem; font-weight:800; line-height:1; color:var(--dd-acc);
  font-variant-numeric:tabular-nums;
}
.hp-dd-cell .cbcd-lbl{ font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dd-mute); }
.hp-dd-timer.is-stack .cbcd-timer{ flex-direction:column; }
.hp-dd-timer.is-stack .hp-dd-cell{ min-width:72px; }
.hp-dd-exp{ margin:0 0 14px; font-weight:700; color:var(--dd-acc); font-size:.9rem; }

/* ---------- stock bar ---------- */
/* The copy column is align-items:flex-start, so anything that must span it says so. */
.hp-dd-stock{ display:flex; flex-direction:column; gap:5px; margin:0 0 12px;
  align-self:stretch; width:100%; min-width:min(260px, 100%); }
.hp-dd-bar{ display:block; height:6px; border-radius:999px; background:var(--dd-soft); overflow:hidden; }
.hp-dd-bar i{ display:block; height:100%; border-radius:999px; background:var(--dd-acc); }
.hp-dd-stock-t{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:.72rem; color:var(--dd-mute);
}
.hp-dd-stock-t b{ color:var(--dd-ink); }
.hp-dd-stock-t span{ color:var(--dd-acc); font-weight:600; }

/* ==========================================================================
   Layout skeletons
   ========================================================================== */
/* 01 Classic · 04 Minimal · 14 Progress · 16 Modern — photo beside copy */
.hp-dd-row{
  display:grid; gap:clamp(16px, 3vw, 34px); align-items:center;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr);
  background:var(--dd-bg); border:1px solid var(--dd-line);
  border-radius:var(--dd-r); padding:clamp(14px, 2vw, 22px);
}
.hp-dd-row .hp-dd-media,
.hp-dd-split .hp-dd-media,
.hp-dd-vert .hp-dd-media{ position:relative; min-width:0; }
.hp-dd-copy{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; }

/* 03 Split · 12 Big badge · 13 Two column */
.hp-dd-split{
  display:grid; gap:clamp(18px, 3vw, 40px); align-items:center;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  background:var(--dd-bg); border:1px solid var(--dd-line);
  border-radius:var(--dd-r); padding:clamp(16px, 2.4vw, 28px);
}
.hp-dd-split.is-badge{ padding-left:clamp(34px, 4vw, 58px); }

/* 08 Featured with features — copy · photo · stacked timer */
.hp-dd-tri{
  display:grid; gap:clamp(16px, 2.4vw, 30px); align-items:center;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr) auto;
  background:var(--dd-bg); border:1px solid var(--dd-line);
  border-radius:var(--dd-r); padding:clamp(16px, 2.4vw, 26px);
}
.hp-dd-tri .hp-dd-timer{ margin:0; }

/* 07 Vertical card */
.hp-dd-vert{
  display:flex; flex-direction:column; gap:14px; max-width:420px;
  background:var(--dd-bg); border:1px solid var(--dd-line);
  border-radius:var(--dd-r); padding:16px;
}
.hp-dd-vert .hp-dd-ph{ aspect-ratio:4/3; }

/* 02 Banner · 05 Hero · 15 Dark */
.hp-dd-band{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; gap:clamp(16px, 3vw, 36px); align-items:center;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  border-radius:var(--dd-r); padding:clamp(18px, 3vw, 40px);
  background:var(--dd-bg);
}
.hp-dd-band .hp-dd-bg{
  position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center;
}
.hp-dd-band-copy{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.hp-dd-band-media{ position:relative; min-width:0; display:flex; flex-direction:column; gap:12px; }
.hp-dd-band-media .hp-dd-timer{ margin:0; }

/* 09 Countdown on image */
.hp-dd-onimg{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--dd-r); min-height:300px; display:grid; align-items:end;
  background:var(--dd-dark);
}
.hp-dd-onimg .hp-dd-bg{
  position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center;
}
.hp-dd-onimg::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(8,12,16,calc(.3 + var(--dd-scrim) * .62)) 0%,
             rgba(8,12,16,calc(var(--dd-scrim) * .72)) 48%, rgba(8,12,16,.2) 100%);
}
.hp-dd-onimg-in{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(14px, 3vw, 36px); flex-wrap:wrap;
  padding:clamp(18px, 3vw, 34px);
}
.hp-dd-onimg .hp-dd-pct{ top:14px; right:14px; }

/* 06 Slider · 10 Category · 11 List — the row grid */
.hp-dd-grid{
  display:grid; gap:var(--dd-gap);
  grid-template-columns:repeat(var(--dd-cols-d), minmax(0,1fr));
}
.hp-dd-c{
  display:flex; flex-direction:column; gap:8px; min-width:0;
  background:var(--dd-bg); border:1px solid var(--dd-line);
  border-radius:var(--dd-r); padding:12px; text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.hp-dd-c:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(14,20,24,.10); }
.hp-dd-rph{
  display:block; position:relative; overflow:hidden; min-width:0;
  border-radius:calc(var(--dd-r) - 4px); aspect-ratio:1/1; height:var(--dd-h, auto); background:var(--dd-soft);
}
.hp-dd-rph img{ width:100%; height:100%; object-fit:var(--dd-fit,cover); display:block; }
.hp-dd-rlink{ display:block; text-decoration:none; min-width:0; }
.hp-dd-rpct{
  position:absolute; top:8px; left:8px;
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--dd-acc); color:var(--dd-on-acc);
  font-size:.68rem; font-weight:800; font-variant-numeric:tabular-nums;
}
.hp-dd-rb{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.hp-dd-rt{ margin:0; font-size:.85rem; line-height:1.35; overflow-wrap:anywhere; }
.hp-dd-rcap{ font-size:.74rem; color:var(--dd-mute); }
.hp-dd-rprice{ display:flex; align-items:baseline; justify-content:center; gap:8px; flex-wrap:wrap; }
.hp-dd-rprice del{ color:var(--dd-mute); font-size:.76rem; }
.hp-dd-rprice b{ color:var(--dd-acc); font-size:.92rem; font-variant-numeric:tabular-nums; }
.hp-dd-rbtn{
  align-self:center; margin-top:2px; padding:.44rem 1rem; border-radius:999px;
  background:var(--dd-acc); color:var(--dd-on-acc); text-decoration:none;
  font-size:.75rem; font-weight:700;
}
.hp-dd-rbtn:hover{ color:var(--dd-on-acc); filter:brightness(1.08); }

/* ==========================================================================
   Per-design character
   ========================================================================== */

/* 01 Classic Card */
.hp-dd-v-classic .hp-dd-ph{ aspect-ratio:1/1; }

/* 02 Banner Style — soft tinted band, no photo frame */
.hp-dd-v-banner .hp-dd-band{
  background:color-mix(in srgb, var(--dd-acc) 8%, var(--dd-bg));
  border:1px solid color-mix(in srgb, var(--dd-acc) 18%, transparent);
}
.hp-dd-v-banner .hp-dd-ph{ background:transparent; aspect-ratio:4/3; }
.hp-dd-v-banner .hp-dd-t{ font-size:clamp(1.5rem, 1.1rem + 2vw, 2.6rem); }
.hp-dd-v-banner .hp-dd-band-media .hp-dd-timer{ align-self:flex-end; }

/* 03 Split Layout */
.hp-dd-v-split .hp-dd-t{ font-size:clamp(1.35rem, 1.05rem + 1.6vw, 2.1rem); color:var(--dd-ink); }
.hp-dd-v-split .hp-dd-eyebrow{ font-size:.84rem; letter-spacing:.02em; text-transform:none; font-weight:700; }
.hp-dd-v-split .hp-dd-media .hp-dd-timer{ margin-top:12px; }

/* 04 Minimal Style */
.hp-dd-v-minimal .hp-dd-row{ border:0; background:transparent; padding:0; }
.hp-dd-v-minimal .hp-dd-ph{ aspect-ratio:4/3; }

/* 05 Full Width Hero — dark, photographic */
.hp-dd-v-hero .hp-dd-band{ background:var(--dd-dark); color:#fff; min-height:300px; }
.hp-dd-v-hero .hp-dd-band::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(8,12,16,calc(.34 + var(--dd-scrim) * .6)) 0%,
             rgba(8,12,16,calc(var(--dd-scrim) * .7)) 50%, rgba(8,12,16,.18) 100%);
}
.hp-dd-v-hero .hp-dd-t{ color:#fff; font-size:clamp(1.6rem, 1.1rem + 2.4vw, 3rem); }
.hp-dd-v-hero .hp-dd-sub,
.hp-dd-v-hero .hp-dd-x{ color:rgba(255,255,255,.86); }
.hp-dd-v-hero .hp-dd-old{ color:rgba(255,255,255,.7); }
.hp-dd-v-hero .hp-dd-now{ color:#fff; }
.hp-dd-v-hero .hp-dd-btn{ background:var(--dd-acc); color:var(--dd-on-acc); }
.hp-dd-v-hero .hp-dd-btn:hover{ color:var(--dd-on-acc); }
.hp-dd-v-hero .hp-dd-ph{ background:transparent; aspect-ratio:4/3; }
.hp-dd-v-hero .hp-dd-cell{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.24); }
.hp-dd-v-hero .hp-dd-cell .cbcd-num{ color:#fff; }
.hp-dd-v-hero .hp-dd-cell .cbcd-lbl{ color:rgba(255,255,255,.78); }

/* 06 Product Slider */
.hp-dd-car{ position:relative; }
.hp-dd .hp-gal-track.is-grid{
  grid-auto-flow:column;
  --dd-slides: var(--dd-slides-d, 3);
  grid-auto-columns:calc((100% - (var(--dd-slides, 3) - 1) * var(--dd-gap)) / var(--dd-slides, 3));
  grid-template-rows:repeat(1, auto);
  gap:var(--dd-gap); padding:10px 2px;
}
.hp-dd-track{ overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; }
.hp-dd .hp-gal-cell{ display:flex; flex-direction:column; align-items:stretch; }
.hp-dd .hp-gal-cell > *{ flex:1 1 auto; min-width:0; }
.hp-dd-track::-webkit-scrollbar{ display:none; }
.hp-dd-cell{ scroll-snap-align:start; min-width:0; }
.hp-dd-car .hp-gal-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:.76rem;
  border:1px solid var(--dd-line); background:var(--dd-bg); color:var(--dd-ink);
  box-shadow:0 6px 18px rgba(14,20,24,.12);
  opacity:0; transition:opacity .2s ease, background .2s ease, color .2s ease;
}
.hp-dd-car:hover .hp-gal-nav,
.hp-dd-car:focus-within .hp-gal-nav{ opacity:1; }
.hp-dd-car .hp-gal-nav:hover{ background:var(--dd-acc); color:var(--dd-on-acc); border-color:var(--dd-acc); }
.hp-dd-car .hp-gal-nav.is-prev{ left:6px; }
.hp-dd-car .hp-gal-nav.is-next{ right:6px; }
.hp-dd-dots{ display:flex; gap:6px; justify-content:center; margin-top:12px; }
.hp-dd-dots .hp-gal-dot{
  appearance:none; cursor:pointer; width:7px; height:7px; padding:0; border:0;
  border-radius:50%; background:var(--dd-line); transition:background .2s ease, width .2s ease;
}
.hp-dd-dots .hp-gal-dot.is-on{ background:var(--dd-acc); width:18px; border-radius:999px; }

/* 07 Vertical Card */
.hp-dd-v-vertical .hp-dd-media{ position:relative; }
.hp-dd-v-vertical .hp-dd-badge{ position:absolute; top:10px; left:10px; z-index:2; margin:0; }
.hp-dd-v-vertical .hp-dd-copy{ align-items:stretch; text-align:left; }
.hp-dd-v-vertical .hp-dd-cart{ align-self:stretch; }

/* 08 Featured with Features */
.hp-dd-v-features .hp-dd-ph{ aspect-ratio:1/1; background:transparent; }

/* 09 Countdown on Image */
.hp-dd-v-onimage .hp-dd-t{ color:#fff; font-size:clamp(1.4rem, 1.05rem + 2vw, 2.4rem); }
.hp-dd-v-onimage .hp-dd-eyebrow{ color:#fff; }
.hp-dd-v-onimage .hp-dd-sub{ color:rgba(255,255,255,.84); }
.hp-dd-v-onimage .hp-dd-now{ color:#fff; }
.hp-dd-v-onimage .hp-dd-old{ color:rgba(255,255,255,.68); }
.hp-dd-v-onimage .hp-dd-btn{ background:#fff; color:var(--dd-dark); }
.hp-dd-v-onimage .hp-dd-btn:hover{ color:var(--dd-dark); }
.hp-dd-v-onimage .hp-dd-timer{ margin:0; }
.hp-dd-v-onimage .hp-dd-cell{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.26); }
.hp-dd-v-onimage .hp-dd-cell .cbcd-num{ color:#fff; }
.hp-dd-v-onimage .hp-dd-cell .cbcd-lbl{ color:rgba(255,255,255,.8); }

/* 10 Category Style — circular tiles */
.hp-dd-v-category .hp-dd-c{ border:0; background:transparent; padding:6px; }
.hp-dd-v-category .hp-dd-c:hover{ transform:none; box-shadow:none; }
.hp-dd-v-category .hp-dd-rph{
  border-radius:50%; width:min(140px, 100%); margin:0 auto;
  outline:3px solid transparent; outline-offset:4px; transition:outline-color .2s ease;
}
.hp-dd-v-category .hp-dd-c:hover .hp-dd-rph{ outline-color:color-mix(in srgb, var(--dd-acc) 42%, transparent); }
.hp-dd-v-category .hp-dd-rcap{ color:var(--dd-acc); font-weight:600; }
.hp-dd-v-category .hp-dd-rt{ font-size:.92rem; }

/* 11 List Style — one column of rows */
.hp-dd-v-list{ --dd-cols-d:1; }
.hp-dd-v-list .hp-dd-grid{ grid-template-columns:minmax(0,1fr); gap:10px; }
.hp-dd-v-list .hp-dd-c{
  display:grid; grid-template-columns:72px minmax(0,1fr) minmax(0, 1.1fr);
  gap:14px; align-items:center; text-align:left; padding:10px 12px;
}
.hp-dd-v-list .hp-dd-c:hover{ transform:none; }
.hp-dd-v-list .hp-dd-rph{ width:72px; aspect-ratio:1/1; }
.hp-dd-v-list .hp-dd-rpct{ width:30px; height:30px; font-size:.6rem; top:4px; left:4px; }
.hp-dd-v-list .hp-dd-rprice{ justify-content:flex-start; }
.hp-dd-v-list .hp-dd-stock{ margin:0; grid-column:3; }
.hp-dd-v-list .hp-dd-rb{ grid-column:2; }

/* 12 Big Discount Badge */
.hp-dd-v-bigbadge .hp-dd-ph{ aspect-ratio:4/3; }

/* 13 Two Column */
.hp-dd-v-twocol .hp-dd-ph{ aspect-ratio:4/3; }

/* 14 Card with Progress */
.hp-dd-v-progress .hp-dd-ph{ aspect-ratio:1/1; }

/* 15 Dark Theme */
.hp-dd-v-dark .hp-dd-band{ background:var(--dd-dark); color:#fff; border:0; }
.hp-dd-v-dark .hp-dd-t{ color:#fff; font-size:clamp(1.4rem, 1.05rem + 2vw, 2.4rem); }
.hp-dd-v-dark .hp-dd-sub,
.hp-dd-v-dark .hp-dd-x{ color:rgba(255,255,255,.84); }
.hp-dd-v-dark .hp-dd-now{ color:#fff; }
.hp-dd-v-dark .hp-dd-old{ color:rgba(255,255,255,.66); }
.hp-dd-v-dark .hp-dd-btn{ background:#fff; color:var(--dd-dark); }
.hp-dd-v-dark .hp-dd-btn:hover{ color:var(--dd-dark); }
.hp-dd-v-dark .hp-dd-ph{ background:transparent; aspect-ratio:4/3; }
.hp-dd-v-dark .hp-dd-cell{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.24); }
.hp-dd-v-dark .hp-dd-cell .cbcd-num{ color:#fff; }
.hp-dd-v-dark .hp-dd-cell .cbcd-lbl{ color:rgba(255,255,255,.78); }

/* 16 Modern Minimal */
.hp-dd-v-modern .hp-dd-row{ border-radius:var(--dd-r); }
.hp-dd-v-modern .hp-dd-ph{ aspect-ratio:1/1; }
.hp-dd-v-modern .hp-dd-eyebrow{ text-transform:none; letter-spacing:.01em; color:var(--dd-mute); font-size:.76rem; }


/* ---------- dark designs: light-on-dark chrome ----------
   The eyebrow, discount disc and primary button all take their colour from the accent,
   which on a dark palette lands dark-on-dark. On the three photographic/dark designs they
   switch to a light treatment instead of relying on the accent carrying itself. */
.hp-dd-v-hero .hp-dd-eyebrow,
.hp-dd-v-dark .hp-dd-eyebrow,
.hp-dd-v-onimage .hp-dd-eyebrow{ color:#fff; }
.hp-dd-v-hero .hp-dd-pct,
.hp-dd-v-dark .hp-dd-pct,
.hp-dd-v-onimage .hp-dd-pct{ background:#fff; color:var(--dd-dark); }
.hp-dd-v-hero .hp-dd-badge,
.hp-dd-v-dark .hp-dd-badge,
.hp-dd-v-onimage .hp-dd-badge{ background:rgba(255,255,255,.16); color:#fff; }
.hp-dd-v-hero .hp-dd-btn{ background:#fff; color:var(--dd-dark); }
.hp-dd-v-hero .hp-dd-btn:hover{ color:var(--dd-dark); }
.hp-dd-v-hero .hp-dd-stars,
.hp-dd-v-dark .hp-dd-stars,
.hp-dd-v-onimage .hp-dd-stars{ color:#f7c948; }

/* ==========================================================================
   Breakpoints — the ladder relaxes --dd-cols-*, never grid-template-columns,
   which the block publishes as an #id rule.
   ========================================================================== */
@media (max-width: 1024px){
  .hp-dd-grid{ grid-template-columns:repeat(var(--dd-cols-3), minmax(0,1fr)); }
  .hp-dd-v-list .hp-dd-grid{ grid-template-columns:minmax(0,1fr); }
  .hp-dd-tri{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .hp-dd-tri .hp-dd-timer.is-stack{ grid-column:1 / -1; }
  .hp-dd-tri .hp-dd-timer.is-stack .cbcd-timer{ flex-direction:row; }
}
@media (max-width: 860px){
  .hp-dd-row,
  .hp-dd-split,
  .hp-dd-band{ grid-template-columns:minmax(0,1fr); }
  .hp-dd-split.is-badge{ padding-left:clamp(16px, 2.4vw, 28px); }
  .hp-dd-big{ left:8px; top:8px; transform:none; width:82px; height:82px; }
  .hp-dd-big b{ font-size:1.25rem; }
  .hp-dd .hp-gal-track.is-grid{ --dd-slides:var(--dd-slides-2, 2); }
}
@media (max-width: 640px){
  .hp-dd-grid{ grid-template-columns:repeat(var(--dd-cols-2), minmax(0,1fr)); }
  .hp-dd-v-list .hp-dd-grid{ grid-template-columns:minmax(0,1fr); }
  .hp-dd-v-list .hp-dd-c{ grid-template-columns:58px minmax(0,1fr); }
  .hp-dd-v-list .hp-dd-stock{ grid-column:1 / -1; }
  .hp-dd-v-list .hp-dd-rb{ grid-column:2; }
  .hp-dd-v-list .hp-dd-rph{ width:58px; }
  .hp-dd-onimg-in{ flex-direction:column; align-items:flex-start; }
  .hp-dd-tri{ grid-template-columns:minmax(0,1fr); }
  .hp-dd-head{ align-items:center; }
}
@media (max-width: 560px){
  .hp-dd-grid{ grid-template-columns:minmax(0,1fr); }
  .hp-dd .hp-gal-track.is-grid{ --dd-slides:var(--dd-slides-1, 1); }
  .hp-dd-car .hp-gal-nav{ opacity:1; }
  .hp-dd-timer .cbcd-timer{ gap:6px; }
  .hp-dd-cell{ min-width:48px; padding:.42rem .5rem; }
  .hp-dd-vert{ max-width:none; }
}

@media (prefers-reduced-motion: reduce){
  .hp-dd-c, .hp-dd-btn, .hp-dd-cart, .hp-dd-rph{ transition:none !important; }
  .hp-dd-c:hover{ transform:none; }
}

/* ==========================================================================
   SHOP THE LOOK — 12 designs
   .hp-stl-v-<style>.  The root also carries .hp-gal so the shared handler
   drives the Carousel design and the Before/After compare slider.
   ========================================================================== */

.hp-stl{
  --stl-acc:  var(--color-accent, var(--accent, #0fb39a));
  --stl-on-acc:#fff;
  --stl-bg:   transparent;
  --stl-ink:  var(--text-primary, var(--color-text, #1c2b28));
  --stl-mute: var(--text-muted, var(--color-text-muted, #6b7d78));
  --stl-card: var(--surface-1, var(--color-card, #fff));
  --stl-line: var(--border-subtle, var(--color-border, rgba(20,32,29,.10)));
  --stl-soft: var(--surface-2, rgba(20,32,29,.04));
  --stl-dark: #0e1a17;
  --stl-r:    18px;
  --stl-gap:  14px;
  --stl-ar:   3/4;
  --stl-scrim:.46;
  --stl-cols-d:2; --stl-cols-2:2;

  --gl-r:var(--stl-r); --gl-gap:var(--stl-gap); --gl-acc:var(--stl-acc);
  --gl-on-acc:var(--stl-on-acc); --gl-card:var(--stl-card); --gl-line:var(--stl-line);
  --gl-ink:var(--stl-ink); --gl-soft:var(--stl-soft); --gl-dark:var(--stl-dark);
  --gl-ar:var(--stl-ar);

  color:var(--stl-ink); background:var(--stl-bg);
}

/* ---------- head ---------- */
.hp-stl-head{ margin:0 0 14px; }
.hp-stl-eyebrow{
  display:inline-block; margin:0 0 6px; font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--stl-acc);
}
.hp-stl-title{
  margin:0 0 6px; font-family:var(--font-display, inherit);
  font-size:clamp(1.3rem, 1.05rem + 1.3vw, 2rem); line-height:1.18; text-wrap:balance;
}
.hp-stl-sub{ margin:0; color:var(--stl-mute); font-size:.88rem; line-height:1.6; }

.hp-stl-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:14px; padding:.68rem 1.3rem; border-radius:999px;
  background:var(--stl-dark); color:#fff; text-decoration:none;
  font-size:.82rem; font-weight:700; border:1px solid transparent;
  transition:filter .18s ease, transform .18s ease;
}
.hp-stl-btn:hover{ filter:brightness(1.15); transform:translateY(-1px); color:#fff; }
.hp-stl-btn i{ font-size:.68rem; }

.hp-stl-cap{ display:flex; flex-direction:column; gap:3px; }
.hp-stl-cap strong{ font-family:var(--font-display, inherit); font-size:1rem; }
.hp-stl-cap span{ color:var(--stl-mute); font-size:.78rem; }
.hp-stl-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-top:14px;
}
.hp-stl-foot .hp-stl-btn{ margin-top:0; }

/* ---------- the look photo ---------- */
.hp-stl-stage{
  position:relative; overflow:hidden; border-radius:var(--stl-r);
  background:var(--stl-soft); min-width:0;
}
.hp-stl-look{
  display:block; width:100%; height:var(--stl-h, 100%);
  aspect-ratio:var(--stl-ar); object-fit:var(--stl-fit,cover);
}

/* hotspots */
.hp-stl-dot{
  position:absolute; transform:translate(-50%,-50%); z-index:3;
  appearance:none; cursor:pointer; display:grid; place-items:center;
  width:28px; height:28px; border-radius:50%; padding:0;
  background:#fff; color:var(--stl-dark); border:0; font-size:.68rem; font-weight:800;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.hp-stl-dot::before{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); opacity:0; transition:opacity .18s ease;
}
.hp-stl-dot:hover,
.hp-stl-dot:focus-visible{ background:var(--stl-acc); color:var(--stl-on-acc); transform:translate(-50%,-50%) scale(1.1); }
.hp-stl-dot:hover::before,
.hp-stl-dot:focus-visible::before{ opacity:1; }
.hp-stl-dot.is-num{ background:var(--stl-dark); color:#fff; }

/* the label that appears on a hotspot */
.hp-stl-tip{
  position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%);
  display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  white-space:nowrap; padding:.4rem .6rem; border-radius:8px;
  background:rgba(14,26,23,.92); color:#fff; font-size:.7rem; font-weight:600;
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.hp-stl-tip b{ color:#fff; font-weight:800; }
.hp-stl-dot:hover .hp-stl-tip,
.hp-stl-dot:focus-visible .hp-stl-tip{ opacity:1; }

/* copy sitting on the photo */
.hp-stl-onphoto{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(14px, 2.4vw, 26px);
  display:flex; flex-direction:column; align-items:flex-start;
  background:linear-gradient(to top, rgba(10,18,16,calc(.5 + var(--stl-scrim) * .45)) 0%,
             rgba(10,18,16,calc(var(--stl-scrim) * .5)) 45%, transparent 100%);
}
.hp-stl-onphoto .hp-stl-head{ margin-bottom:0; }
.hp-stl-onphoto .hp-stl-title{ color:#fff; }
.hp-stl-onphoto .hp-stl-sub{ color:rgba(255,255,255,.85); }
.hp-stl-onphoto .hp-stl-eyebrow{ color:#fff; }
.hp-stl-onphoto .hp-stl-btn{ background:#fff; color:var(--stl-dark); }
.hp-stl-onphoto .hp-stl-btn:hover{ color:var(--stl-dark); }

/* ---------- product rows and tiles ---------- */
.hp-stl-grid{
  display:grid; gap:var(--stl-gap);
  grid-template-columns:repeat(var(--stl-cols-d), minmax(0,1fr));
}
.hp-stl-grid.is-rail{ grid-template-columns:minmax(0,1fr); }

.hp-stl-i{
  display:flex; align-items:center; gap:12px; min-width:0;
  padding:8px; border-radius:calc(var(--stl-r) - 4px);
  background:var(--stl-card); border:1px solid var(--stl-line);
  text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hp-stl-i:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(14,26,23,.10); border-color:var(--stl-acc); }
.hp-stl-th{
  position:relative; flex:0 0 auto; width:52px; height:52px; min-width:0;
  border-radius:10px; overflow:hidden; background:var(--stl-soft);
}
.hp-stl-th img{ width:100%; height:100%; object-fit:var(--stl-fit,cover); display:block; }
.hp-stl-n{
  position:absolute; top:-6px; left:-6px; display:grid; place-items:center;
  width:20px; height:20px; border-radius:50%;
  background:var(--stl-dark); color:#fff; font-size:.62rem; font-weight:800;
}
.hp-stl-b{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.hp-stl-nm{ font-size:.82rem; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.hp-stl-pr{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.hp-stl-pr del{ color:var(--stl-mute); font-size:.7rem; }
.hp-stl-pr b{ color:var(--stl-acc); font-size:.8rem; font-variant-numeric:tabular-nums; }

.hp-stl-tile{
  display:flex; flex-direction:column; gap:6px; min-width:0;
  text-decoration:none; color:inherit;
}
.hp-stl-tph{
  display:block; position:relative; overflow:hidden; min-width:0;
  border-radius:calc(var(--stl-r) - 4px); aspect-ratio:1/1; background:var(--stl-soft);
  transition:transform .2s ease;
}
.hp-stl-tph img{ width:100%; height:100%; object-fit:var(--stl-fit,cover); display:block; }
.hp-stl-tile:hover .hp-stl-tph{ transform:translateY(-3px); }
.hp-stl-tile .hp-stl-b{ text-align:center; align-items:center; }
.hp-stl-tile .hp-stl-pr{ justify-content:center; }

/* ---------- layout skeletons ---------- */
.hp-stl-split{
  display:grid; gap:clamp(16px, 2.6vw, 32px); align-items:center;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
}
.hp-stl-split.is-copy-left{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); }
.hp-stl-three{
  display:grid; gap:clamp(16px, 2.6vw, 30px); align-items:center;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .7fr);
}
.hp-stl-copy{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.hp-stl-rail{ min-width:0; display:flex; flex-direction:column; gap:12px; justify-content:center; }

/* ==========================================================================
   Per-design character
   ========================================================================== */

/* 01 Classic Overlay */
.hp-stl-v-overlay{ --stl-cols-d:1; }
.hp-stl-v-overlay .hp-stl-onphoto .hp-stl-title{ font-size:clamp(1.4rem, 1.05rem + 1.8vw, 2.2rem); }

/* 02 Minimal Hotspots — photo only.
   The photo-only designs have no second column to share the row with, so at desktop width a
   portrait ratio makes the stage taller than the viewport. Centre them in a sane measure
   instead of letting the container decide. */
.hp-stl-v-hotspots .hp-stl-stage,
.hp-stl-v-pills .hp-stl-stage,
.hp-stl-v-hover .hp-stl-stage{ max-width:min(100%, 860px); margin-inline:auto; }
.hp-stl-v-scene .hp-stl-stage{ max-width:100%; }

/* 03 Product Pills */
.hp-stl-pills{
  position:absolute; right:clamp(10px, 2vw, 20px); top:50%; transform:translateY(-50%); z-index:3;
  display:flex; flex-direction:column; gap:10px;
  width:min(58%, 250px); max-height:82%; overflow:auto; scrollbar-width:none;
}
.hp-stl-pills::-webkit-scrollbar{ display:none; }
.hp-stl-i.is-pill{
  border-radius:999px; padding:6px 14px 6px 6px;
  background:rgba(255,255,255,.94); border-color:transparent;
  box-shadow:0 8px 22px rgba(10,18,16,.18);
}
.hp-stl-i.is-pill .hp-stl-th{ width:42px; height:42px; border-radius:50%; }
.hp-stl-i.is-pill .hp-stl-nm{ font-size:.76rem; }

/* 04 Numbered Hotspots */
.hp-stl-v-numbered{ --stl-cols-d:1; }

/* 05 Horizontal Product Strip */
.hp-stl-grid.is-strip{ margin-top:clamp(14px, 2vw, 22px); }
.hp-stl-v-strip .hp-stl-title{ font-size:clamp(1.5rem, 1.1rem + 2vw, 2.6rem); }

/* 06 Collage Style */
.hp-stl-v-collage .hp-stl-grid{ align-content:center; }
.hp-stl-v-collage .hp-stl-tph{ aspect-ratio:1/1; }

/* 07 Split Image + Products */
.hp-stl-v-split .hp-stl-stage{ background:var(--stl-dark); }
.hp-stl-v-split .hp-stl-tile{
  padding:8px; border-radius:calc(var(--stl-r) - 4px);
  background:var(--stl-card); border:1px solid var(--stl-line);
}

/* 08 Interactive Image (hover) */
.hp-stl-hovercard{
  position:absolute; right:clamp(10px, 2vw, 22px); top:50%; transform:translateY(-50%); z-index:4;
  display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center;
  width:min(46%, 200px); padding:12px; border-radius:var(--stl-r);
  background:rgba(255,255,255,.96); box-shadow:0 14px 34px rgba(10,18,16,.2);
}
.hp-stl-hovercard .hp-stl-tph{ width:100%; aspect-ratio:1/1; }
.hp-stl-add{
  display:block; width:100%; padding:.48rem .8rem; border-radius:999px;
  background:var(--stl-acc); color:var(--stl-on-acc); text-decoration:none;
  font-size:.74rem; font-weight:700;
}
.hp-stl-add:hover{ color:var(--stl-on-acc); filter:brightness(1.08); }

/* 09 Before / After */
.hp-stl-cmp{ min-width:0; }
.hp-stl-v-beforeafter .hp-stl-grid{ --stl-cols-d:3; grid-template-columns:repeat(3, minmax(0,1fr)); }
.hp-stl-v-beforeafter .hp-stl-title{ font-size:clamp(1.35rem, 1.05rem + 1.6vw, 2.1rem); }

/* 10 Lookbook Style */
.hp-stl-v-lookbook .hp-stl-grid.is-rail{ gap:10px; }
.hp-stl-v-lookbook .hp-stl-tph{ aspect-ratio:4/3; }
.hp-stl-v-lookbook .hp-stl-title{ font-size:clamp(1.5rem, 1.1rem + 2vw, 2.6rem); }

/* 11 Carousel Style */
.hp-stl-car{ position:relative; }
.hp-stl .hp-gal-track.is-grid{
  grid-auto-flow:column;
  --stl-slides: var(--stl-slides-d, 3);
  grid-auto-columns:calc((100% - (var(--stl-slides, 3) - 1) * var(--stl-gap)) / var(--stl-slides, 3));
  grid-template-rows:repeat(1, auto);
  gap:var(--stl-gap); padding:8px 2px;
}
.hp-stl-track{ overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; }
.hp-stl-track::-webkit-scrollbar{ display:none; }
.hp-stl .hp-gal-cell{ display:flex; flex-direction:column; align-items:stretch; }
.hp-stl .hp-gal-cell > *{ flex:1 1 auto; min-width:0; }
.hp-stl-cell{ scroll-snap-align:start; min-width:0; }
.hp-stl-slide{
  display:block; overflow:hidden; border-radius:var(--stl-r);
  background:var(--stl-soft); text-decoration:none;
}
.hp-stl-slide img{ width:100%; height:var(--stl-h, 100%); aspect-ratio:var(--stl-ar); object-fit:var(--stl-fit,cover); display:block; }
.hp-stl-v-carousel .hp-stl-cell:nth-child(3n+2) .hp-stl-slide{ transform:scale(1.03); }
.hp-stl-car .hp-gal-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:.76rem;
  border:1px solid var(--stl-line); background:var(--stl-card); color:var(--stl-ink);
  box-shadow:0 6px 18px rgba(14,26,23,.12);
  opacity:0; transition:opacity .2s ease, background .2s ease, color .2s ease;
}
.hp-stl-car:hover .hp-gal-nav,
.hp-stl-car:focus-within .hp-gal-nav{ opacity:1; }
.hp-stl-car .hp-gal-nav:hover{ background:var(--stl-acc); color:var(--stl-on-acc); border-color:var(--stl-acc); }
.hp-stl-car .hp-gal-nav.is-prev{ left:6px; }
.hp-stl-car .hp-gal-nav.is-next{ right:6px; }
.hp-stl-v-carousel .hp-stl-grid{ margin-top:14px; }
.hp-stl-v-carousel .hp-stl-cap{ align-items:center; text-align:center; margin-top:10px; }
.hp-stl-dots{ display:flex; gap:6px; justify-content:center; margin-top:10px; }
.hp-stl-dots .hp-gal-dot{
  appearance:none; cursor:pointer; width:7px; height:7px; padding:0; border:0;
  border-radius:50%; background:var(--stl-line); transition:background .2s ease, width .2s ease;
}
.hp-stl-dots .hp-gal-dot.is-on{ background:var(--stl-acc); width:18px; border-radius:999px; }

/* 12 Lifestyle Scene */
.hp-stl-v-scene{ --stl-cols-d:1; }
.hp-stl-v-scene .hp-stl-look{ aspect-ratio:4/3; }

/* ==========================================================================
   Breakpoints — the ladder relaxes --stl-cols-*, never grid-template-columns,
   which the block publishes as an #id rule.
   ========================================================================== */
@media (max-width: 1024px){
  .hp-stl-three{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr); }
  .hp-stl-three .hp-stl-grid.is-rail{ grid-column:1 / -1; grid-template-columns:repeat(4, minmax(0,1fr)); }
  .hp-stl .hp-gal-track.is-grid{ --stl-slides:var(--stl-slides-2, 2); }
}
@media (max-width: 860px){
  .hp-stl-split,
  .hp-stl-split.is-copy-left,
  .hp-stl-three{ grid-template-columns:minmax(0,1fr); }
  .hp-stl-three .hp-stl-grid.is-rail{ grid-column:auto; grid-template-columns:repeat(4, minmax(0,1fr)); }
  .hp-stl-copy{ align-items:center; text-align:center; }
  .hp-stl-copy .hp-stl-head{ text-align:center; }
  .hp-stl-pills{
    position:static; transform:none; width:auto; max-height:none;
    flex-direction:row; flex-wrap:wrap; justify-content:center; margin-top:10px;
  }
  .hp-stl-v-pills .hp-stl-stage{ overflow:visible; }
  .hp-stl-hovercard{ position:static; transform:none; width:auto; max-width:220px; margin:12px auto 0; }
  .hp-stl-v-hover .hp-stl-stage{ display:flex; flex-direction:column; }
}
@media (max-width: 640px){
  .hp-stl-grid{ grid-template-columns:repeat(var(--stl-cols-2), minmax(0,1fr)); }
  .hp-stl-grid.is-rail{ grid-template-columns:minmax(0,1fr); }
  .hp-stl-v-beforeafter .hp-stl-grid,
  .hp-stl-three .hp-stl-grid.is-rail{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .hp-stl-foot{ justify-content:center; text-align:center; }
  .hp-stl-cap{ align-items:center; }
  .hp-stl-onphoto{ padding:14px; }
  .hp-stl .hp-gal-track.is-grid{ --stl-slides:var(--stl-slides-1, 1); }
  .hp-stl-car .hp-gal-nav{ opacity:1; }
  /* A tooltip pinned to a dot near the edge is the one thing that can push the stage
     sideways; the stage clips, but hide them on touch widths anyway. */
  .hp-stl-tip{ display:none; }
}
@media (max-width: 480px){
  .hp-stl-grid{ grid-template-columns:minmax(0,1fr); }
  .hp-stl-v-beforeafter .hp-stl-grid,
  .hp-stl-three .hp-stl-grid.is-rail{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hp-stl-dot{ width:24px; height:24px; font-size:.62rem; }
}

@media (prefers-reduced-motion: reduce){
  .hp-stl-i, .hp-stl-tph, .hp-stl-dot, .hp-stl-btn{ transition:none !important; }
  .hp-stl-i:hover, .hp-stl-tile:hover .hp-stl-tph{ transform:none; }
}

/* ==========================================================================
   LOGOS / BRANDS STRIP — 10 designs
   .hp-lg-v-<style>, with .is-gray and .is-ruled as orthogonal modifiers.
   ========================================================================== */

.hp-lg{
  --lg-acc:  var(--color-accent, var(--accent, #0fb39a));
  --lg-ink:  var(--text-primary, var(--color-text, #1c2b28));
  --lg-mute: var(--text-muted, var(--color-text-muted, #6b7d78));
  --lg-card: var(--surface-1, var(--color-card, #fff));
  --lg-line: var(--border-subtle, var(--color-border, rgba(20,32,29,.10)));
  --lg-soft: var(--surface-2, rgba(20,32,29,.04));
  --lg-dark: #16211f;
  --lg-band: transparent;
  --lg-g1:   #e8f0ff;
  --lg-g2:   #ffeaf4;
  --lg-r:    14px;
  --lg-gap:  16px;
  --lg-h:    38px;
  --lg-cols-d:6; --lg-cols-4:4; --lg-cols-3:3; --lg-cols-2:2;

  color:var(--lg-ink);
}

.hp-lg-head{ text-align:center; margin:0 0 16px; }
.hp-lg-title{
  margin:0 0 4px; font-family:var(--font-display, inherit);
  font-size:clamp(1.05rem, .95rem + .7vw, 1.45rem); line-height:1.25; text-wrap:balance;
}
.hp-lg-sub{ margin:0; color:var(--lg-mute); font-size:.84rem; }

.hp-lg-band{
  background:var(--lg-band); border-radius:var(--lg-r);
  padding:clamp(12px, 1.8vw, 22px) clamp(10px, 1.6vw, 20px);
}

.hp-lg-grid{
  display:grid; gap:var(--lg-gap); align-items:center;
  grid-template-columns:repeat(var(--lg-cols-d), minmax(0,1fr));
}

.hp-lg-i{
  display:grid; place-items:center; min-width:0; padding:8px 10px;
  text-decoration:none; color:inherit;
  transition:transform .2s ease, filter .25s ease, opacity .25s ease;
}
.hp-lg-i img{
  display:block; max-width:100%; width:auto; height:var(--lg-h);
  object-fit:contain;
  transition:filter .25s ease, opacity .25s ease;
}
/* A logo with no image still holds its cell rather than collapsing the row. */
.hp-lg-txt{
  font-family:var(--font-display, inherit); font-size:.92rem; font-weight:700;
  letter-spacing:.02em; color:var(--lg-mute); text-align:center; overflow-wrap:anywhere;
}
a.hp-lg-i:hover{ transform:translateY(-2px); }

/* greyscale is a modifier, not a design */
.hp-lg.is-gray .hp-lg-i img{ filter:grayscale(1); opacity:.62; }
.hp-lg.is-gray a.hp-lg-i:hover img{ filter:none; opacity:1; }

/* hairline rules between logos, never after the last one in a row */
.hp-lg.is-ruled .hp-lg-i{ position:relative; }
.hp-lg.is-ruled .hp-lg-i::after{
  content:''; position:absolute; right:calc(var(--lg-gap) / -2); top:18%; bottom:18%;
  width:1px; background:var(--lg-line);
}
.hp-lg.is-ruled .hp-lg-i:last-child::after{ display:none; }
.hp-lg-c3.is-ruled .hp-lg-i:nth-child(3n)::after{ display:none; }
.hp-lg-c4.is-ruled .hp-lg-i:nth-child(4n)::after{ display:none; }
.hp-lg-c5.is-ruled .hp-lg-i:nth-child(5n)::after{ display:none; }
.hp-lg-c6.is-ruled .hp-lg-i:nth-child(6n)::after{ display:none; }
.hp-lg-c7.is-ruled .hp-lg-i:nth-child(7n)::after{ display:none; }
.hp-lg-c8.is-ruled .hp-lg-i:nth-child(8n)::after{ display:none; }

/* ==========================================================================
   Per-design character
   ========================================================================== */

/* 01 Minimal Clean — a plain ruled row */
.hp-lg-v-minimal .hp-lg-band{ padding-inline:0; }

/* 02 Light Background */
.hp-lg-v-light .hp-lg-band{ background:var(--lg-soft); }

/* 03 Bordered Style */
.hp-lg-v-bordered .hp-lg-i{
  border:1px solid var(--lg-line); border-radius:calc(var(--lg-r) - 4px);
  background:var(--lg-card); padding:14px 12px;
}
.hp-lg-v-bordered a.hp-lg-i:hover{ border-color:var(--lg-acc); }

/* 04 Monochrome — grey by default and it stays grey on hover */
.hp-lg-v-mono .hp-lg-i img{ filter:grayscale(1); opacity:.5; }
.hp-lg-v-mono a.hp-lg-i:hover img{ filter:grayscale(1); opacity:.82; }

/* 05 Dark Background — logos knocked out white */
.hp-lg-v-dark .hp-lg-band{ background:var(--lg-dark); }
.hp-lg-v-dark .hp-lg-i img{ filter:brightness(0) invert(1); opacity:.9; }
.hp-lg-v-dark a.hp-lg-i:hover img{ filter:brightness(0) invert(1); opacity:1; }
.hp-lg-v-dark .hp-lg-txt{ color:rgba(255,255,255,.84); }
.hp-lg-v-dark.is-ruled .hp-lg-i::after{ background:rgba(255,255,255,.18); }

/* 06 Card Style — each logo in its own soft card */
.hp-lg-v-card .hp-lg-i{
  background:var(--lg-card); border:1px solid var(--lg-line);
  border-radius:calc(var(--lg-r) - 2px); padding:16px 12px;
  box-shadow:0 6px 18px rgba(16,26,24,.05);
}
.hp-lg-v-card a.hp-lg-i:hover{ box-shadow:0 14px 30px rgba(16,26,24,.12); }

/* 07 With Title — heading beside the logos */
.hp-lg-v-titled .hp-lg-band{
  display:grid; gap:clamp(14px, 2.4vw, 30px); align-items:center;
  grid-template-columns:minmax(0, 200px) minmax(0, 1fr);
}
.hp-lg-v-titled .hp-lg-side{ min-width:0; }
.hp-lg-v-titled .hp-lg-head{ text-align:left; margin:0; }
.hp-lg-v-titled .hp-lg-title{ font-size:clamp(1.1rem, .95rem + .8vw, 1.5rem); }
.hp-lg-v-titled.is-ruled .hp-lg-side{ position:relative; }
.hp-lg-v-titled.is-ruled .hp-lg-side::after{
  content:''; position:absolute; right:calc(clamp(14px, 2.4vw, 30px) / -2); top:10%; bottom:10%;
  width:1px; background:var(--lg-line);
}

/* 08 Gradient Background */
.hp-lg-v-gradient .hp-lg-band{
  background:linear-gradient(100deg, var(--lg-g1) 0%, var(--lg-g2) 100%);
}

/* 09 Circular Style */
.hp-lg-v-circle .hp-lg-i{
  width:min(92px, 100%); aspect-ratio:1/1; margin:0 auto; padding:14px;
  border-radius:50%; background:var(--lg-soft);
  transition:background .2s ease, transform .2s ease;
}
.hp-lg-v-circle .hp-lg-i img{ height:auto; max-height:calc(var(--lg-h) - 4px); }
.hp-lg-v-circle a.hp-lg-i:hover{ background:color-mix(in srgb, var(--lg-acc) 16%, var(--lg-soft)); }

/* 10 Outline Minimal — ruled, muted, nothing else */
.hp-lg-v-outline .hp-lg-band{ padding-inline:0; }
.hp-lg-v-outline .hp-lg-i img{ opacity:.55; }
.hp-lg-v-outline a.hp-lg-i:hover img{ opacity:1; }

/* ==========================================================================
   Breakpoints — the ladder relaxes --lg-cols-*, never grid-template-columns,
   which the block publishes as an #id rule.
   ========================================================================== */
@media (max-width: 1024px){
  .hp-lg-grid{ grid-template-columns:repeat(var(--lg-cols-4), minmax(0,1fr)); }
  /* The nth-child rule counts the desktop column span, so once the row rewraps the rules
     no longer line up with the row ends — drop them rather than show a stray one. */
  .hp-lg.is-ruled .hp-lg-i::after{ display:none; }
}
@media (max-width: 860px){
  .hp-lg-v-titled .hp-lg-band{ grid-template-columns:minmax(0,1fr); }
  .hp-lg-v-titled .hp-lg-head{ text-align:center; }
  .hp-lg-v-titled.is-ruled .hp-lg-side::after{ display:none; }
}
@media (max-width: 640px){
  .hp-lg-grid{ grid-template-columns:repeat(var(--lg-cols-3), minmax(0,1fr)); }
}
@media (max-width: 460px){
  .hp-lg-grid{ grid-template-columns:repeat(var(--lg-cols-2), minmax(0,1fr)); }
  .hp-lg-i{ padding:6px; }
}

@media (prefers-reduced-motion: reduce){
  .hp-lg-i, .hp-lg-i img{ transition:none !important; }
  a.hp-lg-i:hover{ transform:none; }
}

/* ==========================================================================
   SHARED CARD DESIGN SYSTEM — 15 designs
   .hp-cd-v-<style>.  Used by brands, courses, instructors, programs, events,
   notices, services, portfolio and case studies — one stylesheet, nine blocks.
   The root also carries .hp-gal so sf_cb_carousel_script() drives design 15.
   ========================================================================== */

.hp-cd{
  --cd-acc:  var(--color-accent, var(--accent, #0fb39a));
  --cd-on-acc:#fff;
  --cd-bg:   transparent;
  --cd-ink:  var(--text-primary, var(--color-text, #1c2b28));
  --cd-mute: var(--text-muted, var(--color-text-muted, #6b7d78));
  --cd-card: var(--surface-1, var(--color-card, #fff));
  --cd-line: var(--border-subtle, var(--color-border, rgba(20,32,29,.10)));
  --cd-soft: var(--surface-2, rgba(20,32,29,.04));
  --cd-dark: #101a18;
  --cd-g1:   #eef6f3;
  --cd-g2:   #fdf1ea;
  --cd-r:    16px;
  --cd-gap:  20px;
  --cd-ar:   4/3;
  --cd-cols-d:3; --cd-cols-3:3; --cd-cols-2:2;

  --gl-r:var(--cd-r); --gl-gap:var(--cd-gap); --gl-acc:var(--cd-acc);
  --gl-on-acc:var(--cd-on-acc); --gl-card:var(--cd-card); --gl-line:var(--cd-line);
  --gl-ink:var(--cd-ink); --gl-soft:var(--cd-soft); --gl-dark:var(--cd-dark);

  color:var(--cd-ink); background:var(--cd-bg);
}

/* ---------- head ---------- */
.hp-cd-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin:0 0 18px;
}
.hp-cd.is-center .hp-cd-head{ justify-content:center; text-align:center; }
.hp-cd-headin{ min-width:0; }
.hp-cd-eyebrow{
  display:inline-block; margin:0 0 6px; font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cd-acc);
}
.hp-cd-title{
  margin:0 0 4px; font-family:var(--font-display, inherit);
  font-size:clamp(1.3rem, 1.05rem + 1.2vw, 1.95rem); line-height:1.2; text-wrap:balance;
}
.hp-cd-sub{ margin:0; color:var(--cd-mute); font-size:.9rem; line-height:1.6; }
.hp-cd-viewall{
  display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
  color:var(--cd-mute); font-size:.82rem; font-weight:600; white-space:nowrap;
}
.hp-cd-viewall:hover{ color:var(--cd-acc); }
.hp-cd-viewall i{ font-size:.7rem; }

.hp-cd-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:20px; padding:.7rem 1.4rem; border-radius:999px;
  background:var(--cd-acc); color:var(--cd-on-acc); text-decoration:none;
  font-size:.84rem; font-weight:700; border:1px solid transparent;
  transition:filter .18s ease, transform .18s ease;
}
.hp-cd-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); color:var(--cd-on-acc); }
.hp-cd.is-center > .hp-cd-btn{ display:flex; width:max-content; margin-inline:auto; }

/* ---------- the grid ---------- */
.hp-cd-grid{
  display:grid; gap:var(--cd-gap);
  grid-template-columns:repeat(var(--cd-cols-d), minmax(0,1fr));
}

/* ---------- the card ---------- */
.hp-cd-c{
  position:relative; display:flex; flex-direction:column; gap:12px; min-width:0;
  background:var(--cd-card); border:1px solid var(--cd-line);
  border-radius:var(--cd-r); padding:14px; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hp-cd-c:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(16,26,24,.10); }
.hp-cd-c.is-hot{ border-color:var(--cd-acc); }
.hp-cd.is-center .hp-cd-c{ text-align:center; align-items:center; }

.hp-cd-ph{
  display:block; position:relative; overflow:hidden; min-width:0;
  border-radius:calc(var(--cd-r) - 4px); aspect-ratio:var(--cd-ar); background:var(--cd-soft);
  height:var(--cd-h, auto);
}
.hp-cd-ph img{ width:100%; height:100%; object-fit:var(--cd-fit,cover); display:block; transition:transform .35s ease; }
.hp-cd-c:hover .hp-cd-ph img{ transform:scale(1.04); }
.hp-cd-medialink{ display:block; text-decoration:none; min-width:0; }

.hp-cd-ic{
  display:grid; place-items:center; flex:0 0 auto;
  width:54px; height:54px; border-radius:14px;
  background:color-mix(in srgb, var(--cd-acc) 12%, transparent);
  color:var(--cd-acc); font-size:1.25rem;
}
.hp-cd-ic img{ width:70%; height:70%; object-fit:contain; }
.hp-cd-ic.is-num{
  font-family:var(--font-display, inherit); font-size:1.15rem;
  background:var(--cd-acc); color:var(--cd-on-acc); font-variant-numeric:tabular-nums;
}

.hp-cd-b{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.hp-cd-meta{
  font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cd-acc);
}
.hp-cd-t{
  margin:0; font-family:var(--font-display, inherit);
  font-size:1.02rem; line-height:1.3; overflow-wrap:anywhere;
}
.hp-cd-t a{ color:inherit; text-decoration:none; }
.hp-cd-t a:hover{ color:var(--cd-acc); }
.hp-cd-x{ color:var(--cd-mute); font-size:.86rem; line-height:1.62; }
.hp-cd-x p{ margin:0 0 .5em; }
.hp-cd-x p:last-child{ margin-bottom:0; }
.hp-cd-foot{ margin-top:2px; font-size:.76rem; color:var(--cd-mute); font-weight:600; }

.hp-cd-cbtn{
  align-self:flex-start; margin-top:6px;
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:700; color:var(--cd-acc); text-decoration:none;
}
.hp-cd-cbtn i{ font-size:.66rem; transition:transform .18s ease; }
.hp-cd-cbtn:hover i{ transform:translateX(3px); }
.hp-cd.is-center .hp-cd-cbtn{ align-self:center; }

.hp-cd-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  padding:.28rem .62rem; border-radius:999px;
  background:var(--cd-acc); color:var(--cd-on-acc);
  font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.hp-cd-badge.is-loose{ position:static; align-self:flex-start; }

/* ==========================================================================
   Per-design character
   ========================================================================== */

/* 01 Classic Card — image on top, copy under. The safe default. */
.hp-cd-v-classic .hp-cd-c{ padding:0; }
.hp-cd-v-classic .hp-cd-ph{ border-radius:var(--cd-r) var(--cd-r) 0 0; }
.hp-cd-v-classic .hp-cd-b{ padding:14px; }

/* 02 Image Overlay — copy rides over the photograph */
.hp-cd-v-overlay{ --cd-ar:3/4; }
.hp-cd-v-overlay .hp-cd-c{ padding:0; border:0; background:var(--cd-dark); }
.hp-cd-v-overlay .hp-cd-ph{ border-radius:var(--cd-r); }
.hp-cd-v-overlay .hp-cd-b{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 14px;
  background:linear-gradient(to top, rgba(10,18,16,.94) 0%, rgba(10,18,16,.55) 55%, transparent 100%);
}
.hp-cd-v-overlay .hp-cd-t,
.hp-cd-v-overlay .hp-cd-t a{ color:#fff; }
.hp-cd-v-overlay .hp-cd-x,
.hp-cd-v-overlay .hp-cd-foot{ color:rgba(255,255,255,.84); }
.hp-cd-v-overlay .hp-cd-meta{ color:#fff; }
.hp-cd-v-overlay .hp-cd-cbtn{ color:#fff; }

/* 03 Minimal Text — no frame at all */
.hp-cd-v-minimal .hp-cd-c{ border:0; background:transparent; padding:0; }
.hp-cd-v-minimal .hp-cd-c:hover{ transform:none; box-shadow:none; }
.hp-cd-v-minimal .hp-cd-t{ font-size:1.08rem; }

/* 04 Icon Top */
.hp-cd-v-icon .hp-cd-c{ gap:14px; padding:20px 16px; }
.hp-cd-v-icon .hp-cd-ic{ width:60px; height:60px; font-size:1.4rem; border-radius:16px; }

/* 05 Icon Beside */
.hp-cd-v-iconside .hp-cd-c{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px;
  align-items:start; padding:18px 16px; text-align:left;
}
.hp-cd-v-iconside.hp-cd .hp-cd-c{ text-align:left; align-items:start; }

/* 06 Horizontal List — one wide row per card */
.hp-cd-v-list .hp-cd-grid{ gap:12px; }
.hp-cd-v-list .hp-cd-c{
  display:grid; grid-template-columns:minmax(0, 180px) minmax(0,1fr);
  gap:16px; align-items:center; padding:12px; text-align:left;
}
.hp-cd-v-list .hp-cd-ph{ aspect-ratio:4/3; }
.hp-cd-v-list .hp-cd-medialink{ grid-row:1; }

/* 07 Numbered Steps */
.hp-cd-v-numbered .hp-cd-c{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px;
  align-items:start; padding:18px 16px; text-align:left;
}
.hp-cd-v-numbered .hp-cd-ic.is-num{ width:40px; height:40px; border-radius:50%; }
.hp-cd-v-numbered.hp-cd .hp-cd-c{ text-align:left; align-items:start; }

/* 08 Wide Feature — image and copy side by side, alternating */
.hp-cd-v-wide .hp-cd-grid{ gap:clamp(16px, 2.4vw, 28px); }
.hp-cd-v-wide .hp-cd-c{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(16px, 2.4vw, 32px); align-items:center; padding:0; text-align:left;
  border:0; background:transparent;
}
.hp-cd-v-wide .hp-cd-c:hover{ transform:none; box-shadow:none; }
.hp-cd-v-wide .hp-cd-ph{ border-radius:var(--cd-r); aspect-ratio:16/9; }
.hp-cd-v-wide .hp-cd-b{ padding:0; }
.hp-cd-v-wide .hp-cd-t{ font-size:clamp(1.1rem, .95rem + .8vw, 1.5rem); }
/* every other row mirrors, so the eye zig-zags down the page */
.hp-cd-v-wide .hp-cd-c:nth-child(even) .hp-cd-medialink,
.hp-cd-v-wide .hp-cd-c:nth-child(even) > .hp-cd-ph{ order:2; }

/* 09 Bordered Grid — one shared hairline, no gaps */
.hp-cd-v-bordered .hp-cd-grid{ gap:0; }
.hp-cd-v-bordered .hp-cd-c{
  border-radius:0; border-width:0 1px 1px 0; box-shadow:none;
}
.hp-cd-v-bordered .hp-cd-c:hover{ transform:none; background:var(--cd-soft); }
.hp-cd-v-bordered .hp-cd-ph{ border-radius:calc(var(--cd-r) - 6px); }

/* 10 Elevated Cards */
.hp-cd-v-shadow .hp-cd-c{
  border-color:transparent; box-shadow:0 10px 30px rgba(16,26,24,.08); padding:0;
}
.hp-cd-v-shadow .hp-cd-ph{ border-radius:var(--cd-r) var(--cd-r) 0 0; }
.hp-cd-v-shadow .hp-cd-b{ padding:16px; }
.hp-cd-v-shadow .hp-cd-c:hover{ box-shadow:0 22px 48px rgba(16,26,24,.16); }

/* 11 Gradient Cards */
.hp-cd-v-gradient .hp-cd-c{
  border-color:transparent;
  background:linear-gradient(150deg, var(--cd-g1) 0%, var(--cd-g2) 100%);
}
.hp-cd-v-gradient .hp-cd-ic{ background:rgba(255,255,255,.6); }

/* 12 Dark Cards */
.hp-cd-v-dark .hp-cd-c{ background:var(--cd-dark); border-color:rgba(255,255,255,.1); }
.hp-cd-v-dark .hp-cd-t,
.hp-cd-v-dark .hp-cd-t a{ color:#fff; }
.hp-cd-v-dark .hp-cd-x,
.hp-cd-v-dark .hp-cd-foot{ color:rgba(255,255,255,.76); }
.hp-cd-v-dark .hp-cd-ic{ background:rgba(255,255,255,.12); color:#fff; }
.hp-cd-v-dark .hp-cd-ph{ background:rgba(255,255,255,.06); }

/* 13 Compact Tiles — small, dense, image-led */
.hp-cd-v-compact{ --cd-ar:1/1; }
.hp-cd-v-compact .hp-cd-grid{ gap:12px; }
.hp-cd-v-compact .hp-cd-c{ padding:0; gap:0; }
.hp-cd-v-compact .hp-cd-ph{ border-radius:var(--cd-r) var(--cd-r) 0 0; }
.hp-cd-v-compact .hp-cd-b{ padding:10px 12px 12px; gap:3px; }
.hp-cd-v-compact .hp-cd-t{ font-size:.88rem; }
.hp-cd-v-compact .hp-cd-x{ font-size:.76rem; }

/* 14 Staggered Masonry — a column layout, so cards keep their natural height */
.hp-cd-v-masonry .hp-cd-grid{
  display:block; columns:var(--cd-cols-d); column-gap:var(--cd-gap);
}
.hp-cd-v-masonry .hp-cd-c{
  break-inside:avoid; margin:0 0 var(--cd-gap); padding:0;
  /* a transform creates a containing block that breaks column flow in Safari */
  transition:box-shadow .2s ease, border-color .2s ease;
}
.hp-cd-v-masonry .hp-cd-c:hover{ transform:none; box-shadow:0 16px 36px rgba(16,26,24,.12); }
.hp-cd-v-masonry .hp-cd-ph{ border-radius:var(--cd-r) var(--cd-r) 0 0; aspect-ratio:auto; }
.hp-cd-v-masonry .hp-cd-ph img{ height:auto; }
.hp-cd-v-masonry .hp-cd-b{ padding:14px; }

/* 15 Card Carousel */
.hp-cd-car{ position:relative; }
.hp-cd .hp-gal-track.is-grid{
  grid-auto-flow:column;
  --cd-slides: var(--cd-slides-d, 3);
  grid-auto-columns:calc((100% - (var(--cd-slides, 3) - 1) * var(--cd-gap)) / var(--cd-slides, 3));
  grid-template-rows:repeat(1, auto);
  gap:var(--cd-gap); padding:10px 2px;
}
.hp-cd-track{ overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; }
.hp-cd-track::-webkit-scrollbar{ display:none; }
.hp-cd .hp-gal-cell{ display:flex; flex-direction:column; align-items:stretch; }
.hp-cd .hp-gal-cell > *{ flex:1 1 auto; min-width:0; }
.hp-cd-cell{ scroll-snap-align:start; min-width:0; }
.hp-cd-car .hp-gal-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:.76rem;
  border:1px solid var(--cd-line); background:var(--cd-card); color:var(--cd-ink);
  box-shadow:0 6px 18px rgba(16,26,24,.12);
  opacity:0; transition:opacity .2s ease, background .2s ease, color .2s ease;
}
.hp-cd-car:hover .hp-gal-nav,
.hp-cd-car:focus-within .hp-gal-nav{ opacity:1; }
.hp-cd-car .hp-gal-nav:hover{ background:var(--cd-acc); color:var(--cd-on-acc); border-color:var(--cd-acc); }
.hp-cd-car .hp-gal-nav.is-prev{ left:6px; }
.hp-cd-car .hp-gal-nav.is-next{ right:6px; }
.hp-cd-dots{ display:flex; gap:6px; justify-content:center; margin-top:12px; }
.hp-cd-dots .hp-gal-dot{
  appearance:none; cursor:pointer; width:7px; height:7px; padding:0; border:0;
  border-radius:50%; background:var(--cd-line); transition:background .2s ease, width .2s ease;
}
.hp-cd-dots .hp-gal-dot.is-on{ background:var(--cd-acc); width:18px; border-radius:999px; }

/* ==========================================================================
   Breakpoints — the ladder relaxes --cd-cols-*, never grid-template-columns,
   which the block publishes as an #id rule.
   ========================================================================== */
@media (max-width: 1024px){
  .hp-cd-grid{ grid-template-columns:repeat(var(--cd-cols-3), minmax(0,1fr)); }
  .hp-cd-v-masonry .hp-cd-grid{ columns:var(--cd-cols-3); }
  .hp-cd-v-list .hp-cd-grid,
  .hp-cd-v-wide .hp-cd-grid{ grid-template-columns:minmax(0,1fr); }
  .hp-cd .hp-gal-track.is-grid{ --cd-slides:var(--cd-slides-2, 2); }
}
@media (max-width: 760px){
  .hp-cd-grid{ grid-template-columns:repeat(var(--cd-cols-2), minmax(0,1fr)); }
  .hp-cd-v-masonry .hp-cd-grid{ columns:var(--cd-cols-2); }
  .hp-cd-v-wide .hp-cd-c{ grid-template-columns:minmax(0,1fr); }
  .hp-cd-v-wide .hp-cd-c:nth-child(even) .hp-cd-medialink,
  .hp-cd-v-wide .hp-cd-c:nth-child(even) > .hp-cd-ph{ order:0; }
  .hp-cd-v-iconside .hp-cd-c,
  .hp-cd-v-numbered .hp-cd-c{ grid-template-columns:auto minmax(0,1fr); }
  .hp-cd-head{ align-items:center; }
}
@media (max-width: 520px){
  .hp-cd-grid{ grid-template-columns:minmax(0,1fr); }
  .hp-cd-v-masonry .hp-cd-grid{ columns:1; }
  .hp-cd-v-compact .hp-cd-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hp-cd-v-list .hp-cd-c{ grid-template-columns:minmax(0,1fr); }
  .hp-cd .hp-gal-track.is-grid{ --cd-slides:var(--cd-slides-1, 1); }
  .hp-cd-car .hp-gal-nav{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .hp-cd-c, .hp-cd-ph img, .hp-cd-btn, .hp-cd-cbtn i{ transition:none !important; }
  .hp-cd-c:hover{ transform:none; }
  .hp-cd-c:hover .hp-cd-ph img{ transform:none; }
}