/* Dancing Orchid — theme.css
   Page-level + WooCommerce styling layered on design-system.css
   ============================================================= */

/* ── Utilities ───────────────────────────── */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed; top: 8px; left: 8px;
  width: auto; height: auto; clip: auto;
  padding: 12px 20px; background: #fff; z-index: 1000;
  font-size: 0.75rem; letter-spacing: 0.1em;
}
.site-main { display: block; }

/* Force-reveal fade-up content (screenshots / reduced-motion fallback) */
.do-no-fade .fade-up { opacity: 1 !important; transform: none !important; }

/* Section heading (replaces React <SectionHeading>) */
.do-heading { text-align: center; margin-bottom: clamp(40px, 5vw, 72px); }
.do-heading .label { margin-bottom: 20px; display: block; }
.do-heading h2 { margin: 0; }

/* ── Homepage: Hero ──────────────────────── */
.hero {
  height: 100vh; min-height: 600px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; overflow: hidden; background: var(--charcoal);
  /* Reserve room for the fixed nav (top) and the scroll cue (bottom) so the
     centred lockup never slides under either on short laptop viewports. */
  padding: 150px 0 100px;
}
.hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 40%;
  opacity: 0.55; transition: opacity 1.5s ease;
}
.hero__content { position: relative; z-index: 2; color: #fff; padding: 0 24px; }
/* One typeface, one style: the brand lockup sets both words identically —
   client feedback flagged the old roman/italic split as reading like two fonts.
   The SEO keyword line stays inside the H1 as .screen-reader-text only. */
.hero__title {
  font-family: var(--serif); font-size: clamp(4rem, 10vw, 9rem); font-weight: 300;
  line-height: 0.92; color: #fff; margin-bottom: 28px; letter-spacing: -0.03em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
.hero__brand { display: block; }
.hero__sub {
  font-family: var(--sans); font-size: 0.875rem; font-weight: 300;
  color: rgba(255,255,255,0.85); margin-bottom: 30px; letter-spacing: 0.25em;
  text-transform: uppercase; text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.hero__ctas {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.hero__scroll {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.hero__scroll span {
  font-size: 0.625rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); font-family: var(--sans); font-weight: 300;
}
.hero__scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
  animation: scrollPulse 3s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
/* Short (laptop) viewports: scale the lockup with the available height so it
   stays clear of the fixed nav and the scroll cue. Tall desktops keep the
   full-size vw-based title above. */
@media (max-height: 820px) {
  .hero__title { font-size: clamp(2.8rem, 8vh, 5.5rem); }
  .hero__sub { margin-bottom: 22px; }
}
@media (max-height: 660px) {
  .hero { padding: 130px 0 72px; }
  .hero__title { font-size: clamp(2.4rem, 7vh, 4rem); }
  .hero__scroll { display: none; }
}

/* ── Brand statement ─────────────────────── */
.brand-statement { background: var(--cream, #faf8f5); }
.bs-inner { display: grid; grid-template-columns: 1fr 1fr; max-width: 100%; }
.bs-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px,3.5vw,44px) clamp(40px,6vw,100px);
}
.bs-heading {
  font-family: var(--serif); font-size: clamp(2.2rem,4vw,3.8rem);
  font-weight: 300; line-height: 1.1; color: var(--text);
}
.bs-heading em { font-style: italic; color: var(--gold); }
.bs-body {
  font-family: var(--serif); font-size: clamp(0.95rem,1.2vw,1.05rem);
  line-height: 1.9; color: var(--text-mid); font-weight: 300; max-width: 440px;
}
.bs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.bs-tags span {
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--gold); padding: 6px 16px;
}
.bs-mosaic { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4px; overflow: hidden; }
.bs-mosaic__tall { overflow: hidden; }
.bs-mosaic__tall img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.bs-mosaic__stack { display: flex; flex-direction: column; gap: 4px; }
.bs-mosaic__stack img { width: 100%; flex: 1; min-height: 0; object-fit: cover; display: block; }
/* Single-image variant: one photo fills the column at the (reduced) section height. */
/* One portrait photo shown WHOLE (no crop), capped by height so the section
   stays short and never balloons as the column widens. */
.bs-mosaic--single {
  grid-template-columns: 1fr; display: flex;
  align-items: center; justify-content: center;
  background: var(--cream, #faf8f5);
}
.bs-mosaic--single img {
  width: auto; max-width: 100%; height: clamp(420px, 58vh, 600px);
  object-fit: contain; display: block;
}
@media (max-width: 860px) {
  .bs-mosaic--single { aspect-ratio: auto; }
  .bs-mosaic--single img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: center 30%; }
  .bs-inner { grid-template-columns: 1fr; }
  /* The photos are portrait (roughly 3:4). A 4/3 LANDSCAPE box sliced each into
     a ~145px-tall sliver and the Book Now tab overlapped them. Give the tall
     studio shot the full width at its own portrait ratio, then sit the two
     stacked images side by side beneath it. */
  .bs-mosaic {
    aspect-ratio: auto;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .bs-mosaic__tall { aspect-ratio: 4/5; }
  .bs-mosaic__tall img { object-position: center 30%; }
  .bs-mosaic__stack { flex-direction: row; }
  .bs-mosaic__stack img { aspect-ratio: 3/4; }
  .bs-text { padding: clamp(40px,6vw,64px) clamp(24px,5vw,48px); }
  .bs-body { max-width: 100%; }
  /* Force 2×2 — flex-wrap alone leaves "Bespoke" alone on ~414–480px. */
  .bs-tags {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 8px;
  }
}

/* ── Services — cinematic panels ─────────── */
.services-editorial { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.service-panel { position: relative; aspect-ratio: 3/4; overflow: hidden; cursor: pointer; display: block; }
.service-panel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.service-panel:hover img { transform: scale(1.06); }
.service-panel__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,20,20,0.82) 0%, rgba(20,20,20,0.2) 50%, rgba(20,20,20,0.05) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(28px, 5vw, 56px); transition: background 0.5s ease;
}
.service-panel:hover .service-panel__overlay {
  background: linear-gradient(to top, rgba(20,20,20,0.9) 0%, rgba(20,20,20,0.25) 50%, rgba(20,20,20,0.05) 100%);
}
.service-panel__title { font-family: var(--serif); font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 300; color: #fff; line-height: 1.1; margin-bottom: 12px; }
.service-panel__desc { font-size: 0.875rem; font-weight: 300; color: rgba(255,255,255,0.85); line-height: 1.7; max-width: 260px; margin-bottom: 20px; }
.service-panel__link {
  font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-light); display: inline-flex; align-items: center; gap: 8px;
  transition: gap 0.4s var(--ease-luxe); font-family: var(--sans);
}
.service-panel:hover .service-panel__link { gap: 14px; }

/* ── Subscription promo ──────────────────── */
.do-sub-promo { background: var(--charcoal); text-align: center; padding: clamp(80px, 12vw, 160px) 0; }
.do-sub-promo__text { color: rgba(255,255,255,0.7); font-size: 0.9375rem; line-height: 1.9; max-width: 440px; margin: 0 auto 12px; font-weight: 300; }
.do-sub-promo__price { color: var(--gold-light); font-size: clamp(1.2rem, 2vw, 1.5rem); font-family: var(--serif); font-weight: 300; margin-bottom: 36px; }

/* ── Studio split ────────────────────────── */
.studio-section { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; align-items: stretch; }
/* No fixed ratio on desktop: the cell stretches to the (taller) text column's
   height so the image fills the section edge to edge. The image is absolutely
   positioned so it doesn't dictate the row height. Mobile re-adds a ratio. */
.studio-section__image { position: relative; overflow: hidden; min-height: 0; }
.studio-section__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.studio-section__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(48px, 7vw, 100px) clamp(36px, 6vw, 88px);
  background: var(--charcoal); color: #fff;
}

/* ── Products grid + card ────────────────── */
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.5vw, 48px); }
.product-card { display: block; cursor: pointer; }
.product-card .editorial-image { aspect-ratio: 4/5; margin-bottom: 20px; background: var(--cream); position: relative; }
.woocommerce ul.products li.product .editorial-image img,
.product-card .editorial-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.product-card:hover .editorial-image img { transform: scale(1.05); }
.product-card__name { font-weight: 300; margin-bottom: 6px; font-size: clamp(1rem, 1.6vw, 1.25rem); transition: color 0.3s var(--ease); }
.product-card:hover .product-card__name { color: var(--gold-dark); }
.product-card__price { color: var(--text-light); font-size: 0.875rem; letter-spacing: 0.08em; font-weight: 300; }
.product-card__price .woocommerce-Price-amount { color: var(--text-light); font-weight: 300; }
.do-badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--charcoal); color: #fff; padding: 5px 14px;
  font-size: 0.625rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; font-family: var(--sans);
}

/* ── Quote ───────────────────────────────── */
.quote-section { position: relative; padding: clamp(100px, 16vw, 220px) 0; text-align: center; overflow: hidden; background: var(--charcoal); }
.quote-section__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.15; }
.do-quote {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(1.4rem, 2.8vw, 2.2rem); line-height: 1.6;
  color: rgba(255,255,255,0.85); max-width: 540px; margin: 0 auto;
}

/* ── Delivery areas ──────────────────────── */
.delivery-areas {
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(48px, 7vw, 88px);
}
.delivery-areas .do-heading { margin-bottom: clamp(20px, 3vw, 36px); }
.delivery-areas a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); transition: color 0.3s ease; }
.delivery-areas a:hover { color: var(--text); }

/* ── Testimonials ────────────────────────── */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 5vw, 56px); }
.testimonial { padding: clamp(32px, 5vw, 56px) 0; border-top: 1px solid var(--border); }
.testimonial__quote { font-family: var(--serif); font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 300; font-style: italic; color: var(--text-mid); line-height: 1.7; margin-bottom: 24px; }
.testimonial__name { color: var(--text-light); letter-spacing: 0.15em; }

/* ── Instagram ───────────────────────────── */
.insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.insta-grid > div { aspect-ratio: 1; overflow: hidden; }
.insta-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease), opacity 0.4s ease; }
.insta-grid > div:hover img { transform: scale(1.06); opacity: 0.85; }

/* ── Marquee ─────────────────────────────── */
.do-marquee-wrap {
  background: #f7f0eb;
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 13px 0;
}
.do-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: do-marquee 35s linear infinite;
}
.do-marquee__track:hover { animation-play-state: paused; }
@keyframes do-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.do-marquee__item {
  white-space: nowrap;
  padding: 0 28px;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 400;
}
.do-marquee__sep {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--gold);
  opacity: 0.7;
}

/* ── Geo / Local SEO ─────────────────────── */
.do-geo__intro {
  text-align: center;
  color: var(--text-mid);
  font-size: 15px;
  line-height: 1.8;
  max-width: 520px;
  margin: 0 auto 48px;
  font-weight: 300;
}
.do-geo__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.do-geo__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--text);
  transition: background 0.2s, color 0.2s;
}
.do-geo__item:hover { background: #fff; }
.do-geo__item:hover .do-geo__arrow { color: var(--gold); transform: translateX(3px); }
.do-geo__code {
  font-family: var(--sans);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  flex-shrink: 0;
}
.do-geo__name {
  font-size: 0.9rem;
  font-weight: 300;
  flex: 1;
}
.do-geo__arrow {
  font-size: 0.8rem;
  color: var(--text-mid);
  transition: color 0.2s, transform 0.2s;
}
@media (max-width: 900px) {
  .do-geo__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .do-geo__grid { grid-template-columns: 1fr; }
  .do-marquee__item { padding: 0 18px; }
}

/* ── Newsletter ──────────────────────────── */
.do-newsletter {
  position: relative;
  background:
    linear-gradient(rgba(15,12,10,0.72), rgba(15,12,10,0.72)),
    url('../img/hero-premier-2.jpeg') center/cover no-repeat;
  color: #fff;
}
.do-newsletter .label { color: var(--gold) !important; }
.do-newsletter h3 { color: #fff; }
.do-newsletter p { color: rgba(255,255,255,0.72) !important; }
.do-newsletter .newsletter-row input {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}
.do-newsletter .newsletter-row input::placeholder { color: rgba(255,255,255,0.45); }
.do-newsletter .newsletter-row input:focus { border-color: var(--gold); }
.do-newsletter .newsletter-row button { background: var(--gold); border-color: var(--gold); }
.do-newsletter .newsletter-row button:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
/* ── Testimonial Marquee ─────────────────────── */
.do-testimonials .do-heading { margin-bottom: 28px; }
.do-t-badge {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  background: #fff; border: 1px solid var(--rule); border-radius: 12px;
  padding: 14px 28px; max-width: 360px; margin: 0 auto 52px;
}
.do-t-badge__score { font-family: var(--sans); font-size: 1.9rem; font-weight: 500; color: var(--text); line-height: 1; }
.do-t-badge__stars { display: flex; gap: 2px; }
.do-t-badge__stars .do-tstar { width: 17px; height: 17px; }
.do-t-badge__count { font-family: var(--sans); font-size: 0.72rem; color: var(--text-mid); white-space: nowrap; }
.do-tmarquee { overflow: hidden; padding: 4px 0; }
.do-tmarquee__row { padding: 8px 0; }
.do-tmarquee__track { display: flex; gap: 14px; width: max-content; }
.do-tmarquee__row--fwd .do-tmarquee__track { animation: do-tm-fwd 60s linear infinite; }
.do-tmarquee__row--rev .do-tmarquee__track { animation: do-tm-rev 65s linear infinite; }
.do-tmarquee__track:hover { animation-play-state: paused; }
@keyframes do-tm-fwd { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes do-tm-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.do-tcard {
  background: #fff; border: 1px solid rgba(0,0,0,0.07); border-radius: 12px;
  padding: 18px 20px; width: 290px; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.do-tcard__hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.do-tcard__av {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 0.875rem; font-family: var(--sans);
}
.do-tcard__meta { flex: 1; min-width: 0; }
.do-tcard__name { font-size: 0.875rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.do-tcard__time { font-size: 0.7rem; color: var(--text-mid); margin-top: 1px; }
.do-tcard__g { flex-shrink: 0; }
.do-tcard__stars { display: flex; gap: 2px; margin-bottom: 10px; }
.do-tstar { width: 13px; height: 13px; }
.do-tcard__txt { font-size: 0.8rem; line-height: 1.65; color: var(--text-mid); margin: 0; font-weight: 300; }
.do-t-ctas { display: flex; gap: 12px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.do-t-ctas__view {
  display: flex; align-items: center; gap: 8px;
  background: var(--charcoal) !important; color: #fff !important; border-color: var(--charcoal) !important;
}
.do-t-ctas__leave {
  display: flex; align-items: center; gap: 6px;
  color: var(--gold) !important; border-color: var(--gold) !important;
}
.do-t-ctas__leave .do-tstar { width: 15px; height: 15px; }

.newsletter-row { display: flex; gap: 0; max-width: 420px; margin: 0 auto; }
.newsletter-row input {
  flex: 1; min-width: 0; padding: 16px 20px; border: 1px solid var(--border); border-right: none;
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 300; background: var(--white);
  outline: none; transition: border-color 0.3s ease; letter-spacing: 0.03em;
}
.newsletter-row input:focus { border-color: var(--gold); }
.newsletter-row button {
  padding: 16px 28px; background: var(--charcoal); color: #fff; border: 1px solid var(--charcoal);
  font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 400; cursor: pointer; white-space: nowrap; transition: background 0.4s ease;
}
.newsletter-row button:hover { background: var(--gold-dark); border-color: var(--gold-dark); }

/* ── Inner page hero ─────────────────────── */
.do-page-hero {
  position: relative; min-height: 45vh; display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden; background: var(--charcoal) center/cover no-repeat;
  padding: clamp(80px, 12vw, 160px) 24px;
}
.do-page-hero--image::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(20,20,20,0.35), rgba(20,20,20,0.6));
}
.do-page-hero__inner { position: relative; z-index: 2; color: #fff; }
.do-page-hero__inner h1 { color: #fff; font-size: clamp(2.6rem, 6vw, 5rem); }

/* ── Page entry content ──────────────────── */
.do-entry { font-size: 1rem; line-height: 1.85; color: var(--text-mid); }
.do-entry h2, .do-entry h3 { color: var(--text); margin: 1.6em 0 0.6em; }
.do-entry p { margin-bottom: 1.4em; max-width: none; }
.do-entry a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; }
.do-entry img { margin: 1.5em 0; }

/* ── Post list ───────────────────────────── */
.do-post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 48px); }
.do-post-card__media { display: block; aspect-ratio: 4/5; margin-bottom: 20px; background: var(--cream); }
.do-post-card__body h3 { margin: 10px 0; }
.do-post-card__body h3 a:hover { color: var(--gold-dark); }
.do-post-card__body p { font-size: 0.875rem; color: var(--text-mid); }
.do-post-card__more { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dark); }
.do-pagination { text-align: center; margin-top: 56px; }
.do-pagination .page-numbers { display: inline-flex; gap: 14px; list-style: none; justify-content: center; }
.do-pagination a, .do-pagination span { font-size: 0.8125rem; letter-spacing: 0.1em; color: var(--text-mid); }
.do-pagination .current { color: var(--gold-dark); }

/* ═══════════════════════════════════════════
   WooCommerce
   ═══════════════════════════════════════════ */

.do-woo { padding-top: clamp(28px, 4vw, 48px); }

/* Shop delivery banner */
.do-delivery-banner {
  background: var(--charcoal); color: rgba(255,255,255,0.85); text-align: center;
  padding: 14px 24px; font-size: 0.6875rem; letter-spacing: 0.22em; font-weight: 300; text-transform: uppercase;
}
.do-delivery-banner span { color: var(--gold); }

/* Category filter pills */
.do-cat-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: clamp(28px, 4vw, 48px); }
.do-cat-pill {
  padding: 10px 28px; border: 1px solid var(--border); background: transparent; color: var(--text-mid);
  font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase;
  transition: all 0.4s ease; cursor: pointer;
}
.do-cat-pill:hover { border-color: var(--text-light); color: var(--text); }
.do-cat-pill--active { border-color: var(--text); background: var(--text); color: #fff; }

/* Shop landing: category cards (name + one-line description + chevron).
   The first card — Send Flowers, the primary action — carries a gold border. */
.do-cat-cards {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
@media (min-width: 720px) { .do-cat-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .do-cat-cards { grid-template-columns: repeat(3, 1fr); } }
.do-cat-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px; border: 1px solid var(--border); background: var(--white);
  transition: border-color 0.4s ease;
}
.do-cat-card:hover { border-color: var(--gold); }
.do-cat-card--primary { border-color: var(--gold); }
.do-cat-card__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.do-cat-card__name {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text);
}
.do-cat-card__desc { font-size: 0.875rem; font-weight: 300; color: var(--text-mid); }
.do-cat-card__arrow {
  font-family: var(--serif); font-size: 1.4rem; line-height: 1; color: var(--text-light);
  flex-shrink: 0; transition: color 0.4s ease, transform 0.4s var(--ease);
}
.do-cat-card:hover .do-cat-card__arrow { color: var(--gold-dark); transform: translateX(4px); }
/* Mobile: slim the cards right down so the product grid stays within reach —
   six full-size stacked cards were pushing products two screens away. */
@media (max-width: 719px) {
  .do-cat-cards { gap: 10px; }
  .do-cat-card { padding: 13px 16px; }
  .do-cat-card__text { gap: 3px; }
  .do-cat-card__desc { font-size: 0.8125rem; }
}

/* Ordering / result bar */
.woocommerce .woocommerce-result-count { display: none; }
.woocommerce-ordering { display: flex; justify-content: flex-end; margin-bottom: 28px; }
.woocommerce-ordering select {
  padding: 10px 16px; border: 1px solid var(--border); font-family: var(--sans); font-size: 0.75rem;
  font-weight: 300; letter-spacing: 0.1em; color: var(--text-mid); background: var(--white);
  cursor: pointer; outline: none; min-width: 180px; -webkit-appearance: none; appearance: none;
}

/* Product loop grid */
.woocommerce ul.products, .woocommerce-page ul.products {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.5vw, 40px);
  margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important; text-align: left;
}
.woocommerce ul.products li.product .do-badge { top: 16px; left: 16px; }

/* Pagination */
.woocommerce nav.woocommerce-pagination { text-align: center; margin-top: 56px; }
.woocommerce nav.woocommerce-pagination ul { border: none; display: inline-flex; flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 10px; padding: 0; margin: 0 auto; }
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  border: 1px solid var(--border); background: transparent; color: var(--text-mid);
  font-size: 0.8125rem; padding: 0; width: 44px; height: 44px; line-height: 44px;
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--text); color: #fff; border-color: var(--text); }

/* ── Single product ──────────────────────── */
.single-product div.product { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
/* WooCommerce defaults float .images/.summary at width:48%; inside our grid that
   leaves each column half-empty (tiny image, cramped summary). Make them fill. */
.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > .images,
.single-product div.product > .summary,
.single-product div.product > .entry-summary {
  width: 100% !important; float: none !important; margin: 0 !important;
  /* Grid items default to min-width:auto (min-content), so the gallery's wide
     intrinsic width stops the `1fr` track from shrinking and it overflows the
     viewport on mobile (right-side gap / horizontal shift). min-width:0 lets
     the track shrink to the column — same fix already used for .do-testimonials. */
  min-width: 0 !important;
}
.single-product .woocommerce-product-gallery { margin: 0; }
.single-product .woocommerce-product-gallery__image img { background: var(--cream); }
/* jQuery.zoom (wc-product-gallery-zoom) injects an oversized position:absolute
   `img.zoomImg` (~1260px) for the desktop hover-magnify. Chromium clips it, but
   iOS Safari lets it widen the layout viewport, giving a right-side gap and a
   horizontal shift on swipe. Clip the gallery so the overlay can never overflow.
   The fullscreen PhotoSwipe lightbox is position:fixed on <body>, so this does
   not affect it. */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image { overflow: hidden; }
.single-product .woocommerce-product-gallery__image img { max-width: 100%; }
.single-product div.product .product_title { font-size: clamp(2.4rem, 4.5vw, 3.6rem); line-height: 1.02; margin-bottom: 14px; }
.single-product div.product p.price,
.single-product div.product span.price {
  font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 300; color: var(--text); margin-bottom: 28px;
}
.single-product div.product p.price del { color: var(--text-light); margin-right: 12px; }
.single-product .woocommerce-product-details__short-description { color: var(--text-mid); font-size: 0.9375rem; line-height: 1.85; font-weight: 300; margin-bottom: 36px; max-width: 46ch; }
.single-product .product_meta { font-size: 0.75rem; color: var(--text-light); letter-spacing: 0.05em; margin-top: 28px; border-top: 1px solid var(--border); padding-top: 20px; }
.single-product .product_meta > span { display: block; margin-bottom: 6px; }

/* Quantity + add to cart */
.woocommerce .quantity { display: inline-flex; align-items: center; border: 1px solid var(--border); }
.woocommerce .quantity input.qty {
  width: 56px; height: 56px; text-align: center; border: none; background: transparent;
  font-family: var(--sans); font-size: 0.875rem; -moz-appearance: textfield;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.single-product form.cart { display: flex; gap: 14px; align-items: flex-end; margin: 8px 0 18px; flex-wrap: wrap; }

/* ── Variable product: variation selectors ── */
.single-product form.variations_form { display: block; }
.single-product table.variations { border: none; margin: 0 0 24px; width: 100%; }
.single-product table.variations td, .single-product table.variations th { border: none; padding: 0 0 16px; vertical-align: middle; background: none; }
.single-product table.variations th.label {
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-mid); width: 130px; text-align: left;
}
.single-product table.variations select {
  -webkit-appearance: none; appearance: none; width: 100%; min-width: 220px;
  padding: 14px 40px 14px 16px; border: 1px solid var(--border); border-radius: 0;
  background: transparent; font-family: var(--sans); font-size: 0.875rem; color: var(--text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23141414' fill='none' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; cursor: pointer;
}
.single-product table.variations select:focus { outline: none; border-color: var(--gold-dark); }
.single-product .reset_variations {
  display: inline-block; margin-left: 14px; font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-light);
}
/* One price on screen: theme.js swaps the chosen size's price into the main
   p.price element, so the duplicate price WooCommerce prints above the
   button stays hidden. */
.single-product .woocommerce-variation-price { display: none; }
.single-product .woocommerce-variation-availability { font-size: 0.8125rem; color: var(--text-mid); }
.single-product .single_variation_wrap { margin-top: 8px; }

/* ── Cart page ─────────────────────────────── */
/* --section-pad-sm (up to 120px) is tuned for marketing sections that open with
   a heading. The basket opens straight onto a table, so the space reads as a
   hole. Halve it here only. */
.woocommerce-cart .section--sm { padding-top: clamp(28px, 4vw, 56px); }
.woocommerce-cart .shop_table {
  border: none; border-collapse: collapse; width: 100%;
}
.woocommerce-cart .shop_table thead th {
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-light); border-bottom: 1px solid var(--text);
  padding: 0 16px 16px; text-align: left;
}
.woocommerce-cart .shop_table td { border: none; border-bottom: 1px solid var(--border-light); padding: 28px 16px; vertical-align: middle; }
.woocommerce-cart .shop_table td.product-thumbnail img {
  width: 88px; height: 110px; object-fit: cover; background: var(--cream); display: block;
}
/* Style the cell, not just the link: the gift card is a virtual product with no
   product page, so Woo prints its name as a bare text node with no <a> and the
   serif never landed. Two products, two typefaces, same column. */
.woocommerce-cart .shop_table td.product-name,
.woocommerce-cart .shop_table td.product-name a { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; color: var(--text); line-height: 1.25; }
.woocommerce-cart .shop_table td.product-name a:hover { color: var(--gold-dark); }
/* The gift card's quantity is fixed at 1 (see woocommerce.php). */
.woocommerce-cart .shop_table .do-gc-qty-fixed {
  display: inline-block; font-family: var(--serif); font-size: 1.05rem;
  font-weight: 300; color: var(--text-mid);
}
.woocommerce-cart .shop_table td.product-name .variation,
.woocommerce-cart .shop_table td.product-name dl.variation,
.woocommerce-cart .shop_table td.product-name .wc-item-meta {
  margin: 10px 0 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-mid);
}
.woocommerce-cart .shop_table td.product-name dl.variation dt,
.woocommerce-cart .shop_table td.product-name .wc-item-meta-label {
  display: inline;
  float: none;
  margin: 0;
  padding: 0;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  font-weight: 400;
}
.woocommerce-cart .shop_table td.product-name dl.variation dd,
.woocommerce-cart .shop_table td.product-name .wc-item-meta li {
  display: inline;
  margin: 0 0 0 4px;
  padding: 0;
}
.woocommerce-cart .shop_table td.product-name dl.variation dd p,
.woocommerce-cart .shop_table td.product-name .wc-item-meta p { display: inline; margin: 0; }
/* Break after each VALUE, not once after the whole list — otherwise all three
   pairs collapse onto one line: "TO: test FROM: test MESSAGE: tesat". */
.woocommerce-cart .shop_table td.product-name dl.variation dd::after,
.woocommerce-cart .shop_table td.product-name .wc-item-meta li::after {
  content: "";
  display: block;
  height: 3px;
}
.woocommerce-cart .shop_table .amount { font-family: var(--serif); font-weight: 300; font-size: 1.05rem; }
.woocommerce-cart .shop_table td.actions { padding-top: 28px; }
.woocommerce-cart .shop_table td.product-remove .remove {
  color: var(--text-light) !important;
  font-size: 1.1rem;
  font-weight: 300;
}
.woocommerce-cart .shop_table td.product-remove .remove:hover { color: var(--text) !important; }
.woocommerce-cart .quantity .qty {
  width: 64px; padding: 10px 8px; border: 1px solid var(--border);
  text-align: center; font-family: var(--sans); font-size: 0.875rem; background: var(--white);
}
.woocommerce-cart .coupon {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.woocommerce-cart .coupon .input-text {
  min-width: 180px; flex: 1; padding: 14px 16px; border: 1px solid var(--border);
  font-family: var(--sans); font-size: 0.875rem; background: var(--white);
}
.woocommerce-cart .coupon .button,
.woocommerce-cart button[name="update_cart"] {
  padding: 14px 28px !important;
}
.woocommerce-cart button[name="update_cart"]:disabled {
  opacity: 0.45; cursor: not-allowed;
}
.woocommerce-cart .cart_totals {
  background: var(--cream);
  border: 1px solid var(--border-light);
  padding: clamp(28px, 3.5vw, 40px);
  width: 100%;
  box-sizing: border-box;
}
.woocommerce-cart .cart_totals h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  line-height: 1.15;
  margin: 0 0 22px;
  white-space: nowrap;
}
.woocommerce-cart .cart_totals table {
  width: 100%;
  border: none;
  margin: 0;
}
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td {
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  font-size: 0.875rem;
  vertical-align: top;
}
.woocommerce-cart .cart_totals th {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mid);
  width: 34%;
  padding-right: 16px;
}
.woocommerce-cart .cart_totals td {
  text-align: right;
  color: var(--text);
}
.woocommerce-cart .cart_totals td .amount {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.1rem;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .woocommerce-shipping-calculator,
.woocommerce-cart .cart_totals .shipping-calculator-button {
  display: block;
  text-align: right;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-mid);
  font-weight: 300;
}
.woocommerce-cart .cart_totals .shipping-calculator-button {
  color: var(--gold-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 6px;
}
.woocommerce-cart .cart_totals .shipping-calculator-button:hover { color: var(--text); }
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
  border-bottom: 0;
  padding-top: 18px;
}
.woocommerce-cart .cart_totals .order-total .amount {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 300;
}
.woocommerce-cart .wc-proceed-to-checkout { padding-top: 22px; margin: 0; }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  width: 100%;
  padding: 16px 24px !important;
  text-align: center;
}
.woocommerce-cart .cart-collaterals {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 420px;
  width: 100%;
  margin-left: auto;
  margin-top: clamp(32px, 5vw, 56px);
}
.woocommerce-cart-form { margin-bottom: 8px; }

/* WooCommerce core (woocommerce-layout.css) ships
     .woocommerce .cart-collaterals .cart_totals { float: right; width: 48% }
   at specificity (0,3,0), which beat the theme's (0,2,0) `width: 100%` above.
   The totals box was rendering ~200px wide — half of a 420px column, floated —
   so "Enter your address to view shipping options" wrapped one word per line.
   Match core's specificity to win, and drop the float so the box can't escape
   the grid. */
.woocommerce-cart .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
}
/* Core clearfixes .cart-collaterals with ::before/::after { display: table }.
   The theme makes it a grid, so those became phantom grid items adding empty
   rows. Same bug as .col2-set on checkout. */
.woocommerce-cart .cart-collaterals::before,
.woocommerce-cart .cart-collaterals::after { content: none; display: none; }
/* Money should never wrap mid-figure. */
.woocommerce-cart .cart_totals td .amount { white-space: nowrap; }
/* 34% was tuned for a full-width box; in a 420px column it starved the value
   column. Let the label take only what it needs. */
.woocommerce-cart .cart_totals th { width: auto; white-space: nowrap; }

/* Success / notice banners */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border: 1px solid var(--border-light) !important;
  border-top: 2px solid var(--gold) !important;
  background: var(--cream) !important;
  color: var(--text) !important;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 300;
  padding: 16px 20px !important;
  list-style: none;
  margin: 0 0 24px !important;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--gold-dark) !important; }
.woocommerce-message .button,
.woocommerce-info .button {
  padding: 10px 18px !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.16em !important;
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--text) !important;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
  background: var(--text) !important;
  color: #fff !important;
}

/* Checkout coupon strip — less “default Woo” banner */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cream) !important;
  border: 1px solid var(--border-light) !important;
  border-top: 1px solid var(--border-light) !important;
  padding: 14px 18px !important;
  margin: 0 0 28px !important;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
  content: none !important;
  display: none !important;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--gold-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 400;
}
.woocommerce-checkout form.checkout_coupon {
  border: 1px solid var(--border-light);
  background: var(--offwhite);
  padding: 18px;
  margin: 0 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.woocommerce-checkout form.checkout_coupon .form-row {
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
}
.woocommerce-checkout form.checkout_coupon .form-row-first { flex: 1 1 220px; }
.woocommerce-checkout form.checkout_coupon .input-text {
  width: 100%;
  background: var(--white);
}

/* Cart line item on phones: WooCommerce's default stacked table looks rough and
   item meta (e.g. Additional Notes) collides with the price row. Re-lay each row
   as a clean card: thumbnail left, name + meta + price/qty/subtotal stacked. */
@media (max-width: 768px) {
  .woocommerce-cart table.shop_table_responsive { border: none; }
  .woocommerce-cart table.shop_table_responsive thead { display: none; }
  .woocommerce-cart table.shop_table_responsive tbody { display: block; }
  .woocommerce-cart table.shop_table_responsive tr.cart_item {
    display: grid; grid-template-columns: 84px 1fr;
    grid-template-areas: "thumb name" "thumb price" "thumb qty" "thumb subtotal";
    column-gap: 18px; row-gap: 12px; align-items: center;
    border: 1px solid var(--border-light); padding: 22px 16px; margin-bottom: 16px; position: relative;
  }
  .woocommerce-cart table.shop_table_responsive tr.cart_item td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 0; border: none; width: auto !important; text-align: right;
  }
  .woocommerce-cart table.shop_table_responsive tr.cart_item td::before {
    content: attr(data-title); font-size: 0.6875rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--text-light); font-weight: 400; float: none; flex: none;
  }
  .woocommerce-cart table.shop_table_responsive td.product-thumbnail { grid-area: thumb; display: block; }
  .woocommerce-cart table.shop_table_responsive td.product-thumbnail::before { display: none; }
  .woocommerce-cart table.shop_table_responsive td.product-thumbnail img { width: 84px; }
  .woocommerce-cart table.shop_table_responsive td.product-name {
    grid-area: name; flex-direction: column; align-items: flex-start; text-align: left; gap: 4px;
  }
  .woocommerce-cart table.shop_table_responsive td.product-name::before { display: none; }
  .woocommerce-cart table.shop_table_responsive td.product-name dl,
  .woocommerce-cart table.shop_table_responsive td.product-name .wc-item-meta,
  .woocommerce-cart table.shop_table_responsive td.product-name .variation {
    font-size: 0.75rem; color: var(--text-mid); margin: 6px 0 0; line-height: 1.5; width: 100%;
  }
  .woocommerce-cart table.shop_table_responsive td.product-name dl.variation dt,
  .woocommerce-cart table.shop_table_responsive td.product-name .wc-item-meta-label {
    display: inline; float: none; margin: 0; font-size: 0.66rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-light); font-weight: 400;
  }
  .woocommerce-cart table.shop_table_responsive td.product-name dl.variation dd,
  .woocommerce-cart table.shop_table_responsive td.product-name .wc-item-meta li {
    display: inline; margin: 0 0 0 4px; padding: 0;
  }
  .woocommerce-cart table.shop_table_responsive td.product-name dl.variation dd p,
  .woocommerce-cart table.shop_table_responsive td.product-name .wc-item-meta p { display: inline; margin: 0; }
  /* Break after each value, not once after the list (see desktop rule). */
  .woocommerce-cart table.shop_table_responsive td.product-name dl.variation dd::after,
  .woocommerce-cart table.shop_table_responsive td.product-name .wc-item-meta li::after {
    content: ""; display: block; height: 2px;
  }
  .woocommerce-cart table.shop_table_responsive td.product-price { grid-area: price; }
  .woocommerce-cart table.shop_table_responsive td.product-quantity { grid-area: qty; }
  .woocommerce-cart table.shop_table_responsive td.product-quantity .quantity { margin-left: auto; }
  .woocommerce-cart table.shop_table_responsive td.product-subtotal { grid-area: subtotal; }
  .woocommerce-cart table.shop_table_responsive td.product-remove {
    position: absolute; top: 10px; right: 12px; padding: 0; width: auto !important;
  }
  .woocommerce-cart table.shop_table_responsive td.product-remove::before { display: none; }
  .woocommerce-cart table.shop_table_responsive td.product-remove .remove { font-size: 1.1rem; }
}

/* ── Checkout page ─────────────────────────── */
.woocommerce-checkout .do-woo {
  padding-top: clamp(24px, 4vw, 40px);
  padding-bottom: clamp(48px, 7vw, 88px);
}
.woocommerce-checkout h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.35rem, 2.5vw, 1.7rem);
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}
.woocommerce-checkout .form-row label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-bottom: 8px;
  display: block;
  font-weight: 400;
}
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: 0;
  background: var(--white); font-family: var(--sans); font-size: 0.9rem; color: var(--text);
}
.woocommerce-checkout .input-text:focus, .woocommerce-checkout select:focus, .woocommerce-checkout textarea:focus { outline: none; border-color: var(--gold-dark); }
.woocommerce-checkout #order_review_heading { margin-top: 8px; }

/* Gift-card meta in "Your order": one label/value pair per row, same as the
   basket and the drawer. */
.woocommerce-checkout #order_review .product-name dl.variation,
.woocommerce-checkout #order_review .product-name .wc-item-meta {
  margin: 8px 0 0; padding: 0;
  font-family: var(--sans); font-size: 0.75rem; line-height: 1.55; color: var(--text-mid);
}
.woocommerce-checkout #order_review .product-name dl.variation dt,
.woocommerce-checkout #order_review .product-name .wc-item-meta-label {
  display: inline; float: none; margin: 0; padding: 0; font-weight: 400;
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-light);
}
.woocommerce-checkout #order_review .product-name dl.variation dd,
.woocommerce-checkout #order_review .product-name .wc-item-meta li {
  display: inline; margin: 0 0 0 4px; padding: 0;
}
.woocommerce-checkout #order_review .product-name dl.variation dd p,
.woocommerce-checkout #order_review .product-name .wc-item-meta p { display: inline; margin: 0; }
.woocommerce-checkout #order_review .product-name dl.variation dd::after,
.woocommerce-checkout #order_review .product-name .wc-item-meta li::after {
  content: ""; display: block; height: 2px;
}
.woocommerce-checkout .col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 48px);
  margin-bottom: clamp(28px, 4vw, 48px);
}
/* WooCommerce clearfixes .col2-set with ::before/::after { display: table }.
   In a grid those pseudo-elements become GRID ITEMS: ::before takes cell 1,
   so billing lands in the right column and shipping wraps to a second row.
   Core also sets .col-1/.col-2 { float: left; width: 48% }, which still applies
   inside a grid track and halves each column. Kill both. */
.woocommerce-checkout .col2-set::before,
.woocommerce-checkout .col2-set::after { content: none; display: none; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  float: none;
  width: 100%;
  min-width: 0;
}
@media (max-width: 860px) {
  .woocommerce-checkout .col2-set { grid-template-columns: 1fr; }
}
.woocommerce-checkout #customer_details { margin-bottom: 0; }

/* Checkout: "Add Your Gift Message" section */
.do-gift-section {
  margin-top: clamp(24px, 3.5vw, 36px);
  padding-top: clamp(22px, 3vw, 28px);
  border-top: 1px solid var(--border-light);
}
.do-gift-section__intro {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.7;
  margin: 0 0 16px;
  max-width: 46ch;
}
.do-gift-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}
@media (max-width: 520px) {
  .do-gift-toggle { grid-template-columns: 1fr; }
}
.do-gift-toggle__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  background: var(--white);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.3;
  color: var(--text-mid);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.do-gift-toggle__option:hover { border-color: var(--text-light); color: var(--text); }
.do-gift-toggle__option:has(input:checked) {
  border-color: var(--gold-dark);
  background: rgba(201, 169, 110, 0.08);
  color: var(--text);
}
.do-gift-toggle__option input {
  accent-color: var(--gold-dark);
  margin: 0;
  flex: none;
  width: 15px;
  height: 15px;
}
.do-gift-fields[hidden] { display: none; }
.do-gift-fields .form-row .description {
  display: block;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--text-light);
  margin-top: 6px;
  line-height: 1.6;
}
.woocommerce-checkout #order_review {
  background: var(--cream);
  padding: clamp(24px, 3.5vw, 36px);
  border: 1px solid var(--border-light);
}
.woocommerce-checkout #order_review_heading {
  margin: 0 0 18px;
}
.woocommerce-checkout .shop_table { border: none; width: 100%; margin: 0; }
.woocommerce-checkout .shop_table thead th {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--text);
  padding: 0 0 12px;
}
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  font-size: 0.9rem;
  vertical-align: top;
  background: transparent;
}
.woocommerce-checkout .shop_table .product-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  padding-right: 20px;
}
.woocommerce-checkout .shop_table .product-total {
  text-align: right;
  white-space: nowrap;
}
.woocommerce-checkout .shop_table .product-name .variation,
.woocommerce-checkout .shop_table .product-name dl.variation,
.woocommerce-checkout .shop_table .product-name .wc-item-meta {
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-mid);
}
.woocommerce-checkout .shop_table .product-name dl.variation dt,
.woocommerce-checkout .shop_table .product-name .wc-item-meta-label {
  display: inline;
  float: none;
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  font-weight: 400;
}
.woocommerce-checkout .shop_table .product-name dl.variation dd,
.woocommerce-checkout .shop_table .product-name .wc-item-meta li {
  display: inline;
  margin: 0 0 0 4px;
  padding: 0;
}
.woocommerce-checkout .shop_table .product-name dl.variation dd p,
.woocommerce-checkout .shop_table .product-name .wc-item-meta p { display: inline; margin: 0; }
.woocommerce-checkout .shop_table .product-name dl.variation::after,
.woocommerce-checkout .shop_table .product-name .wc-item-meta li::after {
  content: "";
  display: block;
  height: 2px;
}
.woocommerce-checkout .shop_table .amount { font-family: var(--serif); font-weight: 300; font-size: 1.05rem; }
.woocommerce-checkout .shop_table tfoot th {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.woocommerce-checkout .shop_table tfoot td { text-align: right; }
.woocommerce-checkout .shop_table tfoot .order-total th,
.woocommerce-checkout .shop_table tfoot .order-total td {
  border-bottom: 0;
  padding-top: 18px;
}
.woocommerce-checkout .shop_table tfoot .order-total .amount {
  font-size: 1.45rem;
}
.woocommerce-checkout #place_order {
  width: 100%;
  margin-top: 8px;
  padding: 16px 28px !important;
}
.woocommerce-checkout .woocommerce-info, .woocommerce .woocommerce-info {
  border-top: 2px solid var(--gold); background: var(--offwhite); font-size: 0.875rem; color: var(--text-mid);
}
.woocommerce-checkout .woocommerce-info::before, .woocommerce .woocommerce-info::before { color: var(--gold-dark); }
.woocommerce-checkout #payment {
  background: transparent;
  border: 0;
  padding: 18px 0 0;
  margin-top: 8px;
  border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
  border: 0;
  padding: 0 0 16px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.woocommerce-checkout #payment ul.payment_methods li {
  padding: 10px 0;
  line-height: 1.5;
  list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li label {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text);
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--white);
  border: 1px solid var(--border-light);
  color: var(--text-mid);
  font-size: 0.85rem;
  font-weight: 300;
  border-radius: 0;
  padding: 12px 14px;
  margin: 10px 0 4px;
  width: 100%;
  box-sizing: border-box;
}
.woocommerce-checkout #payment div.payment_box::before { display: none !important; }
.woocommerce-checkout #payment div.form-row {
  padding: 0;
  margin: 0;
}
.woocommerce-checkout .woocommerce-privacy-policy-text {
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--text-mid);
  font-weight: 300;
  margin: 0 0 18px;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 8px;
}

/* Buttons -> design btn */
.woocommerce a.button, .woocommerce button.button,
.woocommerce .button, .woocommerce #respond input#submit,
.woocommerce input.button, .woocommerce input.button.alt,
.woocommerce a.button.alt, .woocommerce button.button.alt {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 52px; font-family: var(--sans); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; border: 1px solid var(--text);
  color: var(--text); background: transparent; border-radius: 0; transition: all 0.5s var(--ease);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover,
.woocommerce input.button:hover { background: var(--text); color: #fff; }
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.single-product .single_add_to_cart_button { background: var(--text); color: #fff; border-color: var(--text); flex: 1; }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--charcoal-warm); color: #fff; }

/* Win over WooCommerce block styles (wc-blocks-style enqueues after the theme,
   otherwise the add-to-cart button renders in Woo's default purple). */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce #respond input#submit.alt {
  background-color: var(--text) !important;
  border-color: var(--text) !important;
  color: #fff !important;
  border-radius: 0 !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover { background-color: var(--charcoal-warm) !important; }

/* Hide the basket badge when empty (header.php adds .is-empty at count 0). */
.nav__cart-count.is-empty { display: none; }

/* Product tabs / related */
.woocommerce-tabs { margin-top: clamp(48px, 7vw, 90px); grid-column: 1 / -1; }
.woocommerce-tabs ul.tabs { border: none; padding: 0; display: flex; gap: 28px; border-bottom: 1px solid var(--border); }
.woocommerce-tabs ul.tabs::before { border: none; }
.woocommerce-tabs ul.tabs li { background: none; border: none; border-radius: 0; margin: 0; padding: 0 0 16px; }
.woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce-tabs ul.tabs li a { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-light); padding: 0; position: relative; transition: color 0.3s var(--ease); }
.woocommerce-tabs ul.tabs li a:hover { color: var(--text); }
.woocommerce-tabs ul.tabs li.active a { color: var(--text); }
.woocommerce-tabs ul.tabs li.active a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -17px; height: 2px; background: var(--gold); }
.woocommerce-tabs .woocommerce-Tabs-panel { padding-top: clamp(28px, 4vw, 44px); max-width: 820px; }
.woocommerce-tabs .woocommerce-Tabs-panel > h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 18px; }
.woocommerce-tabs .woocommerce-Tabs-panel p { color: var(--text-mid); line-height: 1.9; font-weight: 300; margin-bottom: 16px; }
.woocommerce-tabs #review_form input[type="text"],
.woocommerce-tabs #review_form input[type="email"],
.woocommerce-tabs #review_form textarea {
  width: 100%; max-width: 520px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 0; background: transparent; font-family: var(--sans); font-size: 0.875rem; color: var(--text);
}
.woocommerce-tabs #review_form textarea { max-width: 100%; min-height: 120px; resize: vertical; }
.woocommerce-tabs #review_form label { font-size: 0.75rem; letter-spacing: 0.08em; color: var(--text-mid); }
.products.related, .products.upsells { grid-column: 1 / -1; margin-top: clamp(56px, 8vw, 100px); }
.products.related > h2, .products.upsells > h2 { font-family: var(--serif); font-weight: 300; margin-bottom: 40px; }
/* The testimonial marquee is hooked inside div.product's grid; without a span
   + min-width:0 its max-content track blows the 1.05fr column out to ~9000px. */
.single-product div.product > .do-testimonials { grid-column: 1 / -1; min-width: 0; }

/* Breadcrumb */
.woocommerce-breadcrumb {
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-light);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.woocommerce-breadcrumb a { color: var(--text-light); }
.woocommerce-breadcrumb a:hover { color: var(--gold-dark); }

/* ── Mini cart inside drawer ─────────────── */
.cart-drawer__body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.cart-drawer__body .woocommerce-mini-cart {
  flex: 1; overflow-y: auto; padding: 8px 28px; margin: 0; list-style: none;
}
.cart-drawer__body .woocommerce-mini-cart-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  column-gap: 16px;
  row-gap: 6px;
  align-items: start;
  padding: 22px 28px 22px 0;
  border-bottom: 1px solid var(--border-light);
  position: relative;
}
.cart-drawer__body .woocommerce-mini-cart-item > a:not(.remove) {
  grid-column: 2;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.25;
  padding-right: 22px;
}
.cart-drawer__body .woocommerce-mini-cart-item > a:not(.remove):hover { color: var(--gold-dark); }
.cart-drawer__body .woocommerce-mini-cart-item img {
  grid-column: 1;
  grid-row: 1 / span 4;
  width: 72px;
  height: 90px;
  object-fit: cover;
  background: var(--cream);
  display: block;
}
.cart-drawer__body .woocommerce-mini-cart-item a.remove {
  position: absolute; top: 18px; right: 0; color: var(--text-light) !important;
  font-size: 0.95rem; line-height: 1; z-index: 2;
}
.cart-drawer__body .woocommerce-mini-cart-item a.remove:hover { color: var(--text) !important; }
.cart-drawer__body .woocommerce-mini-cart-item .quantity {
  grid-column: 2;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 300;
  color: var(--text);
  border: 0;
  padding: 0;
  background: transparent;
}
.cart-drawer__body .woocommerce-mini-cart-item dl.variation,
.cart-drawer__body .woocommerce-mini-cart-item .variation,
.cart-drawer__body .woocommerce-mini-cart-item .wc-item-meta {
  grid-column: 2;
  margin: 2px 0 4px;
  padding: 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-mid);
}
.cart-drawer__body .woocommerce-mini-cart-item dl.variation dt,
.cart-drawer__body .woocommerce-mini-cart-item .wc-item-meta .wc-item-meta-label {
  display: inline;
  float: none;
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
}
.cart-drawer__body .woocommerce-mini-cart-item dl.variation dd,
.cart-drawer__body .woocommerce-mini-cart-item .wc-item-meta li {
  display: inline;
  margin: 0 0 0 4px;
  padding: 0;
}
.cart-drawer__body .woocommerce-mini-cart-item dl.variation dd p,
.cart-drawer__body .woocommerce-mini-cart-item .wc-item-meta p {
  display: inline;
  margin: 0;
}
.cart-drawer__body .woocommerce-mini-cart-item dl.variation::after,
.cart-drawer__body .woocommerce-mini-cart-item .wc-item-meta li::after {
  content: "";
  display: block;
  height: 2px;
}
.cart-drawer__body .woocommerce-mini-cart__empty-message {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--serif); font-size: 1.3rem; font-weight: 300; color: var(--text); padding: 40px 28px;
}
.cart-drawer__body .woocommerce-mini-cart__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 20px 28px 8px; border-top: 1px solid var(--border); background: var(--offwhite); margin: 0;
}
.cart-drawer__body .woocommerce-mini-cart__total strong { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400; color: var(--text-mid); }
.cart-drawer__body .woocommerce-mini-cart__total .amount { font-family: var(--serif); font-size: 1.5rem; font-weight: 300; }
.cart-drawer__body .woocommerce-mini-cart__buttons {
  display: flex; flex-direction: column; gap: 10px; padding: 8px 28px 28px;
  background: var(--offwhite); margin: 0;
}
.cart-drawer__body .woocommerce-mini-cart__buttons .button {
  width: 100%;
  padding: 16px 24px;
  text-align: center;
}
.cart-drawer__body .woocommerce-mini-cart__buttons .checkout {
  background: var(--text) !important;
  color: #fff !important;
  border-color: var(--text) !important;
}
.cart-drawer__body .woocommerce-mini-cart__buttons .button:not(.checkout) {
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--text) !important;
}

/* ── Mini cart inside drawer: Elementor's markup ──────────────
   Elementor Pro replaces WooCommerce's mini-cart template whenever
   elementor_use_mini_cart_template is on, so the drawer renders
   .elementor-menu-cart__* divs — not Woo's .woocommerce-mini-cart-item <li>s.
   Everything above this comment therefore never matches. Turning the setting
   off is not an option: 23 pages embed Elementor's Menu Cart widget. These
   rules restyle the markup we actually get, to the same design. */
.cart-drawer__body .elementor-menu-cart__products {
  flex: 1; overflow-y: auto; padding: 8px 28px; margin: 0;
}
.cart-drawer__body .elementor-menu-cart__product {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  column-gap: 16px;
  row-gap: 4px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-light);
}
.cart-drawer__body .elementor-menu-cart__product:last-child { border-bottom: 0; }

.cart-drawer__body .elementor-menu-cart__product-image { grid-column: 1; grid-row: 1 / span 2; }
.cart-drawer__body .elementor-menu-cart__product-image img {
  width: 72px; height: 90px; object-fit: cover; display: block; background: var(--cream);
}

.cart-drawer__body .elementor-menu-cart__product-name {
  grid-column: 2; grid-row: 1;
  font-family: var(--serif); font-size: 1.1rem; font-weight: 400;
  color: var(--text); line-height: 1.25;
}
.cart-drawer__body .elementor-menu-cart__product-name a { color: inherit; }
.cart-drawer__body .elementor-menu-cart__product-name a:hover { color: var(--gold-dark); }

/* Gift-card meta (To / From / Message). Woo emits <dl><dt>label<dd>value, which
   stacks onto four lines unless dt and dd share one. */
.cart-drawer__body .elementor-menu-cart__product dl.variation,
.cart-drawer__body .elementor-menu-cart__product .wc-item-meta {
  margin: 6px 0 0; padding: 0;
  font-family: var(--sans); font-size: 0.75rem; line-height: 1.55; color: var(--text-mid);
}
.cart-drawer__body .elementor-menu-cart__product dl.variation dt,
.cart-drawer__body .elementor-menu-cart__product .wc-item-meta-label {
  display: inline; float: none; margin: 0; padding: 0;
  font-weight: 400; font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-light);
}
.cart-drawer__body .elementor-menu-cart__product dl.variation dd,
.cart-drawer__body .elementor-menu-cart__product .wc-item-meta li {
  display: inline; margin: 0 0 0 4px; padding: 0;
}
.cart-drawer__body .elementor-menu-cart__product dl.variation dd p,
.cart-drawer__body .elementor-menu-cart__product .wc-item-meta p { display: inline; margin: 0; }
/* Break the line after each value, so pairs read "TO: Alice" one per row. */
.cart-drawer__body .elementor-menu-cart__product dl.variation dd::after,
.cart-drawer__body .elementor-menu-cart__product .wc-item-meta li::after {
  content: ""; display: block; height: 2px;
}

.cart-drawer__body .elementor-menu-cart__product-price {
  grid-column: 2; grid-row: 2;
  border: 0; padding: 0; background: transparent;
}
.cart-drawer__body .elementor-menu-cart__product-price .quantity {
  font-family: var(--serif); font-size: 1rem; font-weight: 300; color: var(--text);
  border: 0; padding: 0; background: transparent; display: inline;
}
.cart-drawer__body .elementor-menu-cart__product-price .product-quantity { color: var(--text-light); }

/* Elementor prints two identical remove links; show one and give it a glyph,
   since its icon comes from Elementor CSS the drawer doesn't load. */
.cart-drawer__body .elementor-menu-cart__product-remove { grid-column: 3; grid-row: 1; }
.cart-drawer__body .elementor-menu-cart__product-remove a.elementor_remove_from_cart_button { display: none; }
.cart-drawer__body .elementor-menu-cart__product-remove a {
  display: block; width: 22px; height: 22px;
  color: var(--text-light) !important; text-decoration: none;
}
.cart-drawer__body .elementor-menu-cart__product-remove a::before {
  content: "\2715"; display: block; text-align: center;
  font-size: 0.8rem; line-height: 22px;
}
.cart-drawer__body .elementor-menu-cart__product-remove a:hover { color: var(--text) !important; }

.cart-drawer__body .elementor-menu-cart__subtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 20px 28px 8px; border-top: 1px solid var(--border);
  background: var(--offwhite); margin: 0;
}
.cart-drawer__body .elementor-menu-cart__subtotal strong {
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 400; color: var(--text-mid);
}
.cart-drawer__body .elementor-menu-cart__subtotal .amount {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 300;
}

.cart-drawer__body .elementor-menu-cart__footer-buttons {
  display: flex; flex-direction: column; gap: 10px;
  padding: 8px 28px 28px; background: var(--offwhite); margin: 0;
}
.cart-drawer__body .elementor-menu-cart__footer-buttons .elementor-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 16px 24px; border-radius: 0;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  border: 1px solid var(--text); background: transparent; color: var(--text);
  transition: all 0.5s var(--ease);
}
.cart-drawer__body .elementor-menu-cart__footer-buttons .elementor-button--checkout {
  background: var(--text); color: var(--white);
}
.cart-drawer__body .elementor-menu-cart__footer-buttons .elementor-button:hover {
  background: var(--gold); border-color: var(--gold); color: var(--white);
}

/* ── Primary nav: centered logo, items grouped neatly each side ── */
.nav__links-left, .nav__links-right { justify-content: center; gap: clamp(20px, 2.4vw, 36px); }

/* Cart is an icon-only control: strip any button chrome (a stale Elementor
   kit paints buttons as blush rounded pills — that's the "circle" behind the
   basket; gone on a clean install, neutralised here for parity). */
.nav__cart { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0; }
/* Keep the basket legible over bright hero imagery on the transparent nav. */
.nav__cart svg { stroke-width: 1.5; }
.nav--transparent .nav__cart { color: #fff; }
.nav--transparent .nav__cart svg { filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5)); }

.nav__search { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0; cursor: pointer; width: 22px; height: 22px; }
.nav__search svg { width: 100%; height: 100%; stroke-width: 1.5; }
.nav--transparent .nav__search { color: #fff; }
.nav--transparent .nav__search svg { filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5)); }

/* Fill the remaining drawer height and scroll (the drawer is a flex column;
   min-height:0 lets this child shrink so its overflow actually scrolls). */
.search-drawer__body { padding: 24px; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.search-drawer__input {
  width: 100%; padding: 14px 16px; border: 1px solid var(--border);
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 300; color: var(--text);
  background: var(--white); outline: none; transition: border-color 0.4s ease; -webkit-appearance: none;
}
.search-drawer__input:focus { border-color: var(--gold); }

/* ── Footer social icons ─────────────────── */
.footer__social a { display: inline-flex; align-items: center; justify-content: center; }
.footer__social svg { width: 20px; height: 20px; }

/* ── Book Now: vertical side tab ─────────── */
.book-tab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 280; background: var(--gold); color: #fff; border: 0; cursor: pointer;
  padding: 22px 11px; border-radius: 6px 0 0 6px;
  box-shadow: -3px 3px 14px rgba(20,20,20,0.18); transition: background 0.3s var(--ease);
}
.book-tab:hover { background: var(--gold-dark); }
.book-tab span {
  writing-mode: vertical-rl; transform: rotate(180deg); display: block;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 400; line-height: 1;
  letter-spacing: 0.24em; text-transform: uppercase; margin-right: 4px;
}

/* The closed drawers sit off-canvas at translateX(100%). On iOS Safari that
   box is counted in the layout-viewport width, which shifts right:0 fixed
   elements (the Book Now tab) partly off-screen. The .drawer-clip wrapper is a
   viewport-pinned, overflow-hidden box that clips the parked drawer so it can
   never widen the page; the drawer slides inside it, so the animation is kept. */
.drawer-clip { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 300; }
.drawer-clip > .cart-drawer, .drawer-clip > .book-drawer { position: absolute; pointer-events: auto; }
.cart-drawer, .book-drawer {
  visibility: hidden;
  transition: transform 0.5s var(--ease-luxe), visibility 0s linear 0.5s;
}
.cart-drawer--open, .book-drawer--open {
  visibility: visible;
  transition: transform 0.5s var(--ease-luxe), visibility 0s linear 0s;
}

/* ── Book Now: slide-in drawer (mirrors the basket drawer) ── */
.book-drawer {
  position: fixed; top: 0; right: 0; width: min(440px, 100%); height: 100%;
  background: var(--cream); z-index: 300; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.5s var(--ease-luxe);
  box-shadow: -20px 0 60px rgba(20,20,20,0.12); overflow-y: auto;
}
.book-drawer--open { transform: translateX(0); }
.book-drawer__body { padding: clamp(20px,4vw,32px) clamp(20px,4vw,32px) clamp(32px,5vw,48px); }
.book-drawer__intro { color: var(--text-mid); font-size: 0.875rem; line-height: 1.8; font-weight: 300; margin-bottom: 28px; }

/* ── Floating WhatsApp button ────────────── */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 280;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(20,20,20,0.25); transition: transform 0.3s var(--ease);
}
.wa-float:hover { transform: scale(1.08); color: #fff; }
.wa-float svg { width: 32px; height: 32px; }
@media (max-width: 600px) {
  .wa-float { width: 50px; height: 50px; right: 16px; bottom: 16px; }
  .wa-float svg { width: 28px; height: 28px; }
  .book-tab { padding: 18px 9px; }
  .book-tab span { font-size: 0.6875rem; letter-spacing: 0.18em; }
  /* Group the mobile menu items together rather than spreading them down the
     whole screen. The inherited 1.75 line-height was padding each item to ~48px
     tall; tightening it (plus a smaller gap) clusters the links. */
  .mobile-nav { gap: 10px; }
  .mobile-nav__link { font-size: 1.7rem; line-height: 1.15; }
  /* Stack the newsletter input + button so the bigger mobile type can't overflow. */
  .newsletter-row { flex-direction: column; gap: 10px; }
  .newsletter-row input { border-right: 1px solid var(--border); }
  .newsletter-row button { padding: 14px; }
}

/* ── Local-area delivery pills ─────────────── */
.do-area-pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 620px; margin: 0 auto; }
.do-area-pill {
  border: 1px solid var(--border); padding: 12px 24px; font-family: var(--sans);
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mid);
  background: #fff; transition: all 0.5s var(--ease);
}
.do-area-pill:hover { border-color: var(--gold-dark); color: var(--text); }

/* ── FAQ accordion ───────────────────────── */
.do-faq { max-width: 720px; margin: clamp(32px,5vw,56px) auto 0; }
.do-faq__item { border-bottom: 1px solid var(--border); }
.do-faq__item:first-child { border-top: 1px solid var(--border); }
.do-faq__q {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0; font-family: var(--serif); font-size: clamp(1rem,1.5vw,1.1rem);
  color: var(--text); gap: 16px;
}
.do-faq__q::-webkit-details-marker { display: none; }
.do-faq__q::after { content: '+'; font-family: var(--sans); font-size: 1.4rem; font-weight: 300; flex-shrink: 0; color: var(--gold); transition: transform 0.3s var(--ease); }
.do-faq__item[open] .do-faq__q::after { content: '−'; }
.do-faq__a { margin: 0 0 20px; color: var(--text-mid); line-height: 1.85; font-size: 0.95rem; }

/* ── Responsive ──────────────────────────── */
@media (max-width: 880px) {
  .single-product div.product { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  .services-editorial { grid-template-columns: 1fr; }
  .service-panel { aspect-ratio: 16/10; }
  .studio-section { grid-template-columns: 1fr; }
  .studio-section__image { aspect-ratio: 16/10; }
  .products-grid, .woocommerce ul.products, .do-post-list { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .products-grid, .woocommerce ul.products, .do-post-list { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   Subscription page
   ═══════════════════════════════════════════ */
.section--no-pad-top { padding-top: 0; }

.sub-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.sub-tier { border: 1px solid var(--border); padding: clamp(32px, 4vw, 52px) clamp(24px, 3vw, 40px); text-align: center; transition: border-color 0.5s var(--ease); position: relative; }
.sub-tier:hover { border-color: var(--gold); }
.sub-tier--featured { border-color: var(--gold); background: var(--offwhite); }
.sub-tier--featured::before {
  content: 'Most Popular'; position: absolute; top: -1px; left: 50%;
  transform: translateX(-50%) translateY(-50%); background: var(--charcoal); color: var(--gold-light);
  font-family: var(--sans); font-size: 0.625rem; font-weight: 400; letter-spacing: 0.25em;
  text-transform: uppercase; padding: 6px 20px; white-space: nowrap;
}
.sub-tier__name { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 300; color: var(--text); margin-bottom: 8px; }
.sub-tier__price { font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 300; color: var(--text); margin-bottom: 4px; line-height: 1.1; }
.sub-tier__freq { font-size: 0.75rem; color: var(--text-light); letter-spacing: 0.1em; margin-bottom: 24px; font-weight: 300; }
.sub-tier__desc { font-size: 0.875rem; color: var(--text-mid); line-height: 1.8; font-weight: 300; margin-bottom: 28px; }
.sub-tier__features { text-align: left; margin-bottom: 32px; }
.sub-tier__features li { padding: 8px 0 8px 20px; position: relative; font-size: 0.8125rem; color: var(--text-mid); line-height: 1.6; font-weight: 300; }
.sub-tier__features li::before { content: ''; position: absolute; left: 0; top: 16px; width: 8px; height: 1px; background: var(--gold); }
.sub-tier .btn { width: 100%; }

.how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 4vw, 56px); text-align: center; }
.how-step__num { font-family: var(--serif); font-size: clamp(2.8rem, 5vw, 4.5rem); font-weight: 300; color: var(--gold); opacity: 0.45; line-height: 1; margin-bottom: 16px; }
.how-step h4 { margin-bottom: 10px; }
.how-step p { font-size: 0.8125rem; color: var(--text-mid); line-height: 1.8; font-weight: 300; max-width: 240px; margin: 0 auto; }

.do-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.do-duo > div { aspect-ratio: 16/10; overflow: hidden; }
.do-duo img { width: 100%; height: 100%; object-fit: cover; }

/* Form fields (shared by subscription + contact) */
.do-form-group { margin-bottom: 24px; }
.do-form-group label { display: block; font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-mid); margin-bottom: 10px; font-family: var(--sans); }
.do-form-group input, .do-form-group textarea, .do-form-group select {
  width: 100%; padding: 14px 16px; border: 1px solid var(--border);
  font-family: var(--sans); font-size: 0.875rem; font-weight: 300; color: var(--text);
  background: var(--white); outline: none; transition: border-color 0.4s ease; -webkit-appearance: none;
}
.do-form-group input:focus, .do-form-group textarea:focus, .do-form-group select:focus { border-color: var(--gold); }
.do-form-group textarea { resize: vertical; min-height: 100px; }
.do-form-group select { cursor: pointer; }
.do-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.do-form-section { margin-bottom: 48px; }
.do-form-section__label { margin-bottom: 24px; color: var(--text); font-size: 0.6875rem; }

.colour-options { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.do-form-group .colour-option { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--border); cursor: pointer; transition: all 0.3s var(--ease); background: var(--white); flex: 0 0 auto; margin-bottom: 0; }
.colour-option:hover { border-color: var(--gold); }
.colour-option input { display: none; }
.colour-option input:checked + .colour-swatch + span,
.colour-option:has(input:checked) { border-color: var(--gold); background: var(--offwhite); }
.colour-swatch { display: inline-block; vertical-align: middle; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-light); flex-shrink: 0; background-size: cover; }
.colour-option span { font-size: 0.75rem; font-weight: 300; letter-spacing: 0.05em; color: var(--text-mid); white-space: nowrap; }

/* Confirmation overlay */
.confirm-overlay { position: fixed; inset: 0; background: rgba(20,20,20,0.6); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; }
.confirm-card { background: var(--white); padding: clamp(40px, 6vw, 72px); max-width: 520px; width: 100%; text-align: center; }
.confirm-card h3 { margin-bottom: 16px; }
.confirm-card p { color: var(--text-mid); font-size: 0.9375rem; line-height: 1.8; font-weight: 300; margin: 0 auto 32px; }

@media (max-width: 768px) {
  .sub-tiers { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .how-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) { .do-form-grid { grid-template-columns: 1fr; } .do-duo { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .how-steps { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════
   Content pages (About / Contact / Portfolio / Services)
   ═══════════════════════════════════════════ */

/* Stats row */
.do-stats { padding: clamp(56px, 8vw, 100px) 0; background: var(--offwhite); }
.do-stats--dark { background: var(--charcoal); }
.do-stats__grid { display: grid; gap: 24px; text-align: center; }
.do-stats__value { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 300; color: var(--text); margin-bottom: 8px; }
.do-stats--dark .do-stats__value { color: #fff; }
.do-stats__label { font-family: var(--sans); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dark); }
.do-stats--dark .do-stats__label { color: var(--gold); }

/* Process steps */
.do-process { display: grid; grid-template-columns: repeat(var(--do-process-cols, 3), 1fr); gap: clamp(32px, 6vw, 80px); text-align: center; }
@media (max-width: 900px) { .do-process { grid-template-columns: repeat(2, 1fr); gap: 48px; } }
@media (max-width: 600px) { .do-process { grid-template-columns: 1fr; gap: 40px; } }
.do-process__num { font-family: var(--serif); font-size: clamp(3rem, 6vw, 5rem); font-weight: 300; color: var(--gold); margin-bottom: 20px; line-height: 1; opacity: 0.5; }
.do-process h4 { margin-bottom: 12px; }
.do-process p { color: var(--text-mid); font-size: 0.875rem; max-width: 280px; margin: 0 auto; line-height: 1.8; font-weight: 300; }

/* Values grid (About) */
.do-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 5vw, 64px); text-align: center; }
.do-values h4 { margin-bottom: 12px; }
.do-values p { color: var(--text-mid); font-size: 0.875rem; max-width: 280px; margin: 0 auto; font-weight: 300; line-height: 1.8; }
.do-values__icon { width: 48px; height: 1px; background: var(--gold); margin: 0 auto 24px; }

/* Team split (About) */
.do-team { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; min-height: 600px; }
.do-team__image { overflow: hidden; }
.do-team__image img { width: 100%; height: 100%; object-fit: cover; }
.do-team__text { display: flex; flex-direction: column; justify-content: center; padding: clamp(48px, 7vw, 100px) clamp(36px, 6vw, 88px); background: var(--charcoal); color: #fff; }
.do-team__role { font-size: 0.75rem; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 28px; }
.do-team__text p { color: rgba(255,255,255,0.75); margin-bottom: 20px; font-size: 0.9375rem; line-height: 1.9; max-width: 420px; font-weight: 300; }

/* Galleries */
.do-gallery-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; }
.do-gallery-3 > div { aspect-ratio: 1; overflow: hidden; }
.do-gallery-3 img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.do-gallery-3 > div:hover img { transform: scale(1.04); }

.do-wedding-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.do-wedding-gallery > div { aspect-ratio: 3/4; overflow: hidden; }
.do-wedding-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.do-wedding-gallery > div:hover img { transform: scale(1.05); }
.do-wedding-gallery > div:first-child { grid-row: span 2; aspect-ratio: auto; }

/* Contact */
.do-contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.do-contact-block { margin-bottom: 32px; }
.do-contact-block .label { margin-bottom: 10px; display: block; }
.do-contact-block p { color: var(--text-mid); font-size: 0.875rem; line-height: 1.8; font-weight: 300; }
.do-contact-block a { color: var(--text-mid); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }
.do-contact-block a:hover { color: var(--text); text-decoration-color: var(--gold); }
.do-hours { width: 100%; border-collapse: collapse; }
.do-hours td { padding: 8px 0; font-size: 0.875rem; font-weight: 300; color: var(--text-mid); border-bottom: 1px solid var(--border-light); }
.do-hours td:first-child { font-weight: 400; color: var(--text); width: 110px; }
.do-sameday { background: var(--charcoal); color: rgba(255,255,255,0.8); padding: 20px 24px; margin-top: 28px; font-size: 0.875rem; font-weight: 300; line-height: 1.7; }
.do-sameday strong { color: var(--gold); font-weight: 400; }
.do-map { width: 100%; aspect-ratio: 16/9; border: 0; margin-top: 28px; filter: grayscale(0.4) contrast(0.95); }

/* Portfolio masonry + lightbox */
.do-masonry { columns: 3; column-gap: 8px; }
.do-masonry__item { break-inside: avoid; margin-bottom: 8px; overflow: hidden; cursor: pointer; position: relative; display: block; }
.do-masonry__item img { width: 100%; display: block; transition: transform 0.8s var(--ease); }
.do-masonry__item:hover img { transform: scale(1.04); }
.do-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.94); z-index: 300; display: none; align-items: center; justify-content: center; cursor: pointer; }
.do-lightbox.is-open { display: flex; }
.do-lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; }
.do-lightbox__close { position: absolute; top: 28px; right: 36px; color: rgba(255,255,255,0.7); font-size: 1.75rem; cursor: pointer; background: none; border: none; font-weight: 300; }

/* Local SEO page */
.do-local-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.do-local-point .label { display: block; margin-bottom: 12px; }
.do-local-point p { color: var(--text-mid); font-size: 0.875rem; line-height: 1.8; font-weight: 300; }

@media (max-width: 768px) {
  .do-team { grid-template-columns: 1fr; }
  .do-team__image { aspect-ratio: 4/3; }
  .do-contact-grid { grid-template-columns: 1fr; }
  .do-wedding-gallery { grid-template-columns: repeat(2, 1fr); }
  .do-wedding-gallery > div:first-child { grid-row: auto; aspect-ratio: 3/4; }
  .do-masonry { columns: 2; }
  .do-local-points { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .do-values { grid-template-columns: 1fr; } .do-gallery-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .do-masonry { columns: 1; } }

/* ═══════════════════════════════════════════
   Responsive — phone + tablet hardening
   ═══════════════════════════════════════════ */

/* Collapse the nav to a hamburger across tablets + large phones (<= 900px)
   so the 7 links + centred logo never crowd or overflow. */
@media (max-width: 900px) {
  .nav__inner { grid-template-columns: auto 1fr auto; height: 84px; }
  .nav__links-left { display: none; }
  .nav__link { display: none; }
  .nav__links-right { display: flex; order: 3; justify-content: flex-end; }
  .nav__hamburger { display: flex; order: 1; }
  .nav__logo { order: 2; justify-self: center; margin: 0; }
  .nav__logo img { height: 60px; }
}

/* Tablet portrait: ease dense 3/4-up grids to 2-up. */
@media (max-width: 1024px) and (min-width: 769px) {
  .sub-tiers { grid-template-columns: 1fr 1fr; }
  .sub-tiers .sub-tier:last-child { grid-column: 1 / -1; max-width: 480px; margin: 0 auto; width: 100%; }
}

/* Phones: tighten hero + sections, single-column everything dense. */
@media (max-width: 600px) {
  .hero { min-height: 560px; height: 92vh; }
  .hero__sub { font-size: 0.75rem; margin-bottom: 32px; }
  .nav__logo img { height: 52px; }
  .announce { font-size: 0.625rem; letter-spacing: 0.12em; padding: 0 12px; text-align: center; line-height: 1.3; }
  .do-page-hero { min-height: 38vh !important; padding: clamp(64px, 18vw, 120px) 20px; }
  .do-stats__grid { grid-template-columns: 1fr 1fr !important; gap: 32px 16px; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .do-wedding-gallery { grid-template-columns: 1fr 1fr; }
  .single-product form.cart { flex-direction: column; }
  .single-product form.cart .quantity { width: 100%; }
  .woocommerce .quantity input.qty { width: 100%; }
  .woocommerce-ordering select { min-width: 0; width: 100%; }
  .woocommerce-ordering { justify-content: stretch; }
}

/* Very small phones */
@media (max-width: 380px) {
  .do-cat-pill { padding: 8px 18px; letter-spacing: 0.12em; }
  .btn { padding: 16px 32px; }
}

/* Prevent any horizontal scroll from wide media/iframes */
.do-map, .editorial-image, .service-panel, img { max-width: 100%; }

/* Infinite scroll status line under the shop / category grid */
.do-shop-loop__sentinel { height: 1px; }
.do-shop-loop__status { text-align: center; padding: 32px 0; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.05em; color: var(--text-light); }

/* Breadcrumbs — light on the hero's dark overlay, muted dark on plain white (single product) */
.rank-math-breadcrumb p { margin: 0 0 16px; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.05em; }
.do-page-hero .rank-math-breadcrumb a,
.do-page-hero .rank-math-breadcrumb .separator { color: rgba(255,255,255,0.65); }
.do-page-hero .rank-math-breadcrumb .last { color: rgba(255,255,255,0.9); }
.do-page-hero .rank-math-breadcrumb a:hover { color: var(--white); }
.do-woo-breadcrumb { padding-top: clamp(20px,3vw,32px); }
.do-woo-breadcrumb .rank-math-breadcrumb a,
.do-woo-breadcrumb .rank-math-breadcrumb .separator { color: var(--text-light); }
.do-woo-breadcrumb .rank-math-breadcrumb .last { color: var(--text-mid); }
.do-woo-breadcrumb .rank-math-breadcrumb a:hover { color: var(--gold-dark); }

/* ==========================================================================
   CRO sweep (July 2026): delivery, add-ons, trust, sticky buy bar
   ========================================================================== */

/* Hero: keep two CTAs but give "Order Flowers" sole primary weight. On the
   dark hero the secondary reads as a quiet outline until hovered. */
.hero__cta--secondary { border-color: rgba(255,255,255,0.5); color: rgba(255,255,255,0.9); background: transparent; }
.hero__cta--secondary:hover { background: rgba(255,255,255,0.12); border-color: var(--white); color: var(--white); }

/* Postcode checker — sits under the add-to-cart on the product page. */
.do-pcheck { margin: 22px 0 4px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 4px; background: var(--offwhite); }
.do-pcheck__hd { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 500; letter-spacing: 0.02em; color: var(--text); }
.do-pcheck__hd svg { color: var(--gold-dark); }
.do-pcheck__note { margin: 8px 0 12px; font-family: var(--sans); font-size: 0.82rem; line-height: 1.5; color: var(--text-light); }
.do-pcheck__form { display: flex; gap: 8px; }
.do-pcheck__input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--border); border-radius: 3px; font-family: var(--sans); font-size: 0.9rem; text-transform: uppercase; background: var(--white); }
.do-pcheck__input:focus { outline: none; border-color: var(--gold); }
.do-pcheck__btn { padding: 11px 20px; border: 1px solid var(--text); background: var(--text); color: var(--white); font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; border-radius: 3px; transition: background 0.3s var(--ease); }
.do-pcheck__btn:hover { background: var(--gold); border-color: var(--gold); }
.do-pcheck__result { margin: 12px 0 0; font-family: var(--sans); font-size: 0.85rem; line-height: 1.5; min-height: 1em; }
.do-pcheck__result--yes { color: #2E7D58; }
.do-pcheck__result--no { color: var(--text-mid); }

/* Cutoff countdown — above the price in the product summary. */
.do-countdown { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 14px; padding: 7px 13px; border-radius: 100px; background: rgba(201,169,110,0.12); color: var(--gold-dark); font-family: var(--sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; }
.do-countdown--closed { background: var(--cream); color: var(--text-mid); }
.do-countdown strong { font-variant-numeric: tabular-nums; }

/* Checkout: delivery date block. */
.do-delivery-date { margin: 26px 0 10px; padding-top: 24px; border-top: 1px solid var(--border); }
.do-delivery-date h3 { font-family: var(--serif); font-size: 1.5rem; margin: 0 0 6px; }
.do-delivery-date__intro { font-family: var(--sans); font-size: 0.85rem; color: var(--text-light); margin: 0 0 14px; }
.do-delivery-date input[type="date"] { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 3px; font-family: var(--sans); font-size: 0.95rem; background: var(--white); }

/* Product add-ons (order bumps). */
.do-addons { margin: 22px 0; padding: 18px 20px; border: 1px solid var(--border); border-radius: 4px; }
.do-addons__hd { font-family: var(--serif); font-size: 1.3rem; margin-bottom: 12px; }
.do-addons__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.do-addons__label { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 8px; border: 1px solid var(--border-light); border-radius: 4px; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.do-addons__label:hover { border-color: var(--gold-light); }
.do-addons__cb { width: 18px; height: 18px; accent-color: var(--gold-dark); flex: none; }
.do-addons__cb:checked ~ .do-addons__meta .do-addons__name { color: var(--gold-dark); }
.do-addons__thumb { flex: none; width: 46px; height: 46px; border-radius: 3px; overflow: hidden; background: var(--cream); }
.do-addons__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.do-addons__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.do-addons__name { font-family: var(--sans); font-weight: 500; font-size: 0.9rem; color: var(--text); }
.do-addons__desc { font-family: var(--sans); font-size: 0.76rem; color: var(--text-light); }
.do-addons__price { font-family: var(--serif); font-size: 1.15rem; color: var(--text); white-space: nowrap; }

/* Trust badges under add-to-cart. */
.do-trust { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.do-trust__item { display: flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 0.82rem; line-height: 1.35; color: var(--text-mid); }
.do-trust__item svg { color: var(--gold-dark); flex: none; }

/* Cart / checkout reassurance line. */
.do-reassure { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 20px 0; padding: 16px 0; border-top: 1px solid var(--border); font-family: var(--sans); font-size: 0.82rem; color: var(--text-mid); }
.do-reassure__item { display: inline-flex; align-items: center; gap: 7px; }
.do-reassure__item svg { color: #2E7D58; flex: none; }
.do-reassure__call svg { color: var(--gold-dark); }
.do-reassure__call a { color: var(--text); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

/* Sticky mobile buy bar (single product) — desktop hides it. */
.do-sticky-buy { display: none; }
@media (max-width: 782px) {
  .do-sticky-buy {
    display: flex; align-items: center; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 290;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--white); border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(20,20,20,0.08);
  }
  .do-sticky-buy__call { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-decoration: none; color: var(--gold-dark); font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; flex: none; width: 46px; }
  .do-sticky-buy__price { flex: 1; min-width: 0; font-family: var(--serif); font-size: 1.25rem; line-height: 1.1; color: var(--text); }
  .do-sticky-buy__price del { color: var(--text-light); font-size: 0.85em; }
  .do-sticky-buy__price ins { text-decoration: none; }
  .do-sticky-buy__add { flex: none; padding: 13px 22px; background: var(--text); color: var(--white); border-color: var(--text); font-size: 0.72rem; }
  .do-sticky-buy__add:hover { background: var(--gold); border-color: var(--gold); }
  /* Lift the WhatsApp float clear of the sticky bar; Book Now tab is mid-right so it's unaffected. */
  .single-product .wa-float { bottom: 84px; }
  /* The Trustpilot plugin pins a full-width bar to the very bottom (z-index
     1000) that would sit on top of the Add-to-Basket bar. On product pages the
     buy bar wins — hide the floating Trustpilot bar here only; it still shows
     on every other page. */
  .single-product #trustpilot-widget-trustbox-0-wrapper { display: none !important; }
}

/* Sympathy express path (funeral page) — calm, direct call/browse band. */
.do-sympathy-express { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin: 8px 0 40px; padding: 26px 32px; background: var(--cream); border-radius: 4px; border: 1px solid var(--border-light); }
.do-sympathy-express__eyebrow { display: block; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 6px; }
.do-sympathy-express__text p { font-family: var(--serif); font-size: 1.25rem; line-height: 1.4; color: var(--text-mid); margin: 0; max-width: 46ch; }
.do-sympathy-express__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 600px) { .do-sympathy-express { padding: 22px; } .do-sympathy-express__actions .btn { flex: 1; text-align: center; } }

/* ==========================================================================
   Digital gift cards
   ========================================================================== */

/* Product-page purchase form */
.do-gc-form { margin: 4px 0 22px; }
.do-gc-form__field { margin: 0 0 16px; }
.do-gc-form__label, .do-gc-form__field > label { display: block; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mid); margin-bottom: 8px; }
.do-gc-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.do-gc-form input[type="text"], .do-gc-form input[type="email"], .do-gc-form input[type="number"], .do-gc-form textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: 3px; font-family: var(--sans); font-size: 0.92rem; background: var(--white); }
.do-gc-form input:focus, .do-gc-form textarea:focus { outline: none; border-color: var(--gold); }
.do-gc-amounts { display: flex; flex-wrap: wrap; gap: 8px; }
.do-gc-amount { position: relative; }
.do-gc-amount input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.do-gc-amount span { display: inline-flex; align-items: center; justify-content: center; min-width: 66px; padding: 11px 16px; border: 1px solid var(--border); border-radius: 3px; font-family: var(--serif); font-size: 1.1rem; color: var(--text); cursor: pointer; transition: all 0.2s var(--ease); }
.do-gc-amount--custom span { font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.04em; }
.do-gc-amount input:checked + span { border-color: var(--gold-dark); background: var(--gold-dark); color: var(--white); }
.do-gc-custom { display: flex; align-items: center; gap: 6px; margin-top: 10px; max-width: 220px; }
.do-gc-custom[hidden] { display: none; }
.do-gc-custom__prefix { font-family: var(--serif); font-size: 1.2rem; color: var(--text-mid); }
.do-gc-custom--invalid input { border-color: #b3261e; box-shadow: 0 0 0 2px rgba(179,38,30,0.12); }
.do-gc-custom__error { margin: 8px 0 0; font-family: var(--sans); font-size: 0.82rem; line-height: 1.4; color: #b3261e; max-width: 340px; }
.do-gc-custom__error[hidden] { display: none; }

/* The gift card celebration page */
.do-gc-page { position: relative; overflow: hidden; padding: clamp(40px,8vw,90px) 20px; background: linear-gradient(160deg, var(--offwhite), var(--cream)); text-align: center; min-height: 70vh; }
.do-gc-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.do-gc-page__inner { position: relative; z-index: 2; max-width: 560px; margin: 0 auto; }
.do-gc-page__eyebrow { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dark); margin: 0 0 6px; }
.do-gc-page__title { font-family: var(--serif); font-size: clamp(2rem,6vw,3rem); font-weight: 400; margin: 0 0 30px; }

/* Credit-card look */
.do-gc-card { position: relative; width: min(100%, 420px); aspect-ratio: 1.586; margin: 0 auto 30px; padding: clamp(20px,5vw,28px); border-radius: 16px; color: #fff; text-align: left; overflow: hidden; box-shadow: 0 24px 60px rgba(20,20,20,0.32); background: linear-gradient(135deg, #1c1c1c 0%, #2c2a26 40%, #4a3f28 75%, #C9A96E 140%); }
.do-gc-card__shine { position: absolute; top: -60%; left: -20%; width: 80%; height: 220%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent); transform: rotate(18deg); }
.do-gc-card__top { display: flex; justify-content: space-between; align-items: baseline; }
.do-gc-card__brand { font-family: var(--serif); font-size: 1.4rem; letter-spacing: 0.02em; }
.do-gc-card__type { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-light); }
.do-gc-card__chip { width: 44px; height: 32px; margin: clamp(14px,4vw,26px) 0 clamp(10px,3vw,18px); border-radius: 6px; background: linear-gradient(135deg, #E4C98A, #B8963F); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); }
.do-gc-card__chip::after { content: ""; position: absolute; }
.do-gc-card__amount { font-family: var(--serif); font-size: clamp(1.8rem,7vw,2.6rem); line-height: 1; }
.do-gc-card__amount .woocommerce-Price-amount { color: #fff; }
.do-gc-card__code { font-family: var(--sans); font-size: clamp(0.85rem,3.5vw,1.05rem); letter-spacing: 0.28em; margin-top: 10px; color: rgba(255,255,255,0.9); }
.do-gc-card__bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: clamp(12px,3vw,20px); font-family: var(--sans); font-size: 0.86rem; }
.do-gc-card__lbl { display: block; font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 3px; }

.do-gc-page__message { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem,4vw,1.5rem); line-height: 1.5; color: var(--text-mid); margin: 0 auto 34px; max-width: 40ch; border: 0; }
.do-gc-page__redeem p { font-family: var(--sans); font-size: 0.85rem; color: var(--text-light); margin: 0 0 10px; }
.do-gc-page__codebox { margin: 0 auto 22px; }
.do-gc-page__codebox code { display: inline-block; padding: 12px 20px; background: var(--white); border: 1px dashed var(--gold-dark); border-radius: 4px; font-family: var(--sans); font-size: 1.05rem; letter-spacing: 0.12em; color: var(--text); }

/* Order-received gift-card links */
.do-gc-thankyou { margin: 30px 0; padding: 24px; border: 1px solid var(--border); border-radius: 6px; background: var(--offwhite); }
.do-gc-thankyou h2 { font-family: var(--serif); margin: 0 0 8px; }
.do-gc-links { list-style: none; margin: 12px 0 0; padding: 0; }
.do-gc-links li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--border-light); font-family: var(--sans); font-size: 0.9rem; }
.do-gc-links__amt { font-family: var(--serif); font-size: 1.1rem; }

@media (max-width: 600px) { .do-gc-form__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Product page: related-products heading + testimonials spacing tweaks
   ========================================================================== */

/* "Related products" heading was inheriting the full-size h2 (clamp up to
   4.5rem) — bring it down to a section-heading scale. */
.products.related > h2,
.products.upsells > h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 32px; }

/* Give the related-products row breathing room before the off-white "What Our
   Clients Say" band, which previously started flush against the prices. */
.products.related,
.products.upsells { margin-bottom: clamp(44px, 6vw, 80px); }

/* Trim the testimonials section's top padding to ~60% of the global section
   pad — it read as too much everywhere the band appears (home + products). */
.section.do-testimonials { padding-top: calc(var(--section-pad) * 0.6); }

/* ==========================================================================
   Additional Notes field (code-snippet #5) — cleaner layout
   ========================================================================== */

/* The form is a flex row (notes | quantity | add-to-basket). The notes box was
   crammed inline to the left of the quantity + button, looking broken. Give it
   its own full-width row above them, and calm the textarea down. */
.single-product form.cart .do-form-group { flex: 1 0 100%; margin: 0 0 16px; }
.single-product form.cart .do-form-group label { margin-bottom: 8px; }
.single-product form.cart .do-form-group textarea { min-height: 72px; padding: 12px 14px; border-radius: 3px; }
.single-product form.cart .do-form-group textarea::placeholder { color: var(--text-light); }

/* The gift card has its own message field — a second generic notes box there is
   redundant, so hide it on that product. */
.postid-3027 form.cart .do-form-group { display: none; }

/* "Most Trending" badge — gold accent to stand apart from the charcoal "New"
   badge; shares .do-badge positioning. */
.do-badge--trending { background: var(--gold); color: var(--white); }

/* "Most Trending" pill above the title on the single product page. */
.do-trend-pill {
  display: inline-block; margin: 0 0 12px; padding: 5px 14px; border-radius: 100px;
  background: var(--gold); color: var(--white);
  font-family: var(--sans); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
}

/* ==========================================================================
   Live AJAX search results (search drawer)
   ========================================================================== */
.search-drawer__results { margin-top: 20px; display: flex; flex-direction: column; }
.search-drawer__status { font-family: var(--sans); font-size: 0.85rem; color: var(--text-light); padding: 12px 2px; }
.search-result { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-bottom: 1px solid var(--border-light); text-decoration: none; transition: background 0.2s var(--ease); }
.search-result:hover { background: var(--offwhite); }
.search-result__img { flex: none; width: 56px; height: 56px; border-radius: 3px; overflow: hidden; background: var(--cream); }
.search-result__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.search-result__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.search-result__name { font-family: var(--serif); font-size: 1.15rem; color: var(--text); line-height: 1.2; }
.search-result__price { font-family: var(--sans); font-size: 0.85rem; color: var(--text-mid); }
.search-result__price .amount { color: var(--text-mid); }

/* ==========================================================================
   Gift card homepage section (copy + live-preview card + buy form)
   ========================================================================== */
.do-gc-section__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.do-gc-section__intro > .label { margin-bottom: 16px; }
.do-gc-section__intro h2 { margin: 0 0 18px; }
.do-gc-section__intro > p { font-family: var(--sans); font-size: 0.95rem; line-height: 1.7; color: var(--text-mid); max-width: 46ch; margin: 0 0 28px; }
.do-gc-buy .do-gc-form { margin: 0; }
.do-gc-buy__submit { width: 100%; margin-top: 22px; }

/* Preview column: the live card sits centred, message beneath. */
.do-gc-section__preview { display: flex; flex-direction: column; align-items: center; }
.do-gc-card--preview { margin: 0 auto; box-shadow: 0 26px 60px rgba(20,20,20,0.28); }
.do-gc-preview__message { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.5; color: var(--text-mid); text-align: center; margin: 24px auto 0; max-width: 34ch; border: 0; }

@media (max-width: 860px) {
  .do-gc-section__grid { grid-template-columns: 1fr; }
  /* Preview above the form on mobile so shoppers see what they're personalising. */
  .do-gc-section__preview { order: -1; margin-bottom: 8px; }
}

/* Gift card homepage CTA + landing page */
.do-gc-section__cta { margin-top: 6px; }
/* Clear sticky announcement + nav, without the old double-tall hero gap. */
.do-gc-landing {
  padding-top: clamp(88px, 10vw, 120px);
  padding-bottom: clamp(48px, 7vw, 88px);
}
.do-gc-landing__lead { font-family: var(--sans); font-size: 1rem; line-height: 1.7; color: var(--text-mid); max-width: 60ch; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }

/* Gift card: the To/From value sits on the line below its label and was being
   clipped at the card's fixed-height bottom edge (so it looked like it wasn't
   updating). Lay the card out as a column, trim the chip margins, and anchor
   the To/From row to the bottom so its value stays inside the card. */
.do-gc-card { display: flex; flex-direction: column; }
.do-gc-card__chip { margin: clamp(10px,3vw,16px) 0 clamp(8px,2.2vw,12px); }
.do-gc-card__bottom { margin-top: auto; }

/* Gift-card landing heading was inheriting the huge global h1 (up to 8rem).
   Bring it down to a calm section-heading scale. */
.do-gc-landing .do-heading h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; }