/** Shopify CDN: Minification failed

Line 4031:0 Unexpected "}"

**/
/* ==========================================================================
   Oraani design system
   Loaded after the Jhango base styles, so it intentionally overrides them.
   Brand: background #FFFAF7 · highlight 1 #4B1EB7 · highlight 2 #E2C8F3
   ========================================================================== */

:root {
  /* Surfaces. #FFFAF7 stays the brand base per the brief; depth comes from
     banding the page in progressively warmer tones rather than from tinting
     the base itself. A flat near-white page is what reads "cheap". */
  --or-bg: #fffaf7;
  --or-bg-sunk: #f6ece5;
  --or-sand: #efe3d9;
  --or-oat: #e7d9cd;
  --or-ink: #17111a;
  --or-ink-soft: #5b5060;
  --or-line: #e0d2c8;

  --or-purple: #4b1eb7;
  --or-purple-deep: #35158a;
  --or-lilac: #e2c8f3;
  --or-lilac-soft: #f2e6fa;

  --or-success: #1f7a4d;
  --or-success-soft: #e7f4ed;
  --or-sale: #b3123f;

  --or-display: var(--bs-headings-font-family, "Prata", "Playfair Display", Georgia, serif);
  --or-sans: var(--bs-body-font-family, "Jost", system-ui, sans-serif);

  /* Luxury reads square. Rounded corners read app/SaaS. Pills stay pills so
     chips remain deliberately different from cards. */
  --or-radius: 0.125rem;
  --or-radius-lg: 0.25rem;
  --or-radius-pill: 999px;

  --or-shadow: 0 1px 2px rgba(23, 17, 26, 0.05);
  --or-shadow-lg: 0 24px 60px -32px rgba(23, 17, 26, 0.45);

  --or-gutter: 1.25rem;
  --or-mobile-nav-h: 62px;
  --or-arch: 46% 46% 0 0 / 30% 30% 0 0;
}

@media (min-width: 992px) {
  :root { --or-gutter: 2.5rem; }
}

body {
  background-color: var(--or-bg);
  color: var(--or-ink);
  -webkit-font-smoothing: antialiased;
}

/* Bottom nav occupies the last 62px on phones — keep content clear of it. */
@media (max-width: 991.98px) {
  body.has-oraani-mobile-nav { padding-bottom: var(--or-mobile-nav-h); }
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.or-display,
.or-section-title {
  font-family: var(--or-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--or-ink);
}

.or-section-title {
  font-size: clamp(1.65rem, 1.1rem + 2.4vw, 3rem);
  margin: 0;
}

.or-section-sub {
  font-family: var(--or-sans);
  font-size: clamp(0.875rem, 0.82rem + 0.3vw, 1.0625rem);
  line-height: 1.55;
  color: var(--or-ink-soft);
  max-width: 56ch;
  margin: 0.75rem 0 0;
}

.or-eyebrow {
  font-family: var(--or-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or-purple);
  margin: 0 0 0.75rem;
  display: block;
}

.or-italic { font-style: italic; }
.or-purple { color: var(--or-purple); }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.or-section { padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 5rem); }
.or-section--tight { padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.or-section--sand { background: var(--or-sand); }
.or-section--lilac { background: var(--or-lilac-soft); }
.or-section--ink { background: var(--or-ink); color: #fff; }
.or-section--ink .or-section-title,
.or-section--ink .or-section-sub { color: #fff; }
.or-section--ink .or-section-sub { color: rgba(255, 255, 255, 0.72); }
.or-section--ink .or-eyebrow { color: var(--or-lilac); }

.or-container {
  width: 100%;
  max-width: var(--bs-container-max-width, 1600px);
  margin-inline: auto;
  padding-inline: var(--or-gutter);
}

.or-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.25rem, 0.9rem + 1.2vw, 2.25rem);
}

.or-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.or-head--center .or-section-sub { margin-inline: auto; }

.or-head__link {
  flex: none;
  font-family: var(--or-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--or-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--or-ink);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}

.or-head__link:hover { color: var(--or-purple); border-color: var(--or-purple); }

@media (max-width: 575.98px) {
  .or-head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .or-head--center { align-items: center; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

/* Ink is the default action colour, not purple. A vivid purple on every button
   reads SaaS; used sparingly it reads brand. */
.or-btn {
  --or-btn-bg: var(--or-ink);
  --or-btn-fg: #fff;
  --or-btn-bd: var(--or-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--or-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: 0.9rem 1.6rem;
  border-radius: var(--or-radius);
  border: 1px solid var(--or-btn-bd);
  background: var(--or-btn-bg);
  color: var(--or-btn-fg);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.or-btn:hover { color: var(--or-btn-fg); transform: translateY(-1px); box-shadow: var(--or-shadow-lg); }
.or-btn:active { transform: translateY(0); }
.or-btn:disabled, .or-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.or-btn--ghost { --or-btn-bg: transparent; --or-btn-fg: var(--or-ink); --or-btn-bd: var(--or-ink); }
.or-btn--ghost:hover { --or-btn-bg: var(--or-ink); --or-btn-fg: #fff; }
.or-btn--light { --or-btn-bg: #fff; --or-btn-fg: var(--or-ink); --or-btn-bd: #fff; }
.or-btn--ink { --or-btn-bg: var(--or-ink); --or-btn-fg: #fff; --or-btn-bd: var(--or-ink); }
.or-btn--purple { --or-btn-bg: var(--or-purple); --or-btn-fg: #fff; --or-btn-bd: var(--or-purple); }
.or-btn--block { width: 100%; }
.or-btn--lg { padding: 1.05rem 1.75rem; font-size: 1rem; }

/* --------------------------------------------------------------------------
   Texture & shapes — the things that separate "clean" from "premium"
   -------------------------------------------------------------------------- */

/* A barely-there grain so large flat areas aren't dead digital colour. */
.or-grain { position: relative; }
.or-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(23, 17, 26, 0.055) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* Fine diagonal weave, used on the deepest bands. */
.or-weave {
  background-image:
    repeating-linear-gradient(45deg, rgba(23, 17, 26, 0.028) 0 1px, transparent 1px 7px);
}

/* Arch — the strongest single "lingerie premium" motif. */
.or-archtop { border-radius: var(--or-arch); overflow: hidden; }

/* Hairline rule with a centred diamond, for section breaks. */
.or-rule {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--or-line);
}
.or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.or-rule__mark { width: 6px; height: 6px; rotate: 45deg; background: var(--or-purple); flex: none; }

/* --------------------------------------------------------------------------
   Pills & badges
   -------------------------------------------------------------------------- */

.or-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--or-sans);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: var(--or-lilac-soft);
  color: var(--or-purple-deep);
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}

.or-pill--outline { background: #fff; border-color: var(--or-line); color: var(--or-ink); }
.or-pill--success { background: var(--or-success-soft); color: var(--or-success); }
.or-pill--sale { background: #fdeaf1; color: var(--or-sale); }
.or-pill--ink { background: var(--or-ink); color: #fff; }

/* Horizontal scroller used by story bars, category chips and filter rails. */
.or-rail {
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block: 0.25rem;
}

.or-rail::-webkit-scrollbar { display: none; }
.or-rail > * { scroll-snap-align: start; flex: none; }

/* Let rails bleed to the screen edge on phones so the last chip peeks. */
@media (max-width: 767.98px) {
  .or-rail--bleed {
    margin-inline: calc(var(--or-gutter) * -1);
    padding-inline: var(--or-gutter);
  }
}

/* --------------------------------------------------------------------------
   Product card polish (applies to the theme's existing product-card markup)
   -------------------------------------------------------------------------- */

.product-card .product-card-img-wrapper { border-radius: var(--or-radius); overflow: hidden; background: var(--or-bg-sunk); }
.product-card .product-card-title { font-family: var(--or-sans); font-size: 0.875rem; font-weight: 500; line-height: 1.4; }
.product-card .btn-wishlist { backdrop-filter: blur(6px); background: rgba(255, 255, 255, 0.85); border-radius: 999px; }
.product-card .btn-wishlist.active { color: var(--or-sale); }
.product-card .btn-wishlist.active .svg-icon-heart { fill: currentColor; }

/* ==========================================================================
   Components
   ========================================================================== */

/* ------------------------------------------------------------- story menu */

.or-story-bar { padding-top: 1rem; padding-bottom: 0.5rem; }
.or-story-bar--mobile-only { display: none; }
@media (max-width: 991.98px) { .or-story-bar--mobile-only { display: block; } }

.or-story-bar__title { margin-bottom: 0.75rem; }
.or-story-bar__rail { gap: 1rem; }

.or-story__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 76px;
  text-decoration: none;
  color: var(--or-ink);
}

.or-story__ring {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  padding: 2.5px;
  background: var(--or-line);
}

.or-story__ring--live {
  background: conic-gradient(from 210deg, var(--or-purple), var(--or-lilac), #f0a3c8, var(--or-purple));
}

.or-story__inner {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  padding: 2.5px;
  background: var(--or-bg);
}

.or-story__inner img,
.or-story__placeholder {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  background: var(--or-bg-sunk);
}

.or-story__label {
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.or-story__link:hover .or-story__label { color: var(--or-purple); }

@media (min-width: 992px) {
  .or-story__link { width: 92px; }
  .or-story__ring { width: 88px; height: 88px; }
  .or-story__label { font-size: 0.75rem; }
}

/* ------------------------------------------------------------------- hero */

.or-hero { position: relative; display: block; }

.or-hero__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.or-hero__viewport::-webkit-scrollbar { display: none; }

.or-hero__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--or-bg-sunk);
}

.or-hero__media { display: block; }

.or-hero__media img,
.or-hero__placeholder {
  display: block;
  width: 100%;
  height: clamp(420px, 62vh, 720px);
  object-fit: cover;
}

@media (max-width: 767.98px) {
  .or-hero__media img,
  .or-hero__placeholder { height: clamp(440px, 78vh, 640px); }
}

.or-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, calc(var(--scrim) + 0.25)), rgba(0, 0, 0, var(--scrim)) 55%, rgba(0, 0, 0, calc(var(--scrim) * 0.4)));
  pointer-events: none;
}

.or-hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  pointer-events: none;
}

.or-hero__content .or-container { width: 100%; }
.or-hero__content--center .or-hero__copy { margin-inline: auto; text-align: center; }
.or-hero__content--right .or-hero__copy { margin-left: auto; text-align: right; }

.or-hero__copy { max-width: 34rem; color: var(--hero-fg, #fff); }

.or-hero__eyebrow {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 0.85rem;
}

.or-hero__title {
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  color: inherit;
}

.or-hero__sub {
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem);
  line-height: 1.5;
  margin: 0.85rem 0 0;
  opacity: 0.92;
}

.or-hero__cta { margin-top: 1.5rem; pointer-events: none; }

.or-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--or-ink);
  cursor: pointer;
  transition: background 0.2s;
}

.or-hero__arrow:hover { background: #fff; }
.or-hero__arrow--prev { left: 1.25rem; }
.or-hero__arrow--next { right: 1.25rem; }

@media (min-width: 992px) { .or-hero__arrow { display: grid; } }

.or-hero__dots {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
}

.or-hero__dot {
  width: 22px;
  height: 3px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background 0.25s, width 0.25s;
}

.or-hero__dot[aria-selected="true"] { background: #fff; width: 38px; }

/* --------------------------------------------------------- outfit finder */

.or-outfit__grid { gap: 0.875rem; }

.or-outfit__item { width: 46vw; max-width: 220px; }

@media (min-width: 768px) {
  .or-outfit__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
    gap: 1.25rem;
  }
  .or-outfit__item { width: auto; max-width: none; }
}

@media (min-width: 1200px) {
  .or-outfit__grid { grid-template-columns: repeat(7, 1fr); }
}

.or-outfit__card { display: block; text-decoration: none; color: var(--or-ink); }

.or-outfit__media {
  display: block;
  border-radius: var(--or-radius);
  overflow: hidden;
  background: var(--or-bg-sunk);
  aspect-ratio: 4 / 5;
}

.or-outfit__media img,
.or-outfit__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.or-outfit__card:hover .or-outfit__media img { transform: scale(1.05); }

.or-outfit__body { display: block; padding-top: 0.75rem; }

.or-outfit__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.or-outfit__answer {
  display: block;
  font-size: 0.75rem;
  color: var(--or-ink-soft);
  margin-top: 0.2rem;
}

.or-outfit__card:hover .or-outfit__label { color: var(--or-purple); }

/* ------------------------------------------------------------- mood grid */

.or-mood__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.875rem;
}

@media (min-width: 768px) { .or-mood__grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
@media (min-width: 1200px) { .or-mood__grid { grid-template-columns: repeat(6, 1fr); } }

.or-mood__card {
  position: relative;
  display: block;
  border-radius: var(--or-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  aspect-ratio: 3 / 4;
  background: var(--mood-tint, var(--or-purple));
}

.or-mood__media { position: absolute; inset: 0; }

.or-mood__media img,
.or-mood__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.82;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.3s;
}

.or-mood__card:hover .or-mood__media img { transform: scale(1.06); opacity: 0.7; }

.or-mood__body {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  padding: 1rem 0.9rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
}

.or-mood__label {
  display: block;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  line-height: 1.15;
  color: #fff;
}

.or-mood__note {
  display: block;
  font-size: 0.6875rem;
  opacity: 0.85;
  margin-top: 0.25rem;
}

.or-mood__cta {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.6rem;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s, transform 0.25s;
}

.or-mood__card:hover .or-mood__cta { opacity: 1; transform: translateY(0); }

@media (hover: none) { .or-mood__cta { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ why oraani */

.or-why__layout { display: grid; gap: 2.5rem; }

@media (min-width: 992px) {
  .or-why__layout { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
}

.or-why__body { margin-top: 1rem; color: var(--or-ink-soft); font-size: 1rem; line-height: 1.6; max-width: 46ch; }
.or-why__body p:last-child { margin-bottom: 0; }

.or-why__image { margin-top: 1.75rem; border-radius: var(--or-radius-lg); overflow: hidden; }
.or-why__image img { width: 100%; height: auto; display: block; }
.or-why__cta { margin-top: 1.75rem; }

.or-why__pillars { display: grid; gap: 0.875rem; }

.or-why__pillar {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--or-line);
  border-radius: var(--or-radius);
}

.or-why__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--or-purple);
  color: #fff;
}

.or-why__pillar-title { font-family: var(--or-sans); font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem; }
.or-why__pillar-text { font-size: 0.875rem; line-height: 1.5; color: var(--or-ink-soft); margin: 0; }

/* --------------------------------------------------------------- founder */

.or-founder__layout { display: grid; gap: 2.5rem; align-items: center; }

@media (min-width: 992px) {
  .or-founder__layout { grid-template-columns: 5fr 7fr; gap: 4rem; }
}

.or-founder__portrait { position: relative; margin: 0; border-radius: var(--or-radius-lg); overflow: hidden; }
.or-founder__portrait img,
.or-founder__placeholder { width: 100%; height: auto; display: block; }
.or-founder__badge { position: absolute; left: 1rem; bottom: 1rem; }

.or-founder__quote {
  font-family: var(--or-display);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.75rem);
  line-height: 1.35;
  margin: 1.25rem 0 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--or-lilac);
}

.or-founder__quote p:last-child { margin-bottom: 0; }
.or-founder__body { margin-top: 1.25rem; line-height: 1.6; opacity: 0.85; max-width: 52ch; }
.or-founder__body p:last-child { margin-bottom: 0; }

.or-founder__sign { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.or-founder__signature { height: 44px; width: auto; }
.or-founder__name { font-weight: 600; margin: 0; }
.or-founder__role { font-size: 0.8125rem; opacity: 0.7; margin: 0; }

.or-founder__stats { display: flex; flex-wrap: wrap; gap: 2rem; margin: 1.75rem 0 0; }
.or-founder__stat-value { display: block; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); line-height: 1; }
.or-founder__stat-label { display: block; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.65; margin-top: 0.35rem; }
.or-founder__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.or-section--ink .or-founder__stat-value,
.or-section--ink .or-founder__name { color: #fff; }
.or-section--ink .or-btn--ghost { --or-btn-fg: #fff; --or-btn-bd: rgba(255, 255, 255, 0.5); }
.or-section--ink .or-btn--ghost:hover { --or-btn-bg: #fff; --or-btn-fg: var(--or-ink); }

/* ---------------------------------------------------- mobile bottom nav */

.or-mnav { display: none; }

@media (max-width: 991.98px) {
  .or-mnav {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1035;
    transition: transform 0.25s ease;
  }
  .or-mnav.is-tucked { transform: translateY(100%); }
}

.or-mnav__bar {
  display: flex;
  align-items: stretch;
  height: var(--or-mobile-nav-h);
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255, 250, 247, 0.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--or-line);
  box-shadow: 0 -6px 24px -18px rgba(26, 17, 25, 0.5);
}

.or-mnav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--or-ink-soft);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding-top: 2px;
}

.or-mnav__item.is-active { color: var(--or-purple); }
.or-mnav__icon { position: relative; display: grid; place-items: center; }
.or-mnav__label { line-height: 1; }

.or-mnav__icon .badge {
  position: absolute;
  top: -5px;
  right: -8px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  font-size: 0.5625rem;
  line-height: 15px;
  border-radius: 999px;
  background: var(--or-purple);
  color: #fff;
}

.or-mnav__icon .badge[data-count="0"],
.or-mnav__icon .badge:empty { display: none; }

.or-mnav__founder {
  position: absolute;
  left: 1rem;          /* opposite side to the chat launcher */
  top: -30px;
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.or-mnav__founder-ring {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  padding: 2.5px;
  background: conic-gradient(from 210deg, var(--or-purple), var(--or-lilac), #f0a3c8, var(--or-purple));
  box-shadow: var(--or-shadow-lg);
}

.or-mnav__founder-ring img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  border: 2.5px solid var(--or-bg);
}

.or-mnav__founder-dot {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #22c55e;
  border: 2.5px solid var(--or-bg);
}

/* -------------------------------------------------------- concierge chat */

.or-chat { position: fixed; right: 1rem; bottom: 1rem; z-index: 1040; }

@media (max-width: 991.98px) {
  .or-chat { bottom: calc(var(--or-mobile-nav-h) + 0.75rem); }
}

.or-chat__launcher {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--or-purple);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--or-shadow-lg);
  position: relative;
  transition: transform 0.2s;
}

.or-chat__launcher:hover { transform: scale(1.05); }
.or-chat.is-open .or-chat__launcher { transform: scale(0.9); opacity: 0.75; }

.or-chat__launcher-face { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; overflow: hidden; }
.or-chat__launcher-face img { width: 100%; height: 100%; object-fit: cover; }

.or-chat__launcher-dot {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #22c55e;
  border: 2px solid var(--or-purple);
}

.or-chat__teaser {
  position: absolute;
  right: 68px;
  bottom: 6px;
  width: max-content;
  max-width: 58vw;
  padding: 0.7rem 2rem 0.7rem 0.9rem;
  background: #fff;
  border: 1px solid var(--or-line);
  border-radius: var(--or-radius);
  box-shadow: var(--or-shadow-lg);
  font-size: 0.8125rem;
}

.or-chat__teaser p { margin: 0; }

.or-chat__teaser-close {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--or-ink-soft);
  cursor: pointer;
}

.or-chat__panel {
  position: absolute;
  right: 0;
  bottom: 68px;
  display: flex;
  flex-direction: column;
  width: min(370px, calc(100vw - 2rem));
  height: min(540px, calc(100vh - 8rem));
  background: #fff;
  border: 1px solid var(--or-line);
  border-radius: var(--or-radius-lg);
  box-shadow: var(--or-shadow-lg);
  overflow: hidden;
}

.or-chat__header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  background: var(--or-purple);
  color: #fff;
}

.or-chat__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.2); flex: none; }
.or-chat__avatar img { width: 100%; height: 100%; object-fit: cover; }
.or-chat__ident { flex: 1; min-width: 0; }
.or-chat__title { font-size: 0.875rem; font-weight: 600; margin: 0; }
.or-chat__status { font-size: 0.6875rem; opacity: 0.8; margin: 0; }
.or-chat__close { display: grid; place-items: center; width: 30px; height: 30px; border: none; background: none; color: #fff; cursor: pointer; flex: none; }

.or-chat__log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; background: var(--or-bg); }

.or-chat__msg {
  max-width: 86%;
  padding: 0.7rem 0.9rem;
  border-radius: var(--or-radius);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.or-chat__msg p { margin: 0; }
.or-chat__msg--in { align-self: flex-start; background: #fff; border: 1px solid var(--or-line); border-bottom-left-radius: 4px; }
.or-chat__msg--out { align-self: flex-end; background: var(--or-purple); color: #fff; border-bottom-right-radius: 4px; }

.or-chat__action {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border-radius: 0.5rem;
  border: 1px solid var(--or-purple);
  background: var(--or-purple);
  color: #fff;
  cursor: pointer;
}

.or-chat__action--ghost { background: #fff; color: var(--or-purple); }

.or-chat__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.6rem 1rem 0; background: var(--or-bg); }

.or-chat__chip {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--or-line);
  background: #fff;
  color: var(--or-ink);
  cursor: pointer;
}

.or-chat__chip:hover { border-color: var(--or-purple); color: var(--or-purple); }

.or-chat__form { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--or-bg); border-top: 1px solid var(--or-line); }

.or-chat__input {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--or-line);
  border-radius: 999px;
  background: #fff;
  color: var(--or-ink);
}

.or-chat__input:focus { outline: none; border-color: var(--or-purple); }

.or-chat__send { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: none; border-radius: 999px; background: var(--or-purple); color: #fff; cursor: pointer; }

/* ==========================================================================
   Product page
   ========================================================================== */

/* ----------------------------------------------------------- trust badges */

.or-trust { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.9rem; }

.or-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: var(--or-success-soft);
  color: var(--or-success);
}

.or-trust__item:nth-child(2) { background: var(--or-lilac-soft); color: var(--or-purple-deep); }
.or-trust__item:nth-child(3) { background: #fff5e5; color: #a15c00; }
.or-trust__icon { display: inline-grid; place-items: center; }
.or-trust__icon--glyph { font-size: 0.8125rem; line-height: 1; }

/* ------------------------------------------------------------ price block */

.or-price {
  display: block;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #fdf3f7, var(--or-lilac-soft));
  border: 1px solid #f0dcea;
  border-radius: var(--or-radius);
}

.or-price__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.6rem; }

.or-price__now {
  font-family: var(--or-sans);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--or-ink);
  line-height: 1;
}

.or-price__was { font-size: 1rem; color: var(--or-ink-soft); text-decoration-thickness: 1px; }

.or-price__off {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.55rem;
  border-radius: 0.35rem;
  background: var(--or-sale);
  color: #fff;
}

.or-price__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  font-size: 0.75rem;
  color: var(--or-ink-soft);
  margin: 0.6rem 0 0;
}

.or-price__meta-item { display: inline-flex; align-items: center; gap: 0.25rem; }
.or-price__meta-item + .or-price__meta-item::before { content: "·"; margin-right: 0.5rem; opacity: 0.5; }
.or-price__meta-item strong { color: var(--or-ink); font-weight: 700; }
.or-price__meta-item--yes { color: var(--or-success); font-weight: 600; }

.or-price__urgency {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--or-sale);
  margin: 0.55rem 0 0;
}

/* --------------------------------------------------------- size calculator */

.or-sizecalc { display: block; margin-bottom: 0.9rem; }

.or-sizecalc__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0;
  border: none;
  background: none;
  color: var(--or-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.or-sizecalc__backdrop { position: fixed; inset: 0; z-index: 1050; background: rgba(26, 17, 25, 0.5); backdrop-filter: blur(3px); }

.or-sizecalc__panel {
  position: fixed;
  z-index: 1055;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 2rem));
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--or-bg);
  border-radius: var(--or-radius-lg);
  box-shadow: var(--or-shadow-lg);
  overflow: hidden;
}

@media (max-width: 575.98px) {
  .or-sizecalc__panel {
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-height: 92vh;
    border-radius: var(--or-radius-lg) var(--or-radius-lg) 0 0;
  }
}

.or-sizecalc__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--or-line); }
.or-sizecalc__title { font-size: 1.25rem; margin: 0; }
.or-sizecalc__close { display: grid; place-items: center; width: 34px; height: 34px; border: none; background: none; color: var(--or-ink); cursor: pointer; }
.or-sizecalc__body { padding: 1.25rem; overflow-y: auto; }
.or-sizecalc__intro { font-size: 0.8125rem; color: var(--or-ink-soft); margin: 0 0 1rem; }

.or-sizecalc__units { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--or-bg-sunk); margin-bottom: 1.1rem; }

.or-sizecalc__unit {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--or-ink-soft);
  cursor: pointer;
}

.or-sizecalc__unit.is-active { background: #fff; color: var(--or-ink); box-shadow: var(--or-shadow); }

.or-sizecalc__fields { display: grid; gap: 0.9rem; margin-bottom: 1.1rem; }
.or-sizecalc__field { display: block; }
.or-sizecalc__label { display: block; font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.4rem; }
.or-sizecalc__label em { display: block; font-style: normal; font-size: 0.6875rem; font-weight: 400; color: var(--or-ink-soft); margin-top: 1px; }

.or-sizecalc__input { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.85rem; background: #fff; border: 1px solid var(--or-line); border-radius: var(--or-radius); }
.or-sizecalc__input:focus-within { border-color: var(--or-purple); }
.or-sizecalc__input input { flex: 1; min-width: 0; font-size: 1rem; padding: 0.75rem 0; border: none; background: none; color: var(--or-ink); }
.or-sizecalc__input input:focus { outline: none; }
.or-sizecalc__input span { font-size: 0.75rem; color: var(--or-ink-soft); }

.or-sizecalc__error { font-size: 0.8125rem; color: var(--or-sale); margin: 0.75rem 0 0; }
.or-sizecalc__result { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--or-line); }
.or-sizecalc__result-lead { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-ink-soft); margin: 0 0 0.75rem; }

.or-sizecalc__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.or-sizecalc__card { padding: 0.9rem; background: #fff; border: 1px solid var(--or-line); border-radius: var(--or-radius); text-align: center; }
.or-sizecalc__card-label { display: block; font-size: 0.6875rem; color: var(--or-ink-soft); }
.or-sizecalc__card-value { display: block; font-size: 1.75rem; line-height: 1.1; margin: 0.35rem 0 0.25rem; color: var(--or-purple); }
.or-sizecalc__card-note { display: block; font-size: 0.625rem; color: var(--or-ink-soft); }

.or-sizecalc__match { margin-top: 1rem; padding: 0.85rem; background: var(--or-success-soft); border-radius: var(--or-radius); }
.or-sizecalc__match-text { font-size: 0.8125rem; font-weight: 500; color: var(--or-success); margin: 0; }
.or-sizecalc__apply { margin-top: 0.75rem; }
.or-sizecalc__disclaimer { font-size: 0.6875rem; color: var(--or-ink-soft); margin: 0.9rem 0 0; }

.or-sizecalc__guide { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem; font-weight: 600; color: var(--or-purple); text-decoration: none; margin-top: 1rem; }

body.or-noscroll { overflow: hidden; }

/* -------------------------------------------------------------- buy now */

.or-buynow { display: block; margin-top: 0.75rem; }
.or-buynow__btn { letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.875rem; }
.or-buynow__btn.is-loading { opacity: 0.7; pointer-events: none; }
.or-buynow__bolt { font-size: 1rem; }
.or-buynow__note { display: flex; align-items: center; justify-content: center; gap: 0.3rem; font-size: 0.6875rem; color: var(--or-ink-soft); margin: 0.5rem 0 0; }

/* --------------------------------------------------------------- offers */

.or-offers { margin-top: 1.25rem; }

.or-offers__title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or-ink-soft);
  margin: 0 0 0.6rem;
}

.or-offers__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

@media (max-width: 400px) { .or-offers__grid { grid-template-columns: 1fr; } }

.or-offers__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid var(--or-line);
  border-radius: var(--or-radius);
}

.or-offers__icon { font-size: 1rem; line-height: 1.2; flex: none; }
.or-offers__copy { display: block; min-width: 0; }
.or-offers__heading { display: block; font-size: 0.8125rem; font-weight: 700; line-height: 1.25; }
.or-offers__sub { display: block; font-size: 0.6875rem; color: var(--or-ink-soft); margin-top: 0.15rem; }

.or-offers__code {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1px dashed var(--or-purple);
  border-radius: 0.35rem;
  background: var(--or-lilac-soft);
  color: var(--or-purple-deep);
  cursor: pointer;
}

.or-offers__code.is-copied { background: var(--or-success-soft); border-color: var(--or-success); color: var(--or-success); }

/* Codes sit under the copy, not beside it. */
.or-offers__item { flex-wrap: wrap; }
.or-offers__code { order: 3; width: 100%; justify-content: center; }

/* ------------------------------------------------- sticky add-to-cart bar */

.sticky-atc {
  border-top: 1px solid var(--or-line);
  box-shadow: 0 -8px 28px -20px rgba(26, 17, 25, 0.55);
  background: rgba(255, 250, 247, 0.96) !important;
  backdrop-filter: blur(14px);
}

@media (max-width: 991.98px) {
  body.has-oraani-mobile-nav .sticky-atc { bottom: var(--or-mobile-nav-h); }
}

.sticky-atc .btn-atc { border-radius: var(--or-radius); font-weight: 600; }

/* ==========================================================================
   Search drawer
   ========================================================================== */

.or-search-extras { padding-top: 0.25rem; }

.or-search-extras__title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or-ink-soft);
  margin: 1.25rem 0 0.6rem;
}

.or-search-extras__title:first-child { margin-top: 0; }
.or-search-extras__terms { flex-wrap: nowrap; }
.or-search-extras__terms .or-pill { cursor: pointer; }
.or-search-extras__terms .or-pill:hover { border-color: var(--or-purple); color: var(--or-purple); }

.or-search-extras__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; }

.or-search-extras__card { display: block; text-decoration: none; color: var(--or-ink); }

.or-search-extras__media { display: block; border-radius: 0.5rem; overflow: hidden; background: var(--or-bg-sunk); aspect-ratio: 4 / 5; }
.or-search-extras__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.or-search-extras__name { display: block; font-size: 0.6875rem; line-height: 1.3; margin-top: 0.4rem; }
.or-search-extras__price { display: block; font-size: 0.6875rem; font-weight: 700; margin-top: 0.1rem; }

/* ==========================================================================
   Collection toolbar & banner
   ========================================================================== */

.or-toolbar-wrap { position: relative; }
.or-toolbar__shortcuts { padding-block: 0.75rem; }

.or-toolbar__shortcut { background: #fff; border-color: var(--or-line); color: var(--or-ink); transition: border-color 0.2s, color 0.2s; }
.or-toolbar__shortcut:hover { border-color: var(--or-purple); color: var(--or-purple); }
.or-toolbar__shortcut.is-active { background: var(--or-purple); border-color: var(--or-purple); color: #fff; }

.or-toolbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: rgba(255, 250, 247, 0.94);
  backdrop-filter: blur(12px);
  border-block: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.or-toolbar.is-stuck { border-block-color: var(--or-line); box-shadow: 0 8px 24px -20px rgba(26, 17, 25, 0.6); }

.or-toolbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 54px; }

.or-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--or-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border: 1px solid var(--or-ink);
  border-radius: 999px;
  background: none;
  color: var(--or-ink);
  cursor: pointer;
}

.or-toolbar__btn:hover { background: var(--or-ink); color: #fff; }
.or-toolbar__btn > span { display: inline-flex; align-items: center; gap: 0.45rem; }

.or-toolbar__count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.625rem;
  border-radius: 999px;
  background: var(--or-purple);
  color: #fff;
}

.or-toolbar__meta { font-size: 0.75rem; color: var(--or-ink-soft); margin: 0; }
@media (max-width: 575.98px) { .or-toolbar__meta { display: none; } }

/* Match the theme's sort dropdown to the filter button. */
.or-toolbar__sort .sort-by .btn {
  font-family: var(--or-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border: 1px solid var(--or-ink);
  border-radius: 999px;
  color: var(--or-ink);
  margin: 0;
}

.or-toolbar__sort .sort-by .btn:hover { background: var(--or-ink); color: #fff; }

/* -------------------------------------------------------------- banner */

.or-banner-wrap--contained { padding-block: clamp(1rem, 0.5rem + 1.5vw, 2rem); }

.or-banner {
  position: relative;
  display: block;
  border-radius: var(--banner-radius, 0);
  overflow: hidden;
  text-decoration: none;
  background: var(--or-bg-sunk);
}

.or-banner__media img,
.or-banner__placeholder {
  display: block;
  width: 100%;
  height: clamp(180px, 26vw, 380px);
  object-fit: cover;
}

.or-banner__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
  color: var(--banner-fg, #fff);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
}

.or-banner__content--center { align-items: center; text-align: center; background: rgba(0, 0, 0, 0.3); }
.or-banner__content--right { align-items: flex-end; text-align: right; background: linear-gradient(to left, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); }

.or-banner__eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.9; }
.or-banner__title { font-size: clamp(1.35rem, 1rem + 2vw, 2.5rem); line-height: 1.1; margin: 0.4rem 0 0; color: inherit; }
.or-banner__sub { font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 1rem); margin: 0.4rem 0 0; opacity: 0.9; max-width: 40ch; }
.or-banner__cta { margin-top: 1rem; align-self: flex-start; }
.or-banner__content--center .or-banner__cta { align-self: center; }
.or-banner__content--right .or-banner__cta { align-self: flex-end; }

/* ==========================================================================
   Header polish
   ========================================================================== */

.navbar .nav-link-icon { position: relative; }

.navbar .wishlist-count-badge,
.navbar .cart-count-badge {
  background: var(--or-purple);
  color: #fff;
}

.navbar .wishlist-count-badge[data-count="0"],
.navbar .wishlist-count-badge:empty { display: none; }

/* Shoppable video sections inherit the brand card language. */
.shoppable-videos .card,
.shoppable-videos .swiper-slide > * { border-radius: var(--or-radius); }

.or-mnav__founder-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--or-purple);
  color: #fff;
  border: 2.5px solid var(--or-bg);
}

/* ==========================================================================
   Desktop mega menu
   ========================================================================== */

.or-megamenu {
  width: min(1100px, calc(100vw - 4rem));
  padding: 0;
  border: 1px solid var(--or-line);
  border-radius: var(--or-radius-lg);
  background: var(--or-bg);
  box-shadow: var(--or-shadow-lg);
  overflow: hidden;
}

.or-megamenu__inner { padding: 1.5rem; }

.or-megamenu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 1rem;
  margin: 0;
}

.or-megamenu__card { display: block; text-decoration: none; color: var(--or-ink); }

.or-megamenu__media {
  display: block;
  border-radius: var(--or-radius);
  overflow: hidden;
  background: var(--or-bg-sunk);
  aspect-ratio: 4 / 5;
}

.or-megamenu__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.or-megamenu__card:hover .or-megamenu__media img { transform: scale(1.06); }

.or-megamenu__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0.55rem;
}

.or-megamenu__card:hover .or-megamenu__label,
.or-megamenu__card.active .or-megamenu__label { color: var(--or-purple); }

.or-megamenu__all {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  color: var(--or-purple);
  text-decoration: none;
}

.or-megamenu__all:hover { color: var(--or-purple-deep); }

/* Bundled wordmark fallback — keep it optically consistent with an uploaded logo. */
.navbar-logo-default {
  width: auto;
  height: auto;
  max-height: 42px;
  max-width: 190px;
}

@media (max-width: 991.98px) {
  .navbar-logo-default { max-height: 34px; max-width: 150px; }
}

/* ==========================================================================
   Header
   ========================================================================== */

.or-hdr { background: var(--or-bg); }

.or-hdr__strip {
  background: var(--or-ink);
  color: #fff;
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.or-hdr__strip-track { position: relative; height: 38px; }

.or-hdr__strip-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 1rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

.or-hdr__strip-item.is-active { opacity: 1; transform: none; pointer-events: auto; }
.or-hdr__strip-item a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.or-hdr__bar { border-bottom: 1px solid var(--or-line); background: rgba(255, 250, 247, 0.92); backdrop-filter: blur(14px); }

.or-hdr__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  min-height: 68px;
}

@media (min-width: 992px) { .or-hdr__inner { min-height: 84px; } }

.or-hdr__logo { display: inline-flex; align-items: center; justify-self: center; }
.or-hdr__logo img { height: 34px; width: auto; display: block; }

@media (min-width: 992px) {
  .or-hdr__logo { justify-self: start; }
  .or-hdr__logo img { height: 42px; }
}

.or-hdr__burger { justify-self: start; }

.or-hdr__nav { justify-self: center; display: flex; gap: 2.25rem; }
.or-hdr__navitem { position: static; }

.or-hdr__navlink {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--or-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or-ink);
  text-decoration: none;
  padding: 1.6rem 0;
  position: relative;
}

.or-hdr__navlink::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 1.15rem;
  height: 1px;
  background: var(--or-purple);
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.or-hdr__navitem:hover .or-hdr__navlink { color: var(--or-purple); }
.or-hdr__navitem:hover .or-hdr__navlink::after { transform: scaleX(1); }

/* Full-width mega panel, opened on hover and on keyboard focus. */
.or-hdr__panel {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--or-bg);
  border-top: 1px solid var(--or-line);
  border-bottom: 1px solid var(--or-line);
  box-shadow: var(--or-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 40;
}

.or-hdr__navitem:hover .or-hdr__panel,
.or-hdr__navitem:focus-within .or-hdr__panel { opacity: 1; visibility: visible; transform: none; }

.or-hdr__panel-inner { display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; padding-block: 2rem; align-items: start; }
.or-hdr__panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1.25rem; margin: 0; }
.or-hdr__panel-card { display: block; text-decoration: none; color: var(--or-ink); }

.or-hdr__panel-media { display: block; overflow: hidden; background: var(--or-bg-sunk); aspect-ratio: 4 / 5; }
.or-hdr__panel-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); }
.or-hdr__panel-card:hover .or-hdr__panel-media img { transform: scale(1.06); }

.or-hdr__panel-label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; margin-top: 0.6rem; }
.or-hdr__panel-card:hover .or-hdr__panel-label { color: var(--or-purple); }

.or-hdr__panel-promo {
  display: block;
  width: 250px;
  padding: 1.5rem;
  background: var(--or-sand);
  text-decoration: none;
  color: var(--or-ink);
  border-radius: var(--or-radius);
}

.or-hdr__panel-promo-eyebrow { display: block; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--or-purple); }
.or-hdr__panel-promo-title { display: block; font-size: 1.4rem; line-height: 1.15; margin-top: 0.5rem; }
.or-hdr__panel-promo-cta { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 600; margin-top: 1rem; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

.or-hdr__icons { justify-self: end; display: flex; align-items: center; gap: 0.25rem; }

.or-hdr__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  color: var(--or-ink);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}

.or-hdr__icon:hover { color: var(--or-purple); }

.or-hdr__badge {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-family: var(--or-sans);
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border-radius: 999px;
  background: var(--or-purple);
  color: #fff;
}

.or-hdr__badge:empty,
.or-hdr__badge[data-count="0"] { display: none; }

/* ==========================================================================
   Footer
   ========================================================================== */

.or-ftr {
  background: var(--or-ink);
  color: rgba(255, 255, 255, 0.74);
  padding-block: clamp(3rem, 2rem + 3vw, 5rem) 2rem;
  font-size: 0.875rem;
}

.or-ftr a { color: rgba(255, 255, 255, 0.74); text-decoration: none; transition: color 0.2s; }
.or-ftr a:hover { color: #fff; }

.or-ftr__top { display: grid; gap: 2.5rem; }

/* Desktop-only layout, driven by settings the footer emits. Mobile keeps its
   single-column stack regardless. */
@media (min-width: 992px) {
  .or-ftr__top {
    grid-template-columns: var(--of-brand-col, 0.8fr) var(--of-links-col, 2fr) var(--of-news-col, 1.1fr);
    gap: var(--of-top-gap, 3.5rem);
  }
}

.or-ftr__logo img { height: 40px; width: auto; filter: invert(1) brightness(2); }
.or-ftr__statement { margin: 1.25rem 0 0; line-height: 1.65; max-width: 42ch; }

/* Icons only — the brand marks read faster than a row of uppercase words. */
.or-ftr__social { display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 1.5rem 0 0; }

.or-ftr__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.or-ftr__social-link:hover,
.or-ftr__social-link:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--or-purple);
}

.or-ftr__social-link .or-social-icon { display: block; }

.or-ftr__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (min-width: 768px) {
  .or-ftr__cols {
    grid-template-columns: repeat(var(--of-link-cols, 4), 1fr);
    gap: var(--of-cols-gap, 2rem);
  }
}

.or-ftr__col-title {
  font-family: var(--or-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1rem;
}

.or-ftr__col ul { display: grid; gap: 0.6rem; margin: 0; }
.or-ftr__col li a { display: inline-flex; align-items: center; gap: 0.4rem; }
.or-ftr__muted { opacity: 0.6; font-size: 0.8125rem; }
.or-ftr__address { font-style: normal; line-height: 1.6; margin: 1rem 0 0; opacity: 0.75; font-size: 0.8125rem; }
.or-ftr__address strong { color: #fff; font-weight: 600; }

.or-ftr__news-title { font-size: 1.5rem; color: #fff; margin: 0; }
.or-ftr__news-text { margin: 0.6rem 0 1.1rem; line-height: 1.6; }

.or-ftr__field { display: flex; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.or-ftr__field:focus-within { border-color: var(--or-lilac); }

.or-ftr__field input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0;
  border: none;
  background: none;
  color: #fff;
  font-family: var(--or-sans);
  font-size: 0.9375rem;
}

.or-ftr__field input::placeholder { color: rgba(255, 255, 255, 0.45); }
.or-ftr__field input:focus { outline: none; }
.or-ftr__field button { display: grid; place-items: center; width: 38px; height: 38px; border: none; background: none; color: #fff; cursor: pointer; }
.or-ftr__field button:hover { color: var(--or-lilac); }

.or-ftr__news-note { font-size: 0.6875rem; opacity: 0.55; margin: 0.7rem 0 0; }
.or-ftr__ok { color: var(--or-lilac); margin: 0.7rem 0 0; font-size: 0.8125rem; }
.or-ftr__err { color: #ff9a9a; margin: 0.7rem 0 0; font-size: 0.8125rem; }

.or-ftr__rule { margin-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); color: rgba(255, 255, 255, 0.18); }
.or-ftr__rule .or-rule__mark { background: var(--or-lilac); }

.or-ftr__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.or-ftr__copy { margin: 0; font-size: 0.75rem; opacity: 0.65; }
.or-ftr__pay { display: flex; align-items: center; gap: 0.5rem; filter: grayscale(1) brightness(1.6); opacity: 0.8; }
.or-ftr__pay svg, .or-ftr__pay img { height: 22px; width: auto; }

/* Superseded: the bar is pinned with `position: fixed` by makeSticky(). Left
   sticky here it would fight the fixed rule and re-introduce the travel limit. */
.or-hdr__bar.is-sticky { position: static; }
.or-hdr__bar.is-stuck { box-shadow: 0 10px 30px -26px rgba(23, 17, 26, 0.7); }

/* ==========================================================================
   Applying the motifs
   ========================================================================== */

/* Arched crops — the signature shape. Used on category-level imagery only, so
   product photography stays rectangular and honest. */
.or-outfit__media,
.or-mood__card { border-radius: var(--or-arch); }
.or-story__ring, .or-story__inner, .or-story__inner img { border-radius: 999px; }

/* Warm bands get texture so large flat fills don't read as dead colour. */
.or-section--sand {
  background-color: var(--or-sand);
  background-image: repeating-linear-gradient(45deg, rgba(23, 17, 26, 0.025) 0 1px, transparent 1px 8px);
}

.or-section--lilac {
  background-color: var(--or-lilac-soft);
  background-image: radial-gradient(rgba(75, 30, 183, 0.05) 1px, transparent 1px);
  background-size: 5px 5px;
}

.or-section--ink { position: relative; }
.or-section--ink::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 9px);
}
.or-section--ink > * { position: relative; }

/* Display type earns its keep: bigger, tighter, with an italic accent. */
.or-section-title { letter-spacing: -0.022em; }
.or-hero__title { letter-spacing: -0.028em; }

/* Square everything that used to be pill-shaped, except deliberate chips. */
.product-card .product-card-img-wrapper,
.or-search-extras__media,
.or-megamenu__media { border-radius: var(--or-radius); }

/* ==========================================================================
   Product card — rebuilt
   The stock card was a square Bootstrap `img-thumbnail` with centred text and
   a solid purple button on every tile. This is the editorial version:
   portrait crop, no chrome, hover reveals the second shot and the CTA.
   ========================================================================== */

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.product-card .product-card-link { display: block; text-decoration: none; color: inherit; }

/* ---- media ---- */

.product-card .product-card-img-wrapper {
  position: relative;
  overflow: hidden;
  margin-bottom: 0.85rem;
  border-radius: var(--or-radius);
  background: var(--or-bg-sunk);
}

.product-card .product-card-img-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.or-card-media { position: relative; }

.or-card-media__hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
}

@media (hover: hover) {
  .product-card:hover .or-card-media.has-hover .or-card-media__hover { opacity: 1; }
  .product-card:hover .product-card-img-wrapper img { transform: scale(1.035); }
}

/* ---- badges ---- */

.product-card .product-sale-badge,
.product-card .product-custom-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  font-family: var(--or-sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 0.4rem 0.5rem;
  border-radius: 2px;
  background: var(--or-sale);
  color: #fff;
}

.product-card .product-custom-badge { top: auto; bottom: 0.6rem; background: var(--or-ink); }

/* ---- wishlist ---- */

.product-card .btn-wishlist,
.product-card .img-btn-wishlist {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  color: var(--or-ink);
  box-shadow: 0 1px 3px rgba(23, 17, 26, 0.12);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.25s, transform 0.25s, color 0.2s;
}

@media (hover: hover) { .product-card:hover .btn-wishlist { opacity: 1; transform: none; } }
@media (hover: none) { .product-card .btn-wishlist { opacity: 1; transform: none; } }

.product-card .btn-wishlist:hover { color: var(--or-sale); }
.product-card .btn-wishlist.active { opacity: 1; transform: none; color: var(--or-sale); }
.product-card .btn-wishlist.active .svg-icon-heart { fill: currentColor; }

/* ---- copy ---- */

.product-card .product-card-title {
  font-family: var(--or-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.002em;
  color: var(--or-ink);
  margin: 0 0 0.3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card:hover .product-card-title { color: var(--or-purple); }

.product-card .product-card-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-family: var(--or-sans);
  margin: 0;
}

.product-card .product-card-price-final {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--or-ink);
}

.product-card .product-card-price-compare {
  font-size: 0.75rem;
  color: var(--or-ink-soft);
  opacity: 0.7;
  text-decoration-thickness: 1px;
}

.product-card .product-price-final-sale { color: var(--or-sale); }
.product-card .mb-4 { margin-bottom: 0.5rem !important; }

/* ---- rating ---- */

.product-card .product-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-family: var(--or-sans);
  font-size: 0.6875rem;
  color: var(--or-ink-soft);
  margin-bottom: 0.25rem;
}

/* ---- swatches ---- */

.product-card .product-card-swatches { display: flex; gap: 0.3rem; margin-top: 0.45rem; }
.product-card .product-card-swatches label,
.product-card .product-card-swatches .form-check-label {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid var(--or-line);
  box-shadow: inset 0 0 0 2px #fff;
}

/* ---- call to action ---- */

.product-card product-quick-view-button,
.product-card product-form,
.product-card .product-dropup-selector { display: block; margin-top: 0.6rem; }

.product-card .btn-quick-view,
.product-card .btn-atc,
.product-card .btn-atc-dropup {
  width: 100%;
  font-family: var(--or-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7rem 0.75rem;
  border-radius: var(--or-radius);
  border: 1px solid var(--or-ink);
  background: transparent;
  color: var(--or-ink);
  transition: background 0.2s, color 0.2s;
}

.product-card .btn-quick-view:hover,
.product-card .btn-atc:hover,
.product-card .btn-atc-dropup:hover { background: var(--or-ink); color: #fff; }

/* The CTA stays visible — an overlay that only appears on hover is invisible on
   touch, and hiding the buy action costs more than the tidiness is worth.
   It sits quiet until the card is hovered. */
.product-card .btn-quick-view,
.product-card .btn-atc,
.product-card .btn-atc-dropup { border-color: var(--or-line); color: var(--or-ink-soft); }

.product-card:hover .btn-quick-view,
.product-card:hover .btn-atc,
.product-card:hover .btn-atc-dropup { border-color: var(--or-ink); color: var(--or-ink); }

/* ==========================================================================
   Vendor section chrome
   featured-products / shoppable-videos / testimonials / trust-icons ship with
   Bootstrap defaults, which is why the lower half of the page falls off a cliff
   after the custom sections above it. This pulls them onto the same system.
   ========================================================================== */

.section-header { margin-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.75rem) !important; }

.section-header .title {
  font-family: var(--or-display);
  font-weight: 400;
  font-size: clamp(1.65rem, 1.1rem + 2.4vw, 3rem) !important;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--or-ink);
}

.section-header .description {
  font-family: var(--or-sans);
  font-size: clamp(0.875rem, 0.82rem + 0.3vw, 1.0625rem) !important;
  line-height: 1.55;
  color: var(--or-ink-soft);
  max-width: 56ch;
  margin-inline: auto;
}

.section-header .description p:last-child { margin-bottom: 0; }

/* Swiper controls in brand colours rather than Bootstrap blue-grey. */
.swiper-pagination-bullet { background: var(--or-ink); opacity: 0.22; }
.swiper-pagination-bullet-active { background: var(--or-purple); opacity: 1; }
.swiper-scrollbar-drag { background: var(--or-purple); }

.swiper-button-next, .swiper-button-prev {
  color: var(--or-ink);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--or-line);
  border-radius: 999px;
  width: 40px;
  height: 40px;
}

.swiper-button-next::after, .swiper-button-prev::after { font-size: 14px; font-weight: 700; }

/* Trust icons: even columns, restrained type, a hairline between items. */
.trust-icons .card,
.trust-icons .col { border: 0; background: none; }

.trust-icons h3, .trust-icons .title {
  font-family: var(--or-sans);
  font-size: 0.875rem !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--or-ink);
}

.trust-icons p, .trust-icons .rte { font-size: 0.8125rem; color: var(--or-ink-soft); }

/* Testimonials: quote-first, not a boxed card. */
.testimonials .card,
.testimonials .testimonial-item {
  background: #fff;
  border: 1px solid var(--or-line);
  border-radius: var(--or-radius);
  box-shadow: none;
}

.testimonials .description,
.testimonials .testimonial-description {
  font-family: var(--or-display);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--or-ink);
}

.testimonials .author,
.testimonials .testimonial-author {
  font-family: var(--or-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or-ink-soft);
}

/* Shoppable video tiles pick up the card language. */
.shoppable-videos video,
.shoppable-videos .card { border-radius: var(--or-radius); overflow: hidden; }

/* ==========================================================================
   Fixes from review
   ========================================================================== */

/* ---- equal-height cards -------------------------------------------------
   Titles run 1–2 lines, so CTAs landed at different heights across a row.
   Stretch the card, reserve two title lines, push the CTA to the bottom. */

.product-card { height: 100%; }
.swiper-slide { height: auto; }
.swiper-slide > *, .swiper-slide product-card { height: 100%; width: 100%; }

.product-card .product-card-link { display: flex; flex-direction: column; }
.product-card .product-card-title { min-height: calc(2 * 1.4em); }

.product-card product-quick-view-button,
.product-card product-form,
.product-card .product-dropup-selector { margin-top: auto; }

.product-card .product-card-color-swatches { margin-bottom: 0.6rem !important; margin-top: 0 !important; }

/* ---- colour swatches ---------------------------------------------------- */

.color-swatches { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0; }
.color-swatches li { line-height: 0; }
.color-swatches .btn { padding: 0; border: 0; border-radius: 999px; line-height: 0; background: none; }

.swatch-dot,
.swatch-photo {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(23, 17, 26, 0.16);
  box-shadow: inset 0 0 0 1.5px #fff;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.swatch-photo { object-fit: cover; box-shadow: none; }
.color-swatches .btn:hover .swatch-dot,
.color-swatches .btn:hover .swatch-photo { border-color: var(--or-ink); transform: scale(1.12); }

/* ---- story menu: drop the purple gradient ring --------------------------
   A conic gradient on every circle competed with the product photography.
   A hairline does the same job quietly. */

.or-story__ring,
.or-story__ring--live { background: var(--or-line); padding: 1.5px; }
.or-story__ring--live { background: var(--or-purple); }
.or-story__link:hover .or-story__ring { background: var(--or-ink); }
.or-mnav__founder-ring { background: var(--or-line); padding: 2px; }

/* ---- chat widget -------------------------------------------------------- */

.or-chat { right: max(1rem, env(safe-area-inset-right)); z-index: 1045; }

@media (max-width: 991.98px) {
  .or-chat { bottom: 1rem; }
  body.has-oraani-mobile-nav .or-chat { bottom: calc(var(--or-mobile-nav-h) + 0.75rem); }
  .or-chat__launcher { width: 50px; height: 50px; }
  .or-chat__launcher-face { width: 38px; height: 38px; }
}

/* Teaser was sized off the viewport and could run off-screen or collide with
   the launcher. Anchor it to the launcher, cap it, let it wrap. */
.or-chat__teaser {
  right: calc(100% + 0.6rem);
  bottom: 4px;
  width: max-content;
  max-width: min(56vw, 230px);
  white-space: normal;
  line-height: 1.35;
}

@media (max-width: 380px) { .or-chat__teaser { display: none; } }
.or-chat__panel { max-height: min(540px, calc(100dvh - 7rem)); }

/* ---- trust icons + testimonial initials --------------------------------- */

.or-trust-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--or-lilac-soft);
  color: var(--or-purple);
  margin-inline: auto;
}

.trust-icons .img-wrapper { margin-bottom: 0.9rem; }

.or-initial {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--or-lilac-soft);
  color: var(--or-purple-deep);
  font-family: var(--or-display);
  font-size: 1.05rem;
  line-height: 1;
}

/* ---- founder without a portrait ----------------------------------------- */

/* Was `max-width: 62ch`, which capped the whole section at ~620px and was the
   real reason the no-portrait layout used half the screen. The measure is now
   controlled per-element below, so the layout can fill the container. */
.or-founder--noportrait .or-founder__layout { grid-template-columns: 1fr; max-width: none; }
.or-founder--noportrait .or-founder__quote { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2.1rem); }

/* ---- one chat entry point ------------------------------------------------
   The chat launcher is the entry point at every breakpoint. The bottom-nav
   founder avatar is now only rendered when a real photo exists (see
   oraani-mobile-nav.liquid); when it is present it sits on the opposite side
   of the bar so the two never read as duplicates. */

@media (min-width: 992px) {
  .or-mnav__founder { display: none; }
}

/* The panel is fixed to the viewport on phones so it can't be clipped by the
   nav or the launcher's old anchor point. */
@media (max-width: 575.98px) {
  .or-chat__panel {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(var(--or-mobile-nav-h) + 0.75rem);
    width: auto;
    max-height: calc(100dvh - var(--or-mobile-nav-h) - 4rem);
  }
}

/* ---- carousel chrome ----------------------------------------------------
   Scrollbars and arrows are gone; a single row of minimal dots is the only
   position cue. Belt-and-braces in CSS so a section enabled later in the
   editor can't reintroduce them. */

.swiper-scrollbar,
.swiper-button-next,
.swiper-button-prev,
.or-hero__arrow { display: none !important; }

.swiper-pagination { position: static; margin-top: 1.25rem; }

.swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  margin: 0 4px !important;
  background: var(--or-ink);
  opacity: 0.2;
  border-radius: 999px;
  transition: width 0.25s ease, opacity 0.25s ease;
}

.swiper-pagination-bullet-active { width: 20px; opacity: 1; background: var(--or-ink); }

/* Native scrollbars on the horizontal rails, in every engine. */
.or-rail,
.or-hero__viewport,
.or-search-extras__terms {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.or-rail::-webkit-scrollbar,
.or-hero__viewport::-webkit-scrollbar,
.or-search-extras__terms::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Hero keeps its thin progress dots, just no arrows. */
.or-hero__dots { bottom: 1.25rem; }

/* ---- product page colour options ---------------------------------------- */

.product-options .color-swatches { gap: 0.5rem; }

.product-options .color-swatches label {
  display: block;
  padding: 0;
  border: 0;
  cursor: pointer;
  line-height: 0;
}

.or-opt-swatch {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(23, 17, 26, 0.18);
  box-shadow: inset 0 0 0 2px #fff;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.or-opt-swatch--photo { object-fit: cover; box-shadow: none; }
.or-opt-swatch--empty { background: repeating-linear-gradient(45deg, #ddd 0 4px, #f3f3f3 4px 8px); }

.product-options .color-swatches label:hover .or-opt-swatch { transform: scale(1.08); border-color: var(--or-ink); }

/* Selected state — the stock markup hides the radio, so drive it off :checked. */
.product-options .color-swatches input:checked + label .or-opt-swatch {
  border-color: var(--or-ink);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--or-ink);
}

.product-options .color-swatches input:focus-visible + label .or-opt-swatch {
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px var(--or-purple);
}

/* Two-colour packs ("Beige | Black") render as a split disc rather than
   silently showing only one of the two colours. */
.or-opt-swatch--split,
.swatch-dot--split {
  background-image: linear-gradient(135deg, var(--c1) 0 50%, var(--c2) 50% 100%);
}

/* ==========================================================================
   Website feedback — homepage
   ========================================================================== */

/* Ribbon and story outlines in brand purple. */
.or-hdr__strip { background: var(--or-purple); }

.or-story__ring,
.or-story__ring--live { background: var(--or-purple); padding: 2px; }
.or-story__link:hover .or-story__ring { background: var(--or-purple-deep); }
.or-mnav__founder-ring { background: var(--or-purple); padding: 2px; }

/* Outfit rail: size cards so 2.5 sit in view — the half card is what tells
   people it scrolls. At 390px this is ~129px, giving two full plus a peek. */
@media (max-width: 767.98px) {
  .or-outfit__item { width: 33vw; max-width: 200px; }
}

/* Kill the hover ghost on touch. `:hover` latches after a tap on mobile, which
   painted the second product photo over the first — the "shadowing". */
@media (hover: none), (pointer: coarse) {
  .or-card-media__hover { display: none !important; }
  .product-card .product-card-img-wrapper img { transition: none; }
  .product-card:hover .product-card-img-wrapper img { transform: none !important; }
}

.or-card-media__hover { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .or-card-media.has-hover .or-card-media__hover { visibility: visible; }
}

/* Bottom nav stays put. Auto-hiding it on scroll-down read as "missing". */
.or-mnav.is-tucked { transform: none; }

/* Footer in brand purple. */
.or-ftr { background: var(--or-purple); color: rgba(255, 255, 255, 0.82); }
.or-ftr a { color: rgba(255, 255, 255, 0.82); }
.or-ftr a:hover { color: #fff; }
.or-ftr__rule { color: rgba(255, 255, 255, 0.25); }
.or-ftr__rule .or-rule__mark { background: #fff; }
.or-ftr__field { border-bottom-color: rgba(255, 255, 255, 0.4); }
.or-ftr__field:focus-within { border-bottom-color: #fff; }
.or-ftr__ok { color: #fff; }

/* ---- reviews ------------------------------------------------------------- */

/* Stars fill to the fraction: two identical rows, the gold one clipped to
   `--or-stars-fill`. Whole stars are a special case of that, and an unrated
   product gets five clean outlines rather than five grey blobs. */
.or-stars {
  position: relative;
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
}

.or-stars__row {
  display: flex;
  align-items: center;
  gap: 2px;
  line-height: 0;
}

.or-stars__row svg { display: block; }

/* Outline underneath. */
.or-stars__base svg polygon {
  fill: none;
  stroke: #c9bfb6;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* Gold on top, clipped left-to-right. */
.or-stars__fill {
  position: absolute;
  inset: 0;
  width: var(--or-stars-fill, 0%);
  overflow: hidden;
  white-space: nowrap;
}

.or-stars__fill svg polygon {
  fill: #f5a623;
  stroke: #f5a623;
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.or-stars--empty .or-stars__fill { display: none; }

/* Legacy single-row markup, still used by any older snippet. */
.or-star { display: inline-flex; color: #d9d2cc; }
.or-star svg { fill: currentColor; stroke: none; }
.or-star.is-on { color: #f5a623; }

.or-reviews__average {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--or-sans);
  font-size: 0.875rem;
  margin: 0.85rem 0 0;
}

.or-reviews__average strong { font-weight: 700; }
.or-reviews__count { color: var(--or-ink-soft); font-size: 0.8125rem; }
.or-reviews__cta { margin-top: 0; }

.or-reviews__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.or-reviews__actions:empty { display: none; }

.or-reviews__rail { gap: 1rem; align-items: stretch; }
.or-reviews__item { width: min(84vw, 380px); }

@media (min-width: 768px) { .or-reviews__item { width: 340px; } }

.or-reviews__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--or-line);
  border-radius: var(--or-radius);
}

.or-reviews__quote {
  font-family: var(--or-display);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--or-ink);
  margin: 0.85rem 0 0;
  flex: 1;
}

.or-reviews__product {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.5rem;
  border-radius: var(--or-radius);
  background: var(--or-bg-sunk);
  text-decoration: none;
  color: var(--or-ink);
  font-size: 0.75rem;
  line-height: 1.3;
}

.or-reviews__product img { border-radius: 2px; flex: none; object-fit: cover; }
.or-reviews__product:hover { color: var(--or-purple); }

.or-reviews__by {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--or-line);
}

.or-reviews__avatar { flex: none; }
.or-reviews__avatar img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; }
.or-reviews__avatar .or-initial { width: 44px; height: 44px; }

.or-reviews__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.or-reviews__name {
  font-family: var(--or-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--or-ink);
  line-height: 1.2;
}

.or-reviews__place,
.or-reviews__verified {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--or-sans);
  font-size: 0.75rem;
  color: var(--or-ink-soft);
  line-height: 1.2;
}

.or-reviews__verified { color: var(--or-success); font-weight: 600; }

/* ==========================================================================
   Mobile menu drawer
   ========================================================================== */

.or-mmenu {
  width: min(92vw, 420px);
  background: var(--or-bg);
  display: flex;
  flex-direction: column;
}

.or-mmenu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--or-line);
  flex: none;
}

.or-mmenu__logo img { height: 30px; width: auto; display: block; }
.or-mmenu__close { display: grid; place-items: center; width: 38px; height: 38px; border: none; background: none; color: var(--or-ink); }

.or-mmenu__body { padding: 0 1.25rem 1.25rem; overflow-y: auto; flex: 1; }

.or-mmenu__group { border-bottom: 1px solid var(--or-line); }

.or-mmenu__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.05rem 0;
  border: none;
  background: none;
  font-family: var(--or-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--or-ink);
  text-align: left;
}

.or-mmenu__toggle svg { transition: transform 0.25s ease; }
.or-mmenu__toggle.collapsed svg { transform: rotate(-90deg); }

.or-mmenu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.or-mmenu__tile { display: block; text-decoration: none; color: var(--or-ink); }

.or-mmenu__tile-media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--or-radius);
  background: var(--or-bg-sunk);
}

.or-mmenu__tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.or-mmenu__tile-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0.4rem;
  text-align: center;
}

.or-mmenu__tile:active .or-mmenu__tile-label { color: var(--or-purple); }

.or-mmenu__viewall {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--or-purple);
  text-decoration: none;
  margin-bottom: 1.1rem;
}

.or-mmenu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--or-line);
  font-family: var(--or-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--or-ink);
  text-decoration: none;
}

.or-mmenu__secondary { display: grid; gap: 0.85rem; margin: 1.25rem 0 0; }
.or-mmenu__secondary a { font-size: 0.875rem; color: var(--or-ink-soft); text-decoration: none; }

.or-mmenu__foot {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--or-line);
  background: var(--or-sand);
  flex: none;
}

.or-mmenu__foot-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--or-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--or-ink);
  text-decoration: none;
}

.or-mmenu__foot-social { margin-left: auto; }

/* ==========================================================================
   Feedback round 2
   ========================================================================== */

/* ---- shoppable video cards ---------------------------------------------- */

.shoppable-videos .card { border-color: var(--or-purple) !important; }

/* On phones the overlay carries the product name and price only — the struck
   compare price crowded a card that is already small. */
.shoppable-videos .product-wrapper .product-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

@media (max-width: 767.98px) {
  .shoppable-videos .product-wrapper s,
  .shoppable-videos .product-wrapper .product-card-price-compare,
  .shoppable-videos .product-wrapper .price-compare { display: none !important; }
  .shoppable-videos .product-wrapper .product-card-title { font-size: 0.75rem; }
  .shoppable-videos .product-wrapper .product-card-price,
  .shoppable-videos .product-wrapper .product-price { font-size: 0.8125rem; font-weight: 700; }
}

/* ---- reviews rail -------------------------------------------------------
   The bleeding rail let the first card sit flush against the screen edge,
   out of line with the heading above it. Keep it inside the container. */

.or-reviews__rail {
  margin-inline: 0;
  padding-inline: 0;
  scroll-padding-inline-start: 0;
}

.or-reviews__item:first-child { margin-inline-start: 0; }

@media (max-width: 767.98px) {
  .or-reviews__item { width: min(78vw, 320px); }
}

/* ---- bottom bar: krvvy's spec ------------------------------------------
   58px tall, 23px icons at stroke 2.2, 11px/700 labels, icon above label. */

.or-mnav__bar { height: 58px; }

.or-mnav__item {
  gap: 3px;
  padding: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--or-ink);
}

.or-mnav__item.is-active { color: var(--or-purple); }
.or-mnav__item svg { width: 23px; height: 23px; display: block; }
.or-mnav__label { line-height: 1; }

:root { --or-mobile-nav-h: 58px; }

/* ---- mobile drawer: krvvy's measurements -------------------------------
   Taken from their own CSS: 22px gutters, 3-up grid at 12px gap, square
   tiles with a 14px radius, 13px/500 centred labels, 15px/500 rows. */

.or-mmenu { width: 100vw; max-width: 100vw; }

@media (min-width: 480px) { .or-mmenu { width: min(88vw, 440px); max-width: 440px; } }

.or-mmenu__head { padding: 10px 22px; }
.or-mmenu__body { padding: 6px 22px 32px; }

.or-mmenu__toggle,
.or-mmenu__row {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 10px 2px;
  gap: 14px;
}

.or-mmenu__group { border-bottom: 1px solid rgba(23, 17, 26, 0.14); }
.or-mmenu__row { border-bottom: 1px solid rgba(23, 17, 26, 0.14); }

.or-mmenu__group .collapse,
.or-mmenu__group .collapsing { padding-bottom: 0; }

.or-mmenu__grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 8px 0 16px;
}

.or-mmenu__tile { display: flex; flex-direction: column; gap: 8px; }

.or-mmenu__tile-media {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  background: var(--or-bg-sunk);
}

.or-mmenu__tile-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  margin-top: 0;
  color: var(--or-ink);
}

.or-mmenu__viewall { font-size: 13px; font-weight: 600; margin-bottom: 16px; }

/* ==========================================================================
   Collection filters
   ========================================================================== */

.or-filter__switches { display: grid; gap: 0.35rem; }

.or-switch__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  cursor: pointer;
  font-family: var(--or-sans);
  font-size: 0.875rem;
  color: var(--or-ink);
}

.or-switch__track {
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #ddd3cb;
  transition: background 0.2s ease;
}

.or-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(23, 17, 26, 0.28);
  transition: transform 0.2s ease;
}

.or-switch__input:checked + .or-switch__label .or-switch__track { background: var(--or-purple); }
.or-switch__input:checked + .or-switch__label .or-switch__knob { transform: translateX(18px); }
.or-switch__input:disabled + .or-switch__label { opacity: 0.4; cursor: not-allowed; }
.or-switch__input:focus-visible + .or-switch__label .or-switch__track { outline: 2px solid var(--or-purple); outline-offset: 2px; }

/* Grids: colour and brand/category 4-up, sizes 5-up. */
.or-filter__grid { display: grid; gap: 0.5rem; }
.or-filter__grid--color { grid-template-columns: repeat(4, 1fr); }
.or-filter__grid--size { grid-template-columns: repeat(5, 1fr); }
/* Brand and category values are words, not swatches — four columns forced
   mid-word breaks ("BAMBO/OLOGY") and ellipses ("SHOP THE…"). Two columns give
   each name room to read. Colours stay four-up; they're just circles. */
.or-filter__grid--chips { grid-template-columns: repeat(2, 1fr); }

.or-filter__opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  text-align: center;
}

.or-filter__swatch {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(23, 17, 26, 0.16);
  box-shadow: inset 0 0 0 2px #fff;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.or-filter__swatch--split { background-image: linear-gradient(135deg, var(--c1) 0 50%, var(--c2) 50% 100%); }

.or-filter__name {
  font-family: var(--or-sans);
  font-size: 0.6875rem;
  line-height: 1.2;
  color: var(--or-ink-soft);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* With the extra width, chips should break at spaces rather than mid-word —
   only a single word longer than the chip may be broken. */
.or-filter__opt--chips .or-filter__name {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Sizes and brand/category read as pressable chips. */
.or-filter__opt--size,
.or-filter__opt--chips {
  justify-content: center;
  min-height: 38px;
  padding: 0.5rem 0.4rem;
  border: 1px solid var(--or-line);
  border-radius: var(--or-radius);
  background: #fff;
}

.or-filter__opt--size .or-filter__name,
.or-filter__opt--chips .or-filter__name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--or-ink);
}

.or-filter__input:checked + .or-filter__opt--size,
.or-filter__input:checked + .or-filter__opt--chips { border-color: var(--or-ink); background: var(--or-ink); }
.or-filter__input:checked + .or-filter__opt--size .or-filter__name,
.or-filter__input:checked + .or-filter__opt--chips .or-filter__name { color: #fff; }

.or-filter__input:checked + .or-filter__opt--color .or-filter__swatch {
  border-color: var(--or-ink);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--or-ink);
}

/* Scoped to colour swatches only. Unscoped, this matched chips and sizes too —
   same specificity as the white-on-ink rule above but later in the file, so a
   selected chip got the dark fill *and* dark text, i.e. an unreadable black
   block. A swatch label sits on the panel background, so ink is right there. */
.or-filter__input:checked + .or-filter__opt--color .or-filter__name { color: var(--or-ink); font-weight: 600; }

/* Filled chips always carry white text, whatever else matches. */
.or-filter__input:checked + .or-filter__opt--size .or-filter__name,
.or-filter__input:checked + .or-filter__opt--chips .or-filter__name { color: #fff; font-weight: 600; }
.or-filter__input:focus-visible + .or-filter__opt { outline: 2px solid var(--or-purple); outline-offset: 2px; border-radius: var(--or-radius); }
.or-filter__cell.is-disabled { opacity: 0.35; pointer-events: none; }

.or-filter__price { display: flex; align-items: center; gap: 0.5rem; }
.or-filter__price .input-group { flex: 1; }
.or-filter__price-sep { color: var(--or-ink-soft); }

/* ---- in-grid advertisement slot ----------------------------------------- */

.or-adslot { grid-column: 1 / -1; width: 100%; padding: 1rem; }

/* The grid is Bootstrap row-cols, so force a full-width break. */
.collection-products .row > .or-adslot { flex: 0 0 100%; max-width: 100%; }

.or-adslot__inner {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ad-radius, var(--or-radius-lg));
  background: var(--or-sand);
  text-decoration: none;
  color: var(--or-ink);
  min-height: var(--ad-h, 180px);
}

@media (min-width: 992px) {
  .or-adslot__inner { min-height: var(--ad-h-lg, 320px); }
}

/* Fill the slot rather than dictating its height, so the creative can be any
   aspect ratio and the merchant controls how tall the placement is. */
.or-adslot__inner picture { position: absolute; inset: 0; }
.or-adslot__inner img { display: block; width: 100%; height: 100%; object-fit: cover; }

.or-adslot__copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: var(--ad-align, flex-start);
  text-align: var(--ad-text-align, left);
  gap: 0.3rem;
  padding: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  color: var(--ad-ink, #fff);
  background: linear-gradient(to right,
    rgba(23, 17, 26, var(--ad-overlay, 0.62)),
    rgba(23, 17, 26, calc(var(--ad-overlay, 0.62) * 0.16)));
}

.or-adslot[style*="center"] .or-adslot__copy { text-align: center; }
.or-adslot[style*="flex-end"] .or-adslot__copy { text-align: right; }

/* Without artwork the slot still reads as a designed placement. */
.or-adslot__inner:not(:has(img)) .or-adslot__copy {
  position: static;
  color: var(--or-ink);
  background: none;
  min-height: 150px;
}

.or-adslot__eyebrow { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.9; }
.or-adslot__title { font-size: clamp(1.15rem, 0.9rem + 1.4vw, 2rem); line-height: 1.1; }
.or-adslot__text { font-size: 0.875rem; opacity: 0.9; max-width: 44ch; }
.or-adslot__cta { margin-top: 0.75rem; }

/* ---- tag badge ----------------------------------------------------------- */

.or-tag-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  font-family: var(--or-sans);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.38rem 0.5rem;
  border-radius: 2px;
  color: #fff;
}

/* Sale badge steps down when a tag badge is already occupying the corner. */
.or-tag-badge ~ .product-sale-badge { top: 2.1rem; }

/* ==========================================================================
   Product page — feedback
   ========================================================================== */

/* Title reads "Brand | Product Name", brand emphasised, name lighter and
   smaller. Replaces the Home/Bras/… breadcrumb that used to sit above. */
.or-ptitle {
  font-family: var(--or-sans) !important;
  font-size: 1rem !important;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
}

.or-ptitle__brand { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.875rem; }
.or-ptitle__sep { color: var(--or-line); margin-inline: 0.35rem; }
.or-ptitle__name { color: var(--or-ink-soft); }

/* Trust badges scroll as one line above the title. */
.or-trust {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.or-trust::-webkit-scrollbar { display: none; }
.or-trust__item { flex: none; }

/* Size options: label row carries a size-chart link on the right. */
.product-options .size-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.product-options .size-buttons label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--or-line);
  border-radius: var(--or-radius);
  background: #fff;
  font-family: var(--or-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--or-ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.product-options .size-buttons input:checked + label { background: var(--or-ink); border-color: var(--or-ink); color: #fff; }
.product-options .size-buttons input:disabled + label { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }
.product-options .title { font-family: var(--or-sans); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* Sticky bar clears the bottom nav on phones. */
@media (max-width: 991.98px) {
  body.has-oraani-mobile-nav .sticky-atc { bottom: var(--or-mobile-nav-h) !important; }
}

/* ---- badge stack --------------------------------------------------------
   One column at the top-left; each badge is static inside it, so they can
   never sit on top of one another regardless of which are present. */

.or-card-badges {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  pointer-events: none;
}

.or-card-badges:empty { display: none; }

.product-card .or-card-badges .product-sale-badge,
.product-card .or-card-badges .product-custom-badge,
.or-card-badges .or-tag-badge {
  position: static;
  top: auto;
  left: auto;
  bottom: auto;
  right: auto;
}

/* ---- size buttons -------------------------------------------------------
   The theme styles these as `.product-options .size-buttons input + label`
   (0,2,2), which outranked the selector used before, so none of this applied.
   Match that specificity and centre the label properly. */

.product-options .size-buttons { gap: 0.4rem; margin-left: 0; margin-right: 0; }

.product-options .size-buttons li { margin: 0; }

.product-options .size-buttons input + label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 52px;
  min-height: 44px;
  padding: 0 0.85rem;
  margin: 0;
  line-height: 1;
  border-radius: var(--or-radius);
  border: 1.5px solid var(--or-line);
  font-family: var(--or-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--or-ink);
}

.product-options .size-buttons input + label:hover { border-color: var(--or-ink); background: transparent; }
.product-options .size-buttons input:checked + label { background-color: var(--or-ink); border-color: var(--or-ink); color: #fff; }

/* Buy Now sits directly under Add to cart — the atc block's own bottom padding
   plus this margin was opening a large gap between the two actions. */
.or-buynow { margin-top: 0.6rem; }
.product-block-atc .product-dynamic-buttons { margin-top: 0.6rem !important; padding-bottom: 0 !important; }

/* ---- card badge corners -------------------------------------------------
   Two flex stacks. Children are static inside them, so nothing can overlap or
   spill outside the card — the Sold out badge was escaping because it kept
   the theme's own absolute positioning. */

.or-card-badges {
  position: absolute;
  top: 0.6rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: calc(100% - 1.2rem);
  pointer-events: none;
}

.or-card-badges--left { left: 0.6rem; align-items: flex-start; }
.or-card-badges--right { right: 0.6rem; align-items: flex-end; }
.or-card-badges:empty { display: none; }

/* Neutralise every absolutely-positioned badge inside the stacks. */
.product-card .or-card-badges .product-sale-badge,
.product-card .or-card-badges .product-sold-out-badge,
.product-card .or-card-badges .product-custom-badge,
.or-card-badges .or-tag-badge {
  position: static;
  inset: auto;
  margin: 0;
  max-width: 100%;
  white-space: nowrap;
}

.product-card .or-card-badges .product-sold-out-badge {
  background: var(--or-ink);
  color: #fff;
  font-family: var(--or-sans);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.38rem 0.5rem;
  border-radius: 2px;
}

/* The wishlist heart lives in the right stack, below the price badge. */
.product-card .or-card-badges--right wishlist-button { pointer-events: auto; }

.product-card .or-card-badges--right .btn-wishlist,
.product-card .or-card-badges--right .img-btn-wishlist {
  position: static;
  inset: auto;
  margin: 0;
}

/* ==========================================================================
   Brands mosaic
   ========================================================================== */

.or-brands__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

/* Wide tiles break the two-up rhythm on phones, and take two of four
   columns on desktop so the rows still close cleanly. */
.or-brands__item.is-wide { grid-column: span 2; }

@media (min-width: 768px) {
  .or-brands__grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}

.or-brands__tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--or-radius);
  background: var(--or-bg-sunk);
  text-decoration: none;
  color: var(--or-ink);
}

.or-brands__media { display: block; aspect-ratio: 4 / 5; }
.or-brands__item.is-wide .or-brands__media { aspect-ratio: 16 / 9; }

@media (min-width: 768px) {
  .or-brands__item.is-wide .or-brands__media { aspect-ratio: 8 / 5; }
}

.or-brands__media img,
.or-brands__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.or-brands__tile:hover .or-brands__media img { transform: scale(1.04); }

/* White name chip, bottom-left, as in the reference. */
.or-brands__label {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: calc(100% - 1.5rem);
  padding: 0.5rem 0.8rem;
  background: #fff;
  color: var(--or-ink);
  font-family: var(--or-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(23, 17, 26, 0.14);
  transition: color 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.or-brands__tile:hover .or-brands__label { color: var(--or-purple); }

.or-brands__count {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--or-ink-soft);
  padding-left: 0.4rem;
  border-left: 1px solid var(--or-line);
}

@media (max-width: 400px) {
  .or-brands__label { font-size: 0.75rem; padding: 0.4rem 0.6rem; }
}

/* ==========================================================================
   Fixes
   ========================================================================== */

/* ---- shoppable videos: no play badge over a video that is already playing */

/* The badge is a `::after` on the card. `:hover` matched at the same
   specificity and came later in sections.css, so hovering (or a latched touch
   "hover" on phones) painted it back over an autoplaying video. */
.shoppable-videos .card[data-playing="true"]::after,
.shoppable-videos .card[data-playing="true"]:hover::after {
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

/* Touch devices latch `:hover` after a tap — never grow the badge there. */
@media (hover: none), (pointer: coarse) {
  .shoppable-videos .card:hover::after {
    background-color: rgba(var(--bs-body-color-rgb), .5);
    transform: translate(-50%, -50%) scale(.9);
  }
}

/* ---- edge-bleed rails keep their gutter -------------------------------- */

/* Every rail is a `<ul class="... list-unstyled">`, and Bootstrap's
   `.list-unstyled { padding-left: 0 }` cancelled the bleed's padding — the
   negative margin survived, so the first card sat flush against the screen
   edge (outfit finder, story bar, reviews). Physical longhands at higher
   specificity so the gutter always wins. */
@media (max-width: 767.98px) {
  .or-rail.or-rail--bleed {
    margin-left: calc(var(--or-gutter) * -1);
    margin-right: calc(var(--or-gutter) * -1);
    padding-left: var(--or-gutter);
    padding-right: var(--or-gutter);
    scroll-padding-left: var(--or-gutter);
  }
}

/* ------------------------------------------------------- become a seller */

.or-seller__layout { display: grid; gap: 2.5rem; align-items: start; }

@media (min-width: 992px) {
  .or-seller__layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 4rem; }
  .or-seller__intro { position: sticky; top: 6rem; }
}

.or-seller__points { display: grid; gap: 1.25rem; margin: 2rem 0 0; }

.or-seller__points li {
  display: grid;
  gap: 0.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--or-line);
}

.or-seller__point-title { font-weight: 600; font-size: 0.9375rem; }
.or-seller__point-text { font-size: 0.875rem; color: var(--or-ink-soft); line-height: 1.6; }

.or-seller__panel {
  background: #fff;
  border: 1px solid var(--or-line);
  border-radius: var(--or-radius-lg);
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  box-shadow: var(--or-shadow);
}

.or-seller__grid { display: grid; gap: 1.125rem; }
@media (min-width: 640px) { .or-seller__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.or-field--full { grid-column: 1 / -1; }

.or-field { display: grid; gap: 0.375rem; min-width: 0; }

.or-field__label {
  font-family: var(--or-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--or-ink-soft);
}

.or-field__label span { color: var(--or-sale); }

.or-field__input {
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--or-ink);
  background: var(--or-bg-sunk);
  border: 1px solid var(--or-line);
  border-radius: var(--or-radius);
  padding: 0.75rem 0.875rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.or-field__input::placeholder { color: var(--or-ink-soft); opacity: 0.6; }

.or-field__input:focus {
  outline: none;
  background: #fff;
  border-color: var(--or-purple);
  box-shadow: 0 0 0 3px rgba(75, 30, 183, 0.12);
}

.or-field__textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }

/* Native select arrow is inconsistent across engines — draw our own. */
.or-field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b5060' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.or-field__check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--or-ink-soft);
  cursor: pointer;
}

.or-field__check input { margin-top: 0.15rem; width: 1rem; height: 1rem; accent-color: var(--or-purple); flex: none; }

.or-seller__submit { margin-top: 1.75rem; width: 100%; }

.or-seller__footnote { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--or-ink-soft); text-align: center; }

.or-seller__alert {
  border-radius: var(--or-radius);
  padding: 0.875rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.55;
}

.or-seller__alert--ok { background: var(--or-success-soft); color: var(--or-success); }
.or-seller__alert--error { background: #fdeaf1; color: var(--or-sale); }
.or-seller__alert ul { margin: 0; padding-left: 1.1rem; }
.or-seller__alert a { color: inherit; text-decoration: underline; }

/* ------------------------------------ long collection copy: clamp + sheet */

/* Collection descriptions are often pasted out of Word or Excel, arriving as a
   layout table with hard pixel widths (Blossom ships `<table width="551">` on a
   390px screen). The header clips overflow, so those rows just ran off the side
   of the phone. Strip the authored widths and let the copy wrap. */
.collection-header .description table,
.collection-header .description colgroup,
.collection-header .description col,
.collection-header .description tbody,
.collection-header .description tr,
.collection-header .description td,
.collection-header .description th,
.or-sheet__body table,
.or-sheet__body colgroup,
.or-sheet__body col,
.or-sheet__body tbody,
.or-sheet__body tr,
.or-sheet__body td,
.or-sheet__body th {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
}

.collection-header .description table,
.or-sheet__body table {
  width: 100% !important;
  table-layout: fixed;
  border-collapse: collapse;
}

.collection-header .description td,
.collection-header .description th,
.or-sheet__body td,
.or-sheet__body th { padding: 0; }

.collection-header .description,
.or-sheet__body { overflow-wrap: anywhere; }

/* Nothing inside the sheet may push it sideways. */
.or-sheet__body { overflow-x: hidden; }
.or-sheet__body img { max-width: 100%; height: auto; }

/* Height-based clamp rather than `-webkit-line-clamp`: these descriptions are
   arbitrary RTE markup (tables, lists), and line-clamp only counts lines in a
   plain inline flow. A max-height plus fade works for any content, and makes
   scrollHeight/clientHeight a trustworthy overflow test. */
.collection-header .description.or-clamp {
  max-height: var(--or-clamp-h, 6.5rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

@media (min-width: 992px) {
  .collection-header .description.or-clamp { --or-clamp-h: 9rem; }
}

.or-readmore {
  display: inline-block;
  margin-top: 0.625rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--or-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-underline-offset: 4px;
  text-decoration: underline;
  cursor: pointer;
}

.or-readmore:hover { opacity: 0.75; }

/* Bottom sheet on phones, centred panel from `md` up. Native <dialog> gives us
   Esc, the backdrop and focus handling without a JS trap. */
.or-sheet {
  width: min(640px, 100%);
  max-width: 100%;
  max-height: 85dvh;
  padding: 0;
  border: 0;
  margin: auto auto 0;
  background: var(--or-bg);
  color: var(--or-ink);
  border-radius: var(--or-radius-lg) var(--or-radius-lg) 0 0;
  box-shadow: var(--or-shadow-lg);
  overflow: hidden;
}

.or-sheet::backdrop { background: rgba(23, 17, 26, 0.55); backdrop-filter: blur(2px); }

@media (min-width: 768px) {
  .or-sheet { margin: auto; border-radius: var(--or-radius-lg); max-height: 80dvh; }
}

.or-sheet__inner { display: flex; flex-direction: column; max-height: inherit; }

.or-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--or-line);
  flex: none;
}

.or-sheet__title { font-size: 1.125rem; margin: 0; }
.or-sheet__title[hidden] { display: none; }

.or-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--or-line);
  border-radius: 999px;
  background: transparent;
  color: var(--or-ink);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.or-sheet__close:hover { background: var(--or-ink); color: #fff; }

.or-sheet__body {
  padding: 1.25rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 0.9375rem;
  line-height: 1.7;
  text-align: left;
  overscroll-behavior: contain;
}

.or-sheet__body > :first-child { margin-top: 0; }
.or-sheet__body > :last-child { margin-bottom: 0; }

/* ------------------------------------------- live search on /search page */

.or-search-live { display: block; }
.or-search-live .search-form { position: relative; }

/* Results render inline on the page as you type — no reload, and no floating
   panel. The element has to stay inside the form (the theme's PredictiveSearch
   looks it up with `this.form.querySelector('#predictive-search')`), so it
   breaks out of the form's 600px container rather than moving in the DOM. */
.or-search-live__panel:empty { display: none; }

.or-search-live__panel {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 2rem;
  text-align: left;
}

.or-search-live__panel .predictive-search-results {
  max-width: var(--bs-container-max-width, 1600px);
  margin-inline: auto;
  padding: 0 var(--or-gutter);
}

.or-search-live__panel .predictive-search-results.pt-7 { padding-top: 0; }

/* The predictive markup is built for a ~400px drawer: one product per row, a
   Bootstrap `row` splitting image and details side by side. Stretched to page
   width that gives a giant photo per result. Re-lay it out as a card grid. */
.or-search-live__panel .title-border-bottom {
  text-align: left;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or-ink-soft);
  border-bottom: 1px solid var(--or-line);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.or-search-live__panel .title-border-bottom span { border: 0; padding: 0; }

/* Query suggestions read as chips, not full-bleed table rows. */
.or-search-live__panel .predictive-search-results-queries-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.or-search-live__panel .predictive-search-results-queries-list .list-group-item {
  border: 0;
  padding: 0;
  background: none;
  width: auto;
}

.or-search-live__panel .predictive-search-results-queries-list .list-group-item-action {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--or-line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.8125rem;
  color: var(--or-ink);
}

.or-search-live__panel .predictive-search-results-queries-list .list-group-item-action:hover {
  border-color: var(--or-purple);
  color: var(--or-purple);
}

/* Products, collections, pages and articles all become card grids. */
.or-search-live__panel .predictive-search-results-products-list,
.or-search-live__panel .predictive-search-results-collections-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .or-search-live__panel .predictive-search-results-products-list,
  .or-search-live__panel .predictive-search-results-collections-list {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

.or-search-live__panel .predictive-search-results-products-list .list-group-item,
.or-search-live__panel .predictive-search-results-collections-list .list-group-item {
  border: 0;
  padding: 0;
  background: none;
}

/* Stack the drawer's side-by-side row into image-over-details. */
.or-search-live__panel .list-group-item .row { display: block; margin: 0; }

.or-search-live__panel .list-group-item .row > [class*="col-"] {
  width: 100%;
  max-width: 100%;
  flex: none;
  padding: 0;
}

.or-search-live__panel .list-group-item .row > [class*="col-"]:first-child { margin-bottom: 0.75rem; }

.or-search-live__panel .list-group-item img {
  width: 100%;
  height: auto;
  border-radius: var(--or-radius);
}

.or-search-live__panel .cart-item-product-title {
  font-size: 0.875rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.or-search-live__panel .list-group-item .mb-4 { margin-bottom: 0.5rem !important; }
.or-search-live__panel .btn-quick-view { width: 100%; font-size: 0.75rem; }

/* While a live query is showing, the page's own server-rendered results would
   be a stale duplicate underneath. */
.search-main:has(.or-search-live__panel:not(:empty)) .search-inner { display: none; }

/* Clear button — sits between the text and the submit icon, on the same
   baseline as both. Also replaces the native `input[type=search]` cross, whose
   position and colour are browser-controlled and looked pasted on. */
.or-search-live input[type="search"]::-webkit-search-cancel-button,
.or-search-live input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.or-search-clear {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  align-self: center;
  margin-inline: 0.25rem 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--or-ink-soft);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.or-search-clear:hover { background: var(--or-bg-sunk); color: var(--or-ink); }
.or-search-clear[hidden] { display: none; }

/* The field is the wrapper, not the input: that way the clear control sits
   inside the border rather than floating outside it. The theme's own border
   and background move off the input onto this box. */
.or-search-field {
  position: relative;
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--or-line);
  border-radius: var(--or-radius);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.or-search-field:focus-within {
  border-color: var(--or-purple);
  box-shadow: 0 0 0 3px rgba(75, 30, 183, 0.12);
}

.or-search-field .form-floating { flex: 1; min-width: 0; }

.or-search-field .form-floating > .form-control,
.or-search-field .form-floating > .form-control:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  padding-inline: 1rem 3rem;
}

.or-search-field .form-floating > label { padding-inline: 1rem; }

/* Inside the field, vertically centred, clear of the text. */
.or-search-field .or-search-clear {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  margin: 0;
}

.search-main [data-or-search-results] { transition: opacity 0.15s ease; }
.or-search-live.is-loading ~ * [data-or-search-results],
.search-main:has(.or-search-live.is-loading) [data-or-search-results] { opacity: 0.45; }

/* The section's own headings were sized for a hero, which is far too loud for
   a results list that updates on every keystroke. */
.search-main .section-header h1.title {
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.search-main .search-utilities .search-product-count {
  font-family: var(--or-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or-ink-soft);
}

/* --------------------------------------------------- search result tabs */

/* Tabs, not pills: a single row sharing one baseline rule, with the active one
   marked by an underline. Pills read as filters you can multi-select; these are
   mutually exclusive views. */
.or-stabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.75rem;
  justify-content: flex-start;
  margin-top: 1.75rem;
  padding-inline: 0.25rem;
  border-bottom: 1px solid var(--or-line);
  overflow-x: auto;
  scrollbar-width: none;
}

.or-stabs::-webkit-scrollbar { display: none; }
.or-stabs[hidden] { display: none; }

@media (min-width: 768px) { .or-stabs { justify-content: center; gap: 2.5rem; } }

.or-stab {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  flex: none;
  padding: 0 0 0.75rem;
  border: 0;
  background: none;
  color: var(--or-ink-soft);
  font-family: var(--or-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* Sits on the container's rule rather than adding a second line. */
.or-stab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--or-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.or-stab:hover { color: var(--or-ink); }
.or-stab.is-active { color: var(--or-ink); }
.or-stab.is-active::after { transform: scaleX(1); }

.or-stab__n { font-size: 0.6875rem; font-weight: 500; opacity: 0.55; }
.or-stab.is-active .or-stab__n { opacity: 0.7; }

/* ---- non-product result rows (collections, pages, journal) ------------- */

.or-sresults { display: grid; gap: 0.25rem; }

.or-sresult a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--or-line);
  color: var(--or-ink);
  text-decoration: none;
  transition: padding-inline-start 0.25s ease, color 0.2s ease;
}

.or-sresult a:hover { padding-inline-start: 0.75rem; color: var(--or-purple); }

.or-sresult__media {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: none;
  overflow: hidden;
  border-radius: var(--or-radius);
  background: var(--or-bg-sunk);
}

.or-sresult__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.or-sresult__copy { display: grid; gap: 0.2rem; min-width: 0; flex: 1; }

.or-sresult__kicker {
  font-family: var(--or-sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or-ink-soft);
}

.or-sresult__title { font-size: 1rem; font-weight: 600; line-height: 1.3; }

.or-sresult__meta,
.or-sresult__excerpt {
  font-size: 0.8125rem;
  color: var(--or-ink-soft);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.or-sresult__go { flex: none; color: var(--or-ink-soft); }
.or-sresult a:hover .or-sresult__go { color: var(--or-purple); }

/* ---- collections as cards ---------------------------------------------- */

/* Collections are visual, so they read better as a grid of cards than as a
   list of rows. Pages and journal entries stay as rows — they are text. */
.or-sresults--collections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
}

@media (min-width: 600px) {
  .or-sresults--collections { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .or-sresults--collections { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.25rem; }
}

.or-sresults--collections .or-sresult a {
  display: block;
  padding: 0;
  border: 0;
  transition: color 0.2s ease;
}

/* Reset the row treatment — cards must not indent on hover. */
.or-sresults--collections .or-sresult a:hover { padding-inline-start: 0; }

.or-sresults--collections .or-sresult__media {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--or-radius);
  overflow: hidden;
  background: var(--or-bg-sunk);
}

.or-sresults--collections .or-sresult__media img {
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.or-sresults--collections .or-sresult a:hover .or-sresult__media img { transform: scale(1.05); }

.or-sresults--collections .or-sresult__copy {
  display: grid;
  gap: 0.15rem;
  margin-top: 0.75rem;
}

/* The tab above already says "Collections" — repeating it on every card is
   noise at this density. */
.or-sresults--collections .or-sresult__kicker { display: none; }

.or-sresults--collections .or-sresult__title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.or-sresults--collections .or-sresult__meta {
  font-family: var(--or-sans);
  font-size: 0.75rem;
  color: var(--or-ink-soft);
}

.or-sresults--collections .or-sresult__go { display: none; }

/* A media box with nothing in it is just a grey square that knocks the copy out
   of alignment — collapse it. Covers the moment before a borrowed collection
   image arrives, and any article that has no image at all. */
.or-sresult__media:empty { display: none; }

/* The tab row carries its own top margin, so the header needs no bottom
   padding underneath it — that was stacking space on space. */
.search-main .section-header { padding-bottom: 0; }
.search-main .or-stabs { margin-bottom: 0; }

/* ================================================================ header */

/* `#header-group` carries Bootstrap's .sticky-top. Its own height is exactly
   the header's, so sticky had no room to travel — neutralise it and let the
   section pin itself with `position: fixed` plus a spacer. */
#header-group.sticky-top { position: static; z-index: auto; }

.or-hdr.is-fixed,
.or-hdr__bar.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.2s ease;
}

/* Holds the space the fixed header vacated, so content does not jump. */
.or-hdr__spacer { flex: none; }

.or-hdr.is-stuck,
.or-hdr__bar.is-stuck { box-shadow: 0 8px 28px -24px rgba(26, 17, 25, 0.6); }

/* Scroll-down: slide out of view rather than fade, so it reads as one motion. */
.or-hdr.is-hidden,
.or-hdr__bar.is-hidden { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .or-hdr.is-fixed,
  .or-hdr__bar.is-fixed { transition: none; }
}
}



.sort-by .dropdown-menu {
  max-width: calc(100vw - 1.5rem);
  max-height: min(60vh, 22rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}



/* ---------------------------------------- product card colour swatch state */

.product-card-color-swatches .btn.is-active .swatch-dot,
.product-card-color-swatches .btn.is-active .swatch-custom-image {
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--or-ink);
  border-color: var(--or-ink);
}



.or-contact__row { border-bottom: 1px solid var(--or-line); }



.or-contact__row a {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  padding: 1.25rem 0.25rem;
  color: var(--or-ink);
  text-decoration: none;
  transition: padding-inline-start 0.25s ease, color 0.2s ease;
}



.or-contact__row a:hover { padding-inline-start: 0.75rem; color: var(--or-purple); }



.or-contact__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--or-line);
  border-radius: var(--or-radius);
  color: var(--or-ink);
  transition: border-color 0.2s ease, color 0.2s ease;
}



.or-contact__row a:hover .or-contact__icon { border-color: var(--or-purple); color: var(--or-purple); }



.or-contact__body { display: grid; gap: 0.15rem; min-width: 0; flex: 1; }



.or-contact__label {
  font-family: var(--or-sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or-ink-soft);
}



.or-contact__value {
  font-family: var(--or-display);
  font-size: 1.125rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: pre-line;
}



.or-contact__note { font-family: var(--or-sans); font-size: 0.75rem; color: var(--or-ink-soft); }



.or-contact__go { flex: none; opacity: 0; transform: translateX(-6px); transition: opacity 0.2s ease, transform 0.2s ease; }


.or-contact__row a:hover .or-contact__go { opacity: 1; transform: none; }



/* Newsletter status */
.or-ftr__ok[hidden], .or-ftr__err[hidden] { display: none; }



.or-ftr .or-ftr__field input,
.or-ftr .or-ftr__field input[type="tel"],
.or-ftr .or-ftr__field input[type="email"] {
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
}



.or-ftr .or-ftr__field input::placeholder { color: rgba(255, 255, 255, 0.6); opacity: 1; }


.or-ftr .or-ftr__field input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); }



.or-ftr .or-ftr__field input:-webkit-autofill,
.or-ftr .or-ftr__field input:-webkit-autofill:hover,
.or-ftr .or-ftr__field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 100000s ease-in-out 0s;
}



/* Thumbnails already show position and let you jump to any frame — dots and a
   scrollbar underneath repeat that worse. */
.product-media-gallery .swiper-main .swiper-pagination,
.product-media-gallery .swiper-main .swiper-scrollbar { display: none; }



/* The pill styling below sets `color: var(--or-ink)` at specificity 0,3,0,
   which outranks Bootstrap's `.btn-outline-primary.show` (0,2,0). So when the
   menu opened, Bootstrap painted the purple active background but our dark ink
   stayed on the label — near-invisible. Restate the colour for every state
   where the fill goes dark. */
.or-toolbar__sort .sort-by .btn.show,
.or-toolbar__sort .sort-by .btn:active,
.or-toolbar__sort .sort-by .btn[aria-expanded="true"],
.sort-by .btn.show,
.sort-by .btn[aria-expanded="true"] {
  background-color: var(--or-purple);
  border-color: var(--or-purple);
  color: #fff;
}



.or-toolbar__sort .sort-by .btn.show .dropdown-toggle::after,
.sort-by .btn.show::after { color: #fff; }



/* Same trap on the chosen option inside the menu. */
.sort-by .btn-check:checked + .dropdown-item,
.sort-by .dropdown-item.active,
.sort-by .dropdown-item:active {
  background-color: var(--or-purple);
  color: #fff;
}



.or-mmenu__foot-social .social-icons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}



.or-mmenu__foot-social .nav-item { display: flex; }



.or-mmenu__foot-social .nav-link {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  color: var(--or-ink);
  transition: background-color 0.2s ease, color 0.2s ease;
}



.or-mmenu__foot-social .nav-link:hover { background: var(--or-ink); color: #fff; }


.or-sheet__body table td,
.or-sheet__body table th { padding: 0.375rem 0.5rem; border: 1px solid var(--or-line); text-align: center; }



/* The quiet-until-hovered rule below sets `color: var(--or-ink)` on
   `.product-card:hover .btn-atc` — same specificity (0,3,0) as the button's own
   `:hover`, but later in the file, so it won. Hovering the button therefore
   painted the dark fill and then forced dark text back on top of it: a solid
   black slab with the label invisible. Hovering the button always implies
   hovering the card, so the filled state has to be restated for that pairing. */
.product-card:hover .btn-quick-view:hover,
.product-card:hover .btn-atc:hover,
.product-card:hover .btn-atc-dropup:hover,
.product-card:hover .btn-atc-dropup.show,
.product-card .btn-quick-view:focus-visible,
.product-card .btn-atc:focus-visible,
.product-card .btn-atc-dropup:focus-visible {
  background: var(--or-ink);
  border-color: var(--or-ink);
  color: #fff;
}



.or-vendor--ruled { border-top: var(--ov-rule-width, 1px) solid var(--ov-line, var(--or-line)); }



.or-vendor__eyebrow {
  font-family: var(--or-sans);
  font-size: var(--ov-eyebrow-size, 10px);
  font-weight: var(--ov-eyebrow-weight, 600);
  letter-spacing: var(--ov-eyebrow-spacing, 0.18em);
  text-transform: var(--ov-eyebrow-transform, uppercase);
  color: var(--ov-muted, var(--or-ink-soft));
  margin: 0 0 var(--ov-gap, 12px);
}



.or-vendor__head {
  display: flex;
  align-items: center;
  gap: calc(var(--ov-gap, 12px) * 0.75);
  justify-content: var(--ov-align, left);
}



.or-vendor__logo {
  display: grid;
  place-items: center;
  width: var(--ov-logo, 44px);
  height: var(--ov-logo, 44px);
  flex: none;
  border: 1px solid var(--ov-line, var(--or-line));
  border-radius: var(--ov-logo-radius, 2px);
  overflow: hidden;
  background: #fff;
}



.or-vendor__logo img { width: 100%; height: 100%; object-fit: contain; }



.or-vendor__name {
  font-family: var(--ov-name-font, var(--or-display));
  font-size: var(--ov-name-size, 20px);
  font-weight: var(--ov-name-weight, 400);
  line-height: 1.2;
}



.or-vendor__about {
  margin-top: var(--ov-gap, 12px);
  font-size: var(--ov-about-size, 14px);
  line-height: var(--ov-about-leading, 1.65);
  color: var(--ov-muted, var(--or-ink-soft));
}



.or-vendor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--ov-gap, 12px) * 1.2);
  margin-top: var(--ov-gap, 12px);
  justify-content: var(--ov-align, left);
}



.or-vendor__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--or-sans);
  font-size: var(--ov-link-size, 12px);
  font-weight: var(--ov-link-weight, 600);
  letter-spacing: var(--ov-link-spacing, 0.1em);
  text-transform: var(--ov-link-transform, uppercase);
  color: var(--ov-ink, var(--or-ink));
  cursor: pointer;
}



.or-vendor--link-underline .or-vendor__link { text-decoration: underline; text-underline-offset: 4px; }


.or-vendor--link-plain .or-vendor__link { text-decoration: none; }



.or-vendor--link-button .or-vendor__link {
  text-decoration: none;
  padding: 0.7em 1.2em;
  border: 1px solid var(--ov-line, var(--or-line));
  border-radius: var(--ov-radius, 0);
}



.or-vendor--link-button .or-vendor__link:hover {
  border-color: var(--ov-accent, var(--or-purple));
  background: var(--ov-accent, var(--or-purple));
  color: #fff;
}



.or-vendor__link:hover { color: var(--ov-accent, var(--or-purple)); }



.or-vendor__link svg { transition: transform 0.2s ease; }


.or-vendor__link:hover svg { transform: translateX(3px); }



.or-trust--ruled { border-top: var(--ot-rule-width, 1px) solid var(--ot-line, var(--or-line)); }



.or-trust__heading {
  font-family: var(--or-sans);
  font-size: var(--ot-sub-size, 11px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ot-muted, var(--or-ink-soft));
  text-align: var(--ot-align, center);
  margin: 0 0 var(--ot-gap, 14px);
}



.or-trust__grid {
  display: grid;
  grid-template-columns: repeat(var(--ot-cols, 3), minmax(0, 1fr));
  gap: var(--ot-gap, 14px);
}



.or-trust--cards .or-trust__item {
  padding: calc(var(--ot-gap, 14px) * 0.8);
  border: 1px solid var(--ot-line, var(--or-line));
  border-radius: var(--ot-radius, 0);
}



.or-trust__icon svg { width: 100%; height: 100%; }



.or-trust__title {
  font-family: var(--or-sans);
  font-size: var(--ot-title-size, 12px);
  font-weight: var(--ot-title-weight, 600);
  letter-spacing: var(--ot-title-spacing, 0.02em);
  text-transform: var(--ot-title-transform, none);
  line-height: 1.3;
}



.or-trust__sub {
  font-family: var(--or-sans);
  font-size: var(--ot-sub-size, 11px);
  color: var(--ot-muted, var(--or-ink-soft));
  line-height: 1.4;
}



.or-trust__item--returns.is-yes .or-trust__icon { color: var(--ot-yes, var(--or-success)); }


.or-trust__item--returns.is-no .or-trust__icon { color: var(--ot-no, var(--or-ink-soft)); }


.or-stmt--ruled { border-top: 1px solid var(--or-line); }


.or-section--ink.or-stmt--ruled { border-top-color: rgba(255, 255, 255, 0.18); }



.or-stmt__inner {
  display: flex;
  flex-direction: column;
  align-items: var(--os-items, center);
  text-align: var(--os-align, center);
  max-width: var(--os-max, 720px);
  margin-inline: auto;
  gap: 0.875rem;
}



.or-stmt__title {
  font-size: var(--os-title, 32px);
  line-height: 1.12;
  margin: 0;
  /* Even out ragged wraps rather than leaving one orphan word on line two. */
  text-wrap: balance;
}



.or-stmt__body {
  font-size: var(--os-body, 15px);
  line-height: var(--os-leading, 1.75);
  color: var(--or-ink-soft);
  /* Measure, not layout: the section's own Content width setting decides how
     wide the block is. A hard ch cap here fought that setting. */
  max-width: min(100%, var(--os-max, 720px));
}



.or-section--ink .or-stmt__body { color: rgba(255, 255, 255, 0.78); }



.or-stmt__body > :first-child { margin-top: 0; }


.or-stmt__body > :last-child { margin-bottom: 0; }


.or-stmt__body p + p { margin-top: 0.9em; }



.or-stmt__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }



.predictive-search-results .predictive-search-results-queries-list .list-group-item-action {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--or-line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--or-ink);
  white-space: nowrap;
}



.predictive-search-results .predictive-search-results-queries-list .list-group-item-action:hover {
  border-color: var(--or-purple);
  color: var(--or-purple);
}



.predictive-search-results-products-list .list-group-item .row {
  display: block;
  margin: 0;
}



.predictive-search-results-products-list .list-group-item .row > [class*="col-"] {
  width: 100%;
  max-width: 100%;
  flex: none;
  padding: 0;
}



.predictive-search-results-products-list .list-group-item .row > [class*="col-"]:first-child {
  margin-bottom: 0.6rem;
}



.predictive-search-results-products-list .list-group-item img {
  width: 100%;
  height: auto;
  border-radius: var(--or-radius);
}



.predictive-search-results-products-list .cart-item-product-title {
  font-size: 0.8125rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}



.predictive-search-results-products-list .mb-4 { margin-bottom: 0.4rem !important; }


.predictive-search-results-products-list .btn-quick-view { width: 100%; font-size: 0.6875rem; }



.predictive-search-results ul.predictive-search-results-queries-list > li.list-group-item {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
}



.predictive-search-results ul.predictive-search-results-queries-list > li.list-group-item > a.list-group-item-action {
  /* inline-block, not inline-flex: Shopify's `styled_text` is a mix of text
     nodes and <mark>, and a flex container drops the whitespace between them —
     which turned "strapless bra" into "straplessbra". */
  display: inline-block;
  width: auto;
  max-width: 100%;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--or-line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--or-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



.predictive-search-results ul.predictive-search-results-queries-list > li.list-group-item > a.list-group-item-action:hover {
  border-color: var(--or-purple);
  color: var(--or-purple);
  background: #fff;
}


.predictive-search-results-queries-list mark { color: inherit; font-weight: 600; }



.predictive-search-results .predictive-search-option-search-keywords .btn,
.predictive-search-results .predictive-search-option-search-keywords button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--or-ink);
  border-radius: var(--or-radius);
  background: transparent;
  color: var(--or-ink);
  font-family: var(--or-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}



.predictive-search-results .predictive-search-option-search-keywords .btn:hover,
.predictive-search-results .predictive-search-option-search-keywords button:hover {
  background: var(--or-ink);
  color: #fff;
  border-color: var(--or-ink);
}



.predictive-search-results .predictive-search-option-search-keywords svg { flex: none; }



@media (min-width: 992px) { .or-hdr__left { display: none; } }


.or-vid__head { text-align: center; max-width: 680px; margin: 0 auto 1.75rem; }


.or-vid__head .or-section-title { margin: 0.35rem 0 0; }



.or-vid__frame {
  position: relative;
  max-width: var(--ov-max, 1000px);
  margin-inline: auto;
  height: var(--ov-h, 380px);
  border-radius: var(--ov-radius, 4px);
  overflow: hidden;
  background: var(--or-bg-sunk);
}



@media (max-width: 767.98px) {
  .or-vid__frame--bleed {
    max-width: 100vw;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-radius: 0;
  }
}



.or-vid__frame video,
.or-vid__frame .or-vid__el,
.or-vid__placeholder svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



.or-vid__frame.is-playing::after { opacity: 0; }



.or-vid__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.25s ease;
}



.or-vid__frame.is-playing .or-vid__play { opacity: 0; pointer-events: none; }



.or-vid__play-dot {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(6px);
  transition: transform 0.2s ease, background-color 0.2s ease;
}



.or-vid__play:hover .or-vid__play-dot { transform: scale(1.06); background: rgba(255, 255, 255, 0.28); }


.or-vid__play-dot svg { fill: currentColor; margin-left: 3px; }



.or-vid__play-label {
  font-family: var(--or-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}



.or-vid__caption {
  max-width: 620px;
  margin: 1rem auto 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--or-ink-soft);
}



.or-ftr__brandlink {
  font-family: var(--or-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}



.or-ftr__brandlink:hover { color: var(--or-lilac); }
/* ---- footer brand links (About us / Our story) ------------------------- */

/* The container rule was lost with the rest; without it the two links had no
   row, no gap and no top margin, which is the spacing problem. */
.or-ftr__brandlinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin: 1.5rem 0 0;
}

/* ---- founder CTA on an ink background ---------------------------------- */

/* `.or-btn--ink` is an ink fill, which disappears on `.or-section--ink`. Flip
   it to the light treatment so the button reads on the dark panel. */
.or-section--ink .or-btn--ink,
.or-founder.or-section--ink .or-founder__cta {
  background: #fff;
  border-color: #fff;
  color: var(--or-ink);
}

.or-section--ink .or-btn--ink:hover,
.or-founder.or-section--ink .or-founder__cta:hover {
  background: var(--or-lilac);
  border-color: var(--or-lilac);
  color: var(--or-ink);
}

/* ---- product card vendor ------------------------------------------------ */

.product-card-vendor {
  display: block;
  font-family: var(--or-sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or-ink-soft);
  margin-bottom: 0.3rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

a.product-card-vendor:hover { color: var(--or-purple); text-decoration: underline; text-underline-offset: 3px; }

/* ---- contact channel list (container) ---------------------------------- */

/* This rule was lost in the truncation. Without it the list kept browser
   defaults — no width cap, no rule, and the rows fell back to inline text,
   which is the run-together "WhatsApp +91 …Mon–Sat, 10am–7pm IST →" line. */
.or-contact__list {
  max-width: 720px;
  margin: 2rem auto 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--or-line);
}

/* Restated here so the row layout cannot be undone by the theme's global
   link styling — that is what produced the underlined single line. */
.or-contact__list .or-contact__row a {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  padding: 1.15rem 0.25rem;
  text-decoration: none;
  color: var(--or-ink);
}

.or-contact__list .or-contact__row a:hover { text-decoration: none; }

/* Label, value and note are stacked lines, not a sentence. */
.or-contact__list .or-contact__body { display: grid; gap: 0.15rem; }

@media (max-width: 575.98px) {
  .or-contact__list .or-contact__row a { gap: 0.875rem; padding: 1rem 0.25rem; }
  .or-contact__icon { width: 38px; height: 38px; }
  .or-contact__value { font-size: 1rem; }
}

/* ---- contact channels: side by side on desktop ------------------------- */

/* Three or four short channels stacked down a 720px column wastes the width
   and buries the last one below the fold. Side by side from 768px up. */
@media (min-width: 768px) {
  .or-contact__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    max-width: 1100px;
    border-top: 0;
  }

  .or-contact__row { border-bottom: 0; }

  .or-contact__list .or-contact__row a {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    height: 100%;
    padding: 1.5rem 1.25rem;
    border: 1px solid var(--or-line);
    border-radius: var(--or-radius-lg);
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  }

  /* The row treatment indented on hover; a tile should lift instead. */
  .or-contact__list .or-contact__row a:hover {
    padding-inline-start: 1.25rem;
    border-color: var(--or-purple);
    box-shadow: var(--or-shadow);
    transform: translateY(-2px);
  }

  .or-contact__go { align-self: flex-start; }
}

/* The marks carry their own colour now, so the outlined square that gave the
   monochrome glyphs some presence is no longer needed. */
.or-contact__icon {
  border: 0;
  background: none;
  width: auto;
  height: auto;
  border-radius: 0;
}

.or-contact__icon svg { display: block; }

/* Keep the mark its own colour on hover — the link colour must not tint it. */
.or-contact__row a:hover .or-contact__icon { border-color: transparent; color: inherit; }

.or-contact__card--wa .or-contact__icon,
.or-contact__icon svg * { transition: none; }

/* ---- product gallery controls ------------------------------------------ */

/* Both controls sat flush against the image edge. Give them a real inset and
   a legible backing, so they read as controls rather than artefacts stuck to
   the corners. */
.product-media-gallery .product-media-gallery-zoom,
.product-media-gallery .img-btn-wishlist {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  color: var(--or-ink);
  box-shadow: 0 2px 10px -4px rgba(23, 17, 26, 0.35);
  opacity: 1;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.product-media-gallery .product-media-gallery-zoom { top: .75rem; left: .75rem; right: auto; bottom: auto; }
.product-media-gallery .img-btn-wishlist { right: .75rem; bottom: .75rem; left: auto; top: auto; }

.product-media-gallery .product-media-gallery-zoom:hover,
.product-media-gallery .img-btn-wishlist:hover { background: #fff; transform: scale(1.06); }

.product-media-gallery .product-media-gallery-zoom svg { width: 18px; height: 18px; }

/* The main slides used to take their height from the tallest media, so a
   portrait image stretched the whole viewport and every square image floated
   in a tall band of empty space -- which is also what pushed the zoom and
   wishlist buttons far away from the picture. Pin every slide to the 1:1 box
   the block asks for and let the media fit inside it. */
.product-media-gallery .swiper-main .swiper-slide {
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: hidden;
}

.product-media-gallery .swiper-main .swiper-slide > .product-media-gallery-image-link,
.product-media-gallery .swiper-main .swiper-slide > .product-media-gallery-video-link {
  display: block;
  width: 100%;
  height: 100%;
}

.product-media-gallery .swiper-main .swiper-slide img,
.product-media-gallery .swiper-main .swiper-slide video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The controls wrapper only holds absolutely positioned children, but as an
   in-flow block with an inline <wishlist-button> it still added a line box
   below the image. Take it out of flow so it exactly overlays the slide area
   the buttons are meant to sit in. */
.product-media-gallery .swiper-main > .swiper-controls {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.product-media-gallery .swiper-main > .swiper-controls > * {
  pointer-events: auto;
}

/* Inline add-to-cart failure message (sold out, quantity not available). The
   theme's own error surface lives inside the cart drawer, which is exactly what
   is missing when this path runs. */
.or-atc-error {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  border-radius: var(--or-radius);
  background: rgba(190, 40, 60, 0.08);
  color: #a01930;
  font-size: 0.8125rem;
  line-height: 1.35;
}

/* The theme's ProductForm.adjustPricing() writes the money value into
   `.product-price-final` (and the compare / badge nodes). oraani-product-price
   renders those four nodes as shims purely so that code has somewhere to write
   — but nothing hid them, so the price printed a second time under the real one
   and updated again on every variant change. Keep them reachable, not visible. */
.or-price__shim {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* An inline-level box with `overflow: hidden` takes its bottom margin edge as
   its baseline. product.css puts `overflow: hidden` on sold-out option labels
   for the strike-through, so those labels sat higher than the rest of the row.
   Make each option a flex item instead of inline content — then nothing is
   baseline-aligned and every swatch/size box lines up. */
.product-options .size-buttons li,
.product-options .color-swatches li {
  display: flex;
  align-items: stretch;
}

.product-options .size-buttons input + label { flex: 1 1 auto; }

/* The review app's own widget is folded away wherever the Oraani section is
   showing the same reviews. It is NOT `display: none` and NOT removed: AG
   Product Reviews (Avada Air Reviews) and Judge.me both ship an empty container
   and fill it from their own script, so it has to stay rendered — it is both
   the data source and the review form. The first rules fold it from the very
   first paint, before any JS runs, so it never flashes; `.or-app-reviews-open`
   (set by the write / read-all buttons) brings it back. */
body:has(.or-reviews--app) .shopify-app-block:has(.AirReviews-Embed-BlockWrapper):not(.or-app-reviews-open),
body:has(.or-reviews--app) .shopify-app-block:has(#AirReviews-BlockWrapper):not(.or-app-reviews-open),
body:has(.or-reviews--app) .shopify-app-block:has(.AirReviews-Embed-BlockAllWrapper):not(.or-app-reviews-open),
body:has(.or-reviews--app) .shopify-app-block:has(#AirReviews-BlockAllWrapper):not(.or-app-reviews-open),
body:has(.or-reviews--app) .AirReviews-Embed-BlockAllWrapper:not(.or-app-reviews-open),
body:has(.or-reviews--app) #AirReviews-BlockAllWrapper:not(.or-app-reviews-open),
body:has(.or-reviews--app) .AirReviews-Embed-BlockWrapper:not(.or-app-reviews-open),
body:has(.or-reviews--app) #AirReviews-BlockWrapper:not(.or-app-reviews-open),
body:has(.or-reviews--app) .shopify-app-block:has(#judgeme_product_reviews):not(.or-app-reviews-open),
.or-app-reviews-folded:not(.or-app-reviews-open) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0 !important;
}

/* Brought back: it needs its full width again. */
.or-app-reviews-open {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: revert !important;
  padding: revert !important;
  overflow: visible !important;
  clip-path: none !important;
  white-space: normal;
}

/* Deferred: the widget claims reviews we could not parse, so it takes over. */
.or-reviews--app.is-deferred { display: none; }

/* The layout rules below set `display` on elements the JS toggles with the
   `hidden` attribute, and a display declaration beats `hidden`. Without this a
   hidden rail, average or rating badge would render anyway — the rating badge
   showing its raw "[rating]/5" template on a product with no reviews. */
.or-reviews [hidden],
.or-trust--badges [hidden] { display: none !important; }

/* ---- trust badges: layout and skin from the block settings ----------------
   `.or-trust` is shared with the trust-icons block, so every rule here is
   scoped to `.or-trust--badges` and reads the block's own custom properties. */

.or-trust--badges {
  /* It is a <ul>: without this the browser's own list indent pushes the whole
     row in from the left, out of line with the title beneath it. */
  padding-left: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: var(--tb-justify);
  column-gap: var(--tb-gap-x);
  row-gap: var(--tb-gap-y);
  padding-top: var(--tb-pt);
  padding-bottom: var(--tb-pb);
  margin-bottom: 0;
}

.or-trust--badges .or-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  padding-block: var(--tb-pad-y);
  color: var(--tb-ink);
  font-size: var(--tb-text);
  font-weight: var(--tb-weight);
  letter-spacing: var(--tb-spacing);
  text-transform: var(--tb-transform);
  line-height: 1.2;
}

.or-trust--badges .or-trust__icon { color: var(--tb-icon-color); flex: none; display: inline-flex; }
.or-trust--badges .or-trust__icon svg { width: var(--tb-icon); height: var(--tb-icon); }
.or-trust--badges .or-trust__icon--glyph { font-size: var(--tb-icon); line-height: 1; }
.or-trust--badges.or-tb-noicon .or-trust__icon { display: none; }

/* Layouts, mobile then desktop. */
@media (max-width: 767.98px) {
  .or-tb-m-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .or-tb-m-scroll::-webkit-scrollbar { display: none; }
  .or-tb-m-scroll .or-trust__item { flex: none; }
  .or-tb-m-wrap { flex-wrap: wrap; overflow: visible; }
  .or-tb-m-grid {
    display: grid;
    grid-template-columns: repeat(var(--tb-cols), minmax(0, 1fr));
    overflow: visible;
  }
}

@media (min-width: 768px) {
  .or-tb-d-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .or-tb-d-scroll::-webkit-scrollbar { display: none; }
  .or-tb-d-scroll .or-trust__item { flex: none; }
  .or-tb-d-wrap { flex-wrap: wrap; overflow: visible; }
  .or-tb-d-grid {
    display: grid;
    grid-template-columns: repeat(var(--tb-cols), minmax(0, 1fr));
    overflow: visible;
  }
}

/* Badge skins. */
.or-tb-pill .or-trust__item,
.or-tb-card .or-trust__item {
  padding-inline: 0.7rem;
  background: var(--tb-bg);
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius);
}

.or-tb-card .or-trust__item { border-radius: min(var(--tb-radius), 10px); }

.or-tb-underline .or-trust__item {
  border-bottom: 1px solid var(--tb-line);
  border-radius: 0;
  padding-bottom: max(var(--tb-pad-y), 3px);
}

/* Separators only make sense between plain badges. */
.or-tb-sep-dot .or-trust__item + .or-trust__item::before,
.or-tb-sep-line .or-trust__item + .or-trust__item::before {
  content: "";
  flex: none;
  margin-right: var(--tb-gap-x);
  opacity: 0.4;
}
.or-tb-sep-dot .or-trust__item + .or-trust__item::before {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}
.or-tb-sep-line .or-trust__item + .or-trust__item::before {
  width: 1px;
  height: 0.9em;
  background: var(--tb-line);
  opacity: 1;
}
.or-tb-pill.or-tb-sep-dot .or-trust__item + .or-trust__item::before,
.or-tb-pill.or-tb-sep-line .or-trust__item + .or-trust__item::before,
.or-tb-card.or-tb-sep-dot .or-trust__item + .or-trust__item::before,
.or-tb-card.or-tb-sep-line .or-trust__item + .or-trust__item::before { display: none; }

/* ---- reviews: layout and skin from the section settings ------------------
   Everything below reads the custom properties the section writes, so the
   editor drives layout, spacing, type and colour separately for mobile and
   desktop without a single extra stylesheet. */

.or-reviews--tuned { padding-top: var(--orv-pt); padding-bottom: var(--orv-pb); }
.or-reviews--tuned .or-reviews__rail { gap: var(--orv-gap); }
.or-rev-head-left .or-head--center { text-align: left; justify-content: flex-start; }
.or-rev-head-left .or-reviews__actions { justify-content: flex-start; }

/* Mobile layouts. */
@media (max-width: 767.98px) {
  .or-rev-m-rail .or-reviews__rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .or-rev-m-rail .or-reviews__item { width: var(--orv-card-w); flex: 0 0 auto; scroll-snap-align: start; }
  .or-rev-m-grid .or-reviews__rail,
  .or-rev-m-list .or-reviews__rail {
    display: grid;
    grid-template-columns: repeat(var(--orv-cols), minmax(0, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .or-rev-m-list .or-reviews__rail { grid-template-columns: 1fr; }
  .or-rev-m-grid .or-reviews__item,
  .or-rev-m-list .or-reviews__item { width: auto; }
}

/* Desktop layouts. */
@media (min-width: 768px) {
  .or-rev-d-rail .or-reviews__rail { display: flex; overflow-x: auto; }
  .or-rev-d-rail .or-reviews__item { width: var(--orv-card-w); flex: 0 0 auto; }
  .or-rev-d-grid .or-reviews__rail,
  .or-rev-d-list .or-reviews__rail {
    display: grid;
    grid-template-columns: repeat(var(--orv-cols), minmax(0, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .or-rev-d-list .or-reviews__rail { grid-template-columns: 1fr; }
  .or-rev-d-grid .or-reviews__item,
  .or-rev-d-list .or-reviews__item { width: auto; }
}

/* Card skin. */
.or-reviews--tuned .or-reviews__card {
  height: 100%;
  padding: var(--orv-pad);
  border-radius: var(--orv-radius);
  background: var(--orv-card-bg);
  border: 1px solid var(--orv-card-line);
  box-shadow: var(--orv-card-shadow);
  text-align: var(--orv-align);
  color: var(--orv-ink);
}

.or-rev-card-flat .or-reviews__card { border-color: transparent; background: transparent; box-shadow: none; }
.or-rev-card-shadow .or-reviews__card { border-color: transparent; box-shadow: 0 10px 30px -20px rgba(23, 17, 26, 0.6); }

.or-rev-card-quote .or-reviews__card { position: relative; }
.or-rev-card-quote .or-reviews__card::before {
  content: "\201C";
  position: absolute;
  top: calc(var(--orv-pad) * 0.2);
  right: calc(var(--orv-pad) * 0.6);
  font-family: var(--or-serif, Georgia, serif);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--orv-star-on);
  opacity: 0.18;
  pointer-events: none;
}

.or-reviews--tuned .or-reviews__card > .or-stars { justify-content: var(--orv-align); }

.or-reviews--tuned .or-reviews__quote {
  font-size: var(--orv-quote);
  color: var(--orv-ink);
}

/* Trim to N lines. `--orv-clamp: 0` means no trimming, and a line-clamp of 0
   would hide the text entirely — so the section adds `or-rev-clamp` only when a
   real number of lines is set. */
.or-rev-clamp .or-reviews__quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--orv-clamp);
  overflow: hidden;
}

.or-reviews--tuned .or-reviews__name { font-size: var(--orv-name); color: var(--orv-ink); }
.or-reviews--tuned .or-reviews__verified,
.or-reviews--tuned .or-reviews__place,
.or-reviews--tuned .or-reviews__date { font-size: var(--orv-meta); color: var(--orv-muted); }

.or-reviews__date { display: block; }

.or-reviews--tuned .or-reviews__by { justify-content: flex-start; }
.or-reviews--tuned[class*="or-rev-card-"] .or-reviews__by { align-items: center; }

/* Star colours and size come from the section too. */
.or-reviews--tuned .or-stars__base svg polygon { stroke: var(--orv-star-off); }
.or-reviews--tuned .or-stars__fill svg polygon { fill: var(--orv-star-on); stroke: var(--orv-star-on); }
.or-reviews--tuned .or-reviews__card .or-stars svg { width: var(--orv-star); height: var(--orv-star); }

/* ---- reviews: real ones only ---------------------------------------------
   App mode draws the Judge.me reviews in this section's card design. Until they
   arrive the rail stays hidden — an empty rail reads as a broken section — and
   a product with none keeps the invitation instead. */

.or-reviews--app.is-loading .or-reviews__rail { min-height: 120px; }

.or-reviews__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 30rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 0.5rem;
  text-align: center;
}


.or-reviews__empty-title {
  margin: 0.75rem 0 0.35rem;
  font-family: var(--or-serif, inherit);
  font-size: 1.25rem;
  color: var(--or-ink);
}

.or-reviews__empty-body {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--or-ink-soft);
}

.or-reviews__write { min-width: 14rem; }

/* Judge.me reviews often carry a short title above the body, and a photo. */
.or-reviews__title {
  display: block;
  margin: 0.5rem 0 0.15rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--or-ink);
}

.or-reviews__pic {
  width: 100%;
  max-height: 180px;
  margin: 0.75rem 0 0;
  border-radius: var(--or-radius);
  object-fit: cover;
}

/* ---- option boxes: one geometry in every state ---------------------------
   The row was staggering — first box riding high, last sitting low, the checked
   one taller than its neighbours. Three separate causes, all box-model:
     · product.css and oraani.css both style `input + label` at equal
       specificity, so which padding/margin won depended on file order;
     · the sold-out state adds `overflow: hidden` (for the strike-through),
       which changes an inline box's baseline;
     · the swatch labels sized themselves to their content, so a colour chip and
       a photo chip came out different sizes.
   Pin the geometry for every state instead of relying on the cascade. */

.product-options .size-buttons,
.product-options .color-swatches {
  align-items: flex-start;
  margin-left: 0;
  margin-right: 0;
}

.product-options .size-buttons li,
.product-options .color-swatches li {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
}

.product-options .size-buttons input + label,
.product-options .size-buttons input:checked + label,
.product-options .size-buttons input:disabled + label,
.product-options .size-buttons input.disabled + label {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  width: auto;
  height: 44px;
  min-height: 0;
  margin: 0;
  padding: 0 0.85rem;
  border-width: 1.5px;
  border-style: solid;
  line-height: 1;
  vertical-align: top;
  /* `transition: all` would animate the geometry too — only the paint changes. */
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.product-options .color-swatches input + label,
.product-options .color-swatches input:checked + label,
.product-options .color-swatches input:disabled + label,
.product-options .color-swatches input.disabled + label {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 3px;
  border-width: 1.5px;
  border-style: solid;
  border-radius: 50%;
  vertical-align: top;
}

/* A photo chip and a flat colour chip fill that box identically. */
.product-options .color-swatches label img,
.product-options .color-swatches label .or-opt-swatch {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* ---- find your size / size chart ----------------------------------------
   The two triggers were plain inline buttons with nothing between them, so the
   labels ran together ("Find your size:≡ Size chart"). */
.or-sizecalc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
}

/* A hairline between them, so they read as two separate actions. */
.or-sizecalc__actions .or-sizecalc__trigger + .or-sizecalc__trigger {
  position: relative;
  padding-left: 1.1rem;
}

.or-sizecalc__actions .or-sizecalc__trigger + .or-sizecalc__trigger::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 0.9em;
  background: var(--or-line);
}

/* ---- size row rhythm ----------------------------------------------------
   Three separate spacings stacked up around the size buttons: the option row's
   own `py-3`, the options block's bottom padding, and the size calculator's
   margin. The label sat tight on the buttons while the helper links and the
   stock bar drifted further and further away. Set one even rhythm instead. */

.product-options li { padding-top: 0.35rem; padding-bottom: 0.35rem; }
.product-options li:first-child { padding-top: 0; }
.product-options li:last-child { padding-bottom: 0; }

.product-options .title,
.product-options .form-label { margin-bottom: 0.6rem; }

/* Find your size / Size chart sits just under the buttons, then a matching
   step down to whatever block follows. The theme's own spacing scale is small
   (`py-3` is 0.375rem here), so these are the values that actually show. */
.or-sizecalc { margin-top: 0.35rem; margin-bottom: 0.9rem; }

/* ---- benefits grid ------------------------------------------------------ */

/* Replaces the "Benefits_icons_near_atc" PNG: same six marks, but the labels
   are metafield text, so they stay sharp, translate, and change per product. */
.or-benefits__title {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--or-ink-soft);
}

.or-benefits__grid {
  display: grid;
  grid-template-columns: repeat(var(--ob-cols, 3), minmax(0, 1fr));
  column-gap: var(--ob-gap-x, 10px);
  row-gap: var(--ob-gap-y, 14px);
}

.or-benefits__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.or-benefits__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--ob-ring, 44px);
  height: var(--ob-ring, 44px);
  border: var(--ob-ring-width, 1px) solid var(--ob-line);
  border-radius: 50%;
  color: var(--ob-icon-color);
}

.or-benefits--no-ring .or-benefits__icon {
  width: auto;
  height: auto;
  border: 0;
}

.or-benefits__icon svg { display: block; }

.or-benefits__label {
  font-size: var(--ob-label, 13px);
  line-height: 1.25;
  color: var(--ob-ink);
  overflow-wrap: anywhere;
}

/* Font Awesome glyphs and emoji come through the same slot as the SVGs, so
   they need the same optical centring. */
.or-fa,
.or-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-style: normal;
}

/* The promises row keeps its centred column layout; only the icon slot is new. */
.product-block-icons__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--or-ink);
}

/* ---- single-value options ---------------------------------------------- */

/* One value is information, not a choice: it reads as plain text so nobody
   taps a dropdown that cannot change anything. */
.product-options .or-option-single {
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  color: var(--or-ink);
}

/* Name stays quiet, value carries the weight -- the same relationship the
   multi-value options get from their heading and swatches. */
.product-options .or-option-single__name,
.sticky-atc .sticky-atc-variant__name {
  opacity: 0.6;
  font-weight: 500;
}

.product-options .or-option-single__value,
.sticky-atc .sticky-atc-variant__value {
  font-weight: 600;
}

.sticky-atc .sticky-atc-variant__sep {
  opacity: 0.35;
}

/* Same idea in the sticky bar, sized to sit level with the Add to cart. */
.sticky-atc .sticky-atc-variant {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-height: 46px;
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--or-ink);
}

/* ============================================================ sticky ATC */

/* Selector and Add to cart only. The thumbnail, title, rating and price were
   duplicating what is already on screen and were the whole reason the bar was
   so tall. */
.sticky-atc .product-card-img-wrapper,
.sticky-atc .product-card-title,
.sticky-atc .jdgm-preview-badge,
.sticky-atc .product-rating-badge,
.sticky-atc .product-card-price { display: none; }

/* With the left column emptied, let the form take the full width. */
.sticky-atc .product-card > .row { align-items: center; margin: 0; }
.sticky-atc .product-card > .row > .col-sm-7 { display: none; }

.sticky-atc .product-card > .row > .col-sm-11 {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  padding: 0;
}

/* Half the previous height. */
.sticky-atc .product-card { padding-block: 0.625rem; }
.sticky-atc .container { padding-block: 0; }
.sticky-atc .row.mx-n3 { margin-inline: -0.375rem; }
.sticky-atc .row.mx-n3 > .px-3 { padding-inline: 0.375rem; }

.sticky-atc .form-select,
.sticky-atc .btn-atc {
  min-height: 46px;
  border-radius: var(--or-radius);
  font-size: 0.875rem;
}

/* The bar background is `bg-body`, and the button inherited a body-toned
   theme class — the same colour, so the button vanished into the bar. */
.sticky-atc .btn-atc {
  background: var(--or-ink) !important;
  border-color: var(--or-ink) !important;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.sticky-atc .btn-atc:hover:not(:disabled) {
  background: var(--or-purple) !important;
  border-color: var(--or-purple) !important;
}

.sticky-atc .btn-atc:disabled { opacity: 0.55; }

.sticky-atc .form-select {
  background-color: #fff;
  border-color: var(--or-line);
  color: var(--or-ink);
}

/* Give the variant selector room; the button needs less. */
@media (min-width: 576px) {
  .sticky-atc .row.mx-n3 > .col-9:first-child { width: 55%; max-width: 55%; flex: 0 0 55%; }
  .sticky-atc .row.mx-n3 > .col-9:last-child { width: 45%; max-width: 45%; flex: 0 0 45%; }
}

/* ---- concierge clearance ------------------------------------------------ */

/* initChatOffset() measures the mobile nav and the sticky ATC and writes the
   total to `--or-chat-offset` on <body>. These rules are what consume it — the
   JS alone did nothing once this block was lost, which is why the bubble sat on
   top of the sticky bar again. */
:root { --or-chat-offset: 1rem; }

@media (max-width: 991.98px) {
  body.has-oraani-mobile-nav { --or-chat-offset: calc(var(--or-mobile-nav-h) + 0.75rem); }
  /* Pre-JS fallback; the measured value on <body> outranks it. */
  body:has(.sticky-atc.show) { --or-chat-offset: calc(var(--or-mobile-nav-h) + 76px); }
}

@media (min-width: 992px) {
  body:has(.sticky-atc.show) { --or-chat-offset: 76px; }
}

.or-chat,
body.has-oraani-mobile-nav .or-chat {
  bottom: var(--or-chat-offset);
  transition: bottom 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .or-chat { transition: none; }
}