/* Product page hero - gallery + buy panel (design/product-page/index-ds.html) */

#pgprod{
  --opt-cabinet-tile: 65px;
  --opt-cabinet-grid-min: 56px;
  --opt-cabinet-gap: 1rem;
  --opt-cabinet-frame-pair: calc(var(--opt-cabinet-tile) * 2 + var(--opt-cabinet-gap));
  --opt-cabinet-foot-min: 2rem;
  --opt-cabinet-label-fs: 0.5rem;
  --opt-cabinet-price-fs: 0.48rem;
  --opt-cabinet-tick: 12px;
}

#pgprod > .container{
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

#pgprod > .container > .row{
  margin-left: 0;
  margin-right: 0;
}

#pgprod #content{
  padding: 0;
  width: 100%;
  float: none;
}

/* ===== HERO: gallery + buy panel ===== */
#pgprod .pdp{
  border-bottom: 0;
}

#pgprod .pdp__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: stretch;
  width: 100%;
}

#pgprod .pdp__grid > .gallery,
#pgprod .pdp__grid > .buy{
  min-width: 0;
  width: auto;
  max-width: none;
  float: none;
}

@media (min-width: 1101px){
  #pgprod .pdp__grid > .gallery {
    grid-column: 1;
    grid-row: 1;
  }

  #pgprod .pdp__grid > .buy {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Kill legacy productpage layout rules still loaded globally */
#pgprod .gallery,
#pgprod .gallery .productpage__media-wrap,
#pgprod .gallery #gallery-stage,
#pgprod .buy,
#pgprod .buy .productpage__info{
  width: auto !important;
  max-width: none !important;
  float: none !important;
  display: block;
  flex: none !important;
  padding-left: 0;
  position: static;
  top: auto;
  margin: 0;
}

#pgprod .gallery .productpage__thumbs{
  width: 100% !important;
  flex-direction: row !important;
}

/* gallery */
#pgprod .gallery{
  border-right: 1px solid var(--ink);
}

#pgprod .gallery__stage{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}

#pgprod .gallery__stage .productpage__media-wrap,
#pgprod .gallery__stage #gallery-stage{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

#pgprod .gallery__swiper{
  overflow: hidden;
}

#pgprod .gallery__swiper .swiper-wrapper{
  height: 100%;
}

#pgprod .gallery__swiper .swiper-slide{
  height: 100%;
  overflow: hidden;
}

#pgprod .gallery__slide--video video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--paper);
}

#pgprod .gallery__image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  display: block;
  animation: pp-specimen-in 0.7s ease both;
  filter: none;
  cursor: zoom-in;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-drag: none;
}

#pgprod .gallery__image.is-swipe-left{
  animation: pp-gallery-swipe-left 0.35s ease both;
}

#pgprod .gallery__image.is-swipe-right{
  animation: pp-gallery-swipe-right 0.35s ease both;
}

@keyframes pp-gallery-swipe-left{
  from {
    opacity: 0.35;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pp-gallery-swipe-right{
  from {
    opacity: 0.35;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

#pgprod .gallery__stage #lg-gallery.mb-lg-sources{
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

@keyframes pp-specimen-in{
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce){
  #pgprod .gallery__image,
  #pgprod .gallery__image.is-swipe-left,
  #pgprod .gallery__image.is-swipe-right {
    animation: none;
  }
}

#pgprod .buy__range-map .map-outer,
#pgprod .buy__range-map .hidden-sm,
#pgprod .buy__range-map .hidden-xs{
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0;
}

#pgprod .gallery__stage #carousel-container{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#pgprod .gallery__stage #carousel-container img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#pgprod .gallery__note{
  display: none !important;
}

#pgprod .gallery__note strong{
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--sans-bold);
  font-weight: normal;
  font-size: 0.45rem;
  letter-spacing: var(--tracked);
  text-transform: uppercase;
  color: var(--terracotta);
}

#pgprod .gallery__note span{
  font-family: var(--serif);
  font-variation-settings: 'wght' 400;
  font-weight: normal;
  font-size: 1.12rem;
  line-height: 1.18;
}

#pgprod .gallery__badges{
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  left: clamp(1rem, 3vw, 2rem);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  pointer-events: none;
}

#pgprod .gallery__badges .product-label{
  position: static;
  top: auto;
  left: auto;
  right: auto;
  display: inline-block;
  height: auto;
  background: var(--terracotta);
  color: var(--bone);
  font-family: var(--sans-bold);
  font-weight: normal;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracked);
  text-transform: uppercase;
  padding: 0.35em 0.6em;
  border: 0;
  line-height: 1;
  white-space: nowrap;
}

#pgprod .gallery__badges .product-label .product-label-special{
  display: inline;
  width: auto;
  height: auto;
  position: static;
  background: var(--terracotta);
}

#pgprod .thumbs-outer{
  position: relative;
}

#pgprod .thumbs{
  --thumb-row-cols: var(--thumb-cols, 5);
  --thumb-size: 7.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  width: 100%;
  border-top: 0;
}

/* Single-row swiper carousel (used when there are more than 5 thumbs) */
#pgprod .thumbs.thumbs--swiper{
  --thumb-row-cols: 5;
  display: block;
  flex-wrap: nowrap;
  overflow: hidden;
}

#pgprod .thumbs.thumbs--swiper .swiper-wrapper{
  display: flex;
  box-sizing: content-box;
}

#pgprod .thumbs.thumbs--swiper .swiper-slide{
  flex-shrink: 0;
  height: auto;
  width: var(--thumb-size);
}

#pgprod .thumbs > a,
#pgprod .thumbs > button,
#pgprod .thumbs .video-thumb,
#pgprod .thumbs .swiper-slide > button,
#pgprod .thumbs .swiper-slide > .video-thumb{
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--bone);
  aspect-ratio: 1 / 1;
  opacity: 0.62;
  transition: opacity 0.2s ease, filter 0.2s ease;
  display: block;
  overflow: hidden;
  cursor: pointer;
  width: 100%;
  box-shadow: none;
}

#pgprod .thumbs:not(.thumbs--swiper) > a,
#pgprod .thumbs:not(.thumbs--swiper) > button,
#pgprod .thumbs:not(.thumbs--swiper) .video-thumb{
  flex: 0 0 var(--thumb-size);
  width: var(--thumb-size);
  max-width: var(--thumb-size);
}

#pgprod .thumbs > a.is-active,
#pgprod .thumbs > button.is-active,
#pgprod .thumbs .swiper-slide > button.is-active,
#pgprod .thumbs .video-thumb.is-active,
#pgprod .thumbs .swiper-slide > .video-thumb.is-active{
  opacity: 1;
  filter: contrast(1.08);
  box-shadow: none;
}

#pgprod .thumbs > a:focus-visible,
#pgprod .thumbs > button:focus-visible,
#pgprod .thumbs .swiper-slide > button:focus-visible,
#pgprod .thumbs .video-thumb:focus-visible,
#pgprod .thumbs .swiper-slide > .video-thumb:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: -2px;
  box-shadow: none;
}

#pgprod .thumbs img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-right: 1px solid var(--ink);
}

#pgprod .thumbs .video-thumb{
  position: relative;
}

#pgprod .thumbs .video-thumb::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(242, 239, 228, 0.5);
  pointer-events: none;
}

#pgprod .thumbs .video-thumb::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--ink);
  pointer-events: none;
}

#pgprod .thumbs .video-thumb img{
  opacity: 0.35;
}

#pgprod .gallery .productpage__media{
  display: block;
  margin: 0;
  grid-template-columns: none;
  border: 0;
}

#pgprod .gallery .productpage__thumbs{
  display: contents;
}

#pgprod .gallery #video-block{
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--paper);
}

#pgprod .gallery #video-block video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 820px){
  #pgprod .thumbs:not(.thumbs--swiper) > a,
  #pgprod .thumbs:not(.thumbs--swiper) > button,
  #pgprod .thumbs:not(.thumbs--swiper) .video-thumb{
    flex: 0 0 calc((100% - (var(--thumb-row-cols) - 1) * 1px) / var(--thumb-row-cols));
    width: calc((100% - (var(--thumb-row-cols) - 1) * 1px) / var(--thumb-row-cols));
    max-width: var(--thumb-size);
  }

  #pgprod .thumbs.thumbs--swiper .swiper-slide{
    width: calc((100% - 4 * 1px) / 5);
    max-width: var(--thumb-size);
  }
}

@media (max-width: 767px){
  #pgprod .thumbs-outer {
    display: none;
  }

  #pgprod .gallery {
    border-bottom: 1px solid var(--ink);
  }

  #pgprod .gallery__stage {
    border-bottom: 0;
    touch-action: pan-y pinch-zoom;
  }
}

/* buy panel */
#pgprod .buy{
  padding: clamp(1.4rem, 2.6vw, 2.4rem);
  display: flex;
  flex-direction: column;
  background: var(--bone);
}

#pgprod .buy__panel{
  position: sticky;
  top: 98px;
  display: flex;
  flex-direction: column;
}

#pgprod .buy__intro{
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: 1rem;
  align-items: center;
  margin: 0 0 1.35rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--hairline);
}

#pgprod .buy__intro:not(:has(.buy__range)){
  grid-template-columns: 1fr;
}

#pgprod .buy__intro-copy{
  min-width: 0;
}

#pgprod .buy__intro .buy__acc{
  display: block;
  margin-bottom: 0.4rem;
}

#pgprod .buy__intro .buy__latin,
#pgprod .buy__intro #latin .latin,
#pgprod .buy__intro h2.latin{
  margin: 0.5rem 0 0;
  font-family: var(--italic);
  font-variation-settings: 'wght' 400;
  font-weight: normal;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--muted);
}

#pgprod .buy__intro h1,
#pgprod .buy__intro .heading-left{
  margin: 0.35rem 0 0;
  font-family: var(--serif);
  font-variation-settings: 'wght' 400;
  font-weight: normal;
  font-size: clamp(1.9rem, 4.2vw, 2.7rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-align: left;
  color: var(--ink);
}

#pgprod .buy__intro h1 em,
#pgprod .buy__intro .heading-left em{
  display: block;
  font-family: var(--italic);
  font-variation-settings: 'wght' 400;
  font-weight: normal;
  color: var(--terracotta);
}

#pgprod .buy__reviews{
  margin-top: 0.65rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
}

#pgprod .buy__reviews .mb-spec-card__thumbs{
  margin: 0;
  padding: 0;
}

#pgprod .buy__reviews .mb-spec-card__thumbs li{
  cursor: pointer;
}

#pgprod .buy__reviews-link{
  margin: 0;
  border-bottom: 0;
  color: var(--muted);
  text-decoration: none;
}

#pgprod .buy__reviews-link:hover{
  color: var(--terracotta);
}

#pgprod .buy__range--compact{
  border: 1px solid var(--ink);
  background: var(--paper);
  overflow: hidden;
  align-self: start;
  width: 100%;
  box-shadow: 4px 4px 0 rgba(30, 30, 30, 0.08);
}

#pgprod .buy__range-map{
  position: relative;
  width: 100%;
  background: var(--paper);
  overflow: hidden;
  touch-action: none;
}

#pgprod .buy__range--compact .buy__range-map{
  aspect-ratio: 1 / 1;
}

#pgprod .buy__range-map .map-outer,
#pgprod .buy__range-map #vmap{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0;
}

#pgprod .buy__range-map svg{
  display: block;
  max-width: 100%;
  max-height: 100%;
}

#pgprod .buy__range-map .jqvmap-region{
  cursor: pointer;
  transition: fill 0.2s ease, fill-opacity 0.2s ease;
}

#pgprod .buy__range-map .jqvmap-zoomin,
#pgprod .buy__range-map .jqvmap-zoomout{
  position: absolute;
  left: auto !important;
  right: 6px !important;
  z-index: 3;
  box-sizing: border-box;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans-bold);
  font-weight: normal;
  font-size: 12px;
  line-height: 18px !important;
  text-align: center;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(30, 30, 30, 0.12);
  transition: background 0.2s ease, color 0.2s ease;
}

#pgprod .buy__range-map .jqvmap-zoomin{
  top: 6px !important;
}

#pgprod .buy__range-map .jqvmap-zoomout{
  top: 28px !important;
}

#pgprod .buy__range-map .jqvmap-zoomin:hover,
#pgprod .buy__range-map .jqvmap-zoomout:hover,
#pgprod .buy__range-map .jqvmap-zoomin:focus-visible,
#pgprod .buy__range-map .jqvmap-zoomout:focus-visible{
  background: var(--ink);
  color: var(--bone);
  outline: none;
}

/* jqvmap appends .jqvmap-label to body, not inside .buy__range-map */
body:has(#pgprod) .jqvmap-label,
body:has(#pgprod) .jqvmap-label.jqvmap-label--ds{
  position: absolute;
  z-index: 100010;
  pointer-events: none;
  border-radius: 0 !important;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font-family: var(--sans-bold);
  font-weight: normal;
  font-size: 0.65rem;
  letter-spacing: var(--tracked);
  text-transform: uppercase;
  padding: 0.4em 0.6em;
  box-shadow: 4px 4px 0 rgba(30, 30, 30, 0.14);
}

#pgprod .buy__meta{
  margin-bottom: 1.35rem;
  padding: 0;
  border: 0;
  background: transparent;
  --pp-type: 'Courier New', Courier, ui-monospace, monospace;
  --pp-type-size: 0.75rem;
}

#pgprod .buy__meta .buy__key-data{
  padding: 1rem 1.15rem;
  border: 1px solid var(--ink);
  background: var(--paper);
}

#pgprod .buy__meta .pp-spec-index__rows{
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

#pgprod .buy__meta .production-meta{
  display: contents;
}

#pgprod .buy__meta .production-meta.is-loading{
  display: block;
}

#pgprod .buy__meta .production-meta.is-loading .production-meta__skeleton{
  display: flex;
  align-items: baseline;
  gap: 0;
  width: 100%;
}

#pgprod .buy__meta .production-meta__skel{
  display: block;
  flex-shrink: 0;
  height: 12px;
  border-radius: 2px;
  background-color: var(--hairline);
  position: relative;
  overflow: hidden;
}

#pgprod .buy__meta .production-meta__skel::after{
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: production-meta-shimmer 1.35s ease-in-out infinite;
}

#pgprod .buy__meta .production-meta__skel--label{
  width: 7rem;
  margin-right: 0.35rem;
}

#pgprod .buy__meta .production-meta__skel--value{
  width: 5.25rem;
}

@keyframes production-meta-shimmer{
  100% {
    transform: translateX(100%);
  }
}

#pgprod .buy__meta .pp-spec-index__row,
#pgprod .buy__meta .buy__price-row{
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: 0;
  margin: 0;
}

#pgprod .buy__meta .buy__price-row{
  align-items: baseline;
  min-height: 2.5rem;
  margin-bottom: 0;
}

#pgprod .buy__meta .pp-spec-index__label{
  font-family: var(--italic);
  font-variation-settings: 'wght' 400;
  font-weight: normal;
  font-style: italic;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
  white-space: nowrap;
  background: var(--paper);
  padding-right: 0.35rem;
}

#pgprod .buy__meta .pp-spec-index__label b{
  font-family: var(--serif) !important;
  font-variation-settings: 'wght' 600;
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  line-height: inherit;
  color: var(--ink);
  background: var(--paper);
}

#pgprod .buy__meta .pp-spec-index__dots{
  flex: 1;
  min-width: 1rem;
  border-bottom: 2px dotted var(--hairline);
  transform: translateY(-0.22em);
}

#pgprod .buy__meta .buy__price-row .pp-spec-index__dots{
  transform: translateY(-0.28em);
}

#pgprod .buy__meta .pp-spec-index__value{
  flex-shrink: 0;
  min-width: 0;
  font-family: var(--pp-type);
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--ink);
  text-align: right;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  background: var(--paper);
  padding-left: 0.35rem;
}

#pgprod .buy__meta .pp-spec-index__value .ajax-reward{
  font-family: inherit;
  font-weight: inherit;
}

#pgprod .buy__meta .pp-spec-index__value .delivery-info-icon.mc__info,
#pgprod .buy__meta .pp-spec-index__value .delivery-info-icon--pin{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 14px;
  height: 14px;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  top: 0;
}

#pgprod .buy__meta .pp-spec-index__value .delivery-info-icon svg{
  width: 100%;
  height: 100%;
  display: block;
}

#pgprod .buy__meta .buy__shipflag-row{
  margin-top: 0.35rem;
}

#pgprod .buy__meta .mc__shipflag{
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  border: 1px solid var(--terracotta);
  color: var(--ink);
  padding: 0.3em 0.55em;
  font-family: var(--sans-bold);
  font-weight: normal;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracked);
  text-transform: uppercase;
}

#pgprod .buy__meta .mc__shipflag::before{
  content: "";
  width: 6px;
  height: 6px;
  background: var(--terracotta);
  border-radius: 50%;
}

#pgprod .buy__meta .where_ship.UK-SHIP{
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  border: 1px solid var(--terracotta);
  color: var(--ink);
  padding: 0.3em 0.55em;
  font-family: var(--sans-bold);
  font-weight: normal;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracked);
  text-transform: uppercase;
  margin: 0;
}

#pgprod .buy__meta .where_ship.UK-SHIP img{
  width: 25px;
  height: auto;
  max-width: 25px;
  flex-shrink: 0;
  border-radius: 2px;
}

#pgprod .buy__meta .buy__price-lead{
  flex-shrink: 0;
  font-family: var(--serif);
  font-variation-settings: 'wght' 400;
  font-weight: normal;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  position: relative;
  top: 0.08rem;
  background: var(--paper);
  padding-right: 0.35rem;
}

#pgprod .buy__meta .buy__price-lead .ajax-special-product,
#pgprod .buy__meta .buy__price-lead .js-oip-total-special{
  color: var(--moss);
  font-weight: 500;
}

#pgprod .buy__meta .buy__price-lead .buy__price-was{
  margin-left: 0.35rem;
  font-family: var(--italic);
  font-variation-settings: 'wght' 400;
  font-weight: normal;
  font-style: italic;
  font-size: 0.72em;
  color: var(--moss);
  text-decoration: line-through;
  text-decoration-color: currentColor;
}

#pgprod .buy__meta .buy__price-alt{
  flex-shrink: 0;
  min-width: 0;
  font-family: var(--pp-type);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.2rem;
  background: var(--paper);
  padding-left: 0.35rem;
}

#pgprod .buy__meta .buy__price-or{
  font-family: var(--italic);
  font-variation-settings: 'wght' 400;
  font-weight: normal;
  font-style: italic;
  font-size: inherit;
  letter-spacing: normal;
  color: var(--muted);
  padding-right: 0.5rem;
}

@media (max-width: 767px){
  #pgprod .buy__meta {
    margin-bottom: 1.5rem;
  }

  #pgprod .buy__meta .pp-spec-index__rows {
    gap: 0.45rem;
  }

  #pgprod .buy__meta .buy__key-data {
    padding: 0.9rem 1rem;
  }

  #pgprod .buy__meta .buy__price-row {
    min-height: 2.25rem;
    margin-bottom: 0;
  }

  #pgprod .buy__meta .pp-spec-index__label,
  #pgprod .buy__meta .buy__price-alt,
  #pgprod .buy__meta .pp-spec-index__value {
    white-space: normal;
  }
}

#pgprod .buy__info{
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--muted);
  font-family: var(--sans-bold);
  font-weight: normal;
  font-size: 0.62rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Options + gift box (design/product-page/index-ds.html) */
#pgprod .buy #product{
  position: static;
  width: auto;
  max-width: 100%;
  margin: 0 !important;
  padding: 0;
  background: transparent;
  left: auto;
  bottom: auto;
  z-index: auto;
}

#pgprod #product .buy__options,
#pgprod #product .product__inner.buy__options{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 1.6rem;
  position: static;
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding: 0;
}

@media (min-width: 767px){
  #pgprod #product .product__inner.buy__options {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Option blocks - single column, equal width, no legacy per-ID margins */
#pgprod #product .buy__options > .opt,
#pgprod #product .buy__options > .opt-row,
#pgprod #product .buy__options > .checkbox-outer,
#pgprod #product .buy__options > .form-group,
#pgprod #product .buy__options > .form-group-v2,
#pgprod #product .buy__options > #FirstFrame,
#pgprod #product .buy__options > #FrameColour,
#pgprod #product .buy__options > #BaroqueCorners,
#pgprod #product .buy__options > #DoNotInclude,
#pgprod #product .buy__options > #GiftWrap,
#pgprod #product .opt,
#pgprod #product .checkbox-outer,
#pgprod #product #FirstFrame,
#pgprod #product #FrameColour,
#pgprod #product #BaroqueCorners,
#pgprod #product #DoNotInclude,
#pgprod #product #GiftWrap,
#pgprod #product .form-group,
#pgprod #product .form-group-v2{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  float: none;
  flex: 0 0 auto;
  display: block;
  align-self: stretch;
  margin: 0 !important;
  padding: 0;
}

#pgprod #product #FirstFrame + #FrameColour,
#pgprod #product #DoNotInclude,
#pgprod #product #checkbox-outer{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}

#pgprod #product #FrameColour + #GiftWrap.opt--gift-wrap,
#pgprod #product #BaroqueCorners + #GiftWrap.opt--gift-wrap{
  margin-top: 0 !important;
}

/* Frame colour + gift box - same row, separate headings */
#pgprod #product .buy__options > .opt-row--frame-gift{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start;
  gap: 2rem;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
}

#pgprod #product .buy__options > .opt-row--frame-gift > #FrameColour,
#pgprod #product .buy__options > .opt-row--frame-gift > #BaroqueCorners{
  flex: 0 0 auto;
  width: var(--opt-cabinet-frame-pair) !important;
  max-width: var(--opt-cabinet-frame-pair) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#pgprod #product .buy__options > .opt-row--frame-gift > #GiftWrap.opt--gift-wrap{
  flex: 0 0 auto;
  width: var(--opt-cabinet-tile) !important;
  max-width: var(--opt-cabinet-tile) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#pgprod #product .buy__options > .opt-row--frame-gift #FrameColour .opt-cabinet,
#pgprod #product .buy__options > .opt-row--frame-gift #BaroqueCorners .opt-cabinet{
  display: grid !important;
  grid-template-columns: repeat(2, var(--opt-cabinet-tile)) !important;
  gap: var(--opt-cabinet-gap) !important;
  width: var(--opt-cabinet-frame-pair) !important;
  max-width: var(--opt-cabinet-frame-pair) !important;
}

#pgprod #product .buy__options > .opt-row--frame-gift #GiftWrap .opt-cabinet{
  display: grid !important;
  grid-template-columns: var(--opt-cabinet-tile) !important;
  gap: var(--opt-cabinet-gap) !important;
  width: var(--opt-cabinet-tile) !important;
  max-width: var(--opt-cabinet-tile) !important;
}

/* Uniform tile height - frame colour sets the reference size */
#pgprod #product .buy__options > .opt-row--frame-gift .opt-cabinet__tile,
#pgprod .buy__options > .opt-row--frame-gift .opt-cabinet__tile{
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--opt-cabinet-tile);
  min-height: 0;
}

#pgprod #product .buy__options > .opt-row--frame-gift .opt-cabinet__photo,
#pgprod .buy__options > .opt-row--frame-gift .opt-cabinet__photo{
  display: block;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1 / 1;
}

#pgprod #product .buy__options > .opt-row--frame-gift .opt-cabinet__foot,
#pgprod .buy__options > .opt-row--frame-gift .opt-cabinet__foot{
  flex: 0 0 auto;
  min-height: var(--opt-cabinet-foot-min);
  max-height: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.06rem;
  padding: 0.2rem 0.22rem;
  overflow: visible;
  box-sizing: border-box;
}

#pgprod #product .buy__options > .opt-row--frame-gift .opt-cabinet__name,
#pgprod .buy__options > .opt-row--frame-gift .opt-cabinet__name,
#pgprod #product .buy__options > .opt-row--frame-gift .opt-cabinet__price,
#pgprod .buy__options > .opt-row--frame-gift .opt-cabinet__price{
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  text-align: center;
  width: 100%;
  line-height: 1.15;
}

#pgprod #product .buy__options > .opt-row--frame-gift .opt-cabinet__price,
#pgprod .buy__options > .opt-row--frame-gift .opt-cabinet__price{
  font-size: var(--opt-cabinet-price-fs);
  letter-spacing: 0.02em;
}

#pgprod #product .buy__options > .opt-row--frame-gift .opt__head .cap{
  color: var(--muted);
}

/* Image + radio text swatches - horizontal scroll when row exceeds viewport */
#pgprod #product .swatches--scroll{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.6rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
  mask-image: linear-gradient(to right, #000 88%, transparent);
}

#pgprod #product .swatches--scroll::-webkit-scrollbar{
  display: none;
}

#pgprod #product .swatches--scroll.is-scrolled-end{
  -webkit-mask-image: none;
  mask-image: none;
}

#pgprod #product .swatches--scroll .radio,
#pgprod #product .swatches--scroll .checkbox{
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
}

#pgprod #product .swatches--scroll .swatch--image,
#pgprod #product .swatches--scroll .swatch--text{
  width: auto !important;
  min-width: 9.5rem !important;
  flex: 0 0 auto;
}

#pgprod #product .swatch--gift-wrap{
  margin: 0;
  min-width: 0;
}

/* Image options - cabinet grid (uniform tile size across all option groups) */
#pgprod #product .opt-cabinet{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--opt-cabinet-grid-min), var(--opt-cabinet-tile)));
  gap: var(--opt-cabinet-gap);
  justify-content: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#pgprod #product .opt__head{
  display: block;
  margin: 0 0 0.7rem 0;
  padding: 0;
}

#pgprod #product .opt__head .cap{
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  font-family: var(--sans-bold);
  font-weight: normal;
  font-size: var(--fs-cap);
  letter-spacing: var(--tracked);
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 10px;
}

/* Select / legacy form groups - match .opt__head spacing when no .opt wrapper */
#pgprod #product .opt--select > .buy__select,
#pgprod #product .opt--select select.form-control{
  margin-top: 0;
}

#pgprod #product .form-group > .control-label:first-child{
  display: block;
  margin: 0 0 0.7rem 0;
  padding: 0;
  width: 100%;
  height: auto !important;
  line-height: 1.2 !important;
  font-family: var(--sans-bold);
  font-weight: normal;
  font-size: var(--fs-cap);
  letter-spacing: var(--tracked);
  text-transform: uppercase;
  color: var(--ink);
}

#pgprod #product .opt__head .mb-micro{
  color: var(--muted);
  flex-shrink: 0;
}

#pgprod #product .swatches:not(.swatches--scroll){
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  width: auto;
}

/* Checkbox options - cabinet grid toggle chips (catalogue tab pattern) */
#pgprod #product .opt-toggles{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}

#pgprod #product .opt-toggle{
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  border: 1px solid var(--ink);
  padding: 0.7em 1.1em;
  cursor: pointer;
  font-family: var(--sans-bold);
  font-weight: normal;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracked);
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

#pgprod #product .opt-toggle:hover{
  background: var(--bone-2);
}

#pgprod #product .opt-toggle:has(:checked){
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--bone);
}

#pgprod #product .opt-toggle:has(:focus-visible){
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

#pgprod #product .opt-toggle input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

#pgprod #product .opt-toggle.disabled,
#pgprod #product .opt-toggle:has(:disabled){
  opacity: 0.45;
  cursor: not-allowed;
}

#pgprod #product .opt-toggle__label{
  line-height: 1.15;
}

/* Image options - cabinet grid (square photo tiles + caption) */
#pgprod #product .opt-cabinet__tile{
  position: relative;
  display: block;
  margin: 0;
  border: 1px solid var(--hairline);
  background: var(--bone);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

#pgprod #product .opt-cabinet__tile:hover{
  background: var(--paper);
  border-color: var(--ink);
}

#pgprod #product .opt-cabinet__photo{
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

#pgprod #product .opt-cabinet__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

#pgprod #product .opt-cabinet__tile:hover .opt-cabinet__img{
  transform: scale(1.04);
}

#pgprod #product .opt-cabinet__foot{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.06rem;
  padding: 0.2rem 0.22rem;
  min-height: var(--opt-cabinet-foot-min);
  max-height: none;
  overflow: visible;
}

#pgprod #product .opt-cabinet__tick{
  position: absolute;
  bottom: 0.25rem;
  left: 0.25rem;
  z-index: 2;
  flex-shrink: 0;
  width: var(--opt-cabinet-tick);
  height: var(--opt-cabinet-tick);
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: rgba(244, 241, 234, 0.94);
  box-shadow: 0 1px 3px rgba(30, 30, 30, 0.18);
  transition: background 0.2s ease, border-color 0.2s ease;
}

#pgprod #product .opt-cabinet__tile:has(:checked) .opt-cabinet__tick{
  background: var(--terracotta);
  border-color: var(--terracotta);
}

#pgprod #product .opt-cabinet__tile:has(:checked) .opt-cabinet__tick::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 7px;
  border: solid var(--bone);
  border-width: 0 1.5px 1.5px 0;
  transform: translate(-50%, -58%) rotate(45deg);
}

#pgprod #product .opt-cabinet__name{
  flex: 0 0 auto;
  width: 100%;
  font-family: var(--sans-bold);
  font-weight: normal;
  font-size: var(--opt-cabinet-label-fs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--ink);
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  text-align: center;
}

#pgprod #product .opt-cabinet__price{
  flex: 0 0 auto;
  width: 100%;
  font-family: var(--sans-bold);
  font-weight: normal;
  font-size: var(--opt-cabinet-price-fs);
  letter-spacing: var(--tracked);
  color: var(--muted);
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  text-align: center;
  line-height: 1.15;
}

#pgprod #product .opt-cabinet__tile:has(:checked){
  border-color: var(--terracotta);
  background: var(--paper);
  box-shadow: none;
}

#pgprod #product .opt-cabinet__tile:has(:checked) .opt-cabinet__photo{
  border-bottom-color: rgba(194, 97, 58, 0.22);
}

#pgprod #product .opt-cabinet__tile:has(:checked) .opt-cabinet__name{
  color: var(--terracotta);
}

#pgprod #product .opt-cabinet__tile:has(:focus-visible){
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

#pgprod #product .opt-cabinet__tile input[type="radio"],
#pgprod #product .opt-cabinet__tile input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

#pgprod #product .opt-cabinet__tile.disabled,
#pgprod #product .opt-cabinet__tile:has(:disabled){
  opacity: 0.45;
  cursor: not-allowed;
}

#pgprod #product #GiftWrap.opt--gift-wrap,
#pgprod #product #GiftWrap .opt-cabinet__tile{
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Radio / image rows with swatches--scroll */
#pgprod #product .swatches.swatches--scroll,
#pgprod #product .opt .swatches.swatches--scroll{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 0.6rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
  mask-image: linear-gradient(to right, #000 88%, transparent);
}

#pgprod #product .swatches .radio,
#pgprod #product .swatches .checkbox{
  margin: 0;
  min-width: 0;
  display: block;
}

/* Checkbox / radio option labels - beat legacy Bootstrap + #checkbox-outer pills */
#pgprod #product .checkbox-outer{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 0 !important;
}

#pgprod #product .checkbox-outer .swatches{
  width: 100%;
}

#pgprod #product .swatches .radio > label.swatch--text,
#pgprod #product .swatches .checkbox > label.swatch--text,
#pgprod #product .checkbox-outer .checkbox > label.swatch--text,
#pgprod #product #checkbox-outer .checkbox > label.swatch--text{
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  width: auto;
  min-width: 9.5rem;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 0.7rem 0.9rem !important;
  line-height: 1.15 !important;
  height: auto !important;
  font-family: var(--sans-bold) !important;
  font-weight: normal !important;
  font-size: var(--fs-cap) !important;
  letter-spacing: var(--tracked) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: var(--ink) !important;
  background: transparent !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#pgprod #product .swatches .radio > label.swatch--text{
  border: 1px solid var(--ink) !important;
}

#pgprod #product .swatches .checkbox > label.swatch--text,
#pgprod #product .checkbox-outer .checkbox > label.swatch--text,
#pgprod #product #checkbox-outer .checkbox > label.swatch--text{
  border: 1px solid var(--ink) !important;
  box-shadow: none !important;
}

#pgprod #product .swatches .radio > label.swatch--text:has(:checked){
  background: transparent !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  box-shadow: none !important;
}

#pgprod #product .swatches .checkbox > label.swatch--text:has(:checked){
  background: transparent !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  box-shadow: none !important;
}

#pgprod #product .swatch--text .swatch__label{
  line-height: 1.15;
  text-transform: uppercase;
  flex: 1 1 auto;
  min-width: 0;
}

#pgprod #product .checkbox-outer .checkbox input[type="checkbox"],
#pgprod #product .swatches .checkbox input[type="checkbox"],
#pgprod #product .swatches .radio input[type="radio"],
#pgprod #product .checkbox-outer .radio input[type="radio"],
#pgprod #product div[id^="input-option"] .radio input[type="radio"],
#pgprod #product div[id^="input-option"] .checkbox input[type="checkbox"]{
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  left: 0 !important;
  pointer-events: none;
}

#pgprod #product .swatch.disabled,
#pgprod #product .checkbox.disabled .swatch,
#pgprod #product .radio.disabled .swatch{
  opacity: 0.45;
  cursor: not-allowed;
}

#pgprod #product .swatch{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: auto;
  min-width: 9.5rem;
  min-height: 64px;
  margin: 0;
  padding: 0.9rem 1rem;
  text-align: left;
  font-family: var(--sans-bold);
  font-weight: normal;
  font-size: var(--fs-cap);
  letter-spacing: var(--tracked);
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#pgprod #product .swatch:not(:has(input[type="checkbox"])){
  border: 1px solid var(--ink);
}

#pgprod #product label.swatch:has(input[type="checkbox"]){
  border: 1px solid var(--ink);
}

#pgprod #product label.swatch--text:has(input[type="radio"]:checked){
  background: transparent !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  box-shadow: none !important;
}

#pgprod #product label.swatch--text:has(input[type="checkbox"]:checked){
  background: transparent !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  box-shadow: none !important;
}

#pgprod #product .swatch input[type="radio"],
#pgprod #product .swatch input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

#pgprod #product .swatch__img{
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid currentColor;
  object-fit: cover;
  margin: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
}

#pgprod #product .swatch--text{
  justify-content: flex-start;
}

/* Override legacy stylesheet label clipping (height: 20px / line-height: 0) */
#pgprod #product #GiftWrap.opt--gift-wrap,
#pgprod #product #GiftWrap .opt-cabinet__tile,
#pgprod #product #GiftWrap label,
#pgprod #product #FrameColour .opt-cabinet__tile,
#pgprod #product #FrameColour label,
#pgprod #product #BaroqueCorners .opt-cabinet__tile,
#pgprod #product #BaroqueCorners label,
#pgprod #product #FirstFrame .opt-cabinet__tile,
#pgprod #product #FirstFrame label{
  height: auto !important;
  min-height: 0 !important;
  line-height: normal !important;
  overflow: visible !important;
}

#pgprod #product #GiftWrap.swatch--gift-wrap{
  display: inline-flex !important;
  align-items: stretch;
  flex: 0 0 auto;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Image swatches - bordered pill with tick + name + image (like gift box) */
#pgprod #product #FrameColour .swatch,
#pgprod #product #BaroqueCorners .swatch,
#pgprod #product #FirstFrame .swatch,
#pgprod #product .swatches--scroll .swatch--image,
#pgprod #product #GiftWrap .swatch--gift{
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  width: auto !important;
  min-width: 9.5rem;
  max-width: none !important;
  min-height: 64px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.7rem 0.9rem !important;
  text-align: left;
  font-family: var(--sans-bold);
  font-weight: normal;
  font-size: var(--fs-cap);
  letter-spacing: var(--tracked);
  text-transform: uppercase;
  color: var(--ink);
  background: transparent !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  cursor: pointer;
  overflow: visible !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#pgprod #product #FrameColour .swatch:has(:checked),
#pgprod #product #BaroqueCorners .swatch:has(:checked),
#pgprod #product #FirstFrame .swatch:has(:checked),
#pgprod #product .swatches--scroll .swatch--image:has(:checked){
  background: transparent !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  box-shadow: none !important;
}

#pgprod #product #FrameColour .swatch__label,
#pgprod #product #BaroqueCorners .swatch__label,
#pgprod #product #FirstFrame .swatch__label,
#pgprod #product .swatches--scroll .swatch--image .swatch__label{
  line-height: 1.15;
  text-transform: uppercase;
  flex: 1 1 auto;
  min-width: 0;
}

/* Tick circle - gift box, image, radio, and checkbox options */
#pgprod #product .swatch--text .gift-swatch__mark,
#pgprod #product .swatch--image .gift-swatch__mark,
#pgprod #product #FrameColour .gift-swatch__mark,
#pgprod #product #BaroqueCorners .gift-swatch__mark,
#pgprod #product #FirstFrame .gift-swatch__mark{
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}

#pgprod #product .swatch--text:has(:checked) .gift-swatch__mark,
#pgprod #product .swatch--image:has(:checked) .gift-swatch__mark,
#pgprod #product #FrameColour .swatch:has(:checked) .gift-swatch__mark,
#pgprod #product #BaroqueCorners .swatch:has(:checked) .gift-swatch__mark,
#pgprod #product #FirstFrame .swatch:has(:checked) .gift-swatch__mark{
  background: var(--moss);
  border-color: var(--moss);
}

#pgprod #product .swatch--text:has(:checked) .gift-swatch__mark::after,
#pgprod #product .swatch--image:has(:checked) .gift-swatch__mark::after,
#pgprod #product #FrameColour .swatch:has(:checked) .gift-swatch__mark::after,
#pgprod #product #BaroqueCorners .swatch:has(:checked) .gift-swatch__mark::after,
#pgprod #product #FirstFrame .swatch:has(:checked) .gift-swatch__mark::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 9px;
  border: solid var(--bone);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -58%) rotate(45deg);
}

/* Gift box - moss circle + tick (toggle on/off, no filled-button state) */
#pgprod #product #GiftWrap .swatch--gift{
  justify-content: flex-start;
  gap: 0.65rem;
}

#pgprod #product #GiftWrap .swatch--gift:has(:checked){
  background: transparent !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  box-shadow: none !important;
}

#pgprod #product #GiftWrap .gift-swatch__label{
  line-height: 1.15;
  text-transform: uppercase;
  flex: 1 1 auto;
  min-width: 0;
}

#pgprod #product #GiftWrap .gift-swatch__mark{
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}

#pgprod #product #GiftWrap .swatch--gift:has(:checked) .gift-swatch__mark{
  background: var(--moss);
  border-color: var(--moss);
}

#pgprod #product #GiftWrap .swatch--gift:has(:checked) .gift-swatch__mark::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 9px;
  border: solid var(--bone);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -58%) rotate(45deg);
}

#pgprod #product #FrameColour .swatch .swatch__img,
#pgprod #product #BaroqueCorners .swatch .swatch__img,
#pgprod #product #FirstFrame .swatch .swatch__img,
#pgprod #product .swatches--scroll .swatch--image .swatch__img,
#pgprod #product #GiftWrap .swatch--gift .swatch__img{
  margin-left: auto;
  flex-shrink: 0;
  width: 52px !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid var(--ink) !important;
  border-radius: 50% !important;
  background: var(--bone) !important;
  object-fit: cover !important;
  box-shadow: inset 0 0 0 3px var(--bone) !important;
  outline: none !important;
  filter: grayscale(0.12) contrast(1.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, filter 0.35s ease, transform 0.35s ease;
}

#pgprod #product #FrameColour .swatch:hover .swatch__img,
#pgprod #product #BaroqueCorners .swatch:hover .swatch__img,
#pgprod #product #FirstFrame .swatch:hover .swatch__img,
#pgprod #product .swatches--scroll .swatch--image:hover .swatch__img,
#pgprod #product #GiftWrap .swatch--gift:hover .swatch__img{
  filter: grayscale(0) contrast(1.06);
  transform: scale(1.04);
}

#pgprod #product #FrameColour .swatch:has(:checked) .swatch__img,
#pgprod #product #BaroqueCorners .swatch:has(:checked) .swatch__img,
#pgprod #product #FirstFrame .swatch:has(:checked) .swatch__img,
#pgprod #product .swatches--scroll .swatch--image:has(:checked) .swatch__img,
#pgprod #product #GiftWrap .swatch--gift:has(:checked) .swatch__img{
  border-color: var(--terracotta) !important;
  box-shadow: inset 0 0 0 3px var(--bone), 0 0 0 1px var(--terracotta) !important;
}

#pgprod #product .opt--select .buy__select{
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink);
  box-shadow: none;
}

#pgprod #product .gift-wrapping-box label.control-label,
#pgprod #product .gift-wrapping-box .option > label:not(.gift__btn){
  display: none;
}

#pgprod #product label.control-label{
  width: auto;
  font-size: inherit;
  color: var(--ink);
}

#pgprod #product .form-group-v2 .control-label{
  display: none;
}

#pgprod .buy .actions{
  --pp-btn-font-size: clamp(0.68rem, 2.8vw, 0.75rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin-top: 1.4rem;
  width: 100%;
}

#pgprod .buy .add,
#pgprod .buy #button-cart,
#pgprod .buy button.add,
#pgprod .buy button#button-cart,
#pgprod .buy #button-cart.btn,
#pgprod .buy #button-cart.btn-primary,
#pgprod .buy #button-cart.btn-icon,
#pgprod .buy button.btn.btn-primary.stock-alert,
.actions.pp-actions-portaled .add,
.actions.pp-actions-portaled #button-cart,
.actions.pp-actions-portaled button.add,
.actions.pp-actions-portaled button#button-cart,
.actions.pp-actions-portaled button.btn.btn-primary.stock-alert{
  min-height: 48px;
  height: auto !important;
  width: 100%;
  border: 0 !important;
  border-radius: 0;
  background: var(--ink) !important;
  color: var(--bone) !important;
  font-family: var(--sans-bold);
  font-weight: normal;
  font-size: var(--pp-btn-font-size, clamp(0.68rem, 2.8vw, 0.75rem)) !important;
  letter-spacing: var(--tracked);
  text-transform: uppercase;
  line-height: 1.2;
  padding: 0.85rem 1rem !important;
  margin: 0 !important;
  box-shadow: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

#pgprod .buy .add:hover,
#pgprod .buy #button-cart:hover,
#pgprod .buy .add:focus-visible,
#pgprod .buy #button-cart:focus-visible,
#pgprod .buy #button-cart.btn-primary:hover,
#pgprod .buy button.btn.btn-primary.stock-alert:hover{
  background: var(--terracotta-deep) !important;
  color: var(--bone) !important;
  border-color: transparent !important;
  opacity: 1 !important;
  transform: translateY(-2px);
}

#pgprod .buy .add.stock-alert,
#pgprod .buy #button-cart.stock-alert,
#pgprod .buy button.btn.btn-primary.stock-alert{
  background: var(--ink) !important;
  color: var(--bone) !important;
}

#pgprod .buy .add.stock-alert:hover,
#pgprod .buy #button-cart.stock-alert:hover,
#pgprod .buy button.btn.btn-primary.stock-alert:hover{
  background: var(--terracotta-deep) !important;
  color: var(--bone) !important;
}

#pgprod .buy #button-cart span,
#pgprod .buy .add span{
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

#pgprod .buy #button-cart img,
#pgprod .buy #button-cart .fa{
  display: none;
}

#pgprod .buy .add.add--preorder,
#pgprod .buy #button-cart.add--preorder{
  background: var(--amber) !important;
  color: var(--ink) !important;
}

#pgprod .buy .add.add--preorder:hover,
#pgprod .buy #button-cart.add--preorder:hover{
  background: var(--terracotta-deep) !important;
  color: var(--bone) !important;
}

#pgprod .buy .secondary-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  width: 100%;
}

#pgprod .buy .secondary-actions:empty{
  display: none;
}

#pgprod .buy .secondary-actions a,
#pgprod .buy .secondary-actions button,
#pgprod .buy .secondary-actions .secondary-action,
.actions.pp-actions-portaled .secondary-actions a,
.actions.pp-actions-portaled .secondary-actions button,
.actions.pp-actions-portaled .secondary-actions .secondary-action{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-height: 40px;
  padding: 0.4rem 0.55rem;
  text-align: center;
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--sans-bold);
  font-weight: normal;
  font-size: var(--fs-cap);
  letter-spacing: var(--tracked);
  text-transform: uppercase;
  line-height: 1.2;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  background: transparent;
  color: var(--ink);
  width: 100%;
  margin: 0;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
}

#pgprod .buy .secondary-actions a:hover,
#pgprod .buy .secondary-actions button:hover,
#pgprod .buy .secondary-actions .secondary-action:hover{
  background: var(--ink);
  color: var(--bone);
}

#pgprod .buy .secondary-actions a.is-designer,
.actions.pp-actions-portaled .secondary-actions a.is-designer{
  background: var(--moss-tint);
  border-color: var(--moss-tint);
  color: var(--bone);
}

#pgprod .buy .secondary-actions a.is-designer:hover,
#pgprod .buy .secondary-actions a.is-designer:focus-visible{
  background: var(--moss);
  border-color: var(--moss);
  color: var(--bone);
}

#pgprod .buy .secondary-actions a.is-designer .is-designer__label,
#pgprod .buy .secondary-actions a.is-designer span{
  color: inherit;
}

#pgprod .buy .secondary-actions a.is-designer .is-designer__label{
  flex-shrink: 0;
}

#pgprod .buy .secondary-actions > :only-child{
  grid-column: 1 / -1;
}

#pgprod #product .form-group.BaroqueCorners + #GiftWrap,
#pgprod #product #FirstFrame + #FrameColour + .gift-wrapping-box{
  width: auto !important;
  max-width: none !important;
}

#pgprod .buy .pp-action-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.8rem;
  align-items: stretch;
}

#pgprod .buy .wishlist-row{
  margin-top: 0;
  margin-left: 0;
  position: relative;
  width: auto;
  height: 100%;
  min-height: 48px;
}

/* Save pill - icon + label beside Add to basket */
#pgprod .buy .wishlist-row button.mb-wish-pill{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  min-height: 48px;
  margin: 0;
  padding: 15px 1rem !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  color: var(--ink);
  font-family: var(--sans-bold);
  font-weight: normal;
  font-size: var(--fs-cap);
  letter-spacing: var(--tracked);
  text-transform: uppercase;
  line-height: 1;
  transition: color 0.2s ease;
}

#pgprod .buy .wishlist-row button .mb-wish-pill__ico{
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}

#pgprod .buy .wishlist-row button .mb-wish-pill__ico svg{
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

#pgprod .buy .wishlist-row button .mb-wish-pill__on,
#pgprod .buy .wishlist-row .total_wishlist{
  display: none;
}

#pgprod .buy .wishlist-row button:hover:not(.in-wishlist){
  background: transparent !important;
  color: var(--terracotta-deep);
}

#pgprod .buy .wishlist-row button.in-wishlist{
  background: transparent !important;
  border: 0 !important;
  color: #c01f36;
}

#pgprod .buy .wishlist-row button.in-wishlist .mb-wish-pill__ico svg path{
  fill: currentColor;
}

#pgprod .buy .wishlist-row button.in-wishlist .mb-wish-pill__off{
  display: none;
}

#pgprod .buy .wishlist-row button.in-wishlist .mb-wish-pill__on{
  display: inline;
}

#pgprod .buy .cart_wishlist-product,
#pgprod .buy .product-buttons-container{
  display: contents;
}

#pgprod .buy .cart_wishlist-product > .col-lg-10,
#pgprod .buy .cart_wishlist-product > .col-md-11,
#pgprod .buy .cart_wishlist-product > .col-10{
  width: 100%;
  max-width: none;
  padding: 0;
  flex: none;
}

#pgprod .buy #button-cart.btn-primary,
#pgprod .buy #button-cart.btn-icon{
  background: var(--ink);
}

#pgprod .buy .trust{
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
  color: #3a372f;
}

#pgprod .buy .trust li{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.9rem;
}

#pgprod .buy .trust li::before{
  content: "";
  width: 6px;
  height: 6px;
  background: var(--terracotta);
  transform: rotate(45deg);
  flex-shrink: 0;
}

#pgprod .buy p.bg-default{
  font-size: 0.95rem;
  padding: 1rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 0;
  margin: 0 0 1rem;
}

#pgprod .map-heading{
  display: none;
}

#pgprod .pp-dossier__map{
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

#pgprod .pp-dossier__map-body{
  min-width: 0;
}

#pgprod .pp-dossier__map .map-outer2{
  border: 1px solid var(--ink);
  background: var(--paper);
  margin: 0;
  overflow: hidden;
  height: clamp(200px, 42vw, 280px);
  touch-action: none;
  box-shadow: none;
}

#pgprod .map-outer2{
  border: 1px solid var(--ink);
  background: var(--paper);
  margin: 0 var(--gutter) 1rem;
}

@media (max-width: 1100px){
  #pgprod .pdp__grid {
    grid-template-columns: 1fr;
  }

  #pgprod .pdp__grid > .gallery,
  #pgprod .pdp__grid > .buy {
    grid-column: 1;
  }

  #pgprod .gallery {
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }

  #pgprod .buy__panel {
    position: static;
  }
}

@media (min-width: 768px) and (max-width: 1100px){
  #pgprod .buy__intro {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  #pgprod .buy__intro-copy {
    max-width: min(100%, 22rem);
  }

  #pgprod .buy__intro:not(:has(.buy__range)) .buy__intro-copy {
    max-width: min(100%, 28rem);
  }

  #pgprod .buy__intro h1,
  #pgprod .buy__intro .heading-left {
    line-height: 1;
    overflow-wrap: break-word;
  }

  #pgprod .buy__range--compact {
    width: min(200px, 26vw);
    max-width: 200px;
    justify-self: end;
  }
}

@media (min-width: 1101px){
  #pgprod .buy__intro:has(.buy__range) {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  #pgprod .buy__range--compact {
    width: 200px;
    max-width: 200px;
    justify-self: end;
  }
}

@media (max-width: 767px){
  #pgprod .buy__intro .buy__range {
    display: none;
  }

  #pgprod .buy__intro {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}

@media (max-width: 767px){
  #pgprod .buy #product {
    position: static;
    width: 100%;
    background: transparent;
    padding: 0;
    left: auto;
    bottom: auto;
    z-index: auto;
  }

  #pgprod #product .opt,
  #pgprod #product #FirstFrame,
  #pgprod #product #GiftWrap,
  #pgprod #product .checkbox-outer,
  #pgprod #product .form-group,
  #pgprod #product .form-group-v2 {
    width: 100%;
    flex: 1 1 100%;
    align-self: stretch;
  }

  #pgprod #product .opt .swatches:not(.swatches--scroll) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  #pgprod #product .opt-cabinet {
    grid-template-columns: repeat(auto-fill, minmax(var(--opt-cabinet-grid-min), var(--opt-cabinet-tile)));
    gap: var(--opt-cabinet-gap);
  }

  /* Text radio rows - horizontal scroll (not 2-col grid) */
  #pgprod #product .swatches--scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: unset !important;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  #pgprod #product .swatches--scroll .radio,
  #pgprod #product .swatches--scroll .checkbox {
    display: block !important;
    width: auto !important;
    flex: 0 0 auto;
  }

  #pgprod #product .opt .swatches:not(.swatches--scroll) .swatch--text {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #pgprod #product .swatches--scroll .swatch--text {
    width: auto !important;
    min-width: 9.5rem !important;
    max-width: none !important;
  }

  #pgprod #product .opt .swatches:not(.swatches--scroll) .radio {
    width: 100%;
  }

  #pgprod .buy .secondary-actions a,
  #pgprod .buy .secondary-actions button,
  #pgprod .buy .secondary-actions .secondary-action {
    white-space: normal;
    min-height: 36px;
    padding: 0.35rem 0.35rem;
  }

  #pgprod .buy .add,
  #pgprod .buy #button-cart {
    min-height: 44px;
    font-size: var(--pp-btn-font-size, clamp(0.68rem, 2.8vw, 0.75rem)) !important;
    padding: 0.5rem 0.75rem !important;
  }

  #pgprod .buy #button-cart,
  #pgprod .buy .add {
    color: var(--bone);
    background: var(--ink);
  }
}

/* Sticky buy actions - fixed bar after scrolling past CTAs
   Layer: above page content + nav (10040-10055), below minicart (10060) + popups (10090+).
   Portaled to body when pinned so it escapes ancestor stacking contexts. */
#pgprod .pp-actions-sentinel {
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  visibility: hidden;
}

#pgprod .pp-actions-sticky-thumb {
  display: none;
}

#pgprod .pp-actions-sticky-body {
  display: contents;
}

#pgprod .buy .actions {
  transition:
    opacity 0.3s ease,
    box-shadow 0.3s ease,
    padding 0.28s ease,
    background-color 0.28s ease;
}

#pgprod .pp-actions-sticky-spacer {
  display: block;
  height: 0;
  overflow: hidden;
  transition: height 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

#pgprod.pp-actions-pinned .pp-actions-sticky-spacer {
  height: var(--pp-actions-height, 0);
}

#pgprod.pp-actions-unpin-instant .pp-actions-sticky-spacer {
  transition: none;
}

.actions.pp-actions-portaled {
  --bone: #f2efe4;
  --paper: #fbf8f0;
  --moss-deep: #122418;
  --moss-tint: #2e5340;
  --moss: #1c3a2c;
  --ink: var(--moss-deep);
  --amber: #d8a45a;
  --terracotta-deep: #a04a2a;
  --sans-bold: 'DM Sans Bold', 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --tracked: 0.18em;
  --fs-cap: 0.6rem;
  --max: 1440px;
  --pp-btn-font-size: clamp(0.68rem, 2.8vw, 0.75rem);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10058;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bone);
  border-top: 1px solid var(--ink);
  box-shadow: none;
  transform: translate3d(0, 100%, 0);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  --pp-pin-duration: 0.38s;
  --pp-pin-ease: cubic-bezier(0.22, 1, 0.36, 1);
  transition:
    opacity var(--pp-pin-duration) var(--pp-pin-ease),
    transform var(--pp-pin-duration) var(--pp-pin-ease),
    box-shadow var(--pp-pin-duration) var(--pp-pin-ease);
  --pp-sticky-thumb-w: 4.75rem;
}

.actions.pp-actions-portaled .pp-actions-sticky-thumb {
  display: block;
  flex: 0 0 var(--pp-sticky-thumb-w);
  width: var(--pp-sticky-thumb-w);
  align-self: stretch;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  box-sizing: border-box;
}

.actions.pp-actions-portaled .pp-actions-sticky-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.actions.pp-actions-portaled .pp-actions-sticky-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 0.75rem clamp(1rem, 4vw, 1.25rem);
}

/* Sticky portaled - mirror #pgprod .buy .actions / .pp-action-row / .wishlist-row */
.actions.pp-actions-portaled .pp-action-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.8rem;
  align-items: stretch;
  min-width: 0;
}

.actions.pp-actions-portaled .pp-action-row > .wish {
  display: flex;
  align-items: stretch;
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  height: 100%;
}

.actions.pp-actions-portaled .wishlist-row {
  position: relative;
  top: auto;
  left: auto;
  margin: 0 !important;
  width: 48px;
  height: 100%;
  min-height: 48px;
  text-align: center;
}

.actions.pp-actions-portaled .wishlist-row button,
.actions.pp-actions-portaled .wishlist-row button.btn,
.actions.pp-actions-portaled .wishlist-row button.btn-sm,
.actions.pp-actions-portaled .wishlist-row button.btn-outline-light {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 100%;
  min-height: 48px;
  margin: 0 !important;
  padding: 5px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  line-height: 1;
}

/* sticky bar is a compact square - icon only, label suppressed */
.actions.pp-actions-portaled .wishlist-row .mb-wish-pill__txt,
.actions.pp-actions-portaled .wishlist-row span.total_wishlist {
  display: none !important;
}

.actions.pp-actions-portaled .wishlist-row .mb-wish-pill__ico {
  width: 1.125rem !important;
  height: 1.125rem !important;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
}

.actions.pp-actions-portaled .wishlist-row .mb-wish-pill__ico svg {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  overflow: visible;
  display: block;
}

.actions.pp-actions-portaled .wishlist-row button.in-wishlist {
  background: transparent !important;
  border: 0 !important;
  color: #c01f36 !important;
}

.actions.pp-actions-portaled .wishlist-row button.in-wishlist .mb-wish-pill__ico svg path {
  fill: currentColor;
}

/* Portaled bar - secondary row grid (mobile default) */
.actions.pp-actions-portaled .secondary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  width: 100%;
}

.actions.pp-actions-portaled .secondary-actions:empty,
.actions.pp-actions-portaled .secondary-actions:not(:has(a, button, .secondary-action)) {
  display: none;
}

.actions.pp-actions-portaled .secondary-actions > :only-child {
  grid-column: 1 / -1;
}

/* Portaled bar - hover / active (outside #pgprod .buy once portaled to body) */
.actions.pp-actions-portaled .add:hover,
.actions.pp-actions-portaled #button-cart:hover,
.actions.pp-actions-portaled .add:focus-visible,
.actions.pp-actions-portaled #button-cart:focus-visible,
.actions.pp-actions-portaled button.add:hover,
.actions.pp-actions-portaled button#button-cart:hover,
.actions.pp-actions-portaled button.btn.btn-primary.stock-alert:hover {
  background: var(--terracotta-deep) !important;
  color: var(--bone) !important;
  border-color: transparent !important;
  opacity: 1 !important;
  transform: translateY(-2px);
}

.actions.pp-actions-portaled .add:active,
.actions.pp-actions-portaled #button-cart:active,
.actions.pp-actions-portaled button.add:active,
.actions.pp-actions-portaled button#button-cart:active {
  transform: translateY(1px);
}

.actions.pp-actions-portaled .secondary-actions a:hover,
.actions.pp-actions-portaled .secondary-actions button:hover,
.actions.pp-actions-portaled .secondary-actions .secondary-action:hover {
  background: var(--ink);
  color: var(--bone);
}

.actions.pp-actions-portaled .secondary-actions a.is-designer:hover,
.actions.pp-actions-portaled .secondary-actions a.is-designer:focus-visible {
  background: var(--moss);
  border-color: var(--moss);
  color: var(--bone);
}

.actions.pp-actions-portaled .wishlist-row button:hover:not(.in-wishlist) {
  background: transparent !important;
  color: var(--terracotta-deep) !important;
}

.actions.pp-actions-portaled #button-cart span,
.actions.pp-actions-portaled .add span,
.actions.pp-actions-portaled .secondary-actions span {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

@media (max-width: 767px) {
  /*
   * Mobile sticky - stacked like #pgprod .buy .actions:
   * row 1: Add to Basket + wishlist (0.8rem gap)
   * row 2: secondary buttons (0.55rem gap, full borders)
   */
  .actions.pp-actions-portaled .pp-actions-sticky-thumb {
    display: none;
  }

  .actions.pp-actions-portaled .pp-actions-sticky-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    grid-template-rows: auto auto;
    gap: 0.8rem;
    padding: 0.75rem clamp(0.65rem, 4vw, 1rem);
  }

  .actions.pp-actions-portaled .pp-action-row {
    display: contents;
  }

  .actions.pp-actions-portaled .pp-action-row > .add,
  .actions.pp-actions-portaled .pp-action-row > #button-cart,
  .actions.pp-actions-portaled .pp-action-row > button.add {
    grid-column: 1;
    grid-row: 1;
    min-height: 48px;
    width: 100%;
  }

  .actions.pp-actions-portaled .pp-action-row > .wish {
    grid-column: 2;
    grid-row: 1;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    min-height: 48px;
    height: auto;
    align-self: stretch;
  }

  .actions.pp-actions-portaled .secondary-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    width: 100%;
  }

  .actions.pp-actions-portaled .pp-actions-sticky-body .secondary-actions a,
  .actions.pp-actions-portaled .pp-actions-sticky-body .secondary-actions button,
  .actions.pp-actions-portaled .pp-actions-sticky-body .secondary-actions .secondary-action {
    min-height: 40px;
    height: auto;
    white-space: normal;
    font-size: 0.62rem;
    padding: 0.35rem 0.35rem;
    color: var(--ink) !important;
    background: transparent;
    border: 1px solid var(--ink);
  }

  .actions.pp-actions-portaled .pp-actions-sticky-body .secondary-actions a.is-designer,
  .actions.pp-actions-portaled .pp-actions-sticky-body .secondary-actions #button-builder {
    border-color: var(--moss-tint);
    background: var(--moss-tint);
    color: var(--bone) !important;
  }

  .actions.pp-actions-portaled .pp-actions-sticky-body .secondary-actions a.is-designer span,
  .actions.pp-actions-portaled .pp-actions-sticky-body .secondary-actions #button-builder span {
    color: inherit !important;
  }

  .actions.pp-actions-portaled .pp-actions-sticky-body .secondary-actions #button-custom-text,
  .actions.pp-actions-portaled .pp-actions-sticky-body .secondary-actions #button-custom-text span {
    color: var(--ink) !important;
  }

  .actions.pp-actions-portaled .pp-actions-sticky-body .secondary-actions #button-custom-text:hover,
  .actions.pp-actions-portaled .pp-actions-sticky-body .secondary-actions #button-custom-text:hover span {
    color: var(--bone) !important;
  }
}

.actions.pp-actions-portaled.pp-actions-portaled--visible {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 -8px 24px rgba(30, 30, 30, 0.08);
}

@media (min-width: 768px) {
  .actions.pp-actions-portaled.pp-actions-portaled--visible {
    box-shadow: none;
  }
}

body:has(#pgprod.pp-actions-pinned) .bottom-footer,
body:has(#pgprod.pp-actions-pinned) .pp-page-tail {
  transition: padding-bottom 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

body:has(#pgprod.pp-actions-unpin-instant) .bottom-footer,
body:has(#pgprod.pp-actions-unpin-instant) .pp-page-tail {
  transition: none;
}

@media (min-width: 768px) {
  .actions.pp-actions-portaled {
    --gutter: 0.7rem;
    --pp-sticky-thumb-w: 3.75rem;
    --pp-sticky-control-h: 48px;
    --pp-sticky-edge: max(var(--gutter), calc((100vw - var(--max, 1440px)) / 2 + var(--gutter)));
    --pp-btn-font-size: 0.68rem;
    align-items: center;
    padding-block: 0.75rem;
    padding-inline: var(--pp-sticky-edge);
    border-top: 1px solid var(--ink);
  }

  .actions.pp-actions-portaled .pp-actions-sticky-thumb {
    flex: 0 0 var(--pp-sticky-thumb-w);
    width: var(--pp-sticky-thumb-w);
    height: var(--pp-sticky-control-h);
    min-height: var(--pp-sticky-control-h);
    max-height: var(--pp-sticky-control-h);
    align-self: center;
    border: 1px solid var(--ink);
  }

  .actions.pp-actions-portaled .pp-actions-sticky-body {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.8rem;
    padding: 0;
    padding-left: 0.8rem;
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--pp-sticky-control-h);
  }

  .actions.pp-actions-portaled .pp-actions-sticky-body > .pp-action-row {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--pp-sticky-control-h);
  }

  .actions.pp-actions-portaled .pp-actions-sticky-body:not(:has(.secondary-actions a, .secondary-actions button, .secondary-actions .secondary-action)) > .pp-action-row {
    flex: 1 1 100%;
  }

  .actions.pp-actions-portaled .pp-action-row > .wish {
    min-height: var(--pp-sticky-control-h);
    height: var(--pp-sticky-control-h);
  }

  .actions.pp-actions-portaled .wishlist-row,
  .actions.pp-actions-portaled .wishlist-row button {
    min-height: var(--pp-sticky-control-h);
    height: var(--pp-sticky-control-h);
  }

  .actions.pp-actions-portaled .pp-actions-sticky-body > .pp-action-row .add,
  .actions.pp-actions-portaled .pp-actions-sticky-body > .pp-action-row #button-cart,
  .actions.pp-actions-portaled .pp-actions-sticky-body > .pp-action-row button.add {
    min-height: var(--pp-sticky-control-h);
    height: var(--pp-sticky-control-h);
    padding: 0 1rem !important;
  }

  .actions.pp-actions-portaled .pp-actions-sticky-body .secondary-actions {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--pp-sticky-control-h);
    gap: 0.55rem;
    align-items: stretch;
  }

  .actions.pp-actions-portaled .pp-actions-sticky-body .secondary-actions a,
  .actions.pp-actions-portaled .pp-actions-sticky-body .secondary-actions button,
  .actions.pp-actions-portaled .pp-actions-sticky-body .secondary-actions .secondary-action {
    min-height: var(--pp-sticky-control-h);
    height: 100%;
    padding: 0 0.55rem;
    font-size: var(--fs-cap);
    border: 1px solid var(--ink);
    color: var(--ink);
    background: transparent;
  }

  .actions.pp-actions-portaled .pp-actions-sticky-body .secondary-actions a.is-designer,
  .actions.pp-actions-portaled .pp-actions-sticky-body .secondary-actions #button-builder {
    background: var(--moss-tint);
    border-color: var(--moss-tint);
    color: var(--bone);
  }

  .actions.pp-actions-portaled .pp-actions-sticky-body .secondary-actions #button-custom-text,
  .actions.pp-actions-portaled .pp-actions-sticky-body .secondary-actions #button-custom-text span {
    color: var(--ink) !important;
  }

}

@media (prefers-reduced-motion: reduce) {
  #pgprod .buy .actions,
  #pgprod .pp-actions-sticky-spacer,
  body:has(#pgprod.pp-actions-pinned) .bottom-footer,
  body:has(#pgprod.pp-actions-pinned) .pp-page-tail {
    transition: none;
  }

  .actions.pp-actions-portaled,
  .actions.pp-actions-portaled.pp-actions-portaled--visible {
    transform: none;
    opacity: 1;
    pointer-events: auto;
    will-change: auto;
  }
}

body.oip-open .actions.pp-actions-portaled {
  position: static;
  display: grid;
  flex-direction: unset;
  align-items: stretch;
  padding: 0;
  border: 0;
  box-shadow: none;
  z-index: auto;
}

body.oip-open .actions.pp-actions-portaled .pp-actions-sticky-thumb {
  display: none;
}

body.oip-open .actions.pp-actions-portaled .pp-actions-sticky-body {
  display: contents;
}

body.oip-open #pgprod.pp-actions-pinned .pp-actions-sticky-spacer {
  display: none;
  height: 0;
}

body.oip-open:has(#pgprod.pp-actions-pinned) .bottom-footer,
body.oip-open:has(#pgprod.pp-actions-pinned) .pp-page-tail {
  padding-bottom: 0;
}

@media (max-width: 560px){
  #pgprod .buy__intro h1,
  #pgprod .buy__intro .heading-left {
    font-size: 2.5rem;
  }

  #pgprod .buy__range--compact {
    max-width: none;
  }

  #pgprod .buy__range-map .jqvmap-zoomin,
  #pgprod .buy__range-map .jqvmap-zoomout {
    display: none;
  }

  #pgprod .gallery__note {
    display: none !important;
  }

  #pgprod .buy .product-buttons-container {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 992px){
  #pgprod .gallery .hidden-md.hidden-lg {
    display: none !important;
  }
}

/* Cabinet grid - legacy overrides (must load after stylesheet.css) */
#pgprod .opt--cabinet,
#pgprod #FirstFrame.opt--cabinet,
#pgprod #BaroqueCorners.opt--cabinet{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

#pgprod #FrameColour.opt--cabinet,
#pgprod #GiftWrap.opt--gift-wrap{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

#pgprod .buy__options > .opt-row--frame-gift > #FrameColour.opt--cabinet,
#pgprod .buy__options > .opt-row--frame-gift > #BaroqueCorners.opt--cabinet{
  flex: 0 0 auto;
  width: var(--opt-cabinet-frame-pair) !important;
  max-width: var(--opt-cabinet-frame-pair) !important;
  min-width: 0 !important;
}

#pgprod .buy__options > .opt-row--frame-gift > #GiftWrap.opt--gift-wrap{
  flex: 0 0 auto;
  width: var(--opt-cabinet-tile) !important;
  max-width: var(--opt-cabinet-tile) !important;
  min-width: 0 !important;
}

#pgprod .buy__options > .opt-row--frame-gift{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start;
  gap: 1.25rem;
  width: fit-content;
  max-width: 100%;
}

#pgprod .buy__options > .opt-row--frame-gift #FrameColour .opt-cabinet,
#pgprod .buy__options > .opt-row--frame-gift #BaroqueCorners .opt-cabinet{
  display: grid !important;
  grid-template-columns: repeat(2, var(--opt-cabinet-tile)) !important;
  gap: var(--opt-cabinet-gap) !important;
  width: var(--opt-cabinet-frame-pair) !important;
  max-width: var(--opt-cabinet-frame-pair) !important;
}

#pgprod .buy__options > .opt-row--frame-gift #GiftWrap .opt-cabinet{
  display: grid !important;
  grid-template-columns: var(--opt-cabinet-tile) !important;
  gap: var(--opt-cabinet-gap) !important;
  width: var(--opt-cabinet-tile) !important;
  max-width: var(--opt-cabinet-tile) !important;
}

#pgprod label.opt-cabinet__tile,
#pgprod #GiftWrap .opt-cabinet__tile{
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: normal !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}

#pgprod .buy__options > .opt-row--frame-gift label.opt-cabinet__tile,
#pgprod .buy__options > .opt-row--frame-gift #GiftWrap .opt-cabinet__tile{
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: var(--opt-cabinet-tile) !important;
}

#pgprod .opt-cabinet{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--opt-cabinet-grid-min), var(--opt-cabinet-tile)));
  gap: var(--opt-cabinet-gap);
  justify-content: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#pgprod .opt-cabinet__tile{
  position: relative;
  display: block;
  margin: 0;
  border: 1px solid var(--hairline);
  background: var(--bone);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

#pgprod .opt-cabinet__tile:hover{
  background: var(--paper);
  border-color: var(--ink);
}

#pgprod .opt-cabinet__photo{
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

#pgprod .opt-cabinet__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

#pgprod .opt-cabinet__tile:hover .opt-cabinet__img{
  transform: scale(1.04);
}

#pgprod .opt-cabinet__foot{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.06rem;
  padding: 0.2rem 0.22rem;
  min-height: var(--opt-cabinet-foot-min);
  max-height: none;
  overflow: visible;
}

#pgprod .opt-cabinet__tick{
  position: absolute;
  bottom: 0.25rem;
  left: 0.25rem;
  z-index: 2;
  flex-shrink: 0;
  width: var(--opt-cabinet-tick);
  height: var(--opt-cabinet-tick);
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: rgba(244, 241, 234, 0.94);
  box-shadow: 0 1px 3px rgba(30, 30, 30, 0.18);
  transition: background 0.2s ease, border-color 0.2s ease;
}

#pgprod .opt-cabinet__tile:has(:checked){
  border-color: var(--terracotta);
  background: var(--paper);
  box-shadow: none;
}

#pgprod .opt-cabinet__tile:has(:checked) .opt-cabinet__photo{
  border-bottom-color: rgba(194, 97, 58, 0.22);
}

#pgprod .opt-cabinet__tile:has(:checked) .opt-cabinet__tick{
  background: var(--terracotta);
  border-color: var(--terracotta);
}

#pgprod .opt-cabinet__tile:has(:checked) .opt-cabinet__tick::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 7px;
  border: solid var(--bone);
  border-width: 0 1.5px 1.5px 0;
  transform: translate(-50%, -58%) rotate(45deg);
}

#pgprod .opt-cabinet__name{
  flex: 0 0 auto;
  width: 100%;
  font-family: var(--sans-bold);
  font-weight: normal;
  font-size: var(--opt-cabinet-label-fs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--ink);
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  text-align: center;
}

#pgprod .opt-cabinet__tile:has(:checked) .opt-cabinet__name{
  color: var(--terracotta);
}

#pgprod .opt-cabinet__price{
  flex: 0 0 auto;
  width: 100%;
  font-family: var(--sans-bold);
  font-weight: normal;
  font-size: var(--opt-cabinet-price-fs);
  letter-spacing: var(--tracked);
  color: var(--muted);
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  text-align: center;
  line-height: 1.15;
}

#pgprod .opt-cabinet__tile:has(:focus-visible){
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

#pgprod .opt-cabinet__tile > input[type="radio"],
#pgprod .opt-cabinet__tile > input[type="checkbox"]{
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

#pgprod .opt-cabinet__tile.disabled,
#pgprod .opt-cabinet__tile:has(:disabled){
  opacity: 0.45;
  cursor: not-allowed;
}

/* Frame colour, first frame, gift box - subcategory disk tiles (keep tick + chosen outline) */
#pgprod #FirstFrame .opt-cabinet__tile,
#pgprod #FrameColour .opt-cabinet__tile,
#pgprod #GiftWrap .opt-cabinet__tile,
#pgprod #product #FirstFrame .opt-cabinet__tile,
#pgprod #product #FrameColour .opt-cabinet__tile,
#pgprod #product #GiftWrap .opt-cabinet__tile{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;
  container-type: inline-size;
  gap: 0.4rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

#pgprod .buy__options > .opt-row--frame-gift #FrameColour .opt-cabinet__tile,
#pgprod .buy__options > .opt-row--frame-gift #GiftWrap .opt-cabinet__tile,
#pgprod #product .buy__options > .opt-row--frame-gift #FrameColour .opt-cabinet__tile,
#pgprod #product .buy__options > .opt-row--frame-gift #GiftWrap .opt-cabinet__tile{
  display: flex !important;
  flex-direction: column !important;
}

#pgprod #FirstFrame .opt-cabinet__tile:hover,
#pgprod #FrameColour .opt-cabinet__tile:hover,
#pgprod #GiftWrap .opt-cabinet__tile:hover,
#pgprod #product #FirstFrame .opt-cabinet__tile:hover,
#pgprod #product #FrameColour .opt-cabinet__tile:hover,
#pgprod #product #GiftWrap .opt-cabinet__tile:hover{
  background: transparent;
  border-color: transparent;
}

#pgprod #FirstFrame .opt-cabinet__photo,
#pgprod #FrameColour .opt-cabinet__photo,
#pgprod #GiftWrap .opt-cabinet__photo,
#pgprod #product #FirstFrame .opt-cabinet__photo,
#pgprod #product #FrameColour .opt-cabinet__photo,
#pgprod #product #GiftWrap .opt-cabinet__photo{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  background: var(--bone);
  transition: border-color 0.15s ease;
}

#pgprod #FirstFrame .opt-cabinet__photo::after,
#pgprod #FrameColour .opt-cabinet__photo::after,
#pgprod #GiftWrap .opt-cabinet__photo::after,
#pgprod #product #FirstFrame .opt-cabinet__photo::after,
#pgprod #product #FrameColour .opt-cabinet__photo::after,
#pgprod #product #GiftWrap .opt-cabinet__photo::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--bone);
  pointer-events: none;
  z-index: 1;
}

#pgprod #FirstFrame .opt-cabinet__img,
#pgprod #FrameColour .opt-cabinet__img,
#pgprod #GiftWrap .opt-cabinet__img,
#pgprod #product #FirstFrame .opt-cabinet__img,
#pgprod #product #FrameColour .opt-cabinet__img,
#pgprod #product #GiftWrap .opt-cabinet__img{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  object-fit: cover;
  filter: grayscale(0.12) contrast(1.04);
  transition: filter 0.35s ease, transform 0.35s ease;
  padding: 10px;
}

#pgprod #FirstFrame .opt-cabinet__tick,
#pgprod #FrameColour .opt-cabinet__tick,
#pgprod #GiftWrap .opt-cabinet__tick,
#pgprod #product #FirstFrame .opt-cabinet__tick,
#pgprod #product #FrameColour .opt-cabinet__tick,
#pgprod #product #GiftWrap .opt-cabinet__tick{
  position: absolute;
  left: 0.18rem;
  top: calc(100cqw - var(--opt-cabinet-tick) - 0.18rem);
  margin: 0;
  z-index: 3;
  background: var(--bone);
}

#pgprod #FirstFrame .opt-cabinet__foot,
#pgprod #FrameColour .opt-cabinet__foot,
#pgprod #GiftWrap .opt-cabinet__foot,
#pgprod #product #FirstFrame .opt-cabinet__foot,
#pgprod #product #FrameColour .opt-cabinet__foot,
#pgprod #product #GiftWrap .opt-cabinet__foot{
  width: 100%;
  min-height: 0;
  padding: 0 0.15rem;
}

#pgprod #FirstFrame .opt-cabinet__tile:hover .opt-cabinet__img,
#pgprod #FrameColour .opt-cabinet__tile:hover .opt-cabinet__img,
#pgprod #GiftWrap .opt-cabinet__tile:hover .opt-cabinet__img,
#pgprod #product #FirstFrame .opt-cabinet__tile:hover .opt-cabinet__img,
#pgprod #product #FrameColour .opt-cabinet__tile:hover .opt-cabinet__img,
#pgprod #product #GiftWrap .opt-cabinet__tile:hover .opt-cabinet__img{
  filter: grayscale(0) contrast(1.06);
  transform: scale(1.04);
}

#pgprod #FirstFrame .opt-cabinet__name,
#pgprod #FrameColour .opt-cabinet__name,
#pgprod #GiftWrap .opt-cabinet__name,
#pgprod #product #FirstFrame .opt-cabinet__name,
#pgprod #product #FrameColour .opt-cabinet__name,
#pgprod #product #GiftWrap .opt-cabinet__name{
  font-family: var(--serif);
  font-weight: normal;
  font-size: 0.72rem;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.2;
}

#pgprod #FirstFrame .opt-cabinet__tile:has(:checked),
#pgprod #FrameColour .opt-cabinet__tile:has(:checked),
#pgprod #GiftWrap .opt-cabinet__tile:has(:checked),
#pgprod #FirstFrame .opt-cabinet__tile.is-selected,
#pgprod #FrameColour .opt-cabinet__tile.is-selected,
#pgprod #GiftWrap .opt-cabinet__tile.is-selected,
#pgprod #product #FirstFrame .opt-cabinet__tile:has(:checked),
#pgprod #product #FrameColour .opt-cabinet__tile:has(:checked),
#pgprod #product #GiftWrap .opt-cabinet__tile:has(:checked),
#pgprod #product #FirstFrame .opt-cabinet__tile.is-selected,
#pgprod #product #FrameColour .opt-cabinet__tile.is-selected,
#pgprod #product #GiftWrap .opt-cabinet__tile.is-selected{
  border: 0;
  background: transparent;
  box-shadow: none;
}

#pgprod #FirstFrame .opt-cabinet__tile:has(:checked) .opt-cabinet__photo,
#pgprod #FrameColour .opt-cabinet__tile:has(:checked) .opt-cabinet__photo,
#pgprod #GiftWrap .opt-cabinet__tile:has(:checked) .opt-cabinet__photo,
#pgprod #FirstFrame .opt-cabinet__tile.is-selected .opt-cabinet__photo,
#pgprod #FrameColour .opt-cabinet__tile.is-selected .opt-cabinet__photo,
#pgprod #GiftWrap .opt-cabinet__tile.is-selected .opt-cabinet__photo,
#pgprod #product #FirstFrame .opt-cabinet__tile:has(:checked) .opt-cabinet__photo,
#pgprod #product #FrameColour .opt-cabinet__tile:has(:checked) .opt-cabinet__photo,
#pgprod #product #GiftWrap .opt-cabinet__tile:has(:checked) .opt-cabinet__photo,
#pgprod #product #FirstFrame .opt-cabinet__tile.is-selected .opt-cabinet__photo,
#pgprod #product #FrameColour .opt-cabinet__tile.is-selected .opt-cabinet__photo,
#pgprod #product #GiftWrap .opt-cabinet__tile.is-selected .opt-cabinet__photo{
  border-color: var(--terracotta);
  border-width: 2px;
}

#pgprod #FirstFrame .opt-cabinet__tile:has(:checked) .opt-cabinet__tick,
#pgprod #FrameColour .opt-cabinet__tile:has(:checked) .opt-cabinet__tick,
#pgprod #GiftWrap .opt-cabinet__tile:has(:checked) .opt-cabinet__tick,
#pgprod #FirstFrame .opt-cabinet__tile.is-selected .opt-cabinet__tick,
#pgprod #FrameColour .opt-cabinet__tile.is-selected .opt-cabinet__tick,
#pgprod #GiftWrap .opt-cabinet__tile.is-selected .opt-cabinet__tick,
#pgprod #product #FirstFrame .opt-cabinet__tile:has(:checked) .opt-cabinet__tick,
#pgprod #product #FrameColour .opt-cabinet__tile:has(:checked) .opt-cabinet__tick,
#pgprod #product #GiftWrap .opt-cabinet__tile:has(:checked) .opt-cabinet__tick,
#pgprod #product #FirstFrame .opt-cabinet__tile.is-selected .opt-cabinet__tick,
#pgprod #product #FrameColour .opt-cabinet__tile.is-selected .opt-cabinet__tick,
#pgprod #product #GiftWrap .opt-cabinet__tile.is-selected .opt-cabinet__tick{
  background: var(--terracotta);
  border-color: var(--terracotta);
}

#pgprod #FirstFrame .opt-cabinet__tile:has(:checked) .opt-cabinet__tick::after,
#pgprod #FrameColour .opt-cabinet__tile:has(:checked) .opt-cabinet__tick::after,
#pgprod #GiftWrap .opt-cabinet__tile:has(:checked) .opt-cabinet__tick::after,
#pgprod #FirstFrame .opt-cabinet__tile.is-selected .opt-cabinet__tick::after,
#pgprod #FrameColour .opt-cabinet__tile.is-selected .opt-cabinet__tick::after,
#pgprod #GiftWrap .opt-cabinet__tile.is-selected .opt-cabinet__tick::after,
#pgprod #product #FirstFrame .opt-cabinet__tile:has(:checked) .opt-cabinet__tick::after,
#pgprod #product #FrameColour .opt-cabinet__tile:has(:checked) .opt-cabinet__tick::after,
#pgprod #product #GiftWrap .opt-cabinet__tile:has(:checked) .opt-cabinet__tick::after,
#pgprod #product #FirstFrame .opt-cabinet__tile.is-selected .opt-cabinet__tick::after,
#pgprod #product #FrameColour .opt-cabinet__tile.is-selected .opt-cabinet__tick::after,
#pgprod #product #GiftWrap .opt-cabinet__tile.is-selected .opt-cabinet__tick::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 7px;
  border: solid var(--bone);
  border-width: 0 1.5px 1.5px 0;
  transform: translate(-50%, -58%) rotate(45deg);
}

#pgprod #FirstFrame .opt-cabinet__tile:has(:checked) .opt-cabinet__name,
#pgprod #FrameColour .opt-cabinet__tile:has(:checked) .opt-cabinet__name,
#pgprod #GiftWrap .opt-cabinet__tile:has(:checked) .opt-cabinet__name,
#pgprod #FirstFrame .opt-cabinet__tile.is-selected .opt-cabinet__name,
#pgprod #FrameColour .opt-cabinet__tile.is-selected .opt-cabinet__name,
#pgprod #GiftWrap .opt-cabinet__tile.is-selected .opt-cabinet__name,
#pgprod #product #FirstFrame .opt-cabinet__tile:has(:checked) .opt-cabinet__name,
#pgprod #product #FrameColour .opt-cabinet__tile:has(:checked) .opt-cabinet__name,
#pgprod #product #GiftWrap .opt-cabinet__tile:has(:checked) .opt-cabinet__name,
#pgprod #product #FirstFrame .opt-cabinet__tile.is-selected .opt-cabinet__name,
#pgprod #product #FrameColour .opt-cabinet__tile.is-selected .opt-cabinet__name,
#pgprod #product #GiftWrap .opt-cabinet__tile.is-selected .opt-cabinet__name{
  color: var(--terracotta);
}

#pgprod #FirstFrame .opt-cabinet__tile:has(:focus-visible),
#pgprod #FrameColour .opt-cabinet__tile:has(:focus-visible),
#pgprod #GiftWrap .opt-cabinet__tile:has(:focus-visible),
#pgprod #product #FirstFrame .opt-cabinet__tile:has(:focus-visible),
#pgprod #product #FrameColour .opt-cabinet__tile:has(:focus-visible),
#pgprod #product #GiftWrap .opt-cabinet__tile:has(:focus-visible){
  outline: none;
}

#pgprod #FirstFrame .opt-cabinet__tile:has(:focus-visible) .opt-cabinet__photo,
#pgprod #FrameColour .opt-cabinet__tile:has(:focus-visible) .opt-cabinet__photo,
#pgprod #GiftWrap .opt-cabinet__tile:has(:focus-visible) .opt-cabinet__photo,
#pgprod #product #FirstFrame .opt-cabinet__tile:has(:focus-visible) .opt-cabinet__photo,
#pgprod #product #FrameColour .opt-cabinet__tile:has(:focus-visible) .opt-cabinet__photo,
#pgprod #product #GiftWrap .opt-cabinet__tile:has(:focus-visible) .opt-cabinet__photo{
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

/* First Frame - fixed tile size (match frame colour); swipe scroll on mobile only */
#pgprod #FirstFrame .opt-cabinet--scroll,
#pgprod #product #FirstFrame .opt-cabinet--scroll {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--opt-cabinet-tile));
  gap: var(--opt-cabinet-gap);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  justify-content: start;
}

#pgprod #FirstFrame .opt-cabinet--scroll .opt-cabinet__tile,
#pgprod #product #FirstFrame .opt-cabinet--scroll .opt-cabinet__tile {
  width: var(--opt-cabinet-tile);
  max-width: var(--opt-cabinet-tile);
  min-width: var(--opt-cabinet-tile);
}

#pgprod #FirstFrame .opt-cabinet--scroll .opt-cabinet__foot,
#pgprod #product #FirstFrame .opt-cabinet--scroll .opt-cabinet__foot {
  min-height: var(--opt-cabinet-foot-min);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.06rem;
  padding: 0.2rem 0.22rem;
}

@media (max-width: 767px){
  #pgprod .opt-cabinet,
  #pgprod #product .opt-cabinet {
    grid-template-columns: repeat(auto-fill, minmax(var(--opt-cabinet-grid-min), var(--opt-cabinet-tile)));
    gap: var(--opt-cabinet-gap);
  }

  /* First Frame - horizontal swipe scroll on mobile */
  #pgprod #FirstFrame .opt-cabinet--scroll,
  #pgprod #product #FirstFrame .opt-cabinet--scroll {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: unset;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
    mask-image: linear-gradient(to right, #000 88%, transparent);
  }

  #pgprod #FirstFrame .opt-cabinet--scroll .opt-cabinet__tile,
  #pgprod #product #FirstFrame .opt-cabinet--scroll .opt-cabinet__tile {
    flex: 0 0 var(--opt-cabinet-tile);
  }

  #pgprod #FirstFrame .opt-cabinet--scroll::-webkit-scrollbar,
  #pgprod #product #FirstFrame .opt-cabinet--scroll::-webkit-scrollbar {
    display: none;
  }

  #pgprod #FirstFrame .opt-cabinet--scroll.is-scrolled-end,
  #pgprod #product #FirstFrame .opt-cabinet--scroll.is-scrolled-end {
    -webkit-mask-image: none;
    mask-image: none;
  }

  #pgprod #FirstFrame .opt-cabinet__photo::after,
  #pgprod #FrameColour .opt-cabinet__photo::after,
  #pgprod #GiftWrap .opt-cabinet__photo::after,
  #pgprod #product #FirstFrame .opt-cabinet__photo::after,
  #pgprod #product #FrameColour .opt-cabinet__photo::after,
  #pgprod #product #GiftWrap .opt-cabinet__photo::after{
    box-shadow: inset 0 0 0 4px var(--bone);
  }
}

/* Validation - legacy stylesheet hides #product .text-danger */
#pgprod #product .text-danger{
  display: block !important;
  margin-top: 0.45rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  line-height: 1.35;
  color: #bb1a32 !important;
}

#pgprod #product .opt.has-error .opt__head .cap,
#pgprod #product .form-group.has-error > .control-label:first-child{
  color: #bb1a32 !important;
}

#pgprod #product .opt.has-error select.form-control,
#pgprod #product .form-group.has-error .form-control{
  border-color: #bb1a32 !important;
}