/*
Theme Name: Fashion Store
Theme URI: https://eternaltech.dev
Description: Child theme for Fashion Store. Carries the homepage and the type, so the store looks like a shop rather than a default install, without pulling in a page builder.
Author: Eternal Technology
Template: astra
Version: 1.0.0
Text Domain: etfashion
*/

/* ═══════════════════════════════════════════════════════════════════
   Type
   Playfair Display for headings, Jost for everything else. A high
   contrast serif against a geometric sans is the pairing fashion
   retail actually uses; it reads as considered rather than as a
   default theme.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --etf-ink: #14110f;
  --etf-body: #4a4644;
  --etf-line: #e6e1dc;
  --etf-cream: #f6f3ef;
  --etf-accent: #8c6b4f;
  --etf-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --etf-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
}

body,
.ast-container,
button, input, select, textarea {
  font-family: var(--etf-sans);
  color: var(--etf-body);
  letter-spacing: 0.01em;
}

h1, h2, h3, h4,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--etf-serif);
  color: var(--etf-ink);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Small caps labels are what carry the "premium" read, not more colour. */
.etf-eyebrow {
  font-family: var(--etf-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--etf-accent);
}

/* ═══════════════════════════════════════════════════════════════════
   Hero slider
   Slides are stacked and cross faded with opacity, so there is no
   layout shift and no library. Autoplay pauses on hover, and stops
   entirely for anyone who asked the OS for less motion.
   ═══════════════════════════════════════════════════════════════════ */
.etf-hero { position: relative; overflow: hidden; background: var(--etf-cream); }
.etf-hero__track { position: relative; min-height: clamp(460px, 62vw, 660px); }
.etf-hero__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility .9s;
  display: grid; align-items: center;
}
.etf-hero__slide.is-active { opacity: 1; visibility: visible; }
.etf-hero__media { position: absolute; inset: 0; }
.etf-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
/* The copy sits on the left, so the wash only darkens that side and the
   garment on the right stays readable. */
.etf-hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,17,15,.62) 0%, rgba(20,17,15,.34) 42%, rgba(20,17,15,0) 72%);
}
.etf-hero__inner {
  position: relative; width: 100%;
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
}
.etf-hero__copy { max-width: 520px; color: #fff; }
.etf-hero__copy .etf-eyebrow { color: #e8d9c8; }
.etf-hero__title {
  font-family: var(--etf-serif); color: #fff;
  font-size: clamp(38px, 5.2vw, 66px); line-height: 1.06;
  margin: 14px 0 16px; font-weight: 500;
}
.etf-hero__text { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.86); margin-bottom: 28px; }

.etf-btn {
  display: inline-block; padding: 14px 30px;
  font-family: var(--etf-sans); font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  background: #fff; color: var(--etf-ink);
  border: 1px solid #fff; transition: background .25s, color .25s;
}
.etf-btn:hover { background: transparent; color: #fff; }
.etf-btn--ink { background: var(--etf-ink); color: #fff; border-color: var(--etf-ink); }
.etf-btn--ink:hover { background: transparent; color: var(--etf-ink); }

.etf-hero__dots {
  position: absolute; left: 0; right: 0; bottom: 26px;
  display: flex; gap: 10px; justify-content: center;
}
.etf-hero__dots button {
  width: 30px; height: 3px; padding: 0; border: 0; cursor: pointer;
  background: rgba(255,255,255,.45); transition: background .25s;
}
.etf-hero__dots button[aria-current="true"] { background: #fff; }

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

/* ═══════════════════════════════════════════════════════════════════
   Sections
   ═══════════════════════════════════════════════════════════════════ */
.etf-section { padding: clamp(56px, 7vw, 92px) 24px; }
.etf-section--cream { background: var(--etf-cream); }
.etf-wrap { max-width: 1200px; margin: 0 auto; }
.etf-head { text-align: center; margin-bottom: 44px; }
.etf-head h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 12px 0 10px; }
.etf-head p { color: var(--etf-body); max-width: 560px; margin: 0 auto; line-height: 1.7; }

/* Category tiles: image does the talking, label sits under a thin rule. */
.etf-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.etf-cat { position: relative; display: block; text-decoration: none; overflow: hidden; background: #fff; }
.etf-cat__img { aspect-ratio: 4 / 5; overflow: hidden; }
.etf-cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.etf-cat:hover .etf-cat__img img { transform: scale(1.045); }
.etf-cat__label { padding: 16px 4px 4px; display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--etf-line); margin-top: 14px; }
.etf-cat__label span:first-child { font-family: var(--etf-serif); font-size: 19px; color: var(--etf-ink); }
.etf-cat__label span:last-child { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--etf-accent); }

/* Cut-out promo strip. The PNGs have no background, so they sit on the
   cream directly with no card around them. */
.etf-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: end; }
.etf-strip figure { margin: 0; text-align: center; }
.etf-strip img { height: clamp(220px, 26vw, 320px); width: auto; object-fit: contain; }
.etf-strip figcaption { margin-top: 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--etf-ink); }

.etf-usp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; }
.etf-usp h3 { font-family: var(--etf-sans); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 8px; }
.etf-usp p { font-size: 14px; line-height: 1.6; margin: 0; }

/* Product grid tidy up: Astra's default card is fine, this just calms it. */
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 17px !important; }
.woocommerce ul.products li.product .price { font-family: var(--etf-sans); color: var(--etf-ink); }

@media (max-width: 900px) {
  .etf-cats, .etf-strip { grid-template-columns: repeat(2, 1fr); }
  .etf-usp { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .etf-cats, .etf-strip { grid-template-columns: 1fr; }
  .etf-hero__media::after { background: linear-gradient(180deg, rgba(20,17,15,.28) 0%, rgba(20,17,15,.66) 100%); }
}

/* ═══════════════════════════════════════════════════════════════════
   Front page container
   Astra wraps page content in `.ast-container`, which is display:flex
   with a 1240px cap so a post and its sidebar sit side by side. Our
   homepage sections are direct children of it, so every section became
   a flex column and the hero collapsed to zero width.
   Only the front page is unwrapped; the shop, product and account
   pages keep Astra's layout exactly as it was.
   ═══════════════════════════════════════════════════════════════════ */
.home #content > .ast-container {
  display: block;
  max-width: none;
  padding: 0;
}
.home #content > .ast-container > article,
.home #content > .ast-container > .site-main { width: 100%; }

/* Full bleed hero, but the copy still lines up with the rest of the page. */
.etf-hero { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════
   Product card
   The photos are all roughly 4:5, so the frame is 4:5 too and nothing
   gets cropped through a face. Corners are softened, and the second
   gallery shot fades in on hover the way a real store does it.
   ═══════════════════════════════════════════════════════════════════ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--etf-line);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(20, 17, 15, .10);
  border-color: rgba(140, 107, 79, .35);
}

.etf-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--etf-cream);
  border-radius: 14px 14px 0 0;
}
.etf-card__media img.etf-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  margin: 0; border-radius: 0;
  transition: opacity .5s ease, transform .8s ease;
}
/* Only the top photo fades. Fading the front out at the same time as fading
   the back in leaves a midpoint where both sit at half opacity, so the two
   garments show through each other and the card looks like a double exposure.
   The front stays fully opaque underneath and the back simply covers it. */
.etf-card__img--front { opacity: 1; }
.etf-card__img--back  { opacity: 0; z-index: 1; }
li.product:hover .etf-card__media.has-second .etf-card__img--back { opacity: 1; }
/* A single photo cannot cross fade, so it gets a slow push in instead. */
li.product:hover .etf-card__media:not(.has-second) .etf-card__img--front { transform: scale(1.06); }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .ast-woo-product-category { padding-left: 16px; padding-right: 16px; }

.woocommerce span.onsale {
  border-radius: 999px;
  background: var(--etf-ink);
  color: #fff;
  font-family: var(--etf-sans);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 14px; min-height: 0; min-width: 0; line-height: 1.2;
  top: 12px; left: 12px;
}

/* Category tiles get the same softening so the page reads as one thing. */
.etf-cat, .etf-cat__img { border-radius: 14px; }
.etf-cat { border: 1px solid var(--etf-line); background: #fff; padding-bottom: 4px; transition: transform .35s ease, box-shadow .35s ease; }
.etf-cat:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,17,15,.10); }
.etf-cat__label { padding-left: 16px; padding-right: 16px; }
.etf-btn { border-radius: 999px; }

/* The logo image already carries the name. Astra's setting for this depends on
   which header the theme is using, so it is hidden here where it cannot be
   missed, and only when a logo is actually present. */
.wp-custom-logo .site-title,
.wp-custom-logo .site-description { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.custom-logo { max-height: 46px; width: auto; }

/* ═══════════════════════════════════════════════════════════════════
   Shop layout + filters
   ═══════════════════════════════════════════════════════════════════ */
.etf-shop { display: grid; grid-template-columns: 262px 1fr; gap: 40px; align-items: start; }
.etf-shop__main { min-width: 0; }

.etf-filters { position: sticky; top: 24px; }
.etf-filters__head { display: none; }
.etf-fgroup { padding: 20px 0; border-bottom: 1px solid var(--etf-line); }
.etf-fgroup:first-of-type { padding-top: 0; }
.etf-fgroup h3 {
  font-family: var(--etf-sans); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--etf-ink);
  margin: 0 0 14px;
}

.etf-flist { list-style: none; margin: 0; padding: 0; }
.etf-flist li { margin: 0; }
.etf-flist a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 7px 0; text-decoration: none; color: var(--etf-body); font-size: 14px;
  transition: color .2s;
}
.etf-flist a:hover, .etf-flist a.is-on { color: var(--etf-ink); }
.etf-flist em { font-style: normal; font-size: 12px; color: var(--etf-accent); }

/* Colour: the swatch is the control. A checkbox next to the word "Navy"
   tells you less than the colour itself. */
.etf-swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 8px; }
.etf-swatch { display: flex; align-items: center; gap: 9px; text-decoration: none; font-size: 13px; color: var(--etf-body); }
.etf-swatch span {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
  border: 1px solid rgba(20,17,15,.16); box-shadow: inset 0 0 0 2px #fff;
  transition: box-shadow .2s, transform .2s;
}
.etf-swatch em { font-style: normal; }
.etf-swatch:hover span { transform: scale(1.08); }
.etf-swatch.is-on span { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--etf-ink); }
.etf-swatch.is-on em { color: var(--etf-ink); font-weight: 500; }

.etf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.etf-pill {
  min-width: 42px; text-align: center; padding: 8px 12px;
  border: 1px solid var(--etf-line); border-radius: 999px;
  font-size: 13px; text-decoration: none; color: var(--etf-body);
  transition: border-color .2s, background .2s, color .2s;
}
.etf-pill:hover { border-color: var(--etf-ink); color: var(--etf-ink); }
.etf-pill.is-on { background: var(--etf-ink); border-color: var(--etf-ink); color: #fff; }

/* Price: one track, two thumbs. The inputs are stacked and made transparent so
   both thumbs stay grabbable; pointer-events are re-enabled on the thumbs only. */
.etf-price__track { position: relative; height: 30px; margin-bottom: 12px; }
.etf-price__track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 3px;
  background: var(--etf-line); border-radius: 3px;
}
.etf-price__fill { position: absolute; top: 13px; height: 3px; background: var(--etf-ink); border-radius: 3px; }
.etf-price__r {
  position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 30px;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none; margin: 0;
}
.etf-price__r::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--etf-ink); cursor: grab;
}
.etf-price__r::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--etf-ink); cursor: grab;
}
.etf-price__row { display: flex; align-items: center; gap: 8px; }
.etf-price__row input {
  width: 100%; min-width: 0; padding: 8px 10px; font-size: 13px;
  border: 1px solid var(--etf-line); border-radius: 8px; background: #fff;
}
.etf-price__row span { font-size: 12px; color: var(--etf-accent); }
.etf-price__row button {
  padding: 8px 14px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--etf-ink); color: #fff; border: 0; border-radius: 999px; cursor: pointer;
}

.etf-clear { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--etf-accent); }

/* Toolbar + active chips */
.etf-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 22px; }
.etf-filters__open { display: none; }
.etf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.etf-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--etf-line); border-radius: 999px;
  background: #fff; font-size: 13px; color: var(--etf-ink); text-decoration: none;
  transition: border-color .2s, background .2s;
}
.etf-chip:hover { border-color: var(--etf-ink); }
.etf-chip span { color: var(--etf-accent); font-size: 15px; line-height: 1; }
.etf-chip--clear { border-style: dashed; color: var(--etf-accent); }
.etf-chip .woocommerce-Price-amount { font-size: 13px; }

.woocommerce .etf-shop__main .woocommerce-result-count { margin: 0 auto 0 0; font-size: 13px; }
.woocommerce .etf-shop__main .woocommerce-ordering { margin: 0; }

@media (max-width: 900px) {
  .etf-shop { grid-template-columns: 1fr; gap: 0; }
  .etf-filters__open {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border: 1px solid var(--etf-ink); border-radius: 999px;
    background: #fff; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  }
  .etf-filters__open i { font-style: normal; background: var(--etf-ink); color: #fff; border-radius: 999px; padding: 1px 7px; font-size: 11px; }
  /* Bottom sheet, which is where a thumb actually is on a phone. */
  .etf-filters {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 999;
    max-height: 86vh; overflow-y: auto; background: #fff;
    border-radius: 18px 18px 0 0; padding: 18px 20px 28px;
    box-shadow: 0 -20px 50px rgba(20,17,15,.18);
    transform: translateY(102%); transition: transform .35s ease; visibility: hidden;
  }
  .etf-filters-open .etf-filters { transform: none; visibility: visible; }
  .etf-filters-open { overflow: hidden; }
  .etf-filters__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  .etf-filters__head h2 { font-size: 20px; margin: 0; }
  .etf-filters__close { background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: var(--etf-ink); }
  .etf-swatches { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .etf-filters { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════
   Width
   Astra caps content at 1240px, which on a 1440 screen leaves a wide
   empty margin either side of a four column grid. The store gets more
   room; everything still centres and still has breathing space.
   ═══════════════════════════════════════════════════════════════════ */
.ast-container,
.etf-wrap { max-width: 1560px; }
.woocommerce-page .ast-container { max-width: 1560px; }
@media (min-width: 1200px) {
  .etf-shop { grid-template-columns: 280px 1fr; gap: 48px; }
}

/* ════════════════════════════════════════════════════════════════════
   Card call to action
   Sitting in the card body it was a hard slab of colour against the white,
   which is what kept looking stuck on. It now lives on the photograph: a
   strip that rises from the bottom edge of the image on hover, so the card
   at rest is only garment, name and price. Touch devices have no hover, so
   there it simply stays put.
   ════════════════════════════════════════════════════════════════════ */
.etf-card__cta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 10px;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .32s cubic-bezier(.22,.61,.36,1), opacity .32s ease;
}
li.product:hover .etf-card__cta,
li.product:focus-within .etf-card__cta { transform: translateY(0); opacity: 1; }

.woocommerce ul.products li.product .etf-card__cta .button,
.woocommerce ul.products li.product .etf-card__cta .added_to_cart {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  text-align: center;
  border: 0;
  border-radius: 8px;
  font-family: var(--etf-sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  background: rgba(255, 255, 255, .94);
  color: var(--etf-ink);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(20, 17, 15, .16);
  transition: background .22s ease, color .22s ease;
}
.woocommerce ul.products li.product .etf-card__cta .button:hover,
.woocommerce ul.products li.product .etf-card__cta .button:focus-visible {
  background: var(--etf-ink);
  color: #fff;
}
/* Woo appends a "View cart" link after a successful add; it would stack a
   second strip on top of the first, so it is kept out of the overlay. */
.woocommerce ul.products li.product .etf-card__cta .added_to_cart { display: none; }

/* No hover to reveal it with, and a strip that never appears is a dead card. */
@media (hover: none) {
  .etf-card__cta { transform: none; opacity: 1; }
}

/* The price is now the last thing in the card, so it carries the bottom gap. */
.woocommerce ul.products li.product .price { margin-bottom: 18px; }

/* ═══════════════════════════════════════════════════════════════════
   Price filter
   The bare range inputs looked like a browser default dropped on the
   page. Same control, given a proper track, readable values and inputs
   that match the rest of the panel.
   ═══════════════════════════════════════════════════════════════════ */
.etf-price__values {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px; font-size: 13px; color: var(--etf-ink);
}
.etf-price__values b { font-weight: 500; }
.etf-price__values span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--etf-accent); }
.etf-price__track { height: 26px; margin: 6px 0 14px; }
.etf-price__track::before { top: 11px; height: 4px; background: #ece7e1; border-radius: 4px; }
.etf-price__fill { top: 11px; height: 4px; background: var(--etf-ink); }
.etf-price__r::-webkit-slider-thumb {
  width: 18px; height: 18px; background: #fff; border: 2px solid var(--etf-ink);
  box-shadow: 0 2px 6px rgba(20,17,15,.22);
}
.etf-price__r::-moz-range-thumb {
  width: 18px; height: 18px; background: #fff; border: 2px solid var(--etf-ink);
  box-shadow: 0 2px 6px rgba(20,17,15,.22);
}
.etf-price__row { gap: 6px; }
.etf-price__row input { padding: 9px 10px; border-radius: 10px; font-size: 13px; }
.etf-price__row button { padding: 9px 16px; border-radius: 10px; }

/* Loading state while a filter is being applied without a reload. */
.etf-shop__main.is-loading { opacity: .45; pointer-events: none; transition: opacity .2s; }

/* ════════════════════════════════════════════════════════════════════
   Footer
   Astra ends the page on a single centred copyright line, so the shop
   just stopped under the last row of products. These columns sit above
   that line; the copyright row is left to Astra so it stays editable in
   the customiser.
   ════════════════════════════════════════════════════════════════════ */
.etf-footer {
  max-width: 1560px;
  margin: 0 auto;
  padding: 64px 24px 8px;
  border-top: 1px solid var(--etf-line);
}
.etf-footer__cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.etf-footer__logo { height: 46px; width: auto; display: block; margin-bottom: 18px; }
.etf-footer__blurb {
  margin: 0;
  max-width: 42ch;
  font-size: 14px;
  line-height: 1.75;
  color: var(--etf-muted, #6d6560);
}
.etf-footer__head {
  margin: 0 0 16px;
  font-family: var(--etf-sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--etf-ink);
}
.etf-footer__col ul { list-style: none; margin: 0; padding: 0; }
.etf-footer__col li + li { margin-top: 10px; }
.etf-footer__col a {
  font-size: 14px;
  color: var(--etf-muted, #6d6560);
  text-decoration: none;
  transition: color .2s ease;
}
.etf-footer__col a:hover,
.etf-footer__col a:focus-visible { color: var(--etf-accent); }

/* ── Accepted payment strip ───────────────────────────────────────────
   Real card marks on real card shaped tiles. The tile is the card: a white
   4:2.5 rounded rectangle with a hairline border, and the logo sits inside
   it with breathing room rather than being stretched to the edges. */
.etf-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.etf-pay--footer { margin-top: 44px; padding: 24px 0 4px; border-top: 1px solid var(--etf-line); }
.etf-pay__label {
  font-family: var(--etf-sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--etf-muted, #6d6560);
}
.etf-pay__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.etf-pay__card {
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 37px;
  padding: 7px 9px;
  border: 1px solid var(--etf-line);
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 17, 15, .05);
}
/* UPI's mark is nearly three times as wide as it is tall. Given the same
   side padding as the others it shrinks to an unreadable smudge, so it is
   allowed to run closer to the tile edge. */
.etf-pay__card--wide { padding: 7px 5px; }
/* max-* rather than width:100% so a mark keeps its own aspect ratio and is
   never stretched. The height/width attributes on the img are there to
   reserve the box, not to size it. */
.etf-pay__card img {
  display: block;
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
}
.etf-pay--product { margin: 26px 0 6px; padding-top: 22px; border-top: 1px solid var(--etf-line); }

@media (max-width: 900px) {
  .etf-footer { padding: 48px 20px 8px; text-align: center; }
  .etf-footer__cols { grid-template-columns: 1fr 1fr; gap: 36px 24px; text-align: left; }
  .etf-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .etf-footer__cols { grid-template-columns: 1fr; text-align: center; }
  .etf-footer__logo { margin-inline: auto; }
  .etf-footer__blurb { margin-inline: auto; }
  .etf-pay { justify-content: center; }
  .etf-pay__list { justify-content: center; }
}

/* ── Availability toggles ─────────────────────────────────────────────
   These are links, not inputs, but a row that only shows a tick once it
   is already on gives no clue it can be clicked. A real box sits in front
   of the label and fills when the filter is active. */
.etf-flist--toggle a { gap: 10px; justify-content: flex-start; }
.etf-flist--toggle a::before {
  content: "";
  flex: 0 0 auto;
  width: 17px; height: 17px;
  border: 1px solid var(--etf-line);
  border-radius: 4px;
  background: #fff;
  transition: background .18s ease, border-color .18s ease;
}
.etf-flist--toggle a:hover::before { border-color: var(--etf-accent); }
.etf-flist--toggle a.is-on::before {
  background: var(--etf-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 4.8 8.6 9.5 3.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
  border-color: var(--etf-ink);
}
/* The box now carries the state, so the trailing tick is redundant. */
.etf-flist--toggle em { display: none; }

/* ── Price slider, the native track ──────────────────────────────────
   appearance:none stops the browser drawing the whole control, but it
   still paints ::-webkit-slider-runnable-track. That groove sat a few
   pixels below our own bar, so the panel showed two parallel lines and
   the thumbs looked like they belonged to neither. Both ranges are the
   same height as the container so the thumbs land on our bar. */
/* Astra puts a vertical margin on every input, which pushed both ranges
   5.7px down the container and left the thumbs floating under our bar.
   The tag in the selector is there to outrank it. */
input[type="range"].etf-price__r { margin: 0; height: 26px; }

/* Same reason: the thumb rules have to outrank Astra's own input styling,
   or the thumb renders as a solid dark blob instead of a white handle. */
input[type="range"].etf-price__r::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--etf-ink); cursor: grab;
  box-shadow: 0 2px 6px rgba(20, 17, 15, .22);
  /* With appearance:none the browser stops centring the thumb on the track
     and aligns it to the track's top edge, so the offset is ours to set:
     half the difference between the 26px track and the 18px handle. */
  margin-top: 4px;
}
input[type="range"].etf-price__r::-moz-range-thumb {
  pointer-events: auto; box-sizing: border-box;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--etf-ink); cursor: grab;
  box-shadow: 0 2px 6px rgba(20, 17, 15, .22);
}
input[type="range"].etf-price__r::-webkit-slider-runnable-track {
  -webkit-appearance: none; appearance: none;
  height: 26px; background: transparent; border: 0; box-shadow: none;
}
input[type="range"].etf-price__r::-moz-range-track { height: 26px; background: transparent; border: 0; }
input[type="range"].etf-price__r::-moz-range-progress { background: transparent; }
.etf-price__r:focus { outline: none; }
.etf-price__r:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(140, 107, 79, .28); }
.etf-price__r:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(140, 107, 79, .28); }

/* ═══════════════════════════════════════════════════════════════════
   Product rail
   A scroller, not a JavaScript carousel. Scroll snap does the paging,
   the browser does the momentum on touch, and the script only pushes
   it along on a timer. So it still works if the script never loads.
   ═══════════════════════════════════════════════════════════════════ */
.etf-pslider { position: relative; }

.etf-pslider__rail {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  /* overflow-x: auto on its own did NOT stop the page from scrolling sideways:
     measured at 390px wide, the document still ran to 3204px and could be
     scrolled 2814px right. Paint containment is what actually holds the cards
     inside the rail. It is on the rail rather than the wrapper so the arrows,
     which sit outside the rail on wide screens, are not clipped away. */
  contain: paint;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;
  /* Room for the card shadow, which a clipped scroller would shave off. */
  padding: 6px 2px 14px;
  scrollbar-width: none;
}
.etf-pslider__rail::-webkit-scrollbar { display: none; }

.etf-pslide {
  flex: 0 0 calc((100% - 66px) / 4);
  scroll-snap-align: start;
  display: block;
  text-decoration: none;
  color: inherit;
}

.etf-pslide__media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--etf-line);
  border-radius: 14px;
  background: var(--etf-cream);
}
.etf-pslide__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
  transition: transform .7s ease;
}
.etf-pslide:hover .etf-pslide__media img { transform: scale(1.05); }

.etf-pslide__name {
  display: block;
  margin: 14px 0 4px;
  font-family: var(--etf-serif);
  font-size: 17px;
  color: var(--etf-ink);
}
.etf-pslide__price {
  display: block;
  font-family: var(--etf-sans);
  font-size: 14px;
  color: var(--etf-body);
}
.etf-pslide__price del { opacity: .5; margin-right: 6px; }
.etf-pslide__price ins { text-decoration: none; }

/* Arrows sit outside the rail on wide screens and on top of it when there
   is no margin left to sit in. */
.etf-pslider__nav {
  position: absolute;
  top: calc((100% - 74px) / 2);
  z-index: 2;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--etf-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  color: var(--etf-ink);
  font-size: 17px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(20, 17, 15, .12);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.etf-pslider__nav:hover { background: var(--etf-ink); color: #fff; transform: scale(1.06); }
.etf-pslider__nav:focus-visible { outline: 2px solid var(--etf-accent); outline-offset: 3px; }
.etf-pslider__nav--prev { left: -22px; }
.etf-pslider__nav--next { right: -22px; }
.etf-pslider.is-static .etf-pslider__nav { display: none; }

@media (max-width: 1100px) {
  .etf-pslide { flex-basis: calc((100% - 44px) / 3); }
  .etf-pslider__nav--prev { left: 6px; }
  .etf-pslider__nav--next { right: 6px; }
}
@media (max-width: 780px) {
  .etf-pslide { flex-basis: calc((100% - 22px) / 2); }
}
@media (max-width: 520px) {
  .etf-pslide { flex-basis: 78%; }
  .etf-pslider__rail { gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Single product layout
   Astra floats the gallery at half the content width. At 1560px that
   made the photo 760px wide, and a 4:5 crop of it 1178px tall, taller
   than a 1080px screen: the image alone did not fit on a 24 inch
   monitor. Grid instead, with the gallery capped so the whole buy
   block stays above the fold at any width.
   ═══════════════════════════════════════════════════════════════════ */
.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  column-gap: 56px;
  row-gap: 0;
  align-items: start;
}

/* Everything below the buy block runs the full width, not beside the photo. */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .up-sells,
.single-product div.product > .woocommerce-product-details__short-description {
  grid-column: 1 / -1;
}

/* 🪤 Astra prints an inline rule carrying an ID:
     .woocommerce-page #content .ast-woocommerce-container div.product div.images
     { width: 50% }   (and 46% for the summary)
   A class only selector can never outrank that, which is why width:100% here
   was quietly ignored and the photo stayed at half the column. These selectors
   repeat Astra's own chain and add one more class so they win outright, in any
   source order. */
.woocommerce-page.single-product #content .ast-woocommerce-container div.product div.images.woocommerce-product-gallery {
  float: none;
  width: 100%;
  /* The photo is cropped 4:5, so its height is always 1.25x its width. Capping
     the width against the viewport HEIGHT is what keeps the whole image on
     screen: 56vh wide means 70vh tall, on a tall monitor and a short laptop
     alike. The 520px stops it growing silly on a very large screen. */
  max-width: min(520px, 48vh);
  margin: 0;
}

.woocommerce-page.single-product #content .ast-woocommerce-container div.product div.summary {
  float: none;
  width: 100%;
  margin: 0;
  /* Text set to the full width of a wide column is hard to read. */
  max-width: 640px;
}

/* flexslider gives the wrapper an inline width of 400% and positions the
   slides itself, so nothing here may set a height on it. Sizing the gallery
   box above is enough; the image fills whatever it is given. */
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery img.wp-post-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Gallery thumbnails under the main image. */
.single-product .flex-control-thumbs { margin-top: 12px; gap: 10px; display: flex; }
.single-product .flex-control-thumbs li { width: auto; margin: 0; float: none; }
.single-product .flex-control-thumbs img { width: 74px; height: auto; border-radius: 8px; }

@media (max-width: 1024px) {
  .single-product div.product { column-gap: 36px; }
  .woocommerce-page.single-product #content .ast-woocommerce-container div.product div.images.woocommerce-product-gallery { max-width: min(420px, 46vh); }
}

/* One column before the two get too narrow to read. */
@media (max-width: 860px) {
  .single-product div.product { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .woocommerce-page.single-product #content .ast-woocommerce-container div.product div.images.woocommerce-product-gallery {
    /* Stacked now, so the photo has the whole column. On a tablet that is
       780px of garment, which is more than anyone needs; cap it and centre it.
       On a phone the column is narrower than the cap anyway. */
    max-width: min(480px, 52vh);
    margin-inline: auto;
  }
  .woocommerce-page.single-product #content .ast-woocommerce-container div.product div.summary { max-width: 100%; }
}