/* ============================================================
   SHASR — شصر · Scent-Technology Store Theme
   Dark Scent-Tech Default + Designed Light Mode (html.light)
   Arabic-first / RTL-ready — Class names are the contract / API
   ============================================================ */

:root {
  --bg: #05060F;
  --bg2: #090B1A;
  --panel: #0E1126;
  --panel2: #131735;
  --line: rgba(157, 164, 255, 0.10);
  --line2: rgba(157, 164, 255, 0.20);
  --txt: #EEF0FF;
  --muted: #9BA1C6;
  --muted2: #838AB8;
  --accent: #8F95E8;
  --accent2: #5A60C0;
  --accent-dim: rgba(143, 149, 232, 0.10);
  --accent-glow: rgba(108, 114, 220, 0.45);
  --gold: #D8B36A;
  --gold2: #F0D394;
  --gold-dim: rgba(216, 179, 106, 0.13);
  --danger: #FF5468;
  --green: #3DDC84;
  --grad: linear-gradient(90deg, #3F44A0, #5A60C0);
  --grad-gold: linear-gradient(90deg, #B98D3F, #F0D394);
  --r: 18px;
  --r-sm: 12px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  --f-display: 'Almarai', sans-serif;
  --f-body: 'Tajawal', sans-serif;
  /* Amiri is no longer requested — nothing referenced this token, and it
     cost four font files. Kept as an alias so any later use still renders. */
  --f-accent: 'Almarai', serif;
  --card-media: #F4F2EC;
  --hero-word: rgba(157, 164, 255, 0.07);

  /* Icon data-URIs for CSS pseudo-elements (mask-based, so they inherit
     colour). The JS map in assets/js/icons.js covers real DOM icons. */
  --ico-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.7 5.8 6.3.7-4.7 4.3 1.3 6.2L12 16.8 6.4 20l1.3-6.2L3 9.5l6.3-.7Z'/%3E%3C/svg%3E");
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5L19.5 7'/%3E%3C/svg%3E");
  --ico-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='17.5' cy='20' r='1.6'/%3E%3Cpath d='M3 3.5h2.5l2.6 12h10.3l2.1-8.5H6'/%3E%3C/svg%3E");
  --ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.1'/%3E%3C/svg%3E");
  --ico-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6h11v11h-11zM13.5 10h4l3 3.5V17h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E");
  --ico-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 20 6v6c0 5-3.4 8.2-8 9.5C7.4 20.2 4 17 4 12V6l8-3.5Z'/%3E%3Cpath d='m8.8 12 2.3 2.3 4.1-4.4'/%3E%3C/svg%3E");
  --ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20.5 20.5-4.6-4.6'/%3E%3C/svg%3E");
  --ico-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2.5 8.5 4.5v10L12 21.5 3.5 17V7Z'/%3E%3Cpath d='M3.5 7 12 11.6 20.5 7M12 11.6v9.9'/%3E%3C/svg%3E");
  --ico-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 22 20H2Z'/%3E%3Cpath d='M12 9.5v4.5M12 17.2v.1'/%3E%3C/svg%3E");
  --ico-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --ico-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.6-6.1'/%3E%3Cpath d='M20.5 4.5V10H15'/%3E%3C/svg%3E");
}

html.light {
  --bg: #F7F4EE;
  --bg2: #EFEAE0;
  --panel: #FFFFFF;
  --panel2: #FBF9F3;
  --line: rgba(27, 29, 58, 0.10);
  --line2: rgba(27, 29, 58, 0.22);
  --txt: #1B1D3A;
  --muted: #565B7C;
  --muted2: #666A82;
  --accent: #2E3169;
  --accent2: #4A4F9E;
  --accent-dim: rgba(46, 49, 105, 0.08);
  --accent-glow: rgba(46, 49, 105, 0.30);
  --gold: #A8801F;
  --gold2: #8A6A23;
  --gold-dim: rgba(168, 128, 31, 0.14);
  --grad: linear-gradient(90deg, #2E3169, #4A4F9E);
  --grad-gold: linear-gradient(90deg, #B98D3F, #D8B36A);
  --shadow: 0 20px 60px rgba(27, 29, 58, 0.14);
  --card-media: #FFFFFF;
  --hero-word: rgba(27, 29, 58, 0.07);
}

html.dark {
  --bg: #05060F;
  --bg2: #090B1A;
  --panel: #0E1126;
  --panel2: #131735;
  --line: rgba(157, 164, 255, 0.10);
  --line2: rgba(157, 164, 255, 0.20);
  --txt: #EEF0FF;
  --muted: #9BA1C6;
  --muted2: #838AB8;
  --accent: #8F95E8;
  --accent2: #5A60C0;
  --accent-dim: rgba(143, 149, 232, 0.10);
  --accent-glow: rgba(108, 114, 220, 0.45);
  --gold: #D8B36A;
  --gold2: #F0D394;
  --gold-dim: rgba(216, 179, 106, 0.13);
  --grad: linear-gradient(90deg, #3F44A0, #5A60C0);
  --grad-gold: linear-gradient(90deg, #B98D3F, #F0D394);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  --card-media: #F4F2EC;
  --hero-word: rgba(157, 164, 255, 0.07);
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--f-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.5s, color 0.5s;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

input, select, textarea {
  font-family: inherit;
}

::selection {
  background: var(--gold);
  color: #171000;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg2);
}

::-webkit-scrollbar-thumb {
  background: #2A2F5C;
  border-radius: 99px;
}

html.light ::-webkit-scrollbar-thumb {
  background: #B9BDD6;
}

.container {
  width: min(1440px, 92vw);
  margin-inline: auto;
}

.ti-icon {
  display: inline-flex;
  vertical-align: middle;
}

.ti-icon svg {
  display: block;
}

/* ---------- Preloader ---------- */
#preloader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  transition: opacity 0.6s, visibility 0.6s;
}

#preloader.done {
  opacity: 0;
  visibility: hidden;
}

#preloader img {
  width: auto;
  height: 104px;
  filter: drop-shadow(0 0 30px var(--accent-glow));
  animation: pulse 1.6s ease-in-out infinite;
}

#preloader .bar {
  width: 220px;
  height: 2px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
}

#preloader .bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad-gold);
}

#preloader .pct {
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: 0.35em;
  color: var(--muted);
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ---------- Top strip + Header ---------- */
.topstrip {
  background: linear-gradient(90deg, #0B0D22, #141845);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #C9CCEF;
  position: relative;
  z-index: 60;
}

html.light .topstrip {
  background: var(--accent);
  color: #EDEDF7;
}

.topstrip .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 38px;
  gap: 16px;
}

.topstrip .hot b {
  color: var(--gold2);
}

.topstrip .links {
  display: flex;
  gap: 16px;
  align-items: center;
}

.topstrip a:hover {
  color: var(--gold2);
}

.lang-toggle, .theme-toggle {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 99px;
  padding: 3px 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #fff;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lang-toggle:hover, .theme-toggle:hover {
  border-color: var(--gold2);
  color: var(--gold2);
  box-shadow: 0 0 16px var(--gold-dim);
}

header.main {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  transition: transform 0.45s, background 0.5s;
}

header.main.hide {
  transform: translateY(-110%);
}

header.main .container {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 80px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.logo img {
  height: 54px;
  width: auto;
}

.lg-d {
  display: inline-block;
}

.lg-l {
  display: none;
}

html.light .lg-d {
  display: none;
}

html.light .lg-l {
  display: inline-block;
}

nav.desk {
  display: flex;
  gap: 2px;
  margin-inline-start: auto;
}

nav.desk > a {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  border-radius: 99px;
  transition: 0.25s;
  position: relative;
}

nav.desk > a:hover, nav.desk > a.on {
  color: var(--txt);
  background: var(--accent-dim);
}

nav.desk > a.on::after {
  content: "";
  position: absolute;
  inset-inline: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--grad-gold);
  border-radius: 2px;
  box-shadow: 0 0 10px var(--gold);
}

.hicons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hicons .ic {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--txt);
  position: relative;
  transition: 0.25s;
  border: 1px solid transparent;
}

.hicons .ic:hover {
  border-color: var(--line2);
  background: var(--accent-dim);
  color: var(--gold2);
}

.hicons .ic .dot {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  min-width: 17px;
  height: 17px;
  border-radius: 99px;
  background: var(--gold);
  color: #171000;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
  padding-inline: 4px;
  box-shadow: 0 0 12px var(--gold-dim);
}

.menu-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line2);
  border-radius: 99px;
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  transition: 0.3s;
}

.menu-btn:hover {
  border-color: var(--gold);
  color: var(--gold2);
  box-shadow: 0 0 24px var(--gold-dim);
}

.menu-btn .lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-btn .lines i {
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: 0.3s;
}

body.menu-open .menu-btn .lines i:nth-child(1) {
  transform: translateY(3px) rotate(45deg);
}

body.menu-open .menu-btn .lines i:nth-child(2) {
  transform: translateY(-3px) rotate(-45deg);
}

/* ---------- Fullscreen menu ---------- */
.mclose {
  position: absolute;
  top: 26px;
  inset-inline-end: 5vw;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  background: var(--panel);
  color: var(--txt);
  font-size: 20px;
  z-index: 96;
  transition: 0.35s;
  display: grid;
  place-items: center;
}

.mclose:hover {
  border-color: var(--gold);
  color: var(--gold2);
  transform: rotate(90deg);
}

#megamenu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: radial-gradient(1200px 800px at 80% 20%, #141845 0%, var(--bg) 62%);
  clip-path: circle(0 at calc(100% - 60px) 40px);
  transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.18, 1);
  display: flex;
  align-items: stretch;
}

html.light #megamenu {
  background: radial-gradient(1200px 800px at 80% 20%, var(--bg2) 0%, var(--bg) 60%);
}

[dir="rtl"] #megamenu {
  clip-path: circle(0 at 60px 40px);
}

body.menu-open #megamenu {
  clip-path: circle(150% at calc(100% - 60px) 40px) !important;
}

#megamenu .inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  width: min(1440px, 92vw);
  margin: auto;
  gap: 40px;
  align-items: center;
}

#megamenu .tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

#megamenu .tile {
  aspect-ratio: 1 / 1.05;
  border-radius: var(--r);
  background: linear-gradient(160deg, var(--panel), var(--panel2));
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  transform: translateY(30px);
  transition: 0.5s;
  box-shadow: var(--shadow);
}

body.menu-open #megamenu .tile {
  opacity: 1;
  transform: none;
}

#megamenu .tile img {
  max-height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
}

#megamenu .links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#megamenu .links a {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.25;
  color: var(--muted);
  letter-spacing: 0.01em;
  position: relative;
  width: max-content;
  transition: color 0.3s;
  opacity: 0;
  transform: translateY(24px);
}

body.menu-open #megamenu .links a {
  opacity: 1;
  transform: none;
  transition: color 0.3s, opacity 0.5s, transform 0.5s;
}

#megamenu .links a:hover {
  color: var(--txt);
}

#megamenu .links a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 4px;
  height: 3px;
  background: var(--gold);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.77, 0, 0.18, 1);
  box-shadow: 0 0 14px var(--gold);
}

#megamenu .links a:hover::after {
  transform: scaleX(1);
}

#megamenu .foot {
  position: absolute;
  bottom: 34px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  width: min(1440px, 92vw);
  margin-inline: auto;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.1em;
}

#megamenu .foot .soc {
  display: flex;
  gap: 20px;
}

#megamenu .foot a:hover {
  color: var(--gold2);
}

/* ---------- HERO — scent-tech stage ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 660px;
}

.hero .stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 115%, #181C46 0%, var(--bg) 58%);
}

html.light .hero .stage {
  background:
    radial-gradient(55% 45% at 50% 6%, rgba(216, 179, 106, 0.14), transparent 65%),
    radial-gradient(75% 60% at 50% 108%, rgba(199, 183, 224, 0.38), transparent 70%),
    linear-gradient(180deg, #F8F6F1 0%, #F7F4EE 40%, #F0E9DA 100%);
}

.hero .glowbg {
  position: absolute;
  inset: 0;
  opacity: 0.95;
  transition: background 1.2s ease;
  pointer-events: none;
}

.hero .mist {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Tech grid floor */
.hero .gridfloor {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 46%;
  pointer-events: none;
  opacity: 0.5;
  background: linear-gradient(transparent, var(--bg) 96%),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 72px);
  transform: perspective(720px) rotateX(58deg);
  transform-origin: bottom;
  -webkit-mask-image: radial-gradient(70% 100% at 50% 100%, #000 30%, transparent 100%);
  mask-image: radial-gradient(70% 100% at 50% 100%, #000 30%, transparent 100%);
}

html.light .hero .gridfloor {
  opacity: 0.45;
}

/* HUD ring behind the device */
.hero .hudring {
  position: absolute;
  left: 50%;
  top: 40%;
  translate: -50% -50%;
  width: min(64vmin, 660px);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 1;
}

.hero .hudring::before, .hero .hudring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--line2);
}

.hero .hudring::before {
  animation: hudspin 26s linear infinite;
  border-style: dashed;
  opacity: 0.7;
}

html.light .hero .hudring::before {
  opacity: 0.35;
}

html.light .hero .hudring::after {
  opacity: 0.6;
}

.hero .hudring::after {
  inset: 9%;
  animation: hudspin 40s linear infinite reverse;
  border-color: var(--line);
  background: radial-gradient(circle at 50% 0%, var(--gold-dim), transparent 32%);
}

.hero .hudring .tick {
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--gold) 0 1.2deg, transparent 1.2deg 90deg, var(--gold) 90deg 91.2deg, transparent 91.2deg 180deg, var(--gold) 180deg 181.2deg, transparent 181.2deg 270deg, var(--gold) 270deg 271.2deg, transparent 271.2deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: hudspin 18s linear infinite;
  opacity: 0.85;
}

@keyframes hudspin {
  to { rotate: 360deg; }
}

.hero .bigword {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.hero .bigword span {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(90px, 16vw, 260px);
  color: var(--hero-word);
  -webkit-text-stroke: 0;
  filter: blur(2px);
  white-space: nowrap;
  transform: translateY(-9vh);
}

html.light .hero .bigword span {
  color: rgba(27, 29, 58, 0.05);
}

.hero .ring {
  position: absolute;
  inset: 0;
  perspective: 1500px;
  transform-style: preserve-3d;
  z-index: 2;
}

.hero .slide {
  position: absolute;
  left: 50%;
  top: 38%;
  width: min(38vmin, 400px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  will-change: transform, filter, opacity;
  pointer-events: none;
}

.hero .slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 34px 44px rgba(0, 0, 0, 0.60));
}

.hero .slide .refl {
  position: absolute;
  top: 96%;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scaleY(-1);
  opacity: 0;
  pointer-events: none;
  filter: blur(1.5px) saturate(0.8);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent 52%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent 52%);
}

.hero .slide .shine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  filter: brightness(2.4) saturate(1.1) drop-shadow(0 0 12px rgba(216, 179, 106, 0.40));
  mix-blend-mode: screen;
  will-change: clip-path, opacity;
}

.hero .arr {
  position: absolute;
  top: 52%;
  z-index: 8;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  color: var(--txt);
  font-size: 22px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  backdrop-filter: blur(6px);
  transition: 0.3s;
}

.hero .arr:hover {
  border-color: var(--gold);
  color: var(--gold2);
  box-shadow: 0 0 24px var(--gold-dim);
}

.hero .arr.prev {
  inset-inline-start: min(15vw, 230px);
}

.hero .arr.next {
  inset-inline-end: min(15vw, 230px);
}

/* Info panel — glass HUD card */
.hero-info {
  position: absolute;
  inset-inline-start: 5vw;
  top: 23%;
  max-width: 300px;
  z-index: 6;
  transition: opacity 0.4s;
}

.hero-info .hi-cat {
  color: var(--gold2);
  font-weight: 800;
  letter-spacing: 0.16em;
  font-size: 11px;
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.hero-info .hi-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.hero-info .stars {
  color: var(--gold);
  letter-spacing: 2px;
  font-size: 13px;
  text-shadow: 0 0 10px var(--gold-dim);
}

.hero-info .hi-rating small {
  color: var(--muted);
  font-size: 12px;
}

.hero-info .hi-specs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.hero-info .hi-specs span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--txt);
  background: color-mix(in srgb, var(--panel) 66%, transparent);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 8px 12px;
  backdrop-filter: blur(10px);
  width: max-content;
  box-shadow: inset 0 0 20px rgba(143, 149, 232, 0.05);
}

.hero-info .hi-specs .ti-icon {
  color: var(--gold2);
}

.hero-info .hi-desc {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.85;
  border-inline-start: 2px solid var(--gold);
  padding-inline-start: 14px;
}

/* Side view nav */
.sidenav {
  position: absolute;
  inset-inline-end: 4vw;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 8;
}

.sidenav button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  display: grid;
  place-items: center;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  backdrop-filter: blur(6px);
  transition: 0.3s;
}

.sidenav button:hover {
  border-color: var(--gold);
  color: var(--gold2);
}

.sidenav button.on {
  background: var(--grad-gold);
  border-color: var(--gold);
  color: #171000;
  box-shadow: 0 8px 30px var(--gold-dim), 0 0 20px var(--gold-dim);
}

/* Feature views */
.fviews {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.fview {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: min(1340px, 90vw);
  margin-inline: auto;
  opacity: 0;
  visibility: hidden;
  transition: 0.6s;
  pointer-events: none;
}

.fview.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.fview .fv-txt {
  max-width: 520px;
}

.fview .fv-txt .strike {
  color: var(--muted2);
  font-size: 14px;
  display: block;
  margin-bottom: 14px;
}

.fview .fv-txt .strike s {
  margin-inline-end: 8px;
}

.fview .fv-txt h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.35;
  margin-bottom: 16px;
}

.fview .fv-txt h2 b {
  color: var(--fx, #D8B36A);
  text-shadow: 0 0 30px color-mix(in srgb, var(--fx, #D8B36A) 40%, transparent);
}

.fview .fv-txt p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 24px;
  max-width: 440px;
}

.fview .fv-media {
  position: relative;
  display: grid;
  place-items: center;
}

/* Halo behind the product shot so dark bottles still read
   against the near-black hero stage. */
.fview .fv-media::before {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side,
      color-mix(in srgb, var(--fx, #D8B36A) 30%, transparent) 0%,
      color-mix(in srgb, var(--fx, #D8B36A) 12%, transparent) 45%,
      transparent 72%);
  filter: blur(18px);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

html.light .fview .fv-media::before {
  background:
    radial-gradient(closest-side,
      color-mix(in srgb, var(--fx, #A8801F) 16%, transparent) 0%,
      transparent 70%);
}

.fview .fv-media img {
  position: relative;
  z-index: 1;
  max-height: 56vh;
  object-fit: contain;
  filter:
    drop-shadow(0 0 26px color-mix(in srgb, var(--fx, #D8B36A) 42%, transparent))
    drop-shadow(0 0 70px rgba(255, 255, 255, 0.12))
    drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55));
}

html.light .fview .fv-media img {
  filter:
    drop-shadow(0 0 22px color-mix(in srgb, var(--fx, #A8801F) 22%, transparent))
    drop-shadow(0 26px 46px rgba(27, 29, 58, 0.22));
}

/* The scent wheel is already a bright disc — no halo needed. */
.fview .fv-media img.wheel-hero {
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
}

.fview.on .fv-media img {
  animation: fvfloat 5s ease-in-out infinite;
}

@keyframes fvfloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.fview .fv-media .bignum {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(130px, 17vw, 270px);
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--fx, #D8B36A) 55%, transparent);
  z-index: -1;
  white-space: nowrap;
  filter: drop-shadow(0 0 40px color-mix(in srgb, var(--fx, #D8B36A) 25%, transparent));
}

.fview .spec-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--panel) 74%, transparent);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow), inset 0 0 24px rgba(143, 149, 232, 0.05);
}

.fview .spec-chip .ti-icon {
  color: var(--fx, #D8B36A);
}

.fview .spec-chip small {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: 11px;
}

.fview .spec-chip.c1 { top: 14%; inset-inline-start: 6%; }
.fview .spec-chip.c2 { top: 46%; inset-inline-end: 2%; }
.fview .spec-chip.c3 { bottom: 12%; inset-inline-start: 12%; }

.fview.on .spec-chip {
  animation: chipin 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.fview.on .spec-chip.c2 { animation-delay: 0.15s; }
.fview.on .spec-chip.c3 { animation-delay: 0.30s; }

@keyframes chipin {
  from { opacity: 0; transform: translateY(20px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

.fview .aroma-spin {
  animation: aromaspin 40s linear infinite;
}

@keyframes aromaspin {
  to { rotate: 360deg; }
}

/* All products view */
.allview {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  flex-direction: column;
  justify-content: center;
  width: min(1340px, 90vw);
  margin-inline: auto;
}

.hero.mode-all .allview {
  display: flex;
}

.allview .av-head {
  margin-bottom: 26px;
}

.allview .av-head h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 42px);
}

.av-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  max-height: 52vh;
  overflow: auto;
  padding: 4px;
}

.av-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px;
  text-align: center;
  transition: 0.3s;
}

.av-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.av-card .av-im {
  height: 110px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}

.av-card .av-im img {
  max-height: 100%;
  object-fit: contain;
}

.av-card .av-nm {
  font-weight: 800;
  font-size: 13px;
}

.av-card .av-pr {
  color: var(--gold2);
  font-size: 12px;
  font-weight: 700;
  margin-top: 4px;
}

/* Hero modes */
.hero.mode-alt .ring,
.hero.mode-alt .hero-title,
.hero.mode-alt .hero-info,
.hero.mode-alt .bigword,
.hero.mode-alt .arr,
.hero.mode-alt .hero-counter,
.hero.mode-alt .progressbar,
.hero.mode-alt .hudring {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.5s;
}

/* Bottom title / actions */
.hero-title {
  position: absolute;
  left: 50%;
  bottom: 9vh;
  transform: translateX(-50%);
  text-align: center;
  z-index: 6;
  width: min(92vw, 900px);
}

.hero-title .hi-badge {
  display: inline-block;
  background: var(--grad-gold);
  color: #171000;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  border-radius: 99px;
  padding: 5px 14px;
  margin-bottom: 10px;
  box-shadow: 0 0 24px var(--gold-dim);
}

.hero-title .hi-badge.sale {
  background: var(--danger);
  color: #fff;
}

.hero-title .nm {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(38px, 6vw, 84px);
  line-height: 1.05;
  text-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
}

.hero-title .pr {
  margin: 10px 0 16px;
  font-size: 21px;
  font-weight: 800;
  color: var(--gold2);
}

.hero-title .pr small {
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
}

.hero-title .pr s {
  color: var(--muted2);
  font-size: 15px;
  margin-inline-start: 8px;
}

.hero-title .nm, .hero-title .pr {
  transition: opacity 0.35s, transform 0.35s;
}

.hero-title.swap .nm, .hero-title.swap .pr {
  opacity: 0;
  transform: translateY(16px);
}

.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.hi-stock {
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.hi-stock i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  display: inline-block;
  animation: pulse 2s infinite;
}

.hero-counter {
  position: absolute;
  bottom: 60px;
  inset-inline-start: 5vw;
  font-family: var(--f-display);
  font-size: 14px;
  color: var(--muted);
  z-index: 6;
}

.hero-counter .cur {
  color: var(--gold2);
  font-size: 22px;
}

.progressbar {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 64vw);
  height: 3px;
  background: var(--line2);
  border-radius: 99px;
  z-index: 6;
  /* Draggable: give it a real hit area and stop the browser from
     turning a horizontal drag into a page scroll. */
  cursor: pointer;
  touch-action: none;
}

.progressbar::before {
  content: "";
  position: absolute;
  inset: -14px 0;
}

.progressbar:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 8px;
}

.progressbar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad-gold);
  border-radius: 99px;
  position: relative;
  transition: width 0.15s linear;
}

.progressbar i::after {
  content: "";
  position: absolute;
  inset-inline-end: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold2);
  box-shadow: 0 0 16px var(--gold);
}

.hero .scrollhint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted2);
  font-size: 10px;
  letter-spacing: 0.2em;
  z-index: 6;
}

/* ---------- Aurora ribbons ---------- */
.hero .aurora {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  opacity: 0.6;
  filter: blur(70px);
}

.hero .aurora i {
  position: absolute;
  border-radius: 50%;
  width: 46vw;
  height: 46vw;
  max-width: 760px;
  max-height: 760px;
  background: radial-gradient(circle, rgba(90, 96, 192, 0.5), transparent 65%);
  animation: aur1 16s ease-in-out infinite alternate;
  inset-inline-start: 6%;
  top: 10%;
}

.hero .aurora i:nth-child(2) {
  background: radial-gradient(circle, rgba(216, 179, 106, 0.34), transparent 65%);
  inset-inline-start: auto;
  inset-inline-end: 4%;
  top: 28%;
  animation: aur2 21s ease-in-out infinite alternate;
}

.hero .aurora i:nth-child(3) {
  background: radial-gradient(circle, rgba(183, 110, 121, 0.26), transparent 60%);
  inset-inline-start: 34%;
  bottom: -8%;
  top: auto;
  animation: aur1 25s ease-in-out infinite alternate-reverse;
}

@keyframes aur1 {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(6vw, 4vh) scale(1.18); }
}

@keyframes aur2 {
  from { transform: translate(0, 0) scale(1.12); }
  to { transform: translate(-5vw, 6vh) scale(0.94); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 99px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: 0.3s;
  position: relative;
  overflow: hidden;
}

.btn-acc {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 34px var(--accent-glow);
}

.btn-acc:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px var(--accent-glow);
}

.btn-gold {
  background: var(--grad-gold);
  color: #171000;
  box-shadow: 0 10px 34px var(--gold-dim);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(216, 179, 106, 0.35);
}

.btn-ghost {
  border: 1px solid var(--line2);
  color: var(--txt);
}

.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold2);
  box-shadow: 0 0 20px var(--gold-dim);
}

.btn::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  inset-inline-start: -62%;
  transform: skewX(-18deg);
  transition: inset-inline-start 0.65s ease;
  pointer-events: none;
}

.btn:hover::after {
  inset-inline-start: 125%;
}

/* ---------- Marquee ---------- */
.marquee {
  border-block: 1px solid var(--line);
  background: linear-gradient(90deg, #0B0D22, #141845, #0B0D22);
  overflow: hidden;
  padding: 14px 0;
}

html.light .marquee {
  background: var(--accent);
}

.marquee .track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: mq 30s linear infinite;
}

.marquee span {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 48px;
  white-space: nowrap;
}

.marquee b {
  color: var(--gold2);
}

.marquee .ti-icon {
  color: var(--gold2);
}

@keyframes mq {
  to { transform: translateX(-50%); }
}

[dir="rtl"] .marquee .track {
  animation-direction: reverse;
}

/* ---------- Sections / reveal ---------- */
section.block {
  padding: 100px 0;
  position: relative;
  scroll-margin-top: 90px;
}

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 46px;
}

.sec-head .kicker {
  color: var(--gold2);
  font-weight: 800;
  letter-spacing: 0.22em;
  font-size: 12px;
  display: block;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.sec-head h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.2;
}

.sec-head p {
  color: var(--muted);
  max-width: 420px;
  font-size: 14px;
  line-height: 1.8;
}

.rv {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.8s, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.rv.in {
  opacity: 1;
  transform: none;
}

.rv[data-d="1"] { transition-delay: 0.08s; }
.rv[data-d="2"] { transition-delay: 0.16s; }
.rv[data-d="3"] { transition-delay: 0.24s; }
.rv[data-d="4"] { transition-delay: 0.32s; }
.rv[data-d="5"] { transition-delay: 0.40s; }

/* ---------- Stats strip ---------- */
.stats-strip {
  border-block: 1px solid var(--line);
  background: var(--bg2);
}

.stats-strip .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 44px 0;
}

.stat {
  text-align: center;
}

.stat .num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 56px);
  color: var(--gold2);
  text-shadow: 0 0 30px var(--gold-dim);
}

.stat .lbl {
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
}

/* ---------- Category cards ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.cat-card {
  position: relative;
  border-radius: var(--r);
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel2) 100%);
  border: 1px solid var(--line);
  padding: 24px;
  min-height: 290px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  transition: 0.4s;
}

.cat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 60% at 80% 0%, var(--accent-dim), transparent 60%);
  opacity: 0;
  transition: 0.4s;
}

.cat-card:hover::before {
  opacity: 1;
}

.cat-card img {
  position: absolute;
  inset-inline-end: 4%;
  top: 7%;
  height: 52%;
  max-width: 60%;
  object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.5));
  transition: 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cat-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: var(--shadow), 0 0 40px var(--gold-dim);
}

.cat-card:hover img {
  transform: scale(1.07) rotate(-3deg);
}

.cat-card .n {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 21px;
  position: relative;
}

.cat-card .c {
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
  position: relative;
}

.cat-card .go {
  position: absolute;
  top: 20px;
  inset-inline-start: 22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: 0.3s;
}

.cat-card:hover .go {
  background: var(--gold);
  border-color: var(--gold);
  color: #171000;
  transform: rotate(45deg);
  box-shadow: 0 0 20px var(--gold-dim);
}

/* ---------- Product cards & §8.2 TWO-BUTTON HOVER (.quick2) ---------- */
.prod-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 60px) / 4);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to left, transparent 0, #000 36px, #000 calc(100% - 36px), transparent);
}

.prod-row::-webkit-scrollbar {
  display: none;
}

.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.pcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
  transition: 0.35s;
  scroll-snap-align: start;
}

.pcard:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: var(--shadow), 0 0 34px var(--gold-dim);
}

.pcard .media {
  position: relative;
  background: var(--card-media);
  aspect-ratio: 1 / 0.92;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.pcard .media img {
  width: 78%;
  height: 82%;
  object-fit: contain;
  transition: 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pcard:hover .media img {
  transform: scale(1.08);
}

.pcard .badge {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 8px;
  padding: 5px 9px;
  z-index: 2;
}

.pcard .badge.new {
  background: var(--grad-gold);
  color: #171000;
}

.pcard .wish {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(10, 12, 30, 0.7);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line2);
  display: grid;
  place-items: center;
  color: #fff;
  opacity: 0;
  transform: translateY(-6px);
  transition: 0.3s;
  z-index: 2;
}

.pcard:hover .wish {
  opacity: 1;
  transform: none;
}

.pcard .wish:hover {
  background: var(--danger);
  border-color: var(--danger);
}

.pcard .wish.liked {
  opacity: 1;
  transform: none;
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

/* Mockup fallback single button */
.pcard .quick {
  position: absolute;
  bottom: 12px;
  inset-inline: 12px;
  background: rgba(10, 12, 30, 0.88);
  backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 12px;
  font-weight: 800;
  font-size: 13px;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.35s;
  z-index: 2;
}

.pcard:hover .quick {
  opacity: 1;
  transform: none;
}

.pcard .quick:hover {
  background: var(--grad-gold);
  color: #171000;
  border-color: var(--gold);
}

/* Two-button hover row (.quick2) §8.2 */
.pcard .quick2 {
  position: absolute;
  bottom: 10px;
  inset-inline: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 4;
}

.pcard:hover .quick2 {
  opacity: 1;
  transform: none;
}

.pcard .quick2 button,
.pcard .quick2 a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.01em;
  text-align: center;
  backdrop-filter: blur(8px);
  transition: 0.25s;
  white-space: nowrap;
}

.pcard .quick2 .q-cart {
  background: var(--grad-gold);
  color: #171000;
  border: 1px solid var(--gold);
  box-shadow: 0 4px 14px var(--gold-dim);
}

.pcard .quick2 .q-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--gold-dim);
}

.pcard .quick2 .q-buy {
  background: var(--grad);
  color: #FFFFFF;
  border: 1px solid var(--accent);
  box-shadow: 0 4px 14px var(--accent-glow);
}

.pcard .quick2 .q-buy:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--accent-glow);
}

.pcard .body {
  padding: 18px;
}

.pcard .cat {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted2);
  margin-bottom: 6px;
}

.pcard .name {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.5;
  min-height: 44px;
}

.pcard .stars {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 2px;
  margin: 8px 0;
}

.pcard .stars small {
  color: var(--muted2);
  letter-spacing: 0;
  margin-inline-start: 6px;
}

.pcard .price {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pcard .price .now {
  font-size: 18px;
  font-weight: 800;
  color: var(--gold2);
}

.pcard .price .now small {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.pcard .price .old {
  color: var(--muted2);
  text-decoration: line-through;
  font-size: 13px;
}

.pcard .sizes {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.pcard .sizes i {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 2px 7px;
}

/* ---------- Tabbed products (#shoptabs) ---------- */
.catbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 34px;
}

.catbar .cb {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  text-align: start;
  transition: 0.3s;
}

.catbar .cb img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.catbar .cb span {
  font-weight: 800;
  font-size: 14px;
}

.catbar .cb small {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: 12px;
  margin-top: 2px;
}

.catbar .cb:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.catbar .cb.on {
  border-color: var(--gold);
  background: linear-gradient(160deg, var(--panel2), var(--panel));
  box-shadow: 0 10px 30px var(--gold-dim);
}

.tabs-shop {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start;
}

.ts-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.ts-tabs button {
  padding: 10px 20px;
  border-radius: 99px;
  font-weight: 800;
  font-size: 14px;
  color: var(--muted);
  transition: 0.3s;
}

.ts-tabs button:hover {
  color: var(--txt);
}

.ts-tabs button.on {
  background: var(--grad-gold);
  color: #171000;
  box-shadow: 0 8px 24px var(--gold-dim);
}

.ts-tabs a {
  margin-inline-start: auto;
  color: var(--gold2);
  font-weight: 800;
  font-size: 13px;
}

.ts-pane {
  display: none;
}

.ts-pane.on {
  display: block;
  animation: fadein 0.5s;
}

@keyframes fadein {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.ts-grid {
  grid-template-columns: repeat(3, 1fr);
}

.ts-promo {
  position: sticky;
  top: 100px;
  background: linear-gradient(170deg, #1B1F52 0%, #0B0D22 100%);
  border-radius: var(--r);
  padding: 28px;
  color: #fff;
  overflow: hidden;
  text-align: center;
  border: 1px solid var(--line2);
  box-shadow: inset 0 0 60px rgba(143, 149, 232, 0.06);
}

.ts-promo .tag {
  display: inline-block;
  background: var(--grad-gold);
  color: #171000;
  font-size: 11px;
  font-weight: 800;
  border-radius: 99px;
  padding: 5px 14px;
  margin-bottom: 14px;
}

.ts-promo h3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: 10px;
}

.ts-promo .pp {
  font-size: 24px;
  font-weight: 800;
  color: var(--gold2);
  margin-bottom: 6px;
}

.ts-promo .pp small {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.ts-promo .pp s {
  color: rgba(255, 255, 255, 0.62);
  font-size: 15px;
  margin-inline-start: 6px;
}

.ts-promo img {
  max-height: 280px;
  object-fit: contain;
  margin: 10px auto 18px;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5));
  border-radius: var(--r-sm);
}

/* ---------- Banners ---------- */
.banner2 {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 20px;
}

.bcard {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  min-height: 430px;
  display: flex;
  align-items: flex-end;
  padding: 36px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.bcard .bgimg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.bcard:hover .bgimg {
  transform: scale(1.06);
}

.bcard .shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(10deg, rgba(5, 6, 15, 0.92) 18%, rgba(5, 6, 15, 0.12) 70%);
}

.bcard .inner {
  position: relative;
  z-index: 2;
  color: #fff;
}

.bcard .tag {
  display: inline-block;
  background: var(--grad-gold);
  color: #171000;
  font-size: 11px;
  font-weight: 800;
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 14px;
}

.bcard h3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.25;
  margin-bottom: 8px;
}

.bcard p {
  color: #D5D7EA;
  font-size: 14px;
  max-width: 380px;
  margin-bottom: 18px;
  line-height: 1.8;
}

/* ---------- Aroma wheel / fragrance families ---------- */
.aroma-sec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}

.aroma-vis {
  position: relative;
  display: grid;
  place-items: center;
}

.aroma-vis img {
  max-width: 88%;
  animation: fvfloat 7s ease-in-out infinite;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 40px var(--gold-dim));
}

html.light .aroma-vis img {
  filter: drop-shadow(0 24px 50px rgba(27, 29, 58, 0.25));
}

.aroma-vis::before {
  content: "";
  position: absolute;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-dim), transparent 70%);
  filter: blur(24px);
}

.fam-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fam {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 18px 22px;
  transition: 0.35s;
  position: relative;
  overflow: hidden;
}

.fam::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--fc, #D8B36A);
  box-shadow: 0 0 14px var(--fc, #D8B36A);
}

.fam:hover {
  transform: translateX(-6px);
  border-color: var(--fc, #D8B36A);
  box-shadow: var(--shadow);
}

[dir="ltr"] .fam:hover {
  transform: translateX(6px);
}

.fam .dot {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--fc) 55%, #fff), var(--fc));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--fc) 45%, transparent);
}

.fam b {
  font-size: 16px;
  display: block;
}

.fam small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  display: block;
  margin-top: 3px;
}

.fam .go {
  margin-inline-start: auto;
  color: var(--muted2);
  transition: 0.3s;
}

.fam:hover .go {
  color: var(--fc);
  transform: translateX(-4px);
}

/* ---------- Value props ---------- */
.vals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.val {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 30px 26px;
  transition: 0.35s;
  position: relative;
  overflow: hidden;
}

.val::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transition: 0.4s;
  transform-origin: center;
}

.val:hover::after {
  transform: scaleX(1);
}

.val:hover {
  border-color: var(--line2);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.val .ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--gold-dim);
  color: var(--gold2);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.val h4 {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px;
}

.val p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

/* ---------- Reviews ---------- */
.revs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.rev {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px;
}

.rev .stars {
  color: var(--gold);
  letter-spacing: 3px;
  margin-bottom: 14px;
  text-shadow: 0 0 12px var(--gold-dim);
}

.rev p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 18px;
}

.rev .who {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rev .who .av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--grad-gold);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #171000;
}

.rev .who small {
  display: block;
  color: var(--muted2);
}

/* ---------- Clients ---------- */
.clients {
  border-block: 1px solid var(--line);
  background: var(--bg2);
  padding: 44px 0;
}

.clients .row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 5vw, 70px);
  flex-wrap: wrap;
}

.clients img {
  height: 56px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) invert(1) opacity(0.5);
  transition: 0.4s;
  border-radius: 8px;
}

.clients img:hover {
  filter: invert(0) grayscale(0);
  transform: scale(1.06);
  background: #fff;
  padding: 4px;
}

html.light .clients {
  background: #F2EEE5;
}

html.light .clients img {
  filter: grayscale(1) opacity(0.55);
}

html.light .clients img:hover {
  filter: none;
  background: none;
  padding: 0;
}

/* ---------- Newsletter + Footer ---------- */
.newsletter {
  background: radial-gradient(700px 300px at 50% 0%, var(--gold-dim), transparent), var(--bg2);
  border-block: 1px solid var(--line);
  padding: 80px 0;
  text-align: center;
}

.newsletter h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 44px);
  margin-bottom: 10px;
}

.newsletter p {
  color: var(--muted);
  margin-bottom: 26px;
}

.newsletter form {
  display: flex;
  gap: 10px;
  justify-content: center;
  max-width: 520px;
  margin-inline: auto;
}

.newsletter input {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 99px;
  padding: 15px 24px;
  color: var(--txt);
  font-size: 14px;
}

.newsletter input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 20px var(--gold-dim);
}

footer.main {
  background: #07081A;
  color: #C9CCEF;
  padding: 70px 0 0;
  border-top: 1px solid var(--line);
}

html.light footer.main {
  background: var(--accent);
  color: #D9DAEE;
}

footer.main .cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 50px;
}

footer.main .fl img {
  height: 78px;
  width: auto;
  margin-bottom: 18px;
}

footer.main .fl p {
  font-size: 13.5px;
  line-height: 1.9;
  color: #8E92BE;
  max-width: 320px;
}

footer.main h5 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  margin-bottom: 18px;
}

footer.main .lnk {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
}

footer.main .lnk a {
  color: #8E92BE;
  transition: 0.25s;
  width: max-content;
}

footer.main .lnk a:hover {
  color: var(--gold2);
  transform: translateX(-4px);
}

[dir="ltr"] footer.main .lnk a:hover {
  transform: translateX(4px);
}

footer.main .cnt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13.5px;
  color: #8E92BE;
}

footer.main .cnt span {
  display: flex;
  align-items: center;
  gap: 10px;
}

footer.main .cnt .ti-icon {
  color: var(--gold2);
}

footer.main .pays {
  margin-top: 16px;
}

footer.main .pays img {
  height: 30px;
  border-radius: 6px;
  background: #fff;
  padding: 3px 8px;
}

footer.main .base {
  border-top: 1px solid rgba(157, 164, 255, 0.12);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  color: #6A6E99;
  flex-wrap: wrap;
}

footer.main .base select {
  background: transparent;
  border: 1px solid rgba(157, 164, 255, 0.25);
  color: #C9CCEF;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
}

/* ---------- Shop page ---------- */
.shophero {
  background: linear-gradient(150deg, #1B1F52 0%, #0B0D22 90%);
  color: #fff;
  padding: 72px 0 60px;
  position: relative;
  overflow: hidden;
}

.shophero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 300px at 15% 0%, rgba(216, 179, 106, 0.1), transparent 70%);
}

.shophero::after {
  content: "شصر";
  position: absolute;
  inset-inline-end: -2%;
  bottom: -34%;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 300px;
  color: rgba(157, 164, 255, 0.05);
  pointer-events: none;
}

.shophero h1 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 60px);
  margin-bottom: 10px;
  position: relative;
}

.shophero p {
  color: #B9BCE2;
  max-width: 520px;
  line-height: 1.9;
  position: relative;
}

.shophero .srch {
  margin-top: 26px;
  display: flex;
  max-width: 560px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(157, 164, 255, 0.25);
  backdrop-filter: blur(10px);
  border-radius: 99px;
  padding: 6px;
  gap: 6px;
  position: relative;
}

.shophero .srch input {
  flex: 1;
  border: 0;
  background: none;
  padding: 10px 20px;
  font-size: 14px;
  color: #fff;
}

.shophero .srch input::placeholder {
  color: #8E92BE;
}

.shophero .srch input:focus {
  outline: none;
}

.catpills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 26px;
  position: relative;
}

.catpills a {
  border: 1px solid rgba(157, 164, 255, 0.3);
  color: #C9CCEF;
  border-radius: 99px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 700;
  transition: 0.3s;
}

.catpills a:hover, .catpills a.on {
  background: var(--grad-gold);
  border-color: var(--gold);
  color: #171000;
  box-shadow: 0 0 24px var(--gold-dim);
}

.shopwrap {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 30px;
  padding: 56px 0 90px;
  align-items: start;
}

.filters {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fgroup {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.fgroup .fh {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  font-weight: 800;
  font-size: 14px;
}

.fgroup .fh::after {
  content: "›";
  transform: rotate(90deg);
  transition: 0.3s;
  color: var(--muted);
}

.fgroup.open .fh::after {
  transform: rotate(-90deg);
}

.fgroup .fb {
  display: none;
  padding: 0 18px 18px;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  color: var(--muted);
}

.fgroup.open .fb {
  display: flex;
}

.fgroup label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.fgroup label:hover {
  color: var(--txt);
}

.fgroup input[type="checkbox"] {
  accent-color: var(--gold);
  width: 16px;
  height: 16px;
}

.fgroup .cnt2 {
  margin-inline-start: auto;
  color: var(--muted2);
  font-size: 12px;
}

.fgroup input[type="range"] {
  width: 100%;
  accent-color: var(--gold);
}

.szpills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.szpills button {
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  transition: 0.25s;
}

.szpills button:hover, .szpills button.on {
  border-color: var(--gold);
  color: var(--gold2);
  background: var(--gold-dim);
}

.scent-dots {
  display: flex;
  gap: 10px;
}

.scent-dots button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--line2);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--fc) 55%, #fff), var(--fc));
  transition: 0.25s;
}

.scent-dots button:hover, .scent-dots button.on {
  border-color: var(--gold2);
  transform: scale(1.12);
  box-shadow: 0 0 16px color-mix(in srgb, var(--fc) 50%, transparent);
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.toolbar .res {
  color: var(--muted);
  font-size: 13.5px;
}

.toolbar .tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toolbar select {
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 99px;
  padding: 9px 16px;
  font-size: 13px;
  color: var(--txt);
}

.toolbar .grid-t {
  display: flex;
  border: 1px solid var(--line2);
  border-radius: 99px;
  overflow: hidden;
}

.toolbar .grid-t button {
  padding: 8px 12px;
  color: var(--muted);
}

.toolbar .grid-t button.on {
  background: var(--grad-gold);
  color: #171000;
}

.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 44px;
}

.pagination a {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--muted);
  transition: 0.3s;
}

.pagination a:hover {
  border-color: var(--gold);
  color: var(--gold2);
}

.pagination a.on {
  background: var(--grad-gold);
  border-color: var(--gold);
  color: #171000;
  box-shadow: 0 0 20px var(--gold-dim);
}

/* ---------- Product page (PDP) ---------- */
.crumbs {
  padding: 22px 0 0;
  color: var(--muted2);
  font-size: 13px;
}

.crumbs a:hover {
  color: var(--gold2);
}

.pdp {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 50px;
  padding: 36px 0 80px;
  align-items: start;
}

.gallery {
  position: sticky;
  top: 100px;
}

.gallery .main {
  background: var(--card-media);
  border: 1px solid var(--line);
  border-radius: var(--r);
  aspect-ratio: 1 / 0.92;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}

.gallery .main img {
  max-width: 82%;
  max-height: 86%;
  object-fit: contain;
  transition: 0.4s;
}

.gallery .main:hover img {
  transform: scale(1.05);
}

.gallery .main .pbadge {
  position: absolute;
  top: 16px;
  inset-inline-start: 16px;
  background: var(--grad-gold);
  color: #171000;
  font-size: 11px;
  font-weight: 800;
  border-radius: 99px;
  padding: 6px 14px;
}

#thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

#thumbs button {
  width: 84px;
  height: 84px;
  background: var(--card-media);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  padding: 8px;
  transition: 0.25s;
}

#thumbs button img {
  max-height: 100%;
  object-fit: contain;
}

#thumbs button.on, #thumbs button:hover {
  border-color: var(--gold);
  box-shadow: 0 0 16px var(--gold-dim);
}

.pinfo .pcat {
  color: var(--gold2);
  font-weight: 800;
  letter-spacing: 0.14em;
  font-size: 11.5px;
  text-transform: uppercase;
}

.pinfo h1 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 50px);
  margin: 8px 0 10px;
}

.pinfo .prate {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gold);
  letter-spacing: 2px;
  font-size: 14px;
  margin-bottom: 16px;
}

.pinfo .prate small {
  color: var(--muted);
  letter-spacing: 0;
}

.pricebox {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}

.pricebox .now {
  font-size: 34px;
  font-weight: 800;
  color: var(--gold2);
  text-shadow: 0 0 30px var(--gold-dim);
}

.pricebox .now small {
  font-size: 15px;
  color: var(--muted);
  font-weight: 600;
}

.pricebox s {
  color: var(--muted2);
  font-size: 18px;
}

.pricebox .disc {
  background: var(--accent-dim);
  border: 1px solid var(--line2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  padding: 4px 10px;
}

.pdesc {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 2;
  margin-bottom: 22px;
}

.opt-title {
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 10px;
}

.opt-title span {
  color: var(--muted);
  font-weight: 400;
}

.color-swatches {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.color-swatches button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--line2);
  background: var(--sw);
  transition: 0.25s;
  position: relative;
}

.color-swatches button.on {
  border-color: var(--gold2);
  transform: scale(1.1);
  box-shadow: 0 0 18px var(--gold-dim);
}

.szrow {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.szrow button {
  border: 1.5px solid var(--line2);
  border-radius: 12px;
  padding: 12px 20px;
  font-weight: 800;
  font-size: 13.5px;
  color: var(--muted);
  transition: 0.25s;
}

.szrow button small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  margin-top: 2px;
}

.szrow button.on {
  border-color: var(--gold);
  color: var(--gold2);
  background: var(--gold-dim);
}

.szrow button.disabled,
.szrow button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  text-decoration: line-through;
}

.addons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.addon {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  background: var(--panel);
  cursor: pointer;
  transition: 0.25s;
  font-size: 13.5px;
}

.addon:hover {
  border-color: var(--gold);
}

.addon input {
  accent-color: var(--gold);
  width: 17px;
  height: 17px;
}

.addon b {
  margin-inline-start: auto;
  color: var(--gold2);
  white-space: nowrap;
}

.buyrow {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 16px;
}

.qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--line2);
  border-radius: 99px;
  overflow: hidden;
}

.qty button {
  width: 46px;
  height: 52px;
  font-size: 20px;
  color: var(--muted);
}

.qty button:hover {
  color: var(--gold2);
}

.qty input {
  width: 52px;
  text-align: center;
  border: 0;
  background: none;
  color: var(--txt);
  font-weight: 800;
  font-size: 16px;
}

.qty input:focus {
  outline: none;
}

.buyrow .btn {
  flex: 1;
  justify-content: center;
}

.ordersum {
  background: var(--panel2);
  border: 1px dashed var(--line2);
  border-radius: var(--r-sm);
  padding: 16px 18px;
  font-size: 13.5px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.ordersum .row {
  display: flex;
  justify-content: space-between;
}

.ordersum .row.tot {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  font-weight: 800;
  color: var(--txt);
  font-size: 15px;
}

.ordersum .row.tot b {
  color: var(--gold2);
}

.trust {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12.5px;
}

.trust span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trust .ti-icon {
  color: var(--green);
}

/* Specs accordion */
.specs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sgroup {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.sgroup .sgh {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  font-weight: 800;
  font-size: 14px;
}

.sgroup .sgh .ti-icon {
  color: var(--gold2);
}

.sgroup .sgh::after {
  content: "›";
  margin-inline-start: auto;
  transform: rotate(90deg);
  transition: 0.3s;
  color: var(--muted);
}

.sgroup.open .sgh::after {
  transform: rotate(-90deg);
}

.sgroup .sgb {
  display: none;
  padding: 0 18px 16px;
}

.sgroup.open .sgb {
  display: block;
}

.sgroup table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.sgroup td {
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.sgroup td:first-child {
  color: var(--muted);
  width: 45%;
}

.sgroup td:last-child {
  font-weight: 700;
}

/* Product tabs */
.ptabs {
  padding: 10px 0 80px;
}

.tabbar {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
}

.tabbar button {
  padding: 14px 26px;
  font-weight: 800;
  font-size: 14.5px;
  color: var(--muted);
  position: relative;
}

.tabbar button.on {
  color: var(--txt);
}

.tabbar button.on::after {
  content: "";
  position: absolute;
  inset-inline: 20px;
  bottom: -1px;
  height: 3px;
  background: var(--grad-gold);
  border-radius: 3px;
  box-shadow: 0 0 12px var(--gold);
}

.tabpane {
  display: none;
}

.tabpane.on {
  display: block;
  animation: fadein 0.5s;
}

.tabpane .prose {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 2.1;
  max-width: 820px;
}

.tabpane .prose h3 {
  color: var(--txt);
  font-family: var(--f-display);
  margin: 22px 0 10px;
  font-size: 20px;
}

.tabpane .prose ul {
  padding-inline-start: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Sticky buy bar */
#stickybuy {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line2);
  z-index: 70;
  transform: translateY(110%);
  transition: 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

#stickybuy.show {
  transform: none;
}

#stickybuy .container {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 76px;
}

#stickybuy img {
  height: 52px;
  width: 52px;
  object-fit: contain;
  background: var(--card-media);
  border-radius: 10px;
  padding: 4px;
  border: 1px solid var(--line);
}

#stickybuy .nm2 {
  font-weight: 800;
  font-size: 14.5px;
}

#stickybuy .pr2 {
  color: var(--gold2);
  font-weight: 800;
  margin-inline-start: auto;
  font-size: 17px;
}

/* ---------- WhatsApp float ---------- */
.wafloat {
  position: fixed;
  bottom: 26px;
  inset-inline-start: 26px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 80;
  box-shadow: 0 12px 34px rgba(37, 211, 102, 0.4);
  transition: 0.3s;
}

.wafloat:hover {
  transform: scale(1.1) rotate(8deg);
}

/* ---------- FAQ ---------- */
.faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 860px;
  margin-inline: auto;
}

.q {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.q .qh {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  font-weight: 800;
  font-size: 15px;
  text-align: start;
}

.q .qh::after {
  content: "＋";
  color: var(--gold2);
  transition: 0.3s;
}

.q.open .qh::after {
  transform: rotate(45deg);
}

.q .qb {
  display: none;
  padding: 0 22px 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
}

.q.open .qb {
  display: block;
}

/* ---------- Offers banner (Khareef) ---------- */
.offers {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: linear-gradient(140deg, #10321F 0%, #0B0D22 52%, #141845 100%);
  border: 1px solid var(--line2);
  padding: clamp(34px, 4vw, 60px) clamp(18px, 3vw, 44px);
  text-align: center;
}

.offers::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(560px 260px at 50% 0%, rgba(240, 169, 75, 0.12), transparent 70%);
  pointer-events: none;
}

.offers .obadge {
  display: inline-block;
  background: linear-gradient(90deg, #C96A25, #F0A94B);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  border-radius: 99px;
  padding: 8px 20px;
  box-shadow: 0 8px 26px rgba(240, 169, 75, 0.3);
}

.offers h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 46px);
  color: #fff;
  margin: 16px 0 8px;
}

.offers h2 b {
  color: #F0C168;
  text-shadow: 0 0 30px rgba(240, 193, 104, 0.35);
}

.offers > p {
  color: #B9C5D9;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.9;
  font-size: 14px;
  position: relative;
}

.offer-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
  position: relative;
}

.ocard {
  background: rgba(10, 14, 28, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  transition: 0.35s;
  display: flex;
  flex-direction: column;
}

.ocard:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.ocard .oimg {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.ocard .oimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ocard:hover .oimg img {
  transform: scale(1.07);
}

.ocard .otag {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  background: linear-gradient(90deg, #C96A25, #F0A94B);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 99px;
  padding: 6px 13px;
  z-index: 2;
}

.ocard .obody {
  padding: 20px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  flex: 1;
}

.ocard .okick {
  color: var(--gold2);
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 800;
}

.ocard .oname {
  font-weight: 800;
  font-size: 17px;
  color: #fff;
}

.ocard .oitems {
  color: #93A0BE;
  font-size: 12.5px;
}

.ocard .oprice {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 30px;
  color: var(--gold2);
  margin-top: auto;
  padding-top: 8px;
}

.ocard .oprice small {
  font-size: 13px;
  color: #93A0BE;
  font-weight: 600;
}

.btn-oline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  border: 1px solid var(--gold);
  color: var(--gold2);
  border-radius: 12px;
  padding: 12px;
  font-weight: 800;
  font-size: 13.5px;
  transition: 0.3s;
  position: relative;
  overflow: hidden;
}

.btn-oline:hover {
  background: var(--grad-gold);
  color: #171000;
  box-shadow: 0 10px 30px var(--gold-dim);
}

/* ---------- Machines tech banner ---------- */
.mach {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: linear-gradient(120deg, #232963 0%, #0B0D22 72%);
  border: 1px solid var(--line2);
  padding: clamp(26px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 30px;
  align-items: center;
}

.mach::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(157, 164, 255, 0.16) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.4;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent 80%);
  mask-image: linear-gradient(to left, #000 30%, transparent 80%);
}

[dir="ltr"] .mach::before {
  -webkit-mask-image: linear-gradient(to right, #000 30%, transparent 80%);
  mask-image: linear-gradient(to right, #000 30%, transparent 80%);
}

.mach .m-txt {
  position: relative;
}

.mach .kick {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold2);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.16em;
}

.mach .kick::after {
  content: "";
  width: 46px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}

.mach h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 52px);
  color: #fff;
  margin: 14px 0;
  line-height: 1.25;
}

.mach p {
  color: #B9BCE2;
  max-width: 480px;
  line-height: 2;
  font-size: 14.5px;
  margin-bottom: 24px;
}

.mach .m-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.mach .m-pills {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.m-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(157, 164, 255, 0.25);
  border-radius: 14px;
  padding: 10px 14px;
  transition: 0.3s;
  color: #fff;
}

.m-pill img {
  width: 40px;
  height: 48px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  padding: 3px;
}

.m-pill b {
  font-size: 13px;
  display: block;
}

.m-pill .pp2 {
  color: var(--gold2);
  font-size: 12.5px;
  font-weight: 800;
}

.m-pill .go2 {
  margin-inline-start: 8px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  transition: 0.3s;
}

.m-pill:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.m-pill:hover .go2 {
  background: var(--gold);
  border-color: var(--gold);
  color: #171000;
}

.mach .m-vis {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
}

.mach .m-rings i {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px solid rgba(157, 164, 255, 0.22);
}

.mach .m-rings i:nth-child(1) { width: 46%; aspect-ratio: 1; }
.mach .m-rings i:nth-child(2) { width: 70%; aspect-ratio: 1; border-color: rgba(157, 164, 255, 0.14); }
.mach .m-rings i:nth-child(3) { width: 94%; aspect-ratio: 1; border-style: dashed; border-color: rgba(216, 179, 106, 0.3); animation: hudspin 40s linear infinite; }

.mach .m-vis > img {
  position: relative;
  max-height: 380px;
  width: auto;
  filter: drop-shadow(0 34px 50px rgba(0, 0, 0, 0.6));
  animation: fvfloat 6s ease-in-out infinite;
}

.mach .m-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(14, 17, 38, 0.8);
  border: 1px solid rgba(157, 164, 255, 0.3);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}

.mach .m-chip .ti-icon {
  color: var(--gold2);
}

.mach .m-chip small {
  display: block;
  color: #93A0BE;
  font-weight: 400;
  font-size: 11px;
}

.mach .m-chip.a { top: 12%; inset-inline-end: 6%; }
.mach .m-chip.b { bottom: 14%; inset-inline-start: 2%; color: var(--gold2); }

/* ---------- Scents library (tabs + filter) ---------- */
.fam-tabs {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
}

.fam-tabs button {
  padding: 13px 18px;
  font-weight: 800;
  font-size: 14.5px;
  color: var(--muted);
  position: relative;
  transition: 0.3s;
}

.fam-tabs button:hover {
  color: var(--txt);
}

.fam-tabs button.on {
  color: var(--txt);
}

.fam-tabs button.on::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  bottom: -1px;
  height: 3px;
  background: var(--grad-gold);
  border-radius: 3px;
  box-shadow: 0 0 12px var(--gold);
}

.fam-tabs button .nb {
  display: inline-block;
  background: var(--gold-dim);
  color: var(--gold2);
  font-size: 10px;
  border-radius: 99px;
  padding: 2px 7px;
  margin-inline-start: 5px;
  vertical-align: 2px;
}

.scent-grid {
  grid-template-columns: repeat(4, 1fr);
}

.pcard.hidden {
  display: none;
}

.pcard.pop {
  animation: fadein 0.45s;
}

/* ---------- Orbital scent visual ---------- */
.orb-wheel {
  position: relative;
  width: min(52vmin, 430px);
  aspect-ratio: 1;
}

.orb-wheel .oring {
  position: absolute;
  inset: 0;
  border: 1.5px dashed var(--line2);
  border-radius: 50%;
  animation: hudspin 36s linear infinite;
}

.orb-wheel .oring2 {
  position: absolute;
  inset: 12%;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.orb-wheel .core {
  position: absolute;
  inset: 33%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #262B66, #0C0E24);
  border: 1px solid var(--line2);
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: 0 0 70px var(--gold-dim), inset 0 0 34px rgba(143, 149, 232, 0.12);
}

.orb-wheel .core b {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 46px);
  color: var(--gold2);
  line-height: 1;
}

.orb-wheel .core small {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 6px;
}

.orb-wheel .orb {
  position: absolute;
  width: clamp(66px, 9vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--oc) 55%, #fff), var(--oc) 72%);
  box-shadow: 0 12px 36px color-mix(in srgb, var(--oc) 55%, transparent), inset 0 -8px 18px rgba(0, 0, 0, 0.25);
  animation: orbfloat 5s ease-in-out infinite;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.orb-wheel .orb small {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.85;
  display: block;
  margin-top: 2px;
}

.orb-wheel .o1 { top: -6%; left: 50%; translate: -50% 0; }
.orb-wheel .o2 { top: 50%; inset-inline-end: -6%; translate: 0 -50%; animation-delay: 1.2s; }
.orb-wheel .o3 { bottom: -6%; left: 50%; translate: -50% 0; animation-delay: 2.4s; }
.orb-wheel .o4 { top: 50%; inset-inline-start: -6%; translate: 0 -50%; animation-delay: 3.6s; }

@keyframes orbfloat {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -10px; }
}

html.light .orb-wheel .core {
  background: radial-gradient(circle at 35% 30%, #3A3F85, #1B1D3A);
}

/* ---------- Search overlay ---------- */
#searchov {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.35s;
}

#searchov.open {
  opacity: 1;
  visibility: visible;
}

#searchov .s-box {
  width: min(640px, 90vw);
}

#searchov .s-title {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.18em;
  margin-bottom: 16px;
  font-weight: 800;
}

#searchov input {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 99px;
  padding: 18px 28px;
  font-size: 17px;
  color: var(--txt);
}

#searchov input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 30px var(--gold-dim);
}

#searchov .s-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
  justify-content: center;
}

#searchov .s-tags button {
  border: 1px solid var(--line2);
  border-radius: 99px;
  padding: 8px 16px;
  font-size: 12.5px;
  color: var(--muted);
  transition: 0.25s;
}

#searchov .s-tags button:hover {
  border-color: var(--gold);
  color: var(--gold2);
}

#searchov .s-close {
  position: absolute;
  top: 26px;
  inset-inline-end: 5vw;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  display: grid;
  place-items: center;
  font-size: 18px;
  transition: 0.3s;
}

#searchov .s-close:hover {
  border-color: var(--gold);
  color: var(--gold2);
  transform: rotate(90deg);
}

/* ---------- Toast + cart bump ---------- */
#shtoast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  translate: -50% 24px;
  background: var(--panel);
  border: 1px solid var(--gold);
  color: var(--txt);
  border-radius: 99px;
  padding: 13px 26px;
  font-weight: 800;
  font-size: 13.5px;
  z-index: 130;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
  box-shadow: var(--shadow);
  display: flex;
  gap: 10px;
  align-items: center;
}

#shtoast.show {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
}

#shtoast .ti-icon {
  color: var(--green);
}

@keyframes cartpop {
  0% { transform: scale(1); }
  40% { transform: scale(1.55); }
  100% { transform: scale(1); }
}

.hicons .dot.bump {
  animation: cartpop 0.45s;
}

/* ---------- Back to top ---------- */
.btt {
  position: fixed;
  bottom: 26px;
  inset-inline-end: 26px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  transition: 0.35s;
  box-shadow: 0 10px 30px var(--accent-glow);
}

.btt.show {
  opacity: 1;
  visibility: visible;
}

.btt:hover {
  transform: translateY(-4px);
}

/* ---------- SHOP FILTERS v2 ---------- */
.filters {
  gap: 12px;
}

.f-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
}

.f-head b {
  font-size: 14.5px;
}

.f-head .clr {
  color: var(--gold2);
  font-size: 12.5px;
  font-weight: 800;
  border: 1px solid var(--line2);
  border-radius: 99px;
  padding: 5px 12px;
  transition: 0.25s;
}

.f-head .clr:hover {
  border-color: var(--gold);
  background: var(--gold-dim);
}

#activechips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

#activechips:empty {
  display: none;
}

.achip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold-dim);
  border: 1px solid var(--gold);
  color: var(--gold2);
  border-radius: 99px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 800;
}

.achip i {
  font-style: normal;
  cursor: pointer;
  opacity: 0.75;
  font-size: 14px;
  line-height: 1;
}

.achip i:hover {
  opacity: 1;
}

.fam-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fam-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.22s;
  font-size: 13.5px;
  color: var(--muted);
}

.fam-opt:hover {
  background: var(--accent-dim);
  color: var(--txt);
}

.fam-opt .sw {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--fc) 55%, #fff), var(--fc));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--fc) 45%, transparent);
  position: relative;
}

.fam-opt .sw::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: 0.22s;
}

.fam-opt.on {
  background: var(--gold-dim);
  border-color: var(--gold);
  color: var(--txt);
  font-weight: 800;
}

.fam-opt.on .sw::after {
  border-color: var(--txt);
  inset: -4px;
}

.fam-opt .n2 {
  margin-inline-start: auto;
  color: var(--muted2);
  font-size: 11.5px;
  font-weight: 600;
}

.fam-opt .newb {
  background: var(--grad-gold);
  color: #171000;
  font-size: 9.5px;
  font-weight: 800;
  border-radius: 99px;
  padding: 2px 7px;
}

.prange {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.prange .pr-vals {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
  color: var(--gold2);
}

.prange .pr-in {
  position: relative;
  height: 24px;
}

.prange input[type=range] {
  position: absolute;
  inset-inline: 0;
  top: 6px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  pointer-events: none;
  margin: 0;
}

.prange input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--line2);
  border-radius: 99px;
}

.prange input[type=range]::-moz-range-track {
  height: 4px;
  background: var(--line2);
  border-radius: 99px;
}

.prange input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--bg);
  margin-top: -7px;
  cursor: pointer;
  box-shadow: 0 2px 10px var(--gold-dim);
}

.prange input[type=range]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--bg);
  cursor: pointer;
}

.fpills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fpills button {
  border: 1px solid var(--line2);
  border-radius: 9px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  transition: 0.22s;
}

.fpills button:hover {
  border-color: var(--gold);
  color: var(--gold2);
}

.fpills button.on {
  border-color: var(--gold);
  color: var(--gold2);
  background: var(--gold-dim);
}

.fsw {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--muted);
  padding: 6px 0;
}

.fsw:hover {
  color: var(--txt);
}

.fsw input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fsw .box {
  width: 19px;
  height: 19px;
  border: 1.5px solid var(--line2);
  border-radius: 6px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition: 0.2s;
  color: transparent;
}

.fsw input:checked + .box {
  background: var(--grad-gold);
  border-color: var(--gold);
  color: #171000;
}

.fsw input:focus-visible + .box {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.fsw .n2 {
  margin-inline-start: auto;
  color: var(--muted2);
  font-size: 11.5px;
}

.fsw .stars2 {
  color: var(--gold);
  letter-spacing: 1px;
}

.fbar {
  display: none;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

.fbar button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line2);
  border-radius: 99px;
  padding: 12px;
  font-weight: 800;
  font-size: 13.5px;
  background: var(--panel);
}

.fbar button .cnt3 {
  background: var(--grad-gold);
  color: #171000;
  border-radius: 99px;
  padding: 1px 8px;
  font-size: 11px;
}

.nores {
  text-align: center;
  color: var(--muted);
  padding: 60px 20px;
  display: none;
}

.nores.show {
  display: block;
}

.nores b {
  display: block;
  font-size: 18px;
  color: var(--txt);
  margin-bottom: 8px;
}

/* ---------- MINI-CART DRAWER (#minicart) ---------- */
/* The drawer markup emits #cart-backdrop; an earlier build styled
   #minicart-backdrop only, so the overlay never appeared. Match both. */
#minicart-backdrop,
#cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 16, 0.65);
  backdrop-filter: blur(4px);
  z-index: 140;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
}

body.minicart-open #minicart-backdrop,
body.minicart-open #cart-backdrop {
  opacity: 1;
  visibility: visible;
}

#minicart {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  width: min(420px, 92vw);
  background: var(--panel);
  border-inline-start: 1px solid var(--line2);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
  z-index: 145;
  display: flex;
  flex-direction: column;
  transform: translateX(104%);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

[dir="rtl"] #minicart {
  transform: translateX(-104%);
}

body.minicart-open #minicart {
  transform: translateX(0) !important;
}

#minicart .mc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}

#minicart .mc-head h3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

#minicart .mc-head .mc-count {
  background: var(--gold-dim);
  color: var(--gold2);
  font-size: 12px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
}

#minicart .mc-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 16px;
  transition: 0.25s;
}

#minicart .mc-close:hover {
  border-color: var(--gold);
  color: var(--gold2);
  transform: rotate(90deg);
}

/* The drawer is a fixed-height flex column: head and foot stay put, only the
   item list scrolls. Every link in that chain needs min-height:0, otherwise a
   flex item refuses to shrink below its content and the footer — subtotal and
   checkout button — is pushed off the bottom of the screen. WooCommerce ships
   items and totals as ONE fragment inside .widget_shopping_cart_content, so the
   chain has to run through it rather than around it. */
#minicart .mc-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#minicart .mc-body > .widget_shopping_cart_content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#minicart .mc-items {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#minicart .mc-head,
#minicart .mc-foot {
  flex-shrink: 0;
}

.mc-item {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px;
  position: relative;
}

.mc-item .mc-thumb {
  width: 64px;
  height: 64px;
  background: var(--card-media);
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding: 4px;
}

.mc-item .mc-thumb img {
  /* WooCommerce prints the thumbnail's HTML width/height attributes on the
     tag (e.g. 150x100 from the registered image size). Without an explicit
     width/height here those attributes become the used box size regardless
     of max-height:100%, so a non-square product photo renders taller than
     this 64px container and pokes out — which is what made the product
     look "not centered". Filling the box and letting object-fit do the
     scaling is what actually keeps it centered for any source ratio. */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mc-item .mc-info {
  flex: 1;
  min-width: 0;
}

.mc-item .mc-title {
  font-weight: 800;
  font-size: 13.5px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.mc-item .mc-meta {
  color: var(--muted2);
  font-size: 11.5px;
  margin-top: 2px;
}

.mc-item .mc-price {
  color: var(--gold2);
  font-weight: 800;
  font-size: 13.5px;
  margin-top: 4px;
}

/* Measured at 17x23px before this: far under a thumb-sized target, and it is
   the one destructive control in the drawer, so it has to be easy to hit on
   purpose and hard to hit by accident. */
.mc-item .mc-remove {
  color: var(--muted2);
  font-size: 16px;
  line-height: 1;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: 0.2s;
  cursor: pointer;
}

.mc-item .mc-remove:hover {
  color: var(--danger);
}

/* WooCommerce ships `a.remove { color: red !important }` — keep the drawer on-brand. */
#minicart .mc-item a.mc-remove.remove,
#minicart .mc-item a.mc-remove.remove:visited {
  color: var(--muted2) !important;
  font-size: 16px !important;
  line-height: 1;
  /* Keep the 34px hit area from .mc-remove — this block used to reset it to
     width/height:auto, which is what made the target 17x23px. */
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: none !important;
  text-decoration: none;
}

#minicart .mc-item a.mc-remove.remove:hover,
#minicart .mc-item a.mc-remove.remove:focus-visible {
  color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

.mc-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
  font-size: 14px;
}

.mc-empty .ti-icon {
  color: var(--muted2);
  margin-bottom: 12px;
}

#minicart .mc-foot {
  padding: 20px 24px;
  border-top: 1px solid var(--line);
  background: var(--panel2);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#minicart .mc-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  font-size: 15px;
}

#minicart .mc-subtotal b {
  color: var(--gold2);
  font-size: 18px;
}

#minicart .mc-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#minicart .mc-actions .btn {
  padding: 12px 16px;
  font-size: 13px;
  justify-content: center;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS (1100, 1024, 960, 700, 560, 390)
   ============================================================ */
@media(max-width: 1100px) {
  nav.desk { display: none; }
  header.main .container { justify-content: space-between; }
  .tabs-shop { grid-template-columns: 1fr; }
  .ts-promo { position: static; }
  .mach { grid-template-columns: 1fr; }
  .mach .m-vis { min-height: 300px; order: 2; }
}

@media(max-width: 1024px) {
  .fbar { display: flex; }
  .shopwrap { grid-template-columns: 1fr; }
  .filters {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(340px, 88vw);
    z-index: 120;
    background: var(--bg);
    border-inline-end: 1px solid var(--line2);
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 18px;
    overflow-y: auto;
    transform: translateX(-104%);
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
  }
  [dir="rtl"] .filters { transform: translateX(104%); }
  body.filters-open .filters { transform: none !important; }
  .fgroup { flex: none; }
  #fback {
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 16, 0.6);
    backdrop-filter: blur(3px);
    z-index: 119;
    opacity: 0;
    visibility: hidden;
    transition: 0.35s;
  }
  body.filters-open #fback { opacity: 1; visibility: visible; }
  .f-done { display: block; width: 100%; margin-top: 8px; }
}

@media(min-width: 1025px) {
  .f-done { display: none; }
}

@media(max-width: 960px) {
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .prod-grid { grid-template-columns: 1fr 1fr; }
  .prod-row { grid-auto-columns: calc((100% - 20px) / 2); }
  .catbar { grid-template-columns: 1fr 1fr; }
  .ts-grid { grid-template-columns: 1fr 1fr; }
  .banner2 { grid-template-columns: 1fr; }
  .bcard { min-height: 320px; }
  .aroma-sec { grid-template-columns: 1fr; }
  .vals { grid-template-columns: 1fr 1fr; }
  .revs { grid-template-columns: 1fr; }
  .offer-cards { grid-template-columns: 1fr 1fr; }
  .scent-grid { grid-template-columns: 1fr 1fr; }
  footer.main .cols { grid-template-columns: 1fr 1fr; }
  .pdp { grid-template-columns: 1fr; }
  .gallery { position: static; }
  .fview { grid-template-columns: 1fr; text-align: center; place-items: center; gap: 10px; padding-top: 12vh; }
  .fview .fv-media img { max-height: 34vh; }
  .fview .spec-chip.c1 { top: 4%; inset-inline-start: 2%; }
  .fview .spec-chip.c2 { top: auto; bottom: 30%; inset-inline-end: 0; }
  .fview .spec-chip.c3 { bottom: 6%; inset-inline-start: 6%; }
}

@media(max-width: 700px) {
  .container { width: 92vw; }
  #preloader img { height: 80px; }
  .topstrip .container { height: 32px; gap: 8px; }
  .topstrip { font-size: 10.5px; }
  .topstrip .hot { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .topstrip .links { flex-shrink: 0; gap: 8px; }
  .topstrip .links a { display: none; }
  header.main .container { height: 62px; gap: 8px; }
  .logo img { height: 38px; }
  .hicons { gap: 2px; }
  .hicons .ic { width: 34px; height: 34px; }
  .menu-btn { padding: 9px 11px; font-size: 0; gap: 0; letter-spacing: 0; }
  #megamenu .inner { grid-template-columns: 1fr; gap: 20px; padding-top: 80px; align-content: start; }
  #megamenu .tiles { display: none; }
  #megamenu .links a { font-size: 30px; }
  #megamenu .foot { position: static; flex-direction: column; gap: 10px; margin-top: 30px; align-items: center; }
  section.block { padding: 56px 0; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 26px; }
  .sec-head h2 { font-size: 27px; }

  /* Hero on mobile */
  .hero { min-height: 600px; }
  .hero .slide { width: 58vw; top: 36%; }
  .hero-info { display: none; }
  .hero .arr { display: none; }
  .hero .hudring { width: 88vmin; top: 36%; }
  .hero-title { bottom: 9vh; width: 94vw; }
  .hero-title .nm { font-size: 42px; }
  .hero-title .pr { font-size: 17px; margin: 8px 0 12px; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .btn { padding: 12px 18px; font-size: 12.5px; }
  .sidenav { inset-inline-end: 3vw; gap: 8px; }
  .sidenav button { width: 42px; height: 42px; }
  .hero-counter { display: none; }
  .progressbar { bottom: 26px; width: 74vw; }
  .hero .scrollhint { display: none; }
  .allview { padding-top: 76px; width: 92vw; }
  .allview .av-head h2 { font-size: 22px; }
  .av-grid { grid-template-columns: 1fr 1fr; gap: 10px; max-height: 56vh; }
  .fview { width: 92vw; padding-top: 13vh; gap: 6px; }
  .fview .fv-txt h2 { font-size: 23px; line-height: 1.4; }
  .fview .fv-txt p { font-size: 12.5px; line-height: 1.8; margin-bottom: 14px; }
  .fview .fv-txt .strike { font-size: 12px; margin-bottom: 8px; }
  .fview .fv-txt .btn { padding: 11px 18px; font-size: 12px; }
  .fview .fv-media img { max-height: 30vh; }
  .fview .fv-media .bignum { font-size: 110px; }
  .fview .spec-chip { font-size: 10.5px; padding: 7px 10px; border-radius: 10px; }
  .fview .spec-chip small { font-size: 9px; }

  /* Mobile category snap carousel */
  .cat-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 70%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 2px 14px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to left, transparent 0, #000 20px, #000 calc(100% - 20px), transparent);
  }
  .cat-grid::-webkit-scrollbar { display: none; }
  .cat-card { scroll-snap-align: center; min-height: 235px; padding: 18px; }
  .cat-card img { height: 48%; max-width: 58%; }

  .catbar {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 60%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    scrollbar-width: none;
  }
  .catbar::-webkit-scrollbar { display: none; }
  .catbar .cb { scroll-snap-align: center; padding: 10px 12px; gap: 10px; }
  .catbar .cb img { width: 36px; height: 36px; }
  .catbar .cb span { font-size: 12.5px; }
  .catbar .cb small { font-size: 10.5px; }

  /* Product cards quick2 touch display */
  .pcard .quick2 {
    opacity: 1;
    transform: none;
    position: static;
    margin: 10px 14px 14px;
    gap: 6px;
  }
  .pcard .quick2 button,
  .pcard .quick2 a {
    padding: 8px 6px;
    font-size: 11px;
  }
  .pcard .wish {
    opacity: 1;
    transform: none;
  }

  .stats-strip .container { grid-template-columns: 1fr 1fr; gap: 26px; padding: 26px 0; }
  .stat .num { font-size: 28px; }
  .stat .lbl { font-size: 11px; }
  .marquee span { font-size: 12px; gap: 28px; }
  .marquee .track { gap: 28px; }

  .ts-tabs { overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
  .ts-tabs::-webkit-scrollbar { display: none; }
  .ts-tabs button { padding: 8px 14px; font-size: 12.5px; white-space: nowrap; }
  .ts-tabs a { white-space: nowrap; font-size: 12px; }
  .ts-promo { padding: 20px; }
  .ts-promo img { max-height: 200px; }
  .banner2 { gap: 12px; }
  .bcard { padding: 22px; min-height: 250px; }
  .aroma-sec { gap: 20px; }
  .fam { padding: 13px 15px; gap: 12px; }
  .fam .dot { width: 40px; height: 40px; }
  .fam b { font-size: 14px; }
  .fam small { font-size: 11.5px; }
  .newsletter { padding: 56px 0; }
  .newsletter form { flex-direction: column; gap: 10px; }
  .newsletter .btn { justify-content: center; }
  footer.main { padding-top: 46px; }
  footer.main .cols { grid-template-columns: 1fr; gap: 28px; padding-bottom: 34px; }
  footer.main .base { flex-direction: column; text-align: center; gap: 10px; }
  .wafloat { width: 50px; height: 50px; bottom: 18px; inset-inline-start: 18px; }
  .btt { bottom: 84px; inset-inline-end: 16px; width: 44px; height: 44px; }

  /* Shop mobile */
  .shophero { padding: 44px 0 38px; }
  .shophero::after { font-size: 170px; bottom: -22%; }
  .catpills a { padding: 8px 14px; font-size: 12px; }
  .shopwrap { padding: 32px 0 60px; gap: 18px; }
  .filters { gap: 10px; }
  .toolbar { gap: 10px; }
  .toolbar select { padding: 8px 12px; font-size: 12px; }
  .pagination a { width: 38px; height: 38px; font-size: 12.5px; }
  .offer-cards { grid-template-columns: 1fr; gap: 14px; }
  .offers h2 { font-size: 24px; }
  .mach h2 { font-size: 26px; }
  .mach .m-vis > img { max-height: 250px; }
  .mach .m-chip { font-size: 11px; padding: 7px 10px; }
  .m-pill { flex: 1 1 100%; }
  .fam-tabs button { padding: 10px 12px; font-size: 12.5px; }
  .scent-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .orb-wheel { width: 74vmin; margin-inline: auto; }

  /* Product PDP mobile */
  .pdp { gap: 24px; padding: 22px 0 50px; }
  .pinfo h1 { font-size: 27px; }
  .pricebox .now { font-size: 27px; }
  #thumbs button { width: 66px; height: 66px; }
  .buyrow { flex-wrap: wrap; }
  .buyrow .qty { order: 1; }
  .buyrow .btn { flex: 1 1 46%; justify-content: center; padding: 13px 12px; font-size: 12.5px; }
  .tabbar { overflow-x: auto; scrollbar-width: none; }
  .tabbar button { padding: 12px 16px; font-size: 13px; white-space: nowrap; }
  #stickybuy .nm2 { display: none; }
  #stickybuy .container { height: 66px; gap: 10px; }
  #stickybuy .btn { padding: 10px 16px; font-size: 12px; }
}

@media(max-width: 560px) {
  .prod-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pcard .name { font-size: 13px; min-height: 38px; }
  .cat-card { min-height: 190px; padding: 18px; }
  .vals { grid-template-columns: 1fr 1fr; gap: 12px; }
  .val { padding: 20px 16px; }

  /* Mini-cart on a phone: the drawer is nearly full width, so give the
     content back the horizontal space the desktop padding was eating and
     keep the thumbnail from crowding the product name. */
  #minicart { width: min(420px, 100vw); }
  #minicart .mc-head { padding: 16px; }
  #minicart .mc-items { padding: 14px 16px; gap: 12px; }
  #minicart .mc-foot { padding: 16px; }
  .mc-item { padding: 10px; gap: 10px; }
  .mc-item .mc-thumb { width: 54px; height: 54px; }
  .mc-item .mc-title { font-size: 13px; }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero .aurora i, .hero .hudring::before, .hero .hudring::after, .hero .hudring .tick {
    animation: none !important;
  }
}

/* =====================================================================
   WooCommerce system pages — cart, checkout, account, reviews, add-ons
   The mockup never covered these; without this block they render as
   stock WooCommerce (white inputs, purple buttons) inside the dark theme.
   ===================================================================== */

/* ---- Page shell ---- */
.woocommerce-page .page-default-wrap,
.woocommerce-cart .page-default-wrap,
.woocommerce-checkout .page-default-wrap,
.woocommerce-account .page-default-wrap {
  padding-block: 90px 80px;
}

.woocommerce-page .entry-title,
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  margin-bottom: 28px;
}

/* ---- Form controls (shared by cart, checkout, account, reviews) ---- */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="url"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select,
.woocommerce .input-text,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="password"],
.woocommerce-page textarea,
.woocommerce-page select,
.woocommerce-page .input-text {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r-sm);
  color: var(--txt);
  font-family: var(--f-body);
  font-size: 14.5px;
  padding: 13px 16px;
  line-height: 1.5;
  transition: 0.25s;
  box-shadow: none;
}

.woocommerce textarea,
.woocommerce-page textarea { min-height: 120px; resize: vertical; }

.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.woocommerce-page input:focus,
.woocommerce-page textarea:focus,
.woocommerce-page select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-dim);
}

.woocommerce input::placeholder,
.woocommerce textarea::placeholder { color: var(--muted2); }

.woocommerce label,
.woocommerce-page label,
.woocommerce .form-row label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 7px;
  display: inline-block;
}

.woocommerce .required { color: var(--gold); border: 0; }

.woocommerce .form-row { margin-bottom: 16px; padding: 0; }

/* ---- Buttons ---- */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page .button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--grad-gold) !important;
  color: #1B1206 !important;
  border: 0;
  border-radius: 99px;
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  line-height: 1.2;
  text-shadow: none;
  transition: 0.3s;
  box-shadow: 0 10px 28px var(--gold-dim);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page .button:hover {
  background: var(--grad-gold) !important;
  color: #1B1206 !important;
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.woocommerce .button:disabled,
.woocommerce .button.disabled,
.woocommerce button.button:disabled[disabled] {
  opacity: 0.45;
  transform: none;
  cursor: not-allowed;
}

/* Secondary / ghost buttons */
.woocommerce .button.wc-backward,
.woocommerce a.button.wc-backward,
.woocommerce .woocommerce-button--previous,
.woocommerce .button.wp-element-button.wc-backward {
  background: transparent !important;
  color: var(--txt) !important;
  border: 1px solid var(--line2);
  box-shadow: none;
}

.woocommerce .button.wc-backward:hover {
  border-color: var(--gold);
  color: var(--gold2) !important;
}

/* ---- Tables ---- */
.woocommerce table.shop_table {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin-bottom: 26px;
  width: 100%;
}

.woocommerce table.shop_table th {
  background: var(--panel2);
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
  padding: 16px 18px;
  border: 0;
  text-align: start;
}

.woocommerce table.shop_table td {
  border: 0;
  border-top: 1px solid var(--line);
  padding: 18px;
  vertical-align: middle;
  color: var(--txt);
}

.woocommerce table.shop_table tbody tr:first-child td { border-top: 0; }

/* ---- Cart ---- */
.woocommerce .cart_item .product-thumbnail img {
  width: 74px;
  height: 74px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--card-media);
}

.woocommerce .cart_item .product-name a {
  font-weight: 800;
  color: var(--txt);
}

.woocommerce .cart_item .product-name a:hover { color: var(--gold2); }

.woocommerce a.remove,
.woocommerce a.remove:visited {
  color: var(--muted2) !important;
  background: none !important;
  font-size: 20px !important;
  line-height: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  transition: 0.25s;
}

.woocommerce a.remove:hover {
  color: var(--danger) !important;
  background: rgba(255, 84, 104, 0.12) !important;
}

.woocommerce .quantity input.qty {
  width: 74px;
  text-align: center;
  padding-inline: 8px;
}

.woocommerce .cart .actions { background: var(--panel2); }

.woocommerce .cart .actions .coupon {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.woocommerce .cart .actions .coupon .input-text {
  width: auto;
  min-width: 200px;
  flex: 0 1 240px;
}

.cart-collaterals { margin-top: 8px; }

.cart-collaterals .cart_totals {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
}

.cart-collaterals .cart_totals h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 16px;
}

.cart-collaterals .cart_totals table.shop_table {
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
}

.cart-collaterals .cart_totals table.shop_table th,
.cart-collaterals .cart_totals table.shop_table td {
  background: none;
  padding: 13px 0;
}

.cart-collaterals .order-total th,
.cart-collaterals .order-total td {
  border-top: 1px solid var(--line2);
  font-size: 17px;
}

.cart-collaterals .order-total .woocommerce-Price-amount { color: var(--gold2); font-weight: 800; }

.wc-proceed-to-checkout { padding-top: 18px !important; }

.wc-proceed-to-checkout .checkout-button {
  display: flex !important;
  width: 100%;
  font-size: 15.5px !important;
  padding: 17px 28px !important;
}

/* ---- Checkout ---- */
.woocommerce-checkout .col2-set { display: block; }

.woocommerce-checkout #customer_details {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
  margin-bottom: 26px;
}

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 18px;
}

.woocommerce-checkout .woocommerce-checkout-review-order {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
}

.woocommerce-checkout-review-order-table { background: none !important; border: 0 !important; }

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  background: none !important;
  padding: 13px 0 !important;
}

.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
  border-top: 1px solid var(--line2);
  font-size: 17px;
}

.woocommerce-checkout-review-order-table tfoot .order-total .woocommerce-Price-amount {
  color: var(--gold2);
  font-weight: 800;
}

.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
  border: 0;
  padding: 0;
  margin-bottom: 14px;
}

.woocommerce-checkout #payment ul.payment_methods li {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  color: var(--txt);
  font-size: 14.5px;
  margin: 0;
  cursor: pointer;
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 13.5px;
  margin: 12px 0 0;
  padding: 14px 16px;
}

.woocommerce-checkout #payment div.payment_box::before { display: none; }

.woocommerce-checkout #place_order {
  width: 100%;
  font-size: 15.5px !important;
  padding: 17px 28px !important;
  margin-top: 6px;
}

.woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 18px; }

.woocommerce form.checkout_coupon {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
}

/* ---- Notices ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  background: var(--panel) !important;
  border: 1px solid var(--line2);
  border-inline-start: 3px solid var(--gold);
  border-radius: var(--r-sm);
  color: var(--txt);
  padding: 16px 20px;
  margin-bottom: 22px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-error { border-inline-start-color: var(--danger); }

.woocommerce-message .button,
.woocommerce-info .button {
  margin-inline-start: auto;
  padding: 10px 20px;
  font-size: 13px;
}

/* ---- Select2 ---- */
.select2-container--default .select2-selection--single {
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r-sm);
  height: 48px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--txt);
  line-height: 46px;
  padding-inline: 16px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; }

.select2-dropdown {
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r-sm);
  color: var(--txt);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--accent-dim);
  color: var(--gold2);
}

.select2-search--dropdown .select2-search__field {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 8px;
  color: var(--txt);
  padding: 8px 10px;
}

/* ---- My account ---- */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px;
  margin-bottom: 24px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  transition: 0.25s;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--accent-dim);
  color: var(--txt);
}

.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce .woocommerce-form-login,
.woocommerce .woocommerce-form-register {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
}

.woocommerce-account h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 16px;
}

/* ---- Reviews ---- */
#reviews .woocommerce-Reviews-title,
#reviews #reply-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 18px;
}

#reviews .commentlist { list-style: none; padding: 0; margin: 0 0 28px; }

#reviews .commentlist li.review,
#reviews .commentlist li.comment {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  margin-bottom: 14px;
  list-style: none;
}

#reviews .commentlist li .comment_container { display: flex; gap: 16px; align-items: flex-start; }

#reviews .commentlist li img.avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  position: static;
  padding: 0;
  background: none;
}

#reviews .commentlist li .comment-text {
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

#reviews .comment-text .woocommerce-review__author { font-weight: 800; color: var(--txt); }
#reviews .comment-text .woocommerce-review__published-date { color: var(--muted2); font-size: 12.5px; }
#reviews .comment-text p { color: var(--muted); line-height: 1.9; }

/* WooCommerce / plugin CSS resets #respond, so this needs the weight. */
#reviews #review_form_wrapper #respond,
#reviews #respond {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r) !important;
  padding: 26px !important;
  margin: 0 !important;
}

#reviews .comment-form-rating .stars a { color: var(--gold); }
#reviews p.stars a::before { color: var(--gold); }

.woocommerce .star-rating span,
.woocommerce p.stars a { color: var(--gold); }
.woocommerce .star-rating::before { color: var(--muted2); }

/* ---- Product add-ons (YITH + Themehigh) ---- */
.yith-wapo-container,
.thwepo-extra-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}

.yith-wapo-block,
.yith-wapo-addon,
.thwepo-extra-options .thwepo-section {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 16px 18px;
}

.yith-wapo-block .wapo-block-title,
.yith-wapo-addon-title,
.thwepo-section-title {
  font-weight: 800;
  font-size: 14.5px;
  color: var(--txt);
  margin-bottom: 10px;
  display: block;
}

.yith-wapo-option label,
.thwepo-extra-options label {
  color: var(--muted);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 0 0 8px;
}

.yith-wapo-option label:last-child,
.thwepo-extra-options label:last-child { margin-bottom: 0; }

.yith-wapo-option input[type="checkbox"],
.yith-wapo-option input[type="radio"],
.thwepo-extra-options input[type="checkbox"],
.thwepo-extra-options input[type="radio"] {
  accent-color: var(--gold);
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.yith-wapo-option .price,
.yith-wapo-price,
.thwepo-price { color: var(--gold2); font-weight: 800; margin-inline-start: auto; }

/* ---- Breadcrumb & pagination ---- */
.woocommerce-breadcrumb {
  color: var(--muted2);
  font-size: 13px;
  margin-bottom: 18px;
}

.woocommerce-breadcrumb a { color: var(--muted); }
.woocommerce-breadcrumb a:hover { color: var(--gold2); }

.woocommerce nav.woocommerce-pagination ul {
  border: 0;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li { border: 0; overflow: visible; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  min-width: 42px;
  padding: 11px 14px;
  font-weight: 700;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--gold-dim);
  border-color: var(--gold);
  color: var(--gold2);
}

/* ---- Screen-reader-only helper (mockup parity) ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
}

/* ---- Sale price on product cards (WooCommerce emits <del>/<ins>) ---- */
.pcard .price del,
.pcard .price del .woocommerce-Price-amount {
  color: var(--muted2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: line-through;
  opacity: 0.85;
  margin-inline-start: 6px;
}

.pcard .price ins {
  text-decoration: none;
  background: none;
  color: inherit;
}

.pricebox del,
.pricebox del .woocommerce-Price-amount {
  color: var(--muted2);
  font-size: 0.6em;
  text-decoration: line-through;
  margin-inline-start: 10px;
}

.pricebox ins { text-decoration: none; background: none; }

/* ---- Desktop split for cart & checkout ---- */
@media (min-width: 900px) {
  .woocommerce-cart .cart-collaterals { display: flex; justify-content: flex-end; }
  .woocommerce-cart .cart-collaterals .cart_totals { width: min(460px, 100%); }
  .woocommerce-checkout .woocommerce form.checkout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 26px;
    align-items: start;
  }
  .woocommerce-checkout .woocommerce form.checkout #customer_details { grid-column: 1; margin-bottom: 0; }
  .woocommerce-checkout .woocommerce form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 12px; }
  .woocommerce-checkout .woocommerce form.checkout #order_review { grid-column: 2; grid-row: 2; }
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }
  .woocommerce .form-row-first,
  .woocommerce .form-row-last { width: calc(50% - 8px); float: none; display: inline-block; vertical-align: top; }
  .woocommerce .form-row-first { margin-inline-end: 12px; }
}

/* ---- Quantity stepper: compact inside cart / mini-cart rows ---- */
.qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 99px;
  padding: 4px;
}

.qty .q-minus,
.qty .q-plus {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  transition: 0.2s;
}

.qty .q-minus:hover,
.qty .q-plus:hover { background: var(--accent-dim); color: var(--txt); }

.qty .q-val,
.qty input[type="number"] {
  width: 46px !important;
  min-width: 0;
  text-align: center;
  background: none !important;
  border: 0 !important;
  color: var(--txt);
  font-weight: 800;
  font-size: 14px;
  padding: 0 !important;
  box-shadow: none !important;
  -moz-appearance: textfield;
}

.qty input[type="number"]::-webkit-outer-spin-button,
.qty input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.woocommerce table.shop_table .qty { padding: 3px; }
.woocommerce table.shop_table .qty .q-minus,
.woocommerce table.shop_table .qty .q-plus { width: 30px; height: 30px; font-size: 15px; }
.woocommerce table.shop_table .qty .q-val { width: 38px !important; }

/* ---- Product description: fixed paper card, theme-proof ----
   Legacy descriptions carry inline colours written for a white page, so the
   card stays light in both themes instead of inheriting the dark surface. */
.tabpane .prose,
.pdp .pdesc.prose,
.woocommerce-Tabs-panel .prose {
  background: #FFFFFF;
  color: #1B1D3A;
  border: 1px solid rgba(27, 29, 58, 0.10);
  border-radius: var(--r);
  padding: 26px 28px;
  max-width: none;
}

.tabpane .prose h1,
.tabpane .prose h2,
.tabpane .prose h3,
.tabpane .prose h4,
.tabpane .prose h5,
.tabpane .prose strong,
.tabpane .prose b,
.tabpane .prose th,
.tabpane .prose td,
.tabpane .prose li,
.tabpane .prose p,
.tabpane .prose span { color: inherit; }

.tabpane .prose a { color: #8A6A23; text-decoration: underline; }
.tabpane .prose img { border-radius: var(--r-sm); margin: 14px 0; }
.tabpane .prose table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.tabpane .prose table th,
.tabpane .prose table td { border: 1px solid rgba(27, 29, 58, 0.12); padding: 10px 12px; }
.tabpane .prose table th { background: rgba(27, 29, 58, 0.05); font-weight: 800; }
.tabpane .prose ul,
.tabpane .prose ol { padding-inline-start: 22px; }
.tabpane .prose ul li { list-style: disc; }
.tabpane .prose ol li { list-style: decimal; }
.tabpane .prose iframe,
.tabpane .prose video { max-width: 100%; border-radius: var(--r-sm); }

/* ---- Shipping & warranty tab: icon cards instead of one grey paragraph ---- */
.shipgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.shipcard {
  border: 1px solid rgba(27, 29, 58, 0.12);
  border-radius: var(--r-sm);
  padding: 20px 18px;
  background: rgba(27, 29, 58, 0.025);
  display: grid;
  gap: 8px;
  align-content: start;
}

.shipcard .ti-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(185, 141, 63, 0.18), rgba(185, 141, 63, 0.06));
  color: #8A6A23;
  border: 1px solid rgba(185, 141, 63, 0.28);
}

.shipcard .ti-icon svg { width: 20px; height: 20px; }
.shipcard h4 { font-family: var(--f-display); font-weight: 800; font-size: 15px; line-height: 1.5; }
.shipcard p { font-size: 13.5px; line-height: 1.85; opacity: 0.82; margin: 0; }

/* ---- Mobile: WooCommerce system pages ---- */
@media (max-width: 780px) {
  /* ---- Mobile cart: real cards, not a stacked table ----
     The default stacked layout printed "Product:", "Price:", "Quantity:",
     "Subtotal:" down the page with the thumbnail floating on its own row. */
  .woocommerce table.shop_table_responsive,
  .woocommerce table.shop_table_responsive tbody { display: block; width: 100%; border: 0; }
  .woocommerce table.shop_table_responsive thead { display: none; }

  .woocommerce table.shop_table_responsive tr.cart_item,
  .woocommerce table.shop_table_responsive tr.woocommerce-cart-form__cart-item {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas:
      "thumb name"
      "thumb price"
      "qty    sub";
    column-gap: 14px;
    row-gap: 8px;
    align-items: center;
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 16px 16px 16px 14px;
    margin-bottom: 12px;
  }

  .woocommerce table.shop_table_responsive tr td {
    display: block;
    border: 0;
    padding: 0;
    text-align: start;
  }

  .woocommerce table.shop_table_responsive tr td::before {
    display: block;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--muted2);
    margin-bottom: 4px;
    float: none;
  }

  /* WooCommerce core hides the thumbnail on mobile with a more specific
     selector, which collapsed the whole card grid. */
  .woocommerce table.shop_table_responsive tr td.product-thumbnail {
    display: block !important;
    grid-area: thumb;
    align-self: start;
  }
  .woocommerce table.shop_table_responsive td.product-thumbnail::before { display: none; }
  .woocommerce table.shop_table_responsive td.product-thumbnail img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    border-radius: var(--r-sm);
    background: var(--card-media);
    padding: 6px;
  }

  .woocommerce table.shop_table_responsive td.product-name {
    grid-area: name;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.5;
    padding-inline-end: 26px;
  }
  .woocommerce table.shop_table_responsive td.product-name::before { display: none; }

  .woocommerce table.shop_table_responsive td.product-price { grid-area: price; font-size: 13.5px; color: var(--muted); }
  .woocommerce table.shop_table_responsive td.product-price::before { display: inline; margin: 0 0 0 6px; }

  .woocommerce table.shop_table_responsive td.product-quantity { grid-area: qty; }
  .woocommerce table.shop_table_responsive td.product-subtotal {
    grid-area: sub;
    text-align: end;
    font-weight: 800;
    font-size: 16px;
    color: var(--gold2);
  }
  .woocommerce table.shop_table_responsive td.product-subtotal::before { display: none; }

  .woocommerce table.shop_table_responsive td.product-remove {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    width: auto;
  }
  .woocommerce table.shop_table_responsive td.product-remove::before { display: none; }

  .woocommerce table.shop_table_responsive tr:not(.cart_item):not(.woocommerce-cart-form__cart-item) { display: block; }
  .woocommerce table.shop_table_responsive tr td.actions { padding: 4px 0 0; }
  .woocommerce .cart .actions .coupon { flex-direction: column; align-items: stretch; }
  .woocommerce .cart .actions .coupon .input-text { width: 100%; flex: 1 1 auto; }
  .woocommerce .cart .actions .button { width: 100%; }
  .cart-collaterals .cart_totals,
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout .woocommerce-checkout-review-order,
  .woocommerce-account .woocommerce-MyAccount-content { padding: 18px; }
  .woocommerce .form-row-first,
  .woocommerce .form-row-last { width: 100%; margin-inline-end: 0; }
  .tabpane .prose { padding: 18px; }
  .woocommerce-page .entry-title,
  .woocommerce-cart .entry-title,
  .woocommerce-checkout .entry-title,
  .woocommerce-account .entry-title { font-size: 26px; }
  .woocommerce-page .page-default-wrap,
  .woocommerce-cart .page-default-wrap,
  .woocommerce-checkout .page-default-wrap,
  .woocommerce-account .page-default-wrap { padding-block: 96px 50px; }
}

/* ---- Search overlay: live suggestions ---- */
#searchov .s-results {
  margin-top: 14px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  display: none;
  flex-direction: column;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 8px;
}

#searchov .s-results.show { display: flex; }

#searchov .s-res {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  transition: 0.2s;
}

#searchov .s-res:hover { background: var(--accent-dim); }

#searchov .s-res img,
#searchov .s-res .s-res-ph {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--card-media);
  flex-shrink: 0;
}

#searchov .s-res-t {
  font-weight: 700;
  font-size: 14px;
  color: var(--txt);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#searchov .s-res-p {
  color: var(--gold2);
  font-weight: 800;
  font-size: 13.5px;
  white-space: nowrap;
}

#searchov .s-res-p del { display: none; }

/* ---- Light theme: the footer keeps a dark indigo ground, so it needs the
   light-ink lockup, not the dark-ink one used elsewhere in light mode. ---- */
html.light footer.main .lg-d { display: inline-block; }
html.light footer.main .lg-l { display: none; }
html.light footer.main .logo img { filter: none; }

/* ---- Search overlay chrome ---- */
#searchov .s-close {
  position: absolute;
  top: 26px;
  inset-inline-end: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--panel);
  border: 1px solid var(--line2);
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  transition: 0.25s;
  z-index: 2;
}

#searchov .s-close:hover {
  color: var(--txt);
  border-color: var(--gold);
  background: var(--gold-dim);
}

#searchov input[type="search"]::-webkit-search-cancel-button,
#searchov input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

#searchov form { position: relative; }

#searchov .s-hint {
  text-align: center;
  color: var(--muted2);
  font-size: 12.5px;
  margin-top: 10px;
}

/* ---- Reviews polish ----
   `.revs` is a 3-up grid built for the mockup's static testimonial cards.
   WooCommerce injects ONE `.woocommerce-Reviews` wrapper, which used to land
   in a single 466px column and overflow the viewport. Span it full width. */
.revs > .woocommerce-Reviews,
.revs > #reviews {
  grid-column: 1 / -1;
  min-width: 0;
}

#reviews {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

#reviews #comments { min-width: 0; }
#reviews #review_form_wrapper { min-width: 0; }

/* No reviews yet: a real empty state, not a stray line of grey text. */
#reviews .woocommerce-noreviews {
  background: var(--panel) !important;
  border: 1px dashed var(--line2);
  border-inline-start: 1px dashed var(--line2);
  color: var(--muted);
  border-radius: var(--r);
  padding: 38px 26px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 10px;
  font-size: 14.5px;
}

#reviews .woocommerce-noreviews::before {
  content: "";
  width: 34px;
  height: 34px;
  background-color: var(--gold);
  -webkit-mask: var(--ico-star) center / contain no-repeat;
  mask: var(--ico-star) center / contain no-repeat;
  opacity: 0.85;
}

#reviews .comment-form-rating { margin-bottom: 18px; }
#reviews .comment-form-rating label { display: block; margin-bottom: 8px; }

#reviews p.stars {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 8px;
  font-size: 26px;
  margin: 0;
}

#reviews p.stars a {
  color: var(--muted2);
  transition: 0.18s;
  text-decoration: none;
}

#reviews p.stars a:hover,
#reviews p.stars a:hover ~ a,
#reviews p.stars a.active,
#reviews p.stars a.active ~ a { color: var(--gold); transform: scale(1.08); }

#reviews .comment-form-comment textarea,
#reviews .comment-form-author input,
#reviews .comment-form-email input {
  background: var(--panel2) !important;
  border: 1px solid var(--line2) !important;
  color: var(--txt) !important;
  border-radius: var(--r-sm) !important;
}

#reviews .comment-form-comment textarea { min-height: 130px; }

/* Name + email side by side — the stacked default looked like a bare form. */
#reviews #commentform {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

#reviews #commentform > .comment-form-rating,
#reviews #commentform > .comment-form-comment,
#reviews #commentform > .comment-form-cookies-consent,
#reviews #commentform > .form-submit,
#reviews #commentform > .comment-notes { grid-column: 1 / -1; }

#reviews #commentform p { margin: 0; }
#reviews #commentform label { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 6px; display: block; }

#reviews .comment-form-cookies-consent { display: flex; align-items: center; gap: 9px; }
#reviews .comment-form-cookies-consent label { margin: 0; font-weight: 400; font-size: 13px; }
#reviews .comment-form-cookies-consent input { width: auto; accent-color: var(--gold); }

#reviews .form-submit input#submit {
  width: auto;
  min-width: 180px;
}

#reviews .commentlist li .comment_container {
  background: none;
  border: 0;
  padding: 0;
}

#reviews .comment-text .meta { margin-bottom: 8px; }

/* Review cards get the gold rail the rest of the theme uses. */
#reviews .commentlist li.review,
#reviews .commentlist li.comment {
  position: relative;
  overflow: hidden;
}

#reviews .commentlist li.review::before,
#reviews .commentlist li.comment::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--grad-gold);
  opacity: 0.7;
}

#reviews .commentlist li .star-rating { float: none; margin: 0 0 8px; font-size: 13px; }

#reviews .comment-form-cookies-consent,
#reviews .comment-notes,
#reviews .form-submit + p,
#reviews #respond > p:last-child {
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.8;
}

#reviews .form-submit { margin-top: 4px; }

@media (max-width: 900px) {
  #reviews { grid-template-columns: 1fr; }
  #reviews #commentform { grid-template-columns: 1fr; }
}

/* ---- Cart totals heading and shipping block ---- */
.woocommerce .woocommerce-shipping-destination,
.woocommerce .woocommerce-shipping-calculator { color: var(--muted); font-size: 13.5px; }
.woocommerce .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
.woocommerce .woocommerce-shipping-methods li { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.woocommerce .woocommerce-shipping-methods li input { accent-color: var(--gold); }
.woocommerce .shipping-calculator-button { color: var(--gold2); text-decoration: underline; }

/* ---- Live search results: shared by the overlay and inline search fields ---- */
.s-results {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 8px;
  box-shadow: var(--shadow);
  max-height: min(56vh, 440px);
  overflow-y: auto;
}

.s-results.show { display: flex; }

.s-results.s-float {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 10px);
  /* Sits above the shop-hero category pills, which are painted later in the
     document and were showing through the suggestions panel. */
  z-index: 140;
  background: var(--panel);
  backdrop-filter: none;
}

/* The field that owns a floating panel has to out-stack its siblings too. */
form.srch,
.shophero form.srch,
.s-box { position: relative; z-index: 130; }

.s-res {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  transition: 0.2s;
}

.s-res:hover { background: var(--accent-dim); }

.s-res img,
.s-res .s-res-ph {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--card-media);
  flex-shrink: 0;
}

.s-res-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.s-res-t {
  font-weight: 700;
  font-size: 14px;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s-res-c { font-size: 11.5px; color: var(--muted2); }

.s-res-p {
  color: var(--gold2);
  font-weight: 800;
  font-size: 13.5px;
  white-space: nowrap;
}

.s-res-p del { display: none; }
.s-res-p ins { text-decoration: none; }

.s-all {
  display: block;
  text-align: center;
  padding: 11px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  color: var(--gold2);
  font-weight: 800;
  font-size: 13px;
}

.s-all:hover { background: var(--gold-dim); border-radius: var(--r-sm); }

.s-empty {
  padding: 22px;
  text-align: center;
  color: var(--muted2);
  font-size: 13.5px;
}

.s-results.loading::after {
  content: "";
  display: block;
  height: 2px;
  margin: 6px 8px 0;
  border-radius: 2px;
  background: var(--grad-gold);
  animation: sload 1s ease-in-out infinite;
}

@keyframes sload {
  0% { opacity: 0.25; transform: scaleX(0.3); }
  50% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0.25; transform: scaleX(0.3); }
}

/* ---- Clean product description components ---- */
.tabpane .prose .shasr-lede {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.9;
  color: #1B1D3A;
  margin-bottom: 18px;
}

.tabpane .prose h3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 19px;
  color: #1B1D3A;
  margin: 26px 0 12px;
  padding-inline-start: 14px;
  border-inline-start: 3px solid #C29A4B;
  line-height: 1.5;
}

.tabpane .prose h3:first-child { margin-top: 0; }

.tabpane .prose .shasr-flist {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}

.tabpane .prose .shasr-flist li {
  list-style: none;
  background: #F7F5F0;
  border: 1px solid rgba(27, 29, 58, 0.08);
  border-radius: 12px;
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tabpane .prose .shasr-flist li strong {
  font-weight: 800;
  font-size: 14.5px;
  color: #1B1D3A;
}

.tabpane .prose .shasr-flist li span {
  font-size: 14px;
  color: #55607A;
  line-height: 1.8;
}

.tabpane .prose .shasr-specs {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 14.5px;
}

.tabpane .prose .shasr-specs th,
.tabpane .prose .shasr-specs td {
  border: 1px solid rgba(27, 29, 58, 0.12);
  padding: 11px 14px;
  text-align: start;
}

.tabpane .prose .shasr-specs th {
  background: #F2EFE8;
  font-weight: 800;
  color: #1B1D3A;
  width: 42%;
}

.tabpane .prose .shasr-specs td { color: #55607A; direction: ltr; text-align: start; }

@media (min-width: 700px) {
  .tabpane .prose .shasr-flist { grid-template-columns: 1fr 1fr; }
}

/* ---- Description figures ----
   Some descriptions carry icon-sized images. Stretching those to 100% turned
   a 50px PNG into a blurry full-width band, so never upscale past natural size. */
.tabpane .prose .shasr-fig { margin: 18px 0 0; }
.tabpane .prose .shasr-fig { display: flex; justify-content: center; }
.tabpane .prose .shasr-fig img {
  width: auto;
  max-width: 100%;
  /* An SVG with no intrinsic width stretches to fill its container — six
     150x150 demo icons were rendering 1382px tall. Cap the height so no
     description image can ever balloon, whatever the content contains. */
  max-height: 520px;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
  border: 1px solid rgba(27, 29, 58, 0.10);
}

/* ---- Description typography ----
   The clean-up promotes section labels that were mis-wrapped as list items
   into real headings, so h3/h4 need a proper rhythm inside the paper card. */
.tabpane .prose > h3,
.pdp .pdesc.prose > h3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.5;
  margin: 26px 0 10px;
  padding-inline-start: 12px;
  border-inline-start: 3px solid #B98D3F;
}

.tabpane .prose > h4,
.pdp .pdesc.prose > h4 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.6;
  margin: 20px 0 6px;
  color: #8A6A23;
}

.tabpane .prose > h3:first-child,
.tabpane .prose > h4:first-child { margin-top: 0; }

.tabpane .prose > p { margin: 0 0 12px; line-height: 1.95; }
.tabpane .prose > p.shasr-lede {
  font-size: 16.5px;
  line-height: 1.85;
  font-weight: 500;
  margin-bottom: 18px;
}

/* content-visibility:auto was tried here for paint performance. It reserved a
   700px placeholder for every off-screen section, which inflated the homepage
   by ~1500px and left large black gaps between sections until each one
   rendered. Correctness beats the paint saving — do not reintroduce it. */

/* Product-card images keep a stable box so lazy loading cannot shift the grid */
.pcard .media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- Category archive hero artwork ---- */
.shophero.has-cat-img .container {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 340px);
  gap: 34px;
  align-items: center;
}

.shophero.has-cat-img .cat-hero-img {
  grid-column: 2;
  grid-row: 1 / span 4;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--panel2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  box-shadow: var(--shadow);
}

.shophero.has-cat-img .cat-hero-img img {
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.45));
}

@media (max-width: 900px) {
  .shophero.has-cat-img .container { grid-template-columns: 1fr; }
  .shophero.has-cat-img .cat-hero-img { grid-column: 1; grid-row: auto; order: -1; padding: 16px; }
  .shophero.has-cat-img .cat-hero-img img { max-height: 170px; }
}

/* ============================================================
   Light theme — sections that stay dark on purpose
   ------------------------------------------------------------
   The offers band, machines band, promo card and footer keep a
   deep background in BOTH themes. In light mode they were still
   inheriting the light palette, so `--txt` (#1B1D3A) and
   `--gold2` (#8A6A23) — colours designed for a cream page — were
   painting dark-on-dark: "اكتشف الأجهزة" measured 1.17:1 and the
   gold kickers 2.3–3.4:1. Give those blocks the dark palette back.
   ============================================================ */
html.light .offers,
html.light .mach,
html.light .ts-promo,
html.light footer.main,
html.light .on-dark {
  --txt: #EEF0FF;
  --muted: #B9BEDD;
  --muted2: #949AC4;
  --panel: #0E1126;
  --panel2: #131735;
  --line: rgba(157, 164, 255, 0.14);
  --line2: rgba(157, 164, 255, 0.26);
  --gold: #D8B36A;
  --gold2: #F0D394;
  --gold-dim: rgba(216, 179, 106, 0.16);
  --accent: #8F95E8;
  --accent2: #5A60C0;
  --accent-dim: rgba(143, 149, 232, 0.12);
  --grad-gold: linear-gradient(90deg, #B98D3F, #F0D394);
  color: var(--txt);
}

/* Ghost buttons on those bands need the light outline, not the dark one. */
html.light .offers .btn-ghost,
html.light .mach .btn-ghost,
html.light .ts-promo .btn-ghost,
html.light footer.main .btn-ghost,
html.light .on-dark .btn-ghost {
  color: var(--txt);
  border-color: var(--line2);
}

/* Footer copyright sat at 4.06:1 in dark and 2.45:1 in light. */
footer.main .fbot,
footer.main .fbot span,
footer.main .copy {
  color: var(--muted);
}

/* WPML's own switcher ships a white pill that ignored the theme entirely. */
.wpml-ls-legacy-list-horizontal,
.wpml-ls-legacy-dropdown,
.wpml-ls-legacy-dropdown-click {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

a.wpml-ls-link,
.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle,
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a {
  background: var(--panel2) !important;
  color: var(--txt) !important;
  border: 1px solid var(--line2) !important;
  border-radius: 99px !important;
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

a.wpml-ls-link:hover,
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a:hover {
  border-color: var(--gold) !important;
  color: var(--gold2) !important;
}

/* ============================================================
   Mobile bottom bar
   Replaces the bottom navigation the previous theme shipped.
   Hidden above the mobile breakpoint.
   ============================================================ */
.mobilebar { display: none; }

@media (max-width: 900px) {
  .mobilebar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 130;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--line2);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.28);
  }

  .mobilebar .mb-item {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    padding: 6px 2px;
    border-radius: 14px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    background: none;
    border: 0;
    transition: 0.25s;
    min-height: 48px;
  }

  .mobilebar .mb-item .ti-icon { display: grid; place-items: center; }
  .mobilebar .mb-item svg { width: 21px; height: 21px; }

  .mobilebar .mb-item.on,
  .mobilebar .mb-item:active {
    color: var(--gold2);
    background: var(--gold-dim);
  }

  .mobilebar .mb-wa { color: #25D366; }

  .mobilebar .mb-item .dot.cart-count {
    position: absolute;
    top: 2px;
    inset-inline-end: 18%;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 99px;
    background: var(--grad-gold);
    color: #171000;
    font-size: 10px;
    font-weight: 800;
    display: grid;
    place-items: center;
  }

  /* Nothing may sit under the bar. */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .wafloat { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  #stickybuy { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .btt { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .fbar { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   Categories page (page-templates/template-categories.php)
   ============================================================ */
.catspage .cat-hero {
  padding: 90px 0 40px;
  background: linear-gradient(160deg, var(--panel) 0%, var(--bg2) 100%);
  border-bottom: 1px solid var(--line);
}

.catspage .cat-hero h1 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.35;
  margin-bottom: 12px;
}

.catspage .cat-hero p {
  color: var(--muted);
  max-width: 620px;
  line-height: 1.9;
}

.catspage .cats-wrap { padding: 46px 0 90px; }

.catspage .cats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.catspage .cats-grid.sub {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.catspage .secline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 46px 0 18px;
}

.catspage .secline h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 21px;
  white-space: nowrap;
}

.catspage .secline::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line2);
}

.catspage .cats-grid.sub .cat-card {
  min-height: 150px;
  padding: 18px;
}

.catspage .cats-grid.sub .cat-card img { height: 44%; max-width: 46%; }
.catspage .cats-grid.sub .cat-card .n { font-size: 15px; }
.catspage .cats-grid.sub .cat-card .go { width: 32px; height: 32px; top: 14px; }

@media (max-width: 960px) {
  .catspage .cats-grid { grid-template-columns: 1fr 1fr; }
  .catspage .cats-grid.sub { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .catspage .cats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .catspage .cats-grid .cat-card { min-height: 190px; padding: 16px; }
}

/* Scent-family list on the categories page */
.catspage .fam-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.catspage .fam-grid .fam {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-sm);
  background: var(--panel);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--fc, var(--gold));
  transition: 0.3s;
}

.catspage .fam-grid .fam:hover {
  border-color: var(--gold);
  border-inline-start-color: var(--fc, var(--gold));
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.catspage .fam-grid .fam .sw {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--fc, var(--gold));
  box-shadow: 0 0 18px color-mix(in srgb, var(--fc, #C9A24B) 45%, transparent);
  flex-shrink: 0;
}

.catspage .fam-grid .fam b { display: block; font-family: var(--f-display); font-size: 15px; font-weight: 800; }
.catspage .fam-grid .fam small { color: var(--muted); font-size: 12.5px; }
.catspage .fam-grid .fam .go { margin-inline-start: auto; color: var(--muted); display: grid; place-items: center; }
.catspage .fam-grid .fam:hover .go { color: var(--gold2); }

@media (max-width: 900px) { .catspage .fam-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .catspage .fam-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Social login on the account forms
   The provider button is rendered by Nextend; this only frames it.
   ============================================================ */
.shasr-social { margin-top: 22px; }

.shasr-social-sep {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  color: var(--muted2);
  font-size: 12.5px;
}

.shasr-social-sep::before,
.shasr-social-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line2);
}

.shasr-social-btns .nsl-container,
.shasr-social-btns .nsl-container-buttons { margin: 0 !important; padding: 0 !important; }

.shasr-social-btns a,
.shasr-social-btns .nsl-button {
  border-radius: 99px !important;
  border: 1px solid var(--line2) !important;
  background: var(--panel2) !important;
  color: var(--txt) !important;
  font-family: var(--f-body) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: 0.25s;
}

.shasr-social-btns a:hover,
.shasr-social-btns .nsl-button:hover {
  border-color: var(--gold) !important;
  transform: translateY(-1px);
}

.shasr-social-btns .nsl-button-label-container {
  font-family: var(--f-body) !important;
  font-weight: 700 !important;
  color: var(--txt) !important;
}

/* ============================================================
   FOOTER v2 (13 Oct) — the footer kept `background: var(--accent)`
   in light mode, but the dark-band palette above redefines --accent
   inside the footer to #8F95E8, so it painted a washed-out periwinkle
   with the contact column at ~1.6:1 contrast. One deep, intentional
   ground in BOTH themes, with readable ink and gold accents.
   ============================================================ */
footer.main,
html.light footer.main {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(216, 179, 106, 0.10), transparent 60%),
    radial-gradient(70% 120% at 0% 100%, rgba(90, 96, 192, 0.18), transparent 60%),
    linear-gradient(180deg, #0F1230 0%, #0A0C22 100%);
  color: #C9CCEF;
  border-top: 0;
  padding-top: 72px;
}

/* thin gold hairline on top instead of a flat border */
footer.main::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #D8B36A 30%, #F0D394 50%, #D8B36A 70%, transparent);
  opacity: 0.7;
}

footer.main .cols { gap: 48px; padding-bottom: 56px; }

footer.main h5,
html.light footer.main h5 {
  color: #FFFFFF;
  font-size: 16px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  position: relative;
}
footer.main h5::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: #D8B36A;
}

footer.main .fl p,
footer.main .lnk a,
footer.main .cnt,
footer.main .cnt span,
footer.main .cnt a,
html.light footer.main .fl p,
html.light footer.main .lnk a,
html.light footer.main .cnt,
html.light footer.main .cnt span,
html.light footer.main .cnt a {
  color: #B9BEDD;
}

footer.main .lnk { gap: 12px; font-size: 14px; }
footer.main .lnk a:hover,
footer.main .cnt a:hover,
html.light footer.main .lnk a:hover,
html.light footer.main .cnt a:hover { color: #F0D394; }

footer.main .cnt { gap: 14px; font-size: 14px; }
footer.main .cnt .ti-icon,
html.light footer.main .cnt .ti-icon {
  color: #F0D394;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(216, 179, 106, 0.12);
  border: 1px solid rgba(216, 179, 106, 0.25);
}
/* phone/email are LTR strings inside an RTL column */
footer.main .cnt span { unicode-bidi: plaintext; }

footer.main .pays { margin-top: 22px; }
footer.main .pays img {
  height: 34px;
  border-radius: 8px;
  padding: 4px 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

footer.main .base,
html.light footer.main .base {
  border-top: 1px solid rgba(157, 164, 255, 0.14);
  color: #949AC4;
  padding: 24px 0 28px;
}

@media (max-width: 560px) {
  footer.main { padding-top: 52px; text-align: center; }
  footer.main h5::after { inset-inline-start: 50%; transform: translateX(50%); }
  footer.main .lnk a { margin-inline: auto; }
  footer.main .cnt span { justify-content: center; }
  footer.main .fl img { margin-inline: auto; }
  footer.main .fl p { margin-inline: auto; }
}

/* ============================================================
   HERO v3 — light mode clean-up (13 Oct)
   The light hero inherited dark-mode effects that turn to mud on cream:
   a blurred watermark, grey aurora blobs, a heavy grey drop-shadow under
   every device, a black text-shadow under the model name and stray gold
   ticks from the HUD ring. Strip those, and give the stage one clear
   light source: a soft white spotlight + a floor shadow under the centre.
   ============================================================ */
html.light .hero .bigword,
html.light .hero .gridfloor,
html.light .hero .hudring .tick { display: none; }

html.light .hero .mist { opacity: 0.35; }
html.light .hero .aurora { opacity: 0.32; filter: blur(90px); }

html.light .hero .stage {
  background:
    radial-gradient(38% 46% at 50% 44%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(70% 55% at 50% 0%, rgba(216, 179, 106, 0.12), transparent 70%),
    linear-gradient(180deg, #FBF9F4 0%, #F6F2EA 55%, #EFE8DA 100%);
}

/* floor shadow the centre device stands on */
html.light .hero .stage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(420px, 50vw);
  height: 46px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(27, 29, 58, 0.18), transparent);
  filter: blur(6px);
  pointer-events: none;
  z-index: 1;
}

/* one thin, calm ring instead of two spinning dashed ones */
html.light .hero .hudring::before { opacity: 0; }
html.light .hero .hudring::after {
  opacity: 1;
  border-color: rgba(168, 128, 31, 0.18);
  background: none;
  animation-duration: 90s;
}

/* devices: crisp, light shadow — depth comes from the JS opacity/scale */
html.light .hero .slide {
  filter: drop-shadow(0 22px 24px rgba(27, 29, 58, 0.16)) !important;
}

/* model name: no black glow on cream */
html.light .hero-title .nm {
  color: #14163A;
  text-shadow: none;
  letter-spacing: -0.01em;
}
html.light .hero-title .pr { color: #8A6A23; }

/* swap animation: smoother, with a slight blur-in */
.hero-title .nm, .hero-title .pr {
  transition: opacity 0.5s cubic-bezier(.22,1,.36,1), transform 0.5s cubic-bezier(.22,1,.36,1), filter 0.5s;
}
.hero-title.swap .nm, .hero-title.swap .pr { filter: blur(6px); }

/* info panel: clean white glass cards, correct mixed-direction text */
html.light .hero-info .hi-specs span {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(27, 29, 58, 0.08);
  box-shadow: 0 6px 18px rgba(27, 29, 58, 0.06);
  color: #2A2C55;
  max-width: 300px;
  width: auto;
  white-space: normal;
  unicode-bidi: plaintext;
  text-align: start;
}
.hero-info .hi-specs span,
.hero-info .hi-desc { unicode-bidi: plaintext; }
html.light .hero-info .hi-desc { color: #5A5D85; }
html.light .hero-info .hi-cat { color: #8A6A23; }

/* arrows + side nav: white glass, gold on hover */
html.light .hero .arr,
html.light .sidenav button {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(27, 29, 58, 0.08);
  box-shadow: 0 8px 22px rgba(27, 29, 58, 0.08);
  color: #1B1D3A;
}
html.light .hero .arr:hover,
html.light .sidenav button:hover {
  background: #fff;
  border-color: #C9A24B;
  color: #8A6A23;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(168, 128, 31, 0.18);
}

/* progress bar + counter */
html.light .progressbar { background: rgba(27, 29, 58, 0.10); }
html.light .hero-counter { color: #6A6D93; }
html.light .hero-counter .cur { color: #8A6A23; }

/* entrance */
@keyframes heroIn { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes heroFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-title { animation: heroIn 0.9s cubic-bezier(.22,1,.36,1) 0.2s backwards; }
.hero-info { animation: heroFade 0.9s cubic-bezier(.22,1,.36,1) 0.45s backwards; }
@media (prefers-reduced-motion: reduce) {
  .hero-title, .hero-info { animation: none; }
}

/* ============================================================
   BRAND IMAGERY v1 (14 Oct) — photography + SHASR ribbon pattern
   Images: wp-content/uploads/2026/10/shasr-*.webp (Codex set).
   Pattern: vector redraw of the brand ribbon motif.
   ============================================================ */
:root {
  --shasr-pattern-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='160' viewBox='0 0 320 160'%3E%3Cg fill='%232B2E6B'%3E%3Cpath id='b' d='M30 4 C40 15 54 19 72 19 L116 19 C136 19 150 34 160 56 C147 42 133 34 116 34 L72 34 C54 34 40 26 30 4 Z'/%3E%3Cuse href='%23b' transform='matrix%28-1 0 0 1 320 0%29'/%3E%3Cuse href='%23b' transform='matrix%281 0 0 -1 0 112%29'/%3E%3Cuse href='%23b' transform='matrix%28-1 0 0 -1 320 112%29'/%3E%3Cpath d='M160 125 L171 136 L160 147 L149 136 Z M0 45 L11 56 L0 67 L-11 56 Z M320 45 L331 56 L320 67 L309 56 Z'/%3E%3C/g%3E%3C/svg%3E");
  --shasr-pattern-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='160' viewBox='0 0 320 160'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath id='b' d='M30 4 C40 15 54 19 72 19 L116 19 C136 19 150 34 160 56 C147 42 133 34 116 34 L72 34 C54 34 40 26 30 4 Z'/%3E%3Cuse href='%23b' transform='matrix%28-1 0 0 1 320 0%29'/%3E%3Cuse href='%23b' transform='matrix%281 0 0 -1 0 112%29'/%3E%3Cuse href='%23b' transform='matrix%28-1 0 0 -1 320 112%29'/%3E%3Cpath d='M160 125 L171 136 L160 147 L149 136 Z M0 45 L11 56 L0 67 L-11 56 Z M320 45 L331 56 L320 67 L309 56 Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- HERO (light): rotating heritage landscapes behind the devices ---- */
html.light .hero .stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(/wp-content/uploads/2026/10/shasr-hero-1D.webp);
  background-size: cover;
  background-position: center 30%;
  animation: shasrHeroBg 32s infinite;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.35) 62%, transparent 82%);
          mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.35) 62%, transparent 82%);
  opacity: 0.92;
  pointer-events: none;
}
@keyframes shasrHeroBg {
  0%, 22%   { background-image: url(/wp-content/uploads/2026/10/shasr-hero-1D.webp); }
  25%, 47%  { background-image: url(/wp-content/uploads/2026/10/shasr-hero-1A.webp); }
  50%, 72%  { background-image: url(/wp-content/uploads/2026/10/shasr-hero-1B.webp); }
  75%, 97%  { background-image: url(/wp-content/uploads/2026/10/shasr-hero-1C.webp); }
  100%      { background-image: url(/wp-content/uploads/2026/10/shasr-hero-1D.webp); }
}
/* white ribbon pattern floating in the sky, fading out downward */
html.light .hero .glowbg {
  background: var(--shasr-pattern-white) center top / 260px auto repeat !important;
  opacity: 0.38;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 28%, transparent 48%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 28%, transparent 48%);
  z-index: 0;
}
/* the spotlight becomes a soft white veil so devices stay crisp on the photo */
html.light .hero .stage {
  background:
    radial-gradient(34% 40% at 50% 46%, rgba(255,255,255,.78), rgba(255,255,255,0) 72%),
    linear-gradient(180deg, #EAF0F7 0%, #F6F2EA 55%, #F8F5EF 100%);
}
html.light .hero .aurora { display: none; }
html.light .hero .ring, html.light .hero .slide { z-index: 2; }
html.light .hero-info,
html.light .hero-title { z-index: 6; }
@media (prefers-reduced-motion: reduce) {
  html.light .hero .stage::before { animation: none; }
}

/* ---- PAGE HEADERS: shop / category / categories index ---- */
.shophero,
.catspage .cat-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.shophero::before,
.catspage .cat-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(14,17,48,.92) 0%, rgba(14,17,48,.72) 45%, rgba(14,17,48,.35) 100%),
    url(/wp-content/uploads/2026/10/shasr-banner-5B.webp) center / cover no-repeat;
}
[dir="rtl"] .shophero::before,
[dir="rtl"] .catspage .cat-hero::before {
  background:
    linear-gradient(270deg, rgba(14,17,48,.92) 0%, rgba(14,17,48,.72) 45%, rgba(14,17,48,.35) 100%),
    url(/wp-content/uploads/2026/10/shasr-banner-5B.webp) center / cover no-repeat;
}
.shophero::after,
.catspage .cat-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--shasr-pattern-white) center / 220px auto repeat;
  opacity: .07;
  pointer-events: none;
}
.catspage .cat-hero, .catspage .cat-hero h1 { color: #fff; }
.catspage .cat-hero p { color: #D5D8F0; }

/* ---- FOOTER: navy ground with the ribbon pattern, like the brand book ---- */
footer.main > * { position: relative; z-index: 1; }
footer.main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--shasr-pattern-white) center / 240px auto repeat;
  opacity: .045;
  pointer-events: none;
}

/* ---- NEWSLETTER: sand photo band ---- */
.newsletter {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(248,245,239,.55) 0%, rgba(248,245,239,.82) 100%),
    url(/wp-content/uploads/2026/10/shasr-banner-5A.webp) center / cover no-repeat;
}
html:not(.light) .newsletter::before {
  background:
    linear-gradient(180deg, rgba(7,8,26,.82) 0%, rgba(7,8,26,.92) 100%),
    url(/wp-content/uploads/2026/10/shasr-banner-5A.webp) center / cover no-repeat;
}

/* hero text over photos: frosted cards so it stays readable on any landscape */
html.light .hero-info .hi-desc {
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 10px 14px;
  color: #3A3D66;
  box-shadow: 0 6px 18px rgba(27,29,58,.06);
}
html.light .hero-info .hi-cat,
html.light .hero-info .hi-rating {
  display: inline-flex;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 99px;
  padding: 4px 12px;
}
html.light .hero-info .hi-specs span { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* keep the spec panel clear of the slider arrow */
.hero-info { top: 17%; }
.hero .arr { top: 58%; }

/* devices in the hero are clickable → product page */
.hero .slide { pointer-events: auto; cursor: pointer; }
.hero .slide img.refl, .hero .slide img.shine { pointer-events: none; }
.hero .slide:hover { filter: drop-shadow(0 24px 30px rgba(168,128,31,.28)) !important; }

/* category cards act as the tabs: hide the text tab row, keep 'view all' */
.cb-tabs .ts-tabs button[data-ts] { display: none; }
.cb-tabs .ts-tabs { justify-content: flex-end; border-bottom: 0; }
.cb-tabs .catbar { margin-bottom: 26px; }
.cb-tabs .catbar .cb { cursor: pointer; }
.cb-tabs .catbar .cb.on { box-shadow: 0 10px 26px rgba(168,128,31,.16); }
.cb-tabs .ts-pane.on { animation: tsIn .45s cubic-bezier(.22,1,.36,1); }
@keyframes tsIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Mobile (14 Oct): product buttons + category cards ---- */
@media (max-width: 560px) {
  /* two buttons side by side overflowed a ~170px card; stack them full width */
  .pcard { min-width: 0; overflow: hidden; }
  .pcard .quick2 {
    grid-template-columns: 1fr;
    margin: 8px 10px 12px;
    gap: 6px;
  }
  .pcard .quick2 button,
  .pcard .quick2 a {
    width: 100%;
    min-width: 0;
    padding: 9px 6px;
    font-size: 12px;
    white-space: normal;
    line-height: 1.2;
  }
  .pcard .quick2 svg, .pcard .quick2 .ti-icon { width: 14px; height: 14px; flex-shrink: 0; }

  /* category cards: 2.5 visible so it reads as a swipeable row */
  .catbar { grid-auto-columns: 40%; gap: 10px; }
  .catbar .cb { flex-direction: column; text-align: center; padding: 12px 8px; gap: 6px; }
  .catbar .cb img { width: 40px; height: 40px; }
  .catbar .cb span { font-size: 12.5px; line-height: 1.3; }
}

@media (max-width: 560px) {
  /* the image box had a fixed ratio with overflow:hidden, which clipped the
     second button; let it grow so both stacked buttons are always visible */
  .pcard .media { aspect-ratio: auto; height: auto; display: flex; flex-direction: column; }
  .pcard .media > a:first-child { display: block; height: 140px; padding: 10px 10px 0; }
  .pcard .media > a:first-child img { width: 100%; height: 100%; object-fit: contain; }
}

/* ---- Mobile hero: shorter banner (14 Oct) ---- */
@media (max-width: 560px) {
  .hero { height: 72vh; min-height: 500px; max-height: 620px; }
  .hero .slide { top: 30%; width: 46vw; }
  .hero-title { bottom: 64px; }
  .hero-title .nm { font-size: 40px; }
  .hero-title .pr { margin: 4px 0 10px; font-size: 17px; }
  .hero-title .hi-badge { margin-bottom: 6px; }
  .hero-actions .btn { padding: 10px 16px; font-size: 13px; }
  .hi-stock { display: none; }
  .hero .progressbar { bottom: 22px; }
  .hero-counter, .scrollhint { display: none; }
}

/* ---- Scent family tabs: one-line swipeable carousel on mobile ---- */
@media (max-width: 760px) {
  .fam-tabs {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    gap: 8px;
    padding: 4px 16px 12px;
    margin-inline: -16px;
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 22px, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(to left, transparent 0, #000 22px, #000 calc(100% - 22px), transparent);
  }
  .fam-tabs::-webkit-scrollbar { display: none; }
  .fam-tabs button { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: center; }
}


/* ---- Bigger devices in the hero (15 Oct) ---- */
.hero .slide { width: min(54vmin, 560px); top: 40%; }
@media (max-width: 560px) {
  .hero .slide { width: 62vw; top: 32%; }
}


/* ---- Product description: Omani Women's Day set (.swd) ---- */

.swd{--n:#2B2E6B;--n2:#14163A;--g:#D8B36A;--g2:#B39A7A;--c:#F8F5EF;--ink:#2A2C55;direction:rtl;text-align:right;font-family:inherit;color:var(--ink);line-height:1.9;max-width:1100px;margin:0 auto}
.swd *{box-sizing:border-box}
.swd h2,.swd h3,.swd p{margin:0}
.swd-pat{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='160' viewBox='0 0 320 160'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath id='b' d='M30 4 C40 15 54 19 72 19 L116 19 C136 19 150 34 160 56 C147 42 133 34 116 34 L72 34 C54 34 40 26 30 4 Z'/%3E%3Cuse href='%23b' transform='matrix%28-1 0 0 1 320 0%29'/%3E%3Cuse href='%23b' transform='matrix%281 0 0 -1 0 112%29'/%3E%3Cuse href='%23b' transform='matrix%28-1 0 0 -1 320 112%29'/%3E%3Cpath d='M160 125 L171 136 L160 147 L149 136 Z M0 45 L11 56 L0 67 L-11 56 Z M320 45 L331 56 L320 67 L309 56 Z'/%3E%3C/g%3E%3C/svg%3E");background-size:220px auto}

/* hero */
.swd-hero{position:relative;overflow:hidden;border-radius:28px;padding:64px 32px 56px;text-align:center;color:#fff;background:radial-gradient(60% 80% at 50% 0%,rgba(216,179,106,.22),transparent 70%),linear-gradient(160deg,#1B1E4F 0%,#0E1130 100%);isolation:isolate}
.swd-hero .swd-pat{position:absolute;inset:-40px;z-index:-1;opacity:.06;animation:swdDrift 40s linear infinite}
.swd-hero::after{content:"";position:absolute;left:50%;top:-30%;width:70%;height:90%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(240,211,148,.25),transparent);filter:blur(10px);z-index:-1;animation:swdGlow 6s ease-in-out infinite}
.swd-kick{display:inline-block;font-size:13px;letter-spacing:.04em;color:var(--g);border:1px solid rgba(216,179,106,.45);border-radius:99px;padding:6px 16px;margin-bottom:22px;animation:swdUp .8s cubic-bezier(.22,1,.36,1) both}
.swd-hero .l1{font-size:clamp(20px,3vw,28px);font-weight:300;color:#E6E3F5;animation:swdUp .9s .15s cubic-bezier(.22,1,.36,1) both}
.swd-hero h2{font-size:clamp(30px,5.4vw,52px);font-weight:800;line-height:1.35;margin:6px 0;background:linear-gradient(90deg,#F0D394,#fff 45%,#F0D394);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:swdUp .9s .3s cubic-bezier(.22,1,.36,1) both,swdShine 5s 1.2s linear infinite}
.swd-hero .l3{font-size:clamp(20px,3vw,28px);font-weight:300;color:#E6E3F5;animation:swdUp .9s .45s cubic-bezier(.22,1,.36,1) both}
.swd-price{display:inline-flex;align-items:baseline;gap:10px;margin-top:30px;padding:14px 28px;border-radius:20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);animation:swdUp .9s .6s cubic-bezier(.22,1,.36,1) both,swdPulse 3s 2s ease-in-out infinite}
.swd-price b{font-size:34px;letter-spacing:.06em;color:#fff;direction:ltr}
.swd-price span{color:var(--g);font-size:16px}

/* section titles */
.swd-sec{margin-top:56px}
.swd-t{text-align:center;margin-bottom:28px}
.swd-t small{display:block;color:var(--g2);font-size:13px;letter-spacing:.06em;margin-bottom:6px}
.swd-t h3{font-size:clamp(22px,3.4vw,32px);font-weight:800;color:var(--n2)}
.swd-t i{display:block;width:46px;height:3px;border-radius:3px;margin:14px auto 0;background:linear-gradient(90deg,var(--g2),var(--g));animation:swdLine 2.4s ease-in-out infinite}

/* box contents */
.swd-box{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.swd-card{position:relative;background:#fff;border:1px solid rgba(43,46,107,.08);border-radius:22px;padding:30px 24px;box-shadow:0 10px 30px rgba(27,29,58,.06);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s;animation:swdUp .8s cubic-bezier(.22,1,.36,1) both}
.swd-card:nth-child(2){animation-delay:.12s}.swd-card:nth-child(3){animation-delay:.24s}
.swd-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(27,29,58,.12)}
.swd-ic{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;margin-bottom:16px;background:linear-gradient(145deg,var(--n),var(--n2));color:var(--g);animation:swdFloat 4s ease-in-out infinite}
.swd-card:nth-child(2) .swd-ic{animation-delay:-1.3s}.swd-card:nth-child(3) .swd-ic{animation-delay:-2.6s}
.swd-ic svg{width:28px;height:28px}
.swd-card h4{margin:0 0 6px;font-size:19px;font-weight:800;color:var(--n2)}
.swd-card p{color:#5A5D85;font-size:15px}
.swd-num{position:absolute;top:18px;left:20px;font-size:40px;font-weight:800;color:rgba(43,46,107,.06);direction:ltr}

/* feature band */
.swd-band{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border-radius:26px;overflow:hidden;background:var(--c);border:1px solid rgba(179,154,122,.25)}
.swd-band .txt{padding:40px 36px}
.swd-band .txt h3{font-size:clamp(22px,3vw,30px);font-weight:800;color:var(--n2);margin-bottom:10px}
.swd-band .txt p{color:#5A5D85}
.swd-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.swd-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.swd-list li::before{content:"";flex:0 0 22px;height:22px;margin-top:4px;border-radius:50%;background:var(--n) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0D394' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/13px no-repeat}
.swd-viz{position:relative;min-height:320px;display:grid;place-items:center;background:linear-gradient(160deg,#1B1E4F,#0E1130);overflow:hidden}
.swd-viz .swd-pat{position:absolute;inset:0;opacity:.05}
.swd-ring{position:absolute;width:90px;height:90px;border-radius:50%;border:1.5px solid rgba(240,211,148,.55);animation:swdWave 3.6s cubic-bezier(.22,1,.36,1) infinite}
.swd-ring:nth-child(3){animation-delay:1.2s}.swd-ring:nth-child(4){animation-delay:2.4s}
.swd-core{position:relative;text-align:center;color:#fff;z-index:2}
.swd-core b{display:block;font-size:56px;font-weight:800;line-height:1;direction:ltr;background:linear-gradient(180deg,#fff,#F0D394);-webkit-background-clip:text;background-clip:text;color:transparent}
.swd-core span{font-size:14px;color:#C9CCEF}

/* gift for */
.swd-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.swd-tags span{padding:10px 22px;border-radius:99px;background:#fff;border:1px solid rgba(179,154,122,.35);font-weight:600;color:var(--n2);transition:all .3s;animation:swdUp .7s cubic-bezier(.22,1,.36,1) both}
.swd-tags span:nth-child(2){animation-delay:.08s}.swd-tags span:nth-child(3){animation-delay:.16s}.swd-tags span:nth-child(4){animation-delay:.24s}.swd-tags span:nth-child(5){animation-delay:.32s}
.swd-tags span:hover{background:var(--n);color:#F0D394;border-color:var(--n)}

/* steps */
.swd-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.swd-step{position:relative;padding:28px 22px 24px;border-radius:20px;background:linear-gradient(180deg,#fff,var(--c));border:1px solid rgba(43,46,107,.07);counter-increment:s}
.swd-step::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;margin-bottom:14px;background:var(--g);color:var(--n2);font-weight:800}
.swd-step h4{margin:0 0 4px;font-size:17px;color:var(--n2)}
.swd-step p{font-size:14.5px;color:#5A5D85}

/* closing */
.swd-end{margin-top:56px;position:relative;overflow:hidden;border-radius:26px;padding:42px 28px;text-align:center;background:linear-gradient(120deg,#8A6A23,#D8B36A 50%,#8A6A23);background-size:200% 100%;animation:swdSlide 8s ease-in-out infinite;color:#14163A}
.swd-end .swd-pat{position:absolute;inset:0;opacity:.12;filter:invert(1)}
.swd-end h3{position:relative;font-size:clamp(22px,3.4vw,30px);font-weight:800}
.swd-end p{position:relative;margin-top:6px;font-size:16px}

@keyframes swdUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes swdShine{to{background-position:-200% center}}
@keyframes swdDrift{to{transform:translate(220px,0)}}
@keyframes swdGlow{50%{opacity:.55;transform:translateX(-50%) scale(1.08)}}
@keyframes swdPulse{50%{box-shadow:0 0 0 8px rgba(216,179,106,.08)}}
@keyframes swdFloat{50%{transform:translateY(-6px)}}
@keyframes swdLine{50%{width:90px}}
@keyframes swdWave{from{transform:scale(.6);opacity:1}to{transform:scale(3.6);opacity:0}}
@keyframes swdSlide{50%{background-position:100% 0}}
@media (max-width:760px){
 .swd-hero{padding:46px 18px 40px;border-radius:22px}
 .swd-box,.swd-steps{grid-template-columns:1fr}
 .swd-band{grid-template-columns:1fr}
 .swd-band .txt{padding:28px 22px}
 .swd-viz{min-height:240px}
 .swd-sec{margin-top:42px}
}
@media (prefers-reduced-motion:reduce){.swd *,.swd *::before,.swd *::after{animation:none!important}}


/* .swd inside product .prose: neutralise prose heading/link styles */
.prose .swd h2,.prose .swd h3,.prose .swd h4{border:0!important;padding:0!important;margin-inline:0;background-color:transparent}
.prose .swd h3::before,.prose .swd h3::after,.prose .swd h2::before,.prose .swd h2::after{display:none!important;content:none!important}
.prose .swd-t h3{margin:0}
.prose .swd-hero h2{background-image:linear-gradient(90deg,#F0D394,#fff 45%,#F0D394)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent;color:transparent!important;margin:6px 0}
.prose .swd-hero p{color:#E6E3F5}
.prose .swd .swd-num{color:rgba(43,46,107,.07)!important;font-size:40px}
.prose .swd ul{margin:22px 0 0;padding:0}
.prose .swd-end p,.prose .swd-end h3{color:#14163A}

/* Hide the tabbed-products promo card when its fields are empty (16 Oct) */
.tabs-shop .ts-promo:has(> h3:empty){display:none!important}
.tabs-shop:has(> .ts-promo > h3:empty){grid-template-columns:1fr!important}

/* .swd English (LTR) */
.swd.swd-en{direction:ltr;text-align:left}
.swd-en .swd-band .txt,.swd-en .swd-card,.swd-en .swd-step{text-align:left}
.swd-en .swd-num{left:auto;right:20px}
.swd-en .swd-hero,.swd-en .swd-t,.swd-en .swd-end{text-align:center}

/* English (LTR): keep category-card images clear of the left-aligned titles */
html[dir="ltr"] .cat-card img{left:auto!important;right:6px!important;width:58%!important;bottom:64px!important;object-position:center bottom}

/* Promo card in the tabbed products section is retired for good (18 Oct) */
.tabs-shop .ts-promo{display:none!important}
.tabs-shop{grid-template-columns:1fr!important}

/* ---- Shop filters: checkbox + label on one line (18 Oct) ---- */
.filters .fsw{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;flex-wrap:nowrap;padding:7px 0;cursor:pointer;position:relative;line-height:1.4}
.filters .fsw input[type=checkbox]{position:absolute!important;opacity:0;width:1px!important;height:1px!important;pointer-events:none;margin:0}
.filters .fsw .box{flex:0 0 auto}
.filters .fsw .n2{margin-inline-start:auto;opacity:.65;font-size:12px}

/* ---- Shop header: thinner (18 Oct) ---- */
.shophero{padding:22px 0 18px!important}
.shophero h1{font-size:clamp(24px,3vw,32px)!important;margin-bottom:4px!important;line-height:1.3}
.shophero p{font-size:13.5px;margin:0}
.shophero form.srch{margin-top:14px!important}
.shophero .srch input{height:46px}
.shophero .catpills{margin-top:14px!important;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.shophero .catpills::-webkit-scrollbar{display:none}
.shophero .catpills > *{flex:0 0 auto;white-space:nowrap}
@media (max-width:760px){
 .shophero{padding:16px 0 14px!important}
 .shophero p{display:none}
 .shophero .catpills{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
}

/* ---- Category cards: image lives above the title, never behind it (AR + EN) ---- */
html .cat-card img, html[dir="ltr"] .cat-card img, html[dir="rtl"] .cat-card img{
  left:0!important;right:0!important;width:100%!important;
  top:18px!important;bottom:86px!important;height:auto!important;max-height:none!important;
  object-fit:contain!important;object-position:center!important;padding:0 64px;box-sizing:border-box
}
@media (max-width:760px){ html .cat-card img, html[dir="ltr"] .cat-card img, html[dir="rtl"] .cat-card img{ padding:0 40px; bottom:80px!important } }

/* ---- Swipe & drag (18 Oct) ---- */
.hero, .hero .stage, .hero .slide { touch-action: pan-y; }
.cat-grid, .catbar, .fam-tabs, .catpills { touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
@media (hover:hover) and (pointer:fine) {
  .cat-grid, .catbar, .fam-tabs, .catpills { cursor: grab; }
  .cat-grid.is-dragging, .catbar.is-dragging, .fam-tabs.is-dragging, .catpills.is-dragging { cursor: grabbing; scroll-snap-type: none !important; user-select: none; }
  .cat-grid.is-dragging *, .catbar.is-dragging * { pointer-events: none; }
}
.cat-grid img, .catbar img { -webkit-user-drag: none; user-select: none; }

/* ---- Phone performance (18 Oct) ---- */
@media (hover:none), (pointer:coarse), (max-width:760px){
  .hero .slide{filter:none!important;will-change:transform,opacity}
  .hero .slide img{filter:drop-shadow(0 18px 18px rgba(27,29,58,.28))}
  .hero .mist{display:none!important}
  .cat-card img{filter:drop-shadow(0 12px 14px rgba(0,0,0,.28))!important}
  .cb{box-shadow:0 4px 12px rgba(168,128,31,.12)!important}
  .cat-grid,.catbar{scroll-snap-type:x proximity!important}
}

/* ---- Categories page cards (18 Oct) ---- */
html .catspage .cat-card{min-height:300px!important;height:auto!important;overflow:hidden}
html .catspage .cat-card img, html[dir] .catspage .cat-card img{left:0!important;right:0!important;width:100%!important;top:16px!important;bottom:78px!important;height:auto!important;padding:0 28px!important;object-fit:contain!important;object-position:center!important;box-sizing:border-box}
html .catspage .cats-grid.sub .cat-card{min-height:280px!important}
html .catspage .cats-grid.sub .cat-card img, html[dir] .catspage .cats-grid.sub .cat-card img{top:0!important;bottom:auto!important;height:62%!important;padding:0!important;object-fit:cover!important;filter:none!important;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
html .catspage .cats-grid.sub .cat-card .go{z-index:2;background:rgba(255,255,255,.85)}
@media (max-width:760px){
  html .catspage .cat-card{min-height:236px!important}
  html .catspage .cat-card img, html[dir] .catspage .cat-card img{top:10px!important;bottom:66px!important;padding:0 8px!important}
  html .catspage .cats-grid.sub .cat-card{min-height:220px!important}
  html .catspage .cats-grid.sub .cat-card img, html[dir] .catspage .cats-grid.sub .cat-card img{top:0!important;bottom:auto!important;height:60%!important;padding:0!important}
  html .catspage .cat-card .n{font-size:15px;line-height:1.35}
}

/* card images were capped at 58% width by an old rule */
html .cat-card img, html[dir] .cat-card img{max-width:none!important}

/* explicit image box height (height:auto ignores bottom on <img>) */
html .cat-card img, html[dir] .cat-card img{height:calc(100% - 104px)!important}
html .catspage .cat-card img, html[dir] .catspage .cat-card img{height:calc(100% - 94px)!important}
html .catspage .cats-grid.sub .cat-card img, html[dir] .catspage .cats-grid.sub .cat-card img{height:62%!important}
@media (max-width:760px){
  html .cat-card img, html[dir] .cat-card img{height:calc(100% - 98px)!important}
  html .catspage .cat-card img, html[dir] .catspage .cat-card img{height:calc(100% - 78px)!important}
  html .catspage .cats-grid.sub .cat-card img, html[dir] .catspage .cats-grid.sub .cat-card img{height:60%!important}
}

/* Scent families row (19 Oct) */
.shf-grid{touch-action:pan-x pan-y;overscroll-behavior-x:contain}
.shf-grid.is-dragging{scroll-snap-type:none!important;cursor:grabbing;user-select:none}
@media (max-width:640px){ .shf-grid{scroll-snap-type:x proximity!important} }

/* ---- Product SEO content block (20 Oct) ---- */
.shasr-seo{margin-top:30px;padding-top:24px;border-top:1px solid rgba(27,29,58,.1);display:flow-root}
.shasr-seo h2{font-size:clamp(20px,2.2vw,26px);line-height:1.4;margin:0 0 14px}
.shasr-seo h3{font-size:18px;line-height:1.45;margin:22px 0 8px}
.shasr-seo p,.shasr-seo li{line-height:1.9}
.shasr-seo ol,.shasr-seo ul{padding-inline-start:22px;margin:0 0 12px}
.shasr-seo a{color:#8A6A23;text-decoration:underline;text-underline-offset:3px}
.shasr-seo-fig{float:left;width:min(220px,38%);margin:4px 0 12px 20px}
html[dir="ltr"] .shasr-seo-fig{float:right;margin:4px 0 12px 20px}
html[dir="rtl"] .shasr-seo-fig{float:left;margin:4px 20px 12px 0}
.shasr-seo-fig img{width:100%;height:auto;border-radius:16px;background:#f7f5f0;object-fit:contain;aspect-ratio:1}
@media (max-width:560px){.shasr-seo-fig,html[dir] .shasr-seo-fig{float:none;width:60%;margin:0 auto 14px}}

/* In-content table of contents (product SEO block) */
.shasr-toc{background:#f7f5f0;border:1px solid #e6e2d8;border-radius:14px;padding:14px 18px;margin:0 0 18px}
.shasr-toc strong{display:block;margin-bottom:6px;color:#2e3169}
.shasr-toc ol{margin:0;padding-inline-start:20px;columns:2;column-gap:28px}
.shasr-toc li{margin:3px 0;break-inside:avoid}
.shasr-toc a{text-decoration:none!important}
.shasr-seo h3[id]{scroll-margin-top:110px}
@media (max-width:640px){.shasr-toc ol{columns:1}}