/* =====================================================================
   Vendsage storefront — mobile-first, scales to ultrawide
   Breakpoints: 400 / 560 / 700 / 900 / 1100 / 1400 / 1700
   ===================================================================== */

:root {
  --orange:      #FB7701;
  --orange-dark: #E56B00;
  --price:       #FB4A11;
  --black:       #000000;
  --ink:         #1B1B1B;
  --grey:        #707070;
  --grey-light:  #909090;
  --line:        #E6E6E6;
  --page:        #F5F5F5;
  --card:        #FFFFFF;
  --green:       #0A8A3C;
  --green-bg:    #E8F6ED;

  --radius: 8px;
  --gap: 8px;
  --pad: 10px;
}

@media (min-width: 700px) {
  :root { --gap: 10px; --pad: 16px; }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  /* No overflow-x mask. The rule that used to sit here (overflow-x: hidden,
     "stops the deal strip pushing the page wide") did not stop anything.
     overflow-x on body suppresses the scrollbar without changing the layout,
     so a long product name or a long coupon code still pushed content past
     the right edge — the mask only made it unreachable instead of visibly
     broken. Every one of those causes is fixed below, and leaving the mask
     off means the next one shows up as a scrollbar rather than as content
     that silently is not there. */
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.wrap {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: calc(var(--pad) + env(safe-area-inset-left, 0px))
                  calc(var(--pad) + env(safe-area-inset-right, 0px));
}

/* ------------------------------------------------------- top trust bar */

.utility {
  background: var(--black);
  color: #fff;
  font-size: 12px;
}
.utility .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}
.utility .wrap::-webkit-scrollbar { display: none; }
.utility div { white-space: nowrap; }
.utility b { font-weight: 700; display: block; }
.utility small { color: #BFBFBF; font-size: 11px; }

@media (max-width: 699px) {
  .utility small { display: none; }
  .utility b { display: inline; font-weight: 600; }
  .utility div:nth-child(3) { display: none; }
}
@media (min-width: 700px) {
  .utility .wrap { justify-content: center; gap: 3rem; padding-block: 9px; }
}

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

.masthead {
  background: var(--orange);
  position: sticky;
  top: 0;
  z-index: 30;
}
.masthead .wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "brand basket" "search search";
  align-items: center;
  gap: 8px 10px;
  padding-block: 9px;
}
@media (min-width: 700px) {
  .masthead .wrap {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand search basket";
    gap: 14px;
    padding-block: 10px;
  }
}

.wordmark {
  grid-area: brand;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  white-space: nowrap;
  background: rgba(0,0,0,.14);
  padding: 6px 11px;
  border-radius: var(--radius);
}
@media (min-width: 700px) { .wordmark { font-size: 22px; padding: 6px 13px; } }

.search {
  grid-area: search;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 999px;
  padding: 3px 3px 3px 14px;
  width: 100%;
  max-width: 760px;
  justify-self: center;
}
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;              /* 16px stops iOS zooming on focus */
  color: var(--ink);
  padding: 7px 0;
}
.search input:focus { outline: none; }
.search input::placeholder { color: var(--grey-light); font-size: 14px; }
.search button {
  flex: none;
  border: 0;
  background: var(--black);
  color: #fff;
  border-radius: 999px;
  width: 40px;
  height: 34px;
  cursor: pointer;
  font-size: 15px;
  display: grid;
  place-items: center;
}

.basket-link {
  grid-area: basket;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding: 8px 6px;
  min-height: 40px;
}
.basket-count {
  background: #fff;
  color: var(--price);
  font-weight: 800;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
  padding: 1px 6px;
  font-size: 12px;
}

/* ------------------------------------------------------- reassurance */

.assure {
  list-style: none;
  background: #FFF4E5;
  border-radius: var(--radius);
  color: var(--green);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 12px;
  margin: 10px 0;
  display: flex;
  gap: 1.25rem;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.assure::-webkit-scrollbar { display: none; }
.assure li {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.assure li + li { padding-left: 1.25rem; border-left: 1px solid #F2D7B3; }
/* A drawn tick rather than a glyph, so it matches the text weight everywhere. */
.assure .tick {
  width: 6px;
  height: 11px;
  border: solid currentColor;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) translateY(-2px);
  flex: none;
}
@media (min-width: 900px) {
  .assure { font-size: 13px; justify-content: center; }
}

/* ------------------------------------------------------------- chips */

.chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 8px 0 3px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
}
.chip[aria-current="page"] {
  border-color: var(--black);
  border-width: 2px;
  padding: 8px 15px;
}

/* ------------------------------------------------- lightning deals row */

.deals-head, .section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 9px;
  flex-wrap: wrap;
}
.deals-head h2, .section-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
@media (min-width: 700px) {
  .deals-head h2, .section-head h2 { font-size: 21px; }
  .deals-head, .section-head { margin: 22px 0 10px; }
}
.deals-head h2 { color: var(--price); }
.section-head h2 { color: var(--orange); }

.deals-head .clock {
  background: var(--black);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.deals-head .more { margin-left: auto; color: var(--grey); font-size: 20px; }
.section-head .count { margin-left: auto; color: var(--grey); font-size: 12px; }

/*  Fixed column width — with 1fr, three deals stretched into three
    enormous cards on a wide screen. */
.deals-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 150px;
  gap: var(--gap);
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.deals-strip::-webkit-scrollbar { display: none; }
@media (min-width: 700px)  { .deals-strip { grid-auto-columns: 175px; } }
@media (min-width: 1100px) { .deals-strip { grid-auto-columns: 195px; } }

/* ------------------------------------------------------------- cards */

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
@media (min-width: 400px)  { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 560px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px)  { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

.card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
@media (hover: hover) {
  .card { transition: box-shadow .15s ease; }
  .card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.13); }
}

.thumb {
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  background: #EFEFEF;
  font-size: clamp(30px, 9vw, 46px);
  font-weight: 800;
  color: #C8C8C8;
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.flag {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--price);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 6px;
  border-bottom-right-radius: var(--radius);
}
.flag-deal {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #FB4A11, #FB7701);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 6px;
  text-align: center;
}

.card-body {
  padding: 7px 8px 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.card-name {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  word-break: break-word;
}
@media (min-width: 760px) { .card-name { font-size: 13px; } }

.price-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: auto;
}
.price {
  font-size: 17px;
  font-weight: 800;
  color: var(--price);
  letter-spacing: -.02em;
}
@media (min-width: 760px) { .price { font-size: 19px; } }
.was { font-size: 11.5px; color: var(--grey-light); }
.was b { font-weight: 400; }
.was s { text-decoration: line-through; }

.rating { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--grey); }
.stars { color: #FFA800; letter-spacing: -1px; }
.sold { font-size: 11.5px; color: var(--grey); }

.btn {
  display: inline-block;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 20px;
  cursor: pointer;
  text-align: center;
  min-height: 44px;             /* comfortable touch target */
}
.btn:hover { background: var(--orange-dark); }
.btn[disabled] { background: #C9C9C9; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 12px; font-size: 13px; min-height: 38px; }

/* -------------------------------------------------------- product page */

.pdp {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  display: grid;
  gap: 18px;
  margin: 10px 0 22px;
}
/* Photo beside the details from tablet width up, so on an iPad the price
   and Add to basket are on screen without scrolling past the photo. */
@media (min-width: 700px) {
  .pdp {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 16px;
  }
}
@media (min-width: 860px) {
  .pdp { gap: 32px; padding: 22px; }
}
.pdp-media {
  aspect-ratio: 1;
  max-width: 560px;
  width: 100%;
  border-radius: var(--radius);
  background: #EFEFEF;
  display: grid;
  place-items: center;
  font-size: clamp(56px, 16vw, 96px);
  font-weight: 800;
  color: #C8C8C8;
  overflow: hidden;
}
.pdp h1 { font-size: 18px; font-weight: 600; line-height: 1.35; margin: 0 0 8px; }
@media (min-width: 760px) { .pdp h1 { font-size: 21px; } }
.pdp-price { display: flex; align-items: baseline; gap: 9px; margin: 13px 0; flex-wrap: wrap; }
.pdp-price .price { font-size: clamp(26px, 7vw, 34px); }

.stock-note { font-size: 13px; color: var(--price); font-weight: 700; }

.spec { border-collapse: collapse; width: 100%; margin-top: 16px; font-size: 13px; }
.spec th, .spec td {
  text-align: left;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.spec th { color: var(--grey); font-weight: 400; width: 38%; }

.variants { display: flex; flex-wrap: wrap; gap: 8px; margin: 13px 0; }
.variant {
  padding: 10px 15px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  min-height: 42px;
}
.variant[aria-pressed="true"] { border-color: var(--orange); border-width: 2px; padding: 9px 14px; }
.variant[disabled] { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

/* -------------------------------------------------------------- basket */

.basket-layout { display: grid; gap: 14px; align-items: start; }
@media (min-width: 900px) {
  .basket-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
  .basket-layout .totals { position: sticky; top: 84px; }
}

.panel { background: var(--card); border-radius: var(--radius); padding: var(--pad); }

.basket-line {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
@media (min-width: 700px) { .basket-line { grid-template-columns: 78px minmax(0, 1fr) auto; gap: 14px; } }
.basket-line .thumb { aspect-ratio: 1; border-radius: 6px; font-size: 22px; }
.basket-line a { font-size: 13px; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; }
.qty button {
  width: 34px; height: 34px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 17px; line-height: 1;
}
.qty span { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }

.totals { background: var(--card); border-radius: var(--radius); padding: var(--pad); }
.totals dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 12px; }
.totals dt { color: var(--grey); font-size: 13px; }
.totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.totals .grand dt, .totals .grand dd {
  border-top: 1px solid var(--line);
  padding-top: 11px;
  font-size: 18px;
  font-weight: 800;
  color: var(--price);
}
.totals .save dd { color: var(--green); }

.nudge {
  background: #FFF3E8;
  border: 1px solid #FFD9B5;
  color: var(--price);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------- empty */

.empty {
  background: var(--card);
  border-radius: var(--radius);
  padding: 40px 18px;
  text-align: center;
}
.empty h2 { font-size: 17px; margin: 0 0 6px; }
.empty p { margin: 0 0 18px; color: var(--grey); }

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

.foot {
  background: #fff;
  border-top: 1px solid var(--line);
  margin-top: 28px;
  padding: 24px 0 32px;
  font-size: 13px;
}
.foot .wrap { display: grid; gap: 18px; }
@media (min-width: 700px) { .foot .wrap { grid-template-columns: 2fr 1fr 1fr; gap: 24px; } }
.foot h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.foot a { color: var(--grey); }
.foot a:hover { color: var(--price); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 170%);
  background: rgba(0,0,0,.88);
  color: #fff;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  max-width: calc(100% - 32px);
  text-align: center;
  transition: transform .26s cubic-bezier(.2,.9,.3,1);
  z-index: 60;
}
.toast.show { transform: translate(-50%, 0); }

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


/* ============================================================= basket v2 */

.ship-bar {
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.ship-bar p { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--price); }
.ship-bar p.won { color: var(--green); }
.ship-bar .track { height: 6px; background: #EDEDED; border-radius: 99px; overflow: hidden; }
.ship-bar .track i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #FB4A11, #FB7701);
  transition: width .3s ease;
}

.select-all {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600;
  padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.panel-h { font-size: 14px; margin: 0 0 8px; }

.basket-line {
  display: grid;
  grid-template-columns: auto 62px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.basket-line.saved { grid-template-columns: 62px minmax(0, 1fr) auto; }
.basket-line.off { opacity: .5; }
.basket-line:last-child { border-bottom: 0; }
@media (min-width: 700px) {
  .basket-line { grid-template-columns: auto 78px minmax(0, 1fr) auto; gap: 14px; }
  .basket-line.saved { grid-template-columns: 78px minmax(0, 1fr) auto; }
}
.basket-line .pick { width: 18px; height: 18px; margin-top: 22px; accent-color: var(--orange); }
.line-main a { font-size: 13px; font-weight: 500; }
.line-price { text-align: right; }
.line-price .price { font-size: 15px; }

.drop { font-size: 11.5px; color: var(--price); font-weight: 700; margin-top: 3px; }

.line-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.linkbtn {
  border: 0; background: none; padding: 4px 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--grey); text-decoration: underline;
}
.linkbtn:hover { color: var(--price); }

.coupon { display: flex; gap: 7px; margin-bottom: 10px; }
.coupon input {
  flex: 1; min-width: 0;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 14px; font: inherit; font-size: 14px; min-height: 40px;
}
.coupon input:focus { outline: none; border-color: var(--orange); }
.coupon-msg { margin: 0 0 10px; font-size: 12px; min-height: 1em; }
.coupon-msg.bad { color: var(--price); font-weight: 600; }

/* Sticky mobile checkout bar — desktop uses the sidebar instead. */
.checkout-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 10px var(--pad);
  margin: 12px calc(var(--pad) * -1) 0;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  z-index: 25;
}
.checkout-bar b { font-size: 19px; color: var(--price); display: block; }
@media (min-width: 900px) { .checkout-bar { display: none; } }

/* ------------------------------------------------------------ checkout */

.checkout { display: grid; gap: 14px; align-items: start; }
@media (min-width: 900px) {
  .checkout { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
  .checkout .totals { position: sticky; top: 84px; }
}

.checkout-main { display: grid; gap: 14px; }

.checkout label {
  display: block;
  font-size: 13px; font-weight: 600;
  margin-bottom: 10px;
}
.checkout label .opt { color: var(--grey-light); font-weight: 400; }

.checkout input {
  display: block; width: 100%;
  margin-top: 5px; padding: 10px 12px;
  font: inherit; font-size: 14px; font-weight: 400;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line); border-radius: 8px;
}
.checkout input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(251, 119, 1, .15);
}
.checkout input[readonly] { background: #F5F5F5; color: var(--grey); }
.checkout input::placeholder { color: var(--grey-light); }

.field-row { display: grid; gap: 0 12px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

#payment-element { margin-top: 4px; }

.sum-line {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--grey);
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.sum-line:last-of-type { margin-bottom: 12px; }

/* Hidden until the checkout handler puts a message in it, so an empty box
   never takes up space or gets announced by a screen reader. */
.err-msg { display: none; margin: 0; }
.err-msg.show {
  display: block;
  padding: 11px 13px;
  font-size: 13px; font-weight: 600;
  color: #8A1B0E;
  background: #FDECEA;
  border: 1px solid #F5C4BD; border-radius: 8px;
}

/* --------------------------------------------------------- hero slides */

.hero { margin: 0 0 18px; }

/* Scroll-snap carousel. No script: the browser does the paging, which means
   it still works with JS off and respects the platform's own scroll physics. */
.hero-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-track:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.hero-slide { scroll-snap-align: center; }
.hero-slide a { display: block; }
.hero-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--card);
}
@media (min-width: 700px) {
  .hero-slide img { aspect-ratio: 3 / 1; }
}

.hero-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.hero-dot {
  width: 26px; height: 16px;
  display: grid; place-items: center;
}
.hero-dot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #C9C9C9;
}
.hero-dot:hover::before { background: var(--orange); }
.hero-dot:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

/* Available to screen readers, invisible on screen. */
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Uploaded product photos sit inside the existing .thumb square. */
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (prefers-reduced-motion: reduce) {
  .hero-track { scroll-behavior: auto; }
}

/* ------------------------------------------------- announcement bar */

.announce {
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.announce .wrap { padding: 8px var(--pad); }
.announce a { color: #fff; text-decoration: underline; }
.announce a:hover { color: var(--orange); }

/* A shop with an uploaded logo instead of the text wordmark.
   The plate behind it is kept, unlike an earlier version of this rule which
   set background:none. The masthead is the brand colour, and a logo supplied
   in that same colour then disappears into it — which is exactly what
   happened here. A neutral plate means any logo reads, whatever its ink. */
.wordmark.logo {
  display: inline-flex; align-items: center;
  padding: 2px 9px; background: #fff;
}

/* The cap is max-height, not height: an uploaded logo is whatever shape the
   shop gave us, and the masthead has to survive all of them. Both axes are
   capped and both are auto, so the image scales down inside the box on its
   own aspect ratio and can never grow the fixed .wordmark cell around it.
   A 871x763 upload rendering at natural size is what made the header 800px
   tall; nothing here lets an image dictate that measurement again. */
.wordmark.logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: 32px;
  max-width: 170px;
  object-fit: contain;
}
@media (min-width: 700px) { .wordmark.logo img { max-height: 40px; } }

.foot-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 30px;
  max-width: 170px;
  object-fit: contain;
  margin: 0 0 9px;
}

/* ------------------------------------------------------- cms pages */

.cms { max-width: 68ch; margin: 0 auto; padding: 4px 0 24px; }
.cms h1 { font-size: 24px; margin: 0 0 14px; }
.cms h2 { font-size: 19px; margin: 26px 0 8px; }
.cms h3 { font-size: 16px; margin: 20px 0 6px; }
.cms h4 { font-size: 14px; margin: 18px 0 6px; }
.cms p, .cms li { font-size: 15px; line-height: 1.65; color: var(--ink); }
.cms ul, .cms ol { padding-left: 22px; margin: 0 0 14px; }
.cms li { margin-bottom: 5px; }
.cms a { color: var(--price); text-decoration: underline; }

/* --------------------------------------------------- payment methods */

.pay-methods { display: grid; gap: 8px; }

.pay-method {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
  background: #fff;
}
.pay-method:has(input:checked) {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(251, 119, 1, .16);
}
.pay-method input { margin-top: 2px; accent-color: var(--orange); flex: none; }
.pay-method .pay-body { display: block; }
.pay-method b { display: block; font-size: 14px; }
.pay-method small { display: block; color: var(--grey); font-size: 12.5px; margin-top: 2px; }
.pay-extra { color: var(--price); font-weight: 700; margin-left: 4px; }

#stripe-panel[hidden] { display: none; }
#stripe-panel { margin-top: 14px; }

/* Bank details on the order confirmation. */
.bank-details {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
  margin: 10px 0 0; font-size: 14px;
}
.bank-details dt { color: var(--grey); }
.bank-details dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.bank-ref {
  display: inline-block; margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--page); border: 1px dashed var(--line);
  border-radius: 6px; padding: 2px 8px;
}

/* ------------------------------------------------------- pdp gallery */

.gallery { display: grid; gap: 10px; }
@media (min-width: 860px) {
  /* Thumbnail rail beside the image on desktop; it becomes a horizontal
     scroll strip below the image on narrow screens. */
  .gallery { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "rail stage"; }
  .gallery-stage { grid-area: stage; }
  .gallery-rail  { grid-area: rail; }
}

.gallery-stage {
  position: relative; aspect-ratio: 1; width: 100%; max-width: 560px;
  border-radius: var(--radius); background: #EFEFEF; overflow: hidden;
}
.gallery-main {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .18s ease;
}
.gallery-main.on { opacity: 1; }

.gallery-rail {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
@media (min-width: 860px) {
  .gallery-rail { flex-direction: column; overflow-x: visible; overflow-y: auto; max-height: 560px; }
}
.gallery-thumb {
  flex: 0 0 auto; width: 60px; height: 60px; padding: 0; cursor: pointer;
  border: 1.5px solid var(--line, #E3E3E3); border-radius: 8px;
  background: #EFEFEF; overflow: hidden; scroll-snap-align: start;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb.on { border-color: var(--orange); border-width: 2px; }
.gallery-thumb:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.gallery-hint { font-size: 11.5px; color: var(--grey-light); margin: 2px 0 0; }
@media (hover: none) { .gallery-hint { display: none; } }
.pdp-video { display: block; width: 100%; max-height: 520px; margin-top: 10px; border-radius: 10px; background: #000; }

/* --------------------------------------------------- option swatches */

.opt-axis { margin: 15px 0; }
.opt-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 7px; }
.opt-name { font-size: 13px; font-weight: 700; }
.opt-chosen { font-size: 13px; color: var(--grey); }

.opt-values { display: flex; flex-wrap: wrap; gap: 8px; }
/* Sizes read as a grid of equal targets rather than a ragged row. */
.opt-values.opt-size { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }

.opt-val {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  padding: 9px 13px; min-height: 40px; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--line, #E3E3E3);
  border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600;
}
.opt-val:hover:not([disabled]) { border-color: var(--grey); }
.opt-val.on { border-color: var(--orange); border-width: 2px; padding: 8px 12px; }
.opt-val:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Out of stock stays visible and struck through. Hiding it makes a shopper
   think the size was never made, and they leave instead of waiting. */
.opt-val.out, .opt-val[disabled] {
  opacity: .45; cursor: not-allowed; text-decoration: line-through;
}
.opt-val.out .sw-chip, .opt-val.out .sw-img { filter: grayscale(1); }

.sw-chip {
  width: 20px; height: 20px; border-radius: 50%; background: var(--sw, #DDD);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); flex: 0 0 auto;
}
.sw-img { width: 26px; height: 26px; border-radius: 5px; object-fit: cover; flex: 0 0 auto; }
.sw-label { white-space: nowrap; }

.fit-note { font-size: 13px; color: var(--ink-soft); margin: 12px 0 0; }
.stock-line { margin: 12px 0; font-size: 13px; }
.in-stock { color: #1E7B34; font-weight: 700; }
.no-stock { color: var(--grey); font-weight: 700; }
.pdp-add { margin: 14px 0 0; }
.pdp-blurb { margin: 0; color: var(--ink-soft); }
.pdp-flag { position: static; border-radius: 4px; }

/* -------------------------------------------------------- delivery */

.delivery { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line, #E3E3E3); }
.delivery h2 { font-size: 14px; font-weight: 700; margin: 0 0 9px; }
.delivery-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.delivery-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 13px; }
.delivery-list .d-name { font-weight: 600; }
.delivery-list .d-price { text-align: right; font-weight: 700; }
.delivery-list .d-price.free { color: #1E7B34; }
.delivery-list .d-when { grid-column: 1 / -1; color: var(--grey); font-size: 12.5px; }
.delivery-threshold {
  margin: 11px 0 0; padding: 9px 11px; border-radius: 8px;
  background: var(--sand, #FBF6EE); font-size: 12.5px;
}
.delivery-note { margin: 9px 0 0; font-size: 11.5px; color: var(--grey-light); }

/* ------------------------------------------------------ suggestions */

.suggest { margin: 0 0 2.4rem; }
.suggest h2 { font-size: var(--step-1, 19px); margin: 0 0 12px; }
.suggest-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.suggest-card {
  display: grid; gap: 5px; text-decoration: none; color: inherit;
  background: var(--card); border-radius: var(--radius); padding: 9px;
}
.suggest-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.suggest-img {
  aspect-ratio: 1; border-radius: 8px; background: #EFEFEF; overflow: hidden;
  display: grid; place-items: center;
}
.suggest-img img { width: 100%; height: 100%; object-fit: cover; }
.suggest-ph { font-size: 34px; font-weight: 800; color: #C8C8C8; }
.suggest-name {
  font-size: 12.5px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.suggest-price { font-weight: 800; font-size: 14px; color: var(--price); }

.pdp-about { max-width: 62ch; margin-bottom: 2.4rem; }
.pdp-about h2 { font-family: Fraunces, Georgia, serif; font-size: var(--step-1, 19px); }
.pdp-about p { color: var(--ink-soft); }

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

.foot-top { display: grid; gap: 22px; }
@media (min-width: 700px) { .foot-top { grid-template-columns: 1.4fr repeat(auto-fit, minmax(120px, 1fr)); } }
.foot-brand h3, .foot-col h3 { font-size: 13px; margin: 0 0 9px; }
.foot-tagline { margin: 0; max-width: 38ch; color: var(--grey); }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }

.foot-social { list-style: none; display: flex; gap: 9px; margin: 13px 0 0; padding: 0; }
.foot-social a {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.22); color: inherit;
}
.foot-social a:hover { border-color: currentColor; }
.foot-social svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.foot-social svg .fill { fill: currentColor; stroke: none; }

.foot-pay { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 16px; }
.foot-pay-label { font-size: 11.5px; color: var(--grey); }
.foot-pay ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.foot-pay li {
  font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 5px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
}

.foot-legal { padding-top: 16px; margin-top: 16px; border-top: 1px solid rgba(255,255,255,.14); }
.foot-company, .foot-copy { margin: 0 0 5px; font-size: 11.5px; color: var(--grey); }

/* ============================================================ main nav */

.mainnav { background: var(--card); border-bottom: 1px solid var(--line, #E8E3DC); }
.mainnav-inner { display: flex; align-items: center; gap: 10px; }

/* -------- hamburger: the only nav control below 700px -------- */
.navtoggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 12px; margin: 6px 0; cursor: pointer;
  background: none; border: 1px solid var(--line, #E8E3DC);
  border-radius: var(--radius); font: inherit; font-size: 14px; font-weight: 700;
  color: inherit; min-height: 42px;
}
.navtoggle-bars, .navtoggle-bars::before, .navtoggle-bars::after {
  display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px;
}
.navtoggle-bars { position: relative; }
.navtoggle-bars::before, .navtoggle-bars::after { content: ""; position: absolute; left: 0; }
.navtoggle-bars::before { top: -5px; }
.navtoggle-bars::after  { top: 5px; }
@media (min-width: 700px) { .navtoggle { display: none; } }

/* -------- horizontal bar from 700px up -------- */
.menubar { display: none; list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px) {
  .menubar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 2px; }
}
.menubar > li { position: relative; display: flex; align-items: center; }
.menubar > li > a {
  display: block; padding: 12px 12px; font-size: 14px; font-weight: 600;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.menubar > li > a:hover,
.menubar > li > a:focus-visible { color: var(--orange); }
.menubar > li > a[aria-current="page"] { color: var(--orange); box-shadow: inset 0 -3px 0 var(--orange); }

.sub-toggle {
  display: inline-flex; align-items: center; padding: 4px 8px 4px 0;
  background: none; border: 0; cursor: pointer; color: inherit;
}
.caret { width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; margin-top: 3px; }

/* The submenu opens on hover, on keyboard focus anywhere inside it, and when
   the toggle script sets aria-expanded. The :focus-within rule is what keeps
   it usable by keyboard even if the script never loads. */
.submenu {
  position: absolute; top: 100%; left: 0; z-index: 40; min-width: 210px;
  list-style: none; margin: 0; padding: 6px;
  background: var(--card); border: 1px solid var(--line, #E8E3DC);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
}
.has-sub:hover > .submenu,
.has-sub:focus-within > .submenu,
.has-sub [aria-expanded="true"] ~ .submenu {
  opacity: 1; visibility: visible; transform: none;
}
.submenu a {
  display: block; padding: 9px 11px; border-radius: 7px;
  font-size: 13.5px; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.submenu a:hover, .submenu a:focus-visible { background: var(--sand, #FBF6EE); color: var(--orange); }

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

/* ------------------------------------------------------ mobile drawer */

.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 60; }
.drawer {
  position: fixed; inset: 0 auto 0 0; z-index: 61;
  width: min(86vw, 330px); overflow-y: auto;
  background: var(--card); padding: 14px 16px 28px;
  box-shadow: 2px 0 22px rgba(0,0,0,.16);
}
.drawer[hidden], .drawer-backdrop[hidden] { display: none; }
@media (min-width: 700px) { .drawer, .drawer-backdrop { display: none !important; } }

.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.drawer-title { font-size: 17px; font-weight: 800; }
.drawer-x { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: inherit; padding: 4px 8px; }

.drawer-nav { display: block; padding: 10px 0; border-top: 1px solid var(--line, #E8E3DC); }
.drawer-nav:first-of-type { border-top: 0; }
.drawer-heading { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--grey); margin: 0 0 6px; }
.drawer-link {
  display: flex; align-items: center; gap: 8px; padding: 11px 4px;
  font-size: 15px; color: var(--ink); text-decoration: none; min-height: 44px;
}
.drawer-link.sub { padding-left: 18px; font-size: 14px; color: var(--ink-soft); }
.drawer-link:hover, .drawer-link:focus-visible { color: var(--orange); }
.drawer-count {
  margin-left: auto; background: var(--orange); color: #fff; font-size: 11.5px;
  font-weight: 800; border-radius: 99px; padding: 2px 8px;
}

.drawer-group > summary {
  list-style: none; cursor: pointer; padding: 11px 4px; min-height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 600;
}
.drawer-group > summary::-webkit-details-marker { display: none; }
.drawer-group > summary::after {
  content: ""; width: 0; height: 0; border: 5px solid transparent;
  border-top-color: currentColor; margin-top: 4px;
}
.drawer-group[open] > summary::after { transform: rotate(180deg); margin-top: -4px; }

/* =====================================================================
   RESPONSIVE HARDENING
   Everything below is written to hold from 320px to 2560px. It is kept as
   one block at the end of the file so the rules that override earlier
   defaults are all in one place rather than scattered through the sheet.
   ===================================================================== */

/* --------------------------------------------------- visually hidden ---
   .sr-only was used in six places (the hamburger, the drawer close, the
   submenu toggles, the footer social labels, the out-of-stock note) and was
   never defined, so all of that text was rendering on screen and stretching
   the controls it sat inside. Kept as its own rule alongside .vh rather than
   folded into it, because both names are now in use. */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------ long strings ---
   A product name with no spaces, a customer's email, a tracking URL — any
   of these will otherwise set the minimum width of the box they sit in and
   push the whole page sideways. anywhere (rather than break-word) also
   lets the browser count the break when working out min-content width,
   which is the part that actually stops a grid or table blowing out. */

.card-name, .card-name a,
.line-main a, .line-main,
.suggest-name,
.pdp h1, .pdp-blurb, .pdp-about p,
.spec td, .spec th,
.cms, .cms p, .cms li, .cms a, .cms td,
.foot a, .foot-tagline, .foot-company,
.bank-details dd, .bank-ref,
.totals dt, .totals dd,
.empty p, .empty small,
.err-msg {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* The re-statement of the logo caps that used to sit here has been removed.
   It read `max-width: 100%; height: auto`, which is not a cap at all: same
   selector as the real rule above but later in the file, so it won, and the
   header rendered the logo at its full natural size. Nothing needs to be
   re-stated anyway — `.wordmark.logo img` and `.foot-logo` both out-specify
   the global `img` rule, so their own caps already win wherever they sit. */

/* ------------------------------------------------------- tap targets ---
   44px is the floor everywhere, including the controls that used to be 34
   or 38. Where a control has to stay visually small (the search glyph, the
   quantity steppers) the box is grown rather than the ink. */

/* Fixed height, not min-height. This is the cell the masthead measures from,
   so it has to be one number the content cannot argue with: 44px whether it
   holds a text wordmark or a logo, which keeps the header identical between
   the two and keeps it at the 44px tap-target floor. The logo caps above
   (40px desktop, 32px mobile) both clear the 40px content box left inside
   it, so the image always fits rather than stretching the cell. */
.wordmark {
  display: inline-flex;
  align-items: center;
  height: 44px;
}
.wordmark.logo { padding-block: 2px; }

.search { padding: 3px 3px 3px 14px; }
.search input { padding-block: 11px; }
.search button {
  width: 44px;
  height: 44px;
  min-width: 44px;
}

.basket-link { min-height: 44px; padding: 8px; }

.chip { min-height: 44px; }
.chip[aria-current="page"] { min-height: 44px; }

.btn-sm { min-height: 44px; }

.navtoggle { min-height: 44px; }
.drawer-x { min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; }
.sub-toggle { min-width: 44px; min-height: 44px; justify-content: center; }

.opt-val { min-height: 44px; }
.opt-val.on { min-height: 44px; }

.qty button { width: 44px; height: 44px; font-size: 19px; }
.qty span { min-width: 3ch; }

.linkbtn { min-height: 44px; display: inline-flex; align-items: center; }

.foot-social a { width: 44px; height: 44px; }

.hero-dot { width: 44px; height: 44px; }

.gallery-thumb { width: 60px; height: 60px; }

/* The card title is the main way into a product from a grid, so the link —
   not just the heading around it — carries the target. The line clamp moves
   onto the anchor with it so the two stay the same box. */
.card-name {
  display: block;
  min-height: 0;
  overflow: visible;
  -webkit-line-clamp: none;
}
.card-name a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 44px;
}

/* A bare checkbox cannot be grown to 44px without looking like a button, so
   the basket rows wrap theirs in a label that carries the target instead.
   The input keeps its own aria-label; the label only enlarges the hit area. */
.pick-wrap {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  margin-top: 4px;
  cursor: pointer;
}
.basket-line .pick { width: 20px; height: 20px; margin: 0; }
.select-all { min-height: 44px; align-items: center; padding-bottom: 0; cursor: pointer; }
.select-all input { width: 20px; height: 20px; margin: 0; accent-color: var(--orange); }

/* --------------------------------------------------- checkout fields ---
   Below 560px every field is its own row, and every input is 16px so iOS
   does not zoom the page in the moment the keyboard opens — a zoom it never
   undoes, which leaves the rest of the form off to the right. */

@media (max-width: 559px) {
  .field-row { grid-template-columns: minmax(0, 1fr); }
}

.checkout input,
.checkout select,
.checkout textarea,
.coupon input {
  font-size: 16px;
  min-height: 44px;
}
.checkout input[readonly] { font-size: 16px; }
.pay-method { min-height: 44px; }
.pay-method input { width: 20px; height: 20px; }

/* --------------------------------------------- sticky basket bar ---
   position:sticky keeps the bar over whatever is scrolling under it for as
   long as main is in view, so the container has to reserve its height or
   the last basket row and the last row of suggestions sit underneath it,
   permanently unreachable. The height is a variable so the padding and the
   bar can never drift apart. */

/* The bar's own min-height plus its top border, rounded up: the reserve has
   to be at least what the bar actually measures, never a pixel less. */
:root { --checkout-bar-h: 72px; }

.checkout-bar {
  padding: 10px calc(var(--pad) + env(safe-area-inset-left, 0px))
           calc(10px + env(safe-area-inset-bottom, 0px))
           calc(var(--pad) + env(safe-area-inset-right, 0px));
  min-height: var(--checkout-bar-h);
  flex-wrap: wrap;
}
.checkout-bar .btn { flex: none; }

@media (max-width: 899px) {
  /* The bar's containing block is main, so it stays pinned over the
     suggestion grid as well as the basket itself. Both get the reserve. */
  main.wrap:has(.checkout-bar) {
    padding-bottom: calc(var(--checkout-bar-h) + env(safe-area-inset-bottom, 0px));
  }
  .basket-layout:has(~ .checkout-bar) {
    padding-bottom: calc(var(--checkout-bar-h) + env(safe-area-inset-bottom, 0px));
  }
}

/* Browsers without :has() still get a reserve, just an unconditional one at
   the foot of every storefront page. Cheap, and invisible. */
@supports not selector(:has(*)) {
  @media (max-width: 899px) {
    main.wrap { padding-bottom: calc(var(--checkout-bar-h) + env(safe-area-inset-bottom, 0px)); }
  }
}

/* ------------------------------------------------------- carousels ---
   Delivery options and the suggestion strips page sideways on a phone
   rather than stacking into a column two screens long. They scroll inside
   their own box, so the page itself never moves. */

.delivery-list,
.suggest-grid {
  scrollbar-width: none;
}
.delivery-list::-webkit-scrollbar,
.suggest-grid::-webkit-scrollbar { display: none; }

@media (max-width: 699px) {
  .suggest-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .suggest-card {
    flex: 0 0 clamp(132px, 44%, 190px);
    scroll-snap-align: start;
    min-width: 0;
  }

  .delivery-list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 4px;
  }
  .delivery-list li {
    flex: 0 0 min(72%, 250px);
    scroll-snap-align: start;
    align-content: start;
    background: var(--page);
    border-radius: 8px;
    padding: 9px 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .delivery-list,
  .suggest-grid,
  .deals-strip,
  .chips { scroll-behavior: auto; }
}

/* ---------------------------------------------------------- gallery ---
   At 320px the stage is the width of the card and nothing more; the rail
   scrolls under it. Neither may set a minimum the viewport cannot meet. */

.gallery { min-width: 0; }
.gallery-stage { max-width: min(560px, 100%); }
.gallery-rail { max-width: 100%; scrollbar-width: none; }
.gallery-rail::-webkit-scrollbar { display: none; }
.pdp-media { max-width: min(560px, 100%); }
.pdp, .pdp-info { min-width: 0; }

/* Swatch grids wrap; they never scroll a row of colours off the side. */
.opt-values { flex-wrap: wrap; max-width: 100%; }
.opt-values.opt-size {
  grid-template-columns: repeat(auto-fill, minmax(clamp(56px, 18vw, 62px), 1fr));
}
.sw-label { white-space: normal; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ misc ---- */

/* The spec table is two columns of prose, so it wraps rather than scrolls. */
.spec { table-layout: fixed; }

/* Totals sit in a two-column dl; the label column must be allowed to wrap
   or a long coupon code pushes the amount off the panel. */
.totals dl { grid-template-columns: minmax(0, 1fr) auto; }

/* At 2560 the wrap is already capped at 1560. Prose inside it is capped
   again so a paragraph never runs to a full 1560px measure. */
.cms { max-width: min(68ch, 100%); }
.pdp-about { max-width: min(62ch, 100%); }
.foot-tagline { max-width: min(38ch, 100%); }

/* ------------------------------------------------- basket at 320px ----
   The 44px checkbox target and the 44px quantity steppers together set a
   real minimum for the row. Below 420px the row is retuned around them —
   narrower thumb, tighter gaps, a price that may wrap — so the line still
   fits inside 320px rather than setting the width of the whole page. */

@media (max-width: 419px) {
  .basket-layout { grid-template-columns: minmax(0, 1fr); }

  .basket-line {
    grid-template-columns: 44px 52px minmax(0, 1fr) minmax(0, auto);
    gap: 8px;
  }
  .basket-line.saved { grid-template-columns: 52px minmax(0, 1fr) minmax(0, auto); }
  .basket-line .thumb { font-size: 18px; }
  .line-price .price { font-size: 14px; }
  .line-price { min-width: 0; }
  .qty span { min-width: 2ch; }
  .line-actions { gap: 8px; }
}

/* The product name is the link out of a basket row, so it carries a target
   of its own rather than relying on the thumbnail beside it. */
.line-main > a {
  display: block;
  min-height: 44px;
  padding-block: 3px;
}

/* =====================================================================
   Categories page — department rail, round tiles, trending grid
   ===================================================================== */

.cat-browse {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  margin: 0 calc(var(--pad) * -1);
  background: var(--card);
  min-height: 60vh;
}
@media (min-width: 560px) { .cat-browse { grid-template-columns: 150px minmax(0, 1fr); } }
@media (min-width: 900px) {
  .cat-browse {
    grid-template-columns: 210px minmax(0, 1fr);
    margin: 0;
    border-radius: var(--radius);
    /* clip, not hidden: hidden would make this the rail's sticky container. */
    overflow: clip;
  }
}

/* The rail scrolls on its own and stays put while the panel scrolls. */
.cat-rail {
  background: var(--page);
  position: sticky;
  /* app.js measures the sticky header into --masthead-h. */
  top: var(--masthead-h, 120px);
  align-self: start;
  max-height: calc(100vh - var(--masthead-h, 120px));
  /* dvh tracks the phone's address bar showing and hiding. */
  max-height: calc(100dvh - var(--masthead-h, 120px));
  overflow-y: auto;
  scrollbar-width: none;
}
/* On phones the tab bar covers the bottom of the screen: stop the rail
   above it, or the last departments can never be scrolled into view. */
@media (max-width: 699px) {
  .has-tabbar .cat-rail {
    max-height: calc(100vh - var(--masthead-h, 120px) - 57px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - var(--masthead-h, 120px) - 57px - env(safe-area-inset-bottom, 0px));
  }
}
.cat-rail::-webkit-scrollbar { display: none; }
.cat-rail a {
  display: block;
  padding: 14px 10px 14px 12px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink);
  border-left: 4px solid transparent;
}
@media (min-width: 560px) { .cat-rail a { font-size: 14px; padding-left: 14px; } }
.cat-rail a[aria-current="page"] {
  background: var(--card);
  border-left-color: var(--orange);
  font-weight: 700;
}
@media (hover: hover) { .cat-rail a:hover { color: var(--orange-dark); } }

.cat-panel { padding: 12px 10px 24px; min-width: 0; }
@media (min-width: 700px) { .cat-panel { padding: 16px 18px 28px; } }

.cat-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.cat-panel-head h1 { margin: 0; font-size: 17px; }
.cat-panel-head a { font-size: 13px; color: var(--grey); white-space: nowrap; }

.cat-tiles {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 6px;
}
@media (min-width: 700px)  { .cat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cat-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .cat-tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.cat-tiles a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.cat-tile-img {
  position: relative;
  width: 100%;
  max-width: 68px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--page);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--grey-light);
}
@media (min-width: 700px) { .cat-tile-img { max-width: 88px; } }
.cat-tile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.cat-hot {
  position: absolute;
  top: -4px;
  right: -6px;
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 2px 6px;
  border-radius: 999px;
  border: 2px solid var(--card);
}
.cat-tile-name {
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
}
@media (min-width: 560px) { .cat-tile-name { font-size: 13.5px; } }
@media (hover: hover) { .cat-tiles a:hover .cat-tile-name { color: var(--orange-dark); } }
.cat-tile-count {
  font-size: 11.5px;
  color: var(--grey-light);
  margin-top: -3px;
}
.cat-tile-img { box-shadow: 0 1px 3px rgba(0, 0, 0, .08); transition: transform .15s ease, box-shadow .15s ease; }
@media (hover: hover) {
  .cat-tiles a:hover .cat-tile-img { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
}
.trend-note { margin: -4px 0 12px; color: var(--grey-light); font-size: 13.5px; }

.trend-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  margin: 4px 0 10px;
}
.trend-head h2 { margin: 0; font-size: 17px; white-space: nowrap; }
.trend-sort { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--grey); }
@media (max-width: 559px) { .trend-sort label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.trend-sort select {
  font: inherit;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  background: var(--card);
  max-width: 150px;
  min-width: 0;
}

.trend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 760px)  { .trend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .trend-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .trend-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .trend-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.trend-card { min-width: 0; }
.trend-thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--page);
  border-radius: 6px;
  overflow: hidden;
  font-size: 32px;
  font-weight: 800;
  color: var(--grey-light);
}
.trend-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Round outlined "add" button beside the price, as on Temu. */
.trend-media { position: relative; }
.trend-add {
  margin-left: auto;
  align-self: center;
  flex: none;
  width: 38px;
  height: 32px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--card);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink);
}
.trend-add:hover { border-color: var(--orange); color: var(--orange); }
.trend-add svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trend-add:disabled { opacity: .5; }

.trend-body { padding: 6px 2px 4px; }
.trend-name {
  margin: 0 0 3px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trend-top { display: block; font-size: 12px; color: var(--orange-dark); font-weight: 600; margin-bottom: 2px; }
.trend-rating { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 3px; min-width: 0; }
.trend-rating .stars { font-size: 13px; color: var(--ink); letter-spacing: -.5px; }
.trend-sold { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--grey); white-space: nowrap; }
.trend-sold svg { width: 12px; height: 12px; fill: var(--orange); }
.trend-saved {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: var(--price);
  border-radius: 3px;
  padding: 1px 6px;
  margin-bottom: 4px;
}
.trend-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 5px; }
.trend-price .price { font-size: 17px; font-weight: 800; color: var(--price); }
.trend-was { font-size: 12px; color: var(--grey); }
.trend-oos { font-size: 12px; color: var(--price); font-weight: 600; }

/* =====================================================================
   Mobile tab bar
   ===================================================================== */

.tabbar { display: none; }

@media (max-width: 699px) {
  /* The basket moves from the header to the tab bar on phones, and the
     tab bar's "Categories" replaces the menu row. */
  .masthead .basket-link { display: none; }
  .has-tabbar .mainnav { display: none; }
  .masthead .wrap { grid-template-areas: "brand theme" "search search"; }

  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: stretch;
    background: var(--card);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbar > a,
  .tabbar > button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 6px 2px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 11.5px;
    color: var(--ink);
    cursor: pointer;
  }
  .tabbar svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tabbar [aria-current="page"] { color: var(--orange); font-weight: 600; }
  .tab-icon { position: relative; display: block; line-height: 0; }
  .tab-count {
    position: absolute;
    top: -6px;
    left: 15px;
    background: var(--price);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    min-width: 18px;
    padding: 3px 5px;
    border-radius: 999px;
    border: 2px solid var(--card);
    text-align: center;
  }
  .tab-count[hidden] { display: none; }
  .tabbar > a.tab-promo {
    flex: 1.15;
    align-self: center;
    min-height: 0;
    margin-right: 8px;
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--green);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
  }

  /* The basket's sticky "Checkout" bar rides on top of the tab bar. */
  .has-tabbar .checkout-bar { bottom: calc(57px + env(safe-area-inset-bottom, 0px)); }

  /* Room for the bar, so the footer's last line is not hidden under it. */
  body { padding-bottom: calc(57px + env(safe-area-inset-bottom, 0px)); }
  .toast { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* =====================================================================
   Product page — Temu-style layout
   ===================================================================== */

/* Phones: the photo runs edge to edge, swiped rather than picked from a
   thumbnail strip, with a "1/5" counter in the corner. */
.gallery-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  pointer-events: none;
}
@media (max-width: 699px) {
  .pdp { padding-top: 0; margin-top: 0; border-radius: 0; margin-inline: calc(var(--pad) * -1); }
  .gallery { margin-inline: -14px; }
  .gallery-stage { max-width: none; border-radius: 0; }
}
@media (max-width: 859px) {
  .gallery-rail, .gallery-hint { display: none; }
}
@media (min-width: 860px) { .gallery-count { display: none; } }

/* Lightning-deal strip above the price. */
.pdp-deal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(90deg, #FB4A11, #FB7701);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.pdp-deal-name { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; }
.pdp-deal svg { width: 16px; height: 16px; fill: #fff; }
.pdp-deal .countdown { font-variant-numeric: tabular-nums; font-weight: 800; }

/* Price first, then the title, as on the reference. */
.pdp-price { align-items: center; margin: 0 0 8px; }
.pdp-price .was { font-size: 14px; }
.pdp-off {
  background: var(--price);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 5px;
}
.pdp-off[hidden] { display: none; }
.pdp-sold { margin-left: auto; font-size: 13px; color: var(--grey); }
.pdp h1 { font-weight: 500; }

.pdp-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin: 0 0 10px;
  color: var(--ink);
}
.pdp-rating .stars { font-size: 15px; color: var(--ink); }
.pdp-rating span:last-child { color: var(--grey); text-decoration: underline; }

/* Delivery and shop promises, green-ticked. */
.pdp-promise {
  list-style: none;
  margin: 14px 0;
  padding: 4px 12px;
  border-radius: var(--radius);
  background: #F3FAF5;
  font-size: 13px;
}
.pdp-promise li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 0;
}
.pdp-promise li + li { border-top: 1px solid #DCEFE2; }
.pdp-promise li.ok b { color: var(--green); }
.pdp-promise small { display: block; color: var(--grey); font-size: 12px; margin-top: 1px; }
.pdp-promise .tick {
  flex: none;
  width: 6px;
  height: 11px;
  margin: 2px 4px 0 3px;
  border: solid var(--green);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.pdp-promise .tick.muted { border-color: var(--grey-light); }

/* Quantity stepper beside the add button. */
.pdp-add { display: flex; gap: 10px; align-items: stretch; margin: 14px 0 0; }
.pdp-add .btn { flex: 1; }
.pdp-qty {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  flex: none;
}
.pdp-qty button {
  width: 38px;
  height: 100%;
  min-height: 44px;
  border: 0;
  background: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--ink);
}
.pdp-qty input {
  width: 36px;
  border: 0;
  text-align: center;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  -moz-appearance: textfield;
  appearance: textfield;
}
.pdp-qty input::-webkit-inner-spin-button,
.pdp-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Sections below the fold: reviews, recommendations. */
.pdp-section {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  margin: 0 0 12px;
}
@media (min-width: 860px) { .pdp-section { padding: 20px 22px; } }
.pdp-section > h2 { font-size: 17px; margin: 0 0 12px; font-family: inherit; }
.pdp-section.pdp-about { max-width: none; }
.pdp-section.pdp-about p { margin: 0; }
.pdp-section .trend-grid { gap: 10px; }

.pdp-reviews-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.pdp-reviews-head h2 { font-size: 17px; margin: 0; }
.pdp-reviews .stars { color: var(--ink); }
.review { padding: 12px 0; border-top: 1px solid var(--line); }
.review header { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--grey); }
.review-who { font-weight: 700; color: var(--ink); }
.review-verified {
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--green);
}
.review h3 { font-size: 14px; margin: 6px 0 2px; }
.review p { margin: 4px 0 0; font-size: 13.5px; overflow-wrap: anywhere; }

/* Phone buy bar: basket, live price, big add button. */
.pdp-buybar { display: none; }
@media (max-width: 699px) {
  .pdp-buybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--card);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
  }
  .pdp-buybar-basket { position: relative; display: block; line-height: 0; padding: 4px; color: var(--ink); }
  .pdp-buybar-basket svg {
    width: 27px; height: 27px; fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  }
  .pdp-buybar .tab-count {
    position: absolute;
    top: -3px;
    left: 18px;
    background: var(--price);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    min-width: 18px;
    padding: 3px 5px;
    border-radius: 999px;
    border: 2px solid var(--card);
    text-align: center;
  }
  .pdp-buybar .tab-count[hidden] { display: none; }
  .pdp-buybar-price { font-size: 19px; }
  .pdp-buybar .btn { flex: 1; min-height: 46px; font-size: 16px; }

  /* The buy bar's basket link stands in for the menu row here. */
  .has-buybar .mainnav { display: none; }

  /* The inline button is still there for the stepper; the bar repeats it. */
  .has-buybar { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .has-buybar .toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* =====================================================================
   Desktop "Categories" mega menu
   ===================================================================== */

.mainnav-inner { position: relative; }
.menubar > li.mega { position: static; }
.mega-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--black);
  color: #fff;
  font: inherit;
  font-weight: 700;
  padding: 8px 16px;
  margin-left: 6px;
  cursor: pointer;
}
.mega-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); margin-top: -3px; }

.mega-panel {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  top: 100%;
  z-index: 50;
  max-width: 1100px;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  background: var(--card);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  overflow: hidden;
}
.mega-panel[hidden] { display: none; }

.mega-rail {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  max-height: min(72vh, 680px);
  overflow-y: auto;
  border-right: 1px solid var(--line);
}
.mega-rail a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 16px 9px 20px;
  font-size: 14px;
  color: var(--ink);
}
.mega-rail a::after { content: "\203A"; color: var(--grey-light); font-size: 16px; }
.mega-rail a.on { background: var(--page); font-weight: 700; }
.mega-rail a:hover, .mega-rail a:focus-visible { color: var(--orange-dark); }

.mega-body {
  max-height: min(72vh, 680px);
  overflow-y: auto;
  padding: 20px 24px;
}
.mega-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 20px 12px;
}
.mega-tiles a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.mega-img {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--page);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 26px;
  font-weight: 800;
  color: var(--grey-light);
}
.mega-img img { width: 100%; height: 100%; object-fit: cover; }
.mega-name { font-size: 13px; line-height: 1.3; color: var(--ink); }
.mega-tiles a:hover .mega-name { color: var(--orange-dark); }
.mega-all .mega-img { background: #FFF1E3; color: var(--orange); font-size: 34px; }

/* =====================================================================
   Homepage — department pictures, lightning deals, product grid
   ===================================================================== */

/* Departments: a sideways strip of round pictures; two rows on phones. */
.dept-row {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 4px 10px;
  margin: 10px 0 12px;
}
.dept-row ul {
  list-style: none;
  margin: 0;
  padding: 0 8px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: 78px;
  gap: 14px 8px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.dept-row ul::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .dept-row ul { grid-template-rows: auto; grid-auto-columns: 104px; gap: 10px; }
}
.dept-row li { scroll-snap-align: start; }
.dept-row a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.dept-img {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--page);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--grey-light);
}
@media (min-width: 900px) { .dept-img { width: 84px; height: 84px; } }
.dept-img img { width: 100%; height: 100%; object-fit: cover; }
.dept-name {
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 900px) { .dept-name { font-size: 13px; } }
@media (hover: hover) { .dept-row a:hover .dept-name { color: var(--orange-dark); } }

/* Lightning deals: orange header bar with the countdown, then a strip of
   cards each with a "% claimed" bar. */
.deals {
  background: var(--card);
  border-radius: var(--radius);
  overflow: clip;
  margin: 0 0 12px;
}
.deals-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(90deg, #FB4A11, #FB7701);
  color: #fff;
  padding: 10px 14px;
}
.deals-bar h2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}
.deals-bar svg { width: 18px; height: 18px; fill: #fff; }
.deals-ends { font-size: 13px; font-weight: 600; white-space: nowrap; }
.deals-ends .clock {
  background: #fff;
  color: var(--price);
  border-radius: 5px;
  padding: 2px 6px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
.deals .deals-strip { padding: 12px 14px 14px; gap: 10px; }
.deal-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.deal-img {
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  background: var(--page);
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--grey-light);
}
.deal-img img { width: 100%; height: 100%; object-fit: cover; }
.deal-name {
  font-size: 12.5px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deal-price { display: flex; align-items: baseline; gap: 6px; }
.deal-price b { color: var(--price); font-size: 16px; font-weight: 800; }
.deal-price s { color: var(--grey-light); font-size: 12px; }
.deal-claimed { font-size: 11.5px; color: var(--price); font-weight: 600; }
.deal-bar {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: #FFE1D2;
  overflow: hidden;
  margin-bottom: 2px;
}
.deal-bar i { display: block; height: 100%; background: var(--price); border-radius: 999px; }

/* The product grid on the homepage and listings uses the categories page's
   cards, on a white panel. */
.home-grid {
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px;
  gap: 14px 10px;
}
.home-head h2 { color: var(--ink); text-transform: none; letter-spacing: -.01em; }
@media (min-width: 1000px) {
  .home-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* =====================================================================
   Basket — Temu-style lines, delivery banner and order summary
   ===================================================================== */

.bk-head { margin: 12px 0 8px; }
.bk-head h1 { margin: 0; font-size: 20px; }
.bk-head h1 span { color: var(--grey); font-weight: 600; }

.bk-empty svg {
  width: 56px; height: 56px; fill: none; stroke: var(--grey-light);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  margin: 0 auto 8px; display: block;
}

/* Free-delivery banner: orange progress while short of it, green once won. */
.bk-ship {
  background: #FFF4E5;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 0 0 10px;
  color: var(--orange-dark);
  font-size: 13.5px;
}
.bk-ship p { margin: 0; }
.bk-ship .track { height: 5px; background: #FFE0BF; border-radius: 99px; overflow: hidden; margin-top: 8px; }
.bk-ship .track i { display: block; height: 100%; background: var(--orange); border-radius: 99px; }
.bk-ship.won { background: #E8F6ED; color: var(--green); }
.bk-ship .tick { display: inline-block; vertical-align: middle; margin-right: 8px; }
.bk-ship .tick, .bk-trust .tick {
  flex: none;
  width: 6px; height: 11px;
  border: solid currentColor; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) translateY(-2px);
  margin: 0 3px 0 2px;
}
.bk-ship:not(.won) .tick { display: none; }

.bk-panel { padding: 12px 14px; margin-bottom: 10px; }

.bl {
  display: grid;
  grid-template-columns: auto 92px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.bl:last-child { border-bottom: 0; }
.bl.saved { grid-template-columns: 92px minmax(0, 1fr); }
.bl.off .bl-img, .bl.off .bl-main { opacity: .5; }
@media (min-width: 700px) {
  .bl { grid-template-columns: auto 120px minmax(0, 1fr); gap: 16px; }
  .bl.saved { grid-template-columns: 120px minmax(0, 1fr); }
}
.bl .pick-wrap { width: 32px; margin-top: 24px; }
.bl .pick { width: 20px; height: 20px; margin: 0; accent-color: var(--orange); }
@media (min-width: 700px) { .bl .pick-wrap { margin-top: 38px; } }

.bl-img {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--page);
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--grey-light);
}
.bl-img img { width: 100%; height: 100%; object-fit: cover; }

.bl-main { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.bl-name {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bl-variant {
  background: var(--page);
  color: var(--grey);
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
}
.bl-urgent { font-size: 12px; font-weight: 700; color: var(--price); }
.bl-drop { font-size: 12px; font-weight: 600; color: var(--green); }
.bl-price { display: flex; align-items: baseline; gap: 7px; }
.bl-price .price { font-size: 17px; }
.bl-price .was { font-size: 12px; color: var(--grey-light); }

.bl-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 2px;
}
.bl-actions .qty { margin-right: auto; }
.bl-icon {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--grey);
}
.bl-icon:hover { background: var(--page); color: var(--ink); }
.bl-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Order summary. */
.bk-summary h2 { font-size: 17px; margin: 0 0 12px; }
/* No column gap, so the rule above the total runs unbroken. */
.bk-summary dl { column-gap: 0; }
.bk-summary dd { padding-left: 12px; }
.bk-summary dd.neg, .bk-summary dd.free { color: var(--green); }
.bk-saving {
  margin: 10px 0 0;
  padding: 7px 10px;
  border-radius: 6px;
  background: #E8F6ED;
  color: var(--green);
  font-size: 13px;
  text-align: center;
}
.bk-go { margin-top: 12px; min-height: 48px; font-size: 16px; }
.bk-go[disabled] { opacity: .5; cursor: not-allowed; }
.bk-trust {
  list-style: none;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 7px;
  font-size: 12.5px;
  color: var(--green);
  font-weight: 600;
}
.bk-trust li { display: flex; align-items: center; gap: 6px; }
.bk-pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--grey);
}
.bk-pay b {
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 7px;
}

/* Phone bar: total and saving on the left, the count in the button. */
.checkout-bar b { line-height: 1.1; }
.bk-bar-saving { display: block; font-size: 12px; font-weight: 600; color: var(--green); }

/* =====================================================================
   Checkout — Temu-style numbered cards, item strip and summary
   ===================================================================== */

.co-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 10px;
}
.co-head h1 { margin: 0; font-size: 20px; }
.co-secure {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--green);
}
.co-secure svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.co-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  margin: 0 0 12px;
}
.co-step {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* Delivery card. */
.co-ship {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid var(--orange);
  border-radius: 8px;
  background: #FFF9F3;
}
.co-ship .tick {
  flex: none;
  width: 6px; height: 11px;
  margin: 3px 4px 0 3px;
  border: solid var(--green); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.co-ship b { display: block; font-size: 14px; }
.co-ship small { display: block; color: var(--green); font-size: 12.5px; font-weight: 600; margin-top: 2px; }

.co-items {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.co-items::-webkit-scrollbar { display: none; }
.co-items li { flex: none; width: 76px; display: flex; flex-direction: column; gap: 4px; }
.co-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  background: var(--page);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--grey-light);
}
.co-thumb img { width: 100%; height: 100%; object-fit: cover; }
.co-qty {
  position: absolute;
  right: 3px;
  bottom: 3px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}
.co-price { font-size: 12.5px; font-weight: 700; color: var(--price); }

/* Payment options as large tappable rows; the chosen one outlined orange. */
.checkout .pay-method { padding: 13px 14px; border-radius: 10px; }

/* The surcharge row only takes part in the summary grid while shown. */
.surcharge-row:not([hidden]) { display: contents; }

.checkout-side .neg, .checkout-side .free { color: var(--green); }
.checkout-side .co-h { margin-bottom: 10px; }

/* Phone bar inside the form: total on the left, place-order on the right. */
.co-bar { margin-top: 14px; }
/* `.checkout label { display: block }` outranked .pay-method's flex layout,
   which put the radio on a line of its own above the method name. */
.checkout .pay-method { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 0; }
.checkout .pay-method input { margin-top: 3px; width: 18px; height: 18px; }
/* Unbroken rule above the total, as on the basket. */
.checkout-side dl { column-gap: 0; }
.checkout-side dd { padding-left: 12px; }

/* =====================================================================
   Order confirmation — Temu-style success header, tracker, item photos
   ===================================================================== */

.btn-ghost { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }

.oc-hero {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px 16px 20px;
  margin: 12px 0;
  text-align: center;
}
.oc-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  background: var(--green);
}
.oc-icon svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.oc-wait .oc-icon { background: var(--orange); }
.oc-bad .oc-icon { background: var(--price); }
.oc-hero h1 { font-size: 20px; margin: 0 0 6px; }
@media (min-width: 700px) { .oc-hero h1 { font-size: 24px; } }
.oc-hero p { margin: 0 auto 6px; max-width: 52ch; color: var(--grey); font-size: 14px; }
.oc-number { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 10px !important; }
.oc-number .oc-copy-val { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.oc-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.oc-actions .btn { min-width: 200px; }

.oc-copy {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 999px;
  padding: 2px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--grey);
  cursor: pointer;
}
.oc-copy:hover { color: var(--ink); border-color: var(--grey-light); }
.oc-copy.done { color: var(--green); border-color: var(--green); }

/* Progress: four dots joined by a line, filled up to where the order is. */
.oc-track {
  list-style: none;
  margin: 0 0 12px;
  padding: 16px 8px;
  background: var(--card);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  counter-reset: none;
}
.oc-track li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--grey-light);
  text-align: center;
}
.oc-track li.done { color: var(--green); font-weight: 700; }
.oc-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--line);
  position: relative;
  z-index: 1;
}
.oc-track li.done .oc-dot { background: var(--green); }
.oc-track li + li::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--line);
}
.oc-track li.done + li.done::before { background: var(--green); }
.oc-stopped {
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 0 0 12px;
  text-align: center;
}

.oc-card { margin-bottom: 0; }
.oc-pay { margin-bottom: 12px; border: 2px solid var(--orange); }
.oc-pay .bank-details dd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.oc-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.oc-line:last-of-type { border-bottom: 0; }
.oc-qty { font-size: 12.5px; color: var(--grey); }
.oc-line-price { font-weight: 800; color: var(--ink); white-space: nowrap; }
.oc-fee {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--grey);
}
.oc-address { margin: 0; line-height: 1.6; }
.oc-paywith { text-align: center; font-size: 13px; color: var(--grey); margin: 12px 0 0; }

/* =====================================================================
   Listings and info pages — breadcrumbs, subcategory row, pager, CMS card
   ===================================================================== */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 12.5px;
  color: var(--grey);
  margin: 12px 0 8px;
}
.crumbs a:hover { color: var(--orange-dark); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* A category's subcategories: always a single sideways row. */
.dept-row ul.one-row { grid-template-rows: auto; }

.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 18px 0 8px;
}
.pager a, .pager span {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
}
.pager a:hover { border-color: var(--orange); color: var(--orange-dark); }
.pager .on { background: var(--black); color: #fff; border-color: var(--black); }
.pager .pager-gap { border: 0; background: none; min-width: 0; padding: 0 2px; }

/* Info pages (delivery, returns, …) on a white card like the rest. */
.cms {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px 18px 28px;
  margin: 12px auto 24px;
}
@media (min-width: 700px) { .cms { padding: 28px 36px 36px; } }

/* Smallest phones (320px). */
.cat-panel { overflow-x: clip; }
@media (max-width: 399px) {
  .cat-hot { right: -2px; font-size: 9px; padding: 1px 5px; }
  .bl { grid-template-columns: auto 68px minmax(0, 1fr); gap: 8px; }
  .bl.saved { grid-template-columns: 68px minmax(0, 1fr); }
  .bl .pick-wrap { width: 26px; }
  .bl-actions { flex-wrap: wrap; gap: 2px; }
  .bl-actions .qty button { width: 30px; height: 32px; }
  .bl-icon { width: 34px; height: 34px; }
  .tabbar > a.tab-promo { display: none; }
}

/* =====================================================================
   Footer — dark, as on the reference
   ===================================================================== */

.foot {
  background: #141414;
  color: #E6E6E6;
  border-top: 0;
  margin-top: 24px;
}
.foot h3, .foot-brand h3, .foot-col h3 { color: #fff; }
.foot a, .foot-tagline, .foot-company, .foot-copy, .foot-pay-label { color: #A8A8A8; }
.foot a:hover { color: #fff; }
.foot-social a { color: #E6E6E6; border-color: rgba(255,255,255,.25); }
.foot-pay li {
  background: #fff;
  color: var(--ink);
  border-radius: 5px;
}
/* A logo drawn for a light background stays visible on the dark footer. */
.foot .foot-logo { background: #fff; border-radius: 8px; padding: 6px 10px; }

/* =====================================================================
   Product page — add-to-basket sheet
   ===================================================================== */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0,0,0,.45);
}
.sheet-backdrop[hidden] { display: none; }

.sheet {
  position: fixed;
  z-index: 71;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 30px rgba(0,0,0,.18);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%);
  transition: transform .22s cubic-bezier(.2,.9,.3,1);
}
.sheet.open { transform: none; }
.sheet[hidden] { display: none; }
@media (min-width: 700px) {
  .sheet {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(520px, calc(100vw - 32px));
    max-height: min(86vh, 760px);
    border-radius: 16px;
    transform: translate(-50%, -46%);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
  }
  .sheet.open { transform: translate(-50%, -50%); opacity: 1; }
}

.sheet-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line);
}
.sheet-img {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--page);
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--grey-light);
}
.sheet-img img { width: 100%; height: 100%; object-fit: cover; }
.sheet-sum { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.sheet-sum .price { font-size: 22px; }
.sheet-name {
  font-size: 13px;
  color: var(--grey);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sheet-x {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--page);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}

.sheet-body { overflow-y: auto; padding: 4px 14px 16px; }
.sheet-body[hidden] { display: none; }
/* Inside the sheet the add row sits at the bottom, full width. */
.sheet-body .pdp-add { margin-top: 16px; }
.sheet-body .pdp-add .btn { min-height: 48px; font-size: 16px; }

.sheet-done { padding: 22px 16px 20px; text-align: center; }
.sheet-done[hidden] { display: none; }
.sheet-tick {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--green);
  display: grid;
  place-items: center;
  margin: 0 auto 8px;
}
.sheet-tick svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sheet-done-title { margin: 0 0 16px; font-size: 18px; font-weight: 800; }
.sheet-done-actions { display: grid; gap: 10px; }
@media (min-width: 400px) { .sheet-done-actions { grid-template-columns: 1fr 1fr; } }
.sheet-done-actions .btn { min-height: 46px; }
/* The white secondary button keeps its look on hover (and after a tap). */
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--page); color: var(--ink); }

/* =====================================================================
   Search results
   ===================================================================== */

.sr-head { margin: 12px 0 8px; }
.sr-head h1 { margin: 0; font-size: 19px; line-height: 1.3; overflow-wrap: anywhere; }
.sr-head h1 span { color: var(--orange-dark); }
@media (min-width: 700px) { .sr-head h1 { font-size: 22px; } }
.sr-sub { margin: 4px 0 0; color: var(--grey); font-size: 13px; }

/* Related categories: a sideways row of chips. */
.sr-related {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0 10px;
}
.sr-related::-webkit-scrollbar { display: none; }
.sr-related .chip { flex: none; }

/* Sort tabs: underlined like the reference, scrolling sideways on phones. */
.sr-sort {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--card);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--line);
  padding: 0 6px;
}
.sr-sort::-webkit-scrollbar { display: none; }
.sr-sort a {
  flex: none;
  padding: 12px 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--grey);
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
}
.sr-sort a:hover { color: var(--ink); }
.sr-sort a[aria-current] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--orange); }
.sr-sort + .home-grid { border-radius: 0 0 var(--radius) var(--radius); }

/* Nothing found. */
.sr-empty {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px 18px;
  margin: 8px 0 12px;
  text-align: center;
}
.sr-empty svg {
  width: 52px; height: 52px; fill: none; stroke: var(--grey-light);
  stroke-width: 1.6; stroke-linecap: round; display: block; margin: 0 auto 8px;
}
.sr-empty p { margin: 0 0 8px; font-weight: 600; }
.sr-empty ul {
  display: inline-block;
  text-align: left;
  margin: 0;
  padding-left: 20px;
  color: var(--grey);
  font-size: 13.5px;
  line-height: 1.7;
}
.sr-depts { padding: 0; margin: 0; }

/* Order page: parcels and expected delivery from the supplier */
.oc-tracking .oc-eta { margin: 0 0 10px; }
.oc-parcel { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--line, #eee); }
.oc-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px;
  background: #e6f6ec; color: #1c7c3c; }

/* =====================================================================
   Customer account
   ===================================================================== */

/* Masthead: "Sign in / Register — Orders & Account", desktop only. Phones
   reach the account from the tab bar's "You". */
.account-link { display: none; }
@media (min-width: 700px) {
  .masthead .wrap {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "brand search account theme basket";
  }
  .account-link {
    grid-area: account;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    min-height: 40px;
    padding: 4px 6px;
    white-space: nowrap;
  }
  .account-link svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
  .account-link span { display: grid; line-height: 1.2; }
  .account-link small { font-size: 11.5px; opacity: .9; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
  .account-link b { font-size: 13px; }
}
@media (min-width: 700px) and (max-width: 899px) {
  .account-link span { display: none; }
}

/* ---- sign in / register */
.ac-auth { display: grid; place-items: start center; padding: 12px 0 24px; }
.ac-auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--card);
  border-radius: 12px;
  padding: 22px 18px 18px;
}
@media (min-width: 560px) { .ac-auth-card { padding: 28px 30px 22px; } }
.ac-auth h1 { font-size: 21px; text-align: center; margin: 0 0 8px; }
.ac-secure {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0 0 14px;
  color: var(--green); font-size: 13px; font-weight: 600;
}
.ac-secure svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.ac-perks {
  list-style: none; margin: 0 0 18px; padding: 10px 12px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
  background: var(--green-bg); border-radius: var(--radius);
  font-size: 12.5px; color: var(--green); font-weight: 600;
}
.ac-perks li { display: inline-flex; align-items: center; gap: 7px; }
.ac-perks .tick {
  width: 5px; height: 10px; flex: none;
  border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-2px);
}

.ac-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.ac-tabs a {
  text-align: center; padding: 11px 0; min-height: 44px;
  color: var(--grey); font-weight: 600; font-size: 15px;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
.ac-tabs a[aria-current="page"] { color: var(--ink); border-color: var(--orange); }

.ac-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.ac-form label .opt { color: var(--grey-light); font-weight: 400; }
.ac-form input:not([type="hidden"]):not([hidden]):not([type="radio"]):not([type="checkbox"]) {
  display: block; width: 100%;
  margin-top: 5px; padding: 11px 12px;
  font: inherit; font-size: 16px; font-weight: 400;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 8px;
  min-height: 46px;
}
.ac-form input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(251, 119, 1, .15); }
.ac-form input[readonly]:not([hidden]) { background: var(--page); color: var(--grey); }
.ac-pass { position: relative; display: block; }
.ac-pass input:not([type="hidden"]) { padding-right: 64px; }
.ac-show {
  position: absolute; right: 4px; bottom: 4px;
  min-height: 38px; padding: 0 10px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--grey);
}
.ac-show:hover { color: var(--ink); }
.ac-hint { margin: -6px 0 12px; font-size: 12.5px; color: var(--grey); }
.ac-center { text-align: center; margin: 12px 0 0; }
.ac-go { border-radius: 999px; min-height: 48px; font-size: 16px; margin-top: 4px; }
.ac-switch { text-align: center; font-size: 14px; margin: 14px 0 0; }
.ac-switch a, .ac-none a { color: var(--orange-dark); font-weight: 600; }
.ac-error {
  margin: 0 0 14px; padding: 10px 12px;
  font-size: 13.5px; font-weight: 600; color: #8A1B0E;
  background: #FDECEA; border-radius: var(--radius);
}
.ac-flash {
  margin: 0 0 10px; padding: 10px 12px;
  font-size: 13.5px; font-weight: 600; color: var(--green);
  background: var(--green-bg); border-radius: var(--radius);
}

/* ---- layout: side menu on desktop, the hub is the menu on phones */
.ac-layout { display: grid; gap: 12px; padding: 4px 0 16px; }
.ac-main { min-width: 0; display: grid; gap: 10px; align-content: start; }
.ac-side { display: none; }
@media (min-width: 900px) {
  .ac-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
  .ac-side {
    display: block;
    position: sticky; top: calc(var(--masthead-h, 120px) + 12px);
    background: var(--card); border-radius: var(--radius); padding: 14px 10px;
  }
  .ac-side ul { list-style: none; margin: 0 0 6px; padding: 0; }
  .ac-side a, .ac-side-out {
    display: block; width: 100%; text-align: left;
    padding: 10px 12px; border-radius: 6px; min-height: 40px;
    color: var(--ink); font: inherit; font-size: 14px;
    background: none; border: 0; cursor: pointer;
  }
  .ac-side a:hover, .ac-side-out:hover { background: var(--page); }
  .ac-side a[aria-current="page"] { background: #FFF1E3; color: var(--orange-dark); font-weight: 700; }
  .ac-side-out { color: var(--grey); }
  .ac-side-name {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 10px; padding: 0 6px 12px;
    font-weight: 700; border-bottom: 1px solid var(--line);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ac-signout { display: none; }
}

.ac-avatar {
  flex: none;
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--orange); color: #fff; font-weight: 800; font-size: 15px;
}
.ac-avatar-lg { width: 54px; height: 54px; font-size: 24px; border: 2px solid #fff; }

/* ---- hub */
.ac-hero {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 14px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--orange) 0%, #FF9A3C 100%);
  color: #fff;
}
.ac-hero-who { min-width: 0; flex: 1; }
.ac-hero h1 { margin: 0; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-hero p { margin: 2px 0 0; font-size: 13px; opacity: .92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-gear { flex: none; display: grid; place-items: center; width: 44px; height: 44px; color: #fff; }
.ac-gear svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.ac-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--card); border-radius: var(--radius); }
.ac-stats a { display: grid; justify-items: center; gap: 2px; padding: 12px 4px; min-height: 44px; color: var(--ink); }
.ac-stats a + a { border-left: 1px solid var(--line); }
.ac-stats b { font-size: 17px; }
.ac-stats span { font-size: 12px; color: var(--grey); }

.ac-card { padding: 14px; }
.ac-card h2 { font-size: 16px; margin: 0 0 12px; }
.ac-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ac-card-h a { font-size: 13px; color: var(--grey); min-height: 32px; }

.ac-shortcuts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ac-shortcuts a { display: grid; justify-items: center; gap: 6px; padding: 4px 0 6px; font-size: 12px; color: var(--ink); text-align: center; }
.ac-sc-icon { position: relative; display: grid; place-items: center; width: 34px; height: 34px; }
.ac-sc-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ac-sc-icon i {
  position: absolute; top: -4px; right: -8px;
  min-width: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--price); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; line-height: 18px;
}
.ac-shortcuts a:hover { color: var(--orange-dark); }
.ac-recent { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ac-recent .ac-order { padding: 0; }
.ac-recent .ac-order + .ac-order { padding-top: 10px; border-top: 1px solid var(--line); }
.ac-none { margin: 12px 0 0; color: var(--grey); font-size: 14px; }

.ac-services ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 0; }
@media (min-width: 900px) { .ac-services ul { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); } }
.ac-services a { display: grid; justify-items: center; gap: 6px; padding: 6px 2px; font-size: 12px; text-align: center; color: var(--ink); }
.ac-services svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ac-services a:hover { color: var(--orange-dark); }

/* ---- sub-pages */
.ac-back { display: flex; align-items: center; gap: 4px; }
.ac-back a { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -10px; font-size: 28px; line-height: 1; color: var(--ink); }
.ac-back h1 { margin: 0; font-size: 19px; }
@media (min-width: 900px) { .ac-back a { display: none; } }

.ac-otabs { background: var(--card); border-radius: var(--radius); padding: 0 8px; margin: 0; }
.ac-otabs span { color: var(--grey); font-weight: 400; }
.ac-orders { display: grid; gap: 10px; }

.ac-order { background: var(--card); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 10px; }
.ac-order header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-order-meta { font-size: 12.5px; color: var(--grey); }
.ac-state { font-size: 13.5px; font-weight: 700; }
.ac-state.ac-s-ok   { color: var(--green); }
.ac-state.ac-s-go   { color: var(--orange-dark); }
.ac-state.ac-s-wait { color: #B26B00; }
.ac-state.ac-s-bad  { color: #C0281A; }
.ac-state.ac-s-off  { color: var(--grey); }
.ac-thumbs { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); }
.ac-thumb {
  position: relative; flex: none;
  width: 64px; height: 64px; border-radius: 6px; overflow: hidden;
  background: var(--page); display: grid; place-items: center;
  font-weight: 700; color: var(--grey);
}
.ac-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ac-thumb i {
  position: absolute; right: 0; bottom: 0; padding: 1px 5px;
  background: rgba(0,0,0,.55); color: #fff; font-style: normal; font-size: 11px; border-top-left-radius: 6px;
}
.ac-more { font-size: 14px; }
.ac-one-name {
  min-width: 0; font-size: 13.5px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 380px) { .ac-thumb { width: 54px; height: 54px; } .ac-thumbs { gap: 6px; } }
.ac-order footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-order-total { font-size: 13.5px; color: var(--grey); }
.ac-order-total b { color: var(--ink); font-size: 15px; }
.ac-order footer .btn { border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }

.ac-empty { background: var(--card); border-radius: var(--radius); }
.ac-empty svg { width: 44px; height: 44px; fill: none; stroke: var(--grey-light); stroke-width: 1.5; stroke-linejoin: round; }

/* ---- store credit */
.ac-balance {
  padding: 18px 16px; border-radius: var(--radius); color: #fff;
  background: linear-gradient(135deg, var(--orange) 0%, #FF9A3C 100%);
}
.ac-balance span { font-size: 13px; opacity: .92; }
.ac-balance b { display: block; font-size: 30px; margin: 2px 0 6px; }
.ac-balance p { margin: 0; font-size: 13px; opacity: .92; }
.ac-ledger { list-style: none; margin: 0; padding: 0; }
.ac-ledger li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; }
.ac-ledger li + li { border-top: 1px solid var(--line); }
.ac-ledger li > div { min-width: 0; display: grid; }
.ac-ledger-what { font-size: 14px; overflow-wrap: anywhere; }
.ac-ledger-when { font-size: 12px; color: var(--grey); }
.ac-ledger-amt { font-weight: 700; white-space: nowrap; }
.ac-ledger-amt.in { color: var(--green); }

.ac-card .ac-form .btn { border-radius: 999px; }

/* =====================================================================
   Wishlist hearts
   ===================================================================== */

.trend-wish, .pdp-wish {
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  color: var(--ink);
}
.trend-wish svg, .pdp-wish svg {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round;
  transition: transform .15s ease;
}
.trend-wish[aria-pressed="true"], .pdp-wish[aria-pressed="true"] { color: var(--price); }
.trend-wish[aria-pressed="true"] svg, .pdp-wish[aria-pressed="true"] svg { fill: currentColor; }
.trend-wish:active svg, .pdp-wish:active svg { transform: scale(1.2); }
.trend-wish:disabled, .pdp-wish:disabled { opacity: .6; }

/* Top-right of the photo, opposite the basket button's corner. */
.trend-wish {
  position: absolute; top: 6px; right: 6px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.trend-wish svg { width: 19px; height: 19px; }

.pdp-title { display: flex; align-items: flex-start; gap: 6px; }
.pdp-title h1 { flex: 1; min-width: 0; }
.pdp-wish {
  flex: none; width: 44px; height: 44px; margin: -6px -8px 0 0;
  background: none; border-radius: 50%;
}
@media (hover: hover) { .pdp-wish:hover { background: var(--page); } }
.pdp-wish svg { width: 25px; height: 25px; }

.ac-count { color: var(--grey); font-weight: 400; font-size: 16px; }
.ac-wish-note { margin: 0; font-size: 13px; color: var(--grey); }
.ac-wish-grid { background: var(--card); border-radius: var(--radius); padding: 10px; }

/* =====================================================================
   Coupons & offers
   ===================================================================== */

.cp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 1100px) { .cp-list { grid-template-columns: 1fr 1fr; } }
.cp {
  position: relative;
  display: grid; grid-template-columns: 104px minmax(0, 1fr);
  background: var(--card); border-radius: 10px; overflow: hidden;
  box-shadow: inset 0 0 0 1px #FFD9B8;
}
.cp-value {
  position: relative;
  display: grid; align-content: center; justify-items: center; gap: 2px;
  padding: 14px 6px;
  background: linear-gradient(160deg, #FF5A1F 0%, var(--orange) 100%);
  color: #fff; text-align: center;
}
/* Ticket notches top and bottom of the tear line. */
.cp-value::before, .cp-value::after {
  content: ""; position: absolute; right: -8px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--page);
}
.cp-value::before { top: -8px; }
.cp-value::after  { bottom: -8px; }
.cp-value b { font-size: 24px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cp-value span { font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.cp-body { padding: 12px 12px 12px 16px; display: grid; gap: 3px; min-width: 0; border-left: 2px dashed #FFD9B8; }
.cp-tag {
  justify-self: start; padding: 1px 8px; border-radius: 999px;
  background: #FFF1E3; color: var(--orange-dark); font-size: 11.5px; font-weight: 700;
}
.cp-title { margin: 0; font-weight: 700; font-size: 14.5px; }
.cp-terms { margin: 0; font-size: 12.5px; color: var(--grey); }
.cp-terms:empty { display: none; }
.cp-exp { margin: 0; font-size: 12px; color: var(--grey); }
.cp-exp.soon { color: var(--price); font-weight: 700; }
.cp-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.cp-code {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  padding: 2px 2px 2px 10px; border: 1px dashed var(--grey-light); border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-weight: 700;
}
.cp-code > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-use { border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.cp-why { font-size: 12.5px; color: var(--grey); font-weight: 600; }
.cp-off .cp-value { background: #C9C9C9; }
.cp-off { box-shadow: inset 0 0 0 1px var(--line); }
.cp-off .cp-body { border-left-color: var(--line); }
@media (max-width: 360px) { .cp { grid-template-columns: 88px minmax(0, 1fr); } .cp-value b { font-size: 20px; } }

/* =====================================================================
   Reviews
   ===================================================================== */

.review header { justify-content: flex-start; align-items: center; }
.review header time { margin-left: auto; }
.review-avatar {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #FFF1E3; color: var(--orange-dark); font-weight: 800; font-size: 12px;
}
.review-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.review-meta .stars { color: var(--ink); font-size: 13px; }
.review-meta .review-verified { margin-left: 0; }
.review-fit { font-size: 12px; color: var(--grey); }
.review-photos { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.review-photos a { flex: none; }
.review-photos img { width: 76px; height: 76px; object-fit: cover; border-radius: 6px; display: block; }

.rv-all-link { font-size: 13px; color: var(--grey); min-height: 32px; }
.rv-summary { display: grid; gap: 10px 22px; align-items: center; padding: 6px 0 12px; }
@media (min-width: 560px) { .rv-summary { grid-template-columns: auto minmax(0, 1fr); } }
.rv-score { display: grid; justify-items: start; gap: 2px; }
@media (min-width: 560px) { .rv-score { justify-items: center; padding-right: 8px; } }
.rv-score b { font-size: 38px; line-height: 1; letter-spacing: -.02em; }
.rv-score .stars { color: var(--ink); font-size: 16px; }
.rv-count { font-size: 12.5px; color: var(--grey); }
.rv-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-width: 420px; width: 100%; }
.rv-bars li > a, .rv-bars li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 40px; align-items: center; gap: 8px; font-size: 12.5px; color: var(--grey); }
.rv-bars li:has(> a) { display: block; }
.rv-bars li > a { min-height: 24px; }
.rv-bars li > a:hover .rv-track i { background: var(--orange-dark); }
.rv-track { height: 7px; border-radius: 999px; background: var(--page); overflow: hidden; }
.rv-track i { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
.rv-pct { text-align: right; }
.rv-strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; }
.rv-strip img { flex: none; width: 76px; height: 76px; object-fit: cover; border-radius: 6px; }
.rv-more { margin-top: 10px; border-radius: 999px; }

/* Full reviews page */
.rv-page { padding: 6px 0 18px; display: grid; gap: 10px; }
.rv-product {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border-radius: var(--radius); padding: 10px 12px; color: var(--ink);
}
.rv-product-img {
  flex: none; width: 56px; height: 56px; border-radius: 6px; overflow: hidden;
  background: var(--page); display: grid; place-items: center; font-weight: 700; color: var(--grey);
}
.rv-product-img img { width: 100%; height: 100%; object-fit: cover; }
.rv-product-txt { display: grid; min-width: 0; flex: 1; }
.rv-product-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-product-go { font-size: 24px; color: var(--grey); }
.rv-h1 { margin: 4px 0 0; font-size: 19px; }
.rv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
.rv-side, .rv-main { min-width: 0; }
@media (min-width: 900px) {
  .rv-grid { grid-template-columns: 300px minmax(0, 1fr); }
  .rv-side { position: sticky; top: calc(var(--masthead-h, 120px) + 12px); }
  .rv-side .rv-summary { grid-template-columns: 1fr; }
  .rv-side .rv-score { justify-items: start; }
}
.rv-side, .rv-main { padding: 14px; }
.rv-fit { margin: 0; font-size: 13px; color: var(--grey); }
.rv-fit b { color: var(--ink); }
.rv-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
.rv-chips .chip { flex: none; }
.rv-sort { margin: 0 0 4px; }

/* Your reviews */
.rvw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rvw-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; }
.rvw-item .rvw-go { grid-column: 1 / -1; border-radius: 999px; justify-self: end; display: inline-flex; align-items: center; }
@media (min-width: 560px) {
  .rvw-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .rvw-item .rvw-go { grid-column: auto; }
}
.rvw-head { display: flex; align-items: center; gap: 12px; }
.ac-card > .rvw-head { margin-bottom: 16px; }
.rvw-txt { display: grid; gap: 2px; min-width: 0; }
.rvw-name { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rvw-when { font-size: 12px; color: var(--grey); }
.rvw-done .stars { color: var(--ink); font-size: 13px; }
.rvw-title { font-size: 14px; }
.rvw-body { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }

.rvw-form fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.rvw-form legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 6px; }
.rvw-star-row { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.rvw-star-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rvw-star-row label {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0;
  font-size: 34px; line-height: 1; color: #D6D6D6; cursor: pointer; font-weight: 400;
}
.rvw-star-row input:checked ~ label,
.rvw-star-row label:hover, .rvw-star-row label:hover ~ label { color: var(--orange); }
.rvw-star-row input:focus-visible + label { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 6px; }
.rvw-form textarea {
  display: block; width: 100%; margin-top: 5px; padding: 11px 12px;
  font: inherit; font-size: 16px; font-weight: 400; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; resize: vertical;
}
.rvw-form textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(251, 119, 1, .15); }
.rvw-fit { display: flex; flex-wrap: wrap; gap: 6px; }
.rvw-fit legend { width: 100%; }
.rvw-fit .chip { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; cursor: pointer; }
.rvw-fit .chip:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--orange); color: var(--orange-dark); }
.rvw-fit .chip input { accent-color: var(--orange); }
.ac-submit { border-radius: 999px; min-height: 48px; font-size: 16px; }

/* =====================================================================
   Returns & refunds
   ===================================================================== */

.ac-order-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ac-order-btns .btn { border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }

.rt-promise {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--green-bg); color: var(--green);
}
.rt-promise svg { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.rt-promise div { display: grid; gap: 2px; font-size: 13px; }
.rt-promise b { font-size: 14.5px; }
.rt-promise a { color: var(--green); font-weight: 700; text-decoration: underline; }

.rt-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rt-orders li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; }
.rt-orders li + li { padding-top: 12px; border-top: 1px solid var(--line); }
.rt-thumbs { display: flex; gap: 6px; }
.rt-thumbs .ac-thumb { width: 48px; height: 48px; }
.rt-otxt { display: grid; min-width: 0; font-size: 13px; }
.rt-otxt span { color: var(--grey); font-size: 12.5px; }
.rt-go { grid-column: 1 / -1; justify-self: end; border-radius: 999px; display: inline-flex; align-items: center; }
@media (min-width: 560px) {
  .rt-orders li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .rt-go { grid-column: auto; }
}

.rt-h2 { font-size: 16px; margin: 6px 0 8px; }
.rt-list-wrap { display: grid; gap: 10px; }
.rt-list-wrap > .rt-h2 { margin-bottom: 0; }
.rt-track { margin: 0; padding: 4px 0; background: none; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rt-track li { font-size: 11px; }
.rt-why { margin: 0; font-size: 13px; color: var(--grey); }
.rt-next { margin: 0; padding: 8px 10px; border-radius: 6px; background: #FFF4E5; font-size: 13px; }
.rt-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rt-btns form { margin: 0; }
.rt-btns .btn { border-radius: 999px; }

.rt-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rt-items li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; }
.rt-items li + li { padding-top: 12px; border-top: 1px solid var(--line); }
.rt-qty { grid-column: 1 / -1; justify-self: end; margin: 0 !important; }
@media (min-width: 560px) {
  .rt-items li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .rt-qty { grid-column: auto; }
}
.rt-qty select {
  min-height: 44px; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 600; background: #fff; color: var(--ink);
}
.rt-reasons { display: grid; gap: 8px; margin-bottom: 12px; }
.rt-radio {
  display: flex !important; align-items: flex-start; gap: 10px; margin: 0 !important;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-weight: 500 !important; font-size: 14px !important; cursor: pointer;
}
.rt-radio input { margin-top: 3px; accent-color: var(--orange); }
.rt-radio:has(input:checked) { border-color: var(--orange); background: #FFF8F0; }
.rt-res small { color: var(--grey); font-size: 12.5px; }
.rt-badge { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: 11px; font-weight: 700; }
.rt-form textarea {
  display: block; width: 100%; margin-top: 5px; padding: 11px 12px;
  font: inherit; font-size: 16px; font-weight: 400; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; resize: vertical;
}
.rt-form textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(251, 119, 1, .15); }
.rt-form .ac-card { margin-bottom: 10px; }

/* =====================================================================
   Day / Night / Auto (public/assets/theme.js sets html[data-theme]).
   Night redefines the colour variables, then repaints the few colours
   written as literals above. Keep new colours in variables where possible;
   a new light literal needs a line in the night block below.
   ===================================================================== */

.theme-switch {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(127,127,127,.16); border: 1px solid rgba(127,127,127,.25);
}
.theme-switch button {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px;
  padding: 4px 11px; border: 0; border-radius: 999px; background: none;
  color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.theme-switch svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.theme-switch button[aria-pressed="true"] { background: var(--orange); color: #fff; }
.foot-theme { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 16px; }
.foot-theme .theme-switch { color: #E6E6E6; }
.drawer-theme { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-top: 1px solid var(--line); }
.drawer-theme-label { font-size: 13px; font-weight: 700; color: var(--grey); }

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] {
  --black:      #2C2C2E;
  --ink:        #ECECEC;
  --grey:       #AFAFAF;
  --grey-light: #8C8C8C;
  --line:       #34343A;
  --page:       #0F0F11;
  --card:       #1C1C1E;
  --green:      #45C474;
  --green-bg:   #15301F;
  --sand:       #2A2219;
}
html[data-theme="dark"] img { opacity: .94; }
html[data-theme="dark"] .wordmark.logo img,
html[data-theme="dark"] .foot-logo img { opacity: 1; }
html[data-theme="dark"] .search { background: #1C1C1C; }
html[data-theme="dark"] .assure { background: #3F2F18; }
html[data-theme="dark"] .assure li + li { border-left: 1px solid #6B5538; }
html[data-theme="dark"] .thumb { background: #2F2F2F; }
html[data-theme="dark"] .stars { color: #EDCA84; }
html[data-theme="dark"] .btn[disabled] { background: #5D5D5D; }
html[data-theme="dark"] .pdp-media { background: #2F2F2F; }
html[data-theme="dark"] .variant { background: #1C1C1C; }
html[data-theme="dark"] .nudge { background: #3D2917; border: 1px solid #694828; }
html[data-theme="dark"] .ship-bar .track { background: #323232; }
html[data-theme="dark"] .checkout-bar { background: #1C1C1C; }
html[data-theme="dark"] .checkout input { background: #1C1C1C; }
html[data-theme="dark"] .checkout input[readonly] { background: #282828; }
html[data-theme="dark"] .err-msg.show { color: #F5BCB6; background: #391E1A; border: 1px solid #623731; }
html[data-theme="dark"] .hero-dot::before { background: #5D5D5D; }
html[data-theme="dark"] .pay-method { background: #1C1C1C; }
html[data-theme="dark"] .gallery-stage { background: #2F2F2F; }
html[data-theme="dark"] .gallery-thumb { background: #2F2F2F; }
html[data-theme="dark"] .in-stock { color: #BBEEC7; }
html[data-theme="dark"] .delivery-list .d-price.free { color: #BBEEC7; }
html[data-theme="dark"] .suggest-img { background: #2F2F2F; }
html[data-theme="dark"] .pdp-promise { background: #1F2D23; }
html[data-theme="dark"] .pdp-promise li + li { border-top: 1px solid #314437; }
html[data-theme="dark"] .mega-all .mega-img { background: #412D19; }
html[data-theme="dark"] .deals-ends .clock { background: #1C1C1C; }
html[data-theme="dark"] .deal-bar { background: #502F1E; }
html[data-theme="dark"] .bk-ship { background: #3F2F18; }
html[data-theme="dark"] .bk-ship .track { background: #604325; }
html[data-theme="dark"] .bk-ship.won { background: #26392D; }
html[data-theme="dark"] .bk-saving { background: #26392D; }
html[data-theme="dark"] .co-ship { background: #332313; }
html[data-theme="dark"] .foot-pay li { background: #1C1C1C; }
html[data-theme="dark"] .oc-tag { background: #263B2E; color: #BBF0CC; }
html[data-theme="dark"] .ac-form input:not([type="hidden"]):not([hidden]):not([type="radio"]):not([type="checkbox"]) { background: #1C1C1C; }
html[data-theme="dark"] .ac-error { color: #F5BCB6; background: #391E1A; }
@media (min-width: 900px) { html[data-theme="dark"] .ac-side a[aria-current="page"] { background: #412D19; } }
html[data-theme="dark"] .ac-avatar-lg { border: 2px solid #1C1C1C; }
html[data-theme="dark"] .ac-state.ac-s-wait { color: #F3D5A9; }
html[data-theme="dark"] .ac-state.ac-s-bad { color: #F09E96; }
html[data-theme="dark"] .trend-wish { background: rgba(36,36,38,.92); }
html[data-theme="dark"] .cp { box-shadow: inset 0 0 0 1px #664427; }
html[data-theme="dark"] .cp-body { border-left: 2px dashed #664427; }
html[data-theme="dark"] .cp-tag { background: #412D19; }
html[data-theme="dark"] .cp-off .cp-value { background: #5D5D5D; }
html[data-theme="dark"] .review-avatar { background: #412D19; }
html[data-theme="dark"] .rt-next { background: #3F2F18; }
html[data-theme="dark"] .rt-qty select { background: #1C1C1C; }
html[data-theme="dark"] .rt-radio:has(input:checked) { background: #362614; }
/* Bars painted with --ink, which turns light at night. */
html[data-theme="dark"] .announce { background: #2C2C2E; }
html[data-theme="dark"] .rv-track i { background: #D6D6D6; }

/* ------------------------------------------------ logo plate on phones ---
   The brand cell spans the whole first row on phones; left alone the white
   plate stretched edge to edge round a small icon. The plate now hugs the
   logo (and the store name beside a squarish one). */
.masthead .wordmark { justify-self: start; max-width: 100%; }
.wordmark.logo-square { gap: 8px; padding-inline: 8px 12px; }
.wordmark.logo-square img { max-height: 34px; max-width: 48px; }
.wordmark-name {
  color: #1B1B1B; font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 700px) { .wordmark-name { font-size: 22px; } .wordmark.logo-square img { max-height: 38px; } }

/* =====================================================================
   Order details (account)
   ===================================================================== */

.od-hero { display: grid; gap: 3px; padding: 16px; border-radius: var(--radius); color: #fff;
  background: linear-gradient(135deg, var(--orange) 0%, #FF9A3C 100%); }
.od-hero b { font-size: 19px; }
.od-hero span { font-size: 13.5px; opacity: .95; }
.od-hero.od-ok   { background: linear-gradient(135deg, #0A8A3C 0%, #2DB46A 100%); }
.od-hero.od-wait { background: linear-gradient(135deg, #B26B00 0%, #E59A1A 100%); }
.od-hero.od-bad  { background: linear-gradient(135deg, #B42318 0%, #E0533F 100%); }
.od-hero.od-off  { background: linear-gradient(135deg, #5F6670 0%, #8A919B 100%); }
.od-track { margin: 0; }
.od-pill { border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.od-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.od-note { margin: 0 0 8px; font-size: 13.5px; }

.od-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.od-items li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.od-items li + li { padding-top: 12px; border-top: 1px solid var(--line); }
.od-items .ac-thumb { width: 76px; height: 76px; }
.od-item-txt { display: grid; gap: 3px; min-width: 0; }
.od-item-price { font-weight: 700; font-size: 14px; }
.od-item-price span { font-weight: 400; color: var(--grey); font-size: 12.5px; }
.od-item-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.od-item-acts .btn { min-height: 36px; padding: 6px 12px; font-size: 12.5px; }

.od-address { margin: 0; font-size: 14px; line-height: 1.55; }
.od-totals dl { margin: 0; }
.od-vat { margin: 8px 0 0; text-align: center; font-size: 12.5px; color: var(--grey); }
.od-info { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 13.5px; }
.od-info dt { color: var(--grey); }
.od-info dd { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.od-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding-bottom: 8px; }
.od-foot .btn { min-height: 44px; }

.od-search { display: flex; align-items: center; background: var(--card); border-radius: 999px; padding: 3px 3px 3px 14px; border: 1px solid var(--line); }
.od-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; padding: 8px 0; color: var(--ink); }
.od-search input:focus { outline: none; }
.od-search button { flex: none; width: 40px; height: 36px; border: 0; border-radius: 999px; background: var(--black); color: #fff; cursor: pointer; }

/* Header quick Day/Night button: shows the moon by day, the sun by night. */
.theme-quick {
  grid-area: theme; justify-self: end;
  display: grid; place-items: center;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.14); color: #fff; cursor: pointer;
}
.theme-quick:hover { background: rgba(0,0,0,.24); }
.theme-quick svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.theme-quick .tq-sun { display: none; }
html[data-theme="dark"] .theme-quick .tq-sun { display: block; }
html[data-theme="dark"] .theme-quick .tq-moon { display: none; }
.ac-colours { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ac-colours h2 { margin: 0; }

/* =====================================================================
   Touch comfort. On touch screens (phones, tablets, touch laptops) every
   control is at least ~40px to tap, and every field is 16px so iOS does
   not zoom the page when it takes focus. Mouse users keep the compact
   sizes above.
   ===================================================================== */
@media (pointer: coarse) {
  .trend-sort select { min-height: 40px; padding: 6px 12px; font-size: 16px; }
  .rv-bars li > a { min-height: 36px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 36px; }
  .pdp-rating { min-height: 40px; }
  .oc-copy { min-height: 34px; padding: 6px 12px; }
  .pdp-qty input { width: 40px; align-self: stretch; min-height: 44px; }
  .rvw-name { padding-block: 6px; }
  .theme-switch button { min-height: 40px; padding: 6px 12px; }
  .rt-qty select, .ac-form select { font-size: 16px; }
}

/* Short screens (a phone turned sideways): the header, trust strip and
   promise strip would fill the whole height, so the header scrolls away
   with the page and the two thin strips are left out. */
@media (max-height: 500px) and (orientation: landscape) {
  .masthead { position: static; }
  .utility, .assure { display: none; }
  .cat-rail { top: 0; max-height: 100vh; max-height: 100dvh; }
}
@media (max-height: 500px) and (orientation: landscape) and (max-width: 699px) {
  .has-tabbar .cat-rail { max-height: calc(100dvh - 57px - env(safe-area-inset-bottom, 0px)); }
}

/* =====================================================================
   Checkout, Temu style: a focused page (no search or category bar),
   a green perks strip, saved-address card, photo strip with was-prices,
   payment rows with icons, struck-through summary and a safety panel.
   ===================================================================== */

.is-checkout .masthead .search,
.is-checkout .mainnav,
.is-checkout .assure { display: none; }
@media (max-width: 699px) {
  .is-checkout .utility, .is-checkout .announce { display: none; }
}

.co-head h1 { font-size: 22px; }

.co-perks {
  list-style: none;
  margin: 0 0 14px;
  padding: 9px 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  border-radius: var(--radius);
  background: #E8F6ED;
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
}
.co-perks li { display: flex; align-items: center; gap: 6px; }
.co-perks .tick, .co-safe .tick {
  flex: none;
  width: 5px; height: 10px;
  border: solid currentColor; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) translateY(-2px);
  margin: 0 3px 0 2px;
}

.co-h { flex-wrap: wrap; }
.co-count { color: var(--grey); font-weight: 600; font-size: 14px; }
.co-change {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--orange-dark);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 2px;
}
.co-change:hover { text-decoration: underline; }

/* Saved address: the card shows, the fields wait behind "Change". */
.co-addr-card {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  background: var(--page);
  border-left: 4px solid var(--orange);
}
.co-addr-card b { font-size: 15px; }
.co-addr-card p { margin: 4px 0 2px; font-size: 14px; line-height: 1.45; }
.co-addr-card small { color: var(--grey); font-size: 12.5px; }
.co-pin svg { width: 22px; height: 22px; fill: none; stroke: var(--orange); stroke-width: 2; stroke-linejoin: round; }
.co-addr:not(.is-saved) .co-addr-card { display: none; }
.co-addr.is-saved .co-fields { display: none; }
.co-addr.is-saved .co-change { display: inline-block; }
.co-addr:not(.is-saved) .co-change { display: none; }
.co-note { margin-top: 12px; }
.co-private {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  color: var(--grey);
  font-size: 12.5px;
}
.co-private svg, .co-safe h3 svg {
  flex: none;
  width: 15px; height: 15px;
  fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round;
}

/* Item strip: discount badge and the old price under each photo. */
.co-items { margin: 0 0 12px; }
.co-items li { width: 84px; }
.co-off {
  position: absolute;
  left: 0; top: 0;
  background: var(--price);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-bottom-right-radius: 6px;
}
.co-was { font-size: 11.5px; color: var(--grey-light); margin-top: -3px; }

.co-ship { border-width: 1.5px; }
.co-ship b em { font-style: normal; color: var(--green); }
.co-guar { display: block; font-size: 12px; color: var(--grey); margin-top: 2px; }
.co-freeship {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: #FFF4E8;
  color: var(--orange-dark);
  font-size: 13px;
}
.co-freeship a { color: inherit; font-weight: 700; margin-left: 4px; }

/* Payment rows: icon, name and note, chosen one outlined and tinted. */
.pay-ic {
  flex: none;
  width: 38px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--card);
  display: grid;
  place-items: center;
}
.pay-ic svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.checkout .pay-method { align-items: center; }
.checkout .pay-method input { margin-top: 0; }
.checkout .pay-method:has(input:checked) { background: #FFF9F3; }
.pay-method.is-only { border: 1.5px solid var(--orange); background: #FFF9F3; cursor: default; }

/* Summary. */
.co-strike { color: var(--grey-light); font-weight: 500; }
.checkout-side .co-off-amt { color: var(--price); }
.checkout-side .grand dd { font-size: 22px; }
.co-saved {
  margin: 12px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: #FFF0E6;
  color: var(--price);
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}
.co-go { border-radius: 999px; font-size: 17px; min-height: 50px; }
.co-terms { margin: 10px 0 0; color: var(--grey); font-size: 12px; text-align: center; line-height: 1.5; }
.co-terms a { color: inherit; text-decoration: underline; }

.co-safe {
  margin-top: 12px;
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--pad);
  font-size: 13px;
}
.co-safe h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--green);
}
.co-safe h3 + p, .co-safe ul + h3 { margin-top: 12px; }
.co-safe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--grey); }
.co-safe li { display: flex; gap: 6px; align-items: baseline; }
.co-safe .tick { color: var(--green); }
.co-safe p { margin: 0; color: var(--grey); }
.co-safe a { color: var(--orange-dark); font-weight: 600; }
.co-safe-ic { font-weight: 800; }

/* Phone: the place-order button in the bar is a full orange pill. */
.co-bar .btn { border-radius: 999px; min-height: 46px; padding-inline: 22px; }

/* Desktop: the whole side column sticks, so the summary never slides over
   the safety panel beneath it. */
@media (min-width: 900px) {
  .checkout .checkout-side { position: sticky; top: 84px; }
  .checkout .checkout-side .totals { position: static; }
}

html[data-theme="dark"] .co-perks { background: #1F3328; }
html[data-theme="dark"] .co-freeship { background: #332313; }
html[data-theme="dark"] .co-saved { background: #3A2318; }
html[data-theme="dark"] .checkout .pay-method:has(input:checked),
html[data-theme="dark"] .pay-method.is-only { background: #2A1F15; }
/* Short pairs (names, town and postcode) stay side by side on phones. */
@media (min-width: 340px) {
  .co-fields .field-row:not(.co-one) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* =====================================================================
   Track your order: masthead link, /track page and the footer box
   ===================================================================== */

.track-link { display: none; }
@media (min-width: 700px) {
  .masthead .wrap {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
    grid-template-areas: "brand search track account theme basket";
  }
  .track-link {
    grid-area: track;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    min-height: 40px;
    padding: 4px 6px;
    white-space: nowrap;
  }
  .track-link svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; flex: none; }
  .track-link span { display: grid; line-height: 1.2; }
  .track-link small { font-size: 11.5px; opacity: .9; }
  .track-link b { font-size: 13px; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .track-link span { display: none; }
}
.is-checkout .track-link { display: none; }

.trk-page {
  display: grid;
  gap: 16px;
  max-width: 520px;
  margin: 16px auto 28px;
}
.trk-box {
  background: var(--card);
  border-radius: 14px;
  padding: 24px 20px 20px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.trk-ic {
  width: 56px; height: 56px;
  margin: 0 auto 8px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #FFF0E3;
}
.trk-ic svg { width: 30px; height: 30px; fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linejoin: round; }
.trk-box h1 { margin: 0; font-size: 24px; }
.trk-lead { margin: 6px 0 16px; color: var(--grey); font-size: 14px; line-height: 1.5; }
.trk-err {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #FFF0E6;
  color: var(--price);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
}
.trk-form-s { display: grid; gap: 12px; text-align: left; }
.trk-form-s label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; }
.trk-form-s input {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.trk-form-s input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(251,119,1,.18); }
.trk-go { min-height: 50px; border-radius: 999px; font-size: 17px; margin-top: 4px; }
.trk-help {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 7px;
  text-align: left;
  font-size: 13px;
  color: var(--grey);
}
.trk-help li { display: flex; gap: 8px; align-items: baseline; }
.trk-help .tick {
  flex: none;
  width: 5px; height: 10px;
  border: solid var(--green); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) translateY(-2px);
  margin: 0 3px 0 2px;
}
.trk-help a, .trk-mine .linkbtn { color: var(--orange-dark); font-weight: 700; }
.trk-mine h2 { font-size: 17px; margin: 4px 0 10px; }
.trk-mine .ac-order { margin-bottom: 10px; }

/* Footer box: one row on wide screens, stacked on phones. */
.foot-track {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
}
.foot-track-h { display: flex; align-items: center; gap: 10px; }
.foot-track-h svg { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linejoin: round; }
.foot-track-h b { display: block; font-size: 15px; color: var(--ink); }
.foot-track-h small { display: block; font-size: 12px; color: var(--grey); }
.foot-track input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--page);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.foot-track .btn { min-height: 44px; border-radius: 999px; padding-inline: 26px; }
@media (min-width: 900px) {
  .foot-track { grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; }
}

html[data-theme="dark"] .trk-ic { background: #3A2716; }
html[data-theme="dark"] .trk-err { background: #3A2318; }
.foot .wrap > .foot-track { grid-column: 1 / -1; width: 100%; }

/* =====================================================================
   Order page (/order/…): Temu-style status banner, dated progress,
   parcel cards, items with Buy again, summary with savings, help links
   ===================================================================== */

.op-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 14px;
  align-items: center;
  margin: 12px 0 12px;
  padding: 18px 16px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #FB7701, #FF9A3D);
}
.op-status.op-ship { background: linear-gradient(135deg, #FB7701, #FFA24A); }
.op-status.op-done, .op-status.op-ok { background: linear-gradient(135deg, #0A8A3C, #22A65A); }
.op-status.op-wait { background: linear-gradient(135deg, #3A3A3A, #5A5A5A); }
.op-status.op-bad { background: linear-gradient(135deg, #C62828, #E14B3B); }
.op-ic {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  display: grid;
  place-items: center;
}
.op-ic svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.op-status h1 { margin: 0; font-size: 21px; line-height: 1.25; }
.op-status p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; opacity: .95; }
.op-status-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.op-status-actions .btn { border-radius: 999px; min-height: 42px; background: #fff; color: #E85D00; font-weight: 700; }
.op-status-actions .btn-ghost { background: rgba(255,255,255,.18); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
@media (min-width: 700px) {
  .op-status { grid-template-columns: auto minmax(0, 1fr) auto; padding: 20px 22px; }
  .op-status-actions { grid-column: auto; }
}

.op-steps {
  list-style: none;
  margin: 0 0 12px;
  padding: 16px 8px 12px;
  background: var(--card);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  text-align: center;
}
.op-steps li { position: relative; display: grid; justify-items: center; gap: 3px; font-size: 12.5px; color: var(--grey-light); }
.op-steps li::before {
  content: "";
  position: absolute;
  top: 7px; right: 50%;
  width: 100%; height: 3px;
  background: var(--line);
  z-index: 0;
}
.op-steps li:first-child::before { display: none; }
.op-steps li.done::before { background: var(--green); }
.op-dot {
  position: relative;
  z-index: 1;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--card);
  border: 3px solid var(--line);
}
.op-steps li.done .op-dot { background: var(--green); border-color: var(--green); }
.op-steps li.now .op-dot { box-shadow: 0 0 0 5px rgba(10,138,60,.18); }
.op-steps b { font-size: 13px; color: inherit; }
.op-steps li.done { color: var(--ink); }
.op-steps li.done b { color: var(--green); }
.op-steps small { font-size: 11.5px; color: var(--grey); }

.op-card { margin-bottom: 12px; }
.op-h { font-size: 16px; margin: 0 0 12px; }
.op-count { color: var(--grey); font-weight: 600; font-size: 14px; }

.op-eta {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #E8F6ED;
  color: var(--green);
  font-size: 13.5px;
}
.op-eta .tick {
  flex: none; width: 5px; height: 10px;
  border: solid currentColor; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) translateY(-2px);
}
.op-parcel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
}
.op-van {
  width: 40px; height: 40px; border-radius: 50%;
  background: #FFF0E3; display: grid; place-items: center;
}
.op-van svg { width: 22px; height: 22px; fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linejoin: round; }
.op-parcel-main { display: grid; gap: 2px; min-width: 0; }
.op-parcel-main small { color: var(--grey); font-size: 12.5px; }
.op-num { font: 700 14.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.op-trackbtn { border-radius: 999px; padding-inline: 18px; min-height: 38px; }
.op-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #E8F6ED;
  color: var(--green);
  font-size: 11.5px;
  font-weight: 700;
  vertical-align: middle;
}
.op-tag-go { background: #FFF0E3; color: var(--orange-dark); }
.op-tag-wait { background: #FFF4E0; color: #A86500; }
.op-wait { margin: 0; color: var(--grey); font-size: 13.5px; }

.op-line {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.op-line:last-of-type { border-bottom: 0; }
@media (min-width: 700px) { .op-line { grid-template-columns: 100px minmax(0, 1fr); } }
.op-line .bl-img { display: grid; }
.op-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.op-price b { color: var(--price); font-size: 16px; }
.op-price s { color: var(--grey-light); font-size: 12.5px; }
.op-qty { color: var(--grey); font-size: 13px; }
.op-line-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.op-pill {
  display: inline-flex; align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.op-pill:hover { border-color: var(--orange); color: var(--orange-dark); }

.op-addr-row { display: flex; gap: 10px; align-items: flex-start; }
.op-addr-row p { margin: 0; font-size: 14px; line-height: 1.5; }
.op-pin svg { width: 22px; height: 22px; fill: none; stroke: var(--orange); stroke-width: 2; stroke-linejoin: round; }

.op-info dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; font-size: 13.5px; }
.op-info dt { color: var(--grey); }
.op-info dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.op-help { display: grid; }
.op-help .op-h { margin-bottom: 4px; }
.op-help a {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
}
.op-help a:last-child { border-bottom: 0; }
.op-help i { font-style: normal; color: var(--grey-light); font-size: 20px; }
.op-grid .checkout-side .totals { margin-bottom: 12px; }

html[data-theme="dark"] .op-eta { background: #1F3328; }
html[data-theme="dark"] .op-van { background: #3A2716; }
html[data-theme="dark"] .op-tag { background: #1F3328; }
html[data-theme="dark"] .op-tag-go { background: #3A2716; color: #FFA24A; }
html[data-theme="dark"] .op-tag-wait { background: #3A2E16; color: #F0B44A; }
.op-info { display: block; }
.op-info dl { grid-template-columns: max-content minmax(0, 1fr); }

/* =====================================================================
   Product page, Temu touches: breadcrumb, badges, shopping security,
   item details and the "Explore your interests" grid
   ===================================================================== */

.pdp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin: 10px 0 8px;
  font-size: 12.5px;
  color: var(--grey);
}
.pdp-crumbs a { color: var(--grey); text-decoration: none; }
.pdp-crumbs a:hover { color: var(--orange-dark); text-decoration: underline; }
.pdp-crumbs span { color: var(--grey-light); }
@media (max-width: 699px) { .pdp-crumbs { display: none; } }

.pdp-badges {
  list-style: none;
  margin: 8px 0 4px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pdp-badges li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 4px;
  background: #E8F6ED;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
}
.pdp-badges li.hot { background: #FFF0E3; color: var(--orange-dark); }
.pdp-badges li.hot svg { width: 13px; height: 13px; fill: currentColor; }
.pdp-badges li.low { background: #FFEDE8; color: var(--price); }
.pdp-badges li.star { background: #FFF6DB; color: #A86E00; }

.pdp-secure {
  margin-top: 14px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.pdp-secure h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--green);
}
.pdp-secure h2 svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pdp-secure ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 14px;
}
.pdp-secure li { display: grid; gap: 2px; font-size: 13px; }
.pdp-secure b { color: var(--ink); }
.pdp-secure small { color: var(--grey); font-size: 12px; line-height: 1.4; }

.pdp-details .spec { margin: 0 0 14px; max-width: 640px; }
.pdp-details .pdp-desc p { margin: 0; line-height: 1.6; color: var(--ink-soft, var(--ink)); }
.pdp-details h2 { font-family: inherit; }

html[data-theme="dark"] .pdp-badges li { background: #1F3328; }
html[data-theme="dark"] .pdp-badges li.hot { background: #3A2716; color: #FFA24A; }
html[data-theme="dark"] .pdp-badges li.low { background: #3A2318; color: #FF7A55; }
html[data-theme="dark"] .pdp-badges li.star { background: #3A3216; color: #F0C44A; }
@media (pointer: coarse) {
  .pdp-crumbs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px; }
}

/* =====================================================================
   Category pages: Temu-style sort tabs and filter chips
   ===================================================================== */

.lst-bar {
  background: var(--card);
  border-radius: var(--radius);
  padding: 4px 12px 10px;
  margin: 0 0 10px;
}
.lst-sorts {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}
.lst-sorts::-webkit-scrollbar { display: none; }
.lst-sorts a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 12px;
  color: var(--grey);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.lst-sorts a:hover { color: var(--ink); }
.lst-sorts a.on { color: var(--ink); font-weight: 800; border-bottom-color: var(--orange); }
.lst-arrows { display: inline-grid; line-height: .7; font-size: 8px; color: var(--grey-light); }
.lst-arrows i { font-style: normal; }
.lst-arrows i.on { color: var(--orange); }
.lst-chips {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.lst-chips::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .lst-chips { flex-wrap: wrap; overflow: visible; } }
.lst-chips a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--page);
  border: 1.5px solid transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.lst-chips a:hover { border-color: var(--line); }
.lst-chips a.on { background: #FFF0E3; border-color: var(--orange); color: var(--orange-dark); }
.lst-chips a.on::before { content: "✓"; margin-right: 5px; font-weight: 800; }
.lst-chips .lst-clear { background: none; color: var(--orange-dark); text-decoration: underline; }
@media (pointer: coarse) { .lst-chips a { min-height: 40px; } }
html[data-theme="dark"] .lst-chips a.on { background: #3A2716; color: #FFA24A; }
/* Keeps the screen-reader text inside the scrolling row, not past the page edge. */
.lst-sorts, .lst-sorts a { position: relative; }

/* =====================================================================
   Homepage: ranked Best sellers row and the "See more" feed button
   ===================================================================== */

.best {
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px 12px 14px;
  margin: 0 0 12px;
}
.best-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.best-head h2 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 18px; }
.best-head h2 svg { width: 22px; height: 22px; fill: #F5B400; }
.best-head a { color: var(--grey); font-size: 13px; font-weight: 600; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.best-head a:hover { color: var(--orange-dark); }
.best-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.best-strip::-webkit-scrollbar { display: none; }
.best-card { flex: none; width: 132px; scroll-snap-align: start; }
@media (min-width: 900px) { .best-card { width: calc((100% - 90px) / 10); min-width: 112px; } }
.best-card a { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.best-img {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--page);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--grey-light);
}
.best-img img { width: 100%; height: 100%; object-fit: cover; }
.best-rank {
  position: absolute;
  left: 0; top: 0;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-bottom-right-radius: 10px;
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.top-1 .best-rank { background: linear-gradient(135deg, #F7C948, #E09F00); color: #3B2600; }
.top-2 .best-rank { background: linear-gradient(135deg, #E3E7EC, #A9B2BC); color: #23292F; }
.top-3 .best-rank { background: linear-gradient(135deg, #E9A877, #B8662F); color: #fff; }
.best-name {
  font-size: 12.5px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.best-price { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.best-price b { color: var(--price); font-size: 15px; }
.best-price small { color: var(--grey); font-size: 11.5px; }

.more-wrap { display: flex; justify-content: center; padding: 16px 0 6px; }
.more-btn {
  min-width: 220px;
  min-height: 46px;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-weight: 700;
}
.more-btn:hover { box-shadow: inset 0 0 0 1.5px var(--orange); color: var(--orange-dark); }
.more-btn[aria-busy="true"] { opacity: .7; }

/* =====================================================================
   Search: suggestions under the box, recent and popular searches
   ===================================================================== */

.search { position: relative; }
.suggest {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 6px 0;
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 0 0 1px var(--line);
  text-align: left;
}
.sg-h { padding: 8px 14px 4px; font-size: 12px; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: .03em; }
.sg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 14px;
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
}
.sg-row:hover, .sg-row:focus { background: var(--page); outline: none; }
.sg-row > svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--grey); stroke-width: 2; stroke-linecap: round; }
.sg-row small { color: var(--grey); font-size: 12px; margin-left: 4px; }
.sg-all b { color: var(--orange-dark); }
.sg-thumb { flex: none; width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--page); }
.sg-thumb img, .sg-thumb i { display: block; width: 100%; height: 100%; object-fit: cover; }
.sg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-price { color: var(--price); font-size: 14px; }

.sr-terms { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-recent-head { display: flex; justify-content: space-between; align-items: center; }
.sr-recent-head h2 { margin: 0 0 10px; }
.sr-fire { width: 20px; height: 20px; fill: var(--orange); vertical-align: -3px; margin-right: 6px; }

/* =====================================================================
   Account extras: wishlist price drops, addresses, browsing history
   ===================================================================== */

.wl-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, #FFF0E3, #FFE2C7);
  color: #8A3B00;
  font-size: 14px;
  text-decoration: none;
}
.wl-alert svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--price); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wl-alert span { flex: 1; }
.wl-alert i { font-style: normal; font-size: 20px; }
html[data-theme="dark"] .wl-alert { background: linear-gradient(90deg, #3A2318, #3A2716); color: #FFB37A; }

.wl-chips { margin-bottom: 10px; padding-top: 0; }
.wl-n { margin-left: 5px; font-size: 12px; opacity: .7; }
.wl-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}
.wl-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--grey); }
.wl-sort select {
  min-height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}
.wl-grow { flex: 1; }
.wl-bar .btn { min-height: 40px; border-radius: 999px; padding-inline: 16px; font-size: 14px; }
.wl-remove[disabled] { opacity: .45; cursor: not-allowed; }
.wl-item { display: grid; gap: 4px; align-content: start; }
.wl-meta { display: grid; gap: 3px; padding: 0 2px; font-size: 12px; }
.wl-drop { color: var(--green); font-weight: 700; }
.wl-low { color: var(--price); font-weight: 700; }
.wl-pick { display: flex; align-items: center; gap: 6px; color: var(--grey); cursor: pointer; min-height: 30px; }
.wl-pick input { width: 17px; height: 17px; accent-color: var(--orange); margin: 0; }
@media (pointer: coarse) { .wl-pick { min-height: 40px; } .wl-pick input { width: 20px; height: 20px; } }

.adr-list { display: grid; gap: 10px; margin-bottom: 12px; }
@media (min-width: 900px) { .adr-list { grid-template-columns: 1fr 1fr; } }
.adr-card { border: 1.5px solid transparent; }
.adr-card.is-default { border-color: var(--orange); }
.adr-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.adr-card header b { font-size: 15px; }
.adr-label, .adr-default {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--page);
  color: var(--grey);
}
.adr-default { background: #FFF0E3; color: var(--orange-dark); }
html[data-theme="dark"] .adr-default { background: #3A2716; color: #FFA24A; }
.adr-card p { margin: 2px 0; font-size: 14px; line-height: 1.5; }
.adr-card footer { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.adr-card footer form { margin: 0; }
.adr-act {
  border: 0; background: none; padding: 0; min-height: 36px;
  color: var(--orange-dark); font: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
}
.adr-del { color: var(--grey); }
.adr-grid { display: grid; gap: 10px 12px; }
@media (min-width: 600px) { .adr-grid { grid-template-columns: 1fr 1fr; } .adr-grid .wide { grid-column: 1 / -1; } }
.adr-grid label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; }
.adr-grid .opt { color: var(--grey-light); font-weight: 400; }
.adr-grid input {
  width: 100%; min-height: 44px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 16px;
}
.adr-grid input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(251,119,1,.18); }
.adr-form .ac-check { display: flex; gap: 8px; align-items: center; margin: 12px 0; font-size: 14px; }
.adr-form .ac-check input { width: 18px; height: 18px; accent-color: var(--orange); }
.adr-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.adr-btns .btn, .adr-add { border-radius: 999px; min-height: 46px; }

.hi-clear { margin-left: auto; }
.ac-back:has(.hi-clear) { display: flex; align-items: center; }
.hi-day h2 { font-size: 15px; margin: 14px 0 8px; color: var(--grey); }
.hi-remove { margin: 0; }
.hi-remove .linkbtn { font-size: 12.5px; color: var(--grey); min-height: 30px; }
.hi-strip { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.hi-strip::-webkit-scrollbar { display: none; }
.hi-strip li { flex: none; width: 88px; }
.hi-strip a { display: grid; gap: 4px; text-decoration: none; }
.hi-img {
  aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--page);
  display: grid; place-items: center; font-weight: 800; color: var(--grey-light);
}
.hi-img img { width: 100%; height: 100%; object-fit: cover; }
.hi-strip b { color: var(--price); font-size: 13.5px; }
@media (pointer: coarse) {
  .adr-act { min-height: 44px; padding: 0 4px; }
  .wl-sort select { font-size: 16px; min-height: 42px; }
}

/* =====================================================================
   Coupons page: savings banner, redeem box, tabs, min-spend bar
   ===================================================================== */

.cpx-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 16px 18px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(120deg, #FB4A11, #FB7701 55%, #FFA24A);
}
.cpx-hero b { display: block; font-size: 18px; }
.cpx-hero span { font-size: 13.5px; opacity: .95; }
.cpx-hero-ic svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }

.cpx-redeem {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
  padding: 6px;
  border-radius: 999px;
  background: var(--card);
  border: 1.5px dashed var(--orange);
}
.cpx-redeem input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  text-transform: uppercase;
}
.cpx-redeem input::placeholder { text-transform: none; color: var(--grey-light); }
.cpx-redeem input:focus { outline: none; }
.cpx-redeem .btn { border-radius: 999px; min-height: 40px; padding-inline: 20px; }

.cpx-tabs { margin: 0 0 12px; background: var(--card); border-radius: var(--radius); padding: 0 6px; }
.cpx-n { font-weight: 600; color: var(--grey); }
.cpx-n.hot { color: var(--price); }

.cpx-min { display: grid; gap: 4px; margin: 6px 0 2px; max-width: 280px; }
.cpx-bar { height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; }
.cpx-bar i { display: block; height: 100%; background: var(--orange); border-radius: 99px; }
.cpx-min small { font-size: 12px; color: var(--orange-dark); font-weight: 600; }
.cp-exp.soon .countdown { font-variant-numeric: tabular-nums; font-weight: 800; }
/* The scrolling tab row must not widen the account column on narrow phones. */
.ac-main > * { min-width: 0; max-width: 100%; }

/* Product page: round back arrow over the photo on phones. */
.gallery { position: relative; }
.pdp-back { display: none; }
@media (max-width: 699px) {
  .pdp-back {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .92);
    color: #1D1D1F;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
  }
  .pdp-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  html[data-theme="dark"] .pdp-back { background: rgba(28, 28, 30, .88); color: #ECECEC; }
}

/* =====================================================================
   Basket: delete selected, discount tags, coupon chips
   ===================================================================== */

.bk-selrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }
.bk-selrow .select-all { border-bottom: 0; flex: 1; }
.bk-delsel { color: var(--grey); font-size: 13px; font-weight: 600; }
.bk-delsel:not([disabled]):hover { color: var(--price); }
.bk-delsel[disabled] { opacity: .45; cursor: not-allowed; }
.bl-off {
  align-self: center;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--price);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
}
.bk-coupons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.bk-coupons > span { width: 100%; font-size: 12.5px; font-weight: 700; color: var(--grey); }
.bk-cpn {
  display: inline-grid;
  gap: 1px;
  padding: 6px 12px;
  border: 1.5px dashed var(--orange);
  border-radius: 8px;
  background: #FFF6EE;
  color: var(--orange-dark);
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
}
.bk-cpn b { font-size: 13px; }
.bk-cpn i { font-style: normal; font-size: 11px; letter-spacing: .04em; color: var(--grey); }
.bk-cpn:hover { background: #FFEBD9; }
html[data-theme="dark"] .bk-cpn { background: #2A1F15; }
html[data-theme="dark"] .bk-cpn:hover { background: #3A2716; }
.bk-summary .co-off-amt { color: var(--price); }

/* =====================================================================
   Returns page: tiles, how-it-works steps, days left
   ===================================================================== */

.rtx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0 0 12px; border-radius: var(--radius); overflow: hidden; background: var(--line); }
.rtx-tiles a { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; background: var(--card); color: var(--ink); text-decoration: none; text-align: center; }
.rtx-tiles b { font-size: 17px; }
.rtx-tiles span { font-size: 12px; color: var(--grey); }
.rtx-how summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 32px; }
.rtx-how summary::-webkit-details-marker { display: none; }
.rtx-how summary::after { content: "⌄"; font-size: 20px; color: var(--grey); }
.rtx-how[open] summary::after { content: "⌃"; }
.rtx-how summary h2 { margin: 0; }
.rtx-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: none; }
@media (min-width: 700px) { .rtx-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rtx-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: start; }
.rtx-steps span {
  grid-row: span 2;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--orange); color: #fff; font-weight: 800; font-size: 13px;
}
.rtx-steps b { font-size: 14px; }
.rtx-steps small { color: var(--grey); font-size: 12.5px; line-height: 1.4; }
.rtx-left { font-style: normal; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--page); color: var(--grey); font-size: 11.5px; font-weight: 700; }
.rtx-left.soon { background: #FFEDE8; color: var(--price); }
html[data-theme="dark"] .rtx-left.soon { background: #3A2318; color: #FF7A55; }
.rtx-left { display: inline-block; white-space: nowrap; margin-top: 2px; }

/* =====================================================================
   Footer, Temu layout: link columns, side panel with other marketplaces
   and socials, safe-payment badges and "We accept" logos, Top button
   ===================================================================== */

.foot-grid { gap: 26px; padding-top: 6px; }
@media (min-width: 700px) {
  .foot-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (min-width: 1000px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(300px, 1.35fr); }
  .foot-grid .foot-side { grid-column: -2 / -1; grid-row: 1; }
}
.foot-grid .foot-col h3, .foot-side h3 { font-size: 15px; margin: 0 0 12px; }
.foot-grid .foot-col ul { gap: 11px; }
.foot-grid .foot-col a { font-size: 14px; }
.foot-side { display: grid; gap: 16px; align-content: start; }
.foot-side .foot-brand p { margin: 4px 0 0; }

.foot-markets {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(135deg, rgba(251,119,1,.16), rgba(251,119,1,.04));
}
.foot-mk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.foot .foot-mk {
  display: grid;
  justify-items: start;
  gap: 0;
  padding: 8px 14px;
  min-height: 52px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  text-decoration: none;
  border: 1px solid #fff;
  transition: transform .15s ease;
}
.foot .foot-mk:hover { color: #111; transform: translateY(-1px); }
.foot-mk small { font-size: 11px; color: #555; line-height: 1.1; }
.foot-mk b { font-size: 22px; line-height: 1.05; letter-spacing: -.02em; }
.mk-ebay { font-family: Arial, Helvetica, sans-serif; font-weight: 800; }
.mk-ebay i { font-style: normal; }
.mk-ebay i:nth-child(1) { color: #E53238; }
.mk-ebay i:nth-child(2) { color: #0064D2; }
.mk-ebay i:nth-child(3) { color: #F5AF02; }
.mk-ebay i:nth-child(4) { color: #86B817; }
.mk-amazon {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  color: #111;
  position: relative;
  padding-bottom: 4px;
}
.mk-amazon::after {   /* an orange swoosh under the word */
  content: "";
  position: absolute;
  left: 4px; right: 10px; bottom: 0;
  height: 6px;
  border-bottom: 2.5px solid #FF9900;
  border-radius: 0 0 50% 50%;
}
.foot-connect { margin-bottom: 0 !important; }
.foot-side .foot-social { margin: 0; }

.foot-trust {
  display: grid;
  gap: 18px;
  padding-top: 20px;
  margin-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
}
@media (min-width: 900px) { .foot-trust { grid-template-columns: 1fr 1fr; } }
.foot-trust h3 { font-size: 15px; margin: 0 0 10px; }
.foot-badges, .foot-paylogos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.foot-badges li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 6px;
  background: #fff; color: #1D1D1F;
  font-size: 12.5px; font-weight: 700;
}
.foot-badges svg { width: 16px; height: 16px; fill: none; stroke: #0A8A3C; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 32px; padding: 0 9px;
  border-radius: 5px; background: #fff; color: #1D1D1F;
  font-family: Arial, Helvetica, sans-serif; font-size: 13px;
}
.pl b { font-weight: 800; }
.pl em { font-style: normal; }
.pl-visa b { color: #1A1F71; font-style: italic; font-size: 15px; letter-spacing: .02em; }
.pl-mastercard { gap: 0; }
.pl-mastercard i { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.pl-mastercard i:first-child { background: #EB001B; }
.pl-mastercard i:nth-child(2) { background: #F79E1B; margin-left: -7px; mix-blend-mode: multiply; }
.pl-amex { background: #2E77BC; }
.pl-amex b { color: #fff; letter-spacing: .04em; }
.pl-applepay { background: #000; }
.pl-applepay b { color: #fff; }
.pl-googlepay em { color: #4285F4; }
.pl-paypal b { color: #003087; font-style: italic; }
.pl-paypal em { color: #009CDE; }
.pl-word { font-family: inherit; font-weight: 700; font-size: 12px; }

.to-top { display: none; }
@media (min-width: 900px) {
  .to-top:not([hidden]) {
    position: fixed;
    right: 18px;
    bottom: 24px;
    z-index: 40;
    display: grid;
    justify-items: center;
    gap: 0;
    width: 56px;
    padding: 8px 0 6px;
    border-radius: 12px;
    background: var(--card);
    color: var(--ink);
    box-shadow: 0 4px 18px rgba(0,0,0,.18), 0 0 0 1px var(--line);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
  }
  .to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .to-top:hover { color: var(--orange-dark); }
}
/* `.foot ul` (a vertical grid for link columns) must not stack these rows. */
.foot .foot-badges, .foot .foot-paylogos, .foot .foot-social { display: flex; flex-wrap: wrap; gap: 8px; }
.foot .foot-social { gap: 10px; }

/* =====================================================================
   Order page: the "Order placed!" moment right after checkout
   ===================================================================== */

.op-placed {
  position: relative;
  overflow: hidden;
  margin: 12px 0;
  padding: 26px 18px 20px;
  border-radius: 16px;
  text-align: center;
  color: #fff;
  background: linear-gradient(160deg, #0A8A3C, #22A65A 60%, #3CC277);
}
.op-placed h1 { margin: 10px 0 4px; font-size: 26px; }
.op-placed > p { margin: 0 auto; max-width: 46ch; font-size: 14.5px; opacity: .95; line-height: 1.5; }
.op-placed-ic {
  width: 64px; height: 64px; margin: 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 8px rgba(255,255,255,.25);
  animation: op-pop .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.op-placed-ic svg { width: 36px; height: 36px; fill: none; stroke: #0A8A3C; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes op-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Confetti: a few coloured bits drifting down once, then gone. */
.op-confetti { position: absolute; inset: 0; pointer-events: none; }
.op-confetti i {
  position: absolute;
  top: -12px;
  width: 7px; height: 12px;
  border-radius: 2px;
  opacity: 0;
  animation: op-fall 2.4s ease-in forwards;
}
.op-confetti i:nth-child(3n)   { background: #FFD24A; }
.op-confetti i:nth-child(3n+1) { background: #FB7701; }
.op-confetti i:nth-child(3n+2) { background: #fff; }
.op-confetti i:nth-child(1) { left: 33.4%; animation-delay: 0.14s; transform: rotate(23deg); }
.op-confetti i:nth-child(2) { left: 7.5%; animation-delay: 0.74s; transform: rotate(-48deg); }
.op-confetti i:nth-child(3) { left: 37.4%; animation-delay: 0.05s; transform: rotate(4deg); }
.op-confetti i:nth-child(4) { left: 23.2%; animation-delay: 0.08s; transform: rotate(-7deg); }
.op-confetti i:nth-child(5) { left: 9.6%; animation-delay: 0.08s; transform: rotate(-6deg); }
.op-confetti i:nth-child(6) { left: 8.6%; animation-delay: 0.51s; transform: rotate(-32deg); }
.op-confetti i:nth-child(7) { left: 62.3%; animation-delay: 0.52s; transform: rotate(-53deg); }
.op-confetti i:nth-child(8) { left: 57.2%; animation-delay: 0.36s; transform: rotate(-32deg); }
.op-confetti i:nth-child(9) { left: 7.4%; animation-delay: 0.77s; transform: rotate(-23deg); }
.op-confetti i:nth-child(10) { left: 42.4%; animation-delay: 0.49s; transform: rotate(13deg); }
.op-confetti i:nth-child(11) { left: 32.0%; animation-delay: 0.73s; transform: rotate(-37deg); }
.op-confetti i:nth-child(12) { left: 12.7%; animation-delay: 0.51s; transform: rotate(-36deg); }
.op-confetti i:nth-child(13) { left: 38.0%; animation-delay: 0.49s; transform: rotate(-52deg); }
.op-confetti i:nth-child(14) { left: 56.1%; animation-delay: 0.56s; transform: rotate(3deg); }
.op-confetti i:nth-child(15) { left: 67.0%; animation-delay: 0.38s; transform: rotate(-20deg); }
.op-confetti i:nth-child(16) { left: 46.8%; animation-delay: 0.83s; transform: rotate(-14deg); }
.op-confetti i:nth-child(17) { left: 31.2%; animation-delay: 0.71s; transform: rotate(29deg); }
.op-confetti i:nth-child(18) { left: 76.3%; animation-delay: 0.07s; transform: rotate(-22deg); }
@keyframes op-fall {
  0%   { opacity: 1; top: -12px; }
  100% { opacity: 0; top: 105%; transform: rotate(320deg); }
}
@media (prefers-reduced-motion: reduce) {
  .op-confetti { display: none; }
  .op-placed-ic { animation: none; }
}

.op-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0 16px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.3);
  text-align: center;
}
.op-facts div { padding: 10px 6px; background: rgba(255,255,255,.14); }
.op-facts dt { font-size: 11.5px; opacity: .9; }
.op-facts dd { margin: 3px 0 0; font-weight: 800; font-size: 14px; overflow-wrap: anywhere; }
.op-facts .oc-copy { margin-left: 4px; background: rgba(255,255,255,.9); color: #0A6B30; border-color: transparent; }
.op-facts .oc-copy-val { color: #fff; }
@media (max-width: 499px) {
  .op-facts { grid-template-columns: minmax(0, 1fr); }
}
.op-placed-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.op-placed-acts .btn { border-radius: 999px; min-height: 44px; min-width: 170px; background: #fff; color: #0A6B30; font-weight: 800; }
.op-placed-acts .btn-ghost { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75); }

.op-next ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 700px) { .op-next ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.op-next li { display: flex; gap: 10px; align-items: flex-start; }
.op-next li > span {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--orange); color: #fff; font-weight: 800; font-size: 13px;
}
.op-next b { display: block; font-size: 14px; }
.op-next small { color: var(--grey); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }

.op-join {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px; padding: 14px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1.5px dashed var(--orange);
  color: var(--ink); text-decoration: none;
}
.op-join svg { flex: none; width: 30px; height: 30px; fill: none; stroke: var(--orange); stroke-width: 1.8; }
.op-join span { flex: 1; display: grid; gap: 2px; }
.op-join small { color: var(--grey); font-size: 12.5px; }
.op-join i { font-style: normal; font-size: 22px; color: var(--orange-dark); }
#op-details { scroll-margin-top: 140px; }

/* Order page: Temu-style vertical tracking timeline, newest at the top. */
.op-tl-list { list-style: none; margin: 0; padding: 0; }
.op-tl-list li {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 16px;
}
.op-tl-list li:last-child { padding-bottom: 0; }
.op-tl-list li::before {   /* the line joining the dots */
  content: "";
  position: absolute;
  left: 10px; top: 16px; bottom: -2px;
  width: 2px;
  background: var(--line);
}
.op-tl-list li:last-child::before { display: none; }
.op-tl-dot {
  position: relative;
  z-index: 1;
  width: 12px; height: 12px;
  margin: 4px 0 0 5px;
  border-radius: 50%;
  background: var(--grey-light);
}
.op-tl-list li.now .op-tl-dot {
  width: 18px; height: 18px; margin: 1px 0 0 2px;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(10,138,60,.18);
}
.op-tl-list b { display: block; font-size: 14.5px; color: var(--grey); }
.op-tl-list li.now b { color: var(--green); font-size: 15.5px; }
.op-tl-list p { margin: 2px 0 0; font-size: 13px; color: var(--grey); line-height: 1.45; overflow-wrap: anywhere; }
.op-tl-list li.now p { color: var(--ink); }
.op-tl-list time { display: block; margin-top: 2px; font-size: 12px; color: var(--grey-light); }

/* Track page: orange hero, features, FAQ. */
.trk-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 760px;
  margin: 14px auto 0;
  padding: 22px 22px 46px;
  border-radius: 16px 16px 0 0;
  color: #fff;
  background: linear-gradient(120deg, #FB4A11, #FB7701 55%, #FFA24A);
}
.trk-hero h1 { margin: 0; font-size: 24px; }
.trk-hero p { margin: 4px 0 0; font-size: 14px; opacity: .95; }
.trk-hero svg { flex: none; width: 92px; height: 58px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.trk-hero + .trk-page { margin-top: -30px; max-width: 720px; padding: 0 12px; }
.trk-hero + .trk-page .trk-box { box-shadow: 0 8px 24px rgba(0,0,0,.12); }
@media (max-width: 499px) { .trk-hero svg { width: 64px; height: 40px; } .trk-hero h1 { font-size: 21px; } }
.trk-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 560px) { .trk-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trk-feats li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: center;
  padding: 12px; border-radius: var(--radius); background: var(--card);
}
.trk-feats svg { grid-row: span 2; width: 28px; height: 28px; fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trk-feats b { font-size: 13.5px; }
.trk-feats small { font-size: 12px; color: var(--grey); }
.trk-faq { background: var(--card); border-radius: var(--radius); padding: 14px 16px; }
.trk-faq h2 { font-size: 16px; margin: 0 0 4px; }
.trk-faq details { border-bottom: 1px solid var(--line); }
.trk-faq details:last-child { border-bottom: 0; }
.trk-faq summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; font-size: 14px; }
.trk-faq p { margin: 0 0 12px; color: var(--grey); font-size: 13.5px; line-height: 1.5; }
.trk-faq a { color: var(--orange-dark); font-weight: 600; }

/* =====================================================================
   Homepage: promise box, "Why choose" bar, feed tabs (Temu layout)
   ===================================================================== */

.hm-promise { margin: 10px 0 12px; }
.hm-promise-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #FFF1E3;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 10px 0;
}
.hm-promise-box a { padding: 2px 14px; min-width: 0; color: #222; }
.hm-promise-box a + a { border-left: 1px solid #F0D5BA; }
.hm-promise-box b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; }
.hm-promise-box .hm-ok { color: #0A8A0A; }
.hm-promise-box small { display: block; color: #666; font-size: 12.5px; margin-top: 2px; }
.hm-promise-box svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hm-promise-box .hm-ok svg { stroke-width: 3; }

.hm-why { background: #0A8A0A; color: #fff; border-radius: 0 0 var(--radius) var(--radius); }
.hm-why summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  min-height: 44px;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
}
.hm-why summary::-webkit-details-marker { display: none; }
.hm-why summary > span { display: inline-flex; align-items: center; gap: 8px; }
.hm-why summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hm-why-r { font-weight: 500; font-size: 14px; white-space: nowrap; }
.hm-why-arrow { display: inline-block; font-size: 18px; transition: transform .15s; }
.hm-why[open] .hm-why-arrow { transform: rotate(90deg); }
.hm-why ul { list-style: none; margin: 0; padding: 0 14px 12px; display: grid; gap: 8px; font-size: 13px; }
.hm-why li b { display: block; font-size: 14px; }
@media (min-width: 760px) { .hm-why ul { grid-template-columns: repeat(4, 1fr); } }

.hm-tabs {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 4px;
  margin: 0 0 8px;
  scroll-margin-top: 120px;
}
.hm-tabs::-webkit-scrollbar { display: none; }
.hm-tabs a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  padding: 10px 0 12px;
  min-height: 44px;
  font-size: 15px;
  color: var(--grey);
  white-space: nowrap;
}
.hm-tabs a.on { color: var(--ink); font-weight: 700; }
.hm-tabs a.on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 22px;
  height: 4px;
  border-radius: 4px;
  background: var(--ink);
  transform: translateX(-50%);
}
.hm-tabs svg { width: 17px; height: 17px; fill: currentColor; }

/* Category chips on the homepage read as Temu's underlined text tabs. */
.chips-row .chip { border: 0; background: none; color: var(--grey); padding: 8px 4px; font-size: 15px; font-weight: 500; position: relative; }
.chips-row .chips { gap: 18px; }
.chips-row .chip[aria-current="page"] { color: var(--ink); font-weight: 700; border: 0; padding: 8px 4px; }
.chips-row .chip[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 20px; height: 4px;
  border-radius: 4px; background: var(--ink); transform: translateX(-50%);
}
.chips-row .chip:hover { color: var(--ink); }

/* The search box: outlined pill with a dark round button. */
.search svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

html[data-theme="dark"] .hm-promise-box { background: #2B2118; }
html[data-theme="dark"] .hm-promise-box a { color: var(--ink); }
html[data-theme="dark"] .hm-promise-box a + a { border-left-color: #4A3828; }
html[data-theme="dark"] .hm-promise-box small { color: var(--grey); }
html[data-theme="dark"] .hm-promise-box .hm-ok { color: #3DCB5B; }
html[data-theme="dark"] .hm-why { background: #0B6E1A; }
@media (max-width: 420px) {
  .hm-promise-box a { padding-inline: 10px; }
  .hm-promise-box b { font-size: 13.5px; gap: 5px; white-space: nowrap; }
  .hm-promise-box svg { width: 17px; height: 17px; }
  .hm-promise-box small { font-size: 12px; }
  .hm-why summary { font-size: 14px; padding-inline: 12px; }
  .hm-why-r { font-size: 13px; }
}
.hm-tabs a, .chips-row .chip { min-width: 44px; justify-content: center; }
@media (max-width: 359px) {
  .trend-price { gap: 2px 4px; }
  .trend-price .price { font-size: 15.5px; }
  .trend-was { font-size: 11px; }
  .trend-add { width: 34px; }
}

/* =====================================================================
   White header (Temu style): brand colour only on the name and accents.
   ===================================================================== */
.masthead { background: var(--card); border-bottom: 1px solid var(--line); }
.masthead .wordmark:not(.logo) { color: var(--orange); background: none; padding-inline: 0; }
.masthead .wordmark.logo { background: none; padding-inline: 0; }
/* At night an icon logo sits straight on the dark header with the name in
   light text. Only a wide logo (the name drawn inside the picture, often in
   dark ink) keeps a light plate, or its lettering would disappear. */
html[data-theme="dark"] .masthead .wordmark.logo:not(.logo-square) { background: #fff; padding-inline: 9px; }
.masthead .wordmark-name { color: var(--ink); }
html[data-theme="dark"] .masthead .wordmark.logo-square img { filter: drop-shadow(0 0 1px rgba(255,255,255,.25)); }
.masthead .basket-link,
.masthead .account-link,
.masthead .track-link { color: var(--ink); }
.masthead .basket-count { background: var(--orange); color: #fff; }
.masthead .theme-quick { background: var(--page); color: var(--ink); }
.masthead .theme-quick:hover { background: var(--line); }
.masthead .search { background: var(--card); border: 2px solid var(--ink); padding-left: 16px; }
html[data-theme="dark"] .masthead .search { background: var(--card); border-color: #D6D6D6; }
.masthead .search button { background: var(--ink); color: var(--card); }
html[data-theme="dark"] .masthead .search button { background: #D6D6D6; color: #1B1B1B; }
.foot-mark { display: flex; align-items: center; gap: 8px; }
.foot-mark img { width: auto; height: 30px; max-width: 44px; object-fit: contain; }

/* Admin-set badges: New arrival, Free delivery (product page and cards). */
.pdp-badges li.new { background: #E8F0FF; color: #1D4ED8; }
.pdp-badges li.free { background: var(--green-bg); color: var(--green); }
html[data-theme="dark"] .pdp-badges li.new { background: #1B2540; color: #8DB0FF; }
.trend-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 3px; }
.trend-badges span { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 3px; line-height: 1.5; }
.trend-badges .b-new { background: #E8F0FF; color: #1D4ED8; }
.trend-badges .b-best { background: #FFF0E3; color: #B45309; }
.trend-badges .b-free { background: var(--green-bg); color: var(--green); }
html[data-theme="dark"] .trend-badges .b-new { background: #1B2540; color: #8DB0FF; }
html[data-theme="dark"] .trend-badges .b-best { background: #3A2716; color: #FFA24A; }

/* UK cookie notice (layout.php + app.js). */
.cookie-note { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 640px; margin: 0 auto;
  display: flex; gap: 12px; align-items: center; background: var(--card); color: var(--ink);
  border-radius: var(--radius); padding: 12px 14px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.cookie-note[hidden] { display: none; }
.cookie-note p { margin: 0; font-size: .9rem; line-height: 1.4; flex: 1; }
.cookie-note a { text-decoration: underline; }
@media (max-width: 699px) { .cookie-note { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
/* Consent notice when Ad Manager tags are on (layout.php, ads.js). Accept and
   Reject look the same: refusing must be as easy as agreeing. */
.consent-note { flex-wrap: wrap; }
.consent-note p { flex: 1 1 100%; }
.consent-choices { display: flex; flex-direction: column; gap: 6px; flex: 1 1 100%; font-size: .9rem; }
.consent-choices[hidden], .consent-btns [hidden] { display: none; }
.consent-choices label { display: flex; gap: 8px; align-items: center; }
.consent-gpc { color: var(--grey); font-size: .8rem; }
.consent-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* Free-delivery bar inside the "Added to basket" sheet (templates/_freeship.php). */
.sheet-done .fs-bar { margin: 4px 0 14px; text-align: left; }
.fs-bar[hidden] { display: none; }

/* =====================================================================
   AED / USD price switch (UAE shop, browsing pages; templates/_ccy-switch.php)
   ===================================================================== */
.ccy-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--page); }
.ccy-switch a {
  padding: 6px 10px; border-radius: 999px; line-height: 1;
  font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none;
}
.ccy-switch a:hover { background: var(--line); }
.ccy-switch a[aria-pressed="true"] { background: var(--orange); color: #fff; }
.ccy-head { display: none; }
@media (min-width: 700px) {
  .masthead .wrap:has(.ccy-head) {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto auto;
    grid-template-areas: "brand search track account ccy theme basket";
  }
  .ccy-head { display: inline-flex; grid-area: ccy; }
}