/* Sunacha Silks — brand-level overrides that sit on top of the theme stylesheet. */

/* The theme spins the logo on hover and on scroll-up. That reads as a flourish on a
   symmetrical lotus glyph; on a wordmark lockup it just turns the name on its side. */
.header-logo__image,
.header-logo:hover .header-logo__image {
  transform: none !important;
}

/* The header row was sized around a 36px glyph; the lockup needs the room. */
.header-logo__image-container { max-height: none; }

/* On mobile the row collapses to exactly the logo height, leaving it flush against the
   top edge — the lockup needs a little air. */
@media screen and (max-width: 749px) {
  .header-logo { padding-block: 8px; }
}

/* ── white behind every logo ──────────────────────────────────────────────────
   The lockup is full-colour artwork — gold, crimson, a figure — so it only holds up
   against white. Wherever it appears the white runs edge to edge as a band, never a
   panel with visible corners sitting on top of the section colour.

   The band is drawn by a pseudo-element rather than by widening the logo block itself:
   it is out of flow, so nothing around it shifts. `left: 50%` + `translateX(-50%)` on a
   100vw box centres it on the viewport no matter how much padding the ancestors add. */
body { overflow-x: clip; }        /* the bands must never create a horizontal scrollbar */

.shopify-block.icon-block:has(img[src*="Secondary_Logo"]) {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.shopify-block.icon-block:has(img[src*="Secondary_Logo"])::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: #fff;
  z-index: 0;
}

.shopify-block.icon-block:has(img[src*="Secondary_Logo"]) > * {
  position: relative;
  z-index: 1;
}

.shopify-block.icon-block:has(img[src*="Secondary_Logo"]) { padding-block: 30px; }

/* The sun mark between the intro and Shop by Style is dropped — the header and footer
   already carry the logo, and it left a white gap mid-page. */
.lcs__logo-wrap { display: none; }

@media screen and (max-width: 749px) {
  .shopify-block.icon-block:has(img[src*="Secondary_Logo"]) { padding-block: 22px; }
}

/* Tagline under the footer lockup, matching the header. The anchor is inline by default, so
   it becomes a centred column to stack the line under the artwork. */
.shopify-block.icon-block:has(img[src*="Secondary_Logo"]) > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.footer-logo__caption {
  display: block;
  font-family: var(--font-body--family, system-ui, sans-serif);
  font-size: 13px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #b07c22;
  line-height: 1;
  text-align: center;
}
@media screen and (max-width: 749px) {
  .footer-logo__caption { font-size: 10px; letter-spacing: .18em; }
}

/* `.footer-content` carries `content-visibility: auto`, which implies paint containment
   and clips the band back to the page-width gutter. */
.footer-content { content-visibility: visible !important; contain: none !important; }

/* Tagline under the header lockup. The logo artwork carries the name; this carries the line. */
.header-logo { flex-direction: column; gap: 4px; }
.header-logo__caption {
  display: block;
  font-family: var(--font-body--family, system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #b07c22;
  white-space: nowrap;
  line-height: 1;
}
@media screen and (max-width: 749px) {
  .header-logo__caption { font-size: 8px; letter-spacing: .14em; }
}

/* The weave cards and the footer weave row carry a single anchor in their caption; this
   stretches its hit area over the whole card so the image is clickable too. */
.focus-carousel__card-media { position: relative; }
.focus-carousel__card-title a,
[class*="ai-city-grid__name"] a { color: inherit; text-decoration: none; }
.focus-carousel__card-title a::after { content: ""; position: absolute; inset: 0; }
.focus-carousel__card-title a:hover,
[class*="ai-city-grid__name"] a:hover { color: #d19a35; }

/* ── mobile: let the photography carry the page ───────────────────────────────
   At 375px the card captions and the badges sitting on top of the saree take up
   more of the frame than the saree does. These are caption-weight labels, not body
   copy, so they can go below the 15px body floor; the hero paragraph stays at 14px.
   The theme sets these sizes from inline <style> blocks further down the document,
   which beat an external sheet of equal specificity, hence !important. */
@media screen and (max-width: 749px) {
  .product-carousel-title {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  .custom-product-carousel__product-title,
  .custom-product-carousel__price,
  .custom-product-carousel__price .money {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  /* Badges lie directly on the model. Smaller, tighter, and translucent so the
     weave reads through instead of being blocked out by a solid gold pill. */
  .badge {
    font-size: 8.5px !important;
    padding: 3px 7px !important;
    letter-spacing: .5px !important;
    background: rgb(213 164 99 / .82) !important;
    backdrop-filter: blur(2px);
  }

  /* Three badges stacked down the left edge were 23% of the photo height. */
  .product-card-badges {
    gap: 4px !important;
    top: 8px !important;
    left: 8px !important;
  }

  /* Hero copy sits over the saree too. */
  .slide__content h1 {
    font-size: 26px !important;
    line-height: 1.14 !important;
  }
  .slide__content p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}