/* ============ DESIGN TOKENS ============ */
:root {
  --paper: #F2EDE3;
  /* parchment background */
  --paper-2: #EAE2D2;
  /* deeper panel */
  --surface: #FBF8F2;
  /* card cream */
  --surface-2: #FFFFFF;
  --ink: #20263A;
  /* dyer's indigo — primary text */
  --ink-70: #4A4F63;
  --ink-50: #6E7284;
  --ink-30: #9A9CA8;
  --line: #E2D9C7;
  /* hairline on paper */
  --line-2: #D6CBB4;
  --brass: #A9772E;
  /* accent — metalcraft */
  --brass-d: #8A5F21;
  --brass-wash: #F0E3CB;
  --madder: #B14237;
  /* sale / wishlist active */
  --madder-wash: #F3DED9;
  --celadon: #5E7355;
  /* verified / sustainable */
  --celadon-wash: #E4E9DE;
  --indigo-deep: #191E2E;
  /* dark sections */
  --indigo-deep-2: #232A40;
  --ok: #5E7355;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(32, 38, 58, .05), 0 1px 3px rgba(32, 38, 58, .04);
  --sh-2: 0 4px 14px rgba(32, 38, 58, .07), 0 2px 4px rgba(32, 38, 58, .05);
  --sh-3: 0 18px 44px rgba(32, 38, 58, .14), 0 6px 14px rgba(32, 38, 58, .08);
  --sh-pop: 0 30px 80px rgba(25, 30, 46, .30);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --maxw: 1320px;
  --font-d: "Fraunces", Georgia, serif;
  --font-b: "Instrument Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

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

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

:focus-visible {
  outline: 2.5px solid var(--brass);
  outline-offset: 2px;
  border-radius: 3px
}

ul {
  margin: 0;
  padding: 0;
  list-style: none
}

h1,
h2,
h3,
h4,
.hero-content .hero-h1 {
  margin: 0;
  font-family: var(--font-d);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--ink)
}

p {
  margin: 0
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px
}

::selection {
  background: var(--brass-wash);
  color: var(--ink)
}

.hide {
  display: none !important
}

/* ============ TYPOGRAPHY HELPERS ============ */
.eyebrow {
  font-family: var(--font-b);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass-d);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--brass);
  opacity: .7
}

.eyebrow.center::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--brass);
  opacity: .7
}

.eyebrow.no-rule::before {
  display: none
}

.serif-it {
  font-family: var(--font-d);
  font-style: italic;
  font-weight: 500
}

.section-idx {
  font-family: var(--font-d);
  font-size: 13px;
  font-style: italic;
  color: var(--brass-d);
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: .01em;
  transition: transform .25s var(--ease), background .2s, box-shadow .25s, color .2s;
  white-space: nowrap;
}

.btn svg {
  width: 17px;
  height: 17px
}

.btn-primary {
  background: var(--ink);
  color: #F4EFE4;
  box-shadow: var(--sh-1)
}

.btn-primary:hover {
  background: var(--indigo-deep);
  transform: translateY(-2px);
  box-shadow: var(--sh-2)
}

.btn-brass {
  background: var(--brass);
  color: #fff
}

.btn-brass:hover {
  background: var(--brass-d);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(169, 119, 46, .35)
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line-2)
}

.btn-ghost:hover {
  border-color: var(--ink);
  background: rgba(32, 38, 58, .03)
}

.btn-light {
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--line)
}

.btn-light:hover {
  background: #fff;
  border-color: var(--line-2);
  transform: translateY(-2px)
}

.btn-sm {
  height: 40px;
  padding: 0 18px;
  font-size: 13.5px
}

.btn-lg {
  height: 54px;
  padding: 0 32px;
  font-size: 15.5px
}

.btn-block {
  width: 100%
}

.btn-white {
  background: #F4EFE4;
  color: var(--ink)
}

.btn-white:hover {
  background: #fff;
  transform: translateY(-2px)
}

.btn-outline-light {
  border: 1.5px solid rgba(244, 239, 228, .4);
  color: #F4EFE4
}

.btn-outline-light:hover {
  border-color: #F4EFE4;
  background: rgba(244, 239, 228, .08)
}

/* icon button */
.iconbtn {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: .22s var(--ease);
  position: relative;
}

.iconbtn:hover {
  background: #fff;
  border-color: var(--line-2);
  transform: translateY(-2px);
  box-shadow: var(--sh-1)
}

.iconbtn svg {
  width: 20px;
  height: 20px
}

.iconbtn .dot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  background: var(--madder);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 9.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid var(--paper)
}

/* ============ BADGES ============ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1;
}

.badge svg {
  width: 11px;
  height: 11px
}

.b-handmade {
  background: var(--brass-wash);
  color: var(--brass-d)
}

.b-new {
  background: var(--ink);
  color: #F4EFE4
}

.b-best {
  background: var(--madder);
  color: #fff
}

.b-limited {
  background: #2E2A22;
  color: #EBD9B4
}

.b-ooak {
  background: var(--indigo-deep);
  color: #D8C08A
}

.b-verified {
  background: var(--celadon-wash);
  color: #41522F
}

.b-mto {
  background: #EDE6D8;
  color: var(--ink-70)
}

.b-sustain {
  background: var(--celadon);
  color: #fff
}

.verify-tick {
  color: var(--celadon);
  display: inline-flex;
  vertical-align: -2px
}

.verify-tick svg {
  width: 14px;
  height: 14px
}

/* ============ HEADER ============ */
.top-strip {
  background: var(--indigo-deep);
  color: #D9CFC0;
  font-size: 12.5px
}

.top-strip .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  gap: 20px
}

.top-strip .marquee {
  display: flex;
  gap: 34px;
  overflow: hidden;
  white-space: nowrap;
  flex: 1
}

.top-strip .marquee span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .03em
}

.top-strip .marquee svg {
  width: 13px;
  height: 13px;
  color: var(--brass)
}

.top-strip .strip-links {
  display: flex;
  gap: 20px;
  flex-shrink: 0
}

.top-strip .strip-links a {
  color: #B9AF9E;
  transition: .2s
}

.top-strip .strip-links a:hover {
  color: #F4EFE4
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: var(--paper);
  transition: box-shadow .3s, background .3s;
  border-bottom: 1px solid transparent
}

.site-header.stuck {
  box-shadow: 0 6px 24px rgba(32, 38, 58, .08);
  background: rgba(242, 237, 227, .9);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line)
}

.header-main {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 60px
}

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

.logo .mark {
  width: 42px;
  height: 42px;
  flex-shrink: 0
}

.logo .mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain
}

.logo .name {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 25px;
  letter-spacing: -.02em;
  line-height: 1
}

.logo .name b {
  color: var(--brass-d);
  font-weight: 600
}

.logo .tag {
  display: block;
  font-family: var(--font-b);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-top: 3px
}

.search {
  flex: 1;
  /* max-width: 640px; */
  position: relative
}

.search-box {
  display: flex;
  align-items: center;
  height: 40px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0 6px 0 18px;
  transition: .2s;
  width: 100%;
}

.search-box:focus-within {
  border-color: var(--brass);
  box-shadow: 0 0 0 4px var(--brass-wash);
  background: #fff
}

.search-box>svg {
  width: 19px;
  height: 19px;
  color: var(--ink-50);
  flex-shrink: 0
}

.search-box input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  height: 100%;
  padding: 0 12px;
  font-size: 14.5px
}

.search-box input::placeholder {
  color: var(--ink-30)
}

.search-ai {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  background: var(--ink);
  color: #F4EFE4;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  transition: .2s
}

.search-ai:hover {
  background: var(--brass)
}

.search-ai svg {
  width: 15px;
  height: 15px
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0
}

.acct-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 6px 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: .2s
}

.acct-btn:hover {
  background: var(--surface);
  border-color: var(--line)
}

.acct-btn .who {
  text-align: left;
  line-height: 1.15
}

.acct-btn .who small {
  display: block;
  font-size: 10.5px;
  color: var(--ink-50);
  letter-spacing: .02em
}

.acct-btn .who strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brass);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font-d)
}

/* category nav */
.catnav {
  /* border-top: 1px solid var(--line); */
  border-bottom: 1px solid var(--line);
  background: var(--paper)
}

.catnav .wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 52px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none
}

.catnav .wrap::-webkit-scrollbar {
  display: none
}

.catnav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 52px;
  padding: 0 15px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-70);
  white-space: nowrap;
  position: relative;
  transition: .2s
}

.catnav a:first-child {
  /* padding-left:0; */
  text-align: center;
  justify-content: center;
}

.catnav a .ico {
  width: 16px;
  height: 16px;
  color: var(--brass-d);
  opacity: .85
}

.catnav a:hover {
  color: var(--ink)
}

.catnav a::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 0;
  height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease)
}

.catnav a:hover::after {
  transform: scaleX(1)
}

.catnav a.all {
  font-weight: 600;
  color: var(--ink);
  background: var(--ink);
  color: #F4EFE4;
  border-radius: var(--r-pill);
  height: 34px;
  padding: 0 16px 0 14px
}

.catnav a.all::after {
  display: none
}

.catnav a.all:hover {
  background: var(--brass)
}

/* search suggestions dropdown */
.suggest {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 14px;
  z-index: 130;
  display: none
}

.suggest.show {
  display: block;
  animation: pop .22s var(--ease)
}

.suggest h5 {
  font-family: var(--font-b);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin: 6px 8px 8px;
  font-weight: 600
}

.suggest .row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--r-md);
  transition: .15s
}

.suggest .row:hover {
  background: var(--surface)
}

.suggest .row svg {
  width: 16px;
  height: 16px;
  color: var(--ink-50)
}

.suggest .row .thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--line)
}

.suggest .row .m {
  flex: 1
}

.suggest .row .m b {
  font-weight: 600;
  font-size: 14px
}

.suggest .row .m small {
  display: block;
  color: var(--ink-50);
  font-size: 12px
}

.suggest .row .price {
  font-family: var(--font-d);
  font-weight: 600
}

.suggest .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 4px 8px 8px
}

.suggest .chips button {
  height: 30px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 500;
  transition: .15s
}

.suggest .chips button:hover {
  background: var(--ink);
  color: #F4EFE4;
  border-color: var(--ink)
}

/* ============ SECTION SCAFFOLD ============ */
.section {
  padding-top: 82px;
  padding-bottom: 82px
}

.section.tight {
  padding-top: 56px;
  padding-bottom: 56px
}

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

.sec-head .lhs {
  max-width: 640px
}

.sec-head h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  margin-top: 14px
}

.sec-head p {
  color: var(--ink-50);
  margin-top: 12px;
  font-size: 15.5px;
  max-width: 520px
}

.sec-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  flex-shrink: 0;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--ink);
  transition: .2s
}

.sec-link:hover {
  gap: 12px;
  color: var(--brass-d);
  border-color: var(--brass)
}

.sec-link svg {
  width: 16px;
  height: 16px
}

/* ============ PRODUCT CARD ============ */
.grid {
  display: grid;
  gap: 22px
}

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

.grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.pcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
  position: relative;
  display: flex;
  flex-direction: column
}

.pcard:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-3);
  border-color: var(--line-2)
}

.pcard .media {
  position: relative;
  aspect-ratio: 1/1.04;
  overflow: hidden;
  background: var(--paper-2)
}

.pcard .media .img {
  position: absolute;
  inset: 0;
  transition: opacity .5s var(--ease), transform .6s var(--ease)
}

.pcard .media .img.alt {
  opacity: 0
}


/* after */
.pcard .media:hover .img.main {
  opacity: 0
}

.pcard .media:hover .img.alt {
  opacity: 1;
  transform: scale(1.04)
}

.pcard .badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
  align-items: flex-start
}

.pcard .fav {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(251, 248, 242, .92);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  transition: .2s;
  color: var(--ink)
}

.pcard .fav:hover {
  background: #fff;
  transform: scale(1.08)
}

.pcard .fav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7
}

.pcard .fav.on {
  color: var(--madder)
}

.pcard .fav.on svg {
  fill: var(--madder);
  stroke: var(--madder)
}

.pcard .hover-actions {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  gap: 8px;
  transform: translateY(14px);
  opacity: 0;
  transition: .3s var(--ease)
}

.pcard:hover .hover-actions {
  transform: translateY(0);
  opacity: 1
}

.pcard .hover-actions .qv {
  flex: 1;
  height: 42px;
  background: rgba(251, 248, 242, .94);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: .2s
}

.pcard .hover-actions .qv:hover {
  background: #fff
}

.pcard .hover-actions .qv svg {
  width: 15px;
  height: 15px
}

.pcard .hover-actions .cmp {
  width: 42px;
  height: 42px;
  background: rgba(251, 248, 242, .94);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: .2s
}

.pcard .hover-actions .cmp:hover {
  background: #fff
}

.pcard .hover-actions .cmp svg {
  width: 17px;
  height: 17px
}

.pcard .body {
  padding: 6px 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1
}

.pcard .seller-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-50)
}

.pcard .seller-line .verify-tick svg {
  width: 12px;
  height: 12px
}

.pcard h3.p-title {
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.005em
}

.pcard .made-by {
  font-family: var(--font-d);
  font-style: italic;
  font-size: 12.5px;
  color: var(--brass-d);
  display: flex;
  align-items: center;
  gap: 6px
}

.pcard .made-by .nib {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: .8
}

.pcard .rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-70)
}

.pcard .stars {
  display: inline-flex;
  color: var(--brass)
}

.pcard .stars svg {
  width: 13px;
  height: 13px
}

.pcard .rating .rev {
  color: var(--ink-50)
}

.pcard .price-row {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 2px
}

.pcard .price {
  font-family: var(--font-d);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em
}

.pcard .was {
  font-size: 13.5px;
  color: var(--ink-30);
  text-decoration: line-through
}

.pcard .off {
  font-size: 12px;
  font-weight: 700;
  color: var(--madder)
}

.pcard .foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line)
}

.pcard .ship {
  font-size: 11.5px;
  color: var(--ink-50);
  display: flex;
  align-items: center;
  gap: 5px
}

.pcard .ship svg {
  width: 14px;
  height: 14px;
  color: var(--celadon)
}

.pcard .add {
  height: 38px;
  padding: 0 15px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #F4EFE4;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: .2s;
  flex-shrink: 0
}

.pcard .add:hover {
  background: var(--brass)
}

.pcard .add svg {
  width: 15px;
  height: 15px
}

/* horizontal scroller */
.hscroll {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 0 20px;
  scrollbar-width: none;
  margin: 0 -32px;
  padding-left: 32px;
  padding-right: 32px
}

.hscroll::-webkit-scrollbar {
  display: none
}

.hscroll>* {
  scroll-snap-align: start;
  flex: 0 0 300px
}

.carousel-ctrl {
  display: flex;
  gap: 8px
}

.carousel-ctrl button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  background: var(--surface);
  display: grid;
  place-items: center;
  transition: .2s
}

.carousel-ctrl button:hover {
  background: var(--ink);
  color: #F4EFE4;
  border-color: var(--ink)
}

.carousel-ctrl button svg {
  width: 18px;
  height: 18px
}

.carousel-ctrl button:disabled {
  opacity: .35;
  pointer-events: none
}

/* ============ HERO ============ */
.hero {
  position: relative;
  background: var(--indigo-deep);
  overflow: hidden
}

.hero .slides {
  position: relative;
  height: clamp(500px, 60vw, 660px)
}

.hero .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s var(--ease);
  display: grid;
  grid-template-columns: 1.05fr .95fr
}

.hero .slide.active {
  opacity: 1;
  visibility: visible
}

.hero .slide .copy {
  padding: clamp(40px, 6vw, 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #F1EADF;
  position: relative;
  z-index: 2
}

.hero .slide .copy .eyebrow {
  color: #D8C08A
}

.hero .slide .copy .eyebrow::before {
  background: var(--brass)
}

.hero .slide h1 {
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 1.02;
  color: #FBF6EC;
  margin: 20px 0 0;
  font-weight: 600
}

.hero .slide h1 em {
  font-style: italic;
  color: #E5C888;
  font-weight: 500
}

.hero .slide .desc {
  font-size: clamp(15px, 1.4vw, 18px);
  color: #C9BFAE;
  margin-top: 22px;
  max-width: 440px;
  line-height: 1.6
}

.hero .slide .ctas {
  display: flex;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap
}

.hero .slide .artisan-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid rgba(244, 239, 228, .14);
  max-width: 380px
}

.hero .slide .artisan-chip .av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(229, 200, 136, .5)
}

.hero .slide .artisan-chip .t small {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #B0A48F
}

.hero .slide .artisan-chip .t b {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 16px;
  color: #F1EADF
}

.hero .slide .artisan-chip .t i {
  font-style: normal;
  color: #9F9585;
  font-size: 12.5px
}

.hero .slide .visual {
  position: relative;
  overflow: hidden
}

.hero .slide .visual .art {
  position: absolute;
  inset: 0
}

.hero .slide .visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--indigo-deep) 0%, transparent 22%, transparent 100%)
}

.hero .warp {
  position: absolute;
  inset: 0;
  opacity: .5;
  pointer-events: none;
  z-index: 1;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 5px)
}

.hero-dots {
  position: absolute;
  bottom: 30px;
  left: clamp(40px, 6vw, 88px);
  display: flex;
  gap: 9px;
  z-index: 5
}

.hero-dots button {
  width: 34px;
  height: 4px;
  border-radius: 2px;
  background: rgba(244, 239, 228, .28);
  transition: .3s;
  overflow: hidden;
  position: relative
}

.hero-dots button.active {
  background: rgba(244, 239, 228, .35)
}

.hero-dots button.active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  animation: fill 6s linear forwards
}

@keyframes fill {
  to {
    transform: scaleX(1)
  }
}

.hero-arrows {
  position: absolute;
  bottom: 26px;
  right: clamp(40px, 6vw, 88px);
  display: flex;
  gap: 8px;
  z-index: 5
}

.hero-arrows button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(244, 239, 228, .25);
  display: grid;
  place-items: center;
  color: #F1EADF;
  transition: .2s;
  background: rgba(255, 255, 255, .04)
}

.hero-arrows button:hover {
  background: #F1EADF;
  color: var(--ink);
  border-color: #F1EADF
}

.hero-arrows svg {
  width: 18px;
  height: 18px
}

.hero-stats {
  background: var(--ink);
  color: #CFC6B7;
  border-top: 1px solid rgba(244, 239, 228, .08)
}

.hero-stats .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px
}

.hero-stats .st {
  padding: 22px 0;
  display: flex;
  align-items: center;
  gap: 14px;
  border-right: 1px solid rgba(244, 239, 228, .08)
}

.hero-stats .st:last-child {
  border-right: none
}

.hero-stats .st svg {
  width: 26px;
  height: 26px;
  color: var(--brass);
  flex-shrink: 0
}

.hero-stats .st b {
  font-family: var(--font-d);
  font-size: 22px;
  color: #F4EFE4;
  font-weight: 600;
  display: block;
  line-height: 1
}

.hero-stats .st small {
  font-size: 12px;
  letter-spacing: .02em;
  color: #A99E8C;
  display: block;
  margin-top: 4px
}

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

.cat-grid .big {
  grid-column: span 2;
  grid-row: span 2
}

.catcard {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  color: #F4EFE4;
  isolation: isolate;
  transition: transform .4s var(--ease), box-shadow .4s
}

.catcard .art {
  position: absolute;
  inset: 0;
  z-index: -2;
  transition: transform .6s var(--ease)
}

.catcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 30%, rgba(20, 24, 38, .15) 55%, rgba(20, 24, 38, .82) 100%)
}

.catcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-3)
}

.catcard:hover .art {
  transform: scale(1.06)
}

.catcard .c-body {
  padding: 22px;
  position: relative;
  width: 100%
}

.catcard .count {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(251, 248, 242, .9);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  height: 26px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  backdrop-filter: blur(4px)
}

.catcard h3 {
  color: #FBF6EC;
  font-size: 22px
}

.catcard.big h3 {
  font-size: 30px
}

.catcard p {
  font-size: 13px;
  color: #D9D0C1;
  margin-top: 5px;
  max-width: 280px
}

.catcard .go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: #E5C888;
  opacity: 0;
  transform: translateY(8px);
  transition: .3s var(--ease)
}

.catcard:hover .go {
  opacity: 1;
  transform: translateY(0)
}

.catcard .go svg {
  width: 15px;
  height: 15px
}

/* ============ AI DISCOVERY ============ */
.ai-block {
  background: var(--indigo-deep);
  color: #EFE8DC;
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative
}

.ai-block .warp {
  position: absolute;
  inset: 0;
  opacity: .4;
  pointer-events: none;
  background: radial-gradient(1200px 400px at 80% -10%, rgba(169, 119, 46, .22), transparent 60%),
    radial-gradient(800px 500px at 0% 120%, rgba(94, 115, 85, .18), transparent 55%)
}

.ai-inner {
  position: relative;
  z-index: 2;
  padding: clamp(34px, 4vw, 58px)
}

.ai-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px
}

.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: rgba(229, 200, 136, .14);
  border: 1px solid rgba(229, 200, 136, .3);
  color: #E5C888;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em
}

.ai-badge svg {
  width: 15px;
  height: 15px
}

.ai-block h2 {
  font-size: clamp(30px, 4vw, 46px);
  color: #FBF6EC;
  max-width: 640px
}

.ai-block h2 em {
  font-style: italic;
  color: #E5C888;
  font-weight: 500
}

.ai-block .lede {
  color: #B9AF9E;
  margin-top: 14px;
  max-width: 560px;
  font-size: 16px
}

.ai-search-wrap {
  margin-top: 30px;
  max-width: 820px
}

.ai-input {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(251, 248, 242, .06);
  border: 1.5px solid rgba(229, 200, 136, .3);
  border-radius: var(--r-lg);
  padding: 8px 8px 8px 20px;
  transition: .2s
}

.ai-input:focus-within {
  border-color: var(--brass);
  background: rgba(251, 248, 242, .1)
}

.ai-input>svg {
  width: 22px;
  height: 22px;
  color: #E5C888;
  flex-shrink: 0
}

.ai-input input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: #F4EFE4;
  font-size: 16px;
  height: 52px
}

.ai-input input::placeholder {
  color: #8E8474
}

.ai-input .go-ai {
  height: 48px;
  padding: 0 24px;
  border-radius: var(--r-md);
  background: var(--brass);
  color: #fff;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: .2s;
  flex-shrink: 0
}

.ai-input .go-ai:hover {
  background: #B9862F
}

.ai-input .go-ai svg {
  width: 17px;
  height: 17px
}

.ai-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px
}

.ai-prompts span {
  font-size: 12px;
  color: #8E8474;
  align-self: center;
  margin-right: 2px
}

.ai-prompts button {
  height: 36px;
  padding: 0 15px;
  border-radius: var(--r-pill);
  background: rgba(251, 248, 242, .05);
  border: 1px solid rgba(244, 239, 228, .14);
  color: #D9D0C1;
  font-size: 12.5px;
  transition: .2s;
  font-weight: 500
}

.ai-prompts button:hover {
  background: rgba(229, 200, 136, .14);
  border-color: rgba(229, 200, 136, .4);
  color: #F4EFE4
}

.ai-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 34px
}

.ai-feat {
  padding: 18px;
  border: 1px solid rgba(244, 239, 228, .1);
  border-radius: var(--r-md);
  background: rgba(251, 248, 242, .03);
  transition: .2s
}

.ai-feat:hover {
  background: rgba(251, 248, 242, .06);
  border-color: rgba(229, 200, 136, .3)
}

.ai-feat svg {
  width: 22px;
  height: 22px;
  color: #E5C888;
  margin-bottom: 11px
}

.ai-feat b {
  display: block;
  font-size: 14px;
  color: #F1EADF;
  font-weight: 600
}

.ai-feat small {
  display: block;
  color: #9F9585;
  font-size: 12px;
  margin-top: 3px
}

/* ============ SHOP BY STYLE ============ */
.style-scroll {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px
}

.stylecard {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3/4.1;
  display: flex;
  align-items: flex-end;
  color: #fff;
  transition: .35s var(--ease)
}

.stylecard .art {
  position: absolute;
  inset: 0;
  z-index: -2;
  transition: transform .6s var(--ease)
}

.stylecard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 24, 38, .05), rgba(20, 24, 38, .72))
}

.stylecard:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-3)
}

.stylecard:hover .art {
  transform: scale(1.07)
}

.stylecard .s-body {
  padding: 18px;
  width: 100%
}

.stylecard small {
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #E5C888;
  display: block;
  margin-bottom: 5px
}

.stylecard h3 {
  color: #FBF6EC;
  font-size: 19px
}

.stylecard .n {
  font-size: 12px;
  color: #CFC6B7;
  margin-top: 3px
}

/* ============ ARTISANS ============ */
.maker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px
}

.makercard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: .35s var(--ease)
}

.makercard:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-3);
  border-color: var(--line-2)
}

.makercard .banner {
  height: 96px;
  position: relative;
  overflow: hidden
}

.makercard .banner .art {
  position: absolute;
  inset: 0
}

.makercard .m-av {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 4px solid var(--surface);
  overflow: hidden;
  margin: -40px auto 0;
  position: relative;
  z-index: 2;
  box-shadow: var(--sh-1)
}

.makercard .m-body {
  padding: 12px 20px 22px;
  text-align: center
}

.makercard .m-name {
  font-family: var(--font-d);
  font-size: 19px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px
}

.makercard .m-loc {
  font-size: 12.5px;
  color: var(--ink-50);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 4px
}

.makercard .m-loc svg {
  width: 13px;
  height: 13px
}

.makercard .m-craft {
  display: inline-block;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brass-d);
  background: var(--brass-wash);
  padding: 5px 12px;
  border-radius: var(--r-pill)
}

.makercard .m-story {
  font-family: var(--font-d);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-70);
  margin-top: 14px;
  line-height: 1.5
}

.makercard .m-stats {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px
}

.makercard .m-stats div {
  flex: 1;
  border-right: 1px solid var(--line)
}

.makercard .m-stats div:last-child {
  border-right: none
}

.makercard .m-stats b {
  display: block;
  font-family: var(--font-d);
  font-size: 16px;
  font-weight: 600
}

.makercard .m-stats small {
  font-size: 10.5px;
  color: var(--ink-50);
  letter-spacing: .04em;
  text-transform: uppercase
}

.makercard .m-actions {
  display: flex;
  gap: 9px;
  margin-top: 16px
}

.makercard .m-actions .btn {
  flex: 1;
  height: 42px;
  font-size: 13px;
  padding: 0 12px
}

/* ============ COLLECTIONS ============ */
.coll-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px
}

.collcard {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: flex-end;
  min-height: 260px;
  transition: .35s var(--ease)
}

.collcard.feature {
  grid-row: span 2;
  min-height: 0
}

.collcard .art {
  position: absolute;
  inset: 0;
  z-index: -2;
  transition: transform .7s var(--ease)
}

.collcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 24, 38, .1), rgba(20, 24, 38, .8))
}

.collcard:hover {
  box-shadow: var(--sh-3)
}

.collcard:hover .art {
  transform: scale(1.05)
}

.collcard .col-body {
  padding: 28px;
  width: 100%
}

.collcard small {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #E5C888
}

.collcard h3 {
  color: #FBF6EC;
  font-size: 24px;
  margin-top: 8px
}

.collcard.feature h3 {
  font-size: 34px
}

.collcard p {
  font-size: 13.5px;
  color: #D9D0C1;
  margin-top: 8px;
  max-width: 340px
}

.collcard .previews {
  display: flex;
  gap: 8px;
  margin-top: 16px
}

.collcard .previews .pv {
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1.5px solid rgba(244, 239, 228, .3)
}

.collcard .col-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-weight: 600;
  font-size: 13.5px;
  color: #FBF6EC;
  border-bottom: 1.5px solid rgba(251, 246, 236, .5);
  padding-bottom: 3px;
  transition: .2s
}

.collcard .col-cta:hover {
  gap: 12px;
  border-color: #E5C888;
  color: #E5C888
}

.collcard .col-cta svg {
  width: 15px;
  height: 15px
}

/* ============ TRUST BAR ============ */
.trust {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.trust .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding: 38px 32px
}

.trust .t-item {
  display: flex;
  gap: 14px;
  align-items: flex-start
}

.trust .t-item .ic {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--brass-d)
}

.trust .t-item .ic svg {
  width: 22px;
  height: 22px
}

.trust .t-item b {
  font-size: 14.5px;
  font-weight: 600;
  display: block
}

.trust .t-item small {
  font-size: 12.5px;
  color: var(--ink-50);
  display: block;
  margin-top: 2px
}

/* ============ PAGE ROUTING ============ */
.page {
  display: none
}

.page.active {
  display: block;
  animation: fadeUp .5s var(--ease)
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.98)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* breadcrumbs */
.crumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--ink-50);
  padding: 8px 0;
  flex-wrap: wrap
}

.crumbs a:hover {
  color: var(--brass-d)
}

.crumbs svg {
  width: 13px;
  height: 13px;
  opacity: .6
}

.crumbs .cur {
  color: var(--ink);
  font-weight: 600
}

/* ============ LISTING PAGE ============ */
.listing-head {
  padding: 6px 0 24px;
  border-bottom: 1px solid var(--line)
}

.listing-head h1 {
  font-size: clamp(30px, 4vw, 44px)
}

.listing-head .meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  flex-wrap: wrap
}

.listing-head .meta .cnt {
  color: var(--ink-50);
  font-size: 14px
}

.listing-head .meta .cnt b {
  color: var(--ink);
  font-family: var(--font-d);
  font-weight: 600
}

.list-layout {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 36px;
  /* padding: 28px 0 80px; */
  align-items: start
}

.filters {
  position: sticky;
  top: 190px
}

.filter-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden
}

.filter-card .fc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line)
}

.filter-card .fc-head b {
  font-family: var(--font-d);
  font-size: 16px;
  font-weight: 600
}

.filter-card .fc-head button {
  font-size: 12.5px;
  color: var(--brass-d);
  font-weight: 600
}

.fgroup {
  border-bottom: 1px solid var(--line)
}

.fgroup>summary {
  padding: 6px 18px;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  user-select: none
}

.fgroup>summary::-webkit-details-marker {
  display: none
}

.fgroup>summary .chev {
  width: 16px;
  height: 16px;
  transition: .25s;
  color: var(--ink-50)
}

.fgroup[open]>summary .chev {
  transform: rotate(180deg)
}

.fgroup .fg-body {
  padding: 2px 18px 18px
}

.fopt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  cursor: pointer;
  font-size: 10.5px;
  color: var(--ink-70)
}

.fopt input {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1.6px solid var(--line-2);
  border-radius: 5px;
  flex-shrink: 0;
  transition: .15s;
  position: relative
}

.fopt input:checked {
  background: var(--brass);
  border-color: var(--brass)
}

.fopt input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg)
}

.fopt .cnt {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ink-30)
}

.fopt:hover {
  color: var(--ink)
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding-top: 4px
}

.swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  cursor: pointer;
  transition: .15s;
  position: relative
}

.swatch:hover {
  transform: scale(1.12)
}

.swatch.sel {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--brass)
}

.price-slider {
  padding: 8px 0 2px
}

.price-slider .track {
  height: 4px;
  background: var(--line-2);
  border-radius: 2px;
  position: relative;
  margin: 18px 0
}

.price-slider .fill {
  position: absolute;
  height: 100%;
  background: var(--brass);
  border-radius: 2px;
  left: 12%;
  right: 28%
}

.price-slider .knob {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brass);
  transform: translate(-50%, -50%);
  box-shadow: var(--sh-1)
}

.price-slider .vals {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--ink-70);
  font-weight: 600
}

.chips-active {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px
}

.chip-active {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 8px 0 13px;
  border-radius: var(--r-pill);
  background: var(--brass-wash);
  color: var(--brass-d);
  font-size: 12.5px;
  font-weight: 600
}

.chip-active button {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(138, 95, 33, .15);
  display: grid;
  place-items: center
}

.chip-active button svg {
  width: 11px;
  height: 11px
}

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

.toolbar .sort-wrap {
  display: flex;
  align-items: center;
  gap: 12px
}

.sel-box {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 6px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 10.5px;
  font-weight: 500;
  cursor: pointer;
  transition: .2s
}

.sel-box:hover {
  border-color: var(--line-2)
}

.sel-box svg {
  width: 15px;
  height: 15px;
  color: var(--ink-50)
}

.sel-box b {
  font-weight: 600
}

.view-toggle {
  display: flex;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden
}

.view-toggle button {
  width: 42px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--ink-50);
  transition: .15s
}

.view-toggle button.on {
  background: var(--ink);
  color: #F4EFE4
}

.view-toggle button svg {
  width: 18px;
  height: 18px
}

.filter-mobile-btn {
  display: none
}

/* pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 44px
}

.pagination button {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--surface);
  font-weight: 600;
  font-size: 14px;
  transition: .2s
}

.pagination button:hover {
  border-color: var(--ink)
}

.pagination button.on {
  background: var(--ink);
  color: #F4EFE4;
  border-color: var(--ink)
}

.pagination button.arrow {
  color: var(--ink-70)
}

.pagination .dots {
  color: var(--ink-30)
}

/* ============ PRODUCT DETAIL ============ */
.pdp {
  padding: 8px 0 40px
}

.pdp-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 52px;
  align-items: start
}

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

.gallery .main-img {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  position: relative;
  aspect-ratio: 1/1;
  background: var(--paper-2);
  cursor: zoom-in
}

.gallery .main-img .zoom-hint {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(251, 248, 242, .9);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  height: 34px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink)
}

.gallery .main-img .zoom-hint svg {
  width: 14px;
  height: 14px
}

.gallery .badges-abs {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 7px;
  z-index: 2
}

.gallery .thumbs {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px
}

.gallery .thumbs::-webkit-scrollbar {
  display: none
}

.gallery .thumbs>* {
  flex: 0 0 auto
}

.gallery .thumb {
  width: 78px;
  height: 78px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: .2s;
  position: relative;
  background: var(--paper-2)
}

.gallery .thumb.on {
  border-color: var(--brass)
}

.gallery .thumb.video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 38, .35)
}

.gallery .thumb .play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  color: #fff
}

.gallery .thumb .play svg {
  width: 22px;
  height: 22px
}

.gallery .thumb .r360 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  color: #fff;
  background: rgba(20, 24, 38, .3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em
}

.buybox .maker-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px
}

.buybox .maker-row .av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--line)
}

.buybox .maker-row .who {
  flex: 1
}

.buybox .maker-row .who small {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-50)
}

.buybox .maker-row .who b {
  font-family: var(--font-d);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px
}

.buybox .maker-row .who .loc {
  font-size: 12px;
  color: var(--ink-50);
  font-weight: 400;
  font-family: var(--font-b)
}

.buybox h1 {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.12;
  margin-bottom: 14px
}

.buybox .rate-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px
}

.buybox .rate-row .stars {
  display: inline-flex;
  color: var(--brass)
}

.buybox .rate-row .stars svg {
  width: 16px;
  height: 16px
}

.buybox .rate-row .rnum {
  font-weight: 600
}

.buybox .rate-row a {
  color: var(--ink-50);
  font-size: 13px;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 1px
}

.buybox .rate-row .sold {
  font-size: 13px;
  color: var(--celadon);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px
}

.buybox .rate-row .sold svg {
  width: 14px;
  height: 14px
}

.price-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  margin-bottom: 22px
}

.price-block .p-main {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap
}

.price-block .p-main .now {
  font-family: var(--font-d);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -.02em
}

.price-block .p-main .was {
  font-size: 19px;
  color: var(--ink-30);
  text-decoration: line-through
}

.price-block .p-main .off {
  background: var(--madder);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-sm)
}

.price-block .tax {
  font-size: 12.5px;
  color: var(--ink-50);
  margin-top: 6px
}

.price-block .stock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--celadon)
}

.price-block .stock .pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--celadon);
  box-shadow: 0 0 0 3px var(--celadon-wash)
}

.deliver {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line)
}

.deliver .d-ic {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--brass-d);
  flex-shrink: 0
}

.deliver .d-ic svg {
  width: 19px;
  height: 19px
}

.deliver b {
  font-size: 13.5px;
  font-weight: 600;
  display: block
}

.deliver small {
  font-size: 12px;
  color: var(--ink-50)
}

.qty-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px
}

.qty-row .lbl {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-70)
}

.qty {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill);
  overflow: hidden;
  height: 50px
}

.qty button {
  width: 46px;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--ink);
  transition: .15s
}

.qty button:hover {
  background: var(--paper-2)
}

.qty span {
  width: 44px;
  text-align: center;
  font-weight: 600;
  font-family: var(--font-d);
  font-size: 17px
}

.buy-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 14px
}

.buy-actions .btn {
  flex: 1;
  height: 56px
}

.buy-secondary {
  display: flex;
  gap: 12px
}

.buy-secondary button {
  flex: 1;
  height: 46px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13.5px;
  transition: .2s
}

.buy-secondary button:hover {
  border-color: var(--ink);
  background: #fff
}

.buy-secondary button svg {
  width: 16px;
  height: 16px
}

.buy-secondary button.faved {
  color: var(--madder);
  border-color: var(--madder-wash);
  background: var(--madder-wash)
}

.assurances {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 22px
}

.assurances .a {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12.5px;
  color: var(--ink-70)
}

.assurances .a svg {
  width: 20px;
  height: 20px;
  color: var(--celadon);
  flex-shrink: 0
}

/* AI product assistant */
.pai {
  margin-top: 22px;
  background: var(--indigo-deep);
  border-radius: var(--r-lg);
  padding: 20px;
  color: #EFE8DC;
  position: relative;
  overflow: hidden
}

.pai .warp {
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 200px at 90% 0%, rgba(169, 119, 46, .25), transparent 60%);
  pointer-events: none
}

.pai .pai-head {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative
}

.pai .pai-head svg {
  width: 18px;
  height: 18px;
  color: #E5C888
}

.pai .pai-head b {
  font-size: 14.5px;
  color: #F4EFE4
}

.pai .pai-head small {
  margin-left: auto;
  font-size: 11px;
  color: #9F9585
}

.pai .pai-q {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  position: relative
}

.pai .pai-q button {
  background: rgba(251, 248, 242, .06);
  border: 1px solid rgba(244, 239, 228, .14);
  color: #D9D0C1;
  height: 34px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  transition: .2s;
  text-align: left
}

.pai .pai-q button:hover {
  background: rgba(229, 200, 136, .14);
  border-color: rgba(229, 200, 136, .35);
  color: #F4EFE4
}

.pai .pai-answer {
  margin-top: 14px;
  background: rgba(251, 248, 242, .05);
  border: 1px solid rgba(244, 239, 228, .1);
  border-radius: var(--r-md);
  padding: 15px;
  font-size: 13.5px;
  color: #D9D0C1;
  line-height: 1.6;
  position: relative;
  display: none
}

.pai .pai-answer.show {
  display: block;
  animation: fadeUp .4s var(--ease)
}

.pai .pai-answer .who {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #E5C888;
  font-weight: 600;
  font-size: 12px
}

.pai .pai-answer .who svg {
  width: 14px;
  height: 14px
}

/* product story */
.story {
  background: var(--indigo-deep);
  color: #EBE3D6;
  border-radius: var(--r-xl);
  overflow: hidden;
  margin: 60px 0
}

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
}

.story .art-side {
  position: relative;
  min-height: 440px;
  overflow: hidden
}

.story .art-side .art {
  position: absolute;
  inset: 0
}

.story .txt-side {
  padding: clamp(34px, 4vw, 60px)
}

.story .eyebrow {
  color: #E5C888
}

.story .eyebrow::before {
  background: var(--brass)
}

.story h2 {
  color: #FBF6EC;
  font-size: clamp(26px, 3vw, 38px);
  margin: 16px 0 20px
}

.story h2 em {
  font-style: italic;
  color: #E5C888;
  font-weight: 500
}

.story .lede {
  color: #C0B6A5;
  font-size: 16px;
  line-height: 1.7;
  font-family: var(--font-d);
  font-style: italic
}

.story .story-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 28px
}

.story .fact b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9F9585;
  font-weight: 600;
  font-family: var(--font-b)
}

.story .fact b svg {
  width: 15px;
  height: 15px;
  color: var(--brass)
}

.story .fact p {
  color: #DDD4C5;
  font-size: 14px;
  margin-top: 6px;
  line-height: 1.5
}

/* tabs / accordion */
.detail-tabs {
  border-top: 1px solid var(--line);
  margin-top: 20px
}

.tab-strip {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px
}

.tab-strip::-webkit-scrollbar {
  display: none
}

.tab-strip button {
  padding: 18px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-50);
  white-space: nowrap;
  position: relative;
  transition: .2s
}

.tab-strip button.on {
  color: var(--ink)
}

.tab-strip button.on::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -1px;
  height: 2px;
  background: var(--brass)
}

.tab-strip button:hover {
  color: var(--ink)
}

.tab-panel {
  display: none;
  max-width: 820px;
  animation: fadeUp .4s var(--ease)
}

.tab-panel.on {
  display: block
}

.tab-panel p {
  color: var(--ink-70);
  line-height: 1.75;
  margin-bottom: 14px
}

.spec-table {
  width: 100%;
  border-collapse: collapse
}

.spec-table tr {
  border-bottom: 1px solid var(--line)
}

.spec-table td {
  padding: 13px 0;
  font-size: 14px
}

.spec-table td:first-child {
  color: var(--ink-50);
  width: 200px;
  font-weight: 500
}

.spec-table td:last-child {
  font-weight: 500
}

/* reviews */
.rev-summary {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 28px
}

.rev-score {
  text-align: center
}

.rev-score .big {
  font-family: var(--font-d);
  font-size: 56px;
  font-weight: 600;
  line-height: 1
}

.rev-score .stars {
  display: inline-flex;
  color: var(--brass);
  margin: 8px 0
}

.rev-score .stars svg {
  width: 18px;
  height: 18px
}

.rev-score .cnt {
  font-size: 13px;
  color: var(--ink-50)
}

.rev-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center
}

.rev-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px
}

.rev-bar .n {
  width: 44px;
  color: var(--ink-50);
  display: flex;
  align-items: center;
  gap: 3px
}

.rev-bar .track {
  flex: 1;
  height: 7px;
  background: var(--paper-2);
  border-radius: 4px;
  overflow: hidden
}

.rev-bar .track i {
  display: block;
  height: 100%;
  background: var(--brass);
  border-radius: 4px
}

.rev-bar .pct {
  width: 36px;
  text-align: right;
  color: var(--ink-50)
}

.review {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px
}

.review .rav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brass);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-family: var(--font-d)
}

.review .rhead {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.review .rhead b {
  font-weight: 600
}

.review .rhead .vf {
  font-size: 11px;
  color: var(--celadon);
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600
}

.review .rhead .vf svg {
  width: 13px;
  height: 13px
}

.review .rhead .date {
  color: var(--ink-30);
  font-size: 12px;
  margin-left: auto
}

.review .stars {
  display: inline-flex;
  color: var(--brass);
  margin: 8px 0
}

.review .stars svg {
  width: 14px;
  height: 14px
}

.review p {
  color: var(--ink-70);
  line-height: 1.6;
  font-size: 14px
}

/* ============ SELLER STOREFRONT ============ */
.shop-banner {
  position: relative;
  height: 280px;
  overflow: hidden;
  border-radius: 0 0 var(--r-xl) var(--r-xl)
}

.shop-banner .art {
  position: absolute;
  inset: 0
}

.shop-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 24, 38, .15), rgba(20, 24, 38, .6))
}

.shop-header {
  display: flex;
  gap: 24px;
  align-items: flex-end;
  margin-top: -70px;
  position: relative;
  z-index: 3;
  flex-wrap: wrap
}

.shop-header .s-av {
  width: 132px;
  height: 132px;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 5px solid var(--paper);
  box-shadow: var(--sh-2);
  flex-shrink: 0;
  background: var(--paper-2)
}

.shop-header .s-main {
  flex: 1;
  padding-bottom: 8px;
  min-width: 260px
}

.shop-header .s-main .s-name {
  font-size: clamp(26px, 3vw, 36px);
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff
}

.shop-header.dark .s-name .verify-tick {
  color: #9CC58B
}

.shop-header .s-meta {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 8px;
  color: #E4DCCD;
  font-size: 13.5px;
  flex-wrap: wrap
}

.shop-header .s-meta span {
  display: flex;
  align-items: center;
  gap: 6px
}

.shop-header .s-meta svg {
  width: 14px;
  height: 14px;
  color: #E5C888
}

.shop-header .s-actions {
  display: flex;
  gap: 10px;
  padding-bottom: 8px
}

.shop-stats-bar {
  display: flex;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-top: 26px;
  overflow: hidden
}

.shop-stats-bar .ss {
  flex: 1;
  padding: 20px;
  text-align: center;
  border-right: 1px solid var(--line)
}

.shop-stats-bar .ss:last-child {
  border-right: none
}

.shop-stats-bar .ss b {
  font-family: var(--font-d);
  font-size: 24px;
  font-weight: 600;
  display: block
}

.shop-stats-bar .ss small {
  font-size: 11.5px;
  color: var(--ink-50);
  letter-spacing: .04em;
  text-transform: uppercase
}

.shop-stats-bar .ss .stars {
  color: var(--brass);
  display: inline-flex
}

.shop-stats-bar .ss .stars svg {
  width: 16px;
  height: 16px
}

.shop-about {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  margin: 32px 0;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg)
}

.shop-about h3 {
  font-size: 22px;
  margin-bottom: 14px
}

.shop-about p {
  color: var(--ink-70);
  line-height: 1.7;
  margin-bottom: 14px
}

.shop-about .quote {
  font-family: var(--font-d);
  font-style: italic;
  font-size: 17px;
  color: var(--brass-d);
  border-left: 2px solid var(--brass);
  padding-left: 18px;
  line-height: 1.5
}

.shop-about .specs .sp {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px
}

.shop-about .specs .sp:last-child {
  border: none
}

.shop-about .specs .sp span:first-child {
  color: var(--ink-50)
}

.shop-about .specs .sp span:last-child {
  font-weight: 600
}

.shop-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  margin: 20px 0 30px;
  overflow-x: auto;
  scrollbar-width: none
}

.shop-tabs button {
  padding: 15px 20px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink-50);
  white-space: nowrap;
  position: relative;
  transition: .2s
}

.shop-tabs button.on {
  color: var(--ink)
}

.shop-tabs button.on::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -1px;
  height: 2px;
  background: var(--brass)
}

/* ============ CART ============ */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  padding: 8px 0 80px;
  align-items: start
}

.cart-seller {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 20px;
  overflow: hidden
}

.cart-seller .cs-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line)
}

.cart-seller .cs-head .av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line)
}

.cart-seller .cs-head .who b {
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 6px
}

.cart-seller .cs-head .who small {
  font-size: 11.5px;
  color: var(--ink-50)
}

.cart-seller .cs-head .ship-info {
  margin-left: auto;
  font-size: 12px;
  color: var(--celadon);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: right
}

.cart-seller .cs-head .ship-info svg {
  width: 15px;
  height: 15px
}

.cart-item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 18px;
  padding: 20px;
  border-bottom: 1px solid var(--line);
  align-items: start
}

.cart-item:last-child {
  border-bottom: none
}

.cart-item .ci-img {
  width: 96px;
  height: 96px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-2)
}

.cart-item .ci-info h4 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3
}

.cart-item .ci-info .made {
  font-family: var(--font-d);
  font-style: italic;
  font-size: 12.5px;
  color: var(--brass-d);
  margin-top: 3px
}

.cart-item .ci-info .attrs {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap
}

.cart-item .ci-info .attrs span {
  font-size: 11.5px;
  color: var(--ink-50);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 3px 9px;
  border-radius: var(--r-sm)
}

.cart-item .ci-info .ci-actions {
  display: flex;
  gap: 14px;
  margin-top: 12px
}

.cart-item .ci-info .ci-actions button {
  font-size: 12.5px;
  color: var(--ink-50);
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  transition: .15s
}

.cart-item .ci-info .ci-actions button:hover {
  color: var(--madder)
}

.cart-item .ci-info .ci-actions button svg {
  width: 14px;
  height: 14px
}

.cart-item .ci-info .ci-actions button.save:hover {
  color: var(--brass-d)
}

.cart-item .ci-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px
}

.cart-item .ci-right .price {
  font-family: var(--font-d);
  font-size: 20px;
  font-weight: 600
}

.cart-item .ci-right .qty {
  height: 40px
}

.cart-item .ci-right .qty button {
  width: 38px
}

.cart-item .ci-right .qty span {
  width: 36px;
  font-size: 15px
}

.cart-item .ci-right .ship-est {
  font-size: 11.5px;
  color: var(--ink-50)
}

.summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  position: sticky;
  top: 180px
}

.summary h3 {
  font-size: 20px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line)
}

.summary .line {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 14px;
  color: var(--ink-70)
}

.summary .line b {
  color: var(--ink);
  font-weight: 600
}

.summary .line.disc b {
  color: var(--celadon)
}

.summary .total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0 4px;
  margin-top: 10px;
  border-top: 1px solid var(--line)
}

.summary .total span:first-child {
  font-size: 16px;
  font-weight: 600
}

.summary .total .amt {
  font-family: var(--font-d);
  font-size: 28px;
  font-weight: 600
}

.summary .save-note {
  font-size: 12px;
  color: var(--celadon);
  font-weight: 600;
  text-align: right;
  margin-bottom: 16px
}

.coupon {
  display: flex;
  gap: 8px;
  margin: 16px 0
}

.coupon input {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 0 14px;
  background: var(--paper);
  outline: none
}

.coupon input:focus {
  border-color: var(--brass)
}

.coupon button {
  height: 46px;
  padding: 0 18px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: #F4EFE4;
  font-weight: 600;
  font-size: 13.5px
}

.trust-mini {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line)
}

.trust-mini .tm {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ink-70)
}

.trust-mini .tm svg {
  width: 16px;
  height: 16px;
  color: var(--celadon)
}

/* ============ CHECKOUT ============ */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 36px;
  padding: 8px 0 80px;
  align-items: start
}

.steps {
  display: flex;
  align-items: center;
  margin-bottom: 34px
}

.steps .step {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1
}

.steps .step .num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-30);
  flex-shrink: 0;
  transition: .3s;
  background: var(--surface)
}

.steps .step .lbl small {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-30);
  display: block
}

.steps .step .lbl b {
  font-size: 14px;
  color: var(--ink-50);
  font-weight: 600
}

.steps .step.active .num {
  border-color: var(--brass);
  background: var(--brass);
  color: #fff
}

.steps .step.active .lbl b {
  color: var(--ink)
}

.steps .step.done .num {
  border-color: var(--celadon);
  background: var(--celadon);
  color: #fff
}

.steps .step.done .lbl b {
  color: var(--ink)
}

.steps .bar {
  flex: 1;
  height: 2px;
  background: var(--line-2);
  margin: 0 12px;
  position: relative;
  top: -10px;
  max-width: 80px
}

.steps .step.done+.bar {
  background: var(--celadon)
}

.co-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  margin-bottom: 20px
}

.co-card h3 {
  font-size: 20px;
  margin-bottom: 6px
}

.co-card .sub {
  color: var(--ink-50);
  font-size: 13.5px;
  margin-bottom: 20px
}

.addr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 12px
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px
}

.field.full {
  grid-column: span 2
}

.field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-70)
}

.field input,
.field select,
.field textarea {
  height: 48px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 0 14px;
  background: var(--paper);
  outline: none;
  transition: .2s
}

.field textarea {
  height: auto;
  padding: 12px 14px;
  resize: vertical
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brass);
  background: #fff;
  box-shadow: 0 0 0 3px var(--brass-wash)
}

.saved-addr {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap
}

.saved-addr .sa {
  flex: 1;
  min-width: 240px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  cursor: pointer;
  transition: .2s;
  position: relative
}

.saved-addr .sa.sel {
  border-color: var(--brass);
  background: var(--brass-wash)
}

.saved-addr .sa .tag {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--ink);
  color: #F4EFE4;
  padding: 3px 8px;
  border-radius: var(--r-sm)
}

.saved-addr .sa b {
  font-size: 14.5px
}

.saved-addr .sa p {
  font-size: 13px;
  color: var(--ink-50);
  margin-top: 6px;
  line-height: 1.5
}

.deliv-opt,
.pay-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: .2s
}

.deliv-opt.sel,
.pay-opt.sel {
  border-color: var(--brass);
  background: var(--brass-wash)
}

.deliv-opt .radio,
.pay-opt .radio {
  width: 20px;
  height: 20px;
  border: 2px solid var(--line-2);
  border-radius: 50%;
  flex-shrink: 0;
  transition: .2s;
  position: relative
}

.deliv-opt.sel .radio,
.pay-opt.sel .radio {
  border-color: var(--brass)
}

.deliv-opt.sel .radio::after,
.pay-opt.sel .radio::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--brass)
}

.deliv-opt .di,
.pay-opt .di {
  flex: 1
}

.deliv-opt b,
.pay-opt b {
  font-size: 14.5px;
  display: block
}

.deliv-opt small,
.pay-opt small {
  font-size: 12.5px;
  color: var(--ink-50)
}

.deliv-opt .cost {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 16px
}

.co-nav {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 8px
}

.review-seller {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 14px
}

.review-seller .rs-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 14px
}

.review-seller .rs-head .av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden
}

.review-seller .rs-head .ship {
  margin-left: auto;
  font-size: 12px;
  color: var(--celadon);
  font-weight: 600
}

.review-seller .ri {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  font-size: 13.5px
}

.review-seller .ri img,
.review-seller .ri .thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  overflow: hidden;
  flex-shrink: 0
}

.review-seller .ri .rt {
  flex: 1
}

.review-seller .ri .rp {
  font-family: var(--font-d);
  font-weight: 600
}

/* ============ ACCOUNT ============ */
.acct-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 32px;
  padding: 8px 0 80px;
  align-items: start
}

.acct-side {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: sticky;
  top: 180px
}

.acct-side .who {
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid var(--line)
}

.acct-side .who .av {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brass);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 18px
}

.acct-side .who b {
  font-size: 15px;
  font-weight: 600
}

.acct-side .who small {
  font-size: 12px;
  color: var(--ink-50)
}

.acct-side nav {
  padding: 8px
}

.acct-side nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-70);
  transition: .15s
}

.acct-side nav a svg {
  width: 18px;
  height: 18px;
  color: var(--ink-50)
}

.acct-side nav a:hover {
  background: var(--paper-2)
}

.acct-side nav a.on {
  background: var(--ink);
  color: #F4EFE4
}

.acct-side nav a.on svg {
  color: #E5C888
}

.acct-main .ac-head {
  margin-bottom: 24px
}

.acct-main .ac-head h1 {
  font-size: 30px
}

.acct-main .ac-head p {
  color: var(--ink-50);
  margin-top: 6px
}

.acct-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px
}

.ac-stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px
}

.ac-stat svg {
  width: 22px;
  height: 22px;
  color: var(--brass-d);
  margin-bottom: 12px
}

.ac-stat b {
  font-family: var(--font-d);
  font-size: 28px;
  font-weight: 600;
  display: block;
  line-height: 1
}

.ac-stat small {
  font-size: 12.5px;
  color: var(--ink-50);
  display: block;
  margin-top: 4px
}

.order-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
  align-items: center
}

.order-row .oimg {
  width: 64px;
  height: 64px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line)
}

.order-row .oinfo b {
  font-size: 15px;
  font-weight: 600
}

.order-row .oinfo small {
  font-size: 12.5px;
  color: var(--ink-50);
  display: block;
  margin-top: 3px
}

.order-row .ostatus {
  text-align: right
}

.order-row .ostatus .st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--r-pill)
}

.order-row .ostatus .st.delivered {
  background: var(--celadon-wash);
  color: #41522F
}

.order-row .ostatus .st.transit {
  background: var(--brass-wash);
  color: var(--brass-d)
}

.order-row .ostatus .amt {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 16px;
  margin-top: 8px
}

/* ============ FOOTER ============ */
.newsletter {
  background: var(--indigo-deep);
  color: #EBE3D6;
  padding: 56px 0;
  position: relative;
  overflow: hidden
}

.newsletter .warp {
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 300px at 85% 50%, rgba(169, 119, 46, .18), transparent 60%);
  pointer-events: none
}

.newsletter .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  flex-wrap: wrap
}

.newsletter h2 {
  font-size: clamp(24px, 3vw, 34px);
  color: #FBF6EC;
  max-width: 440px
}

.newsletter h2 em {
  font-style: italic;
  color: #E5C888;
  font-weight: 500
}

.newsletter p {
  color: #B0A48F;
  margin-top: 10px;
  max-width: 420px
}

.nl-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.nl-form input {
  height: 54px;
  width: 280px;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(244, 239, 228, .2);
  background: rgba(251, 248, 242, .05);
  padding: 0 22px;
  color: #F4EFE4;
  outline: none
}

.nl-form input::placeholder {
  color: #8E8474
}

.nl-form input:focus {
  border-color: var(--brass)
}

footer {
  background: var(--ink);
  color: #B0A48F;
  padding: 0 0 34px;
  /* margin-top: 35px; */
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(244, 239, 228, .1)
}

.foot-brand .logo .name {
  color: #F4EFE4
}

.foot-brand .logo .name b {
  color: #E5C888
}

.foot-brand p {
  margin-top: 18px;
  font-size: 13.5px;
  line-height: 1.7;
  max-width: 320px
}

.foot-brand .socials {
  display: flex;
  gap: 10px;
  margin-top: 20px
}

.foot-brand .socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(244, 239, 228, .16);
  display: grid;
  place-items: center;
  transition: .2s;
  color: #CFC6B7
}

.foot-brand .socials a:hover {
  background: var(--brass);
  border-color: var(--brass);
  color: #fff
}

.foot-brand .socials svg {
  width: 18px;
  height: 18px
}

.foot-col h4 {
  font-family: var(--font-b);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #E5C888;
  font-weight: 600;
  margin-bottom: 18px
}

.foot-col a {
  display: block;
  font-size: 13.5px;
  padding: 6px 0;
  color: #B0A48F;
  transition: .15s
}

.foot-col a:hover {
  color: #F4EFE4;
  padding-left: 4px
}

.foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
  font-size: 12.5px;
  gap: 16px;
  flex-wrap: wrap
}

.foot-bottom .pays {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap
}

.foot-bottom .pays span {
  padding: 5px 10px;
  border: 1px solid rgba(244, 239, 228, .14);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  color: #CFC6B7
}

/* ============ MODALS ============ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 38, .55);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .3s
}

.overlay.show {
  display: flex;
  opacity: 1
}

.ai-modal {
  background: var(--paper);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 440px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--sh-pop);
  transform: translateY(16px) scale(.98);
  transition: transform .35s var(--ease);
  position: relative
}

.overlay.show .ai-modal {
  transform: none
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  z-index: 5;
  transition: .2s
}

.modal-close:hover {
  background: #fff;
  transform: rotate(90deg)
}

.modal-close svg {
  width: 18px;
  height: 18px
}

/* auth modal */
.auth-modal {
  max-width: 460px
}

.auth-head {
  text-align: center;
  padding: 38px 38px 0
}

.auth-head .mark {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px
}

.auth-head h2 {
  font-size: 26px
}

.auth-head p {
  color: var(--ink-50);
  margin-top: 8px;
  font-size: 14px
}

.auth-tabs {
  display: flex;
  background: var(--paper-2);
  border-radius: var(--r-pill);
  padding: 4px;
  margin: 24px 38px 0
}

.auth-tabs button {
  flex: 1;
  height: 42px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-50);
  transition: .2s
}

.auth-tabs button.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-1)
}

.auth-body {
  padding: 24px 38px 38px
}

.acct-type {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 20px
}

.acct-type .at {
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 14px;
  cursor: pointer;
  transition: .2s;
  text-align: center
}

.acct-type .at.sel {
  border-color: var(--brass);
  background: var(--brass-wash)
}

.acct-type .at svg {
  width: 24px;
  height: 24px;
  color: var(--brass-d);
  margin: 0 auto 8px
}

.acct-type .at b {
  font-size: 14px;
  display: block
}

.acct-type .at small {
  font-size: 11.5px;
  color: var(--ink-50)
}

.auth-field {
  margin-bottom: 14px
}

.auth-field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-70);
  display: block;
  margin-bottom: 6px
}

.auth-field input {
  width: 100%;
  height: 50px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 0 16px;
  background: var(--surface);
  outline: none;
  transition: .2s
}

.auth-field input:focus {
  border-color: var(--brass);
  background: #fff;
  box-shadow: 0 0 0 3px var(--brass-wash)
}

.auth-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 18px;
  font-size: 13px
}

.auth-meta label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-70);
  cursor: pointer
}

.auth-meta label input {
  width: 16px;
  height: 16px;
  accent-color: var(--brass)
}

.auth-meta a {
  color: var(--brass-d);
  font-weight: 600
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  color: var(--ink-30);
  font-size: 12.5px
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line)
}

.social-btns {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.social-btn {
  height: 50px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-weight: 600;
  font-size: 14px;
  transition: .2s
}

.social-btn:hover {
  background: #fff;
  border-color: var(--line-2)
}

.social-btn svg {
  width: 19px;
  height: 19px
}

.auth-foot {
  text-align: center;
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--ink-50)
}

.auth-foot a {
  color: var(--brass-d);
  font-weight: 600
}

.seller-note {
  background: var(--celadon-wash);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 12.5px;
  color: #41522F;
  display: flex;
  gap: 10px;
  margin-top: 6px;
  line-height: 1.5
}

.seller-note svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px
}

/* quick view modal */
.qv-modal {
  max-width: 860px
}

.qv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
}

.qv-grid .qv-img {
  position: relative;
  background: var(--paper-2);
  min-height: 420px
}

.qv-grid .qv-img .art {
  position: absolute;
  inset: 0
}

.qv-grid .qv-img .badges {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 6px;
  flex-direction: column;
  align-items: flex-start
}

.qv-info {
  padding: 38px 34px
}

.qv-info .maker {
  font-family: var(--font-d);
  font-style: italic;
  color: var(--brass-d);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px
}

.qv-info h2 {
  font-size: 26px;
  line-height: 1.15
}

.qv-info .rate {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  font-size: 13px;
  color: var(--ink-70)
}

.qv-info .rate .stars {
  color: var(--brass);
  display: inline-flex
}

.qv-info .rate .stars svg {
  width: 14px;
  height: 14px
}

.qv-info .qv-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 14px 0
}

.qv-info .qv-price .now {
  font-family: var(--font-d);
  font-size: 30px;
  font-weight: 600
}

.qv-info .qv-price .was {
  color: var(--ink-30);
  text-decoration: line-through
}

.qv-info .qv-price .off {
  color: var(--madder);
  font-weight: 700;
  font-size: 13px
}

.qv-info .qv-desc {
  color: var(--ink-70);
  line-height: 1.6;
  font-size: 14px;
  margin: 14px 0 20px
}

.qv-info .qv-stock {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--celadon);
  font-weight: 600;
  margin-bottom: 18px
}

.qv-info .qv-actions {
  display: flex;
  flex-direction: column;
  gap: 10px
}

/* AI search modal */
.ai-modal {
  max-width: 720px;
  background: var(--indigo-deep);
  color: #EFE8DC
}

.ai-modal .modal-close {
  background: rgba(251, 248, 242, .08);
  border-color: rgba(244, 239, 228, .16);
  color: #EFE8DC
}

.ai-modal-head {
  padding: 34px 34px 0
}

.ai-modal-head .ai-badge {
  margin-bottom: 14px
}

.ai-modal-head h2 {
  color: #FBF6EC;
  font-size: 26px
}

.ai-modal-head h2 em {
  font-style: italic;
  color: #E5C888;
  font-weight: 500
}

.ai-modal-body {
  padding: 22px 34px 34px
}

.ai-modal .ai-input {
  background: rgba(251, 248, 242, .06)
}

.ai-modal .interp {
  margin-top: 20px;
  display: none
}

.ai-modal .interp.show {
  display: block;
  animation: fadeUp .4s var(--ease)
}

.ai-modal .interp .lbl {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #E5C888;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  margin-bottom: 10px
}

.ai-modal .interp .lbl svg {
  width: 14px;
  height: 14px
}

.ai-interp-box {
  background: rgba(251, 248, 242, .05);
  border: 1px solid rgba(244, 239, 228, .12);
  border-radius: var(--r-md);
  padding: 16px;
  font-size: 13.5px;
  color: #D9D0C1;
  line-height: 1.6
}

.ai-interp-box .fchips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px
}

.ai-interp-box .fchips span {
  background: rgba(229, 200, 136, .14);
  border: 1px solid rgba(229, 200, 136, .3);
  color: #E5C888;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--r-pill)
}

.ai-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 16px
}

.ai-res-card {
  display: flex;
  gap: 12px;
  background: rgba(251, 248, 242, .05);
  border: 1px solid rgba(244, 239, 228, .1);
  border-radius: var(--r-md);
  padding: 10px;
  transition: .2s;
  cursor: pointer
}

.ai-res-card:hover {
  background: rgba(251, 248, 242, .09);
  border-color: rgba(229, 200, 136, .3)
}

.ai-res-card .rc-img {
  width: 62px;
  height: 62px;
  border-radius: var(--r-sm);
  overflow: hidden;
  flex-shrink: 0
}

.ai-res-card .rc-info b {
  font-size: 13px;
  color: #F1EADF;
  font-weight: 600;
  display: block;
  line-height: 1.25
}

.ai-res-card .rc-info small {
  font-size: 11px;
  color: #9F9585;
  display: block;
  margin-top: 2px
}

.ai-res-card .rc-info .p {
  font-family: var(--font-d);
  color: #E5C888;
  font-weight: 600;
  font-size: 14px;
  margin-top: 5px
}

/* filter drawer mobile */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none
}

.drawer.show {
  display: block
}

.drawer .d-bg {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 38, .5)
}

.drawer .d-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(340px, 86vw);
  background: var(--paper);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .35s var(--ease);
  box-shadow: var(--sh-pop)
}

.drawer.show .d-panel {
  transform: none
}

.drawer .d-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 2
}

.drawer .d-head b {
  font-size: 18px;
  font-family: var(--font-d);
  font-weight: 600
}

.drawer .d-foot {
  position: sticky;
  bottom: 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 16px 20px;
  display: flex;
  gap: 12px
}

/* toast */
.toast-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.toast {
  background: var(--ink);
  color: #F4EFE4;
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--sh-pop);
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 300px;
  max-width: 380px;
  transform: translateX(120%);
  transition: transform .4s var(--ease)
}

.toast.show {
  transform: none
}

.toast .t-img {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--paper-2)
}

.toast .t-body {
  flex: 1
}

.toast .t-body b {
  font-size: 13.5px;
  color: #F4EFE4;
  display: block
}

.toast .t-body small {
  font-size: 12px;
  color: #B0A48F
}

.toast .t-check {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--celadon);
  display: grid;
  place-items: center;
  flex-shrink: 0
}

.toast .t-check svg {
  width: 17px;
  height: 17px;
  color: #fff
}

.toast .t-view {
  font-size: 12.5px;
  font-weight: 600;
  color: #E5C888;
  flex-shrink: 0
}

/* mobile bottom nav + sticky bar */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 110;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(32, 38, 58, .06)
}

.mobile-nav .mn-grid {
  display: flex;
  justify-content: space-around
}

.mobile-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 4px; */
  /* padding: 6px; */
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-50);
  position: relative
}

.mobile-nav a svg {
  width: 22px;
  height: 22px
}

.mobile-nav a.on {
  color: var(--brass-d)
}

.mobile-nav a .dot {
  position: absolute;
  top: 2px;
  right: calc(50% - 20px);
  min-width: 16px;
  height: 16px;
  background: var(--madder);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 9.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  padding: 0 4px
}

.sticky-buy {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 105;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(32, 38, 58, .08);
  gap: 12px;
  align-items: center
}

.sticky-buy .sb-price {
  flex-shrink: 0
}

.sticky-buy .sb-price .now {
  font-family: var(--font-d);
  font-size: 20px;
  font-weight: 600;
  display: block;
  line-height: 1
}

.sticky-buy .sb-price small {
  font-size: 11px;
  color: var(--ink-50)
}

.sticky-buy .btn {
  flex: 1;
  height: 50px
}

/* empty / loading states */
.empty-state {
  text-align: center;
  padding: 70px 20px;
  max-width: 420px;
  margin: 0 auto
}

.empty-state .es-ic {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--paper-2);
  display: grid;
  place-items: center;
  color: var(--ink-30)
}

.empty-state .es-ic svg {
  width: 36px;
  height: 36px
}

.empty-state h3 {
  font-size: 22px;
  margin-bottom: 8px
}

.empty-state p {
  color: var(--ink-50);
  margin-bottom: 22px
}

.skeleton {
  background: linear-gradient(100deg, var(--paper-2) 30%, var(--surface) 50%, var(--paper-2) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-md)
}

@keyframes shimmer {
  to {
    background-position: -200% 0
  }
}

/* section index tag on major home blocks */
.blk-index {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px
}

.blk-index .no {
  font-family: var(--font-d);
  font-style: italic;
  font-size: 14px;
  color: var(--brass-d)
}

.blk-index .rl {
  width: 40px;
  height: 1px;
  background: var(--line-2)
}

/* ============ RESPONSIVE ============ */
@media(min-width:1600px) {
  :root {
    --maxw: 1440px
  }
}

@media(max-width:1180px) {
  .grid.cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .ai-features {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .style-scroll {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .maker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:980px) {
  .wrap {
    padding: 0 22px
  }

  .hscroll {
    margin-left: -22px;
    margin-right: -22px;
    padding-left: 22px;
    padding-right: 22px
  }

  .top-strip .strip-links {
    display: none
  }

  /* .search{display:none} */
  .header-main {
    height: auto;
    gap: 15px;
    flex-wrap: wrap;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .search {
    display: block;
    width: 100%;
    order: 3;
  }

  /* .header-main{height:70px;gap:16px} */
  .acct-btn .who {
    display: none
  }

  .list-layout,
  .cart-layout,
  .checkout-layout,
  .acct-layout {
    grid-template-columns: minmax(0, 1fr)
  }

  .filters {
    display: none
  }

  .filter-mobile-btn {
    display: inline-flex
  }

  .summary,
  .gallery,
  .acct-side,
  .filters {
    position: static
  }

  .pdp-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px
  }

  .story-grid,
  .qv-grid,
  .shop-about,
  .coll-grid {
    grid-template-columns: 1fr
  }

  .collcard.feature {
    grid-row: auto
  }

  .story .art-side {
    min-height: 300px
  }

  .hero .slide {
    grid-template-columns: 1fr
  }

  .hero .slide .visual {
    display: none
  }

  .hero .slide .copy {
    padding: 40px 28px
  }

  .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .cat-grid .big {
    grid-column: span 2;
    grid-row: auto
  }

  .hero-stats .wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .hero-stats .st:nth-child(2) {
    border-right: none
  }

  .trust .wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .foot-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
  }

  .acct-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .sticky-buy {
    display: flex
  }

  .pdp {
    padding-bottom: 90px
  }
}

/* ===== Mobile View Makers Slider ===== */
@media (max-width: 768px) {
  .makers-grid {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 20px;
    scrollbar-width: none;

    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .makers-grid::-webkit-scrollbar {
    display: none;
  }

  .makers-grid>.maker-card {
    flex: 0 0 280px !important;
    scroll-snap-align: center;
    height: auto;
  }
}

@media(max-width:680px) {
  .wrap {
    padding: 0 10px
  }

  .hscroll {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px
  }

  .hscroll>* {
    flex: 0 0 260px
  }

  .ai-inner {
    padding: 26px 18px
  }

  .ai-input {
    padding: 6px 6px 6px 14px;
    gap: 8px
  }

  .ai-input .go-ai {
    padding: 0 15px
  }

  .toast {
    transform: translateY(140%)
  }

  .pagination {
    flex-wrap: wrap;
    gap: 5px
  }

  .pagination button {
    min-width: 40px;
    height: 40px;
    padding: 0 9px
  }

  .mobile-nav {
    display: block;
  }

  /* .mobile-nav{width:100%;} */
  body {
    padding-bottom: 64px
  }

  .grid.cols-4,
  .grid.cols-3,
  .grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px
  }

  .maker-grid,
  .ai-features,
  .style-scroll {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
  }

  .section {
    padding-top: 52px;
    padding-bottom: 52px
  }

  .sec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px
  }

  .sec-head h2 {
    font-size: 27px
  }

  .hero-stats .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
  }

  .assurances,
  .addr-grid,
  .acct-cards,
  .foot-grid,
  .story-facts,
  .ai-results {
    grid-template-columns: 1fr
  }

  .field.full {
    grid-column: auto
  }

  .trust .wrap {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 26px 16px
  }

  .newsletter .wrap {
    flex-direction: column;
    align-items: flex-start
  }

  .nl-form input {
    width: 100%
  }

  .nl-form {
    width: 100%
  }

  .buy-actions {
    flex-direction: column
  }

  .cart-item {
    grid-template-columns: 72px 1fr
  }

  .cart-item .ci-img {
    width: 72px;
    height: 72px
  }

  .cart-item .ci-right {
    grid-column: span 2;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--line);
    padding-top: 14px;
    margin-top: 2px
  }

  .pcard .made-by,
  .pcard .ship {
    display: none
  }

  .pcard .body {
    padding: 5px 5px 5px;
    gap: 2px
  }

  .pcard h3.p-title {
    font-size: 12.5px
  }

  .pcard .price {
    font-size: 17px
  }

  .modal {
    max-width: 100%
  }

  .auth-head,
  .auth-tabs,
  .auth-body {
    padding-left: 24px;
    padding-right: 24px
  }

  .auth-tabs {
    margin-left: 24px;
    margin-right: 24px
  }

  .qv-info {
    padding: 24px
  }

  .shop-tabs button,
  .tab-strip button {
    padding: 14px
  }

  .steps .step .lbl {
    display: none
  }

  .steps .step {
    flex: 0 0 auto
  }

  .steps {
    justify-content: space-between
  }

  .toast {
    left: 16px;
    right: 16px;
    bottom: 76px;
    min-width: 0
  }

  .toast-wrap {
    left: 0;
    right: 0;
    bottom: 0;
    align-items: stretch;
    padding: 0 16px
  }

  /* compact mobile header — prevents horizontal overflow on phones */
  .header-main {
    gap: 1px
  }

  .logo {
    min-width: 0
  }

  .logo .tag {
    display: none
  }

  .logo .name {
    font-size: 21px
  }

  .logo .mark {
    width: 32px;
    height: 32px
  }

  .header-actions {
    gap: 6px
  }

  .header-actions .iconbtn {
    width: 32px;
    height: 32px
  }

  .header-actions .iconbtn svg {
    width: 19px;
    height: 19px
  }

  .header-actions .iconbtn[aria-label="Explore"] {
    display: none
  }

  .header-actions {
    margin-left: auto;
  }

  .acct-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    gap: 0
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important
  }

  .hero-dots button.active::after {
    animation: none;
    transform: scaleX(1)
  }
}

/* ================= ARTHUBLY — MOTION & EDITORIAL POLISH ================= */
/* soften the "boxes": cards float on the page instead of bordered tiles */
.pcard,
.makercard {
  border-color: transparent;
  box-shadow: 0 3px 14px rgba(25, 30, 46, .06)
}

.pcard:hover,
.makercard:hover {
  border-color: transparent
}


/* after */
.pcard .media:hover .img {
  transform: scale(1.05)
}

.pcard .media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--ease);
  background: linear-gradient(180deg, transparent 55%, rgba(25, 30, 46, .10))
}

.pcard:hover .media::after {
  opacity: 1
}

/* headings: a touch more editorial presence */
.sec-head h2 {
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -.02em
}

.sec-link svg {
  transition: transform .3s var(--ease)
}

.sec-link:hover svg {
  transform: translateX(5px)
}

/* wishlist heart pop */
@keyframes heartpop {
  0% {
    transform: scale(1)
  }

  40% {
    transform: scale(1.35)
  }

  70% {
    transform: scale(.9)
  }

  100% {
    transform: scale(1)
  }
}

.fav.on svg {
  animation: heartpop .4s var(--ease)
}

/* handmade-paper grain (very subtle) */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}

@keyframes kenburns {
  from {
    transform: scale(1.09)
  }

  to {
    transform: scale(1.005)
  }
}

@media (prefers-reduced-motion: no-preference) {

  /* scroll reveal — blocks */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--ease), transform .7s var(--ease)
  }

  .reveal.in {
    opacity: 1;
    transform: none;
    margin: 20px;
  }

  /* scroll reveal — staggered groups (grids / carousels) */
  .reveal-group>* {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s var(--ease), transform .6s var(--ease)
  }

  .reveal-group.in>* {
    opacity: 1;
    transform: none
  }

  .reveal-group.in>*:nth-child(1) {
    transition-delay: .03s;
    /* margin-bottom: 20px; */
  }

  .reveal-group.in>*:nth-child(2) {
    transition-delay: .09s
  }

  .reveal-group.in>*:nth-child(3) {
    transition-delay: .15s
  }

  .reveal-group.in>*:nth-child(4) {
    transition-delay: .21s
  }

  .reveal-group.in>*:nth-child(5) {
    transition-delay: .27s
  }

  .reveal-group.in>*:nth-child(6) {
    transition-delay: .33s
  }

  .reveal-group.in>*:nth-child(7) {
    transition-delay: .39s
  }

  .reveal-group.in>*:nth-child(8) {
    transition-delay: .45s
  }

  .reveal-group.in>*:nth-child(n+9) {
    transition-delay: .5s
  }

  /* hero ken burns */
  .hero .slide.active .visual .art {
    animation: kenburns 8s var(--ease) both
  }
}

/* ================= ARTHUBLY — EDITORIAL HOME (v2) ================= */
/* Rhythm via spacing + full-bleed bands, not boxes. Uses existing tokens. */
.home-v2 .ed {
  padding-block: clamp(40px, 8vw, 40px);
  position: relative
}

.home-v2 .ed .wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(14px, 4vw, 40px)
}

/* alternating paper tones for scroll rhythm */
.home-v2 .ed-cats {
  background: var(--paper)
}

.home-v2 .ed-shelf {
  background: var(--paper-2, #EDE6D8)
}

.home-v2 .ed-ai {
  background: var(--paper)
}

.home-v2 .ed-styles {
  background: var(--panel, #EAE2D2)
}

.home-v2 .ed-makers {
  background: var(--paper)
}

.home-v2 .ed-coll {
  background: var(--paper-2, #EDE6D8)
}

.home-v2 .ed-shelf--alt {
  background: var(--panel, #EAE2D2)
}

/* premium hairline divider between light bands */
.home-v2 .ed+.ed::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, 86vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(25, 30, 46, .14), transparent)
}

/* ---- editorial headings ---- */
.home-v2 .ed-head {
  margin-bottom: clamp(30px, 4vw, 54px)
}

.home-v2 .ed-head .idx {
  font-family: var(--font-d);
  font-style: italic;
  font-size: 15px;
  color: var(--brass-d, #8a5f24);
  opacity: .8;
  display: block;
  margin-bottom: 10px
}

.home-v2 .ed-title {
  font-size: clamp(32px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -.025em
}

.home-v2 .ed-title em {
  font-style: italic;
  color: var(--brass-d, #8a5f24)
}

.home-v2 .ed-head--split {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 32px;
  align-items: end
}

.home-v2 .ed-head--split .rhs {
  padding-bottom: 6px
}

.home-v2 .ed-head--split .rhs p {
  color: var(--ink-70);
  max-width: 420px;
  margin-bottom: 16px;
  line-height: 1.6
}

.home-v2 .ed-head--center {
  text-align: center;
  max-width: 720px;
  margin-inline: auto
}

.home-v2 .ed-head--center .eyebrow::before,
.home-v2 .ed-head--center .eyebrow::after {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--brass);
  vertical-align: middle;
  margin: 0 12px;
  opacity: .6
}

/* ---- 01 categories: asymmetric mosaic ---- */
.home-v2 .cat-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 220px;
  gap: 16px
}

.home-v2 .cat-mosaic .catcard {
  min-height: 0;
  height: 100%
}

.home-v2 .cat-mosaic .catcard:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2
}

.home-v2 .cat-mosaic .catcard:nth-child(6) {
  grid-column: span 2
}

.home-v2 .cat-mosaic .catcard {
  border-radius: var(--r-lg)
}

/* ---- offset shelves: heading + full-bleed rail ---- */
.home-v2 .ed-shelf {
  padding-block: clamp(56px, 7vw, 60px);
  overflow: hidden
}

.home-v2 .shelf-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 30px;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px)
}

.home-v2 .shelf-rail {
  padding-inline: clamp(20px, 4vw, 40px);
  max-width: var(--maxw);
  margin-inline: auto
}

.home-v2 .bleed-rail {
  gap: 22px
}

.home-v2 .ed-shelf--alt .shelf-head {
  flex-direction: row-reverse
}

.home-v2 .ed-shelf--alt .shelf-head .lhs {
  text-align: right
}

/* ---- 03 split story (full-bleed dark) ---- */
.home-v2 .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: min(80vh, 620px)
}

.home-v2 .split-dark {
  background: var(--ink, #191E2E);
  color: #F1EADF
}

.home-v2 .split-media {
  position: relative;
  overflow: hidden;
  min-height: 340px
}

.home-v2 .split-media .art {
  position: absolute;
  inset: 0
}

.home-v2 .split-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(25, 30, 46, .35))
}

.home-v2 .split-tag {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  font-family: var(--font-d);
  font-style: italic;
  font-size: 14px;
  color: #F1EADF;
  background: rgba(25, 30, 46, .5);
  backdrop-filter: blur(4px);
  padding: 8px 14px;
  border-radius: var(--r-pill, 999px)
}

.home-v2 .split-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 90px)
}

.home-v2 .split-copy .eyebrow {
  color: var(--brass-l, #E5C888)
}

.home-v2 .split-copy .ed-title {
  color: #FBF6EC
}

.home-v2 .split-copy .ed-title em {
  color: var(--brass-l, #E5C888)
}

.home-v2 .split-copy>p {
  color: #C9BFAE;
  max-width: 460px;
  margin: 18px 0 26px;
  line-height: 1.7
}

.home-v2 .split-points {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px
}

.home-v2 .split-points .sp {
  padding-left: 18px;
  border-left: 2px solid rgba(229, 200, 136, .5)
}

.home-v2 .split-points .sp b {
  font-family: var(--font-d);
  font-weight: 600;
  color: #F1EADF;
  display: block
}

.home-v2 .split-points .sp small {
  color: #9F9585;
  font-size: 12.5px
}

.home-v2 .split-copy .btn {
  align-self: flex-start
}

/* ---- 04 AI floating panel ---- */
.home-v2 .ed-ai .ai-block {
  margin-block: 0
}

/* ---- 05 styles full-bleed rail ---- */
.home-v2 .ed-styles {
  overflow: hidden
}

.home-v2 .style-rail {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px)
}

.home-v2 .ed-styles .style-scroll {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  grid-template-columns: none;
  padding-bottom: 6px
}

.home-v2 .ed-styles .style-scroll::-webkit-scrollbar {
  display: none
}

.home-v2 .ed-styles .style-scroll>* {
  flex: 0 0 clamp(230px, 26vw, 300px);
  scroll-snap-align: start
}

/* ---- 06 pull quote ---- */
.home-v2 .pullquote {
  padding-block: clamp(70px, 9vw, 130px);
  background: var(--paper);
  text-align: center;
  position: relative
}

.home-v2 .pullquote .wrap {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: 24px
}

.home-v2 .pq-mark {
  width: 44px;
  height: 44px;
  color: var(--brass);
  opacity: .55;
  margin-bottom: 18px
}

.home-v2 .pullquote blockquote {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 auto;
  max-width: 20ch
}

.home-v2 .pullquote blockquote em {
  font-style: italic;
  color: var(--brass-d, #8a5f24)
}

.home-v2 .pq-by {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px
}

.home-v2 .pq-av {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  border: 2px solid var(--brass)
}

.home-v2 .pq-by b {
  font-family: var(--font-d);
  display: block;
  color: var(--ink)
}

.home-v2 .pq-by small {
  color: var(--ink-50);
  font-size: 12.5px
}

/* ---- 07 makers: asymmetric offset rows ---- */
.home-v2 .ed-makers .maker-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px
}

.home-v2 .ed-makers .maker-grid>*:nth-child(even) {
  transform: translateY(26px)
}

/* ---- 08 collections: magazine collage ---- */
.home-v2 .coll-collage {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 200px;
  gap: 16px
}

.home-v2 .coll-collage .collcard {
  min-height: 0;
  height: 100%;
  border-radius: var(--r-lg)
}

.home-v2 .coll-collage .collcard:nth-child(1) {
  grid-column: span 3;
  grid-row: span 2
}

.home-v2 .coll-collage .collcard:nth-child(2) {
  grid-column: span 3
}

.home-v2 .coll-collage .collcard:nth-child(3) {
  grid-column: span 3
}

.home-v2 .coll-collage .collcard:nth-child(4) {
  grid-column: span 2;
  grid-row: span 1
}

.home-v2 .coll-collage .collcard:nth-child(5) {
  grid-column: span 4
}

.home-v2 .coll-collage .collcard.feature {
  grid-row: span 2
}

/* ---- responsive ---- */
@media(max-width:980px) {
  .home-v2 .ed-head--split {
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start
  }

  .home-v2 .split {
    grid-template-columns: 1fr
  }

  .home-v2 .split-media {
    min-height: 300px
  }

  .home-v2 .cat-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 180px
  }

  .home-v2 .cat-mosaic .catcard:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2
  }

  .home-v2 .cat-mosaic .catcard:nth-child(6) {
    grid-column: span 2
  }

  .home-v2 .coll-collage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 200px
  }

  .home-v2 .coll-collage .collcard:nth-child(n) {
    grid-column: span 2
  }

  .home-v2 .coll-collage .collcard.feature,
  .home-v2 .coll-collage .collcard:nth-child(1) {
    grid-row: span 1
  }

  .home-v2 .ed-makers .maker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .home-v2 .ed-makers .maker-grid>*:nth-child(even) {
    transform: none
  }

  .home-v2 .ed-shelf--alt .shelf-head {
    flex-direction: row
  }

  .home-v2 .ed-shelf--alt .shelf-head .lhs {
    text-align: left
  }
}

@media(max-width:680px) {
  .home-v2 .cat-mosaic {
    grid-template-columns: 1fr;
    grid-auto-rows: 200px
  }

  .home-v2 .cat-mosaic .catcard:nth-child(n) {
    grid-column: span 1;
    grid-row: span 1
  }

  .home-v2 .cat-mosaic .catcard:nth-child(1) {
    grid-row: span 1
  }

  .home-v2 .coll-collage {
    grid-template-columns: 1fr;
    grid-auto-rows: 210px
  }

  .home-v2 .ed-makers .maker-grid {
    grid-template-columns: 1fr
  }

  .home-v2 .split-copy {
    padding: 34px 20px
  }

  .home-v2 .bleed-rail>* {
    flex: 0 0 78vw
  }

  .home-v2 .ed-styles .style-scroll>* {
    flex: 0 0 64vw
  }
}

/* collections collage — legibility on short tiles */
.home-v2 .coll-collage .collcard::after {
  background: linear-gradient(180deg, rgba(20, 24, 38, .28) 0%, rgba(20, 24, 38, .5) 55%, rgba(20, 24, 38, .88) 100%)
}

.home-v2 .coll-collage .collcard:not(.feature) .previews {
  display: none
}

.home-v2 .coll-collage .collcard:not(.feature) p {
  display: none
}

.home-v2 .coll-collage .collcard:not(.feature) .col-body {
  padding: 22px
}

.home-v2 .coll-collage .collcard:not(.feature) h3 {
  font-size: 21px
}

.home-v2 .coll-collage .collcard:not(.feature) .col-cta {
  margin-top: 12px
}

@media(max-width:680px) {
  .home-v2 .coll-collage .collcard:not(.feature) p {
    display: block
  }
}

/* collage cards need their own stacking context so negative-z art stays inside the tile */
.home-v2 .coll-collage .collcard,
.home-v2 .cat-mosaic .catcard {
  isolation: isolate
}

/* ---- primary nav (dynamic $frontMenus) with dropdowns — Arthubly themed ---- */
.a-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex-wrap: nowrap;
  /* Items ko aage wali line par jaane se rokega */
  overflow-x: auto;
  /* Horizontal scroll dega */
  scrollbar-width: none;
  /* Firefox me scrollbar gayab karne ke liye */
}

/* Chrome/Safari ke liye scrollbar chupane ke liye */
.a-nav::-webkit-scrollbar {
  display: none;
}

.a-nav>li {
  position: relative;
  list-style: none;
  flex: 0 0 auto;
  /* Yeh add karne se words compress (shrink) nahi honge */
}

.a-nav>li>a {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 52px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-70);
  white-space: nowrap;
  transition: color .18s;
  position: relative
}

.a-nav>li>a:hover,
.a-nav>li.active>a {
  color: var(--ink)
}

.a-nav>li>a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease)
}

.a-nav>li:hover>a::after,
.a-nav>li.active>a::after {
  transform: scaleX(1)
}

.a-nav .caret {
  width: 11px;
  height: 11px;
  opacity: .55;
  transition: transform .25s var(--ease), opacity .2s
}

.a-nav>li:hover>a .caret {
  opacity: .9;
  transform: translateY(1px) rotate(180deg)
}

/* ---- flyout panel ---- */
.a-nav ul {
  position: absolute;
  top: 100%;
  left: -4px;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2.5px solid var(--brass);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 10px;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index: 140
}

.a-nav li:hover>ul {
  opacity: 1;
  visibility: visible;
  transform: none
}

.a-nav ul li {
  position: relative
}

.a-nav ul li+li {
  margin-top: 2px
}

.a-nav ul a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-70);
  transition: background .15s, color .15s, padding-left .15s
}

.a-nav ul a:hover {
  background: var(--brass-wash);
  color: var(--brass-d);
  padding-left: 16px
}

.a-nav ul a .caret {
  opacity: .45
}

.a-nav ul a:hover .caret {
  opacity: .8
}

/* ---- third level: flies out to the right ---- */
.a-nav ul ul {
  top: -11px;
  left: calc(100% + 6px);
  border-radius: var(--r-lg)
}

/* small invisible bridge so the mouse can travel li -> nested ul without the panel closing */
.a-nav ul li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 10px;
  height: 100%
}

/* Hamburger icon left of logo — mobile only */
.logo-menu-btn {
  display: none;
}

@media (max-width: 1080px) {
  .logo-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 1.5px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    margin-right: 5px;
  }

  .logo-menu-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* Hamburger left of Home in catnav — mobile only */
.catnav-menu-btn {
  display: none;
}

@media (max-width: 1080px) {
  .catnav-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 1.5px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    margin-right: 4px;
  }

  .catnav-menu-btn svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 1080px) {
  .a-nav {
    display: none
  }

  .a-nav:has(> li.open),
  .catnav .wrap:has(li.open) {
    overflow: visible !important;
  }
}

/* ---- cart dropdown (Bootstrap toggle kept, Arthubly styling) ---- */
.dropdown {
  position: relative
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  min-width: 290px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 16px;
  z-index: 150;
  display: none
}

.dropdown-menu.show {
  display: block
}

.dropdown-menu-right {
  right: 0;
  left: auto
}

.dropdown-cart-products {
  max-height: 340px;
  overflow-y: auto;
  overflow-x: hidden
}

.dropdown-cart-products .product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line)
}

.dropdown-cart-products .product-cart-details {
  flex: 1;
  min-width: 0
}

.dropdown-cart-products .product-title {
  font-family: var(--font-d);
  font-size: 14px;
  margin: 0 0 3px;
  line-height: 1.2
}

.dropdown-cart-products .product-title a {
  color: var(--ink)
}

.dropdown-cart-products .cart-product-info {
  font-size: 12.5px;
  color: var(--ink-50, #8a8172)
}

.dropdown-cart-products .product-image-container {
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--line)
}

.dropdown-cart-products .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.dropdown-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-family: var(--font-d);
  font-weight: 600
}

.dropdown-cart-total .cart-total-price {
  color: var(--brass-d, #8a5f24)
}

.dropdown-cart-action {
  display: flex;
  gap: 8px
}

.dropdown-cart-action .btn {
  flex: 1;
  justify-content: center
}

/* ---- flash messages ---- */
.a-flash {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1200;
  min-width: 300px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.a-flash .alert {
  padding: 14px 40px 14px 16px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  position: relative;
  font-size: 13.5px;
  border: 1px solid transparent
}

.a-flash .alert-success {
  background: #EAF4EC;
  border-color: #cfe6d5;
  color: #2f6b45
}

.a-flash .alert-danger {
  background: #FBECEA;
  border-color: #f2ccc7;
  color: #a23b30
}

.a-flash .close {
  position: absolute;
  right: 10px;
  top: 10px;
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  color: inherit;
  opacity: .7
}

/* ---- Bootstrap modal display (no bootstrap css) — Arthubly panels ---- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  overflow-y: auto;
  padding: 20px
}

.modal.show {
  display: block
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(20, 24, 38, .55);
  backdrop-filter: blur(3px)
}

.modal-backdrop.fade {
  opacity: 0;
  transition: opacity .25s
}

.modal-backdrop.show {
  opacity: 1
}

.modal-dialog {
  max-width: 560px;
  margin: 5vh auto;
  position: relative;
  z-index: 1051
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 10vh)
}

.modal-lg {
  max-width: 920px
}

.modal-content {
  width: 100%;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden
}

.modal-body {
  padding: 26px
}

.modal .close {
  border: none;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: var(--ink);
  opacity: .7
}

.modal.fade .modal-dialog {
  transform: translateY(14px);
  transition: transform .25s
}

.modal.show .modal-dialog {
  transform: none
}

body.modal-open {
  overflow: hidden
}

/* ---- sign-in modal tabs (Bootstrap nav-pills kept) ---- */
.form-tab .nav-pills {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px
}

.form-tab .nav-item {
  flex: 1
}

.form-tab .nav-link {
  display: block;
  text-align: center;
  padding: 11px;
  border-radius: var(--r-pill);
  font-family: var(--font-d);
  font-weight: 600;
  color: var(--ink-50, #8a8172);
  background: var(--paper);
  cursor: pointer
}

.form-tab .nav-link.active {
  background: var(--ink);
  color: #F4EFE4
}

.tab-content>.tab-pane {
  display: none
}

.tab-content>.tab-pane.active.show {
  display: block
}

.form-tab .form-group {
  margin-bottom: 14px
}

.form-tab label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-70, #4a5064);
  display: block;
  margin-bottom: 6px
}

.form-tab .form-control {
  width: 100%;
  height: 46px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 0 14px;
  background: var(--paper);
  outline: none;
  font-size: 14px
}

.form-tab .form-control:focus {
  border-color: var(--brass)
}

/* ---- mobile slide-in drawer (dynamic menu) ---- */
.mobile-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(86vw, 360px);
  background: var(--surface);
  z-index: 1300;
  transform: translateX(-102%);
  transition: transform .32s var(--ease, cubic-bezier(.4, 0, .2, 1));
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 60px rgba(20, 24, 38, .28)
}

.mobile-drawer.open {
  transform: none
}

.mobile-drawer::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: .3s;
  pointer-events: none
}

.mobile-drawer.open::after {
  opacity: 1;
  pointer-events: auto;
  width: 100vw
}

.md-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px;
  border-bottom: 1px solid var(--line)
}

.md-body {
  overflow-y: auto;
  padding: 8px 6px 24px;
  flex: 1
}

.mm {
  list-style: none;
  margin: 0;
  padding: 0
}

.mm .mm-row {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.mm a {
  display: block;
  padding: 13px 16px;
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
  flex: 1
}

.mm .mm-toggle {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-50, #8a8172)
}

.mm .mm-toggle svg {
  transition: transform .25s
}

.mm .mm-has.exp>.mm-row .mm-toggle svg {
  transform: rotate(180deg)
}

.mm ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 12px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease
}

.mm .mm-has.exp>ul {
  max-height: 800px
}

.mm ul a {
  font-size: 14px;
  color: var(--ink-70, #4a5064);
  padding: 10px 16px
}

body.menu-lock {
  overflow: hidden
}

@media(min-width:1081px) {
  .mobile-drawer {
    display: none
  }
}

/* ---- back to top ---- */
#backTop {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 200;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: #F4EFE4;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: .3s;
  box-shadow: var(--sh-3)
}

#backTop.show {
  opacity: 1;
  transform: none;
  pointer-events: auto
}

@media(max-width:1080px) {
  #backTop {
    bottom: calc(74px + env(safe-area-inset-bottom, 0px))
  }
}

/* ---- live search results dropdown (their AJAX) ---- */
.live-search-results {
  border-radius: 0 0 var(--r-md) var(--r-md) !important;
  border-top: 2px solid var(--brass) !important;
  border: 1px solid var(--line);
  font-family: var(--font-b)
}

/* ---- header scrolled shadow ---- */
.site-header.scrolled {
  box-shadow: 0 6px 24px rgba(20, 24, 38, .08)
}

/* ================= ARTHUBLY — account / order / detail pages ================= */
.acct-main .ac-head h1 {
  font-family: var(--font-d)
}

.page-hero {
  padding: 34px 0 6px
}

.page-hero h1 {
  font-size: clamp(30px, 4.4vw, 46px)
}

.page-hero .eyebrow {
  margin-bottom: 10px
}

/* generic surface panel (order details, cards) */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 18px
}

.panel .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line)
}

.panel .panel-head h4 {
  font-size: 16px;
  font-family: var(--font-d)
}

.panel .panel-body {
  padding: 20px
}

.panel .panel-body.p0 {
  padding: 0
}

.kv {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--ink-70)
}

.kv b {
  color: var(--ink);
  font-weight: 600
}

/* data table (order items, returns, orders) */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px
}

.data-table thead th {
  text-align: left;
  font-family: var(--font-b);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-50);
  font-weight: 600;
  padding: 14px 20px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line)
}

.data-table tbody td {
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-70);
  vertical-align: middle
}

.data-table tbody tr:last-child td {
  border-bottom: none
}

.data-table td b,
.data-table td strong {
  color: var(--ink);
  font-weight: 600
}

.data-table tfoot th {
  padding: 15px 20px;
  font-family: var(--font-d);
  font-size: 16px;
  text-align: right
}

.data-table .r {
  text-align: right
}

.data-table .c {
  text-align: center
}

.data-table a {
  color: var(--brass-d);
  font-weight: 600
}

/* status pills (order + return statuses) */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap
}

.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .9
}

.sp-pending {
  background: var(--brass-wash);
  color: var(--brass-d)
}

.sp-processing {
  background: #E9EEF4;
  color: #3E5C86
}

.sp-shipped {
  background: #E7EDF6;
  color: #2F4E86
}

.sp-delivered,
.sp-approved,
.sp-paid {
  background: var(--celadon-wash);
  color: #41522F
}

.sp-cancelled,
.sp-rejected,
.sp-failed {
  background: #FBE9E7;
  color: #A23B30
}

.sp-returns,
.sp-secondary {
  background: var(--paper-2);
  color: var(--ink-70)
}

/* wishlist rows reuse .cart-item; add stock + actions */
.wish-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end
}

.wish-actions .btn {
  white-space: nowrap
}

.stock-in {
  color: var(--celadon);
  font-weight: 600;
  font-size: 13px
}

.stock-out {
  color: var(--madder);
  font-weight: 600;
  font-size: 13px
}

/* cart qty stepper input */
.qty input {
  width: 46px;
  height: 100%;
  text-align: center;
  border: none;
  background: none;
  font-weight: 600;
  color: var(--ink);
  font-family: var(--font-d);
  -moz-appearance: textfield
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.ci-price {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap
}

.ci-old {
  color: var(--ink-40, #9a917f);
  text-decoration: line-through;
  font-size: 13px;
  margin-right: 6px
}

.ci-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-40, #9a917f);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px
}

.ci-remove:hover {
  color: var(--madder)
}

.ci-meta {
  font-size: 12.5px;
  color: var(--ink-50);
  margin-top: 4px
}

/* profile form */
.profile-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 620px
}

.profile-form .field.full {
  grid-column: span 2
}

@media(max-width:560px) {
  .profile-form {
    grid-template-columns: 1fr
  }

  .profile-form .field.full {
    grid-column: span 1
  }
}

/* about page */
.about-hero {
  padding: clamp(50px, 7vw, 96px) 0;
  text-align: center;
  max-width: 760px;
  margin: 0 auto
}

.about-hero h1 {
  font-size: clamp(34px, 5.5vw, 60px);
  letter-spacing: -.02em
}

.about-hero p {
  color: var(--ink-70);
  font-size: 17px;
  line-height: 1.7;
  margin-top: 18px
}

/* modal header/footer (return modal etc.) */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line)
}

.modal-header .modal-title {
  font-family: var(--font-d);
  font-size: 17px;
  font-weight: 600;
  margin: 0
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--line)
}

.modal-lg .modal-body,
.modal-header+.modal-body {
  padding: 22px
}

.alert {
  font-size: 13.5px
}

/* ================= ARTHUBLY — product listing extras ================= */
/* real <img> inside pcard media */
.pcard .media img.img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* New / label chip */
.pcard .plabel {
  background: var(--celadon);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-pill)
}

.pcard .plabel.sale {
  background: var(--madder)
}

/* color dots (their JS targets .color-dot) */
.pcard .p-colors {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 1px
}

.pcard .color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  cursor: pointer;
  transition: .15s;
  display: inline-block;
  flex-shrink: 0
}

.pcard .color-dot:hover {
  transform: scale(1.14)
}

.pcard .color-dot.active {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink)
}

.pcard .p-cat {
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-50);
  font-weight: 600
}

.pcard .p-cat a {
  color: inherit
}

.pcard h3.p-title a {
  color: var(--ink)
}

.pcard h3.p-title a:hover {
  color: var(--brass-d)
}

/* Bootstrap paginator -> Arthubly */
.pagination {
  list-style: none;
  padding: 0
}

.pagination .page-item {
  list-style: none
}

.pagination .page-link {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--surface);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  transition: .2s
}

.pagination .page-link:hover {
  border-color: var(--ink)
}

.pagination .page-item.active .page-link {
  background: var(--ink);
  color: #F4EFE4;
  border-color: var(--ink)
}

.pagination .page-item.disabled .page-link {
  opacity: .4;
  pointer-events: none
}

/* sort select (native) styled */
.sort-select {
  height: 44px;
  padding: 0 36px 0 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a8172' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center
}


.sort-select-custom {
  position: relative
}

.sort-select-custom svg {
  transition: transform .2s var(--ease)
}

.sort-select-custom.open svg {
  transform: rotate(180deg)
}

.sort-select-custom .sel-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 130px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2.5px solid var(--brass);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 0px;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 60
}

.sort-select-custom.open .sel-list {
  opacity: 1;
  visibility: visible;
  transform: none
}

.sel-list li {
  padding: 6px 5px;
  border-radius: var(--r-sm);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-70);
  cursor: pointer;
  transition: background .15s, color .15s
}

.sel-list li:hover {
  background: var(--brass-wash);
  color: var(--brass-d)
}

.sel-list li.active {
  color: var(--brass-d);
  font-weight: 700
}

.filter-mobile-btn {
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 5px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-weight: 600;
  font-size: 10.5px;
  cursor: pointer
}

.filter-mobile-btn svg {
  width: 16px;
  height: 16px
}

.filters-overlay {
  display: none
}

/* mobile: filters become a slide-in drawer */
@media(min-width:981px) {
  .filters-close {
    display: none
  }
}

@media(max-width:980px) {
  .list-layout {
    grid-template-columns: 1fr
  }

  .filters {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(87vw, 340px);
    background: var(--paper);
    z-index: 1300;
    transform: translateX(-102%);
    transition: transform .3s var(--ease, ease);
    overflow-y: auto;
    display: block !important;
    box-shadow: 0 0 60px rgba(20, 24, 38, .28);
    padding: 8px
  }

  .filters.open {
    transform: none
  }

  .filters-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20, 24, 38, .45);
    z-index: 1290;
    opacity: 0;
    visibility: hidden;
    transition: .3s
  }

  .filters-overlay.show {
    opacity: 1;
    visibility: visible
  }

  .filter-mobile-btn {
    display: inline-flex
  }

  .filters-close {
    display: flex
  }
}

/* ================= ARTHUBLY — categories page ================= */
.cat-mosaic-page {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 260px;
  gap: 18px
}

.cat-tile {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  color: #fff;
  text-decoration: none;
  background: var(--panel)
}

.cat-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .7s var(--ease)
}

.cat-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 24, 38, .05) 30%, rgba(20, 24, 38, .82))
}

.cat-tile:hover img {
  transform: scale(1.06)
}

.cat-tile .ct-body {
  padding: 24px;
  width: 100%
}

.cat-tile .ct-body small {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #E5C888;
  font-weight: 600
}

.cat-tile .ct-body h3 {
  color: #FBF6EC;
  font-size: 23px;
  margin: 6px 0 4px
}

.cat-tile .ct-body .shop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-weight: 600;
  font-size: 13px;
  color: #FBF6EC
}

.cat-tile .ct-body .shop svg {
  width: 15px;
  height: 15px;
  transition: transform .3s var(--ease)
}

.cat-tile:hover .ct-body .shop svg {
  transform: translateX(4px)
}

.cat-tile.big {
  grid-row: span 2
}

@media(max-width:900px) {
  .cat-mosaic-page {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px
  }

  .cat-tile.big {
    grid-row: span 1
  }
}

@media(max-width:560px) {
  .cat-mosaic-page {
    grid-template-columns: 1fr;
    grid-auto-rows: 200px
  }
}

/* ================= ARTHUBLY — bootstrap-compat + modal/popup fixes ================= */
/* form controls used by quick-view & sign-in modals (bootstrap classes, no BS css loaded) */
.form-control {
  width: 100%;
  height: 46px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 0 14px;
  background: var(--paper);
  outline: none;
  font-size: 14px;
  font-family: var(--font-b);
  color: var(--ink);
  transition: .15s
}

textarea.form-control {
  height: auto;
  padding: 12px 14px;
  min-height: 90px;
  resize: vertical
}

select.form-control {
  appearance: none;
  cursor: pointer;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a8172' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center
}

.form-control:focus {
  border-color: var(--brass)
}

.form-control-file {
  width: 100%;
  font-size: 13px
}

.form-group {
  margin-bottom: 14px
}

.form-group>label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-70);
  margin-bottom: 6px
}

.is-invalid {
  border-color: var(--madder) !important
}

.text-muted {
  color: var(--ink-50) !important
}

.text-danger {
  color: var(--madder) !important
}

.text-center {
  text-align: center
}

.d-block {
  display: block
}

.d-none {
  display: none
}

.mt-2 {
  margin-top: 8px
}

.mb-0 {
  margin-bottom: 0
}

.ml-4 {
  margin-left: 1rem
}

/* custom checkbox / radio (checkout, sign-in remember) */
.custom-control {
  position: relative;
  padding-left: 26px;
  margin: 6px 0;
  min-height: 20px
}

.custom-control-input {
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  opacity: 0;
  cursor: pointer
}

.custom-control-label {
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink-70)
}

.custom-control-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border: 1.6px solid var(--line-2);
  background: var(--paper);
  border-radius: 5px;
  transition: .15s
}

.custom-radio .custom-control-label::before {
  border-radius: 50%
}

.custom-control-input:checked~.custom-control-label::before {
  background: var(--brass);
  border-color: var(--brass)
}

.custom-control-input:checked~.custom-control-label::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 5px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg)
}

.custom-radio .custom-control-input:checked~.custom-control-label::after {
  left: 7px;
  top: 6px;
  width: 4px;
  height: 4px;
  border: none;
  background: #fff;
  border-radius: 50%;
  transform: none
}

/* bootstrap buttons used inside modals -> Arthubly */
.btn-block {
  display: flex;
  width: 100%;
  justify-content: center
}

.btn-outline-primary-2 {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line-2)
}

.btn-outline-primary-2:hover {
  background: var(--ink);
  color: #F4EFE4
}

.btn-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--surface);
  font-weight: 600;
  font-size: 13px;
  width: 100%
}

.form-choice {
  margin-top: 18px
}

.form-choice p {
  text-align: center;
  color: var(--ink-50);
  font-size: 13px;
  margin-bottom: 12px
}

.form-choice .row {
  display: flex;
  gap: 10px
}

.form-choice .col-sm-6 {
  flex: 1
}

/* hide header hamburger on desktop (a-nav already visible there) */
@media(min-width:1081px) {
  .header-actions [data-open-menu] {
    display: none
  }
}

/* ---- Magnific-popup (newsletter "Get 25% off") — was showing inline ---- */
.mfp-hide {
  display: none !important
}

.mfp-bg {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(20, 24, 38, .6);
  opacity: .98
}

.mfp-wrap {
  position: fixed;
  inset: 0;
  z-index: 1510;
  outline: none !important;
  -webkit-backface-visibility: hidden
}

.mfp-container {
  text-align: center;
  position: absolute;
  inset: 0;
  padding: 20px;
  box-sizing: border-box
}

.mfp-container::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle
}

.mfp-align-top .mfp-container::before {
  display: none
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1515;
  max-width: 560px;
  width: 100%
}

.mfp-close {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
  z-index: 1520
}

.mfp-close:hover {
  opacity: 1
}

.newsletter-popup-container .modal-content {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3)
}

/* ---- ensure bootstrap modals open cleanly & centered ---- */
.modal {
  -webkit-overflow-scrolling: touch
}

.modal.fade {
  opacity: 1
}

.modal-dialog {
  max-width: 560px;
  margin: 5vh auto
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 10vh)
}

.modal-lg {
  max-width: 920px
}

body.modal-open {
  overflow: hidden
}

.row {
  display: flex;
  flex-wrap: wrap
}

/* ================= ARTHUBLY — quick view modal layout ================= */
.qv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: start
}

.qv-left .qv-main {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--paper-2);
  display: block
}

.qv-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 2px 2px
}

.qv-thumbs .qv-thumb {
  width: 62px;
  height: 62px;
  object-fit: cover;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  cursor: pointer;
  flex-shrink: 0;
  transition: .15s
}

.qv-right {
  padding-top: 6px
}

.qv-right h3 {
  font-family: var(--font-d);
  font-size: 24px;
  line-height: 1.15;
  margin-bottom: 8px
}

.qv-right #qv-price {
  font-family: var(--font-d);
  font-size: 26px;
  font-weight: 600;
  color: var(--brass-d);
  margin-bottom: 12px
}

.qv-desc {
  color: var(--ink-70);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.qv-vars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

@media(max-width:720px) {
  .qv-grid {
    grid-template-columns: 1fr
  }

  .qv-left .qv-main {
    height: 300px
  }
}

/* fix: centered dialog was shrinking modal-lg — make it a normal block that fills its max-width */
.modal-dialog-centered {
  display: block;
  min-height: 0;
  margin: 5vh auto
}

.modal-lg {
  max-width: 920px
}

.modal-lg .modal-content,
.modal-content {
  width: 100%
}

@media(max-width:960px) {
  .modal-lg {
    max-width: 94vw
  }
}

/* ================= FIX: reset demo .modal (card) so Bootstrap .modal is a full overlay ================= */
.modal {
  background: transparent;
  border: 0;
  border-radius: 0;
  max-width: none;
  max-height: none;
  width: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: none;
  box-shadow: none
}

.modal-dialog {
  width: auto
}

.modal-lg {
  max-width: 920px
}

.modal-dialog-centered {
  display: block;
  min-height: 0;
  margin: 5vh auto
}

.modal-content {
  width: 100%
}

@media(max-width:960px) {
  .modal-lg {
    max-width: 94vw
  }
}

@media(max-width:600px) {

  .modal-dialog,
  .modal-dialog-centered {
    margin: 16px auto
  }
}

/* ================= ARTHUBLY — product details page (PDP) ================= */
.pdp-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
  margin-top: 6px
}

.pdp-pager {
  display: flex;
  gap: 6px;
  margin-left: auto
}

.pdp-pager a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  transition: .2s
}

.pdp-pager a:hover {
  border-color: var(--ink)
}

.pdp-pager a.disabled {
  opacity: .4;
  pointer-events: none
}

.pdp-pager a svg {
  width: 16px;
  height: 16px
}

/* gallery */
.pdp-gallery {
  position: sticky;
  top: 96px
}

.pdp-main {
  margin: 0;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line)
}

.pdp-main img#product-zoom {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  /* POORI image dikhe — crop nahi ho (lightbox jaisa) */
  object-fit: contain;
  background: var(--paper-2);
  display: block;
  /* native hover zoom */
  transform-origin: center center;
  transition: transform .18s ease-out;
  will-change: transform
}

/* desktop par hover karne par cursor batata hai ki zoom hoga */
@media (min-width: 1081px) {
  .pdp-main {
    cursor: zoom-in
  }

  .pdp-main.is-zooming {
    cursor: crosshair
  }
}

/* zoom chalte waqt arrows halke ho jayein, par clickable rahein */
.pdp-main.is-zooming .pdp-nav {
  opacity: .45
}

.pdp-main.is-zooming .pdp-nav:hover {
  opacity: 1
}

.pdp-main #btn-product-gallery {
  position: absolute;
  right: 14px;
  bottom: 14px;
  height: 44px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(251, 248, 242, .94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--sh-2);
  z-index: 30;
  transition: transform .2s var(--ease), background .2s var(--ease)
}

.pdp-main #btn-product-gallery:hover {
  background: #fff;
  transform: scale(1.04)
}

.pdp-main #btn-product-gallery svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto
}

.pdp-main .bpg-label {
  font: 600 13px/1 var(--font-b);
  white-space: nowrap
}

/* desktop par lens zoom pehle se hai — sirf icon dikhao */
@media (min-width: 1081px) {
  .pdp-main .bpg-label {
    display: none
  }

  .pdp-main #btn-product-gallery {
    width: 44px;
    padding: 0;
    justify-content: center
  }
}

/* ---------- pehli baar wala "Tap to zoom" hint ---------- */
.pdp-zoom-hint {
  position: absolute;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  z-index: 25;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: rgba(28, 32, 46, .84);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  font: 500 13px/1 var(--font-b);
  white-space: nowrap;
  pointer-events: none;
  animation: pdpHintIn .4s var(--ease)
}

.pdp-zoom-hint svg {
  width: 16px;
  height: 16px
}

.pdp-zoom-hint.show {
  display: inline-flex
}

.pdp-zoom-hint.fade {
  opacity: 0;
  transition: opacity .5s var(--ease)
}

@keyframes pdpHintIn {
  from {
    opacity: 0;
    transform: translate(-50%, 8px)
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0)
  }
}

/* main image prev/next arrows */
.pdp-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  box-shadow: var(--sh-1);
  opacity: .85;
  transition: .18s;
  z-index: 4
}

.pdp-nav:hover {
  opacity: 1;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14)
}

.pdp-nav svg {
  width: 18px;
  height: 18px
}

.pdp-nav-prev {
  left: 12px
}

.pdp-nav-next {
  right: 12px
}

/* zoomContainer (z-index 1) se hamesha upar rahein */
.pdp-nav,
.pdp-main #btn-product-gallery {
  z-index: 30 !important;
  pointer-events: auto !important
}

/* elevateZoom ke inline pixel sizes ko rokne ke liye overflow guards */
.pdp-gallery,
.pdp-main {
  max-width: 100%;
  overflow: hidden
}

.pdp-main img#product-zoom {
  max-width: 100% !important
}

/* ==========================================================
   ARROWS FIX
   elevateZoom .zoomContainer ko <body> me banata hai (figure ke andar
   nahi), isliye `.pdp-main .zoomContainer` wala selector kabhi match
   hi nahi karta tha. Uska z-index auto rehta tha aur DOM me baad me
   hone ki wajah se wo arrows ke UPAR paint hota tha — click use hi
   mil jata tha, button tak pahunchta hi nahi tha.
   Isliye ab GLOBAL selector se z-index set kiya hai.
   ========================================================== */
.zoomContainer,
.zoomLens,
.zoomWindowContainer,
.zoomWindow {
  display: none !important
}

.zoomContainer {
  z-index: 1 !important
}

.zoomLens {
  z-index: 2 !important
}

.zoomWindowContainer,
.zoomWindow {
  z-index: 2 !important
}

.pdp-main .zoomContainer {
  z-index: 1
}

.pdp-thumbs img {
  object-fit: contain !important;
  background: var(--paper-2)
}

.pdp-thumbs {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity
}

.pdp-thumbs::-webkit-scrollbar {
  display: none
}

.pdp-thumbs .product-gallery-item {
  width: 84px;
  height: 84px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1.5px solid var(--line);
  cursor: pointer;
  flex-shrink: 0;
  transition: .15s;
  background: var(--paper-2);
  display: block;
  scroll-snap-align: start
}

.pdp-thumbs .product-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.pdp-thumbs .product-gallery-item:hover {
  border-color: var(--line-2)
}

.pdp-thumbs .product-gallery-item.active {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px var(--brass-wash)
}

/* info */
.pdp-info .pdp-cat {
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-50);
  font-weight: 600;
  margin-bottom: 10px
}

.pdp-info h1 {
  font-family: var(--font-d);
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin-bottom: 12px
}

.pdp-ratings {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px
}

.ratings {
  position: relative;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 2px;
  font-family: Arial, sans-serif
}

.ratings::before {
  content: "★★★★★";
  color: var(--line-2)
}

.ratings .ratings-val {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap
}

.ratings .ratings-val::before {
  content: "★★★★★";
  color: var(--brass)
}

.pdp-ratings .ratings-text {
  font-size: 13px;
  color: var(--ink-50);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 1px
}

.pdp-price {
  font-family: var(--font-d);
  font-size: 28px;
  font-weight: 600;
  color: var(--brass-d);
  margin-bottom: 18px
}

.pdp-short {
  color: var(--ink-70);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line)
}

.pdp-row {
  margin-bottom: 22px
}

.pdp-row>label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-70);
  margin-bottom: 10px
}

.pdp-swatches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.pdp-swatches .color-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  cursor: pointer;
  position: relative;
  transition: .15s;
  display: inline-block
}

.pdp-swatches .color-swatch .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0)
}

.pdp-swatches .color-swatch:hover {
  transform: scale(1.1)
}

.pdp-swatches .color-swatch.active {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink)
}

.pdp-size-row {
  display: flex;
  align-items: flex-end;
  gap: 14px
}

.pdp-size-row .select-custom {
  flex: 1;
  max-width: 260px
}

.pdp-size-row .size-guide {
  font-size: 13px;
  color: var(--ink-50);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  padding-bottom: 12px
}

.pdp-qty-cart {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 26px 0 18px;
  flex-wrap: wrap
}

.pdp-qty {
  width: 130px
}

.pdp-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
}

.pdp-actions #add-to-cart-btn {
  flex: 1;
  width: auto;
  white-space: nowrap;
}

/* Wishlist button ko shrink hone se rokne ke liye */
.pdp-actions .btn-wishlist-pdp {
  flex-shrink: 0;
}

.btn-wishlist-pdp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  padding: 0 22px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: .2s
}

.btn-wishlist-pdp:hover {
  border-color: var(--madder);
  color: var(--madder)
}

.btn-wishlist-pdp.on {
  border-color: var(--madder);
  color: var(--madder)
}

.btn-wishlist-pdp svg {
  width: 18px;
  height: 18px
}

/* ===== Mobile: Add to bag + Wishlist as one fixed row at the bottom (stays fixed while scrolling) ===== */
@media(max-width:680px) {
  .pdp {
    padding-bottom: 92px
  }

  .pdp-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    margin: 0;
    flex-wrap: nowrap;
    gap: 10px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 20px rgba(32, 38, 58, .06)
  }

  .pdp-actions #add-to-cart-btn {
    flex: 1 1 auto;
    min-width: 0;
    width: auto
  }

  .pdp-actions .btn-wishlist-pdp {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 16px
  }
}

@media(max-width:400px) {
  .pdp-actions .btn-wishlist-pdp span {
    display: none
  }

  .pdp-actions .btn-wishlist-pdp {
    padding: 0 14px
  }
}

.pdp-foot {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-50)
}

.pdp-foot a {
  color: var(--ink-70)
}

.pdp-foot .share {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px
}

.pdp-foot .share a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-70)
}

/* tabs */
.pdp-tabs {
  margin-top: 64px
}

.pdp-tabs .nav-pills {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
  list-style: none;
  padding: 0
}

.pdp-tabs .nav-pills .nav-item {
  list-style: none
}

.pdp-tabs .nav-link {
  display: block;
  padding: 14px 22px;
  font-family: var(--font-d);
  font-size: 15px;
  color: var(--ink-50);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: .2s;
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0
}

.pdp-tabs .nav-link:hover {
  color: var(--ink)
}

.pdp-tabs .nav-link.active {
  color: var(--ink);
  border-bottom-color: var(--brass)
}

.pdp-tabs .tab-pane {
  display: none
}

.pdp-tabs .tab-pane.active,
.pdp-tabs .tab-pane.show.active {
  display: block
}

.pdp-desc {
  max-width: 820px;
  margin: 0 auto;
  color: var(--ink-70);
  line-height: 1.8;
  font-size: 15px
}

.pdp-desc h3 {
  font-family: var(--font-d);
  color: var(--ink);
  font-size: 20px;
  margin: 22px 0 12px
}

.pdp-desc ul {
  padding-left: 20px;
  margin: 12px 0
}

.pdp-desc li {
  margin-bottom: 6px
}

.pdp-desc a {
  color: var(--brass-d);
  text-decoration: underline
}

/* reviews */
.pdp-reviews {
  max-width: 820px;
  margin: 0 auto
}

.pdp-reviews .review {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 20px
}

.pdp-reviews .review h4 {
  font-size: 15px;
  font-family: var(--font-d);
  margin-bottom: 6px
}

.pdp-reviews .review .review-date {
  font-size: 12.5px;
  color: var(--ink-50)
}

.pdp-reviews .review .verified {
  color: var(--celadon);
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-top: 4px
}

.pdp-reviews .review-content {
  color: var(--ink-70);
  line-height: 1.65;
  font-size: 14.5px;
  margin-top: 6px
}

.pdp-empty-review {
  text-align: center;
  color: var(--ink-50);
  padding: 20px
}

/* ===== Desktop: whole right info panel (title, price, options, add to bag, wishlist)
   follows scroll while the left image gallery is on screen, and stops in its normal
   place once the image column ends — matches reference video ===== */
@media(min-width:821px) {
  .pdp-info {
    position: sticky;
    top: 96px;
    z-index: 5;
    background: var(--paper)
  }
}

/* FIX: hide the category nav bar on mobile (menu is in the drawer + bottom-nav) — removes empty strip */
@media(max-width:1080px) {
  .catnav {
    display: none
  }

  .site-header .header-main {
    padding-top: 5px;
    padding-bottom: 3px
  }
}

@media(max-width:820px) {
  .pdp-top {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .pdp-gallery {
    position: static
  }

  .pdp-tabs {
    margin-top: 44px
  }

  .pdp-nav {
    width: 34px;
    height: 34px
  }

  .pdp-nav svg {
    width: 16px;
    height: 16px
  }

  .pdp-nav-prev {
    left: 8px
  }

  .pdp-nav-next {
    right: 8px
  }

  .pdp-thumbs .product-gallery-item {
    width: 68px;
    height: 68px
  }
}

/* mobile par elevateZoom ko poori tarah band rakhein (horizontal overflow fix) */
@media(max-width:991px) {

  .pdp-main .zoomContainer,
  .zoomLens,
  .zoomWindowContainer {
    display: none !important
  }

  .pdp-main img#product-zoom {
    width: 100% !important;
    height: auto !important;
    object-fit: contain
  }
}

/* trust band refinements (icons + responsive) */
.trust .t-item .ic {
  color: var(--brass-d)
}

.trust .t-item b {
  font-family: var(--font-d)
}

@media(max-width:680px) {
  .trust .wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    padding: 28px 16px
  }

  .trust .t-item {
    gap: 10px
  }

  .trust .t-item .ic {
    width: 38px;
    height: 38px
  }

  .trust .t-item .ic svg {
    width: 19px;
    height: 19px
  }

  .trust .t-item b {
    font-size: 13.5px
  }

  .trust .t-item small {
    font-size: 11.5px
  }
}

@media(max-width:400px) {
  .trust .wrap {
    grid-template-columns: 1fr
  }
}

/* ===== footer: newsletter flush at top, spacing on the grid instead ===== */
.footer>.wrap {
  padding-top: 58px
}

/* ================= MOBILE HEADER -> match reference (category pills, no hamburger) ================= */
@media(max-width:1080px) {

  /* show the category bar again, as horizontal scroll pills */
  .catnav {
    display: block;
    /* border-top: 1px solid var(--line); */
    border-bottom: 1px solid var(--line);
    background: var(--paper)
  }

  .catnav .wrap {
    height: auto;
    padding: 4px 9px;
    gap: 1px;
    overflow-x: auto
  }

  .a-nav {
    display: flex !important;
    gap: 4px;
    overflow-x: auto;
    flex-wrap: nowrap;
    width: 100%;
    scrollbar-width: none;
    margin: 0;
    padding: 0;
    list-style: none
  }

  .a-nav::-webkit-scrollbar {
    display: none
  }

  .a-nav>li {
    flex: 0 0 auto;
    list-style: none
  }

  .a-nav>li>a {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    height: auto;
    padding: 8px 8px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-pill);
    font-size: 10px;
    font-weight: 600;
    background: var(--surface);
    color: var(--ink);
    gap: 6px
  }

  .a-nav>li>a::after {
    display: none
  }

  /* kill desktop underline */
  .a-nav>li.active>a,
  .a-nav>li:first-child>a {
    background: var(--ink);
    color: #F4EFE4;
    border-color: var(--ink)
  }

  .a-nav>li ul,
  .a-nav>li .mega,
  .a-nav .dropdown-menu {
    display: none !important
  }

  /* ===== NEW: tap-to-open dropdown for pill nav ===== */
  .a-nav>li.open>ul {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    max-width: min(300px, calc(100vw - 32px));
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 2.5px solid var(--brass);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    padding: 10px;
    z-index: 200
  }

  .a-nav>li.open>a .caret {
    transform: rotate(180deg)
  }

  /* third level: stack inline instead of flying out sideways (avoids off-screen clipping) */
  .a-nav ul ul {
    display: none !important;
    position: static;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--line);
    border-radius: 0;
    margin: 6px 0 0;
    padding-left: 10px
  }

  .a-nav ul li.open>ul {
    display: block !important
  }

  .a-nav ul li.open>a .caret {
    transform: rotate(0deg) !important
  }

  /* ===== end new block ===== */

  /* hide sub-menus on mobile */
  .header-actions [data-open-menu] {
    display: none
  }

  /* remove hamburger from header (use bottom-nav Menu) */
  /* .site-header .header-main{padding-top:12px;padding-bottom:12px} */

}

@media(max-width:680px) {
  .footer>.wrap {
    padding-top: 40px
  }

  .newsletter {
    padding: 40px 0
  }
}

/* ================= cart dropdown: sane position on mobile (was top-left overlap) ================= */
@media(max-width:680px) {
  .cart-dropdown .dropdown-menu {
    position: fixed !important;
    top: 82px;
    right: 8px;
    left: auto !important;
    width: min(340px, 92vw);
    max-height: 72vh;
    overflow-y: auto;
    transform: none !important
  }
}

/* ================= quick-view: fit on small screens ================= */
@media(max-width:600px) {
  .qv-grid {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .qv-left .qv-main {
    height: auto;
    aspect-ratio: 1/1;
    max-height: 42vh
  }

  .qv-right h3 {
    font-size: 21px
  }

  .qv-right #qv-price {
    font-size: 23px
  }

  .qv-vars {
    grid-template-columns: 1fr 1fr
  }

  .modal-lg {
    max-width: 94vw
  }

  .modal-dialog,
  .modal-dialog-centered {
    margin: 14px auto
  }

  .modal-body {
    padding: 18px
  }

  .modal-body .close {
    right: 10px;
    top: 8px
  }
}

/* ================= ARTHUBLY — live search results dropdown ================= */
.live-search-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 1200;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -18px rgba(20, 24, 38, .32);
  max-height: 440px;
  overflow-y: auto;
  text-align: left;
  padding: 8px;
  animation: lsIn .18s ease
}

@keyframes lsIn {
  from {
    opacity: 0;
    transform: translateY(-6px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.live-search-results::-webkit-scrollbar {
  width: 8px
}

.live-search-results::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 8px
}

.ls-list {
  display: flex;
  flex-direction: column
}

.ls-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background .14s
}

.ls-item:hover {
  background: var(--paper-2)
}

.ls-thumb {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--paper-2);
  border: 1px solid var(--line)
}

.ls-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.ls-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.ls-cat {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-50);
  font-weight: 600
}

.ls-name {
  font-family: var(--font-d);
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25
}

.ls-price {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 15px;
  color: var(--brass-d);
  flex-shrink: 0
}

.ls-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  padding: 13px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: #F4EFE4;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  transition: .2s
}

.ls-all:hover {
  background: var(--indigo-deep, #191E2E)
}

.ls-all svg {
  transition: transform .2s
}

.ls-all:hover svg {
  transform: translateX(3px)
}

.ls-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 16px;
  color: var(--ink-50);
  text-align: center;
  font-size: 14px
}

.ls-empty svg {
  color: var(--line-2)
}

/* ================= ARTHUBLY — hero slider ================= */
.hero-slider {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(420px, 100vh, 600px);
  display: flex;
  background: var(--indigo-deep, #191E2E)
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
  display: flex;
  align-items: center;
  pointer-events: none
}

.hero-slide.on {
  opacity: 1;
  pointer-events: auto
}

.hero-slide .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2
}

.hero-slide .hero-grad {
  position: absolute;
  inset: 0;
  z-index: -2
}

.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(20, 24, 38, .86) 0%, rgba(20, 24, 38, .66) 42%, rgba(20, 24, 38, .28) 100%)
}

.hero-slide .grain-lite {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding: clamp(32px, 6vw, 72px);
  color: #FBF6EC
}

.hero-content .eyebrow {
  color: #E5C888
}

.hero-content h1,
.hero-content .hero-h1 {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: clamp(34px, 5.4vw, 62px);
  line-height: 1.03;
  letter-spacing: -.02em;
  margin: 14px 0 18px;
  color: #FBF6EC
}

.hero-content h1 em,
.hero-content .hero-h1 em {
  font-style: italic;
  color: #E5C888;
  font-weight: 500
}

.hero-content p {
  color: #CFC6B7;
  font-size: clamp(15px, 1.5vw, 17.5px);
  line-height: 1.65;
  max-width: 460px;
  margin-bottom: 28px
}

.hero-dots {
  position: absolute;
  left: clamp(32px, 6vw, 72px);
  bottom: 26px;
  z-index: 5;
  display: flex;
  gap: 9px
}

.hero-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(251, 246, 236, .4);
  cursor: pointer;
  padding: 0;
  transition: .25s
}

.hero-dots button.on {
  background: #E5C888;
  width: 26px;
  border-radius: 5px
}

.hero-arrows {
  position: absolute;
  right: clamp(20px, 4vw, 40px);
  bottom: 26px;
  z-index: 5;
  display: flex;
  gap: 10px
}

.hero-arrows button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(251, 246, 236, .32);
  background: rgba(20, 24, 38, .35);
  color: #FBF6EC;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: .2s;
  backdrop-filter: blur(4px)
}

.hero-arrows button:hover {
  background: #E5C888;
  border-color: #E5C888;
  color: #20263A
}

.hero-arrows svg {
  width: 20px;
  height: 20px
}

@media(max-width:760px) {
  .hero-slider {
    min-height: auto
  }

  .hero-slide {
    position: relative;
    opacity: 1;
    display: none
  }

  .hero-slide.on {
    display: flex
  }

  .hero-slide::after {
    background: linear-gradient(180deg, rgba(20, 24, 38, .5) 0%, rgba(20, 24, 38, .82) 100%)
  }

  .hero-content {
    padding: 120px 24px 96px
  }

  .hero-content p {
    max-width: none
  }

  .hero-arrows {
    display: none
  }

  .hero-dots {
    left: 24px;
    bottom: 22px
  }
}

/* ================= ARTHUBLY — hero artisan tag + stats bar ================= */
.hero-artisan {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(251, 246, 236, .16);
  max-width: 400px
}

.hero-artisan .ha-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #A9772E, #7a5a2a);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #fff
}

.hero-artisan .ha-av svg {
  width: 22px;
  height: 22px
}

.hero-artisan .ha-t small {
  display: block;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #E5C888;
  font-weight: 600;
  margin-bottom: 3px
}

.hero-artisan .ha-t b {
  color: #FBF6EC;
  font-size: 14px
}

.hero-artisan .ha-t span {
  color: #B0A48F;
  font-size: 13px
}

.hero-stats {
  background: var(--indigo-deep, #191E2E);
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.hero-stats .hs {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 32px;
  border-left: 1px solid rgba(251, 246, 236, .08)
}

.hero-stats .hs:first-child {
  border-left: none
}

.hero-stats .hs .hsi {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: rgba(229, 200, 136, .12);
  display: grid;
  place-items: center;
  color: #E5C888;
  flex-shrink: 0
}

.hero-stats .hs .hsi svg {
  width: 20px;
  height: 20px
}

.hero-stats .hs b {
  display: block;
  font-family: var(--font-d);
  font-size: 24px;
  color: #FBF6EC;
  line-height: 1
}

.hero-stats .hs small {
  color: #B0A48F;
  font-size: 10px;
  letter-spacing: .02em
}

@media(max-width:860px) {
  .hero-stats {
    grid-template-columns: repeat(2, 1fr)
  }

  .hero-stats .hs:nth-child(3) {
    border-left: none
  }
}

@media(max-width:480px) {
  .hero-stats .hs {
    padding: 14px 5px;
    gap: 5px
  }

  .hero-stats .hs b {
    font-size: 18px
  }
}

/* ================= ARTHUBLY — premium product card (image-5 style) ================= */
.pcard .badges {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start
}

.pcard .plabel.handmade {
  background: var(--ink);
  color: #F4EFE4
}

.pcard .plabel.seller {
  background: var(--madder)
}

.pcard .plabel.sustain {
  background: var(--celadon)
}

.pcard .plabel.limited {
  background: var(--ink);
  color: #E5C888
}

.pcard .price-row {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap
}

.pcard .price-old {
  color: var(--ink-40, #9a917f);
  text-decoration: line-through;
  font-size: 14px
}

.pcard .price-off {
  color: var(--madder);
  font-weight: 700;
  font-size: 12.5px
}

.pcard .p-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--ink-50)
}

.pcard .p-rating .stars {
  position: relative;
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 1;
  font-family: Arial
}

.pcard .p-rating .stars::before {
  content: "★★★★★";
  color: var(--line-2)
}

.pcard .p-rating .stars i {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--brass)
}

.pcard .p-rating .stars i::before {
  content: "★★★★★"
}

.pcard .p-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line)
}

.pcard .p-ship {
  font-size: 11.5px;
  color: var(--ink-50);
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.pcard .p-ship svg {
  width: 15px;
  height: 15px;
  color: var(--celadon)
}

.pcard .p-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #F4EFE4;
  font-weight: 600;
  font-size: 13px;
  border: none;
  cursor: pointer;
  transition: .2s;
  white-space: nowrap
}

.pcard .p-add:hover {
  background: var(--brass)
}

.pcard .p-add svg {
  width: 15px;
  height: 15px
}

/* ================= ARTHUBLY — Meet the makers ================= */
.makers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px
}

.maker-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: .25s;
  display: flex;
  flex-direction: column
}

.maker-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2)
}

.maker-card .mc-banner {
  height: 96px;
  position: relative
}

.maker-card .mc-av {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--surface);
  position: absolute;
  left: 50%;
  bottom: -33px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  color: #E5C888;
  overflow: hidden;
}

.maker-card .mc-av svg {
  width: 30px;
  height: 30px
}

.maker-card .mc-body {
  padding: 44px 20px 20px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column
}

.maker-card .mc-name {
  font-family: var(--font-d);
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-content: center
}

.maker-card .mc-name .vf {
  color: var(--celadon)
}

.maker-card .mc-name .vf svg {
  width: 14px;
  height: 14px
}

.maker-card .mc-loc {
  font-size: 12.5px;
  color: var(--ink-50);
  margin: 4px 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: center
}

.maker-card .mc-loc svg {
  width: 13px;
  height: 13px
}

.maker-card .mc-craft {
  align-self: center;
  background: var(--brass-wash);
  color: var(--brass-d);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 14px
}

.maker-card .mc-quote {
  font-family: var(--font-d);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-70);
  line-height: 1.5;
  margin-bottom: 16px;
  flex: 1
}

.maker-card .mc-stats {
  display: flex;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px
}

.maker-card .mc-stats div {
  flex: 1;
  padding: 12px 4px;
  border-left: 1px solid var(--line)
}

.maker-card .mc-stats div:first-child {
  border-left: none
}

.maker-card .mc-stats b {
  display: block;
  font-family: var(--font-d);
  font-size: 16px
}

.maker-card .mc-stats small {
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-50)
}

.maker-card .mc-actions {
  display: flex;
  gap: 8px
}

.maker-card .mc-actions .btn {
  flex: 1;
  height: 42px;
  justify-content: center;
  font-size: 13px
}

/* ================= ARTHUBLY — Stories worth collecting (editors' picks) ================= */
.collections-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px
}

.coll-tile {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  min-height: 220px;
  background: var(--panel)
}

.coll-tile.feature {
  grid-row: span 2
}

.coll-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2
}

.coll-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 24, 38, .08) 30%, rgba(20, 24, 38, .86))
}

.coll-tile .cl-body {
  padding: 24px;
  color: #FBF6EC;
  width: 100%
}

.coll-tile .cl-body small {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #E5C888;
  font-weight: 600
}

.coll-tile .cl-body h3 {
  font-family: var(--font-d);
  color: #FBF6EC;
  font-size: 20px;
  margin: 6px 0 6px;
  line-height: 1.1
}

.coll-tile.feature .cl-body h3 {
  font-size: 30px
}

.coll-tile .cl-body p {
  color: #CFC6B7;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 10px;
  max-width: 340px
}

.coll-tile .cl-body .explore {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 13px;
  color: #FBF6EC
}

.coll-tile .cl-body .explore svg {
  width: 15px;
  height: 15px;
  transition: transform .3s
}

.coll-tile:hover .cl-body .explore svg {
  transform: translateX(4px)
}

@media(max-width:980px) {
  .makers-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .collections-grid {
    grid-template-columns: 1fr 1fr
  }

  .coll-tile.feature {
    grid-row: span 1;
    grid-column: span 2
  }
}

@media(max-width:560px) {
  .makers-grid {
    grid-template-columns: 1fr
  }

  .collections-grid {
    grid-template-columns: 1fr
  }

  .coll-tile.feature {
    grid-column: span 1
  }
}

/* ================= ARTHUBLY — AUTH (split-screen) ================= */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  background: var(--paper);
  font-family: var(--font-b);
  color: var(--ink)
}

/* brand panel */
.auth-brand {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--indigo-deep, #191E2E);
  color: #FBF6EC;
  padding: clamp(34px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px
}

.auth-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(680px 420px at 80% 8%, rgba(169, 119, 46, .30), transparent 60%), radial-gradient(560px 460px at 8% 92%, rgba(94, 115, 85, .24), transparent 60%)
}

.auth-brand .grain-lite {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")
}

.auth-brand .ab-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #FBF6EC
}

.auth-brand .ab-logo .name {
  font-family: var(--font-d);
  font-size: 22px
}

.auth-brand .ab-logo .name b {
  color: #E5C888
}

.auth-brand .ab-mid .eyebrow {
  color: #E5C888
}

.auth-brand .ab-mid h2 {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 16px 0 16px;
  color: #FBF6EC
}

.auth-brand .ab-mid h2 em {
  font-style: italic;
  color: #E5C888;
  font-weight: 500
}

.auth-brand .ab-mid p {
  color: #CFC6B7;
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 420px
}

.auth-brand .ab-trust {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.auth-brand .ab-trust .abt {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #EBE3D6
}

.auth-brand .ab-trust .abt svg {
  width: 20px;
  height: 20px;
  color: #E5C888;
  flex-shrink: 0
}

/* form panel */
.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px)
}

.auth-card {
  width: 100%;
  max-width: 436px
}

.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ink-50);
  text-decoration: none;
  margin-bottom: 28px;
  transition: .15s
}

.auth-back:hover {
  color: var(--ink)
}

.auth-back svg {
  width: 15px;
  height: 15px
}

.auth-card h1 {
  font-family: var(--font-d);
  font-size: clamp(26px, 3vw, 32px);
  letter-spacing: -.01em;
  margin-bottom: 8px
}

.auth-card .sub {
  color: var(--ink-60, #6b6355);
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 26px
}

.auth-form .field {
  margin-bottom: 16px
}

.auth-form .field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-70);
  margin-bottom: 7px;
  letter-spacing: .01em
}

.auth-form .field .fld-err {
  display: block;
  color: var(--madder);
  font-size: 12.5px;
  margin-top: 6px
}

.auth-form .field .pw {
  position: relative
}

.auth-form .field .pw .toggle-pw {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-40, #9a917f);
  padding: 4px;
  display: grid;
  place-items: center
}

.auth-form .field .pw .toggle-pw svg {
  width: 18px;
  height: 18px
}

.auth-form .field .pw input {
  padding-right: 44px
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 22px;
  flex-wrap: wrap
}

.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink-70);
  user-select: none
}

.auth-check input {
  width: 17px;
  height: 17px;
  accent-color: var(--brass);
  cursor: pointer
}

.auth-link {
  color: var(--brass-d);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none
}

.auth-link:hover {
  text-decoration: underline
}

.auth-submit {
  width: 100%;
  justify-content: center;
  height: 52px;
  font-size: 15px
}

.auth-foot {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: var(--ink-60, #6b6355)
}

.auth-foot a {
  color: var(--brass-d);
  font-weight: 600;
  text-decoration: none
}

.auth-foot a:hover {
  text-decoration: underline
}

.auth-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--celadon-wash);
  border: 1px solid var(--celadon);
  color: #41522F;
  padding: 13px 15px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  margin-bottom: 22px
}

.auth-status svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
  color: var(--ink-40, #9a917f);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line)
}

.auth-admin-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-50);
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 22px
}

.auth-admin-note svg {
  width: 14px;
  height: 14px;
  color: var(--brass-d)
}

@media(max-width:900px) {
  .auth-wrap {
    grid-template-columns: 1fr
  }

  .auth-brand {
    display: none
  }

  .auth-panel {
    padding: 32px 20px;
    min-height: 100vh
  }

  .auth-mobilebar {
    display: flex
  }
}

.auth-mobilebar {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px
}

.auth-mobilebar .name {
  font-family: var(--font-d);
  font-size: 22px
}

.auth-mobilebar .name b {
  color: var(--brass-d)
}

/* ================= ARTHUBLY — sign-in / register modal (home popup) ================= */
#signin-modal .modal-dialog {
  max-width: 440px
}

#signin-modal .modal-body {
  padding: 30px 30px 32px
}

.auth-modal {
  position: relative
}

.auth-modal .close {
  position: absolute;
  right: -8px;
  top: -10px;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--ink-50);
  cursor: pointer;
  z-index: 3;
  line-height: 1
}

.auth-modal .close:hover {
  color: var(--ink)
}

.auth-modal-head {
  text-align: center;
  margin-bottom: 22px
}

.auth-modal-head .mark {
  display: inline-grid;
  place-items: center;
  margin-bottom: 12px
}

.auth-modal-head .mark svg {
  width: 48px;
  height: 48px
}

.auth-modal-head h3 {
  font-family: var(--font-d);
  font-size: 23px;
  margin-bottom: 5px
}

.auth-modal-head p {
  color: var(--ink-50);
  font-size: 13.5px
}

.seg-tabs {
  display: flex;
  gap: 4px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px;
  margin-bottom: 22px;
  list-style: none
}

.seg-tabs .nav-item {
  flex: 1;
  list-style: none
}

.seg-tabs .nav-link {
  display: block;
  text-align: center;
  padding: 9px 10px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-50);
  cursor: pointer;
  transition: .18s;
  border: none;
  background: none;
  font-family: var(--font-b)
}

.seg-tabs .nav-link:hover {
  color: var(--ink)
}

.seg-tabs .nav-link.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-1)
}

.auth-modal .auth-submit {
  height: 50px
}

@media(max-width:480px) {
  #signin-modal .modal-body {
    padding: 26px 20px
  }
}

/* ================= ARTHUBLY — per-page SKELETON loaders ================= */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: var(--paper);
  overflow: hidden;
  transition: opacity .5s ease, visibility .5s ease
}

#page-loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none
}

#page-loader .sk-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px clamp(16px, 4vw, 40px)
}

/* shared shimmer pieces (use with .skeleton) */
.sk-line {
  height: 13px;
  border-radius: 6px;
  display: block
}

.sk-line.h1 {
  height: 34px
}

.sk-line.h2 {
  height: 22px
}

.sk-line.sm {
  height: 11px
}

.sk-btn {
  height: 48px;
  width: 180px;
  border-radius: 999px;
  display: block
}

.sk-img {
  border-radius: 14px;
  display: block
}

.sk-w20 {
  width: 20%
}

.sk-w30 {
  width: 32%
}

.sk-w40 {
  width: 42%
}

.sk-w50 {
  width: 52%
}

.sk-w60 {
  width: 62%
}

.sk-w70 {
  width: 72%
}

.sk-w80 {
  width: 82%
}

.sk-w90 {
  width: 92%
}

/* header + pills (common to all) */
.sk-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px
}

.sk-logo {
  width: 150px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0
}

.sk-search {
  flex: 1;
  max-width: 560px;
  height: 46px;
  border-radius: 999px
}

.sk-icons {
  display: flex;
  gap: 12px;
  margin-left: auto
}

.sk-icons span {
  width: 40px;
  height: 40px;
  border-radius: 50%
}

.sk-pills {
  display: flex;
  gap: 10px;
  margin-bottom: 26px;
  overflow: hidden
}

.sk-pill {
  height: 34px;
  width: 96px;
  border-radius: 999px;
  flex-shrink: 0
}

.sk-pill:first-child {
  width: 120px
}

.sk-crumb {
  width: 230px;
  height: 14px;
  border-radius: 6px;
  margin-bottom: 20px
}

/* card grid */
.sk-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px
}

.sk-card {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.sk-card .sk-img {
  aspect-ratio: 1/1;
  width: 100%
}

/* generic 2-col */
.sk-2col {
  display: grid;
  gap: 28px;
  align-items: start
}

.sk-2col.filters {
  grid-template-columns: 270px minmax(0, 1fr)
}

.sk-2col.split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
}

.sk-2col.cart {
  grid-template-columns: minmax(0, 1fr) 360px
}

.sk-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px
}

/* HERO split skeleton */
.sk-hero {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 32px;
  background: var(--indigo-deep, #191E2E);
  min-height: clamp(280px, 42vh, 420px)
}

.sk-hero .sk-copy {
  padding: clamp(28px, 4vw, 54px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px
}

.sk-hero .sk-copy .sk-line {
  background: linear-gradient(100deg, rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, .06) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite
}

.sk-hero .sk-copy .sk-btn {
  background: linear-gradient(100deg, rgba(229, 200, 136, .25) 30%, rgba(229, 200, 136, .45) 50%, rgba(229, 200, 136, .25) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  margin-top: 8px
}

.sk-hero .sk-vis {
  position: relative
}

/* filter sidebar skeleton */
.sk-filter {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden
}

.sk-filter .sk-fh {
  display: flex;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line)
}

.sk-filter .sk-fg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line)
}

.sk-filter .sk-fg:last-child {
  border-bottom: none
}

/* toolbar */
.sk-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px
}

/* pdp gallery */
.sk-gallery .sk-main {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 16px;
  margin-bottom: 14px
}

.sk-gallery .sk-thumbs {
  display: flex;
  gap: 12px
}

.sk-gallery .sk-thumbs span {
  width: 84px;
  height: 84px;
  border-radius: 10px
}

.sk-swatches {
  display: flex;
  gap: 10px
}

.sk-swatches span {
  width: 34px;
  height: 34px;
  border-radius: 50%
}

/* cart rows */
.sk-cart-item {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 14px
}

.sk-cart-item .sk-img {
  width: 96px;
  height: 96px;
  flex-shrink: 0
}

.sk-cart-item .sk-ci-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px
}

/* form fields */
.sk-field {
  height: 46px;
  border-radius: 10px;
  margin-bottom: 14px
}

.sk-fieldlabel {
  width: 120px;
  height: 11px;
  border-radius: 5px;
  margin-bottom: 8px
}

/* responsive */
@media(max-width:1080px) {
  .sk-hero {
    grid-template-columns: 1fr
  }

  .sk-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .sk-2col.filters {
    grid-template-columns: 1fr
  }

  .sk-filter {
    display: none
  }
}

@media(max-width:900px) {

  .sk-2col.split,
  .sk-2col.cart {
    grid-template-columns: 1fr
  }

  .sk-search {
    display: none
  }
}

@media(max-width:640px) {
  .sk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .sk-icons span:nth-child(3) {
    display: none
  }
}

.sk-grid.g3 {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

@media(max-width:1080px) {
  .sk-grid.g3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media(max-width:640px) {
  .sk-grid.g3 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

.sk-hero .sk-vis.skeleton {
  border-radius: 0
}

/* ================= ARTHUBLY — smart scroll header (SMOOTH FIX) ================= */
.site-header {
  transition: box-shadow .3s ease, padding .3s ease;
}

.site-header.scrolled {
  box-shadow: 0 8px 26px -14px rgba(20, 24, 38, .24);
}

/* --- 1. all screens: category bar scroll par chhupega --- */

/* --- 1. all screens: category bar scroll par chhupega --- */
.catnav {
  max-height: 88px;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease, border-color 0.4s ease !important;
}

body.hdr-min .catnav {
  overflow: hidden;
  max-height: 0 !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

body.hdr-min .catnav .wrap {
  height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: all 0.4s ease;
}

/* --- 2. search bar scroll par chhupega (1080px ya kam) --- */
@media (max-width: 1080px) {
  .header-main .search {
    overflow: hidden;
    max-height: 80px;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease, padding 0.4s ease, transform 0.4s ease !important;
  }

  /* scroll down hone par search bar ko 0 kar dena */
  body.hdr-min .header-main .search {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transform: scale(0.95);
    pointer-events: none;
  }

  body.hdr-min .header-main .search .search-ai {
    pointer-events: auto;
    opacity: 1;
  }
}

@media (max-width: 980px) {
  .catnav {
    max-height: 88px;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease, border-color 0.4s ease !important;
  }

  body.hdr-min .catnav {
    overflow: hidden;
    /* clip sirf tab jab collapsed ho */
    max-height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
  }

  body.hdr-min .catnav .wrap {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: all 0.4s ease;
  }
}

/* --- 3. mobile (320px to 680px): search bar logo ke neeche alag line me rahega --- */
@media (max-width: 680px) {
  .header-main {
    flex-wrap: wrap;
    padding-bottom: 12px;
    transition: padding 0.4s ease;
  }

  .header-main .search {
    order: 3;
    width: 100%;
    flex: 0 0 100%;
    margin-top: 8px;
  }

  body.hdr-min .header-main {
    padding-bottom: 2px !important;
  }
}

/* mobile bottom navigation bar */
.mobile-nav {
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease;
}

.mobile-nav.nav-hidden {
  transform: translateY(125%);
}


/* --- 4. tablet and desktop (681px to 980px): search bar center --- */
@media (min-width: 681px) and (max-width: 980px) {
  .header-main {
    flex-wrap: nowrap !important;
  }

  .header-main .search {
    order: 2 !important;
    flex: 1 !important;
    width: auto !important;
    max-width: 500px !important;
    margin: 0 4px !important;
  }

  .header-actions {
    order: 3 !important;
  }
}

/* ================= SEE IT ON YOUR WALL — room preview =================
   Namespaced `wv-` so nothing collides with .modal / .overlay / .row. */
.wv-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 24, 38, .62);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity .28s var(--ease)
}

.wv-overlay.show {
  display: flex;
  opacity: 1
}

.wv-shell {
  position: relative;
  width: 100%;
  max-width: 1080px;
  max-height: 94vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-pop);
  transform: translateY(14px) scale(.985);
  transition: transform .34s var(--ease)
}

.wv-overlay.show .wv-shell {
  transform: none
}

.wv-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(251, 248, 242, .92);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background .2s, transform .2s
}

.wv-close:hover {
  background: #fff;
  transform: rotate(90deg)
}

.wv-close svg {
  width: 17px;
  height: 17px
}

.wv-head {
  padding: 26px 28px 0
}

.wv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-d)
}

.wv-eyebrow svg {
  width: 14px;
  height: 14px
}

.wv-head h2 {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  margin: 8px 0 0
}

.wv-head p {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--ink-50)
}

.wv-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: 22px;
  padding: 20px 28px 28px
}

/* ---- stage ---- */
.wv-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line);
  touch-action: none;
  user-select: none
}

.wv-room {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none
}

.wv-stage.has-room .wv-room {
  display: block
}

.wv-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  background: #14171f
}

.wv-stage.has-live .wv-live {
  display: block
}

.wv-badge-live {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  display: none;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(20, 24, 38, .72);
  backdrop-filter: blur(6px);
  color: #F4EFE4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase
}

.wv-stage.has-live .wv-badge-live {
  display: inline-flex
}

.wv-badge-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E2584A;
  animation: wvPulse 1.6s ease-in-out infinite
}

@keyframes wvPulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .3
  }
}

.wv-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px
}

.wv-stage.has-room .wv-empty,
.wv-stage.has-live .wv-empty {
  display: none
}

.wv-empty svg {
  width: 34px;
  height: 34px;
  color: var(--ink-30)
}

.wv-empty h3 {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 19px;
  margin-top: 50px;
}

.wv-empty p {
  margin: 0;
  max-width: 300px;
  font-size: 13px;
  color: var(--ink-50)
}

.wv-empty-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px
}

.wv-empty-actions .btn {
  height: 44px;
  font-size: 13.5px
}

.wv-error {
  display: none;
  gap: 9px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--madder-wash);
  border: 1px solid rgba(177, 66, 55, .25);
  color: #7E2E26;
  font-size: 12.5px;
  line-height: 1.5
}

.wv-error.show {
  display: flex
}

.wv-error svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px
}

/* ---- the artwork ---- */
.wv-art {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 26%;
  transform: translate(-50%, -50%);
  perspective: 1100px;
  cursor: grab;
  touch-action: none;
  display: none
}

.wv-stage.has-room .wv-art,
.wv-stage.has-live .wv-art {
  display: block
}

.wv-art.dragging {
  cursor: grabbing
}

/* the plate carries the wall angle, so the grips stay flat and grabbable */
.wv-plate {
  position: relative;
  transform: rotateY(var(--wv-yaw, 0deg));
  transform-origin: center
}

/* soft cast shadow — behind the canvas, offset for light from the upper left */
.wv-shadow {
  position: absolute;
  inset: 0;
  background: #05070c;
  border-radius: 2px;
  opacity: var(--wv-shadow-a, .38);
  filter: blur(var(--wv-blur, 12px));
  transform: translate(var(--wv-sx, 1.5%), var(--wv-sy, 3%)) scale(.99);
  pointer-events: none
}

.wv-canvas {
  position: relative;
  overflow: hidden;
  border-radius: 1px
}

.wv-canvas img {
  width: 100%;
  height: auto;
  display: block;
  filter: var(--wv-filter, none);
  pointer-events: none
}

/* ambient colour cast picked up from the room */
.wv-tone {
  position: absolute;
  inset: 0;
  background: var(--wv-tint, #fff);
  mix-blend-mode: multiply;
  opacity: var(--wv-tint-a, 0);
  pointer-events: none
}

/* faint sheen, as if light rakes across the surface */
.wv-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .02) 34%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .06) 100%);
  mix-blend-mode: screen;
  opacity: var(--wv-sheen-a, 0);
  pointer-events: none
}

/* sensor noise, so the piece isn't sharper than the camera feed */
.wv-grain {
  position: absolute;
  inset: 0;
  opacity: var(--wv-grain-a, 0);
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")
}

/* frame + mount — real depth, so it reads as hung art rather than taped paper */
.wv-canvas.has-frame {
  padding: 2.8%;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10),
    inset 0 2px 6px rgba(0, 0, 0, .45),
    0 1px 3px rgba(0, 0, 0, .5),
    0 10px 22px rgba(0, 0, 0, .3)
}

.wv-canvas.f-black {
  background: linear-gradient(148deg, #2a2f3a 0%, #171b24 45%, #0e1117 100%)
}

.wv-canvas.f-oak {
  background: linear-gradient(148deg, #C08A4A 0%, #8E6330 48%, #6E4A1E 100%)
}

.wv-canvas.f-gold {
  background: linear-gradient(148deg, #E7CE9A 0%, #BE9046 42%, #8A5F21 100%)
}

.wv-canvas.f-none {
  padding: 0;
  background: none
}

.wv-mat {
  position: relative;
  background: none;
  transition: padding .18s var(--ease)
}

.wv-mat.on {
  padding: 5%;
  background: #F6F2E9;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22)
}

.wv-canvas.f-none .wv-mat.on {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 10px 22px rgba(0, 0, 0, .28)
}

.wv-canvas.has-frame .wv-mat img,
.wv-canvas .wv-mat.on img {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35)
}

/* frame picker */
.wv-frames {
  display: flex;
  gap: 7px
}

.wv-frames button {
  flex: 1;
  height: 40px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line-2);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-70);
  background: var(--surface);
  transition: border-color .18s, color .18s, transform .18s var(--ease)
}

.wv-frames button:hover {
  border-color: var(--ink-30)
}

.wv-frames button.is-on {
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink)
}

.wv-frames button i {
  display: block;
  height: 10px;
  border-radius: 2px;
  margin-bottom: 4px
}

.wv-frames button[data-wv-frame="black"] i {
  background: linear-gradient(120deg, #2a2f3a, #0e1117)
}

.wv-frames button[data-wv-frame="oak"] i {
  background: linear-gradient(120deg, #C08A4A, #6E4A1E)
}

.wv-frames button[data-wv-frame="gold"] i {
  background: linear-gradient(120deg, #E7CE9A, #8A5F21)
}

.wv-frames button[data-wv-frame="none"] i {
  background: repeating-linear-gradient(45deg, var(--line) 0 4px, transparent 4px 8px)
}

.wv-art .wv-grip {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  display: grid;
  place-items: center;
  color: var(--ink);
  opacity: 0;
  transition: opacity .2s;
  touch-action: none
}

.wv-art:hover .wv-grip,
.wv-art.active .wv-grip {
  opacity: 1
}

.wv-art .wv-grip svg {
  width: 13px;
  height: 13px
}

.wv-grip.is-size {
  right: -13px;
  bottom: -13px;
  cursor: nwse-resize
}

.wv-grip.is-turn {
  left: 50%;
  top: -34px;
  margin-left: -13px;
  cursor: grab
}

/* ---- controls ---- */
.wv-controls {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.wv-field label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-70);
  margin-bottom: 9px
}

.wv-field label b {
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brass-d)
}

.wv-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--line-2);
  outline: none
}

.wv-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--surface);
  box-shadow: var(--sh-1);
  cursor: pointer
}

.wv-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer
}

.wv-range:focus-visible {
  box-shadow: 0 0 0 4px var(--brass-wash)
}

.wv-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--ink-70);
  cursor: pointer
}

.wv-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--brass)
}

.wv-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-50);
  padding-top: 2px;
  border-top: 1px solid var(--line);
  margin-top: 2px;
  padding-top: 12px
}

.wv-buttons {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: auto
}

.wv-buttons .btn {
  width: 100%;
  height: 44px;
  font-size: 13.5px
}

.wv-buttons .btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none
}

@media (max-width:860px) {
  .wv-body {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px 18px 22px;
    gap: 18px
  }

  .wv-head {
    padding: 22px 18px 0
  }

  .wv-head h2 {
    font-size: 22px
  }

  .wv-art .wv-grip {
    opacity: 1
  }
}

@media (prefers-reduced-motion: reduce) {

  .wv-overlay,
  .wv-shell,
  .wv-close {
    transition: none
  }
}


/* ===== Custom Price & Rating Row Layout ===== */
.pdp-price-rating-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  /* Mobile par adjust hone ke liye */
}

/* Price block alignment */
.pdp-price-rating-wrap .pdp-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* "U.S Checkout" text style */
.pdp-price-rating-wrap .price-suffix {
  font-family: var(--font-b);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-50);
}

/* Share Button Style */
.btn-share-icon {
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--ink-70);
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.btn-share-icon:hover {
  color: var(--brass-d);
  transform: translateY(-2px);
}

.btn-share-icon svg {
  width: 22px;
  height: 22px;
}

.modal-body {
  overflow-x: hidden;
}

.qv-right h3,
.qv-desc,
#qv-price {
  max-width: 100%;
  overflow-wrap: break-word;
}

@media(max-width:720px) {
  .qv-vars {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   ARTHUBLY — QUICK VIEW: RIGHT-SIDE SLIDER (drawer)
   Replaces the old centered bootstrap modal (#quickViewModal)
   ===================================================================== */
.qv-drawer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  visibility: hidden;
  pointer-events: none
}

.qv-drawer.open {
  visibility: visible;
  pointer-events: auto
}

/* --- backdrop (blur behind) --- */
.qv-drawer .qv-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 38, .48);
  -webkit-backdrop-filter: blur(6px) saturate(.9);
  backdrop-filter: blur(6px) saturate(.9);
  opacity: 0;
  transition: opacity .32s ease
}

.qv-drawer.open .qv-backdrop {
  opacity: 1
}

/* --- sliding panel --- */
.qv-drawer .qv-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 100%;
  background: var(--surface, #fff);
  box-shadow: -18px 0 48px rgba(20, 24, 38, .18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.22, .8, .28, 1);
  will-change: transform
}

.qv-drawer.open .qv-panel {
  transform: translateX(0)
}

/* --- head --- */
.qv-drawer .qv-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line, #e8e3da);
  background: var(--surface, #fff)
}

.qv-drawer .qv-eyebrow {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-70, #6b6a66)
}

.qv-drawer .qv-close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line, #e8e3da);
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink, #1c1b19);
  transition: .18s
}

.qv-drawer .qv-close:hover {
  background: var(--paper-2, #f6f2ec);
  transform: rotate(90deg)
}

.qv-drawer .qv-close svg {
  width: 17px;
  height: 17px
}

/* --- scroll area --- */
.qv-drawer .qv-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain
}

.qv-drawer .qv-media {
  padding: 18px 20px 0
}

.qv-drawer .qv-main {
  width: 100%;
  height: 330px;
  object-fit: cover;
  display: block;
  border-radius: var(--r-md, 12px);
  background: var(--paper-2, #f6f2ec)
}

.qv-drawer .qv-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 12px 2px 2px
}

.qv-drawer .qv-thumbs::-webkit-scrollbar {
  height: 4px
}

.qv-drawer .qv-thumbs::-webkit-scrollbar-thumb {
  background: var(--line, #e8e3da);
  border-radius: 4px
}

.qv-drawer .qv-body {
  padding: 6px 20px 24px
}

.qv-drawer .qv-body h3 {
  font-family: var(--font-d);
  font-size: 22px;
  line-height: 1.2;
  margin: 10px 0 6px
}

.qv-drawer #qv-price {
  font-family: var(--font-d);
  font-size: 24px;
  font-weight: 600;
  color: var(--brass-d, #a8792c);
  margin-bottom: 12px
}

/* full description inside the drawer (no 3-line clamp) */
.qv-drawer .qv-desc {
  color: var(--ink-70, #6b6a66);
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 18px;
  display: block;
  -webkit-line-clamp: none;
  overflow: visible
}

.qv-drawer .qv-vars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

/* --- sticky footer CTA --- */
.qv-drawer .qv-foot {
  flex: 0 0 auto;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line, #e8e3da);
  background: var(--surface, #fff)
}

.qv-drawer .qv-submit {
  width: 100%;
  justify-content: center
}

body.qv-open {
  overflow: hidden
}

@media (max-width:520px) {
  .qv-drawer .qv-panel {
    width: 100%
  }

  .qv-drawer .qv-main {
    height: 260px
  }

  .qv-drawer .qv-vars {
    grid-template-columns: 1fr
  }
}

@media (prefers-reduced-motion:reduce) {

  .qv-drawer .qv-panel,
  .qv-drawer .qv-backdrop {
    transition: none
  }
}


/* =====================================================================
   CATNAV — drag-to-scroll (desktop)
   ===================================================================== */
.catnav .a-nav,
.catnav .wrap {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth
}

/* JS lagata hai jab content width se bada ho */
.catnav .a-nav.can-drag,
.catnav .wrap.can-drag {
  cursor: -webkit-grab;
  cursor: grab
}

.catnav .a-nav.is-dragging,
.catnav .wrap.is-dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
  -webkit-user-select: none
}

/* drag ke dauran link/text par selection ya blue highlight na aaye */
.catnav .a-nav.is-dragging a,
.catnav .wrap.is-dragging a {
  cursor: -webkit-grabbing;
  cursor: grabbing;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none
}

/* mobile par grab cursor ka koi matlab nahi */
@media (hover:none) {

  .catnav .a-nav.can-drag,
  .catnav .wrap.can-drag {
    cursor: auto
  }
}



.mzoom {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #0d1017;
  display: none;
  touch-action: none;
  overscroll-behavior: contain
}

.mzoom.open {
  display: block
}

body.mzoom-lock {
  overflow: hidden
}

.mzoom-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden
}

.mzoom-stage img {
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none
}

.mzoom-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer
}

.mzoom-close svg {
  width: 22px;
  height: 22px
}

.mzoom-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  text-align: center;
  color: #fff;
  opacity: .65;
  font: 500 12.5px/1 var(--font-b);
  pointer-events: none;
  transition: opacity .3s
}

.mzoom.zoomed .mzoom-hint {
  opacity: 0
}

/* desktop par bhi chalega — zoom button se khulta hai (lens zoom alag hai) */
.mzoom-stage img {
  cursor: zoom-in
}

.mzoom.zoomed .mzoom-stage img {
  cursor: zoom-out
}


/* ======================================================================
   MOBILE FOOTER — compact, centered, 2-column links
   (file ke END me — purane rules override karega)
   ====================================================================== */
@media (max-width: 768px) {

  /* ---------- NEWSLETTER: card jaisa, centered ---------- */
  .newsletter {
    padding: 34px 0;
  }

  .newsletter .wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }

  .newsletter h2 {
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 8px;
  }

  .newsletter p {
    font-size: 13.5px;
    line-height: 1.55;
    max-width: 32ch;
    margin: 0 auto;
  }

  .nl-form {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }

  .nl-form input {
    width: 100%;
    height: 50px;
    text-align: center;
  }

  .nl-form .btn {
    width: 100%;
    height: 50px;
  }

  /* ---------- GRID: brand poori chaudai, links 2 columns ---------- */
  .foot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
    text-align: left;
  }

  .foot-brand {
    grid-column: 1 / -1;
    text-align: center;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
  }

  .foot-brand .logo {
    justify-content: center;
  }

  .foot-brand p {
    font-size: 13px;
    line-height: 1.6;
    max-width: 34ch;
    margin: 12px auto 0;
  }

  .foot-brand .socials {
    justify-content: center;
    margin-top: 16px;
  }

  /* ---------- LINK COLUMNS: chhote, sate hue ---------- */
  .foot-col h4 {
    font-size: 12px;
    letter-spacing: .14em;
    margin-bottom: 12px;
  }

  .foot-col a {
    font-size: 13.5px;
    padding: 5px 0;
    line-height: 1.4;
  }

  /* Support column — 2-col grid me akela reh jaata hai, to poori chaudai
     me faila do aur uske links do columns me baant do */
  .foot-col:last-of-type {
    grid-column: 1 / -1;
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }

  .foot-col:last-of-type a {
    display: inline-block;
    width: 48%;
    vertical-align: top;
  }

  /* ---------- BOTTOM BAR ---------- */
  .foot-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding-top: 22px;
    margin-top: 26px;
  }

  .foot-bottom span {
    font-size: 11.5px;
    line-height: 1.6;
    max-width: 34ch;
  }

  .foot-bottom .pays {
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .foot-bottom .pays span {
    font-size: 10px;
    padding: 4px 9px;
  }

  /* ---------- fixed bottom bars ke liye jagah ---------- */
  .footer {
    padding-bottom: 78px;
  }
}

/* bahut chhoti screens — links single column, brand aur compact */
@media (max-width: 400px) {
  .foot-grid {
    gap: 24px 14px;
  }

  .foot-col:last-of-type a {
    width: 100%;
  }

  .newsletter h2 {
    font-size: 23px;
  }
}