@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('fonts.css?v=20260817');

:root {
  --color-black: #0d0d0d;
  --color-white: #ffffff;
  --color-red: #e31e24;
  --color-grey-placeholder: #d9d9d9;
  --font-heading: 'Trivial', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --container-width: 1728px;
  --card-radius: 20px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-black);
  background: var(--color-white);
  line-height: 1.5;
}

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

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

ul {
  list-style: none;
}

/* A display rule in a component beats the browser's own [hidden] styling, so
   a grid or flex container stays on screen when script hides it. Settle it
   once here rather than per component. */
[hidden] {
  display: none !important;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 96px);
}

/* ─── Buttons ─────────────────────────────────────────────────── */

.btn-pill,
.btn-rect {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  border: 2px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-align: center;
}

.btn-pill {
  padding: 13px 38px;
  border-radius: 999px;
  font-size: 1.15rem;
}

.btn-rect {
  padding: 16px 90px;
  border-radius: 14px;
  font-size: 1.3rem;
}

.btn-white {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}
.btn-white:hover {
  background: transparent;
  color: var(--color-white);
}

.btn-black {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.btn-black:hover {
  background: transparent;
  color: var(--color-black);
}

/* ─── Social icons ────────────────────────────────────────────── */

.social-icons {
  display: flex;
  align-items: center;
  gap: 16px;
}

.social-icons a {
  display: block;
  transition: opacity 0.2s ease;
}
.social-icons a:hover {
  opacity: 0.75;
}
.social-icons svg {
  width: 38px;
  height: 38px;
  fill: currentColor;
  display: block;
}

/* ─── Header ──────────────────────────────────────────────────── */

.site-header {
  background: var(--color-black);
  color: var(--color-white);
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  row-gap: 10px;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 18px;
}

.site-header .logo {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
}

.site-header .logo img {
  height: 80px;
  width: auto;
}

.site-header .social-icons {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.main-nav {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 44px;
}

.main-nav a {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-white);
  transition: color 0.2s ease;
}

.main-nav a:hover {
  color: var(--color-red);
}

.main-nav a.active {
  color: var(--color-red);
}

.site-header .view-order {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
}

/* ─── Hero ────────────────────────────────────────────────────── */

.hero {
  position: relative;
  height: clamp(480px, 45.8vw, 880px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Black, and only black. The banner used to cycle photographs of the range,
     which fought with the logo sitting on top of it; the products have the
     whole page below to speak for themselves. */
  background: var(--color-black);
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

/* ── The logo, in two layers ───────────────────────────────────
   Both are cut from the same artwork on the same canvas, so stacking them
   edge to edge rebuilds the logo exactly. The wordmark is the one in normal
   flow: it gives the box its height, and the crosshair is laid over it. That
   way nothing depends on aspect-ratio support, and the two can never drift
   apart at any width. */
.hero-logo {
  position: relative;
  width: min(40vw, 770px);
  min-width: 300px;
}

.hero-logo__word,
.hero-logo__target {
  display: block;
  width: 100%;
  height: auto;
}

/* The glow is positioned and the wordmark is not, which by itself would have
   the glow painted over the letters and leave them hazy. Saying where each
   layer belongs puts the light back behind the logo where it was meant to be. */
.hero-logo__word {
  position: relative;
  z-index: 1;
}

.hero-logo__target {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  /* the red dot at the centre of the crosshair, measured from the artwork,
     so the breath grows outwards from the sight rather than from the corner */
  transform-origin: 26.8% 49.9%;
  animation: rifle-target-pulse 3.6s ease-in-out infinite;
  will-change: transform;
}

/* A red halo behind the crosshair that swells with it. Kept as its own
   element because animating a glow on the image itself repaints the whole
   logo every frame; this way both layers only ever move the compositor. */
.hero-logo__glow {
  position: absolute;
  left: 26.8%;
  top: 49.9%;
  width: 46%;
  aspect-ratio: 1;
  z-index: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* A warm core fading to nothing well inside its own box, so this reads as
     light behind the sight rather than as a maroon disc laid over the black.
     Flat brand red at full strength does the second, which is why the middle
     of the gradient is lifted towards white. */
  background: radial-gradient(circle,
              rgba(255, 70, 60, 0.26) 0%,
              rgba(227, 30, 36, 0.10) 40%,
              rgba(227, 30, 36, 0) 72%);
  opacity: 0;
  animation: rifle-glow-pulse 3.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes rifle-target-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.055); }
}

@keyframes rifle-glow-pulse {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Somebody who has asked for less movement gets the logo standing still. */
@media (prefers-reduced-motion: reduce) {
  .hero-logo__target,
  .hero-logo__glow {
    animation: none;
  }
  .hero-logo__glow {
    opacity: 0;
  }
}

/* ─── Section headings ────────────────────────────────────────── */

.section {
  padding: 60px 0;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.8rem, 2.8vw, 3.4rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 44px;
  color: var(--color-black);
}

.section-heading .heading-icon {
  width: 1.85em;
  height: auto;
  flex-shrink: 0;
}

/* ─── Product / collection cards ──────────────────────────────── */

.card-carousel {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 28px);
}

.carousel-arrow {
  flex-shrink: 0;
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-black);
  transition: opacity 0.2s ease;
}
.carousel-arrow:hover {
  opacity: 0.6;
}

.carousel-arrow svg {
  width: 46px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-row {
  flex: 1;
  display: flex;
  gap: 40px;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.card-row .product-card {
  flex: 1 0 calc(25% - 30px);
  min-width: 230px;
}

.product-card {
  position: relative;
  aspect-ratio: 390 / 508;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.32);
}

.card-image {
  position: absolute;
  inset: 0;
  background: var(--color-grey-placeholder) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.card-overlay-label {
  position: relative;
  z-index: 1;
  color: var(--color-white);
  font-weight: 600;
  font-size: 2rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  text-align: center;
  padding: 0 16px;
  margin-bottom: 15%;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.product-card:hover .card-image::after,
.product-card:focus-within .card-image::after,
.product-card:hover .card-overlay-label,
.product-card:focus-within .card-overlay-label {
  opacity: 1;
}

.card-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-black);
  color: var(--color-white);
  border-radius: var(--card-radius);
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  padding: 20px 10px;
  transition: background-color 0.2s ease;
}

.card-footer:hover {
  background: var(--color-red);
}

.view-all-wrap {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* ─── Collection grid (Our Products + Downloads) ──────────────── */

.downloads-section,
.products-section {
  padding: 8px 0 40px;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 40px;
  row-gap: 44px;
}

.collection-item {
  display: flex;
  flex-direction: column;
}

.collection-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-black);
  margin-bottom: 14px;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.collection-card {
  position: relative;
  display: block;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28);
}

.collection-card .card-image {
  position: absolute;
  inset: 0;
  background: var(--color-grey-placeholder) center / cover no-repeat;
}

/* Downloads variant: square card with a black "Download" bar */
.collection-card--download {
  aspect-ratio: 1 / 1;
}

.collection-card--download .card-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-black);
  color: var(--color-white);
  border-radius: var(--card-radius);
  text-align: center;
  font-size: 1.15rem;
  font-weight: 600;
  padding: 16px 10px;
  transition: background-color 0.2s ease;
}

.collection-card--download:hover .card-footer {
  background: var(--color-red);
}

/* Products variant: portrait card, "View Products" reveals on hover */
.collection-card--product {
  aspect-ratio: 5 / 7;
}

.collection-card--product .card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: var(--color-white);
  font-size: 1.6rem;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.collection-card--product:hover .card-overlay,
.collection-card--product:focus-visible .card-overlay {
  opacity: 1;
}

/* ─── Collection product rows (single collection page) ────────── */

.collection-heading {
  padding: 44px 0 40px;
}

.product-rows {
  display: flex;
  flex-direction: column;
}

.product-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(420px, 34vw, 560px);
}

.product-row__media {
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

.product-row__media img {
  max-width: 100%;
  max-height: 380px;
  width: auto;
  object-fit: contain;
}

.product-row__media.no-image {
  color: #9a9a9a;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-row__info {
  background: #d6d6d6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px clamp(32px, 5vw, 96px);
}

.product-row__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.2vw, 2.3rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--color-black);
  margin-bottom: 24px;
}

.product-row__desc {
  font-size: 0.98rem;
  line-height: 1.7;
  color: #2a2a2a;
  max-width: 34rem;
  margin-bottom: 36px;
}

.product-row__info .btn-rect {
  align-self: flex-start;
  padding: 15px 48px;
  font-size: 1.15rem;
}

/* Alternate the grey text panel to the left on every second row. */
.product-row:nth-child(even) .product-row__media {
  order: 2;
}
.product-row:nth-child(even) .product-row__info {
  order: 1;
}

.collection-more-wrap {
  display: flex;
  justify-content: center;
  padding: 56px 0 8px;
}

.collection-more-wrap[hidden] {
  display: none;
}

/* ─── Product page (configurator) ─────────────────────────────── */

.product-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding: 56px 0 0;
}

.product-gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 32px);
  padding: 24px clamp(16px, 3vw, 48px);
}

.product-gallery__stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: clamp(320px, 34vw, 520px);
}

/* Shown when the catalogue lists a colourway but only pictures another one. */
.gallery-note {
  margin: 0;
  color: #8a8a8a;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-align: center;
}

.product-gallery__stage img {
  max-width: 100%;
  max-height: clamp(320px, 34vw, 520px);
  width: auto;
  object-fit: contain;
}

.product-gallery__stage.no-image {
  color: #9a9a9a;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gallery-arrow {
  flex-shrink: 0;
  width: 52px;
  background: none;
  border: none;
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.gallery-arrow:hover { opacity: 0.6; }
.gallery-arrow[hidden] { display: none; }

.gallery-arrow svg {
  width: 46px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-info {
  background: #d6d6d6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 5vw, 72px) clamp(32px, 5vw, 80px);
}

.product-info__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2.5rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--color-black);
  margin-bottom: 24px;
}

.product-info__desc {
  font-size: 1rem;
  line-height: 1.7;
  color: #2a2a2a;
  max-width: 34rem;
  margin-bottom: 28px;
}

.product-field { margin-bottom: 22px; }

.product-field__label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 10px;
}

.swatches { display: flex; flex-wrap: wrap; gap: 12px; }

.swatch {
  width: 44px;
  height: 40px;
  border-radius: 4px;
  border: 2px solid transparent;
  outline: 1px solid rgba(0, 0, 0, 0.25);
  outline-offset: -1px;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.swatch:hover { transform: translateY(-2px); }
.swatch[aria-pressed="true"] {
  border-color: var(--color-black);
  outline-color: var(--color-black);
}

.size-options { display: flex; flex-wrap: wrap; gap: 10px; }

.size-option {
  min-width: 54px;
  padding: 10px 14px;
  border-radius: 6px;
  border: 2px solid var(--color-black);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-black);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.size-option:hover { background: rgba(0, 0, 0, 0.08); }
.size-option[aria-pressed="true"] {
  background: var(--color-black);
  color: var(--color-white);
}

.qty-input {
  display: inline-flex;
  align-items: center;
  background: var(--color-white);
  border-radius: 4px;
  padding: 6px 10px;
  gap: 8px;
}

.qty-input input {
  width: 52px;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-black);
  -moz-appearance: textfield;
}
.qty-input input::-webkit-outer-spin-button,
.qty-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.qty-steppers { display: flex; flex-direction: column; gap: 2px; }

.qty-steppers button {
  width: 20px;
  height: 15px;
  border: none;
  background: none;
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  font-size: 0.7rem;
}
.qty-steppers button:hover { opacity: 0.6; }

.product-info .btn-rect { align-self: flex-start; margin-top: 8px; }

.add-feedback {
  margin-top: 14px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1c6b32;
  min-height: 1.2em;
}

/* Similar products reuse the collection card look */
.similar-section { padding: 72px 0 24px; }

.similar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

/* ─── About / brand band ──────────────────────────────────────── */

.about-band {
  background: var(--color-black);
  color: var(--color-white);
  padding: 64px 0;
}

.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-logo {
  width: 92%;
  max-width: 560px;
}

.about-text {
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.55;
  color: #f5f5f5;
  max-width: 680px;
}

/* ─── Contact ──────────────────────────────────────────────────── */

.contact-heading-wrap {
  padding: 0 0 56px;
}

/* Standalone Contact page: heading sits directly under the header,
   so the white band needs balanced top/bottom padding. */
.contact-heading-wrap.standalone {
  padding: 68px 0;
}

.contact-band {
  background: var(--color-black);
  color: var(--color-white);
  padding: 72px 0 96px;
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

.contact-logo {
  width: min(100%, 420px);
  margin-bottom: 56px;
}

.contact-info p {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 2.4rem;
  color: var(--color-white);
}

.contact-info a:hover {
  color: var(--color-red);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 580px;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 1.15rem;
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 15px 16px;
  border-radius: 10px;
  border: none;
  background: var(--color-white);
  color: var(--color-black);
}

.contact-form textarea {
  resize: vertical;
  min-height: 215px;
  border-radius: 12px;
}

.contact-form .btn-submit {
  align-self: flex-start;
  margin-top: 10px;
  padding: 14px 52px;
  border-radius: 10px;
  font-size: 1.3rem;
}

/* ─── Footer ──────────────────────────────────────────────────── */

.site-footer {
  background: var(--color-black);
  color: var(--color-white);
  margin-top: 92px;
  padding: 56px 0 26px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
}

.footer-logo img {
  width: 260px;
  height: auto;
}

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

.footer-social h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.footer-social .social-icons {
  justify-content: center;
  gap: 20px;
}

.footer-social .social-icons svg {
  width: 54px;
  height: 54px;
}

.footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
}

.footer-nav a {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-white);
}

.footer-nav a:hover {
  color: var(--color-red);
}

.footer-bottom {
  text-align: center;
  margin-top: 48px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-white);
}

/* ─── Responsive ──────────────────────────────────────────────── */

@media (max-width: 1200px) {
  .contact-info p {
    font-size: 1.25rem;
  }
  .about-text {
    font-size: 1.15rem;
  }
}

@media (max-width: 1024px) {
  .collection-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 28px;
  }
  .card-row .product-card {
    flex-basis: calc(50% - 20px);
  }
  .about-inner,
  .contact-inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .about-logo {
    margin: 0 auto;
  }
  .main-nav ul {
    gap: 28px;
  }
  .main-nav a {
    font-size: 1.05rem;
  }
  .site-header .logo img {
    height: 64px;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 36px;
  }
  .footer-nav ul {
    align-items: center;
  }
}

@media (max-width: 820px) {
  .hero-logo {
    width: 70vw;
  }
  .collection-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 32px;
  }
  .collection-title {
    font-size: 0.92rem;
    min-height: 0;
    margin-bottom: 10px;
  }
  .product-main {
    grid-template-columns: 1fr;
    padding-top: 32px;
  }
  .similar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .product-row {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .product-row__media {
    order: 1 !important;
    padding: 40px;
    min-height: 300px;
  }
  .product-row__info {
    order: 2 !important;
    padding: 40px clamp(24px, 6vw, 48px);
  }
  .card-row .product-card {
    flex-basis: 100%;
  }
  .carousel-arrow {
    width: 36px;
  }
  .btn-rect {
    padding: 14px 60px;
    font-size: 1.15rem;
  }
  .contact-form .btn-submit {
    align-self: stretch;
  }
  .site-footer {
    margin-top: 56px;
  }
}

/* ─── Policies page ───────────────────────────────────────────── */

.policy-hero {
  background: var(--color-black);
  color: var(--color-white);
  text-align: center;
  padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 104px);
}

.policy-hero__logo {
  width: clamp(150px, 18vw, 230px);
  margin: 0 auto clamp(22px, 3vw, 36px);
}

.policy-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.policy-hero__rule {
  width: 82px;
  height: 4px;
  background: var(--color-red);
  margin: clamp(18px, 2.4vw, 26px) auto;
  border-radius: 2px;
}

.policy-hero p {
  max-width: 720px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
}

.policy-hero__meta {
  margin-top: 22px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.policy-main {
  padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 8vw, 104px);
}

.policy-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.policy-toc {
  position: sticky;
  top: 28px;
  border-left: 3px solid var(--color-red);
  padding-left: 20px;
}

.policy-toc h2 {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin-bottom: 14px;
}

.policy-toc a {
  display: block;
  padding: 6px 0;
  font-size: 0.92rem;
  color: #3d3d3d;
  transition: color 0.18s ease;
}
.policy-toc a:hover,
.policy-toc a:focus {
  color: var(--color-red);
}

.policy-body {
  min-width: 0;          /* let wide tables scroll instead of stretching the grid */
  max-width: 900px;      /* keep the reading line comfortable on wide screens */
}

.policy-section + .policy-section {
  margin-top: clamp(34px, 4.5vw, 56px);
}

.policy-section h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  letter-spacing: 0.01em;
  margin-bottom: 14px;
  scroll-margin-top: 24px;
}

.policy-section h2 span {
  color: var(--color-red);
  margin-right: 10px;
}

.policy-section h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 22px 0 8px;
}

.policy-section p,
.policy-section li {
  color: #333;
  font-size: clamp(0.94rem, 1.05vw, 1rem);
}

.policy-section p + p {
  margin-top: 12px;
}

.policy-section ul {
  margin: 12px 0 0;
  padding-left: 0;
}

.policy-section ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
}

.policy-section ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-red);
}

.policy-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 0.93rem;
}

.policy-table th,
.policy-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid #e4e4e4;
  vertical-align: top;
}

.policy-table th {
  background: #f5f5f5;
  font-weight: 600;
  white-space: nowrap;
}

.policy-table-wrap {
  overflow-x: auto;
}

.policy-callout {
  background: #f5f5f5;
  border-left: 4px solid var(--color-red);
  border-radius: 0 12px 12px 0;
  padding: clamp(20px, 2.6vw, 30px);
  margin-top: 20px;
}

.policy-callout p + p {
  margin-top: 10px;
}

.policy-contact {
  background: var(--color-black);
  color: var(--color-white);
  border-radius: var(--card-radius);
  padding: clamp(28px, 4vw, 48px);
  margin-top: clamp(40px, 5vw, 64px);
}

.policy-contact h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  margin-bottom: 12px;
}

.policy-contact p {
  color: rgba(255, 255, 255, 0.78);
  max-width: 640px;
}

.policy-contact a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.policy-contact .btn-rect {
  margin-top: 22px;
  background: var(--color-white);
  color: var(--color-black);
}

/* Placeholders Rifle Printing still needs to fill in before publishing. */
@media (max-width: 900px) {
  .policy-layout {
    grid-template-columns: 1fr;
  }
  .policy-toc {
    position: static;
    margin-bottom: 8px;
  }
}

/* ─── Product search ──────────────────────────────────────────── */

.search-wrap {
  max-width: 720px;
  margin: 0 auto clamp(28px, 4vw, 48px);
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.search-field svg {
  position: absolute;
  left: 20px;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #8a8a8a;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.search-field input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.02rem;
  padding: 16px 52px 16px 54px;
  border: 2px solid #ddd;
  border-radius: 999px;
  background: var(--color-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-field input:focus {
  outline: none;
  border-color: var(--color-black);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.09);
}

.search-clear {
  position: absolute;
  right: 14px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: #ececec;
  color: #555;
  font-size: 1.05rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.search-clear:hover {
  background: var(--color-red);
  color: var(--color-white);
}

.search-summary {
  margin-top: 12px;
  text-align: center;
  font-size: 0.9rem;
  color: #6d6d6d;
}

.search-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.search-hit {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  background: var(--color-white);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.search-hit:hover,
.search-hit:focus {
  border-color: var(--color-black);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.search-hit__img {
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  border-radius: 10px;
  background: #fff center / contain no-repeat;
  border: 1px solid #efefef;
}
.search-hit__img--none {
  background: var(--color-grey-placeholder);
}

.search-hit__text {
  min-width: 0;
}

.search-hit__name {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;
}

.search-hit__meta {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  color: #7c7c7c;
}

/* While a search is running, the browse grid steps out of the way. */
body.searching .search-hidden-when-searching {
  display: none;
}

@media (max-width: 560px) {
  .search-results {
    grid-template-columns: 1fr;
  }
}

/* Supplier product code — shown so customers can quote it back to us. */
.product-code {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #7c7c7c;
}

.product-info .product-code {
  margin: -4px 0 14px;
}

.product-row__info .product-code {
  margin: 4px 0 10px;
}

/* ─── Header dropdown ─────────────────────────────────────────── */

.main-nav .has-dropdown {
  position: relative;
}

.main-nav .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-white);
  transition: color 0.2s ease;
}

.main-nav .dropdown-toggle:hover,
.main-nav .dropdown-toggle.active {
  color: var(--color-red);
}

.main-nav .caret {
  width: 0.7em;
  height: 0.7em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.main-nav .has-dropdown.open .caret {
  transform: rotate(180deg);
}

.main-nav .dropdown {
  /* .main-nav ul is a flex row for the top-level links; the panel is a list. */
  display: block;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 232px;
  background: var(--color-black);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 60;
}

/* A gap between the button and the panel would drop the hover, so bridge it. */
.main-nav .dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}

.main-nav .has-dropdown:hover .dropdown,
.main-nav .has-dropdown.open .dropdown,
.main-nav .has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.main-nav .dropdown a {
  display: block;
  padding: 11px 16px;
  border-radius: 9px;
  font-size: 1.02rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.main-nav .dropdown a:hover,
.main-nav .dropdown a:focus-visible,
.main-nav .dropdown a.active {
  background: var(--color-red);
  color: var(--color-white);
}

/* ─── Wedding range page ──────────────────────────────────────── */

.btn-white-outline {
  background: transparent;
  color: var(--color-black);
  border-color: var(--color-black);
}
.btn-white-outline:hover {
  background: var(--color-black);
  color: var(--color-white);
}

body.no-scroll {
  overflow: hidden;
}

.wed-hero-band {
  background: linear-gradient(180deg, #f6f3ef 0%, #ffffff 100%);
  padding: clamp(56px, 7vw, 104px) 0 clamp(40px, 5vw, 72px);
  text-align: center;
}

.wed-eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: 14px;
}

.wed-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 4rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 22px;
}

.wed-intro {
  max-width: 46rem;
  margin: 0 auto;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.75;
  color: #3a3a3a;
}

.wed-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 34px;
}

.wed-hero-actions .btn-rect {
  padding: 14px 44px;
  font-size: 1.05rem;
}

/* Sticky strip of shortcuts to each group. */
.wed-jump {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-black);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.wed-jump ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 12px 0;
}

/* Wrapping onto three rows would make the sticky bar swallow a phone screen,
   so below the header breakpoint it scrolls sideways on one line instead. */
@media (max-width: 820px) {
  .wed-jump ul {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

.wed-jump a {
  display: block;
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.wed-jump a:hover,
.wed-jump a:focus-visible {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}

.wed-section {
  padding-top: clamp(40px, 5vw, 72px);
}

.wed-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 90px);
}

.wed-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  scroll-margin-top: 84px;
}

/* Alternate which side the photographs sit on. */
.wed-panel:nth-child(even) .wed-panel__gallery {
  order: 2;
}

.wed-hero {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--color-grey-placeholder);
  border-radius: var(--card-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

.wed-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.wed-hero:hover img,
.wed-hero:focus-visible img {
  transform: scale(1.04);
}

.wed-hero__zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.42);
  color: var(--color-white);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.wed-hero:hover .wed-hero__zoom,
.wed-hero:focus-visible .wed-hero__zoom {
  opacity: 1;
}

.wed-thumbs {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.wed-thumb {
  flex: 1 1 0;
  padding: 0;
  border: 0;
  background: var(--color-grey-placeholder);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  opacity: 0.86;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.wed-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wed-thumb:hover,
.wed-thumb:focus-visible {
  opacity: 1;
  transform: translateY(-3px);
}

.wed-code {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin-bottom: 10px;
}

.wed-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.3vw, 2.35rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: 18px;
}

.wed-blurb {
  font-size: 1.02rem;
  line-height: 1.7;
  color: #2a2a2a;
  margin-bottom: 16px;
}

.wed-detail {
  font-size: 0.94rem;
  line-height: 1.7;
  color: #5c5c5c;
  padding-left: 16px;
  border-left: 3px solid var(--color-red);
  margin-bottom: 28px;
}

.wed-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.wed-qty {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a4a4a;
}

.wed-qty input {
  width: 78px;
  padding: 12px 10px;
  font-family: inherit;
  font-size: 1rem;
  text-align: center;
  border: 1px solid #c9c9c9;
  border-radius: 10px;
}

.wed-actions .btn-rect {
  padding: 14px 40px;
  font-size: 1.02rem;
}

.wed-feedback {
  min-height: 1.4em;
  margin-top: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f7a3d;
}

.wed-cta {
  background: var(--color-black);
  color: var(--color-white);
  text-align: center;
  padding: clamp(52px, 6vw, 88px) 0;
}

.wed-cta h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.wed-cta p {
  max-width: 42rem;
  margin: 0 auto 30px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
}

.wed-cta .btn-rect {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
  padding: 14px 46px;
  font-size: 1.05rem;
}

.wed-cta .btn-rect:hover {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}

/* ─── Wedding lightbox ────────────────────────────────────────── */

.wed-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 28px);
  padding: clamp(16px, 4vw, 56px);
  background: rgba(8, 8, 8, 0.93);
}

.wed-lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: min(1100px, 100%);
  max-height: 100%;
}

.wed-lightbox__figure img {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  object-fit: contain;
  border-radius: 12px;
}

.wed-lightbox figcaption {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: var(--color-white);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
}

.wed-lightbox__count {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.62);
}

.wed-lightbox__nav,
.wed-lightbox__close {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: var(--color-white);
  border-radius: 50%;
  width: 52px;
  height: 52px;
  font-size: 1.9rem;
  line-height: 1;
  transition: background-color 0.18s ease;
}

.wed-lightbox__nav:hover,
.wed-lightbox__close:hover {
  background: var(--color-red);
  border-color: var(--color-red);
}

.wed-lightbox__close {
  position: absolute;
  top: clamp(14px, 3vw, 30px);
  right: clamp(14px, 3vw, 30px);
  width: 46px;
  height: 46px;
  font-size: 1.7rem;
}

@media (max-width: 1024px) {
  .wed-panel {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .wed-panel:nth-child(even) .wed-panel__gallery {
    order: 0;
  }
}

@media (max-width: 640px) {
  .wed-thumbs {
    gap: 8px;
  }
  .wed-actions {
    gap: 12px;
  }
  .wed-actions .btn-rect {
    flex: 1 1 100%;
    padding: 14px 20px;
  }
  .wed-lightbox {
    flex-direction: column;
    justify-content: center;
  }
  .wed-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .wed-lightbox__prev { left: 10px; }
  .wed-lightbox__next { right: 10px; }
}

/* ─── Quote counter on the View Order button ──────────────────── */

.view-order {
  position: relative;
}

.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-left: 9px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-red);
  color: var(--color-white);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.view-order:hover .cart-badge {
  background: var(--color-white);
  color: var(--color-red);
}

/* ─── Quote basket page ───────────────────────────────────────── */

.cart-head {
  padding: 44px 0 8px;
  text-align: center;
}

.cart-lede {
  max-width: 44rem;
  margin: 18px auto 0;
  font-size: 1.02rem;
  line-height: 1.7;
  color: #4a4a4a;
}

.cart-section {
  padding-top: 32px;
}

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.cart-toolbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-black);
}

.cart-count {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4a4a4a;
}

.cart-clear {
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8a8a;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}

.cart-clear:hover {
  color: var(--color-red);
}

.cart-list {
  display: flex;
  flex-direction: column;
}

.cart-line {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid #e2e2e2;
}

.cart-line__thumb {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  /* Catalogue shots are cut-outs on white; a white tile hides their edges. */
  background: var(--color-white);
  border: 1px solid #ececec;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-line__thumb {
  position: relative;
}

.cart-line__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The chosen colourway was never photographed, so the picture is of another
   one — the chip says which colour the line actually is. */
.cart-line__chip {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* A line whose photo is missing or fails to load keeps its shape. */
.cart-line__thumb.is-blank::after,
.cart-line__thumb:empty::after {
  content: "No image";
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a5a5a5;
}

.cart-line__collection {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: 5px;
}

.cart-line__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.25;
}

.cart-line__code {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #8a8a8a;
  margin-top: 4px;
}

.cart-line__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 9px;
}

.cart-spec {
  font-size: 0.86rem;
  color: #3a3a3a;
}

.cart-spec b {
  font-weight: 600;
  color: #8a8a8a;
  margin-right: 4px;
}

.cart-spec--note {
  font-style: italic;
  color: #6a6a6a;
}

.cart-line__qty {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid #cfcfcf;
  border-radius: 10px;
  overflow: hidden;
}

.cart-line__qty input {
  width: 54px;
  padding: 10px 4px;
  border: 0;
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
  font-family: inherit;
  font-size: 0.98rem;
  text-align: center;
  -moz-appearance: textfield;
}

.cart-line__qty input::-webkit-outer-spin-button,
.cart-line__qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-step {
  width: 38px;
  height: 40px;
  background: #f6f6f6;
  border: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: #2a2a2a;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.qty-step:hover {
  background: var(--color-black);
  color: var(--color-white);
}

.cart-line__remove {
  width: 34px;
  height: 34px;
  border: 1px solid #dcdcdc;
  border-radius: 50%;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  color: #8a8a8a;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.cart-line__remove:hover {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}

.cart-keep {
  display: inline-block;
  margin-top: 26px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #4a4a4a;
  transition: color 0.18s ease;
}

.cart-keep:hover {
  color: var(--color-red);
}

/* ─── The details form ────────────────────────────────────────── */

.cart-form-wrap {
  position: sticky;
  top: 24px;
  background: #f4f2ef;
  border-radius: var(--card-radius);
  padding: clamp(24px, 3vw, 38px);
}

.cart-form__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.cart-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #3a3a3a;
}

.cart-form__label {
  display: block;
}

.cart-form .req {
  color: var(--color-red);
}

.cart-form input[type="text"],
.cart-form input[type="email"],
.cart-form input[type="tel"],
.cart-form textarea {
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 400;
  padding: 13px 14px;
  border: 1px solid #d6d2cc;
  border-radius: 10px;
  background: var(--color-white);
  color: var(--color-black);
}

.cart-form input:focus-visible,
.cart-form textarea:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 1px;
}

.cart-form textarea {
  resize: vertical;
  min-height: 110px;
}

/* .cart-form label stacks its parts in a column, and it outranks a plain
   .cart-consent — which left the tick box sitting on its own line above the
   sentence it belongs to. Matched here at the same weight to put it back
   beside the wording. */
.cart-form .cart-consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.6;
  color: #4a4a4a;
}

.cart-consent input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-red);
}

.cart-consent a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Bots fill this in; people never see it. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cart-submit {
  margin-top: 6px;
  padding: 15px 32px;
  font-size: 1.05rem;
}

.cart-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cart-status {
  min-height: 1.3em;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.55;
  color: #1f7a3d;
}

.cart-status.is-error {
  color: var(--color-red);
}

/* ─── Empty and sent states ───────────────────────────────────── */

.cart-empty,
.cart-sent {
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) 0;
  text-align: center;
}

.cart-empty__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.cart-empty p,
.cart-sent p {
  font-size: 1rem;
  line-height: 1.7;
  color: #4a4a4a;
}

.cart-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

.cart-empty__actions .btn-rect {
  padding: 14px 36px;
  font-size: 1rem;
}

.cart-sent__tick {
  display: block;
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  padding: 16px;
  border-radius: 50%;
  background: #1f7a3d;
  fill: none;
  stroke: var(--color-white);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-sent h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.cart-sent__ref {
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-black);
  margin-bottom: 12px;
}

@media (max-width: 1024px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }
  .cart-form-wrap {
    position: static;
  }
}

@media (max-width: 640px) {
  .cart-line {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb body remove"
      "thumb qty  qty";
    gap: 12px 14px;
  }
  .cart-line__thumb {
    grid-area: thumb;
    width: 72px;
    height: 72px;
  }
  .cart-line__body   { grid-area: body; }
  .cart-line__remove { grid-area: remove; }
  .cart-line__qty {
    grid-area: qty;
    justify-self: start;
  }
}

/* ─── Changing colour and size in the basket ──────────────────── */

.cart-flash {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 9px;
  background: #fdf3d6;
  border: 1px solid #e8d49a;
  font-size: 0.88rem;
  font-weight: 500;
  color: #6b5312;
}

.cart-opt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 10px;
}

.cart-opt__label {
  flex-shrink: 0;
  min-width: 46px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.cart-opt__value {
  font-size: 0.86rem;
  font-weight: 600;
  color: #2a2a2a;
}

.cart-swatches,
.cart-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 100%;
}

.cart-swatch {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 5px;
  border: 2px solid transparent;
  outline: 1px solid rgba(0, 0, 0, 0.22);
  outline-offset: -1px;
  transition: transform 0.14s ease, border-color 0.14s ease;
}

.cart-swatch:hover {
  transform: translateY(-2px);
}

.cart-swatch[aria-pressed="true"] {
  border-color: var(--color-black);
  outline-color: var(--color-black);
}

.cart-size {
  min-width: 38px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1.5px solid #c4c4c4;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: #3a3a3a;
  transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.cart-size:hover {
  border-color: var(--color-black);
}

.cart-size[aria-pressed="true"] {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}

/* ─── Mobile header: hamburger and stacked menu ───────────────── */

.nav-toggle {
  display: none;                 /* desktop keeps the full menu bar */
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 11px;
  background: transparent;
}

/* Three bars drawn from one element, so the middle one can fade and the
   outer two can cross over into a close button. */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-white);
  transition: transform 0.22s ease, opacity 0.16s ease;
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 7px; }

.site-header.nav-open .nav-toggle__bars {
  background: transparent;
}
.site-header.nav-open .nav-toggle__bars::before {
  transform: translateY(7px) rotate(45deg);
}
.site-header.nav-open .nav-toggle__bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 820px) {
  /* Logo on the left, hamburger on the right; everything else drops into a
     panel underneath that opens and closes. */
  .header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .nav-toggle {
    display: flex;
    order: 1;
  }

  .site-header .logo {
    order: 0;
  }

  .main-nav,
  .site-header .view-order,
  .site-header .social-icons {
    display: none;
    flex: 1 1 100%;
    order: 2;
  }

  .site-header.nav-open .main-nav { display: block; margin-top: 16px; }
  .site-header.nav-open .view-order {
    display: inline-flex;
    align-self: center;
    margin: 16px auto 4px;
    flex: 0 0 auto;
  }
  .site-header.nav-open .social-icons {
    display: flex;
    justify-content: center;
    margin-top: 6px;
    padding-bottom: 6px;
  }

  /* The links become a list rather than a row. */
  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .main-nav > ul > li {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .main-nav > ul > li > a,
  .main-nav .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 4px;
    font-size: 1.1rem;
    text-align: left;
  }

  /* On a touch screen the panel has nowhere to float to, so it expands the
     row it belongs to instead of hanging off it. */
  .main-nav .has-dropdown {
    position: static;
  }

  .main-nav .dropdown {
    display: none;
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    margin: 0 0 12px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
  }

  .main-nav .dropdown::before {
    content: none;               /* no hover bridge to keep on a touch screen */
  }

  /* Hover must not open it here — only the toggle does. */
  .main-nav .has-dropdown:hover .dropdown,
  .main-nav .has-dropdown:focus-within .dropdown {
    display: none;
  }

  /* The open state carries the desktop's centring transform, and it outranks
     a plain .dropdown rule — so the panel has to be pinned back into the flow
     at the same specificity or it hangs half off the screen. */
  .main-nav .has-dropdown.open .dropdown,
  .main-nav .has-dropdown.open:hover .dropdown,
  .main-nav .has-dropdown.open:focus-within .dropdown {
    display: block;
    position: static;
    left: auto;
    top: auto;
    transform: none;
  }

  .main-nav .dropdown a {
    padding: 13px 14px;
    font-size: 1.02rem;
  }
}

.cart-sent__spam {
  margin: 16px auto 0;
  max-width: 34rem;
  padding: 14px 18px;
  border-radius: 10px;
  background: #fdf3d6;
  border: 1px solid #e8d49a;
  color: #6b5312 !important;
  font-size: 0.95rem;
  line-height: 1.65;
}

/* ─── What was sent, shown on the confirmation ────────────────── */

.cart-sent__summary {
  max-width: 34rem;
  margin: 26px auto 6px;
  text-align: left;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 6px 20px 10px;
}

.cart-sent__summary-head {
  font-size: 0.78rem !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8a8a !important;
  padding: 12px 0 10px;
  border-bottom: 1px solid #ececec;
}

.cart-sent__list {
  display: flex;
  flex-direction: column;
}

.cart-sent__line {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #f1f1f1;
}

.cart-sent__line:last-child {
  border-bottom: 0;
}

.cart-sent__thumb {
  width: 52px;
  height: 52px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid #ececec;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-sent__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-sent__thumb.is-blank::after,
.cart-sent__thumb:empty::after {
  content: "—";
  color: #c4c4c4;
  font-size: 1.1rem;
}

.cart-sent__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cart-sent__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--color-black);
}

.cart-sent__meta {
  font-size: 0.82rem;
  color: #6a6a6a;
}

.cart-sent__qty {
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  color: var(--color-black);
}

@media (max-width: 640px) {
  .cart-sent__summary {
    padding: 6px 14px 10px;
  }
  .cart-sent__line {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
  }
  .cart-sent__thumb {
    width: 44px;
    height: 44px;
  }
}

/* Read by search engines and screen readers, seen by nobody — for headings the
   design carries as a logo or an icon rather than as text. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── WhatsApp click-to-chat ──────────────────────────────────── */

.wa-widget {
  position: fixed;
  right: clamp(14px, 2.5vw, 28px);
  bottom: clamp(14px, 2.5vw, 28px);
  z-index: 150;                    /* under the wedding lightbox at 200 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.wa-fab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px 13px 15px;
  border: 0;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.wa-fab:hover {
  background: #1fb855;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
}

.wa-fab svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
  flex-shrink: 0;
}

.wa-widget.is-open .wa-fab__label {
  display: none;
}

.wa-widget.is-open .wa-fab {
  padding: 13px;
}

.wa-panel {
  width: min(330px, calc(100vw - 32px));
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-white);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  animation: wa-in 0.18s ease;
}

@keyframes wa-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .wa-panel { animation: none; }
  .wa-fab:hover { transform: none; }
}

.wa-panel__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 14px 14px 16px;
  background: #075e54;
  color: #fff;
}

.wa-panel__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #25d366;
  flex-shrink: 0;
}

.wa-panel__avatar svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}

.wa-panel__who {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}

.wa-panel__who strong {
  font-size: 1rem;
}

.wa-panel__status {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.78);
}

.wa-panel__close {
  background: none;
  border: 0;
  padding: 0 2px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.5rem;
  line-height: 1;
}

.wa-panel__close:hover {
  color: #fff;
}

.wa-panel__body {
  padding: 16px;
  background: #ece5dd;
}

/* The greeting styled as an incoming message, with the usual little tail. */
.wa-bubble {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 11px 13px;
  margin: 0 0 14px 8px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #1a1a1a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.wa-bubble::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 12px;
  border: 7px solid transparent;
  border-right-color: #fff;
  border-left: 0;
}

.wa-field {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a6b64;
  margin-bottom: 6px;
}

.wa-panel textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  padding: 11px 12px;
  border: 1px solid #cdd5d1;
  border-radius: 10px;
  background: #fff;
  color: var(--color-black);
  resize: vertical;
}

.wa-panel textarea:focus-visible {
  outline: 2px solid #25d366;
  outline-offset: 1px;
}

.wa-send {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #25d366;
  color: #fff;
  font-size: 0.98rem;
  font-weight: 600;
  transition: background-color 0.18s ease;
}

.wa-send:hover {
  background: #1fb855;
}

.wa-send svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.wa-note {
  margin-top: 10px;
  font-size: 0.74rem;
  line-height: 1.55;
  color: #5a6b64;
  text-align: center;
}

@media (max-width: 480px) {
  .wa-fab__label {
    display: none;              /* the icon alone on a small screen */
  }
  .wa-fab {
    padding: 14px;
  }
}

/* ─── Logo upload on the quote form ───────────────────────────── */

.cart-logo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-logo .opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #9a9a9a;
}

/* The real input is replaced by the drop area, but stays reachable by keyboard
   and by a screen reader rather than being hidden outright. */
.cart-logo__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.cart-logo__drop {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border: 2px dashed #c9c3ba;
  border-radius: 12px;
  background: #fbfaf8;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.45;
  color: #4a4a4a;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.cart-logo__drop:hover,
.cart-logo__drop.is-over,
.cart-logo__input:focus-visible + .cart-logo__drop {
  border-color: var(--color-red);
  background: #fff;
}

.cart-logo__drop svg {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--color-red);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-logo__drop strong {
  font-weight: 600;
  color: var(--color-black);
}

.cart-logo__chosen {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border: 1px solid #d6d2cc;
  border-radius: 12px;
  background: var(--color-white);
}

.cart-logo__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border: 1px solid #ececec;
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #8a8a8a;
}

.cart-logo__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-logo__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.cart-logo__meta strong {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-logo__meta span {
  font-size: 0.78rem;
  color: #8a8a8a;
}

.cart-logo__remove {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #dcdcdc;
  border-radius: 50%;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  color: #8a8a8a;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.cart-logo__remove:hover {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}

.cart-logo__hint {
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.55;
  color: #7a7a7a;
}

/* ─── Contact form outcome ────────────────────────────────────── */

.contact-status {
  /* Inside the form now, so it must not stretch it or add a gap of its own —
     the form is already a flex column with spacing between its fields. */
  margin: 0;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 500;
}

.contact-status.is-good {
  background: #e8f5ec;
  border: 1px solid #9bcfae;
  color: #1f5c34;
}

.contact-status.is-bad {
  background: #fdeaea;
  border: 1px solid #e2a2a2;
  color: #8c2222;
}

/* ─── reCAPTCHA badge ─────────────────────────────────────────── */

/* Google drops its badge in the bottom-right, which is where the WhatsApp
   button already lives. Moved to the left so both stay visible — Google asks
   that the badge is shown, not that it stays in a particular corner. */
.grecaptcha-badge {
  left: 14px !important;
  right: auto !important;
  bottom: 14px !important;
  z-index: 140;
}

@media (max-width: 640px) {
  /* On a phone the badge would sit on top of the footer links, so it tucks
     away and the notice below the Send button carries the attribution. */
  .grecaptcha-badge {
    visibility: hidden;
  }
}

.cart-recaptcha-note {
  margin-top: 10px;
  font-size: 0.72rem;
  line-height: 1.55;
  color: #8a8a8a;
}

.cart-recaptcha-note a {
  color: #6a6a6a;
  text-decoration: underline;
  text-underline-offset: 2px;
}