/* Palette: B · Дълбок петрол (approved 2026-09-28).
   petrol #123E44 · deep #0B2B30 · soft #1F5A61 · bone #F6F4EF · mist #E6ECE9
   champagne #B8955A · champagne-light #C8A86E (on dark) · gold #86692F (text on light)
   ink #161A1B · muted #5A615F. Copper retired. */
/* CaseKing — Modern Atelier v2
   Homepage art direction only. Loaded last so the legacy storefront remains
   intact while this file owns the visual system inside #storefront-home-view. */

:root {
  --ma-petrol: #123E44;
  --ma-petrol-deep: #0B2B30;
  --ma-petrol-soft: #1F5A61;
  --ma-sage: #E6ECE9;
  --ma-sage-deep: #D5E0DC;
  --ma-copper: #B8955A; /* retired 2026-09-28: copper merged into champagne */
  --ma-champagne: #B8955A;
  --ma-champagne-light: #C8A86E;
  --ma-mist-soft: #EEF2F0;
  --ma-porcelain: #F6F4EF;
  --ma-warm: #EEEBE4;
  --ma-gold: #86692F;
  --ma-gold-bright: #C8A86E;
  --ma-ink: #161A1B;
  --ma-muted: #5A615F;
  --ma-line: rgba(18, 62, 68, .14);
  --ma-shadow: 0 24px 70px rgba(11, 43, 48, .11);
  --ma-ease: cubic-bezier(.22, .61, .36, 1);
  --ma-page-bg: var(--ma-porcelain);
  --ma-page-band: var(--ma-sage);
  --ma-card-bg: #fff;
  --ma-card-border: rgba(18,62,68,.10);
  --ma-card-shadow: 0 14px 36px rgba(11,43,48,.08);
  --ma-card-shadow-hover: 0 22px 50px rgba(11,43,48,.14);
  --ma-motion-enter: 580ms;
  --ma-crosssell-bg: linear-gradient(145deg, var(--ma-petrol-deep), var(--ma-petrol));
  --ma-crosssell-panel: linear-gradient(145deg, var(--ma-mist-soft), var(--ma-sage));
  --ma-crosssell-card: rgba(255,255,255,.94);
  --ma-crosssell-border: rgba(18,62,68,.16);
  --ma-crosssell-selected: var(--ma-champagne);
  --ma-crosssell-shadow: 0 24px 70px rgba(11,43,48,.18);
}

/* The header introduces petrol before the hero and makes the palette visible
   before any card is reached. */
.ck-top-shell {
  border-top: 3px solid var(--ma-petrol);
}
.ck-header-surface {
  background:
    linear-gradient(90deg, rgba(230,236,233,.58), transparent 22%, transparent 78%, rgba(184,149,90,.10)),
    rgba(246,244,239,.94) !important;
  border-bottom-color: rgba(18,62,68,.12) !important;
}
.desktop-category-nav a:hover,
.desktop-category-nav a:focus-visible { color: var(--ma-petrol) !important; }
.desktop-category-nav a::after {
  background: linear-gradient(90deg, transparent, var(--ma-copper), transparent) !important;
}
.ck-utility-actions .header-btn:hover,
.ck-utility-actions .header-btn:focus-visible {
  color: var(--ma-petrol) !important;
  background: var(--ma-sage) !important;
  border-color: rgba(18,62,68,.18) !important;
}

#storefront-home-view {
  color: var(--ma-ink);
  background: var(--ma-porcelain);
}

/* HERO — preserve approved photography, upgrade the copy into an editorial
   glass panel and tie the carousel controls to the new palette. */
#storefront-home-view .ck-hero-slide-inner { align-items: center; }
#storefront-home-view .ck-hero-slide-media { z-index: 0; }
#storefront-home-view .ck-hero-slide-inner {
  z-index: 3;
  pointer-events: none;
}
#storefront-home-view .ck-hero-copy {
  position: relative;
  max-width: min(590px, 48vw);
  padding: clamp(22px, 3vw, 42px) clamp(22px, 3.2vw, 48px);
  border: 1px solid rgba(255,255,255,.18);
  border-left: 3px solid var(--ma-copper);
  border-radius: 4px 24px 24px 4px;
  background: linear-gradient(135deg, rgba(18,44,48,.88), rgba(22,45,49,.60));
  box-shadow: 0 28px 80px rgba(4,18,20,.26);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  pointer-events: auto;
}
#storefront-home-view .ck-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #E6D3AC !important;
}
#storefront-home-view .ck-hero-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--ma-copper);
}
#storefront-home-view .ck-hero-cta {
  color: #0B2B30 !important;
  background: linear-gradient(135deg, #e1c57f, var(--ma-gold-bright)) !important;
  border-color: rgba(230,211,172,.52) !important;
  box-shadow: 0 12px 30px rgba(17,31,32,.24) !important;
}
#storefront-home-view .ck-hero-rail {
  background: rgba(255,255,255,.22) !important;
}
#storefront-home-view .ck-hero-rail-fill {
  background: linear-gradient(90deg, var(--ma-copper), #efd895) !important;
}

/* HERO MOTION — a layered atelier reveal: image wipe, soft depth shift and
   a controlled top-drop sequence with a small overshoot on the headline. */
#storefront-home-view .ck-hero-carousel {
  --ck-reveal: 1050ms;
  --ck-dwell: 6200ms;
  --ck-sweep: 900ms;
}
#storefront-home-view .ck-hero-slide.is-active .ck-hero-slide-media {
  animation-duration: var(--ck-reveal) !important;
  animation-timing-function: cubic-bezier(.16,.78,.24,1) !important;
}
#storefront-home-view .ck-hero-slide.is-active .ck-hero-slide-img {
  animation: maHeroImageDrift var(--ck-dwell) cubic-bezier(.2,.55,.2,1) both !important;
}
#storefront-home-view .ck-hero-slide.is-active .ck-hero-copy {
  animation: maHeroPanelIn .78s cubic-bezier(.2,.8,.2,1) .08s both;
}
#storefront-home-view .ck-hero-slide .ck-hero-eyebrow,
#storefront-home-view .ck-hero-slide .ck-hero-headline,
#storefront-home-view .ck-hero-slide .ck-hero-subtext,
#storefront-home-view .ck-hero-slide .ck-hero-cta {
  opacity: 0;
  transform: translateY(-32px);
}
#storefront-home-view .ck-hero-slide.is-active .ck-hero-eyebrow {
  animation: maCopyDrop .64s cubic-bezier(.2,.9,.24,1.14) .24s both !important;
}
#storefront-home-view .ck-hero-slide.is-active .ck-hero-headline {
  animation: maCopyBounce .82s cubic-bezier(.16,.86,.22,1.18) .34s both !important;
}
#storefront-home-view .ck-hero-slide.is-active .ck-hero-subtext {
  animation: maCopyDrop .70s cubic-bezier(.2,.8,.24,1) .48s both !important;
}
#storefront-home-view .ck-hero-slide.is-active .ck-hero-cta {
  animation: maCtaLand .72s cubic-bezier(.18,.9,.22,1.12) .60s both !important;
}
/* When the Web Animations choreography is available it becomes the single
   owner of copy motion. This avoids two animation systems fighting over the
   same transform while keeping the CSS sequence as a no-JS fallback. */
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-active .ck-hero-copy,
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-active .ck-hero-eyebrow,
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-active .ck-hero-headline,
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-active .ck-hero-subtext,
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-active .ck-hero-cta {
  animation: none !important;
  opacity: 1;
  transform: none;
  filter: none;
}
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-copy-ready .ck-hero-copy,
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-copy-ready .ck-hero-eyebrow,
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-copy-ready .ck-hero-headline,
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-copy-ready .ck-hero-subtext,
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-copy-ready .ck-hero-cta {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
/* Diagonal curtain instead of a plain rectangular wipe. The outgoing frame
   keeps moving behind it, so the change reads as one continuous camera move. */
@keyframes ckMediaRTL {
  0% { clip-path: polygon(100% 0,100% 0,100% 100%,82% 100%,92% 0); transform: translate3d(42px,0,0) scale(1.055); filter: blur(8px) brightness(.72); opacity: .15; }
  56% { filter: blur(1px) brightness(.96); opacity: 1; }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%,0 0); transform: none; filter: none; opacity: 1; }
}
@keyframes ckMediaLTR {
  0% { clip-path: polygon(0 0,0 0,8% 100%,0 100%,0 0); transform: translate3d(-42px,0,0) scale(1.055); filter: blur(8px) brightness(.72); opacity: .15; }
  56% { filter: blur(1px) brightness(.96); opacity: 1; }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%,0 0); transform: none; filter: none; opacity: 1; }
}
@keyframes ckLeaveRTL {
  0% { transform: none; filter: none; opacity: 1; }
  100% { transform: translate3d(-54px,0,0) scale(1.045); filter: blur(5px) brightness(.64); opacity: .18; }
}
@keyframes ckLeaveLTR {
  0% { transform: none; filter: none; opacity: 1; }
  100% { transform: translate3d(54px,0,0) scale(1.045); filter: blur(5px) brightness(.64); opacity: .18; }
}
@keyframes maHeroImageDrift {
  0% { transform: scale(1.025) translateX(8px); filter: saturate(.92) brightness(.92); }
  12% { filter: saturate(1) brightness(1); }
  100% { transform: scale(1.065) translateX(-10px); filter: saturate(1.04) brightness(1.02); }
}
@keyframes maHeroPanelIn {
  0% { opacity: 0; transform: translateX(-24px) scale(.985); backdrop-filter: blur(2px); }
  100% { opacity: 1; transform: none; backdrop-filter: blur(12px); }
}
@keyframes maCopyDrop {
  0% { opacity: 0; transform: translateY(-34px); }
  72% { opacity: 1; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes maCopyBounce {
  0% { opacity: 0; transform: translateY(-48px) scale(.985); }
  62% { opacity: 1; transform: translateY(7px) scale(1.012); }
  82% { transform: translateY(-3px) scale(.997); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes maCtaLand {
  0% { opacity: 0; transform: translateY(-22px) scale(.94); }
  68% { opacity: 1; transform: translateY(4px) scale(1.025); }
  100% { opacity: 1; transform: none; }
}

/* FINDER — strong petrol spine, but the form itself stays bright and direct. */
#storefront-home-view .ck-finder-section {
  background: linear-gradient(180deg, transparent 0 45%, var(--ma-warm) 45% 100%) !important;
}
#storefront-home-view .ck-finder-bar {
  overflow: hidden;
  border: 0 !important;
  border-radius: 22px !important;
  background:
    linear-gradient(90deg, var(--ma-petrol) 0, var(--ma-petrol) 7px, transparent 7px),
    linear-gradient(135deg, #ffffff, var(--ma-porcelain)) !important;
  box-shadow: 0 26px 70px rgba(21,57,62,.18), 0 0 0 1px rgba(18,62,68,.12) !important;
}
#storefront-home-view .finder-kicker { color: var(--ma-copper) !important; }
#storefront-home-view .ck-finder-lead strong { color: var(--ma-petrol-deep) !important; }
#storefront-home-view .ck-finder-step {
  color: var(--ma-petrol) !important;
  border-color: rgba(18,62,68,.34) !important;
  background: var(--ma-sage) !important;
}
#storefront-home-view .ck-finder-select-wrap select {
  border-color: rgba(18,62,68,.20) !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23234f57' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
}
#storefront-home-view .ck-finder-cta:not(:disabled) {
  background: linear-gradient(180deg, #d8b969, var(--ma-gold)) !important;
}
#storefront-home-view .ck-device-context {
  background: linear-gradient(135deg, var(--ma-petrol), var(--ma-petrol-deep)) !important;
  border-color: rgba(184,149,90,.46) !important;
}

/* Shared editorial section heading. */
#storefront-home-view .ck-section-head {
  align-items: flex-end;
  gap: 28px;
}
#storefront-home-view .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ma-petrol) !important;
}
#storefront-home-view .section-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 99px;
  background: var(--ma-copper);
}
#storefront-home-view .ck-section-title {
  color: var(--ma-ink) !important;
  letter-spacing: -.045em !important;
}
#storefront-home-view .ck-section-sub { color: var(--ma-muted) !important; }
#storefront-home-view .ck-section-link {
  color: var(--ma-petrol) !important;
  border-bottom: 1px solid rgba(18,62,68,.26);
}
#storefront-home-view .ck-section-link:hover { color: var(--ma-copper) !important; }

/* CATEGORIES — warm gallery floor with alternating tinted captions. */
#storefront-home-view .categories-section {
  background:
    radial-gradient(circle at 96% 4%, rgba(184,149,90,.14), transparent 30%),
    linear-gradient(180deg, var(--ma-warm), var(--ma-porcelain)) !important;
}
#storefront-home-view .categories-section::before,
#storefront-home-view .categories-section::after {
  border-color: rgba(184,149,90,.25) !important;
}
#storefront-home-view .ck-cat-card,
#storefront-home-view .category-card {
  border: 1px solid rgba(18,62,68,.24) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.72), 0 18px 42px rgba(27,57,60,.14) !important;
}
#storefront-home-view .ck-cat-overlay,
#storefront-home-view .category-card-overlay {
  position: relative;
  background: #fff !important;
  border-top: 3px solid var(--ma-petrol) !important;
}
#storefront-home-view .ck-cat-card:nth-child(4n+2) .ck-cat-overlay,
#storefront-home-view .ck-cat-card:nth-child(4n+2) .category-card-overlay,
#storefront-home-view .ck-cat-card:nth-child(4n+3) .ck-cat-overlay,
#storefront-home-view .ck-cat-card:nth-child(4n+3) .category-card-overlay {
  background: #fff !important;
  border-top-color: var(--ma-copper) !important;
}
#storefront-home-view .ck-cat-title,
#storefront-home-view .category-card-title { color: var(--ma-petrol-deep) !important; }
#storefront-home-view .ck-cat-arrow {
  color: var(--ma-petrol) !important;
  border-color: rgba(18,62,68,.24) !important;
}
#storefront-home-view .ck-cat-card:hover,
#storefront-home-view .category-card:hover {
  border-color: rgba(18,62,68,.58) !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 26px 55px rgba(27,57,60,.20) !important;
}
#storefront-home-view .ck-cat-card:hover .ck-cat-arrow,
#storefront-home-view .category-card:hover .ck-cat-arrow {
  color: #fff !important;
  background: var(--ma-petrol) !important;
  border-color: var(--ma-petrol) !important;
}

/* BRANDS — a deliberate dark editorial chapter in the middle of the page. */
#storefront-home-view .brand-campaigns {
  background:
    radial-gradient(circle at 15% 5%, rgba(184,149,90,.22), transparent 28%),
    radial-gradient(circle at 94% 90%, rgba(184,149,90,.18), transparent 32%),
    linear-gradient(145deg, var(--ma-petrol-deep), var(--ma-petrol)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05), inset 0 -1px rgba(0,0,0,.12) !important;
}
#storefront-home-view .brand-campaigns::before {
  background: radial-gradient(circle, rgba(184,149,90,.18), transparent 64%) !important;
}
#storefront-home-view .brand-campaigns .section-kicker { color: #dcc58e !important; }
#storefront-home-view .brand-campaigns .section-kicker::before { background: var(--ma-copper); }
#storefront-home-view .brand-campaigns .ck-section-title { color: #fff !important; }
#storefront-home-view .brand-campaigns .ck-section-link {
  color: #f6ead0 !important;
  border-color: rgba(230,211,172,.34);
}
#storefront-home-view .brand-campaign-card {
  border-color: rgba(200,168,110,.32) !important;
  box-shadow: 0 18px 50px rgba(7,24,26,.22) !important;
}
#storefront-home-view .brand-campaign-card:hover {
  border-color: rgba(200,168,110,.78) !important;
  box-shadow: 0 26px 64px rgba(7,24,26,.34) !important;
}

/* CATALOG — sage makes the product section distinct without tinting images. */
#storefront-home-view .catalog {
  background:
    linear-gradient(115deg, rgba(255,255,255,.38), transparent 35%),
    linear-gradient(180deg, var(--ma-sage), var(--ma-sage-deep)) !important;
}
#storefront-home-view .catalog::before {
  border-color: rgba(18,62,68,.16) !important;
  box-shadow: 0 0 0 44px rgba(255,255,255,.10);
}
#storefront-home-view .product-card {
  background: linear-gradient(180deg, #fff 0 62%, #FBFAF7 78%, var(--ma-warm) 100%) !important;
  box-shadow: 0 0 0 1px rgba(18,62,68,.10), 0 14px 36px rgba(11,43,48,.08) !important;
}
#storefront-home-view .product-card:hover,
#storefront-home-view .product-card:focus-within {
  box-shadow: 0 0 0 1px rgba(18,62,68,.22), 0 22px 50px rgba(11,43,48,.14) !important;
}
#storefront-home-view .product-image-container::before { border-color: rgba(18,62,68,.20); }
#storefront-home-view .product-card:hover .product-image-container::before { border-color: rgba(184,149,90,.58); }
#storefront-home-view .product-maker { color: var(--ma-petrol) !important; }
#storefront-home-view .product-maker::before {
  background: linear-gradient(90deg, var(--ma-copper), var(--ma-champagne));
}
#storefront-home-view .product-info .product-price.current-price { color: var(--ma-gold) !important; }
#storefront-home-view .product-info .btn-card-buy {
  color: #0B2B30 !important;
  border-color: #86692F !important;
  background: linear-gradient(135deg, #DCC596, var(--ma-gold-bright)) !important;
  box-shadow: 0 8px 20px rgba(134,105,47,.18) !important;
}
#storefront-home-view .product-info .btn-card-buy:hover,
#storefront-home-view .product-info .btn-card-buy:focus-visible {
  color: #FBFAF7 !important;
  border-color: var(--ma-petrol-deep) !important;
  background: linear-gradient(135deg, var(--ma-petrol), var(--ma-petrol-deep)) !important;
  box-shadow: 0 12px 26px rgba(11,43,48,.25) !important;
}

/* ONE PURCHASE BUTTON — the accepted homepage card button is the canonical
   add-to-cart action in cards, Quick View and PDP. */
#storefront-home-view .product-info .btn-card-buy,
.ck-ql-add,
.pdp-cta {
  color: #0B2B30 !important;
  border: 1px solid #86692F !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #DCC596, var(--ma-gold-bright)) !important;
  box-shadow: 0 8px 20px rgba(134,105,47,.18), inset 0 1px rgba(255,255,255,.32) !important;
}
#storefront-home-view .product-info .btn-card-buy:hover,
#storefront-home-view .product-info .btn-card-buy:focus-visible,
.ck-ql-add:hover,
.ck-ql-add:focus-visible,
.pdp-cta:hover,
.pdp-cta:focus-visible {
  color: #FBFAF7 !important;
  border-color: var(--ma-petrol-deep) !important;
  background: linear-gradient(135deg, var(--ma-petrol), var(--ma-petrol-deep)) !important;
  box-shadow: 0 12px 26px rgba(11,43,48,.25) !important;
}
.pdp-cta { justify-content: space-between !important; }
.pdp-cta-icon { display: grid; place-items: center; }
.pdp-cta-icon .ck-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pdp-cta:hover .pdp-cta-icon { transform: translateX(4px); }
.pdp-cta-icon { transition: transform .24s ease; }

/* QUICK VIEW — a stronger two-surface composition with a real visual stage. */
.ck-ql-backdrop {
  background: rgba(9,31,34,.68) !important;
  backdrop-filter: blur(9px) saturate(90%);
  -webkit-backdrop-filter: blur(9px) saturate(90%);
}
.ck-ql-dialog {
  width: min(100%, 1060px) !important;
  border: 1px solid rgba(184,149,90,.58) !important;
  border-radius: 26px 26px 8px 26px !important;
  background: var(--ma-petrol-deep) !important;
  box-shadow: 0 40px 100px rgba(4,22,24,.48), 0 0 0 1px rgba(255,255,255,.06) inset !important;
  transform-origin: 55% 50%;
  transition: opacity .24s ease, transform .28s cubic-bezier(.4,0,1,1) !important;
}
.ck-ql.is-open .ck-ql-dialog {
  animation: maQlDialogIn .62s cubic-bezier(.16,.84,.22,1) both;
}
@keyframes maQlDialogIn {
  0% { opacity: 0; transform: translate3d(0,34px,0) scale(.935) rotateX(2deg); }
  68% { opacity: 1; transform: translate3d(0,-5px,0) scale(1.008) rotateX(0); }
  100% { opacity: 1; transform: none; }
}
.ck-ql-dialog::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 38%;
  height: 4px;
  background: linear-gradient(90deg, var(--ma-copper), var(--ma-champagne), transparent);
}
.ck-ql-media {
  position: relative;
  padding: clamp(22px,2.4vw,34px) !important;
  border-right: 0 !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.75), transparent 32%),
    linear-gradient(145deg, var(--ma-sage), #cfddd5) !important;
}
.ck-ql-media::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(18,62,68,.16);
  border-radius: 50%;
  pointer-events: none;
}
.ck-ql-stage {
  border: 1px solid rgba(18,62,68,.14) !important;
  border-radius: 22px 22px 6px 22px !important;
  background: #fff !important;
  box-shadow: 0 24px 54px rgba(24,60,63,.16) !important;
}
.ck-ql-stage::before { border-color: rgba(184,149,90,.40) !important; }
.ck-ql-img.is-switching { animation: maQlImageIn .38s var(--ma-ease) both; }
@keyframes maQlImageIn { from { opacity: .25; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
.ck-ql-gallery-btn {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(18,62,68,.18);
  border-radius: 50%;
  color: var(--ma-petrol);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(11,43,48,.13);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .18s ease, background .18s ease, transform .22s var(--ma-ease), box-shadow .22s ease;
}
.ck-ql-gallery-btn.is-prev { left: 14px; }
.ck-ql-gallery-btn.is-next { right: 14px; }
.ck-ql-gallery-btn .ck-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ck-ql-gallery-btn:hover { color: #fff; background: var(--ma-petrol); box-shadow: 0 14px 30px rgba(11,43,48,.24); }
.ck-ql-gallery-btn.is-prev:hover { transform: translate(-3px,-50%); }
.ck-ql-gallery-btn.is-next:hover { transform: translate(3px,-50%); }
.ck-ql-gallery-btn:focus-visible { outline: 2px solid var(--ma-copper); outline-offset: 3px; }
.ck-ql-count {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 14px;
  padding: 6px 10px;
  border: 1px solid rgba(18,62,68,.14);
  border-radius: 999px;
  color: var(--ma-petrol);
  background: rgba(255,255,255,.92);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.ck-ql-detail {
  color: #fff;
  background:
    radial-gradient(circle at 100% 0, rgba(184,149,90,.14), transparent 34%),
    linear-gradient(145deg, var(--ma-petrol), var(--ma-petrol-deep)) !important;
}
.ck-ql-scroll { padding: clamp(30px,3vw,44px) clamp(24px,3vw,40px) 14px !important; }
.ck-ql-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: #d7c185;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ck-ql-kicker::before { content:""; width: 28px; height: 2px; background: var(--ma-copper); }
.ck-ql-maker { color: #f0dcae !important; }
.ck-ql-maker::before { background: var(--ma-copper) !important; }
.ck-ql-title { color: #fff !important; font-size: clamp(22px,2vw,30px) !important; line-height: 1.2 !important; }
.ck-ql-compat {
  width: fit-content;
  padding: 8px 11px;
  border: 1px solid rgba(230,236,233,.22);
  border-radius: 999px;
  color: #e2eee8 !important;
  background: rgba(230,236,233,.09);
}
.ck-ql-compat .ck-icon { color: #d6bd7e !important; }
.ck-ql-desc { color: rgba(240,246,243,.76) !important; font-size: 14px !important; }
.ck-ql-assurance {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 7px;
  margin-top: 24px;
}
.ck-ql-assurance span {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 12px 10px;
  border: 1px solid rgba(230,236,233,.14);
  border-radius: 12px 12px 4px 12px;
  color: rgba(244,248,246,.78);
  background: rgba(255,255,255,.045);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.35;
}
.ck-ql-assurance b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  color: #f0d9a2;
  background: rgba(184,149,90,.14);
  font-size: 12px;
}
.ck-ql-buy {
  gap: 12px !important;
  padding: 20px clamp(24px,3vw,40px) 26px !important;
  border-top: 1px solid rgba(184,149,90,.22) !important;
  background: linear-gradient(145deg, #fff, var(--ma-warm)) !important;
}
.ck-ql-price .product-price.current-price { color: var(--ma-gold) !important; }
.ck-ql-stock { color: var(--ma-petrol) !important; }
.ck-ql-stock::before { background: var(--ma-petrol) !important; box-shadow: 0 0 0 3px rgba(18,62,68,.14) !important; }
.ck-ql-view { color: var(--ma-petrol) !important; border-top-color: rgba(18,62,68,.12) !important; }
.ck-ql-view::after { color: var(--ma-copper) !important; }
.ck-ql-note { margin: 0; color: var(--ma-muted); font-size: 11.5px; line-height: 1.5; text-align: center; }
.ck-ql-close { color: var(--ma-petrol) !important; border-color: rgba(18,62,68,.16) !important; background: rgba(255,255,255,.94) !important; box-shadow: 0 8px 24px rgba(12,36,39,.16); }
.ck-ql-thumb.is-active { border-color: var(--ma-petrol) !important; background: #fff !important; box-shadow: 0 0 0 2px rgba(18,62,68,.14); }
/* Stagger the information after the dialog has landed. */
.ck-ql.is-open .ck-ql-kicker,
.ck-ql.is-open .ck-ql-maker,
.ck-ql.is-open .ck-ql-title,
.ck-ql.is-open .ck-ql-compat,
.ck-ql.is-open .ck-ql-desc,
.ck-ql.is-open .ck-ql-assurance {
  animation: maQlDetailIn .48s cubic-bezier(.2,.75,.25,1) both;
}
.ck-ql.is-open .ck-ql-kicker { animation-delay: .16s; }
.ck-ql.is-open .ck-ql-maker { animation-delay: .21s; }
.ck-ql.is-open .ck-ql-title { animation-delay: .26s; }
.ck-ql.is-open .ck-ql-compat { animation-delay: .31s; }
.ck-ql.is-open .ck-ql-desc { animation-delay: .36s; }
.ck-ql.is-open .ck-ql-assurance { animation-delay: .41s; }
@keyframes maQlDetailIn {
  from { opacity: 0; transform: translate3d(20px,12px,0); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* QUICK VIEW V5 — edge-to-edge product photography and a light editorial
   product sheet. The photograph owns the whole left panel; the only separate
   surface is the thumbnail filmstrip below it. */
.ck-ql-dialog {
  overflow: hidden;
  border-color: rgba(18,62,68,.18) !important;
  background: var(--ma-porcelain) !important;
  box-shadow: 0 42px 110px rgba(4,22,24,.42), 0 0 0 1px rgba(255,255,255,.72) inset !important;
}
.ck-ql-dialog::before {
  width: 52%;
  height: 3px;
  background: linear-gradient(90deg, var(--ma-copper), var(--ma-champagne), rgba(184,149,90,0)) !important;
}
.ck-ql-media {
  display: grid !important;
  grid-template-rows: minmax(0,1fr) auto;
  gap: 0 !important;
  min-height: 0;
  padding: 0 !important;
  border-right: 1px solid rgba(18,62,68,.12) !important;
  background: #fff !important;
}
.ck-ql-media::after { display: none; }
.ck-ql-stage {
  width: 100%;
  min-height: 0;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}
.ck-ql-stage::before { display: none; }
.ck-ql-img {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}
.ck-ql-thumbs {
  position: relative;
  z-index: 2;
  justify-content: center;
  flex-wrap: nowrap !important;
  min-height: 78px;
  padding: 10px 14px 12px;
  overflow-x: auto;
  border-top: 1px solid rgba(18,62,68,.10);
  background: linear-gradient(180deg,#f8faf8,#eef3ef);
  scrollbar-width: thin;
}
.ck-ql-thumb {
  flex: 0 0 58px;
  border-radius: 9px !important;
  border-color: rgba(18,62,68,.12) !important;
}
.ck-ql-thumb.is-active {
  border-color: var(--ma-petrol) !important;
  box-shadow: 0 0 0 2px rgba(18,62,68,.12), 0 5px 13px rgba(11,43,48,.10) !important;
}
.ck-ql-gallery-btn { top: calc(50% - 39px); }
.ck-ql-count { bottom: 92px; }
.ck-ql-detail {
  position: relative;
  color: var(--ma-ink) !important;
  border-left: 0;
  background:
    radial-gradient(circle at 100% 0, rgba(230,236,233,.90), transparent 36%),
    linear-gradient(145deg,#fff 0%,var(--ma-porcelain) 62%,#f4f1e9 100%) !important;
}
.ck-ql-detail::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 110px;
  height: 110px;
  border-right: 1px solid rgba(184,149,90,.22);
  border-top: 1px solid rgba(184,149,90,.22);
  border-radius: 0 0 0 100%;
  pointer-events: none;
}
.ck-ql-scroll {
  background: transparent !important;
}
.ck-ql-kicker { color: var(--ma-copper) !important; }
.ck-ql-kicker::before { background: linear-gradient(90deg,var(--ma-copper),var(--ma-champagne)) !important; }
.ck-ql-maker { color: var(--ma-petrol) !important; }
.ck-ql-maker::before { background: var(--ma-copper) !important; }
.ck-ql-title {
  max-width: 19ch;
  color: var(--ma-petrol-deep) !important;
  font-size: clamp(21px,1.8vw,28px) !important;
  line-height: 1.18 !important;
  letter-spacing: -.028em !important;
}
.ck-ql-compat {
  border-color: rgba(18,62,68,.13) !important;
  color: var(--ma-petrol) !important;
  background: rgba(230,236,233,.68) !important;
}
.ck-ql-compat .ck-icon { color: var(--ma-copper) !important; }
.ck-ql-desc { color: #55605e !important; }
.ck-ql-assurance span {
  border-color: rgba(18,62,68,.11) !important;
  color: #465553 !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 8px 20px rgba(11,43,48,.055);
}
.ck-ql-assurance span:nth-child(2) { background: rgba(230,236,233,.60) !important; }
.ck-ql-assurance span:nth-child(3) { background: rgba(238,235,228,.78) !important; }
.ck-ql-assurance b {
  color: var(--ma-petrol) !important;
  background: linear-gradient(145deg,#fff,#e5eee8) !important;
  box-shadow: 0 0 0 1px rgba(18,62,68,.10);
}
.ck-ql-buy {
  border-top-color: rgba(18,62,68,.10) !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 -10px 28px rgba(11,43,48,.035);
}

/* TRUST — individual benefits become a rhythmic editorial strip. */
#storefront-home-view .ck-trust {
  background:
    radial-gradient(circle at 4% 100%, rgba(184,149,90,.10), transparent 28%),
    linear-gradient(180deg, var(--ma-porcelain), var(--ma-warm)) !important;
}
#storefront-home-view .ck-trust::before { border-color: rgba(184,149,90,.24) !important; }
#storefront-home-view .ck-trust-head .section-kicker { justify-content: center; }
#storefront-home-view .ck-trust-head::after {
  background: linear-gradient(90deg, transparent, var(--ma-copper), transparent) !important;
}
#storefront-home-view .ck-trust .ck-island {
  border-color: rgba(18,62,68,.14) !important;
  background: #fff !important;
  box-shadow: var(--ma-shadow) !important;
}
#storefront-home-view .ck-trust .ck-island-benefit {
  border-left-color: rgba(18,62,68,.10) !important;
  transition: background .25s ease;
}
#storefront-home-view .ck-trust .ck-island-benefit:nth-child(odd) {
  background: linear-gradient(180deg, rgba(230,236,233,.55), rgba(255,255,255,.25));
}
#storefront-home-view .ck-trust .ck-island-benefit:hover { background: var(--ma-sage); }
#storefront-home-view .ck-trust .ck-island-benefit .ck-icon {
  color: var(--ma-copper) !important;
  stroke: var(--ma-copper) !important;
  border-color: rgba(184,149,90,.50) !important;
  background: radial-gradient(circle at 50% 30%, #fff, #f3e5dc) !important;
  box-shadow: 0 0 0 5px rgba(184,149,90,.09), 0 10px 22px rgba(18,62,68,.10) !important;
}
#storefront-home-view .ck-trust .ck-island-benefit strong { color: var(--ma-petrol-deep) !important; }

/* ABOUT — frame the approved campaign art in the new palette. */
#storefront-home-view .ck-about {
  background:
    linear-gradient(90deg, rgba(18,62,68,.05), transparent 30%, rgba(184,149,90,.08)),
    var(--ma-porcelain) !important;
}
#storefront-home-view .ck-about-banner {
  border: 1px solid rgba(184,149,90,.42);
  box-shadow: 0 30px 80px rgba(11,43,48,.18) !important;
}
#storefront-home-view .ck-about-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

/* SITE-WIDE MODERN ATELIER — carry the accepted homepage surface, product
   card and interaction language through category, PDP, cart and checkout. */
body,
.categories-page-section,
.product-page-section,
.ck-cart-section,
.checkout-page-section,
.legal-page-section {
  color: var(--ma-ink);
  background:
    radial-gradient(circle at 92% 4%, rgba(184,149,90,.10), transparent 26%),
    var(--ma-page-bg) !important;
}
.category-detail-section {
  color: var(--ma-ink);
  background:
    linear-gradient(115deg, rgba(255,255,255,.42), transparent 34%),
    linear-gradient(180deg, var(--ma-sage), var(--ma-sage-deep)) !important;
}
.categories-hero-banner,
.category-detail-hero {
  color: var(--ma-ink) !important;
  border-bottom-color: rgba(18,62,68,.12) !important;
  background:
    radial-gradient(circle at 86% -25%, rgba(184,149,90,.20), transparent 42%),
    linear-gradient(145deg,#fff,var(--ma-porcelain)) !important;
}
.categories-hero-banner h1,
.category-detail-hero h1 { color: var(--ma-petrol-deep) !important; }
.categories-hero-banner p,
.category-detail-hero p { color: var(--ma-muted) !important; }
.ck-eyebrow { color: var(--ma-copper) !important; }

/* The accepted homepage card is the sole storefront product-card variant. */
.product-card {
  background: linear-gradient(180deg,#fff 0 62%,#FBFAF7 78%,var(--ma-warm) 100%) !important;
  box-shadow: 0 0 0 1px var(--ma-card-border), var(--ma-card-shadow) !important;
}
.product-card:hover,
.product-card:focus-within {
  box-shadow: 0 0 0 1px rgba(18,62,68,.22), var(--ma-card-shadow-hover) !important;
}
.product-image-container::before { border-color: rgba(18,62,68,.20) !important; }
.product-card:hover .product-image-container::before,
.product-card:focus-within .product-image-container::before { border-color: rgba(184,149,90,.58) !important; }
.product-maker { color: var(--ma-petrol) !important; }
.product-maker::before { background: linear-gradient(90deg,var(--ma-copper),var(--ma-champagne)) !important; }
.product-info .product-price.current-price { color: var(--ma-gold) !important; }
.product-info .btn-card-buy {
  color: #0B2B30 !important;
  border: 1px solid #86692F !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg,#DCC596,var(--ma-gold-bright)) !important;
  box-shadow: 0 8px 20px rgba(134,105,47,.18), inset 0 1px rgba(255,255,255,.32) !important;
}
.product-info .btn-card-buy:hover,
.product-info .btn-card-buy:focus-visible {
  color: #FBFAF7 !important;
  border-color: var(--ma-petrol-deep) !important;
  background: linear-gradient(135deg,var(--ma-petrol),var(--ma-petrol-deep)) !important;
  box-shadow: 0 12px 26px rgba(11,43,48,.25) !important;
}

/* Contextual filter rail: porcelain sheet, petrol spine, copper focus. */
.ck-filter-group[hidden] { display: none !important; }
#category-detail-filter-panel {
  overflow-x: hidden;
  border-color: rgba(18,62,68,.14) !important;
  background: linear-gradient(145deg,#fff,var(--ma-porcelain)) !important;
  box-shadow: 0 18px 46px rgba(11,43,48,.11) !important;
}
#category-detail-filter-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg,var(--ma-petrol),var(--ma-copper));
}
.ck-filter-title { color: var(--ma-petrol-deep) !important; }
.ck-filter-title i { color: var(--ma-copper) !important; }
.ck-filter-group { border-bottom-color: rgba(18,62,68,.10) !important; }
.ck-filter-group label,
.ck-filter-group legend { color: var(--ma-petrol-deep) !important; }
.ck-filter-group select,
.ck-filter-group input {
  border-color: rgba(18,62,68,.17) !important;
  background-color: #fff !important;
}
.ck-filter-group select:focus-visible,
.ck-filter-group input:focus-visible {
  outline-color: var(--ma-copper) !important;
  border-color: var(--ma-petrol) !important;
}
.ck-filter-clear {
  color: var(--ma-petrol) !important;
  border-color: rgba(18,62,68,.18) !important;
  background: var(--ma-sage) !important;
}
.ck-filter-clear:hover,
.ck-filter-clear:focus-visible {
  color: #fff !important;
  border-color: var(--ma-petrol) !important;
  background: var(--ma-petrol) !important;
}
.ck-cat-toolbar {
  border: 1px solid rgba(18,62,68,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 30px rgba(11,43,48,.06);
  backdrop-filter: blur(8px);
}

/* Supporting commerce surfaces use the same porcelain/sage rhythm. */
.pdp-buy,
.pdp-info,
.ck-cart-main,
.ck-cart-summary,
.checkout-form,
.checkout-summary {
  border-color: rgba(18,62,68,.12) !important;
  box-shadow: 0 20px 58px rgba(11,43,48,.09) !important;
}
.pdp-related,
.pdp-bundle {
  border-color: rgba(18,62,68,.12) !important;
  background: linear-gradient(145deg,rgba(230,236,233,.70),rgba(255,255,255,.72)) !important;
}

/* PDP colour rhythm: the page alternates depth instead of becoming one long
   white sheet, while the accepted product cards themselves stay clean white. */
.pdp-trust {
  color: #fff !important;
  border-color: rgba(255,255,255,.10) !important;
  background: linear-gradient(120deg,var(--ma-petrol-deep),var(--ma-petrol)) !important;
  box-shadow: 0 22px 54px rgba(11,43,48,.18) !important;
}
.pdp-trust strong { color: #fff !important; }
.pdp-trust span { color: rgba(255,255,255,.70) !important; }
.pdp-trust i { color: var(--ma-gold-bright) !important; }
.pdp-info {
  border-color: rgba(18,62,68,.12) !important;
  background:
    radial-gradient(circle at 92% 8%,rgba(184,149,90,.16),transparent 28%),
    linear-gradient(145deg,#fff,var(--ma-porcelain)) !important;
}

/* Contextual cross-sell — a decision aid, not another generic card grid. */
.pdp-bundle {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid rgba(18,62,68,.18) !important;
  border-radius: 24px !important;
  background: var(--ma-crosssell-panel) !important;
  box-shadow: var(--ma-crosssell-shadow) !important;
}
.pdp-bundle::after {
  content: "";
  position: absolute;
  inset: auto -110px -150px auto;
  width: 310px;
  aspect-ratio: 1;
  border: 1px solid rgba(184,149,90,.28);
  border-radius: 50%;
  pointer-events: none;
}
.ck-bundle-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(240px,.72fr) minmax(0,1.7fr);
  min-height: 420px;
}
.ck-bundle-story {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px,4vw,58px);
  color: #fff;
  background:
    radial-gradient(circle at 15% 10%,rgba(184,149,90,.18),transparent 34%),
    var(--ma-crosssell-bg);
}
.ck-bundle-story .pdp-section-kicker {
  color: #E6D3AC !important;
  letter-spacing: .18em;
}
.ck-bundle-story .pdp-section-title {
  max-width: 10ch;
  color: #fff !important;
  font-size: clamp(30px,3.2vw,48px) !important;
  line-height: 1.02 !important;
}
.ck-bundle-lead {
  max-width: 34ch;
  margin: 18px 0 0;
  color: rgba(255,255,255,.75);
  font-size: 15px;
  line-height: 1.65;
}
.ck-bundle-benefits {
  display: grid;
  gap: 12px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.ck-bundle-benefits li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(255,255,255,.88);
  font-size: 13px;
  line-height: 1.4;
}
.ck-bundle-benefits i {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(230,211,172,.30);
  border-radius: 50%;
  color: #E6D3AC;
  font-size: 10px;
}
.ck-bundle-commerce {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px,3vw,42px);
}
.pdp-bundle-track {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 14px !important;
}
.ck-cross-sell-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--ma-crosssell-border);
  border-radius: 17px;
  background: var(--ma-crosssell-card);
  box-shadow: 0 10px 28px rgba(11,43,48,.08);
  transition: transform 260ms var(--ma-ease), border-color 260ms var(--ma-ease), box-shadow 260ms var(--ma-ease);
}
.ck-cross-sell-card:hover,
.ck-cross-sell-card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(184,149,90,.52);
  box-shadow: 0 16px 36px rgba(11,43,48,.13);
}
.ck-cross-sell-card.is-selected {
  border-color: var(--ma-crosssell-selected);
  box-shadow: 0 0 0 2px rgba(184,149,90,.13),0 16px 36px rgba(11,43,48,.12);
}
.ck-cross-sell-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
.ck-cross-sell-check {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: transparent;
  border: 1px solid rgba(18,62,68,.20);
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  transition: color 200ms ease,background 200ms ease,border-color 200ms ease,transform 200ms ease;
}
.ck-cross-sell-card.is-selected .ck-cross-sell-check {
  color: #fff;
  border-color: var(--ma-copper);
  background: var(--ma-copper);
  transform: scale(1.06);
}
.ck-cross-sell-card input:focus-visible + .ck-cross-sell-check {
  outline: 3px solid rgba(184,149,90,.28);
  outline-offset: 2px;
}
.ck-cross-sell-media {
  display: grid;
  width: 100%;
  aspect-ratio: 1.12;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg,#fff,var(--ma-porcelain));
}
.ck-cross-sell-media img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  transition: transform 320ms var(--ma-ease);
}
.ck-cross-sell-card:hover .ck-cross-sell-media img { transform: scale(1.035); }
.ck-cross-sell-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  padding: 14px 3px 2px;
}
.ck-cross-sell-maker {
  color: var(--ma-copper);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.ck-cross-sell-copy strong {
  display: -webkit-box;
  min-height: 3.9em;
  margin-top: 7px;
  overflow: hidden;
  color: var(--ma-petrol-deep);
  font-size: 13px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.ck-cross-sell-copy small {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--ma-muted);
  font-size: 11px;
}
.ck-cross-sell-prices {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: auto;
  padding-top: 13px;
}
.ck-cross-sell-prices del { color: var(--ma-muted); font-size: 11px; }
.ck-cross-sell-prices b { color: var(--ma-petrol-deep); font-size: 18px; }
.ck-bundle-summary {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 14px 20px;
  margin-top: 18px;
  padding: 17px 18px;
  border: 1px solid rgba(18,62,68,.12);
  border-radius: 15px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
}
.ck-bundle-summary > div { display: grid; gap: 2px; }
.ck-bundle-summary-label { color: var(--ma-muted); font-size: 11px; font-weight: 700; }
.ck-bundle-summary-total { color: var(--ma-petrol-deep); font-size: 24px; line-height: 1; }
.ck-bundle-summary-save { min-height: 1.2em; color: var(--ma-copper); font-size: 11px; font-weight: 800; }
.ck-bundle-add {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 22px;
  cursor: pointer;
  color: #fff;
  border: 1px solid var(--ma-petrol-deep);
  border-radius: 11px;
  background: linear-gradient(135deg,var(--ma-petrol),var(--ma-petrol-deep));
  box-shadow: 0 10px 24px rgba(11,43,48,.19);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  transition: transform 200ms ease,box-shadow 200ms ease,background 200ms ease;
}
.ck-bundle-add:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(11,43,48,.25); }
.ck-bundle-add:disabled { cursor: not-allowed; opacity: .45; }
.ck-bundle-add.is-success { color: #0B2B30; border-color: #86692F; background: linear-gradient(135deg,#DCC596,var(--ma-gold-bright)); }
.ck-bundle-status { grid-column: 1 / -1; min-height: 1.2em; margin: -6px 0 0; color: var(--ma-petrol); font-size: 12px; font-weight: 700; }
.ck-cross-sell-card.is-added { animation: maCrossSellAdded 620ms cubic-bezier(.18,.86,.22,1.18); }
@keyframes maCrossSellAdded {
  0%,100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-5px) scale(1.02); }
}

/* The cart recommendation zone repeats the cross-sell colour cue and keeps
   its white product cards readable against a sage/petrol environment. */
.ck-cart-reco {
  position: relative;
  margin-top: clamp(34px,5vw,72px) !important;
  padding: clamp(24px,4vw,52px) !important;
  overflow: hidden;
  border: 1px solid rgba(18,62,68,.13);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0,rgba(184,149,90,.20),transparent 28%),
    linear-gradient(145deg,var(--ma-sage),#dce8e1);
  box-shadow: 0 24px 64px rgba(11,43,48,.10);
}
.ck-cart-reco-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}
.ck-cart-reco-kicker { color: var(--ma-copper); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.ck-cart-reco-title { margin: 5px 0 0 !important; color: var(--ma-petrol-deep) !important; font-size: clamp(25px,3vw,38px) !important; }
.ck-cart-reco-sub { max-width: 46ch; margin: 0 !important; color: var(--ma-muted) !important; line-height: 1.55; }
.ck-cart-bundle-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 8px;
  color: var(--ma-petrol);
  border: 1px solid rgba(18,62,68,.13);
  border-radius: 999px;
  background: var(--ma-sage);
  font-size: 10px;
  font-weight: 800;
}
.ck-cart-sum-saving { color: var(--ma-petrol) !important; font-weight: 800; }

/* Motion: one calm reveal language, no perpetual decoration. */
.ma-ready [data-ma-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--ma-motion-enter) var(--ma-ease), transform var(--ma-motion-enter) var(--ma-ease);
  transition-delay: var(--ma-delay, 0ms);
}
.ma-ready [data-ma-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  #storefront-home-view .ck-hero-copy { max-width: min(620px, 65vw); }
  #storefront-home-view .ck-finder-bar { background: linear-gradient(180deg, var(--ma-petrol) 0 6px, transparent 6px), linear-gradient(135deg, #fff, var(--ma-porcelain)) !important; }
  .ck-bundle-shell { grid-template-columns: 1fr; }
  .ck-bundle-story { padding: 30px; }
  .ck-bundle-story .pdp-section-title { max-width: none; }
}

@media (max-width: 760px) {
  .ck-top-shell { border-top-width: 2px; }
  #storefront-home-view .ck-hero-copy {
    max-width: none;
    margin: 0 14px 54px;
    padding: 20px;
    border-left-width: 2px;
    border-radius: 3px 18px 18px 3px;
    background: linear-gradient(145deg, rgba(17,43,47,.92), rgba(21,48,52,.76));
  }
  #storefront-home-view .ck-hero-headline { font-size: clamp(29px, 8.4vw, 42px) !important; }
  #storefront-home-view .ck-hero-subtext { font-size: 14px !important; }
  #storefront-home-view .ck-finder-section { background: linear-gradient(180deg, transparent 0 22%, var(--ma-warm) 22% 100%) !important; }
  #storefront-home-view .ck-finder-bar { border-radius: 18px !important; }
  .pdp-bundle { border-radius: 18px !important; }
  .ck-bundle-commerce { padding: 18px; }
  .pdp-bundle-track { display: flex !important; grid-template-columns: none !important; gap: 12px !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 5px; }
  .ck-cross-sell-card { min-width: min(78vw,260px); scroll-snap-align: start; }
  .ck-bundle-summary { grid-template-columns: 1fr; }
  .ck-bundle-add { width: 100%; }
  .ck-cart-reco { padding: 24px 16px !important; border-radius: 18px; }
  .ck-cart-reco-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  #storefront-home-view .ck-section-head { align-items: flex-start; gap: 16px; }
  #storefront-home-view .ck-section-title { letter-spacing: -.035em !important; }
  #storefront-home-view .ck-cat-overlay,
  #storefront-home-view .category-card-overlay { padding: 12px !important; }
  #storefront-home-view .ck-cat-title,
  #storefront-home-view .category-card-title { font-size: 13px !important; }
  #storefront-home-view .ck-cat-sub { display: none; }
  #storefront-home-view .brand-campaign-card { border-radius: 14px !important; }
  #storefront-home-view .ck-trust .ck-island-benefit:nth-child(odd) { background: rgba(230,236,233,.48); }
  #storefront-home-view .ck-trust .ck-island-benefit:nth-child(even) { background: #fff; }
  #storefront-home-view .ck-about-banner { border-radius: 16px !important; }
  .ck-ql-dialog { border-radius: 22px 22px 0 0 !important; }
  .ck-ql-media { padding: 0 !important; border-right: 0 !important; }
  .ck-ql-thumbs { min-height: 66px; padding: 8px 10px 10px; }
  .ck-ql-thumb { flex-basis: 48px; width: 48px; height: 48px; }
  .ck-ql-count { bottom: 76px; }
  .ck-ql-scroll { padding: 20px 18px 8px !important; }
  .ck-ql-kicker { margin-bottom: 14px; }
  .ck-ql-assurance { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 16px; }
  .ck-ql-assurance span { padding: 9px 7px; font-size: 9.5px; }
  .ck-ql-buy { padding: 15px 18px calc(18px + env(safe-area-inset-bottom)) !important; }
}

/* HERO MOTION V6 — one deterministic timeline. The picture arrives as a
   cinematic diagonal shutter; the copy drops in as a visible cascade and
   settles physically instead of dissolving in a generic cross-fade. */
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-media-entering .ck-hero-slide-media {
  z-index: 1;
  animation: maHeroShutterInV6 1320ms cubic-bezier(.16,.82,.22,1) both !important;
}
#storefront-home-view .ck-hero-carousel.ma-motion-js[data-dir="ltr"] .ck-hero-slide.is-media-entering .ck-hero-slide-media {
  animation-name: maHeroShutterInLTRV6 !important;
}
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-leaving .ck-hero-slide-media {
  animation: maHeroPushOutV6 1320ms cubic-bezier(.4,0,.2,1) both !important;
}
#storefront-home-view .ck-hero-carousel.ma-motion-js[data-dir="ltr"] .ck-hero-slide.is-leaving .ck-hero-slide-media {
  animation-name: maHeroPushOutLTRV6 !important;
}
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-media-entering .ck-hero-slide-img {
  animation: maHeroCameraSettleV6 5800ms cubic-bezier(.2,.62,.2,1) both !important;
}
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-copy-entering .ck-hero-copy {
  animation: maHeroCopyStageV6 720ms cubic-bezier(.16,.84,.24,1) 120ms both !important;
}
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-copy-entering .ck-hero-eyebrow,
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-copy-entering .ck-hero-headline,
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-copy-entering .ck-hero-subtext,
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-copy-entering .ck-hero-cta {
  animation: maHeroTextFallV6 940ms cubic-bezier(.18,.82,.22,1) both !important;
  will-change: transform, opacity, filter;
}
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-copy-entering .ck-hero-eyebrow { animation-delay: 180ms !important; }
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-copy-entering .ck-hero-headline { animation-delay: 330ms !important; }
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-copy-entering .ck-hero-subtext { animation-delay: 510ms !important; }
#storefront-home-view .ck-hero-carousel.ma-motion-js .ck-hero-slide.is-copy-entering .ck-hero-cta { animation-delay: 680ms !important; }

@keyframes maHeroShutterInV6 {
  0% { clip-path: polygon(100% 0,100% 0,100% 100%,72% 100%,91% 0); opacity: .08; transform: translate3d(100px,0,0) scale(1.10); filter: blur(12px) brightness(.56) saturate(.72); }
  62% { clip-path: polygon(8% 0,100% 0,100% 100%,0 100%,0 18%); opacity: 1; filter: blur(1px) brightness(.96) saturate(.96); }
  84% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%,0 0); transform: translate3d(-7px,0,0) scale(1.012); filter: none; }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%,0 0); opacity: 1; transform: none; filter: none; }
}
@keyframes maHeroShutterInLTRV6 {
  0% { clip-path: polygon(0 0,0 0,28% 100%,0 100%,0 0); opacity: .08; transform: translate3d(-100px,0,0) scale(1.10); filter: blur(12px) brightness(.56) saturate(.72); }
  62% { clip-path: polygon(0 0,92% 0,100% 18%,100% 100%,0 100%); opacity: 1; filter: blur(1px) brightness(.96) saturate(.96); }
  84% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%,0 0); transform: translate3d(7px,0,0) scale(1.012); filter: none; }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%,0 0); opacity: 1; transform: none; filter: none; }
}
@keyframes maHeroPushOutV6 {
  from { opacity: 1; transform: none; filter: none; }
  to { opacity: .10; transform: translate3d(-86px,0,0) scale(1.065); filter: blur(9px) brightness(.58); }
}
@keyframes maHeroPushOutLTRV6 {
  from { opacity: 1; transform: none; filter: none; }
  to { opacity: .10; transform: translate3d(86px,0,0) scale(1.065); filter: blur(9px) brightness(.58); }
}
@keyframes maHeroCameraSettleV6 {
  0% { transform: scale(1.075) translate3d(14px,0,0); }
  18% { transform: scale(1.035) translate3d(-3px,0,0); }
  100% { transform: scale(1.065) translate3d(-13px,0,0); }
}
@keyframes maHeroCopyStageV6 {
  0% { opacity: 0; transform: translate3d(-30px,8px,0) scale(.97); backdrop-filter: blur(2px); }
  75% { opacity: 1; transform: translate3d(4px,0,0) scale(1.006); backdrop-filter: blur(12px); }
  100% { opacity: 1; transform: none; backdrop-filter: blur(12px); }
}
@keyframes maHeroTextFallV6 {
  0% { opacity: 0; transform: translate3d(0,-112px,0) scale(.94); filter: blur(8px); }
  46% { opacity: 1; filter: blur(0); }
  64% { opacity: 1; transform: translate3d(0,13px,0) scale(1.014); filter: none; }
  78% { transform: translate3d(0,-7px,0) scale(.996); }
  90% { transform: translate3d(0,3px,0) scale(1.003); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* reduce-motion opt-out (html.ck-calm) */
  html.ck-calm .ma-ready [data-ma-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.ck-calm #storefront-home-view * { scroll-behavior: auto !important; }
  html.ck-calm #storefront-home-view .ck-hero-carousel:not(.ck-unified-motion) .ck-hero-slide.is-active .ck-hero-slide-media, html.ck-calm #storefront-home-view .ck-hero-carousel:not(.ck-unified-motion) .ck-hero-slide.is-active .ck-hero-slide-img, html.ck-calm #storefront-home-view .ck-hero-carousel:not(.ck-unified-motion) .ck-hero-slide.is-active .ck-hero-copy, html.ck-calm #storefront-home-view .ck-hero-carousel:not(.ck-unified-motion) .ck-hero-slide.is-active .ck-hero-eyebrow, html.ck-calm #storefront-home-view .ck-hero-carousel:not(.ck-unified-motion) .ck-hero-slide.is-active .ck-hero-headline, html.ck-calm #storefront-home-view .ck-hero-carousel:not(.ck-unified-motion) .ck-hero-slide.is-active .ck-hero-subtext, html.ck-calm #storefront-home-view .ck-hero-carousel:not(.ck-unified-motion) .ck-hero-slide.is-active .ck-hero-cta, html.ck-calm .ck-ql-img.is-switching, html.ck-calm .ck-ql.is-open .ck-ql-dialog, html.ck-calm .ck-ql.is-open .ck-ql-kicker, html.ck-calm .ck-ql.is-open .ck-ql-maker, html.ck-calm .ck-ql.is-open .ck-ql-title, html.ck-calm .ck-ql.is-open .ck-ql-compat, html.ck-calm .ck-ql.is-open .ck-ql-desc, html.ck-calm .ck-ql.is-open .ck-ql-assurance { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }


/* ==========================================================================
   STANDARD CYRILLIC LETTERFORMS
   --------------------------------------------------------------------------
   The page is declared lang="bg", so the browser turns on the `locl` (localized
   forms) feature. Manrope's cyrillic subset carries a Bulgarian locl lookup
   (cyrl/BGR) that swaps Д Ж К Л в г д ж з и й for m- and g-shaped alternates,
   so every heading rendered with them - "Популярни категории" among them.

   Inter's cyrillic subset carries no locl feature at all, so the body text has
   only ever had the standard shapes. That left the two families disagreeing
   about what д looks like, sometimes within one block, which is a defect and
   not a Bulgarian typographic opinion.

   Turning `locl` off restores the standard Cyrillic shapes, so headings match
   the body text. Nothing else is affected: Inter's latin subset activates locl
   only for Catalan and Manrope's only for the Turkic languages, neither of
   which lang="bg" reaches. The property inherits, so one rule on html covers
   the whole page, and no other rule in the bundle sets it.
   ========================================================================== */
html { font-feature-settings: "locl" 0; }

/* Quick View on phones (owner, 2026-10-06): the stage was capped at 34vh with
   no height of its own, so the photo took its natural height (the full width)
   and the cap cut its top and bottom. Give the stage a real height and let
   the photo fit inside it. The thumbnail strip starts at the left edge so
   every thumbnail can be scrolled to, and a press on an arrow keeps it
   centred (the site-wide button:active scale removed translateY(-50%)). */
@media (max-width: 860px) {
  .ck-ql-stage { height: 34vh; height: 34dvh; max-height: none; }
  .ck-ql-img { position: absolute; inset: 0; }
  .ck-ql-thumbs { justify-content: flex-start !important; scroll-snap-type: x proximity; }
  .ck-ql-thumb { scroll-snap-align: start; }
}
.ck-ql-gallery-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ck-ql-gallery-btn:active { transform: translateY(-50%) scale(.94); }

/* The card incentive label. Same approved tokens as the rest of the checkout:
   champagne border, gold text on porcelain; no new colour is introduced. */
.ck-card-discount-badge {
  display: inline-flex;
  align-items: center;
  margin-left: .45rem;
  padding: .12rem .42rem;
  border: 1px solid var(--ma-champagne);
  border-radius: 999px;
  color: var(--ma-gold);
  background: var(--ma-porcelain);
  font: 700 .72rem/1 Manrope, Inter, sans-serif;
  letter-spacing: .02em;
  vertical-align: .08em;
}