/* ===========================================================================
   ONE to Z — the pages WordPress never had.
   ---------------------------------------------------------------------------
   Checkout, the account area, the order tracker, the sign-in wall, the flash
   messages: screens that exist in this build and had no equivalent in the
   theme, so nothing upstream styles them.

   THIS FILE LOADS LAST, WHICH MAKES IT DANGEROUS.
   Every rule here beats otz-theme.css. Forty-nine rule blocks were removed
   from it when the theme was ported whole, because they were hand-copied
   versions of theme rules — .otz-btn, .otz-card, .otz-section__head, the
   header, the footer — and, loading last, they were quietly overriding the
   real thing with an approximation of it. That is why the site "looked like
   the theme but wrong".

   So the rule for this file, from here on:

       IF THE THEME ALREADY STYLES IT, DO NOT STYLE IT HERE.

   Add an override only when you can say what theme rule you are overriding
   and why. Anything else belongs in otz-theme.css, which is the theme.
   =========================================================================== */

/* Two small things the theme has no opinion about, because these markup
   pieces do not exist in it. */
.otz-section__count { color: var(--otz-muted); font-size: .9rem; white-space: nowrap; }

/* The safety net that should have existed all along.
   The theme has `img { max-width: 100%; height: auto }` and nothing for
   <video>. A video is a replaced element too: with no rule it lays out at its
   intrinsic size, so one 1280-wide file dropped into a 150px tile paints
   across the header, the filter bar and the whole section. That is exactly
   what happened, and it took four separate bug reports to trace back to one
   missing declaration. Constraining every video by default means the worst a
   future one can do is be the wrong size inside its own box. */
video,
iframe { max-width: 100%; }

/* ---------------------------------------------------------------- header -- */

/* OVERRIDES otz-theme.css `.otz-header__inner`.
   One property only. The theme's rule is otherwise exactly right and now
   carries the header — including the position/z-index that lifts it above the
   frosted blur. What it does not do is wrap: on a narrow screen the logo, the
   nav and the three icon buttons are laid out in one non-wrapping row and the
   last of them leaves the viewport. Wrapping makes the header taller instead,
   which is the whole rule of this project — a fixed box must never decide the
   size of content that varies. */
.otz-header__inner { flex-wrap: wrap; }


.otz-nav a:hover { color: var(--otz-text); }
.otz-nav__track { color: var(--otz-brand); font-weight: 700; }


/* ------------------------------------------------------------------ grid -- */
.otz-grid {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(var(--cols-mobile), minmax(0, 1fr));
}
@media (min-width: 640px)  { .otz-grid { grid-template-columns: repeat(var(--cols-tablet),  minmax(0, 1fr)); } }
@media (min-width: 1024px) { .otz-grid { grid-template-columns: repeat(var(--cols-desktop), minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ card -- */


.otz-card__media {
  position: relative;
  display: block;
  /* Bug #3: a fixed ratio means the slot exists before the image arrives, so
     a slow or failed load cannot collapse the card or spill alt text. */
  aspect-ratio: var(--media-ratio);
  background: var(--otz-panel-2);
  overflow: hidden;
}
.otz-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* alt is empty on purpose — the name is a real heading right below, so a
     broken image must render as nothing, not as unstyled orange text. */
}
.otz-card__noimg { position: absolute; inset: 0; background: var(--otz-panel-2); }


.otz-chip--sale { right: 8px; background: var(--otz-brand); color: var(--otz-black); }
.otz-chip--sold { left: 8px; bottom: 8px; top: auto; background: rgba(0,0,0,.72); color: #fff; }


.otz-card__name {
  margin: 0; font-size: 14px; line-height: 1.35; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.otz-card__price { margin: 0; font-size: 15px; }
.otz-card__price s { color: var(--otz-muted); font-size: 13px; margin-right: 6px; }
.otz-card__price strong { color: var(--otz-brand); font-size: 17px; }
.otz-card__stock { margin: 0; font-size: 12px; font-weight: 600; }

.otz-tone--danger     { color: var(--otz-danger); }
.otz-tone--success    { color: var(--otz-success); }
.otz-tone--brand-deep { color: var(--otz-brand-deep); }

/* Bug #1: ONE padded slot, present in every stock state. The button inside
   changes; the box does not. */
.otz-card__cta {
  padding: var(--card-padding);
  padding-top: 0;
  display: grid; gap: 8px;
}
.otz-card__cta form { margin: 0; display: contents; }

/* --------------------------------------------------------------- buttons -- */

.otz-btn--primary { background: var(--otz-brand); color: var(--otz-black); }
.otz-btn--outline { background: transparent; color: var(--otz-brand); border-color: var(--otz-brand); }

.otz-btn:focus-visible { outline: 3px solid var(--otz-brand-light); outline-offset: 2px; }

/* ------------------------------------------------------------ pagination -- */
.otz-pagination {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 40px auto 20px !important;
  padding: 0 !important;
  width: 100% !important;
}

.otz-pagination a,
.otz-pagination span,
.otz-pagination__link,
.otz-pagination__dots {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: #251f33 !important;
  background: var(--otz-panel-2, #251f33) !important;
  color: #f0ecf9 !important;
  border: 1px solid var(--otz-border, #3a324b) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease !important;
}

.otz-pagination a:hover,
.otz-pagination__link:hover:not(.is-active) {
  border-color: var(--otz-brand, #FFB054) !important;
  color: var(--otz-brand, #FFB054) !important;
  transform: translateY(-2px) !important;
  background: #2d263d !important;
}

.otz-pagination .is-active,
.otz-pagination .active,
.otz-pagination span.active,
.otz-pagination span[aria-current="page"] {
  background: var(--otz-brand, #FFB054) !important;
  color: #14101e !important;
  font-weight: 800 !important;
  border: 1px solid var(--otz-brand, #FFB054) !important;
  box-shadow: 0 4px 14px rgb(var(--otz-brand-rgb, 255 176 84) / .35) !important;
}

.otz-pagination .otz-pagination__dots,
.otz-pagination span:not([aria-current="page"]):not(.active):not(.otz-pagination__link) {
  color: var(--otz-muted, #9e93b3) !important;
  background: #251f33 !important;
  border: 1px solid var(--otz-border, #3a324b) !important;
  cursor: default !important;
}

/* -------------------------------------------------------------- sections -- */


.otz-section__head a  { color: var(--otz-brand); font-weight: 700; font-size: 14px; }

/* ---------------------------------------------------------------- footer -- */


.otz-footer__legal { color: var(--otz-border); }

/* The blanket reduced-motion rule that used to be here is gone. The theme
   already has one, and it is better: it also stops smooth scrolling, and it
   is followed by targeted blocks that give the carousel and the wheel real
   still-image alternatives rather than a frozen animation. A second copy
   loading afterwards with !important on everything overrode those
   alternatives with nothing. */

/* ---------------------------------------------------------------- banner -- */
.otz-banner {
  background: var(--otz-brand); color: var(--otz-black);
  font-weight: 700; font-size: 14px;
}
.otz-banner .otz-container {
  display: flex; align-items: center; gap: 12px;
  /* padding, not height — a long announcement wraps instead of being cut. */
  padding-block: 10px;
}
.otz-banner__x {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: inherit;
  min-width: 44px; min-height: 44px;
}

/* ===========================================================================
   CART · CHECKOUT · ORDER
   ---------------------------------------------------------------------------
   Same governing rule as everything above: min-height never height, content
   decides the size of its box. Every field here is a real form control with a
   real label, because this shop's customers are on phones, on mobile data,
   and often with autofill — and a checkout is the one page that must never be
   clever at the expense of working.
   =========================================================================== */

/* Visible only to screen readers. Used for labels that would be noise on
   screen but are required for the control to be announced at all. */
.otz-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- flash -- */
.otz-flash {
  margin: 16px 0;
  padding: 12px 14px;
  border-radius: var(--card-radius);
  border: var(--card-border) solid var(--otz-border);
  background: var(--otz-panel);
  font-size: 14px; font-weight: 600;
  /* No fixed height: a two-line message must push the page down, not spill. */
}
.otz-flash--good { border-color: var(--otz-success); color: var(--otz-success); }
.otz-flash--warn { border-color: var(--otz-brand);   color: var(--otz-brand); }
.otz-flash--bad  { border-color: var(--otz-danger);  color: var(--otz-danger); }

/* ---------------------------------------------------------------- panel -- */
.otz-panel {
  background: var(--otz-panel);
  border: var(--card-border) solid var(--otz-border);
  border-radius: var(--card-radius);
  padding: calc(var(--card-padding) + 4px);
}
.otz-panel--hero { border-color: var(--otz-brand); margin-bottom: 16px; }
.otz-panel__title {
  /* The heading inside a panel: Track your order, Sign in, Delivery details,
     Order #31341. These used to carry a hand-set font-size in a style
     attribute on every page — 16, 20, 22, 24 — so no two of them matched and
     none of them matched a section heading. The size is decided once, here,
     and the family comes from the theme's h1..h6 rule, which is Anton.

     clamp() rather than a fixed number so a long title on a narrow phone
     shrinks instead of wrapping into three lines. */
  margin: 0 0 12px;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: .01em;
}

/* A product name is the longest heading on the site and the one that must
   never be clipped, so it wraps and it breaks long words rather than
   overflowing its column. */
.otz-product__title {
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.9rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.otz-hint { margin: 6px 0 0; color: var(--otz-muted); font-size: 12.5px; line-height: 1.5; }
.otz-optional { color: var(--otz-muted); font-weight: 400; font-size: 12px; }

.otz-linkbtn {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  color: var(--otz-brand); font: 700 13px/1.3 inherit; text-decoration: underline;
  /* A tap target, even though it reads as a link. */
  min-height: 32px;
}

/* ----------------------------------------------------------------- cart -- */
.otz-cart { display: grid; gap: var(--card-gap); }
.otz-cart__row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  grid-template-areas: "media main total" "media qty qty";
  gap: 4px 12px;
  align-items: start;
  padding: var(--card-padding);
  background: var(--otz-panel);
  border: var(--card-border) solid var(--otz-border);
  border-radius: var(--card-radius);
}
@media (min-width: 700px) {
  .otz-cart__row {
    grid-template-columns: 88px 1fr 150px 110px;
    grid-template-areas: "media main qty total";
    align-items: center;
  }
}
.otz-cart__media {
  grid-area: media;
  aspect-ratio: 1; width: 100%;
  background: var(--otz-panel-2);
  border-radius: calc(var(--card-radius) - 4px);
  overflow: hidden;
}
.otz-cart__media img { width: 100%; height: 100%; object-fit: cover; }
.otz-cart__main { grid-area: main; min-width: 0; }
.otz-cart__name { font-weight: 700; font-size: 14.5px; line-height: 1.35; display: block; }
.otz-cart__unit { margin: 4px 0 0; color: var(--otz-muted); font-size: 13px; }
.otz-cart__qty  { grid-area: qty; display: flex; align-items: center; gap: 10px; }
.otz-cart__qty input {
  width: 76px; min-height: 44px; text-align: center;
  background: var(--otz-panel-2); color: var(--otz-text);
  border: var(--card-border) solid var(--otz-border);
  border-radius: 10px; font: 700 15px/1 inherit; padding: 8px;
}
.otz-cart__total { grid-area: total; margin: 0; text-align: right; font-weight: 800; color: var(--otz-brand); }
.otz-cart__foot { display: flex; justify-content: flex-end; margin-top: 14px; }

/* ----------------------------------------------------- checkout layout -- */
.otz-checkout__grid { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .otz-checkout__grid { grid-template-columns: 1.25fr 1fr; } }

/* --------------------------------------------------------------- fields -- */
.otz-field { margin-bottom: 14px; border: 0; padding: 0; }
.otz-field > label, .otz-field > legend {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.otz-field input, .otz-field textarea, .otz-field select, .otz-inline input {
  width: 100%;
  /* A FLOOR. 16px font-size is deliberate: anything smaller makes iOS Safari
     zoom the page on focus, which on a checkout feels like a bug. */
  min-height: var(--button-min-height);
  padding: 11px 12px;
  background: var(--otz-panel-2);
  color: var(--otz-text);
  border: var(--card-border) solid var(--otz-border);
  border-radius: 10px;
  font: 400 16px/1.4 inherit;
}
.otz-field textarea { resize: vertical; }
.otz-field input:focus-visible, .otz-field textarea:focus-visible, .otz-inline input:focus-visible {
  outline: 3px solid var(--otz-brand-light); outline-offset: 1px;
}
.otz-field--pair { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .otz-field--pair { grid-template-columns: 1fr 1fr; } }

.otz-inline { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.otz-inline input { flex: 1 1 160px; }

/* --------------------------------------------------------------- radios -- */
.otz-radio {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--otz-panel-2);
  border: var(--card-border) solid var(--otz-border);
  border-radius: 10px;
  cursor: pointer;
  /* Grows with its label instead of clipping it — the same mistake that cut
     "Invoice" in half in the app. */
  min-height: var(--button-min-height);
}
.otz-radio input { width: 20px; height: 20px; accent-color: var(--otz-brand); flex: none; }
.otz-radio span  { flex: 1 1 auto; font-size: 14px; }
.otz-radio em    { font-style: normal; font-weight: 800; color: var(--otz-brand); }
.otz-radio:has(input:checked) { border-color: var(--otz-brand); }
.otz-radio--block { align-items: flex-start; }
.otz-radio--block input { margin-top: 2px; }

/* ---------------------------------------------------------------- bkash -- */
.otz-bkash {
  margin: 4px 0 0;
  padding: 12px;
  border: 2px dashed var(--otz-brand);
  border-radius: var(--card-radius);
  background: color-mix(in srgb, var(--otz-brand) 8%, transparent);
}
.otz-steps { margin: 0 0 10px; padding-left: 20px; font-size: 14px; line-height: 1.7; }
.otz-bkash__num { color: var(--otz-brand); letter-spacing: .04em; font-size: 17px; }

/* --------------------------------------------------------------- totals -- */
.otz-mini { list-style: none; margin: 0 0 12px; padding: 0; font-size: 14px; }
.otz-mini li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: var(--card-border) solid var(--otz-border);
}
.otz-mini li:last-child { border-bottom: 0; }

.otz-totals { margin: 12px 0 14px; font-size: 14px; }
.otz-totals div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.otz-totals dt { color: var(--otz-muted); margin: 0; }
.otz-totals dd { margin: 0; font-weight: 700; }
.otz-totals__grand {
  border-top: var(--card-border) solid var(--otz-border);
  margin-top: 6px; padding-top: 12px !important;
  font-size: 17px;
}
.otz-totals__grand dt { color: var(--otz-text); font-weight: 700; }
.otz-totals__grand dd { color: var(--otz-brand); font-weight: 800; }

.otz-zone { margin-bottom: 6px; }

/* -------------------------------------------------------- order status -- */
.otz-status {
  margin: 0 0 16px;
  font-size: 18px; font-weight: 800; line-height: 1.4;
  color: var(--otz-brand);
}

.otz-steps4 { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
@media (min-width: 560px) { .otz-steps4 { grid-template-columns: repeat(4, 1fr); } }
.otz-steps4__i { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--otz-muted); }
@media (min-width: 560px) { .otz-steps4__i { flex-direction: column; text-align: center; gap: 6px; } }
.otz-steps4__dot {
  width: 14px; height: 14px; border-radius: 999px; flex: none;
  background: var(--otz-panel-2);
  border: 2px solid var(--otz-border);
}
.otz-steps4__t { line-height: 1.3; }
/* Only up to the current step is coloured. A finished step stays finished
   even when the order later goes on hold or is cancelled. */
.otz-steps4__i--done .otz-steps4__dot { background: var(--otz-success); border-color: var(--otz-success); }
.otz-steps4__i--done .otz-steps4__t   { color: var(--otz-text); }
.otz-steps4__i--step .otz-steps4__dot { background: var(--otz-brand); border-color: var(--otz-brand); }
.otz-steps4__i--step .otz-steps4__t   { color: var(--otz-brand); font-weight: 800; }
.otz-steps4__i--warn .otz-steps4__dot { background: var(--otz-brand-deep); border-color: var(--otz-brand-deep); }
.otz-steps4__i--warn .otz-steps4__t   { color: var(--otz-brand-deep); font-weight: 800; }
.otz-steps4__i--bad  .otz-steps4__dot { background: var(--otz-danger); border-color: var(--otz-danger); }
.otz-steps4__i--bad  .otz-steps4__t   { color: var(--otz-danger); font-weight: 800; }

/* ------------------------------------------------------------- timeline -- */
.otz-timeline { list-style: none; margin: 0; padding: 0; }
.otz-timeline__i {
  display: grid; gap: 2px;
  padding: 10px 0 10px 16px;
  border-left: 2px solid var(--otz-border);
  position: relative;
}
.otz-timeline__i::before {
  content: ""; position: absolute; left: -6px; top: 16px;
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--otz-border);
}
.otz-timeline__i--courier::before { background: var(--otz-brand); }
.otz-timeline__when { color: var(--otz-muted); font-size: 12px; }
.otz-timeline__what { font-size: 14px; line-height: 1.5; }
.otz-tag {
  justify-self: start;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--otz-black); background: var(--otz-brand);
  padding: 2px 6px; border-radius: 999px;
}

/* ===========================================================================
   ACCOUNTS
   =========================================================================== */


.otz-social:hover { border-color: var(--otz-brand); }
.otz-social__mark {
  /* The white tile behind the mark, 30x30, exactly as the app draws it, so
     the two sign-in buttons are recognisably the same control. */
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 8px; background: #fff;
}

.otz-who { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.otz-who__pic { width: 56px; height: 56px; border-radius: 999px; object-fit: cover; flex: none; }
.otz-who__pic--blank {
  display: grid; place-items: center;
  background: var(--otz-panel-2); color: var(--otz-brand);
  font-weight: 800; font-size: 22px; text-transform: uppercase;
}

/* Tiles. The WHOLE tile is the link — not the label inside it. Some brand
   tiles on the old site were dead because the anchor wrapped only the text. */
.otz-tiles { display: grid; gap: var(--card-gap); grid-template-columns: 1fr; }
@media (min-width: 560px)  { .otz-tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .otz-tiles { grid-template-columns: repeat(3, 1fr); } }
.otz-tile {
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
  min-height: 84px;                 /* minimum, never fixed */
  padding: var(--card-padding);
  background: var(--otz-panel);
  border: var(--card-border) solid var(--otz-border);
  border-radius: var(--card-radius);
}
.otz-tile:hover { border-color: var(--otz-brand); }
.otz-tile strong { font-size: 15px; }
.otz-tile span   { color: var(--otz-muted); font-size: 12.5px; line-height: 1.45; }
.otz-tile--danger strong { color: var(--otz-danger); }
.otz-tile--danger:hover  { border-color: var(--otz-danger); }

/* --------------------------------------------------- order history rows -- */
.otz-order {
  background: var(--otz-panel);
  border: var(--card-border) solid var(--otz-border);
  border-radius: var(--card-radius);
  margin-bottom: var(--card-gap);
  overflow: hidden;
}
.otz-order__head {
  display: grid; gap: 2px 12px;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "no when sum" "state state state";
  align-items: center;
  padding: var(--card-padding);
  cursor: pointer;
  list-style: none;                 /* hides the default disclosure triangle */
  min-height: var(--button-min-height);
}
.otz-order__head::-webkit-details-marker { display: none; }
@media (min-width: 640px) {
  .otz-order__head {
    grid-template-columns: 90px 110px 1fr auto;
    grid-template-areas: "no when state sum";
  }
}
.otz-order__no    { grid-area: no;    font-weight: 800; }
.otz-order__when  { grid-area: when;  color: var(--otz-muted); font-size: 13px; }
.otz-order__state { grid-area: state; font-size: 13px; font-weight: 600; }
.otz-order__sum   { grid-area: sum;   font-weight: 800; color: var(--otz-brand); text-align: right; }
.otz-order[open] .otz-order__head { border-bottom: var(--card-border) solid var(--otz-border); }
.otz-order__body { padding: var(--card-padding); }

/* ===========================================================================
   RAILS — the brand wheel and the carousels
   ---------------------------------------------------------------------------
   A horizontally scrolling strip, full-bleed, with scroll-snap. No carousel
   library and no JavaScript: the browser already does momentum scrolling,
   snapping, keyboard access and reduced-motion. A library would be several
   hundred kilobytes to reproduce that, on a shop whose customers are on
   Bangladeshi mobile data.
   =========================================================================== */

.otz-rail {
  display: flex;
  gap: var(--card-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* Room for the focus ring and for card shadows; without it the first and
     last tile look clipped at the edge of the strip. */
  padding-block: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--otz-border) transparent;
}
.otz-rail > * { scroll-snap-align: start; flex: 0 0 auto; }

/* Full-bleed: the rail escapes the container so tiles run to both screen
   edges, and the first tile still lines up with the heading above it. */
.otz-rail--bleed {
  --rail-pad: max(16px, calc((100vw - var(--container-max)) / 2));
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--rail-pad);
  width: 100vw;
}

.otz-rail::-webkit-scrollbar { height: 8px; }
.otz-rail::-webkit-scrollbar-thumb { background: var(--otz-border); border-radius: 999px; }
.otz-rail::-webkit-scrollbar-track { background: transparent; }

/* Product cards in a rail need a width; in the grid they take the column. */
.otz-rail--cards > * { width: min(72vw, 260px); }
.otz-rail--cards .otz-card { height: 100%; }

/* ----------------------------------------------------------- brand tiles -- */
.otz-brandtile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  width: min(46vw, 200px);
  /* MINIMUM. A long brand name wraps and the tile grows; it is never sliced. */
  min-height: 148px;
  padding: 14px;
  border-radius: var(--card-radius);
  border: var(--card-border) solid var(--otz-border);
  /* The hand-picked palette from the brand row. --b1/--b2 are set inline per
     tile, and the fallbacks in the var() calls are load-bearing rather than
     tidy: color-mix() with an undefined colour is an invalid value, and an
     invalid value does not degrade — the whole background declaration is
     dropped and the tile arrives with no background at all. A brand with no
     colour has to look intentional, not broken. */
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--b1, var(--otz-panel-2)) 38%, var(--otz-panel)),
              color-mix(in srgb, var(--b2, var(--otz-black)) 55%, var(--otz-black)));
  text-align: center;
}
.otz-brandtile:hover, .otz-brandtile:focus-visible { border-color: var(--b1, var(--otz-brand)); }
.otz-brandtile__art {
  display: grid; place-items: center;
  width: 100%;
  /* A fixed slot, so a slow or missing emblem cannot change the tile's shape
     or push the name out of line with its neighbours. */
  height: 64px;
}
.otz-brandtile__art img { max-height: 64px; width: auto; object-fit: contain; }
.otz-brandtile__name {
  font-weight: 800; font-size: 14px; line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.otz-brandtile__count { font-size: 11.5px; color: rgba(255,255,255,.82); }

/* -------------------------------------------------------- category tiles -- */
.otz-cattile {
  display: flex; flex-direction: column; gap: 8px;
  width: min(40vw, 168px);
}
.otz-cattile__art {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--card-radius);
  border: var(--card-border) solid var(--otz-border);
  background: var(--otz-panel-2);
  overflow: hidden;
}
.otz-cattile__art img { width: 100%; height: 100%; object-fit: cover; }
.otz-cattile__name { font-weight: 700; font-size: 13px; line-height: 1.3; text-align: center; }
.otz-cattile:hover .otz-cattile__art { border-color: var(--otz-brand); }

/* ------------------------------------------------------------- promises -- */
.otz-promise { display: grid; gap: var(--card-gap); grid-template-columns: 1fr; }
@media (min-width: 760px) { .otz-promise { grid-template-columns: repeat(3, 1fr); } }
.otz-promise > div {
  padding: var(--card-padding);
  background: var(--otz-panel);
  border: var(--card-border) solid var(--otz-border);
  border-radius: var(--card-radius);
  display: grid; gap: 4px;
}
.otz-promise strong { font-size: 14px; }
.otz-promise span   { color: var(--otz-muted); font-size: 13px; line-height: 1.5; }

/* --------------------------------------------------- the floating note -- */
.otz-float{
  position:fixed; z-index:30; bottom:16px;
  width:min(320px, calc(100vw - 32px));
  padding:14px 40px 14px 14px;
  background:var(--otz-panel); color:var(--otz-text);
  border:2px solid var(--otz-brand); border-radius:var(--card-radius);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  display:grid; gap:8px;
}
.otz-float--bottom-right{right:16px}
.otz-float--bottom-left{left:16px}
.otz-float--bottom-centre{left:50%; transform:translateX(-50%)}
.otz-float strong{font-size:15px}
.otz-float p{margin:0; font-size:13.5px; line-height:1.5; color:var(--otz-muted)}
.otz-float__x{
  position:absolute; top:4px; right:4px;
  background:none; border:0; color:var(--otz-muted); cursor:pointer;
  font-size:22px; line-height:1; min-width:36px; min-height:36px;
}

/* ===========================================================================
   HERO · SECTIONS · FOOTER · FLOATING NOTE
   =========================================================================== */


.otz-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 0;
}
.otz-hero__shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--otz-black) 88%, transparent),
              color-mix(in srgb, var(--otz-black) 45%, transparent));
}

.otz-hero__kicker {
  margin: 0 0 8px; font-size: 12px; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase; color: var(--otz-brand);
}
.otz-hero__title {
  margin: 0 0 12px; max-width: 18ch;
  font-size: clamp(28px, 5.2vw, 54px); line-height: 1.05; letter-spacing: -.02em;
}
.otz-hero__text { margin: 0 0 22px; max-width: 46ch; color: var(--otz-muted); font-size: 16px; }
.otz-hero__btns { display: flex; gap: 12px; flex-wrap: wrap; }


/* On a phone the product rows scroll instead of squeezing four thumbnails
   into 390px. Same trick the theme used. */
@media (max-width: 639px) {
  .otz-grid--scroll {
    display: flex; gap: var(--card-gap);
    overflow-x: auto; scroll-snap-type: x proximity;
    margin-inline: calc(50% - 50vw); padding-inline: 16px; width: 100vw;
  }
  .otz-grid--scroll > * { flex: 0 0 auto; width: min(62vw, 230px); scroll-snap-align: start; }
}

/* ---------------------------------------------------------------- footer -- */


/* OVERRIDES otz-theme.css `.otz-footer__top`.
   The theme sets a fixed four-column grid at every width. On a 390px phone
   that is four columns of about eighty pixels each, with the address and the
   payment badges shredded across them — which is the broken footer that got
   reported. Stack it, and hand back to the theme's columns once there is room
   for them. */
.otz-footer__top { grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 760px)  { .otz-footer__top { grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; } }
@media (min-width: 1024px) { .otz-footer__top { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px; } }


.otz-newsletter input {
  flex: 1 1 180px; min-height: var(--button-min-height);
  padding: 10px 12px; border-radius: 10px;
  background: var(--otz-panel); color: var(--otz-text);
  border: var(--card-border) solid var(--otz-border); font: 400 15px/1.4 inherit;
}
.otz-newsletter button {
  min-height: var(--button-min-height); padding: 10px 18px; border: 0;
  border-radius: 10px; background: var(--otz-brand); color: var(--otz-black);
  font: 800 13px/1 inherit; cursor: pointer;
}


/* ===========================================================================
   MATCHED TO THE LIVE SITE
   ---------------------------------------------------------------------------
   Read off 1toz.shop with the browser rather than guessed: the card is
   #322A3D on a 16px radius with a #4D4159 hairline, ADD TO CART is a 135°
   gradient from the brand orange to the deep one on #2A1C0A text, BUY NOW is
   the same shape outlined, and the badges are 10.9px/800 with 0.1em tracking.
   =========================================================================== */

.otz-btn--primary {
  background: linear-gradient(135deg, var(--otz-brand) 0%, var(--otz-brand-deep) 100%);
  color: #2A1C0A;
}
.otz-btn--outline { color: var(--otz-brand); border-color: var(--otz-brand); background: transparent; }


/* --------------------------------------------------------------- marquee -- */

.otz-marquee__run {
  display: flex; align-items: center; gap: 26px;
  flex: 0 0 auto; padding-right: 26px; white-space: nowrap;
  animation: otz-marquee 28s linear infinite;
}
.otz-marquee span {
  font-size: 13.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--otz-text);
}
.otz-marquee i { color: var(--otz-brand); font-style: normal; }
@keyframes otz-marquee { to { transform: translateX(-100%); } }

/* Someone who asked their system for less movement gets the words, still. */
@media (prefers-reduced-motion: reduce) {
  .otz-marquee { overflow-x: auto; }
  .otz-marquee__run { animation: none; }
}

/* ----------------------------------------------------------- section head -- */
/* The orange bar and the rule under the heading, as on the live site. */


/* ------------------------------------------------------------- footer bits -- */
.otz-legal { display: flex; flex-wrap: wrap; gap: 14px; }
.otz-legal a { font-size: 13px; }


/* ------------------------------------------------------------- Shadow Gen --
   The generator is 235 KB of markup, CSS and script lifted verbatim out of the
   WordPress page. It is not restyled here — reaching into it would mean
   editing a file we deliberately keep byte-identical to the one that works.

   What IS done is the part the owner asked for: its typography joins the rest
   of the site. It shipped with a system-font stack and its own heading sizes,
   so the page read as a different website embedded in this one. Two
   declarations fix that, and neither touches its layout.

   `.slg` is the tool's card, `.slgg` its full-screen overlay. */
.slg,
.slgg { font-family: var(--otz-font-body); }

.slg h1, .slg h2, .slg h3, .slg h4,
.slgg h1, .slgg h2, .slgg h3, .slgg h4 {
  font-family: var(--otz-font-display);
  /* Anton has one weight. Asking for 800 makes the browser synthesise a bold
     by smearing the outline sideways, which looks like a printing fault. */
  font-weight: 400;
  letter-spacing: .01em;
}

/* Its own buttons keep the tool's colours — they are a deliberate part of a
   tool that is about a lamp, not about the shop — but they sit on the shop's
   button geometry so they line up with everything else on the page. */
.slg button { font-family: var(--otz-font-body); min-height: var(--button-min-height); }

/* ---------------------------------------------------------- loose pieces --
   Markup this build has and the theme does not. Every one of these was found
   by verify_css.py's undefined-class check, which now fails the build if a
   template names a class no stylesheet defines — the check that would have
   caught the missing .otz-franchise__video rule before it shipped. */

/* The sign-in buttons. Not the footer's social circles — these are full-width
   provider buttons and they carry the provider's own mark, because a Google
   button that is not recognisably a Google button reads as a phishing page. */
.otz-social--google,
.otz-social--fb {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  min-height: var(--button-min-height);
  margin-bottom: var(--otz-gap-pair, 12px);
  padding: 12px 16px;
  border-radius: var(--card-radius);
  font-weight: 700; font-size: 15px;
  border: 1px solid var(--otz-border);
  transition: transform .12s ease, box-shadow .18s ease;
}
.otz-social--google { background: #fff; color: #1f1f1f; }
.otz-social--fb     { background: #1877F2; color: #fff; border-color: #1877F2; }
.otz-social--google:hover,
.otz-social--fb:hover { transform: translateY(-1px); box-shadow: var(--otz-shadow); }
.otz-social__mark { display: inline-flex; width: 20px; height: 20px; flex: 0 0 auto; }
.otz-social__mark svg { width: 100%; height: 100%; }

/* A footer column. The grid on .otz-footer__top does the placing; this only
   stops the heading and its list touching. */
.otz-footer__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* The product page's two-column body: gallery beside the buy box, one column
   until there is room for two. */
.otz-product { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .otz-product { grid-template-columns: 1.1fr 1fr; gap: 40px; } }

/* The price range inside the filter bar. The theme names this element in its
   own markup and never styles it; the two number boxes need to share the row
   without either of them collapsing. */
.otz-filters__price .otz-filters__range { display: flex; align-items: center; gap: 8px; }
.otz-filters__price input { min-width: 0; flex: 1 1 70px; }

/* Markers, styled deliberately as nothing.
   They exist so a future change can target one row without touching the
   other, and they are written down here so the undefined-class check can
   tell "an intentional hook" from "a class somebody mistyped". */
.otz-section--categories { /* the categories row, for future targeting */ }
.otz-page-bg--anim { /* the animated backdrop; the pools carry the visuals */ }

/* --------------------------------------------------------------- marquee -- */
.otz-marquee {
  display: block;
  overflow: hidden;
  width: 100%;
  background: var(--otz-panel);
  border-block: var(--card-border) solid var(--otz-border);
  padding: 16px 0;
  white-space: nowrap;
  user-select: none;
}
.otz-marquee__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: max-content;
  gap: 48px;
  animation: otz-marquee 26s linear infinite;
}
.otz-marquee:hover .otz-marquee__track {
  animation-play-state: paused;
}
.otz-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 48px;
  font-family: var(--otz-font-display, 'Anton', sans-serif);
  font-size: 1.25rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--otz-text);
  white-space: nowrap;
}
.otz-marquee__item i {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--otz-brand, #FF7A5C);
  border-radius: 50%;
}
@keyframes otz-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .otz-marquee { overflow-x: auto; }
  .otz-marquee__track { animation: none; }
}

/* -------------------------------------------------------- header dropdown -- */
.otz-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.otz-dropdown__toggle {
  cursor: pointer;
  background: var(--otz-panel);
  border: var(--card-border) solid var(--otz-border);
  border-radius: 999px;
  color: var(--otz-text);
  padding: 0;
}
.otz-dropdown__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  background: color-mix(in srgb, var(--otz-panel, #181524) 96%, black);
  border: 1px solid var(--otz-border, #3a324b);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65);
  padding: 8px 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s cubic-bezier(.2, .8, .2, 1), transform .2s cubic-bezier(.2, .8, .2, 1), visibility .2s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.otz-dropdown:hover .otz-dropdown__menu,
.otz-dropdown:focus-within .otz-dropdown__menu,
.otz-dropdown.is-open .otz-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.otz-dropdown__header {
  padding: 10px 16px 6px;
  display: flex;
  flex-direction: column;
}
.otz-dropdown__header strong {
  color: #fff;
  font-size: 14px;
  margin-bottom: 2px;
}
.otz-dropdown__header span {
  color: var(--otz-muted);
  font-size: 12px;
}
.otz-dropdown__divider {
  margin: 6px 0;
  border: none;
  border-top: 1px solid var(--otz-border);
}
.otz-dropdown__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--otz-text);
  background: transparent;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.otz-dropdown__item:hover {
  background: rgb(var(--otz-brand-rgb) / .12);
  color: var(--otz-brand);
}
.otz-dropdown__item--highlight {
  color: var(--otz-brand);
  font-weight: 700;
}
.otz-dropdown__item--admin {
  color: var(--otz-brand-light);
}
.otz-dropdown__item--btn {
  font-family: inherit;
}

/* ----------------------------------------------------------- menu button -- */
.otz-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--otz-panel, #181524);
  border: var(--card-border) solid var(--otz-border, #3a324b);
  border-radius: 999px;
  color: var(--otz-text);
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.otz-menu-btn:hover, .otz-menu-btn:focus-visible {
  border-color: var(--otz-brand);
  background: rgb(var(--otz-brand-rgb) / .12);
  color: var(--otz-brand);
}

/* ------------------------------------------------------- header layout -- */
.otz-header__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}
.otz-header__right {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 36px);
  margin-left: auto;
}
.otz-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  white-space: nowrap;
}
.otz-nav a {
  font-family: var(--otz-font-display, 'Anton', sans-serif);
  font-size: 14.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: color .2s ease;
}
.otz-nav a:hover, .otz-nav a.is-active {
  color: var(--otz-brand, #FFB054);
}
.otz-nav sup {
  font-size: 9px;
  top: -0.4em;
}

/* --------------------------------------------------- single product page -- */
.otz-product-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  margin-top: 28px;
}
@media (min-width: 900px) {
  .otz-product-top {
    grid-template-columns: 1fr 1fr;
  }
}

/* Gallery */
.otz-product-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--otz-panel, #181524);
  border: 1px solid var(--otz-border, #3a324b);
  border-radius: var(--card-radius, 18px);
  overflow: hidden;
}
.otz-product-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.otz-gallery-zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(20, 16, 28, 0.75);
  border: 1px solid var(--otz-border, #3a324b);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
}
.otz-product-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.otz-gallery-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1.5px solid var(--otz-border, #3a324b);
  background: var(--otz-panel, #181524);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: border-color .2s ease;
}
.otz-gallery-thumb.is-active, .otz-gallery-thumb:hover {
  border-color: var(--otz-brand, #FFB054);
}
.otz-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Summary / Buy Box */
.otz-product-summary {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--otz-panel, #181524);
  border: 1px solid var(--otz-border, #3a324b);
  border-radius: var(--card-radius, 18px);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
  z-index: 10;
}
.otz-product-badge-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.otz-product-title {
  font-family: var(--otz-font-display, 'Anton', sans-serif);
  font-size: clamp(1.8rem, 3.5vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
}
.otz-product-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
.otz-price-del {
  font-family: var(--otz-font-display, 'Anton', sans-serif);
  font-size: 1.3rem;
  color: var(--otz-muted, #9e93b3);
  text-decoration: line-through;
}
.otz-price-ins {
  font-family: var(--otz-font-display, 'Anton', sans-serif);
  font-size: 2rem;
  font-weight: 800;
  color: var(--otz-brand, #FFB054);
  text-decoration: none;
}
.otz-product-short-desc {
  color: var(--otz-text, #f0ecf9);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.otz-stock-block {
  margin-bottom: 20px;
}
.otz-stock-bar {
  width: 100%;
  height: 4px;
  background: #362f48;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}
.otz-stock-bar.is-instock {
  background: linear-gradient(90deg, var(--otz-brand, #FFB054) 100%, transparent 0);
}
.otz-stock-bar.is-sold {
  background: #e63946;
}
.otz-stock-text {
  font-size: 13.5px;
  font-weight: 600;
  color: #2ec4b6;
}
.otz-stock-text.otz-tone--danger {
  color: #e63946;
}

/* Buy Actions Surrounding Box (Screenshot) */
.otz-product-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
  padding: 20px !important;
  background: rgba(0, 0, 0, 0.28) !important;
  border: 1px solid var(--otz-border, #3a324b) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}
.otz-product-actions .otz-stock-block {
  margin-bottom: 6px !important;
}

.otz-btn--addcart {
  background: linear-gradient(135deg, var(--otz-brand, #FFB054) 0%, var(--otz-brand-deep, #ff7a5c) 100%) !important;
  color: #14101d !important;
  font-family: var(--otz-font-display, 'Anton', sans-serif) !important;
  font-size: 16.5px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 12px !important;
  min-height: 50px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}
.otz-btn--addcart:hover,
.otz-btn--addcart:focus-visible {
  filter: brightness(1.12) !important;
  box-shadow: 0 0 22px rgb(var(--otz-brand-rgb, 255 176 84) / .7), 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-2px) !important;
  color: #14101d !important;
}

.otz-btn--buynow {
  background: transparent !important;
  color: var(--otz-brand, #FFB054) !important;
  border: 2px solid var(--otz-brand, #FFB054) !important;
  font-family: var(--otz-font-display, 'Anton', sans-serif) !important;
  font-size: 16.5px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border-radius: 12px !important;
  min-height: 50px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all .25s cubic-bezier(.2, .8, .2, 1) !important;
}
.otz-btn--buynow:hover,
.otz-btn--buynow:focus-visible {
  background: rgb(var(--otz-brand-rgb, 255 176 84) / .16) !important;
  border-color: var(--otz-brand-light, var(--otz-brand, #FFB054)) !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgb(var(--otz-brand-rgb, 255 176 84) / .6), inset 0 0 12px rgb(var(--otz-brand-rgb, 255 176 84) / .25) !important;
  transform: translateY(-2px) !important;
}

.otz-btn--soldout {
  background: #362f48 !important;
  color: var(--otz-muted) !important;
  font-family: var(--otz-font-display, 'Anton', sans-serif) !important;
  font-size: 16.5px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 12px !important;
  min-height: 50px !important;
  font-weight: 800 !important;
  cursor: not-allowed !important;
  width: 100% !important;
}

/* Product Meta */
.otz-product-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  color: var(--otz-text, #f0ecf9);
  padding-top: 18px;
  border-top: 1px solid var(--otz-border, #3a324b);
}
.otz-meta-line strong {
  color: #fff;
  margin-right: 6px;
}
.otz-meta-line a {
  color: var(--otz-brand, #FFB054);
  text-decoration: none;
}
.otz-tag {
  color: var(--otz-muted, #9e93b3);
  margin-right: 6px;
}

/* Tabs Section */
.otz-tabs-wrapper {
  margin-top: 36px;
  background: var(--otz-panel, #181524);
  border: 1px solid var(--otz-border, #3a324b);
  border-radius: var(--card-radius, 18px);
  padding: clamp(20px, 3.5vw, 36px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 10;
}
.otz-tabs-nav {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--otz-border, #3a324b);
  margin-bottom: 24px;
}
.otz-tab-btn {
  background: transparent;
  border: none;
  padding: 12px 0 14px;
  font-family: var(--otz-font-display, 'Anton', sans-serif);
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--otz-muted, #9e93b3);
  cursor: pointer;
  position: relative;
  border-bottom: 3px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.otz-tab-btn.is-active, .otz-tab-btn:hover {
  color: #fff;
  border-bottom-color: var(--otz-brand, #FFB054);
}
.otz-tab-pane {
  display: none;
}
.otz-tab-pane.is-active {
  display: block;
}
.otz-desc-heading {
  font-family: var(--otz-font-display, 'Anton', sans-serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
}
.otz-desc-body {
  color: var(--otz-text, #f0ecf9);
  line-height: 1.75;
  font-size: 14.5px;
}
.otz-desc-body p {
  margin: 0 0 14px;
}

/* Related Products */
.otz-related-wrapper {
  margin-top: 40px;
  margin-bottom: 48px;
  background: var(--otz-panel, #181524);
  border: 1px solid var(--otz-border, #3a324b);
  border-radius: var(--card-radius, 18px);
  padding: clamp(20px, 3.5vw, 36px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 10;
}
.otz-related-heading {
  font-family: var(--otz-font-display, 'Anton', sans-serif);
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.otz-accent-bar {
  display: inline-block;
  width: 6px;
  height: 1.1em;
  background: var(--otz-brand, #FFB054);
  border-radius: 2px;
}

/* Product Card Solid Elevation & CTA Slot */
.otz-card {
  background: #181524 !important;
  border: 1px solid #362f48 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4) !important;
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
}

.otz-card__cta {
  padding: 14px 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  margin-top: auto !important;
  box-sizing: border-box !important;
}

.otz-card .otz-btn--primary {
  background: linear-gradient(135deg, var(--otz-card-brand, var(--otz-brand, #FFB054)) 0%, var(--otz-card-brand-deep, var(--otz-brand-deep, #ff7a5c)) 100%) !important;
  color: #14101d !important;
  font-family: var(--otz-font-display, 'Anton', sans-serif) !important;
  font-size: 14.5px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 12px !important;
  min-height: 44px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}

.otz-card .otz-btn--primary:hover,
.otz-card .otz-btn--primary:focus-visible {
  filter: brightness(1.12) !important;
  box-shadow: 0 0 20px rgb(var(--otz-card-brand-rgb, var(--otz-brand-rgb, 255 176 84)) / .7), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-2px) !important;
  color: #14101d !important;
}

.otz-card .otz-btn--outline {
  background: transparent !important;
  color: var(--otz-card-brand, var(--otz-brand, #FFB054)) !important;
  border: 2px solid var(--otz-card-brand, var(--otz-brand, #FFB054)) !important;
  font-family: var(--otz-font-display, 'Anton', sans-serif) !important;
  font-size: 14.5px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border-radius: 12px !important;
  min-height: 44px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all .25s cubic-bezier(.2, .8, .2, 1) !important;
}

.otz-card .otz-btn--outline:hover,
.otz-card .otz-btn--outline:focus-visible {
  background: rgb(var(--otz-card-brand-rgb, var(--otz-brand-rgb, 255 176 84)) / .16) !important;
  border-color: var(--otz-card-brand-light, var(--otz-brand-light, var(--otz-brand, #FFB054))) !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgb(var(--otz-card-brand-rgb, var(--otz-brand-rgb, 255 176 84)) / .6), inset 0 0 12px rgb(var(--otz-card-brand-rgb, var(--otz-brand-rgb, 255 176 84)) / .25) !important;
  transform: translateY(-2px) !important;
}

.otz-card .otz-btn--ghost {
  background: #251f33 !important;
  color: var(--otz-muted, #9e93b3) !important;
  border: 1px solid var(--otz-border, #3a324b) !important;
  border-radius: 12px !important;
  min-height: 44px !important;
  font-family: var(--otz-font-display, 'Anton', sans-serif) !important;
  font-size: 14.5px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  width: 100% !important;
}

.otz-btn--primary .otz-swap,
.otz-btn--primary .otz-swap__in,
.otz-btn--primary .otz-swap__out {
  color: #14101d !important;
}

.otz-btn--outline:hover .otz-swap,
.otz-btn--outline:hover .otz-swap__in,
.otz-btn--outline:hover .otz-swap__out,
.otz-btn--outline:focus-visible .otz-swap,
.otz-btn--outline:focus-visible .otz-swap__in,
.otz-btn--outline:focus-visible .otz-swap__out {
  color: #ffffff !important;
}

/* ---------------------------------------------------- shop toolbar & filters -- */
.otz-section {
  position: relative !important;
  z-index: 10 !important;
}

.otz-section__head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--otz-border, #3a324b) !important;
  position: relative !important;
  z-index: 10 !important;
}

.otz-section__head h2 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: var(--otz-font-display, 'Anton', sans-serif) !important;
  font-size: clamp(2rem, 4vw, 2.8rem) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 0 !important;
}

.otz-section__head h2::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 1.1em !important;
  background: var(--otz-brand, #FFB054) !important;
  border-radius: 2px !important;
}

.otz-section__count {
  color: var(--otz-muted, #9e93b3) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.otz-shop-toolbar {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  padding: 16px 20px !important;
  background: var(--otz-panel, #181524) !important;
  border: 1px solid var(--otz-border, #3a324b) !important;
  border-radius: var(--card-radius, 16px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  position: relative !important;
  z-index: 10 !important;
}

.otz-shop-toolbar input[type="search"] {
  width: 100% !important;
  min-height: 46px !important;
  padding: 10px 16px !important;
  background: #251f33 !important;
  background: var(--otz-panel-2, #251f33) !important;
  border: 1px solid var(--otz-border, #3a324b) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 15px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.otz-shop-toolbar input[type="search"]::placeholder {
  color: var(--otz-muted, #9e93b3) !important;
}

.otz-shop-toolbar input[type="search"]:focus {
  border-color: var(--otz-brand, #FFB054) !important;
  box-shadow: 0 0 0 2px rgb(var(--otz-brand-rgb, 255 176 84) / .25) !important;
}

.otz-shop-toolbar button[type="submit"] {
  align-self: flex-start !important;
  background: transparent !important;
  color: var(--otz-brand, #FFB054) !important;
  border: 1.5px solid var(--otz-brand, #FFB054) !important;
  font-family: var(--otz-font-display, 'Anton', sans-serif) !important;
  font-size: 14px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 8px 22px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
}

.otz-shop-toolbar button[type="submit"]:hover {
  background: rgb(var(--otz-brand-rgb, 255 176 84) / .15) !important;
  transform: translateY(-1px) !important;
}

.otz-filters {
  background: var(--otz-panel, #181524) !important;
  border: 1px solid var(--otz-border, #3a324b) !important;
  border-radius: var(--card-radius, 16px) !important;
  padding: 18px 20px !important;
  margin-bottom: 32px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  position: relative !important;
  z-index: 10 !important;
}

.otz-filters select,
.otz-filters input[type="number"] {
  background: #251f33 !important;
  background: var(--otz-panel-2, #251f33) !important;
  border: 1px solid var(--otz-border, #3a324b) !important;
  border-radius: 8px !important;
  color: #fff !important;
}

.otz-filters__apply {
  background: var(--otz-brand, #FFB054) !important;
  color: #14101e !important;
  font-family: var(--otz-font-display, 'Anton', sans-serif) !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
}

/* ------------------------------------------------------------- footer -- */
.otz-footer {
  position: relative !important;
  z-index: 25 !important;
  width: 100% !important;
  background: #14101e !important;
  border-top: 1px solid var(--otz-border, #3a324b) !important;
  margin-top: 60px !important;
  clear: both !important;
}
.otz-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #14101e;
  z-index: -1;
}

/* ---------------------------------------------------------- cart drawer --
   Slides in from the right over the shop rather than replacing it, because
   the point of a drawer is that you can see what you were looking at and
   carry on. It is an aside and not a <dialog> for the same reason: a modal
   takes the whole screen and traps you in it. */
.otz-drawer { position: fixed; inset: 0; z-index: 400; }
.otz-drawer[hidden] { display: none; }

.otz-drawer__veil {
  position: absolute; inset: 0;
  background: rgb(18 14 24 / .62);
  opacity: 0; transition: opacity .28s ease;
}
.otz-drawer.is-open .otz-drawer__veil { opacity: 1; }

.otz-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  width: min(400px, 92vw);
  background: var(--otz-panel);
  border-left: 1px solid var(--otz-border);
  box-shadow: -18px 0 50px rgb(0 0 0 / .45);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.otz-drawer.is-open .otz-drawer__panel { transform: none; }

/* Someone who asked for less movement gets the panel, just not the slide. */
@media (prefers-reduced-motion: reduce) {
  .otz-drawer__panel { transition: none; transform: none; }
  .otz-drawer__veil  { transition: none; }
}

/* The page behind must not scroll while the drawer is over it — otherwise
   flicking the drawer scrolls the shop underneath and the drawer stays put. */
body.otz-drawer-open { overflow: hidden; }

.otz-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--otz-border);
}
.otz-drawer__head h2 { margin: 0; font-size: 1.15rem }
.otz-drawer__count { color: var(--otz-muted); font-family: var(--otz-font-body); font-size: .9rem }
.otz-drawer__headbtns { display: flex; align-items: center; gap: 10px }
.otz-drawer__clear {
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  color: var(--otz-danger); font: 700 12px/1 var(--otz-font-body);
  text-transform: uppercase; letter-spacing: .06em;
}
.otz-drawer__clear:hover { text-decoration: underline }
.otz-drawer__x {
  background: none; border: 0; padding: 0 4px; cursor: pointer;
  color: var(--otz-text); font-size: 26px; line-height: 1;
}

.otz-drawer__body { flex: 1; overflow-y: auto; padding: 8px 18px }
.otz-drawer__empty { padding: 32px 0; color: var(--otz-muted); text-align: center }
.otz-drawer__say {
  margin: 10px 18px 0; padding: 8px 12px; border-radius: 8px;
  background: rgb(var(--otz-brand-rgb) / .16);
  color: var(--otz-text); font-size: 13px;
}

.otz-drawer__item {
  display: grid; gap: 10px 12px; align-items: center;
  grid-template-columns: 56px 1fr;
  padding: 14px 0; border-bottom: 1px solid var(--otz-border);
}
.otz-drawer__thumb {
  width: 56px; height: 56px; border-radius: 8px; overflow: hidden;
  background: var(--otz-panel-2);
}
.otz-drawer__thumb img { width: 100%; height: 100%; object-fit: cover }
.otz-drawer__meta { display: grid; gap: 2px; min-width: 0 }
.otz-drawer__name {
  color: var(--otz-text); font-size: 13.5px; font-weight: 700; line-height: 1.35;
  /* Two lines then an ellipsis: a long product name must not push the price
     and the stepper out of the row. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.otz-drawer__price { color: var(--otz-brand); font-size: 13px; font-weight: 800 }
.otz-drawer__tools {
  grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

.otz-drawer__foot { padding: 14px 18px; border-top: 1px solid var(--otz-border) }
.otz-drawer__row { display: flex; justify-content: space-between; font-size: 15px }
.otz-drawer__row strong { color: var(--otz-brand) }
.otz-drawer__note { margin: 4px 0 12px; color: var(--otz-muted); font-size: 12px }
.otz-drawer__go { width: 100%; text-align: center }
/* Two stacked buttons need the same gap between them as everything
   else in the panel; the second must not touch the first. */
.otz-drawer__go + .otz-drawer__go { margin-top: var(--otz-gap-pair, 12px) }

/* ------------------------------------------------------------- steppers --
   One control, two homes: inside the drawer, and on a product card between
   Add to cart and Buy now. Same numbers, same rules, one stylesheet block. */
.otz-qty {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--otz-border); border-radius: 999px;
  background: var(--otz-panel-2); overflow: hidden;
}
.otz-qty__btn {
  width: 34px; min-height: 34px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--otz-text); font: 700 17px/1 var(--otz-font-body);
  transition: background .15s ease, color .15s ease;
}
.otz-qty__btn:hover:not(:disabled) { background: var(--otz-brand); color: #2a1c0a }
/* Greyed, not hidden. A + that vanishes at the last one looks broken; a + you
   can see is disabled says "that is all we have" without a word. */
.otz-qty__btn:disabled { opacity: .35; cursor: not-allowed }
.otz-qty__n {
  min-width: 30px; text-align: center;
  font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}

.otz-qty__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: none; border: 1px solid rgb(255 122 134 / .4); border-radius: 999px;
  color: var(--otz-danger); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.otz-qty__remove:hover { background: var(--otz-danger); color: #2a0a0d }
.otz-qty__remove svg { width: 15px; height: 15px }

/* On a card the stepper sits in the button stack, so it takes the stack's
   full width and the same gap as the buttons above and below it. */
.otz-qty--card { width: 100%; justify-content: center; border-radius: var(--otz-radius) }

/* ===========================================================================
   OVERRIDES `.otz-card:hover` `.otz-section__head` `.otz-card`
   `.otz-nav a` `.otz-section__head h2` `.otz-section__head h2::before`
   `.otz-shop-toolbar` `.otz-filters` `.otz-filters select`
   `.otz-filters input[type="number"]` `.otz-footer`
   `.otz-qty__btn` `.otz-qty__btn:hover:not(:disabled)` `.otz-qty__btn:disabled`

   THE OVERRIDE LIST, AND WHY EACH ONE IS DELIBERATE
   -------------------------------------------------
   .otz-card / .otz-card:hover   the shop card is a solid panel with its own
       elevation and, from here on, its own brand-coloured hover glow. The
       theme's .otz-card is the BLOG card — 4:3 thumb, 20px body, a flat
       orange border on hover. Same name, different component.
   .otz-nav a, .otz-shop-toolbar, .otz-filters and its fields, .otz-footer,
   .otz-section__head and its h2   the header, filter bar, footer and section
       headings were rebuilt against this app's own markup, which is not the
       WooCommerce markup the theme was written for.
   .otz-qty__btn and its states   the theme's stepper is the WooCommerce
       quantity box: 44px, growing to 54px on a phone, sized to be the only
       control in a table cell. This one sits inside a 320px drawer row next
       to a thumbnail and a delete button, and at 54px it would not fit. Same
       control, two sizes, and the drawer's is the smaller.

   Everything below is new: the cart-icon nudge, the hover glow, and the
   mobile heading alignment. Three small things that each answer a sentence.
   Batch E chrome: the cart-icon nudge, the hover glow, and the mobile
   heading alignment. Three small things that each answer a sentence.
   ======================================================================== */

/* ------------------------------------------------------- cart icon nudge --
   "Give a moving animation to the cart logo on top when a product is added."
   The script adds .is-bumped, waits for animationend, and takes it off — so
   adding a second item restarts the animation rather than doing nothing. */
@keyframes otz-cart-bump {
   0%  { transform: scale(1)    translateY(0); }
  28%  { transform: scale(1.18) translateY(-4px); }
  55%  { transform: scale(.94)  translateY(1px); }
  78%  { transform: scale(1.06) translateY(-1px); }
 100%  { transform: scale(1)    translateY(0); }
}
@keyframes otz-cart-ring {
  from { box-shadow: 0 0 0 0   rgb(var(--otz-brand-rgb, 255 176 84) / .55); }
  to   { box-shadow: 0 0 0 14px rgb(var(--otz-brand-rgb, 255 176 84) / 0); }
}
.otz-icon-btn.is-bumped {
  animation: otz-cart-bump 520ms cubic-bezier(.34, 1.56, .64, 1);
}
.otz-icon-btn.is-bumped::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  pointer-events: none;
  animation: otz-cart-ring 520ms ease-out;
}
/* The count itself pops, so the number is what your eye lands on. */
.otz-icon-btn.is-bumped .otz-cart-count {
  animation: otz-cart-bump 520ms cubic-bezier(.34, 1.56, .64, 1) 60ms;
}

/* --------------------------------------------------------- the soft glow --
   "when user hoovers on a product, give it a soft glow like it was there in
   the wp site."

   The WordPress card lifted and lit itself in the brand colour. The Laravel
   card had a hard `box-shadow: 0 4px 18px rgba(0,0,0,.4) !important` and no
   hover state at all, so it just sat there. This restores the lift and adds
   the wash — in --otz-card-brand where a card carries its brand's colour, and
   in the page's own accent otherwise, so a Demon Slayer card glows green on a
   green page and orange on the shop-all page. Both are declared with
   !important only because the base rule above them is. */
.otz-card {
  transition: transform .22s ease, border-color .22s ease, box-shadow .28s ease !important;
}
.otz-card:hover,
.otz-card:focus-within {
  transform: translateY(-5px) !important;
  border-color: rgb(var(--otz-card-brand-rgb, var(--otz-brand-rgb, 255 176 84)) / .55) !important;
  box-shadow:
    0 0 0 1px rgb(var(--otz-card-brand-rgb, var(--otz-brand-rgb, 255 176 84)) / .28),
    0 10px 34px rgb(var(--otz-card-brand-rgb, var(--otz-brand-rgb, 255 176 84)) / .26),
    0 16px 40px rgba(0, 0, 0, .55) !important;
}
/* The picture leans in very slightly with it. Overflow is already hidden on
   the card, so nothing escapes the corners. */
.otz-card__media img { transition: transform .35s ease; }
.otz-card:hover .otz-card__media img { transform: scale(1.045); }

@media (prefers-reduced-motion: reduce) {
  .otz-card, .otz-card__media img { transition: none !important; }
  .otz-card:hover { transform: none !important; }
  .otz-card:hover .otz-card__media img { transform: none; }
  .otz-icon-btn.is-bumped,
  .otz-icon-btn.is-bumped::before,
  .otz-icon-btn.is-bumped .otz-cart-count { animation: none; }
}

/* ------------------------------------------------- headings on the phone --
   "in mobile the Cataogries, New Arrival section titles will be left aligned
   not right."

   Why they were right-aligned: the theme stacks the head into a column below
   600px, and the block far above in this file sets `align-items: flex-end
   !important` for the desktop row — which in a COLUMN means "push everything
   to the right". The !important meant the theme's own flex-start could not
   win. One media query, same specificity, puts it back. */
@media (max-width: 600px) {
  .otz-section__head {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .otz-section__head h2 { text-align: left !important; }
}

/* ===========================================================================
   The class names that styled nothing.

   "If the css stylings are not doing anything, remove them. But be sure it
   won't kill anything."

   Six class names were being written into templates with not one rule behind
   them anywhere. They were not harmful — an unstyled div is just a div — but
   they were lies: the markup claimed a design decision that did not exist,
   and the next person to touch the file would go looking for the rule.

   So each one is settled here rather than deleted, because in every case
   there IS something the name should have been doing and the page is slightly
   wrong without it. The seventh, .otz-account-dropdown, is removed from the
   template instead: .otz-dropdown already positions and right-aligns that
   menu completely, so the modifier had nothing left to say.
   ======================================================================== */

/* The gallery column of the product page. In a `1fr 1fr` grid a column
   containing an image will not shrink below that image's intrinsic width
   unless it is told it may — which is how a wide photo pushes the buy box off
   the side of a narrow laptop. This is the line that lets it. */
.otz-product-gallery { min-width: 0; }

/* The tab panel. Description is long and Reviews is one sentence, so without
   a floor the whole panel collapses when you switch and the page jumps under
   the cursor — you press REVIEWS and the button moves away from your finger. */
.otz-tabs-content { min-height: 140px; }

/* Secondary text. "There are no reviews yet." was rendering in full body
   white, as loud as the product name. */
.otz-muted { color: var(--otz-muted, #9e93b3); }


/* Related products slider: two fixes.
   1. BACKGROUND GAP: the wrapper is inside otz-container whose background
      clips at the container edge. Making the wrapper itself full-bleed lets
      the dark card background stretch to both screen edges.
   2. LEFT GAP: otz-rail--bleed uses max(16px, …) for its padding, which
      is smaller than the container's actual padding on narrow screens, so
      the first card doesn't align with the heading. Resetting the rail's
      own bleed to zero and letting the wrapper supply the correct padding
      (same formula, same variable) closes the gap exactly. */
.otz-related-wrapper {
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  box-sizing: border-box;
  /* Left side is deliberately larger than the standard container padding
     so the first card has clear breathing room from the screen edge. */
  padding-inline-start: max(32px, calc((100vw - var(--container-max)) / 2));
  padding-inline-end:   max(16px, calc((100vw - var(--container-max)) / 2));
}
.otz-related-wrapper > .otz-rail--bleed {
  margin-inline: 0;
  padding-inline: 0;
  width: 100%;
}


/* The pagination arrows. ← and → are drawn much smaller than digits in most
   fonts, so the two end buttons looked faded next to the numbers even though
   they are the same size box. */
.otz-pagination__prev,
.otz-pagination__next { font-size: 18px; line-height: 1; }

/* ===========================================================================
   The wishlist.
   ======================================================================== */

/* ------------------------------------------------ the count on the header --
   Same badge as the cart's, in the same place, because they are the same
   idea. It borrows .otz-cart-count's geometry rather than restating it, so
   the two can never drift by a pixel. */
.otz-wish-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 21px; height: 21px;
  padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--otz-brand, #FFB054);
  border: 2px solid var(--otz-black, #14101d);
  border-radius: 999px;
  color: #2a1c0a;
  font: 800 11px/1 var(--otz-font-body);
  font-variant-numeric: tabular-nums;
}
/* A filled heart when there is something in it, so the state is readable
   without counting. */
.otz-wish-link svg { fill: none; transition: fill .2s ease; }
.otz-wish-link:has(.otz-wish-count) svg { fill: currentColor; }

/* --------------------------------------------------- the heart on a card --
   Bottom-right of the picture: NEW is top-left, the discount top-right and
   SOLD OUT bottom-left, so this is the one free corner. Positioned against
   the card, which is already position:relative. */
.otz-wish { margin: 0; }
.otz-wish--card {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  z-index: 5;
}
/* The discount badge lives in that corner too, so it steps aside — but only
   on a card that actually has a heart, which is what :has() is checking. A
   card rendered without one keeps the badge where it was. */
.otz-card:has(.otz-wish--card) .otz-badge--sale { right: 10px; }
.otz-wish__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 36px; height: 36px; padding: 0;
  background: rgba(20, 16, 28, .68);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.otz-wish__btn svg { width: 17px; height: 17px; fill: none; transition: fill .18s ease; }
.otz-wish__btn:hover { transform: scale(1.08); border-color: var(--otz-brand, #FFB054); }
.otz-wish__btn:disabled { opacity: .6; cursor: progress; }

/* Filled. The heart is the state; there is no separate tick or word on a card
   because there is no room for one. */
.otz-wish.is-on .otz-wish__btn {
  background: var(--otz-brand, #FFB054);
  border-color: var(--otz-brand, #FFB054);
  color: #2a1c0a;
}
.otz-wish.is-on .otz-wish__btn svg { fill: currentColor; }

@keyframes otz-heart-pop {
   0%  { transform: scale(1); }
  40%  { transform: scale(1.28); }
 100%  { transform: scale(1); }
}
.otz-wish.is-on .otz-wish__btn svg { animation: otz-heart-pop 320ms ease-out; }

/* ------------------------------------------ the heart in the product page --
   A full-width row under Buy now, matching the two buttons above it rather
   than floating over anything. */
.otz-wish--inline { display: block; width: 100%; }
.otz-wish--inline .otz-wish__btn {
  width: 100%; height: auto; min-height: 46px;
  border-radius: var(--otz-radius, 12px);
  background: transparent;
  border: 1px solid var(--otz-border, #3a324b);
  color: var(--otz-muted, #9e93b3);
  font: 700 13px/1 var(--otz-font-display, 'Anton', sans-serif);
  letter-spacing: .08em;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.otz-wish--inline .otz-wish__btn:hover {
  transform: none;
  color: #fff;
  border-color: var(--otz-brand, #FFB054);
}
.otz-wish--inline.is-on .otz-wish__btn {
  background: transparent;
  color: var(--otz-brand, #FFB054);
  border-color: var(--otz-brand, #FFB054);
}

/* ------------------------------------------------------- the list itself -- */
.otz-wish-clear { margin: 0; }
.otz-wish-clear__btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--otz-danger, #ff7a86);
  font: 700 13px/1 var(--otz-font-body);
  letter-spacing: .04em;
}
.otz-wish-clear__btn:hover { text-decoration: underline; }

.otz-wish-empty {
  padding: 48px 24px; text-align: center;
  background: var(--otz-panel, #181524);
  border: 1px solid var(--otz-border, #3a324b);
  border-radius: var(--card-radius, 18px);
}
.otz-wish-empty p { margin: 0 0 10px; }
.otz-wish-empty .otz-btn { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .otz-wish__btn, .otz-wish__btn svg { transition: none; animation: none; }
  .otz-wish__btn:hover { transform: none; }
}

/* ===========================================================================
   The Featured brands band.

   A video behind, a solid layer over it, then the words. The middle layer is
   the whole safety argument: this is the same shape as the bug where a
   background video painted over the products, and the reason it cannot happen
   here is that the scrim is a rule in this file rather than a judgement call
   in a template. The video is also inside a box with overflow hidden and an
   explicit size, so it cannot lay out at its intrinsic dimensions the way the
   carousel tile's video once did — 781×428 inside a 151×164 tile.
   ======================================================================== */
/* The band itself. .otz-section already gives it its vertical rhythm; this
   adds the one thing a full-width band needs that a normal section does not —
   room to breathe from the row above and below it. */
.otz-featured { margin: clamp(28px, 5vw, 56px) 0; }

.otz-featured__box {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--otz-panel, #181524);

  /* Full-bleed: escape otz-container so the video and scrim run edge-to-edge.
     Same negative-margin + 100vw trick used by otz-rail--bleed.
     Border-radius and side borders are dropped — a viewport-wide band
     has no visible corners to round. */
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  border-radius: 0;
  border-top: 1px solid var(--otz-border, #3a324b);
  border-bottom: 1px solid var(--otz-border, #3a324b);

  /* Gives the band hero-section height so it looks like a proper full-width
     feature, not a card. clamp() keeps it readable on every screen size. */
  min-height: clamp(585px, 74vw, 897px);
  display: flex;
  align-items: center;
}

.otz-featured__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* The solid frame. Dark enough at the left, where the words are, to keep them
   readable over any frame of any video — including a white one. */
.otz-featured__scrim {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(12, 9, 18, .94) 0%,
      rgba(12, 9, 18, .82) 42%,
      rgba(12, 9, 18, .45) 100%),
    linear-gradient(0deg,
      rgb(var(--otz-brand-deep-rgb, 255 122 92) / .18),
      rgb(var(--otz-brand-deep-rgb, 255 122 92) / .18));
}

.otz-featured__inner {
  position: relative;
  z-index: 2;
  padding: clamp(32px, 6vw, 72px) clamp(22px, 5vw, 60px);
  max-width: 640px;
}

.otz-featured__title {
  margin: 0 0 10px;
  font-family: var(--otz-font-display, 'Anton', sans-serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
}
.otz-featured__text {
  margin: 0 0 22px;
  color: var(--otz-muted, #9e93b3);
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  line-height: 1.55;
  max-width: 46ch;
}
.otz-featured__btn { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  /* The poster still shows; only the movement stops. */
  .otz-featured__video { display: none; }
}


/* Mobile & Tablet Section Headings Flush Left Alignment */
@media (max-width: 900px) {
  .otz-section__head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  .otz-section__head h2 {
    text-align: left !important;
    justify-content: flex-start !important;
    font-size: clamp(1.3rem, 4.2vw, 1.8rem) !important;
    margin: 0 !important;
    align-self: flex-start !important;
  }
  
  .otz-section__link {
    margin-left: auto !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-size: 13px !important;
  }
}