/* Pick of Trend — storefront v2: header departments, home page, category
 * landing pages and product filters. Loads after pot.css, pot-woo.css and
 * pot-pages.css and uses the same tokens.
 */

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

.hdr { position: relative; z-index: 30; }
.hdr-in { gap: 36px; }
.nav { align-items: stretch; gap: 4px; height: 100%; min-width: 0; }
.nav > a, .nav-link {
  display: flex; align-items: center; height: 100%; padding: 0 12px; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--ink); border-bottom: 2px solid transparent;
}
.nav > a.all { color: var(--acc); }
.nav-link.on { color: var(--acc); border-bottom-color: var(--acc); }
.nav-item { position: relative; display: flex; }
.nav-item.has-sub > .nav-link::after {
  content: ""; width: 6px; height: 6px; margin: -3px 0 0 8px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); opacity: 0.55;
}
.nav-sub {
  position: absolute; top: 100%; left: 0; padding-top: 0; min-width: 230px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.nav-item:hover > .nav-sub,
.nav-item:focus-within > .nav-sub { opacity: 1; visibility: visible; transform: none; transition: opacity 0.15s ease, transform 0.15s ease; }
.nav-sub-in {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px;
  box-shadow: 0 18px 40px -18px rgba(23, 20, 15, 0.28); display: flex; flex-direction: column;
}
.nav-sub a { padding: 9px 12px; border-radius: 5px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.nav-sub a:hover, .nav-sub a:focus-visible { background: var(--sunk); color: var(--ink); }
.nav-sub a.nav-sub-all { font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); border-radius: 5px 5px 0 0; margin-bottom: 4px; }

.drawer-group { border-bottom: 1px solid var(--line); padding: 4px 0 10px; }
.drawer-panel .drawer-group a { border-bottom: 0; }
.drawer-panel .drawer-top { display: block; padding: 12px 6px 6px; font-size: 17px; font-weight: 700; }
.drawer-sub { display: flex; flex-direction: column; }
.drawer-panel .drawer-sub a { padding: 8px 6px 8px 16px; font-size: 15px; font-weight: 500; color: var(--ink-2); }

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

.card-img img { height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.card-body { gap: 8px; }
.card-t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.grid-4 .card-t { font-size: 15px; }
.grid-4 .card .prices .price ins,
.grid-4 .card .prices .price > .woocommerce-Price-amount { font-size: 22px; }
.grid-4 .card-body { padding: 14px 14px 16px; }
.grid-4 .blurb { display: none; }

/* --------------------------------------------------------------- home */

.pot-home .sec-head .eyebrow { margin-bottom: 10px; }
.h-sec { padding-top: 88px; }

.h-hero { background: var(--sunk); border-bottom: 1px solid var(--line); }
.h-hero-in {
  max-width: var(--maxw); margin: 0 auto; padding: 56px var(--gut) 60px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center;
}
.h-hero-copy { display: flex; flex-direction: column; gap: 24px; }
.h-hero-copy h1 {
  margin: 0; font-family: var(--disp); font-size: 68px; line-height: 0.97; letter-spacing: -0.035em; font-weight: 800; text-wrap: balance;
}
.h-hero-copy .lede { max-width: 500px; font-size: 18px; }
.h-hero-points { list-style: none; margin: 6px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; gap: 10px 26px; }
.h-hero-points li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.h-hero-points svg { color: var(--acc); }

.h-stage { position: relative; aspect-ratio: 1 / 1.02; max-height: 600px; width: 100%; border-radius: 14px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.h-stage .hero-slides { position: absolute; inset: 0; }
.h-slide { display: block; }
/* The whole product stays visible above the info card: supplier photos are
   square and often have the product near an edge, so never crop them. */
.h-slide-img { position: absolute; inset: 0 0 118px; display: block; background: #fff; padding: 22px 22px 0; }
.h-slide-img img {
  width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 0;
  transform: scale(1.04); transition: transform 3.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.h-slide.is-active .h-slide-img img { transform: scale(1); }
.h-slide-card {
  position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2;
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(23, 20, 15, 0.08); border-radius: 10px;
  transform: translateY(12px); opacity: 0;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s, opacity 0.5s ease 0.15s;
}
.h-slide.is-active .h-slide-card { transform: none; opacity: 1; }
.h-slide-name { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.h-slide-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 2px; }
.h-slide-price .price, .h-slide-price { margin: 0; font-family: var(--disp); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.h-slide-price del { font-size: 13px; color: var(--ink-3); font-family: var(--text); font-weight: 400; }
.h-slide-price ins { text-decoration: none; }
.h-slide-go { font-size: 13px; font-weight: 700; color: var(--acc); white-space: nowrap; }
.h-slide:hover .h-slide-card { border-color: var(--acc); }
.h-stage .hero-controls { position: absolute; top: 16px; right: 16px; left: auto; bottom: auto; z-index: 3; }

/* departments */
.h-depts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.h-depts.count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.h-depts.count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.h-depts.count-1 { grid-template-columns: minmax(0, 1fr); }
.h-dept { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.h-dept:hover { border-color: var(--ink); box-shadow: 0 16px 34px -22px rgba(23, 20, 15, 0.35); }
.h-dept-img { display: block; background: var(--sunk); aspect-ratio: 4 / 3; overflow: hidden; }
.h-dept-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.h-dept:hover .h-dept-img img { transform: scale(1.04); }
.h-dept-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.h-dept h3 { margin: 0; font-family: var(--disp); font-size: 23px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
.h-dept h3 a { color: var(--ink); }
.h-dept h3 a:hover { color: var(--acc); }
.h-dept-meta { margin: 0; font-size: 13px; color: var(--ink-3); }
.h-dept-subs { list-style: none; margin: 8px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; }
.h-dept-subs a { display: inline-flex; padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.h-dept-subs a:hover { border-color: var(--ink); color: var(--ink); }

.h-row-intro { margin: 8px 0 0; max-width: 560px; font-size: 15px; color: var(--ink-3); line-height: 1.5; }
.h-row .sec-head h2 { font-size: 36px; }

/* shop with confidence */
.h-trust { background: var(--ink); color: var(--bg); border-radius: 14px; padding: 52px 52px 56px; }
.h-trust-head { max-width: 620px; margin-bottom: 36px; }
.h-trust-head h2 { margin: 10px 0 0; font-family: var(--disp); font-size: 38px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.h-trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.h-trust-item { display: flex; flex-direction: column; gap: 8px; padding-top: 22px; border-top: 1px solid var(--line-dark); }
.h-trust-ico { color: var(--acc); }
.h-trust-item h3 { margin: 4px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.h-trust-item p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-4); flex-grow: 1; }
.h-trust-item a { font-size: 13px; font-weight: 700; color: var(--bg); padding-top: 4px; }
.h-trust-item a:hover { color: var(--acc); }

/* -------------------------------------------------- category landing */

.cat-hero { padding-top: 26px; }
.cat-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; padding: 26px 0 8px; }
.cat-hero-grid.has-art { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.cat-hero-copy h1 { margin: 12px 0 0; font-family: var(--disp); font-size: 60px; font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; text-wrap: balance; }
.cat-intro { margin: 16px 0 0; max-width: 620px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.cat-intro p { margin: 0 0 8px; }
.cat-facts { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cat-facts li { padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--card); }

.cat-hero-art { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.cat-hero-art span { display: block; border-radius: 10px; overflow: hidden; background: var(--sunk); border: 1px solid var(--line); aspect-ratio: 3 / 4; }
.cat-hero-art span img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-hero-art .art-1 { aspect-ratio: 3 / 4.6; }
.cat-hero-art.count-1 { grid-template-columns: minmax(0, 1fr); max-width: 320px; justify-self: end; }
.cat-hero-art.count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; padding-top: 34px; }
.cat-tile { display: flex; flex-direction: column; gap: 3px; padding: 10px 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.cat-tile:hover { border-color: var(--ink); }
.cat-tile-img { display: block; aspect-ratio: 1 / 1; border-radius: 7px; overflow: hidden; background: var(--sunk); margin-bottom: 8px; }
.cat-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-tile-t { font-size: 15px; font-weight: 700; color: var(--ink); padding: 0 4px; }
.cat-tile-n { font-size: 12px; color: var(--ink-3); padding: 0 4px; }

.cat-body { padding-top: 40px; }
.cat-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
.cat-layout.has-filters { grid-template-columns: 264px minmax(0, 1fr); }

.cat-toolbar { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 20px; flex-wrap: wrap; }
.cat-count { margin: 0; font-size: 14px; color: var(--ink-3); flex-grow: 1; }
.cat-sort { display: flex; gap: 8px; }
.cat-sort select {
  height: 42px; padding: 0 38px 0 14px; border: 1.5px solid var(--line-2); border-radius: 6px; background-color: var(--card);
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2317140f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.cat-sort select:hover, .cat-sort select:focus { border-color: var(--ink); outline: none; }
.btn-filter { display: none; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--card); font-size: 14px; font-weight: 700; color: var(--ink); }
.btn-filter-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--acc); color: #fff; font-size: 11px; }

.grid-listing { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-listing .card-t { font-size: 15px; }
.grid-listing .card .prices .price ins,
.grid-listing .card .prices .price > .woocommerce-Price-amount { font-size: 22px; }
.grid-listing .card-body { padding: 14px 14px 16px; }

.flt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 20px; }
.flt-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; background: var(--ink); color: var(--bg); border-radius: 999px; font-size: 13px; font-weight: 600; }
.flt-chip span { font-size: 16px; line-height: 1; opacity: 0.7; }
.flt-chip:hover { background: var(--acc); color: #fff; }
.flt-clear { font-size: 13px; font-weight: 700; color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }

.cat-empty { text-align: center; padding: 64px 24px; border: 1px dashed var(--line-2); border-radius: 12px; background: var(--card); }
.cat-empty h2 { margin: 0 0 8px; font-family: var(--disp); font-size: 28px; letter-spacing: -0.02em; }
.cat-empty p { margin: 0 0 20px; color: var(--ink-3); }

/* ------------------------------------------------------------- filters */

.cat-filters { position: sticky; top: 20px; }
.flt-backdrop { display: none; }
.flt { background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.flt-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.flt-head h2 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; flex-grow: 1; }
.flt-close { display: none; width: 36px; height: 36px; border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--ink); }
.flt-body { max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; }
.flt-foot { display: none; }

.flt-group { border-bottom: 1px solid var(--line); }
.flt-group:last-child { border-bottom: 0; }
.flt-group > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 15px 18px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}
.flt-group > summary::-webkit-details-marker { display: none; }
.flt-group > summary::after {
  content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.8px solid var(--ink-3); border-bottom: 1.8px solid var(--ink-3);
  transform: rotate(45deg) translateY(-2px); transition: transform 0.15s ease;
}
.flt-group[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.flt-sel { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--acc); color: #fff; font-size: 10.5px; letter-spacing: 0; }

.flt-links, .flt-checks { list-style: none; margin: 0; padding: 0 10px 14px; }
.flt-links a, .flt-checks label {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; font-size: 14px; color: var(--ink-2); cursor: pointer; line-height: 1.3;
}
.flt-links a:hover, .flt-checks label:hover { background: var(--sunk); color: var(--ink); }
.flt-links a.is-on { color: var(--ink); font-weight: 700; }
.flt-links a.is-empty, .flt-checks li.is-empty label { opacity: 0.45; }
.flt-checks li.is-empty label { cursor: default; }
.flt-n { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.flt-label { min-width: 0; overflow-wrap: anywhere; }
.flt-checks.is-long { max-height: 260px; overflow-y: auto; }

.flt-checks input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.flt-box, .flt-radio { flex-shrink: 0; width: 18px; height: 18px; border: 1.6px solid var(--line-2); border-radius: 4px; background: #fff; position: relative; transition: background 0.12s ease, border-color 0.12s ease; }
.flt-radio { border-radius: 50%; }
.flt-checks input:checked + label .flt-box { background: var(--ink); border-color: var(--ink); }
.flt-checks input:checked + label .flt-box::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg);
}
.flt-links a.is-on .flt-radio { border-color: var(--ink); }
.flt-links a.is-on .flt-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink); }
.flt-checks input:focus-visible + label { outline: 2px solid var(--acc); outline-offset: 1px; }
.flt-checks input:checked + label { color: var(--ink); font-weight: 700; }

.flt-swatch { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(23, 20, 15, 0.18); position: relative; }
.flt-checks input:checked + label .flt-swatch { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }

.flt-price-inputs { display: flex; align-items: center; gap: 6px; padding: 0 18px 16px; }
.flt-price-inputs label { position: relative; flex: 1; min-width: 0; }
.flt-cur { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--ink-3); pointer-events: none; }
.flt-price-inputs input { width: 100%; height: 38px; padding: 0 8px 0 22px; border: 1.5px solid var(--line-2); border-radius: 6px; font: inherit; font-size: 14px; background: #fff; color: var(--ink); -moz-appearance: textfield; }
.flt-price-inputs input::-webkit-outer-spin-button, .flt-price-inputs input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.flt-price-inputs input:focus { outline: none; border-color: var(--ink); }
.flt-to { color: var(--ink-3); }
.flt-go { height: 38px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 700; }
.flt-go:hover { background: var(--acc); }

/* ---------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  .hdr-in { gap: 20px; }
  .nav > a, .nav-link { padding: 0 8px; font-size: 13.5px; }
  .h-hero-copy h1 { font-size: 54px; }
  .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 > .card:nth-child(n+7) { display: none; }
  .h-depts, .h-depts.count-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-layout.has-filters { grid-template-columns: 236px minmax(0, 1fr); gap: 26px; }
  .grid-listing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-hero-copy h1 { font-size: 50px; }
}

@media (max-width: 900px) {
  .hdr-in { gap: 10px; }
  /* Match the cart pill's height to the icon buttons (burger/search/account
     are all 44px here) so the whole row shares one edge-to-edge height
     instead of the pill sitting 2px shorter than its neighbours. */
  .cartbtn { height: 44px; }
  .nav-sub { display: none; }
  .h-sec { padding-top: 52px; }
  .h-hero-in { grid-template-columns: minmax(0, 1fr); padding: 26px var(--gut) 34px; gap: 26px; }
  .h-hero-copy { order: 2; gap: 16px; }
  .h-hero-copy h1 { font-size: 38px; }
  .h-hero-copy .lede { font-size: 16px; }
  .h-stage { order: 1; aspect-ratio: 1 / 1; max-height: none; border-radius: 12px; }
  .h-slide-img { bottom: 96px; padding: 12px 12px 0; }
  .h-slide-card { left: 10px; right: 10px; bottom: 10px; padding: 12px 14px; }
  .h-slide-name { font-size: 14px; }
  .h-slide-price .price, .h-slide-price { font-size: 19px; }
  .h-hero-points { gap: 8px 16px; padding-top: 14px; }
  .h-hero-points li { font-size: 13px; }

  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid-4 > .card:nth-child(n+7) { display: flex; }
  .grid-4 .card-body, .grid-listing .card-body { padding: 11px 12px 13px; }
  .grid-4 .card-t, .grid-listing .card-t { font-size: 13px; }
  .grid-4 .card .prices .price ins, .grid-4 .card .prices .price > .woocommerce-Price-amount,
  .grid-listing .card .prices .price ins, .grid-listing .card .prices .price > .woocommerce-Price-amount { font-size: 18px; }
  .card-img img { height: auto; }
  .h-depts, .h-depts.count-4, .h-depts.count-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .h-dept-body { padding: 12px 14px 14px; }
  .h-dept h3 { font-size: 18px; }
  .h-dept-subs { display: none; }
  .h-row .sec-head h2 { font-size: 26px; }
  .h-row-intro { font-size: 14px; }
  .h-trust { padding: 30px 22px 32px; border-radius: 12px; }
  .h-trust-head h2 { font-size: 26px; }
  .h-trust-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  .cat-hero-grid.has-art { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cat-hero-art { order: -1; gap: 8px; }
  .cat-hero-art span { aspect-ratio: 1 / 1; }
  .cat-hero-art .art-1 { aspect-ratio: 1 / 1; }
  .cat-hero-copy h1 { font-size: 36px; }
  .cat-intro { font-size: 15px; }
  .cat-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 132px; overflow-x: auto; margin: 0 calc(var(--gut) * -1); padding: 22px var(--gut) 4px; scrollbar-width: none; }
  .cat-tiles::-webkit-scrollbar { display: none; }
  .cat-body { padding-top: 26px; }
  .cat-layout.has-filters { grid-template-columns: minmax(0, 1fr); }
  .grid-listing { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .btn-filter { display: inline-flex; }
  .cat-count { order: 3; flex-basis: 100%; font-size: 13px; }

  .cat-filters { position: fixed; inset: 0; z-index: 80; visibility: hidden; pointer-events: none; }
  .flt-backdrop { display: block; position: absolute; inset: 0; background: rgba(23, 20, 15, 0.5); opacity: 0; transition: opacity 0.2s ease; }
  .cat-filters .flt {
    position: absolute; top: 0; bottom: 0; left: 0; width: min(360px, 90vw); border-radius: 0; border: 0;
    display: flex; flex-direction: column; transform: translateX(-102%); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  body.flt-open { overflow: hidden; }
  body.flt-open .cat-filters { visibility: visible; pointer-events: auto; }
  body.flt-open .flt-backdrop { opacity: 1; }
  body.flt-open .cat-filters .flt { transform: none; }
  .flt-close { display: block; }
  .flt-body { max-height: none; flex: 1; }
  .flt-foot { display: block; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--card); }
  .flt-foot .btn { height: 50px; }
}

@media (max-width: 480px) {
  .h-depts, .h-depts.count-4, .h-depts.count-3, .h-depts.count-2 { grid-template-columns: minmax(0, 1fr); }
  .h-dept { flex-direction: row; }
  .h-dept-img { width: 38%; aspect-ratio: auto; flex-shrink: 0; }
  .hdr-act { gap: 2px; }
  /* Every button in the mobile header row — burger, search, account, cart —
     gets the same 40px height so their top/bottom edges line up exactly,
     not just their centers. Was scoped to ".hdr-act .iconbtn", which missed
     the burger button (it lives in .hdr-in, not .hdr-act) and left the cart
     pill at its desktop height of 42px while icon buttons were 44px. */
  .iconbtn { width: 40px; height: 40px; }
  .cartbtn { height: 40px; padding: 0 12px; }
  .cartbtn > span { font-size: 0; }
  .cartbtn > span .pot-cart-count { font-size: 13px; }
}

/* Narrow phones (iPhone SE, older/budget Android — 320-360px wide): the
   header still overflowed here even with the 480px tier above. Drop the
   account icon (still reachable from the drawer, see header.php) and
   tighten gutters instead of letting the cart button collide with it. */
@media (max-width: 400px) {
  :root { --gut: 14px; }
  .hdr-in { gap: 6px; }
  /* The logo is absolutely centered (pot.css, ≤900px tier) independent of
     the burger/cart group widths either side of it, so at the very
     narrowest phones (320-360px) it can end up close enough to the cart
     pill to touch — 14px was a 1px kiss at 320px. 13px gives it real
     breathing room without becoming hard to read. */
  .logo { font-size: 13px; }
  .hdr-act { gap: 4px; }
  .hdr-act a.iconbtn { display: none; }
  .cartbtn { padding: 0 10px; gap: 6px; }
  .cartbtn svg { width: 15px; height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .h-slide-img img, .h-slide-card, .h-dept-img img, .cat-filters .flt, .nav-sub { transition: none; }
  .h-slide-img img { transform: none; }
}

/* ------------------------------------------------- product description */

.woocommerce-tabs { max-width: 1080px; }
.woocommerce-tabs .panel.woocommerce-Tabs-panel--reviews { max-width: 780px; }

.pd { color: var(--ink-2); font-size: 16px; line-height: 1.7; }
.pd > * + * { margin-top: 44px; }
.pd h3 { margin: 0 0 10px; font-family: var(--disp); font-size: 26px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; color: var(--ink); }
.pd p { margin: 0 0 12px; }
.pd-lead { font-size: 20px; line-height: 1.55; color: var(--ink); max-width: 820px; margin: 0; }

.pd-highlights { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pd .pd-highlights { margin-top: 30px; }
.pd-highlights li { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.pd-highlights li::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--acc); margin-bottom: 6px; }
.pd-highlights strong { font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; line-height: 1.25; }
.pd-highlights span { font-size: 14px; line-height: 1.5; color: var(--ink-3); }

.pd-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.pd-feature:nth-of-type(even) .pd-media { order: 2; }
.pd-media { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1; }
.pd-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pd-copy .pd-kicker { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc); }
.pd-copy p { font-size: 16px; }

.pd-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.pd-panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 24px 26px; }
.pd-panel h3 { font-size: 20px; margin-bottom: 12px; }
.pd-specs table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pd-specs th, .pd-specs td { padding: 10px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.pd-specs tr:first-child th, .pd-specs tr:first-child td { border-top: 0; }
.pd-specs th { width: 42%; padding-right: 16px; font-weight: 500; color: var(--ink-3); }
.pd-specs td { font-weight: 600; color: var(--ink); }
.pd-list { list-style: none; margin: 0; padding: 0; }
.pd-list li { position: relative; padding: 8px 0 8px 28px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.pd-list li:first-child { border-top: 0; }
.pd-list li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 13px; height: 7px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }

.pd-note { background: var(--sunk); border: 1px solid var(--line); border-left: 4px solid var(--acc); border-radius: 10px; padding: 20px 24px; }
.pd-note h3 { font-size: 18px; }
.pd-note ul { margin: 0; padding-left: 18px; font-size: 14.5px; }
.pd-note li { margin: 4px 0; }

@media (max-width: 900px) {
  .pd { font-size: 15px; }
  .pd > * + * { margin-top: 32px; }
  .pd-lead { font-size: 17px; }
  .pd h3 { font-size: 22px; }
  .pd-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pd-highlights li { padding: 14px; }
  .pd-highlights strong { font-size: 14.5px; }
  .pd-highlights span { font-size: 13px; }
  .pd-feature { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pd-feature:nth-of-type(even) .pd-media { order: 0; }
  .pd-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-panel { padding: 18px; }
}

/* Related / upsell grids: WooCommerce's clearfix pseudo-elements and float
   widths (higher specificity) otherwise become empty grid cells. */
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product.card { width: auto; margin: 0; float: none; clear: none; }
.related.products ul.products, .upsells.products ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1180px) { .related.products ul.products, .upsells.products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .related.products ul.products, .upsells.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* ------------------------------------------------- marketplace reviews */

.pot-rv-note { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 22px; padding: 14px 18px; background: var(--sunk); border: 1px solid var(--line); border-radius: 10px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.pot-rv-note svg { flex-shrink: 0; margin-top: 1px; color: var(--ink-3); }
.pot-rv-note p { margin: 0; }
.pot-rv-source { display: inline-flex; align-items: center; margin: 2px 0 6px; padding: 3px 9px; border-radius: 999px; background: var(--sunk); border: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--ink-3); }