/* ==========================================================
   Aurélle Jewels — styles for the pages added by the dynamic store
   (checkout, order confirmation, my orders, track order, CMS pages, reset password).
   style.css is the untouched original design; everything here reuses its tokens.
   ========================================================== */

/* ---------- shared ---------- */
.store-page [hidden] { display: none !important; }
.opt-guide { margin-left: 10px; font-family: var(--ff-ui); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--maroon); text-decoration: underline; text-underline-offset: 3px; }
.cart-steps .done { color: var(--maroon); }
.cart-steps .done span { background: var(--gold-100); border-color: var(--gold); color: var(--maroon); }
.cart-steps li a { display: flex; align-items: center; gap: 10px; }
@media (max-width: 767px) {
  .cart-steps .done { font-size: 0; gap: 0; }
}

/* ---------- checkout ---------- */
.checkout-page .cart-col { display: grid; gap: clamp(12px, 1.2vw, 18px); }
.co-form { display: contents; }
.co-card .contact-form { margin-top: 0; }
.co-card .cf-field label { font-size: clamp(14px, 1vw, 17px); }
.co-signin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: -4px 0 14px; font-size: clamp(14px, 1.02vw, 17px); color: var(--text-2); }
.co-signin a { font-family: var(--ff-ui); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--maroon); }
.co-check { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; font-size: clamp(14px, 1vw, 17px); color: #5d4c46; cursor: pointer; }
.co-check input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--maroon); cursor: pointer; }
.co-check a { color: var(--maroon); text-decoration: underline; text-underline-offset: 3px; }
.co-check.invalid { color: #b0182d; }
.co-billing { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: inherit; }
.co-billing[hidden] { display: none; }
.co-pay { display: grid; gap: 12px; }
.co-pay-opt { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #e6d9cc; border-radius: 6px; background: var(--white); cursor: pointer; transition: border-color .3s, box-shadow .3s, background .3s; }
.co-pay-opt:hover { border-color: #d9c2a4; }
.co-pay-opt input { position: absolute; opacity: 0; pointer-events: none; }
.co-pay-dot { flex-shrink: 0; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #cdb8a2; border-radius: 50%; transition: border-color .3s; }
.co-pay-dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--maroon); transform: scale(0); transition: transform .3s var(--ease); }
.co-pay-opt input:checked ~ .co-pay-dot { border-color: var(--maroon); }
.co-pay-opt input:checked ~ .co-pay-dot::after { transform: scale(1); }
.co-pay-opt:has(input:checked) { border-color: var(--gold); background: #fffaf2; box-shadow: 0 0 0 3px rgba(192, 140, 55, .14); }
.co-pay-opt:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.co-pay-text { flex: 1; min-width: 0; }
.co-pay-text strong { display: block; font-family: var(--ff-ui); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--maroon-900); }
.co-pay-text small { display: block; margin-top: 2px; font-size: 14.5px; color: var(--text-2); }
.co-pay-icons { display: flex; align-items: center; gap: 8px; font-size: 22px; color: #8d7d74; }
.co-pay-icons b { font-family: var(--ff-ui); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: #8d7d74; }
.co-error { display: none; margin-top: 12px; padding: 10px 14px; border-radius: 4px; background: #fbeaec; border: 1px solid #f1c7cd; font-size: 15px; color: #8e1a2b; }
.co-error.show { display: block; }
.co-items { display: grid; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #efe1d5; list-style: none; }
.co-items li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.co-thumb { position: relative; width: 58px; height: 58px; border-radius: 4px; overflow: hidden; background: var(--cream-2); }
.co-thumb img { width: 100%; height: 100%; object-fit: cover; }
.co-thumb em { position: absolute; top: -1px; right: -1px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 0 4px 0 6px; background: var(--maroon); color: var(--gold-100); font-family: var(--ff-ui); font-size: 11px; font-style: normal; font-weight: 600; line-height: 20px; text-align: center; }
.co-item-name { font-size: 15.5px; line-height: 1.25; color: #1f1512; }
.co-item-name small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.co-item-price { font-size: 15.5px; white-space: nowrap; color: #1f1512; }
.co-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: 13.5px; color: #6d5c55; text-align: center; }
.co-secure i { color: #2e6b3a; }

/* ---------- order confirmation / my orders ---------- */
.order-page .cart-main { grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 400px); }
.order-hero { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); padding: clamp(16px, 1.8vw, 30px); background: linear-gradient(135deg, #fffaf2, #fbf3e6); border: 1px solid #f0e0c4; border-radius: 6px; }
.order-hero .auth-check-anim { flex-shrink: 0; width: 76px; height: 76px; margin: 0; }
.order-hero .auth-check-anim circle { animation: auth-draw .8s var(--ease-out) .1s forwards; }
.order-hero .auth-check-anim path { animation: auth-draw .6s var(--ease-out) .6s forwards; }
.order-hero h2 { font-family: var(--ff-display); font-size: clamp(26px, 2.3vw, 40px); font-weight: 500; line-height: 1.05; color: var(--maroon); }
.order-hero p { margin-top: 6px; font-size: clamp(15px, 1.1vw, 18px); color: var(--text-2); }
.order-hero.pending { background: #fbf6ee; }
.order-hero.pending > i { flex-shrink: 0; font-size: 44px; color: var(--gold-600); }
.order-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.order-meta div { padding: 12px 14px; border: 1px solid #efe6db; border-radius: 4px; background: #fffdfa; }
.order-meta dt { font-family: var(--ff-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.order-meta dd { margin-top: 4px; font-size: 16px; color: #1f1512; }
.order-status { display: inline-block; padding: 3px 10px; border-radius: 20px; font-family: var(--ff-ui); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--gold-100); color: var(--maroon-900); }
.order-status.paid, .order-status.confirmed, .order-status.delivered { background: #e4f1e6; color: #2e6b3a; }
.order-status.failed, .order-status.cancelled { background: #fbeaec; color: #8e1a2b; }
.order-address { font-size: 16px; line-height: 1.55; color: var(--text-2); }
.order-address strong { color: #1f1512; font-weight: 600; }
.order-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.orders-list { display: grid; gap: clamp(12px, 1.2vw, 18px); }
.orders-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.orders-head h3 { font-family: var(--ff-ui); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--maroon-900); }
.orders-head small { display: block; margin-top: 3px; font-family: var(--ff-body); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.orders-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #efe1d5; }
.orders-foot strong { font-family: var(--ff-display); font-size: 24px; font-weight: 600; color: var(--maroon); }

/* ---------- content pages (policies, our story, size guide) + small forms ---------- */
.cms-page .page-banner-title { text-transform: none; }
.cms-wrap { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 360px); gap: clamp(18px, 2.6vw, 48px); align-items: start; padding: clamp(18px, 2.4vw, 44px) var(--shop-x) clamp(28px, 3vw, 56px); }
.cms-body { padding: clamp(18px, 2.2vw, 40px); background: var(--white); border: 1px solid #efe6db; border-radius: 6px; }
.cms-body .post-body { margin-top: 0; }
.cms-side { position: sticky; top: 96px; display: grid; gap: 14px; }
.cms-side .cart-card ul { display: grid; gap: 8px; list-style: none; }
.cms-side .cart-card a { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--text-2); transition: color .3s; }
.cms-side .cart-card a:hover, .cms-side .cart-card a.active { color: var(--maroon); }
.cms-side .cart-card a i { width: 18px; color: var(--gold-600); }
.mini-form-wrap { display: grid; place-items: center; padding: clamp(24px, 3vw, 60px) var(--shop-x) clamp(36px, 4vw, 72px); }
.mini-form-wrap .contact-form-card { width: min(640px, 100%); }
.mini-form-wrap .contact-form { grid-template-columns: 1fr; }
.mini-form-msg { display: none; margin-top: 12px; font-size: 15px; }
.mini-form-msg.err { display: block; color: #b0182d; }
.mini-form-msg.ok { display: block; color: #2e6b3a; }

@media (max-width: 991px) {
  .order-page .cart-main, .cms-wrap { grid-template-columns: 1fr; }
  .cms-side { position: static; }
}
@media (max-width: 767px) {
  .co-billing { grid-template-columns: 1fr; }
  .co-pay-icons { display: none; }
}

/* product options that don't exist with the other selected options */
.purity-btn.is-unavailable { opacity: .45; text-decoration: line-through; }

/* pagination numbers are links (crawlable); keep them looking like the original buttons */
a.page-btn { display: inline-grid; place-items: center; text-decoration: none; }

/* ---------- accessibility helper ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 404 + error pages ---------- */
.err-page { background: var(--cream); }
.err-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(48px, 7vw, 120px) var(--shop-x) clamp(40px, 5vw, 90px);
  background: radial-gradient(120% 90% at 50% 0%, #fffaf2 0%, var(--cream-2) 55%, var(--cream-3) 100%);
  border-bottom: 1px solid var(--line);
}
.err-hero::before, .err-hero::after {
  content: ''; position: absolute; border: 1px solid rgba(192, 140, 55, .28); border-radius: 50%; pointer-events: none;
}
.err-hero::before { width: clamp(260px, 34vw, 560px); aspect-ratio: 1; left: -8%; top: -30%; }
.err-hero::after { width: clamp(200px, 26vw, 420px); aspect-ratio: 1; right: -6%; bottom: -35%; }
.err-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.err-code {
  display: inline-flex; align-items: center; gap: .08em; margin: 0 0 6px;
  font-family: var(--ff-display); font-weight: 600; line-height: 1;
  font-size: clamp(88px, 13vw, 190px); letter-spacing: .02em;
  background: linear-gradient(180deg, var(--gold-300) 0%, var(--gold) 45%, var(--gold-600) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.err-code i {
  font-size: .62em; color: var(--maroon); -webkit-text-fill-color: var(--maroon);
  animation: err-float 4s ease-in-out infinite;
}
@keyframes err-float { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-8%) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .err-code i { animation: none; } }
.err-eyebrow {
  display: block; margin-bottom: 12px; font-family: var(--ff-ui); font-size: clamp(10px, .85vw, 13px);
  font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-600);
}
.err-title { margin: 0 0 12px; font-family: var(--ff-display); font-weight: 600; font-size: clamp(28px, 3.2vw, 50px); line-height: 1.12; color: var(--maroon-900); }
.err-text { max-width: 560px; margin: 0 auto clamp(20px, 2vw, 30px); font-size: clamp(16px, 1.2vw, 20px); line-height: 1.55; color: var(--text-2); }
.err-search {
  position: relative; display: flex; gap: 8px; max-width: 560px; margin: 0 auto clamp(18px, 1.8vw, 26px);
  padding: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--shadow-sm);
}
.err-search > i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 15px; }
.err-search input {
  flex: 1; min-width: 0; padding: 10px 12px 10px 40px; border: 0; outline: 0; background: transparent;
  font-family: var(--ff-body); font-size: 17px; color: var(--text);
}
.err-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(192, 140, 55, .16); }
.err-search .btn { padding-inline: clamp(18px, 1.8vw, 28px); }
.err-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 22px; }
.err-link {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-ui); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--maroon); border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.err-link:hover { border-color: var(--gold); color: var(--gold-600); }
.err-section { max-width: 1240px; margin: 0 auto; padding: clamp(32px, 3.6vw, 64px) var(--shop-x) 0; }
.err-h2 { margin: 0 0 clamp(16px, 1.6vw, 26px); text-align: center; font-family: var(--ff-display); font-weight: 600; font-size: clamp(24px, 2.2vw, 36px); color: var(--maroon-900); }
.err-cats { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 20px); list-style: none; margin: 0; padding: 0; }
.err-cats a { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-family: var(--ff-ui); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.err-cat-img { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; border: 1px solid var(--line); background: var(--white); }
.err-cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.err-cats a:hover .err-cat-img img { transform: scale(1.08); }
.err-cats a:hover { color: var(--maroon); }
.err-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 28px); list-style: none; margin: 0; padding: 0; }
.err-product { display: flex; flex-direction: column; gap: 4px; height: 100%; padding-bottom: 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.err-product:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.err-product-img { display: block; aspect-ratio: 1; overflow: hidden; margin-bottom: 8px; background: var(--cream-2); }
.err-product-img img { width: 100%; height: 100%; object-fit: cover; }
.err-product strong, .err-product small, .err-product em { padding: 0 14px; }
.err-product strong { font-family: var(--ff-display); font-size: 19px; font-weight: 600; line-height: 1.2; color: var(--maroon-900); }
.err-product small { font-family: var(--ff-ui); font-size: 11px; letter-spacing: .06em; color: var(--muted); }
.err-product em { font-style: normal; font-family: var(--ff-ui); font-size: 15px; font-weight: 600; color: var(--text); }
.err-help { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.2vw, 20px); padding-bottom: clamp(40px, 4.5vw, 80px); }
.err-help a { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.err-help a:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.err-help i { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--gold-100); color: var(--maroon); font-size: 17px; }
.err-help span { display: flex; flex-direction: column; min-width: 0; }
.err-help strong { font-family: var(--ff-ui); font-size: 13px; font-weight: 600; color: var(--text); }
.err-help small { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.err-ref { margin: 0; padding: 0 var(--shop-x) clamp(30px, 3vw, 50px); text-align: center; font-family: var(--ff-ui); font-size: 11px; color: var(--muted); }
.err-ref code { font-size: 11px; user-select: all; }
@media (max-width: 1023px) {
  .err-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .err-cats a { font-size: 11px; letter-spacing: .04em; overflow-wrap: anywhere; }
  .err-products, .err-help { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .err-search { flex-direction: column; padding: 8px; }
  .err-search > i { top: 30px; }
  .err-search .btn { justify-content: center; }
  .err-products { gap: 10px; }
  .err-help { grid-template-columns: 1fr; }
}

/* ---------- contact form: image captcha ---------- */
/* image, refresh button and input share one height (same clamp as .cf-field input); the image keeps its 180×56 shape */
.cf-captcha-row { --cf-h: clamp(40px, 3.1vw, 58px); display: flex; align-items: stretch; gap: 10px; }
.cf-captcha-img {
  flex-shrink: 0; display: block; width: auto; height: var(--cf-h); aspect-ratio: 180 / 56; border: 1px solid var(--line); border-radius: 4px; background: #f5f0e6;
  user-select: none; -webkit-user-drag: none;
}
.cf-captcha-refresh {
  flex-shrink: 0; display: grid; place-items: center; width: var(--cf-h); height: var(--cf-h); border: 1px solid var(--line); border-radius: 4px;
  background: var(--white); color: var(--maroon); font-size: 16px; cursor: pointer; transition: border-color .3s var(--ease), color .3s var(--ease);
}
.cf-captcha-refresh:hover, .cf-captcha-refresh:focus-visible { border-color: var(--gold); color: var(--gold-600); }
.cf-captcha-refresh.spin i { animation: cf-spin .6s linear; }
@keyframes cf-spin { to { transform: rotate(360deg); } }
.cf-field .cf-captcha-row input { flex: 1; min-width: 0; height: var(--cf-h); text-transform: uppercase; letter-spacing: .3em; font-family: var(--ff-ui); }
.cf-field .cf-captcha-row input::placeholder { text-transform: none; letter-spacing: normal; font-family: var(--ff-body); }
.cf-captcha-help { margin-top: 4px; font-size: 13px; color: var(--muted); }
.cf-field.invalid .cf-captcha-help { display: none; }
@media (max-width: 420px) {
  .cf-captcha-row { flex-wrap: wrap; }
  .cf-captcha-img { width: calc(100% - var(--cf-h) - 10px); height: auto; }
  .cf-captcha-refresh { height: auto; }
  .cf-field .cf-captcha-row input { flex-basis: 100%; }
}

/* =====================================================================
   Slim scrollbars across the storefront (window, popups, cart drawer, lists).
   Chrome / Edge / Safari: 6px maroon bar on a clear track (the ::-webkit-scrollbar rules).
   Firefox has no such rules and gets its own "thin" style instead.
   The standard scrollbar-width / scrollbar-color are kept away from Chrome on purpose:
   when they are set, Chrome ignores the custom width and draws its wider default.
   Rows that hide their scrollbar on purpose (carousels, chips, tabs) stay hidden.
   ===================================================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(107, 10, 25, .22); }
::-webkit-scrollbar-thumb:hover { background: rgba(107, 10, 25, .45); }
::-webkit-scrollbar-corner { background: transparent; }

/* dark video playlist: gold bar */
@supports selector(::-webkit-scrollbar) {
  .vp-items { scrollbar-width: auto; scrollbar-color: auto; }
}
.vp-items::-webkit-scrollbar-thumb { background: rgba(227, 197, 143, .3); }
.vp-items::-webkit-scrollbar-thumb:hover { background: rgba(227, 197, 143, .55); }

@supports not selector(::-webkit-scrollbar) {
  html, * { scrollbar-width: thin; scrollbar-color: rgba(107, 10, 25, .3) transparent; }
}

/* ---------- My Account: left menu (Order History | Wishlist | Address Book | Edit Profile | Change Password | Logout) ---------- */
.cart-page .acct-main { grid-template-columns: clamp(240px, 21vw, 310px) minmax(0, 1fr); }
.acct-side {
  position: sticky; top: 96px; overflow: hidden;
  background: var(--white); border: 1px solid #efe6db; border-radius: 6px; box-shadow: 0 2px 14px -10px rgba(63, 9, 17, .2);
}
.acct-user { display: flex; align-items: center; gap: 12px; padding: clamp(14px, 1.3vw, 20px); background: linear-gradient(135deg, #fffaf2, #fbf3e6); border-bottom: 1px solid #f0e0c4; }
.acct-user > span:last-child { display: grid; min-width: 0; }
.acct-avatar {
  display: grid; place-items: center; flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%;
  background: var(--maroon); color: var(--gold-300); font-family: var(--ff-display); font-size: 21px; font-weight: 600; letter-spacing: .04em;
}
.acct-user small { font-family: var(--ff-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.acct-user strong { font-family: var(--ff-display); font-size: clamp(19px, 1.4vw, 23px); font-weight: 600; line-height: 1.15; color: var(--maroon-900); overflow-wrap: anywhere; }
.acct-user em { margin-top: 2px; overflow: hidden; font-style: normal; font-size: 13.5px; color: var(--text-2); text-overflow: ellipsis; white-space: nowrap; }
.acct-nav { display: grid; gap: 2px; padding: 8px; }
.acct-nav a, .acct-logout {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 4px; background: none; cursor: pointer; text-align: left;
  font-family: var(--ff-ui); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.acct-nav a > i:first-child, .acct-logout i { width: 18px; text-align: center; color: var(--gold-600); transition: color .3s var(--ease); }
.acct-nav-arrow { margin-left: auto; font-size: 10px; opacity: 0; transform: translateX(-4px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.acct-nav a:hover, .acct-nav a:focus-visible { background: #fbf5ee; color: var(--maroon); }
.acct-nav a:hover .acct-nav-arrow, .acct-nav a.active .acct-nav-arrow { opacity: 1; transform: none; }
.acct-nav a.active { background: var(--maroon); color: var(--white); }
.acct-nav a.active > i { color: var(--gold-300); }
.acct-logout { margin-top: 6px; border-top: 1px solid #f1e7dc; border-radius: 0 0 4px 4px; color: #8e1a2b; }
.acct-logout:hover, .acct-logout:focus-visible { background: #fbeaec; }
.acct-logout i { color: #b0182d; }
.acct-body { display: grid; gap: clamp(14px, 1.4vw, 22px); min-width: 0; }
.acct-intro { margin: 0; font-size: clamp(15px, 1.05vw, 17px); color: var(--text-2); }
.acct-form.contact-form { margin-top: clamp(14px, 1.4vw, 22px); }
.acct-form-narrow.contact-form { max-width: 520px; grid-template-columns: 1fr; }
.acct-pw { position: relative; }
.acct-pw input { padding-right: 48px; }
.acct-pw button { position: absolute; top: 0; right: 0; width: 48px; height: 100%; border: 0; background: none; color: var(--muted); cursor: pointer; }
.acct-pw button:hover, .acct-pw button:focus-visible { color: var(--maroon); }
.acct-wish-grid .shop-card { transition: opacity .4s var(--ease), transform .4s var(--ease); }
.acct-wish-grid .shop-card.leaving { opacity: 0; transform: scale(.96); }

/* ---------- My Account: profile photo (left menu, Edit Profile, account popup) ---------- */
.acct-avatar, .pf-photo-img, .auth-avatar { position: relative; overflow: hidden; }
.acct-avatar:not(.has-photo)::before, .pf-photo-img:not(.has-photo)::before { content: attr(data-initials); }
.acct-avatar img, .pf-photo-img img, .auth-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-photo { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2vw, 32px); }
.pf-photo-img {
  display: grid; place-items: center; flex-shrink: 0; width: clamp(96px, 8vw, 124px); height: clamp(96px, 8vw, 124px); border-radius: 50%;
  background: var(--maroon); color: var(--gold-300); font-family: var(--ff-display); font-size: clamp(36px, 3vw, 46px); font-weight: 600; letter-spacing: .04em;
  box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--gold-300), 0 12px 26px -16px rgba(63, 9, 17, .6);
}
.pf-photo-spin { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(43, 8, 14, .55); color: var(--white); font-size: 22px; opacity: 0; transition: opacity .3s var(--ease); }
.pf-photo-img.busy .pf-photo-spin { opacity: 1; }
.pf-photo-body { display: grid; gap: 10px; flex: 1 1 260px; min-width: 0; }
.pf-photo-body > p:first-child { margin: 0; font-size: clamp(15px, 1.05vw, 17px); color: var(--text-2); }
.pf-photo-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-photo-upload { position: relative; cursor: pointer; }
.pf-photo-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pf-photo-upload:focus-within { box-shadow: 0 0 0 3px rgba(192, 140, 55, .35); }
.pf-photo-upload:has(input:disabled), .pf-photo-actions button:disabled { opacity: .6; pointer-events: none; }
.pf-photo-hint { font-size: 13px; color: var(--muted); }
@media (max-width: 991px) {
  .cart-page .acct-main { grid-template-columns: 1fr; }
  /* phones / tablets: the menu becomes one scrollable row of pills above the page */
  .acct-side { position: static; overflow: visible; background: none; border: 0; box-shadow: none; }
  .acct-user { display: none; }
  .acct-nav { display: flex; gap: 8px; margin: 0 calc(var(--cart-x) * -1); padding: 2px var(--cart-x) 6px; overflow-x: auto; scrollbar-width: none; }
  .acct-nav::-webkit-scrollbar { display: none; }
  .acct-nav a, .acct-logout { flex-shrink: 0; width: auto; gap: 8px; padding: 9px 16px; border: 1px solid #e6d8c9; border-radius: 30px; background: var(--white); white-space: nowrap; }
  .acct-nav a.active { border-color: var(--maroon); }
  .acct-nav-arrow { display: none; }
  .acct-logout { margin-top: 0; border-top: 1px solid #f0c9cf; border-color: #f0c9cf; border-radius: 30px; }
}

/* ---------- My Account: address book ---------- */
.ab-wrap { display: grid; gap: clamp(14px, 1.4vw, 22px); }
.ab-intro { margin: 0; font-size: clamp(15px, 1.1vw, 18px); color: var(--text-2); }
.ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: clamp(12px, 1.3vw, 20px); }
.ab-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 230px; padding: clamp(16px, 1.4vw, 22px);
  background: var(--white); border: 1px solid #efe6db; border-radius: 6px; box-shadow: 0 2px 14px -10px rgba(63, 9, 17, .2);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ab-card:hover { box-shadow: 0 10px 26px -16px rgba(63, 9, 17, .35); }
.ab-card.is-default { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 10px 26px -18px rgba(169, 119, 38, .6); }
.ab-card.just-saved { animation: ab-flash 1.6s var(--ease); }
@keyframes ab-flash { 0% { background: #fff6e4; } 100% { background: var(--white); } }
.ab-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ab-label { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ff-ui); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--maroon); }
.ab-label i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold-100); color: var(--maroon); font-size: 12px; }
.ab-default { padding: 3px 10px; border-radius: 20px; background: var(--maroon); color: var(--white); font-family: var(--ff-ui); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ab-name { font-family: var(--ff-display); font-size: clamp(20px, 1.5vw, 24px); font-weight: 600; line-height: 1.2; color: var(--maroon-900); }
.ab-lines { margin: 0; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; }
.ab-phone { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-family: var(--ff-ui); font-size: 13px; color: var(--text); }
.ab-phone i { color: var(--gold-600); font-size: 12px; }
.ab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: auto; padding-top: 12px; border-top: 1px solid #f1e7dc; }
.ab-actions button {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font-family: var(--ff-ui); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--maroon);
}
.ab-actions button:hover, .ab-actions button:focus-visible { color: var(--gold-600); }
.ab-actions button:disabled { opacity: .5; cursor: default; }
.ab-confirm { font-size: 15px; color: var(--text); }
.ab-actions .ab-yes { padding: 6px 12px; border-radius: 3px; background: #b0182d; color: var(--white); }
.ab-actions .ab-yes:hover, .ab-actions .ab-yes:focus-visible { background: #8e1a2b; color: var(--white); }
.ab-add {
  align-items: center; justify-content: center; gap: 12px; border: 1.5px dashed #dcc7ad; background: #fffaf2; box-shadow: none; cursor: pointer;
  font-family: var(--ff-ui); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--maroon);
}
.ab-add i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--white); border: 1px solid #e6d3bb; color: var(--gold-600); font-size: 18px; transition: transform .4s var(--ease); }
.ab-add:hover { border-color: var(--gold); background: #fff6e8; }
.ab-add:hover i { transform: rotate(90deg); }
.ab-form-card .contact-form { margin-top: 0; }
.ab-field-label { margin-bottom: clamp(5px, .7vw, 12px); font-size: clamp(14px, 1.07vw, 19px); font-weight: 500; color: #1f1512; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-chips label { position: relative; cursor: pointer; }
.ab-chips input { position: absolute; opacity: 0; pointer-events: none; }
.ab-chips span {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid #e3d3c3; border-radius: 30px; background: var(--white);
  font-family: var(--ff-ui); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2);
  transition: border-color .25s, background .25s, color .25s;
}
.ab-chips span i { color: var(--gold-600); }
.ab-chips input:checked + span { border-color: var(--maroon); background: var(--maroon); color: var(--white); }
.ab-chips input:checked + span i { color: var(--gold-300); }
.ab-chips input:focus-visible + span { box-shadow: 0 0 0 3px rgba(192, 140, 55, .3); }
.ab-form-msg { grid-column: 1 / -1; margin: 0; padding: 10px 14px; border-radius: 4px; background: #fbeaec; color: #8e1a2b; font-size: 15px; }
.ab-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- checkout: pick a saved address ---------- */
.co-saved { display: grid; gap: 10px; margin-bottom: clamp(14px, 1.3vw, 20px); }
.co-saved-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.co-saved-head strong { font-family: var(--ff-ui); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--maroon-900); }
.co-saved-head a { font-family: var(--ff-ui); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--maroon); text-decoration: underline; text-underline-offset: 3px; }
.co-saved-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 10px; }
.co-saved-item { position: relative; cursor: pointer; }
.co-saved-item input { position: absolute; opacity: 0; pointer-events: none; }
.co-saved-item > span {
  display: grid; gap: 3px; height: 100%; padding: 12px 14px 12px 40px; border: 1px solid #e6d8c9; border-radius: 6px; background: var(--white);
  font-size: 14.5px; line-height: 1.45; color: var(--text-2); transition: border-color .25s, box-shadow .25s, background .25s;
}
.co-saved-item > span::before {
  content: ''; position: absolute; left: 14px; top: 15px; width: 16px; height: 16px; border: 1.5px solid #c9b29a; border-radius: 50%; background: var(--white);
}
.co-saved-item b { font-family: var(--ff-ui); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--maroon); }
.co-saved-item b em { margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: var(--gold-100); font-style: normal; font-size: 9.5px; color: var(--maroon-900); }
.co-saved-item strong { font-family: var(--ff-body); font-size: 16px; font-weight: 600; color: var(--text); }
.co-saved-item input:checked + span { border-color: var(--maroon); background: #fffaf5; box-shadow: 0 0 0 1px var(--maroon); }
.co-saved-item input:checked + span::before { border-color: var(--maroon); background: radial-gradient(circle, var(--maroon) 45%, var(--white) 50%); }
.co-saved-item input:focus-visible + span { box-shadow: 0 0 0 3px rgba(192, 140, 55, .3); }
.co-saved-new > span { display: flex; align-items: center; gap: 8px; color: var(--maroon); font-family: var(--ff-ui); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 575px) {
  .acct-nav a, .acct-logout { padding: 8px 12px; font-size: 11px; }
  .ab-card { min-height: 0; }
}

/* ---------- order page: delivery tracker (Confirmed → Processing → Packed → Shipped → In transit → Out for delivery → Delivered) ---------- */
.order-track { list-style: none; margin: 0; padding: 0; }
.order-track li { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.order-track li:last-child { padding-bottom: 0; }
.order-track li:not(:last-child)::before { content: ''; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: #eadfd3; }
.order-track li.done:not(:last-child)::before { background: var(--gold); }
.ot-dot {
  position: relative; z-index: 1; display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--white); border: 1.5px solid #e2d3c3; color: #b9a99c; font-size: 13px;
}
.order-track .done .ot-dot { background: var(--gold); border-color: var(--gold); color: var(--white); }
.order-track .current .ot-dot { background: var(--maroon); border-color: var(--maroon); color: var(--gold-300); box-shadow: 0 0 0 5px rgba(107, 10, 25, .1); }
.ot-body { display: grid; gap: 2px; min-width: 0; padding-top: 6px; }
.ot-body strong { font-family: var(--ff-ui); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #a3938a; }
.order-track .done strong { color: var(--text); }
.order-track .current strong { color: var(--maroon); }
.ot-body small { font-size: 15px; line-height: 1.45; color: var(--text-2); }
.ot-body em { font-style: normal; font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.ot-body em a { color: var(--maroon); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================
   Sitemap page (/sitemap) — Views/Pages/Sitemap.cshtml
   Phone first: one column; two from 768px; three from 1200px.
   ========================================================== */
.smap-wrap { padding: clamp(18px, 2.4vw, 44px) var(--shop-x) clamp(30px, 3vw, 60px); }
.smap-tools { display: grid; gap: 14px; margin-bottom: clamp(18px, 2vw, 32px); }
.smap-lead { font-size: 18px; line-height: 1.45; color: var(--text-2); }
.smap-lead strong { font-weight: 600; color: var(--maroon); }
.smap-search {
  display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px; max-width: 560px;
  background: var(--white); border: 1px solid #e3d8cb; border-radius: 40px; transition: border-color .3s, box-shadow .3s;
}
.smap-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(192, 140, 55, .14); }
.smap-search i { color: var(--gold-600); }
.smap-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; font-size: 16px; color: var(--text); }
.smap-search input::placeholder { color: #a99a92; }
/* section chips: one swipeable row on phones, wrapping from tablets */
.smap-jump { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.smap-jump::-webkit-scrollbar { display: none; }
.smap-jump a {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 40px;
  background: var(--white); border: 1px solid #e8dccd; color: var(--text);
  font-family: var(--ff-ui); font-size: 12px; font-weight: 600; letter-spacing: .06em; white-space: nowrap;
  transition: background .3s, color .3s, border-color .3s;
}
.smap-jump a i { color: var(--gold-600); font-size: 12px; transition: color .3s; }
.smap-none { margin-bottom: 18px; padding: 16px 18px; border-radius: 6px; background: var(--white); border: 1px dashed #e3d8cb; font-size: 17px; color: var(--text-2); }
.smap-none a { color: var(--maroon); text-decoration: underline; text-underline-offset: 3px; }

/* masonry-style columns: each card keeps its own height, no empty gaps beside a long one */
.smap-grid { column-count: 1; column-gap: clamp(14px, 1.6vw, 24px); }
.smap-grid .smap-section { break-inside: avoid; margin-bottom: clamp(14px, 1.6vw, 24px); }
.smap-section {
  display: block; scroll-margin-top: 110px;
  padding: clamp(18px, 1.8vw, 28px); background: var(--white); border: 1px solid #efe6db; border-radius: 6px;
}
.smap-section h2 {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #f0e7dc;
  font-family: var(--ff-display); font-size: clamp(22px, 1.8vw, 28px); font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: var(--maroon-900);
}
.smap-ic { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--gold-100); color: var(--maroon); font-size: 15px; }
.smap-groups { display: grid; gap: 18px; }
.smap-section--wide .smap-groups { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 18px 28px; }
.smap-group h3 { margin-bottom: 8px; font-family: var(--ff-ui); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-600); }
.smap-group h3 a { transition: color .3s; }
.smap-group ul { display: grid; gap: 2px; }
.smap-group li { display: flex; align-items: center; gap: 10px; }
.smap-group li[hidden], .smap-group[hidden], .smap-section[hidden] { display: none; }
.smap-group li a {
  position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 4px 0;
  font-size: 17px; line-height: 1.3; color: var(--text-2); transition: color .3s, padding .3s var(--ease);
}
/* the same round chevron as the footer links */
.smap-group li a::before {
  content: '\f105'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  display: inline-grid; place-items: center; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%;
  font-size: 8px; line-height: 1; color: var(--gold-600); border: 1px solid rgba(192, 140, 55, .45);
  transition: background .35s var(--ease), color .35s, border-color .35s;
}
.smap-group li small {
  margin-left: auto; padding: 1px 8px; border-radius: 20px; background: var(--cream-2);
  font-family: var(--ff-ui); font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap;
}
@media (hover: hover) {
  .smap-jump a:hover { background: var(--maroon); border-color: var(--maroon); color: var(--white); }
  .smap-jump a:hover i { color: var(--gold-300); }
  .smap-group h3 a:hover { color: var(--maroon); }
  .smap-group li a:hover { color: var(--maroon); padding-left: 4px; }
  .smap-group li a:hover::before { background: var(--maroon); border-color: var(--maroon); color: var(--white); }
}
.smap-group li a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

@media (min-width: 768px) {
  .smap-jump { flex-wrap: wrap; overflow: visible; }
  .smap-grid { column-count: 2; }
  .smap-group li a { min-height: 30px; font-size: 16.5px; }
}
@media (min-width: 1200px) {
  .smap-grid { column-count: 3; }
}

/* ---------- quick view: eye button on product cards + popup (shop.js "quick view") ---------- */
.qv-btn {
  position: absolute; z-index: 5; right: 8px; top: calc(14px + clamp(26px, 2.1vw, 34px));
  display: grid; place-items: center; width: clamp(26px, 2.1vw, 34px); height: clamp(26px, 2.1vw, 34px); border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--maroon); font-size: clamp(11px, .95vw, 14px); box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), background .3s, color .3s;
}
.qv-btn:hover, .qv-btn:focus-visible { transform: scale(1.12); background: var(--maroon); color: var(--white); }
@media (pointer: coarse) { .qv-btn { width: 34px; height: 34px; top: 48px; } }

.qv[hidden] { display: none; }
.qv { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; }
.qv-backdrop { position: absolute; inset: 0; background: rgba(28, 6, 10, .55); opacity: 0; transition: opacity .25s; }
.qv-dialog {
  position: relative; width: 100%; max-height: calc(100vh - 40px); overflow: auto; border-radius: 8px; background: var(--white);
  box-shadow: 0 30px 80px -30px rgba(28, 6, 10, .7); opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .25s, transform .3s var(--ease);
}
.qv.open .qv-backdrop { opacity: 1; }
.qv.open .qv-dialog { opacity: 1; transform: none; }
.qv-close {
  position: absolute; z-index: 3; top: 12px; right: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .95); color: var(--maroon); font-size: 16px; box-shadow: var(--shadow-sm); transition: background .3s, color .3s;
}
.qv-close:hover, .qv-close:focus-visible { background: var(--maroon); color: var(--white); }
.qv-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
/* previous / next: the piece slides out towards the arrow pressed and the next one glides in from the other side (--qv-dir: 1 next, -1 previous) */
.qv-body { transition: opacity .2s ease, transform .32s var(--ease); }
.qv-body.qv-out { opacity: 0; transform: translateX(calc(var(--qv-dir, 1) * -36px)); transition-duration: .18s, .2s; }
.qv-body.qv-enter { opacity: 0; transform: translateX(calc(var(--qv-dir, 1) * 36px)); transition: none; }
.qv-loading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 280px; padding: 30px; font-size: 16px; color: var(--text-2); }
.qv-spinner { width: 22px; height: 22px; border: 2px solid #eadfd3; border-top-color: var(--maroon); border-radius: 50%; animation: qv-spin .8s linear infinite; }
@keyframes qv-spin { to { transform: rotate(360deg); } }
.qv-gallery { display: grid; gap: 10px; align-content: start; padding: 18px; background: #faf6f1; }
.qv-main { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--white); }
.qv-main img { width: 100%; height: 100%; object-fit: cover; }
.qv-badge { position: absolute; bottom: 12px; left: 12px; padding: 4px 10px; border-radius: 3px; background: var(--maroon); color: var(--white); font-family: var(--ff-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.qv-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.qv-thumbs::-webkit-scrollbar { display: none; }
.qv-thumb { flex: 0 0 auto; width: 64px; height: 64px; overflow: hidden; border: 1px solid #e6d8c9; border-radius: 4px; background: var(--white); opacity: .7; transition: opacity .25s, border-color .25s, box-shadow .25s; }
.qv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.qv-thumb:hover, .qv-thumb.active { opacity: 1; border-color: var(--maroon); box-shadow: inset 0 0 0 1px var(--maroon); }
.qv-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: clamp(22px, 2.4vw, 36px) clamp(18px, 2.4vw, 36px) clamp(18px, 2vw, 28px); }
.qv-eyebrow { margin: 0; font-family: var(--ff-ui); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-600); }
.qv-title { margin: 0; padding-right: 40px; font-family: var(--ff-display); font-size: clamp(26px, 2.4vw, 36px); font-weight: 600; line-height: 1.1; color: var(--maroon-900); }
.qv-rating { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: var(--text); }
.qv-rating > span:last-child { color: var(--muted); }
.qv-stars { color: var(--gold); font-size: 12px; letter-spacing: 1px; }
.qv-price { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 0; font-family: var(--ff-display); font-size: clamp(26px, 2.2vw, 32px); font-weight: 600; color: var(--maroon); }
.qv-price s { font-family: var(--ff-body); font-size: 16px; font-weight: 400; color: var(--muted); }
.qv-meta { margin: 0; font-size: 14.5px; color: var(--text-2); }
.qv-tagline { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.qv-opt { display: grid; gap: 6px; }
.qv-opt-label { font-family: var(--ff-ui); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.qv-opt .purity-opts { gap: 8px; margin-top: 0; }
.qv-opt .purity-btn { min-width: 0; height: 38px; padding: 0 14px; font-size: 14px; }
.qv .purity-btn.is-unavailable { opacity: .45; text-decoration: line-through; }
.qv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.qv-actions .qty button { width: 38px; height: 44px; }
.qv-actions .qty input { width: 44px; }
.qv-add { flex: 1 1 160px; justify-content: center; height: 46px; }
.qv-add:disabled { opacity: .55; cursor: not-allowed; }
.qv-wish { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border: 1px solid #e1d6c9; border-radius: 3px; background: var(--white); color: var(--maroon); font-size: 18px; transition: background .3s, color .3s, border-color .3s; }
.qv-wish:hover, .qv-wish.active { border-color: var(--maroon); background: var(--maroon); color: var(--white); }
.qv-assure { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px solid #f0e7dd; font-size: 13.5px; color: var(--text-2); }
.qv-assure i { margin-right: 6px; color: var(--gold-600); }
.qv-more { align-self: flex-start; margin-top: auto; padding-top: 6px; font-family: var(--ff-ui); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--maroon); text-decoration: underline; text-underline-offset: 4px; }
/* previous / next: big arrows beside the popup on wide screens, a "‹ 3 / 12 ›" pill in its corner on smaller ones */
.qv-frame { position: relative; width: min(980px, 100%); }
.qv-nav[hidden] { display: none; }
.qv-nav { position: absolute; z-index: 4; top: 12px; left: 12px; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .95); box-shadow: var(--shadow-sm); opacity: 0; transition: opacity .25s; }
.qv.open .qv-nav { opacity: 1; }
.qv-arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--maroon); font-size: 13px; transition: background .25s, color .25s; }
.qv-arrow:hover, .qv-arrow:focus-visible { background: var(--maroon); color: var(--white); }
.qv-count { min-width: 44px; padding: 0 2px; font-family: var(--ff-ui); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-align: center; color: var(--text); font-variant-numeric: tabular-nums; }
@media (min-width: 1100px) {
  .qv-nav { position: static; padding: 0; background: none; box-shadow: none; }
  .qv-arrow { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; background: rgba(255, 255, 255, .94); font-size: 18px; box-shadow: 0 10px 30px -12px rgba(28, 6, 10, .6); }
  .qv-prev { left: -72px; }
  .qv-next { right: -72px; }
  .qv-arrow:hover, .qv-arrow:focus-visible { transform: scale(1.06); }
  .qv-count { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); color: rgba(255, 255, 255, .9); }
}
@media (max-width: 767px) {
  .qv { padding: 0; align-items: end; }
  .qv-frame { width: 100%; }
  .qv-dialog { max-height: 92vh; border-radius: 14px 14px 0 0; }
  .qv-body { grid-template-columns: 1fr; }
  .qv-gallery { padding: 12px; }
  .qv-main { aspect-ratio: 4 / 3; }
  .qv-thumb { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .qv-backdrop, .qv-dialog, .qv-body { transition: none; } }

/* ---------- footer "Get the app": Android + iPhone buttons (js/layout.js) ---------- */
.app-install-btns { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.app-install-btns .app-install-btn { width: auto; }
.app-install-btn:hover, .app-install-btn:focus-visible { background: var(--maroon-900); }
.app-install-btn .fa-android { color: #8fd36a; }
.app-install-btn .fa-apple { color: var(--white); }
@media (max-width: 575px) {
  .app-install { flex-wrap: wrap; }
  .app-install-btns { width: 100%; }
  .app-install-btns .app-install-btn { flex: 1 1 0; justify-content: center; }
}
.pwa-sheet-cta { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }