/* Panelling Direct — core-late bundle (v1.45.54).
   OVERRIDE layer — MUST load after every page bundle. Holds the global
   responsive breakpoint blocks, the shared product-grid/card rules, the
   essential WooCommerce page styles and the site-wide interaction states.
   All four were late in the original file and win ties against the page
   rules above them. Loading them early silently reverses ~56 declarations
   and breaks every mobile breakpoint.
   Source line ranges (v1.45.53): 2024-2142, 2382-2522, 3388-3820, 9698-9990

   LOAD ORDER IS LOAD-BEARING:
       style.css (core-early)  ->  page bundle(s)  ->  css/core-late.css
   Enqueued by pd_enqueue_assets() in functions.php. */

/* ── source lines 2024–2142 ── */
/* ── RESPONSIVE: ≤ 999px ───────────────────────────────────── */
@media (max-width: 999px) {
  .main-nav        { display: none; }
  .util-links      { display: none; }
  .usp-item--last  { display: none; }
  .usp-divider--last { display: none; }

  .menu-toggle {
    display: flex;
    height: 42px;
    width: 42px;
  }
  .menu-toggle img { width: 22px; height: 22px; }
  .logo-group { gap: 30px; }

  .top-nav .container {
    flex-wrap: nowrap;
    gap: 12px;
  }
  .top-right { gap: 8px; justify-content: flex-end; }
  .search-wrap input { width: 180px; }
  .usp-bar .container { justify-content: space-around; }

  /* Footer responsive */
  .footer-main .container { gap: 32px; }
  .footer-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 36px 32px;
  }
  .footer-col--contact     { grid-column: 1; grid-row: 1; }
  .footer-col--about       { grid-column: 2; grid-row: 1; }
  .footer-col--information { grid-column: 1; grid-row: 2; }
  .footer-col--newsletter  { grid-column: 2; grid-row: 2; }
  .footer-col--wide { flex: unset; }

  .footer-bar .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .footer-legal .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ── RESPONSIVE: ≤ 778px ───────────────────────────────────── */
@media (max-width: 778px) {
  .logo .logo-img-desktop { display: none; }
  .logo .logo-img-mobile  { display: block; height: 42px; width: auto; }
  .search-wrap    { display: none; }
  .search-icon-btn { display: flex; }

  /* USP carousel */
  .usp-bar { overflow: hidden; }
  .usp-bar .container {
    position: relative;
    justify-content: center;
    align-items: center;
    min-height: 35px;
  }
  .usp-divider         { display: none; }
  .usp-divider--last   { display: none; }
  .usp-item--last      { display: flex; }

  .usp-item {
    position: absolute;
    opacity: 0;
    transition: opacity 0.6s ease;
    justify-content: center;
    pointer-events: none;
    width: 100%;
  }
  .usp-item.usp-active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Footer single column */
  .footer-cols {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 36px;
  }
  .footer-col--contact     { grid-column: 1; grid-row: 1; }
  .footer-col--about       { grid-column: 1; grid-row: 2; }
  .footer-col--information { grid-column: 1; grid-row: 3; }
  .footer-col--newsletter  { grid-column: 1; grid-row: 4; max-width: 400px; }

  .footer-bar-left,
  .footer-bar-right {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .footer-bar .container { gap: 24px; }

  /* Product page */
  .pdp-wrapper,
  .pd-single-product {
    grid-template-columns: 1fr;
    gap: 20px; padding: 16px 16px 40px;
  }
  .product-title { font-size: 22px; }
  .thumb-item { flex: 0 0 calc((100% - 4*8px) / 5); }
}

/* ── WooCommerce Overrides ─────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  max-width: var(--row-max); /* was 1200px (v1.45.2, note 5) */
  margin: 10px auto;
  padding: 10px 20px;
  font-family: 'Open Sans', sans-serif;
}

/* ── source lines 2382–2522 ── */
/* ══════════════════════════════════════════════════════════════
   ESSENTIAL WOOCOMMERCE PAGE STYLES
   (since we removed WC default stylesheets)
══════════════════════════════════════════════════════════════ */

/* Notices */
.woocommerce-message {
  background: #f0fff0;
  border-left: 4px solid #080153;
  padding: 12px 20px;
  margin-bottom: 20px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}
.woocommerce-error {
  background: #fff0f0;
  border-left: 4px solid #e03030;
  padding: 12px 20px;
  margin-bottom: 20px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  list-style: none;
}
.woocommerce-info {
  background: #f0f4ff;
  border-left: 4px solid #080153;
  padding: 12px 20px;
  margin-bottom: 20px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}

/* Buttons (generic WC pages) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button {
  background: #080153;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 24px;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s;
  line-height: 1.4;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover {
  background: #0a0270;
  color: #fff;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: #080153;
  color: #fff;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: #0a0270;
  color: #fff;
}

/* Forms */
.woocommerce form .form-row {
  margin-bottom: 16px;
}
.woocommerce form .form-row label {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
  display: block;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: #080153;
}

/* Tables (cart, order details) */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  text-align: left;
}
.woocommerce table.shop_table th {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  color: #333;
}
.woocommerce table.shop_table img {
  max-width: 60px;
  height: auto;
  border-radius: 4px;
}

/* ── v1.1.0: Hide WC-native form bits we layer over ──────────
   The <select>s feed WC's variations.js; `.single_variation` is
   where WC writes the matched variation's price/availability.
   We keep them in the DOM (JS needs them) but off-screen. */
.pd-single-product .pd-variations-hidden,
.pd-single-product .single_variation {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ── source lines 3388–3820 ── */
/* ── 3. PRODUCT GRID ─────────────────────────────────────────── */
/* Best-sellers strip + grid headings (legacy Elementor category
   templates port) — same grid as the main products wrap. */
.pd-bestsellers {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 24px var(--row-pad) 0;
}
.pd-strip-heading {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.25;
  color: #000;
  margin: 0 0 18px;
}
.pd-strip-heading--grid {
  max-width: var(--row-max);
  margin: 30px auto 0;
  padding: 0 var(--row-pad);
}
/* Manual product sections + smooth-scroll size nav (legacy size-
   separated category layouts; see pd_category_product_sections_registry) */
html { scroll-behavior: smooth; }
.pd-product-sections {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 24px var(--row-pad) 60px;
}
.pd-size-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
}
.pd-size-nav__label {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #000;
}
.pd-size-nav__chip {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #000;
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 16px;
  background: #fff;
  transition: background 0.15s ease;
}
.pd-size-nav__chip:hover { background: var(--lavender); }
.pd-size-nav__note {
  flex-basis: 100%;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: #444;
  margin: -4px 0 0;
}
.pd-size-nav__note a { color: inherit; text-decoration: underline; }
/* Small legacy title-band notice (image + caption; e.g. Decorative
   Sheets "Professional priming available" — pd_category_header_notices) */
.pd-title-band__notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 18px auto 0;
  max-width: 300px;
  text-align: center;
}
.pd-title-band__notice-img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
}
.pd-title-band__notice-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #444;
  margin: 0;
}
.pd-product-section {
  scroll-margin-top: 110px;
  margin-bottom: 40px;
}
.pd-product-section__subtitle {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #444;
  margin: -12px 0 16px;
}

/* Category blog strip (legacy "featured blog" sections) */
.pd-cat-blog {
  border-top: 1px solid var(--rule);
}
.pd-cat-blog__inner {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 40px var(--row-pad) 48px;
}
/* v1.45.13: the bespoke card styles below are retired — the strip now
   uses the shared .pd-blog-grid--latest / .pd-blog-card components.
   Kept for reference:
.pd-cat-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.pd-cat-blog__card { text-decoration: none; color: inherit; display: block; }
.pd-cat-blog__image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.pd-cat-blog__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.35;
  color: #000;
  margin-top: 10px;
}
@media (max-width: 700px) {
  .pd-cat-blog__grid { grid-template-columns: 1fr; }
  .pd-cat-blog__image img { height: 180px; }
}
*/
.pd-products-wrap {
  max-width: var(--row-max);
  margin: 0 auto;
  padding: 24px var(--row-pad) 60px;
}
.pd-archive .pd-bestsellers ul.products,
.pd-archive ul.products {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* ── 4. PRODUCT CARD (small default — applies at <1000px) ────── */
.pd-card {
  list-style: none;
  position: relative;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pd-card::before { content: none; }
.pd-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.05); }

.pd-card__image-link {
  position: relative;
  display: block;
  text-decoration: none;
}
.pd-card__image {
  aspect-ratio: 1 / 1;
  background: #d9d9d9;
}
.pd-card__image img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.25s ease;
}
.pd-card:hover .pd-card__image img { transform: scale(1.02); }

/* SALE badge — bg #F9E2E2, text #CD0006, radius 5, px-12 py-6, 14px bold */
.pd-card__badge {
  position: absolute;
  top: 7px; right: 7px;
  padding: 6px 12px;
  border-radius: 5px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  z-index: 2;
}
.pd-card__badge--sale {
  background: var(--sale-bg);
  color: var(--sale-red);
}

/* Body: px-12 py-18 on small; gap 14 between info block and CTA */
.pd-card__body {
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 0 auto;
  justify-content: space-between;
}
.pd-card__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-card__title-link { color: inherit; text-decoration: none; }
.pd-card__title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: #000;
  margin: 0;
  /* 2-line clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pd-card__price-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}
.pd-card__from-label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: var(--muted);
}
/* Price row — price + (optional) struck old price inline, gap 8 */
.pd-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: var(--navy);
}
.pd-card__price .woocommerce-Price-amount { font-weight: 600; color: inherit; }
.pd-card__price ins {
  text-decoration: none;
  background: transparent;
  color: inherit;
}
.pd-card__price del {
  text-decoration: line-through;
  font-weight: 400;
  color: var(--price-strike);
  margin: 0;
}
.pd-card__price del .woocommerce-Price-amount { color: var(--price-strike); font-weight: 400; }

/* On-sale variant: primary price colour = sale-red.
   The struck-through original price stays grey — see the explicit
   `.pd-card.sale .pd-card__price del` overrides below to beat the
   higher-specificity selector here. */
.pd-card.sale .pd-card__price,
.pd-card__price--sale {
  color: var(--sale-red);
  /* Reverse visual order so the sale price shows FIRST and the
     struck original SECOND (per Figma node 509:18687). WooCommerce
     emits markup as `<del>original</del> <ins>sale</ins>` — we keep
     the markup order (correct for screen readers) and flip the
     visual order via flex. */
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.pd-card.sale .pd-card__price .woocommerce-Price-amount,
.pd-card.sale .pd-card__price ins { color: var(--sale-red); }
/* Force the struck price grey on sale. Specificity here (0,4,1)
   beats the `.pd-card.sale .pd-card__price .woocommerce-Price-amount`
   rule above (0,3,1) so the original price stays muted. */
.pd-card.sale .pd-card__price del .woocommerce-Price-amount {
  color: var(--price-strike);
  font-weight: 400;
}

/* CTA — bg navy, p-12, radius 12, Oswald Medium 16, white */
.pd-card__cta {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 100%;
  padding: 12px;
  background: var(--navy);
  color: var(--white);
  text-align: center;
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.pd-card__cta:hover,
.pd-card__cta:focus { background: var(--navy-mid); color: var(--white); }
.pd-card__cta.added { display: none; } /* WC flips this after add */
/* v1.45.64 — recovered from css/pages.css, where the split stranded it.
   This is the JS busy state set while an archive card's add-to-cart request
   is in flight, so it belongs wherever the cards render — archives, the
   homepage, trade and wainscot-kits, none of which load pages.css. Put in
   core-late because that is the one bundle every card context loads, and
   because `.pd-card__cta` already lives here. At 0,2,0 it outranks the
   `:hover` and `:focus-visible` rules below, so order is not load-bearing. */
.pd-card__cta.is-adding { opacity: .75; pointer-events: none; }
/* Sold out (v1.45.69). Here rather than in a page bundle for the same reason
   as .is-adding above: cards render on archives, the homepage, trade and
   wainscot-kits, and core-late is the one bundle all of them load.
   At 0,2,0 this outranks the :hover and :focus-visible rules below, so the
   card does not animate toward an action that is not available. */
.pd-card__cta--sold-out,
.pd-card__cta--sold-out:hover,
.pd-card__cta--sold-out:focus {
  background: #6B6B78;
  border-color: #6B6B78;
  color: var(--white);
  cursor: not-allowed;
}
/* v1.45.80 — WooCommerce's injected "View cart" link, hidden on PRODUCT
   PAGES only.
   ------------------------------------------------------------------
   WC's add-to-cart.js appends `<a class="added_to_cart wc-forward">View
   cart</a>` after the button on every successful AJAX add, and the theme
   triggers WC's `added_to_cart` event on all four of its add-to-cart paths
   (js/product.js x2, js/wall-visualiser.js, and the card handler) so that
   analytics and the slide-out cart still fire. The link comes along with it.

   On a product page it is redundant and visually wrong — it lands mid-column
   between the price and the notice, and the slide-out cart that opens on the
   very same event already offers "View / Edit Cart".

   ⚠ Scoped to `.pd-single-product`, NOT global, because the archive cards
   DEPEND on this link: WC hides `.pd-card__cta` by adding `.added`, and the
   rule immediately below restyles the injected anchor as the replacement
   button. A blanket `.added_to_cart { display: none }` would leave those
   cards with no button at all after an add.

   Hidden rather than removed in JS: WC only ever injects one per button
   (it checks for an existing sibling first), so nothing accumulates, and
   `display: none` takes it out of the accessibility tree too. */
.pd-single-product .added_to_cart { display: none; }

.pd-card__cta.added + .added_to_cart {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 100%;
  padding: 12px;
  background: var(--navy);
  color: var(--white);
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 16px;
  border-radius: 12px;
  text-decoration: none;
  text-transform: uppercase;
}

/* ── 5. PAGINATION — 40×44 items, 5px radius, transparent bg ──── */
.pd-pagination {
  margin: 40px 0 0;
  display: flex;
  justify-content: center;
}
.pd-pagination__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Open Sans', sans-serif;
}
.pd-pagination__list li { display: block; }
.pd-pagination__list .page-numbers {
  min-width: 40px;
  height: 44px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  background: transparent;
  text-decoration: none;
  line-height: 1.2;
  transition: background 0.15s;
}
.pd-pagination__list .page-numbers:hover { background: rgba(0,0,0,0.04); }
.pd-pagination__list .page-numbers.current {
  background: var(--yellow);
  color: var(--navy);
  font-weight: 600;
}
.pd-pagination__list .page-numbers.dots {
  background: transparent;
  cursor: default;
}
.pd-pagination__list .page-numbers.dots:hover { background: transparent; }
.pd-pagination__list .prev svg,
.pd-pagination__list .next svg { display: block; }

/* ── 6. L BREAKPOINT (≥1000px): larger card variant ──────────── */
@media (min-width: 1000px) {
  .pd-card { border-radius: 10px; }
  .pd-card__body { padding: 18px 22px; }
  .pd-card__title { font-size: 16px; }
  .pd-card__from-label,
  .pd-card__price { font-size: 16px; }
  .pd-card__cta { font-size: 16px; padding: 12px; } /* 20px -> 16px, designer note 3 (v1.45.1) */
}

/* ── 7. M BREAKPOINT (779–999): small card, 4-col grid ──────── */
@media (max-width: 999px) {
  .pd-title-band__inner {
    padding: 28px min(35%, 360px) 48px var(--row-pad);
    min-height: 280px;
  }
  .pd-collection-title { font-size: 44px; }
  .pd-title-band__hero { width: min(30%, 320px); }
  .pd-subcat-card { flex: 0 0 calc((100% - 54px) / 4); }
}

/* ── 8. S BREAKPOINT (≤778): no hero, 3-col grid ────────────── */
@media (max-width: 778px) {
  .pd-title-band__inner {
    padding: 24px var(--row-pad) 40px;
    min-height: 0;
  }
  .pd-title-band__copy { max-width: 100%; }
  .pd-title-band__hero { display: none; }
  .pd-collection-title { font-size: 36px; }
  .pd-collection-description { max-width: 100%; font-size: 16px; }

  /* Arrows hidden — touch handles scroll */
  .pd-subcats__arrow { display: none; }
  .pd-subcats__track { margin: 0; }
  .pd-subcat-card { flex: 0 0 calc((100% - 36px) / 3); }

  .pd-archive ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .pd-card__body { padding: 14px 12px; gap: 12px; }
}

/* ── 9. XS BREAKPOINT (≤560): 2-col grid, compact ───────────── */
@media (max-width: 560px) {
  .pd-title-band__inner { padding: 20px var(--row-pad) 32px; }
  .pd-collection-title { font-size: 32px; }
  .pd-subcat-card { flex: 0 0 42%; } /* peek of next card invites swipe */
  .pd-subcat-card__label { font-size: 13px; padding: 12px 16px; }
  .pd-archive ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .pd-card__badge { font-size: 11px; padding: 4px 8px; top: 6px; right: 6px; }
  .pd-card__title { font-size: 13px; }
  .pd-card__from-label,
  .pd-card__price { font-size: 13px; }
  .pd-card__cta { font-size: 14px; padding: 10px 12px; border-radius: 8px; }
}


/* ── source lines 9698–9990 ── */
/* ════════════════════════════════════════════════════════════════════════
   v1.12.0 — SITE-WIDE INTERACTION STATES
   ════════════════════════════════════════════════════════════════════════
   Source: Figma node 631:33785 (Panelling Direct → Interactions).
   Defines four canonical interaction patterns:
     A. Filled primary buttons (navy + yellow)
     B. Outlined buttons on dark backgrounds
     C. Surface cards (product, style, room, blog, subcat)
     D. Image-overlay cards (More ways, blog featured)
   This block sits at the END of style.css so it overrides earlier ad-hoc
   hover declarations via cascade order without us having to delete them.
   Tokens live in :root (--ix-*).
════════════════════════════════════════════════════════════════════════ */

/* ── A. FILLED PRIMARY BUTTONS ───────────────────────────────────────── */
/* Default → hover: bg lightens to --navy-mid, soft drop shadow + 1px
   white outline appears. Active: scales to --ix-press (0.99) for the
   tactile "press" feel from the spec. */
.btn-cart,
.single_add_to_cart_button,
.woocommerce div.product .btn-cart,
.woocommerce div.product button.single_add_to_cart_button,
.pd-card__cta,
.pd-cart__checkout-btn,
.pd-cart__empty-cta,
.pd-checkout__pay-now,
.pd-about-elevate__cta,
.pd-trade-apply__submit,
.pd-home-hero__cta,
.pd-post-cta__button,
.pd-search-empty__link {
  transition:
    background-color var(--ix-transition),
    color var(--ix-transition),
    box-shadow var(--ix-transition),
    transform var(--ix-transition) !important;
}
.btn-cart:hover,
.single_add_to_cart_button:hover,
.woocommerce div.product .btn-cart:hover,
.woocommerce div.product button.single_add_to_cart_button:hover,
.pd-card__cta:hover,
.pd-cart__checkout-btn:hover,
.pd-cart__empty-cta:hover,
.pd-checkout__pay-now:hover,
.pd-about-elevate__cta:hover,
.pd-trade-apply__submit:hover,
.pd-home-hero__cta:hover,
.pd-post-cta__button:hover,
.pd-search-empty__link:hover,
.pd-card__cta:focus-visible,
.pd-cart__checkout-btn:focus-visible,
.pd-cart__empty-cta:focus-visible,
.pd-checkout__pay-now:focus-visible,
.pd-about-elevate__cta:focus-visible,
.pd-trade-apply__submit:focus-visible,
.pd-home-hero__cta:focus-visible,
.pd-post-cta__button:focus-visible,
.pd-search-empty__link:focus-visible {
  box-shadow: var(--ix-shadow-button);
}

/* ── SHARED BUTTON FOCUS RING (v1.45.56) ────────────────────────────────
   `--ix-shadow-button` is a 1px white-at-30% ring; composited over a navy
   button it resolves to rgb(82,77,135) — 2.43:1 against the fill, below the
   3:1 required by WCAG 1.4.11 — and it is the SAME treatment as :hover, so
   focus and hover were indistinguishable. This adds a real outline for the
   focus case only, leaving the hover shadow above untouched.

   CASCADE NOTE: this belongs in core-late, not the page bundles. It has to
   override `outline: none` declarations that live in blog.css and pages.css,
   and core-late is the layer that loads after every page bundle. Putting it
   in a bundle would work on some pages and silently not on others. */
.pd-card__cta:focus-visible,
.pd-cart__checkout-btn:focus-visible,
.pd-cart__empty-cta:focus-visible,
.pd-checkout__pay-now:focus-visible,
.pd-about-elevate__cta:focus-visible,
.pd-trade-apply__submit:focus-visible,
.pd-home-hero__cta:focus-visible,
.pd-post-cta__button:focus-visible,
.pd-search-empty__link:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.btn-cart:active,
.single_add_to_cart_button:active,
.pd-card__cta:active,
.pd-cart__checkout-btn:active,
.pd-cart__empty-cta:active,
.pd-checkout__pay-now:active,
.pd-about-elevate__cta:active,
.pd-trade-apply__submit:active,
.pd-home-hero__cta:active,
.pd-post-cta__button:active,
.pd-search-empty__link:active {
  transform: scale(var(--ix-press));
}

/* Yellow filled buttons (header/footer) — same pattern, but the hover
   shadow uses a darker rgb so it reads on white surfaces. */
.search-btn,
.cart-btn,
.search-icon-btn,
.footer-subscribe-btn {
  transition:
    background-color var(--ix-transition),
    box-shadow var(--ix-transition),
    transform var(--ix-transition);
}
.search-btn:hover,
.cart-btn:hover,
.search-icon-btn:hover,
.footer-subscribe-btn:hover,
.search-btn:focus-visible,
.cart-btn:focus-visible,
.search-icon-btn:focus-visible,
.footer-subscribe-btn:focus-visible {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.search-btn:active,
.cart-btn:active,
.search-icon-btn:active,
.footer-subscribe-btn:active {
  transform: scale(var(--ix-press));
}

/* v1.45.58 — focus ring for the footer Subscribe button.
   The shadow above is the SAME treatment as :hover, so on its own it does not
   distinguish focus (the defect v1.45.56 fixed for the navy button group; the
   yellow group still has it — flagged for accessibility pass 2). This button
   is new, so it gets a real ring now rather than inheriting the gap.

   The ring is WHITE, not the --navy used by the navy group: this button sits
   on the navy footer, where a navy outline would be invisible. White on navy
   is 18.4:1, well past the 3:1 of WCAG 1.4.11. */
.footer-subscribe-btn:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* ── B. OUTLINED BUTTONS ON DARK ────────────────────────────────────── */
/* Used in the side-menu footer. Default: transparent fill on dark bg with
   white border + white text. Hover: white fill, navy text. Active: scale.
   The existing rules already do the colour invert correctly — we add the
   transform transition + press state. */
.side-menu-footer .btn-trade-full,
.side-menu-footer .btn-register-full {
  transition:
    background-color var(--ix-transition),
    color var(--ix-transition),
    box-shadow var(--ix-transition),
    transform var(--ix-transition);
}
.side-menu-footer .btn-trade-full:hover,
.side-menu-footer .btn-register-full:hover,
.side-menu-footer .btn-trade-full:focus-visible,
.side-menu-footer .btn-register-full:focus-visible {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.side-menu-footer .btn-trade-full:active,
.side-menu-footer .btn-register-full:active {
  transform: scale(var(--ix-press));
}

/* Header trade pill — small navy outlined CTA that sits in the utility
   bar. Same press feel; existing colour transitions stay. */
.btn-trade {
  transition:
    background-color var(--ix-transition),
    color var(--ix-transition),
    box-shadow var(--ix-transition),
    transform var(--ix-transition);
}
.btn-trade:hover,
.btn-trade:focus-visible {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}
.btn-trade:active {
  transform: scale(var(--ix-press));
}

/* ── C. SURFACE CARDS ───────────────────────────────────────────────── */
/* Product, style, room, blog, subcategory — all the white-bg cards that
   sit on the page. Default border #DBDBDB → hover border-color darkens to
   --ix-card-border-hover (#C2C2C2), drop shadow appears. Active scales.
   We deliberately don't change child <img> scale here — existing rules
   already handle that for some cards (pd-card, pd-room-card) and we keep
   that behaviour. */
.pd-card,
.pd-style-card,
.pd-room-card,
.pd-blog-card,
.pd-subcat-card {
  transition:
    border-color var(--ix-transition),
    box-shadow var(--ix-transition),
    transform var(--ix-transition);
}
.pd-card:hover,
.pd-style-card:hover,
.pd-room-card:hover,
.pd-blog-card:hover,
.pd-subcat-card:hover,
.pd-card:focus-within,
.pd-style-card:focus-within,
.pd-room-card:focus-within,
.pd-blog-card:focus-within,
.pd-subcat-card:focus-within {
  border-color: var(--ix-card-border-hover);
  box-shadow: var(--ix-shadow-card);
}
.pd-card:active,
.pd-style-card:active,
.pd-room-card:active,
.pd-blog-card:active,
.pd-subcat-card:active {
  transform: scale(var(--ix-press));
}

/* ── D. IMAGE-OVERLAY CARDS (More ways) ─────────────────────────────── */
/* Spec change vs default: drop shadow appears AND the white circular
   arrow CTA fills with --yellow on hover. Active: scale.
   The existing arrow translateX(4px) is removed here — the Figma spec
   shows the arrow staying centred and the CIRCLE filling instead. */
.pd-more-card__link {
  transition:
    box-shadow var(--ix-transition),
    transform var(--ix-transition);
}
.pd-more-card__arrow {
  /* Override the existing transform transition — the Figma spec doesn't
     translate the arrow; it transitions the circle's background colour. */
  transition: background-color var(--ix-transition) !important;
}
.pd-more-card__link:hover,
.pd-more-card__link:focus-visible {
  box-shadow: var(--ix-shadow-card-strong);
}
.pd-more-card__link:hover .pd-more-card__arrow,
.pd-more-card__link:focus-visible .pd-more-card__arrow {
  background: var(--yellow);
  transform: none;            /* override the +4px from the older rule */
}
.pd-more-card__link:active {
  transform: scale(var(--ix-press));
}

/* ── BLOG FEATURED CARD — image overlay variant ─────────────────────── */
/* The featured blog card sits on a coloured tile and reads as an overlay
   surface, so it gets the strong shadow rather than the surface-card one. */
.pd-blog-card--featured {
  transition:
    box-shadow var(--ix-transition),
    transform var(--ix-transition);
}
.pd-blog-card--featured:hover,
.pd-blog-card--featured:focus-within {
  box-shadow: var(--ix-shadow-card-strong);
  border-color: transparent;       /* defeat the surface-card border-darken
                                     above so the featured card stays clean */
}

/* ── REDUCED MOTION ────────────────────────────────────────────────── */
/* Respect user preference — kill all interaction transforms and shorten
   transitions to near-zero. Hover shadows are still allowed (they're not
   motion). */
@media (prefers-reduced-motion: reduce) {
  .btn-cart,
  .single_add_to_cart_button,
  .pd-card__cta,
  .pd-cart__checkout-btn,
  .pd-cart__empty-cta,
  .pd-checkout__pay-now,
  .pd-about-elevate__cta,
  .pd-trade-apply__submit,
  .pd-home-hero__cta,
  .pd-post-cta__button,
  .pd-search-empty__link,
  .search-btn,
  .cart-btn,
  .search-icon-btn,
  .footer-subscribe-btn,
  .side-menu-footer .btn-trade-full,
  .side-menu-footer .btn-register-full,
  .btn-trade,
  .pd-card,
  .pd-style-card,
  .pd-room-card,
  .pd-blog-card,
  .pd-subcat-card,
  .pd-more-card__link,
  .pd-blog-card--featured {
    transition-duration: 0ms !important;
  }
  .btn-cart:active,
  .single_add_to_cart_button:active,
  .pd-card__cta:active,
  .pd-cart__checkout-btn:active,
  .pd-cart__empty-cta:active,
  .pd-checkout__pay-now:active,
  .pd-about-elevate__cta:active,
  .pd-trade-apply__submit:active,
  .pd-home-hero__cta:active,
  .pd-post-cta__button:active,
  .pd-search-empty__link:active,
  .search-btn:active,
  .cart-btn:active,
  .search-icon-btn:active,
  .footer-subscribe-btn:active,
  .side-menu-footer .btn-trade-full:active,
  .side-menu-footer .btn-register-full:active,
  .btn-trade:active,
  .pd-card:active,
  .pd-style-card:active,
  .pd-room-card:active,
  .pd-blog-card:active,
  .pd-subcat-card:active,
  .pd-more-card__link:active {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   v1.13.0 — PRODUCT DETAILS, ORDER RECEIVED, MY ACCOUNT
   ════════════════════════════════════════════════════════════════════════
   No bespoke Figma frame for these screens — design intentionally kept
   simple, reusing the typography, colours, form primitives and box styles
   established elsewhere in the theme.
════════════════════════════════════════════════════════════════════════ */