/* ===== Custom fonts (Magda) ============================================
   Files live in  resources/assets/css/theme_css/fonts/ . Served as WOFF2
   (converted from the uploaded MagdaClean.otf + "MagdaCleanMono Bold.ttf")
   because IIS/web.config only allows woff/woff2/ttf/eot as static files —
   .otf would 404. Regenerate with fontTools if the source fonts change.
   ====================================================================== */
@font-face {
  font-family: 'MagdaClean';
  src: url('fonts/MagdaClean.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MagdaCleanMono';
  src: url('fonts/MagdaCleanMono-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* MagdaClean → base theme text + the top menu (and other general UI text). */
body.themeclass29 {
  font-family: 'MagdaClean', Arial, Helvetica, sans-serif !important;
}
body.themeclass29 .main-nav .nav-item > a,
body.themeclass29 .main-nav .nav-item > a .chevron {
  font-family: 'MagdaClean', Arial, Helvetica, sans-serif !important;
}

/* MagdaCleanMono Bold → mega-menu column titles + every product title on the
   product-detail page (main title + related-product names). */
body.themeclass29 .main-nav .mega-group-title,
body.themeclass29 .main-nav .mega-prod-head-title,
body.themeclass29 #vp-title,
body.themeclass29 .vp-rec-name {
  font-family: 'MagdaClean', Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
}

/* ===== Maison Atelier — warm apothecary theme ===== */
:root {
  --bg: #f4efe6;
  --bg-alt: #ebe3d4;
  --ink: #2a2a24;
  --ink-soft: #5a564b;
  --accent: #9c4a2a;       /* terracotta */
  --accent-deep: #6b2f1a;
  --moss: #3d4a32;         /* forest green */
  --line: #cfc6b3;
  --cream: #faf6ee;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Courier New", "Courier", monospace;
  background: #f4efe6;
  color: #2a2a24;
  line-height: 1.55;
  font-size: 14px;
  letter-spacing: 0.02em;
}

h1, h2, h3, h4 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Inner pages get a cool off-white page wash (home keeps its cream) */
body.inner-page { background: #f6f8f6; }
body.inner-page .page-crumbs,
body.inner-page .page-head,
body.inner-page .filter-bar { background: #f6f8f6; }

/* ---------- Top banner ---------- */
.announce {
  background: #3a3a3a;
  color: #f0ece3;
  text-align: center;
  padding: 8px 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  font-family: 'MagdaClean', Arial, Helvetica, sans-serif !important;
}

/* ---------- Header ---------- */
.site-header {
  background: #ffffff;
  border-bottom: 1px solid #cfc6b3;
  padding: 8px 40px 0;
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 24px;
  align-items: center;
  padding-bottom: 4px;
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-mark {
  font-family: Georgia, serif;
  font-size: 22px;
  letter-spacing: 0.16em;
  color: #6b2f1a;
}

.brand-sub {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: #5a564b;
  margin-top: 4px;
  text-transform: uppercase;
}

.search {
  position: relative;
  max-width: 640px;
  width: 100%;
  justify-self: center;
}

.search input {
  width: 100%;
  border: 1px solid #cfc6b3;
  background: transparent;
  padding: 9px 14px 9px 38px;
  font: inherit;
  font-size: 13px;
  color: #2a2a24;
  border-radius: 2px;
  outline: none;
}

.search input:focus { border-color: #9c4a2a; }

.search::before {
  content: "⌕";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #5a564b;
}

.header-icons {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 13px;
}

.header-icons a {
  padding: 8px;
  border: 1px solid transparent;
  transition: border-color 0.2s;
}

.header-icons a:hover { border-color: #cfc6b3; }

.cart-count {
  margin-left: 4px;
  color: #5a564b;
}

/* ---------- Navigation ---------- */
.main-nav {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 8px 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  border-top: 1px solid #cfc6b3;
}

.main-nav > a,
.nav-item > a {
  padding: 4px 2px;
  font-weight: 700;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
  display: inline-block;
}

.main-nav > a:hover,
.main-nav > a.active,
.nav-item:hover > a,
.nav-item > a.active {
  border-bottom-color: #9c4a2a;
  color: #6b2f1a;
}

/* Hover mega-menu */
.nav-item { position: static; }

.nav-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #ffffff;
  border-top: 1px solid #cfc6b3;
  border-bottom: 1px solid #cfc6b3;
  box-shadow: 0 14px 30px -18px rgba(42, 30, 20, 0.22);
  padding: 36px 40px 44px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  z-index: 30;
}

.nav-item:hover .nav-panel,
.nav-item:focus-within .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s;
}

.nav-panel-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap: 40px;
  letter-spacing: normal;
  text-transform: none;
}

.nav-col h5 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9c4a2a;
  margin-bottom: 14px;
}

.nav-col a {
  display: block;
  font-family: 'MagdaClean', Arial, Helvetica, sans-serif !important;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: #2a2a24;
  padding: 6px 0;
  border-bottom: none;
}

.nav-col a:hover { color: #6b2f1a; }

.nav-col .note {
   font-family: 'MagdaClean', Arial, Helvetica, sans-serif !important;
  font-style: normal;
  font-size: 12px;
  color: #5a564b;
  line-height: 1.6;
}

.nav-feature {
  background: #141210;
  color: #faf6ee;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}

.nav-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(200,120,60,0.18), transparent 55%),
    linear-gradient(135deg, #3d2a1c 0%, #1f1510 100%);
  z-index: 0;
}

.nav-feature > * { position: relative; z-index: 1; }

.nav-feature-kicker {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 6px;
}

.nav-feature-title {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 22px;
}

/* ---------- Hero ---------- */
.hero-home {
  min-height: calc(100vh - 148px);
}

/* ---------- Hero slider (4 hover-driven slides) ---------- */
.hero-slider {
  position: relative;
  min-height: calc(100vh - 148px);
  overflow: hidden;
  color: #faf6ee;
  isolation: isolate;
}

.slide-bgs {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.slide-bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.slide-bg.is-active { opacity: 1; }

.slide-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.slide-bg.is-active .slide-media.is-video-media,
.slide-bg .slide-media {
  /* videos get a gentle zoom while active for subtle motion */
}

.slide-bg.is-video.is-active video.slide-media {
  animation: drift-zoom 16s ease-in-out infinite alternate;
}

@keyframes drift-zoom {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.06) translate(-1.5%, -1%); }
}

/* Slide 1 — "video" style: warm wood + slow drift */
.slide-bg[data-slide="1"] {
  background:
    radial-gradient(circle at 30% 40%, rgba(255,220,170,0.18) 0%, transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(200,120,60,0.22) 0%, transparent 50%),
    linear-gradient(135deg, #3d2a1c 0%, #5a3a22 40%, #7a5030 100%);
}
.slide-bg[data-slide="1"].is-active { animation: drift 14s ease-in-out infinite alternate; }

/* Slide 2 — static "image": deep amber resin */
.slide-bg[data-slide="2"] {
  background:
    radial-gradient(ellipse at 60% 50%, #b56a2c 0%, #6b2f1a 55%, #2a1208 100%),
    linear-gradient(180deg, rgba(0,0,0,0.25), transparent);
}

/* Slide 3 — static "image": cool apothecary shelf (pale) */
.slide-bg[data-slide="3"] {
  background:
    linear-gradient(180deg, rgba(40,40,40,0.35), rgba(20,20,20,0.55)),
    repeating-linear-gradient(90deg, #cfc4b0 0 80px, #b9ad97 80px 160px),
    linear-gradient(180deg, #d9cfb8, #8e8470);
}

/* Slide 4 — "video" style: dark brick + slow drift */
.slide-bg[data-slide="4"] {
  background:
    radial-gradient(circle at 70% 30%, rgba(255,200,150,0.12) 0%, transparent 50%),
    linear-gradient(135deg, #2a1d14 0%, #4a2e1c 50%, #1f140c 100%);
}
.slide-bg[data-slide="4"].is-active { animation: drift 18s ease-in-out infinite alternate-reverse; }

@keyframes drift {
  0%   { background-position: 0% 0%, 0% 0%, 0% 0%; transform: scale(1); }
  100% { background-position: 10% 8%, -6% -4%, 0% 0%; transform: scale(1.04); }
}

.slider-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}

.teasers {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
     padding: 0 40px 0px;
    height: 100%;
}

.teaser {
  padding: 16px 20px;
  cursor: pointer;
  border-left: 1px solid rgba(250, 246, 238, 0.12);
  transition: border-color 0.25s;
  align-items: flex-end;
    display: flex;
}

.teaser:first-child { border-left: none; }

.teaser h3 {
  font-family: 'MagdaClean', Arial, Helvetica, sans-serif !important;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #fff; 
  transition: opacity 0.25s;
  margin-bottom: 10px;
      text-transform: capitalize;
}

/* Always visible on every column — it used to be max-height:0 / opacity:0 and
   only revealed on the hovered (.is-active) column, which meant four of the five
   descriptions were invisible at rest and NONE of them showed on touch, where
   there is no hover to activate a column. Hovering now only brightens it, the
   same way it does the heading. */
.teaser-tag {
  font-size:20px;
  line-height: 1.6;
  color:#fff;
  max-height: none;
 
  overflow: visible;
  transition: opacity 0.25s ease;
  margin: 0 0 6px;
}

.teaser-more {
  display: inline-block;
  font-size: 18px;
  color: #fff;
  border-bottom: 1px solid #faf6ee;
  padding-bottom: 2px;
  margin-top:0px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.teaser.is-active { border-left-color: rgba(250, 246, 238, 0.3); }
.teaser.is-active h3 { opacity: 1; }
/* Hover/focus just brightens the description; it is already on screen. */
.teaser.is-active .teaser-tag {
  opacity: 1;
}
.teaser.is-active .teaser-more {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (max-width: 820px) {
  .teasers { grid-template-columns: 1fr 1fr; padding: 0 20px 28px; }
  .teaser { border-left: none; padding: 12px 14px; }
  .teaser h3 { font-size: 16px; }
}

.hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #faf6ee;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(42,42,36,0.55), rgba(107,47,26,0.45)),
    radial-gradient(circle at 30% 40%, #a86a3e 0%, #4a2d1c 60%, #241510 100%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,230,190,0.08) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,200,150,0.06) 0, transparent 45%);
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 2; padding: 40px 24px; max-width: 720px; }

.hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-bottom: 22px;
  opacity: 0.85;
}

.hero h1 {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.1;
  font-style: italic;
  margin-bottom: 24px;
}

.hero p {
  font-size: 14px;
  max-width: 520px;
  margin: 0 auto 32px;
  opacity: 0.9;
}

.btn {
  display: inline-block;
  padding: 14px 36px;
  border: 1px solid currentColor;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn:hover {
  background: #faf6ee;
  color: #2a2a24;
}

.btn-solid {
  background: #9c4a2a;
  border-color: #9c4a2a;
  color: #faf6ee;
}

.btn-solid:hover {
  background: #6b2f1a;
  border-color: #6b2f1a;
  color: #faf6ee;
}

/* ---------- Section scaffolding ---------- */
.section {
  padding: 80px 40px;
  max-width: 1320px;
  margin: 0 auto;
}

.section-head {
  text-align: center;
  margin-bottom: 48px;
}

.section-head h2 {
  font-size: 34px;
  font-style: italic;
  margin-bottom: 10px;
}

.section-head p {
  color: #5a564b;
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- Product grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
}

.card {
  background: #faf6ee;
  border: 1px solid #cfc6b3;
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -20px rgba(42,30,20,0.35);
}

.card-visual {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
}

.card-visual svg { width: 100%; height: 100%; display: block; }

.card-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-kind {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #5a564b;
}

.card-name {
  font-family: Georgia, serif;
  font-size: 20px;
  font-style: italic;
  color: #6b2f1a;
}

.card-notes {
  color: #5a564b;
  font-size: 12px;
  margin: 6px 0 14px;
}

.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #cfc6b3;
  padding-top: 12px;
  font-size: 12px;
}

.card-price { color: #9c4a2a; letter-spacing: 0.1em; }

.card-link {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #2a2a24;
  border-bottom: 1px solid #2a2a24;
  padding-bottom: 2px;
}

/* ---------- Split feature ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #ebe3d4;
}

.split > div {
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split-visual {
  min-height: 480px;
  background:
    linear-gradient(135deg, rgba(107,47,26,0.15), transparent),
    repeating-linear-gradient(45deg, #d9c9ad 0 14px, #cfbb9a 14px 28px);
  position: relative;
}

.split-visual::after {
  content: "";
  position: absolute;
  inset: 20%;
  border: 1px solid rgba(42,42,36,0.2);
}

.split h2 {
  font-size: 32px;
  font-style: italic;
  margin-bottom: 20px;
}

.split p {
  color: #5a564b;
  margin-bottom: 24px;
  max-width: 420px;
}

/* ---------- Filter bar (collection) ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  padding: 28px 16px;
  border-bottom: 1px solid #cfc6b3;
  background: #ebe3d4;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.chip {
  padding: 8px 18px;
  border: 1px solid #cfc6b3;
  background: #faf6ee;
  cursor: pointer;
  transition: all 0.2s;
  color: #2a2a24;
}

.chip:hover,
.chip.active {
  border-color: #9c4a2a;
  color: #6b2f1a;
  background: transparent;
}

/* ---------- Collection header ---------- */
.page-head {
  text-align: center;
  padding: 72px 24px 40px;
  background: #ebe3d4;
  border-bottom: 1px solid #cfc6b3;
}

.page-head .crumbs {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #5a564b;
  margin-bottom: 14px;
}

.page-head h1 {
  font-size: 46px;
  font-style: italic;
  margin-bottom: 14px;
}

.page-head p {
  max-width: 560px;
  margin: 0 auto;
  color: #5a564b;
}

/* ---------- Footer (light, link-list style) ---------- */
.site-footer {
  background: #faf6ee;
  color: #2a2a24;
  padding: 56px 40px 0;
  border-top: 1px solid #cfc6b3;
  margin-top: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 2fr;
  gap: 40px;
  max-width: 1320px;
  margin: 0 auto 48px;
}

.footer-col h4 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #9c4a2a;
  margin-bottom: 16px;
  letter-spacing: 0;
  text-transform: none;
}

.footer-col a {
  display: block;
  font-size: 13px;
  padding: 4px 0;
  color: #2a2a24;
  transition: color 0.15s;
}

.footer-col a:hover { color: #9c4a2a; }

.newsletter p {
  font-size: 12px;
  line-height: 1.6;
  color: #5a564b;
  margin-bottom: 18px;
  max-width: 520px;
}

.newsletter .policy-link {
  display: inline;
  padding: 0;
  color: #2a2a24;
  text-decoration: underline;
}

.newsletter form {
  display: block;
  margin-bottom: 10px;
}

.newsletter input {
  width: 100%;
  max-width: 520px;
  background: #fff;
  border: 1px solid #cfc6b3;
  color: #2a2a24;
  font: inherit;
  font-size: 13px;
  padding: 14px 16px;
  outline: none;
  border-radius: 0;
}

.newsletter input::placeholder { color: #b8ad97; }

.newsletter input:focus { border-color: #9c4a2a; }

.newsletter button {
  background: none;
  border: none;
  color: #2a2a24;
  font: inherit;
  font-size: 13px;
  padding: 4px 0;
  margin-top: 6px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.newsletter button:hover { color: #9c4a2a; }

.footer-copy {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 0 32px;
  font-size: 13px;
  font-weight: 700;
  color: #2a2a24;
}

.footer-bottom {
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 0;
  border-top: 1px solid #cfc6b3;
  font-size: 13px;
  font-weight: 700;
  color: #2a2a24;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .header-row { grid-template-columns: 1fr auto; }
  .search { grid-column: 1 / -1; order: 3; }
  .main-nav { flex-wrap: wrap; gap: 18px; }
  .split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; gap: 10px; }
  .section { padding: 56px 20px; }
  .split > div { padding: 48px 28px; }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 34px; }
}
/* ===== Classic Collection — light page, dark flat-lay tiles ===== */

/* Breadcrumbs — black ink on cream */
.page-crumbs {
  background: #faf6ee;
  border-bottom: 1px solid #cfc6b3;
  padding: 18px 0;
}
.crumbs-inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 00px;
  font-size: 13px;
  color: #2a2a24;
}
.crumbs-inner a { color: #2a2a24; }
.crumbs-inner a:hover { color: #9c4a2a; }
.crumbs-inner span { color: #9c4a2a; font-weight: 700; }
/* Product-category page: breadcrumb trail (left) + item count (right), one row. */
.crumbs-inner--rowcount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.crumbs-inner--rowcount .crumbs-trail { color: #2a2a24; font-weight: 400; }
.crumbs-inner .crumbs-count {
  color: #5a564b;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Page intro — bold sans-serif heading like the reference catalog */
.classic-head {
  padding: 18px 0px 24px;
  text-align: left;
  max-width: 1170px;
  margin: 0 auto;
}
.classic-head h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2a2a24;
  margin-bottom: 0;
}
.classic-head p { display: none; }

/* Flatlay list — stacked tiles with gutters on both sides */
.classic-list {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.flatlay {
  display: block;
  position: relative;
  overflow: hidden;
  background: #141210;
  aspect-ratio: 1600 / 500;
  width: 100%;
  border: none;
  outline: none;
  text-decoration: none;
}

.flatlay + .flatlay { margin-top: 2px; }

.flatlay svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.9s cubic-bezier(.2,.6,.2,1), filter 0.5s;
}

.flatlay:hover svg {
  transform: scale(1.015);
  filter: brightness(1.06);
}

/* Pagination bar (collection / refills). Scoped under .lelaboTheme and forced
   transparent to override Materialize's global nav{background:#ee6e73} bleed. */
.lelaboTheme .classic-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 1170px;
  height: auto;
  line-height: normal;
  margin: 36px auto 8px;
  padding: 0 24px;
  background: transparent !important;
  box-shadow: none !important;
}
.lelaboTheme .classic-pagination .pg-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2a2a24;
  text-decoration: none;
  border: 1px solid rgba(42, 42, 36, 0.22);
  background: transparent;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.lelaboTheme .classic-pagination a.pg-link,
.lelaboTheme .classic-pagination a.pg-link:link,
.lelaboTheme .classic-pagination a.pg-link:visited {
  color: #2a2a24;
}
.lelaboTheme .classic-pagination a.pg-link:hover {
  background: #2a2a24;
  color: #faf6ee;
  border-color: #2a2a24;
}
.lelaboTheme .classic-pagination .pg-active {
  background: #8a6a42;
  color: #faf6ee;
  border-color: #8a6a42;
  cursor: default;
}
.lelaboTheme .classic-pagination .pg-disabled {
  color: #2a2a24;
  opacity: 0.35;
  cursor: not-allowed;
}

/* Closing monogram — muted ink on cream */
.classic-end {
  padding: 56px 24px 80px;
  text-align: center;
}
.monogram {
  display: inline-block;
  width: 64px;
  height: 64px;
  line-height: 64px;
  border: 1px solid #cfc6b3;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 14px;
  letter-spacing: 0.3em;
  color: #5a564b;
}

@media (max-width: 820px) {
  .classic-head h1 { font-size: 18px; letter-spacing: 0.18em; }
  .crumbs-inner { padding: 0 20px; }
}
/* ===== Product Detail Page (PDP) ===== */

.pdp {
  max-width: 1170px;
  margin: 0 auto;
  padding: 40px 0 60px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 60px;
  align-items: start;
}

/* ---------- Visual column ---------- */
.pdp-visual-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #141210;
  overflow: hidden;
}
.pdp-visual-frame svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.pdp-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.pdp-thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid #cfc6b3;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s;
  overflow: hidden;
}
.pdp-thumb svg { width: 100%; height: 100%; display: block; }
.pdp-thumb.is-active { border-color: #9c4a2a; }
.pdp-thumb:hover { border-color: #9c4a2a; }

/* ---------- Info column ---------- */
.pdp-info {
  padding: 8px 0 0;
}

.pdp-kicker {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #5a564b;
  margin-bottom: 14px;
}

.pdp-name {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 44px;
  color: #6b2f1a;
  line-height: 1.05;
  margin-bottom: 18px;
}

.pdp-tagline {
  font-size: 14px;
  line-height: 1.65;
  color: #2a2a24;
  max-width: 460px;
  margin-bottom: 24px;
}

.pdp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #5a564b;
  padding: 14px 0;
  border-top: 1px solid #cfc6b3;
  border-bottom: 1px solid #cfc6b3;
  margin-bottom: 28px;
}

/* Size selector */
.pdp-size {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.pdp-size-opt {
  flex: 1;
  padding: 14px 10px;
  background: transparent;
  border: 1px solid #cfc6b3;
  cursor: pointer;
  font: inherit;
  color: #2a2a24;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  letter-spacing: 0.08em;
  font-size: 13px;
  transition: border-color 0.2s, background 0.2s;
}
.pdp-size-opt small {
  font-size: 11px;
  color: #5a564b;
  letter-spacing: 0.12em;
}
.pdp-size-opt:hover { border-color: #9c4a2a; }
.pdp-size-opt.is-active {
  border-color: #9c4a2a;
  background: #faf6ee;
}
.pdp-size-opt.is-active small { color: #6b2f1a; }

.pdp-price {
  font-family: Georgia, serif;
  font-size: 26px;
  color: #9c4a2a;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}

/* Quantity + add-to-bag row */
.pdp-qty-cart {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}

.pdp-qty {
  display: flex;
  align-items: stretch;
  border: 1px solid #cfc6b3;
}
.pdp-qty button {
  width: 42px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #2a2a24;
}
.pdp-qty button:hover { color: #9c4a2a; }
.pdp-qty input {
  width: 42px;
  border: none;
  background: transparent;
  text-align: center;
  font: inherit;
  font-size: 14px;
  color: #2a2a24;
}

.btn.pdp-addbag {
  flex: 1;
  padding: 14px 24px;
  letter-spacing: 0.24em;
  font-size: 11px;
}

.pdp-quick {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  font-size: 12px;
  color: #5a564b;
}
.pdp-quick li {
  padding: 4px 0 4px 18px;
  position: relative;
}
.pdp-quick li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: #9c4a2a;
}

.pdp-find a {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2a2a24;
  border-bottom: 1px solid #2a2a24;
  padding-bottom: 2px;
}
.pdp-find a:hover {
  color: #9c4a2a;
  border-color: #9c4a2a;
}

/* ---------- Tabs ---------- */
.pdp-tabs {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 0 80px;
}

.pdp-tabbar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #cfc6b3;
}

.pdp-tab {
  padding: 18px 28px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #5a564b;
  transition: color 0.2s, border-color 0.2s;
}
.pdp-tab:hover { color: #2a2a24; }
.pdp-tab.is-active {
  color: #6b2f1a;
  border-bottom-color: #9c4a2a;
}

.pdp-panel {
  display: none;
  padding: 36px 0 0;
  max-width: 780px;
}
.pdp-panel.is-active { display: block; }

.pdp-panel p {
  font-size: 14px;
  line-height: 1.75;
  color: #2a2a24;
  margin-bottom: 16px;
}

.pdp-notes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.pdp-notes-col h4 {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: #6b2f1a;
  margin-bottom: 8px;
  font-weight: 400;
}
.pdp-notes-col p {
  font-size: 13px;
  color: #5a564b;
  line-height: 1.6;
}

/* ---------- Related ---------- */
.pdp-related {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 0 80px;
}
.pdp-related h2 {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 28px;
  color: #2a2a24;
  margin-bottom: 28px;
  text-align: center;
}
.pdp-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pdp-card {
  display: block;
  border: 1px solid #cfc6b3;
  background: #faf6ee;
  overflow: hidden;
  transition: transform 0.25s, border-color 0.25s;
  text-decoration: none;
  color: inherit;
}
.pdp-card:hover {
  transform: translateY(-3px);
  border-color: #9c4a2a;
}
.pdp-card-art {
  aspect-ratio: 300 / 380;
  overflow: hidden;
}
.pdp-card-art svg { width: 100%; height: 100%; display: block; }
.pdp-card-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pdp-card-kind {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5a564b;
}
.pdp-card-name {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 20px;
  color: #6b2f1a;
}
.pdp-card-price {
  font-size: 12px;
  color: #9c4a2a;
  letter-spacing: 0.08em;
  margin-top: 4px;
}



.flatlay { position: relative; margin-bottom: 50px; }
  .flatlay + .flatlay { margin-top: 0; }
  .flatlay:last-child { margin-bottom: 0; }
  .flatlay .flatlay-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.9s cubic-bezier(.2,.6,.2,1);
  }
  .flatlay:hover .flatlay-img { transform: scale(1.02); }
  .flatlay .flatlay-veil {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    transition: background 0.4s;
    z-index: 1;
  }
  .flatlay:hover .flatlay-veil { background: rgba(0, 0, 0, 0.12); }
  .flatlay .flatlay-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.22em;
    color: #f4ecd8;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    white-space: nowrap;
  }



  .collection-note {
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #5a564b;
    padding: 18px 16px 0;
  }
  .tag {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid #cfc6b3;
    color: #5a564b;
    margin-right: 6px;
  }
  .tag.new { color: #6b2f1a; border-color: #9c4a2a; }




 /* PDP page-scoped layout — does not affect the shared stylesheet */
  .pdp-page-head {
    max-width: 1170px;
    margin: 0 auto;
    padding: 22px 40px 18px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
  }
  .pdp-page-head .pdp-page-num {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #2a2a24;
  }
  .pdp-page-head .pdp-page-kind {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #5a564b;
  }

  .pdp-hero {
    width: 100%;
    margin: 0 0 28px;
    padding: 0;
  }
  .pdp-flatlay {
    position: relative;
    width: 100%;
    aspect-ratio: 1600 / 640;
    overflow: hidden;
    background: #141210;
  }
  .pdp-flatlay svg,
  .pdp-flatlay-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
  }
  .pdp-flatlay-name {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    pointer-events: none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #f4ecd8;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  }

  /* Info block centered under the hero */
  .pdp-info-center {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px 24px 48px;
    text-align: center;
  }
  .pdp-info-center .pdp-kicker { margin-bottom: 10px; }
  .pdp-info-center .pdp-name {
    font-size: 40px;
    margin-bottom: 14px;
  }
  .pdp-info-center .pdp-tagline {
    margin: 0 auto 22px;
  }
  .pdp-info-center .pdp-meta { justify-content: center; }
  .pdp-info-center .pdp-size { justify-content: center; max-width: 440px; margin: 0 auto 16px; }
  .pdp-info-center .pdp-qty-cart { justify-content: center; max-width: 440px; margin: 0 auto 22px; }
  .pdp-info-center .pdp-quick {
    display: inline-flex;
    flex-direction: column;
    text-align: left;
    margin: 0 auto 18px;
  }

  @media (max-width: 820px) {
    .pdp-page-head { padding: 16px 20px 12px; flex-direction: column; gap: 6px; }
    .pdp-hero { padding: 0; }
    .pdp-flatlay { aspect-ratio: 1600 / 820; }
    .pdp-flatlay-name { font-size: 18px; letter-spacing: 0.18em; }
    .pdp-info-center .pdp-name { font-size: 30px; }
  }

  /* Match reference: breadcrumb tail stays dark ink (not terracotta) */
  .page-crumbs .crumbs-inner span {
    color: #2a2a24;
    font-weight: 400;
  }

  /* Collapse space between crumb and title so they read as one block */
  .page-crumbs {
    border-bottom: none;
    padding: 14px 0 0;
  }

  .pdp-page-head {
    padding: 4px 40px 16px;
    align-items: center;
  }
  .pdp-page-head .pdp-page-num {
    font-size: 20px;
    letter-spacing: 0.14em;
  }

  /* "Type" filter — clickable toggle with a dropdown panel */
  .pdp-type-filter {
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #2a2a24;
  }
  .pdp-type-toggle {
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    color: #2a2a24;
    display: inline-flex;
    align-items: center;
    gap: 16px;
  }
  .pdp-type-toggle .pdp-type-label { letter-spacing: 0; }
  .pdp-type-toggle .pdp-type-sign {
    display: inline-block;
    width: 18px;
    text-align: center;
    font-size: 18px;
    line-height: 1;
    color: #2a2a24;
  }

  .pdp-type-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 220px;
    background: #ffffff;
    border: 1px solid #cfc6b3;
    box-shadow: 0 10px 28px -14px rgba(42, 30, 20, 0.22);
    padding: 14px 18px 18px;
    z-index: 25;
    display: none;
  }
  .pdp-type-filter.is-open .pdp-type-panel { display: block; }
  .pdp-type-filter.is-open .pdp-type-sign::before { content: "×"; }
  .pdp-type-filter.is-open .pdp-type-sign { font-size: 20px; }

  .pdp-type-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #cfc6b3;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #2a2a24;
  }
  .pdp-type-panel-close {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #2a2a24;
  }
  .pdp-type-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .pdp-type-panel li + li { margin-top: 8px; }
  .pdp-type-opt {
    background: transparent;
    border: none;
    padding: 6px 0;
    font: inherit;
    cursor: pointer;
    color: #2a2a24;
    width: 100%;
    text-align: left;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
  }
  .pdp-type-opt:hover { 
	color: #9c4a2a;
	}
  .pdp-type-opt.is-active { 
	color: #9c4a2a; 
	font-weight: 700;
	}  
  .pdp-variants {
    max-width: 1260px;
    margin: 0 auto;
    padding: 36px 0px 60px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .pdp-variant {
    background: #ffffff;
    border: 1px solid #cfc6b3;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, transform 0.3s;
    text-decoration: none;
    color: inherit;
  }
  .pdp-variant:hover {
    border-color: #9c4a2a;
    transform: translateY(-2px);
  }
  .pdp-variant-art {
    background: #e8e8e4;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    padding: 18px 18px 22px;
  }
  .pdp-variant-art svg { height: 100%; width: auto; display: block; }
  .pdp-variant-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .pdp-variant-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .pdp-variant-name {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #2a2a24;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .pdp-variant-size {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    color: #2a2a24;
  }
  .pdp-variant-kind {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    color: #5a564b;
    margin-bottom: 10px;
  }
  .pdp-variant-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid #cfc6b3;
    padding-top: 10px;
    margin-top: 6px;
  }
  .pdp-variant-cta {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #2a2a24;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .pdp-variant-price {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #2a2a24;
    text-align: right;
  }
  .pdp-variant-price small {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: #5a564b;
    margin-top: 2px;
  }

  /* ===== Product card (mockup style) — shared by the category grid and the
     product-detail "Recommendations" strip via _product_card.blade.php ===== */
  .pdp-card { position: relative; }
  .pdp-card .pdp-card-greenbar {
    position: relative;
    height:32px;
    margin: 0px 1px 20px 0px;
    background: var(--bar-color, #2f7d32);
    border-radius: 0px 10px 10px 0px;
  }
  .pdp-card .pdp-card-greenbar__logo {
    position: absolute;
    top: 50%;
    inset-inline-end: -2px;
    transform: translateY(-50%);
        width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--bar-color, #2f7d32);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pdp-card .pdp-card-greenbar__logo img {
    width:42px;
    height:42px;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }
  .pdp-card .pdp-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid #e2ddd0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #2a2a24;
  }
  .pdp-card .pdp-card-name {
    border-top: none;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0 16px 12px;
    font-family: 'MagdaClean', Arial, Helvetica, sans-serif !important;
    font-size: 18px;
    font-style: normal;
  }
  .pdp-card .pdp-card-desc {
    display: block;
    color: #8a8479;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pdp-card .pdp-card-cart { font-weight: 600; }
  .pdp-card .pdp-card-price { font-weight: 700; white-space: nowrap; }
  .pdp-variants-clear {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: right;
    font-size: 12px;
    color: #2a2a24;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .pdp-variants-clear a { color: inherit; }






.page-crumbs .crumbs-inner span { 
	color:#2a2a24; 
	font-weight:400;
	}
.page-crumbs {
	border-bottom:none; 
	padding:12px 0px 10px;
	}
.vp-pdp {
       max-width:1400px;
    margin: 0 auto;
    padding:16px 20px 64px;
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 48px;
    align-items: start;
  }
  
  .vp-gallery {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 14px;
  }
  .vp-thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .vp-thumb {
    width: 84px;
    aspect-ratio: 1 / 1;
    background: #ededed;
    border: 1px solid #cfc6b3;
    padding: 10px;
    cursor: pointer;
    transition: border-color 0.2s;
    display: block;
  }
  .vp-thumb svg, .vp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .vp-thumb.is-active, .vp-thumb:hover { border-color: #9c4a2a; }

  .vp-main {
    background: #ededed;
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .vp-main img {
    max-width: 80%;
    max-height: 90%;
    object-fit: contain;
    display: block;
  }

  .vp-personalize-hint {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    color: #5a564b;
    padding: 12px 0 0 98px;
  }
  .vp-personalize-hint a {
    color: #2a2a24;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Right column: info panel */
  .vp-info {
    padding-top: 6px;
  }
  .vp-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 8px;
  }
  .vp-title h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2a2a24;
    margin: 0 0 4px;
    line-height: 1.1;
  }
  .vp-subtitle {
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    color: #2a2a24;
  }
  .vp-price {
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
  }
  .vp-price-main {
    font-size: 22px;
    font-weight: 400;
    color: #2a2a24;
    line-height: 1;
  }
  .vp-price-meta {
    font-size: 11px;
    color: #5a564b;
    margin-top: 6px;
    line-height: 1.4;
  }

  /* Form rows */
  .vp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 2px;
    border-top: 1px solid #cfc6b3;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    gap: 12px;
  }
  .vp-row-label { color: #2a2a24; }
  .vp-row-value {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: #2a2a24;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  /* Custom dropdown (replaces <select>) */
  .vp-select { position: relative; }
  .vp-select-toggle {
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #2a2a24;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    outline: none;
  }
  .vp-select-chev {
    font-size: 12px;
    color: #5a564b;
    transition: transform 0.15s;
  }
  .vp-select.is-open .vp-select-chev { transform: rotate(180deg); }

  .vp-select-panel {
    position: absolute;
    right: 100%;
    top: -18px;
    margin-right: 14px;
    min-width: 260px;
    background: #ffffff;
    border: 1px solid #cfc6b3;
    box-shadow: 0 14px 32px -16px rgba(42, 30, 20, 0.25);
    padding: 14px 18px 14px 22px;
    z-index: 30;
    display: none;
  }
  .vp-select.is-open .vp-select-panel { display: block; }
  .vp-select-panel--short { min-width: 160px; }

  .vp-select-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #2a2a24;
  }
  .vp-select-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .vp-select-panel li { padding: 4px 0; }
  .vp-select-panel li button {
    background: transparent;
    border: none;
    padding: 4px 0;
    font: inherit;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    color: #2a2a24;
    cursor: pointer;
    text-align: left;
    width: 100%;
  }
  .vp-select-panel li button:hover { color: #9c4a2a; }
  .vp-select-panel li button.is-active { color: #9c4a2a; }
  .vp-row-input {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: flex-end;
  }
  .vp-row-input input {
    background: transparent;
    border: none;
    font: inherit;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    color: #5a564b;
    outline: none;
    text-align: right;
    width: 100%;
    padding: 0 6px 0 0;
  }
  .vp-row-input input::placeholder { color: #5a564b; font-style: italic; }
  .vp-row-input .vp-counter {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    color: #5a564b;
    min-width: 22px;
    text-align: right;
  }

  .vp-notify {
    display: block;
    width: 100%;
    background: #3a3a3a;
    color: #ffffff;
    border: none;
    padding: 18px 24px;
    margin-top: 24px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
  }
  .vp-notify:hover { background: #1f1f1f; }

  .vp-desc {
    margin-top: 28px;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    line-height: 1.75;
    color: #2a2a24;
  }
  .vp-desc .vp-more {
    display: inline-block;
    margin-top: 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #2a2a24;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .vp-sample-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    margin-top: 14px;
    border-top: 1px solid #cfc6b3;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #2a2a24;
  }
  .vp-sample-row a {
    color: #2a2a24;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .vp-help-row {
    padding: 10px 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #2a2a24;
  }
  .vp-help-row a { color: #2a2a24; text-decoration: underline; text-underline-offset: 3px; }
  .vp-help-row .vp-help-pipe { margin: 0 8px; color: #5a564b; }

  @media (max-width: 960px) {
    .vp-pdp { grid-template-columns: 1fr; gap: 28px; padding: 12px 20px 48px; }
    .vp-gallery { grid-template-columns: 64px 1fr; }
    .vp-thumb { width: 64px; padding: 6px; }
    .vp-personalize-hint { padding-left: 78px; }
  }
  @media (max-width: 520px) {
    .vp-gallery { grid-template-columns: 1fr; }
    .vp-thumbs { flex-direction: row; order: 2; }
    .vp-thumb { flex: 1; }
    .vp-personalize-hint { padding-left: 0; }
  }

  /* Recommendations section */
  .vp-recs {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 40px 80px;
    border-top: 1px solid #cfc6b3;
  }
  .vp-recs-title {
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    color: #2a2a24;
    margin: 0 0 22px;
  }
  .vp-recs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
  .vp-rec {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #cfc6b3;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.25s;
  }
  .vp-rec:hover { border-color: #9c4a2a; transform: translateY(-2px); }
  .vp-rec-art {
    background: #ededed;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .vp-rec-art img {
    max-width: 60%;
    max-height: 92%;
    object-fit: contain;
    display: block;
  }
  .vp-rec-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .vp-rec-name {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #2a2a24;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .vp-rec-size,
  .vp-rec-scent {
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    line-height: 1.45;
  }
  .vp-rec-size { color: #2a2a24; }
  .vp-rec-scent { color: #2a2a24; margin-bottom: 14px; }
  .vp-rec-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid #cfc6b3;
    padding-top: 12px;
  }
  .vp-rec-cta {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #2a2a24;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .vp-rec-price {
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #2a2a24;
  }
  .vp-rec-price small {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #5a564b;
    margin-top: 2px;
  }





  .welcome {
    position: fixed;
    inset: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
  }

  .welcome-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .welcome-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: brightness(0.85) saturate(0.9);
  }
  .welcome-veil {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.65) 75%),
      linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.55));
  }

  .welcome-card {
    position: relative;
    z-index: 2;
    max-width: 520px;
    width: 100%;
    color: #f4ecd8;
  }

  .welcome-brand {
    display: inline-block;
    margin: 0 auto 80px;
    line-height: 1.1;
  }
  .welcome-brand .mark {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    letter-spacing: 0.18em;
    color: #f4ecd8;
    display: block;
  }
  .welcome-brand .sub {
    margin-top: 6px;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
    letter-spacing: 0.32em;
    color: #b6ad97;
    text-transform: uppercase;
  }

  .welcome-title {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #f4ecd8;
    margin: 0 0 20px;
  }

  .welcome-field {
    background: rgba(255, 255, 255, 0.95);
    color: #2a2a24;
    display: flex;
    align-items: center;
    padding: 14px 18px;
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, 0.4);
  }
  .welcome-field-label {
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    color: #2a2a24;
    margin-right: 16px;
    white-space: nowrap;
  }
  .welcome-field select {
    flex: 1;
    background: transparent;
    border: none;
    font: inherit;
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    color: #6f6850;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 22px;
    background-image: linear-gradient(45deg, transparent 50%, #2a2a24 50%),
                      linear-gradient(135deg, #2a2a24 50%, transparent 50%);
    background-position: right 8px top 50%, right 4px top 50%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
  }
  .welcome-field select:has(option:checked:not([value=""])) { color: #2a2a24; }

  .welcome-enter {
    display: block;
    width: 100%;
    background: rgba(50, 48, 44, 0.92);
    color: #f4ecd8;
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 18px 24px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
  }
  .welcome-enter:hover { background: rgba(80, 72, 60, 0.95); }
  .welcome-enter[disabled] { opacity: 0.55; cursor: not-allowed; }

  .welcome-acc {
    margin-top: 22px;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    color: #b6ad97;
  }
  .welcome-acc a {
    color: #b6ad97;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .welcome-acc a:hover { color: #f4ecd8; }









.co-header {
    border-bottom: 1px solid #cfc6b3;
    background: #faf6ee;
    padding: 16px 32px;
    position: relative;
    text-align: center;
  }
  .co-back {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    font-family: inherit;
    font-size: 13px;
    color: #2a2a24;
    text-decoration: none;
  }
  .co-back:hover { text-decoration: underline; text-underline-offset: 3px; }
  .co-mark {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #2a2a24;
    text-transform: uppercase;
  }
  .co-tagline {
    margin-top: 4px;
    font-size: 9px;
    letter-spacing: 0.36em;
    color: #5a564b;
    text-transform: uppercase;
  }

  /* Two-column layout */
  .co-wrap {
    max-width: 1024px;
    margin: 0 auto;
    padding: 40px 32px 80px;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
  .co-col {
    background:#fff;
    padding:32px 36px;
    border:1px solid #ccc;
  }

  /* Section heading row */
  .co-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #ccc !important;
    padding-bottom: 16px;
    margin-bottom: 4px;
  }
  .co-section-head h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2a2a24;
    margin: 0;
  }
  .co-required {
    font-family: inherit;
    font-size: 12px;
    color: #5a564b;
  }
  .co-section { padding: 36px 0; border-top: 1px solid #ccc !important; }
  .co-section:first-child { border-top: none; padding-top: 0; }

  /* Form rows */
  .co-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 0;
    border-top: 1px solid #ccc !important;
  }
  .co-row:first-of-type { border-top: 1px solid #ccc !important; }
  .co-row label {
    font-family: inherit;
    font-size: 13px;
    color: #2a2a24;
    flex: 0 0 200px;
  }
  .co-row .req {
    color: #2a2a24;
    margin-left: 1px;
  }
  .co-row input[type="text"],
  .co-row input[type="email"],
  .co-row input[type="tel"],
  .co-row select {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font: inherit;
    font-family: inherit;
    font-size: 14px;
    color: #2a2a24;
    padding: 4px 0;
    border-radius: 0;
  }
  .co-row input::placeholder { color: #5a564b; }
  .co-row select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
  }


.co-row input[type="text"], .co-row input[type="email"], .co-row input[type="tel"]{    
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding-left: 10px !important;
	}



  /* Checkboxes */
  .co-check {
    
    gap: 14px;
    align-items: flex-start;
    padding: 14px 0;
    border-top:1px solid #ccc !important;
  }
  
  .co-check label {
 
    height: auto;
}
  
  .co-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border:1px solid #ccc !important;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
    border-radius: 0;
    position: relative;
  }
  .co-check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: #2a2a24;
  }
  .co-check label {
    font-size: 13px;
    color: #2a2a24;
    line-height: 1.55;
    cursor: pointer;
  }
  .co-check small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #5a564b;
    line-height: 1.55;
  }

  /* Accordion rows (visual only — collapsed) */
  .co-acc {
    border-top: 1px solid #ccc !important;
  }
  .co-acc-row {
    padding: 22px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2a2a24;
    border-bottom: 1px solid #ccc !important;
  }
  .co-acc-row:last-of-type { border-bottom: none; }

  /* ---------- Step flow ---------- */
  .co-page-title {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #2a2a24;
    margin: 0 0 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ccc !important;
  }

  .co-step {
    border-bottom:1px solid #ccc !important;
  }
  .co-step:last-of-type { border-bottom: none; }

  .co-step-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 22px 0 18px;
  }
  .co-step-head h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2a2a24;
    margin: 0;
  }
  .co-edit {
    font-size: 12px;
    color: #2a2a24;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    padding: 0;
  }

  .co-step-body, .co-step-summary, .co-step .co-cta { display: none; }

  .co-step.is-active .co-step-body { display: block; }
  .co-step.is-active .co-cta { display: block; }
  .co-step.is-done .co-step-summary { display: block; }
  .co-step.is-done .co-edit { display: inline; }
  .co-step:not(.is-done) .co-edit { display: none; }
  .co-step.is-pending .co-step-head { padding-bottom: 22px; }

  .co-step-summary {
    padding: 0 0 22px;
    font-size: 13px;
    line-height: 1.7;
    color: #2a2a24;
    white-space: pre-line;
  }

  /* Delivery / Pick Up two-tab toggle */
  .co-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 4px 0 24px;
  }
  .co-mode-opt {
    background: #ffffff;
    border: 1px solid #ccc !important;
    padding: 18px 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2a2a24;
    cursor: pointer;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .co-mode-opt + .co-mode-opt { border-left: none; }
  .co-mode-opt.is-active {
    background: #9c4a2a;
    color: #ffffff;
    border-color: #9c4a2a;
  }
  .co-mode-icon { font-size: 14px; }

  .co-deliv-label {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2a2a24;
    margin-bottom: 14px;
  }
  .co-deliv-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
  }
  .co-deliv-opt {
    background: #ffffff;
    border:1px solid #ccc !important;
    padding: 16px 20px;
    font-family: inherit;
    font-size: 13px;
    color: #2a2a24;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    border-radius: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .co-deliv-opt:hover { border-color: #9c4a2a; }
  .co-deliv-opt.is-active {
    background: #9c4a2a;
    color: #ffffff;
    border-color: #9c4a2a;
  }
  .co-deliv-price {
    font-family: inherit;
    font-size: 13px;
  }

  /* Payment — Gift Card section */
  .co-pay-section {
    margin: 8px 0 24px;
  }
  .co-pay-section-title {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2a2a24;
    margin: 8px 0 12px;
  }
  .co-pay-input {
    background: #ffffff;
    border: 1px solid #ccc !important;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .co-pay-input label {
    font-family: inherit;
    font-size: 13px;
    color: #5a564b;
    flex: 0 0 auto;
  }
  .co-pay-input input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font: inherit;
    font-family: inherit;
    font-size: 13px;
    color: #2a2a24;
    padding: 4px 0;
  }
  .co-pay-apply {
    display: inline-block;
    margin-top: 12px;
    font-family: inherit;
    font-size: 13px;
    color: #2a2a24;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Payment method options (3 stacked rows with square hollow check) */
  .co-pay-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .co-pay-opt {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border: 1px solid #ccc !important;
    padding: 16px 20px;
    cursor: pointer;
    transition: border-color 0.15s;
  }
  .co-pay-opt:hover { border-color: #9c4a2a; }
  .co-pay-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .co-pay-mark {
    width: 16px;
    height: 16px;
    border: 1px solid #ccc !important;
    flex-shrink: 0;
    position: relative;
    background: transparent;
  }
  .co-pay-opt input[type="radio"]:checked ~ .co-pay-mark::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: #2a2a24;
  }
  .co-pay-name {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2a2a24;
    flex: 1;
  }
  .co-pay-tag {
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    text-transform: lowercase;
    color: #ffffff;
  }
  .co-pay-tag--dark { background: #0a0a0a; }
  .co-pay-tag--blue { background: #0070ba; }

  /* "Send as gift" gift options block */
  .co-gift-box {
    border: 1px solid #ccc !important;
    padding: 22px 24px;
    margin-bottom: 8px;
  }
  .co-gift-box .co-check {
    border-top: none !important;
    padding: 0;
  }
  .co-gift-label {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2a2a24;
    margin: 0 0 6px;
  }
  .co-gift-help {
    font-size: 12px;
    color: #5a564b;
    line-height: 1.55;
  }

  /* Primary CTA */
  .co-cta {
    display: block;
    width: 100%;
    background: #4a4744;
    color: #ffffff;
    border: none;
    padding: 22px 24px;
    margin-top: 24px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
  }
  .co-cta:hover { background: #2a2826; }

  /* ---------- Right column ---------- */
  .co-summary { padding: 32px 32px; }

  .co-items-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #ccc !important;
    padding-bottom: 16px;
    margin-bottom: 20px;
  }
  .co-items-head h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0;
    color: #2a2a24;
  }
  .co-items-head a {
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: #2a2a24;
  }

  .co-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 18px;
    padding-bottom: 24px;
    border-bottom: 1px solid #ccc !important;
    margin-bottom: 24px;
  }
  .co-item-art {
    background: #ECE7DC;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .co-item-art img {
    max-width: 80%;
    max-height: 92%;
    object-fit: contain;
  }
  .co-item-body { font-size: 13px; }
  .co-item-name {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #2a2a24;
    margin-bottom: 4px;
  }
  .co-item-variant {
    font-style: italic;
    font-family: inherit;
    color: #2a2a24;
    margin-bottom: 10px;
    font-size: 12px;
  }
  .co-item dl {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 4px 12px;
    margin: 0;
    font-size: 12px;
  }
  .co-item dt { color: #2a2a24; }
  .co-item dd { margin: 0; color: #2a2a24; }

  .co-totals h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 16px;
    color: #2a2a24;
  }
  .co-totals dl {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr auto;
  }
  .co-totals dt,
  .co-totals dd {
    padding: 12px 0;
    border-top: 1px solid #ccc !important;
    margin: 0;
    font-size: 13px;
    color: #2a2a24;
  }
  .co-totals dt { text-align: left; }
  .co-totals dd { text-align: right; }
  .co-totals .co-grand-dt,
  .co-totals .co-grand-dd {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    letter-spacing: 0.04em;
    border-top: 1px solid #ccc !important;
  }

  /* Need help */
  .co-help {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #ccc !important;
    font-size: 13px;
    color: #2a2a24;
  }
  .co-help h4 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 10px;
  }
  .co-help a {
    text-decoration: underline;
    text-underline-offset: 3px;
    display: block;
    padding: 3px 0;
  }








/* Hero — full-bleed photograph */
.au-hero {
  width: 100%;
  height: 50vh;
  min-height: 360px;
  overflow: hidden;
  background: #1a1a1a;
  border-bottom: 1px solid #cfc6b3;
}
.au-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none;
}

/* Crumb + page title */
.au-titlebar {
  max-width: 1170px;
  margin: 0 auto;
  padding: 28px 40px 0;
}
.au-crumb {
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  color: #2a2a24;
  margin-bottom: 14px;
}
.au-crumb a { color: #2a2a24; text-decoration: none; }
.au-crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

.au-title {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2a2a24;
  margin: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid #cfc6b3;
}

/* Narrow editorial column */
.au-col {
  max-width: 100%;
  margin: 0 auto;
  padding:56px 24px 0px;
}

.au-section-title {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2a2a24;
  margin: 0 0 28px;
}

/* Manifesto — mono, double-spaced, one belief per paragraph */
.au-manifesto {
  font-family: "Courier New", "Courier Prime", "IBM Plex Mono", Courier, monospace;
  font-size: 14px;
  line-height: 1.8;
  color: #2a2a24;
}
.au-manifesto p {
  /* Centre the 64ch measure in whatever container holds it. The manifesto used
     to sit in the narrow .au-col article, where 64ch filled the column and the
     left edge was the column edge. It now renders inside .au-story-title, which
     is full width and text-align:center — with margin-left:0 every paragraph
     pinned to the far left and left half the band empty. */
  margin: 0 auto 22px;
  max-width: 64ch;
}
.au-manifesto p.au-lede { margin-bottom: 30px; }
.au-manifesto p.au-coda { margin-top: 14px; font-style: italic; }

/* Subsection lead-ins — labs / souls / roots */
.au-sub {
  max-width: 1170px;
  margin: 0 auto;
  padding: 56px 40px 0;
}
.au-zz-text h1 { 
    line-height: 30px !important;
}
.llb-pdp .reviews { 
    padding: 2px 0 10px !important;    
	}

.au-sub-head {
  max-width:100%;
  margin: 0 auto 22px;
  padding: 0 24px;
}
.au-sub-head h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: #2a2a24;
}
.au-sub-head p {
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  line-height: 1.7;
  color: #2a2a24;
  margin: 0;
}

.au-figure {
  max-width: 1170px;
  margin: 18px auto 0;
  padding: 0 40px;
}
.au-figure img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none;
  background: #1a1a1a;
}

.au-cta-row {
  max-width: 720px;
  margin: 28px auto 0;
  padding: 0 24px;
  text-align: center;
}
.au-cta {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #2a2a24;
  border: 1px solid #2a2a24;
  padding: 14px 28px;
  text-decoration: none;
  background: transparent;
  transition: background 0.2s, color 0.2s;
}
.au-cta:hover {
  background: #2a2a24;
  color: #faf6ee;
}

/* Craftspeople / Collections — small flat card grid */
.au-grid {
  max-width: 1170px;
  margin: 22px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.au-card {
  display: block;
  background: #ffffff;
  border: 1px solid #cfc6b3;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.25s;
}
.au-card:hover {
  border-color: #2a2a24;
  transform: translateY(-2px);
}
.au-card-art {
  aspect-ratio: 1 / 1;
  background: #1a1a1a;
  overflow: hidden;
}
.au-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none;
}
.au-card-body {
  padding: 14px 16px 18px;
}
.au-card-name {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2a2a24;
  margin-bottom: 4px;
}
.au-card-meta {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  color: #5a564b;
}

/* Roots — closing paragraph + atelier exterior shot */
.au-roots-photo {
  max-width: 1170px;
  margin: 18px auto 0;
  padding: 0 40px;
}
.au-roots-photo img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none;
  background: #1a1a1a;
}

/* Bottom rule before footer */
.au-tail {
  max-width: 1170px;
  margin: 56px auto 0;
  padding: 0 40px;
  border-top: 1px solid #cfc6b3;
}

@media (max-width: 960px) {
  .au-grid { grid-template-columns: repeat(2, 1fr); }
  .au-titlebar { padding: 20px 20px 0; }
  .au-sub, .au-figure, .au-roots-photo, .au-tail { padding-left: 20px; padding-right: 20px; }
  .au-figure img { height: 260px; }
  .au-roots-photo img { height: 320px; }
}
@media (max-width: 520px) {
  .au-grid { grid-template-columns: 1fr; }
  .au-col { padding: 36px 20px 16px; }
  .au-title { font-size: 18px; letter-spacing: 0.18em; }
}




.bxiMiLog a.brand-logo {    
	height:100px !important;
	}
nav.common-head .bxiMoni > #llbMainNav {
    padding-left: 100px !important;
    padding-right: 95px !important;
	}	
.llb-row1 {
    padding-left:120px !important;
	}

.incenseTheme img.logiHidi {
    max-width: inherit !important;
    width: auto;
    max-height:100px !important;
    margin-left: 15px;
	}	
.llb-row1 {     
	gap: 10px;     
	}	
	
.co-err-msg {
    position: absolute;
    left: 0px;
    bottom: 10px;
	}
.co-row {
    position: relative;
	}	

.btn_lang a.dropdown-button img {    
    margin-top: 0px !important;
	}
.btn_lang a.dropdown-button:after {    
    top: 0px;
	}
.btn_lang.dropComnLang a.dropdown-button span.languagecls {    
    line-height: 20px !important;
	}


.co-phone-group .co-dial {    
    height: 55px;
    
	}
.co-step-body select#co-country {
    display: block;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding-left: 10px !important;
	height: 54px;
	}	


.cu-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}

.cu-card {
  background: #faf6ee;
  border: 1px solid #cfc6b3;
  padding: 36px 40px 40px;
}

.cu-title {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2a2a24;
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #cfc6b3;
}

.cu-intro {
  font-size: 14px;
  line-height: 1.7;
  color: #2a2a24;
  margin: 0 0 22px;
  max-width: 56ch;
}

.cu-required {
  text-align: right;
  font-size: 13px;
  color: #c0392b;
  margin-bottom: 4px;
}
.cu-required::before { content: "*"; margin-right: 1px; }

/* Each row: label (fixed col) + control (flex). Thin rule above each row. */
.cu-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid #cfc6b3;
}
.cu-row--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.cu-row label {
  flex: 0 0 180px;
  font-size: 13px;
  color: #2a2a24;
}
.cu-row .cu-req { color: #2a2a24; margin-left: 1px; }

.cu-row input,
.cu-row select,
.cu-row textarea {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  font-family: inherit;
  font-size: 14px;
  color: #2a2a24;
  padding: 4px 0;
  border-radius: 0;
}
.cu-row input::placeholder,
.cu-row textarea::placeholder {
  color: #5a564b;
}

.cu-row select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #2a2a24 50%),
    linear-gradient(135deg, #2a2a24 50%, transparent 50%);
  background-position:
    right 8px top 50%,
    right 4px top 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  padding-right: 22px;
}
.cu-row select:invalid { color: #5a564b; }
.cu-row select option { color: #2a2a24; }

.cu-row--message {
  align-items: flex-start;
}
.cu-row--message label { padding-top: 6px; }
.cu-row--message textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}

.cu-legal {
  font-size: 12px;
  line-height: 1.6;
  color: #5a564b;
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid #cfc6b3;
}
.cu-legal a {
  color: #2a2a24;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cu-submit {
  display: block;
  width: 100%;
  background: #9c4a2a;
  color: #ffffff;
  border: none;
  padding: 22px 24px;
  margin-top: 24px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.2s;
}
.cu-submit:hover { background: #1f1f1f; }
.cu-submit[disabled] { opacity: 0.55; cursor: not-allowed; }

.cu-stores {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid #cfc6b3;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #5a564b;
  line-height: 1.8;
}
.cu-stores .cu-region {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2a2a24;
  margin-right: 4px;
}
.cu-stores a {
  color: #5a564b;
  text-decoration: none;
}
.cu-stores a:hover { color: #2a2a24; text-decoration: underline; text-underline-offset: 3px; }

.cu-thanks {
	display: none;
	padding: 22px 0 6px;
	font-size: 14px;
	color: #2a2a24;
	line-height: 1.7;
	}
.cu-thanks.is-visible {
	display: block;
	}
.llb-pdp .btn-bloom {
    background:#1a1a1a ;
	}	
.llb-pdp .btn-bloom:focus {
    background-color:#725667 !important;
	}
.llb-pdp .btn-view:focus {
    background-color:#725667 !important;
	color: #fff;
	}
.llb-pdp .btn-duo.btn-terra {
    background: #48564E !important;
}	
.cu-row select{
	display:block !important;
	}
	
/* VIEW CART + CHECKOUT in the cart popup.
   header.css sets `html body li.wishBtni a { width:80% !important; padding:6px
   !important; margin-top/bottom:10px !important }` — specificity (0,1,4) — which
   outranks any `.llb-cart a.llb-checkout` (0,2,1) rule and left the two buttons
   with an inconsistent box, so they rendered staggered instead of stacked.
   This block is (0,3,4) so it wins, and it pins the ENTIRE box model on both so
   they are guaranteed identical. Geometry only — colour is left to the rules
   above so the buttons keep their current look. */
html body .llb-cart li.wishBtni a.llb-cartlist,
html body .llb-cart li.wishBtni a.llb-checkout {
    display: block !important;
    box-sizing: border-box !important;
    width: calc(100% - 40px) !important;
    max-width: none !important;
    float: none !important;
    margin: 0 20px 10px 20px !important;
    padding: 15px !important;
    border-radius: 0 !important;
    text-align: center !important;
    line-height: normal !important;
	}
html body .llb-cart li.wishBtni a.llb-checkout {
    margin-bottom: 20px !important;
	}
	
.nav-item.nav-discovery-sets .mega-group-cols {
    columns: 1;
	}
.nav-item.nav-discovery-sets-1 .mega-group-cols {
    columns: 1;
	}	
	
	
	
	

@media (max-width: 1470px) {	
	
	html body nav.main-nav {
		gap: 10px !important;
	}
	html body .main-nav .nav-item > a {
		font-size: 16px !important;
	}
}

@media (max-width: 1260px) {
    html body .main-nav .nav-item > a {
        font-size: 14px !important;
    }
}
	



@media (max-width: 1200px) {
	
	.incenseTheme img.logiHidi {
		margin-left: 0px;
	}	
	.llb-row1 .bxiMiLog, nav.common-head .bxiMoni .bxiMiLog {    
		min-width: 65px !important;
	}
	.incenseTheme img.logiHidi {    
		max-height: 80px !important;
	}
	.common-head li.msg_icon.iconCart {
		min-width: 65px;
		padding: 10px 10px 10px 0px !important;
	}

}



@media (max-width: 1150px) {
	html body.incenseTheme img.logiHidi {    
		max-height: 80px !important;
	}
	html body .common-head li.msg_icon.iconCart {
		min-width: 65px;
		padding: 10px 10px 10px 0px !important;
	}
	html body nav.common-head .bxiMoni > #llbMainNav {
		padding-inline-start: 80px !important;
	}
	html body nav.common-head .bxiMoni > #llbMainNav {
		padding-left: 65px !important;
		padding-right: 60px !important;
	}
}


@media (max-width: 1080px) {
	.common-head li.msg_icon.iconCart { 
		        min-height: 49px !important;
        right: 50px !important;
        border-right: 1px solid #e2e2e2;
	}
	.llb-row1 .bxiMiLog, nav.common-head .bxiMoni .bxiMiLog {
        min-width: 40px !important;
    }
	.bxiMiLog a.brand-logo {
		height: 40px !important;
	}
	.llb-row1 .header-btn.hidiRoMib {
		padding-inline-end:65px !important;
	}
	.header-btn.hidiRoMib {
		margin-top: 0px !important;
	}	
    .incenseTheme .bxiMiLog a.brand-logo img {
        max-height: 40px !important;
        width: 40px !important;
    }
	
}

@media (max-width: 720px) {
	.cu-card { padding: 24px 20px 28px; }
	.cu-row { flex-direction: column; align-items: stretch; gap: 6px; }
	.cu-row label { flex: 0 0 auto; }
	.cu-title { font-size: 16px; }
	.llb-annc__slide a, .llb-annc__slide span {    
		font-size:13px;
	}
	.teasers {
		padding:0px 0px 0px;
	}
	.teaser {
		padding:10px 10px;
	}
  
}



  @media (max-width: 960px) {
    .co-wrap { grid-template-columns: 1fr; gap: 24px; padding: 24px 16px 56px; }
    .co-col, .co-summary { padding: 24px 20px; }
    .co-row { flex-wrap: wrap; }
    .co-row label { flex-basis: 100%; }
  }











  @media (max-width: 520px) {
    .welcome-brand { margin-bottom: 48px; }
    .welcome-brand .mark { font-size: 22px; }
    .welcome-title { font-size: 15px; }
  }




  @media (max-width: 960px) {
    .vp-recs { padding: 16px 20px 56px; }
    .vp-recs-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 520px) {
    .vp-recs-grid { grid-template-columns: 1fr; }
  }




  @media (max-width: 960px) {
    .pdp-variants { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 520px) {
    .pdp-variants { grid-template-columns: 1fr; padding: 24px 20px 40px; }
    .pdp-variants-clear { padding: 0 20px; }
  }



  @media (max-width: 820px) {
    .flatlay .flatlay-overlay { font-size: 16px; letter-spacing: 0.18em; }
  }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; gap: 32px; padding: 24px 20px 40px; }
  .pdp-related-grid { grid-template-columns: repeat(2, 1fr); }
  .pdp-notes-grid { grid-template-columns: 1fr; gap: 20px; }
  .pdp-tabbar { overflow-x: auto; }
  .pdp-tab { padding: 14px 18px; white-space: nowrap; }
}

@media (max-width: 520px) {
  .pdp-name { font-size: 34px; }
  .pdp-related-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   Le Labo cart-list restyle.
   Moved here out of the inline <style> in theme_page/cart_list.blade.php.
   That view is SHARED with every other tenant, so the markup hook
   (.llb-cartpage on #product_cart) is still emitted only when
   $useIncenseProductPage, and the <link> to this sheet is gated the same
   way — nothing below can reach another institute's cart page.

   .llb-* selectors are unique to this theme and need no extra scoping.
   .checkrighting is NOT llb-prefixed and also exists in the ecommerce-theme
   cart, so every rule for it is scoped under body.themeclass29 (the body
   class the layout renders from theme_select_id — the same 29 the PHP gate
   uses). Restyles the cart rows + summary into the MY CART popup look:
   monospace type, uppercase titles, neutral palette, dark full-width
   CHECKOUT. No pricing or markup logic here — presentation only.
   ============================================================ */
:root{ --llb-ink:#1a1a1a; --llb-mut:#8a8a8a; --llb-line:#e6e6e6; --llb-btn:#5b5b5b; --llb-box:#e9e6df; }

/* Monospace only for LTR — Arabic renders poorly in Courier, so leave it.
   The blade used @if(Session::get('locale') != 'ar'); in a static sheet the
   equivalent hook is <html lang>, which the layout sets from app()->getLocale(). */
html:not([lang="ar"]) .llb-cartpage,
html:not([lang="ar"]) body.themeclass29 .checkrighting{ font-family:'Courier New',Courier,monospace; }

/* --- cart-list rows: SAME markup as the MY CART popup (_cart_popup_meta) --- */
.llb-cartpage{ list-style:none; margin:0; padding:0; color:var(--llb-ink); }
.llb-cartpage .llb-cp-row{ list-style:none; position:relative; display:flex; gap:20px; align-items:flex-start; margin:0; padding:24px 4px; border-bottom:1px solid var(--llb-line); background:#fff; }
.llb-cartpage .llb-cp-row.is-busy{ opacity:.55; pointer-events:none; }
/* Row body is a plain div, NOT a link: on the cart page only the product title
   is clickable (the popup still wraps its whole row in an <a>). Same flex
   geometry the old wrapper anchor had, so the layout is unchanged. */
.llb-cartpage .llb-cp-row > .llb-cp-main{ display:flex; gap:20px; align-items:flex-start; flex:1 1 auto; min-width:0; text-decoration:none; color:var(--llb-ink); }
.llb-cartpage .llb-cp-row > .llb-cp-main > img{ flex:0 0 120px; width:120px; height:120px; object-fit:cover; background:var(--llb-box); display:block; }
.llb-cartpage .neimiHart{ display:block; flex:1 1 auto; min-width:0; }

/* popup item classes, reused verbatim */
.llb-cartpage .llb-ci-title{ display:block; font-size:16px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; line-height:1.35; color:var(--llb-ink); padding-inline-end:30px; }
/* The only clickable thing in the row. Inline-block so the hit area is the text
   itself, not the full-width block the <span> version occupies. */
.llb-cartpage a.llb-ci-title{ display:inline-block; text-decoration:none; color:var(--llb-ink); }
.llb-cartpage a.llb-ci-title:hover{ text-decoration:underline; }
.llb-cartpage .llb-ci-sub{ display:block; font-size:12px; color:var(--llb-mut); margin:3px 0 12px; }
.llb-cartpage .llb-ci-meta{ display:block; font-size:13px; }
.llb-cartpage .llb-ci-meta .row{ display:flex; gap:10px; margin:4px 0; }
.llb-cartpage .llb-ci-meta .row .k{ flex:0 0 88px; width:88px; color:var(--llb-mut); }
.llb-cartpage .llb-ci-meta .row .v{ color:var(--llb-ink); }
.llb-cartpage .llb-ci-meta .row .v del{ color:var(--llb-mut); margin-left:4px; }

/* quantity stepper */
.llb-cartpage .llb-qty{ display:inline-flex; align-items:center; gap:12px; border:1px solid var(--llb-line); padding:2px 10px; }
.llb-cartpage .llb-qty button{ background:none; border:0; cursor:pointer; font-size:16px; font-family:inherit; color:var(--llb-ink); line-height:1; padding:0 2px; min-width:16px; }
.llb-cartpage .llb-qty button:disabled{ opacity:.35; cursor:default; }
.llb-cartpage .llb-qty .n{ min-width:16px; text-align:center; }

/* remove (top-inline-end) + save/wishlist link column */
.llb-cartpage .llb-remove{ position:absolute; top:22px; inset-inline-end:4px; right:4px; background:none; border:0; padding:4px; cursor:pointer; line-height:0; color:var(--llb-mut); }
.llb-cartpage .llb-remove:hover{ color:var(--llb-ink); }
.llb-cartpage .llb-remove svg{ width:16px; height:16px; display:block; }
.llb-cartpage .llb-cp-extra{ flex:0 0 auto; align-self:flex-start; margin-top:30px; text-align:end; }
.llb-cartpage .llb-linkbtn{ display:block; background:none; border:0; padding:0; margin:6px 0 0; color:var(--llb-mut); text-decoration:underline; font-size:12px; font-family:inherit; cursor:pointer; white-space:nowrap; }
.llb-cartpage .llb-linkbtn:hover{ color:var(--llb-ink); }
@media (max-width:600px){
  .llb-cartpage .llb-cp-row{ flex-wrap:wrap; }
  .llb-cartpage .llb-cp-row > .llb-cp-main > img{ flex-basis:88px; width:88px; height:88px; }
  .llb-cartpage .llb-cp-extra{ margin-top:8px; text-align:start; flex-basis:100%; }
}

/* --- summary panel (scoped: .checkrighting is shared with other carts) --- */
body.themeclass29 .checkrighting{ background:#fff;border:1px solid var(--llb-line);padding:24px 22px;color:var(--llb-ink); }
body.themeclass29 .checkrighting h5{ font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--llb-mut);margin:0 0 6px; }
body.themeclass29 .checkrighting h3#sum_total_amount{ font-size:24px;font-weight:700;margin:0 0 20px;color:var(--llb-ink); }
body.themeclass29 .checkrighting .pairdisc-line{ font-size:12px; }
body.themeclass29 .checkrighting .tbnRemoveing{ display:block;width:100%;background:var(--llb-btn);color:#fff !important;border:0;text-align:center;padding:15px;letter-spacing:1.5px;font-size:14px;font-weight:700;text-transform:uppercase;cursor:pointer;font-family:inherit;margin:8px 0 0; }
body.themeclass29 .checkrighting .tbnRemoveing:hover{ background:#444; }
body.themeclass29 .checkrighting .guest_line{ display:block;text-align:center;color:var(--llb-mut);margin:14px 0 2px;font-size:12px;text-transform:uppercase;letter-spacing:1px; }