/* SelvaCrafts home page styles.
 * Loaded only on the WP front page (is_front_page()).
 * Bundles the homepage-specific layout PLUS the site primitives (.btn,
 * .eyebrow, .well, .card, .values, .tab-panel...) the home page needs.
 * Scoped to `.sc-site` so these don't bleed into other emall pages.
 * Ported from selvacrafts-theme-1/assets/css/{theme,homepage}.css.
 */

/* ============================== TYPE UTILS ============================== */
.sc-site .mono {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sc-site .eyebrow {
  font-size: 12px;
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 14px;
}

/* ============================== BUTTONS ============================== */
.sc-site .sc-home .btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 28px;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: var(--btn-ls);
  text-transform: var(--btn-tt);
  border-radius: var(--btn-radius);
  text-decoration: none;
  transition: .22s ease;
  line-height: 1;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
}

.sc-site .sc-home .btn svg {
  transition: transform .22s ease
}

.sc-site .sc-home .btn:hover svg {
  transform: translateX(3px)
}

.sc-site .sc-home .btn-primary {
  background: var(--accent);
  color: #fff
}

.sc-site .sc-home .btn-primary:hover {
  background: var(--ink);
  color: #fff
}

.sc-site .sc-home .btn-ghost {
  padding-inline: 0;
  color: var(--ink);
  background: transparent;
  border-bottom: 1.5px solid transparent;
  border-radius: 0;
}

.sc-site .sc-home .btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent)
}

.sc-site .sc-home .btn-season {
  background: var(--s-deep);
  color: #fff
}

.sc-site .sc-home .btn-season:hover {
  filter: brightness(1.12)
}

/* ============================== PHOTO WELL ============================== */
.sc-site .well {
  position: relative;
  background: linear-gradient(140deg, var(--t1, #E7DECE), var(--t2, #C7BBA4));
  overflow: hidden;
  border-radius: var(--card-radius);
  display: block;
}

.sc-site .well img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

/* ============================== SECTION HEAD ============================== */
.sc-site .sec-head {
  margin-bottom: 40px
}

.sc-site .sec-head.center {
  text-align: center
}

.sc-site .sec-head.center .eyebrow {
  margin-inline: auto
}

.sc-site .sec-title {
  font-family: var(--font-display);
  font-weight: var(--dw);
  font-size: calc(clamp(28px, 3.6vw, 44px) * var(--disp-scale));
  line-height: 1.06;
  letter-spacing: -.01em;
}

.sc-site .sec-sub {
  font-size: 15.5px;
  color: var(--ink2);
  margin-top: 12px;
  max-width: 50ch;
}

.sc-site .sec-head.center .sec-sub {
  margin-inline: auto
}

.sc-site .shop-foot {
  text-align: center;
  margin-top: 44px
}

/* ============================== PRODUCT CARD ==============================
 * Home cards now render via WC's native `content-product.php` loop template
 * — exact same markup, hooks and behaviour as the shop page / PDP related.
 * What's below styles only the home-page CONTAINER + the `.well` gradient
 * wrap around the image. The card's own visuals come from emall's stock
 * Woo styles, untouched.
 *
 * The wc_product_class() output puts <li class="product"> inside our
 * .sc-card-wrap — but because the parent is .grid-4 / .season-grid (not a
 * <ul>), we need to strip default list styling. */
/* ──────────────────────────────────────────────────────────────────────
 * YITH wishlist heart — positioned in the top-right corner of the image
 * regardless of YITH's own configured position.
 *
 * YITH's shortcode emits a `.yith-wcwl-add-to-wishlist` wrapper with an
 * `<a>` (and a tiny loading icon). We absolute-position the wrapper and
 * style the link as a circular pill that matches the old custom card.
 * ────────────────────────────────────────────────────────────────────── */
.sc-site .card .wish-wrap {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  margin: 0;
  pointer-events: none;
}

.sc-site .card .wish-wrap .yith-wcwl-add-to-wishlist {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

/* (Per-state link styling now lives in the state-specific blocks below.
 * The earlier generic `.wish-wrap a` rule used `color: #d0382c` on hover,
 * which only worked for icon fonts — we render the heart via SVG
 * background-image now, so colour swaps happen in the state-specific
 * pseudo-element rules instead.) */
/* We draw our own heart via the link's ::before pseudo-element so we don't
 * rely on YITH's chosen icon font or SVG (which can be missing depending
 * on plugin settings and theme tweaks). Outline heart for the empty
 * "Add to wishlist" state; filled red heart for the "added" / "already
 * in wishlist" states. State swap is driven by which YITH wrapper is
 * currently visible (YITH toggles `.hide` on add/remove).
 *
 * Important: all three YITH wrappers stay rendered. The previous CSS
 * `display: none`-d `.yith-wcwl-wishlistaddedbrowse` and
 * `.yith-wcwl-wishlistexistsbrowse`, which meant the heart vanished
 * entirely the moment YITH switched into one of those states.
 */
.sc-site .card .wish-wrap .yith-wcwl-add-to-wishlist>* {
  display: block;
}

/* Honour YITH's own state toggle */
.sc-site .card .wish-wrap .yith-wcwl-add-to-wishlist>.hide,
.sc-site .card .wish-wrap .yith-wcwl-add-to-wishlist>[style*="display:none"],
.sc-site .card .wish-wrap .yith-wcwl-add-to-wishlist>[style*="display: none"] {
  display: none !important;
}

/* The clickable trigger inside each state — the single visible button. */
.sc-site .card .wish-wrap .yith-wcwl-add-button a,
.sc-site .card .wish-wrap .yith-wcwl-wishlistaddedbrowse a,
.sc-site .card .wish-wrap .yith-wcwl-wishlistexistsbrowse a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .3);
  text-decoration: none;
  transition: .2s;
  pointer-events: auto;
  margin: 0;
  padding: 0;
}

/* Outline heart for empty state */
.sc-site .card .wish-wrap .yith-wcwl-add-button a::before {
  content: "";
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2620' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l8.84 8.84 8.84-8.84a5.5 5.5 0 0 0 0-7.78z'/></svg>") center/contain no-repeat;
  transition: transform .2s;
}

.sc-site .card .wish-wrap .yith-wcwl-add-button a:hover::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d0382c' stroke='%23d0382c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l8.84 8.84 8.84-8.84a5.5 5.5 0 0 0 0-7.78z'/></svg>");
}

.sc-site .card .wish-wrap .yith-wcwl-add-button a:hover {
  transform: scale(1.08);
}

/* Filled heart for added / exists states */
.sc-site .card .wish-wrap .yith-wcwl-wishlistaddedbrowse a::before,
.sc-site .card .wish-wrap .yith-wcwl-wishlistexistsbrowse a::before {
  content: "";
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f44336' stroke='%23f44336' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l8.84 8.84 8.84-8.84a5.5 5.5 0 0 0 0-7.78z'/></svg>") center/contain no-repeat;
}

.sc-site .card .wish-wrap .yith-wcwl-wishlistaddedbrowse a:hover,
.sc-site .card .wish-wrap .yith-wcwl-wishlistexistsbrowse a:hover {
  transform: scale(1.08);
}

/* Suppress YITH's own icons / text. We use our pseudo-element heart and
 * the entire button is the click target, so the text labels and the
 * plugin's icon are noise inside the 34×34 circle. */
.sc-site .card .wish-wrap a>i,
.sc-site .card .wish-wrap a>span,
.sc-site .card .wish-wrap a .yith-wcwl-icon,
.sc-site .card .wish-wrap a svg,
.sc-site .card .wish-wrap .feedback {
  display: none;
}

/* AJAX loading state — small spinner via opacity dim */
.sc-site .card .wish-wrap a.loading::before {
  opacity: 0.4;
}

/* Quick "Add to bag" button visual states. The `.quick` base rule above
 * handles hover-reveal positioning; here we colour-code AJAX vs. linked-out
 * vs. disabled so the user knows what'll happen on click. */
.sc-site .quick.is-disabled {
  background: var(--ink2);
  opacity: 0.85;
  cursor: not-allowed;
}

.sc-site .quick.is-disabled:hover {
  background: var(--ink2);
}

/* WC's "added" success state on AJAX add-to-cart — show 'View cart' link
 * in the post-button slot. WC removes the .ajax_add_to_cart class and adds
 * .added; we mirror that here so the visual reverts to the accent colour. */
.sc-site .quick.added {
  background: var(--accent);
}

.sc-site .quick.loading {
  opacity: 0.7;
  pointer-events: none;
}

/* WC injects a "View cart" link after the button on successful AJAX add.
 * Stack it under the hover button so it remains accessible. */
.sc-site .card a.added_to_cart {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -8px;
  z-index: 2;
  background: var(--surface);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  padding: 6px;
  border-radius: var(--btn-radius);
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .25);
}

.sc-site .card a.added_to_cart:hover {
  background: var(--accent);
  color: #fff;
}

.sc-site .grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
}

.sc-site .card {
  position: relative;
  margin-bottom: 10px;
}

.sc-site .card a {
  text-decoration: none;
  color: inherit
}

.sc-site .card-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--card-radius);
  margin-bottom: 10px;
  display: block;
}

.sc-site .card-media .well {
  border-radius: var(--card-radius);
  aspect-ratio: 1/1
}

.sc-site .card-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.sc-site .badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--btn-radius);
  color: #fff;
  line-height: 1;
}

.sc-site .badge-new {
  background: var(--accent)
}

.sc-site .badge-hot {
  background: var(--ink)
}

.sc-site .badge-sale {
  background: #A9744A
}

body.images-round.sc-site .badge {
  border-radius: 30px;
  transform: rotate(-3deg)
}

.sc-site .card .wish {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .3);
  color: var(--ink);
  transition: .2s;
  border: 0;
  cursor: pointer;
  padding: 0px;
}

.sc-site .card .wish:hover {
  color: #d0382c;
  transform: scale(1.08)
}

.sc-site .wish.on {
  color: #f44336
}

.sc-site .wish.on svg {
  fill: currentColor;
  stroke: currentColor
}

.sc-site .quick {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  background: var(--acc, var(--accent));
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 11px;
  border-radius: var(--btn-radius);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, background .2s ease, color .2s ease;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .35);
  text-align: center;
  border: none;
  cursor: pointer;
  width: auto;
  pointer-events: none;
}

.sc-site .card:hover .quick,
.sc-site .card:focus-within .quick {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.sc-site .quick:hover {
  background: var(--ink);
  color: #fff
}

.sc-site .card-media:hover .well img {
  filter: brightness(1.03)
}

.sc-site .card-name {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 5px;
  font-family: var(--font-body);
  line-height: 24px;
}

.sc-site .card-price {
  display: flex;
  gap: 9px;
  align-items: baseline;
  font-size: 14px;
  line-height: 20px;
}

.sc-site .card-price .now {
  font-weight: 700;
  font-size: 15px
}

.sc-site .card-price del,
.sc-site .card-price .was {
  font-size: 13px;
  color: var(--ink2);
  text-decoration: line-through
}

.sc-site .tab-panel {
  display: none
}

.sc-site .tab-panel.on {
  display: grid
}

/* ============================== VALUE PROPS ============================== */
.sc-site .values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.sc-site .value {
  display: flex;
  gap: 14px;
  align-items: flex-start
}

.sc-site .value+.value {
  border-left: 1px solid var(--line);
  padding-left: 24px
}

.sc-site .value-ic {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 3px;
}

.sc-site .value-t {
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: 3px
}

.sc-site .value-s {
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.45
}

/* 2-up value strip from laptop/large tablet down to small tablet.
 * Was 760px; bumped to 1080 to match the season-inner stack breakpoint —
 * keeps the home rhythm consistent (each section reflows at the same
 * width). The :nth-child(3) reset removes the left divider on the card
 * that becomes the start of row 2 in 2-col mode. */
@media (max-width: 1080px) {
  .sc-site .values {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px
  }

  .sc-site .value:nth-child(3) {
    border-left: none;
    padding-left: 0
  }
}

@media (max-width: 480px) {

  /* Single column with horizontal dividers between items. To make the
   * divider sit visually centred between two values, we drop the grid
   * `gap` (which would only sit above each item) and use symmetric
   * vertical padding on every value instead. The border-top on the 2nd+
   * value then floats between two equal 18px gaps — clean, even rhythm. */
  .sc-site .values {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .sc-site .sc-home>section.values {
    padding: 18px 20px;
  }

  .sc-site .value {
    padding-top: 18px;
  }

  .sc-site .value:first-child {
    padding-top: 18px;
  }

  .sc-site .value:last-child {
    padding-bottom: 0;
  }

  .sc-site .value+.value {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* ============================== HOMEPAGE LAYOUT ============================== */
.sc-site .sc-home>section {
  padding-block: clamp(56px, 8vw, 108px)
}

.sc-site .sc-home>section:nth-child(even) {
  background: var(--bg2)
}

.sc-site .sc-home .hero,
.sc-site .sc-home .shop,
.sc-site .sc-home .story,
.sc-site .sc-home .ig,
.sc-site .sc-home .season-inner,
.sc-site .sc-home .values {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ============================== HERO ============================== */
.sc-site .hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding-top: clamp(48px, 7vw, 92px);
  padding-bottom: clamp(48px, 7vw, 92px);
}

.sc-site .hero-title {
  font-family: var(--font-display);
  font-weight: var(--dw);
  font-size: calc(clamp(40px, 6vw, 68px) * var(--disp-scale));
  line-height: 1.02;
  letter-spacing: -.01em;
  margin-bottom: 22px;
}

.sc-site .hero-title em {
  color: var(--accent);
  font-style: italic
}

/* `typeface-cozy` and `sc-site` are BOTH body classes — they must be chained
 * (no space) on the same element. `body.typeface-cozy .sc-site ...` would
 * look for `.sc-site` as a descendant of body, which fails (sc-site is the
 * body itself), so the Caveat script font never applied to <em> in the hero
 * title. Same fix below for `.signature`. */
body.typeface-cozy.sc-site .hero-title em {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.15em;
  font-style: normal;
}

.sc-site .hero-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--ink2);
  margin-bottom: 30px;
  text-wrap: pretty;
}

.sc-site .hero-cta {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 34px
}

.sc-site .hero-points {
  list-style: none;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 16px;
  color: var(--ink2);
  font-weight: 500;
  padding: 0;
  margin: 0;
}

.sc-site .hero-points li {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  /* text's default line-height was shifting the baseline below the icon */
  padding: 0px;
}

.sc-site .hero-points li>span {
  line-height: 1.2
}

/* Lucide icons hydrate as inline <svg> with text-baseline alignment, so a
 * 25px icon sits a few px below the text's optical centre. Forcing block
 * display strips the baseline offset; align-items: center on the li then
 * centres the boxes cleanly. Applied to both the pre-hydration placeholder
 * and the post-hydration svg so layout is stable across the hydration. */
.sc-site .hero-points svg,
.sc-site .hero-points .sc-lucide-icon {
  display: block;
  flex-shrink: 0;
  color: var(--accent);
}

.sc-site .hero-art {
  position: relative;
  min-height: 360px
}

.sc-site .hero-slide {
  position: absolute;
  inset: 0;
  color: inherit;
  opacity: 0;
  pointer-events: none;
  text-decoration: none;
  transition: opacity .45s ease;
}

.sc-site .hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

.sc-site .hero-well {
  box-shadow: 0 30px 60px -28px rgba(43, 38, 32, .4)
}

.sc-site .hero-tag {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  padding: 9px 15px;
  border-radius: var(--control-radius);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .3);
}

/* ============================== SEASON BAND ============================== */
.sc-site .season {
  background: var(--s-tint)
}

.sc-site .season-inner {
  display: grid;
  /* Narrowed the head column and gap so the products column can fit 4
   * cards comfortably (was 3 cards in a 1.4fr column with a wider gap). */
  grid-template-columns: 0.7fr 2.2fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  /* On viewports ≤ 1080px (laptop / tablet / phone) the band inherits
   * `padding-inline: var(--pad)` from the shared `.sc-home > section`
   * wrapper rule (same rule .shop / .story / .ig use), so this band's
   * left/right edges line up with Best Sellers below. The desktop
   * override sits in the @media block right after this. */
}

/* Desktop (> 1080px): zero horizontal padding on the band — the head
 * column and 4-up products line up flush to the max-width container
 * for a tighter, more editorial look. Below 1080px the section stacks
 * and we want the shared --pad inset back so the head text and product
 * row align with the Best Sellers grid; that's the default. */
@media (min-width: 1241px) {
  .sc-site .season-inner {
    padding-inline: 20px !important;
  }
}

.sc-site .season-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--s-deep);
  margin-bottom: 16px;
}

.sc-site .season-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--s-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--s-accent) 25%, transparent);
}

/* Season icon SVG (configured per term, or inherited from the preset).
 * line-height: 0 prevents the SVG's baseline offset from misaligning the
 * eyebrow text; svg display: block strips inline whitespace. */
.sc-site .season-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--s-deep);
  line-height: 0;
}

.sc-site .season-ic svg {
  display: block;
  width: 22px;
  height: 22px;
}

.sc-site .season-title {
  font-family: var(--font-display);
  font-weight: var(--dw);
  font-size: calc(clamp(30px, 3.6vw, 46px) * var(--disp-scale));
  line-height: 1.04;
  color: var(--ink);
}

.sc-site .season-note {
  font-size: 16px;
  color: var(--ink2);
  margin: 14px 0 26px;
  max-width: 34ch
}

.sc-site .season-auto {
  margin-top: 16px;
  color: var(--ink2);
  opacity: .7;
  font-size: 10px
}

.sc-site .season-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px
}

/* ============================== SHOP TABS ============================== */
.sc-site .tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: -22px 0 36px
}

.sc-site .tabs button {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 9px 20px;
  border-radius: 40px;
  color: var(--ink2);
  border: 1.5px solid transparent;
  transition: .2s;
  background: none;
  cursor: pointer;
}

.sc-site .tabs button.on {
  color: var(--ink);
  border-color: var(--ink)
}

.sc-site .tabs button:hover {
  color: var(--ink)
}

/* ============================== MAKER STORY ============================== */
.sc-site .story {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}

.sc-site .story-art .well {
  box-shadow: 0 24px 50px -26px rgba(43, 38, 32, .38);
  aspect-ratio: 1/1
}

.sc-site .story-title {
  font-family: var(--font-display);
  font-weight: var(--dw);
  font-size: calc(clamp(28px, 3.4vw, 42px) * var(--disp-scale));
  line-height: 1.07;
  margin-bottom: 18px;
}

.sc-site .story-text {
  font-size: 16px;
  color: var(--ink2);
  max-width: 50ch;
  margin-bottom: 22px;
  text-wrap: pretty
}

.sc-site .signature {
  font-size: 17px;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 24px
}

body.typeface-cozy.sc-site .signature {
  font-family: var(--font-script);
  font-size: 27px;
  color: var(--accent);
}

/* ============================== INSTAGRAM ============================== */
.sc-site .ig-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px
}

.sc-site .ig-tile {
  position: relative;
  display: block;
  border-radius: var(--card-radius);
  overflow: hidden;
  text-decoration: none;
}

.sc-site .ig-tile .well {
  aspect-ratio: 1/1
}

.sc-site .ig-hover {
  position: absolute;
  inset: 0;
  background: rgba(43, 38, 32, .45);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: .25s;
  font-size: 13px;
  font-weight: 600;
}

.sc-site .ig-hover span {
  display: flex;
  align-items: center;
  gap: 5px
}

.sc-site .ig-tile:hover .ig-hover {
  opacity: 1
}

/* ============================== RESPONSIVE ============================== */
/* Product grid (best sellers / latest drops): 4 → 3 → 2 columns.
 * Ported from source theme.css; was missing in the child so phones got a
 * 4-up grid with tiny cards. */
@media (max-width: 1080px) {
  .sc-site .grid-4 {
    grid-template-columns: repeat(3, 1fr)
  }

  .sc-site .ig-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

/* Stack the head/text column above the products as soon as we leave
 * full desktop. Same breakpoint .grid-4 uses (1080px) so the season band
 * collapses at the same width where best-sellers drops from 4 → 3 cols
 * below it. (Was 900px; user requested the stack to kick in earlier so
 * the products row has the full inner width on laptops.) */
@media (max-width: 1080px) {
  .sc-site .season-inner {
    grid-template-columns: 1fr
  }

  .sc-site .sc-home .btn-season {
    margin-bottom: 14px;
  }
}

@media (max-width: 760px) {
  .sc-site .grid-4 {
    grid-template-columns: repeat(2, 1fr)
  }

  .sc-site .hero {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .sc-site .hero-art {
    order: -1;
    max-width: 420px;
    margin-inline: auto;
    width: 100%
  }

  .sc-site .hero-copy {
    text-align: center;
    margin-inline: auto;
    width: 100%;
  }

  .sc-site .hero-sub {
    margin-inline: auto;
  }

  .sc-site .hero-cta,
  .sc-site .hero-points {
    justify-content: center;
  }

  .sc-site .story {
    grid-template-columns: 1fr;
    gap: 28px
  }

  /* Same fix as .hero on phones: image + copy were both flush-left in the
   * single-column stack, leaving a wide empty gutter on the right. Centre
   * the image and the copy column so the whole story sits as a centred
   * stack matching the rest of the mobile rhythm. The .story-text keeps
   * its own max-width for legibility; margin-inline: auto centres it
   * within the now-centred copy column. */
  .sc-site .story-art {
    max-width: 440px;
    margin-inline: auto;
  }

  .sc-site .story-copy {
    max-width: 440px;
    margin-inline: auto;
    text-align: center;
  }

  .sc-site .story-text {
    margin-inline: auto;
  }

  /* Match the .grid-4 behaviour on phones — 2 columns at this width so
   * the season cards stay the same size as best-sellers / latest-drops
   * directly below. (Was 3 cols here, which left each card half as wide
   * as the grid-4 cards on the same screen.) */
  .sc-site .season-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Very narrow phones: keep 2 cards per row in the season band (per user
 * request) so it matches the rest of the mobile product grids. */
@media (max-width: 480px) {
  .sc-site .season-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .sc-site .ig-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .sc-site .tabs {
    margin-top: 0
  }
}