/* =====================================================================
   NAUCH — stylesheet
   ---------------------------------------------------------------------
   Organized by section so you can find and change one thing at a time.
   Search this file for a number (e.g. "10.") to jump to that section.

     1.  Fonts
     2.  Design tokens        (colors, fonts, easing)
     3.  Reset & base elements
     4.  Accessibility & form resets
     5.  Site header          (top bar, logo, nav, search, icons)
     6.  Hero section         (homepage banner)
     7.  Shared typography    (headings, small labels, body copy)
     8.  Buttons
     9.  Hero image
     10. Catalogue / product grid  (shop page, cards, filters)
     11. Site footer
     12. Breadcrumbs
     13. Product detail page  (gallery, price, size/colour, materials)
     14. Shared page wrapper  (cart / checkout / confirmation / 404)
     15. Cart page
     16. Checkout page
     17. Order confirmation page
     18. Notifications        (flash messages, cart toast)
     19. Responsive — tablet  (900px and below)
     20. Responsive — mobile  (560px and below)
     21. Accessibility — reduced motion

   TIP: most colors, fonts, and spacing "rhythm" live in section 2
   (Design tokens) as CSS variables — change a value there and it
   updates everywhere it's used, instead of hunting through the file.
   ===================================================================== */

/* ======================================================================
   1. FONTS
   ====================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
/* ======================================================================
   2. DESIGN TOKENS  (colors, fonts, easing — change the look of the whole site here)
   ====================================================================== */
:root {
  --paper:#f7f4ed;
  --ink:#24231f;
  --muted:#69655d;
  --line:#d8d1c5;
  --ochre:#ad6b24;
  --dark:#1d1d1b;
  --serif:'Playfair Display',Georgia,serif;
  --sans:Manrope,Arial,sans-serif;
  --mono:'DM Mono',monospace;
  --ease:cubic-bezier(.23,1,.32,1);
}
/* ======================================================================
   3. RESET & BASE ELEMENTS
   ====================================================================== */
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
}
/* ======================================================================
   4. ACCESSIBILITY & FORM RESETS
   ====================================================================== */
.skip-link {
  position:fixed;
  top:-80px;
  left:20px;
  z-index:50;
  background:var(--ink);
  color:#fff;
  padding:12px 18px;
}
.skip-link:focus {
  top:20px;
}
a {
  color:inherit;
  text-decoration:none;
}
button,
input,
select,
textarea {
  font:inherit;
}
button {
  cursor:pointer;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
/* ======================================================================
   5. SITE HEADER  (top bar, logo, nav, search, cart/wishlist icons)
   ====================================================================== */
.announcement {
  background:var(--dark);
  color:#f7f4ed;
  text-align:center;
  padding:8px 18px;
  font:11px var(--mono);
  letter-spacing:.05em;
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
}
.header-main {
  height:84px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  max-width:1440px;
  margin:auto;
  padding:0 3vw;
  border-bottom:1px solid var(--line);
}
.wordmark {
  font:600 25px var(--serif);
  letter-spacing:.17em;
  display:flex;
  align-items:center;
}
.wordmark img {
  display:block;
  height:56px;
  width:auto;
  border-radius:10px;
}
.wordmark span,
.footer-title span {
  color:var(--ochre);
  font-style:italic;
}
.site-nav {
  display:flex;
  gap:26px;
  font:11px var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.site-nav a {
  position:relative;
}
.site-nav a:after {
  content:'';
  position:absolute;
  bottom:-6px;
  left:0;
  width:100%;
  height:1px;
  background:var(--ochre);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .22s var(--ease);
}
.site-nav a:hover:after {
  transform:scaleX(1);
  transform-origin:left;
}
.nav-more {
  display:none;
}
.header-actions {
  justify-self:end;
  display:flex;
  gap:3px;
}
.icon-button,
.menu-toggle {
  border:0;
  background:transparent;
  position:relative;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  color:var(--ink);
}
.icon-button svg {
  width:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.45;
}
.icon-button b {
  position:absolute;
  right:0;
  top:1px;
  border-radius:50%;
  min-width:16px;
  height:16px;
  padding:0 3px;
  background:var(--ochre);
  color:#fff;
  font:10px/16px var(--mono);
}
.menu-toggle {
  display:none;
}
.search-panel {
  display:none;
  grid-template-columns:1fr auto;
  gap:10px;
  max-width:900px;
  margin:0 auto;
  padding:18px 3vw;
  border-bottom:1px solid var(--line);
}
.search-panel.open {
  display:grid;
}
.search-panel label {
  position:absolute;
  clip:rect(0,0,0,0);
}
.search-panel input {
  min-width:0;
  border:1px solid var(--ink);
  border-radius:0;
  padding:12px 14px;
  background:transparent;
}
.search-panel button {
  border:0;
  background:var(--ink);
  color:#fff;
  padding:0 20px;
}
/* ======================================================================
   6. HERO SECTION  (homepage banner)
   ====================================================================== */
.hero {
  min-height:650px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  max-width:1440px;
  margin:auto;
}
.hero-copy {
  padding:clamp(70px,13vw,185px) clamp(7vw,12vw,190px) 80px 7vw;
  align-self:center;
}
/* ======================================================================
   7. SHARED TYPOGRAPHY  (headings, small labels, body copy)
   ====================================================================== */
.eyebrow,
.product-meta {
  font:10px var(--mono);
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--ochre);
}
h1,
h2,
h3,
p {
  margin-top:0;
}
.hero h1,
.catalogue-intro h2,
.utility-page>h1,
.checkout-intro h1,
.confirmation h1 {
  font:500 clamp(46px,5.8vw,86px)/1.04 var(--serif);
  letter-spacing:-.04em;
  margin:16px 0 25px;
}
.hero-copy>p:not(.eyebrow) {
  max-width:470px;
  color:var(--muted);
  font-size:16px;
}
/* ======================================================================
   8. BUTTONS
   ====================================================================== */
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:15px 18px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:#fff;
  font:11px var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  transition:transform .16s var(--ease),background .16s var(--ease),color .16s var(--ease);
}
.button:hover {
  background:var(--ochre);
  border-color:var(--ochre);
}
.button:active {
  transform:scale(.97);
}
.button:disabled {
  background:var(--line);
  border-color:var(--line);
  color:var(--ink);
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}
.button span {
  font-size:18px;
  line-height:10px;
}
.button-outline {
  background:transparent;
  color:var(--ink);
}
.button-outline:hover {
  color:#fff;
}
.full-width {
  width:100%;
}
/* ======================================================================
   9. HERO IMAGE
   ====================================================================== */
.hero-image {
  position:relative;
  overflow:hidden;
  background:#e7e0d5;
}
.hero-image img {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease), opacity .5s var(--ease);
}
.hero-image:hover img {
  transform:scale(1.035);
}
.hero-image-secondary {
  opacity:0;
}
.hero-image:hover .hero-image-secondary {
  opacity:1;
}
.hero-image span {
  position:absolute;
  bottom:24px;
  left:24px;
  color:#fff;
  font:11px var(--mono);
  letter-spacing:.06em;
  text-shadow:0 1px 14px #000;
}
/* ======================================================================
   10. CATALOGUE / PRODUCT GRID  (shop page, product cards, filters, search results)
   ====================================================================== */
.catalogue-section {
  max-width:1440px;
  margin:auto;
  padding:96px 7vw 135px;
  border-top:1px solid var(--line);
}
.catalogue-intro {
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin-bottom:45px;
}
.catalogue-intro h2 {
  font-size:clamp(38px,4vw,64px);
  max-width:600px;
  margin:0;
}
.filters {
  display:flex;
  gap:8px;
  overflow:auto;
  padding-bottom:25px;
  border-bottom:1px solid var(--line);
  scrollbar-width:none;
}
.filter {
  flex:0 0 auto;
  padding:9px 0;
  margin-right:18px;
  border-bottom:1px solid transparent;
  font:11px var(--mono);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.filter.active,
.filter:hover {
  border-color:var(--ochre);
  color:var(--ochre);
}
.result-summary {
  padding:18px 0;
  font:11px var(--mono);
  color:var(--muted);
}
.result-summary strong {
  color:var(--ink);
}
.product-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:46px 18px;
}
.product-card {
  min-width:0;
}
.product-image {
  position:relative;
  display:block;
  aspect-ratio:3/4;
  overflow:hidden;
  background:#e7e0d5;
}
.product-image img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .65s var(--ease), opacity .45s var(--ease);
}
.product-card:hover .product-image img {
  transform:scale(1.035);
}
.product-image-secondary {
  opacity:0;
}
.product-card:hover .product-image-secondary {
  opacity:1;
}
.product-meta {
  display:flex;
  justify-content:space-between;
  padding:13px 0 7px;
  color:var(--muted);
  font-size:9px;
}
.product-heading {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:start;
}
.product-heading h3 {
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  margin:0;
}
.wishlist-toggle {
  flex:0 0 auto;
  border:0;
  background:transparent;
  padding:0;
  font:23px/18px var(--serif);
  color:var(--ink);
  transition:color .15s var(--ease),transform .15s var(--ease);
}
.wishlist-toggle.saved {
  color:var(--ochre);
  transform:scale(1.1);
}
.price {
  margin:5px 0 2px;
  font:12px var(--mono);
}
.price del,
.product-price del {
  color:var(--muted);
  margin-right:8px;
}
.stock {
  margin:0;
  color:var(--muted);
  font:10px var(--mono);
  text-transform:uppercase;
}
.stock.in-stock {
  color:#476b49;
}
.stock.sold-out {
  color:#a33d34;
}
.quiet-add {
  display:flex;
  justify-content:space-between;
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  margin-top:14px;
  padding:8px 0;
  color:var(--ink);
  font:10px var(--mono);
  text-transform:uppercase;
  letter-spacing:.06em;
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.quiet-add:hover {
  border-color:var(--ochre);
  color:var(--ochre);
}
.quiet-add span {
  font-size:17px;
  line-height:10px;
}
.empty-state {
  max-width:520px;
  margin:45px auto;
  padding:65px 30px;
  text-align:center;
  border:1px solid var(--line);
}
.empty-state h2 {
  font:500 39px var(--serif);
}
.empty-state p {
  color:var(--muted);
}
.text-link {
  display:inline-block;
  border-bottom:1px solid var(--ochre);
  padding-bottom:3px;
  color:var(--ochre);
  font:11px var(--mono);
  text-transform:uppercase;
}
/* ======================================================================
   11. SITE FOOTER
   ====================================================================== */
.site-footer {
  padding:68px 7vw 20px;
  background:var(--dark);
  color:#eee9de;
}
.footer-title {
  font:500 clamp(35px,4vw,58px) var(--serif);
  letter-spacing:.13em;
}
.footer-title img {
  display:block;
  height:clamp(64px,9vw,110px);
  width:auto;
  border-radius:14px;
}
.footer-title small {
  display:block;
  margin-top:8px;
  font:11px var(--mono);
  letter-spacing:.04em;
  color:#bcb6ab;
}
.footer-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:28px;
  padding:58px 0;
}
.footer-grid h2 {
  margin:0 0 15px;
  color:#bb792e;
  font:10px var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.footer-grid a,
.footer-grid p {
  display:block;
  margin:0 0 9px;
  color:#d1cbc0;
  font-size:13px;
}
.footer-grid a:hover {
  color:#fff;
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  padding-top:18px;
  border-top:1px solid #46443f;
  color:#aaa398;
  font:10px var(--mono);
}
/* ======================================================================
   12. BREADCRUMBS
   ====================================================================== */
.breadcrumbs {
  max-width:1440px;
  margin:auto;
  padding:22px 7vw;
  border-bottom:1px solid var(--line);
  font:10px var(--mono);
  text-transform:uppercase;
  color:var(--muted);
}
.breadcrumbs span {
  margin:0 9px;
}
/* ======================================================================
   13. PRODUCT DETAIL PAGE  (gallery, price, size/colour picker, materials & care)
   ====================================================================== */
.product-layout {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);
  max-width:1440px;
  margin:auto;
}
.product-gallery {
  display:block;
  background:var(--paper);
}
.gallery-viewer {
  aspect-ratio:1/1;
  overflow:hidden;
  background:#e7e0d5;
}
.gallery-viewer img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.gallery-thumbs {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:14px 0 0;
}
.gallery-thumb {
  width:72px;
  height:72px;
  padding:0;
  border:1px solid var(--line);
  background:#e7e0d5;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .18s var(--ease);
}
.gallery-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.gallery-thumb:hover {
  border-color:var(--ochre);
}
.gallery-thumb.active {
  border-color:var(--ink);
  border-width:2px;
}
.product-info {
  padding:75px clamp(38px,7vw,115px);
  position:sticky;
  top:0;
  align-self:start;
}
.product-info h1 {
  font:500 clamp(38px,4vw,62px)/1.06 var(--serif);
  letter-spacing:-.035em;
  margin:14px 0;
}
.wishlist-toggle.large {
  font-size:32px;
}
.product-price {
  font:15px var(--mono);
  margin-bottom:8px;
}
.product-description {
  margin:30px 0;
  color:var(--muted);
  font-size:15px;
}
.product-options {
  display:grid;
  gap:18px;
  margin:30px 0;
}
.product-options label,
.checkout-form label {
  display:grid;
  gap:7px;
  font:10px var(--mono);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.product-options select,
.checkout-form input,
.checkout-form textarea {
  width:100%;
  border:1px solid var(--line);
  border-radius:0;
  background:transparent;
  padding:11px;
  color:var(--ink);
}
.quantity-control {
  display:inline-grid;
  grid-template-columns:36px 1fr 36px;
  max-width:140px;
  border:1px solid var(--line);
  align-items:center;
}
.quantity-control button {
  height:38px;
  border:0;
  background:transparent;
  font-size:18px;
}
.quantity-control input {
  border:0!important;
  padding:0!important;
  text-align:center;
  min-width:0;
}
.quantity-control span {
  text-align:center;
  font:12px var(--mono);
}
details {
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
details summary {
  cursor:pointer;
  font:11px var(--mono);
  text-transform:uppercase;
  letter-spacing:.06em;
}
details p {
  margin:12px 0 0;
  color:var(--muted);
  font-size:13px;
}
.related {
  max-width:1440px;
  margin:auto;
  padding:100px 7vw;
}
/* ======================================================================
   14. SHARED PAGE WRAPPER  (cart / checkout / confirmation / 404 outer spacing)
   ====================================================================== */
.utility-page,
.checkout-page,
.confirmation,
.not-found {
  max-width:1120px;
  margin:auto;
  padding:90px 7vw 130px;
}
.utility-page>h1 {
  font-size:clamp(48px,5vw,72px);
}
/* ======================================================================
   15. CART PAGE
   ====================================================================== */
.cart-view {
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:50px;
  margin-top:50px;
}
.cart-lines {
  border-top:1px solid var(--line);
}
.cart-line {
  display:grid;
  grid-template-columns:150px 1fr auto;
  gap:20px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.cart-line img {
  width:150px;
  aspect-ratio:3/4;
  object-fit:cover;
  background:#e7e0d5;
}
.cart-line h2 {
  font:500 25px var(--serif);
  margin:5px 0;
}
.cart-line-actions {
  display:flex;
  min-width:120px;
  flex-direction:column;
  align-items:end;
  gap:14px;
}
.cart-line-actions strong {
  font:12px var(--mono);
}
.remove {
  border:0;
  border-bottom:1px solid #a33d34;
  background:transparent;
  padding:0;
  color:#a33d34;
  font:10px var(--mono);
  text-transform:uppercase;
}
.cart-variants {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:10px;
  font:12px var(--sans);
  color:var(--muted);
}
.cart-variants .text-link {
  font:10px var(--mono);
}
.cart-total {
  height:max-content;
  padding:24px;
  border:1px solid var(--ink);
}
.cart-total>div,
.total-line {
  display:flex;
  justify-content:space-between;
  margin-bottom:15px;
  font:11px var(--mono);
  text-transform:uppercase;
}
.cart-total>div:last-of-type {
  padding:15px 0;
  border-top:1px solid var(--line);
  font-size:13px;
}
.cart-total .text-link {
  margin-top:20px;
}
/* ======================================================================
   16. CHECKOUT PAGE
   ====================================================================== */
.checkout-page {
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:9vw;
}
.checkout-intro h1 {
  font-size:clamp(46px,5vw,70px);
}
.checkout-intro>p:not(.eyebrow) {
  color:var(--muted);
}
.checkout-form {
  display:grid;
  grid-template-columns:1fr 260px;
  gap:35px 25px;
}
.checkout-form section {
  grid-column:1;
  border-top:1px solid var(--line);
  padding-top:20px;
  display:grid;
  gap:16px;
}
.checkout-form h2,
.checkout-summary h2 {
  font:500 28px var(--serif);
  margin:0 0 7px;
}
.checkout-form small {
  font-size:9px;
  color:var(--muted);
}
.checkout-summary {
  grid-column:2;
  grid-row:1 / span 3;
  align-self:start;
  position:sticky;
  top:22px;
  padding:22px;
  border:1px solid var(--ink);
}
.checkout-item {
  display:flex;
  justify-content:space-between;
  padding:11px 0;
  border-bottom:1px solid var(--line);
  font-size:12px;
}
.checkout-item small {
  display:block;
  margin-top:3px;
  font:9px var(--mono);
  text-transform:uppercase;
}
.total-line {
  padding:16px 0;
  margin:12px 0;
  border-bottom:1px solid var(--line);
  font-size:13px;
}
.summary-note {
  margin:13px 0 0;
  color:var(--muted);
  font-size:11px;
}
/* ======================================================================
   17. ORDER CONFIRMATION PAGE
   ====================================================================== */
.confirmation {
  max-width:800px;
  text-align:center;
}
.confirmation h1 {
  font-size:clamp(50px,7vw,82px);
}
.order-number {
  margin:30px 0;
  font:17px var(--mono);
  color:var(--ochre);
}
.confirmation>p:not(.eyebrow):not(.order-number):not(.fallback) {
  color:var(--muted);
  max-width:560px;
  margin:0 auto 28px;
}
.confirmation-actions {
  display:flex;
  justify-content:center;
  gap:12px;
}
.fallback {
  font:11px var(--mono);
  margin-top:25px;
}
/* ======================================================================
   18. NOTIFICATIONS  (flash messages, cart toast)
   ====================================================================== */
.flash-notice {
  position:fixed;
  z-index:10;
  right:20px;
  bottom:20px;
  max-width:360px;
  padding:14px 17px;
  background:#5d3932;
  color:#fff;
  font-size:13px;
  box-shadow:0 13px 40px #0003;
}
.cart-toast {
  position:fixed;
  z-index:30;
  right:22px;
  bottom:22px;
  transform:translateY(90px);
  padding:13px 17px;
  background:var(--ink);
  color:#fff;
  font:11px var(--mono);
  box-shadow:0 13px 40px #0003;
  transition:transform .24s var(--ease);
}
.cart-toast.show {
  transform:none;
}
.whatsapp-float {
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:25;
  display:flex;
  align-items:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25d366;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  overflow:hidden;
  transition:width .28s var(--ease), border-radius .28s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.whatsapp-float:hover {
  width:190px;
  border-radius:30px;
  box-shadow:0 14px 36px rgba(0,0,0,.32);
  transform:translateY(-2px);
}
.whatsapp-float svg {
  flex:0 0 auto;
  width:56px;
  height:56px;
  padding:15px;
  fill:#fff;
}
.whatsapp-float-tip {
  flex:0 0 auto;
  padding-right:18px;
  color:#fff;
  font:11px var(--mono);
  text-transform:uppercase;
  letter-spacing:.05em;
  white-space:nowrap;
  opacity:0;
  transition:opacity .2s var(--ease) .05s;
}
.whatsapp-float:hover .whatsapp-float-tip {
  opacity:1;
}

/* ======================================================================
   19. RESPONSIVE — TABLET  (900px and below)
   ====================================================================== */
@media(max-width:900px) {
  .header-main {
    height:72px;
    grid-template-columns:auto 1fr auto;
  }
  .menu-toggle {
    display:grid;
    gap:4px;
    place-content:center;
  }
  .menu-toggle span:not(.sr-only) {
    display:block;
    width:18px;
    height:1px;
    background:var(--ink);
  }
  .wordmark {
    justify-self:center;
    font-size:22px;
  }
  .wordmark img {
    height:42px;
  }
  .site-nav {
    display:none;
  }
  .site-nav.open {
    position:absolute;
    top:104px;
    left:0;
    right:0;
    z-index:10;
    display:flex;
    flex-direction:column;
    gap:0;
    padding:14px 6vw 26px;
    max-height:calc(100vh - 104px);
    overflow-y:auto;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .site-nav.open a {
    padding:13px 0;
  }
  .site-nav.open .nav-more {
    display:block;
    margin-top:6px;
    padding-top:10px;
    border-top:1px solid var(--line);
  }
  .nav-group {
    margin-bottom:8px;
  }
  .nav-group-title {
    display:block;
    margin-top:14px;
    color:var(--muted);
    font:10px var(--mono);
    text-transform:uppercase;
    letter-spacing:.06em;
  }
  .nav-more a {
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .nav-more a span {
    color:var(--muted);
    font-size:10px;
  }
  .hero {
    min-height:auto;
    grid-template-columns:1fr;
  }
  .hero-copy {
    padding:92px 7vw 65px;
  }
  .hero-image {
    height:560px;
  }
  .catalogue-intro {
    display:block;
  }
  .catalogue-intro h2 {
    margin-top:10px;
  }
  .product-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:38px 12px;
  }
  .footer-grid {
    grid-template-columns:repeat(3,1fr);
  }
  .product-layout {
    grid-template-columns:1fr;
  }
  .product-info {
    position:static;
    padding:48px 7vw;
  }
  .cart-view,
  .checkout-page {
    grid-template-columns:1fr;
  }
  .checkout-form {
    grid-template-columns:1fr;
  }
  .checkout-summary {
    grid-column:1;
    grid-row:auto;
    position:static;
  }
  .cart-total {
    max-width:400px;
  }
  .footer-title {
    font-size:43px;
  }
}

/* ======================================================================
   20. RESPONSIVE — MOBILE  (560px and below)
   ====================================================================== */
@media(max-width:560px) {
  .announcement {
    font-size:9px;
  }
  .header-main {
    padding:0 4vw;
  }
  .header-actions {
    gap:0;
  }
  .icon-button {
    width:34px;
  }
  .hero-copy {
    padding-top:68px;
  }
  .hero h1,
  .catalogue-intro h2 {
    font-size:43px;
  }
  .hero-image {
    height:470px;
  }
  .catalogue-section {
    padding:70px 4vw 90px;
  }
  .product-grid {
    gap:30px 10px;
  }
  .product-meta {
    font-size:8px;
  }
  .product-heading h3 {
    font-size:12px;
  }
  .quiet-add {
    font-size:8px;
  }
  .footer-grid {
    grid-template-columns:repeat(2,1fr);
    padding:45px 0 25px;
  }
  .footer-bottom {
    font-size:8px;
  }
  .breadcrumbs {
    padding:15px 4vw;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .gallery-thumb {
    width:60px;
    height:60px;
  }
  .product-info {
    padding:35px 5vw 60px;
  }
  .related {
    padding:70px 4vw;
  }
  .utility-page,
  .checkout-page,
  .confirmation,
  .not-found {
    padding:65px 5vw 90px;
  }
  .cart-line {
    grid-template-columns:92px 1fr;
    gap:12px;
  }
  .cart-line img {
    width:92px;
  }
  .cart-line-actions {
    grid-column:2;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
  .cart-variants {
    flex-direction:column;
  }
  .confirmation-actions {
    flex-direction:column;
  }
  .checkout-form {
    gap:28px;
  }
  .search-panel {
    padding-left:4vw;
    padding-right:4vw;
  }
}

/* ======================================================================
   21. ACCESSIBILITY — REDUCED MOTION
   ====================================================================== */
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
  }
}