/* Native Bottle PDP + collection, skinned to the prototype. Catalog media,
   variant picker, and add-to-cart stay platform-owned. */

body[data-page-type="product"],
body[data-page-type="collection"],
body[data-page-type="cart"],
body[data-page-type="search"] {
  background: var(--c-linen);
  color: var(--c-ink);
  font-family: var(--f-ui);
}

body[data-page-type="product"] .page-width,
body[data-page-type="collection"] .page-width,
body[data-page-type="cart"] .page-width {
  max-width: var(--maxw);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.commerce-crumb { padding-top: 34px; }

.filter-chips .chip.is-current,
.filter-chips .chip[aria-current="page"] {
  background: var(--c-canopy);
  color: var(--c-cream);
  border-color: var(--c-canopy);
}

/* ---- PDP grid ----------------------------------------------------------- */

.product-detail-wrapper {
  background: transparent !important;
  padding-bottom: 90px;
}

.product-detail {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  background: transparent !important;
  padding-block: 0 !important;
}

.product-detail__media-gallery,
.product-detail__col,
.product-detail__info {
  width: 100% !important;
  position: relative !important;
  inset: auto !important;
}

.product-detail__media-gallery {
  position: sticky !important;
  top: 132px;
  overflow: visible;
}

.product-detail__media-gallery .media-gallery__content {
  gap: 14px;
}

.product-detail__media-gallery .media-gallery__list-wrapper {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-sand);
  /* The product photography is 4:5 portrait (1500 × 1875), as the prototype shows it. 4 / 3.4
     cropped every lamp to a landscape box and cut its base off. */
  aspect-ratio: 4 / 5;
}

.product-detail__media-gallery .media-gallery__list::before {
  display: none;
}

.product-detail__media-gallery .media-gallery__item,
.product-detail__media-gallery .media-gallery__media,
.product-detail__media-gallery .media-gallery__image,
.product-detail__media-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.product-detail__media-gallery .media-gallery__arrows,
.product-detail__media-gallery .media-gallery__pagination,
.product-detail__media-gallery .media-gallery__preview-icon,
.product-detail__media-gallery .media-gallery__thumbnail-arrows {
  display: none !important;
}

/* Thumbnails span the photo above, edge to edge: 7 equal columns, so a full set of 7 (each Grow Shade
   combination) fills the row; a shorter set starts at the photo's left edge at the same size.
   !important: the stock product stylesheet loads after this one and pads the strip, sets its gap and
   sizes each thumbnail as a fraction of its cell. */
.product-detail__media-gallery .media-gallery__thumbnails {
  width: 100%;
  margin: 0;
  padding: 0 !important;
}

.product-detail__media-gallery .media-gallery__thumbnail-list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px !important;
  width: 100%;
  overflow: visible;
}

@media (max-width: 720px) {
  .product-detail__media-gallery .media-gallery__thumbnail-list { gap: 6px !important; }
}

.product-detail__media-gallery .media-gallery__thumbnail {
  width: 100% !important;
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 2px solid var(--c-line);
  background: var(--c-sand);
}

.product-detail__media-gallery .media-gallery__thumbnail.is-active,
.product-detail__media-gallery .media-gallery__thumbnail.is-select {
  border-color: var(--c-canopy);
}

.product-detail__media-gallery .media-gallery__thumbnail-image,
.product-detail__media-gallery .media-gallery__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Buy box ------------------------------------------------------------ */

.product-detail__info {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.product-detail__title {
  font-family: var(--f-display) !important;
  font-weight: 300 !important;
  font-size: clamp(38px, 4.6vw, 60px) !important;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--c-ink);
}

.product-detail__price .price,
.product-detail__price .money,
.product-detail__price [class*="price"] {
  font-family: var(--f-display);
  font-size: 44px;
  line-height: 1;
  font-weight: 400;
  color: var(--c-ink);
}

.product-detail__description,
.product-detail__description p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--c-ink-soft);
  max-width: 42em;
}

.product-detail__variant-picker .variant-picker__group-head,
.product-detail__variant-picker .variant-picker__group-label {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-stone);
}

.product-detail__variant-picker .variant-picker__options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.product-detail__variant-picker .variant-picker__option {
  margin: 0;
}

.product-detail__variant-picker .variant-picker__button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-paper);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-ink);
}

.product-detail__variant-picker input:checked + .variant-picker__button,
.product-detail__variant-picker .variant-picker__button[aria-checked="true"],
.product-detail__variant-picker .is-selected .variant-picker__button {
  border-color: var(--c-canopy);
}

.product-detail__quantity-selector {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
}

/* The "Quantity" label only. The input carries .body3 too, so a bare `.body3` here hid the
   field itself and left an empty box (2026-09-28). */
.product-detail__quantity-selector > .body3,
.product-detail__quantity-selector > .title-font-bold {
  display: none;
}

.product-detail__quantity-selector theme-input-number,
.product-detail__quantity-selector .quantity-input,
.product-detail__quantity-selector [class*="input-number"] {
  display: flex;
  align-items: center;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-paper);
  overflow: hidden;
}

.product-detail__quantity-selector button {
  background: none;
  border: 0;
  padding: 14px 18px;
  font-size: 18px;
}

.product-detail__quantity-selector input {
  width: 3ch;
  text-align: center;
  border: 0;
  background: transparent;
}

.product-detail__buy-buttons {
  flex: 1;
}

.product-detail__form .form__buttons {
  display: flex;
  gap: 12px;
}

.product-detail__buy-buttons button[name="add"],
.product-detail__buy-buttons .button--fill {
  flex: 1;
  background: var(--c-canopy);
  color: var(--c-cream);
  border: 1px solid var(--c-canopy);
  border-radius: var(--r-pill);
  padding: 17px 28px;
  font-family: var(--f-ui);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.product-detail__buy-buttons button[name="add"]:hover {
  background: var(--c-canopy-deep);
}

.product-detail__sold-out-hint {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--c-ink-mid);
}

.product-detail__buy-buttons [name="payment_button"],
.product-detail__buy-buttons .shopify-payment-button,
.product-detail__buy-buttons .dynamic-checkout,
.product-detail__buy-buttons iframe,
.product-detail__share {
  display: none !important;
}

.product-detail__sell-info,
.product-detail [class*="sell-info"] {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 14px;
  color: var(--c-ink-quiet);
}

.product-detail__additional {
  border-color: var(--c-line) !important;
}

.product-detail__additional .additional__trigger {
  font-family: var(--f-ui);
  font-weight: 600;
  background: none;
  border: 0;
}

/* ---- What the stock components need from base/index.css -----------------
   layout/theme.html leaves base/index.css off on these page types so it cannot fight the brand
   CSS, but the product form, the media viewer and the cart drawer are stock components that
   lean on a handful of its rules. Without them the Add to cart spinner showed all the time, the
   form's error box (a ⚠ icon) showed with no error, and the viewer's and the drawer's empty
   <summary> drew a ▶ marker on the page. These are those rules, verbatim in effect. */
[data-base-css="off"] .hidden { display: none !important; }
[data-base-css="off"] summary { list-style: none; cursor: pointer; }
[data-base-css="off"] summary::-webkit-details-marker { display: none; }
[data-base-css="off"] summary:empty { display: none; }
[data-base-css="off"] .button { position: relative; }
[data-base-css="off"] .button__spinner {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: none;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
}
[data-base-css="off"] .button.loading { color: transparent; }
[data-base-css="off"] .button.loading .button__spinner {
  display: flex;
  color: var(--c-cream);
  animation: pdp-spin 1.5s linear infinite;
}
@keyframes pdp-spin { to { transform: rotate(360deg); } }

/* ---- PDP buy box, laid out as the prototype's --------------------------
   prototype-v2/product-anthos.html: badges · title · lede · price · [stepper | Add to cart] ·
   Smart Timer add-on · assurances · accordions. The blocks stay the platform's own (variant id,
   cart, add-on); this only arranges and skins them. The stepper and the button share one row:
   the info column is a two-track grid where every block spans both tracks except those two. */
.product-detail__info {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  row-gap: var(--info-row-gap, 22px);
  align-content: start;
}
.product-detail__info > * { grid-column: 1 / -1; min-width: 0; }
/* start, not stretch: the sold-out hint under the button makes the row taller, and the stepper
   stays a 54px pill level with the button. */
.product-detail__info > .product-detail__quantity-selector { grid-column: 1; align-self: start; }
.product-detail__info > .product-detail__quantity-selector + .product-detail__buy-buttons,
.product-detail__info > .product-detail__quantity-selector ~ .product-detail__buy-buttons { grid-column: 2; }

/* Stepper: the prototype's pill, as tall as the button beside it. */
.product-detail__quantity-selector theme-input-number,
.product-detail__quantity-selector .quantity-input {
  height: 100%;
  min-height: 54px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-paper);
}
.product-detail__quantity-selector theme-input-number button {
  display: flex; align-items: center; justify-content: center;
  padding: 0 16px;
  color: var(--c-canopy);
  cursor: pointer;
}
.product-detail__quantity-selector theme-input-number button:disabled { color: var(--c-line-strong); cursor: default; }
.product-detail__quantity-selector theme-input-number input {
  display: block;
  width: 2.4ch;
  padding: 0;
  font-family: var(--f-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}
.product-detail__quantity-selector theme-input-number input::-webkit-inner-spin-button,
.product-detail__quantity-selector theme-input-number input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Add to cart fills its track; the express "Buy now" button is not part of this design. */
.product-detail__buy-buttons .form__buttons { display: flex; }
.product-detail__buy-buttons button[name="add"] { width: 100%; min-height: 54px; }
.product-detail__buy-buttons .shopline-element-buy-now,
.product-detail__buy-buttons [class*="buy-now"],
.product-detail__buy-buttons [class*="payment-button"] { display: none !important; }
.product-detail__buy-buttons .form__error-message:not(.hidden) {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--c-clay);
}

/* Assurances: one quiet row, as the prototype's .pdp__assurances. */
.product-detail__sell-info,
.product-detail__sell-info--vertical {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--c-ink-quiet);
}

/* Accordions: the prototype's .accordion, on the stock <details> collapse. */
.product-detail__additional { display: block; border-bottom: 1px solid var(--c-line); }
.product-detail__info > .product-detail__sell-info + .product-detail__additional,
.product-detail__info > .product-detail__additional:first-of-type { border-top: 1px solid var(--c-line); margin-top: 6px; }
.product-detail__info > .product-detail__additional + .product-detail__additional { margin-top: calc(var(--info-row-gap, 22px) * -1); }
.product-detail__additional summary.additional__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  width: 100%;
  padding: 20px 0;
}
.product-detail__additional .additional__title { font-family: var(--f-ui); font-size: 16px; font-weight: 600; color: var(--c-ink); }
.product-detail__additional .additional__arrow { display: none; }
.product-detail__additional summary.additional__trigger::after { content: '+'; color: var(--c-stone); font-size: 19px; line-height: 1; }
.product-detail__additional details[open] > summary.additional__trigger::after { content: '−'; }
.product-detail__additional .additional__content {
  padding-bottom: 22px;
  font-size: 15px;
  line-height: 1.72;
  color: var(--c-ink-soft);
}
.product-detail__additional .additional__content p + p,
.product-detail__additional .additional__content ul + p { margin-top: 10px; }
.product-detail__additional .additional__content ul { list-style: none; margin: 0; padding: 0; }
.product-detail__additional .additional__content ul:not(.spec-rows) li { position: relative; padding-left: 22px; }
.product-detail__additional .additional__content ul:not(.spec-rows) li + li { margin-top: 4px; }
.product-detail__additional .additional__content ul:not(.spec-rows) li::before { content: '✓'; position: absolute; left: 0; color: var(--c-moss); }
/* Specifications: label and value, one per row (prototype .spec-list). */
.product-detail__additional .spec-rows li {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 16px;
  padding-block: 11px;
  border-top: 1px solid var(--c-line);
  color: var(--c-ink);
}
.product-detail__additional .spec-rows li:first-child { border-top: 0; padding-top: 2px; }
.product-detail__additional .spec-rows strong { font-weight: 400; color: var(--c-stone); }

@media (max-width: 380px) {
  /* A 320–380px phone: the button takes the full width under the stepper. */
  .product-detail__info > .product-detail__quantity-selector ~ .product-detail__buy-buttons { grid-column: 1 / -1; }
}

/* ---- Collection --------------------------------------------------------- */

.main-collection-cover,
.main-collection-cover .banner {
  display: none;
}

.main-collection-container,
.main-collection {
  background: transparent;
  padding-bottom: 40px;
}

.main-collection.enable-filtering,
.facets-layout-vertical .main-collection,
.facets-layout-horizontal .main-collection {
  display: block;
}

.main-collection .facets,
.main-collection .facets-desktop,
.main-collection .facets-mobile,
.main-collection .facets-sorting,
.main-collection .facets-count,
.main-collection .facets-loading-wrapper,
.main-collection [class*="facets-form"],
.main-collection .main-collection__filters,
.main-collection .facets-wrapper,
.main-collection .main-collection__toolbar {
  display: none !important;
}

.main-collection__list,
ul.grid.main-collection__list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-collection__list li {
  list-style: none;
}

/* The PLATFORM's product-list block — `featured-collection` on the home page, and any page a
   merchant adds one to. A7, 2026-09-23: it rendered as one full-width column, 6023px where the
   approved prototype is 810. Neither piece of CSS that would have given it columns reaches a
   fidelity template: `blocks/product-list/list.css` (which the platform does load) sets none, and
   `base/index.css`, where the base theme defines `.grid`, is not loaded by layout/theme.html. This
   theme's own `.grid { display: grid }` then won, with no grid-template-columns.
   The counts are the block's own settings — the merchant's — printed on the element by the
   platform as --desktop-columns / --mobile-columns. 3 and 2 are the prototype's (pages.css
   `.product-grid`), and are only the fallback here: the template says what it wants. */
ul.block-product-list {
  display: grid;
  grid-template-columns: repeat(var(--mobile-columns, 2), minmax(0, 1fr));
  gap: 16px;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 960px) {
  ul.block-product-list {
    grid-template-columns: repeat(var(--desktop-columns, 3), minmax(0, 1fr));
    gap: 26px;
  }
}

.block-product-list > li {
  list-style: none;
}

.block-product-card,
.block-product-card__content,
theme-product-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: transparent;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0;
}

.block-product-card img,
.block-product-card [class*="image"] img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--c-sand);
}

.block-product-card__title,
.block-product-card .body3 {
  font-family: var(--f-display) !important;
  font-size: 24px !important;
  letter-spacing: -0.015em;
  color: var(--c-ink);
}

.block-product-card [class*="price"],
.block-product-card .money {
  font-family: var(--f-ui);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

.block-product-card__quick-add,
.block-product-card [class*="discount"],
.block-product-card [class*="quick_add"],
.block-product-card [class*="quick-add"] {
  display: none !important;
}

.section-recommended-product-wrapper {
  background: transparent !important;
  padding-block: 40px 90px;
}

.section-recommended-product-wrapper .page-width {
  padding-inline: var(--gutter);
}

.section-recommended-product-wrapper h2,
.section-recommended-product-wrapper .title-font-bold {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--t-display-sm);
  text-align: left !important;
  margin-bottom: 34px;
}

@media (max-width: 799px) {
  .product-detail {
    grid-template-columns: 1fr;
  }
  .product-detail__media-gallery {
    position: relative !important;
    top: 0;
  }
}

@media (max-width: 720px) {
  .main-collection__list,
  ul.grid.main-collection__list {
    grid-template-columns: 1fr;
  }
  .product-detail__variant-picker .variant-picker__options {
    grid-template-columns: 1fr;
  }
  .product-detail__price .price,
  .product-detail__price .money {
    font-size: 36px;
  }
}

/* Tag badges in the buy box (blocks/product/detail-note.html): dark by default, as Pre-order;
   UK only in amber, as the prototype marks it on Grow Shade and the Smart Timer. */
.badge.badge--tag-uk-only { background: var(--c-spectrum); color: var(--c-ink); }

.block-product-card__add .block-product-card__add-button,
[data-base-css="off"] .block-product-card__add .button.block-product-card__add-button {
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-canopy);
  background: transparent;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  transform: none;
}
.block-product-card__add .block-product-card__add-button:hover,
[data-base-css="off"] .block-product-card__add .button.block-product-card__add-button:hover {
  color: var(--c-cream);
  background: var(--c-canopy);
  border-color: var(--c-canopy);
}
[data-base-css="off"] .block-product-card__add .button.loading { color: transparent; }
/* The loading icon: hidden until the form marks the button .loading (the icon component drops a
   passed class, so it is found by position, not by .button__spinner). */
.block-product-card__add .block-product-card__add-button .loading--rotator { display: none; }
.block-product-card__add .block-product-card__add-button.loading .loading--rotator { display: inline-flex; }
.block-product-card__add .block-product-card__add-button { position: relative; }
.block-product-card__add .block-product-card__add-button.loading > svg {
  display: block;
  position: absolute;
  inset: 50% auto auto 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  color: var(--c-canopy);
  animation: pdp-spin 1.2s linear infinite;
}
.block-product-card__add .is-disabled { color: var(--c-stone); border-color: var(--c-line); cursor: not-allowed; }
.block-product-card__add .form__error-message:not(.hidden) { margin-bottom: 6px; font-size: 13px; color: var(--c-clay); }

/* ---- Cart page: the prototype's cart.html ---------------------------------
   Lines on the left, an order-summary card on the right, in one centred column. The two stock
   sections (main-cart-items, main-cart-footer) stay whole — their scripts re-render
   .main-cart-items__content and .main-cart-footer__inner — so the layout is a grid on <main>.
   The phone's sticky checkout bar (cart-fixed-checkout) is the platform's and is kept. */
body[data-page-type="cart"] #main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  column-gap: 56px;
  align-items: start;
  max-width: 1080px;
  margin-inline: auto;
  padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(56px, 7vw, 96px);
}
body[data-page-type="cart"] #main > * { min-width: 0; }
body[data-page-type="cart"] #main > :first-child { grid-column: 1; }
body[data-page-type="cart"] #main > :nth-child(2) { grid-column: 2; position: sticky; top: 120px; }
body[data-page-type="cart"] #main .page-width { padding: 0 !important; max-width: none; }
body[data-page-type="cart"] .main-cart-items,
body[data-page-type="cart"] .main-cart-footer { padding: 0 !important; margin: 0 !important; }
body[data-page-type="cart"] #main:has(.cart-empty) { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
body[data-page-type="cart"] #main:has(.cart-empty) > :nth-child(2) { display: none; }

body[data-page-type="cart"] .main-cart-items__infos { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
body[data-page-type="cart"] .lp-cart__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--t-display-md);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1;
}
body[data-page-type="cart"] .main-cart-items__infos a { font-size: 14px; color: var(--c-ink-soft); text-decoration: underline; text-underline-offset: 3px; }
body[data-page-type="cart"] .main-cart-items__header { display: none; }

/* Lines — the drawer's line, one size up */
body[data-page-type="cart"] .main-cart-items__list { border-top: 1px solid var(--c-line); }
body[data-page-type="cart"] .cart-item { display: block; padding: 26px 0; border-bottom: 1px solid var(--c-line); }
body[data-page-type="cart"] .cart-item__total-wrapper { display: none; }
body[data-page-type="cart"] .cart-item__product { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; }
body[data-page-type="cart"] .cart-item__picture { width: 96px; height: 120px; border-radius: var(--r-md); overflow: hidden; background: var(--c-sand); }
body[data-page-type="cart"] .cart-item__picture img,
body[data-page-type="cart"] .cart-item__picture a { display: block; width: 100%; height: 100%; object-fit: cover; }
body[data-page-type="cart"] .cart-item__product-infos { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
body[data-page-type="cart"] .cart-item__product-infos-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 6px; align-items: baseline; }
body[data-page-type="cart"] .cart-item__product-infos-text > * { grid-column: 1 / -1; }
body[data-page-type="cart"] .cart-item__title { grid-column: 1; margin: 0; font-family: var(--f-display); font-size: 24px; font-weight: 400; line-height: 1.15; }
body[data-page-type="cart"] .cart-item__title a { color: var(--c-ink); text-decoration: none; }
body[data-page-type="cart"] .cart-item__total { grid-column: 2; grid-row: 1; justify-self: end; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
body[data-page-type="cart"] .cart-item__total b { font-weight: 600; }
body[data-page-type="cart"] .cart-item__options,
body[data-page-type="cart"] .cart-item__properties { font-size: 14px; color: var(--c-stone); }
body[data-page-type="cart"] .cart-item__option .font-bold { font-weight: 400; }
body[data-page-type="cart"] .cart-item__discount { list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--c-moss); }
body[data-page-type="cart"] .cart-item__discount svg { display: none; }
body[data-page-type="cart"] .cart-item__amount-operator { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body[data-page-type="cart"] .cart-item theme-input-number {
  display: inline-flex; align-items: center;
  height: 40px;
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-paper); overflow: hidden;
}
body[data-page-type="cart"] .cart-item theme-input-number button {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 100%; padding: 0;
  color: var(--c-canopy); background: none; border: 0; cursor: pointer;
}
body[data-page-type="cart"] .cart-item theme-input-number button:disabled { color: var(--c-line-strong); cursor: default; }
body[data-page-type="cart"] .cart-item theme-input-number button svg { width: 10px; height: 10px; }
body[data-page-type="cart"] .cart-item theme-input-number input {
  width: 2.4ch; padding: 0; border: 0; background: none; text-align: center;
  font: 600 15px var(--f-ui); color: var(--c-ink);
  -moz-appearance: textfield; appearance: textfield;
}
body[data-page-type="cart"] .cart-item theme-input-number input::-webkit-inner-spin-button,
body[data-page-type="cart"] .cart-item theme-input-number input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
body[data-page-type="cart"] .cart-item__remove { font-size: 13.5px; color: var(--c-stone); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
body[data-page-type="cart"] .cart-item__remove:hover { color: var(--c-clay); }
body[data-page-type="cart"] .cart-item__fail:not(:has(.cart-item__fail-tip:not(:empty))) { display: none; }
body[data-page-type="cart"] .cart-item__fail { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--c-clay); }
body[data-page-type="cart"] .cart-item__fail svg { width: 14px; height: 14px; }

/* Add to your order — the drawer's recommendation rows, as small cards */
body[data-page-type="cart"] .lp-cart-upsell { padding-top: 34px; }
body[data-page-type="cart"] .lp-cart-upsell:not(:has(.lp-upsell)) { display: none; }
body[data-page-type="cart"] .lp-cart-upsell__label { margin-bottom: 16px; color: var(--c-stone); }
body[data-page-type="cart"] .lp-cart-upsell__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 170px)); gap: 16px; }
body[data-page-type="cart"] .lp-cart-upsell .lp-upsell {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  gap: 10px 8px;
  padding: 0;
  border: 0;
  background: none;
}
body[data-page-type="cart"] .lp-cart-upsell .lp-upsell__img { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: var(--r-md); }
body[data-page-type="cart"] .lp-cart-upsell .lp-upsell__body { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; }
body[data-page-type="cart"] .lp-cart-upsell theme-product-form,
body[data-page-type="cart"] .lp-cart-upsell .lp-upsell > a.lp-upsell__add { grid-column: 1 / -1; }
body[data-page-type="cart"] .lp-cart-upsell .lp-upsell__add { width: 100%; }

/* Order summary card */
body[data-page-type="cart"] .main-cart-footer__inner {
  padding: 26px 26px 22px;
  border-radius: var(--r-lg);
  background: var(--c-sand);
}
body[data-page-type="cart"] .main-cart-footer__infos { display: block; width: 100%; }
body[data-page-type="cart"] .lp-summary__label { margin-bottom: 10px; color: var(--c-stone); }
body[data-page-type="cart"] .lp-summary__note { margin: 0 0 18px; font-size: 14px; font-weight: 600; color: var(--c-canopy); }
body[data-page-type="cart"] .main-cart-footer__payment-info { display: flex; flex-direction: column; gap: 16px; width: 100%; }
body[data-page-type="cart"] .main-cart-footer__subtotal,
body[data-page-type="cart"] .main-cart-footer__amount,
body[data-page-type="cart"] .main-cart-footer__buttons { width: 100%; }
body[data-page-type="cart"] .lp-summary__row { display: flex; justify-content: space-between; font-size: 14.5px; color: var(--c-ink-soft); }
body[data-page-type="cart"] .main-cart-footer__amount .cart-amount { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
body[data-page-type="cart"] .main-cart-footer__amount .cart-amount__subtotal { display: none; }
body[data-page-type="cart"] .main-cart-footer__amount .cart-amount li { display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; }
body[data-page-type="cart"] .main-cart-footer__amount .cart-amount em { font-style: normal; }
body[data-page-type="cart"] .main-cart-footer__amount .cart-amount__discount { color: var(--c-moss); }
body[data-page-type="cart"] .main-cart-footer__amount .cart-amount__discount svg { width: 12px; height: 12px; margin-right: 4px; }
body[data-page-type="cart"] .main-cart-footer__amount .cart-amount__total {
  margin-top: 6px; padding-top: 14px;
  border-top: 1px solid var(--c-line-strong);
  color: var(--c-ink);
}
body[data-page-type="cart"] .main-cart-footer__amount .cart-amount__total em { font-weight: 600; font-size: 15px; }
body[data-page-type="cart"] .main-cart-footer__amount .cart-amount__total span { font-family: var(--f-display); font-size: 34px; font-weight: 400; line-height: 1; }
body[data-page-type="cart"] .main-cart-footer__checkout .cart-checkout { display: flex; flex-direction: column; gap: 10px; }
body[data-page-type="cart"] .main-cart-footer__checkout form { margin: 0; }
body[data-page-type="cart"] .main-cart-footer__checkout button[name="checkout"] { width: 100%; min-height: 52px; font-size: 16px; }
body[data-page-type="cart"] .lp-summary__fine { margin: 12px 0 0; text-align: center; font-size: 13px; line-height: 1.5; color: var(--c-stone); }
body[data-page-type="cart"] .main-cart-footer__tips .cart-taxes { margin-top: 6px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--c-stone); }
body[data-page-type="cart"] .main-cart-footer__tips .cart-taxes a { color: inherit; }

@media (max-width: 900px) {
  body[data-page-type="cart"] #main { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  body[data-page-type="cart"] #main > :nth-child(2) { grid-column: 1; position: static; }
  body[data-page-type="cart"] .cart-item__product { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; }
  body[data-page-type="cart"] .cart-item__picture { width: 80px; height: 100px; }
  body[data-page-type="cart"] .cart-item__title { font-size: 20px; }
  body[data-page-type="cart"] .lp-cart-upsell__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The stock page CSS hid the in-line price on desktop (its table showed it in a column of its
   own, hidden here) and gave the quantity a fixed 30% column. */
body[data-page-type="cart"] .main-cart-items__list .cart-item__product-infos-text .cart-item__total { display: block; }
body[data-page-type="cart"] .main-cart-items__list .cart-item__product-infos .cart-item__amount { width: auto; min-width: 0; margin: 0; }
/* The summary starts level with the first line, under the heading's baseline (prototype). */
@media (min-width: 901px) {
  body[data-page-type="cart"] #main > :nth-child(2) { margin-top: 104px; }
}

/* ---- Compact product cards: the prototype's .product-card--compact --------------------------
   Home "Find your Anthos" (featured-collection) and the product pages' "Frequently bought
   together" / "The lamps it runs" (recommended-product). Boxed in the page column; each card is
   the photo (its shape is the image block's own setting), the name and price on one line, and a
   quiet full-width Add (blocks/product-list/add-button.html). The general card rules above give
   every card a 24px serif name and a 4:5 photo with !important; these sections override them. */
.section-featured-collection-wrapper {
  background: transparent !important;
  padding-block: var(--section-y);
}
.section-featured-collection-wrapper .page-width,
.section-recommended-product-wrapper .page-width {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section-featured-collection-wrapper .heading-with-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 38px;
}
.section-featured-collection-wrapper .heading-with-link__title {
  margin: 0;
  font-family: var(--f-display) !important;
  font-size: var(--t-display-sm) !important;
  font-weight: 400 !important;
  line-height: 1.08;
  letter-spacing: -.02em;
}
.section-featured-collection-wrapper .heading-with-link__view-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-bottom: 3px;
  font-family: var(--f-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-line-strong);
}
.section-featured-collection-wrapper .heading-with-link__view-more svg { width: 12px; height: 12px; }

:is(.section-featured-collection-wrapper, .section-recommended-product-wrapper) theme-product-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 12px;
  align-items: baseline;
}
:is(.section-featured-collection-wrapper, .section-recommended-product-wrapper) theme-product-card > * { grid-column: 1 / -1; min-width: 0; }
:is(.section-featured-collection-wrapper, .section-recommended-product-wrapper) theme-product-card > :has(> .block-product-card__title) { grid-column: 1; }
:is(.section-featured-collection-wrapper, .section-recommended-product-wrapper) theme-product-card > .block-product-card__price { grid-column: 2; justify-self: end; }
:is(.section-featured-collection-wrapper, .section-recommended-product-wrapper) .block-product-card__layer-image-wrapper { position: relative; }
:is(.section-featured-collection-wrapper, .section-recommended-product-wrapper) .block-product-card__image-wrapper {
  position: relative;
  aspect-ratio: var(--aspect-ratio, 3/4);
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-sand);
}
:is(.section-featured-collection-wrapper, .section-recommended-product-wrapper) .block-product-card__image-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
  object-fit: var(--fit-type, cover);
  border-radius: 0 !important;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
:is(.section-featured-collection-wrapper, .section-recommended-product-wrapper) .block-product-card__detail-link:hover img { transform: scale(1.05); }
:is(.section-featured-collection-wrapper, .section-recommended-product-wrapper) .block-product-card__layer-wrapper {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  pointer-events: none;
}
:is(.section-featured-collection-wrapper, .section-recommended-product-wrapper) .badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
:is(.section-featured-collection-wrapper, .section-recommended-product-wrapper) .block-product-card__title,
:is(.section-featured-collection-wrapper, .section-recommended-product-wrapper) .block-product-card__title * {
  margin: 0;
  font-family: var(--f-ui) !important;
  font-size: 16px !important;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--c-ink);
}
:is(.section-featured-collection-wrapper, .section-recommended-product-wrapper) .block-product-card__price,
:is(.section-featured-collection-wrapper, .section-recommended-product-wrapper) .block-product-card__price * {
  font-family: var(--f-ui);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-soft);
}
:is(.section-featured-collection-wrapper, .section-recommended-product-wrapper) .block-product-card__add { margin-top: 2px; }
@media (max-width: 700px) {
  .section-featured-collection-wrapper .heading-with-link { margin-bottom: 24px; }
  :is(.section-featured-collection-wrapper, .section-recommended-product-wrapper) theme-product-card { grid-template-columns: minmax(0, 1fr); }
  :is(.section-featured-collection-wrapper, .section-recommended-product-wrapper) theme-product-card > .block-product-card__price { grid-column: 1; justify-self: start; }
}

/* The platform's loading icon (components/icons/loading-spinner) is a .loading--rotator wrapper that
   base/index.css hides until its parent is .loading — ported here, since that file is off. */
[data-base-css="off"] .loading--rotator { display: none; }
[data-base-css="off"] .loading > .loading--rotator { display: inline-flex; animation: pdp-spin 1.2s linear infinite; }
.block-product-card__add .button.loading > .loading--rotator,
.lp-upsell .lp-upsell__add.loading > .loading--rotator {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  color: var(--c-canopy);
}
.block-product-card__add .button.loading > .loading--rotator svg,
.lp-upsell .lp-upsell__add.loading > .loading--rotator svg { width: 16px; height: 16px; }

/* Phone: "Find your Anthos" is a swipe row of 260px cards, as the prototype's .product-grid--row,
   and "Shop all" keeps its words (the stock block shows only the arrow on a phone). */
@media (max-width: 700px) {
  .section-featured-collection-wrapper ul.block-product-list {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .section-featured-collection-wrapper ul.block-product-list::-webkit-scrollbar { display: none; }
  .section-featured-collection-wrapper ul.block-product-list > li { flex: 0 0 260px; scroll-snap-align: start; }
  .section-featured-collection-wrapper theme-product-card { grid-template-columns: minmax(0, 1fr) auto; }
  .section-featured-collection-wrapper theme-product-card > .block-product-card__price { grid-column: 2; justify-self: end; }
}
.section-featured-collection-wrapper .heading-with-link__view-more > span { display: inline !important; }

/* ---- Colour swatches (blocks/product/detail-variant-picker.html, Theme settings › Colour swatches)
   The option's name small and tracked on the left, the chosen value on the right, round swatches
   below; the selected one gets a ring. A white swatch keeps a hairline so it reads on linen. */
.product-detail__variant-picker .variant-picker__group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.product-detail__variant-picker .variant-picker__selected {
  font-family: var(--f-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.product-detail__variant-picker .variant-picker__option:has(.variant-picker__button--swatch) { position: relative; }
.product-detail__variant-picker .variant-picker__option:has(.variant-picker__button--swatch) input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.product-detail__variant-picker .variant-picker__options:has(.variant-picker__button--swatch) { display: flex; flex-wrap: wrap; gap: 14px; }
.product-detail__variant-picker .variant-picker__button.variant-picker__button--swatch {
  display: block;
  width: 44px;
  height: 44px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--swatch);
  border: 1px solid rgba(28, 33, 24, .14);
  box-shadow: 0 0 0 0 transparent;
  cursor: pointer;
  transition: box-shadow var(--t-control), transform var(--t-control);
}
.product-detail__variant-picker .variant-picker__button--swatch:hover { transform: scale(1.06); }
.product-detail__variant-picker input:checked + .variant-picker__button--swatch {
  box-shadow: 0 0 0 2px var(--c-linen), 0 0 0 3.5px var(--c-ink);
}
.product-detail__variant-picker input:focus-visible + .variant-picker__button--swatch {
  box-shadow: 0 0 0 2px var(--c-linen), 0 0 0 4px var(--c-spectrum);
}

/* Swatches drawn with round shadows only: no border, border-image, outline or background image,
   any of which the platform's picker styles could paint as a square around the circle. */
.product-detail__variant-picker .variant-picker__button.variant-picker__button--swatch,
.product-detail__variant-picker input:checked + .variant-picker__button.variant-picker__button--swatch {
  border: 0 !important;
  border-image: none !important;
  outline: 0 !important;
  background-image: none !important;
  background-color: var(--swatch) !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 1px rgba(28, 33, 24, .14) !important;
}
.product-detail__variant-picker input:checked + .variant-picker__button.variant-picker__button--swatch {
  box-shadow: inset 0 0 0 1px rgba(28, 33, 24, .14), 0 0 0 2px var(--c-linen), 0 0 0 3.5px var(--c-ink) !important;
}
.product-detail__variant-picker input:focus-visible + .variant-picker__button.variant-picker__button--swatch {
  box-shadow: inset 0 0 0 1px rgba(28, 33, 24, .14), 0 0 0 2px var(--c-linen), 0 0 0 4px var(--c-spectrum) !important;
}
.product-detail__variant-picker .variant-picker__option:has(.variant-picker__button--swatch),
.product-detail__variant-picker .variant-picker__option:has(.variant-picker__button--swatch)::before,
.product-detail__variant-picker .variant-picker__option:has(.variant-picker__button--swatch)::after,
.product-detail__variant-picker .variant-picker__button--swatch::before,
.product-detail__variant-picker .variant-picker__button--swatch::after {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none;
  background: none;
}
.product-detail__variant-picker .variant-picker__option:has(.variant-picker__button--swatch) { width: 44px; height: 44px; border-radius: 50%; }

/* The platform's picker styles give every option button square ::before/::after frames (a grey
   hairline, black when selected). A swatch is only the circle. */
.product-detail__variant-picker .variant-picker__button.variant-picker__button--swatch::before,
.product-detail__variant-picker .variant-picker__button.variant-picker__button--swatch::after {
  content: none !important;
  display: none !important;
}

/* ---- Product lightbox (public/theme/js/lightbox.js) --------------------------------------------
   Ink backdrop, one photo fitted to the screen, counter and close on top, arrows at the sides, a
   strip of thumbnails at the bottom. The active thumbnail is simply fully lit; the others rest at
   half — no frames. The main gallery's picture shows a zoom cursor. */
html.lp-lightbox-open { overflow: hidden; }
.product-detail__media-gallery .media-gallery__item img { cursor: zoom-in; }

.lp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(20, 24, 18, .94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--c-cream);
  opacity: 0;
  transition: opacity .22s ease;
}
.lp-lightbox[hidden] { display: none; }
.lp-lightbox.is-open { opacity: 1; }

.lp-lightbox__bar { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; }
.lp-lightbox__count { font-family: var(--f-label); font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--c-cream-72); font-variant-numeric: tabular-nums; }
.lp-lightbox__close,
.lp-lightbox__nav {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  padding: 0;
  color: var(--c-cream);
  background: rgba(246, 242, 233, .08);
  border: 1px solid rgba(246, 242, 233, .16);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--t-control), border-color var(--t-control), opacity var(--t-control);
}
.lp-lightbox__close:hover,
.lp-lightbox__nav:hover { background: rgba(246, 242, 233, .16); border-color: rgba(246, 242, 233, .3); }
.lp-lightbox__close:focus-visible,
.lp-lightbox__nav:focus-visible,
.lp-lightbox__thumb:focus-visible { outline: 2px solid var(--c-spectrum); outline-offset: 3px; }

.lp-lightbox__stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 0; padding: 0 22px; }
.lp-lightbox__frame { position: relative; flex: 1 1 auto; height: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--r-lg); }
.lp-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-lg);
  cursor: zoom-in;
  user-select: none;
  opacity: 0;
  transform: scale(.985);
  transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.lp-lightbox.is-shown .lp-lightbox__img { opacity: 1; transform: none; }
.lp-lightbox.is-zoomed .lp-lightbox__img { transform: scale(2); cursor: zoom-out; border-radius: 0; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.lp-lightbox.is-zoomed .lp-lightbox__nav { opacity: 0; pointer-events: none; }
.lp-lightbox.is-single .lp-lightbox__nav,
.lp-lightbox.is-single .lp-lightbox__strip { display: none; }

.lp-lightbox__strip {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 18px 22px 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.lp-lightbox__strip::-webkit-scrollbar { display: none; }
.lp-lightbox__thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(246, 242, 233, .06);
  opacity: .45;
  cursor: pointer;
  transition: opacity var(--t-control), transform var(--t-control);
}
.lp-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-lightbox__thumb:hover { opacity: .8; }
.lp-lightbox__thumb.is-active { opacity: 1; transform: translateY(-2px); }

@media (max-width: 700px) {
  .lp-lightbox__bar { padding: 12px 14px; }
  .lp-lightbox__stage { padding: 0 10px; gap: 0; }
  .lp-lightbox__nav { position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px; background: rgba(20, 24, 18, .55); }
  .lp-lightbox__nav--prev { left: 16px; }
  .lp-lightbox__nav--next { right: 16px; }
  .lp-lightbox__thumb { width: 52px; height: 52px; }
  .lp-lightbox__strip { justify-content: flex-start; padding: 14px 14px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-lightbox, .lp-lightbox__img, .lp-lightbox__thumb { transition: none; }
}

/* The page's own gallery thumbnails: no frame either — the active one is fully lit. */
.product-detail__media-gallery .media-gallery__thumbnail,
.product-detail__media-gallery .media-gallery__thumbnail.is-active,
.product-detail__media-gallery .media-gallery__thumbnail.is-select {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0;
  opacity: .5;
  transition: opacity var(--t-control);
}
.product-detail__media-gallery .media-gallery__thumbnail::before,
.product-detail__media-gallery .media-gallery__thumbnail::after { content: none !important; display: none !important; }
.product-detail__media-gallery .media-gallery__thumbnail:hover { opacity: .8; }
.product-detail__media-gallery .media-gallery__thumbnail.is-active,
.product-detail__media-gallery .media-gallery__thumbnail.is-select { opacity: 1; }
.product-detail__media-gallery .media-gallery__thumbnail:focus-visible { outline: 2px solid var(--c-spectrum); outline-offset: 2px; }

/* ---- Contact page (sections/lp-contact) — prototype-v2/contact.html ---------------------------- */
.lp-contact { padding-top: 24px; padding-bottom: clamp(64px, 8vw, 110px); }
.lp-contact__title { margin: 0 0 16px; }
.lp-contact__intro { margin: 0 0 48px; }
.lp-contact__intro p { margin: 0; }
.lp-contact__grid { align-items: start !important; }
.lp-contact__form-wrap, .lp-contact__form-wrap form { display: block; margin: 0; }
.lp-contact__fields { gap: 18px; }
.lp-contact .input { width: 100%; }
.lp-contact .lp-contact__select {
  width: 100%;
  padding: 15px 44px 15px 18px;
  font-size: 15px;
  color: var(--c-ink);
  background: var(--c-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%231C2118' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.lp-contact .lp-contact__select:focus { outline: none; border-color: var(--c-spectrum); box-shadow: 0 0 0 3px rgba(232, 163, 61, .22); }
.lp-contact__message { min-height: 160px; resize: vertical; line-height: 1.6; }
.lp-contact__send { align-self: flex-start; }
.lp-contact__note { margin: 0; font-size: 13.5px; }
.lp-contact__note p { margin: 0; }
.lp-contact__note a { font-weight: 600; border-bottom: 1px solid var(--c-line-strong); }
.lp-contact__error {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: rgba(200, 107, 74, .1);
  border: 1px solid rgba(200, 107, 74, .45);
  color: var(--c-ink);
  font-size: 14.5px;
}
.lp-contact__done { padding: 30px; border-radius: var(--r-lg); background: var(--c-paper); border: 1px solid var(--c-line); }
.lp-contact__done-label { margin-bottom: 10px; color: var(--c-moss); }
.lp-contact__done-text { margin: 0; font-size: 17px; line-height: 1.7; color: var(--c-ink-soft); }
.lp-contact__aside { padding: 30px; }
.lp-contact__aside-label { margin-bottom: 14px; }
.lp-contact__aside-text { margin: 0 0 20px; font-size: 16px; line-height: 1.7; color: var(--c-ink-soft); }
.lp-contact__links { gap: 10px; align-items: flex-start; }
.lp-contact__rule { border: 0; height: 1px; background: var(--c-line); margin: 24px 0; }
@media (max-width: 860px) {
  .lp-contact__grid { grid-template-columns: minmax(0, 1fr) !important; row-gap: 32px; }
}
@media (max-width: 520px) {
  .lp-contact .field-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-contact .field-grid .input--wide { grid-column: auto; }
  .lp-contact__send { align-self: stretch; }
}