/* ============================================================
   SHOP THE STORY — curated vintage
   Prototype stylesheet — design tokens from TTF_STSWEB_260706
   ============================================================ */

@font-face {
  font-family: 'Pitch Sans';
  src: url('../fonts/PitchSans-Medium.woff2') format('woff2'),
       url('../fonts/PitchSans-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #B9D2F1;
  --red: #E43C35;
  --black: #0E0E0E;
  --white: #FFFFFF;
  --grey: #EDEDED;
  --side-w: 250px;
  --side-m: 24px;
  --content-l: 300px;   /* sidebar width + margins */
  --gap: 24px;
  --fs-ui: 13px;
  --fs-small: 11px;
  --ls: 0.04em;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Pitch Sans', 'Courier New', monospace;
  font-weight: 500;
  font-size: var(--fs-ui);
  letter-spacing: var(--ls);
  background: var(--white);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input { font: inherit; letter-spacing: inherit; color: inherit; }
img { display: block; }

::selection { background: var(--red); color: var(--white); }

/* ============ SIDEBAR ============ */

.sidebar {
  position: fixed;
  top: var(--side-m); left: var(--side-m);
  width: var(--side-w);
  max-height: calc(100vh - var(--side-m) * 2);
  overflow-y: auto;
  scrollbar-width: none;
  z-index: 40;
}
.sidebar::-webkit-scrollbar { display: none; }

.side-box { background: var(--white); }

/* box 1: stacked serif logo + primary nav */
.nav-box { padding: 26px 24px 22px; }

.brand { display: block; margin-bottom: 34px; }
.brand img { display: block; width: 158px; height: auto; margin: 0 auto; }

.side-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.side-nav a,
.side-nav .nav-cart {
  display: block;
  text-align: left;
  color: var(--black);
  font-size: var(--fs-ui);
  text-transform: uppercase;
  padding: 7px 10px;
  margin: 0 -10px;   /* the hover band stops short of the box edges */
  transition: padding-left .15s ease;
}
.side-nav a:hover,
.side-nav .nav-cart:hover {
  background: var(--blue);
  color: var(--red);
  padding-left: 18px;   /* small text indent on hover */
}
/**
 * Aria tra le voci account: WISHLIST e PROFILE un filo più distanti dal resto.
 * PROFILE resta separato anche da WISHLIST.
 */
.side-nav a[href*="/wishlist"] {
  margin-top: 14px;
}
.side-nav a[href*="/my-account"] {
  margin-top: 6px;
}
body.shop    .side-nav a[href="shop.html"],
body.product .side-nav a[href="shop.html"],
body.cart    .side-nav a[href="cart.html"],
body.account .side-nav a[href="account.html"] { color: var(--red); }

/* box 2: search — sotto i filtri quando presenti */
.search-box { margin-top: 10px; padding: 14px 24px; }
.search-box input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  font-size: var(--fs-ui);
  text-transform: uppercase;
  color: var(--black);
}
.search-box input::placeholder { color: #9a9a9a; opacity: 1; }
.search-box input:focus::placeholder { color: var(--red); }

/* filters — sotto la voce SHOP, dentro il menu; FILTERS è solo titolo */
.filters-box { padding: 18px 24px 10px; }
.side-nav .filters-box { padding: 6px 0 10px; }
.filters-box details { border: 0; }
.filters-heading {
  margin: 0;
  padding: 0 0 14px;
  font-size: var(--fs-ui);
  text-transform: uppercase;
}
.filters-box summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 0 14px;
  font-size: var(--fs-ui);
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.filters-box summary:hover { color: var(--red); }
.filters-box summary::-webkit-details-marker { display: none; }
.filters-box summary .ind::after { content: '+'; }
.filters-box details[open] > summary .ind::after { content: '\2013'; }

.filters-box .filters-root > details { padding-left: 12px; }

.filter-list {
  max-height: 224px;
  overflow-y: auto;
  padding: 2px 10px 14px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--black) transparent;
}
/* CATEGORY: a touch more breathing room between the heading and its list */
.filters-root > details:last-child .filter-list { padding-top: 16px; }
.filter-list::-webkit-scrollbar { width: 2px; }
.filter-list::-webkit-scrollbar-thumb { background: var(--black); }
.filter-list::-webkit-scrollbar-track { background: transparent; }

.filter-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 0;
  font-size: 10px;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.filter-item:hover { color: var(--red); }
.filter-item input { display: none; }
.filter-item .tick {
  width: 8px; height: 8px;
  border: 1px solid var(--black);
  flex-shrink: 0;
}
.filter-item:hover .tick { border-color: var(--red); }
.filter-item input:checked + .tick { background: var(--red); border-color: var(--red); }
.filter-item input:checked ~ .lbl { color: var(--red); }

/* ============ MILAN BOX (home + product) ============ */

.milan-box {
  display: none;
  position: fixed;
  right: var(--side-m); bottom: var(--side-m);
  background: var(--white);
  color: var(--black);
  padding: 15px 20px;
  font-size: var(--fs-ui);
  text-transform: uppercase;
  z-index: 47;   /* above the footer sliding over the home hero */
}
.milan-box:hover { color: var(--red); }
body.home .milan-box:not(.in-footer) { display: block; }

/* home: wide button so the hover photo sits flush above it, same width */
body.home .milan-box:not(.in-footer) { width: 320px; }

/* other pages: same button + hover inside the footer, bottom right */
.milan-box.in-footer {
  display: block;
  position: absolute;
  right: var(--side-m); bottom: 30px;
  padding: 15px 0 0 20px;
}
body.home .milan-box.in-footer { display: none; }
.milan-box.in-footer .milan-preview {
  left: auto; right: 0;
  width: 320px;
}

/* mouse over: shop photo flush with the button, address in white over the image */
.milan-preview {
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  /* once revealed it keeps the hover alive and stays clickable (whole
     anchor opens Google Maps); while hidden, visibility blocks events */
}
.milan-preview img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.milan-address {
  position: absolute;
  top: 20px; left: 20px;
  color: var(--white);
  font-size: 14px;
  line-height: 1.55;
  text-transform: uppercase;
}
body.home .milan-box:hover .milan-preview,
.milan-box.in-footer:hover .milan-preview {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ============ FOOTER ============ */

.site-footer {
  position: relative;
  background: var(--white);
  display: grid;
  grid-template-columns: var(--content-l) 170px 320px 1fr;
  align-items: start;
  padding: 26px var(--side-m) 60px var(--side-m);
  font-size: var(--fs-small);
  text-transform: uppercase;
  z-index: 46;
}
.site-footer .f-logo img { height: 15px; width: auto; }
.site-footer .f-col h4 {
  font-size: var(--fs-small);
  font-weight: 500;
  margin-bottom: 26px;
}
.site-footer .f-col a,
.site-footer .f-col p { display: block; line-height: 1.5; }
.site-footer .f-col a:hover { color: var(--red); }

/* ============ HOMEPAGE ============ */

/* full-bleed hero behind the floating sidebar boxes.
   Sticky: on scroll the image stays put and the footer slides up over it. */
.hero {
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 0;
}
.hero-main {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  overflow: hidden;
}
.hero-main img { width: 100%; height: 100%; object-fit: cover; }
.curated-overlay {
  position: absolute;
  top: 47%; left: 50%;
  transform: translate(-50%, -50%) rotate(-32deg);
  color: var(--white);
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing: 0.3em;
  white-space: nowrap;
  pointer-events: none;
}

/* ============ PAGE SHELL (inner pages) ============ */

/* Va tenuto ancorato a <main>: WordPress mette la classe "page" anche sul
   <body> di ogni pagina, e senza "main" questa regola sposterebbe tutto. */
main.page {
  margin-left: var(--content-l);
  padding: var(--side-m) var(--side-m) 80px 0;
  min-height: 100vh;
}

/* ============ SHOP GRID ============ */

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 56px 12px;
}
@media (max-width: 1200px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card { display: block; }
.card img {
  width: 100%;
  height: auto;   /* natural 2:3 proportions, no crop */
}
.card .tag {
  display: block;
  margin-top: 14px;
  font-size: var(--fs-small);
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--red);
}
.card:hover .tag { color: var(--black); }

.grid-empty {
  grid-column: 1 / -1;
  padding: 60px 0;
  color: var(--red);
  text-transform: uppercase;
}

/* ============ PRODUCT PAGE ============ */

.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
  gap: 48px;
}
.p-gallery { display: flex; flex-direction: column; gap: var(--gap); }
.p-gallery img { width: 100%; height: auto; }

/* multi-image slider — desktop: images stack and scroll with the page (so it
   keeps going to the footer after the last one); the info column sticks in view */
.p-gallery-wrap { position: relative; }
.p-gallery.slider img { aspect-ratio: 2 / 3; object-fit: cover; }
.product-layout:has(.p-gallery.slider) .p-info {
  position: sticky;
  top: var(--side-m);
  align-self: start;
}

/* pagination dots — hidden on desktop, shown over the mobile slider */
.p-dots { display: none; }

/* info panel beside the gallery: text sits in cols 1-4, right cols stay empty.
   Brand, size and price are red for emphasis (client request 2026-07). */
.p-info {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 30px;
  align-content: start;
}
.p-info-main { grid-column: 1 / -1; min-width: 0; max-width: 100%; }
.p-info-main .p-desc  { margin-top: 40px; }
/* measurements + size diagram: affiancati se c'è spazio, altrimenti a capo */
.p-measure {
  grid-column: 1 / -1;
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}
.p-measure .p-meas-group {
  margin-top: 0;
  flex: 1 1 160px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.p-measure .p-meas {
  margin-top: 0;
}
.p-measure .p-diagrams {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.p-measure .p-diagram {
  margin-top: 0;
  flex: 0 1 350px;
  width: min(350px, 100%);
  max-width: 100%;
}
.p-measure--multi .p-diagram {
  flex-basis: min(220px, 100%);
  width: min(220px, 100%);
}

.p-title { font-size: var(--fs-ui); font-weight: 500; line-height: 1.6; text-transform: uppercase; }
.p-brand { color: var(--red); }
.p-size  { font-size: var(--fs-ui); color: var(--red); margin-top: 40px; line-height: 1.6; text-transform: uppercase; }
.p-price { font-size: var(--fs-ui); color: var(--red); margin-top: 16px; line-height: 1.6; }
.p-desc  { font-size: var(--fs-ui); line-height: 1.6; margin-top: 40px; text-transform: uppercase; }
.p-meas  { font-size: var(--fs-ui); line-height: 1.6; margin-top: 40px; text-transform: uppercase; }
.p-sku {
  grid-column: 1 / -1;
  margin-top: 48px;
  font-size: var(--fs-ui);
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--red);
}

.p-diagram { margin-top: 18px; width: min(350px, 100%); max-width: 100%; }
.p-diagram img,
.p-diagram svg { display: block; width: 100%; height: auto; }

/* action buttons: due celle uguali, stessa altezza; testo sempre dentro */
.p-actions {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}
.p-actions > * {
  min-width: 0;
  width: 100%;
  min-height: 48px;
  height: auto;
}
.btn-blue {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  height: auto;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--blue);
  color: var(--black);
  text-align: center;
  font-size: var(--fs-ui);
  font-family: inherit;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls);
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  transition: color .15s;
}
.btn-blue:hover { color: var(--red); }

/* ============ ABOUT ============ */

.about-cols {
  columns: 2;
  column-gap: 60px;
  max-width: 1100px;
  font-size: var(--fs-ui);
  line-height: 1.65;
  text-transform: uppercase;
}
.about-cols p { margin-bottom: 1.4em; break-inside: avoid-column; }
.about-sign { margin-top: 3em; color: var(--red); }

/* ============ LEGAL PAGES ============ */

.legal { max-width: none; }
.legal-title {
  font-size: 26px;   /* twice the body scale */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 50px;
}
.legal-body { font-size: 13px; line-height: 1.75; }
.legal-body p { margin-bottom: 1.2em; break-inside: avoid; }
/* Il prototipo marcava le sezioni con h2, i testi importati usano h3:
   vanno trattati allo stesso modo. */
.legal-body h2,
.legal-body h3 {
  font-size: var(--fs-ui);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 2.4em 0 1.1em;
  break-inside: avoid;
  break-after: avoid;
}
.legal-body a { text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--red); }

/* 3-column desktop layouts — a column only ever breaks between whole
   paragraphs (break-inside: avoid), never mid-paragraph or mid-sentence */
.legal-body.split { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; }
.legal-body.split .legal-points { columns: 2; column-gap: 56px; }
.legal-body.flow { columns: 3; column-gap: 56px; }
.legal-points p { padding-left: 28px; }   /* body indented under its heading */
/* a whole section (heading + its paragraphs) never splits across columns */
.legal-sec { break-inside: avoid; }
.legal-points > .legal-sec:first-child > :is(h2, h3) { margin-top: 0; }

/* ============ ACCOUNT / LOGIN ============ */

.account-form { max-width: 760px; padding-top: 20px; }
.form-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 44px;
  font-size: var(--fs-ui);
  text-transform: uppercase;
}
.form-row label { white-space: nowrap; }
.form-row input[type="text"],
.form-row input[type="password"],
.form-row input[type="email"] {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--black);
  outline: none;
  padding: 4px 2px;
  font-size: var(--fs-ui);
}
.form-row input:focus { border-bottom-color: var(--red); }

.checkbox-row { display: flex; align-items: center; gap: 14px; }
.checkbox-row .box {
  width: 12px; height: 12px;
  border: 1px solid var(--black);
  display: inline-block;
  cursor: pointer;
}
.checkbox-row input { display: none; }
.checkbox-row input:checked + .box { background: var(--red); border-color: var(--red); }

.account-form .btn-blue { max-width: 220px; }

.register-note {
  font-size: var(--fs-small);
  line-height: 1.7;
  text-transform: uppercase;
  margin: 18px 0 30px;
  max-width: 560px;
}
.divider { height: 90px; }

/* ============ CART PAGE ============ */

.cart-grid {
  display: grid;
  /* Capi più larghi; summary più stretto. */
  grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr);
  gap: 20px;
  align-items: start;
  min-height: calc(100vh - 120px);
}
.cart-grid[hidden] { display: none; }

.cart-panel { background: var(--grey); padding: 40px 44px; min-width: 0; }

.cart-h { font-size: var(--fs-ui); font-weight: 500; text-transform: uppercase; }
.cart-page .cart-count { font-size: var(--fs-ui); text-transform: uppercase; margin-top: 20px; }

/* left panel: item rows */
.cart-list-items { margin-top: 48px; }
.cart-item { display: flex; gap: 28px; margin-bottom: 44px; min-width: 0; }
.ci-thumb { flex-shrink: 0; width: 150px; }
.ci-thumb img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.ci-details { flex: 1; min-width: 0; }
.ci-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}
.ci-title {
  font-size: var(--fs-ui);
  line-height: 1.6;
  text-transform: uppercase;
  min-width: 0;
  flex: 1 1 auto;
}
.ci-remove {
  font-size: var(--fs-ui);
  text-transform: uppercase;
  white-space: nowrap;
  flex: 0 0 auto;
}
.ci-remove:hover { color: var(--red); }
.ci-sub {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: var(--fs-ui);
  text-transform: uppercase;
  margin-top: 34px;
}
.ci-sub > span:last-child { margin-left: 0; }

.cart-continue { max-width: 280px; margin-top: 16px; }

/* right panel: una colonna — summary, poi subito Total + Checkout */
.cart-summary {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.summary-main,
.summary-total { min-width: 0; width: 100%; }
.summary-lines { margin-top: 40px; }
.sum-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  max-width: none;
  font-size: var(--fs-ui);
  text-transform: uppercase;
  margin-bottom: 28px;
}
.sum-line .sum-label { flex: 0 1 auto; }
.sum-line > span:last-child { flex: 0 0 auto; margin-left: 0; }
.ship-note { margin-top: 4px; }
.ship-title { font-size: var(--fs-ui); text-transform: uppercase; }
.ship-sub {
  font-size: var(--fs-small);
  text-transform: uppercase;
  line-height: 1.7;
  margin-top: 10px;
  color: #666;
}
.coupon { margin-top: 36px; }
.coupon-label { display: block; font-size: var(--fs-ui); text-transform: uppercase; margin-bottom: 14px; }
.coupon-input {
  width: 100%;
  max-width: 100%;
  background: transparent;
  border: 1px solid var(--black);
  outline: none;
  padding: 13px 14px;
  font-size: var(--fs-ui);
  text-transform: uppercase;
}
.coupon-input:focus { border-color: var(--red); }

.summary-total {
  margin-top: 0;
  padding-top: 0;
}
.total-line {
  display: block;
  font-size: 24px;
  text-transform: uppercase;
  line-height: 1.3;
}
.total-line .cart-total-amount {
  display: inline;
  margin-left: 18px;
  white-space: nowrap;
}
.checkout-btn {
  display: flex;
  width: 100%;
  margin-top: 22px;
}

.cart-empty-page { padding: 60px 0; }
.cart-empty-page[hidden] { display: none; }
.cart-empty-page p { font-size: var(--fs-ui); text-transform: uppercase; margin-bottom: 24px; }
.cart-empty-page .btn-blue { max-width: 280px; }

/* ============ CART DRAWER ============ */

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
  z-index: 70;
}
.cart-overlay.open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 430px;
  max-width: 92vw;
  max-height: 100vh;
  overflow-y: auto;
  background: var(--grey);
  color: var(--black);
  z-index: 80;
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.3,.7,.2,1);
  display: flex;
  flex-direction: column;
  padding: 24px 28px 44px;
}
.cart-drawer.open { transform: translateX(0); }

.cart-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 40px;
}
.cart-close {
  font-size: var(--fs-ui);
  text-transform: uppercase;
}
.cart-close:hover { color: var(--red); }

.cart-items { }
.cart-drawer .cart-item {
  display: flex;
  gap: 18px;
  margin-bottom: 30px;
}
/* Circoscritto al cassetto: senza .cart-drawer questa regola arriva dopo
   quelle della pagina carrello e, a parita' di specificita', schiaccia le
   miniature da 150px a 62px. */
.cart-drawer .cart-item img { width: 62px; aspect-ratio: 3/4; object-fit: cover; }
.cart-drawer .cart-item .ci-tit { font-size: var(--fs-ui); line-height: 1.6; text-transform: uppercase; }
.cart-drawer .cart-item .ci-rm {
  color: #8a8a8a;
  font-size: var(--fs-small);
  text-transform: uppercase;
  margin-top: 8px;
  display: inline-block;
}
.cart-drawer .cart-item .ci-rm:hover { color: var(--red); }
.cart-empty { color: #8a8a8a; text-transform: uppercase; font-size: var(--fs-ui); margin-bottom: 30px; }

.cart-subtotal {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-ui);
  text-transform: uppercase;
  margin: 14px 0 60px;
}

.cart-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 26px;
}

/* toast */
.toast {
  position: fixed;
  bottom: 16px;
  right: 16px;
  background: var(--red);
  color: var(--white);
  padding: 12px 18px;
  font-size: var(--fs-small);
  text-transform: uppercase;
  z-index: 90;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ============ MOBILE HEADER ============ */

.m-header { display: none; }
.m-menu { display: none; }

/* shop mobile toolbar */
.shop-toolbar { display: none; }
.m-filters { display: none; }

/* ============ RESPONSIVE ============ */

/* Desktop stretto: più spazio al testo/bottoni, azioni in colonna unica */
@media (max-width: 1200px) {
  .product-layout {
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    gap: 32px;
  }
  .p-actions {
    grid-template-columns: 1fr;
  }
}

/*
 * 1200–1300: con sidebar lo spazio stringe le due colonne.
 * Capi ancora più larghi, summary compatto; niente stack verticale.
 */
@media (max-width: 1300px) and (min-width: 901px) {
  .cart-grid {
    grid-template-columns: minmax(0, 1.9fr) minmax(240px, 0.9fr);
    gap: 14px;
    min-height: 0;
  }
  .cart-panel { padding: 28px 22px; }
  .ci-thumb { width: 120px; }
  .cart-item { gap: 18px; }
  .cart-summary { gap: 22px; }
  .summary-lines { margin-top: 28px; }
  .sum-line { margin-bottom: 18px; }
  .coupon { margin-top: 24px; }
  .total-line { font-size: 22px; }
}

@media (max-width: 900px) {
  :root { --content-l: 0px; }

  .sidebar { display: none; }
  /* OUR MILAN SHOP stays at the top (home); the bar is now at the bottom */
  .milan-box { top: 14px; left: 14px; right: auto; bottom: auto; }
  /* the button sits at the top, so its photo panel opens DOWNWARD on tap */
  .milan-box:not(.in-footer) .milan-preview {
    top: 100%;
    bottom: auto;
    transform: translateY(-6px);
  }
  body.home .milan-box:not(.in-footer):hover .milan-preview { transform: translateY(0); }

  /* single full-width white bar, flush to the edges, fixed at the bottom */
  .m-header {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    z-index: 60;
  }
  .m-header .logo {
    padding: 0 18px;
    display: block;
  }
  .m-header .logo img { height: 14px; width: auto; display: block; }
  .m-burger {
    background: transparent;
    width: 54px; height: 54px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
  }
  .m-burger span {
    width: 22px; height: 2px;
    background: var(--black);
    display: block;
    transition: transform .3s, opacity .3s;
  }
  .m-burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .m-burger.open span:nth-child(2) { opacity: 0; }
  .m-burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .toast { bottom: 70px; }

  /* iubenda copre l'hamburger: usa top via JS, serve top:auto + bottom */
  .iubenda-tp-btn,
  button.iubenda-tp-btn.iubenda-cs-preferences-link {
    top: auto !important;
    bottom: 70px !important;
    right: 12px !important;
    left: auto !important;
  }

  .m-menu {
    position: fixed;
    inset: 0;
    background: var(--white);
    z-index: 55;
    padding: 26px 22px 78px;
    display: none;
    flex-direction: column;
    overflow-y: auto;
  }
  .m-menu.open { display: flex; }
  .m-curated { display: none; }
  .m-links {
    display: flex;
    flex-direction: column;
    gap: 26px;
    font-size: 18px;
    text-transform: uppercase;
  }
  .m-links a { color: var(--black); }
  .m-links a:hover { color: var(--red); }
  .m-links a[href*="/wishlist"] { margin-top: 14px; }
  .m-links a[href*="/my-account"] { margin-top: 6px; }
  .m-search {
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin-top: 20px;   /* Search sits one space below Profile */
    font-size: 18px;
    text-transform: uppercase;
    color: var(--black);
    width: 100%;
  }
  .m-search::placeholder { color: #9a9a9a; opacity: 1; }
  .m-menu-footer {
    margin-top: auto;
    padding-top: 50px;
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--black);
  }
  .m-menu-footer a { display: block; color: var(--black); padding: 6px 0; }
  .m-menu-footer .m-milan-link { color: var(--red); }
  .m-menu-address { margin-top: 18px; line-height: 1.7; }

  /* Deve essere "main.page" come la regola desktop: da quando quella e'
     ancorata a <main> (la classe "page" WordPress la mette anche sul <body>),
     un semplice ".page" ha specificita' minore e perderebbe anche qui dentro,
     lasciando padding-left a 0 e il contenuto attaccato al bordo sinistro. */
  main.page { margin-left: 0; padding: 20px 14px 74px; }

  body.home .hero a { display: block; height: 100svh; }
  body.home .hero img { height: 100%; }

  .shop-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 24px;
    font-size: var(--fs-ui);
    text-transform: uppercase;
  }
  .shop-toolbar .rot { color: var(--red); }

  .m-filters {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--white);
    z-index: 55;
    padding: 26px 22px 78px;
    overflow-y: auto;
  }
  .m-filters.open { display: block; }
  .m-filters .filters-box { padding: 0; }
  .m-filters .filters-heading { padding: 14px 0 12px; font-size: 15px; }
  .m-filters .filters-box summary { padding: 14px 0 12px; font-size: 15px; }
  .m-filters .filter-list { padding: 0 6px 12px 0; max-height: none; }
  .m-filters .filter-item { font-size: 12px; padding: 5px 0; }

  .grid { grid-template-columns: repeat(2, 1fr); gap: 36px 14px; }

  .product-layout { grid-template-columns: 1fr; gap: 30px; }
  /* multi-image slider — mobile: horizontal swipe, tap to advance */
  .p-gallery.slider {
    flex-direction: row;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    cursor: pointer;
  }
  .p-gallery.slider img { min-width: 100%; width: 100%; }
  /* pagination dots over the slider */
  .p-dots {
    display: flex;
    gap: 7px;
    position: absolute;
    left: 50%; bottom: 14px;
    transform: translateX(-50%);
    z-index: 2;
  }
  .p-dots button {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    border: none;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 0 3px rgba(0, 0, 0, .25);
  }
  .p-dots button.active { background: #fff; }
  /* single full-width column on mobile */
  .p-info { grid-template-columns: 1fr; column-gap: 0; }
  .p-info-main { grid-column: 1; }
  .p-actions { grid-template-columns: 1fr; }
  .p-actions > * { height: 48px; }
  /* measurements + diagram span full width, still close together */
  .p-measure { grid-column: 1; }
  .p-sku { grid-column: 1; }
  .p-measure .p-diagram,
  .p-measure--multi .p-diagram,
  .p-diagram { width: min(280px, 100%); flex-basis: min(280px, 100%); }
  .p-actions { grid-template-columns: 1fr; }
  .p-actions > * { min-height: 48px; height: auto; }

  /* cart page: stack the two panels; summary stacks its total below */
  .cart-grid { grid-template-columns: 1fr; gap: 14px; min-height: 0; }
  .cart-panel { padding: 26px 18px; }
  .cart-summary { grid-template-columns: 1fr; gap: 34px; }
  .cart-item { gap: 18px; margin-bottom: 34px; }
  .ci-thumb { width: 108px; }
  .sum-line { max-width: none; }
  .coupon-input { width: 100%; }
  .total-line { font-size: 20px; }
  .cart-continue { max-width: none; }

  /* footer lives in the burger menu on mobile — no need to repeat it per page */
  .site-footer { display: none; }

  .about-cols { columns: 1; }
  .legal-body.split { display: block; }
  .legal-body.split .legal-points { columns: 1; }
  .legal-body.flow { columns: 1; }
  .legal-title { font-size: 22px; }
  .form-row { flex-direction: column; align-items: stretch; gap: 10px; }
}

/* ============ ADATTAMENTI WOOCOMMERCE ============
   Il prototipo era HTML scritto a mano; WooCommerce avvolge gli stessi
   elementi in moduli e contenitori propri. Qui si riallineano, senza
   toccare le regole del design qui sopra. */

/* Form Woo + wrapper YITH (PHP e React): riempiono la cella al 100%. */
.p-actions form.cart,
.p-actions .p-wishlist {
  display: flex !important;
  margin: 0 !important;
  min-width: 0;
  width: 100% !important;
  min-height: 48px !important;
  height: auto !important;
}
.p-actions form.cart > .btn-blue,
.p-actions form.cart > .single_add_to_cart_button {
  flex: 1;
  width: 100% !important;
  min-height: 48px !important;
  height: auto !important;
  max-height: none !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* YITH PHP templates */
.p-wishlist .yith-wcwl-add-to-wishlist,
.p-wishlist .yith-wcwl-add-button,
.p-wishlist .yith-wcwl-wishlistaddedbrowse,
.p-wishlist .yith-wcwl-wishlistexistsbrowse {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  flex: 1;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Dopo l'aggiunta YITH impila "Product added!" sopra il link
   (flex-direction: column sul plugin). Il messaggio esce dalla cella
   da 48px e il bottone wishlist scende rispetto ad Add to cart.
   Lo stato resta sul bottone, che diventa "Browse wishlist". */
.p-wishlist .yith-wcwl-wishlistaddedbrowse .feedback,
.p-wishlist .yith-wcwl-wishlistexistsbrowse .feedback {
  display: none !important;
}

/* YITH React block (staging) — override width:max-content del plugin */
.p-wishlist .yith-add-to-wishlist-button-block,
.p-wishlist .yith-add-to-wishlist-button-block--single {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 48px !important;
  height: auto !important;
  margin: 0 !important;
  gap: 0 !important;
}
.p-wishlist a.yith-wcwl-add-to-wishlist-button__wrapper,
.p-wishlist .yith-wcwl-add-to-wishlist-button,
.p-wishlist .yith-wcwl-add-to-wishlist-button:is(button),
.p-wishlist a.add_to_wishlist,
.p-wishlist a.single_add_to_wishlist,
.p-wishlist a.view-wishlist,
.p-wishlist a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 48px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--blue) !important;
  color: var(--black) !important;
  text-align: center !important;
  font-size: var(--fs-ui) !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--ls) !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-decoration: none !important;
  gap: 0 !important;
}
.p-wishlist a:hover,
.p-wishlist .yith-wcwl-add-to-wishlist-button:hover {
  color: var(--red) !important;
  background: var(--blue) !important;
}
.p-wishlist svg,
.p-wishlist i,
.p-wishlist .yith-wcwl-icon,
.p-wishlist .yith-wcwl-icon-svg,
.p-wishlist .yith-wcwl-icon-svg__wrapper,
.p-wishlist .yith-wcwl-add-to-wishlist-button-icon {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Capo non più disponibile: ogni pezzo è unico, capita spesso. */
.p-sold {
  margin-top: 40px;
  text-transform: uppercase;
  color: var(--red);
}

/* Messaggi di WooCommerce (aggiunto al carrello, errori di modulo). */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  list-style: none;
  background: var(--grey);
  padding: 16px 20px;
  margin-bottom: 24px;
  text-transform: uppercase;
  font-size: var(--fs-ui);
}
.woocommerce-error { color: var(--red); }

/* Paginazione dello shop. */
.woocommerce-pagination ul {
  list-style: none;
  display: flex;
  gap: 18px;
  justify-content: center;
  margin: 70px 0 0;
  text-transform: uppercase;
}
.woocommerce-pagination .current { color: var(--red); }

/* ============ CHECKOUT ============
   Non c'era nei mockup: costruito con gli stessi elementi della pagina
   carrello — due pannelli grigi, le righe .sum-line, il pulsante azzurro —
   così non introduce un linguaggio nuovo. */

.checkout-grid {
  display: grid;
  /* minmax(0, …) e non "7fr 5fr" secco: una traccia in fr non scende sotto la
     larghezza minima del proprio contenuto, e il pannello dei pagamenti ha un
     minimo largo che schiaccerebbe la colonna dei dati ignorando le
     proporzioni dichiarate. */
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 20px;
  align-items: start;
}

.checkout-details .cart-h,
.checkout-review .cart-h { margin-bottom: 48px; }

/* I campi di WooCommerce usano già .form-row, quindi ereditano l'aspetto
   della pagina profilo. Serve solo adattare i contenitori che aggiunge. */
.checkout-fields h3 {
  font-size: var(--fs-ui);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 40px 0 28px;
}
.checkout-fields h3:first-child { margin-top: 0; }

.form-row .woocommerce-input-wrapper { flex: 1; min-width: 0; }
.form-row .required { text-decoration: none; color: var(--red); }
.form-row abbr[title] { text-decoration: none; }

.form-row select,
.form-row textarea,
.form-row .input-text {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--black);
  outline: none;
  padding: 4px 2px;
  font: inherit;
  letter-spacing: inherit;
  border-radius: 0;
}
.form-row textarea { min-height: 90px; resize: vertical; }
.form-row select:focus,
.form-row textarea:focus,
.form-row .input-text:focus { border-bottom-color: var(--red); }

/* Nota di WooCommerce sotto un campo (es. formato del telefono). */
.woocommerce-input-wrapper .description {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-small);
  color: #8a8a8a;
}

/* Riepilogo: la riga porta il nome del capo su due righe, quindi va in cima. */
.checkout-review .sum-line { align-items: flex-start; max-width: none; }
.checkout-review .sum-name { line-height: 1.6; }

/* Spedizione: elenco senza pallini, una riga per metodo. */
.checkout-shipping ul,
.woocommerce-shipping-methods {
  list-style: none;
  margin: 0 0 40px;
}
.woocommerce-shipping-methods li { margin-bottom: 14px; }
.woocommerce-shipping-totals th { text-align: left; font-weight: 500; text-transform: uppercase; }

/* Pagamenti: ogni metodo è una riga, la sua scheda si apre sotto. */
.checkout-payment .wc_payment_methods {
  list-style: none;
  margin: 40px 0 0;
}
.wc_payment_method { margin-bottom: 18px; }
.wc_payment_method > label {
  text-transform: uppercase;
  font-size: var(--fs-ui);
  cursor: pointer;
}
.wc_payment_method .payment_box {
  margin: 14px 0 0 22px;
  font-size: var(--fs-small);
  line-height: 1.7;
}
.wc_payment_method img { display: inline-block; max-height: 22px; width: auto; margin-left: 8px; vertical-align: middle; }

.woocommerce-terms-and-conditions-wrapper { margin-top: 30px; font-size: var(--fs-small); line-height: 1.7; }

#place_order {
  display: block;
  width: 100%;
  margin-top: 34px;
  background: var(--blue);
  color: var(--black);
  text-align: center;
  padding: 15px 10px;
  font: inherit;
  font-size: var(--fs-ui);
  text-transform: uppercase;
  letter-spacing: var(--ls);
  border: none;
  cursor: pointer;
}
#place_order:hover { color: var(--red); }

@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; }
}

/* WooCommerce marca come .form-row anche il blocco finale che contiene
   termini e pulsante d'ordine: con la disposizione in riga dei campi, il
   testo e il pulsante finivano affiancati e il pulsante schiacciato. */
.form-row.place-order {
  display: block;
  margin-bottom: 0;
}

/* Elenco dei pagamenti: alcuni fogli di terze parti rimettono il pallino. */
.wc_payment_methods,
.wc_payment_methods li { list-style: none; }

.checkout-payment { position: relative; }

/* ============ PRESS ============ */

.press-meta {
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 40px;
}
.press-body { max-width: 900px; }
.press-body img { width: 100%; height: auto; margin-bottom: var(--gap); }
.press-body p { margin-bottom: 1.2em; }
.press-back { max-width: 280px; margin-top: 50px; }
.press-grid .card .tag { color: var(--black); }
.press-grid .card:hover .tag { color: var(--red); }

/* ============ PROFILO ============
   Non c'era nei mockup: stessi due pannelli del checkout. */

.account-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px;
  align-items: start;
}

.account-nav .cart-h { margin-bottom: 40px; }
.account-links { display: flex; flex-direction: column; gap: 22px; }
.account-links a { text-transform: uppercase; }
.account-links a:hover,
.account-links .is-active a,
.account-links a.is-active { color: var(--red); }
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--red); }

.account-hello { text-transform: uppercase; margin-bottom: 44px; }
.account-shortcuts { display: flex; flex-direction: column; gap: 12px; max-width: 280px; }

/* Tabelle di WooCommerce (ordini, indirizzi, download). */
.account-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-ui);
}
.account-content th,
.account-content td {
  text-align: left;
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid rgba(14, 14, 14, 0.15);
  vertical-align: top;
}
.account-content th { text-transform: uppercase; font-weight: 500; }
.account-content .button,
.account-content .woocommerce-button {
  display: inline-block;
  background: var(--blue);
  color: var(--black);
  padding: 10px 18px;
  text-transform: uppercase;
  font-size: var(--fs-small);
  border: none;
  cursor: pointer;
}
.account-content .button:hover { color: var(--red); }
.account-content h2,
.account-content h3 {
  font-size: var(--fs-ui);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 40px 0 24px;
}
.account-content h2:first-child,
.account-content h3:first-child { margin-top: 0; }
.account-content .woocommerce-Address { margin-bottom: 40px; }
.account-content address { font-style: normal; line-height: 1.8; }

@media (max-width: 900px) {
  .account-grid { grid-template-columns: 1fr; }
}

/* ============ 404 E RICERCA ============ */

.not-found-text { max-width: 520px; line-height: 1.8; margin-bottom: 44px; }
.not-found-search,
.search-again { max-width: 420px; margin-bottom: 40px; }
.not-found-search input,
.search-again input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--black);
  outline: none;
  padding: 8px 2px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
}
.not-found-search input:focus { border-bottom-color: var(--red); }
.not-found-back { max-width: 280px; }

/*
 * Attenzione: WP mette anche "search-results" sul <body> della ricerca.
 * Lo limitiamo al contenitore interno, altrimenti la griglia shop diventa stretta.
 */
div.search-results { max-width: 760px; }
.search-hit { margin-bottom: 44px; }
.search-hit-title {
  font-size: var(--fs-ui);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.search-hit-title a:hover { color: var(--red); }

/* ============ TABLET ============
   Il prototipo salta da 4 colonne (oltre 1200) a 3 (fino a 1200) a 2 (sotto
   i 900). Fra 700 e 900 restano due colonne molto larghe su uno schermo che
   di spazio ne avrebbe: qui ne mettiamo tre. */
@media (min-width: 700px) and (max-width: 900px) {
  .grid { grid-template-columns: repeat(3, 1fr); }

  /* Checkout/account affiancati; il carrello resta in stack (vedi ≤1200). */
  .checkout-grid,
  .account-grid { grid-template-columns: 1fr 1fr; }
}

/* ============ SCORRIMENTO LATERALE ============
   Il cassetto del carrello vive fuori schermo a destra (fisso, spostato di
   translateX(100%)) e con lui anche il toast: su telefono bastano a rendere
   il documento più largo del viewport, e la pagina scorre di lato — il
   contenuto sembra tagliato sul bordo sinistro.

   Si usa "clip" e non "hidden": hidden trasformerebbe il body in un
   contenitore di scorrimento e romperebbe il position:sticky dell'hero. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* L'etichetta del consenso ai termini e' una frase intera, non un'etichetta
   breve come "FIRST NAME": il "white-space: nowrap" di .form-row label le
   impediva di andare a capo e le faceva sfondare il pannello del riepilogo. */
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  white-space: normal;
}
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__input-checkbox {
  flex-shrink: 0;
  margin-top: 3px;
}
.woocommerce-terms-and-conditions-checkbox-text {
  flex: 1;
  min-width: 0;
  line-height: 1.6;
}

/* ============ LISTA DEI DESIDERI ============
   YITH stampa una tabella senza vincoli sulle immagini: la miniatura si
   stira in verticale. La riconduciamo al linguaggio del carrello. */

.wishlist_table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-ui);
}
.wishlist_table th {
  text-align: left;
  text-transform: uppercase;
  font-weight: 500;
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--black);
}
.wishlist_table td {
  padding: 24px 12px 24px 0;
  border-bottom: 1px solid rgba(14, 14, 14, 0.15);
  vertical-align: top;
}
.wishlist_table td.product-thumbnail { width: 150px; }

/* Selettore lungo di proposito: il foglio di YITH viene caricato dopo il
   nostro e a parita' di specificita' vincerebbe lui, tenendo la miniatura a
   80px. E serve "height: auto" esplicito, altrimenti resta l'altezza
   dell'attributo height="533" del tag <img> e l'immagine si stira. */
.wishlist_table tbody td.product-thumbnail a,
.wishlist_table tbody td.product-thumbnail img {
  display: block;
  width: 150px;
  max-width: 100%;
}
.wishlist_table tbody td.product-thumbnail img {
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
.wishlist_table .product-name { text-transform: uppercase; line-height: 1.6; }
.wishlist_table .product-name a { color: inherit; }
.wishlist_table .product-name a:hover { color: var(--red); }
.wishlist_table .product-stock-status .wishlist-in-stock { color: var(--black); }
.wishlist_table .product-stock-status .wishlist-out-of-stock { color: var(--red); }
.wishlist_table .product-remove a { color: var(--red); font-size: 18px; }
.wishlist_table .add_to_cart,
.wishlist_table .button {
  display: inline-block;
  background: var(--blue);
  color: var(--black);
  padding: 12px 18px;
  text-transform: uppercase;
  font-size: var(--fs-small);
  letter-spacing: var(--ls);
  border: none;
  cursor: pointer;
}
.wishlist_table .add_to_cart:hover { color: var(--red); }

.wishlist-title h2 {
  font-size: var(--fs-ui);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 30px;
}
.hidden-title-form,
.edit-title-buttons { display: none; }
.yith_wcwl_wishlist_footer { margin-top: 30px; }

@media (max-width: 900px) {
  .wishlist_table thead { display: none; }
  .wishlist_table tr { display: grid; grid-template-columns: 110px 1fr; gap: 0 16px; padding: 18px 0; border-bottom: 1px solid rgba(14,14,14,.15); }
  .wishlist_table td { border: none; padding: 0 0 8px; }
  .wishlist_table td.product-thumbnail { grid-row: 1 / span 5; width: 110px; }
  .wishlist_table td.product-thumbnail img { width: 110px; }
}