/* ==========================================================================
   SHRIRAM HANDICRAFT WHOLESALER
   Global stylesheet — pure CSS3, no framework, no build step.

   DESIGN DIRECTION
   A professional product catalogue experience wearing the brand's luxury
   black-and-antique-gold identity. Layouts stay clean, spacious and
   e-commerce-like; traditional ornament is reserved for dividers, the hero
   and the footer rather than applied to every surface.

   CONTENTS
   01. Design tokens
   02. Reset and base
   03. Typography
   04. Layout: container and section
   05. Ornaments and textures
   06. Buttons
   07. Top contact bar
   08. Site header and desktop navigation
   09. Mobile navigation drawer
   10. Page header and breadcrumbs
   11. Section headings
   12. Product card and grid
   13. Product detail page
   14. Section placeholders
   15. Footer
   16. Error page
   17. Home — hero
   18. Home — trust strip
   19. Home — about preview
   20. Home — why choose us
   21. Home — WhatsApp inquiry CTA
   22. Contact page
   23. Scroll reveal
   24. Utilities
   25. Reduced motion
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   Change a value here and it propagates across every page.
   ========================================================================== */

:root {
  /* ---- Neutrals: black and charcoal foundation ------------------------- */
  --obsidian: #080808; /* primary background */
  --ink: #0d0d0c; /* secondary background */
  --charcoal: #131312; /* raised surfaces, product cards */
  --charcoal-2: #1a1a18;
  --graphite: #232321;

  /* ---- Antique gold: primary accent ------------------------------------ */
  --gold-50: #fbf5e4;
  --gold-100: #f4e6bd;
  --gold-200: #e9d49a;
  --gold-300: #dbbd76;
  --gold-400: #cfae63;
  --gold-500: #c6a353; /* primary antique gold */
  --gold-600: #a9873c;
  --gold-700: #856a2e;
  --gold-800: #5c4a20;
  --gold-900: #372c13;

  /* ---- Deep royal red: used very sparingly ------------------------------ */
  --crimson-500: #8e2420;
  --crimson-600: #741c19;
  --crimson-700: #5a1614;
  --crimson-800: #3d0f0e;

  /* ---- Text on dark ------------------------------------------------------ */
  --ivory: #f5f1e8;
  --parchment: #e2dacb;
  --muted: #a89f8d;
  --dim: #7b7367;

  /* ---- WhatsApp: deep forest with a gold edge, never a bright generic
         green, so the conversion action still belongs to the brand -------- */
  --whatsapp-bg: #103526;
  --whatsapp-bg-hover: #16482f;
  --whatsapp-border: rgba(198, 163, 83, 0.42);
  --whatsapp-border-hover: rgba(198, 163, 83, 0.75);

  /* ---- Gold hairlines ---------------------------------------------------- */
  --hairline: rgba(198, 163, 83, 0.16);
  --hairline-strong: rgba(198, 163, 83, 0.38);
  --rule-gradient: linear-gradient(
    to right,
    transparent,
    rgba(198, 163, 83, 0.15) 15%,
    rgba(198, 163, 83, 0.55) 50%,
    rgba(198, 163, 83, 0.15) 85%,
    transparent
  );

  /* ---- Product media surface -------------------------------------------
     Product photography is supplied as transparent cutouts, and every piece
     sits on a plain white tile — the same stage on cards, galleries and
     thumbnails. The gold hairlines would vanish against it, so this surface
     carries its own neutral border and text colour.
     See "Product imagery" in the README. */
  --media-bg: #ffffff;
  --media-glow: none;
  --media-border: rgba(0, 0, 0, 0.12);
  --media-fg: #5b554b;

  /* ---- Typography --------------------------------------------------------- */
  --font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Motion: subtle and slow, never showy -------------------------------- */
  --ease-refined: cubic-bezier(0.22, 0.61, 0.36, 1);
  --speed: 280ms;
  --speed-slow: 450ms;

  /* ---- Elevation ----------------------------------------------------------- */
  --shadow-panel: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
  --shadow-card: 0 18px 40px -28px rgba(0, 0, 0, 0.95);

  /* ---- Layout -------------------------------------------------------------- */
  --container: 75rem;
  --container-wide: 84rem;
  --container-narrow: 48rem;
  --gutter: 1.25rem;
}

/* ==========================================================================
   02. RESET AND BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid var(--hairline);
}

* {
  margin: 0;
  padding: 0;
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* Offsets in-page anchor targets so they clear the sticky header. */
  scroll-padding-top: 6rem;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--obsidian);
  color: var(--parchment);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Belt and braces against horizontal scrolling on small screens. */
  overflow-x: hidden;
}

/* Set by JS while the mobile drawer is open. */
body.is-locked {
  overflow: hidden;
}

main {
  flex: 1 0 auto;
}

/* Components that set their own `display` would otherwise win over the
   browser's default [hidden] rule, so filtering by the hidden attribute needs
   this to be explicit. */
[hidden] {
  display: none !important;
}

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

img {
  height: auto;
}

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

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

ul,
ol {
  list-style: none;
}

address {
  font-style: normal;
}

::selection {
  background-color: rgba(198, 163, 83, 0.28);
  color: var(--ivory);
}

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

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--ink);
}
::-webkit-scrollbar-thumb {
  background: var(--gold-800);
  border: 2px solid var(--ink);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold-700);
}

/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--ivory);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.875rem, 1.35rem + 2.6vw, 3rem);
}
h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
}
h3 {
  font-size: 1.0625rem;
}

p {
  text-wrap: pretty;
}

/* Metallic gold lettering, as on the banner wordmark. */
.text-gilded {
  background-image: linear-gradient(175deg, #f4e6bd 0%, #c6a353 38%, #8f7130 62%, #dbbd76 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Small-caps label used above section headings. */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-500);
}

.lead {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--muted);
}

@media (min-width: 640px) {
  .lead {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   04. LAYOUT: CONTAINER AND SECTION
   Generous vertical rhythm — the catalogue should breathe.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: var(--container-wide);
}
.container--narrow {
  max-width: var(--container-narrow);
}

@media (min-width: 640px) {
  .container {
    padding-inline: 2rem;
  }
}
@media (min-width: 1024px) {
  .container {
    padding-inline: 2.5rem;
  }
}

.section {
  position: relative;
  padding-block: 4.5rem;
  background-color: var(--obsidian);
}

.section--sm {
  padding-block: 3rem;
}
.section--lg {
  padding-block: 5.5rem;
}

.section--panel {
  background-color: var(--ink);
}

.section--deep {
  background-color: transparent;
  background-image: radial-gradient(120% 90% at 50% 0%, rgba(198, 163, 83, 0.06) 0%, transparent 60%),
    linear-gradient(to bottom, var(--ink), var(--obsidian));
}

/* Hairline gold rule along the top edge of a section. */
.section--rule::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background-image: var(--rule-gradient);
}

@media (min-width: 640px) {
  .section {
    padding-block: 5.5rem;
  }
  .section--sm {
    padding-block: 3.5rem;
  }
  .section--lg {
    padding-block: 7rem;
  }
}

@media (min-width: 1024px) {
  .section {
    padding-block: 6.5rem;
  }
  .section--sm {
    padding-block: 4rem;
  }
  .section--lg {
    padding-block: 8.5rem;
  }
}

/* ==========================================================================
   05. ORNAMENTS AND TEXTURES
   Reserved for section dividers, the hero and the footer. Never applied to
   every card or panel.
   ========================================================================== */

.gold-rule {
  height: 1px;
  background-image: var(--rule-gradient);
  border: 0;
}

/* The traditional divider: fading rule broken by a four-point diamond. */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

.ornament--left {
  justify-content: flex-start;
}

.ornament__rule {
  height: 1px;
  width: 4rem;
  background-image: var(--rule-gradient);
}

.ornament--left .ornament__rule:first-child {
  display: none;
}

.ornament__diamond {
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  fill: var(--gold-500);
}

@media (min-width: 640px) {
  .ornament__rule {
    width: 5.5rem;
  }
}

/* A plain short gold underline — the default heading accent, used instead of
   the diamond ornament so ordinary sections stay clean. */
.rule-accent {
  width: 3rem;
  height: 2px;
  background-image: linear-gradient(to right, var(--gold-500), rgba(198, 163, 83, 0.15));
  border: 0;
}

.surface-panel {
  background-color: var(--charcoal);
  border: 1px solid var(--hairline);
}

.surface-deep {
  background-image: radial-gradient(120% 90% at 50% 0%, rgba(198, 163, 83, 0.06) 0%, transparent 60%),
    linear-gradient(to bottom, var(--ink), var(--obsidian));
}

/* Fine handcrafted grain — hero and footer only. */
.texture-grain {
  position: relative;
}

.texture-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.26;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Traditional lattice, at a whisper of opacity, hero and footer only. */
.texture-ornament {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23c6a353' stroke-width='0.6' opacity='0.5'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z'/%3E%3Ccircle cx='30' cy='30' r='7'/%3E%3Cpath d='M30 23 L37 30 L30 37 L23 30 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
}

/* Engraved corner brackets. Hero only. */
.corner {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--gold-700);
  opacity: 0.45;
  pointer-events: none;
}

.corner--tl {
  top: 1rem;
  left: 1rem;
  border-right-width: 0;
  border-bottom-width: 0;
}
.corner--tr {
  top: 1rem;
  right: 1rem;
  border-left-width: 0;
  border-bottom-width: 0;
}
.corner--bl {
  bottom: 1rem;
  left: 1rem;
  border-right-width: 0;
  border-top-width: 0;
}
.corner--br {
  bottom: 1rem;
  right: 1rem;
  border-left-width: 0;
  border-top-width: 0;
}

@media (max-width: 639px) {
  .corner {
    display: none;
  }
}

/* ==========================================================================
   06. BUTTONS
   Primary: antique gold with dark text.
   Secondary: transparent with a gold border.
   WhatsApp: deep forest green with a gold edge — premium, on-brand.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  /* Comfortable tap target on touch devices. */
  min-height: 2.875rem;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--speed) var(--ease-refined),
    border-color var(--speed) var(--ease-refined), color var(--speed) var(--ease-refined);
}

.btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  fill: currentColor;
}

.btn--sm {
  min-height: 2.5rem;
  padding: 0.5rem 1.125rem;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
}

.btn--lg {
  min-height: 3.25rem;
  padding: 0.875rem 2.25rem;
  font-size: 0.8125rem;
}

.btn--block {
  width: 100%;
}

.btn--gold {
  background-color: var(--gold-500);
  border-color: var(--gold-500);
  color: #100d06;
}
.btn--gold:hover {
  background-color: var(--gold-300);
  border-color: var(--gold-300);
}

.btn--outline {
  border-color: var(--hairline-strong);
  color: var(--gold-200);
}
.btn--outline:hover {
  border-color: var(--gold-500);
  color: var(--gold-100);
  background-color: rgba(198, 163, 83, 0.06);
}

.btn--ghost {
  color: var(--parchment);
}
.btn--ghost:hover {
  color: var(--gold-300);
}

.btn--whatsapp {
  background-color: var(--whatsapp-bg);
  border-color: var(--whatsapp-border);
  color: var(--gold-100);
}
.btn--whatsapp:hover {
  background-color: var(--whatsapp-bg-hover);
  border-color: var(--whatsapp-border-hover);
  color: var(--gold-50);
}

/* Square button used for the hamburger and drawer close. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  color: var(--gold-400);
  transition: border-color var(--speed) var(--ease-refined), color var(--speed) var(--ease-refined);
}

.icon-btn:hover {
  border-color: var(--gold-500);
  color: var(--gold-200);
}

.icon-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

/* Underline that draws in from the left. */
.link-underline {
  position: relative;
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 1px;
  width: 100%;
  background-color: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--speed-slow) var(--ease-refined);
}

.link-underline:hover::after,
.link-underline.is-active::after {
  transform: scaleX(1);
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.5rem 1rem;
  background-color: var(--ink);
  border: 1px solid var(--gold-500);
  color: var(--gold-200);
  font-size: 0.875rem;
}

/* ==========================================================================
   07. TOP CONTACT BAR
   ========================================================================== */

.topbar {
  display: none;
  position: relative;
  z-index: 40;
  background-color: var(--obsidian);
  border-bottom: 1px solid var(--hairline);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 2.25rem;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.topbar__motto {
  color: var(--dim);
}

.topbar__contact {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.topbar__contact a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  transition: color var(--speed) var(--ease-refined);
}

.topbar__contact a:hover {
  color: var(--gold-400);
}

.topbar__contact svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: currentColor;
}

.topbar__sep {
  width: 1px;
  height: 0.75rem;
  background-color: var(--gold-800);
}

@media (min-width: 768px) {
  .topbar {
    display: block;
  }
}

/* ==========================================================================
   08. SITE HEADER AND DESKTOP NAVIGATION
   Compact and restrained — this is a shopfront header, not an ornament.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  background-color: rgba(8, 8, 8, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
  transition: background-color var(--speed) var(--ease-refined),
    border-color var(--speed) var(--ease-refined);
}

.site-header.is-scrolled {
  background-color: rgba(8, 8, 8, 0.97);
  border-bottom-color: var(--hairline-strong);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4.25rem;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ---- Brand mark ---------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.brand__crest {
  position: relative;
  flex-shrink: 0;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--hairline-strong);
  transition: box-shadow var(--speed) var(--ease-refined);
}

.brand:hover .brand__crest {
  box-shadow: 0 0 0 1px var(--gold-500);
}

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

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
}

.brand__sub {
  margin-top: 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.brand--lg .brand__crest {
  width: 3.75rem;
  height: 3.75rem;
}
.brand--lg .brand__name {
  font-size: 1.25rem;
}
.brand--lg .brand__sub {
  font-size: 0.625rem;
}

/* ---- Desktop navigation --------------------------------------------------- */

.nav-desktop {
  display: none;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--parchment);
  transition: color var(--speed) var(--ease-refined);
}

.nav-link:hover {
  color: var(--gold-300);
}

.nav-link.is-active {
  color: var(--gold-400);
}

.nav-link__chevron {
  width: 0.625rem;
  height: 0.625rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform var(--speed) var(--ease-refined);
}

/* ---- Products dropdown ---------------------------------------------------
   Opens on hover and on keyboard focus, so it needs no JavaScript. On touch,
   tapping "Products" simply follows the link to the catalogue.
   ------------------------------------------------------------------------- */

.nav-menu {
  position: absolute;
  top: calc(100% + 1.25rem);
  left: 50%;
  z-index: 50;
  min-width: 15rem;
  padding: 0.5rem;
  background-color: var(--ink);
  border: 1px solid var(--hairline-strong);
  border-radius: 2px;
  box-shadow: var(--shadow-panel);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity var(--speed) var(--ease-refined), transform var(--speed) var(--ease-refined),
    visibility var(--speed);
}

/* An invisible bridge so the pointer can travel from the link to the panel. */
.nav-menu::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1.25rem;
  height: 1.25rem;
}

.nav-item--has-menu:hover .nav-menu,
.nav-item--has-menu:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav-item--has-menu:hover .nav-link__chevron,
.nav-item--has-menu:focus-within .nav-link__chevron {
  transform: rotate(180deg);
}

.nav-menu a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--parchment);
  border-radius: 2px;
  transition: background-color var(--speed) var(--ease-refined),
    color var(--speed) var(--ease-refined);
}

.nav-menu a:hover {
  background-color: rgba(198, 163, 83, 0.08);
  color: var(--gold-200);
}

.nav-menu__count {
  font-size: 0.6875rem;
  color: var(--gold-700);
}

.nav-menu__divider {
  height: 1px;
  margin: 0.375rem 0.5rem;
  background-image: var(--rule-gradient);
}

.nav-menu__all {
  color: var(--gold-500) !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
}

@media (min-width: 640px) {
  .brand__crest {
    width: 2.625rem;
    height: 2.625rem;
  }
  .brand__name {
    font-size: 1.0625rem;
  }
  .brand__sub {
    font-size: 0.5625rem;
  }
  .brand--lg .brand__name {
    font-size: 1.5rem;
  }
  .brand--lg .brand__sub {
    font-size: 0.6875rem;
  }
}

@media (min-width: 1024px) {
  .site-header__inner {
    height: 4.75rem;
  }
  .nav-desktop {
    display: block;
  }
  .nav-toggle {
    display: none;
  }
}

/* ==========================================================================
   09. MOBILE NAVIGATION DRAWER
   ========================================================================== */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  pointer-events: none;
}

.drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.drawer__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(8, 8, 8, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--speed) var(--ease-refined);
  cursor: default;
}

.drawer.is-open .drawer__scrim {
  opacity: 1;
}

.drawer__panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 23rem;
  overflow-y: auto;
  background-color: var(--ink);
  border-left: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-panel);
  transform: translateX(100%);
  transition: transform var(--speed-slow) var(--ease-refined);
  outline: none;
}

.drawer.is-open .drawer__panel {
  transform: translateX(0);
}

.drawer__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--hairline);
}

.drawer__nav {
  position: relative;
  padding: 1.5rem 1.25rem;
}

.drawer__nav > ul > li {
  border-bottom: 1px solid var(--hairline);
}

.drawer__nav > ul > li:last-child {
  border-bottom: 0;
}

.drawer__link {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  /* Large tap target. */
  padding-block: 0.9375rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: 0.1em;
  color: var(--parchment);
  transition: color var(--speed) var(--ease-refined);
}

.drawer__link:hover,
.drawer__link.is-active {
  color: var(--gold-400);
}

.drawer__index {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--gold-700);
}

/* Category shortcuts nested under Products. */
.drawer__sub {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0 0 1rem 2.25rem;
}

.drawer__sub a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: color var(--speed) var(--ease-refined);
}

.drawer__sub a:hover {
  color: var(--gold-300);
}

.drawer__sub span {
  font-size: 0.6875rem;
  color: var(--gold-800);
}

.drawer__footer {
  position: relative;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1rem 1.25rem 2rem;
  border-top: 1px solid var(--hairline);
}

.drawer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.drawer__contact a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-block: 0.25rem;
  color: var(--muted);
  transition: color var(--speed) var(--ease-refined);
}

.drawer__contact a:hover {
  color: var(--gold-300);
}

.drawer__contact svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .drawer {
    display: none;
  }
}

/* ==========================================================================
   10. PAGE HEADER AND BREADCRUMBS
   Clean catalogue banner: breadcrumb, title, thin gold accent.
   ========================================================================== */

.page-header {
  position: relative;
  overflow: hidden;
  background-color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}

.page-header__inner {
  position: relative;
  padding-block: 3.25rem;
}

.breadcrumb {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.breadcrumb a {
  transition: color var(--speed) var(--ease-refined);
}

.breadcrumb a:hover {
  color: var(--gold-400);
}

.breadcrumb__current {
  color: var(--gold-500);
}

.breadcrumb__sep {
  color: var(--gold-800);
}

/* Slim breadcrumb bar, used where the page title belongs in the layout below
   rather than in a full page header — as on the product detail pages. */
.breadcrumb-bar {
  background-color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}

.breadcrumb-bar .breadcrumb {
  margin-bottom: 0;
  padding-block: 1rem;
}

.breadcrumb--left {
  justify-content: flex-start;
}

.breadcrumb--left ol {
  justify-content: flex-start;
}

/* Serif gold line between the page title and its introduction, used where a
   page header carries both a subheading and an intro paragraph. */
.page-header__subheading {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--gold-400);
}

@media (min-width: 640px) {
  .page-header__subheading {
    font-size: 1.375rem;
  }
}

@media (min-width: 640px) {
  .page-header__inner {
    padding-block: 4rem;
  }
}

@media (min-width: 1024px) {
  .page-header__inner {
    padding-block: 5rem;
  }
}

/* ==========================================================================
   11. SECTION HEADINGS
   ========================================================================== */

.heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  text-align: center;
}

.heading--left {
  align-items: flex-start;
  text-align: left;
}

.heading .ornament {
  max-width: 18rem;
}

.heading--left .ornament {
  max-width: 11rem;
}

.heading__subtitle {
  max-width: 40rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--muted);
}

.heading--left .heading__subtitle {
  max-width: 34rem;
}

.heading--spaced {
  margin-bottom: 3rem;
}

@media (min-width: 640px) {
  .heading__subtitle {
    font-size: 1rem;
  }
  .heading--spaced {
    margin-bottom: 3.5rem;
  }
}

/* A heading with the section's actions on the right, as on catalogue rows. */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

/* A plain count beside a collection heading — informational, not a control. */
.section-count {
  flex-shrink: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-600);
}

@media (min-width: 768px) {
  .section-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 3rem;
  }

  .section-count {
    padding-bottom: 0.5rem;
  }
}

/* ==========================================================================
   12. PRODUCT CARD AND GRID
   Clean e-commerce catalogue cards: a large image area, concise copy and two
   clear actions. No cart, no checkout, no pricing.
   ========================================================================== */

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 480px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* The related-products row: 1 / 2 / 3, matching the catalogue's mobile
   behaviour so cards are never cramped on a phone. */
.product-grid.product-grid--3 {
  grid-template-columns: 1fr;
}

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

@media (min-width: 1024px) {
  .product-grid.product-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The home page collection row: one per row on mobile, two on tablet, all
   four in a single row once there is room. Doubled class so this always wins
   over the base grid's breakpoints regardless of source order. */
.product-grid.product-grid--featured {
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .product-grid.product-grid--featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .product-grid.product-grid--featured {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--charcoal);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  transition: transform var(--speed-slow) var(--ease-refined),
    border-color var(--speed-slow) var(--ease-refined),
    box-shadow var(--speed-slow) var(--ease-refined);
}

.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-card);
}

/* Large image area. Every card keeps the same 4:5 proportion so the grid
   stays even regardless of how tall or wide the piece is. */
.product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--media-bg);
  background-image: var(--media-glow);
  border-bottom: 1px solid var(--media-border);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.75rem;
  transition: transform var(--speed-slow) var(--ease-refined);
}

.product-card:hover .product-card__media img {
  transform: scale(1.06);
}

.product-card__tag {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-200);
  background-color: rgba(8, 8, 8, 0.82);
  border: 1px solid rgba(198, 163, 83, 0.3);
  z-index: 2;
}

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.375rem;
}

.product-card__title {
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
}

.product-card__title a {
  transition: color var(--speed) var(--ease-refined);
}

.product-card__title a:hover {
  color: var(--gold-300);
}

.product-card__meta {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-600);
}

/* ---- Price ---------------------------------------------------------------
   Displayed for reference only — the site takes no payments and has no cart.
   Set in the display face and antique gold so it reads as part of the brand
   rather than as a discount badge.
   ------------------------------------------------------------------------- */

.price {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--gold-300);
}

.product-card__price {
  margin-top: 0.125rem;
  font-size: 1.0625rem;
}

/* Deliberately smaller than the product title above it. */
.product-info__price {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
}

.quick-card__price {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
}

/* The single-line descriptor used on the home collection cards. */
.product-card__line {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--gold-400);
}

.product-card__text {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
}

/* Centred action closing a section, e.g. "View All Products". */
.section-cta {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .section-cta {
    margin-top: 3.75rem;
  }
}

/* Shown when a category has no catalogue entries yet. */
.grid-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3.5rem 1.5rem;
  text-align: center;
  border: 1px dashed rgba(92, 74, 32, 0.5);
  background-color: var(--charcoal);
}

.grid-empty svg {
  width: 0.5rem;
  height: 0.5rem;
  fill: var(--gold-500);
  opacity: 0.6;
}

.grid-empty p {
  max-width: 28rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted);
}

/* ---- Category navigation -------------------------------------------------
   Data-driven: each chip carries a data-filter and each card a data-category,
   so adding a category needs no new CSS or JS. Wraps rather than scrolls on
   mobile, which avoids any horizontal overflow.
   ------------------------------------------------------------------------- */

.category-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.625rem 1.375rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--parchment);
  background-color: transparent;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color var(--speed) var(--ease-refined), color var(--speed) var(--ease-refined),
    background-color var(--speed) var(--ease-refined);
}

.category-chip:hover {
  border-color: var(--gold-500);
  color: var(--gold-200);
  background-color: rgba(198, 163, 83, 0.05);
}

.category-chip[aria-pressed="true"] {
  border-color: var(--gold-500);
  background-color: rgba(198, 163, 83, 0.1);
  color: var(--gold-100);
}

.category-chip__count {
  font-size: 0.625rem;
  color: var(--gold-700);
}

.category-chip[aria-pressed="true"] .category-chip__count {
  color: var(--gold-500);
}

/* ---- Collection notice ---------------------------------------------------
   Informational, not a warning: small, quiet, centred.
   ------------------------------------------------------------------------- */

.notice__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

.notice__inner svg {
  width: 0.5rem;
  height: 0.5rem;
  fill: var(--gold-600);
}

.notice__inner p {
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--dim);
}

/* ==========================================================================
   13. PRODUCT DETAIL PAGE
   Gallery left, details right — a premium e-commerce product page.
   ========================================================================== */

.product-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .product-detail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
  }
}

.gallery {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.gallery__main {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--media-border);
  background-color: var(--media-bg);
  background-image: var(--media-glow);
}

.gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 2rem;
}

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.875rem;
}

/* Thumbnails are buttons: JS swaps them into the main frame. */
.gallery__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--media-border);
  background-color: var(--media-bg);
  cursor: pointer;
  transition: border-color var(--speed) var(--ease-refined);
}

.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.5rem;
}

.gallery__thumb:hover {
  border-color: var(--gold-400);
}

.gallery__thumb[aria-current="true"] {
  border-color: var(--gold-500);
}

/* The stage is plain white for every piece, so the old per-product tints
   (gallery--crimson / --amber / --silver) no longer paint anything. The
   classes are harmless in the markup and are simply ignored here. */

/* A gentle zoom on the main image, desktop pointers only. */
@media (hover: hover) and (pointer: fine) {
  .gallery__main img {
    transition: transform var(--speed-slow) var(--ease-refined);
  }

  .gallery__main:hover img {
    transform: scale(1.05);
  }
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* ---- Specification table -------------------------------------------------
   Label left, value right, separated by gold hairlines. Stacks to two lines
   on narrow screens so long values stay readable.
   ------------------------------------------------------------------------- */

.spec-table {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
}

.spec-table > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block: 0.9375rem;
  border-bottom: 1px solid var(--hairline);
}

.spec-table dt {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-500);
}

.spec-table dd {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--parchment);
}

@media (min-width: 560px) {
  .spec-table > div {
    flex-direction: row;
    align-items: baseline;
    gap: 1.5rem;
  }

  .spec-table dt {
    flex: 0 0 11rem;
    padding-top: 0.15rem;
  }

  .spec-table dd {
    flex: 1;
  }
}

/* ---- Product information notice ------------------------------------------ */

.notice__title {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.product-info__intro {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.product-info__eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-500);
}

.product-info__title {
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
}

.product-info__subtitle {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--gold-400);
}

.product-info__desc {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.product-info__desc p {
  line-height: 1.8;
  color: var(--muted);
}

.highlights {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.highlights li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--parchment);
}

.highlights svg {
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.5rem;
  flex-shrink: 0;
  fill: var(--gold-500);
}

.specs {
  padding: 1.5rem;
  background-color: var(--charcoal);
  border: 1px solid var(--hairline);
}

.specs__title {
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.specs__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 2rem;
}

@media (min-width: 480px) {
  .specs__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.specs__item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.specs__item dt {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.specs__item dd {
  font-size: 0.875rem;
  color: var(--parchment);
}

/* Conversion block — WhatsApp only. */
.enquiry-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
}

.enquiry-block p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted);
}

.enquiry-block__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 560px) {
  .enquiry-block__actions {
    flex-direction: row;
  }
  .enquiry-block__actions .btn--whatsapp {
    flex: 1;
  }
}

/* ==========================================================================
   14. SECTION PLACEHOLDERS
   Scaffolding for sections not yet designed. Delete this block, and the
   markup that uses it, once every section is built.
   ========================================================================== */

.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 14rem;
  padding: 3rem 1.5rem;
  text-align: center;
  border: 1px dashed rgba(92, 74, 32, 0.45);
  background-color: rgba(19, 19, 18, 0.55);
  border-radius: 2px;
}

.placeholder--sm {
  min-height: 9rem;
}
.placeholder--lg {
  min-height: 18rem;
}

.placeholder svg {
  width: 0.5rem;
  height: 0.5rem;
  fill: var(--gold-500);
  opacity: 0.5;
}

.placeholder__title {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-600);
}

.placeholder__note {
  max-width: 32rem;
  font-size: 0.875rem;
  color: var(--dim);
}

.placeholder__status {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(123, 115, 103, 0.7);
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.site-footer {
  position: relative;
  overflow: hidden;
  background-color: var(--ink);
  border-top: 1px solid var(--hairline-strong);
}

.site-footer__inner {
  position: relative;
  padding-block: 4rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.75rem;
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2.5rem;
  }
  .footer-col--brand {
    grid-column: span 4;
  }
  .footer-col--nav {
    grid-column: span 2;
  }
  .footer-col--products {
    grid-column: span 3;
  }
  .footer-col--contact {
    grid-column: span 3;
  }
  .site-footer__inner {
    padding-block: 5rem;
  }
}

.footer-col__title {
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.footer-about {
  margin-top: 1.25rem;
  max-width: 24rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted);
}

.footer-motto {
  margin-top: 1.25rem;
  font-size: 0.625rem;
  letter-spacing: 0.24em;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: 0.875rem;
}

.footer-links a {
  display: inline-block;
  padding-block: 0.125rem;
  color: var(--muted);
  transition: color var(--speed) var(--ease-refined);
}

.footer-links a:hover {
  color: var(--gold-300);
}

.footer-links__all {
  color: var(--gold-500) !important;
}

.footer-links__all:hover {
  color: var(--gold-300) !important;
}

/* Labelled contact rows. Values that still need filling in are marked with
   .is-placeholder so they are obvious at a glance. */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

.footer-contact-list > div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.footer-contact-list dt {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}

.footer-contact-list dd {
  font-size: 0.875rem;
  color: var(--muted);
}

.footer-contact-list a {
  transition: color var(--speed) var(--ease-refined);
}

.footer-contact-list a:hover {
  color: var(--gold-300);
}

.is-placeholder {
  color: var(--gold-700);
  border-bottom: 1px dashed rgba(198, 163, 83, 0.4);
  padding-bottom: 1px;
  letter-spacing: 0.06em;
}

.footer-divider {
  margin-block: 2.75rem;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.footer-copy {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.footer-legal {
  max-width: 40rem;
  font-size: 0.6875rem;
  line-height: 1.7;
  color: var(--dim);
}

/* ==========================================================================
   16. ERROR PAGE
   ========================================================================== */

.error-page {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 65vh;
  padding-block: 5rem;
  text-align: center;
}

.error-page__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}

@media (min-width: 560px) {
  .error-page__actions {
    flex-direction: row;
  }
}

/* ==========================================================================
   17. HOME — HERO
   The one place the brand's ceremonial side is allowed full expression.
   Motion here is deliberately restrained: no pulsing, no heavy parallax.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: 3.5rem 4rem;
  background-color: var(--obsidian);
}

.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__bg span {
  position: absolute;
  inset: 0;
  display: block;
}

/* A soft, static pool of light behind the showcase. */
.hero__glow {
  background-image: radial-gradient(56% 52% at 74% 44%, rgba(198, 163, 83, 0.13) 0%, transparent 62%);
}

/* The single permitted use of deep royal red on the page. */
.hero__drape {
  background-image: radial-gradient(44% 56% at 82% 64%, rgba(90, 22, 20, 0.34) 0%, transparent 68%);
}

.hero__vignette {
  background-image: radial-gradient(125% 105% at 50% 45%, transparent 44%, rgba(8, 8, 8, 0.9) 100%);
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 3rem;
}

/* Grid items default to min-width:auto, which would let the showcase image's
   intrinsic width push the track wider than the viewport on small screens. */
.hero__inner > * {
  min-width: 0;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  text-align: left;
}

.hero__title {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hero__title-main {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 1.5rem + 6.6vw, 5.75rem);
  line-height: 0.95;
  letter-spacing: 0.06em;
}

.hero__title-sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.75rem, 0.58rem + 0.7vw, 1.0625rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-200);
}

.hero__tagline {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.hero__tagline-label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-500);
}

.hero__tagline-main {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 0.95rem + 1.7vw, 2.125rem);
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ivory);
}

.hero__motto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__motto span {
  color: var(--gold-600);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.25rem;
}

/* ---- Showcase ------------------------------------------------------------ */

.hero__showcase {
  position: relative;
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
}

.hero__showcase-glow {
  position: absolute;
  inset: 8% 6% 12% 14%;
  border-radius: 50%;
  background-image: radial-gradient(closest-side, rgba(198, 163, 83, 0.22), transparent 72%);
  filter: blur(30px);
  pointer-events: none;
}

.hero__frame-wrap {
  position: relative;
  will-change: transform;
  transition: transform 600ms var(--ease-refined);
}

.hero__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-panel);
}

.hero__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 646 / 996;
  object-fit: cover;
}

/* Inner gold hairline, inset like an engraved border. */
.hero__frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(198, 163, 83, 0.24);
  pointer-events: none;
}

/* ---- Entrance ------------------------------------------------------------ */

@keyframes heroRise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes heroFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Staggered entrance. `--d` is set per element in the markup. */
.reveal {
  opacity: 0;
  animation: heroRise 850ms var(--ease-refined) forwards;
  animation-delay: var(--d, 0ms);
}

.reveal--fade {
  animation-name: heroFade;
  animation-duration: 1200ms;
}

@media (min-width: 480px) {
  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero__showcase {
    max-width: 25rem;
  }
}

@media (min-width: 1024px) {
  .hero {
    min-height: calc(100vh - 7rem);
    min-height: calc(100svh - 7rem);
    padding-block: 4.5rem 5rem;
  }

  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 4rem;
  }

  .hero__showcase {
    max-width: 26rem;
    margin-inline: 0 auto;
  }
}

@media (min-width: 1280px) {
  .hero__inner {
    gap: 5.5rem;
  }
  .hero__showcase {
    max-width: 28rem;
  }
}

/* ==========================================================================
   18. HOME — TRUST STRIP
   ========================================================================== */

.trust-strip {
  position: relative;
  padding-block: 2.25rem;
  background-color: var(--ink);
}

.trust-list {
  display: grid;
  grid-template-columns: 1fr;
}

.trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  padding-block: 1.125rem;
  text-align: center;
  border-bottom: 1px solid var(--hairline);
}

.trust-list li:last-child .trust-item {
  border-bottom: 0;
}

.trust-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  flex-shrink: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--gold-500);
  transition: border-color var(--speed) var(--ease-refined), color var(--speed) var(--ease-refined);
}

.trust-item__icon svg {
  width: 1.0625rem;
  height: 1.0625rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-item__icon svg.is-filled {
  fill: currentColor;
  stroke: none;
}

.trust-item__label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--parchment);
  transition: color var(--speed) var(--ease-refined);
}

a.trust-item:hover .trust-item__icon {
  border-color: var(--gold-500);
  color: var(--gold-300);
}

a.trust-item:hover .trust-item__label {
  color: var(--gold-300);
}

@media (max-width: 519px) {
  .trust-item {
    gap: 0.75rem;
  }
  .trust-item__icon {
    width: 2.125rem;
    height: 2.125rem;
  }
  .trust-item__label {
    font-size: 0.625rem;
    letter-spacing: 0.12em;
  }
}

@media (min-width: 768px) {
  .trust-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .trust-item {
    padding-block: 0.5rem;
    padding-inline: 1rem;
    border-bottom: 0;
    border-right: 1px solid var(--hairline);
  }

  .trust-list li:last-child .trust-item {
    border-right: 0;
  }
}

/* ==========================================================================
   19. HOME — ABOUT PREVIEW
   Two columns on desktop: a cinematic craftsmanship image on the left, the
   brand introduction on the right. Stacks image-first on smaller screens.
   ========================================================================== */

.about-preview {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2.5rem;
}

/* Grid items default to min-width:auto, which would let the image's intrinsic
   width push the track wider than the viewport. */
.about-preview > * {
  min-width: 0;
}

/* ---- Left: the image ----------------------------------------------------- */

.about-preview__visual {
  position: relative;
}

.about-preview__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-panel);
}

.about-preview__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Portrait variant, used for the About page's Our Story image. */
.about-preview__frame--portrait img {
  aspect-ratio: 3 / 4;
}

/* Stacked above the copy, a full-width portrait would dominate the section,
   so it is capped and centred until the two-column layout kicks in. */
@media (max-width: 1023px) {
  .about-preview__frame--portrait {
    max-width: 24rem;
    margin-inline: auto;
  }
}

/* A single inset hairline — the only framing detail. */
.about-preview__frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(198, 163, 83, 0.2);
  pointer-events: none;
}

/* ---- Right: the copy ----------------------------------------------------- */

.about-preview__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

/* Headings are left in title case so Cinzel sets them with its large-and-small
   capitals, matching every other section heading on the site. */
.about-preview__content h2 {
  letter-spacing: 0.03em;
}

.about-preview__copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.about-preview__copy p {
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--muted);
}

/* ---- Highlights ---------------------------------------------------------- */

.about-highlights {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem 1.5rem;
  width: 100%;
  margin-top: 0.25rem;
}

.about-highlights li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--parchment);
}

/* The brand's four-point diamond inside a thin gold ring — used instead of a
   generic icon set. */
.about-highlights__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
}

.about-highlights__mark svg {
  width: 0.5rem;
  height: 0.5rem;
  fill: var(--gold-500);
}

.about-preview__content .btn {
  margin-top: 0.75rem;
}

@media (min-width: 560px) {
  .about-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .about-preview {
    gap: 3rem;
  }
}

@media (min-width: 1024px) {
  .about-preview {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
  }

  .about-preview__content {
    gap: 1.375rem;
  }
}

@media (min-width: 1280px) {
  .about-preview {
    gap: 5rem;
  }
}

/* ==========================================================================
   20. HOME — WHY CHOOSE US
   Four restrained feature blocks. Deliberately compact — a refined row of
   value points, not bulky corporate feature cards.
   ========================================================================== */

.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.why-item {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.75rem 1.5rem;
  background-color: var(--charcoal);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  transition: transform var(--speed-slow) var(--ease-refined),
    border-color var(--speed-slow) var(--ease-refined),
    background-color var(--speed-slow) var(--ease-refined);
}

.why-item:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-strong);
  background-color: var(--charcoal-2);
}

.why-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  color: var(--gold-500);
  transition: color var(--speed) var(--ease-refined),
    border-color var(--speed) var(--ease-refined),
    background-color var(--speed) var(--ease-refined);
}

.why-item:hover .why-item__icon {
  color: var(--gold-300);
  border-color: var(--gold-500);
  background-color: rgba(198, 163, 83, 0.06);
}

.why-item__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.why-item__icon svg.is-filled {
  fill: currentColor;
  stroke: none;
}

.why-item__title {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ivory);
}

.why-item__text {
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--muted);
}

/* Closing ornament, easing the transition into the next section. */
.why-divider {
  margin-top: 3.5rem;
}

@media (min-width: 600px) {
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (min-width: 1100px) {
  .why-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .why-item {
    padding: 2rem 1.75rem;
  }
}

/* ==========================================================================
   21. HOME — CLOSING BANDS
   Two sections close the page: the WhatsApp conversion band, then the quieter
   brand statement. The CTA is the loud one — a gold-filled button over faded
   product silhouettes. The brand statement is editorial and restrained so the
   two never compete.
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  background-color: var(--obsidian);
  background-image: radial-gradient(68% 92% at 50% 50%, rgba(198, 163, 83, 0.09), transparent 66%);
}

.cta-band__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Metallic product silhouettes flanking the copy. Desktop only — on smaller
   screens they would crowd the text.

   `screen` blending drops the black scabbards into the background entirely
   and lets only the polished metal ghost through, which reads as a faint
   silhouette rather than a dark blob. */
.cta-band__silhouette {
  display: none;
  position: absolute;
  top: 50%;
  width: 9.5rem;
  height: 80%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.09;
  filter: grayscale(1) contrast(0.8);
  mix-blend-mode: screen;
}

.cta-band__silhouette--left {
  left: 2%;
  transform: translateY(-50%) rotate(-4deg);
  background-image: url("../assets/images/products/viking-sword/viking-sword-1-cut.png");
}

.cta-band__silhouette--right {
  right: 2%;
  transform: translateY(-50%) scaleX(-1) rotate(-4deg);
  background-image: url("../assets/images/products/orange-tega-sword/orange-tega-sword-1-cut.png");
}

/* Only once there is genuinely spare width either side of the copy. */
@media (min-width: 1200px) {
  .cta-band__silhouette {
    display: block;
  }
}

/* ---- Content ------------------------------------------------------------- */

.cta-band__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.cta-band__inner h2 {
  font-size: clamp(1.75rem, 1.3rem + 2.1vw, 2.75rem);
  letter-spacing: 0.03em;
}

.cta-band__lead {
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--parchment);
}

.cta-band__support {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 34rem;
}

.cta-band__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.875rem;
  width: 100%;
  margin-top: 1.25rem;
}

/* The primary action carries extra weight without changing the button system. */
.cta-band__actions .btn--gold {
  padding-inline: 2.5rem;
  letter-spacing: 0.18em;
}

@media (min-width: 560px) {
  .cta-band__actions {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    width: auto;
  }
}

@media (min-width: 1024px) {
  .cta-band__inner {
    gap: 1.375rem;
  }
  .cta-band__actions {
    margin-top: 1.75rem;
  }
}

/* ---- Brand values row ----------------------------------------------------
   Three words separated by gold hairlines: stacked on mobile, in a row from
   the sm breakpoint up.
   ------------------------------------------------------------------------- */

.values-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-block: 0.5rem 1.75rem;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.values-row li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 1.125rem;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.125rem, 0.9rem + 1.1vw, 1.75rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
}

.values-row li:last-child {
  border-bottom: 0;
}

@media (min-width: 640px) {
  .values-row {
    flex-direction: row;
  }

  .values-row li {
    flex: 1;
    padding-block: 1.5rem;
    border-bottom: 0;
    border-right: 1px solid var(--hairline);
  }

  .values-row li:last-child {
    border-right: 0;
  }
}

/* ---- Closing brand statement --------------------------------------------- */

.brand-close__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

/* The motto is a lockup rather than a sentence, so it keeps full capitals
   while every other section heading uses Cinzel's title-case setting. */
.brand-close__motto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.375rem, 1rem + 1.8vw, 2.125rem);
  line-height: 1.25;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory);
}

.brand-close__motto span {
  color: var(--gold-600);
  font-weight: 400;
}

.brand-close__statement {
  max-width: 42rem;
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--parchment);
}

.brand-close__support {
  max-width: 36rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--muted);
}

.brand-close__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.875rem;
  width: 100%;
  margin-top: 1rem;
}

@media (min-width: 560px) {
  .brand-close__actions {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: auto;
  }
}

/* ==========================================================================
   22. CONTACT PAGE
   Contact details, the WhatsApp inquiry form and the product quick links.
   The form has no backend: it composes a WhatsApp message and opens it.
   ========================================================================== */

/* ---- Contact details ----------------------------------------------------- */

.contact-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

@media (min-width: 640px) {
  .contact-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 2.5rem;
  }
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  color: var(--gold-500);
}

.contact-item__icon svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-item__icon svg.is-filled {
  fill: currentColor;
  stroke: none;
}

.contact-item__label {
  margin-bottom: 0.3125rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-500);
}

.contact-item__value {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--parchment);
}

.contact-item__value a {
  transition: color var(--speed) var(--ease-refined);
}

.contact-item__value a:hover {
  color: var(--gold-300);
}

/* ---- Inquiry form -------------------------------------------------------- */

.form {
  padding: 1.75rem;
  background-color: var(--charcoal);
  border: 1px solid var(--hairline);
  border-radius: 2px;
}

@media (min-width: 640px) {
  .form {
    padding: 2.25rem;
  }
}

.form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .form__grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.field__label {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-500);
}

.field__label em {
  font-style: normal;
  color: var(--dim);
  letter-spacing: 0.12em;
}

.field__control {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--ivory);
  background-color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  transition: border-color var(--speed) var(--ease-refined);
}

.field__control::placeholder {
  color: var(--dim);
}

.field__control:focus {
  border-color: var(--gold-500);
}

textarea.field__control {
  min-height: 8rem;
  line-height: 1.7;
  resize: vertical;
}

/* Native select arrows differ per platform, so it carries a gold chevron. */
select.field__control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23c6a353' stroke-width='1.6'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.75rem;
}

select.field__control option {
  background-color: var(--ink);
  color: var(--ivory);
}

/* Inline validation — a quiet oxblood, never a shouting red. */
.field--error .field__control {
  border-color: var(--crimson-500);
}

.field__error {
  display: none;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #c2706b;
}

.field--error .field__error {
  display: block;
}

.form__actions {
  margin-top: 1.75rem;
}

.form__note {
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--dim);
}

/* ---- Product quick links ------------------------------------------------- */

.quick-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 520px) {
  .quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.quick-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem;
  background-color: var(--charcoal);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  transition: transform var(--speed-slow) var(--ease-refined),
    border-color var(--speed-slow) var(--ease-refined);
}

.quick-card:hover {
  transform: translateY(-2px);
  border-color: var(--hairline-strong);
}

.quick-card__media {
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
  overflow: hidden;
  background-color: var(--media-bg);
  background-image: var(--media-glow);
  border: 1px solid var(--media-border);
}

.quick-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.4375rem;
  transition: transform var(--speed-slow) var(--ease-refined);
}

.quick-card:hover .quick-card__media img {
  transform: scale(1.07);
}

/* Both are spans inside an anchor, so they need to be made block-level to
   stack rather than running together on one line. */
.quick-card__name,
.quick-card__line {
  display: block;
}

.quick-card__name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ivory);
}

.quick-card:hover .quick-card__name {
  color: var(--gold-200);
}

.quick-card__line {
  margin-top: 0.1875rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--gold-600);
}

/* ==========================================================================
   23. SCROLL REVEAL
   Soft fade-in as sections enter the viewport.

   The hidden starting state is scoped to `.js`, a class set by a one-line
   inline script in each page's <head>. With JavaScript disabled that class is
   never added, so the content simply renders visible and nothing is lost.
   ========================================================================== */

.js .fade-up {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 700ms var(--ease-refined), transform 700ms var(--ease-refined);
}

.js .fade-up.is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered children inside a revealed group. */
.js .fade-up[data-delay="1"] {
  transition-delay: 90ms;
}
.js .fade-up[data-delay="2"] {
  transition-delay: 180ms;
}
.js .fade-up[data-delay="3"] {
  transition-delay: 270ms;
}

/* ==========================================================================
   23b. CATALOGUE: SEARCH, EMPTY STATES AND IMAGE PLACEHOLDERS

   Added when the catalogue became database-driven. Everything here is a new
   class — nothing above this point was changed, so the existing pages look
   exactly as they did.
   ========================================================================== */

/* ---- Search ---------------------------------------------------------------
   A plain GET form, so a search has a real URL and works without JavaScript.
   --------------------------------------------------------------------------- */

/* Mobile stacks search then sort; from tablet up they sit on one row with the
   sort pushed to the right, and the category chips run beneath. */
.catalogue-toolbar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.catalogue-search {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.catalogue-search__field {
  flex: 1;
  min-width: 0;
}

.catalogue-search__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.catalogue-sort {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.catalogue-sort__field {
  min-width: 0;
}

@media (min-width: 640px) {
  .catalogue-search {
    flex-direction: row;
    align-items: flex-end;
  }

  .catalogue-search__actions {
    flex-shrink: 0;
  }
}

@media (min-width: 1024px) {
  .catalogue-toolbar {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }

  .catalogue-search {
    flex: 1;
    max-width: 38rem;
  }

  .catalogue-sort {
    flex-direction: row;
    align-items: flex-end;
    flex-shrink: 0;
  }

  .catalogue-sort__field {
    width: 14rem;
  }
}

/* The category chips are links now rather than buttons, so the active state
   is aria-current. The pressed styling above is reused verbatim. */
.category-chip[aria-current="page"] {
  border-color: var(--gold-500);
  background-color: rgba(198, 163, 83, 0.1);
  color: var(--gold-100);
}

.category-chip[aria-current="page"] .category-chip__count {
  color: var(--gold-500);
}

/* ---- Category navigation on narrow screens --------------------------------
   The chips scroll sideways rather than wrapping into a tall stack that
   pushes the products off the screen. The scroll is contained here, so the
   page itself never scrolls horizontally.
   --------------------------------------------------------------------------- */

.category-nav--scroll {
  position: relative;
}

.category-nav__list--scroll {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-700) transparent;
}

.category-nav__list--scroll > li {
  scroll-snap-align: start;
}

.category-nav__list--scroll .category-chip {
  white-space: nowrap;
}

.category-nav__list--scroll::-webkit-scrollbar {
  height: 3px;
}

.category-nav__list--scroll::-webkit-scrollbar-thumb {
  background-color: var(--gold-700);
  border-radius: 2px;
}

/* Once everything fits, centre them again as before. */
@media (min-width: 1024px) {
  .category-nav__list--scroll {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    padding-bottom: 0;
  }
}

.catalogue-status {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--dim);
}

/* ---- Pagination ----------------------------------------------------------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}

.pagination__pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination__page,
.pagination__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--parchment);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  transition: border-color var(--speed) var(--ease-refined),
              color var(--speed) var(--ease-refined),
              background-color var(--speed) var(--ease-refined);
}

.pagination__step {
  padding-inline: 1rem;
}

a.pagination__page:hover,
a.pagination__step:hover {
  border-color: var(--gold-500);
  color: var(--gold-200);
  background-color: rgba(198, 163, 83, 0.05);
}

.pagination__page.is-current {
  border-color: var(--gold-500);
  background-color: rgba(198, 163, 83, 0.1);
  color: var(--gold-100);
}

.pagination__step.is-disabled {
  opacity: 0.3;
  cursor: default;
}

/* ---- Empty and unavailable states ----------------------------------------- */

.catalogue-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  max-width: 34rem;
  margin-inline: auto;
  padding: 3.5rem 1.5rem;
  text-align: center;
  background-color: var(--charcoal);
  border: 1px solid var(--hairline);
  border-radius: 2px;
}

.catalogue-empty svg {
  width: 0.625rem;
  height: 0.625rem;
  fill: var(--gold-600);
}

.catalogue-empty__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  color: var(--ivory);
}

.catalogue-empty p {
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--muted);
}

.catalogue-empty__actions {
  margin-top: 0.75rem;
}

/* ---- Category line on a product card --------------------------------------
   Mirrors the eyebrow already used above the title on a product page.
   --------------------------------------------------------------------------- */

.product-card__eyebrow {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-600);
}

/* ---- Footer map link ------------------------------------------------------
   Sits under the address on its own line so a long address never collides
   with it on a narrow screen.
   --------------------------------------------------------------------------- */

.footer-map-link {
  /* flex, not inline-flex: the link sits on its own line under the address
     instead of trailing the last word, which looked cramped once a real
     address was in place. width:fit-content keeps the hover area tight. */
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: fit-content;
  margin-top: 0.4375rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--gold-500);
  transition: color var(--speed) var(--ease-refined);
}

.footer-map-link:hover { color: var(--gold-300, var(--gold-200)); }

.footer-map-link svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.footer-contact-list dd { line-height: 1.65; }

/* ---- Enquiry forms --------------------------------------------------------
   Added when the forms started being stored rather than only composing a
   WhatsApp message. They reuse the existing .form and .field styling; only
   the states below are new.
   --------------------------------------------------------------------------- */

.req {
  color: var(--gold-500);
  font-weight: 600;
}

.field__control.is-invalid {
  border-color: var(--crimson-500, #8e2420);
}

.form-alert {
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  font-size: 0.875rem;
  line-height: 1.7;
  border: 1px solid;
  border-radius: 2px;
}

.form-alert--success {
  color: #a9d9bd;
  border-color: rgba(76, 154, 114, 0.45);
  background-color: rgba(76, 154, 114, 0.1);
}

.form-alert--error {
  color: #e8b0ac;
  border-color: rgba(142, 36, 32, 0.5);
  background-color: rgba(142, 36, 32, 0.12);
}

/* The product an enquiry is about, shown as read-only context above the
   fields so the visitor can see what they are asking about. */
.enquiry-context {
  padding: 0.875rem 1.125rem;
  margin-bottom: 1.5rem;
  background-color: var(--ink);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--gold-500);
  border-radius: 2px;
}

.enquiry-context__label {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-500);
}

.enquiry-context__name {
  margin-top: 0.1875rem;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: var(--ivory);
}

/* The spam trap. Moved off-screen rather than display:none, because some
   bots skip anything that is outright hidden. A person never sees it, never
   tabs into it, and screen readers skip it via aria-hidden on the wrapper. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Gallery previous / next ----------------------------------------------
   Added when the gallery became database-driven and can hold any number of
   images. They sit inside the main frame, stay quiet until the pointer is
   over it, and are always visible on touch, where there is no hover.
   --------------------------------------------------------------------------- */

.gallery__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  transform: translateY(-50%);
  color: var(--gold-200);
  background-color: rgba(8, 8, 8, 0.66);
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--speed) var(--ease-refined),
              border-color var(--speed) var(--ease-refined),
              opacity var(--speed) var(--ease-refined);
}

.gallery__nav--prev { left: 0.75rem; }
.gallery__nav--next { right: 0.75rem; }

.gallery__nav svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gallery__nav:hover {
  background-color: rgba(8, 8, 8, 0.85);
  border-color: var(--gold-500);
}

/* On a mouse the controls fade in with the frame, so a still page stays calm.
   Focus brings them back for keyboard users. */
@media (hover: hover) and (pointer: fine) {
  .gallery__nav {
    opacity: 0;
  }

  .gallery__main:hover .gallery__nav,
  .gallery__nav:focus-visible {
    opacity: 1;
  }
}

.gallery__counter {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  padding: 0.25rem 0.625rem;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  color: var(--parchment);
  background-color: rgba(8, 8, 8, 0.66);
  border: 1px solid var(--hairline);
  border-radius: 2px;
}

/* With more than four images the strip scrolls rather than shrinking the
   thumbnails to nothing. */
.gallery__thumbs--scroll {
  display: flex;
  overflow-x: auto;
  gap: 0.875rem;
  padding-bottom: 0.375rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-700) transparent;
}

.gallery__thumbs--scroll > li {
  flex: 0 0 calc(25% - 0.66rem);
  min-width: 4.5rem;
}

.gallery__thumbs--scroll::-webkit-scrollbar {
  height: 3px;
}

.gallery__thumbs--scroll::-webkit-scrollbar-thumb {
  background-color: var(--gold-700);
  border-radius: 2px;
}

/* ---- Missing image --------------------------------------------------------
   A product with no usable image keeps the card's proportions instead of
   collapsing the grid.
   --------------------------------------------------------------------------- */

.product-card__placeholder,
.gallery__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  height: 100%;
  padding: 1.75rem;
  text-align: center;
}

.gallery__placeholder {
  aspect-ratio: 4 / 5;
}

.product-card__placeholder span,
.gallery__placeholder span {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* These sit on the white media tile, not on the dark page. */
  color: var(--media-fg);
}

.product-card__placeholder svg,
.gallery__placeholder svg {
  width: 0.625rem;
  height: 0.625rem;
  fill: var(--gold-700);
}

/* ==========================================================================
   24. UTILITIES
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.stack-center {
  display: flex;
  justify-content: center;
}

.mt-6 {
  margin-top: 1.5rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}

.hide-below-md {
  display: none;
}

@media (min-width: 768px) {
  .hide-below-md {
    display: inline-flex;
  }
}

/* ==========================================================================
   25. REDUCED MOTION
   Everything decorative stops. Entrance animations resolve instantly rather
   than being cancelled, so no content is ever left invisible.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  .reveal {
    opacity: 1;
  }

  .js .fade-up {
    opacity: 1;
    transform: none;
  }
}