/*
 * Stizzo storefront skin — editorial minimal, after the Zara reference.
 *
 * The rules of this look, in order of how much they matter:
 *
 *   1. Only black, white and grey. No gold, no accent colour, no gradients.
 *   2. Nothing is rounded and nothing casts a shadow. Separation is whitespace,
 *      or a hairline.
 *   3. The photograph is the design. Images run full bleed and edge to edge;
 *      chrome around them is removed rather than styled.
 *   4. Type is small, light and widely tracked. Labels are uppercase at 11px;
 *      headings are thin, not bold. Nothing shouts.
 *
 * Written against the real Hummingbird DOM: article.product-miniature with its
 * __image-container / __title / __price children, .products as the grid, and
 * .columns-container.container as the page wrapper.
 *
 * NOTE: head.tpl loads this with a ?v= query, and the vhost now caches .css for
 * a week. Bump that version when you edit this file or nobody will see it.
 */

:root {
  --stz-black: #000000;
  --stz-white: #ffffff;
  --stz-ink: #000000;
  --stz-muted: #6b6b6b;
  --stz-hair: rgba(0, 0, 0, 0.14);
  --stz-wash: #f4f4f4;
  --stz-sale: #c00;
  /* Campaign accent, used only by the stage editorial line. One value to
     change if the shop would rather that type were black. */
  --stz-editorial: #c8102e;

  --stz-font: "Helvetica Neue", Helvetica, Arial, -apple-system,
              BlinkMacSystemFont, "Segoe UI", sans-serif;

  --stz-track: 0.12em;
  --stz-header-h: 56px;
}

/* ---------- Global reset of the vendor's decoration ---------- */

html,
body {
  overflow-x: hidden;
}

body {
  color: var(--stz-ink);
  font-family: var(--stz-font);
  font-weight: 400;
  background: var(--stz-white);
  -webkit-font-smoothing: antialiased;
}

/* Flat, per the house rule — and flat is the whole point of this look. */
.card,
.btn,
.form-control,
.custom-select,
.modal-content,
.dropdown-menu,
.alert,
.badge,
.product-miniature,
.product-miniature__inner,
.product-miniature__image-container,
.product-miniature__image-link,
.thumbnail-container,
img {
  border-radius: 0 !important;
  box-shadow: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: inherit;
}

h1, h2, h3, h4, h5 {
  font-weight: 300;
  letter-spacing: var(--stz-track);
  color: var(--stz-ink);
}

/* A single uppercase label style, used everywhere something is labelled. */
.stz-label,
.stz-nav a,
.stz-header__actions a,
.stz-footer a,
.stz-footer h4 {
  font-size: 11px;
  letter-spacing: var(--stz-track);
  text-transform: uppercase;
  font-weight: 400;
}

/* ---------- Announcement ---------- */

.stz-announce {
  background: var(--stz-white);
  color: var(--stz-ink);
  border: 0;
  border-bottom: 1px solid var(--stz-hair);
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 16px;
}

/* ---------- Fixed rails ---------- */

/*
 * The reference has no header bar. Two rails are pinned to the viewport edges
 * and the page scrolls between them. Each rail is a full-height fixed column
 * with three slots: top, an absolutely centred middle, and bottom. Centring the
 * middle with space-between would only look centred when the top and bottom
 * slots happen to match in height, so it is positioned explicitly.
 *
 * The rails are pointer-events:none so their large empty areas never intercept
 * a click meant for the page; the controls inside opt back in.
 */

:root {
  --zr-rail: 210px;
}

.zr-rail {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--zr-rail);
  padding: 26px 26px 30px;
  z-index: 850;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.zr-rail > *,
.zr-rail a,
.zr-rail button,
.zr-rail input {
  pointer-events: auto;
}

.zr-rail--left { left: 0; align-items: flex-start; text-align: left; }
.zr-rail--right { right: 0; align-items: flex-end; text-align: right; }

.zr-rail__mid {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.zr-rail--left .zr-rail__mid { left: 26px; }
.zr-rail--right .zr-rail__mid { right: 26px; }

.zr-rail__top { margin-left: auto; }

/* The middle slot is absolutely positioned, so this is the only child left in
   flow and space-between would pin it to the top, on top of the menu mark. */
.zr-rail__bottom { margin-top: auto; }

.zr-rail a,
.zr-rail button {
  font-size: 11px;
  letter-spacing: var(--stz-track);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--stz-ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* The menu mark: two rules, top left, exactly as the reference. */
.zr-mark {
  position: fixed;
  top: 30px;
  left: 26px;
  z-index: 900;
  display: block;
  width: 34px;
}

.zr-mark span {
  display: block;
  height: 1px;
  background: var(--stz-ink);
  margin-bottom: 5px;
}

/* Numbered category list */
.zr-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: zr;
}

.zr-nav li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 9px;
  white-space: nowrap;
}

.zr-nav__num {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--stz-ink);
}

.zr-nav a {
  color: var(--stz-muted);
}

.zr-nav a:hover,
.zr-nav li.is-active a {
  color: var(--stz-ink);
}

.zr-nav li.is-active a { font-weight: 700; }

.zr-filters {
  margin-top: 30px;
  color: var(--stz-ink) !important;
}

/* Column-density switch */
.zr-view { display: flex; flex-direction: column; gap: 12px; }
.zr-view[hidden] { display: none; }

.zr-view__label {
  font-size: 11px;
  letter-spacing: var(--stz-track);
  text-transform: uppercase;
}

.zr-view__opts { display: flex; gap: 12px; }

.zr-view__opts button {
  font-size: 12px;
  color: var(--stz-muted);
  letter-spacing: 0;
}

.zr-view__opts button.is-active {
  color: var(--stz-ink);
  font-weight: 700;
}

/* Search sits alone at the top right, a rule with a word on it. */
.zr-search input {
  border: 0;
  border-bottom: 1px solid var(--stz-ink);
  background: transparent;
  width: 160px;
  padding: 4px 0;
  font-size: 11px;
  letter-spacing: var(--stz-track);
  text-transform: uppercase;
  text-align: right;
  font-family: inherit;
}

.zr-search input::placeholder {
  color: var(--stz-ink);
  opacity: 1;
}

.zr-search input:focus {
  outline: none;
  border-bottom-color: var(--stz-ink);
}

.zr-rail--right .zr-rail__mid {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: flex-end;
}

.zr-bag__count {
  font-style: normal;
  border: 1px solid var(--stz-ink);
  padding: 0 4px;
  margin-left: 5px;
  font-size: 10px;
}

/* ---------- Page frame ---------- */

/*
 * Content lives between the rails. The inset is padding on the wrapper rather
 * than on <body>, so a full-bleed section can still break out of it with a
 * negative margin (see .stz-hero below).
 */
.columns-container.container {
  max-width: none;
  width: 100%;
  padding-left: var(--zr-rail);
  padding-right: var(--zr-rail);
}

/* Must not repeat the inset — it nests inside the container above. */
#center-column.page {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* The homepage hero ignores the rails and runs edge to edge. */
.zr-stage,
.stz-hero,
.stz-tiles,
.stz-thankyou,
.stz-overlay,
.stz-chisiamo,
.stz-quote {
  margin-left: calc(var(--zr-rail) * -1);
  margin-right: calc(var(--zr-rail) * -1);
}

/* The announcement strip clears the rails so it never sits under the mark. */
.stz-announce {
  padding-left: var(--zr-rail);
  padding-right: var(--zr-rail);
}

.page-content--home {
  margin: 0;
  padding: 0;
}

.stz-home section {
  margin: 0;
}

/* ---------- Buttons ---------- */

.stz-btn,
.btn-primary,
.btn.btn-primary {
  display: inline-block;
  background: var(--stz-black);
  color: var(--stz-white);
  border: 1px solid var(--stz-black);
  padding: 13px 30px;
  font-size: 11px;
  letter-spacing: var(--stz-track);
  text-transform: uppercase;
  font-weight: 400;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.stz-btn:hover,
.btn-primary:hover {
  background: var(--stz-white);
  color: var(--stz-black);
  border-color: var(--stz-black);
}

.stz-btn--light {
  background: var(--stz-white);
  color: var(--stz-black);
  border-color: var(--stz-white);
}

.stz-btn--light:hover {
  background: transparent;
  color: var(--stz-white);
  border-color: var(--stz-white);
}

/* The signature quiet call to action: a word with a rule under it. */
.stz-underline {
  display: inline-block;
  font-size: 11px;
  letter-spacing: var(--stz-track);
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ---------- Hero ---------- */

.stz-hero {
  position: relative;
  overflow: hidden;
  background: var(--stz-wash);
}

.stz-hero__track {
  display: flex;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.stz-hero__slide {
  min-width: 100%;
  position: relative;
}

.stz-hero__slide img {
  width: 100%;
  height: calc(100vh - var(--stz-header-h));
  min-height: 460px;
  object-fit: cover;
  display: block;
}

/* Text sits low and left, small, never centred in a box. */
.stz-hero__cta {
  position: absolute;
  left: 40px;
  right: auto;
  bottom: 48px;
  top: auto;
  text-align: left;
  color: var(--stz-white);
}

/*
 * These hero banners are cream and gold with the wordmark baked into the
 * artwork, so white text on them is invisible. A flat panel behind the caption
 * makes it legible on any photograph — flat, not a gradient, per the house rule.
 */
.stz-hero__cta {
  background: rgba(0, 0, 0, 0.42);
  padding: 14px 18px;
}

.stz-hero__kicker {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--stz-white);
  text-shadow: none;
  font-weight: 400;
}

.stz-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--stz-white);
  font-size: 34px;
  line-height: 1;
  padding: 12px 18px;
  cursor: pointer;
  opacity: 0.85;
}

.stz-hero__arrow:hover {
  opacity: 1;
}

.stz-hero__arrow--prev { left: 6px; }
.stz-hero__arrow--next { right: 6px; }

/* ---------- Editorial tiles ---------- */

.stz-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--stz-white);
}

.stz-tile {
  position: relative;
  overflow: hidden;
}

.stz-tile img {
  width: 100%;
  height: 78vh;
  min-height: 420px;
  object-fit: cover;
  display: block;
}

.stz-tile h3 {
  position: absolute;
  left: 24px;
  bottom: 62px;
  margin: 0;
  color: var(--stz-white);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.stz-tile .stz-btn {
  position: absolute;
  left: 24px;
  bottom: 26px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--stz-white);
  color: var(--stz-white);
  padding: 0 0 2px;
}

.stz-tile .stz-btn:hover {
  background: none;
  color: var(--stz-white);
  opacity: 0.75;
}

/* ---------- Section headings ---------- */

.stz-title,
.stz-collection__head h2 {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
  margin: 72px 0 28px;
  color: var(--stz-ink);
}

/* ---------- Product grid ---------- */

/*
 * The grid is the heart of it: four tall portraits, hairline-free, with the
 * name and price sitting quietly underneath. Everything the vendor theme puts
 * on a card — borders, quick view, star ratings, hover lifts — is removed.
 */
/*
 * Two columns by default, switchable to one or three from the rail. The
 * reference leads with very large images and only a couple per row; a dense
 * four-up reads as a catalogue, not an editorial.
 */
.products,
#js-product-list .products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px 46px;
  margin: 0;
  padding: 0;
}

.products.zr-cols-1 { grid-template-columns: 1fr; }
.products.zr-cols-2 { grid-template-columns: repeat(2, 1fr); }
.products.zr-cols-3 { grid-template-columns: repeat(3, 1fr); gap: 46px 30px; }

.product-miniature {
  border: 0;
  background: transparent;
  margin: 0;
  padding: 0;
}

.product-miniature__inner {
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
}

.product-miniature__image-container,
.thumbnail-container {
  background: var(--stz-wash);
  border: 0;
  margin: 0;
  overflow: hidden;
}

.product-miniature__image-link {
  display: block;
}

/*
 * A square frame, because every product photograph in this catalogue is square.
 *
 * The 3:4 portrait frame the reference uses works there because their imagery is
 * portrait. Here it made a card ~620px wide and ~830px tall, with a square photo
 * floating in the middle of it and 200px of empty wash underneath — the product
 * was genuinely hard to find on the page. Matching the frame to the source means
 * the photograph fills it edge to edge with nothing wasted.
 *
 * max-height keeps it sane on very wide screens, where a 1fr column can
 * otherwise grow past anything worth looking at.
 */
.product-miniature__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-height: 620px;
  object-fit: contain;
  background: var(--stz-wash);
  display: block;
  transition: opacity 250ms ease;
}

.product-miniature:hover .product-miniature__image {
  opacity: 0.86;
}

/*
 * Info block sits under the photograph: flag, name, price, swatches on the
 * left; a bare "+" pushed to the far right. It is a row, not a stack, because
 * the "+" has to hold the opposite edge.
 */
.product-miniature__bottom {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0 0;
}

.product-miniature__infos {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.product-miniature__actions {
  display: block !important;
  flex: 0 0 auto;
}

.product-miniature__add {
  background: none;
  border: 0;
  padding: 0;
  font-size: 17px;
  line-height: 1;
  color: var(--stz-ink);
  cursor: pointer;
  font-family: inherit;
}

.product-miniature__add:hover { opacity: 0.55; }

/* The flag is a small word above the name, not a badge on the image. */
.product-miniature .product-flags {
  position: static;
  padding: 0;
  margin: 0 0 1px;
  display: flex;
  gap: 8px;
}

.product-miniature__variants {
  display: flex;
  gap: 5px;
  margin-top: 7px;
  list-style: none;
  padding: 0;
}

.product-miniature__variants a,
.product-miniature__variants li {
  width: 9px;
  height: 9px;
  display: block;
  border: 1px solid var(--stz-hair);
  font-size: 0;
}

.product-miniature__title {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--stz-ink);
  line-height: 1.45;
  display: block;
}

.product-miniature__title:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.product-miniature__prices {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.product-miniature__price {
  font-size: 12px;
  font-weight: 400;
  color: var(--stz-ink);
  letter-spacing: 0.02em;
}

.product-miniature__discount-price:empty {
  display: none;
}

/* Chrome the reference does not have. */
.product-miniature__quickview-button,
.product-miniature__quickview-touch,
.product-list-review,
.product-miniature .grade-stars,
.product-miniature .product-list-comments-number {
  display: none !important;
}

/*
 * Flags are plain words, not coloured pills.
 *
 * These no longer carry Bootstrap's `badge` class — product-flags.tpl drops it
 * deliberately, because the theme paints `.badge` inside a CSS @layer with
 * !important, and layered !important outranks unlayered !important no matter
 * how specific the unlayered selector is. Not matching that rule is the only
 * reliable way to win, so none of the declarations below need !important.
 */
.product-flags {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 10px;
  list-style: none;
}

.product-flag {
  background: none;
  color: var(--stz-ink);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  padding: 0;
  border: 0;
  list-style: none;
  text-decoration: none;
}

.product-flag--out_of_stock {
  color: var(--stz-muted);
}

.product-miniature__top {
  position: relative;
}

/* ---------- Listing header, sort and pagination ---------- */

.products__selection,
.products__count {
  font-size: 11px;
  letter-spacing: var(--stz-track);
  text-transform: uppercase;
  color: var(--stz-muted);
  padding: 18px 24px;
  border: 0;
}

#js-product-list-header,
.block-category {
  padding: 40px 24px 8px;
  border: 0;
  background: transparent;
}

#js-product-list-header h1,
.block-category h1 {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
}

.pagination,
.products__pagination {
  border: 0;
  padding: 40px 24px 80px;
  font-size: 11px;
  letter-spacing: var(--stz-track);
}

.pagination__number a,
.pagination__nav a {
  color: var(--stz-ink);
}

.pagination .current a,
.pagination__number.current a {
  border-bottom: 1px solid var(--stz-ink);
}

/* ---------- Product page ---------- */

.product-cover img,
.product__cover img {
  width: 100%;
  height: auto;
  display: block;
}

h1.product__name,
.product-detail h1,
.page-product h1 {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.product__prices .current-price,
.product-prices .current-price {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ---------- Forms ---------- */

.form-control,
input[type="text"],
input[type="email"],
input[type="search"],
select {
  border: 0;
  border-bottom: 1px solid var(--stz-hair);
  background: transparent;
  padding: 10px 0;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.form-control:focus,
input:focus {
  outline: none;
  border-bottom-color: var(--stz-ink);
  box-shadow: none !important;
}

/* ---------- Footer ---------- */

.stz-services {
  display: none;
}

.footer.stz-footer,
.stz-footer {
  background: var(--stz-white);
  border-top: 1px solid var(--stz-hair);
  color: var(--stz-ink);
  padding: 64px 24px 28px;
  margin-top: 80px;
}

.stz-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: none;
}

.stz-footer h4 {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: var(--stz-track);
  text-transform: uppercase;
  font-weight: 400;
}

.stz-footer p,
.stz-store-text {
  font-size: 11px;
  line-height: 1.9;
  color: var(--stz-muted);
  letter-spacing: 0.03em;
}

.stz-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stz-footer li {
  margin-bottom: 10px;
}

.stz-footer a {
  color: var(--stz-ink);
  border-bottom: 1px solid transparent;
}

.stz-footer a:hover {
  border-bottom-color: var(--stz-ink);
}

.stz-footer__news form {
  display: flex;
  gap: 0;
  margin-top: 14px;
  border-bottom: 1px solid var(--stz-hair);
}

.stz-footer__news input[type="email"] {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 8px 0;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.stz-footer__news button {
  background: none;
  border: 0;
  color: var(--stz-ink);
  font-size: 10px;
  letter-spacing: var(--stz-track);
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 0 8px 14px;
}

.stz-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--stz-hair);
}

.stz-copy {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stz-muted);
}

.stz-payments {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.stz-payments img {
  height: 18px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.55;
}

/* ---------- Responsive ---------- */

@media (max-width: 1200px) {
  .products,
  #js-product-list .products {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

  .stz-tile img {
    height: 58vh;
  }

  .stz-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .products,
  #js-product-list .products {
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
  }

  .stz-header__row {
    padding: 12px 16px;
  }

  .stz-header__logo img {
    height: 34px;
  }

  .stz-header__actions {
    gap: 14px;
  }

  .stz-nav ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 16px 12px;
    gap: 18px;
    -webkit-overflow-scrolling: touch;
  }

  .stz-nav::-webkit-scrollbar,
  .stz-nav ul::-webkit-scrollbar {
    display: none;
  }

  .stz-hero__cta {
    left: 16px;
    bottom: 28px;
  }

  .stz-footer__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

/* ---------- Homepage editorial blocks ---------- */

/*
 * The rest of the homepage the shop already had — a product row, brand marks,
 * two full-bleed statements, a testimonial and the newsletter. Same rules
 * throughout: photograph full bleed, text small and uppercase, sitting low and
 * left over the image rather than centred in a panel.
 */

.stz-kicker {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Product row */
.stz-collection {
  padding: 0 0 40px;
}

.stz-collection__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 24px 20px;
}

.stz-collection__head h2 {
  margin: 72px 0 0;
  text-align: left;
}

.stz-collection__head a {
  font-size: 11px;
  letter-spacing: var(--stz-track);
  text-transform: uppercase;
  border-bottom: 1px solid var(--stz-ink);
  padding-bottom: 2px;
}

.stz-products {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}

/* Same reasoning as the category grid: a square frame matching the source. */
.stz-product img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  background: var(--stz-wash);
  transition: opacity 250ms ease;
}

.stz-product:hover img {
  opacity: 0.86;
}

.stz-product p {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  margin: 12px 10px 0;
  color: var(--stz-ink);
}

/* Full-bleed statements */
.stz-thankyou,
.stz-overlay,
.stz-chisiamo,
.stz-quote {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 74vh;
  display: flex;
  align-items: flex-end;
  padding: 48px 40px;
  color: var(--stz-white);
  margin-top: 2px;
}

.stz-thankyou h2,
.stz-overlay h2,
.stz-chisiamo h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stz-white);
  line-height: 1.35;
}

.stz-overlay > div,
.stz-chisiamo > div {
  max-width: 640px;
}

.stz-overlay .stz-btn {
  margin-top: 18px;
}

.stz-quote {
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52vh;
}

.stz-quote p {
  max-width: 780px;
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.06em;
  color: var(--stz-white);
}

/* Brand marks */
.stz-brands {
  padding: 84px 24px;
  text-align: center;
}

.stz-brands h2 {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0 0 44px;
}

.stz-brands__grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  align-items: center;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.stz-brands__grid img {
  width: 100%;
  height: auto;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: opacity 200ms ease;
}

.stz-brands__grid img:hover {
  opacity: 1;
}

/* Testimonial */
.stz-review {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  margin-top: 2px;
}

.stz-review figure {
  margin: 0;
  padding: 60px 48px;
  text-align: center;
}

.stz-review__stars {
  font-size: 11px;
  letter-spacing: 0.4em;
  margin-bottom: 22px;
}

.stz-review blockquote {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.04em;
  border: 0;
  padding: 0;
}

.stz-review figcaption {
  margin-top: 24px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stz-muted);
}

.stz-review__img {
  position: relative;
}

.stz-review__img img {
  width: 100%;
  height: 68vh;
  min-height: 380px;
  object-fit: cover;
  display: block;
}

.stz-review__img a {
  position: absolute;
  left: 24px;
  bottom: 24px;
  color: var(--stz-white);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--stz-white);
  padding-bottom: 2px;
}

/* Newsletter */
.stz-newsletter {
  text-align: center;
  padding: 96px 24px;
  max-width: 620px;
  margin: 0 auto;
}

.stz-newsletter h2 {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0 0 16px;
}

.stz-newsletter p {
  font-size: 12px;
  line-height: 1.9;
  color: var(--stz-muted);
  margin: 0 0 28px;
}

.stz-newsletter form {
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: center;
  border-bottom: 1px solid var(--stz-ink);
  max-width: 420px;
  margin: 0 auto;
}

.stz-newsletter input[type="email"] {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 10px 0;
}

.stz-newsletter .stz-btn {
  border: 0;
  background: none;
  color: var(--stz-ink);
  padding: 10px 0 10px 16px;
}

.stz-newsletter .stz-btn:hover {
  background: none;
  color: var(--stz-muted);
}

@media (max-width: 1200px) {
  .stz-products {
    grid-template-columns: repeat(3, 1fr);
  }

  .stz-brands__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 640px) {
  .stz-products {
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
  }

  .stz-brands__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }

  .stz-review {
    grid-template-columns: 1fr;
  }

  .stz-thankyou,
  .stz-overlay,
  .stz-chisiamo,
  .stz-quote {
    padding: 28px 18px;
    min-height: 56vh;
  }

  .stz-thankyou h2,
  .stz-overlay h2,
  .stz-chisiamo h2 {
    font-size: 17px;
  }
}

/* ---------- Faceted filter panel ---------- */

/*
 * The filter module renders wherever the theme puts it; the rail button just
 * reveals it in place. Hidden by default so the listing opens clean, as in the
 * reference, where FILTERS is a word until you ask for it.
 */
.zr-filters-panel {
  display: none;
  margin: 0 0 40px;
  padding: 24px 0;
  border-top: 1px solid var(--stz-hair);
  border-bottom: 1px solid var(--stz-hair);
}

.zr-filters-panel.is-open {
  display: block;
}

.zr-filters.is-active {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Phone layout ---------- */

/*
 * The compact bar and drawer are phone-only; the rails are desktop-only. Each
 * is hidden in the other's regime rather than reflowed, because reflowing the
 * rails put the nine categories *above* the search and bag (their source order)
 * and squeezed them into a strip too small to tap.
 */

.zr-bar,
.zr-drawer {
  display: none;
}

@media (max-width: 1100px) {
  :root {
    /* Collapses the content inset and every full-bleed breakout in one move,
       because both are expressed in this variable. */
    --zr-rail: 0px;
  }

  .zr-rail,
  .zr-mark {
    display: none;
  }

  /* --- compact bar --- */

  .zr-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    background: var(--stz-white);
    border-bottom: 1px solid var(--stz-hair);
    position: sticky;
    top: 0;
    z-index: 900;
  }

  .zr-bar__logo img {
    height: 34px;
    width: auto;
    display: block;
    filter: grayscale(100%) contrast(115%);
  }

  .zr-bar__actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* 44px minimum on every control in the bar — these are thumb targets, and
     11px of text is not one. */
  .zr-burger,
  .zr-bar__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 6px;
    background: none;
    border: 0;
    color: var(--stz-ink);
    font-size: 11px;
    letter-spacing: var(--stz-track);
    text-transform: uppercase;
    cursor: pointer;
  }

  .zr-burger {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }

  .zr-burger span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--stz-ink);
  }

  .zr-bar__actions svg {
    width: 19px;
    height: 19px;
  }

  /* --- drawer --- */

  .zr-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--stz-white);
    padding: 74px 22px 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .zr-drawer[hidden] {
    display: none;
  }

  body.zr-menu-open {
    overflow: hidden;
  }

  .zr-drawer__search {
    border-bottom: 1px solid var(--stz-ink);
    margin-bottom: 26px;
  }

  .zr-drawer__search input {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 10px 0;
    font-size: 13px;
    letter-spacing: var(--stz-track);
    text-transform: uppercase;
    font-family: inherit;
  }

  .zr-drawer__search input:focus {
    outline: none;
  }

  /* Audiences as large serif tabs, as in the reference's phone menu. */
  .zr-drawer__tabs {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    margin-bottom: 22px;
    -webkit-overflow-scrolling: touch;
  }

  .zr-drawer__tabs::-webkit-scrollbar {
    display: none;
  }

  .zr-drawer__tabs a {
    font-family: Didot, "Bodoni MT", "Playfair Display", Georgia, serif;
    font-size: 27px;
    letter-spacing: 0.01em;
    color: var(--stz-ink);
    white-space: nowrap;
    padding-bottom: 4px;
  }

  /* Number in its own column, links beside it. */
  .zr-drawer__section {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 14px;
    margin-bottom: 28px;
  }

  .zr-drawer__num {
    margin: 0;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--stz-ink);
    line-height: 1.6;
  }

  .zr-drawer__num span {
    color: var(--stz-muted);
  }

  .zr-drawer__section ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .zr-drawer__section a,
  .zr-drawer__foot a {
    display: block;
    padding: 11px 0;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--stz-ink);
    border-bottom: 0;
  }

  .zr-drawer__foot {
    margin-top: 26px;
  }

  .zr-drawer__foot a {
    font-size: 11px;
    color: var(--stz-muted);
    border-bottom: 0;
    padding: 9px 0;
  }

  /* --- listing --- */

  /* The density switch is a pointer affordance; phones get two columns. */
  .zr-view {
    display: none !important;
  }

  .products,
  #js-product-list .products,
  .products.zr-cols-1,
  .products.zr-cols-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 10px;
  }

  .product-miniature__bottom {
    padding-top: 9px;
    gap: 8px;
  }

  .product-miniature__title,
  .product-miniature__price {
    font-size: 11px;
    line-height: 1.4;
  }

  /* The "+" is the only tappable thing on a card besides the photo. */
  .product-miniature__add {
    min-width: 30px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
  }

  #js-product-list-header,
  .block-category {
    padding: 22px 14px 4px;
  }

  .products__selection,
  .products__count {
    padding: 12px 14px;
  }

  .pagination,
  .products__pagination {
    padding: 26px 14px 56px;
  }

  .columns-container.container,
  #center-column.page {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Full-bleed sections cancel that 14px inset rather than the rail width. */
  .stz-hero,
  .stz-tiles,
  .zr-banner,
  .stz-thankyou,
  .stz-overlay,
  .stz-chisiamo,
  .stz-quote {
    margin-left: -14px;
    margin-right: -14px;
  }

  .stz-announce {
    padding: 8px 14px;
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  /* A single stray wide element should never make the whole page pan sideways. */
  html,
  body {
    overflow-x: hidden;
  }

  /*
   * The hero artwork is 3:2 with the Stizzo wordmark inside the image. Cropping
   * it to a tall phone viewport cut the wordmark in half, so on phones the
   * banner is shown whole at its own proportions.
   */
  .stz-hero__slide img {
    height: auto;
    min-height: 0;
    object-fit: contain;
  }

  .stz-hero__cta {
    padding: 10px 12px;
  }

  .stz-hero__cta {
    left: 14px;
    bottom: 22px;
  }

  .stz-footer {
    padding: 40px 14px 24px;
    margin-top: 46px;
  }
}

@media (max-width: 640px) {
  .products,
  #js-product-list .products,
  .products.zr-cols-1,
  .products.zr-cols-3 {
    gap: 22px 8px;
  }
}

/* ---------- Category banner ---------- */

/*
 * The rail categories link into search, so this is the landing image for
 * "Donna", "Bambino" and the rest. Same treatment as the homepage hero: the
 * photograph runs full bleed and the term sits low and left over it, small.
 */
.zr-banner {
  position: relative;
  overflow: hidden;
  background: var(--stz-wash);
  margin-bottom: 46px;
}

.zr-banner img {
  width: 100%;
  height: 56vh;
  min-height: 300px;
  object-fit: cover;
  display: block;
}

.zr-banner__caption {
  position: absolute;
  left: calc(var(--zr-rail) + 26px);
  bottom: 34px;
  color: var(--stz-white);
}

.zr-banner__caption h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stz-white);
}

@media (max-width: 1100px) {
  .zr-banner img {
    height: 34vh;
    min-height: 200px;
  }

  .zr-banner__caption {
    left: 16px;
    bottom: 18px;
  }

  .zr-banner__caption h1 {
    font-size: 15px;
  }
}


/* ---------- Listing controls ---------- */

/*
 * The sort control is not a <select> — the theme builds a Bootstrap dropdown
 * button in JavaScript, so it never appears in the served HTML. Styling it
 * needs these classes, read out of the post-JavaScript DOM.
 */
.products__sort-dropdown-button,
.products__sort-dropdown-button.btn,
.products__sort-dropdown-button.btn-outline-tertiary {
  border: 0 !important;
  border-bottom: 1px solid var(--stz-ink) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 5px 0 !important;
  font-size: 11px;
  letter-spacing: var(--stz-track);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--stz-ink);
}

.products__sort-label {
  font-size: 11px;
  letter-spacing: var(--stz-track);
  text-transform: uppercase;
  color: var(--stz-muted);
}

.products__sort .dropdown-menu {
  border: 1px solid var(--stz-hair);
  border-radius: 0;
  box-shadow: none;
  padding: 4px;
}

.products__sort .dropdown-item {
  font-size: 11px;
  letter-spacing: var(--stz-track);
  text-transform: uppercase;
  padding: 8px 10px;
  color: var(--stz-ink);
}

.products__sort .dropdown-item.current,
.products__sort .dropdown-item:hover {
  background: var(--stz-wash);
  color: var(--stz-ink);
}

/*
 * The reference carries no breadcrumb. Moved out of sight rather than removed,
 * so the trail stays in the accessibility tree and in the structured data
 * PrestaShop emits for search engines.
 */
.breadcrumb {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ---------- Homepage stage ---------- */

/*
 * The homepage is one full-viewport frame at a time, each a two-up split of
 * photography, with the wordmark set large across the lower right and the
 * campaign line at top left. Nothing is inset and nothing is centred in a box.
 *
 * On the homepage the category rail is hidden — the reference shows only the
 * menu mark there — and the announcement strip is dropped so the first frame
 * really does fill the window.
 */

body#index .stz-announce {
  display: none;
}

body#index .zr-rail--left .zr-rail__mid {
  display: none;
}

.zr-stage {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--stz-wash);
  /* Measured from the viewport, not from the wrapper's padding: the negative
     margin the other full-bleed sections use left a white strip down one edge
     here, because this sits inside two nested paddings. */
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* No product grid on the homepage, so the density switch has nothing to act on
   and would otherwise sit on top of the previous-frame arrow. */
body#index .zr-view {
  display: none !important;
}

.zr-stage__track {
  display: flex;
  height: 100%;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.zr-stage__slide {
  position: relative;
  min-width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.zr-stage__half {
  display: block;
  height: 100%;
  overflow: hidden;
}

.zr-stage__half img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zr-stage__editorial {
  position: absolute;
  top: 0;
  left: 0;
  padding: 22px 28px;
  max-width: 58%;
  pointer-events: none;
}

.zr-stage__kicker {
  margin: 0;
  font-size: clamp(38px, 8.4vw, 130px);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--stz-editorial);
}

.zr-stage__line {
  margin: 4px 0 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stz-editorial);
}

/*
 * Set as text rather than the logo file: that asset is 300px wide and would be
 * a blur at this size. Allowed to run past the right edge, which the reference
 * does too — the stage clips it.
 */
.zr-stage__mark {
  position: absolute;
  left: 44%;
  bottom: 7%;
  margin: 0;
  font-family: Didot, "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(64px, 13.5vw, 240px);
  line-height: 0.8;
  letter-spacing: -0.005em;
  color: var(--stz-ink);
  pointer-events: none;
  white-space: nowrap;
}

.zr-stage__arrow {
  position: absolute;
  bottom: 20px;
  background: none;
  border: 0;
  padding: 10px 14px;
  font-size: 20px;
  line-height: 1;
  color: var(--stz-ink);
  cursor: pointer;
  z-index: 3;
}

.zr-stage__arrow--prev { left: 18px; }
.zr-stage__arrow--next { right: 18px; }

@media (max-width: 1100px) {
  /* One image per frame on a phone; a half-width crop of a portrait photograph
     is too narrow to read as anything. */
  .zr-stage {
    height: calc(100vh - 60px);
    min-height: 460px;
  }

  .zr-stage__slide {
    grid-template-columns: 1fr;
  }

  .zr-stage__half--b {
    display: none;
  }

  .zr-stage__editorial {
    padding: 14px 16px;
    max-width: 94%;
  }

  .zr-stage__kicker {
    font-size: clamp(34px, 13vw, 76px);
  }

  .zr-stage__mark {
    left: 5%;
    bottom: 9%;
    font-size: clamp(52px, 22.5vw, 150px);
  }

  .zr-stage__arrow--prev { left: 4px; }
  .zr-stage__arrow--next { right: 4px; }
}


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

@media (max-width: 1100px) {
  /* Clears the pinned bar so it never covers the end of the description. */
  body.zr-has-sticky-buy {
    padding-bottom: 72px;
  }

  .zr-sticky-buy {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 10px 14px;
    background: var(--stz-white);
    border-top: 1px solid var(--stz-hair);
  }

  /* Outlined, not filled — the reference's ADD is a white button with a rule. */
  .zr-sticky-buy .product__add-to-cart-button,
  .zr-sticky-buy .btn-primary {
    flex: 1;
    background: var(--stz-white);
    color: var(--stz-ink);
    border: 1px solid var(--stz-ink);
    padding: 13px 16px;
    font-size: 11px;
    letter-spacing: var(--stz-track);
    text-transform: uppercase;
  }

  .zr-sticky-buy__price {
    flex: 0 0 auto;
    font-size: 13px;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  /*
   * The container also holds the stock warning and the quantity stepper. On a
   * bar this size only the button and the price belong, so everything else in
   * it is hidden rather than named one class at a time.
   */
  .zr-sticky-buy > *:not(.product__actions-qty-add):not(.zr-sticky-buy__price) {
    display: none;
  }

  .zr-sticky-buy .product__actions-qty-add {
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  .zr-sticky-buy .quantity-button,
  .zr-sticky-buy .product__quantity {
    display: none;
  }

  .zr-sticky-buy .product__add-to-cart,
  .zr-sticky-buy form {
    flex: 1;
    margin: 0;
  }

  /* "Add to cart" with a trolley glyph wrapped onto two lines; the reference
     just says ADD. */
  .zr-sticky-buy .product__add-to-cart-button i,
  .zr-sticky-buy .product__add-to-cart-button .material-icons {
    display: none;
  }

  .zr-sticky-buy .product__add-to-cart-button {
    white-space: nowrap;
    width: 100%;
  }

  /* The page's own price block stays where it is; the bar carries a copy. */
  .product__prices {
    font-size: 15px;
  }
}


/* ---------- Product gallery ---------- */

/* The selected thumbnail ships with a blue focus ring; this palette has no blue. */
.product__thumbnail,
.product__thumbnail-image {
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.product__thumbnail.active .product__thumbnail-image,
.js-thumb-selected {
  border: 1px solid var(--stz-ink);
}

.product__thumbnail-image {
  border: 1px solid transparent;
}