/* ---------------------------------------------------------
   LuckShop Wholesale-only additions
   --------------------------------------------------------- */
:root {
  --ws-green: #3F2D65;
  --ws-green-2: #593665;
  --ws-lime: #B9A3D6;
  --ws-gold: #CDB8E8;
  --ws-cream: #F5F5EC;
  --ws-line: #DADBC9;
  --ws-error: #C0392B;
  /* buttons: green with white text (per design request; white on #8FC53E is ~2:1, below WCAG AA) */
  --ws-btn: #8FC53E;
  --ws-btn-hover: #7FB52F;
  --ws-btn-fg: #ffffff;
}

/* top bar links */
.ws-topbar-links { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.ws-topbar-links a { color: #fff; font-weight: 500; font-size: 16px; }
.ws-topbar-links a:hover { color: var(--ws-gold); }
.ws-topbar-links .ws-topbar-apply {
  background: var(--ws-btn); color: var(--ws-btn-fg); padding: 4px 14px; border-radius: 60px; font-weight: 600;
}
.ws-topbar-links .ws-topbar-apply:hover { background: var(--ws-btn-hover); color: var(--ws-btn-fg); }

/* ---------- Home: how it works ---------- */
.ws-how { background: #fff; }
.ws-how .ws-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ws-green-2); margin-bottom: 10px;
}
.ws-how .ws-title { font-size: 36px; line-height: 1.2; color: var(--ws-green); margin-bottom: 12px; }
.ws-how .ws-lead { font-size: 17px; line-height: 28px; color: #3c3c3c; max-width: 760px; margin: 0 auto; }

.ws-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 44px; counter-reset: ws-step; }
.ws-step {
  position: relative; background: var(--ws-cream); border-radius: 16px; padding: 30px 24px 26px; text-align: left;
  border: 1px solid var(--ws-line);
}
.ws-step-num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--ws-green); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 18px;
}
.ws-step h6 { color: var(--ws-green); font-size: 19px; margin-bottom: 8px; }
.ws-step p { font-size: 15px; line-height: 24px; color: #4a4a4a; margin: 0; }

.ws-req-wrap {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; margin-top: 40px; background: var(--ws-green);
  border-radius: 20px; padding: 40px 44px; color: #fff; align-items: center;
}
.ws-req-wrap h5 { color: #fff; margin-bottom: 18px; }
.ws-req-list { list-style: none; padding: 0; margin: 0; }
.ws-req-list li { position: relative; padding-left: 34px; margin-bottom: 14px; font-size: 16px; line-height: 25px; }
.ws-req-list li::before {
  content: "\2713"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ws-lime); color: var(--ws-green); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ws-req-list li strong { color: var(--ws-gold); font-weight: 600; }
.ws-req-list .ws-or {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; background: rgba(255,255,255,.14);
  padding: 1px 8px; border-radius: 20px; margin: 0 4px;
}
.ws-req-side { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 28px; }
.ws-req-side p { color: rgba(255,255,255,.88); font-size: 15px; line-height: 24px; margin-bottom: 20px; }
.ws-req-side .tf-btn { width: 100%; justify-content: center; }
.ws-req-side .ws-login-link { display: block; text-align: center; margin-top: 14px; color: #fff; text-decoration: underline; }
.ws-req-side .ws-login-link:hover { color: var(--ws-gold); }

/* ---------- Product cards (guest view) ---------- */
.card-product .ws-login-price {
  display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ws-green-2);
  margin-top: 6px;
}
.card-product .ws-login-price:hover { color: var(--ws-green); text-decoration: underline; }
.ws-min-qty {
  display: inline-block; font-size: 12px; font-weight: 600; color: var(--ws-green); background: #EEE8F4;
  border-radius: 20px; padding: 2px 10px; margin-top: 6px;
}
.card-product-wrapper .ws-badge-wholesale {
  position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--ws-green); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px;
}

/* ---------- Product detail: min qty ---------- */
.ws-min-note {
  display: flex; gap: 10px; align-items: flex-start; background: #EEE8F4; border-left: 4px solid var(--ws-green-2);
  border-radius: 8px; padding: 10px 14px; font-size: 15px; line-height: 22px; color: var(--ws-green); margin-top: 10px;
}
.ws-min-note strong { font-weight: 700; }
.ws-qty-error { color: var(--ws-error); font-size: 14px; margin-top: 6px; display: none; }
.ws-qty-error.show { display: block; }

/* ---------- Register modal notice ---------- */
.ws-register-note p { font-size: 15px; line-height: 24px; margin-bottom: 14px; }
.ws-register-note ul { padding-left: 18px; margin-bottom: 18px; }
.ws-register-note li { list-style: disc; font-size: 15px; line-height: 24px; margin-bottom: 6px; }

/* ---------- Wholesale application page ---------- */
.ws-app-intro { font-size: 17px; line-height: 29px; text-align: left; }
.ws-app-intro p + p { margin-top: 14px; }
.ws-app-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 36px; align-items: start; }
/* intro banner: dark purple -> light purple gradient */
.ws-app-hero { background: linear-gradient(135deg, #3F2D65 0%, #593665 100%); }
/* sidebar stays in view while the form scrolls (desktop only; below 1200px it stacks under the form).
   No inner scrollbar: js/wholesale.js sets --ws-aside-top so a sidebar taller than the screen
   scrolls with the page until its last card is visible, then sticks. */
@media (min-width: 1200px) {
  .ws-app-aside { position: sticky; top: var(--ws-aside-top, calc(var(--ls-header-h, 84px) + 20px)); }
  .ws-app-aside .ws-aside-card:last-child { margin-bottom: 0; }
}

.ws-form-card { background: #fff; border-radius: 20px; padding: 34px 36px; box-shadow: 0 3px 14px rgba(0,0,0,.10); }
.ws-form-section { border-top: 1px solid var(--ws-line); padding-top: 26px; margin-top: 26px; }
.ws-form-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.ws-form-section h6 { color: var(--ws-green); font-size: 19px; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.ws-form-section h6 .ws-sec-num {
  width: 28px; height: 28px; border-radius: 50%; background: var(--ws-green); color: #fff; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ws-form-section .ws-sec-help { font-size: 14px; color: #666; margin-bottom: 18px; }

.ws-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ws-row-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
.ws-field { margin-bottom: 16px; }
.ws-field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: #222; }
.ws-field label .req { color: var(--ws-error); }
.ws-field label .opt { color: #888; font-weight: 400; }
.ws-field input[type="text"], .ws-field input[type="email"], .ws-field input[type="tel"], .ws-field input[type="url"],
.ws-field input[type="password"], .ws-field input[type="search"], .ws-field select, .ws-field textarea {
  width: 100%; border: 1px solid var(--ws-line); border-radius: 8px; padding: 11px 14px; font-size: 15px; background: #fff;
}
.ws-field textarea { min-height: 110px; resize: vertical; }
/* selects get line-height:normal from the browser, which made them 4px shorter than the inputs */
.ws-field select { height: 48px; line-height: 24px; padding-top: 11px; padding-bottom: 11px; box-shadow: 0 2px 4px 0 #9d9d9d; }
.ws-field input:focus, .ws-field select:focus, .ws-field textarea:focus { border-color: var(--ws-green-2); outline: none; }
.ws-field.has-error input, .ws-field.has-error select, .ws-field.has-error textarea, .ws-field.has-error .ws-upload { border-color: var(--ws-error); }
.ws-field .ws-err { display: none; color: var(--ws-error); font-size: 13px; margin-top: 5px; }
.ws-field.has-error .ws-err { display: block; }

.ws-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.ws-choice { position: relative; }
.ws-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ws-choice span {
  display: inline-block; border: 1px solid var(--ws-line); border-radius: 60px; padding: 8px 16px; font-size: 14px;
  cursor: pointer; background: #fff; transition: all .2s ease; user-select: none;
}
.ws-choice input:checked + span { background: var(--ws-green); border-color: var(--ws-green); color: #fff; }
.ws-choice input:focus-visible + span { outline: 2px solid var(--ws-gold); outline-offset: 2px; }

.ws-upload {
  display: flex; align-items: center; gap: 14px; border: 2px dashed var(--ws-line); border-radius: 12px; padding: 16px 18px;
  background: var(--ws-cream); cursor: pointer; transition: border-color .2s ease;
}
.ws-upload:hover, .ws-upload.dragover { border-color: var(--ws-green-2); }
.ws-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ws-upload .ws-upload-icon {
  width: 42px; height: 42px; border-radius: 10px; background: var(--ws-green); color: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.ws-upload .ws-upload-text { font-size: 14px; line-height: 20px; color: #555; min-width: 0; }
.ws-upload .ws-upload-text strong { color: var(--ws-green); display: block; font-size: 15px; }
.ws-upload .ws-file-name { color: var(--ws-green-2); font-weight: 600; word-break: break-all; }

.ws-doc-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

.ws-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 22px; }
.ws-consent input { margin-top: 4px; flex-shrink: 0; }

.ws-success {
  display: none; text-align: center; padding: 40px 20px;
}
.ws-success.show { display: block; }
.ws-success .ws-success-icon {
  width: 70px; height: 70px; border-radius: 50%; background: var(--ws-lime); color: var(--ws-green);
  display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; margin: 0 auto 18px;
}
.ws-success h5 { color: var(--ws-green); margin-bottom: 10px; }

.ws-aside-card { background: var(--ws-cream); border: 1px solid var(--ws-line); border-radius: 20px; padding: 28px; margin-bottom: 24px; }
.ws-aside-card h6 { color: var(--ws-green); font-size: 18px; margin-bottom: 14px; }
.ws-aside-card p { font-size: 15px; line-height: 24px; }
.ws-aside-card .ws-req-list li { color: #333; font-size: 15px; }
.ws-aside-card .ws-req-list li strong { color: var(--ws-green); }
.ws-aside-card .ws-req-list .ws-or { background: #EEE8F4; color: var(--ws-green); }
.ws-timeline { list-style: none; padding: 0; margin: 0; }
.ws-timeline li { position: relative; padding: 0 0 16px 30px; font-size: 15px; line-height: 22px; }
.ws-timeline li::before {
  content: ""; position: absolute; left: 6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--ws-green-2);
}
.ws-timeline li::after { content: ""; position: absolute; left: 10px; top: 18px; bottom: 0; width: 2px; background: var(--ws-line); }
.ws-timeline li:last-child::after { display: none; }
.ws-timeline li strong { display: block; color: var(--ws-green); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .ws-steps { grid-template-columns: repeat(2, 1fr); }
  .ws-app-grid { grid-template-columns: 1fr; }
}
@media (max-width: 991px) {
  .ws-req-wrap { grid-template-columns: 1fr; padding: 30px 24px; }
  .ws-topbar-links { gap: 10px; }
  .ws-topbar-links a { font-size: 14px; }
}
@media (max-width: 767px) {
  .ws-how .ws-title { font-size: 28px; }
  .ws-steps { grid-template-columns: 1fr; gap: 16px; margin-top: 30px; }
  .ws-row, .ws-row-3 { grid-template-columns: 1fr; gap: 0; }
  .ws-form-card { padding: 24px 18px; }
  .flat-spacing-wholesale { padding: 28px 20px; }
}

/* ---------- Wholesale shop page ---------- */
.ws-shop-filter .ws-guest-box {
  background: var(--ws-green); color: #fff; border-radius: 12px; padding: 18px 16px; margin-bottom: 24px;
}
.ws-guest-box .ws-guest-title { font-weight: 700; font-size: 16px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.ws-guest-box p { font-size: 14px; line-height: 21px; color: rgba(255,255,255,.85); margin-bottom: 12px; }
.ws-guest-box .tf-btn.lck-bg-green-9 { background: var(--ws-btn) !important; color: var(--ws-btn-fg) !important; font-weight: 600; }
.ws-guest-box .ws-guest-apply { display: block; text-align: center; margin-top: 10px; font-size: 14px; color: #fff; text-decoration: underline; }
.ws-guest-box .ws-guest-apply:hover { color: var(--ws-gold); }

.ws-facet { margin-bottom: 22px; }
.ws-facet-title {
  width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: 0;
  padding: 0 0 10px; margin-bottom: 12px; border-bottom: 1px solid var(--ws-line); font-size: 17px; font-weight: 600;
  color: var(--ws-green); text-align: left; cursor: pointer;
}
.ws-facet-title .icon { font-size: 10px; transition: transform .2s ease; }
.ws-facet-title[aria-expanded="false"] .icon { transform: rotate(180deg); }

.ws-facet-search { margin-bottom: 10px; }
.ws-facet-search input {
  width: 100%; border: 1px solid var(--ws-line); border-radius: 8px; padding: 8px 12px; font-size: 14px; background: #fff;
}
.ws-facet-search input:focus { border-color: var(--ws-green-2); outline: none; }

/* scrollable filter lists */
.ws-scroll-list, .ws-plain-list { list-style: none; padding: 0; margin: 0; }
.ws-scroll-list {
  max-height: 260px; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px;
  scrollbar-width: thin; scrollbar-color: var(--ws-green-2) rgba(0,0,0,.08);
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, #000 88%, transparent);
  padding-bottom: 18px;
}
.ws-scroll-list::-webkit-scrollbar { width: 6px; }
.ws-scroll-list::-webkit-scrollbar-track { background: rgba(0,0,0,.08); border-radius: 6px; }
.ws-scroll-list::-webkit-scrollbar-thumb { background: var(--ws-green-2); border-radius: 6px; }
.ws-scroll-list li[hidden] { display: none; }

.ws-check { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 15px; line-height: 21px; width: 100%; }
.ws-check .tf-check { flex-shrink: 0; margin-top: 2px; }
.ws-check .ws-check-label { flex: 1; min-width: 0; }
.ws-check .ws-count { color: #888; font-size: 13px; }
.ws-check:hover .ws-check-label { color: var(--ws-green-2); }
.ws-no-match { font-size: 14px; color: #888; margin: 6px 0 0; }

.ws-reset-filters {
  background: none; border: 1px solid var(--ws-green); color: var(--ws-green); border-radius: 60px; padding: 8px 18px;
  font-size: 14px; font-weight: 600; cursor: pointer; width: 100%;
}
.ws-reset-filters:hover { background: var(--ws-btn); color: var(--ws-btn-fg); border-color: var(--ws-btn); }

.ws-shop-notice {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #EEE8F4; border-left: 4px solid var(--ws-green-2); border-radius: 10px; padding: 14px 18px; margin-bottom: 18px;
  font-size: 15px; line-height: 22px; color: var(--ws-green);
}
.ws-shop-notice-actions { display: flex; gap: 10px; flex-shrink: 0; }
.ws-shop-notice-actions a { padding: 7px 16px; border-radius: 60px; font-size: 14px; font-weight: 600; }
.ws-notice-login { border: 1px solid var(--ws-green); color: var(--ws-green); }
.ws-notice-login:hover { background: var(--ws-btn); color: var(--ws-btn-fg); border-color: var(--ws-btn); }
.ws-notice-apply { background: var(--ws-btn); color: var(--ws-btn-fg); }
.ws-notice-apply:hover { background: var(--ws-btn-hover); color: var(--ws-btn-fg); }

.ws-meta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; font-size: 15px; }
.ws-active-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-chip {
  border: 1px solid var(--ws-line); background: #fff; border-radius: 60px; padding: 4px 12px; font-size: 13px; cursor: pointer; color: #333;
}
.ws-chip:hover { border-color: var(--ws-error); color: var(--ws-error); }

.ws-card-cat { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #888; margin-bottom: 4px; }
.card-product-wrapper .ws-badge-out { background: #8a8a8a; }
.ws-empty { grid-column: 1 / -1; text-align: center; padding: 50px 20px; }
.ws-empty p { font-size: 17px; margin-bottom: 14px; }
.ws-empty .ws-reset-filters { width: auto; }

@media (max-width: 767px) {
  .ws-shop-notice { flex-direction: column; align-items: flex-start; }
  .ws-scroll-list { max-height: 220px; }
}

/* ---------- Home: testimonials ---------- */
.ws-testi {
  position: relative; overflow: hidden; padding: 90px 0; background: var(--ws-green);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(143,197,62,.16), transparent 42%),
    radial-gradient(circle at 92% 88%, rgba(185,163,214,.14), transparent 40%);
}
.ws-testi-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: 56px; align-items: center; }

.ws-testi-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ws-gold); margin-bottom: 14px;
}
.ws-testi-title { color: #fff; font-size: 38px; line-height: 1.2; margin-bottom: 16px; }
.ws-testi-lead { color: rgba(255,255,255,.8); font-size: 16px; line-height: 27px; margin-bottom: 28px; }

.ws-testi-rating {
  display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 14px; margin-bottom: 30px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
}
.ws-testi-score { font-family: "Playfair Display", serif; font-size: 44px; font-weight: 700; line-height: 1; color: var(--ws-gold); }
.ws-testi-score-label { color: rgba(255,255,255,.85); font-size: 14px; line-height: 20px; margin-top: 4px; }

.ws-stars { display: flex; gap: 3px; color: var(--ws-gold); font-size: 14px; }

.ws-testi-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ws-testi-link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.ws-testi-link:hover { color: var(--ws-gold); }

.ws-testi-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.ws-testi-card {
  margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 18px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff;
  transition: transform .3s ease, background .3s ease;
}
.ws-testi-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.11); }
.ws-testi-card blockquote { margin: 0; font-size: 16px; line-height: 26px; color: rgba(255,255,255,.92); flex: 1; }

.ws-testi-featured {
  grid-column: 1 / -1; position: relative; background: var(--ws-cream); border-color: transparent; color: var(--ws-green);
  padding: 34px 36px; box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.ws-testi-featured:hover { background: var(--ws-cream); }
.ws-testi-featured .ws-testi-quote { position: absolute; top: 26px; right: 30px; color: var(--ws-lime); opacity: .55; }
.ws-testi-featured blockquote {
  font-family: "Playfair Display", serif; font-size: 23px; line-height: 35px; color: var(--ws-green); padding-right: 40px;
}
.ws-testi-featured .ws-stars { color: #593665; }

.ws-testi-author { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 20px; }
.ws-testi-author strong { display: block; font-size: 15px; }
.ws-testi-meta { display: block; opacity: .75; }
.ws-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; letter-spacing: .04em; background: var(--ws-lime); color: var(--ws-green);
}
.ws-testi-featured .ws-avatar { background: var(--ws-green); color: #fff; }
.ws-verified {
  margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ws-green-2); background: #EEE8F4; border-radius: 20px; padding: 4px 10px; white-space: nowrap;
}

@media (max-width: 1199px) {
  .ws-testi-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 767px) {
  .ws-testi { padding: 60px 0; }
  .ws-testi-title { font-size: 28px; }
  .ws-testi-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ws-testi-featured { padding: 26px 22px; }
  .ws-testi-featured blockquote { font-size: 19px; line-height: 30px; padding-right: 0; }
  .ws-testi-featured .ws-testi-quote { display: none; }
  .ws-testi-author { flex-wrap: wrap; }
  .ws-verified { margin-left: 56px; }
}

/* testimonials: sliders for any number of reviews */
.ws-testi-cards { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ws-testi-featured-wrap, .ws-testi-more { min-width: 0; }
.ws-sw-featured .ws-testi-featured { box-shadow: none; min-height: 100%; }
.ws-testi-featured-wrap { border-radius: 18px; box-shadow: 0 18px 40px rgba(0,0,0,.25); background: var(--ws-cream); overflow: hidden; }
.ws-sw-featured .swiper-slide { background: var(--ws-cream); height: auto; }

.ws-testi-nav {
  display: flex; align-items: center; gap: 18px; padding: 0 36px 26px; background: var(--ws-cream);
}
.ws-testi-count { font-family: "Playfair Display", serif; font-size: 15px; color: var(--ws-green); white-space: nowrap; }
.ws-testi-count .ws-cur { font-size: 22px; font-weight: 700; }
.ws-testi-arrows { display: flex; gap: 8px; margin-left: auto; }
.ws-arrow {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ws-green); background: transparent; color: var(--ws-green);
  display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; transition: all .2s ease;
}
.ws-arrow:hover { background: var(--ws-btn); color: var(--ws-btn-fg); border-color: var(--ws-btn); }

.ws-testi-dots { display: flex; gap: 6px; align-items: center; }
.ws-testi-dots .swiper-pagination-bullet {
  width: 8px; height: 8px; margin: 0 !important; border-radius: 8px; opacity: 1; background: rgba(33,67,50,.25); transition: width .3s ease, background .3s ease;
}
.ws-testi-dots .swiper-pagination-bullet-active { width: 24px; background: var(--ws-green); }
.ws-dots-reviews { justify-content: center; margin-top: 18px; }
.ws-dots-reviews .swiper-pagination-bullet { background: rgba(255,255,255,.3); }
.ws-dots-reviews .swiper-pagination-bullet-active { background: var(--ws-gold); }

.ws-sw-reviews .swiper-slide { height: auto; }
.ws-sw-reviews .ws-testi-card { height: 100%; }
.ws-sw-reviews .ws-testi-card:hover { transform: none; }

@media (max-width: 767px) {
  .ws-testi-nav { padding: 0 22px 22px; gap: 12px; }
  .ws-testi-nav .ws-dots-featured { display: none; }
}

/* ---------- Wholesale cart, drawer & checkout ---------- */
.ws-account-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--ws-green); color: #fff; border-radius: 14px; padding: 16px 22px; margin-bottom: 30px;
}
.ws-account-id { display: flex; align-items: center; gap: 14px; }
.ws-account-bar .ws-avatar { background: var(--ws-lime); color: var(--ws-green); }
.ws-account-name { font-size: 16px; }
.ws-account-meta { font-size: 13px; color: rgba(255,255,255,.75); }
.ws-account-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-pill { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; background: rgba(255,255,255,.12); }
.ws-pill-gold { background: var(--ws-gold); color: var(--ws-green); }

/* cart table */
.ws-cart .cart-info .ws-min-qty { margin: 6px 0 4px; }
.ws-line-remove {
  display: block; background: none; border: 0; padding: 0; margin-top: 4px; font-size: 14px; color: rgb(205, 2, 2);
  text-decoration: underline; cursor: pointer;
}
.ws-unit { font-size: 12px; color: #888; }
.ws-cart .wg-quantity button.btn-quantity { background: none; border: 0; cursor: pointer; }
.ws-line-warn { font-size: 13px; line-height: 19px; color: var(--ws-green-2); margin-top: 6px; max-width: 220px; }
.ws-line-warn:empty { display: none; }
.ws-below-min .ws-line-warn { color: var(--ws-error); }
.ws-below-min .wg-quantity { border-color: var(--ws-error) !important; box-shadow: 0 0 0 2px rgba(192,57,43,.12); }
.ws-below-min .ws-line-total { color: var(--ws-error); }
.ws-fix-min {
  background: var(--ws-error); color: #fff; border: 0; border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 600;
  cursor: pointer; margin-top: 4px;
}
.ws-fix-min:hover { background: #a5301f; }
.ws-cart-empty { text-align: center; padding: 50px 20px; }
.ws-continue { display: inline-block; margin-top: 18px; font-weight: 600; color: var(--ws-green); }
.ws-continue:hover { color: var(--ws-green-2); }

/* summary */
.ws-summary { background: #fff; border: 1px solid var(--ws-line); border-radius: 16px; padding: 26px; }
.ws-summary-title { color: var(--ws-green); margin-bottom: 16px; }
.ws-rule-box { background: #EEE8F4; border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; font-size: 14px; line-height: 21px; color: var(--ws-green); }
.ws-rule-box ul { margin: 6px 0 0; padding-left: 18px; }
.ws-rule-box li { list-style: disc; margin-bottom: 3px; }
.ws-sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 15px; border-bottom: 1px dashed var(--ws-line); }
.ws-sum-total { border-bottom: 0; font-size: 19px; font-weight: 700; color: var(--ws-green); padding-top: 14px; }
.ws-sum-total small { font-size: 13px; font-weight: 500; color: #777; }
.ws-exempt { color: var(--ws-green-2); font-weight: 600; }
.ws-cart-block-msg {
  background: #FDECEA; color: var(--ws-error); border-radius: 8px; padding: 10px 14px; font-size: 14px; line-height: 20px; margin: 14px 0;
}
.ws-cart-block-msg a { color: var(--ws-error); text-decoration: underline; font-weight: 600; }
.ws-summary .cart-checkout-btn { margin-top: 16px; }
.ws-checkout-btn.ws-disabled { opacity: .45; cursor: not-allowed; }
.ws-help-text { font-size: 13px; line-height: 20px; color: #666; margin-top: 12px; }

/* drawer */
.ws-mini-notice {
  background: #EEE8F4; color: var(--ws-green); font-size: 14px; line-height: 20px; padding: 12px 24px; border-left: 4px solid var(--ws-green-2);
}
.ws-mini-meta { font-size: 13px; color: #666; margin: 4px 0 8px; }
.ws-mini-meta .ws-min-qty { margin-top: 0; }
.tf-mini-cart-item .ws-line-remove { display: inline-block; margin: 0 0 0 10px; }
.tf-mini-cart-item .wg-quantity button { background: none; border: 0; cursor: pointer; }
.ws-mini-line-total { font-size: 13px; color: #555; margin-top: 6px; }
.tf-mini-cart-item .ws-line-warn { max-width: none; }
.modal-shopping-cart .ws-cart-block-msg { margin: 10px 0 0; }
.modal-shopping-cart .ws-cart-empty { padding: 40px 24px; }

/* checkout */
.ws-checkout-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.ws-co-card .ws-field input[readonly] { background: var(--ws-cream); color: #555; cursor: default; }
.ws-docs-on-file { display: flex; flex-wrap: wrap; gap: 10px; }
.ws-doc-ok { font-size: 13px; font-weight: 600; color: var(--ws-green-2); background: #EEE8F4; border-radius: 20px; padding: 4px 12px; }
.ws-checkout-side { position: sticky; top: 100px; }
.ws-edit-link { font-size: 14px; font-weight: 600; color: var(--ws-green-2); text-decoration: underline; }
.ws-co-items { list-style: none; padding: 0; margin: 0 0 14px; }
.ws-co-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ws-line); }
.ws-co-item figure { position: relative; margin: 0; width: 60px; height: 60px; flex-shrink: 0; border-radius: 8px; background: var(--ws-cream); }
.ws-co-item img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.ws-co-qty {
  position: absolute; top: -8px; right: -8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
  background: var(--ws-green); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.ws-co-info { flex: 1; min-width: 0; }
.ws-co-name { font-size: 14px; line-height: 20px; font-weight: 600; margin: 0; }
.ws-co-meta { font-size: 13px; color: #777; }
.ws-co-price { font-weight: 700; white-space: nowrap; }
.ws-min-check { font-size: 14px; font-weight: 600; color: var(--ws-green-2); background: #EEE8F4; border-radius: 8px; padding: 9px 12px; margin-bottom: 8px; }
.ws-pay-title { color: var(--ws-green); margin: 22px 0 12px; }
.ws-request-note {
  background: #FFF8E6; border-left: 4px solid var(--ws-gold); border-radius: 8px; padding: 12px 14px; margin-top: 14px;
  font-size: 14px; line-height: 21px; color: #4a3d12;
}
.ws-request-note strong { display: block; color: var(--ws-green); font-size: 15px; margin-bottom: 2px; }
.ws-co-success { background: #fff; border: 1px solid var(--ws-line); border-radius: 20px; max-width: 640px; margin: 0 auto; }

@media (max-width: 1199px) {
  .ws-checkout-grid { grid-template-columns: minmax(0, 1fr); }
  .ws-checkout-side { position: static; }
}
@media (max-width: 767px) {
  .ws-account-bar { padding: 14px 16px; }
  .ws-summary { padding: 20px 16px; }
  .ws-line-warn { max-width: none; }
}

/* ---------- Quantity stepper (one design everywhere) ----------
   Overrides the theme's mixed fixed widths so -, number and + always line up. */
.wg-quantity {
  display: inline-flex !important; align-items: stretch; width: auto !important; min-width: 0 !important;
  height: 44px !important; padding: 0 !important; background: #fff !important;
  border: 1px solid var(--ws-line); border-radius: 10px !important; overflow: hidden; vertical-align: middle;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wg-quantity:focus-within { border-color: var(--ws-green-2); box-shadow: 0 0 0 3px rgba(86,133,79,.15); }

.wg-quantity .btn-quantity {
  position: relative; flex: 0 0 44px; width: 44px !important; height: auto !important; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ws-cream); border: 0; border-radius: 0; color: var(--ws-green);
  font-size: 0 !important; line-height: 0 !important; cursor: pointer; user-select: none;
  transition: background .2s ease, color .2s ease;
}
/* draw the icons in CSS so every stepper looks identical, whatever is inside the button */
.wg-quantity .btn-quantity > * { display: none; }
.wg-quantity .btn-quantity::before,
.wg-quantity :is(.btn-increase, .plus-btn, .btnincrease, .ws-qty-inc)::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px;
  background: currentColor; border-radius: 2px; transform: translate(-50%, -50%);
}
.wg-quantity :is(.btn-increase, .plus-btn, .btnincrease, .ws-qty-inc)::after { width: 2px; height: 12px; }

.wg-quantity .btn-quantity:hover { background: #E9E9DC; color: #000; }
.wg-quantity .btn-quantity:active { background: #DCDCCB; color: #000; }
.wg-quantity .btn-quantity:focus-visible { outline: 2px solid var(--ws-gold); outline-offset: -2px; }
/* minus is greyed out once the item is at its minimum */
.wg-quantity .btn-quantity.is-at-min,
.wg-quantity .btn-quantity.is-at-min:hover { background: #F1F1EA; color: #BDBDB5; cursor: not-allowed; }

.wg-quantity input {
  flex: 1 1 auto; width: 58px !important; min-width: 0; height: auto !important; margin: 0; padding: 0 4px !important;
  border: 0 !important; border-left: 1px solid var(--ws-line) !important; border-right: 1px solid var(--ws-line) !important;
  border-radius: 0 !important; background: #fff !important; text-align: center;
  font-family: inherit !important; font-size: 16px !important; font-weight: 600 !important; line-height: normal !important;
  color: var(--ws-green) !important; pointer-events: auto !important; -moz-appearance: textfield;
}
.wg-quantity input:focus { outline: none; background: #F7F4FA !important; }

.wg-quantity.small { height: 38px !important; }
.wg-quantity.small .btn-quantity { flex-basis: 38px; width: 38px !important; }
.wg-quantity.small input { width: 48px !important; font-size: 15px !important; }

.ws-below-min .wg-quantity { border-color: var(--ws-error) !important; box-shadow: 0 0 0 3px rgba(192,57,43,.12); }
.tf-mini-cart-btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tf-cart-item_quantity .cart-quantity { display: flex; flex-direction: column; align-items: flex-start; }

/* bigger touch targets on phones / tablets */
@media (pointer: coarse) {
  .wg-quantity, .wg-quantity.small { height: 46px !important; }
  .wg-quantity .btn-quantity, .wg-quantity.small .btn-quantity { flex-basis: 46px; width: 46px !important; }
}

/* ---------- My Account (wholesale) ---------- */
.ws-acc-card {
  display: flex; gap: 12px; align-items: center; background: var(--ws-green); color: #fff; border-radius: 14px; padding: 16px; margin-bottom: 18px;
}
.ws-acc-card .ws-avatar { background: var(--ws-lime); color: var(--ws-green); }
.ws-acc-card strong { display: block; font-size: 15px; }
.ws-acc-card span { display: block; font-size: 13px; color: rgba(255,255,255,.75); }
.ws-acc-card .ws-status { display: inline-block; margin-top: 6px; }

.ws-status {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .03em; padding: 4px 10px; border-radius: 20px; white-space: nowrap;
}
.ws-status-pending   { background: #FFF3D6; color: #8A6300; }
.ws-status-awaiting  { background: #E3EEFB; color: #1F5AA6; }
.ws-status-confirmed { background: #EEE8F4; color: var(--ws-green-2); }
.ws-status-shipped   { background: var(--ws-green); color: #fff; }
.ws-status-cancelled { background: #EFEFEF; color: #777; }
.ws-status-approved  { background: #EEE8F4; color: var(--ws-green-2); }
.ws-acc-card .ws-status-approved { background: var(--ws-lime); color: var(--ws-green); }

.ws-account h6 { color: var(--ws-green); margin: 0; }
.ws-acc-hello {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.ws-acc-hello h5 { color: var(--ws-green); margin-bottom: 4px; }

.ws-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.ws-stat { background: #fff; border: 1px solid var(--ws-line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.ws-stat-label { font-size: 13px; color: #777; }
.ws-stat-value { font-size: 20px; font-weight: 700; color: var(--ws-green); }
.ws-stat-value.ws-ok { color: var(--ws-green-2); }
.ws-stat-note { font-size: 13px; color: #666; }
.ws-stat-note a { color: var(--ws-green-2); text-decoration: underline; }

.ws-alert-card {
  background: #E3EEFB; border-left: 4px solid #1F5AA6; border-radius: 10px; padding: 14px 16px; margin-bottom: 24px;
  font-size: 14px; line-height: 21px; color: #1d3557;
}
.ws-alert-card strong { display: block; font-size: 15px; margin-bottom: 2px; }
.ws-alert-card a { color: #1F5AA6; font-weight: 600; text-decoration: underline; }

.ws-acc-block { background: #fff; border: 1px solid var(--ws-line); border-radius: 16px; padding: 22px; margin-bottom: 24px; }
.ws-acc-block-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ws-table-link { font-size: 14px; font-weight: 600; color: var(--ws-green-2); text-decoration: underline; }

.ws-table-wrap { overflow-x: auto; }
.ws-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ws-table th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #777; font-weight: 600; padding: 0 12px 10px; border-bottom: 1px solid var(--ws-line); }
.ws-table td { padding: 14px 12px; border-bottom: 1px solid #EEEEE4; vertical-align: middle; }
.ws-table tr:last-child td { border-bottom: 0; }
.ws-req-id { font-weight: 700; color: var(--ws-green); }
.ws-table-product { display: flex; align-items: center; gap: 12px; }
.ws-table-product img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: var(--ws-cream); flex-shrink: 0; }
.ws-table-product span { display: block; font-weight: 600; }
.ws-table-product small { color: #777; }

.ws-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ws-quick-item {
  display: block; border: 1px solid var(--ws-line); border-radius: 14px; padding: 16px 18px; background: var(--ws-cream);
  transition: border-color .2s ease, transform .2s ease;
}
.ws-quick-item:hover { border-color: var(--ws-green-2); transform: translateY(-2px); }
.ws-quick-item strong { display: block; color: var(--ws-green); }
.ws-quick-item span { font-size: 13px; color: #666; }

.ws-status-legend { list-style: none; padding: 0; margin: 0; }
.ws-status-legend li { display: flex; gap: 12px; align-items: center; padding: 7px 0; font-size: 14px; }
.ws-status-legend .ws-status { min-width: 140px; text-align: center; }

.ws-back { display: inline-block; margin-bottom: 16px; font-weight: 600; color: var(--ws-green); }
.ws-progress { list-style: none; padding: 0; margin: 6px 0 20px; display: grid; grid-template-columns: repeat(5, 1fr); }
.ws-progress li { position: relative; text-align: center; font-size: 13px; color: #999; }
.ws-progress li::before {
  content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 3px; background: var(--ws-line); z-index: 0;
}
.ws-progress li:first-child::before { display: none; }
.ws-progress-dot {
  position: relative; z-index: 1; display: block; width: 20px; height: 20px; margin: 0 auto 8px; border-radius: 50%;
  background: #fff; border: 3px solid var(--ws-line);
}
.ws-progress strong { display: block; font-size: 13px; }
.ws-progress li.done, .ws-progress li.current { color: var(--ws-green); }
.ws-progress li.done::before, .ws-progress li.current::before { background: var(--ws-green-2); }
.ws-progress li.done .ws-progress-dot { background: var(--ws-green-2); border-color: var(--ws-green-2); }
.ws-progress li.current .ws-progress-dot { border-color: #1F5AA6; box-shadow: 0 0 0 4px rgba(31,90,166,.15); }

.ws-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.ws-acc-block .ws-info-grid { margin-bottom: 0; }
.ws-info { background: var(--ws-cream); border-radius: 12px; padding: 14px 16px; }
.ws-info span { display: block; font-size: 12px; color: #777; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.ws-info strong { color: var(--ws-green); font-size: 15px; }
.ws-detail-totals { max-width: 360px; margin: 16px 0 0 auto; }
.ws-detail-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.ws-address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ws-address { position: relative; border: 1px solid var(--ws-line); border-radius: 14px; padding: 18px; background: var(--ws-cream); }
.ws-address strong { display: block; color: var(--ws-green); margin-bottom: 6px; padding-right: 70px; }
.ws-address p { font-size: 14px; line-height: 22px; margin: 0; }
.ws-address .ws-address-note { font-size: 13px; color: #666; margin-top: 10px; }
.ws-address-note a { text-decoration: underline; }
.ws-pill-sm { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 20px; background: #fff; border: 1px solid var(--ws-line); }
.ws-pill-green { background: var(--ws-green); color: #fff; border-color: var(--ws-green); }
.ws-address-actions { display: flex; gap: 14px; margin-top: 12px; }
.ws-address-actions button { background: none; border: 0; padding: 0; font-size: 14px; font-weight: 600; color: var(--ws-green-2); text-decoration: underline; cursor: pointer; }
.ws-address-actions .ws-danger { color: var(--ws-error); }

.ws-add-address { margin-top: 18px; border-top: 1px dashed var(--ws-line); padding-top: 16px; }
.ws-add-address summary { cursor: pointer; font-weight: 600; color: var(--ws-green); list-style: none; }
.ws-add-address summary::-webkit-details-marker { display: none; }
.ws-add-address-form { margin-top: 16px; }

.ws-docs { list-style: none; padding: 0; margin: 0; }
.ws-docs li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #EEEEE4; }
.ws-docs li:last-child { border-bottom: 0; }
.ws-docs li > div { flex: 1; }
.ws-docs strong { display: block; color: var(--ws-green); }
.ws-docs small { color: #777; }
.ws-doc-icon {
  width: 42px; height: 42px; border-radius: 10px; background: var(--ws-green); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.ws-wishlist-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ws-btn-muted { opacity: .5; pointer-events: none; }
.card-product .price .ws-unit { font-size: 12px; font-weight: 400; }

@media (max-width: 991px) {
  .ws-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-wishlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ws-quick, .ws-info-grid, .ws-address-grid { grid-template-columns: minmax(0, 1fr); }
  .ws-acc-block { padding: 16px; }
  .ws-progress strong { font-size: 11px; }
  .ws-progress small { display: none; }
  /* stacked table rows on phones */
  .ws-table thead { display: none; }
  .ws-table, .ws-table tbody, .ws-table tr, .ws-table td { display: block; width: 100%; }
  .ws-table tr { border: 1px solid var(--ws-line); border-radius: 12px; padding: 8px 12px; margin-bottom: 12px; }
  .ws-table td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border: 0; }
  .ws-table td::before { content: attr(data-label); font-size: 12px; color: #777; text-transform: uppercase; letter-spacing: .05em; }
  .ws-table td[data-label="Product"] { display: block; }
  .ws-table td[data-label="Product"]::before { display: none; }
}
@media (max-width: 575px) {
  .ws-stats, .ws-wishlist-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Product detail (wholesale) ---------- */
.ws-guest-only { display: none !important; }
body.ws-guest .ws-guest-only { display: block !important; }
body.ws-guest .tf-sticky-atc-btns.ws-guest-only { display: flex !important; }
body.ws-guest .ws-member-only { display: none !important; }

.tf-product-info-title .ws-card-cat { margin-bottom: 6px; }
.ws-stock-line { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ws-green-2); font-weight: 600; margin-top: 6px; }
.ws-stock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ws-lime); box-shadow: 0 0 0 3px rgba(143,197,62,.25); }

.ws-price-box {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--ws-line); border-radius: 14px; padding: 16px 18px;
}
.ws-price-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ws-green-2); }
.ws-price-main { display: flex; align-items: baseline; gap: 6px; color: var(--ws-green); }
.ws-price-main span { font-family: "Albert Sans", sans-serif; font-size: 34px; font-weight: 700; line-height: 1.1; }
.ws-price-main small { font-size: 15px; color: #666; }
.ws-srp { text-align: right; font-size: 13px; color: #666; }
.ws-srp span { display: block; }
.ws-srp strong { display: block; font-size: 18px; color: #333; }
.ws-srp em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ws-green-2); background: #EEE8F4; border-radius: 20px; padding: 2px 8px; }

.ws-pd-guest { background: var(--ws-green); color: #fff; border-radius: 14px; padding: 18px 20px; }
.ws-pd-guest-title { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ws-pd-guest p { font-size: 14px; line-height: 21px; color: rgba(255,255,255,.85); margin-bottom: 14px; }
.ws-pd-guest-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ws-pd-guest .btn-fill { background: var(--ws-btn); border-color: var(--ws-btn); color: var(--ws-btn-fg); }
.ws-pd-guest .btn-outline { border-color: #fff; color: #fff; }

.ws-pd-desc { font-size: 17px; line-height: 27px; margin: 0; }

.ws-size-head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 10px; }
.ws-size-current { color: var(--ws-green-2); }
.ws-size-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ws-size-opt { position: relative; cursor: pointer; }
.ws-size-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ws-size-opt > span {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; height: 100%;
  border: 1px solid var(--ws-line); border-radius: 12px; padding: 10px 6px; background: #fff; transition: all .2s ease;
}
.ws-size-opt strong { font-size: 16px; color: var(--ws-green); }
.ws-size-opt em { font-style: normal; font-size: 13px; font-weight: 600; color: #333; }
.ws-size-opt small { font-size: 12px; color: #777; }
.ws-size-opt:hover > span { border-color: var(--ws-green-2); }
.ws-size-opt input:checked + span { border: 2px solid var(--ws-green); background: #F4F0F8; padding: 9px 5px; }
.ws-size-opt input:focus-visible + span { outline: 2px solid var(--ws-gold); outline-offset: 2px; }

.ws-qty-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ws-qty-row .tf-product-info-quantity { flex-shrink: 0; }
.ws-qty-side { flex: 1; min-width: 200px; }
.ws-qty-side .ws-min-note { margin-top: 0; }
.tf-product-info-buy-button { margin-top: 18px; }

.ws-pd-perks { list-style: none; padding: 16px 0 0; margin: 0; border-top: 1px solid var(--ws-line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.ws-pd-perks li { position: relative; padding-left: 24px; font-size: 14px; line-height: 20px; color: #444; }
.ws-pd-perks li::before {
  content: "\2713"; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%;
  background: #EEE8F4; color: var(--ws-green-2); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.ws-pr-attrs th { white-space: nowrap; }

@media (max-width: 575px) {
  .ws-size-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-pd-perks { grid-template-columns: minmax(0, 1fr); }
  .ws-srp { text-align: left; }
}

/* ---------- Home: Shop by Collection (bento layout) ---------- */
.ws-cols { padding: 80px 0; }
.ws-cols-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; }
.ws-cols-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ws-green-2); margin-bottom: 8px; }
.ws-cols-title { font-size: 38px; line-height: 1.15; color: var(--ws-green); margin-bottom: 8px; }
.ws-cols-lead { font-size: 16px; color: #555; margin: 0; }
.ws-cols-all {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ws-green);
  border: 1px solid var(--ws-green); border-radius: 60px; padding: 10px 20px; transition: all .25s ease;
}
.ws-cols-all:hover { background: var(--ws-btn); color: var(--ws-btn-fg); border-color: var(--ws-btn); }
.ws-cols-all .icon { font-size: 11px; }

.ws-cols-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 270px; gap: 20px;
}

/* featured */
.ws-col-featured {
  grid-column: span 2; grid-row: span 2; position: relative; overflow: hidden; border-radius: 22px; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; padding: 40px;
  background: var(--ws-green);
  background-image:
    radial-gradient(circle at 85% 90%, rgba(143,197,62,.28), transparent 45%),
    radial-gradient(circle at 10% 10%, rgba(185,163,214,.18), transparent 40%);
}
.ws-col-featured-text { position: relative; z-index: 2; max-width: 330px; }
.ws-col-badge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--ws-gold); color: var(--ws-green); border-radius: 20px; padding: 5px 12px; margin-bottom: 18px;
}
.ws-col-featured h3 { font-size: 36px; line-height: 1.15; color: #fff; margin-bottom: 14px; }
.ws-col-featured p { font-size: 16px; line-height: 26px; color: rgba(255,255,255,.82); margin-bottom: 24px; }
.ws-col-btn {
  display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--ws-green); font-weight: 600;
  border-radius: 60px; padding: 12px 22px; transition: all .25s ease;
}
.ws-col-btn .icon { font-size: 11px; transition: transform .25s ease; }
.ws-col-featured:hover .ws-col-btn { background: var(--ws-btn); color: var(--ws-btn-fg); }
.ws-col-featured:hover .ws-col-btn .icon { transform: translateX(4px); }
.ws-col-featured-img {
  position: absolute; right: 36px; bottom: 36px; width: 260px; height: 260px; border-radius: 20px; overflow: hidden;
  border: 6px solid rgba(255,255,255,.95); box-shadow: 0 20px 40px rgba(0,0,0,.35); transform: rotate(4deg);
  transition: transform .4s ease;
}
.ws-col-featured-img img { width: 100%; height: 100%; object-fit: cover; }
.ws-col-featured:hover .ws-col-featured-img { transform: rotate(0deg) scale(1.03); }

/* category tiles */
.ws-col-tile {
  position: relative; overflow: hidden; border-radius: 22px; padding: 22px 22px 0; display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.ws-col-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(33,67,50,.12); }
.ws-tint-cream { background: #F1EEDC; }
.ws-tint-gold  { background: #EFE3F2; }
.ws-tint-green { background: #E6DDF0; }
.ws-tint-blush { background: #F4E3DC; }
.ws-col-text h3 { font-size: 20px; line-height: 1.25; color: var(--ws-green); margin-bottom: 4px; }
.ws-col-text p { font-size: 14px; line-height: 20px; color: #5b5b50; margin: 0; }
/* white-background product photos blend into the tint */
.ws-col-tile img {
  flex: 1; min-height: 0; width: 100%; object-fit: contain; object-position: center bottom; margin-top: 8px;
  mix-blend-mode: multiply; transition: transform .4s ease;
}
.ws-col-tile:hover img { transform: scale(1.06); }
.ws-col-go {
  position: absolute; right: 16px; bottom: 16px; width: 42px; height: 42px; border-radius: 50%;
  background: #fff; color: var(--ws-green); display: flex; align-items: center; justify-content: center; font-size: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08); transition: all .25s ease;
}
.ws-col-tile:hover .ws-col-go { background: var(--ws-btn); color: var(--ws-btn-fg); }

/* promo banners (images already carry their titles) */
.ws-col-promo {
  grid-column: span 2; position: relative; overflow: hidden; border-radius: 22px;
  background-size: cover; background-position: center; display: flex; align-items: flex-end; justify-content: center; padding: 20px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.ws-col-promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.45), transparent 45%); }
.ws-col-promo:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(0,0,0,.18); }
.ws-col-promo-btn {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--ws-green);
  font-weight: 600; border-radius: 60px; padding: 10px 20px; transition: background .25s ease;
}
.ws-col-promo-btn .icon { font-size: 11px; }
.ws-col-promo:hover .ws-col-promo-btn { background: var(--ws-btn); color: var(--ws-btn-fg); }

/* more categories */
.ws-cols-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.ws-cols-more-label { font-weight: 600; color: var(--ws-green); margin-right: 4px; }
.ws-cols-more a {
  border: 1px solid var(--ws-line); background: #fff; border-radius: 60px; padding: 7px 16px; font-size: 14px; color: #333;
  transition: all .2s ease;
}
.ws-cols-more a:hover { border-color: var(--ws-btn); background: var(--ws-btn); color: var(--ws-btn-fg); }

@media (max-width: 1199px) {
  .ws-cols-grid { grid-auto-rows: 240px; }
  .ws-col-featured { padding: 32px; }
  .ws-col-featured-img { width: 210px; height: 210px; }
}
@media (max-width: 991px) {
  .ws-cols { padding: 60px 0; }
  .ws-cols-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 240px; gap: 16px; }
  .ws-col-featured { grid-row: span 2; }
  .ws-col-promo { grid-column: span 1; }
}
@media (max-width: 767px) {
  .ws-col-featured-text { max-width: 58%; }
  .ws-col-featured-img { width: 170px; height: 170px; right: 24px; bottom: 24px; }
}
@media (max-width: 575px) {
  .ws-cols-title { font-size: 30px; }
  /* rows size to content on phones so the featured tile never overlaps */
  .ws-cols-grid { grid-auto-rows: auto; gap: 12px; }
  .ws-col-tile { height: 210px; }
  .ws-col-promo { height: 180px; }
  .ws-col-featured { grid-row: auto; padding: 26px 22px; gap: 20px; }
  .ws-col-featured-text { max-width: none; }
  .ws-col-featured h3 { font-size: 28px; }
  .ws-col-featured p { font-size: 15px; line-height: 23px; margin-bottom: 18px; }
  .ws-col-featured-img { position: relative; right: auto; bottom: auto; width: 100%; height: 200px; border-width: 4px; transform: none; }
  .ws-col-tile { padding: 14px 14px 0; border-radius: 18px; }
  .ws-col-text h3 { font-size: 16px; }
  .ws-col-text p { display: none; }
  .ws-col-go { width: 34px; height: 34px; right: 10px; bottom: 10px; }
  .ws-col-promo { grid-column: span 2; }
  .ws-cols-all { width: 100%; justify-content: center; }
}

/* =========================================================
   Site frame + homepage (ls-*)
   Top bar, header, drawers, search, footer (shared by the homepage and
   key pages) and the index.html sections. Everything is
   prefixed ls- and resets are scoped to .ls-scope so nothing leaks
   into the template's own components.
   ========================================================= */
:root {
  /* Palette: purple. #3F2D65 dark purple (primary), #593665 light purple (secondary),
     lavender tints of them for accents on dark backgrounds. Token names are historical. */
  --ls-bg: #f5f5ec;          /* ws-cream */
  --ls-bg-sand: #EEE9F3;     /* pale purple tint */
  --ls-surface: #ffffff;
  --ls-ink: #221A33;
  --ls-ink-2: #000000;
  --ls-muted: #000000;
  --ls-line: #dadbc9;        /* ws-line */
  --ls-line-strong: #c6cab0;

  --ls-green: #3F2D65;       /* ws-green (primary) */
  --ls-green-hover: #2F2150;
  --ls-green-2: #593665;     /* ws-green-2 */
  --ls-green-soft: #EEE8F4;
  --ls-lime: #B9A3D6;        /* ws-lime */
  --ls-lime-hover: #A58FC7;
  --ls-gold: #CDB8E8;        /* ws-gold */
  --ls-gold-soft: #EFE7F5;
  --ls-green-dark: #3F2D65;
  --ls-green-dark-2: #4A3670;
  --ls-topbar: #000000;

  --ls-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --ls-font-body: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ls-radius-sm: 10px;
  --ls-radius: 16px;
  --ls-radius-lg: 24px;

  --ls-shadow-sm: 0 1px 2px rgba(34, 26, 51, .06), 0 2px 8px rgba(34, 26, 51, .04);
  --ls-shadow: 0 2px 6px rgba(34, 26, 51, .05), 0 12px 32px -8px rgba(34, 26, 51, .14);
  --ls-shadow-lg: 0 24px 60px -18px rgba(34, 26, 51, .32);

  --ls-ease: cubic-bezier(.22, .61, .36, 1);
  --ls-container: 1240px;
  --ls-gutter: 24px;
  --ls-header-h: 84px;
  --ls-section-y: clamp(26px, 3vw, 42px);
}

/* ---------- Base ---------- */
/* Resets are scoped to .ls-scope blocks (top bar, header, drawers, main, footer)
   so they never leak into template page content. :where() keeps them at
   single-class specificity, so component classes below always win. */
html:has(.ls-header) { scroll-behavior: smooth; scroll-padding-top: calc(var(--ls-header-h) + 16px); }
body.ls-page { margin: 0; background: var(--ls-bg); overflow-x: hidden; }
body.is-locked { overflow: hidden; }
.ls-scope {
  color: var(--ls-ink);
  font-family: var(--ls-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ls-scope, .ls-scope :where(*, *::before, *::after) { box-sizing: border-box; }
.ls-scope :where(img) { display: block; max-width: 100%; }
.ls-scope :where(a) { color: inherit; text-decoration: none; display: inline; transition: none; }
.ls-scope :where(a:hover) { color: inherit; }
.ls-scope :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.ls-scope :where(h1, h2, h3, h4, h5, h6) { margin: 0; font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; }
.ls-scope :where(p, ul, ol, figure, dl, dd) { margin: 0; }
.ls-scope :where(ul, ol) { padding: 0; list-style: none; }
.ls-scope :where(section, article, blockquote, summary, table, th, td) { font-family: inherit; }
.ls-scope :where(input) { font: inherit; }
.ls-scope :focus-visible { outline: 2px solid var(--ls-green); outline-offset: 3px; border-radius: 6px; }

.ls-container { width: 100%; max-width: calc(var(--ls-container) + var(--ls-gutter) * 2); margin-inline: auto; padding-inline: var(--ls-gutter); }
.ls-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ls-skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--ls-ink); color: #fff; padding: 10px 16px; border-radius: 8px; transition: top .2s; }
.ls-skip-link:focus { top: 12px; }

/* Icons */
.ls-i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ls-i--sm { width: 16px; height: 16px; }

/* ---------- Typography ---------- */
.ls-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ls-green-2); margin-bottom: 16px;
}
.ls-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .6; }
.ls-eyebrow--light { color: var(--ls-gold); }
.ls-h2 {
  font-family: var(--ls-font-display); font-weight: 400; color: var(--ls-green);
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.15; letter-spacing: -.01em;
}
.ls-section-head { margin-bottom: clamp(28px, 3.5vw, 44px); }
.ls-section-head__sub { margin-top: 14px; color: var(--ls-muted); font-size: 17px; max-width: 560px; }
.ls-section-head--center { text-align: center; }
.ls-section-head--center .ls-section-head__sub { margin-inline: auto; }
.ls-section-head--center .ls-eyebrow::after { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .6; }
.ls-section-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.ls-btn {
  --ls-btn-bg: var(--ls-ink); --ls-btn-fg: #fff; --ls-btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px; border-radius: 999px;
  background: var(--ls-btn-bg); color: var(--ls-btn-fg); border: 1.5px solid var(--ls-btn-bd);
  font-weight: 600; font-size: 15px; letter-spacing: .01em; white-space: nowrap;
  transition: background-color .25s var(--ls-ease), color .25s var(--ls-ease), border-color .25s var(--ls-ease), transform .25s var(--ls-ease), box-shadow .25s var(--ls-ease);
}
.ls-btn .ls-i { width: 18px; height: 18px; transition: transform .25s var(--ls-ease); }
.ls-btn:hover .ls-i { transform: translateX(3px); }
.ls-btn:active { transform: translateY(1px); }
.ls-btn--primary { --ls-btn-bg: var(--ws-btn); --ls-btn-fg: var(--ws-btn-fg); box-shadow: 0 6px 18px -8px rgba(143, 197, 62, .8); }
.ls-btn--primary:hover { --ls-btn-bg: var(--ws-btn-hover); box-shadow: 0 10px 24px -10px rgba(143, 197, 62, .9); transform: translateY(-1px); }
.ls-btn--outline { --ls-btn-bg: transparent; --ls-btn-fg: var(--ls-ink); --ls-btn-bd: var(--ls-line-strong); }
.ls-btn--outline { --ls-btn-fg: var(--ls-green); --ls-btn-bd: var(--ls-green); }
.ls-btn--outline:hover { --ls-btn-bg: var(--ws-btn); --ls-btn-fg: var(--ws-btn-fg); --ls-btn-bd: var(--ws-btn); }
.ls-btn--ghost { --ls-btn-bg: transparent; --ls-btn-fg: var(--ls-ink); --ls-btn-bd: var(--ls-line); }
.ls-btn--ghost:hover { --ls-btn-bg: var(--ls-bg-sand); }
.ls-btn--light { --ls-btn-bg: var(--ls-bg); --ls-btn-fg: var(--ls-ink); }
.ls-btn--light:hover { --ls-btn-bg: #fff; transform: translateY(-1px); }
.ls-btn--lime { --ls-btn-bg: var(--ws-btn); --ls-btn-fg: var(--ws-btn-fg); box-shadow: 0 6px 18px -8px rgba(143, 197, 62, .7); }
.ls-btn--lime:hover { --ls-btn-bg: var(--ws-btn-hover); --ls-btn-fg: var(--ws-btn-fg); transform: translateY(-1px); }
.ls-btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.ls-btn--lg { height: 54px; padding: 0 30px; font-size: 16px; }
.ls-btn--block { width: 100%; }

.ls-link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; color: var(--ls-ink);
  padding-bottom: 4px; border-bottom: 1.5px solid var(--ls-line-strong);
  transition: border-color .25s var(--ls-ease), color .25s var(--ls-ease);
}
.ls-link-arrow .ls-i { width: 18px; height: 18px; transition: transform .25s var(--ls-ease); }
.ls-link-arrow { color: var(--ls-green); }
.ls-link-arrow:hover { color: var(--ls-green-2); border-color: var(--ls-green-2); }
.ls-link-arrow:hover .ls-i { transform: translateX(4px); }
.ls-link-arrow--light { color: #fff; border-color: rgba(255, 255, 255, .4); }
.ls-link-arrow--light:hover { color: #fff; border-color: #fff; }

.ls-chip {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--ls-line-strong); background: var(--ls-surface);
  font-size: 14px; font-weight: 500; color: var(--ls-ink-2); white-space: nowrap;
  transition: all .2s var(--ls-ease);
}
.ls-chip:hover { border-color: var(--ls-ink); color: var(--ls-ink); }
.ls-chip.is-active { background: var(--ls-green); border-color: var(--ls-green); color: #fff; }
.ls-chip:hover { border-color: var(--ls-green); color: var(--ls-green); }
.ls-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.ls-icon-btn {
  position: relative; display: inline-grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%; color: var(--ls-ink);
  transition: background-color .2s var(--ls-ease), color .2s var(--ls-ease);
}
.ls-icon-btn:hover { background: var(--ls-bg-sand); }
.ls-icon-btn .ls-i { width: 22px; height: 22px; }
.ls-badge-count {
  position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--ls-green); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
}

/* ---------- Media / image loading ---------- */
.ls-media { position: relative; overflow: hidden; background: var(--ls-bg-sand); }
.ls-media::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%) var(--ls-bg-sand);
  background-size: 200% 100%; animation: ls-shimmer 1.4s linear infinite;
  transition: opacity .4s var(--ls-ease);
}
.ls-media.is-loaded::before, .ls-media.is-error::before { opacity: 0; animation: none; }
.ls-media.is-error {
  background: linear-gradient(135deg, var(--ls-bg-sand), var(--ls-gold-soft));
}
.ls-media.is-error::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; opacity: .35;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%237a6d62'%3E%3Cpath d='M16 3l2.9 8.3L27 13l-6.6 5.2L22.8 27 16 22l-6.8 5 2.4-8.8L5 13l8.1-1.7z'/%3E%3C/svg%3E");
}
.ls-media img { position: relative; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ls-ease), transform .8s var(--ls-ease); }
.ls-media.is-loaded img { opacity: 1; }
.ls-media.is-error img { display: none; }
@keyframes ls-shimmer { to { background-position: -200% 0; } }

/* Headings use the site's deep green */
.ls-hero__title, .ls-benefit h3, .ls-step h3, .ls-product__name, .ls-faq__q, .ls-drawer__title, .ls-empty h3, .ls-serve h3 { color: var(--ls-green); }

/* ---------- Reveal on scroll ---------- */
.ls-js .ls-reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ls-ease), transform .8s var(--ls-ease); transition-delay: var(--ls-d, 0ms); }
.ls-js .ls-reveal.is-in { opacity: 1; transform: none; }

/* =========================================================
   ANNOUNCEMENT + HEADER
   ========================================================= */
.ls-announce { background: var(--ls-topbar); color: #fff; font-size: 15px; }
.ls-announce__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; min-height: 48px; padding-block: 8px; }
.ls-announce__social { display: flex; gap: 6px; margin-left: -12px; }
.ls-announce__social a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; transition: color .2s, background .2s; }
.ls-announce__social a:hover { color: var(--ls-gold); background: rgba(255, 255, 255, .08); }
.ls-announce__social .ls-i { width: 19px; height: 19px; }
.ls-announce__msg { text-align: center; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.ls-announce__links { display: flex; align-items: center; justify-content: flex-end; gap: 18px; font-weight: 500; }
.ls-announce__links a { transition: color .2s; }
.ls-announce__links a:hover { color: var(--ls-gold); }
.ls-announce__links .ls-announce__apply { background: var(--ws-btn); color: var(--ws-btn-fg); padding: 4px 14px; border-radius: 60px; font-weight: 600; transition: background .2s; }
.ls-announce__links .ls-announce__apply:hover { background: var(--ws-btn-hover); color: var(--ws-btn-fg); }

.ls-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(245, 245, 236, .92);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ls-ease), box-shadow .3s var(--ls-ease), background-color .3s var(--ls-ease);
}
.ls-header.is-scrolled { border-color: var(--ls-line); box-shadow: 0 6px 24px -14px rgba(34, 26, 51, .25); background: rgba(245, 245, 236, .97); }
/* main.js "headerSticky" hides <header> on scroll and adds .header-bg;
   keep the new header pinned and on-theme on template pages too */
header.ls-header { top: 0 !important; }
header.ls-header.header-bg { background: rgba(245, 245, 236, .97); box-shadow: 0 6px 24px -14px rgba(34, 26, 51, .25); }/* Desktop: logo left, nav truly centred, icons right; edges line up with the top bar */
.ls-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; height: var(--ls-header-h); }
.ls-header__burger { display: none; margin-left: -8px; }

.ls-logo { display: inline-flex; align-items: center; flex: none; justify-self: start; }
.ls-logo img { height: 58px; width: auto; margin-left: -29px; transition: opacity .2s; }
.ls-logo:hover img { opacity: .85; }
/* the logo artwork is light green on cream; deepen it slightly for legibility (footer version stays white) */
.ls-header .ls-logo img, .ls-drawer__logo { filter: saturate(1.35) contrast(1.25) brightness(.82); }
.ls-logo--light img { filter: brightness(0) invert(1); height: 62px; margin-left: -31px; }
.ls-drawer__logo { height: 38px; width: auto; }
.ls-nav { justify-self: center; }
.ls-nav__list { display: flex; align-items: center; gap: 4px; }
.ls-nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  height: 40px; padding: 0 14px; font-size: 17px; font-weight: 500; color: var(--ls-green);
  transition: color .2s var(--ls-ease);
}
.ls-nav__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--ls-lime); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ls-ease);
}
.ls-nav__link:hover, .ls-nav__link.is-active { color: var(--ls-ink); }
.ls-nav__link:hover::after, .ls-nav__link.is-active::after { transform: scaleX(1); }
.ls-nav__link .ls-i { transition: transform .25s var(--ls-ease); }

.ls-nav__item--drop { position: relative; }
.ls-dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%; width: 420px; padding: 18px;
  background: var(--ls-surface); border: 1px solid var(--ls-line); border-radius: var(--ls-radius); box-shadow: var(--ls-shadow-lg);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  transition: opacity .25s var(--ls-ease), transform .25s var(--ls-ease), visibility .25s;
}
.ls-dropdown::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; }
.ls-nav__item--drop:hover .ls-dropdown, .ls-nav__item--drop:focus-within .ls-dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.ls-nav__item--drop:hover .ls-nav__link .ls-i { transform: rotate(180deg); }
.ls-dropdown__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ls-dropdown__grid a { padding: 9px 12px; border-radius: 8px; font-size: 16.5px; color: var(--ls-ink-2); transition: background .2s, color .2s; }
.ls-dropdown__grid a:hover { background: var(--ls-bg); color: var(--ls-green); }
.ls-dropdown__all { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 12px 12px 2px; border-top: 1px solid var(--ls-line); font-size: 14px; font-weight: 600; color: var(--ls-green); }

.ls-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; justify-self: end; margin-right: -3px; }

/* Account / Wishlist / Cart: icon with a small label underneath (images/headericon.png) */
.ls-hicon {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 56px; height: 56px; padding: 4px 6px; border-radius: 12px; color: var(--ls-ink);
  transition: background-color .2s var(--ls-ease), color .2s var(--ls-ease);
}
.ls-hicon:hover { background: var(--ls-bg-sand); color: var(--ls-green); }
.ls-hicon__glyph { position: relative; display: grid; place-items: center; }
.ls-hicon .ls-i { width: 24px; height: 24px; stroke-width: 1.5; }
.ls-hicon__label { font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .01em; }
.ls-hicon .ls-badge-count {
  top: -7px; right: -11px; min-width: 18px; height: 18px; padding: 0 5px; line-height: 18px;
  background: #C8912A; color: #fff; font-size: 10.5px; box-shadow: 0 0 0 2px var(--ls-bg);
}

/* Top bar: rotating messages (same copy as index.html) */
.ls-announce__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
.ls-announce__links a { white-space: nowrap; }
.ls-announce__rotator { display: grid; }
.ls-announce__rotator > span { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ls-ease), transform .5s var(--ls-ease); }
.ls-announce__rotator > span.is-active { opacity: 1; transform: none; }

/* Site header: logo + menu on the left, icons right, like index.html.
   Top-level links reuse the theme's .box-nav-ul / .item-link styles from styles.css;
   the Shop mega menu (.ls-mega) and dropdowns (.ls-drop) are styled below. */
.ls-header--site .ls-header__inner { display: flex; gap: 0; }
.ls-header--site .ls-logo { flex: none; }
.ls-header--site .ls-header__actions { margin-left: auto; }
.ls-sitenav { padding-left: 40px; }
.ls-sitenav .box-nav-ul { gap: 30px; }
.ls-sitenav .box-nav-ul .menu-item { display: flex; align-items: center; height: var(--ls-header-h); padding: 0; }
#header.ls-header .box-nav-ul .item-link { color: var(--ls-green); line-height: 1.2; }
#header.ls-header .box-nav-ul .item-link .ls-i { width: 14px; height: 14px; stroke-width: 2.2; transition: transform .25s var(--ls-ease); }
#header.ls-header .box-nav-ul .menu-item:hover > .item-link .ls-i { transform: rotate(180deg); }
#header.ls-header .box-nav-ul .item-link.is-active::before { width: 100%; left: 0; right: auto; }
/* ---------- Shop mega menu + dropdowns (dark) ----------
   Full-width deep-purple panel under the header: product, desire and highlight columns
   plus one featured card. Opens on hover (short hover-intent delay),
   keyboard focus, or tap on touch screens; Esc closes (js/wholesale.js).
   Text contrast on #1E1530: links #EDE8F5 14.5:1, muted #B8AECB 8.3:1, headings #CDB8E8 9.6:1, green #8FC53E 8.5:1. */
.ls-sitenav {
  --ls-mm-bg: #1E1530;
  --ls-mm-bg-2: #2A1E45;
  --ls-mm-line: rgba(255, 255, 255, .1);
  --ls-mm-text: #EDE8F5;
  --ls-mm-muted: #B8AECB;
  --ls-mm-accent: #CDB8E8;
}
.ls-mega, .ls-drop {
  position: absolute; z-index: 90; top: 100%; text-align: left;
  opacity: 0; visibility: hidden; color: var(--ls-mm-text);
  transition: opacity .18s var(--ls-ease), transform .18s var(--ls-ease), visibility 0s linear .18s;
}
.ls-mega {
  left: 0; right: 0; transform: translateY(-4px);
  max-height: calc(100vh - var(--ls-header-h)); overflow-y: auto; overscroll-behavior: contain;
  background:
    radial-gradient(900px 380px at 12% -10%, rgba(185, 163, 214, .16), transparent 60%),
    linear-gradient(160deg, var(--ls-mm-bg-2) 0%, var(--ls-mm-bg) 55%);
  border-top: 1px solid var(--ls-mm-line);
  box-shadow: 0 30px 60px -24px rgba(12, 8, 20, .6);
}
:is(.ls-has-mega, .ls-has-drop):is(:hover, :focus-within, .is-open) > :is(.ls-mega, .ls-drop) {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .22s var(--ls-ease) .12s, transform .22s var(--ls-ease) .12s, visibility 0s linear .12s;
}
.ls-sitenav .is-dismissed > :is(.ls-mega, .ls-drop) { opacity: 0 !important; visibility: hidden !important; }
.ls-mega :focus-visible, .ls-drop :focus-visible { outline-color: var(--ls-mm-accent); }
/* dim the page behind the open mega menu */
.ls-header--site::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; z-index: 85;
  background: rgba(20, 13, 32, .45); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s var(--ls-ease), visibility 0s linear .25s;
}
.ls-header--site:has(.ls-has-mega:is(:hover, :focus-within, .is-open):not(.is-dismissed))::after {
  opacity: 1; visibility: visible; transition: opacity .25s var(--ls-ease) .12s, visibility 0s linear .12s;
}

.ls-badge {
  display: inline-block; padding: 2px 7px; border-radius: 999px;
  font-family: var(--ls-font-body); font-size: 10.5px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase;
}
.ls-badge--new { background: var(--ws-btn); color: var(--ws-btn-fg); }
.ls-badge--hot { background: #593665; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.ls-badge--sale { background: #FBE9E7; color: #A5301F; }

/* Layout: three link columns + one featured card */
.ls-mega__inner { display: grid; grid-template-columns: 1.9fr 1fr 1fr 1.15fr; gap: 48px; padding-block: 34px 38px; }
.ls-mega .ls-mega__heading {
  margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--ls-mm-line);
  font-family: var(--ls-font-display); font-size: 21px; font-weight: 500; line-height: 1.25;
  letter-spacing: 0; text-transform: none; color: #fff;
}
.ls-mega__list { display: grid; }
.ls-mega__list--2col { grid-template-columns: 1fr 1fr; column-gap: 28px; }
.ls-mega__list a {
  display: flex; align-items: center; gap: 8px; padding: 7px 0;
  font-size: 15px; line-height: 1.35; color: var(--ls-mm-text); transition: color .15s, transform .15s var(--ls-ease);
}
.ls-mega__list a:hover, .ls-mega__list a:focus-visible { color: var(--ws-btn); transform: translateX(3px); }
.ls-mega__all {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding-bottom: 3px;
  border-bottom: 1.5px solid currentColor; font-size: 14.5px; font-weight: 600; color: var(--ws-btn);
}
.ls-mega__all .ls-i { width: 16px; height: 16px; transition: transform .2s var(--ls-ease); }
.ls-mega__all:hover .ls-i { transform: translateX(3px); }

/* featured card */
.ls-mega__feature { display: flex; flex-direction: column; gap: 14px; }
.ls-mspot { position: relative; display: block; flex: 1; min-height: 230px; overflow: hidden; border-radius: 14px; box-shadow: 0 0 0 1px var(--ls-mm-line); }
.ls-mspot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transition: transform .8s var(--ls-ease); }
.ls-mspot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 13, 32, 0) 40%, rgba(20, 13, 32, .88) 100%); }
.ls-mspot:hover img { transform: scale(1.05); }
.ls-mspot__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; }
.ls-mspot__body strong { font-family: var(--ls-font-display); font-size: 19px; font-weight: 500; line-height: 1.2; color: #fff; }
.ls-mspot__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ws-btn); }
.ls-mspot__cta .ls-i { width: 15px; height: 15px; transition: transform .2s var(--ls-ease); }
.ls-mspot:hover .ls-mspot__cta .ls-i { transform: translateX(3px); }
.ls-mega__dl { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ls-mm-muted); transition: color .15s; }
.ls-mega__dl .ls-i { width: 17px; height: 17px; color: var(--ws-btn); }
.ls-mega__dl:hover { color: #fff; }

/* Resources / About Us dropdown cards */
.ls-sitenav .ls-has-drop { position: relative; }
.ls-drop {
  left: 50%; width: 340px; padding: 8px; transform: translate(-50%, -4px);
  background: linear-gradient(160deg, var(--ls-mm-bg-2) 0%, var(--ls-mm-bg) 70%);
  border: 1px solid var(--ls-mm-line); border-radius: 14px; box-shadow: 0 24px 50px -18px rgba(12, 8, 20, .6);
}
.ls-has-drop:is(:hover, :focus-within, .is-open) > .ls-drop { transform: translate(-50%, 0); }
.ls-drop__item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; border-radius: 10px; transition: background .15s; }
.ls-drop__item:hover, .ls-drop__item.is-current { background: rgba(255, 255, 255, .07); }
.ls-drop__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: rgba(205, 184, 232, .14); color: var(--ls-mm-accent); transition: background .15s, color .15s; }
.ls-drop__icon .ls-i { width: 18px; height: 18px; }
.ls-drop__item:hover .ls-drop__icon { background: var(--ws-btn); color: var(--ws-btn-fg); }
.ls-drop__item strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: #fff; }
.ls-drop__item small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ls-mm-muted); }

/* ---------- Drawers ---------- */
.ls-drawer { position: fixed; inset: 0; z-index: 120; visibility: hidden; }
.ls-drawer.is-open { visibility: visible; }
.ls-drawer__scrim { position: absolute; inset: 0; background: rgba(34, 26, 51, .45); opacity: 0; transition: opacity .35s var(--ls-ease); }
.ls-drawer.is-open .ls-drawer__scrim { opacity: 1; }
.ls-drawer__panel {
  position: absolute; top: 0; bottom: 0; z-index: 1; width: min(400px, 88vw);
  display: flex; flex-direction: column; background: var(--ls-bg);
  transition: transform .4s var(--ls-ease); box-shadow: var(--ls-shadow-lg);
}
.ls-drawer--left .ls-drawer__panel { left: 0; transform: translateX(-100%); }
.ls-drawer--right .ls-drawer__panel { right: 0; transform: translateX(100%); }
.ls-drawer.is-open .ls-drawer__panel { transform: none; }
.ls-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 18px 24px; border-bottom: 1px solid var(--ls-line); }
.ls-drawer__title { font-family: var(--ls-font-display); font-weight: 500; font-size: 22px; }
.ls-drawer__foot { margin-top: auto; padding: 20px 24px 28px; display: grid; gap: 10px; border-top: 1px solid var(--ls-line); }
.ls-mnav { display: flex; flex-direction: column; padding: 12px 12px; }
.ls-mnav a { padding: 14px 12px; border-radius: 10px; font-family: var(--ls-font-display); font-size: 22px; transition: background .2s, color .2s; }
.ls-mnav a:hover, .ls-mnav a.is-active { background: var(--ls-bg-sand); color: var(--ls-green); }
.ls-mnav__label { padding: 16px 12px 4px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ls-green-2); }
.ls-mnav a.ls-mnav__sub { display: flex; align-items: center; gap: 8px; padding: 9px 12px 9px 28px; font-family: var(--ls-font-body); font-size: 17px; }
.ls-mnav a.ls-mnav__sub.is-current { color: var(--ls-green); font-weight: 600; }
.ls-mnav a.ls-mnav__sub--all { font-weight: 600; color: var(--ls-green); }
/* mobile accordion sections */
.ls-macc summary {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 12px; border-radius: 10px;
  list-style: none; cursor: pointer; font-family: var(--ls-font-display); font-size: 22px; transition: background .2s, color .2s;
}
.ls-macc summary::-webkit-details-marker { display: none; }
.ls-macc summary::after {
  content: ""; width: 9px; height: 9px; margin-right: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ls-ease);
}
.ls-macc[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.ls-macc summary:hover, .ls-macc summary.is-active { background: var(--ls-bg-sand); color: var(--ls-green); }
.ls-macc__body { display: flex; flex-direction: column; padding: 4px 0 10px; }
.ls-macc__body .ls-mnav__label { padding-left: 28px; }

/* ---------- Empty state ---------- */
.ls-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 48px 28px; }
.ls-empty__icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 8px; border-radius: 50%; background: var(--ls-bg-sand); color: var(--ls-green); }
.ls-empty__icon .ls-i { width: 30px; height: 30px; stroke-width: 1.4; }
.ls-empty h3 { font-family: var(--ls-font-display); font-weight: 500; font-size: 22px; }
.ls-empty p { color: var(--ls-muted); font-size: 15px; max-width: 320px; margin-bottom: 8px; }
.ls-empty .ls-btn--block { max-width: 320px; }

/* ---------- Search overlay ---------- */
.ls-search { position: fixed; inset: 0; z-index: 130; visibility: hidden; }
.ls-search.is-open { visibility: visible; }
.ls-search__scrim { position: absolute; inset: 0; background: rgba(34, 26, 51, .45); opacity: 0; transition: opacity .3s var(--ls-ease); }
.ls-search.is-open .ls-search__scrim { opacity: 1; }
.ls-search__panel {
  position: relative; z-index: 1; background: var(--ls-bg); padding: 28px 0 32px;
  box-shadow: var(--ls-shadow-lg); transform: translateY(-100%); transition: transform .4s var(--ls-ease);
  max-height: 85vh; overflow-y: auto;
}
.ls-search.is-open .ls-search__panel { transform: none; }
.ls-search__form { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1.5px solid var(--ls-ink); }
.ls-search__form > .ls-i { width: 24px; height: 24px; color: var(--ls-muted); }
.ls-search__form input { flex: 1; min-width: 0; width: auto; border: 0; border-radius: 0; box-shadow: none; padding: 0; background: none; outline: none; font: 500 clamp(20px, 3vw, 28px)/1.3 var(--ls-font-display); color: var(--ls-ink); }
.ls-search__form input::placeholder { color: #333333; opacity: 1; }
.ls-search__form input::-webkit-search-cancel-button { display: none; }
.ls-search__label { display: block; margin: 20px 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ls-muted); }
.ls-search__results { display: grid; gap: 4px; margin-top: 16px; }
.ls-search__results:empty { display: none; }
.ls-sresult { display: flex; align-items: center; gap: 16px; padding: 10px; border-radius: 12px; transition: background .2s; }
.ls-sresult:hover { background: var(--ls-bg-sand); }
.ls-sresult .ls-media { width: 56px; height: 56px; border-radius: 10px; flex: none; }
.ls-sresult strong { display: block; font-weight: 600; }
.ls-sresult span { font-size: 13.5px; color: var(--ls-muted); }
.ls-search .ls-empty { padding: 32px 16px 8px; }

/* =========================================================
   HERO
   ========================================================= */
.ls-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  min-height: min(calc(100vh - var(--ls-header-h) - 48px), 880px);
  background:
    radial-gradient(900px 500px at 10% 20%, rgba(89, 54, 101, .12), transparent 60%),
    var(--ls-bg);
  overflow: hidden;
}
.ls-hero__content {
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(56px, 7vw, 96px);
  padding-left: max(var(--ls-gutter), calc((100vw - var(--ls-container)) / 2));
  padding-right: clamp(32px, 5vw, 72px);
}
.ls-hero__title {
  font-family: var(--ls-font-display); font-weight: 500;
  font-size: clamp(40px, 4.3vw, 62px); line-height: 1.06; letter-spacing: -.02em;
  max-width: 15ch;
}
.ls-hero__title em { font-style: italic; font-weight: 400; color: var(--ls-green-2); }
.ls-hero__lead { margin-top: 24px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; color: var(--ls-ink-2); max-width: 520px; }
.ls-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.ls-hero__trust { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 14px; color: var(--ls-muted); }
.ls-hero__trust .ls-i { width: 18px; height: 18px; color: var(--ls-green-2); }
.ls-hero__cats { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--ls-line); max-width: 520px; }
.ls-hero__cats li { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ls-muted); }
.ls-hero__cats li + li::before { content: "✦"; font-size: 7px; color: var(--ls-lime); }

.ls-hero__media { position: relative; min-height: 600px; }
.ls-hero__img { position: absolute; inset: 0 0 0 0; border-bottom-left-radius: 200px 200px; }
.ls-hero__img img { object-position: 50% center; animation: ls-heroZoom 14s var(--ls-ease) both; }
@keyframes ls-heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.ls-hero__inset {
  position: absolute; left: -64px; bottom: 56px; width: clamp(150px, 15vw, 210px); aspect-ratio: 4 / 5;
  border-radius: var(--ls-radius); border: 6px solid var(--ls-bg); box-shadow: var(--ls-shadow-lg);
}
.ls-hero__tag {
  position: absolute; right: 28px; top: 28px; display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--ls-shadow); font-size: 13px; line-height: 1.35; color: var(--ls-ink-2);
  animation: ls-floatY 6s ease-in-out infinite;
}
.ls-hero__tag strong { color: var(--ls-ink); font-weight: 600; font-size: 14px; }
.ls-hero__tag-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ls-green-soft); color: var(--ls-green); }
@keyframes ls-floatY { 50% { transform: translateY(-6px); } }

/* ---------- Hero slider (images/slider1.png): full-bleed photo, dark left fade, gold accents ---------- */
.ls-slider {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(520px, 40vw, 660px);
  background: #1E1430; color: #fff;
}
.ls-slider__bg { position: absolute; inset: 0; z-index: -2; }
.ls-slider__bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 65% center;
  opacity: 0; transition: opacity 1.2s var(--ls-ease);
}
.ls-slider__bg img.is-active { opacity: 1; animation: ls-heroZoom 9s var(--ls-ease) both; }
.ls-slider::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(30, 20, 48, .9) 0%, rgba(30, 20, 48, .78) 34%, rgba(30, 20, 48, .3) 62%, rgba(30, 20, 48, .08) 100%);
}
.ls-slider__inner { padding-block: clamp(56px, 6vw, 88px); }
.ls-slider__content { max-width: 700px; }
.ls-slider__eyebrow { margin-bottom: 14px; font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ls-gold); }
.ls-slider__title { font-family: var(--ls-font-display); font-weight: 700; font-size: clamp(38px, 4.2vw, 60px); line-height: 1.08; color: #fff; max-width: 13ch; }
.ls-slider__lead { margin-top: 18px; max-width: 540px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: rgba(255, 255, 255, .88); }
.ls-slider__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.ls-btn--accent { --ls-btn-bg: var(--ws-btn); --ls-btn-fg: var(--ws-btn-fg); border-radius: 6px; box-shadow: 0 8px 22px -10px rgba(143, 197, 62, .8); }
.ls-btn--accent:hover { --ls-btn-bg: var(--ws-btn-hover); transform: translateY(-1px); }
.ls-btn--glass { --ls-btn-bg: rgba(255, 255, 255, .04); --ls-btn-fg: #fff; --ls-btn-bd: rgba(255, 255, 255, .75); border-radius: 6px; }
.ls-btn--glass:hover { --ls-btn-bg: #fff; --ls-btn-fg: var(--ls-ink); --ls-btn-bd: #fff; }
.ls-slider__perks { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 38px; font-size: 15px; font-weight: 500; }
.ls-slider__perks li { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.ls-slider__perks .ls-i { width: 22px; height: 22px; color: var(--ls-gold); }

.ls-features { padding-block: 28px; background: var(--ls-bg); }
.ls-features__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ls-feature {
  display: flex; align-items: center; gap: 16px; padding: 22px 20px;
  background: #fff; border: 1px solid var(--ls-line); border-radius: var(--ls-radius); box-shadow: var(--ls-shadow-sm);
}
.ls-feature__icon .ls-i { width: 42px; height: 42px; stroke-width: 1.3; color: #593665; }
.ls-feature h3 { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ls-ink); }
.ls-feature p { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ls-muted); }

/* =========================================================
   SECTIONS
   ========================================================= */
.ls-section { padding-block: var(--ls-section-y); }
.ls-section--sand { background: var(--ls-bg-sand); }
.ls-section--dark { background: var(--ls-green-dark); color: #f5f5ec; }
.ls-section--dark .ls-section-head__sub { color: rgba(245, 245, 236, .7); }
.ls-section--dark .ls-h2 { color: #fff; }

/* ---------- Categories (editorial grid) ---------- */
.ls-cat-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 230px; grid-auto-flow: dense; gap: 18px; }
.ls-cat { position: relative; grid-column: span 3; border-radius: var(--ls-radius); overflow: hidden; isolation: isolate; color: #fff; }
.ls-cat--xl { grid-column: span 6; grid-row: span 2; }
.ls-cat .ls-media { position: absolute; inset: 0; }
.ls-cat .ls-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(34, 26, 51, 0) 40%, rgba(34, 26, 51, .72) 100%);
  transition: opacity .4s var(--ls-ease);
}
.ls-cat:hover img { transform: scale(1.06); }
.ls-cat__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px 22px; }
.ls-cat__name { font-family: var(--ls-font-display); font-weight: 500; font-size: 22px; line-height: 1.15; }
.ls-cat--xl .ls-cat__name { font-size: clamp(28px, 3vw, 38px); }
.ls-cat__link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 13.5px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .88);
}
.ls-cat__link .ls-i { width: 16px; height: 16px; transition: transform .3s var(--ls-ease); }
.ls-cat:hover .ls-cat__link .ls-i { transform: translateX(5px); }
.ls-cat:hover .ls-cat__link { color: #fff; }

/* ---------- Wholesale catalog categories (index.html) ----------
   Split head (intro + dark "trade accounts only" panel), 3-column category cards
   with a per-image focal point via style="--pos: x y", and a "view all" footer. */
.ls-wcats__head {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 48px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.ls-wcats__intro .ls-h2 { max-width: 17ch; }

.ls-trade {
  display: flex; gap: 18px; padding: 26px 28px; border-radius: 20px; color: #EDE8F5;
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(143, 197, 62, .16), transparent 60%),
    linear-gradient(150deg, #2A1E45 0%, #1E1530 70%);
  box-shadow: 0 24px 50px -24px rgba(30, 21, 48, .6);
}
.ls-trade { gap: 26px; align-items: center; }
.ls-trade__main { min-width: 0; }
/* catalogue cover drawn in CSS: purple book with page edges behind it */
.ls-cover {
  position: relative; flex: none; display: flex; flex-direction: column; gap: 8px;
  width: 124px; aspect-ratio: 3 / 4; padding: 16px 12px 14px 18px; border-radius: 3px 10px 10px 3px;
  background:
    radial-gradient(120px 90px at 100% 0%, rgba(205, 184, 232, .35), transparent 70%),
    linear-gradient(160deg, #6A4478 0%, #593665 35%, #3F2D65 100%);
  box-shadow:
    inset 6px 0 0 rgba(0, 0, 0, .28), inset 7px 0 0 rgba(255, 255, 255, .1),
    5px 5px 0 -1px #EFEAF6, 9px 9px 0 -2px #D9D0E6,
    0 22px 34px -12px rgba(0, 0, 0, .65);
  transform: rotate(-4deg); transition: transform .45s var(--ls-ease);
}
.ls-trade:hover .ls-cover { transform: rotate(0deg) translateY(-4px); }
.ls-cover img { width: 84px; height: auto; filter: brightness(0) invert(1); opacity: .95; }
.ls-cover__title { margin-top: auto; font-family: var(--ls-font-display); font-size: 15px; line-height: 1.15; color: #fff; }
.ls-cover__meta { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ws-btn); }
.ls-trade__eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ws-btn); }
.ls-trade .ls-trade__title { margin: 6px 0 0; font-family: var(--ls-font-display); font-weight: 500; font-size: 24px; line-height: 1.2; color: #fff; }
.ls-trade__note {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; line-height: 1.5; color: #B8AECB;
}
.ls-trade__note .ls-i { width: 16px; height: 16px; margin-top: 2px; color: var(--ws-btn); }
.ls-trade__note a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ls-trade__note a:hover { color: var(--ws-btn); }
.ls-trade__text { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: #B8AECB; }
.ls-trade__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; }
.ls-trade__signin { font-size: 14px; color: #B8AECB; }
.ls-trade__signin strong { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ls-trade__signin:hover strong { color: var(--ws-btn); }

.ls-wcats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ls-wcats__grid > li { display: flex; }
.ls-wcat {
  display: flex; flex-direction: column; width: 100%; overflow: hidden;
  background: #fff; border: 1px solid var(--ls-line); border-radius: 20px; box-shadow: var(--ls-shadow-sm);
  transition: box-shadow .35s var(--ls-ease), border-color .35s var(--ls-ease);
}
.ls-wcat:hover { border-color: #C9BFDB; box-shadow: var(--ls-shadow-lg); }
.ls-wcat:focus-visible { outline: 3px solid var(--ls-green); outline-offset: 3px; }
.ls-wcat__media { position: relative; aspect-ratio: 4 / 3; }
.ls-wcat__media img { object-position: var(--pos, 50% 50%); transition: opacity .6s var(--ls-ease), transform 1.1s var(--ls-ease); }
.ls-wcat:hover .ls-wcat__media img { transform: scale(1.05); }
.ls-wcat__num {
  position: absolute; left: 14px; top: 14px; padding: 4px 10px; border-radius: 999px;
  background: rgba(30, 21, 48, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .1em;
}
.ls-wcat__body { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 20px; }
.ls-wcat .ls-wcat__name { margin: 0; font-family: var(--ls-font-display); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--ls-green); }
.ls-wcat__desc { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: #5d5670; }
.ls-wcat__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ls-line);
  font-size: 14px; font-weight: 600; color: var(--ls-ink); transition: color .2s;
}
.ls-wcat__desc + .ls-wcat__cta { margin-top: 18px; }
.ls-wcat__cta .ls-i { width: 17px; height: 17px; transition: transform .3s var(--ls-ease); }
.ls-wcat:hover .ls-wcat__cta { color: var(--ls-green-2); }
.ls-wcat:hover .ls-wcat__cta .ls-i { transform: translateX(4px); }

.ls-wcats__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--ls-line);
}
.ls-wcats__foot p { max-width: 580px; font-size: 16px; color: var(--ls-ink); }

/* ---------- Benefits ---------- */
.ls-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ls-benefit {
  position: relative; padding: 32px 30px 34px; border-radius: var(--ls-radius);
  background: var(--ls-surface); border: 1px solid var(--ls-line);
  transition: transform .35s var(--ls-ease), box-shadow .35s var(--ls-ease), border-color .35s var(--ls-ease);
}
.ls-benefit:hover { transform: translateY(-4px); box-shadow: var(--ls-shadow); border-color: transparent; }
.ls-benefit__icon {
  display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 22px;
  border-radius: 50%; border: 1px solid var(--ls-gold-soft); background: var(--ls-bg); color: var(--ls-green);
  transition: background .35s var(--ls-ease), color .35s var(--ls-ease), border-color .35s var(--ls-ease);
}
.ls-benefit__icon .ls-i { width: 24px; height: 24px; stroke-width: 1.4; }
.ls-benefit:hover .ls-benefit__icon { background: var(--ls-green); color: #fff; border-color: var(--ls-green); }
.ls-benefit h3 { font-family: var(--ls-font-display); font-weight: 500; font-size: 22px; line-height: 1.25; margin-bottom: 8px; }
.ls-benefit p { color: var(--ls-muted); font-size: 16.5px; }

/* ---------- Products ---------- */
.ls-filters { display: flex; gap: 8px; margin: -12px 0 32px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.ls-filters::-webkit-scrollbar { display: none; }

.ls-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; transition: opacity .25s var(--ls-ease); }
.ls-products.is-switching { opacity: 0; }

.ls-product {
  display: flex; flex-direction: column; border-radius: var(--ls-radius); overflow: hidden;
  background: var(--ls-surface); border: 1px solid var(--ls-line);
  transition: transform .35s var(--ls-ease), box-shadow .35s var(--ls-ease), border-color .35s var(--ls-ease);
  animation: ls-fadeUp .5s var(--ls-ease) both; animation-delay: var(--ls-d, 0ms);
}
.ls-product:hover { transform: translateY(-4px); box-shadow: var(--ls-shadow); border-color: transparent; }
@keyframes ls-fadeUp { from { opacity: 0; transform: translateY(14px); } }
.ls-product__media { position: relative; aspect-ratio: 5 / 4; }
.ls-product:hover .ls-product__media img { transform: scale(1.05); }
.ls-product__cat {
  position: absolute; top: 14px; left: 14px; z-index: 1; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ls-ink-2);
}
/* store packshots (product on white): show the whole product instead of cropping */
.ls-product__media--packshot, .ls-product__media--packshot.is-loaded { background: #fff; border-bottom: 1px solid var(--ls-line); }
.ls-product__media--packshot img { object-fit: contain; padding: 28px 24px 18px; }

/* Guest product card: mirrors the product-page.html cards
   (category, name, "log in for wholesale price", min qty, "log in to order") */
.ls-product__img { position: absolute; inset: 0; display: block; }
.ls-product__badge {
  position: absolute; top: 14px; left: 14px; z-index: 1; padding: 4px 11px; border-radius: 999px;
  background: var(--ls-green); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.ls-product__actions {
  position: absolute; top: 14px; right: 14px; z-index: 1; display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translateX(6px); transition: opacity .25s var(--ls-ease), transform .25s var(--ls-ease);
}
.ls-product:hover .ls-product__actions, .ls-product:focus-within .ls-product__actions { opacity: 1; transform: none; }
@media (hover: none) { .ls-product__actions { opacity: 1; transform: none; } }
.ls-product__action {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: #fff; color: var(--ls-ink); box-shadow: 0 4px 12px rgba(34, 26, 51, .14);
  transition: background .2s, color .2s;
}
.ls-product__action .ls-i { width: 18px; height: 18px; }
.ls-product__action:hover { background: var(--ls-green); color: #fff; }
.ls-product__wish[aria-pressed="true"] { color: #fff; background: var(--ls-green-2); }
.ls-product__wish[aria-pressed="true"] .ls-i { fill: currentColor; }

.ls-product--guest .ls-product__body { align-items: center; padding: 20px 22px 22px; text-align: center; }
.ls-product__kicker { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #6B6478; }
.ls-product--guest .ls-product__name { margin-top: 6px; }
.ls-product__login {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 14px; font-weight: 600; color: var(--ls-green-2); transition: color .2s;
}
.ls-product__login .ls-i { width: 15px; height: 15px; }
.ls-product__login:hover { color: var(--ls-green); text-decoration: underline; text-underline-offset: 3px; }
.ls-product__minqty {
  display: inline-block; margin: 10px 0 18px; padding: 3px 12px; border-radius: 999px;
  background: var(--ls-bg-sand); color: var(--ls-green); font-size: 12.5px; font-weight: 600;
}
.ls-product--guest .ls-product__cta { margin-top: auto; }

/* Approved-account product card (index.html?account / body.ls-account) */
.ls-product__margin {
  position: absolute; top: 14px; right: 14px; z-index: 1; padding: 6px 12px; border-radius: 999px;
  background: var(--ls-green); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.ls-wsprice {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--ls-bg-sand);
}
.ls-wsprice__label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ls-green-2); }
.ls-wsprice__value { margin-top: 2px; font-size: 14px; color: var(--ls-muted); }
.ls-wsprice__value strong { font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--ls-green); letter-spacing: -.01em; }
.ls-wsprice__srp { text-align: right; }
.ls-wsprice__srp p { margin-top: 2px; font-size: 16px; font-weight: 600; color: var(--ls-ink); }
.ls-wsmin { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; color: var(--ls-ink); }
.ls-wsmin .ls-i { width: 17px; height: 17px; color: var(--ls-green-2); }
.ls-wsbuy { display: flex; gap: 10px; margin-top: auto; padding-top: 16px; }
.ls-qty { display: flex; flex: none; align-items: stretch; height: 48px; border: 1.5px solid var(--ls-line-strong); border-radius: 999px; overflow: hidden; background: #fff; }
.ls-qty__btn { width: 38px; font-size: 18px; font-weight: 600; color: var(--ls-green); transition: background .15s; }
.ls-qty__btn:hover:not(:disabled) { background: var(--ls-bg-sand); }
.ls-qty__btn:disabled { color: #B9B4C4; cursor: not-allowed; }
/* the theme styles every input (full width, border, padding); reset it inside the stepper */
.ls-qty .ls-qty__input {
  flex: none; width: 46px; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  text-align: center; font-family: var(--ls-font-body); font-size: 16px; font-weight: 600; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums; color: var(--ls-ink); background: transparent;
}
.ls-qty .ls-qty__input:focus { outline: none; background: var(--ls-bg-sand); }
.ls-qty__btn { flex: none; }
.ls-wsbuy__add { flex: 1; min-width: 0; padding: 0 16px; }
.ls-wsbuy__add .ls-i { width: 18px; height: 18px; }
.ls-wsbuy__add.is-added { --ls-btn-bg: var(--ls-green); }
.ls-wsbuy__msg { min-height: 20px; margin-top: 8px; font-size: 13px; color: var(--ls-green-2); }
.ls-product__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 22px; }
.ls-product__meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ls-muted); letter-spacing: .02em; }
.ls-product__meta span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-right: 10px; vertical-align: middle; border-radius: 50%; background: var(--ls-line-strong); }
.ls-product__name { margin-top: 8px; font-family: var(--ls-font-display); font-weight: 500; font-size: 21px; line-height: 1.25; }
.ls-product__name a { transition: color .2s; }
.ls-product__name a:hover { color: var(--ls-green); }
.ls-product__specs { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 16px 0 18px; font-size: 14px; }
.ls-product__specs dt { color: var(--ls-muted); }
.ls-product__specs dd { margin: 0; font-weight: 500; color: var(--ls-ink-2); text-align: right; }
.ls-product__price {
  display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 14px 16px;
  border-radius: 12px; background: var(--ls-bg); border: 1px dashed var(--ls-line-strong);
}
.ls-product__price-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ls-green-soft); color: var(--ls-green); flex: none; }
.ls-product__price-icon .ls-i { width: 16px; height: 16px; }
.ls-product__price strong { display: block; font-size: 16.5px; font-weight: 600; color: var(--ls-green-2); }
.ls-product__price small { font-size: 12.5px; color: var(--ls-muted); }
.ls-product__price small a { color: var(--ls-green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ls-product__cta { margin-top: 14px; }

/* skeleton */
.ls-skel { pointer-events: none; animation: none; }
.ls-skel .ls-product__media, .ls-skel__line {
  background: linear-gradient(100deg, var(--ls-bg-sand) 30%, #F5F1F8 50%, var(--ls-bg-sand) 70%);
  background-size: 200% 100%; animation: ls-shimmer 1.3s linear infinite;
}
.ls-skel__line { height: 12px; border-radius: 6px; margin-bottom: 12px; }
.ls-skel__line--lg { height: 22px; width: 75%; margin-bottom: 20px; }
.ls-skel__line--sm { width: 40%; }
.ls-skel__line--btn { height: 48px; border-radius: 999px; margin: 20px 0 0; }

.ls-products .ls-empty {
  grid-column: 1 / -1; padding: 64px 24px; border-radius: var(--ls-radius);
  border: 1px dashed var(--ls-line-strong); background: var(--ls-surface);
}
.ls-products .ls-empty p { max-width: 420px; }
.ls-products .ls-empty .ls-chips { justify-content: center; }

.ls-products__note { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 36px; font-size: 16.5px; color: var(--ls-muted); text-align: center; }
.ls-products__note .ls-i { width: 18px; height: 18px; color: var(--ls-green-2); }
.ls-products__note a { color: var(--ls-green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Steps ---------- */
.ls-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; counter-reset: step; }
.ls-steps::before {
  content: ""; position: absolute; top: 44px; left: 12.5%; right: 12.5%; height: 1px;
  background: repeating-linear-gradient(90deg, var(--ls-line-strong) 0 6px, transparent 6px 12px);
}
.ls-step { position: relative; text-align: center; padding: 0 8px; }
.ls-step__num {
  position: relative; display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 28px;
  border-radius: 50%; background: var(--ls-surface); border: 1px solid var(--ls-gold-soft); box-shadow: var(--ls-shadow-sm);
  font-family: var(--ls-font-display); font-size: 32px; font-weight: 500; color: var(--ls-green);
  transition: background .35s var(--ls-ease), color .35s var(--ls-ease), transform .35s var(--ls-ease);
}
.ls-step__num::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed rgba(89, 54, 101, .35); }
.ls-step:hover .ls-step__num { background: var(--ls-green); border-color: var(--ls-green); color: #fff; transform: translateY(-3px); }
.ls-step h3 { font-family: var(--ls-font-display); font-weight: 500; font-size: 22px; margin-bottom: 10px; }
.ls-step p { color: var(--ls-muted); font-size: 16.5px; max-width: 250px; margin-inline: auto; }
.ls-steps__cta { display: flex; justify-content: center; margin-top: 56px; }

/* ---------- Trust ---------- */
.ls-trust { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.ls-trust__media { position: relative; padding: 0 0 56px 0; }
.ls-trust__img { aspect-ratio: 4 / 5; border-radius: var(--ls-radius-lg); max-width: 480px; }
.ls-trust__img--sm {
  position: absolute; right: 0; bottom: 0; width: 44%; aspect-ratio: 1; border-radius: var(--ls-radius);
  border: 6px solid var(--ls-bg); box-shadow: var(--ls-shadow-lg); background: #fff;
}
.ls-trust__img--sm img { object-fit: cover; }
.ls-serve { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
.ls-serve__item {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px;
  border-radius: var(--ls-radius-sm); border: 1px solid var(--ls-line); background: var(--ls-surface);
  transition: border-color .3s var(--ls-ease), transform .3s var(--ls-ease);
}
.ls-serve__item:hover { border-color: var(--ls-lime); transform: translateY(-2px); }
.ls-serve__icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--ls-green-soft); color: var(--ls-green); }
.ls-serve__icon .ls-i { width: 20px; height: 20px; }
.ls-serve h3 { font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.ls-serve p { margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--ls-muted); }

/* ---------- CTA Banner ---------- */
.ls-banner { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding-block: clamp(72px, 9vw, 120px); }
.ls-banner__bg { position: absolute; inset: 0; z-index: -1; background: var(--ls-green-dark); }
.ls-banner__bg img { transform: scale(1.04); }
.ls-banner__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(14, 30, 21, .92) 0%, rgba(14, 30, 21, .72) 45%, rgba(14, 30, 21, .35) 100%);
}
.ls-banner__inner { max-width: calc(var(--ls-container) + var(--ls-gutter) * 2); }
.ls-banner__title { font-family: var(--ls-font-display); font-weight: 500; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.08; letter-spacing: -.02em; max-width: 14ch; }
.ls-banner__text { margin-top: 20px; max-width: 500px; font-size: 18px; color: rgba(255, 255, 255, .82); }
.ls-banner__ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 32px; margin-top: 36px; }

/* ---------- FAQ ---------- */
.ls-faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.ls-faq-intro { position: sticky; top: calc(var(--ls-header-h) + 32px); }
.ls-faq-intro__ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 28px; margin-top: 32px; }
.ls-faq { border-top: 1px solid var(--ls-line-strong); }
.ls-faq__item { border-bottom: 1px solid var(--ls-line-strong); }
.ls-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%;
  padding: 26px 4px; text-align: left; font-family: var(--ls-font-display); font-weight: 500;
  font-size: clamp(18px, 1.7vw, 21px); line-height: 1.35; transition: color .2s;
}
.ls-faq__q:hover { color: var(--ls-green); }
.ls-faq__icon { position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--ls-line-strong); transition: background .3s var(--ls-ease), border-color .3s var(--ls-ease), transform .35s var(--ls-ease); }
.ls-faq__icon::before, .ls-faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .35s var(--ls-ease); }
.ls-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.ls-faq__q[aria-expanded="true"] .ls-faq__icon { background: var(--ls-green); border-color: var(--ls-green); color: #fff; transform: rotate(180deg); }
.ls-faq__q[aria-expanded="true"] .ls-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.ls-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ls-ease); }
.ls-faq__a > div { overflow: hidden; }
.ls-faq__a p { padding: 0 64px 26px 4px; color: var(--ls-ink-2); font-size: 16px; }
.ls-faq__item.is-open .ls-faq__a { grid-template-rows: 1fr; }

/* ---------- Final CTA ---------- */
.ls-final { padding: 0 0 var(--ls-section-y); }
.ls-final__inner {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 64px);
  border-radius: var(--ls-radius-lg); background: var(--ls-bg-sand); border: 1px solid var(--ls-line);
}
.ls-final__inner::before, .ls-final__inner::after {
  content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%;
  border: 1px solid rgba(89, 54, 101, .28); pointer-events: none;
}
.ls-final__inner::before { left: -160px; top: -200px; box-shadow: 0 0 0 40px rgba(89, 54, 101, .05); }
.ls-final__inner::after { right: -150px; bottom: -220px; box-shadow: 0 0 0 40px rgba(89, 54, 101, .05); }
.ls-final__mark { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 24px; border-radius: 50%; background: var(--ls-green); color: var(--ls-gold); }
.ls-final__mark svg { width: 24px; height: 24px; fill: currentColor; }
.ls-final p { margin: 16px 0 32px; max-width: 520px; font-size: 18px; color: var(--ls-ink-2); }

/* Theme footer copied from index.html (#footer.bg_green-9): same layout, recoloured to the
   site's dark purple on the wholesale pages (remove this rule to get index.html's green). */
body:has(.ls-header) #footer.bg_green-9 { background-color: var(--ls-green) !important; }

/* ---------- Footer (ls-footer, no longer used on the live pages; kept for the "- Copy" backups) ----------
   Deep purple gradient (matches the mega menu). WCAG 2.1 AA on #1E1530-#2A1E45:
   body #DDD6E8 >= 10:1, muted #B8AECB >= 7.3:1, green #8FC53E >= 7.5:1;
   visible focus ring; link targets >= 24px; underlined inline links. */
.ls-footer {
  --ls-f-text: #DDD6E8;
  --ls-f-muted: #B8AECB;
  --ls-f-line: rgba(255, 255, 255, .1);
  position: relative; padding-top: clamp(40px, 5vw, 56px); color: var(--ls-f-text); font-size: 15px; line-height: 1.65;
  background:
    radial-gradient(900px 420px at 85% 0%, rgba(143, 197, 62, .08), transparent 60%),
    radial-gradient(800px 500px at 0% 100%, rgba(185, 163, 214, .12), transparent 60%),
    linear-gradient(170deg, #2A1E45 0%, #1E1530 60%, #170F26 100%);
}
.ls-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #593665, var(--ws-btn) 50%, #593665); }
.ls-footer :focus-visible { outline: 3px solid var(--ls-gold); outline-offset: 3px; border-radius: 4px; }
.ls-footer a { color: var(--ls-f-text); transition: color .2s var(--ls-ease); }
.ls-footer a:hover { color: #fff; }

/* Newsletter card */
.ls-fnews {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px 56px; align-items: center;
  padding: clamp(26px, 3vw, 36px) clamp(24px, 3vw, 40px);
  border: 1px solid var(--ls-f-line); border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
}
.ls-fnews__eyebrow { margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ws-btn); }
.ls-fnews .ls-fnews__title { font-family: var(--ls-font-display); font-weight: 500; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.25; color: #fff; max-width: 24ch; }
.ls-fnews__text { margin-top: 8px; color: var(--ls-f-muted); }
.ls-fnews__label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: #fff; }
.ls-fnews__label span { font-weight: 400; color: var(--ls-f-muted); }
.ls-fnews__row { display: flex; gap: 8px; }
.ls-footer__form input {
  flex: 1; min-width: 0; width: auto; height: 52px; padding: 0 20px; margin: 0;
  border: 1.5px solid rgba(255, 255, 255, .22); border-radius: 999px; box-shadow: none; outline: none;
  background: rgba(0, 0, 0, .22); color: #fff; font: inherit; font-size: 16px; line-height: 1.4;
  transition: border-color .2s var(--ls-ease), background .2s var(--ls-ease);
}
.ls-footer__form input::placeholder { color: #B8AECB; opacity: 1; }
.ls-footer__form input:hover { border-color: rgba(255, 255, 255, .4); }
.ls-footer__form input:focus { border-color: var(--ws-btn); background: rgba(0, 0, 0, .3); }
.ls-footer__form input[aria-invalid="true"] { border-color: #ffb4a8; }
.ls-footer__form button {
  flex: none; height: 52px; padding: 0 28px; border-radius: 999px;
  background: var(--ws-btn); color: var(--ws-btn-fg); font-weight: 700; font-size: 15px;
  transition: background .2s var(--ls-ease), transform .2s var(--ls-ease);
}
.ls-footer__form button:hover { background: var(--ws-btn-hover); }
.ls-footer__form button:active { transform: translateY(1px); }
.ls-fnews__hint { margin-top: 10px; font-size: 13px; color: var(--ls-f-muted); }
.ls-fnews__hint a, .ls-footer__a11y a { text-decoration: underline; text-underline-offset: 3px; }
.ls-fnews__msg { margin-top: 6px; font-size: 14px; font-weight: 600; min-height: 1.4em; }
.ls-fnews__msg.is-error { color: #ffc7bd; }
.ls-fnews__msg.is-success { color: var(--ws-btn); }

/* Main columns: brand + contact cards, then three link columns */
.ls-footer__top {
  display: grid; grid-template-columns: 1.55fr 1fr 1fr 1fr; gap: 40px 36px;
  padding: clamp(44px, 5vw, 60px) 0 clamp(36px, 4vw, 52px);
}
.ls-fquick { display: grid; gap: 10px; max-width: 340px; margin-top: 22px; }
.ls-fquick__item {
  display: flex; align-items: center; gap: 14px; padding: 11px 16px 11px 12px;
  border: 1px solid var(--ls-f-line); border-radius: 16px; background: rgba(255, 255, 255, .04);
  transition: background .2s var(--ls-ease), border-color .2s var(--ls-ease);
}
.ls-fquick__item:hover { background: rgba(255, 255, 255, .08); border-color: rgba(143, 197, 62, .6); }
.ls-fquick__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(143, 197, 62, .16); color: var(--ws-btn); transition: background .2s, color .2s; }
.ls-fquick__icon .ls-i { width: 19px; height: 19px; }
.ls-fquick__item:hover .ls-fquick__icon { background: var(--ws-btn); color: #fff; }
.ls-fquick__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ls-fquick__text small { font-size: 12px; letter-spacing: .04em; color: var(--ls-f-muted); }
.ls-fquick__text strong { font-size: 16.5px; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.ls-fhours { display: flex; gap: 10px; margin-top: 16px; max-width: 340px; font-size: 13.5px; line-height: 1.6; color: var(--ls-f-muted); }
.ls-fhours .ls-i { width: 17px; height: 17px; margin-top: 2px; color: var(--ls-gold); }

.ls-footer .ls-footer__heading {
  margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ls-f-line);
  font-family: var(--ls-font-display); font-size: 21px; font-weight: 500; line-height: 1.25;
  letter-spacing: 0; text-transform: none; color: #fff;
}
.ls-footer__col ul { display: grid; gap: 2px; }
.ls-footer__col a { display: inline-flex; align-items: center; min-height: 34px; transition: color .15s, transform .15s var(--ls-ease); }
.ls-footer__col a:hover { color: var(--ws-btn); transform: translateX(3px); }

/* Bottom bar */
.ls-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 32px;
  padding-block: 22px; border-top: 1px solid var(--ls-f-line); font-size: 14px;
}
.ls-footer__legal { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 24px; }
.ls-footer__copy { color: var(--ls-f-muted); }
.ls-footer__legal-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.ls-footer__legal-links a { display: inline-flex; align-items: center; min-height: 28px; }
.ls-footer__legal-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ls-social { display: flex; gap: 10px; }
.ls-social a {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04); color: #fff;
  transition: background .25s var(--ls-ease), border-color .25s var(--ls-ease), color .25s var(--ls-ease);
}
.ls-social a:hover { background: var(--ws-btn); border-color: var(--ws-btn); color: #fff; }
.ls-social .ls-i { width: 18px; height: 18px; }
.ls-pay { display: flex; flex-wrap: wrap; gap: 6px; }
.ls-pay__card {
  display: inline-grid; place-items: center; height: 28px; padding: 0 10px; border-radius: 6px;
  background: #fff; color: #221A33; font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
}
.ls-footer__a11y {
  display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 18px 0 26px;
  border-top: 1px solid var(--ls-f-line); font-size: 13px; line-height: 1.6; color: var(--ls-f-muted);
}
.ls-footer__a11y .ls-i { width: 20px; height: 20px; margin-top: 1px; color: var(--ls-gold); }
.ls-footer__a11y strong { color: #fff; font-weight: 600; }
.ls-footer__a11y a { color: #fff; }
/* ---------- Back to top ---------- */
.ls-to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 70; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%; background: var(--ls-ink); color: #fff; box-shadow: var(--ls-shadow);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: all .3s var(--ls-ease);
}
.ls-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.ls-to-top:hover { background: var(--ls-green); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1320px) {
  .ls-sitenav { padding-left: 20px; }
  .ls-sitenav .box-nav-ul { gap: 20px; }
  #header.ls-header .box-nav-ul .item-link { font-size: 18px; }
  .ls-mega__inner { grid-template-columns: 1.9fr 1fr 1fr 1fr; gap: 32px; }
}

@media (max-width: 1180px) {
  .ls-nav__link { padding: 0 10px; }
  .ls-nav__link::after { left: 10px; right: 10px; }
  .ls-header__inner { gap: 16px; }
}

@media (max-width: 1080px) {
  .ls-nav, .ls-header__account { display: none; }
  .ls-announce__inner { grid-template-columns: 1fr; text-align: center; }
  .ls-announce__social, .ls-announce__links { display: none; }
  .ls-header__burger { display: inline-grid; }
  .ls-header__inner, .ls-header--site .ls-header__inner { display: flex; gap: 8px; }
  .ls-logo { margin-right: auto; }
  .ls-header .ls-logo img { margin-left: 0; }

  .ls-features__grid { grid-template-columns: repeat(2, 1fr); }
  .ls-slider::before { background: linear-gradient(90deg, rgba(30, 20, 48, .88) 0%, rgba(30, 20, 48, .7) 60%, rgba(30, 20, 48, .45) 100%); }

  .ls-hero { grid-template-columns: 1fr; min-height: 0; }
  .ls-hero__content { padding: 56px var(--ls-gutter) 48px; }
  .ls-hero__title { max-width: 16ch; }
  .ls-hero__media { min-height: 0; aspect-ratio: 16 / 10; margin: 0 var(--ls-gutter) 0; }
  .ls-hero__img img { object-position: 35% center; }
  .ls-hero__img { border-radius: var(--ls-radius-lg); }
  .ls-hero__inset { left: 20px; bottom: -32px; width: 150px; }
  .ls-hero { padding-bottom: 56px; }

  .ls-wcats__head { grid-template-columns: 1fr; align-items: start; gap: 28px; }
  .ls-wcats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

  .ls-cat-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 210px; }
  .ls-cat { grid-column: span 2; }
  .ls-cat--xl { grid-column: span 6; grid-row: span 1; }
  .ls-cat-grid > .ls-cat:nth-child(9), .ls-cat-grid > .ls-cat:nth-child(10) { grid-column: span 3; }

  .ls-benefits { grid-template-columns: repeat(2, 1fr); }
  .ls-products { grid-template-columns: repeat(2, 1fr); }

  .ls-steps { grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
  .ls-steps::before { display: none; }

  .ls-trust { grid-template-columns: 1fr; }
  .ls-trust__media { max-width: 560px; }

  .ls-faq-wrap { grid-template-columns: 1fr; }
  .ls-faq-intro { position: static; }

  .ls-fnews { grid-template-columns: 1fr; }
  .ls-footer__top { grid-template-columns: repeat(3, 1fr); }
  .ls-footer__brand { grid-column: 1 / -1; }
  .ls-fquick { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .ls-fhours { max-width: none; }
}

@media (max-width: 680px) {
  :root { --ls-gutter: 16px; --ls-header-h: 70px; }
  body { font-size: 16.5px; }

  .ls-announce { font-size: 12px; }
  .ls-announce__inner { min-height: 40px; }
  .ls-logo img { height: 46px; }
  .ls-icon-btn { width: 40px; height: 40px; }
  .ls-hicon { min-width: 44px; height: 48px; padding: 2px 4px; }
  .ls-hicon__label { font-size: 11px; }

  .ls-slider { min-height: 0; }
  .ls-slider::before { background: rgba(30, 20, 48, .72); }
  .ls-slider__ctas { flex-direction: column; }
  .ls-slider__ctas .ls-btn { width: 100%; }
  .ls-slider__perks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; font-size: 14px; }
  .ls-features__grid { grid-template-columns: 1fr; gap: 12px; }
  .ls-feature { padding: 18px; }

  .ls-hero__content { padding-top: 40px; }
  .ls-hero__ctas { flex-direction: column; }
  .ls-hero__ctas .ls-btn { width: 100%; }
  .ls-hero__trust { align-items: flex-start; }
  .ls-hero__cats { margin-top: 32px; }
  .ls-hero__media { aspect-ratio: 4 / 3.6; }
  .ls-hero__inset { width: 112px; left: 14px; bottom: -28px; border-width: 4px; }
  .ls-hero__tag { top: auto; right: 12px; bottom: 16px; font-size: 12px; padding: 8px 14px 8px 8px; }
  .ls-hero__tag-icon { width: 32px; height: 32px; }

  .ls-section-head--split { align-items: flex-start; }
  .ls-trade { padding: 22px 20px; gap: 18px; align-items: flex-start; }
  .ls-cover { width: 86px; padding: 10px 8px 10px 13px; gap: 6px; }
  .ls-cover img { width: 58px; }
  .ls-cover__title { font-size: 11px; }
  .ls-cover__meta { font-size: 8px; }
  .ls-trade .ls-trade__title { font-size: 20px; }
  .ls-wcats__grid { grid-template-columns: 1fr; gap: 12px; }
  .ls-wcat { flex-direction: row; border-radius: 16px; }
  .ls-wcat__media { flex: none; width: 40%; aspect-ratio: auto; min-height: 148px; }
  .ls-wcat__num { left: 8px; top: 8px; padding: 2px 8px; font-size: 11px; }
  .ls-wcat__body { padding: 14px 16px; }
  .ls-wcat .ls-wcat__name { font-size: 18px; }
  .ls-wcat__desc { font-size: 13.5px; }
  .ls-wcat__cta, .ls-wcat__desc + .ls-wcat__cta { margin-top: 10px; padding-top: 10px; font-size: 13px; }
  .ls-wcats__foot .ls-btn { width: 100%; }

  .ls-cat-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; gap: 12px; }
  .ls-cat, .ls-cat-grid > .ls-cat:nth-child(9), .ls-cat-grid > .ls-cat:nth-child(10) { grid-column: span 1; }
  .ls-cat--xl { grid-column: span 2; grid-row: span 1; }
  .ls-cat__body { padding: 14px 14px; }
  .ls-cat__name { font-size: 17px; }
  .ls-cat__link { font-size: 12px; }
  .ls-cat--xl .ls-cat__name { font-size: 26px; }

  .ls-benefits { grid-template-columns: 1fr; gap: 12px; }
  .ls-benefit { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; padding: 22px; }
  .ls-benefit__icon { grid-row: span 2; margin: 0; width: 48px; height: 48px; }
  .ls-benefit h3 { font-size: 19px; margin-bottom: 4px; }

  .ls-filters { margin-inline: calc(var(--ls-gutter) * -1); padding-inline: var(--ls-gutter); }
  .ls-products { grid-template-columns: 1fr; gap: 16px; }

  .ls-steps { grid-template-columns: 1fr; row-gap: 0; }
  .ls-step { display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; text-align: left; padding: 0 0 36px; }
  .ls-step::before { content: ""; position: absolute; left: 31px; top: 72px; bottom: 8px; width: 1px; background: var(--ls-line-strong); }
  .ls-step:last-child::before { display: none; }
  .ls-step__num { grid-row: span 2; width: 64px; height: 64px; margin: 0; font-size: 24px; }
  .ls-step__num::after { inset: -5px; }
  .ls-step h3 { font-size: 20px; margin: 8px 0 6px; }
  .ls-step p { margin: 0; }
  .ls-steps__cta { margin-top: 24px; }
  .ls-steps__cta .ls-btn { width: 100%; }

  .ls-serve { grid-template-columns: 1fr; }
  .ls-trust__media { padding-bottom: 40px; }

  .ls-banner__ctas .ls-btn { width: 100%; }
  .ls-banner__bg::after { background: linear-gradient(180deg, rgba(14, 30, 21, .75), rgba(14, 30, 21, .88)); }

  .ls-faq__q { padding: 22px 0; }
  .ls-faq__a p { padding: 0 0 22px; }

  .ls-final .ls-btn { width: 100%; }

  .ls-fnews__row { flex-direction: column; }
  .ls-footer__form input { flex: none; width: 100%; }
  .ls-footer__form button { width: 100%; }
  .ls-footer__top { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .ls-fquick { grid-template-columns: 1fr; }
  .ls-footer .ls-logo--light img { margin-left: -23px; }
  .ls-footer .ls-footer__heading { font-size: 19px; }
  .ls-footer__bottom { flex-direction: column; align-items: flex-start; }
  .ls-footer__legal { flex-direction: column; align-items: flex-start; }
  .ls-to-top { bottom: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ls-js .ls-reveal { opacity: 1; transform: none; }
}

/* =========================================================
   Site-wide typography (all template pages) - matches index.html:
   Playfair Display for headlines, Albert Sans for all running text.
   styles.css sets Playfair on section/article/table/inputs, which made
   body copy serif on template pages; this resets text to Albert Sans.
   Element-level selectors only, so component classes still win.
   ========================================================= */
body { font-family: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.6; color: #000; }
section, article, blockquote, summary, table, caption, thead, tbody, tfoot, tr, th, td,
input, textarea, select, button, label { font-family: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
input::placeholder, textarea::placeholder { font-family: "Albert Sans", system-ui, sans-serif; }

h1, h2, h3, h4, h5, h6 { font-family: "Playfair Display", Georgia, serif; font-weight: 400; color: #3F2D65; }
.tf-page-title .heading { font-family: "Playfair Display", Georgia, serif; font-weight: 400; color: #3F2D65; letter-spacing: -.01em; }
.card-product .card-product-info .title { font-family: "Playfair Display", Georgia, serif; font-size: 17px; color: #3F2D65; }

/* survey / bulletin widgets (blog.html, survey.html) used Arial */
body .ls-survey-wrapper { font-family: "Albert Sans", system-ui, sans-serif; }

/* Theme buttons on the wholesale pages (Add to cart, Checkout, ...): green with dark purple text.
   Scoped to pages with the ls header so index.html keeps the theme styling. */
body:has(.ls-header) .tf-btn.btn-fill,
body:has(.ls-header) .tf-btn.lck-bg-green-9,
body:has(.ls-header) .tf-btn.bg_green-9 {
  background-color: var(--ws-btn) !important; border-color: var(--ws-btn) !important; color: var(--ws-btn-fg) !important;
}
body:has(.ls-header) .tf-btn.btn-fill:hover,
body:has(.ls-header) .tf-btn.lck-bg-green-9:hover,
body:has(.ls-header) .tf-btn.bg_green-9:hover {
  background-color: var(--ws-btn-hover) !important; border-color: var(--ws-btn-hover) !important;
}
body:has(.ls-header) .tf-btn.btn-fill :is(span, i),
body:has(.ls-header) .tf-btn.lck-bg-green-9 :is(span, i) { color: inherit !important; }
body:has(.ls-header) .tf-btn.btn-outline:hover {
  background-color: var(--ws-btn); border-color: var(--ws-btn); color: var(--ws-btn-fg);
}

/* ---------- Black text instead of grey (body.ws-ink: wholesale-home, product page,
   product detail, cart, checkout). Disabled quantity "-" buttons stay grey on purpose. ---------- */
body.ws-ink .ls-wcat__desc,
body.ws-ink .ls-product__kicker,
body.ws-ink .ls-product__meta,
body.ws-ink .ws-card-cat,
body.ws-ink .tf-breadcrumb-list .text,
body.ws-ink .ws-price-main small,
body.ws-ink .ws-srp,
body.ws-ink .ws-srp strong,
body.ws-ink .ws-size-opt em,
body.ws-ink .ws-size-opt small,
body.ws-ink .ws-pd-perks li,
body.ws-ink .tf-cart-item .tf-cart-item_product .cart-info .cart-meta-variant,
body.ws-ink .cart-meta-variant,
body.ws-ink .ws-unit,
body.ws-ink .ws-help-text,
body.ws-ink .ws-help-text strong,
body.ws-ink .ws-form-section .ws-sec-help,
body.ws-ink .ws-field label .opt,
body.ws-ink .ws-co-meta,
body.ws-ink .ws-sum-total small { color: #000; }

/* my-account.html: text that is #777 elsewhere is black here */
body.ws-acct-page .ws-status-cancelled,
body.ws-acct-page .ws-stat-label,
body.ws-acct-page .ws-table th,
body.ws-acct-page .ws-table-product small,
body.ws-acct-page .ws-info span,
body.ws-acct-page .ws-docs small,
body.ws-acct-page .ws-table td::before,
body.ws-acct-page .ws-co-meta,
body.ws-acct-page .ws-sum-total small { color: #000; }