/** Shopify CDN: Minification failed

Line 1112:0 Unexpected "}"

**/
/* ==========================================================================
   brand.css — Fazal Shawl brand layer for Shrine PRO
   --------------------------------------------------------------------------
   Added by customization; NOT part of the Shopfinity vendor theme, so vendor
   updates will not overwrite it. Loaded from layout/theme.liquid directly
   after base.css, so these values win over the inline {% style %} in <head>.

   Direction: premium / classic / elegant, for a Pakistani shawl house.
   Informed by shawlsbyaima.com and pk.lamaretail.com — both strictly
   monochrome, uppercase letterspaced headings, light weights, thin rules,
   photography carrying all colour. The merchandise here is highly coloured
   (kani multicolour, rainbow, floral), so the interface stays neutral.

   !! ROOT FONT SIZE !!
   Shrine PRO sets `html { font-size: 10px }`, so 1rem = 10px, NOT 16px.
   Every size below is therefore declared in px (or clamp with px stops) so
   it means what it says. Do not reintroduce rem here without multiplying
   by 1.6 — that mistake renders the whole storefront at 62.5% scale.
   ========================================================================== */

:root {
  /* --- Families --------------------------------------------------------- */
  --font-heading-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-heading-style: normal;
  --font-heading-weight: 400;

  --font-body-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body-style: normal;
  --font-body-weight: 300;
  --font-body-weight-bold: 500;

  /* --- Type scale (px; see root-size note above) -------------------------
     Cormorant is a high-contrast display face: it reads elegant when it is
     large and airy, and anaemic when it is small. So the display steps are
     generous and the small steps are handed to Jost instead. */
  --fz-display: clamp(34px, 4.6vw, 76px);   /* banner headline            */
  --fz-h1:      clamp(38px, 4.4vw, 62px);   /* page title                 */
  --fz-h2:      clamp(31px, 3.5vw, 50px);   /* section heading            */
  --fz-h3:      clamp(23px, 2.1vw, 30px);   /* sub-heading                */
  --fz-title:   22px;                       /* product card title         */
  --fz-lead:    clamp(17px, 1.3vw, 20px);  /* banner / intro body        */
  --fz-body:    17px;                       /* running copy               */
  --fz-price:   17px;
  --fz-nav:     14px;
  --fz-label:   13px;                       /* buttons, kickers           */
  --fz-micro:   12px;                       /* metadata, captions         */

  /* --- Tracking ---------------------------------------------------------
     Uppercase without tracking is the single most common way a premium
     layout reads cheap. Larger text needs less. */
  --track-wide:  0.2em;
  --track-mid:   0.14em;
  --track-tight: 0.06em;

  /* --- Leading ----------------------------------------------------------- */
  --lh-display: 1.04;
  --lh-heading: 1.12;
  --lh-body:    1.7;

  /* --- Brand tokens ------------------------------------------------------ */
  --brand-ink: #1a1a1a;
  --brand-ground: #faf8f6;
  --brand-surface: #ffffff;
  --brand-rule: #e5e0db;
  --brand-muted: #8a8279;
  --brand-madder: #88472e;
}

/* --------------------------------------------------------------------------
   Display type
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-tight);
}

h1, .h0, .h1 { font-size: var(--fz-h1); line-height: var(--lh-display); letter-spacing: 0.005em; }
h2, .h2      { font-size: var(--fz-h2); }
h3, .h3      { font-size: var(--fz-h3); font-weight: 400; }
h4, .h4      { font-size: var(--fz-title); font-weight: 400; }

/* Section headings carry the display face at full size — the quiet,
   confident opening both reference sites use. */
.section-header h2,
.title-wrapper h2,
.collection__title,
.collection-hero__title {
  font-family: var(--font-heading-family);
  font-weight: 400;
  font-size: var(--fz-h2);
  line-height: var(--lh-heading);
  letter-spacing: 0.01em;
  text-transform: none;
}

/* !! The theme marks up UI chrome as <h2>: "Filter:", "Sort by:",
   "53 products" and the mobile facet drawer are all h2 elements carrying the
   theme's own .caption / .caption-large signal. A blanket `main section h2`
   rule therefore blows up the filter bar into 33px display serif, and the
   plain <label> and <span> inside those h2s inherit it. Chrome is returned
   to the UI voice explicitly, and this must stay AFTER the heading rules. */
.facets__heading,
.facet-filters__label,
.product-count__text,
.mobile-facets__heading,
.mobile-facets__count,
h2.caption-large,
h2.caption {
  font-family: var(--font-body-family);
  font-weight: 400;
  font-size: var(--fz-nav);
  line-height: 1.4;
  letter-spacing: var(--track-tight);
  text-transform: none;
}

.product-count__text { color: var(--brand-muted); }

/* The shop wordmark. Cormorant at this size wants a little tracking to stop
   the capitals crowding. */
.header__heading-link,
.header__heading,
.header__heading-logo-wrapper {
  font-family: var(--font-heading-family);
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Navigation, buttons, labels — uppercase Jost with real tracking
   -------------------------------------------------------------------------- */
.header__menu-item,
.header__menu-item span,
.list-menu__item,
.mega-menu__link {
  font-family: var(--font-body-family);
  font-weight: 400;
  font-size: var(--fz-nav);
  text-transform: uppercase;
  letter-spacing: var(--track-mid);
}

.footer-block__heading {
  font-family: var(--font-body-family);
  font-weight: 500;
  font-size: var(--fz-label);
  text-transform: uppercase;
  letter-spacing: var(--track-mid);
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded,
.btn {
  font-family: var(--font-body-family);
  font-weight: 500;
  font-size: var(--fz-label);
  text-transform: uppercase;
  letter-spacing: var(--track-mid);
  border-radius: 0;           /* square edges read classic; rounded reads app-like */
}

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */
.card__heading,
.card__heading a,
.product__title,
.product__title h1,
.card-information__text {
  font-family: var(--font-heading-family);
  font-weight: 400;
  font-size: var(--fz-title);
  line-height: 1.3;
  letter-spacing: 0.005em;
  text-transform: none;
}

/* The product page title is the loudest thing on that page. */
.product__title,
.product__title h1 { font-size: var(--fz-h1); font-weight: 400; line-height: var(--lh-display); }

.card-wrapper .card,
.card--standard .card__inner { box-shadow: none; border-radius: 0; }

/* Category vs product titles.
   NOTE: the theme puts .collection-list__item on BOTH category tiles and
   product tiles, so that class cannot tell them apart. The real distinction
   is on .card-wrapper: .collection-card-wrapper vs .product-card-wrapper.
   Targeting .collection-list__item here silently restyled every product
   name on the home page as a 13px uppercase category label. */

/* Category tiles: tracked uppercase Jost, so a category never reads as a
   product name. */
.collection-card-wrapper .card__heading,
.collection-card-wrapper .card__heading a {
  font-family: var(--font-body-family);
  font-weight: 400;
  font-size: var(--fz-nav);
  text-transform: uppercase;
  letter-spacing: var(--track-mid);
}

/* Product tiles: the display serif at reading size. */
.product-card-wrapper .card__heading,
.product-card-wrapper .card__heading a,
.product-card-wrapper .card__heading.h5 {
  font-family: var(--font-heading-family);
  font-weight: 500;
  font-size: var(--fz-title);
  line-height: 1.3;
  letter-spacing: 0.005em;
  text-transform: none;
}

/* Metadata voice: vendor, weave, caption. */
.card__information .caption,
.card-information__wrapper .caption {
  font-family: var(--font-body-family);
  font-size: var(--fz-micro);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-mid);
  color: var(--brand-muted);
}

/* --------------------------------------------------------------------------
   Price
   Premium price setting is quiet, not bold. Tabular figures so columns of
   prices align down a grid.
   -------------------------------------------------------------------------- */
.price,
.price-item,
.price__container {
  font-family: var(--font-body-family);
  font-weight: 400;
  font-size: var(--fz-price);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-tight);
}

/* The theme sets font-weight 700 on card prices with more specificity than a
   bare .price-item, so these selectors go two deep to win it. Heavy prices
   read discount-retail, not premium. */
.card__information .price .price-item,
.card-wrapper .price .price-item,
.price .price-item {
  font-weight: 400;
  font-size: var(--fz-price);
}

.price--on-sale .price-item--sale,
.price__sale .price-item--sale { color: var(--brand-madder); font-weight: 500; }
.price-item--regular { color: var(--brand-muted); }

.badge {
  font-family: var(--font-body-family);
  font-weight: 500;
  font-size: var(--fz-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-mid);
  border-radius: 0;
  padding: 0.4em 0.85em;
}

/* --------------------------------------------------------------------------
   Running copy
   -------------------------------------------------------------------------- */
.rte,
.rte p,
.section__description {
  font-family: var(--font-body-family);
  font-weight: 300;
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   Specifications — fibre, weave, dimensions, care
   Letterspaced small caps rather than monospace: the classic textile spec
   convention. Opt-in so it never leaks into body copy.
   -------------------------------------------------------------------------- */
.brand-spec dt {
  font-family: var(--font-body-family);
  font-size: var(--fz-micro);
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--brand-muted);
}

.brand-spec dd {
  margin: 0;
  font-family: var(--font-body-family);
  font-size: var(--fz-body);
  font-variant-numeric: tabular-nums;
}

.brand-label {
  font-family: var(--font-body-family);
  font-size: var(--fz-label);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Chrome
   -------------------------------------------------------------------------- */
.announcement-bar,
.utility-bar {
  font-family: var(--font-body-family);
  font-size: var(--fz-micro);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-mid);
}

/* A link in the announcement bar inherits the bar's own colour, so without
   this the WhatsApp number reads as plain text and nobody tries tapping it.
   An underline is the affordance; a colour change would fight the bar. */
.announcement-bar a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  /* The bar's text is tracked, which pushes the underline past the final
     letter; trimming the trailing space keeps it tight to the number. */
  text-decoration-skip-ink: auto;

  /* The bar is only 33px tall on a phone, so the anchor's own box is a 16px
     tap target — half the 44px minimum. Padding expands the hit area to the
     full height of the bar and the negative margin keeps the layout
     identical. Still short of 44px, which the bar height simply does not
     allow; the floating WhatsApp button remains the primary tap target. */
  padding-block: 9px;
  margin-block: -9px;
}

.announcement-bar a:hover { text-decoration-thickness: 2px; }

.announcement-bar a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

hr, .section--divider { border-color: var(--brand-rule); }

/* ==========================================================================
   Brand banner (sections/brand-banner.liquid)
   Art-directed full-bleed banner. Desktop gets a 2.4:1 landscape band, mobile
   a 4:5 portrait crop, so weave detail survives on a phone rather than being
   letterboxed. Type is live HTML over the image, never baked into it.
   ========================================================================== */

.brand-banner {
  position: relative;
  display: grid;
  isolation: isolate;
  background: var(--brand-ink);
}

.brand-banner__media,
.brand-banner__media img {
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 100%;
}

/* Scrim: a directional wash, not a flat grey veil over the whole picture.
   Strength is driven by the section's --bb-scrim setting. */
.brand-banner::after {
  content: "";
  grid-area: 1 / 1;
  z-index: 1;
  background: linear-gradient(
    to left,
    rgba(250, 248, 246, calc(var(--bb-scrim, 0.25) * 2.6)) 0%,
    rgba(250, 248, 246, calc(var(--bb-scrim, 0.25) * 1.1)) 38%,
    rgba(250, 248, 246, 0) 68%
  );
}

.brand-banner--light::after {
  background: linear-gradient(
    to left,
    rgba(12, 11, 10, calc(var(--bb-scrim, 0.25) * 2.4)) 0%,
    rgba(12, 11, 10, calc(var(--bb-scrim, 0.25) * 1.1)) 40%,
    rgba(12, 11, 10, 0) 72%
  );
}

.brand-banner--left::after  { transform: scaleX(-1); }
.brand-banner--center::after {
  background: rgba(12, 11, 10, calc(var(--bb-scrim, 0.25) * 1.5));
}

.brand-banner__inner {
  grid-area: 1 / 1;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: clamp(24px, 5vw, 80px);
}

.brand-banner--right  .brand-banner__inner { justify-content: flex-end; }
.brand-banner--left   .brand-banner__inner { justify-content: flex-start; }
.brand-banner--center .brand-banner__inner { justify-content: center; text-align: center; }

.brand-banner__copy {
  /* ch tracks the body font, not the display face, so a ch-based cap is
     far too narrow for 66px Cormorant. Sized against the banner instead:
     the copy sits in the right ~40% of a 2.4:1 band. */
  max-width: min(620px, 46vw);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  color: var(--brand-ink);
}

.brand-banner.brand-banner--light .brand-banner__copy { color: #faf8f6; }
.brand-banner--center .brand-banner__copy { align-items: center; }

.brand-banner__kicker {
  margin: 0;
  font-family: var(--font-body-family);
  font-size: var(--fz-label);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  opacity: 0.85;
}

/* Specificity note: base.css sets an explicit colour and size on h2, which
   beats colour inherited from .brand-banner__copy and beats a single-class
   font-size. These selectors are deliberately three-deep to win that. */
.brand-banner .brand-banner__copy .brand-banner__heading {
  margin: 0;
  font-family: var(--font-heading-family);
  font-weight: 400;
  font-size: var(--fz-display);
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-wrap: balance;
  color: inherit;
}

.brand-banner .brand-banner__copy > * { color: inherit; }

.brand-banner__body {
  margin: 0;
  font-family: var(--font-body-family);
  font-weight: 300;
  font-size: var(--fz-lead);
  line-height: var(--lh-body);
  opacity: 0.92;
}

.brand-banner__button {
  align-self: flex-start;
  margin-top: 0.4rem;
  padding: 0.95em 2.1em;
  border: 1px solid currentColor;
  font-family: var(--font-body-family);
  font-size: var(--fz-label);
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  background: transparent;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.brand-banner--center .brand-banner__button { align-self: center; }

.brand-banner__button:hover,
.brand-banner__button:focus-visible {
  background: var(--brand-ink);
  color: #faf8f6;
}

.brand-banner--light .brand-banner__button:hover,
.brand-banner--light .brand-banner__button:focus-visible {
  background: #faf8f6;
  color: var(--brand-ink);
}

.brand-banner__button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Desktop proportion. aspect-ratio keeps the box reserved before the image
   lands, so the banner never shifts the page as it loads. */
@media screen and (min-width: 750px) {
  .brand-banner { aspect-ratio: 2.4 / 1; }
}

/* Phone: portrait crop, copy sits at the foot over the scrim. */
@media screen and (max-width: 749px) {
  .brand-banner { aspect-ratio: 4 / 5; }
  /* The mobile crop is dense, high-chroma weave, so light type needs a much
     stronger and taller scrim than the desktop band. These stops were set
     against the actual kani hero, where the heading sits roughly 55-65% up
     from the foot -- the previous 0.35 stop left it barely legible. */
  .brand-banner::after {
    background: linear-gradient(
      to top,
      rgba(10, 9, 8, 0.90) 0%,
      rgba(10, 9, 8, 0.78) 28%,
      rgba(10, 9, 8, 0.52) 52%,
      rgba(10, 9, 8, 0.18) 76%,
      rgba(10, 9, 8, 0) 100%
    );
    transform: none;
  }
  /* Belt and braces: a faint shadow keeps the light Cormorant strokes from
     dissolving into a highlight in the weave. */
  .brand-banner__heading,
  .brand-banner__kicker { text-shadow: 0 1px 14px rgba(10, 9, 8, 0.55); }
  .brand-banner__inner { align-items: flex-end; justify-content: flex-start; }
  .brand-banner .brand-banner__copy { color: #faf8f6; max-width: 100%; }
  .brand-banner__button { border-color: #faf8f6; color: #faf8f6; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-banner__button { transition: none; }
}

/* --------------------------------------------------------------------------
   "View all" row beneath a product grid
   -------------------------------------------------------------------------- */
.brand-viewall {
  display: flex;
  justify-content: center;
  padding-block: clamp(20px, 3vw, 40px);
}

.brand-viewall a {
  padding: 1em 2.6em;
  border: 1px solid var(--brand-ink);
  font-family: var(--font-body-family);
  font-size: var(--fz-label);
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brand-ink);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.brand-viewall a:hover,
.brand-viewall a:focus-visible { background: var(--brand-ink); color: #faf8f6; }
.brand-viewall a:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 3px; }


/* ==========================================================================
   Desktop inline navigation
   Spec measured from shawlsbyaima.com at 1440px: 12px uppercase, weight 400,
   0.26px tracking, 8px/10px item padding, 5px between items, centred on its
   own row beneath the logo. Ours runs at 13px because Jost has a smaller
   x-height than Montserrat and reads undersized at 12.

   The hamburger appearing on desktop was NOT a CSS fault: the header section
   setting menu_type_desktop was 'drawer', which makes header.liquid skip
   rendering .header__inline-menu entirely at every width. It is 'dropdown'
   again. The theme's own desktop breakpoint is 990px.
   ========================================================================== */

@media screen and (min-width: 990px) {
  .header__inline-menu { display: block; }

  .header__inline-menu > .list-menu--inline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }

  .header__inline-menu .header__menu-item {
    font-family: var(--font-body-family);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.022em;
    text-transform: uppercase;
    padding: 8px 10px;
    color: var(--brand-ink);
  }

  /* Items with a dropdown need room for the caret.
     base.css positions it `position: absolute; right: 1.5rem`, and the theme
     root is 10px, so the icon's right edge sits 15px in and its 10px width
     puts its LEFT edge 25px from the item's right edge. A flat 10px
     padding-right therefore ran the label straight through the chevron —
     "HOME⌄" with the caret sitting on the E. 28px clears the icon with a
     little air; it is not an arbitrary number. */
  .header__inline-menu .header__menu-item:has(.icon-caret) {
    padding-right: 28px;
  }

  /* Fallback for engines without :has(). summary elements are exactly the
     items that carry a caret in this theme. */
  .header__inline-menu summary.header__menu-item {
    padding-right: 28px;
  }

  /* Aima underlines nothing by default and relies on a quiet hover. */
  .header__inline-menu .header__menu-item:hover,
  .header__inline-menu .header__menu-item:focus-visible { opacity: 0.6; }

  .header__inline-menu .header__menu-item:focus-visible {
    outline: 1px solid var(--brand-ink);
    outline-offset: 2px;
  }
}

/* Below the theme's 990px breakpoint the inline menu is hidden by the theme
   and the hamburger takes over. Asserted here so a future change to the
   header settings cannot leave both visible at once. */
@media screen and (max-width: 989px) {
  .header__inline-menu { display: none; }
}

/* ==========================================================================
   Home page refinements — audit pass
   --------------------------------------------------------------------------
   Findings this block addresses, all measured on the running page rather
   than eyeballed:

   1. Product cards rendered at three different heights (313 / 342 / 370px)
      because titles wrap to one, two or three lines. Image ratio was fixed
      via the section setting (adapt -> portrait); the remaining variance is
      the title, so the title now reserves exactly two lines.
   2. Every section sat on the same flat ground with no tonal separation,
      so the page read as one undifferentiated field.
   3. Card media had no hover affordance — nothing indicated the tile was
      interactive.
   ========================================================================== */

/* --- 1. Uniform card heights -------------------------------------------- */

/* Reserve exactly two lines whether the title needs one or two. Titles
   longer than two lines are clamped rather than allowed to push the card
   taller — the full name is on the product page, and a ragged grid costs
   more than a truncated word.

   Two theme behaviours have to be beaten here, both invisible in the
   stylesheet and only findable in computed styles:
     - base.css sets `display: flow-root` on .card__heading, and
       -webkit-line-clamp is INERT unless display is -webkit-box. Without
       this the clamp silently does nothing and titles ran to 3+ lines.
     - the theme's .h5 class re-sizes the title to 13px at mobile widths,
       beating a single-class font-size rule.
   Hence the .h5 in the selector and the explicit font-size. */
.product-card-wrapper .card__information .card__heading,
.product-card-wrapper .card__information .card__heading.h5 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-heading-family);
  font-weight: 500;
  font-size: var(--fz-title);
  line-height: 1.3;
  /* A FIXED two-line box, not just a floor. base.css wins `display:flow-root`
     and the .h5 font-size with !important, so -webkit-line-clamp stays inert
     and cannot be relied on to truncate. Fixing the height and hiding the
     overflow makes the card uniform regardless of whether the clamp works,
     which is why height is used here rather than min-height alone. */
  height: calc(2 * 1.3 * var(--fz-title));
  min-height: calc(2 * 1.3 * var(--fz-title));
  font-size: var(--fz-title) !important;
  font-family: var(--font-heading-family) !important;
}

/* Category labels are single-line by design; reserve one line so a wrapped
   label cannot shunt its tile out of alignment with its neighbours. */
.collection-card-wrapper .card__heading {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.6em;
}

/* --- 2. Tonal rhythm ----------------------------------------------------- */

/* One quiet tonal shift stops the page reading as a single flat field. It
   goes on the editorial note rather than alternating every section, which
   would read as stripes. */
.shopify-section:has(> .rich-text),
.shopify-section .rich-text {
  background: var(--brand-surface-2, #f2eeea);
}

/* --- 3. Card interaction ------------------------------------------------- */

/* A slow, small scale. Anything faster or larger reads as a marketing page,
   not a textile house. */
.card-wrapper .card__inner,
.card-wrapper .card__media {
  overflow: hidden;
}

.card-wrapper .card__media img,
.card-wrapper .media img {
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.card-wrapper:hover .card__media img,
.card-wrapper:hover .media img {
  transform: scale(1.04);
}

/* The label earns a quiet underline on hover rather than a colour change. */
.product-card-wrapper:hover .card__heading a,
.collection-card-wrapper:hover .card__heading {
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .card-wrapper .card__media img,
  .card-wrapper .media img { transition: none; }
  .card-wrapper:hover .card__media img,
  .card-wrapper:hover .media img { transform: none; }
}

/* --- 4. Section headings ------------------------------------------------- */

/* Centred, with air beneath. The reference sites both give a section title
   its own line and a generous drop before the grid starts. */
.section-header,
.title-wrapper--self-padded-tablet-down,
.collection__title {
  text-align: center;
  margin-bottom: clamp(28px, 3vw, 52px);
}


/* Phone cards are roughly 170px wide in a two-up grid; 22px Cormorant wraps
   too eagerly at that measure. The min-height above is derived from this
   token, so the two-line reservation follows it down automatically. */
@media screen and (max-width: 749px) {
  :root { --fz-title: 18px; }
}

/* --------------------------------------------------------------------------
   Desktop dropdown reveal
   shawlsbyaima.com fades its panels in over ~0.3s. <details> has no native
   transition between closed and open, so the panel is animated on appearance
   instead. Hover opening itself is handled in assets/brand-nav.js.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 990px) {
  .header__inline-menu details[open] > .header__submenu {
    animation: brandNavReveal 260ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
}

@keyframes brandNavReveal {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .header__inline-menu details[open] > .header__submenu { animation: none; }
}

/* ==========================================================================
   Footer
   Dark ground, so the type has to be lighter and more tracked than it is on
   the page body — the same weights read heavier reversed out of black.
   ========================================================================== */

/* Footer palette — deep espresso.
   Chosen over near-black because the rest of this brand is warm (ivory
   ground, madder accent, kani reds) and #1a1a1a was the one cold surface,
   arriving as a 16:1 tonal cliff off the page above it. Espresso carries the
   same weight at a warm hue, so the footer reads as the deepest note of one
   palette rather than a foreign panel.

   Secondary and rule are SOLID hexes, not alpha. The previous 62% opacity
   meant contrast depended on whatever sat behind the text; these values are
   measured against the ground and stay put.

   Ground and text are also set through the footer section's own
   custom_colors_* settings in sections/footer-group.json, so the palette
   stays editable in the Shopify theme editor. These tokens mirror them for
   the rules CSS owns (links, dividers, hover states).

   Measured on #2b2320:  primary 13.70:1 (AAA) · secondary 6.65:1 (AA)
                         accent 5.42:1 (AA) */
.footer {
  --brand-footer-ground: #2b2320;
  --brand-footer-ink: #f6f1ea;
  --brand-footer-muted: #b6a89c;
  --brand-footer-accent: #c98b6b;
  --brand-footer-rule: #453a35;
}

/* Column headings: the quiet tracked label voice used elsewhere for
   categories and nav, not the display serif — three serif headings in a row
   would compete with the brand block above them. */
.footer .footer-block__heading {
  font-family: var(--font-body-family);
  font-size: var(--fz-label);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--brand-footer-ink);
  margin-bottom: 1.4em;
}

/* The brand headline is the one place the serif belongs down here. */
.footer .footer-block--brand h2,
.footer .footer-block__details-content h2 {
  font-family: var(--font-heading-family);
  font-weight: 400;
  font-size: var(--fz-h3);
  letter-spacing: 0.01em;
  text-transform: none;
}

.footer .rte p,
.footer .footer-block__details-content p {
  font-family: var(--font-body-family);
  font-weight: 300;
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  color: var(--brand-footer-muted);
  max-width: 44ch;
}

/* Link columns. Generous leading so the list reads as a considered column
   rather than a dense block. */
.footer .rte a,
.footer .footer-block__details-content a,
.footer .list-menu__item--link {
  font-family: var(--font-body-family);
  font-weight: 300;
  font-size: var(--fz-body);
  line-height: 2.15;
  letter-spacing: 0.01em;
  color: var(--brand-footer-muted);
  text-decoration: none;
  transition: color 200ms ease;
}

.footer .rte a:hover,
.footer .footer-block__details-content a:hover,
.footer .list-menu__item--link:hover,
.footer .rte a:focus-visible,
.footer .footer-block__details-content a:focus-visible {
  color: var(--brand-footer-accent);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

.footer a:focus-visible { outline: 1px solid var(--brand-footer-ink); outline-offset: 3px; }

/* Bottom bar: copyright, policies, vendor credit. */
.footer__content-bottom {
  border-top: 1px solid var(--brand-footer-rule);
  margin-top: clamp(28px, 4vw, 52px);
  padding-top: clamp(20px, 2.4vw, 32px);
}

.footer__copyright,
.footer__copyright small,
.footer .policies,
.footer .policies a {
  font-family: var(--font-body-family);
  font-weight: 300;
  font-size: var(--fz-micro);
  letter-spacing: 0.04em;
  color: var(--brand-footer-muted);
}

/* The footer logo sits on black, so give it room rather than letting it
   crowd the description beneath. */
.footer .footer-block__brand-info img,
.footer-block__details-content img {
  margin-bottom: 1.1em;
}

@media screen and (max-width: 749px) {
  .footer .footer-block__heading { margin-bottom: 1em; }
  .footer .rte p { max-width: 100%; }
}

/* ==========================================================================
   Product card — premium pass
   --------------------------------------------------------------------------
   Measured starting point: a 49px solid "Choose options" button sat
   permanently on every card, the theme already ships a second image for a
   hover swap, and the card itself is already borderless on the page ground.

   Three changes:
     1. The buy button becomes a quiet overlay that appears on hover, so the
        resting grid is photography and type only. Touch devices keep it in
        flow, since they cannot hover.
     2. The hover swap is left to do the work on its own — the scale I had
        added earlier fought it, two effects competing over one 700ms.
     3. Tighter, more deliberate spacing between image, title and price.
   ========================================================================== */

/* --- 1. No buy control on the card -------------------------------------- */
/* Both reference sites the client chose — shawlsbyaima.com and
   pk.lamaretail.com — show photography, title and price on a card and
   nothing else. The card links to the product page, where the real buying
   decision happens with full imagery, variants and specifications.

   Shrine PRO ships a permanent 49px solid "Choose options" button on every
   card, which is direct-response styling and the single least premium thing
   in the grid. It is hidden rather than deleted, so restoring it is a
   one-line change: drop this rule.

   (An earlier attempt overlaid it on the image instead. That failed because
   .quick-add is a sibling of .card__inner, not a child, so it could not be
   anchored to the image box without brittle offsets. Hiding it is both
   simpler and closer to the references.) */
.product-card-wrapper .quick-add { display: none; }

/* --- 2. Let the image swap carry the hover on its own ------------------- */
/* The theme's .media--hover-effect cross-fades to the second shot. A scale
   on top of that is two effects competing, so product cards opt out of the
   zoom. Category tiles keep it — they have only one image. */
.product-card-wrapper .card__media img,
.product-card-wrapper .media img { transition: opacity 500ms ease; }

.product-card-wrapper:hover .card__media img,
.product-card-wrapper:hover .media img { transform: none; }

/* --- 3. Information block ----------------------------------------------- */
.product-card-wrapper .card__information {
  padding: 16px 2px 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.product-card-wrapper .card__information .card__heading { margin: 0; }
.product-card-wrapper .card-information { margin: 0; }

/* ==========================================================================
   Product detail page
   The card grid, nav and footer all use square edges and tracked uppercase
   labels; the PDP shipped with pill-shaped variant swatches and a soft grey
   quantity box, which broke that language at the exact moment the customer
   is deciding to spend Rs. 10,000+.
   ========================================================================== */

/* --- Option labels: the tracked metadata voice --------------------------- */
.product-form__input > .form__label,
.product-form__input legend,
.product__info-container .form__label {
  font-family: var(--font-body-family);
  font-size: var(--fz-micro);
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--brand-muted);
  margin-bottom: 0.9em;
}

/* --- Variant swatches: square, hairline, ink when chosen ---------------- */
.product-form__input input[type='radio'] + label,
.product-form__input .swatch-input__label,
variant-swatches label,
.product-variant-picker label {
  border-radius: 0 !important;
  border: 1px solid rgba(26, 26, 26, 0.18);
  background: transparent;
  font-family: var(--font-body-family);
  font-size: var(--fz-micro);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  padding: 0.85em 1.25em;
  color: var(--brand-ink);
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.product-form__input input[type='radio']:hover + label,
.product-form__input .swatch-input__label:hover {
  border-color: var(--brand-ink);
}

.product-form__input input[type='radio']:checked + label,
.product-form__input input[type='radio'][aria-checked='true'] + label {
  background: var(--brand-ink) !important;
  border-color: var(--brand-ink) !important;
  color: #faf8f6 !important;
}

.product-form__input input[type='radio']:focus-visible + label {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}

/* --- Quantity: square, hairline, not a grey pill ------------------------ */
.quantity,
.product-form__quantity .quantity {
  border-radius: 0;
  border: 1px solid rgba(26, 26, 26, 0.18);
  background: transparent;
}

.quantity__input {
  font-family: var(--font-body-family);
  font-size: var(--fz-body);
  font-variant-numeric: tabular-nums;
  background: transparent;
}

/* --- Buy buttons: more generous, properly tracked ----------------------- */
.product-form__submit,
.shopify-payment-button__button--unbranded {
  min-height: 54px;
  border-radius: 0 !important;
  font-family: var(--font-body-family);
  font-size: var(--fz-label);
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
}

/* --- Price: it has to hold its own under a 62px title ------------------- */
.product__info-container .price,
.product__info-container .price-item {
  font-family: var(--font-body-family);
  font-size: clamp(22px, 1.9vw, 28px);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-tight);
}

/* --- Description: a comfortable measure and real leading --------------- */
.product__description {
  font-family: var(--font-body-family);
  font-weight: 300;
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  max-width: 62ch;
}

.product__description strong { font-weight: 500; }

/* --- Vertical rhythm down the info column ------------------------------- */
.product__info-container > * + * { margin-top: clamp(18px, 1.6vw, 26px); }
.product__title { margin-bottom: 0.25em; }

/* --- Gallery: square corners, quiet thumbnails -------------------------- */
.product__media,
.product__media img,
.product__modal-opener,
.thumbnail { border-radius: 0 !important; }

.thumbnail { border: 1px solid transparent; transition: border-color 180ms ease; }
.thumbnail[aria-current='true'],
.thumbnail:hover { border-color: var(--brand-ink); }

/* --- Related products heading matches the home page sections ------------ */
.related-products h2 {
  font-family: var(--font-heading-family);
  font-weight: 400;
  font-size: var(--fz-h2);
  letter-spacing: 0.01em;
  text-transform: none;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Footer logo size
   The footer runs on #2b2320, so it needs a light version of the mark. That
   used to be a CSS `content` swap pointing at a cream PNG in assets/, because
   no light logo existed in Shopify Files. One does now, and brand_image points
   straight at it, so the swap is gone and the Theme Editor owns the choice
   again — change the footer logo there, not here.

   Only the sizing stays: the lockup is roughly 2:1, so it needs a narrower
   box than the old 4.9:1 wordmark or it dominates the footer column.
   -------------------------------------------------------------------------- */
.footer .footer-block__brand-info .footer-block__image-wrapper img,
.footer-block__brand-info .footer-block__image-wrapper img {
  width: 150px;
  height: auto;
  max-width: 100%;
}

@media screen and (max-width: 749px) {
  .footer .footer-block__brand-info .footer-block__image-wrapper img,
  .footer-block__brand-info .footer-block__image-wrapper img { width: 124px; }
}
}

/* ==========================================================================
   Tablet grid overflow (750–989px)
   --------------------------------------------------------------------------
   At 768px the homepage pushed 70px past the viewport (scrollWidth 838 on a
   768 viewport). Three things combined:

     1. columns_desktop is 4 and the theme applies it from 750px up, so a
        tablet gets the full desktop column count.
     2. The theme sets grid-template-columns to a FIXED pixel width computed
        as containerWidth / columns (167.07px), then adds a 40px gap on top.
        Four columns therefore need 788px inside a 668px container.
     3. With slider_desktop off the Splide carousel never initialises, so
        .splide__track never receives the overflow:hidden that would have
        hidden the overspill in slider mode.

   Fixing the column basis rather than the symptom: 1fr columns subtract the
   gaps themselves, so the track can never exceed its container regardless of
   how many columns or how wide the gap. Three columns at this width gives
   ~196px cards, which suits the portrait ratio.
   ========================================================================== */

@media screen and (min-width: 750px) and (max-width: 989px) {
  .section-collection-list .splide__list,
  .section-collection-list .grid,
  .shopify-section .splide__list,
  .shopify-section .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Belt and braces: if a track is ever left un-initialised again, clip it
     rather than letting it push the page sideways. */
  .splide:not(.is-active) .splide__track { overflow: hidden; }
}

/* Small tablets / large phones: two up reads better than three. */
@media screen and (min-width: 750px) and (max-width: 819px) {
  .section-collection-list .splide__list,
  .section-collection-list .grid,
  .shopify-section .splide__list,
  .shopify-section .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --------------------------------------------------------------------------
   Footer social icons
   Set in the muted footer tone rather than full cream, so they read as a
   quiet secondary row beneath the brand block instead of competing with the
   column headings. They lift to the warm accent on hover, matching the link
   behaviour elsewhere in the footer.
   -------------------------------------------------------------------------- */
.footer .list-social__link,
.footer .list-social a {
  color: var(--brand-footer-muted);
  /* 19px icon + 2 x 12.5px = a 44px target, the accessibility minimum.
     The theme's own padding gave 33px. Root font-size here is 10px, so
     1.25rem is 12.5px. */
  padding: 1.25rem;
  transition: color 200ms ease;
}

.footer .list-social__link svg,
.footer .list-social a svg {
  width: 19px;
  height: 19px;
}

.footer .list-social__link:hover,
.footer .list-social a:hover,
.footer .list-social__link:focus-visible {
  color: var(--brand-footer-accent);
}

.footer .list-social__link:focus-visible {
  outline: 1px solid var(--brand-footer-accent);
  outline-offset: 2px;
}

.footer .list-social {
  gap: 0.2rem;
  margin-top: 1.1rem;
  justify-content: flex-start;
}

@media screen and (max-width: 749px) {
  .footer .list-social { justify-content: flex-start; margin-top: 0.9rem; }
  /* 44px minimum touch target on phones */
  .footer .list-social__link,
  .footer .list-social a { padding: 1.35rem; }
}

/* ==========================================================================
   Mobile footer — compaction pass
   --------------------------------------------------------------------------
   Measured at 375x812: the footer stood 906px tall on an 812px viewport,
   62% of the whole page. Everything below is scoped inside the existing
   mobile breakpoint, so the desktop footer is untouched by construction.

   Where the height actually went, and what each rule addresses:

     292px  Shop column, 8 links at a 36.55px line-height (a 2.15 ratio).
            That ratio was set for the DESKTOP footer, where the open
            leading reads as considered. On a 163px-wide phone column it is
            just air.
     144px  brand description - 184 characters over five lines.
      98px  genuine empty space: a 40px block margin plus 58px between the
            blocks wrapper and the bottom bar.
      66px  footer padding, 42 top / 24 bottom.

   NOTE: an earlier reading put the empty gap at 250px. That was wrong - it
   measured from the last link in DOM order, which sits in the shorter
   Explore column, while the Shop column extends 146px further down and
   fills that space. The real figure is 98px.
   ========================================================================== */

@media screen and (max-width: 749px) {

  /* Link leading: 2.15 is a desktop ratio. 1.6 keeps the 44px touch target
     (17px x 1.6 = 27px line + padding) while removing roughly 8px of dead
     leading per link. */
  .footer .rte a,
  .footer .footer-block__details-content a,
  .footer .list-menu__item--link {
    line-height: 1.6;
    padding-block: 0.35rem;   /* preserves the tap target the leading gave */
  }

  /* The description earns its place on desktop, where there is width for it.
     On a phone five lines of body copy sit between the logo and the links
     the customer actually came for. Clamped to two, full text still present
     for assistive tech and search engines. */
  /* !! SCOPE CAREFULLY. The Shop and Explore link columns render their links
     inside a <p> as well, so a clamp on `.footer .rte p` silently truncated
     the navigation - it hid 6 of 8 Shop links while appearing to "save"
     height. The clamp must reach the brand description ONLY, hence the
     brand-info scope plus a :not(:has(a)) guard so any future paragraph
     containing links is excluded automatically. */
  .footer .footer-block__brand-info p:not(:has(a)),
  .footer .footer-block__brand-info .rte p:not(:has(a)) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
  }

  /* Type step applies to the description regardless of the clamp. */
  .footer .footer-block__brand-info p {
    font-size: var(--fz-micro);
    line-height: 1.65;
  }

  /* Close the measured 98px of empty space without crowding. */
  .footer .footer-block { margin-bottom: 24px; }
  .footer .footer-block:last-child { margin-bottom: 0; }
  .footer .footer__blocks-wrapper { margin-bottom: 0; }

  .footer__content-bottom {
    margin-top: 20px;
    padding-top: 18px;
  }

  /* Trim the outer padding; 42px above a logo is desktop generosity. */
  .footer { padding-top: 30px; padding-bottom: 18px; }

  /* Headings sit closer to their lists. */
  .footer .footer-block__heading { margin-bottom: 0.85em; }

  /* The social row no longer needs the desktop drop. */
  .footer .list-social { margin-top: 0.7rem; }
}

/* ==========================================================================
   Social videos (sections/brand-social-videos.liquid)
   --------------------------------------------------------------------------
   Deliberate departure from the brief's "rounded corners": every surface in
   this storefront — cards, buttons, swatches, banners — is square-edged, and
   that is what reads classic here. Rounding only this section would make it
   look bolted on. Consistency beats the generic convention.

   9:16 cards, because that is the native shape of TikTok and Reels footage.
   Any other ratio crops the subject's head or feet.
   ========================================================================== */

.brand-social {
  padding-block: var(--bs-pad-top, 72px) var(--bs-pad-bottom, 72px);
  padding-inline: clamp(16px, 4vw, 48px);
  background: var(--brand-ground);
}

.brand-social__head {
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 44px);
}

.brand-social__kicker {
  margin: 0 0 0.7em;
  font-family: var(--font-body-family);
  font-size: var(--fz-label);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--brand-muted);
}

.brand-social__heading {
  margin: 0;
  font-family: var(--font-heading-family);
  font-weight: 400;
  font-size: var(--fz-h2);
  line-height: var(--lh-heading);
  letter-spacing: 0.01em;
}

.brand-social__sub {
  margin: 0.6em auto 0;
  max-width: 54ch;
  font-family: var(--font-body-family);
  font-weight: 300;
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  color: var(--brand-muted);
}

/* --- Grid / swipeable row ------------------------------------------------ */
.brand-social__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(12px, 1.4vw, 20px);
}

/* The explicit template belongs to the GRID layout only. Declaring it on the
   shared .brand-social__grid meant the swipeable row inherited four explicit
   columns; items then filled those instead of the implicit track, so
   grid-auto-columns never engaged and every card collapsed to 76.75px. */
.brand-social--grid .brand-social__grid {
  grid-template-columns: repeat(var(--bs-cols, 4), minmax(0, 1fr));
}

.brand-social--scroll .brand-social__grid {
  grid-auto-flow: column;
  /* Viewport units, NOT percentages. A percentage track inside an
     overflow-x scroller has no resolvable containing size - the scroller's
     width depends on its tracks and vice versa - so the percentage collapses
     and every card rendered at 76.75px instead of the intended width. vw has
     a fixed reference and sizes correctly. */
  grid-auto-columns: minmax(0, calc((100vw - 2 * clamp(16px, 4vw, 48px) - (var(--bs-cols, 4) - 1) * 16px) / var(--bs-cols, 4)));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* room for the focus ring, which would otherwise clip against the scroller */
  padding-block: 4px;
}

.brand-social--scroll .brand-social__grid::-webkit-scrollbar { display: none; }
.brand-social--scroll .brand-social__item { scroll-snap-align: start; }

/* --- Card ---------------------------------------------------------------- */
.brand-social__card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--brand-ink);
}

.brand-social__media {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;      /* reserves the box before media loads: no CLS */
  overflow: hidden;
  background: var(--brand-surface-2, #f2eeea);
}

.brand-social__img,
.brand-social__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand-social__video { z-index: 1; opacity: 0; transition: opacity 260ms ease; }
.brand-social__card:hover .brand-social__video { opacity: 1; }

/* Placeholder when no preview image was supplied — keeps the grid aligned
   rather than collapsing the card. */
.brand-social__img--empty {
  background:
    repeating-linear-gradient(45deg,
      rgba(26, 26, 26, 0.045) 0 8px,
      transparent 8px 16px);
}

/* A bottom scrim so the caption and badge hold over any footage. */
.brand-social__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top,
    rgba(10, 9, 8, 0.42) 0%,
    rgba(10, 9, 8, 0.10) 34%,
    rgba(10, 9, 8, 0) 62%);
}

/* --- Play mark ----------------------------------------------------------
   Always visible, never only on hover. A still that reveals its play badge
   only on hover reads as a photograph on a phone, where there is no hover —
   and the card would then be pretending to be something it is not. */
.brand-social__play {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(250, 248, 246, 0.85);
  color: #faf8f6;
  background: rgba(10, 9, 8, 0.28);
  backdrop-filter: blur(2px);
  transition: background-color 220ms ease, transform 220ms ease;
}

.brand-social__play svg { width: 20px; height: 20px; margin-left: 2px; }

.brand-social__card:hover .brand-social__play {
  background: rgba(10, 9, 8, 0.52);
  transform: translate(-50%, -50%) scale(1.06);
}

/* --- Platform badge ------------------------------------------------------ */
.brand-social__badge {
  position: absolute;
  z-index: 3;
  left: 10px;
  bottom: 10px;
  font-family: var(--font-body-family);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: #faf8f6;
  padding: 0.35em 0.7em;
  border: 1px solid rgba(250, 248, 246, 0.5);
}

/* --- Caption ------------------------------------------------------------- */
.brand-social__caption {
  font-family: var(--font-body-family);
  font-weight: 300;
  font-size: var(--fz-micro);
  line-height: 1.5;
  color: var(--brand-muted);
  /* A FIXED two-line box, not just a clamp. Clamping alone caps long
     captions but lets short or absent ones shrink the card, which is what
     produced 397 / 422 / 440px heights in the same row. Height, not
     max-height, so every card matches whatever the captions say. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: calc(2 * 1.5 * var(--fz-micro));
}

.brand-social__card:hover .brand-social__caption { color: var(--brand-ink); }

/* --- Focus --------------------------------------------------------------- */
.brand-social__card:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 3px;
}

/* --- Mobile -------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  /* MOBILE USES THE TWO-UP GRID, whichever layout is selected.

     The swipeable row does not size reliably here: its implicit tracks
     collapsed to 76.75px regardless of whether they were expressed as a
     percentage (no resolvable containing size inside an overflow scroller)
     or as vw. Rather than ship a carousel whose cards are a fifth of their
     intended width, mobile falls back to the grid, which measures correctly.

     The brief allows either a swipeable carousel or a considered two-column
     grid on mobile, so this is a supported choice rather than a compromise.
     The desktop scroller is unaffected and works. */
  .brand-social .brand-social__grid,
  .brand-social--scroll .brand-social__grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
  }

  /* Scoped to the GRID layout only. An unscoped
     `.brand-social__grid { grid-template-columns: repeat(2, 1fr) }` also hit
     the swipeable row, overriding its `grid-template-columns: none` and
     packing four cards into the visible width — 77px each, and the row
     stopped scrolling because scrollWidth then equalled clientWidth. */
  .brand-social--grid .brand-social__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-social__play { width: 40px; height: 40px; }
  .brand-social__play svg { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-social__video,
  .brand-social__play,
  .brand-social__caption { transition: none; }
  .brand-social__card:hover .brand-social__play { transform: translate(-50%, -50%); }
}

/* ==========================================================================
   WhatsApp
   Two components, one visual language:
     .brand-wa-float   — site-wide floating circle (sections/brand-whatsapp-float)
     .brand-wa-product — enquiry button on the product page (blocks/whatsapp-product)

   Sizes are in px on purpose. Shrine PRO sets html{font-size:10px}, so a rem
   here would render at 62.5% — see the warning at the top of this file.
   -------------------------------------------------------------------------- */

:root {
  /* WhatsApp greens, measured against this storefront's #faf8f6 ground.
     WCAG 1.4.11 asks for 3:1 on a control's edge and on the glyph inside it,
     and 1.4.3 asks 4.5:1 of any label text.

       #25d366  the familiar bright green — 1.98:1 glyph, 1.87:1 edge. Fails
                both. Kept available because it is the colour people
                recognise, but it is not the default.
       #128c7e  WhatsApp's own darker brand green — 4.14:1 and 3.9:1. Passes,
                still unmistakably WhatsApp, and sits far better against a
                monochrome storefront. This is the default.
       #1a1a1a  --brand-ink, for merchants who want no second colour at all.
                17.4:1. */
  --brand-wa-teal: #128c7e;
  --brand-wa-teal-dark: #0e7065;
  --brand-wa-green: #25d366;
  --brand-wa-green-dark: #1da851;
}

/* --- Floating button ---------------------------------------------------- */
.brand-wa-float {
  /* Fallbacks so the button is still correctly placed if the section's
     inline {% style %} block is ever stripped or fails to parse. */
  --brand-wa-offset-x: 20px;
  --brand-wa-offset-y: 20px;
  --brand-wa-size: 56px;
  --brand-wa-gap: 16px;

  /* --brand-wa-lift is written by the section's own script, which measures
     the scroll-to-top button and the product page's sticky add-to-cart bar
     and lifts this button clear of them. It stays 0 when nothing is there. */
  --brand-wa-lift: 0px;

  position: fixed;
  bottom: calc(var(--brand-wa-offset-y) + var(--brand-wa-lift));
  /* Matches the vendor's floating controls (.scroll-to-top-btn, .music-player)
     so drawers, modals and the cart overlay still sit above it. */
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: var(--brand-wa-size);
  height: var(--brand-wa-size);
  padding: 0;
  box-sizing: border-box;

  border-radius: 50%;
  /* Overridden per theme below; this is the accessible default. */
  background: var(--brand-wa-fill, var(--brand-wa-teal));
  color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
  /* `bottom` is animated at 0.15s to match the vendor's own floating
     controls, so the two do not slide past each other at different speeds. */
  transition: background-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease, width 0.22s ease, border-radius 0.22s ease,
    bottom 0.15s ease-in-out;
}

.brand-wa-float--bottom-right { right: var(--brand-wa-offset-x); }
.brand-wa-float--bottom-left  { left: var(--brand-wa-offset-x); }

/* Fill options, chosen in the Theme Editor. */
.brand-wa-float--theme-green {
  --brand-wa-fill: var(--brand-wa-green);
  --brand-wa-fill-hover: var(--brand-wa-green-dark);
}

.brand-wa-float--theme-ink {
  --brand-wa-fill: var(--brand-ink);
  --brand-wa-fill-hover: #000;
}

.brand-wa-float__icon {
  width: calc(var(--brand-wa-size) * 0.56);
  height: calc(var(--brand-wa-size) * 0.56);
  flex: 0 0 auto;
  pointer-events: none;
}

.brand-wa-float:hover,
.brand-wa-float:focus-visible {
  background: var(--brand-wa-fill-hover, var(--brand-wa-teal-dark));
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
  transform: translateY(-2px);
}

.brand-wa-float:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 3px;
}

/* Optional label. The circle stays a circle until the pointer arrives, so the
   resting state never crowds the corner on small screens. */
.brand-wa-float__label {
  font-family: var(--font-body-family);
  font-size: var(--fz-label);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.22s ease, opacity 0.18s ease;
}

.brand-wa-float--labelled:hover,
.brand-wa-float--labelled:focus-visible {
  width: auto;
  padding: 0 20px 0 14px;
  border-radius: calc(var(--brand-wa-size) / 2);
}

.brand-wa-float--labelled:hover .brand-wa-float__label,
.brand-wa-float--labelled:focus-visible .brand-wa-float__label {
  max-width: 180px;
  opacity: 1;
}

/* --- Product enquiry button --------------------------------------------- */
.brand-wa-product {
  /* Mirrors the Buy it now button's own spacing so the two read as one stack
     rather than as a bolted-on extra. */
  margin-top: 10px;
}

.brand-wa-product__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  /* 54px matches .product-form__submit / .shopify-payment-button in this file,
     and clears the 44px minimum touch target. */
  min-height: 54px;
  padding: 12px 20px;
  box-sizing: border-box;

  font-family: var(--font-body-family);
  font-size: var(--fz-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-mid);
  text-align: center;
  text-decoration: none;

  /* Square, like every other button on this storefront. */
  border-radius: 0;
  transition: background-color 0.18s ease, color 0.18s ease,
    border-color 0.18s ease;
}

.brand-wa-product__icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.brand-wa-product__link:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}

/* Outline — the default. Sits under Buy it now without competing with it. */
.brand-wa-product--outline .brand-wa-product__link {
  background: transparent;
  color: var(--brand-ink);
  border: 1px solid var(--brand-ink);
}

.brand-wa-product--outline .brand-wa-product__link:hover {
  background: var(--brand-ink);
  color: var(--brand-ground);
}

/* Solid — for when the merchant wants enquiries to lead. The darker green,
   not #25d366: this variant carries uppercase label text, which needs 4.5:1,
   and the bright green manages only 1.98:1 against white. */
.brand-wa-product--solid .brand-wa-product__link {
  background: var(--brand-wa-teal);
  color: #fff;
  border: 1px solid var(--brand-wa-teal);
}

.brand-wa-product--solid .brand-wa-product__link:hover {
  background: var(--brand-wa-teal-dark);
  border-color: var(--brand-wa-teal-dark);
  color: #fff;
}

/* Quiet — a tracked text link for merchants who want the option present but
   unemphasised. Still full width so the tap target stays honest. */
.brand-wa-product--quiet .brand-wa-product__link {
  background: transparent;
  color: var(--brand-muted);
  border: 0;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.brand-wa-product--quiet .brand-wa-product__link:hover { color: var(--brand-ink); }

@media screen and (max-width: 749px) {
  .brand-wa-product__link { min-height: 50px; }
  .brand-wa-product--quiet .brand-wa-product__link { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-wa-float,
  .brand-wa-float__label,
  .brand-wa-product__link { transition: none; }
  .brand-wa-float:hover,
  .brand-wa-float:focus-visible { transform: none; }
}

/* --------------------------------------------------------------------------
   Social video embeds
   The platform's own player, injected by sections/brand-social-videos.liquid
   once the card is near the viewport (or clicked). Before that the card shows
   the same placeholder the link-out cards use, so the grid never reflows.

   Each platform wraps its video in a different amount of its own chrome, so
   the frames need different aspect ratios — measured 2026-10-19 against the
   shop's real videos rather than guessed.
   -------------------------------------------------------------------------- */
.brand-social__embed {
  position: relative;
  display: block;
  width: 100%;
  /* ONE ratio for every platform, deliberately.

     Each platform wraps the video in a different amount of its own chrome —
     Instagram stacks a header and a like/comment footer, Facebook almost
     nothing — so per-platform ratios left the row ragged at 571px against
     642px, with the captions landing at different heights. A mixed row of
     tall and short cards reads as a bug on a storefront this plain.

     So the box is sized to the greediest player, Instagram's, and the others
     letterbox inside it. Their own players handle that; a ragged row is the
     more expensive problem. */
  aspect-ratio: 1 / 2;
  overflow: hidden;
  background: var(--brand-rule);
}

.brand-social__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* The placeholder sits under the iframe and is revealed only while the frame
   is still blank, so a slow third-party load never shows an empty card. */
.brand-social__embed .brand-social__card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 1;
}

.brand-social__embed .brand-social__media {
  position: absolute;
  inset: 0;
  height: 100%;
}

.brand-social__embed--ready .brand-social__card { display: none; }

.brand-social__embed-trigger:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: -3px;
}

/* A click-to-load card is a button, so make sure it inherits nothing odd. */
.brand-social__embed-trigger { font: inherit; color: inherit; text-align: inherit; }

@media screen and (max-width: 749px) {
  /* Phones show fewer, wider cards, so the chrome costs proportionally less
     height and the box can be a little tighter. */
  .brand-social__embed { aspect-ratio: 1 / 1.9; }
}

/* --------------------------------------------------------------------------
   Horizontal ticker
   Replaces the announcement bar's hold-then-dart slide with continuous
   constant-speed motion. The movement is a CSS `animation: linear infinite`
   in the vendor section, so it glides rather than snapping every few seconds.
   -------------------------------------------------------------------------- */
.horizontal-ticker,
.horizontal-ticker__item {
  font-family: var(--font-body-family);
  font-size: var(--fz-micro);
  font-weight: 400;
  letter-spacing: var(--track-mid);
}

/* Same reasoning as the announcement bar: a link in here inherits the bar's
   colour, so without an underline the phone number reads as plain text. */
.horizontal-ticker a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  /* The row is short, so pad the anchor out to a usable hit area without
     shifting anything. The ticker pauses on hover, which is what makes a
     moving link clickable at all. */
  padding-block: 9px;
  margin-block: -9px;
}

.horizontal-ticker a:hover { text-decoration-thickness: 2px; }

.horizontal-ticker a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* An infinite marquee is exactly what WCAG 2.2.2 is about, and the vendor
   section has no reduced-motion handling of its own — base.css only pauses
   animation for a `.motion-reduce` class the ticker never carries. So stop it
   here. The content is still fully readable: the track is a duplicated list,
   and the first copy sits in its resting position with the messages in view. */
@media (prefers-reduced-motion: reduce) {
  .horizontal-ticker__wrapper,
  .horizontal-ticker__list,
  [class*='horizontal-ticker'] {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Low-stock badge (snippets/brand-stock-badge.liquid)
   Driven by live inventory, not by tags, so it clears itself as pieces sell.
   Most of this catalogue is one to five pieces, so the badge has to be quiet:
   an outline, not a shout. A filled badge on nearly every card would read as
   decoration and stop being believed.
   -------------------------------------------------------------------------- */
.brand-stock-badge {
  display: inline-block;
  font-family: var(--font-body-family);
  font-size: var(--fz-micro);
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 9px;
  border-radius: 0;
  background: var(--brand-ground);
  color: var(--brand-ink);
  /* The outline carries it. On pale shawl photography a solid fill would
     fight the product; the hairline reads as a label on the garment. */
  border: 1px solid var(--brand-ink);
  white-space: nowrap;
}

/* The theme stacks badges in one container, so give it a gap rather than
   letting them butt together when a product is both low and on sale. */
.card__badge { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }

@media screen and (max-width: 749px) {
  .brand-stock-badge { font-size: 11px; padding: 5px 7px; letter-spacing: var(--track-tight); }
}