/* ==========================================================================
   THE AURABURY — Global stylesheet
   --------------------------------------------------------------------------
   HOW TO RESTYLE THE WHOLE SITE:
   Edit the values in ":root" below. Every page reads from these. Change
   --c-wine and every button, price and accent on all 25 pages updates.

   ELEMENTOR NOTE: layout uses flexbox only (no CSS grid), so every section
   maps 1:1 onto an Elementor Flex Container. Each block is commented with
   the Elementor widget it becomes.
   ========================================================================== */

:root {
  /* ---- BRAND COLOURS (taken from your logo) ---------------------------- */
  --c-plum:        #1B0A10;   /* deep plum-black — dark sections, header */
  --c-plum-soft:   #2A141B;   /* slightly lifted plum — cards on dark */
  --c-wine:        #6A2A3B;   /* the logo burgundy — primary brand colour */
  --c-wine-dark:   #55212F;   /* hover state for wine buttons */
  --c-gold:        #C6A05C;   /* accent — prices, rules, eyebrows */
  --c-gold-soft:   #E3C88F;   /* lighter gold — on dark backgrounds */
  --c-cream:       #F7F2EC;   /* page background */
  --c-cream-deep:  #EDE4D9;   /* alternate band background */
  --c-ink:         #2A2024;   /* body text */
  --c-muted:       #766A70;   /* secondary text */
  --c-line:        #DED2C6;   /* hairline borders */
  --c-white:       #FFFFFF;

  /* ---- TYPE ------------------------------------------------------------ */
  --f-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-hero:  clamp(2.9rem, 7vw, 5.6rem);
  --fs-h1:    clamp(2.4rem, 5vw, 4rem);
  --fs-h2:    clamp(2rem, 4vw, 3.1rem);
  --fs-h3:    clamp(1.35rem, 2.2vw, 1.75rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.9375rem;
  --fs-tiny:  0.8125rem;

  /* ---- SPACING & SHAPE ------------------------------------------------- */
  --gap:        28px;
  --section-y:  clamp(64px, 9vw, 112px);
  --container:  1240px;
  --radius:     2px;      /* deliberately sharp — reads more luxury */
  --radius-img: 3px;
  --shadow:     0 18px 50px -22px rgba(27, 10, 16, 0.38);
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--c-wine); color: var(--c-cream); }

:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-wine); color: var(--c-cream);
  padding: 12px 20px; font-size: var(--fs-small);
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   LAYOUT PRIMITIVES  →  Elementor: Flex Container
   ========================================================================== */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 820px; }

.section { padding: var(--section-y) 0; }
.section--tight { padding: clamp(44px, 6vw, 72px) 0; }

.section--dark  { background: var(--c-plum); color: var(--c-cream); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--c-cream); }
.section--dark p { color: rgba(247, 242, 236, 0.76); }

.section--deep { background: var(--c-cream-deep); }
.section--wine { background: var(--c-wine); color: var(--c-cream); }
.section--wine h2 { color: var(--c-cream); }
.section--wine p  { color: rgba(247, 242, 236, 0.82); }

/* Flex row + columns. Percentages account for the gap so nothing wraps early. */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.row--tight  { --gap: 16px; }
.row--wide   { --gap: 44px; }
.row--center { align-items: center; }
.row--middle { justify-content: center; }

.col-2 { flex: 1 1 calc(50% - (var(--gap) / 2)); min-width: 0; }
.col-3 { flex: 1 1 calc(33.3333% - (var(--gap) * 2 / 3)); min-width: 0; }
.col-4 { flex: 1 1 calc(25% - (var(--gap) * 3 / 4)); min-width: 0; }
.col-5 { flex: 1 1 calc(20% - (var(--gap) * 4 / 5)); min-width: 0; }

/* asymmetric split for feature bands */
.col-55 { flex: 1 1 calc(55% - (var(--gap) / 2)); min-width: 0; }
.col-45 { flex: 1 1 calc(45% - (var(--gap) / 2)); min-width: 0; }

.text-center { text-align: center; }

/* ==========================================================================
   TYPOGRAPHIC ACCENTS  →  Elementor: Heading / Text Editor / Divider
   ========================================================================== */
.eyebrow {
  display: block;
  font-family: var(--f-body);
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin: 0 0 18px;
}
.section--dark .eyebrow { color: var(--c-gold-soft); }

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.7;
  color: var(--c-muted);
  max-width: 62ch;
}
.section--dark .lede { color: rgba(247, 242, 236, 0.74); }
.text-center .lede { margin-left: auto; margin-right: auto; }

/* thin gold rule with a diamond in the middle */
.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 26px auto 0;
  max-width: 240px;
}
.rule::before, .rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold));
}
.rule::after { background: linear-gradient(90deg, var(--c-gold), transparent); }
.rule span {
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--c-gold);
  flex: 0 0 auto;
}

.section-head { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.section-head p { margin-top: 4px; }

/* ==========================================================================
   BUTTONS  →  Elementor: Button widget
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 34px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--f-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.28s var(--ease), color 0.28s var(--ease),
              border-color 0.28s var(--ease), transform 0.28s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--wine    { background: var(--c-wine); color: var(--c-cream); }
.btn--wine:hover { background: var(--c-wine-dark); }

.btn--gold    { background: var(--c-gold); color: var(--c-plum); }
.btn--gold:hover { background: var(--c-gold-soft); }

.btn--outline { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn--outline:hover { background: var(--c-ink); color: var(--c-cream); }

.btn--ghost   { background: transparent; color: var(--c-cream); border-color: rgba(247, 242, 236, 0.45); }
.btn--ghost:hover { background: var(--c-cream); color: var(--c-plum); border-color: var(--c-cream); }

.btn--block { display: flex; width: 100%; }
.btn--lg { padding: 19px 44px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.text-center .btn-row { justify-content: center; }

/* text link with animated gold underline */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-wine);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--c-gold);
  transition: gap 0.28s var(--ease), color 0.28s var(--ease);
}
.link-arrow:hover { gap: 16px; }
.section--dark .link-arrow { color: var(--c-gold-soft); }

/* ==========================================================================
   HEADER + NAVIGATION  →  Elementor: Nav Menu widget
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-plum);
  border-bottom: 1px solid rgba(198, 160, 92, 0.22);
}

.announce {
  background: var(--c-wine);
  color: var(--c-cream);
  text-align: center;
  font-size: var(--fs-tiny);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 16px;
}
.announce strong { color: var(--c-gold-soft); font-weight: 600; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
}

.brand { display: flex; align-items: center; gap: 13px; flex: 0 0 auto; }
.brand img { width: 40px; height: auto; }
.brand-name {
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-cream);
  line-height: 1;
}
.brand-name small {
  display: block;
  font-family: var(--f-body);
  font-size: 0.5rem;
  letter-spacing: 0.34em;
  color: var(--c-gold);
  margin-top: 5px;
  font-weight: 500;
}

.nav-links { display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; list-style: none; }
.nav-links a {
  position: relative;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(247, 242, 236, 0.82);
  padding: 6px 0;
  transition: color 0.25s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--c-gold-soft); }
.nav-links a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-cta { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.nav-cta .btn { padding: 12px 24px; font-size: var(--fs-tiny); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 1px solid rgba(198, 160, 92, 0.4);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 1.5px;
  margin: 0 auto;
  background: var(--c-cream);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ==========================================================================
   HERO  →  Elementor: Flex Container with background image + overlay
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(86vh, 780px);
  padding: clamp(72px, 10vw, 128px) 0;
  background: var(--c-plum) center / cover no-repeat;
  overflow: hidden;
}
/* Silent looping background video. Sits below the overlay, which sits below
   the text — hence the explicit z-index ladder: video 0, overlay 1, text 2. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
              rgba(27, 10, 16, 0.94) 0%,
              rgba(27, 10, 16, 0.80) 42%,
              rgba(27, 10, 16, 0.34) 100%);
}
.hero > .container { position: relative; z-index: 2; }

/* Anyone who has asked their system to reduce motion gets the still photo
   instead of a looping video. */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}
.hero-inner { max-width: 680px; }

.hero h1 {
  font-size: var(--fs-hero);
  color: var(--c-cream);
  margin-bottom: 22px;
}
.hero h1 em {
  display: block;
  font-style: italic;
  color: var(--c-gold-soft);
}
.hero p { color: rgba(247, 242, 236, 0.8); font-size: 1.125rem; max-width: 48ch; margin-bottom: 34px; }

/* compact banner used on interior pages */
.page-banner {
  background: var(--c-plum);
  color: var(--c-cream);
  padding: clamp(56px, 8vw, 96px) 0;
  text-align: center;
}
.page-banner h1 { color: var(--c-cream); margin-bottom: 14px; }
.page-banner p { color: rgba(247, 242, 236, 0.72); max-width: 60ch; margin: 0 auto; }

.crumbs {
  font-size: var(--fs-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 242, 236, 0.5);
  margin-bottom: 18px;
}
.crumbs a:hover { color: var(--c-gold-soft); }
.crumbs span { margin: 0 8px; }

/* ==========================================================================
   TRUST BAR  →  Elementor: Icon Box widgets in a flex row
   ========================================================================== */
.trust { background: var(--c-plum-soft); padding: 26px 0; }
.trust .row { justify-content: space-between; --gap: 20px; }
.trust-item {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1 1 auto;
  justify-content: center;
  font-size: var(--fs-tiny);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(247, 242, 236, 0.86);
}
.trust-item svg { width: 19px; height: 19px; flex: 0 0 auto; stroke: var(--c-gold); }

/* ==========================================================================
   PRODUCT CARD  →  Elementor: Image + Heading + Text + Button in a container
   ========================================================================== */
/* flex-grow:0 stops a lone card (e.g. the Rings page) stretching across the
   whole row — a short row keeps card width and leaves the gap on the right. */
.card { display: flex; flex-direction: column; background: transparent; flex-grow: 0; }

/* Catalogue images are shown at their ORIGINAL proportions — no fixed
   aspect-ratio and no cropping. Portrait and landscape photos therefore
   have different heights, so cards in a row are top-aligned rather than
   forced to match. */
.card-media {
  position: relative;
  overflow: hidden;
  background: var(--c-cream-deep);
  border-radius: var(--radius-img);
}
.card-media img {
  width: 100%;
  height: auto;
  transition: transform 0.85s var(--ease);
}
.card:hover .card-media img { transform: scale(1.055); }

.badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  background: var(--c-wine);
  color: var(--c-cream);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: var(--radius);
}
.badge--gold { background: var(--c-gold); color: var(--c-plum); }

.card-body { padding: 18px 2px 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.card-cat {
  font-size: var(--fs-tiny);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 7px;
}
.card-title { font-size: 1.3rem; margin: 0 0 6px; }
.card-title a:hover { color: var(--c-wine); }
.card-desc { font-size: var(--fs-small); color: var(--c-muted); margin: 0 0 12px; }
.card-price {
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--c-wine);
  margin-top: auto;
}

/* ==========================================================================
   FEATURE BAND  →  Elementor: two-column Flex Container
   ========================================================================== */
.feature-img {
  border-radius: var(--radius-img);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--c-plum-soft);
}
.feature-img img { width: 100%; height: 100%; object-fit: cover; }
.feature-img--wide { aspect-ratio: 3 / 2; }

.feature-text { padding: clamp(0px, 2vw, 28px) 0; }
.feature-text h2 { margin-bottom: 18px; }

/* numbered / ticked list  →  Elementor: Icon List widget */
.ticks { list-style: none; margin: 0 0 30px; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: var(--fs-small);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 4px; top: 11px;
  width: 8px; height: 8px;
  transform: rotate(45deg);
  background: var(--c-gold);
}

/* ==========================================================================
   CATEGORY TILES  →  Elementor: Image Box widgets
   ========================================================================== */
.tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: var(--radius-img);
  aspect-ratio: 3 / 4;
  background: var(--c-plum);
}
.tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.tile:hover img { transform: scale(1.07); }
.tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(27, 10, 16, 0.9) 8%, rgba(27, 10, 16, 0.05) 62%);
}
.tile-body { position: relative; z-index: 2; padding: 26px 24px; width: 100%; }
.tile-body h3 { color: var(--c-cream); margin: 0 0 4px; font-size: 1.45rem; }
.tile-body span {
  font-size: var(--fs-tiny);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold-soft);
}

/* ==========================================================================
   ICON BOXES  →  Elementor: Icon Box widget
   ========================================================================== */
.iconbox { text-align: center; padding: 8px; }
.iconbox-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  margin: 0 auto 20px;
  border: 1px solid var(--c-gold);
  border-radius: 50%;
}
.iconbox-icon svg { width: 25px; height: 25px; stroke: var(--c-gold); }
.iconbox h3 { font-size: 1.2rem; margin-bottom: 8px; }
.iconbox p { font-size: var(--fs-small); color: var(--c-muted); margin: 0; }
.section--dark .iconbox p { color: rgba(247, 242, 236, 0.7); }

/* ==========================================================================
   TESTIMONIALS  →  Elementor: Testimonial + Star Rating widgets
   ========================================================================== */
.quote {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px 30px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-img);
}
.section--dark .quote,
.section--deep .quote { background: var(--c-white); }

.stars { display: flex; gap: 3px; margin-bottom: 16px; }
.stars svg { width: 16px; height: 16px; fill: var(--c-gold); }

.quote p {
  font-family: var(--f-display);
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--c-ink);
  margin: 0 0 20px;
}
.quote footer {
  margin-top: auto;
  font-size: var(--fs-tiny);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ==========================================================================
   PRODUCT DETAIL  →  Elementor: Single Product template
   ========================================================================== */
.pdp { padding: clamp(40px, 5vw, 72px) 0 var(--section-y); }

/* Product photo also shown uncropped, at its original proportions. */
.pdp-main {
  border-radius: var(--radius-img);
  overflow: hidden;
  background: var(--c-cream-deep);
}
.pdp-main img { width: 100%; height: auto; }

.pdp-thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.pdp-thumb {
  flex: 0 0 calc(25% - 9px);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-img);
  overflow: hidden;
  background: none;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: border-color 0.25s var(--ease), opacity 0.25s var(--ease);
  opacity: 0.62;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb:hover { opacity: 1; }
.pdp-thumb[aria-current="true"] { border-color: var(--c-wine); opacity: 1; }

.pdp-info { padding-left: clamp(0px, 2vw, 24px); }
.pdp-info h1 { margin-bottom: 10px; }

.pdp-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--f-display);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--c-wine);
  margin-bottom: 6px;
}
.pdp-price small {
  font-family: var(--f-body);
  font-size: var(--fs-tiny);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.pdp-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.pdp-rating span { font-size: var(--fs-tiny); color: var(--c-muted); letter-spacing: 0.06em; }

.pdp-divider { height: 1px; background: var(--c-line); margin: 28px 0; border: 0; }

.swatch-label {
  display: block;
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 12px;
}
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.swatch {
  padding: 11px 20px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-white);
  font-size: var(--fs-small);
  font-family: var(--f-body);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.swatch:hover { border-color: var(--c-wine); }
.swatch[aria-pressed="true"] { background: var(--c-wine); border-color: var(--c-wine); color: var(--c-cream); }

.pdp-meta { font-size: var(--fs-small); color: var(--c-muted); margin-top: 20px; }
.pdp-meta strong { color: var(--c-ink); font-weight: 600; }

/* ---- Accordion  →  Elementor: Accordion widget (native <details>) ------- */
.acc { border-top: 1px solid var(--c-line); margin-top: 32px; }
.acc details { border-bottom: 1px solid var(--c-line); }
.acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-ink);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+";
  font-family: var(--f-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-gold);
  transition: transform 0.3s var(--ease);
  flex: 0 0 auto;
}
.acc details[open] summary::after { content: "\2013"; }
.acc-body { padding: 0 0 22px; font-size: var(--fs-small); color: var(--c-muted); }
.acc-body ul { margin: 0; padding-left: 20px; }
.acc-body li { margin-bottom: 7px; }

/* ==========================================================================
   GALLERY STRIP  →  Elementor: Gallery / Image Carousel widget
   ========================================================================== */
.strip { display: flex; flex-wrap: wrap; gap: 12px; }
.strip a {
  flex: 1 1 calc(16.666% - 10px);
  min-width: 140px;
  overflow: hidden;
  border-radius: var(--radius-img);
  aspect-ratio: 1 / 1;
}
.strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease), opacity 0.35s var(--ease); }
.strip a:hover img { transform: scale(1.09); opacity: 0.86; }

/* ==========================================================================
   FORMS  →  Elementor: Form widget
   ========================================================================== */
.form-row { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 18px; }
.field { flex: 1 1 240px; display: flex; flex-direction: column; }
.field--full { flex: 1 1 100%; }
.field label {
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 9px;
}
.field input, .field select, .field textarea {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 14px 16px;
  width: 100%;
  transition: border-color 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--c-wine);
}
.form-note { font-size: var(--fs-tiny); color: var(--c-muted); margin-top: 14px; }

/* ==========================================================================
   PROSE (about / legal pages)  →  Elementor: Text Editor widget
   ========================================================================== */
.prose h2 { margin-top: 2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.6em; font-size: 1.3rem; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1.3em; }
.prose li { margin-bottom: 9px; }
.prose strong { color: var(--c-ink); font-weight: 600; }
.prose .updated { font-size: var(--fs-tiny); color: var(--c-muted); letter-spacing: 0.1em; text-transform: uppercase; }

.callout {
  background: var(--c-cream-deep);
  border-left: 3px solid var(--c-gold);
  padding: 24px 28px;
  margin: 30px 0;
  border-radius: var(--radius);
}
.callout p { font-size: var(--fs-small); margin: 0; }
.callout p + p { margin-top: 12px; }

/* ==========================================================================
   FOOTER  →  Elementor: Footer template
   ========================================================================== */
.footer { background: var(--c-plum); color: rgba(247, 242, 236, 0.68); padding: clamp(56px, 7vw, 84px) 0 0; }
.footer h4 {
  font-family: var(--f-body);
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin: 0 0 20px;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 11px; font-size: var(--fs-small); }
.footer a { transition: color 0.25s var(--ease); }
.footer a:hover { color: var(--c-gold-soft); }
.footer p { font-size: var(--fs-small); }

.footer-brand img { width: 52px; margin-bottom: 18px; }
.footer-brand .brand-name { color: var(--c-cream); font-size: 1.25rem; margin-bottom: 16px; }

.socials { display: flex; gap: 12px; margin-top: 20px; }
.socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(198, 160, 92, 0.4);
  border-radius: 50%;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.socials svg { width: 17px; height: 17px; fill: var(--c-gold); }
.socials a:hover { background: var(--c-wine); border-color: var(--c-wine); }

.footer-bottom {
  margin-top: clamp(40px, 5vw, 60px);
  padding: 24px 0;
  border-top: 1px solid rgba(198, 160, 92, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-tiny);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 22px; }

/* floating WhatsApp button */
.wa-float {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.5);
  transition: transform 0.28s var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 29px; height: 29px; fill: #fff; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Responsive overrides change flex-basis ONLY, never the `flex` shorthand.
   The shorthand would reset flex-grow and undo `.card { flex-grow: 0 }`,
   which is what stops a lone product card stretching across the row. */
@media (max-width: 1024px) {
  .col-4 { flex-basis: calc(50% - (var(--gap) / 2)); }
  .col-5 { flex-basis: calc(33.3333% - (var(--gap) * 2 / 3)); }
  .strip a { flex: 1 1 calc(33.3333% - 8px); }
  .pdp-info { padding-left: 0; }
}

@media (max-width: 900px) {
  /* ---- mobile navigation drawer ---- */
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: 0; right: 0;
    z-index: 120;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: min(320px, 84vw);
    height: 100dvh;
    padding: 96px 32px 32px;
    background: var(--c-plum);
    border-left: 1px solid rgba(198, 160, 92, 0.25);
    transform: translateX(100%);
    transition: transform 0.36s var(--ease);
    overflow-y: auto;
  }
  .nav-links.is-open { transform: translateX(0); }
  .nav-links li { width: 100%; border-bottom: 1px solid rgba(198, 160, 92, 0.14); }
  .nav-links a { display: block; padding: 16px 0; font-size: 1.0625rem; }
  .nav-links a::after { display: none; }

  /* The backdrop must sit BELOW the header (z-index 100), not above it.
     .header is `position: sticky` with a z-index, which makes it a stacking
     context — so the drawer inside it can never rise above the header's 100,
     no matter that .nav-links asks for 120. A backdrop at 110 therefore
     covered the open menu and swallowed every tap on a link.
     95 puts it under the header (100) but over the floating WhatsApp button
     (90), so the page dims properly while the header, and the drawer inside
     it, stay on top and clickable. */
  .nav-backdrop {
    position: fixed; inset: 0;
    z-index: 95;
    background: rgba(10, 4, 6, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }

  body.nav-open { overflow: hidden; }

  .nav-cta .btn { display: none; }
  .nav-toggle { position: relative; z-index: 130; }

  .col-2, .col-3, .col-55, .col-45 { flex-basis: 100%; }
  .col-4 { flex-basis: calc(50% - (var(--gap) / 2)); }

  /* image always above text on mobile regardless of source order */
  .row--flip { flex-direction: column-reverse; }

  .trust .row { --gap: 14px; }
  .trust-item { flex: 1 1 calc(50% - 7px); justify-content: flex-start; }
}

@media (max-width: 560px) {
  :root { --gap: 16px; }
  .col-4 { flex-basis: 100%; }
  .col-5 { flex-basis: calc(50% - (var(--gap) / 2)); }
  .strip a { flex: 1 1 calc(50% - 6px); }
  .pdp-thumb { flex: 0 0 calc(25% - 9px); }

  /* product cards stay two-up on phones — a single column makes the shop
     page endlessly long and is not how people browse jewellery */
  .card.col-4, .card.col-3 { flex-basis: calc(50% - (var(--gap) / 2)); }
  .card .card-title { font-size: 1.075rem; }
  .card .card-desc { display: none; }
  .card .card-price { font-size: 1.15rem; }

  /* only the large/full-width buttons go full width, so the shop filter
     row stays inline and wraps instead of becoming a tall stack */
  .btn--lg, .btn--block { width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .hero { min-height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   BAG, CHECKOUT & ORDER PAGES
   Added for cart + Razorpay / cash-on-delivery checkout.
   Uses the same tokens as everything above — restyle from :root as usual.
   ========================================================================== */

/* ---- header bag button -------------------------------------------------- */
.bag-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-right: 4px;
  background: none;
  border: 1px solid rgba(247, 242, 236, 0.28);
  border-radius: var(--radius);
  color: var(--c-cream);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.bag-btn:hover { border-color: var(--c-gold); background: rgba(198, 160, 92, .12); }
.bag-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.bag-btn .bag-count {
  position: absolute; top: -7px; right: -7px;
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--c-gold); color: var(--c-plum);
  border-radius: 10px;
  font-size: 11px; font-weight: 600; line-height: 19px;
  font-variant-numeric: tabular-nums;
}

/* ---- slide-in bag ------------------------------------------------------- */
body.bag-open { overflow: hidden; }

.bag { position: fixed; inset: 0; z-index: 120; }
.bag-scrim {
  position: absolute; inset: 0;
  background: rgba(27, 10, 16, .55);
  opacity: 0; transition: opacity .22s var(--ease);
}
.bag.is-open .bag-scrim { opacity: 1; }

.bag-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  background: var(--c-cream);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .24s var(--ease);
  box-shadow: var(--shadow);
}
.bag.is-open .bag-panel { transform: translateX(0); }

.bag-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px;
  background: var(--c-plum); color: var(--c-cream);
}
.bag-head h2 {
  margin: 0; font-family: var(--f-display);
  font-size: 1.5rem; font-weight: 600;
}
.bag-x {
  background: none; border: 0; color: var(--c-cream);
  font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.bag-x:hover { color: var(--c-gold); }

.bag-body { flex: 1; overflow-y: auto; padding: 8px 22px; }
.bag-empty { text-align: center; color: var(--c-muted); padding: 46px 0; }
.bag-empty a { color: var(--c-wine); }

.bag-line {
  display: flex; gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line);
}
.bag-line:last-child { border-bottom: 0; }
.bag-thumb { flex: none; width: 68px; height: 68px; overflow: hidden; border-radius: var(--radius-img); }
.bag-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bag-line-main { flex: 1; min-width: 0; }
.bag-line-name {
  display: block; font-weight: 500; color: var(--c-ink);
  text-decoration: none; font-size: .95rem; line-height: 1.35;
}
.bag-line-name:hover { color: var(--c-wine); }
.bag-line-price { font-size: .82rem; color: var(--c-muted); margin: 3px 0 9px; }
.bag-line-side { text-align: right; flex: none; }
.bag-line-total { font-weight: 600; font-variant-numeric: tabular-nums; }
.bag-remove {
  background: none; border: 0; padding: 6px 0 0;
  font-size: .78rem; color: var(--c-muted);
  text-decoration: underline; cursor: pointer;
}
.bag-remove:hover { color: var(--c-wine); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--c-line); border-radius: var(--radius); }
.qty button {
  width: 28px; height: 28px;
  background: none; border: 0; cursor: pointer;
  color: var(--c-ink); font-size: 1rem; line-height: 1;
}
.qty button:hover { background: var(--c-cream-deep); }
.qty span {
  min-width: 30px; text-align: center;
  font-size: .88rem; font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--c-line); border-right: 1px solid var(--c-line);
  line-height: 28px;
}

.bag-foot { padding: 18px 22px 22px; border-top: 1px solid var(--c-line); background: var(--c-cream-deep); }
.bag-nudge {
  margin: 0 0 14px; font-size: .82rem; text-align: center;
  color: var(--c-muted); letter-spacing: .02em;
}
.bag-nudge--won { color: var(--c-wine); font-weight: 500; }
.bag-sum { display: flex; justify-content: space-between; font-size: .92rem; margin-bottom: 7px; }
.bag-sum--soft { color: var(--c-muted); }
.bag-sum--total {
  border-top: 1px solid var(--c-line);
  margin-top: 11px; padding-top: 11px;
  font-size: 1.05rem; font-weight: 600;
}
.bag-sum strong { font-variant-numeric: tabular-nums; }
.bag-foot .btn { margin-top: 14px; }
.bag-keep {
  display: block; text-align: center; margin-top: 12px;
  font-size: .84rem; color: var(--c-muted);
}

/* ---- product page buy box ---------------------------------------------- */
.pdp-buy { display: flex; gap: 12px; align-items: stretch; margin-bottom: 12px; }
.pdp-buy .qty { flex: none; }
.pdp-buy .qty select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: none;
  padding: 0 14px; height: 100%;
  font: inherit; font-size: .95rem; color: var(--c-ink);
  cursor: pointer; text-align: center;
}
.pdp-buy .btn { flex: 1; }

/* ---- shop card add button ---------------------------------------------- */
.card-add {
  width: 100%; margin-top: 12px;
  background: none; border: 1px solid var(--c-wine);
  color: var(--c-wine); border-radius: var(--radius);
  padding: 9px 12px;
  font: inherit; font-size: .82rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.card-add:hover { background: var(--c-wine); color: var(--c-cream); }

/* ---- cart & checkout pages ---------------------------------------------- */
.co-grid {
  display: flex; flex-wrap: wrap; gap: 46px;
  align-items: flex-start;
}
.co-main { flex: 1 1 420px; min-width: 0; }
.co-side { flex: 0 1 350px; position: sticky; top: 24px; }

.co-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 26px;
}
.co-card + .co-card { margin-top: 20px; }
.co-card h2 {
  font-family: var(--f-display); font-size: 1.6rem;
  font-weight: 600; margin: 0 0 4px;
}
.co-card .co-hint { color: var(--c-muted); font-size: .9rem; margin: 0 0 20px; }

.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-muted);
  margin-bottom: 6px; font-weight: 500;
}
.field input, .field textarea, .field select {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-white); color: var(--c-ink);
  font: inherit; font-size: .95rem;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--c-wine);
  box-shadow: 0 0 0 3px rgba(106, 42, 59, .1);
}
.field textarea { min-height: 84px; resize: vertical; }
.field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.field-row .field { flex: 1 1 150px; }

/* ---- payment method choice ---------------------------------------------- */
.pay-opt {
  display: block; position: relative;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 16px 18px 16px 48px;
  cursor: pointer; margin-bottom: 12px;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.pay-opt:hover { border-color: var(--c-gold); }
.pay-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pay-opt::before {
  content: ""; position: absolute; left: 18px; top: 20px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--c-muted);
}
.pay-opt:has(input:checked) { border-color: var(--c-wine); background: rgba(106, 42, 59, .04); }
.pay-opt:has(input:checked)::before { border-color: var(--c-wine); border-width: 5px; }
.pay-opt:has(input:focus-visible) { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.pay-opt b { display: block; font-weight: 600; font-size: .98rem; }
.pay-opt span { display: block; color: var(--c-muted); font-size: .86rem; margin-top: 3px; }

/* ---- order summary ------------------------------------------------------ */
.sum-line {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--c-line);
}
.sum-line img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--radius-img); flex: none; }
.sum-line-main { flex: 1; min-width: 0; font-size: .9rem; }
.sum-line-main small { display: block; color: var(--c-muted); font-size: .8rem; margin-top: 2px; }
.sum-line b { font-variant-numeric: tabular-nums; font-weight: 500; }

.sum-row { display: flex; justify-content: space-between; font-size: .93rem; padding: 7px 0; }
.sum-row strong { font-variant-numeric: tabular-nums; }
.sum-row--total {
  border-top: 1px solid var(--c-line); margin-top: 8px; padding-top: 14px;
  font-size: 1.15rem; font-weight: 600;
}
.sum-row--due { color: var(--c-wine); font-weight: 500; }

.co-msg {
  padding: 13px 16px; border-radius: var(--radius);
  font-size: .9rem; margin-bottom: 18px;
}
.co-msg--bad { background: #FBEDEF; color: #7A2331; border: 1px solid #E8C9CE; }
.co-msg--info { background: var(--c-cream-deep); color: var(--c-ink); border: 1px solid var(--c-line); }

.co-trust {
  margin-top: 16px; font-size: .8rem; color: var(--c-muted);
  text-align: center; line-height: 1.6;
}

.btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ---- thank you ---------------------------------------------------------- */
.done { text-align: center; max-width: 620px; margin: 0 auto; }
.done-mark {
  width: 62px; height: 62px; margin: 0 auto 22px;
  border: 1px solid var(--c-gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-gold); font-size: 1.7rem;
}
.done-ref {
  display: inline-block; margin: 6px 0 22px;
  font-family: var(--f-body); letter-spacing: .18em;
  background: var(--c-cream-deep); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 9px 18px;
  font-size: .95rem; font-weight: 600;
}

@media (max-width: 900px) {
  .co-side { position: static; flex-basis: 100%; }
  .co-grid { gap: 28px; }
}
@media (max-width: 560px) {
  .pdp-buy { flex-wrap: wrap; }
  .pdp-buy .btn { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .bag-panel, .bag-scrim { transition: none; }
}

/* ==========================================================================
   FOUNDER BLOCK (about page)
   ========================================================================== */
.founder { max-width: 680px; margin: 0 auto; text-align: center; }
.founder h2 { margin-top: 6px; }

.founder-note {
  text-align: left;
  margin: 22px auto 0;
  max-width: 60ch;          /* keeps the line length comfortable to read */
}
.founder-note p { margin: 0 0 16px; }
.founder-note p:last-child { margin-bottom: 0; }

.founder-sign {
  margin: 30px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
  display: inline-block;
  min-width: 240px;
}
.founder-sign strong {
  display: block;
  font-family: var(--f-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--c-wine);
}
.founder-sign span {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-tiny);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ==========================================================================
   SOLD OUT
   Shown when a product is switched to "Sold out" in the product editor.
   ========================================================================== */
.badge--soldout {
  background: var(--c-plum);
  color: var(--c-cream);
  border: 1px solid rgba(198, 160, 92, 0.4);
}

.card--soldout .card-media img { opacity: 0.55; filter: saturate(0.7); }
.card--soldout .card-price { color: var(--c-muted); }

.card-soldout {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 9px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  text-align: center;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.pdp-soldout {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--c-cream-deep);
  border-left: 2px solid var(--c-wine);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.95rem;
  color: var(--c-ink);
}