/* Dazzle Mark RC4 — responsive visual fidelity + fluid zoom correction v4, 30 Oct 2026.
   Presentation only: no change to product data, inventory, offers, cart, navigation,
   contact or login behaviour. Replaces old carousel/colour overrides, not stacks them. */
:root{--dm-polish-chocolate:#38271e;--dm-polish-gold:#a77945;--dm-polish-paper:#fffaf4;--dm-polish-muted:#807161}
.new-section,.new-section .container,.new-section .section-heading,
.shop-section,.shop-section .container,.shop-section .shop-heading,
.shop-section .product-grid,.shop-section .product-card,
.shop-section .product-info{min-inline-size:0;max-inline-size:100%}
/* Truly fluid six-column grid. No sideways rail; CSS viewport shrinks at zoom. */
.new-section .collection-rail{
 display:grid!important;grid-auto-flow:row!important;
 grid-template-columns:repeat(6,minmax(0,1fr))!important;
 grid-auto-columns:auto!important;
 gap:clamp(8px,.95vw,16px)!important;
 inline-size:100%;max-inline-size:100%;min-inline-size:0;
 overflow:visible!important;scroll-snap-type:none!important;
 scrollbar-width:none;padding:0!important;margin:0!important;
 align-items:stretch;
}
.new-section .collection-rail::-webkit-scrollbar{display:none!important}
.new-section .collection-rail>.collection-tile{
 box-sizing:border-box;display:flex!important;flex-direction:column;
 min-inline-size:0;max-inline-size:100%;inline-size:100%;
 margin:0!important;padding:0!important;text-align:start;
 background:#fffaf4;border:1px solid #e6d8c7;border-radius:3px;
 overflow:hidden;scroll-snap-align:none!important;
 box-shadow:0 4px 12px rgba(47,30,19,.05);
}
.new-section .collection-tile>.tile-image{
 box-sizing:border-box;display:block!important;position:relative;
 inline-size:100%;aspect-ratio:4/5;block-size:auto!important;
 overflow:hidden;background:#f6f0e9;border-bottom:1px solid #eadcc9;
 padding:0!important;margin:0!important;line-height:0!important;flex:0 0 auto;
}
/* Remove the obsolete bottom-gradient strip beneath promotional posters. */
.new-section .collection-tile>.tile-image::after{content:none!important;display:none!important}
.new-section .collection-tile>.tile-image img{
 display:block!important;inline-size:100%;block-size:100%;width:100%;height:100%;
 max-inline-size:100%;object-fit:contain!important;object-position:center;
 transform:none!important;border:0!important;margin:0!important;padding:0!important;
}
.new-section .collection-tile:hover .tile-image img{transform:none!important}
.new-section .collection-tile>.tile-image i{
 box-sizing:border-box;inline-size:clamp(26px,2.6vw,35px);block-size:clamp(26px,2.6vw,35px);
 right:7px;bottom:7px;z-index:3;display:grid;place-items:center;
 border:1px solid #eadbc4;border-radius:50%;background:rgba(255,253,248,.96);
 color:#4a3022;font-size:14px;font-style:normal;line-height:1;
}
/* Compact editorial captions: no forced two-line or 34px spacer.
   The image and caption have a single adjoining border, as in the approved design. */
.new-section .collection-tile>strong{
  box-sizing:border-box;display:-webkit-box!important;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;min-block-size:0!important;max-block-size:none;
  min-inline-size:0;max-inline-size:100%;overflow:hidden;overflow-wrap:anywhere;
  margin:0!important;padding:8px 9px 0!important;
  font:600 clamp(13px,1.08vw,18px)/1.22 Georgia,serif!important;
  color:var(--dm-polish-chocolate)!important;
}
.new-section .collection-tile>small{
  box-sizing:border-box;display:block;min-block-size:0!important;
  min-inline-size:0;max-inline-size:100%;overflow-wrap:anywhere;
  margin:0!important;padding:3px 9px 9px!important;
  color:var(--dm-polish-muted)!important;
  font:600 clamp(9px,.65vw,10px)/1.3 system-ui,sans-serif!important;
  letter-spacing:.045em!important;text-transform:uppercase;
}
/* Preserve the approved horizontal product heading/price relationship.
   Flex wraps the price below ONLY if zoom makes the tile too narrow. */
.shop-section .product-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(15px,1.7vw,30px) clamp(8px,1.05vw,16px);
}
.shop-section .product-grid>.product-card{
  box-sizing:border-box;display:flex;flex-direction:column;
  min-inline-size:0;max-inline-size:100%;overflow:hidden;
}
.shop-section .product-card>.product-media{flex:none;max-inline-size:100%}
.shop-section .product-card>.product-info{
  box-sizing:border-box;display:flex;flex-direction:column;flex:1 1 auto;
  min-inline-size:0;max-inline-size:100%;padding:10px 10px 11px;
}
.shop-section .product-card .product-title-line{
  box-sizing:border-box;display:flex!important;flex-flow:row wrap!important;
  align-items:flex-start!important;justify-content:space-between!important;
  column-gap:8px!important;row-gap:3px!important;
  min-inline-size:0;max-inline-size:100%;
}
.shop-section .product-card .product-title-line>div{
  flex:1 1 120px!important;min-inline-size:0;max-inline-size:100%;
}
.shop-section .product-card .product-category{
  display:block;white-space:normal;overflow-wrap:normal;
  margin:0!important;padding:0!important;color:#946337!important;
  font:800 clamp(8px,.68vw,10px)/1.25 system-ui,sans-serif!important;
  letter-spacing:.10em!important;text-transform:uppercase;
}
.shop-section .product-card button.product-name{
  display:-webkit-box!important;-webkit-box-orient:vertical!important;
  -webkit-line-clamp:2;min-inline-size:0;max-inline-size:100%;
  inline-size:100%;min-block-size:0!important;max-block-size:none!important;
  margin:4px 0 0!important;padding:0!important;overflow:hidden!important;
  white-space:normal!important;text-overflow:clip!important;overflow-wrap:anywhere!important;
  font-size:clamp(14px,1.15vw,18px)!important;line-height:1.23!important;
  text-align:start!important;color:#38271e!important;
}
.shop-section .product-card .product-title-line .product-price{
  display:block!important;flex:0 1 auto!important;align-self:flex-start!important;
  inline-size:auto!important;min-inline-size:0;max-inline-size:100%;
  min-block-size:0!important;margin:1px 0 0 auto!important;
  padding:0!important;color:#805020!important;text-align:end!important;
  font:800 clamp(12px,.97vw,16px)/1.3 system-ui,sans-serif!important;
  overflow-wrap:normal;white-space:normal!important;font-variant-numeric:tabular-nums;
}
.shop-section .product-card .product-price .dm-markdown-price,
.shop-section .product-card .product-price .dm-price-offer-label{
  max-inline-size:100%;text-align:end!important;white-space:normal!important;
}
.shop-section .product-card .product-price .dm-markdown-price strong{color:#805020!important}
/* Swatches have a comfortable hit box but a VISUAL 10-12px colour square.
   The background is cropped to content-box; colour values remain unchanged. */
.shop-section .product-card .colour-line{
 box-sizing:border-box;display:flex!important;align-items:center!important;justify-content:flex-start!important;
 min-inline-size:0;max-inline-size:100%;gap:5px!important;
 margin:8px 0 4px!important;min-block-size:23px;
}
.shop-section .product-card .colour-line .swatches{
 box-sizing:border-box;display:flex!important;flex-direction:row!important;
 flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:center!important;
 flex:0 1 auto!important;min-inline-size:0;max-inline-size:100%;inline-size:auto;
 margin:0!important;padding:1px 2px!important;gap:4px!important;
 overflow-x:auto!important;overflow-y:hidden!important;
 scrollbar-width:none;scroll-snap-type:none;white-space:nowrap!important;
}
.shop-section .product-card .colour-line .swatches::-webkit-scrollbar{display:none}
.shop-section .product-card .colour-line .swatches button.swatch{
 box-sizing:border-box!important;display:inline-block!important;position:relative;
 flex:0 1 20px!important;inline-size:20px!important;block-size:22px!important;
 width:20px!important;height:22px!important;
 min-width:0!important;min-height:0!important;
 min-inline-size:0!important;min-block-size:0!important;
 padding:3px!important;margin:0!important;
 border:3px solid transparent!important;border-radius:2px!important;
 background-clip:content-box!important;
 outline:0;box-shadow:none!important;vertical-align:middle;
 font-size:0!important;line-height:0!important;
}
.shop-section .product-card .colour-line .swatches button.swatch.active{
 outline:1px solid #714927!important;outline-offset:-1px!important;
 box-shadow:none!important;
}
.shop-section .product-card .colour-line .swatches button.swatch:focus-visible{
 outline:2px solid #714927!important;outline-offset:0!important;
}
.shop-section .product-card .colour-name{
 flex:1 1 auto;min-inline-size:0;max-inline-size:100%;
 color:#877464!important;font-size:clamp(9px,.75vw,12px)!important;
 overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.shop-section .product-card .quick-add{display:grid;grid-template-columns:minmax(0,1fr) 37px;gap:6px;min-inline-size:0;margin-top:7px!important;padding-top:0}
.shop-section .product-card .quick-add select{min-inline-size:0;max-inline-size:100%;inline-size:100%;height:38px;font-size:11px;padding:0 7px}
.shop-section .product-card .quick-add button{inline-size:37px;block-size:38px}
/* Width-based reflow also covers zoom: CSS viewport gets smaller naturally.
   Desktop remains horizontal; narrow cards stack price to protect readability. */
@media(max-width:1399px){
 .new-section .collection-rail{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}
@media(max-width:1180px){
 .new-section .collection-rail{grid-template-columns:repeat(4,minmax(0,1fr))!important}
 .shop-section .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
 .new-section .collection-rail{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .shop-section .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .shop-section .product-card .colour-name{display:none!important}
 .shop-section .product-card .product-title-line>div{flex:1 1 110px!important}
}
@media(max-width:700px){
 .new-section .collection-rail{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
 .shop-section .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 9px}
 .shop-section .product-card>.product-info{padding:9px 8px 10px}
 .shop-section .product-card .product-title-line{display:grid!important;grid-template-columns:minmax(0,1fr);gap:2px!important}
 .shop-section .product-card .product-title-line>div{width:100%;min-inline-size:0}
 .shop-section .product-card button.product-name{font-size:clamp(13px,3.6vw,16px)!important}
 .shop-section .product-card .product-category{font-size:9px!important}
 .shop-section .product-card .product-title-line .product-price{
   margin:2px 0 0 auto!important;justify-self:end!important;
   font-size:clamp(12px,3.3vw,15px)!important;
 }
 .shop-section .product-card .quick-add{grid-template-columns:minmax(0,1fr) 34px;gap:5px}
 .shop-section .product-card .quick-add button{inline-size:34px;block-size:36px}
 .shop-section .product-card .quick-add select{height:36px;font-size:10px;padding-inline:4px}
 .new-section .collection-tile>strong{font-size:clamp(13px,3.25vw,16px)!important;padding:7px 8px 0!important}
 .new-section .collection-tile>small{font-size:9px!important;padding:3px 8px 8px!important}
}
@media(max-width:420px){
 .shop-section .product-grid{gap:13px 7px}
 .shop-section .product-card>.product-info{padding:8px 6px 9px}
 .shop-section .product-card .colour-line .swatches{gap:2px!important;padding:1px!important}
 .shop-section .product-card .colour-line .swatches button.swatch{
   flex-basis:18px!important;inline-size:18px!important;width:18px!important;
   block-size:20px!important;height:20px!important;padding:3px!important;
 }
 .shop-section .product-card .product-title-line .product-price{font-size:12px!important}
 .shop-section .product-card .quick-add{grid-template-columns:minmax(0,1fr) 32px;gap:4px}
 .shop-section .product-card .quick-add button{width:32px;height:35px}
 .shop-section .product-card .quick-add select{height:35px;font-size:10px}
 .new-section .collection-rail{gap:7px!important}
}
@media(max-width:350px){
 .shop-section .product-card .colour-line .swatches button.swatch{
  flex-basis:16px!important;inline-size:16px!important;width:16px!important;
  block-size:19px!important;height:19px!important;padding:2px!important
 }
 .shop-section .product-card button.product-name{font-size:13px!important}
}
@media(max-width:285px){
 .shop-section .product-grid,.new-section .collection-rail{grid-template-columns:minmax(0,1fr)!important}
}
/* Responsive category controls never force the body wider. */
.dm-posthero-categories .category-chips,.shop-section .category-chips{
 display:flex!important;flex-wrap:wrap!important;max-inline-size:100%;gap:clamp(5px,1vw,10px);
 overflow:visible!important;scroll-snap-type:none!important;padding-bottom:3px;
}
.dm-posthero-categories .category-chip,.shop-section .category-chip{
 max-inline-size:100%;white-space:normal;text-align:center;
 min-block-size:34px;padding:7px clamp(8px,1.2vw,14px);
 font-size:clamp(10px,.95vw,13px);
}
/* Respect browser zoom/reduced motion instead of suppressing overflow globally. */
@media(prefers-reduced-motion:reduce){.new-section .collection-tile:hover .tile-image img{transition:none;transform:none}}
/* Search/filter toolbar: remove 200px native-select width from narrow zoom layouts. */
.shop-section .shop-heading{display:flex;flex-wrap:wrap;min-inline-size:0;gap:12px}
.shop-section .shop-heading>div,.shop-section .shop-tools,.shop-section .sort-control{min-inline-size:0;max-inline-size:100%}
.shop-section .shop-tools{display:flex;flex-wrap:wrap;gap:7px}
.shop-section .shop-tools .sort-control select{min-inline-size:0;max-inline-size:100%;inline-size:min(100%,220px)}
@media(max-width:420px){.shop-section .shop-tools .sort-control select{min-width:0!important;width:160px!important;max-width:100%!important;height:40px;padding-inline:8px 22px}}
/* Compact and balanced separation between homepage sections. */
.new-section{padding-block:clamp(30px,4.3vw,64px)!important}
.new-section .split-heading{margin-bottom:clamp(14px,2vw,26px)!important;gap:12px}
.shop-section{padding-block:clamp(28px,4vw,62px)!important}
.shop-section .shop-heading{margin-bottom:clamp(16px,2.3vw,28px)!important}
@media(max-width:420px){.new-section{padding-block:24px!important}.shop-section{padding-block:28px!important}}


/* Dazzle Mark RC4 v5 — Boutique image full-visibility at all viewport/zoom sizes.
   Scoped to the existing storefront story; DOES NOT affect product imagery,
   catalogue, checkout, popup, permissions, JavaScript, or existing markup. */
.story-section {
  min-height: 0 !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: stretch;
}
.story-section > .story-image {
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(10px, 1.6vw, 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(130deg, #e9dac5 0%, #fffaf2 51%, #e9d7bd 100%);
}
.story-section > .story-image > img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  border: 1px solid rgba(145, 105, 58, .17);
  box-shadow: 0 9px 32px rgba(48, 27, 12, .08);
}
.story-section > .story-copy {
  min-width: 0;
  padding: clamp(26px, 3.8vw, 64px) clamp(22px, 4.4vw, 74px);
}
@media (max-width: 980px) {
  .story-section {
    grid-template-columns: minmax(0, 1fr);
  }
  .story-section > .story-image {
    min-height: 0 !important;
    height: auto !important;
    padding: clamp(10px, 2vw, 18px);
  }
  .story-section > .story-image > img {
    width: 100% !important;
    height: auto !important;
    max-width: min(100%, 980px) !important;
  }
}
@media (max-width: 420px) {
  .story-section > .story-image { padding: 8px; }
  .story-section > .story-copy {
    padding: 28px 20px;
  }
}

/* Dazzle Mark RC4 v6 — Full-bleed photographic boutique backdrop.
   Design-only override. Keep the COMPLETE original showroom photo visible
   (never crop it), while filling unavoidable aspect-ratio space with an
   atmospheric continuation of the SAME boutique image, not empty padding.
   Scoped only to the boutique/story image. */
.story-section > .story-image {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 0 !important;
  margin: 0 !important;
  min-inline-size: 0;
  min-block-size: 0 !important;
  block-size: auto !important;
  overflow: hidden;
  background: #53371f !important; /* fallback matching gold boutique interior */
}
.story-section > .story-image::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: -2;
  pointer-events: none;
  background-image: var(--dm-boutique-photo, url("../images/brand/dazzle-mark-boutique-ac-fixed.webp"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: blur(15px) saturate(.95) brightness(.80);
  transform: scale(1.025);
}
.story-section > .story-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(62, 34, 14, .16), rgba(181, 130, 64, .10) 50%, rgba(50, 29, 12, .20));
}
.story-section > .story-image > img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* On narrow devices the photo sets its own height; no empty top/bottom bars. */
@media (max-width: 980px) {
  .story-section > .story-image { align-self: start; }
}