/*
Theme Name: Ozyzor
Theme URI: https://ozyzor.local/
Author: Ozyzor
Description: Footwear storefront theme built from the Ozyzor Figma design. Classic WordPress theme with full WooCommerce support and Elementor theme-location support.
Version: 1.0.6
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ozyzor
Tags: e-commerce, custom-menu, featured-images, translation-ready
WC requires at least: 8.0
WC tested up to: 11.0
*/

/* ==========================================================================
   1. Design tokens - measured from the Ozyzor Figma artboard (1440px frame)
   ========================================================================== */

:root {
  /* Grounds */
  --oz-bg:            #FFFFFF;
  --oz-surface:       #F5F5F5;
  --oz-hero:          #F2F2F2;
  --oz-band:          #EFEFEF;
  --oz-warm:          #F7F5F3;
  --oz-warm-surface:  #E9E7E4;
  --oz-slot:          #E9E9E9;

  /* Ink */
  --oz-chrome:        #000000;
  --oz-ink:           #111111;
  --oz-muted:         #6E6E6E;
  --oz-line:          #E6E6E6;
  --oz-rule-dark:     #2A2A2A;

  /* Signal + commerce */
  --oz-accent:        #E8912A;
  --oz-star:          #F5A623;
  --oz-sale:          #E8562A;
  --oz-badge:         #E63946;
  --oz-quote:         #24457E;
  --oz-editorial-btn: #C9D6F0;

  /* Editorial card grounds */
  --oz-card:          #2A2A2A;
  --oz-card-alt:      #1A1A1A;

  /* Layout */
  --oz-container:     1200px;
  --oz-gutter:        20px;
  --oz-header-h:      100px;

  /* Radii */
  --oz-r-sm:   4px;
  --oz-r-md:   8px;
  --oz-r-lg:   12px;
  --oz-r-xl:   16px;
  --oz-pill:   999px;

  /* Type */
  --oz-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--oz-bg);
  color: var(--oz-ink);
  font-family: var(--oz-font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Must beat component display rules such as .oz-products { display: grid } */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--oz-accent); }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.2px;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--oz-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.oz-screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.oz-skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--oz-ink); color: #fff;
  padding: 12px 18px; z-index: 999;
}
.oz-skip-link:focus { left: 8px; top: 8px; }

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.oz-container {
  width: 100%;
  max-width: var(--oz-container);
  margin-inline: auto;
  padding-inline: var(--oz-gutter);
}

.oz-section { padding-block: 80px; }
.oz-section--tight { padding-block: 60px; }
.oz-section--flush-top { padding-top: 0; }

.oz-bg-white   { background: var(--oz-bg); }
.oz-bg-surface { background: var(--oz-surface); }
.oz-bg-band    { background: var(--oz-band); }
.oz-bg-warm    { background: var(--oz-warm); }
.oz-bg-hero    { background: var(--oz-hero); }
.oz-bg-dark    { background: var(--oz-chrome); color: #fff; }

.oz-grid { display: grid; gap: 40px; }
.oz-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.oz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.oz-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.oz-stack { display: flex; flex-direction: column; }
.oz-row { display: flex; align-items: center; }

/* ==========================================================================
   4. Typography scale
   ========================================================================== */

.oz-display   { font-size: clamp(56px, 13vw, 170px); font-weight: 700; letter-spacing: 4px; color: #D9D9D9; line-height: 1; }
.oz-h1        { font-size: clamp(28px, 4vw, 44px); }
.oz-h2        { font-size: clamp(24px, 3.2vw, 40px); }
.oz-h2--md    { font-size: clamp(22px, 2.6vw, 34px); }
.oz-h3        { font-size: 18px; }
.oz-h4        { font-size: 16px; }

.oz-eyebrow {
  font-size: 12px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--oz-ink);
}
.oz-lead {
  font-size: 18px; font-weight: 400; line-height: 1.5;
  color: var(--oz-muted); max-width: 62ch;
}
.oz-body  { font-size: 14px; line-height: 1.6; color: var(--oz-muted); }
.oz-meta  { font-size: 12px; color: var(--oz-muted); }
.oz-center { text-align: center; }
.oz-center .oz-lead { margin-inline: auto; }

/* ==========================================================================
   5. Buttons - every interactive control is a full pill
   ========================================================================== */

.oz-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-size: 16px; font-weight: 600; line-height: 1;
  padding: 17px 36px;
  border-radius: var(--oz-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background-color .18s ease, color .18s ease;
}
.oz-btn:active { transform: translateY(1px); }

.oz-btn--primary { background: var(--oz-chrome); color: #fff; }
.oz-btn--primary:hover { background: #1f1f1f; color: #fff; }

.oz-btn--ghost { background: transparent; color: var(--oz-ink); border-color: var(--oz-ink); }
.oz-btn--ghost:hover { background: var(--oz-ink); color: #fff; }

.oz-btn--light { background: #fff; color: var(--oz-ink); }
.oz-btn--light:hover { background: var(--oz-surface); color: var(--oz-ink); }

.oz-btn--sm { font-size: 13px; padding: 12px 24px; border-radius: var(--oz-r-sm); letter-spacing: .5px; }
/* Header control: 144 x 51 in the source artboard. */
.oz-btn--header { padding: 15px 32px; font-size: 15px; }
.oz-btn--periwinkle { background: var(--oz-editorial-btn); color: var(--oz-ink); }

/* .oz-btn--ghost uses dark ink for its border/text, which reads fine on
   a light background but disappears against a photo. This is the same
   idea inverted for overlay-on-image contexts (editorial cards, anything
   sitting on a dark photo). */
.oz-btn--outline-white { background: transparent; color: #fff; border-color: #fff; }
.oz-btn--outline-white:hover { background: #fff; color: var(--oz-ink); }

/* Pill tabs */
.oz-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.oz-tab {
  font-size: 16px; font-weight: 600;
  padding: 17px 34px;
  border-radius: var(--oz-pill);
  border: 2px solid var(--oz-ink);
  background: transparent; color: var(--oz-ink);
  cursor: pointer;
}
.oz-tab[aria-selected="true"] { background: var(--oz-chrome); color: #fff; border-color: var(--oz-chrome); }

/* ==========================================================================
   6. Header
   ========================================================================== */

.oz-announce {
  background: var(--oz-surface);
  color: var(--oz-ink);
  text-align: center;
  font-size: 16px; font-weight: 600;
  padding: 15px 20px;
}

.oz-header { background: var(--oz-chrome); color: #fff; }
.oz-header a { color: #fff; }
/* The Login pill is a light button on dark chrome, so it must win over the
   blanket white link colour above. */
.oz-header a.oz-btn--light,
.oz-header a.oz-btn--light:hover { color: var(--oz-ink); }

.oz-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  min-height: var(--oz-header-h);
}

.oz-brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.oz-brand__mark { width: 46px; height: 46px; flex: none; }
.oz-brand__word {
  font-size: 26px; font-weight: 700; letter-spacing: 2.5px; color: #fff;
}
.oz-brand img { max-height: 56px; width: auto; }

.oz-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.oz-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.oz-nav li { position: relative; }
.oz-nav a {
  display: block;
  padding: 34px 16px;
  font-size: 16px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .5px;
}
.oz-nav .current-menu-item > a::after,
.oz-nav .current_page_item > a::after,
.oz-nav a:hover::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 26px;
  height: 3px; background: #fff;
}
.oz-nav a:hover { color: #fff; }

/* submenu */
.oz-nav .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 200px;
  background: var(--oz-chrome); flex-direction: column; gap: 0;
  padding: 8px 0; display: none; z-index: 60;
}
.oz-nav li:hover > .sub-menu { display: flex; }
.oz-nav .sub-menu a { padding: 10px 18px; text-transform: none; letter-spacing: 0; }
.oz-nav .sub-menu a::after { display: none; }

.oz-header__actions { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }

.oz-cart { position: relative; display: inline-flex; align-items: center; }
.oz-cart svg { width: 26px; height: 26px; }
.oz-cart__count {
  position: absolute; top: -6px; right: -8px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--oz-pill);
  background: var(--oz-accent); color: var(--oz-ink);
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

.oz-nav-toggle {
  display: none;
  background: transparent; border: 0; color: #fff;
  padding: 8px; cursor: pointer;
}
.oz-nav-toggle svg { width: 26px; height: 26px; }

/* ==========================================================================
   7. Hero
   ========================================================================== */

.oz-hero { background: var(--oz-hero); padding-block: 70px; overflow: hidden; }
.oz-hero__labels { display: flex; justify-content: space-between; gap: 20px; }
.oz-hero__stage { position: relative; text-align: center; margin-top: 8px; }
.oz-hero__word { position: relative; z-index: 1; user-select: none; }
.oz-hero__shoe {
  position: relative; z-index: 2;
  margin: -14% auto 26px;
  width: min(52%, 620px);
  /* Fixed box so slides with differently-proportioned cut-outs don't
     change the hero's height as the slider advances (a 135px jump before
     this). The ratio is the design's own hero image (1393x993), so the
     first slide renders exactly as it did; other images letterbox. */
  aspect-ratio: 1393 / 993;
}
/* Two classes deep: Elementor's `.elementor img{height:auto}` ties on
   specificity with a single-class rule and loads later, which would
   collapse this to auto height inside a container. */
.oz-hero .oz-hero__shoe img { width: 100%; height: 100%; object-fit: contain; }
.oz-hero__title { font-size: clamp(20px, 2.4vw, 24px); font-weight: 600; margin-bottom: 22px; }
.oz-hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Slider wrapper. The arrows are absolutely positioned against THIS box,
   not against a single slide - they have to outlive whichever slide is
   currently hidden, so they live outside the slide loop (see the note in
   the hero widget's render()). */
.oz-hero__slides { position: relative; }
.oz-hero__slide[hidden] { display: none; }
.oz-hero__dots { justify-content: center; margin-top: 22px; }

.oz-hero__arrow {
  position: absolute; top: 46%; z-index: 3;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; color: var(--oz-ink);
}
.oz-hero__arrow--prev { left: 0; }
.oz-hero__arrow--next { right: 0; }
.oz-hero__arrow svg { width: 22px; height: 22px; }

/* ==========================================================================
   8. Editorial pair
   ========================================================================== */

.oz-editorial { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.oz-editorial__card {
  position: relative;
  /* Reference design is a tall, portrait-oriented card (~4:5), not the
     wide ~3:2 380px-tall box this used to be at 560px column width. */
  aspect-ratio: 4 / 5;
  border-radius: var(--oz-r-lg);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* align-items default (stretch) would make the button fill the card's
     full width; the reference design's button is content-width. */
  align-items: flex-start;
  padding: 36px;
  background: var(--oz-card) center/cover no-repeat;
  color: #fff;
}
.oz-editorial__card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.55) 100%);
}
.oz-editorial__card > * { position: relative; z-index: 1; }
.oz-editorial__title { font-size: 26px; color: #fff; margin-bottom: 18px; }

/* ==========================================================================
   9. Trust bar
   ========================================================================== */

.oz-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.oz-trust__item { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.oz-trust__icon {
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--oz-ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.oz-trust__icon svg { width: 30px; height: 30px; }
.oz-trust__title { font-size: 18px; font-weight: 700; text-transform: uppercase; }

/* ==========================================================================
   10. Product card - matches the Figma card exactly
   ========================================================================== */

.oz-products { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 46px 40px; }

.oz-card { position: relative; }
.oz-card__media {
  position: relative;
  background: var(--oz-surface);
  border-radius: var(--oz-r-md);
  aspect-ratio: 270 / 246;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.oz-card__media img {
  width: 100%; height: 100%; object-fit: contain;
  padding: 14px;
  transition: transform .35s ease;
}
.oz-card:hover .oz-card__media img { transform: scale(1.04); }

.oz-card__badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--oz-badge); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 4px 9px; border-radius: var(--oz-r-sm);
  letter-spacing: .3px;
}
.oz-card__wish {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--oz-ink);
  transition: color .18s ease, transform .12s ease;
}
.oz-card__wish svg { width: 16px; height: 16px; }
.oz-card__wish:hover { color: var(--oz-badge); }
.oz-card__wish[aria-pressed="true"] { color: var(--oz-badge); }
.oz-card__wish[aria-pressed="true"] svg { fill: currentColor; }

.oz-card__body { padding-top: 14px; display: flex; flex-direction: column; gap: 5px; }
/* Reserves exactly 2 lines regardless of actual title length (a 1-line
   title like "Lono Yoga Short" sits 19px tall, a 2-line one like "Atomic
   Endurance Running Tee (Crew-Neck)" sits 38px tall) - without this, cards
   in the same grid row size to their own content and rows end up an
   inconsistent height apart (measured: 297px vs 316px, exactly one
   19px title line) depending on which titles happen to land in that row. */
.oz-card__title {
  font-size: 14px; font-weight: 600; color: var(--oz-ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
.oz-card__price { font-size: 14px; font-weight: 500; color: var(--oz-ink); }
.oz-card__price del { color: #9A9A9A; font-weight: 400; margin-left: 6px; }
.oz-card__price del span { text-decoration: inherit; }
.oz-card__price ins { text-decoration: none; color: var(--oz-sale); }

.oz-rating { display: inline-flex; align-items: center; gap: 6px; }
.oz-stars { position: relative; display: inline-block; font-size: 13px; line-height: 1; letter-spacing: 2px; color: #D9D9D9; }
.oz-stars::before { content: "\2605\2605\2605\2605\2605"; }
.oz-stars__fill { position: absolute; inset: 0; overflow: hidden; color: var(--oz-star); white-space: nowrap; }
.oz-stars__fill::before { content: "\2605\2605\2605\2605\2605"; }
.oz-rating__count { font-size: 12px; color: var(--oz-muted); }

/* Card CTA - "Add to cart" / "Select options" (real product_type_* and
   ajax_add_to_cart classes, so core's own wc-add-to-cart.js drives the AJAX
   flow with zero extra JS) or a disabled "Out of Stock" state. */
.oz-card__cta {
  display: block; width: 100%; margin-top: 6px;
  padding: 11px 14px; border-radius: var(--oz-pill);
  background: var(--oz-chrome); color: #fff;
  border: 1.5px solid var(--oz-chrome);
  font-size: 12.5px; font-weight: 600; letter-spacing: .2px;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.oz-card__cta:hover { background: #1f1f1f; color: #fff; }
.oz-card__cta.loading { opacity: .55; pointer-events: none; }

.oz-card__cta--disabled {
  display: block; width: 100%; margin-top: 6px;
  padding: 11px 14px; border-radius: var(--oz-pill);
  background: var(--oz-surface); color: var(--oz-muted);
  border: 1.5px solid var(--oz-line);
  font-size: 12.5px; font-weight: 600; letter-spacing: .2px;
  text-align: center; cursor: not-allowed;
}

/* wc-add-to-cart.js appends this "View cart" link right after the button
   once an AJAX add succeeds - real core markup, not the theme's own. */
.oz-card__body .added_to_cart {
  display: block; margin-top: 8px;
  font-size: 12px; font-weight: 600; color: var(--oz-accent);
  text-align: center; text-decoration: underline;
}

/* ==========================================================================
   11. Process section - numbered features + hotspot markers
   ========================================================================== */

.oz-process__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 30px;
  align-items: center;
  margin-top: 34px;
}
.oz-process__col { display: flex; flex-direction: column; gap: 34px; }
.oz-process__col--right { text-align: right; }
.oz-feature__num { font-size: 17px; font-weight: 700; color: var(--oz-accent); }
.oz-feature__title { font-size: 16px; font-weight: 700; margin-block: 4px; }

.oz-process__figure { position: relative; }
.oz-process__figure img { width: 100%; }
.oz-hotspot {
  position: absolute;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--oz-accent); color: #fff;
  font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px rgba(232,145,42,.18);
}
.oz-hotspot--1 { left: 8%;  top: 42%; }
.oz-hotspot--2 { left: 34%; bottom: 6%; }
.oz-hotspot--3 { left: 52%; top: 16%; }
.oz-hotspot--4 { right: 8%; top: 46%; }

/* ==========================================================================
   12. Why cards / category cards
   ========================================================================== */

.oz-why__card {
  border: 1px solid var(--oz-line);
  border-radius: var(--oz-r-lg);
  padding: 30px 26px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: #fff;
}
/* The line-art source files are 512x1024 with the drawing sitting in the
   middle third and deep white margins above and below, so height-fitting
   them renders the sneaker at ~75px. Crop to the drawing instead: cover
   the box and bias the focal point to the art's vertical centre (~48%). */
/* .oz-why__card is a COLUMN flex with align-items:center, so this item
   shrink-wraps and a width:100% child resolves against nothing (renders
   0px wide). In column flex the cross axis is the width - align-self
   stretch is what actually gives this box the card's width. */
.oz-why__art { --oz-why-art-h: 150px; align-self: stretch; width: 100%; height: var(--oz-why-art-h); overflow: hidden; }
/* Explicit px, not height:100% - a percentage height on a replaced element
   resolves against an indefinite parent and collapses. The shared custom
   property keeps the box and the image in step.
   Two classes deep on purpose: Elementor ships `.elementor img{height:auto}`
   in frontend.min.css, which has the SAME specificity as `.oz-why__art img`
   (0,1,1) and loads later, so it wins inside an Elementor container and
   flattens these to 0. `.oz-why__card .oz-why__art img` is (0,2,1). */
.oz-why__card .oz-why__art img {
  width: 100%; height: var(--oz-why-art-h);
  object-fit: cover; object-position: center 48%;
}

.oz-cat__card { display: flex; flex-direction: column; gap: 14px; text-align: center; }
.oz-cat__media {
  aspect-ratio: 382 / 372;
  border-radius: var(--oz-r-lg);
  overflow: hidden;
  background: var(--oz-slot) center/cover no-repeat;
}
.oz-cat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.oz-cat__card:hover .oz-cat__media img { transform: scale(1.05); }
.oz-cat__label { font-size: 16px; font-weight: 600; letter-spacing: .5px; }

/* ==========================================================================
   13. Best selling - outline + solid display treatment
   ========================================================================== */

.oz-bestsellers__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
/* Scoped to this heading row, not the shared .oz-h2--md class it also carries
   elsewhere (Why OZYZOR?, What People Say About Us are correctly mixed-case).
   Safe on "Best Selling" too - that heading is already literal uppercase text,
   so this is a no-op there. */
.oz-bestsellers__head h2 { text-transform: uppercase; }
.oz-outline-title { font-size: clamp(24px, 3vw, 34px); letter-spacing: .5px; }
.oz-outline-title .oz-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--oz-ink);
  paint-order: stroke fill;
}
.oz-carousel-nav { display: flex; gap: 28px; }
.oz-carousel-nav button {
  background: transparent; border: 0; cursor: pointer;
  font-size: 14px; font-weight: 600; letter-spacing: .5px;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  color: var(--oz-ink); padding: 0;
}
.oz-carousel-nav button[disabled] { opacity: .35; cursor: default; }
.oz-carousel-nav svg { width: 42px; height: 10px; }

.oz-carousel { overflow: hidden; }
.oz-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 40px) / 4);
  gap: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.oz-carousel__track::-webkit-scrollbar { display: none; }
.oz-carousel__track > * { scroll-snap-align: start; }

/* Edge-positioned circular arrows (You Might Also Like) - a wrapper OUTSIDE
   .oz-carousel is needed because that element's own overflow:hidden would
   otherwise clip these where they intentionally overhang the track's edge. */
.oz-carousel-edge-wrap { position: relative; }
.oz-carousel-edge-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--oz-line); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; color: var(--oz-ink);
  cursor: pointer; z-index: 3;
}
.oz-carousel-edge-arrow--prev { left: -17px; }
.oz-carousel-edge-arrow--next { right: -17px; }
.oz-carousel-edge-arrow:hover { background: var(--oz-ink); color: #fff; border-color: var(--oz-ink); }
.oz-carousel-edge-arrow[disabled] { opacity: .35; cursor: default; background: #fff; color: var(--oz-ink); border-color: var(--oz-line); }

/* ==========================================================================
   14. Testimonials
   ========================================================================== */

.oz-testimonials__grid {
  display: grid; grid-template-columns: 36% 1fr; gap: 60px; align-items: center;
}
.oz-quote-mark { font-size: 72px; font-weight: 700; line-height: 1; }

/* The slider is the positioning context for the nav arrows below, which sit
   OUTSIDE every card (see template-parts/testimonials.php for why) but need
   to visually land on the same row as whichever card is currently showing. */
.oz-testimonial-slider { position: relative; }

.oz-testimonial-card {
  background: #fff; border-radius: var(--oz-r-xl); padding: 36px;
  display: flex; flex-direction: column; gap: 20px;
}
.oz-testimonial-card__top { display: flex; align-items: center; gap: 16px; }
.oz-testimonial-card__label { font-size: 13px; font-weight: 500; color: var(--oz-muted); }
.oz-testimonial-card__quote { font-size: 18px; line-height: 1.8; color: var(--oz-quote); }
.oz-testimonial-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.oz-testimonial-card__person { display: flex; align-items: center; gap: 14px; }
.oz-testimonial-card__avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--oz-slot) center/cover no-repeat; flex: none; overflow: hidden;
}
.oz-testimonial-card__name { font-size: 14px; font-weight: 600; color: var(--oz-ink); }

.oz-dots { display: flex; gap: 6px; }
.oz-dot { width: 7px; height: 7px; border-radius: 50%; background: #D9D9D9; border: 0; padding: 0; cursor: pointer; }
.oz-dot[data-active="true"] { background: var(--oz-ink); }

.oz-testimonial-slider__dots {
  position: absolute; top: 36px; right: 36px;
}

.oz-testimonial-slider__nav {
  position: absolute; right: 36px; bottom: 36px;
  display: flex; gap: 10px;
}
.oz-testimonial-slider__arrow {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--oz-line); background: #fff;
  font-size: 18px; line-height: 1; color: var(--oz-ink);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.oz-testimonial-slider__arrow:hover { background: var(--oz-ink); color: #fff; border-color: var(--oz-ink); }

/* ==========================================================================
   15. Footer
   ========================================================================== */

.oz-footer { background: var(--oz-chrome); color: #fff; padding: 70px 0 28px; }
.oz-footer a { color: #fff; }
.oz-footer a:hover { color: var(--oz-accent); }
.oz-footer__top { display: flex; justify-content: space-between; gap: 60px; flex-wrap: wrap; }
.oz-footer__left { flex: 1 1 52%; display: flex; flex-direction: column; gap: 30px; }
.oz-footer__right { flex: 1 1 34%; display: flex; flex-direction: column; gap: 14px; }
.oz-footer__menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 28px; }
.oz-footer__menu a { font-size: 15px; }
.oz-footer__address { display: flex; flex-direction: column; gap: 6px; max-width: 380px; }
.oz-footer__address-label { font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #8A8A8A; }
.oz-footer__address-text { font-style: normal; font-size: 13px; line-height: 1.6; color: #C9C9C9; }
.oz-footer__address-gst { font-size: 12px; line-height: 1.6; color: #8A8A8A; letter-spacing: .2px; }
.oz-newsletter__label { font-size: 15px; font-weight: 500; }
.oz-newsletter__form {
  display: flex; align-items: center;
  background: #E8E8E8; border-radius: var(--oz-pill); padding: 5px 5px 5px 22px;
  max-width: 408px;
}
.oz-newsletter__form input[type="email"] {
  flex: 1 1 auto; border: 0; background: transparent; color: var(--oz-ink);
  font-size: 14px; padding: 12px 0; min-width: 0;
}
.oz-newsletter__form input::placeholder { color: #8A8A8A; }
.oz-newsletter__form button {
  flex: none; border: 0; cursor: pointer;
  background: #fff; color: var(--oz-ink);
  font-size: 14px; font-weight: 600;
  padding: 13px 26px; border-radius: var(--oz-pill);
}
.oz-footer__rule { height: 1px; background: var(--oz-rule-dark); margin: 44px 0 24px; }
.oz-footer__bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.oz-footer__legal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; }
.oz-footer__legal a { font-size: 12px; }
.oz-footer__copy { font-size: 12px; }

/* ==========================================================================
   16a. Shop archive - banner + sidebar filters + sort + 3-col grid
   ========================================================================== */

.oz-shop__layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 50px;
  padding-block: 60px;
  align-items: start;
}

.oz-shop__sidebar { position: sticky; top: 24px; }

.oz-filters { display: flex; flex-direction: column; gap: 0; }

.oz-filter { border-bottom: 1px solid var(--oz-line); }
.oz-filter:first-child { border-top: 1px solid var(--oz-line); }

.oz-filter__label {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 2px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--oz-ink);
}
.oz-filter__label::-webkit-details-marker { display: none; }
.oz-filter__label::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid var(--oz-ink);
  border-bottom: 2px solid var(--oz-ink);
  transform: rotate(45deg);
  transition: transform .16s ease;
}
.oz-filter[open] > .oz-filter__label::after { transform: rotate(-135deg); }

.oz-filter__body { padding: 0 2px 20px; display: flex; flex-direction: column; gap: 10px; }
.oz-filter__row { display: flex; align-items: center; gap: 10px; }
.oz-filter__row input[type="number"] {
  width: 0; flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--oz-line); border-radius: var(--oz-r-sm);
  padding: 9px 10px; font-size: 13px;
}
.oz-filter__check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--oz-muted); cursor: pointer; }
.oz-filter__check input { width: 15px; height: 15px; accent-color: var(--oz-ink); }
.oz-filter__empty { font-size: 12.5px; color: var(--oz-muted); font-style: italic; margin: 0; }
.oz-filters__submit { margin-top: 22px; width: 100%; padding: 13px 20px; font-size: 14px; }

.oz-shop__main { min-width: 0; }

.oz-shop__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: 40px;
}
.oz-shop__heading { flex: 1 1 auto; text-align: center; }
.oz-shop__title { font-size: 20px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.oz-shop__count { margin: 6px 0 0; font-size: 13px; color: var(--oz-muted); }
.oz-shop__count span { font-variant-numeric: tabular-nums; }

.oz-sort { position: relative; flex: none; }
.oz-sort__select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--oz-line); border-radius: var(--oz-r-sm);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23111' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  padding: 11px 34px 11px 16px;
  font-size: 13px; font-weight: 600; color: var(--oz-ink);
  cursor: pointer; min-width: 160px;
}

.oz-shop .oz-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }

.oz-shop__empty { text-align: center; padding: 60px 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }

@media (max-width: 900px) {
  .oz-shop__layout { grid-template-columns: 1fr; gap: 30px; }
  .oz-shop__sidebar { position: static; }
  .oz-shop .oz-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oz-shop__head { flex-direction: column; align-items: stretch; }
  .oz-shop__heading { text-align: left; }
}

@media (max-width: 560px) {
  .oz-shop .oz-products { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
}

/* ==========================================================================
   16b. Single product
   ========================================================================== */

.oz-breadcrumb { padding: 22px 0 0; font-size: 12.5px; color: var(--oz-muted); }
.oz-breadcrumb a { color: var(--oz-muted); }
.oz-breadcrumb a:hover { color: var(--oz-ink); }
.oz-breadcrumb > * { color: var(--oz-ink); }

.oz-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  padding-block: 34px 60px;
  align-items: start;
}

/* Gallery -------------------------------------------------------------- */
.oz-pdp__gallery { display: flex; gap: 16px; }
.oz-pdp__thumbs { display: flex; flex-direction: column; gap: 12px; flex: none; width: 78px; }
.oz-pdp__thumb {
  width: 78px; height: 78px;
  border: 1px solid var(--oz-line); border-radius: var(--oz-r-md);
  background: var(--oz-surface); padding: 0; cursor: pointer; overflow: hidden;
}
.oz-pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }
.oz-pdp__thumb.is-active { border-color: var(--oz-ink); border-width: 2px; }

.oz-pdp__main {
  position: relative; flex: 1 1 auto;
  background: var(--oz-hero); border-radius: var(--oz-r-lg);
  aspect-ratio: 1 / 1; overflow: hidden;
}
/*
 * inset:0 alone stretches this to fill .oz-pdp__main (a definite 456x456 box
 * from aspect-ratio:1/1). Redundantly ALSO setting width/height:100% here
 * broke that: for an absolutely-positioned replaced element (an <img> has
 * intrinsic dimensions, unlike a div), browsers apply CSS2.1's replaced-
 * element sizing algorithm to the width/height percentages themselves and let
 * the image's own intrinsic aspect ratio win, which measured 456 wide but
 * 552 tall instead of the square box - overflowing its own container. Insets
 * alone don't hit that algorithm.
 */
.oz-pdp__mainimg {
  position: absolute; inset: 0; object-fit: contain;
  padding: 30px; opacity: 0; transition: opacity .25s ease;
}
.oz-pdp__mainimg.is-active { opacity: 1; }
.oz-pdp__badge { position: absolute; top: 16px; left: 16px; z-index: 2; }

/* Summary ---------------------------------------------------------------- */
.oz-pdp__eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 2px; color: var(--oz-muted); }
.oz-pdp__title { font-size: 30px; margin-bottom: 6px; }
.oz-pdp__tagline { font-size: 17px; font-style: italic; color: var(--oz-muted); margin: 0 0 18px; }

.oz-pdp__price { font-size: 15px; font-weight: 700; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; }
.oz-pdp__price-label {
  font-size: 13px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--oz-ink);
}
.oz-pdp__price-label--mrp { color: var(--oz-muted); }
.oz-pdp__price-current { font-size: 22px; font-weight: 700; color: var(--oz-sale); }
.oz-pdp__price-current .woocommerce-Price-amount { color: inherit; }
.oz-pdp__price-mrp { display: inline-flex; align-items: baseline; gap: 6px; }
.oz-pdp__price-mrp del { color: #9A9A9A; font-weight: 500; font-size: 16px; text-decoration: line-through; }
/* Woo's own range fallback (variable products with a genuine min-max spread)
   still renders <ins>/<del> internally - keep those legible too. */
.oz-pdp__price .price ins { text-decoration: none; color: var(--oz-sale); }
.oz-pdp__price .price del { color: #9A9A9A; font-weight: 500; }
.oz-pdp__tax-note { font-size: 12.5px; color: var(--oz-muted); margin-top: 6px; }
.oz-pdp__rule { border: 0; border-top: 1px solid var(--oz-line); margin: 22px 0; }

/* Variations ------------------------------------------------------------- */
.oz-pdp__group { margin-bottom: 26px; }
.oz-pdp__grouplabel { display: block; font-size: 15px; font-weight: 700; margin-bottom: 12px; }

.oz-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.oz-swatch {
  width: 56px; height: 56px; padding: 4px;
  border: 2px solid var(--oz-line); border-radius: var(--oz-r-sm);
  background: var(--oz-surface); cursor: pointer;
}
.oz-swatch img { width: 100%; height: 100%; object-fit: contain; }
.oz-swatch[aria-pressed="true"] { border-color: var(--oz-ink); }

.oz-sizes { display: flex; flex-wrap: wrap; gap: 10px; }
.oz-size {
  min-width: 48px; height: 48px; padding: 0 14px;
  border: 1px solid var(--oz-line); border-radius: var(--oz-r-sm);
  background: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}
.oz-size:hover { border-color: var(--oz-ink); }
.oz-size[aria-pressed="true"] { background: var(--oz-ink); border-color: var(--oz-ink); color: #fff; }

.woocommerce-variation-price { margin: 4px 0 14px; font-size: 20px; font-weight: 700; color: var(--oz-ink); }
.woocommerce-variation-price .price ins { text-decoration: none; color: var(--oz-sale); }
.woocommerce-variation-availability { font-size: 13px; color: var(--oz-muted); margin-bottom: 14px; }
.woocommerce-variation-availability .in-stock { color: #1a7a3c; }
.woocommerce-variation-availability .out-of-stock { color: var(--oz-badge); }

/* Quantity + actions ------------------------------------------------------ */
/* Stacked rows - Quantity (its own labeled group, matching Color/Size), then
   the button row below - not one wrapping row of controls. */
.oz-pdp__actions { display: flex; flex-direction: column; gap: 22px; margin-top: 6px; }
.oz-pdp__group--qty { margin-bottom: 0; }
.oz-qty { display: inline-flex; align-items: center; border: 1px solid var(--oz-line); border-radius: var(--oz-pill); overflow: hidden; }
.oz-qty__btn { width: 40px; height: 44px; background: transparent; border: 0; font-size: 18px; cursor: pointer; color: var(--oz-ink); }
.oz-qty input.qty {
  width: 44px; height: 44px; border: 0; text-align: center;
  font-size: 15px; font-weight: 600; -moz-appearance: textfield;
}
.oz-qty input.qty::-webkit-inner-spin-button, .oz-qty input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.oz-pdp__buttons { display: flex; gap: 12px; }
.oz-pdp__buttons .oz-btn { flex: 0 1 auto; white-space: nowrap; text-transform: uppercase; letter-spacing: .5px; }
.single_add_to_cart_button[disabled] { opacity: .45; cursor: not-allowed; }

.oz-pdp__wishlist {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--oz-ink);
  text-transform: uppercase; letter-spacing: .5px;
  margin-top: 22px; padding: 0;
}
.oz-pdp__wishlist svg { width: 19px; height: 19px; }
.oz-pdp__wishlist[aria-pressed="true"] { color: var(--oz-badge); }
.oz-pdp__wishlist[aria-pressed="true"] svg { fill: currentColor; }

/* A bordered, rounded field - not a bare text row with a hairline above it -
   matching the reference's boxed accordion treatment. */
.oz-pdp__accordion {
  border: 1px solid var(--oz-line); border-radius: var(--oz-r-sm);
  margin-top: 26px; padding: 16px 20px;
}
.oz-pdp__accordion + .oz-pdp__accordion { margin-top: 12px; }
.oz-pdp__accordion summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 700;
}
.oz-pdp__accordion summary::-webkit-details-marker { display: none; }
.oz-pdp__accordion summary::after { content: "+"; font-size: 20px; font-weight: 400; }
.oz-pdp__accordion[open] summary::after { content: "\2212"; }
.oz-pdp__accordion-body { padding-top: 14px; }

@media (max-width: 900px) {
  .oz-pdp { grid-template-columns: 1fr; gap: 30px; }
  .oz-pdp__gallery { flex-direction: column-reverse; }
  .oz-pdp__thumbs { flex-direction: row; width: auto; }
  .oz-pdp__buttons { flex: 1 1 100%; }
}

/* ==========================================================================
   16. Page furniture
   ========================================================================== */

.oz-page-hero { background: var(--oz-hero); padding-block: 90px; text-align: center; }
.oz-page-hero .oz-lead { margin-top: 14px; }

.oz-banner {
  min-height: 420px;
  background: var(--oz-ink) center/cover no-repeat;
}

.oz-entry { padding-block: 70px; }
.oz-entry__content > * + * { margin-top: 1em; }
.oz-entry__content h2 { font-size: 28px; margin-top: 1.6em; }
.oz-entry__content h3 { font-size: 20px; margin-top: 1.4em; }
.oz-entry__content ul, .oz-entry__content ol { padding-left: 20px; color: var(--oz-muted); }
.oz-entry__content blockquote {
  margin: 1.5em 0; padding: 18px 26px;
  border-left: 3px solid var(--oz-accent);
  background: var(--oz-surface); color: var(--oz-ink);
}

.oz-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 50px; }
.oz-pagination .page-numbers {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--oz-pill); font-size: 14px; font-weight: 600;
  border: 1px solid var(--oz-line); color: var(--oz-ink);
}
.oz-pagination .page-numbers.current,
.oz-pagination .page-numbers:hover { background: var(--oz-chrome); color: #fff; border-color: var(--oz-chrome); }

/* ==========================================================================
   16c. WooCommerce Cart & Checkout blocks
   ========================================================================== */

/*
 * The Cart and Checkout pages are built from the WooCommerce Cart/Checkout
 * BLOCKS (wp:woocommerce/cart, /checkout), not the classic cart.php/
 * checkout.php templates - a classic template override would be silently
 * ignored here. WooCommerce ships its own baseline styles for these blocks
 * (wc-blocks-style-cart-css / -checkout-css), which is why the page already
 * looks reasonably laid out - it's just using generic block defaults (sharp
 * corners, grey button, no uppercase) instead of this site's own language.
 * Every selector below is a real class name confirmed on the rendered page,
 * not guessed from WooCommerce's source.
 */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  font-family: var(--oz-font);
  --wc-blocks-primary: var(--oz-chrome);
}

/* Primary action buttons: Proceed to Checkout, Place Order, Apply coupon -
   all share .contained. Match the sitewide full-pill / uppercase / black
   convention used everywhere else (hero CTAs, PDP Add to Cart, Subscribe). */
.wc-block-components-button.contained,
.wc-block-cart__submit-button,
.wc-block-checkout__submit-button {
  background: var(--oz-chrome) !important;
  color: #fff !important;
  border-radius: var(--oz-pill) !important;
  text-transform: uppercase;
  letter-spacing: .3px;
  font-weight: 600 !important;
  font-size: 13px;
  padding: 14px 26px !important;
  border: 0 !important;
  white-space: nowrap !important;
  transition: background-color .18s ease;
}
.wc-block-components-button.contained:hover,
.wc-block-cart__submit-button:hover,
.wc-block-checkout__submit-button:hover { background: #1f1f1f !important; color: #fff !important; }

/* Quantity stepper: match the pill treatment used on the product page. */
.wc-block-components-quantity-selector {
  border-radius: var(--oz-pill) !important;
  border-color: var(--oz-line) !important;
  overflow: hidden;
}
.wc-block-components-quantity-selector__button { color: var(--oz-ink); }
.wc-block-components-quantity-selector__input { font-weight: 600; color: var(--oz-ink); }

/* Product name / totals labels - align weight with the rest of the site's
   product-card typography rather than the block library's own defaults. */
.wc-block-components-product-name { font-weight: 600; color: var(--oz-ink); }
.wc-block-cart__totals-title,
.wc-block-components-panel__button {
  font-family: var(--oz-font);
  letter-spacing: 1px;
}

/* Cart items table + totals sidebar: hairline borders and card treatment
   consistent with the rest of the site (var(--oz-line), no boxed-shadow
   "admin panel" look from the block defaults). */
.wc-block-cart-items__header,
.wc-block-cart-items .wc-block-cart-items__row {
  border-color: var(--oz-line) !important;
}
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-cart__totals-title {
  border-color: var(--oz-line) !important;
}
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--oz-ink);
  font-weight: 700;
}

/* Links inside the block (remove item, edit address, etc.) use the site's
   accent on hover instead of WooCommerce's default blue. */
.wc-block-cart-item__remove-link,
.wc-block-components-product-name:hover,
.wc-block-cart-item__remove-link:hover {
  color: var(--oz-ink);
}
.wc-block-cart-item__remove-link:hover { color: var(--oz-badge); }

/* ==========================================================================
   16d. Cart page - classic template (woocommerce/cart/cart.php override)
   ========================================================================== */

/*
 * This is the CLASSIC, form-based cart (real page reloads, works with JS
 * off) - the site's Cart page was switched from the WooCommerce Cart BLOCK
 * to the [woocommerce_cart] shortcode specifically so the container width,
 * every color/spacing token, and the button styling could be controlled
 * directly here instead of overriding Block-library CSS with !important.
 * The .oz-container wrap below is what gives it the same 1200px centered
 * width as every other page - the Cart block had no such constraint, which
 * is why it ran edge-to-edge before.
 */

.oz-cart-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  gap: 60px;
  padding-block: 50px 90px;
}

.oz-cart__form { display: block; }

.oz-cart__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.oz-cart__table thead th {
  text-align: left;
  padding: 0 12px 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--oz-muted);
  border-bottom: 1px solid var(--oz-ink);
}
.oz-cart__table thead th.product-remove,
.oz-cart__table thead th.product-thumbnail { width: 1%; }
.oz-cart__table tbody td {
  padding: 22px 12px;
  border-bottom: 1px solid var(--oz-line);
  vertical-align: middle;
}
.oz-cart__table td.product-thumbnail img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: var(--oz-r-sm); background: var(--oz-surface);
}
.oz-cart__table td.product-name a {
  font-weight: 600; color: var(--oz-ink);
}
.oz-cart__table td.product-name a:hover { color: var(--oz-accent); }
.oz-cart__table .wc-item-meta { margin-top: 6px; font-size: 12.5px; color: var(--oz-muted); list-style: none; padding: 0; }
.oz-cart__table .wc-item-meta-label { font-weight: 600; color: var(--oz-ink); }
.oz-cart__table td.product-price,
.oz-cart__table td.product-subtotal { font-weight: 600; color: var(--oz-ink); white-space: nowrap; }

.oz-cart__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--oz-muted); text-decoration: none;
}
.oz-cart__remove svg { width: 16px; height: 16px; }
.oz-cart__remove:hover { color: var(--oz-badge); background: var(--oz-surface); }

.oz-cart__actions {
  /* Stays a plain table-cell (colspan="6" only resolves against real
     table-cell layout - display:flex here would break the cell's width). */
  padding: 24px 12px 0 !important;
  border-bottom: 0 !important;
}
.oz-cart__actions-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.oz-cart__actions .oz-btn { border-radius: var(--oz-pill); }
.oz-cart__coupon { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oz-cart__coupon #coupon_code {
  height: 44px; padding: 0 16px;
  border: 1px solid var(--oz-line); border-radius: var(--oz-pill);
  font-size: 14px; min-width: 200px;
}

.oz-cart__collaterals { display: block; }
.oz-cart__totals {
  /* WooCommerce's own woocommerce-layout.css (kept enqueued - see
     inc/woocommerce.php) sets `.cart-collaterals .cart_totals { float:right;
     width:48% }` at higher specificity than a single class selector, so
     these need !important to actually win. */
  width: 100% !important; max-width: 380px; float: none !important;
  border: 1px solid var(--oz-line); border-radius: var(--oz-r-lg);
  padding: 28px 30px 30px;
}
.oz-cart__totals-title { font-size: 18px; font-weight: 700; margin: 0 0 18px; }
.oz-cart__totals-table { width: 100%; border-collapse: collapse; }
.oz-cart__totals-table tr { border-bottom: 1px solid var(--oz-line); }
.oz-cart__totals-table tr:last-child { border-bottom: 0; }
.oz-cart__totals-table th,
.oz-cart__totals-table td { text-align: left; padding: 13px 0; font-size: 14px; font-weight: 400; }
.oz-cart__totals-table th { color: var(--oz-muted); font-weight: 500; }
.oz-cart__totals-table td { text-align: right; color: var(--oz-ink); font-weight: 600; }
.oz-cart__totals-table tr.order-total th,
.oz-cart__totals-table tr.order-total td { font-size: 18px; font-weight: 700; padding-top: 16px; }
.oz-cart__checkout { margin-top: 22px; }
.oz-cart__checkout .oz-btn { width: 100%; white-space: nowrap; }

/* Real WooCommerce core output (shipping method list, "change address"
   link) - unstyled without Woo's own dequeued classic stylesheet. */
.woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
.woocommerce-shipping-methods li { margin: 0 0 6px; }
.woocommerce-shipping-methods li:last-child { margin-bottom: 0; }
.woocommerce-shipping-methods label { font-weight: 600; color: var(--oz-ink); }
.oz-cart__totals-table .shipping-calculator-button,
.oz-cart__totals-table a { color: var(--oz-accent); text-decoration: underline; font-weight: 500; }
.oz-cart__totals-table .woocommerce-shipping-destination { font-size: 13px; color: var(--oz-muted); margin-top: 6px; }

.oz-cart__empty { text-align: center; padding: 80px 0; }

/* WooCommerce's own classic stylesheet (which supplies the responsive
   table -> stacked-card transform via [data-title]) is intentionally
   dequeued sitewide - see inc/woocommerce.php - so that behaviour has to be
   reproduced here for the cart table specifically. */
@media (max-width: 700px) {
  .oz-cart__table thead { display: none; }
  .oz-cart__table, .oz-cart__table tbody, .oz-cart__table tr, .oz-cart__table td { display: block; width: 100%; }
  .oz-cart__table tr { padding: 18px 0; border-bottom: 1px solid var(--oz-line); }
  .oz-cart__table td { border-bottom: 0; padding: 4px 0; text-align: left !important; }
  .oz-cart__table td[data-title]::before {
    content: attr(data-title); display: block;
    font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--oz-muted); margin-bottom: 4px;
  }
  .oz-cart__table td.product-remove { position: absolute; top: 18px; right: 0; }
  .oz-cart__table tr { position: relative; }
  .oz-cart__actions-inner { flex-direction: column; align-items: stretch; }
  .oz-cart__totals { max-width: none; }
}

/* ==========================================================================
   16e. Checkout page - classic template (woocommerce/checkout/*.php)
   ========================================================================== */

.oz-checkout-card {
  margin-block: 50px 90px;
  background: #fff;
  border: 1px solid var(--oz-line);
  border-radius: var(--oz-r-lg);
  overflow: hidden;
}

.oz-checkout__topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  padding: 24px 40px;
  border-bottom: 1px solid var(--oz-line);
}
.oz-checkout__brand { font-size: 21px; font-weight: 700; letter-spacing: .5px; }

.oz-checkout__steps { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.oz-checkout__step {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 500; color: var(--oz-ink);
}
/* Connector rule between steps, as in the reference design. */
.oz-checkout__step + .oz-checkout__step::before {
  content: ""; width: 46px; height: 1px; background: var(--oz-line); margin: 0 14px;
}
.oz-checkout__stepicon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 12px; font-weight: 700;
  background: var(--oz-surface); color: var(--oz-muted);
}
.oz-checkout__stepicon svg { width: 13px; height: 13px; stroke-width: 2.4; }
.oz-checkout__step.is-done .oz-checkout__stepicon { background: #EFEFF6; color: var(--oz-ink); }
.oz-checkout__step.is-active .oz-checkout__stepicon { background: var(--oz-chrome); color: #fff; }

/* Two columns divided by a full-height rule, the review side lightly
   tinted - the card owns the border, each column owns its own padding. */
.oz-checkout-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  align-items: start;
}
.oz-checkout__col { padding: 36px 40px 48px; min-width: 0; }
.oz-checkout__col--review {
  border-left: 1px solid var(--oz-line);
  background: #FBFBFD;
  align-self: stretch;
}

.oz-checkout__title { font-size: clamp(26px, 2.6vw, 32px); font-weight: 600; margin: 0 0 26px; }
.oz-checkout__section-label { font-size: 16px; font-weight: 500; margin: 0 0 14px; }

/* Delivery method. Static single option by design - see form-billing.php. */
.oz-delivery-mode { margin-bottom: 26px; }
.oz-delivery-mode__opt {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px 13px 16px;
  border: 1.5px solid var(--oz-ink); border-radius: 8px;
  font-size: 14.5px; font-weight: 500;
}
.oz-delivery-mode__dot {
  position: relative; flex: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--oz-ink);
}
.oz-delivery-mode__dot::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 5px; height: 5px; border-radius: 50%; background: #fff;
}
.oz-delivery-mode svg { width: 18px; height: 18px; }

/*
 * A flex-wrap row, not a column: WooCommerce's own address-i18n.js
 * flattens every billing field to a direct child of this wrapper on load
 * (see the note atop form-billing.php), so the City/State/ZIP three-up
 * layout has to come from sizing those three fields' flex-basis to ~1/3
 * rather than from a nested grid wrapper - a nested one gets emptied.
 */
.oz-checkout__fields { display: flex; flex-wrap: wrap; gap: 18px; }
.oz-checkout__fields .form-row { margin: 0; flex: 1 1 100%; min-width: 0; }
#billing_city_field, #billing_state_field, #billing_postcode_field {
  flex: 1 1 calc(33.333% - 12px);
}
.oz-checkout__fields label {
  display: block; margin-bottom: 8px;
  font-size: 14px; font-weight: 500; color: var(--oz-ink);
}
.oz-checkout__fields label .required { color: #E5484D; text-decoration: none; }
.oz-checkout__fields label .optional { color: var(--oz-muted); font-weight: 400; }
.oz-checkout__fields .woocommerce-input-wrapper { display: block; position: relative; }
.oz-checkout__fields input.input-text,
.oz-checkout__fields select {
  width: 100%; height: 50px; padding: 0 16px;
  border: 1px solid var(--oz-line); border-radius: 8px;
  font-size: 14.5px; color: var(--oz-ink); background: #fff;
}
.oz-checkout__fields input.input-text::placeholder { color: #9A9AA5; }
.oz-checkout__fields input.input-text:focus,
.oz-checkout__fields select:focus { outline: 2px solid var(--oz-accent); outline-offset: 1px; }
.oz-checkout__fields .select2-container .select2-selection--single {
  height: 50px; border: 1px solid var(--oz-line); border-radius: 8px;
}
.oz-checkout__fields .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 48px; padding-left: 16px; color: var(--oz-ink); font-size: 14.5px;
}
.oz-checkout__fields .select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px; }

/* Only one calling-code market is configured on this store, so the flag is
   a static decoration, not a functional country-code switcher. */
#billing_phone_field .woocommerce-input-wrapper::before {
  content: "\1F1EE\1F1F3";
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  font-size: 15px; line-height: 1; pointer-events: none;
}
#billing_phone_field input.input-text { padding-left: 46px; }

.woocommerce-terms-and-conditions-wrapper { margin-top: 6px; }
.woocommerce-terms-and-conditions-wrapper .form-row { margin: 0; padding: 0; }
.woocommerce-terms-and-conditions-wrapper label {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: var(--oz-muted); cursor: pointer; line-height: 1.5;
}
.woocommerce-terms-and-conditions-wrapper input.input-checkbox {
  width: 17px; height: 17px; margin-top: 1px; flex: none; accent-color: var(--oz-ink);
}
.woocommerce-terms-and-conditions-link { color: var(--oz-ink); font-weight: 600; text-decoration: underline; }
.woocommerce-privacy-policy-text { font-size: 12.5px; color: var(--oz-muted); line-height: 1.5; }
.woocommerce-privacy-policy-text p { margin: 0 0 12px; }

/* ---- Review column ---- */

.oz-checkout__review-title { font-size: 19px; font-weight: 600; margin: 0 0 22px; }

/* review-order.php's root is display:contents so its three blocks (items,
   coupon, totals) flow as normal siblings of the review column while the
   root element itself stays present as the AJAX fragment target. */
.oz-checkout__review { display: contents; }

.oz-checkout__items { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; }
.oz-checkout__item { display: flex; align-items: flex-start; gap: 16px; }
.oz-checkout__item-thumb { flex: none; }
.oz-checkout__item-thumb img {
  display: block;
  width: 84px; height: 84px; object-fit: cover;
  border: 1px solid var(--oz-line); border-radius: 8px; background: #fff;
}
.oz-checkout__item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.oz-checkout__item-name { font-size: 14.5px; font-weight: 500; color: var(--oz-ink); }
.oz-checkout__item-qty { font-size: 12px; color: var(--oz-muted); }
.oz-checkout__item-price { font-size: 14.5px; font-weight: 500; color: var(--oz-ink); margin-top: 2px; }
.oz-checkout__item-body .wc-item-meta { margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--oz-muted); }
.oz-checkout__item-body .wc-item-meta p { margin: 0; }
.oz-checkout__item-body .wc-item-meta-label { font-weight: 600; color: var(--oz-ink); }

/* Discount code. Not Woo's <form class="checkout_coupon"> - see the note in
   review-order.php; it drives the same wc-ajax=apply_coupon endpoint. */
.oz-coupon {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 12px; margin-bottom: 18px;
  border: 1px solid var(--oz-line); border-radius: 8px; background: #fff;
}
.oz-coupon__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--oz-surface); color: var(--oz-ink);
}
.oz-coupon__icon svg { width: 15px; height: 15px; }
.oz-coupon__input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; outline: none;
  height: 36px; font-size: 14px; color: var(--oz-ink);
}
.oz-coupon__input::placeholder { color: #9A9AA5; }
.oz-coupon__apply {
  flex: none; border: 0; background: transparent; cursor: pointer;
  padding: 8px 10px; font-size: 14px; font-weight: 600; color: var(--oz-ink);
}
.oz-coupon__apply:hover { color: var(--oz-accent); }
.oz-coupon__apply[disabled] { opacity: .5; cursor: default; }
.oz-coupon__msg { margin: -8px 0 16px; font-size: 12.5px; line-height: 1.5; }
.oz-coupon__msg[data-state="error"] { color: #C3373B; }
.oz-coupon__msg[data-state="ok"] { color: #1E8E3E; }

.oz-checkout__totals-table { width: 100%; border-collapse: collapse; }
.oz-checkout__totals-table th,
.oz-checkout__totals-table td {
  text-align: left; padding: 7px 0; font-size: 14px; font-weight: 400; vertical-align: top;
}
.oz-checkout__totals-table th { color: var(--oz-muted); font-weight: 400; }
.oz-checkout__totals-table td { text-align: right; color: var(--oz-ink); font-weight: 500; }
.oz-checkout__totals-table tr.order-total th,
.oz-checkout__totals-table tr.order-total td {
  font-size: 16px; font-weight: 700; color: var(--oz-ink); padding-top: 14px;
}
.oz-checkout__totals-table .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
.oz-checkout__totals-table .woocommerce-shipping-methods label { font-weight: 500; color: var(--oz-ink); }
.oz-checkout__totals-table .woocommerce-shipping-destination { font-size: 12.5px; color: var(--oz-muted); margin-top: 4px; }

/* ---- Payment ---- */

.woocommerce-checkout-payment { margin-top: 22px; }
.woocommerce-checkout-payment .payment_methods {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
/* Woo renders the radio and its <label> as SIBLINGS inside the <li>, not
   the input nested in the label - so the row has to flex at <li> level or
   the radio stacks above its own label. */
.woocommerce-checkout-payment .payment_methods > li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  border: 1px solid var(--oz-line); border-radius: 8px; background: #fff;
  padding: 13px 16px;
}
.woocommerce-checkout-payment .payment_methods > li > label {
  display: flex; align-items: center; gap: 10px; flex: 1 1 auto;
  font-size: 14.5px; font-weight: 500; color: var(--oz-ink); cursor: pointer; margin: 0;
}
.woocommerce-checkout-payment .payment_methods > li > .payment_box { flex: 1 1 100%; }
.woocommerce-checkout-payment .payment_methods input.input-radio {
  width: 17px; height: 17px; flex: none; accent-color: var(--oz-ink); margin: 0;
}
.woocommerce-checkout-payment .payment_methods label img { max-height: 24px; width: auto; margin-left: auto; }
.woocommerce-checkout-payment .payment_box {
  margin: 10px 0 0; padding: 12px 14px;
  background: var(--oz-surface); border-radius: 6px;
  font-size: 12.5px; color: var(--oz-muted); line-height: 1.55;
}
.woocommerce-checkout-payment .payment_box p:first-child { margin-top: 0; }
.woocommerce-checkout-payment .payment_box p:last-child { margin-bottom: 0; }
.woocommerce-checkout-payment .form-row.place-order { margin: 20px 0 0; padding: 0; }

#place_order {
  width: 100%; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 28px;
  border: 0; border-radius: 8px;
  background: var(--oz-chrome); color: #fff;
  font-size: 15.5px; font-weight: 600; cursor: pointer;
  transition: background-color .18s ease;
}
#place_order:hover { background: #1f1f1f; }

.oz-checkout__secure {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 20px 0 0;
  font-size: 13px; color: var(--oz-muted); line-height: 1.55;
}
.oz-checkout__secure svg { flex: none; width: 19px; height: 19px; margin-top: 1px; color: var(--oz-ink); }
.oz-checkout__secure strong { display: block; color: var(--oz-ink); font-size: 14px; font-weight: 500; margin-bottom: 4px; }

@media (max-width: 980px) {
  .oz-checkout-page { grid-template-columns: 1fr; }
  .oz-checkout__col--review { border-left: 0; border-top: 1px solid var(--oz-line); }
}
@media (max-width: 700px) {
  .oz-checkout__topbar { flex-direction: column; align-items: flex-start; padding: 20px 22px; }
  .oz-checkout__col { padding: 26px 22px 34px; }
  .oz-checkout__steps { gap: 0; }
  .oz-checkout__step + .oz-checkout__step::before { width: 18px; margin: 0 8px; }
  #billing_city_field, #billing_state_field, #billing_postcode_field { flex-basis: 100%; }
}

/* ==========================================================================
   16f. My Account - classic template (woocommerce/myaccount/my-account.php)
   Every endpoint (dashboard, orders, view-order, downloads, addresses, the
   two edit forms) renders through the shared .oz-account__content card
   below, so these rules target WooCommerce's own stable class names rather
   than per-endpoint markup - only my-account.php itself was overridden, to
   add the sidebar/content grid core never wraps around navigation.php.
   ========================================================================== */

.oz-account-page {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
  gap: 28px;
  margin-block: 50px 90px;
}

.oz-account__nav {
  background: #fff;
  border: 1px solid var(--oz-line);
  border-radius: var(--oz-r-lg);
  padding: 10px;
  position: sticky;
  top: 24px;
}
.oz-account__nav .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.oz-account__nav .woocommerce-MyAccount-navigation-link a {
  display: block;
  padding: 13px 16px;
  border-radius: var(--oz-r-md);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--oz-muted);
  text-decoration: none;
}
.oz-account__nav .woocommerce-MyAccount-navigation-link a:hover { background: var(--oz-surface); color: var(--oz-ink); }
.oz-account__nav .woocommerce-MyAccount-navigation-link.is-active a {
  background: var(--oz-chrome);
  color: #fff;
  font-weight: 600;
}
.oz-account__nav .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--oz-badge); }

.oz-account__content {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--oz-line);
  border-radius: var(--oz-r-lg);
  padding: 40px;
}
.oz-account__content h2 { font-size: 20px; font-weight: 600; margin: 0 0 20px; }
.oz-account__content > p { margin: 0 0 14px; line-height: 1.7; }
.oz-account__content > p:last-child { margin-bottom: 0; }
.oz-account__content p a { color: var(--oz-accent); text-decoration: underline; }
.oz-account__content mark { background: none; color: inherit; font-weight: 600; }

/* Notices - session-queued (ul.woocommerce-error/message) and inline
   wc_print_notice() output (div.woocommerce-info) share these classes. */
.oz-account__content .woocommerce-notices-wrapper:empty { display: none; }
.oz-account__content .woocommerce-message,
.oz-account__content .woocommerce-error,
.oz-account__content .woocommerce-info {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  list-style: none; margin: 0 0 24px; padding: 14px 18px;
  border-radius: var(--oz-r-sm); font-size: 13.5px; line-height: 1.5;
}
.oz-account__content .woocommerce-message { background: #EAF6EC; color: #1E7B34; }
.oz-account__content .woocommerce-error { background: #FDEEEE; color: #C3373B; }
.oz-account__content .woocommerce-info { background: #EFF3FB; color: #24457E; }
.oz-account__content .woocommerce-message ul,
.oz-account__content .woocommerce-error ul { list-style: none; margin: 0; padding: 0; }

/* Buttons - order actions, save-address, save-account-details, wc-forward. */
.oz-account__content .button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 28px; border-radius: var(--oz-pill);
  background: var(--oz-chrome); color: #fff;
  font-size: 13.5px; font-weight: 600; letter-spacing: .2px;
  border: 1.5px solid var(--oz-chrome); cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.oz-account__content .button:hover { background: #1f1f1f; color: #fff; }
.oz-account__content .button.cancel { background: transparent; color: var(--oz-ink); }
.oz-account__content .button.cancel:hover { background: var(--oz-surface); }

/* Tables - orders list, order detail (order_details), order downloads. */
.oz-account__content .shop_table { width: 100%; border-collapse: collapse; margin: 0 0 8px; }
.oz-account__content .shop_table thead th {
  text-align: left; padding: 0 12px 14px 0;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  color: var(--oz-muted); border-bottom: 1px solid var(--oz-line);
}
.oz-account__content .shop_table tbody td,
.oz-account__content .shop_table tbody th,
.oz-account__content .shop_table tfoot td,
.oz-account__content .shop_table tfoot th {
  padding: 18px 12px 18px 0; border-bottom: 1px solid var(--oz-line);
  font-size: 14px; font-weight: 400; color: var(--oz-ink); text-align: left;
}
.oz-account__content .shop_table tbody tr:last-child td,
.oz-account__content .shop_table tbody tr:last-child th { border-bottom: 0; }
.oz-account__content .shop_table tfoot tr:last-child td,
.oz-account__content .shop_table tfoot tr:last-child th { border-bottom: 0; }
.oz-account__content .shop_table tfoot th { font-weight: 600; }
.oz-account__content .shop_table .product-total,
.oz-account__content .shop_table tfoot td { text-align: right; }
.oz-account__content .shop_table .button { padding: 9px 18px; font-size: 12.5px; }
.oz-account__content .shop_table .product-name a { color: var(--oz-ink); font-weight: 600; text-decoration: none; }
.oz-account__content .shop_table .product-name a:hover { color: var(--oz-accent); }
.oz-account__content .shop_table .product-quantity { color: var(--oz-muted); font-weight: 400; }

.oz-account__content .woocommerce-pagination { margin-top: 20px; }
.oz-account__content .woocommerce-pagination a { color: var(--oz-ink); font-size: 13px; font-weight: 600; text-decoration: underline; }

.oz-account__content .woocommerce-OrderUpdates { list-style: none; margin: 24px 0 0; padding: 0; }
.oz-account__content .woocommerce-OrderUpdate { padding: 16px 0; border-bottom: 1px solid var(--oz-line); }
.oz-account__content .woocommerce-OrderUpdate:last-child { border-bottom: 0; }
.oz-account__content .woocommerce-OrderUpdate-meta { font-size: 12px; color: var(--oz-muted); margin: 0 0 6px; }

/* Address book - my-address.php cards + order-details-customer.php columns. */
.oz-account__content .woocommerce-Addresses,
.oz-account__content .woocommerce-columns--2 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px; margin-top: 24px;
}
.oz-account__content .woocommerce-Address,
.oz-account__content .woocommerce-column {
  border: 1px solid var(--oz-line); border-radius: var(--oz-r-md); padding: 24px;
}
.oz-account__content .woocommerce-Address-title {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px;
}
.oz-account__content .woocommerce-Address-title h2,
.oz-account__content .woocommerce-column__title { font-size: 15px; font-weight: 600; margin: 0 0 14px; }
.oz-account__content .woocommerce-Address-title .edit { font-size: 12.5px; font-weight: 600; color: var(--oz-accent); text-decoration: none; }
.oz-account__content .woocommerce-Address address,
.oz-account__content .woocommerce-column address {
  font-style: normal; font-size: 13.5px; line-height: 1.8; color: var(--oz-muted);
}

/* Forms - edit-address (form-row / woocommerce-input-wrapper) and
   edit-account (woocommerce-form-row, no wrapper span) share field styling. */
.oz-account__content form { max-width: 640px; }
.oz-account__content .form-row,
.oz-account__content .woocommerce-form-row { margin: 0 0 20px; }
.oz-account__content label { display: block; font-size: 13px; font-weight: 600; color: var(--oz-ink); margin: 0 0 8px; }
.oz-account__content input.input-text,
.oz-account__content input.woocommerce-Input,
.oz-account__content select {
  width: 100%; height: 48px; padding: 0 16px;
  border: 1.5px solid var(--oz-line); border-radius: var(--oz-r-md);
  font-family: var(--oz-font); font-size: 14px; color: var(--oz-ink); background: #fff;
}
.oz-account__content input:focus,
.oz-account__content select:focus { outline: 2px solid var(--oz-accent); outline-offset: 1px; border-color: var(--oz-accent); }
.oz-account__content .form-row-first, .oz-account__content .form-row-last,
.oz-account__content .woocommerce-form-row--first, .oz-account__content .woocommerce-form-row--last {
  display: inline-block; width: 48%; vertical-align: top;
}
.oz-account__content .form-row-first, .oz-account__content .woocommerce-form-row--first { margin-right: 4%; }
.oz-account__content .clear { clear: both; }
.oz-account__content fieldset { border: 0; padding: 24px 0 0; margin: 4px 0 24px; border-top: 1px solid var(--oz-line); }
.oz-account__content fieldset legend { padding: 0 0 16px; font-size: 15px; font-weight: 600; }
.oz-account__content span#account_display_name_description { display: block; margin-top: 8px; font-size: 12.5px; color: var(--oz-muted); }

@media (max-width: 900px) {
  .oz-account-page { grid-template-columns: 1fr; margin-block: 30px 60px; }
  .oz-account__nav { position: static; }
  .oz-account__nav .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 4px; }
  .oz-account__nav .woocommerce-MyAccount-navigation-link { flex: 1 1 auto; }
  .oz-account__content { padding: 26px; }
  .oz-account__content .form-row-first, .oz-account__content .form-row-last,
  .oz-account__content .woocommerce-form-row--first, .oz-account__content .woocommerce-form-row--last {
    display: block; width: 100%; margin-right: 0;
  }
}

/* ==========================================================================
   17a. Login modal (template-parts/login-modal.php)
   ========================================================================== */

.oz-login-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.oz-login-modal[hidden] { display: none; }
.oz-login-modal__overlay {
  position: absolute; inset: 0;
  background: rgba(17,17,17,.6);
}
.oz-login-modal__panel {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 43% 1fr;
  width: 100%; max-width: 980px; max-height: calc(100vh - 48px);
  background: #fff; border-radius: var(--oz-r-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.oz-login-modal__close {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 1px solid var(--oz-line); color: var(--oz-ink);
  cursor: pointer;
}
.oz-login-modal__close svg { width: 16px; height: 16px; }
.oz-login-modal__close:hover { background: var(--oz-surface); }

.oz-login-modal__promo {
  position: relative;
  background: var(--oz-surface) center/cover no-repeat;
  display: flex; align-items: flex-end; padding: 30px;
}
.oz-login-modal__promo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6) 100%);
}
.oz-login-modal__badge { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.oz-login-modal__badge strong {
  font-size: 26px; font-weight: 800; line-height: 1.15; color: #fff;
  text-transform: uppercase;
}
.oz-login-modal__badge span {
  background: #fff; color: var(--oz-ink);
  font-size: 13px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  padding: 5px 10px;
}

.oz-login-modal__form { padding: 44px 40px; overflow-y: auto; }
.oz-login-modal__title { font-size: 26px; font-weight: 600; margin: 0 0 22px; text-transform: lowercase; }

.oz-login-modal__notices { margin-bottom: 18px; }
.oz-login-modal__notices ul { margin: 0; padding: 0; list-style: none; }
.oz-login-modal__notices .woocommerce-error {
  background: #FDEEEE; color: #C3373B; border-radius: var(--oz-r-sm);
  padding: 12px 16px; font-size: 13.5px; line-height: 1.5;
}

/*
 * Shared between both popups - the login form carries class
 * .woocommerce-form-login, the signup form .oz-signup-form (it's really
 * .woocommerce-form-register, WooCommerce's own registration class, but
 * that name is also used unstyled elsewhere so this build's own class is
 * targeted instead). Field appearance needs to be identical between the
 * two, so these rules apply to both rather than being duplicated per form.
 */
.woocommerce-form-login .form-row,
.oz-signup-form .form-row { margin: 0 0 18px; }
.woocommerce-form-login label,
.oz-signup-form label {
  display: block; margin-bottom: 7px;
  font-size: 13px; font-weight: 500; color: var(--oz-muted);
}
.woocommerce-form-login label .required,
.oz-signup-form label .required { color: var(--oz-badge); text-decoration: none; }
.woocommerce-form-login input.input-text,
.oz-signup-form input.input-text {
  width: 100%; height: 48px; padding: 0 16px;
  border: 1px solid var(--oz-line); border-radius: var(--oz-r-sm);
  font-size: 14px; color: var(--oz-ink); background: #fff;
}
.woocommerce-form-login input.input-text:focus,
.oz-signup-form input.input-text:focus { outline: 2px solid var(--oz-accent); outline-offset: 1px; }

/* Real show/hide toggle over the form's own real password field - see
   initAuthModal() in theme.js. Positioned to sit inside the input rather
   than needing to touch woocommerce/global/form-login.php's markup (also
   rendered, unstyled by this rule, on My Account for a logged-out
   visitor - the login form's password row gets its positioning context
   from .form-row-last, the only row in that form with that class; the
   signup form gets it from every .form-row via the rule above). */
.woocommerce-form-login .form-row-last { position: relative; }
.oz-login-modal__pwtoggle {
  position: absolute; right: 4px; top: 32px;
  display: inline-flex; align-items: center; gap: 5px;
  height: 40px; padding: 0 10px; border: 0; background: transparent; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--oz-muted);
}
.oz-login-modal__pwtoggle svg { width: 16px; height: 16px; }
.woocommerce-form-login #password,
.oz-signup-form #reg_password { padding-right: 74px; }

/*
 * Real markup (woocommerce/global/form-login.php): the "Remember me"
 * label and the submit BUTTON are siblings inside the SAME <p
 * class="form-row"> (the nonce/redirect hidden fields sit between them);
 * "Lost your password?" is a separate <p> that follows. Both the label
 * and the button below are already block-level (display:flex is
 * block-level unless set to inline-flex), so they stack on their own
 * lines with no extra layout rule needed - this just adds the gap
 * between them and between the two <p> rows.
 */
.woocommerce-form-login__rememberme {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--oz-muted); cursor: pointer; margin-bottom: 18px;
}
.woocommerce-form-login__rememberme input {
  width: 16px; height: 16px; accent-color: var(--oz-ink); margin: 0;
}
.woocommerce-form-login .lost_password { margin: 14px 0 0; text-align: center; font-size: 13px; }
.woocommerce-form-login .lost_password a { color: var(--oz-ink); font-weight: 500; text-decoration: underline; }

.woocommerce-form-login__submit {
  display: flex; width: 100%; align-items: center; justify-content: center;
  height: 52px; border: 0; border-radius: var(--oz-pill);
  background: var(--oz-chrome); color: #fff;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background-color .18s ease;
}
.woocommerce-form-login__submit:hover { background: #1f1f1f; }

.oz-login-modal__signup { margin: 18px 0 0; font-size: 13.5px; color: var(--oz-muted); text-align: center; }
.oz-login-modal__signup a { color: var(--oz-ink); font-weight: 600; text-decoration: underline; }

@media (max-width: 760px) {
  .oz-login-modal__panel { grid-template-columns: 1fr; max-height: calc(100vh - 32px); overflow-y: auto; }
  .oz-login-modal__promo { min-height: 200px; }
  .oz-login-modal__form { padding: 32px 24px; }
}

/* ==========================================================================
   17b. Signup modal (template-parts/signup-modal.php)
   Reuses .oz-login-modal's overlay/panel/close/field CSS above (both
   templates put "oz-login-modal" on the root alongside their own class),
   so only what's genuinely different from the login popup lives here:
   a plain dark promo panel instead of a photo, the 2-up name row, the
   password hint, and the two consent checkboxes.
   ========================================================================== */

.oz-signup-modal__promo {
  background: var(--oz-chrome);
  display: flex; align-items: center;
  padding: 40px;
}
.oz-signup-modal__promo-inner { max-width: 300px; }
.oz-signup-modal__headline { font-size: 32px; font-weight: 400; line-height: 1.2; color: #fff; margin: 0; }
.oz-signup-modal__headline strong { font-weight: 800; }
.oz-signup-modal__rule { display: block; width: 60px; height: 2px; background: #fff; margin: 22px 0; }
.oz-signup-modal__copy { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.85); margin: 0; }
.oz-signup-modal__copy strong { display: block; color: #fff; font-weight: 700; margin-top: 4px; }

.oz-signup-modal__title { margin-bottom: 26px; }

.oz-signup-form { position: relative; }
.oz-signup-form .form-row { position: relative; margin: 0 0 18px; }
.oz-signup-form__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.oz-signup-form__row2 .form-row { margin: 0; }

.oz-signup-form__hint { display: block; margin-top: 7px; font-size: 12px; color: var(--oz-muted); }

.oz-signup-form__consent label {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; line-height: 1.5; color: var(--oz-muted); cursor: pointer;
}
.oz-signup-form__consent input {
  width: 17px; height: 17px; flex: none; margin-top: 1px; accent-color: var(--oz-ink);
}
.oz-signup-form__consent a { color: var(--oz-ink); font-weight: 600; text-decoration: underline; }

.oz-signup-form__submit-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  margin-top: 24px;
}
.oz-signup-form__submit {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 32px; border: 0; border-radius: var(--oz-pill);
  background: var(--oz-chrome); color: #fff;
  font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease;
}
.oz-signup-form__submit:hover { background: #1f1f1f; }
.oz-signup-form__submit-row .oz-login-modal__signup { margin: 0; text-align: left; }

@media (max-width: 760px) {
  .oz-signup-modal__promo { min-height: 220px; }
  .oz-signup-form__row2 { grid-template-columns: 1fr; }
  .oz-signup-form__submit-row { flex-direction: column; align-items: stretch; text-align: center; }
  .oz-signup-form__submit-row .oz-login-modal__signup { text-align: center; }
}

/* ==========================================================================
   17. Responsive - the Figma has no mobile frame, so this is authored
   ========================================================================== */

@media (max-width: 1024px) {
  .oz-products { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .oz-carousel__track { grid-auto-columns: calc((100% - 40px) / 2); }
  .oz-process__grid { grid-template-columns: 1fr; }
  .oz-process__col--right { text-align: left; }
  .oz-process__figure { order: -1; max-width: 460px; margin-inline: auto; }
  .oz-testimonials__grid { grid-template-columns: 1fr; gap: 32px; }
  .oz-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 900px) {
  :root { --oz-header-h: 72px; }
  .oz-nav-toggle { display: inline-flex; order: 3; }
  .oz-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--oz-chrome);
    flex-direction: column; display: none;
    padding: 10px 0 20px; z-index: 70;
  }
  .oz-header { position: relative; }
  .oz-header[data-nav-open="true"] .oz-nav { display: flex; }
  .oz-nav ul { flex-direction: column; gap: 0; width: 100%; }
  .oz-nav a { padding: 14px 20px; }
  .oz-nav a::after { display: none !important; }
  .oz-hero__arrow { display: none; }
  .oz-editorial { grid-template-columns: 1fr; }
  .oz-footer__top { flex-direction: column; gap: 34px; }
  .oz-cart-page { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 700px) {
  .oz-section { padding-block: 56px; }
  .oz-products { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px 20px; }
  .oz-carousel__track { grid-auto-columns: 72%; }
  .oz-trust { grid-template-columns: 1fr; gap: 34px; }
  .oz-grid--3 { grid-template-columns: 1fr; }
  .oz-hero__shoe { width: 82%; margin-top: -8%; }
  .oz-announce { font-size: 13px; padding: 11px 16px; }
  .oz-banner { min-height: 240px; }
  .oz-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Blog - index, cards, single post
   ========================================================================== */

.oz-blog-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.oz-blog-cats a {
  padding: 9px 20px; border-radius: var(--oz-pill);
  border: 1px solid var(--oz-line); background: #fff;
  font-size: 13px; font-weight: 600; color: var(--oz-ink);
}
.oz-blog-cats a:hover,
.oz-blog-cats a.is-active { background: var(--oz-chrome); color: #fff; border-color: var(--oz-chrome); }

.oz-post-card {
  display: flex; flex-direction: column; gap: 18px;
  padding: 14px 14px 26px;
  background: #fff;
  border: 1px solid var(--oz-line);
  border-radius: var(--oz-r-lg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.oz-post-card:hover {
  transform: translateY(-6px);
  border-color: #D4D4D4;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
}
.oz-post-card__body { padding-inline: 12px; }
.oz-post-card__media {
  display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--oz-r-lg); background: var(--oz-slot);
}
.oz-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.oz-post-card:hover .oz-post-card__media img { transform: scale(1.04); }
.oz-post-card__body { display: flex; flex-direction: column; gap: 10px; }
.oz-post-card__cat { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--oz-accent); }
.oz-post-card__title { font-size: 20px; line-height: 1.3; }
.oz-post-card__title a:hover { text-decoration: underline; }
.oz-post-card__excerpt { margin: 0; font-size: 14px; line-height: 1.6; color: var(--oz-muted); }

.oz-post-feature { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; margin-bottom: 70px; padding: 20px; }
.oz-post-feature .oz-post-card__body { padding-inline: 0 28px; }
.oz-post-feature .oz-post-card__media { aspect-ratio: 4 / 3; }
.oz-post-feature .oz-post-card__title { font-size: clamp(24px, 3vw, 36px); }
.oz-post-feature .oz-post-card__excerpt { font-size: 16px; }


.oz-related { background: var(--oz-surface); padding-block: 70px; }
.oz-related__title { margin-bottom: 32px; }
.oz-related .oz-post-card__media { background: #fff; }

@media (max-width: 900px) {
  .oz-post-feature { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; padding: 14px 14px 26px; }
  .oz-post-feature .oz-post-card__body { padding-inline: 12px; }
}

/* --- Single post --- */

.oz-post-hero { padding-block: 56px 150px; }
.oz-post-hero__inner { max-width: 860px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.oz-post-crumbs { display: flex; gap: 8px; font-size: 12.5px; color: var(--oz-muted); }
.oz-post-crumbs a { color: var(--oz-muted); }
.oz-post-crumbs a:hover { color: var(--oz-ink); }
.oz-post-chip {
  display: inline-block; padding: 7px 16px; border-radius: var(--oz-pill);
  background: #fff; border: 1px solid var(--oz-line);
  font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--oz-accent);
}
.oz-post-chip:hover { background: var(--oz-chrome); border-color: var(--oz-chrome); color: #fff; }
.oz-post-title { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.15; margin: 0; }
.oz-post-meta { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 13px; color: var(--oz-muted); }
.oz-post-meta__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--oz-muted); }

.oz-post-article { padding-bottom: 80px; }
.oz-post-hero-img {
  margin: -90px auto 56px; max-width: 1040px;
  border-radius: var(--oz-r-xl); overflow: hidden; background: var(--oz-slot);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .14);
}
.oz-post-hero-img img { width: 100%; height: auto; display: block; }

.oz-post-body { max-width: 740px; margin-inline: auto; font-size: 18px; line-height: 1.8; color: #2B2B2B; }
.oz-post-body > * + * { margin-top: 1.25em; }
.oz-post-body > :first-child { font-size: 21px; line-height: 1.7; color: var(--oz-ink); }
.oz-post-body h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.25; margin-top: 2em; color: var(--oz-ink); }
.oz-post-body h3 { font-size: 22px; margin-top: 1.6em; color: var(--oz-ink); }
.oz-post-body ul, .oz-post-body ol { padding-left: 1.3em; color: #2B2B2B; }
.oz-post-body li + li { margin-top: .5em; }
.oz-post-body li::marker { color: var(--oz-accent); font-weight: 700; }
.oz-post-body strong { color: var(--oz-ink); }
.oz-post-body a { color: var(--oz-ink); text-decoration: underline; text-decoration-color: var(--oz-accent); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.oz-post-body a:hover { color: var(--oz-accent); }
.oz-post-body blockquote {
  margin: 2em 0; padding: 24px 28px;
  border-left: 4px solid var(--oz-accent); border-radius: 0 var(--oz-r-lg) var(--oz-r-lg) 0;
  background: var(--oz-surface); color: var(--oz-ink);
  font-size: 19px; font-weight: 500; line-height: 1.6;
}

.oz-post-cta {
  max-width: 740px; margin: 64px auto 0; padding: 36px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  background: var(--oz-chrome); color: #fff; border-radius: var(--oz-r-xl);
}
.oz-post-cta h2 { font-size: 24px; color: #fff; margin: 0 0 8px; }
.oz-post-cta p { margin: 0; font-size: 15px; line-height: 1.6; color: #C9C9C9; max-width: 44ch; }
.oz-post-cta .oz-btn { flex: none; }
.oz-post-back { max-width: 740px; margin: 32px auto 0; }

@media (max-width: 900px) {
  .oz-post-hero { padding-block: 40px 110px; }
  .oz-post-hero-img { margin-top: -70px; margin-bottom: 40px; border-radius: var(--oz-r-lg); }
  .oz-post-body { font-size: 17px; }
  .oz-post-body > :first-child { font-size: 19px; }
  .oz-post-cta { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
}

/* ==========================================================================
   Order received (thank you) page
   ========================================================================== */

.oz-thankyou { max-width: 920px; padding-block: 56px 100px; }
.oz-thankyou .woocommerce-order { display: flex; flex-direction: column; gap: 32px; }

.oz-thankyou .woocommerce-order > .woocommerce-thankyou-order-received {
  margin: 0; padding: 88px 24px 8px; text-align: center;
  font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; line-height: 1.35; color: var(--oz-ink);
  background: url(data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2056%2056%22%3E%3Ccircle%20cx=%2228%22%20cy=%2228%22%20r=%2228%22%20fill=%22%23111%22/%3E%3Cpath%20d=%22M17%2029l8%208%2014-16%22%20fill=%22none%22%20stroke=%22%23fff%22%20stroke-width=%224%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E) no-repeat center top / 56px 56px;
  border: 0;
}
.oz-thankyou .woocommerce-order > .woocommerce-thankyou-order-received::before { display: none; }

.oz-thankyou ul.order_details {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  background: var(--oz-surface); border: 1px solid var(--oz-line); border-radius: var(--oz-r-lg); overflow: hidden;
}
.oz-thankyou ul.order_details::before,
.oz-thankyou ul.order_details::after { display: none; }
.oz-thankyou ul.order_details li {
  float: none; margin: 0; padding: 22px 24px; border: 0; border-right: 1px dashed #D6D6D6;
  font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--oz-muted);
}
.oz-thankyou ul.order_details li:last-child { border-right: 0; }
.oz-thankyou ul.order_details li strong {
  display: block; margin-top: 8px;
  font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--oz-ink); word-break: break-word;
}

.oz-thankyou .woocommerce-order > p { margin: 0; text-align: center; font-size: 15px; line-height: 1.6; color: var(--oz-muted); }

.oz-thankyou .woocommerce-order-details,
.oz-thankyou .woocommerce-customer-details { margin: 0; }
.oz-thankyou .woocommerce-order-details__title,
.oz-thankyou .woocommerce-column__title,
.oz-thankyou .woocommerce-customer-details h2 { font-size: 22px; font-weight: 600; margin: 0 0 16px; }

.oz-thankyou table.shop_table {
  width: 100%; margin: 0; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--oz-line); border-radius: var(--oz-r-lg); overflow: hidden; background: #fff;
}
.oz-thankyou table.shop_table th,
.oz-thankyou table.shop_table td {
  padding: 16px 24px; text-align: left; vertical-align: top;
  border: 0; border-bottom: 1px solid var(--oz-line); font-size: 15px; color: var(--oz-ink);
}
.oz-thankyou table.shop_table thead th { background: var(--oz-surface); font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--oz-muted); }
.oz-thankyou table.shop_table .product-total,
.oz-thankyou table.shop_table tfoot td,
.oz-thankyou table.shop_table thead th.product-total { text-align: right; }
.oz-thankyou table.shop_table td.product-name a { font-weight: 600; color: var(--oz-ink); }
.oz-thankyou table.shop_table td.product-name a:hover { color: var(--oz-accent); }
.oz-thankyou table.shop_table .product-quantity { font-weight: 600; color: var(--oz-muted); }
.oz-thankyou table.shop_table tfoot th { font-weight: 500; color: var(--oz-muted); }
.oz-thankyou table.shop_table tfoot tr:last-child th,
.oz-thankyou table.shop_table tfoot tr:last-child td { border-bottom: 0; }
.oz-thankyou table.shop_table tfoot tr:nth-last-child(2) th,
.oz-thankyou table.shop_table tfoot tr:nth-last-child(2) td { font-weight: 700; color: var(--oz-ink); }
.oz-thankyou .shipped_via { display: block; margin-top: 4px; font-size: 12px; color: var(--oz-muted); }

.oz-thankyou .woocommerce-columns--addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.oz-thankyou .woocommerce-columns--addresses::before,
.oz-thankyou .woocommerce-columns--addresses::after { display: none; }
.oz-thankyou .woocommerce-columns--addresses .woocommerce-column { float: none; width: auto; max-width: none; }
.oz-thankyou .woocommerce-customer-details address {
  margin: 0; padding: 22px 24px; font-style: normal; font-size: 15px; line-height: 1.7; color: var(--oz-ink);
  border: 1px solid var(--oz-line); border-radius: var(--oz-r-lg); background: #fff;
}
.oz-thankyou .woocommerce-customer-details--phone,
.oz-thankyou .woocommerce-customer-details--email { margin: 8px 0 0; color: var(--oz-muted); }

.oz-thankyou .woocommerce-notice--error,
.oz-thankyou .woocommerce-thankyou-order-failed { text-align: center; color: var(--oz-ink); }
.oz-thankyou .woocommerce-thankyou-order-failed-actions { display: flex; justify-content: center; gap: 12px; }
.oz-thankyou .button,
.oz-thankyou .woocommerce-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 32px; border: 2px solid var(--oz-chrome); border-radius: var(--oz-pill);
  background: var(--oz-chrome); color: #fff; font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.oz-thankyou .button:hover,
.oz-thankyou .woocommerce-button:hover { background: #1f1f1f; color: #fff; }

.oz-thankyou form.woocommerce-verify-email {
  max-width: 480px; margin: 0 auto; padding: 36px; display: flex; flex-direction: column; gap: 18px;
  background: #fff; border: 1px solid var(--oz-line); border-radius: var(--oz-r-lg); box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}
.oz-thankyou form.woocommerce-verify-email p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--oz-muted); }
.oz-thankyou form.woocommerce-verify-email a { color: var(--oz-ink); text-decoration: underline; text-decoration-color: var(--oz-accent); text-underline-offset: 3px; }
.oz-thankyou form.woocommerce-verify-email label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--oz-ink); }
.oz-thankyou form.woocommerce-verify-email .required { color: #E5484D; text-decoration: none; }
.oz-thankyou form.woocommerce-verify-email input.input-text {
  width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--oz-line); border-radius: 8px; font-size: 14.5px; color: var(--oz-ink); background: #fff;
}
.oz-thankyou form.woocommerce-verify-email input.input-text:focus { outline: 2px solid var(--oz-accent); outline-offset: 1px; }

@media (max-width: 700px) {
  .oz-thankyou { padding-block: 36px 70px; }
  .oz-thankyou ul.order_details { grid-template-columns: 1fr 1fr; }
  .oz-thankyou ul.order_details li { border-right: 0; border-bottom: 1px dashed #D6D6D6; padding: 16px 18px; }
  .oz-thankyou .woocommerce-columns--addresses { grid-template-columns: 1fr; }
  .oz-thankyou table.shop_table th, .oz-thankyou table.shop_table td { padding: 14px 16px; }
}


/* ==========================================================================
   Empty WooCommerce cart layout
   ========================================================================== */

/* WooCommerce may render the empty-cart shortcode/block outside .oz-cart-page.
   Keep its content aligned with the site's centered content width. */
body.woocommerce-cart .woocommerce:not(.oz-cart-page),
body.woocommerce-cart .woocommerce-notices-wrapper {
  width: min(100% - 48px, 1200px);
  margin-inline: auto;
}

body.woocommerce-cart .woocommerce-notices-wrapper:empty {
  display: none;
}

body.woocommerce-cart .woocommerce-notices-wrapper {
  padding-top: 28px;
}

body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-cart .woocommerce-info {
  box-sizing: border-box;
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid var(--oz-line, #e5e5e5);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}

body.woocommerce-cart .woocommerce-message {
  background: #edf7ef;
  color: #245b31;
}

body.woocommerce-cart .woocommerce-error {
  background: #fff0f0;
  color: #9b2525;
}

body.woocommerce-cart .woocommerce-info {
  background: #f3f5f8;
  color: #333b46;
}

/* Empty cart state: a contained, centered panel rather than plain text
   touching the viewport edges. */
body.woocommerce-cart p.cart-empty,
body.woocommerce-cart .cart-empty {
  box-sizing: border-box;
  width: min(100% - 48px, 1200px);
  margin: 0 auto;
  padding: 44px 28px 18px;
  text-align: center;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--oz-ink, #111);
}

body.woocommerce-cart .return-to-shop {
  width: min(100% - 48px, 1200px);
  margin: 0 auto;
  padding: 8px 28px 56px;
  text-align: center;
}

body.woocommerce-cart .return-to-shop .button,
body.woocommerce-cart .return-to-shop a.button,
body.woocommerce-cart .wc-backward {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 30px;
  border: 1px solid var(--oz-chrome, #111);
  border-radius: 999px;
  background: var(--oz-chrome, #111);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}

body.woocommerce-cart .return-to-shop .button:hover,
body.woocommerce-cart .return-to-shop a.button:hover,
body.woocommerce-cart .wc-backward:hover {
  background: #fff;
  color: var(--oz-chrome, #111);
}

@media (max-width: 600px) {
  body.woocommerce-cart .woocommerce:not(.oz-cart-page),
  body.woocommerce-cart .woocommerce-notices-wrapper,
  body.woocommerce-cart p.cart-empty,
  body.woocommerce-cart .cart-empty,
  body.woocommerce-cart .return-to-shop {
    width: min(100% - 32px, 1200px);
  }

  body.woocommerce-cart p.cart-empty,
  body.woocommerce-cart .cart-empty {
    padding: 32px 16px 12px;
    font-size: 18px;
  }

  body.woocommerce-cart .return-to-shop {
    padding: 8px 16px 40px;
  }
}