/*
Theme Name: MARG Astra Child
Description: Update-safe editorial storefront for MARG.
Author: MARG
Template: astra
Version: 0.4.0
Text Domain: marg-astra-child
*/

:root {
  --marg-black: #12110f;
  --marg-ink: #24211d;
  --marg-brown: #754b32;
  --marg-tan: #b99273;
  --marg-cream: #f4f0e9;
  --marg-paper: #fbfaf7;
  --marg-sand: #e8dfd2;
  --marg-line: rgba(18, 17, 15, 0.16);
  --marg-white: #fff;
  --marg-font-display: Georgia, "Times New Roman", serif;
  --marg-font-sans: Arial, Helvetica, sans-serif;
  --marg-shell: 1760px;
  --marg-shell-pad: clamp(22px, 4vw, 76px);
  --marg-space-1: 8px;
  --marg-space-2: 16px;
  --marg-space-3: 24px;
  --marg-space-4: 40px;
  --marg-space-5: 64px;
  --marg-space-6: 96px;
  --marg-space-7: 144px;
  --marg-header-height: 84px;
  --marg-transition: 220ms cubic-bezier(.2, .65, .3, 1);
}

html { scroll-behavior: smooth; }

body.marg-storefront {
  margin: 0;
  overflow-x: hidden;
  background: var(--marg-paper);
  color: var(--marg-ink);
  font-family: var(--marg-font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.marg-drawer-open { overflow: hidden; }

.marg-storefront *,
.marg-storefront *::before,
.marg-storefront *::after { box-sizing: border-box; }

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

.marg-storefront a {
  color: inherit;
  text-decoration: none;
}

.marg-storefront button,
.marg-storefront input,
.marg-storefront textarea { font: inherit; }

.marg-shell {
  width: min(100%, var(--marg-shell));
  margin-inline: auto;
  padding-inline: var(--marg-shell-pad);
}

.marg-skip-link {
  position: fixed;
  z-index: 10000;
  top: 10px;
  left: 10px;
  transform: translateY(-160%);
  background: var(--marg-black);
  color: var(--marg-white);
  padding: 12px 18px;
}

.marg-skip-link:focus { transform: translateY(0); }

.marg-eyebrow {
  margin: 0 0 16px;
  color: currentColor;
  font-family: var(--marg-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .19em;
  line-height: 1.3;
  text-transform: uppercase;
}

.marg-storefront h1,
.marg-storefront h2,
.marg-storefront h3,
.marg-storefront p { margin-top: 0; }

.marg-storefront h1,
.marg-storefront h2 {
  color: var(--marg-black);
  font-family: var(--marg-font-display);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .98;
}

.marg-storefront h1 { font-size: clamp(54px, 7vw, 132px); }
.marg-storefront h2 { font-size: clamp(42px, 5vw, 86px); }

.marg-button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid var(--marg-black);
  border-radius: 0;
  padding: 14px 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  transition: background var(--marg-transition), color var(--marg-transition);
}

.marg-button svg,
.marg-text-link svg,
.marg-mobile-nav svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.marg-button--dark { background: var(--marg-black); color: var(--marg-white) !important; }
.marg-button--dark:hover,
.marg-button--dark:focus-visible { background: var(--marg-brown); border-color: var(--marg-brown); color: var(--marg-white); }

.marg-text-link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: gap var(--marg-transition), color var(--marg-transition);
}

.marg-text-link:hover,
.marg-text-link:focus-visible { gap: 28px; color: var(--marg-brown); }

/* Header */
.marg-header {
  position: sticky;
  z-index: 1000;
  top: 0;
  width: 100%;
  border-bottom: 1px solid var(--marg-line);
  background: rgba(251, 250, 247, .97);
  backdrop-filter: blur(14px);
  transition: box-shadow var(--marg-transition), background var(--marg-transition);
}

.marg-header.is-scrolled { box-shadow: 0 10px 34px rgba(18, 17, 15, .08); }
.admin-bar .marg-header { top: 32px; }

.marg-header__inner {
  position: relative;
  display: grid;
  min-height: var(--marg-header-height);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}

.marg-desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 34px);
}

.marg-desktop-nav a,
.marg-action-label,
.marg-language-switcher {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.marg-desktop-nav a,
.marg-language-switcher a { position: relative; }

.marg-desktop-nav a::after,
.marg-language-switcher a::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--marg-transition);
}

.marg-desktop-nav a:hover::after,
.marg-desktop-nav a:focus-visible::after,
.marg-language-switcher a:hover::after,
.marg-language-switcher a:focus-visible::after,
.marg-language-switcher a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.marg-wordmark {
  display: block;
  width: 138px;
  height: 46px;
  overflow: hidden;
  background: #000;
}

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

.marg-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 19px;
}

.marg-icon-button,
.marg-icon-link {
  position: relative;
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--marg-black);
  cursor: pointer;
}

.marg-storefront .marg-icon-button,
.marg-storefront .marg-icon-link {
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  color: var(--marg-black) !important;
  padding: 0;
}

.marg-icon-button svg,
.marg-icon-link svg {
  width: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.marg-storefront .marg-icon-button svg,
.marg-storefront .marg-icon-link svg { stroke: currentColor !important; }

.marg-search-button { width: auto; gap: 9px; padding: 0; }
.marg-language-switcher { display: flex; align-items: center; gap: 7px; }
.marg-language-switcher a[aria-current="page"] { font-weight: 800; }

.marg-cart-count {
  position: absolute;
  top: -1px;
  right: -3px;
  display: grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  background: var(--marg-brown);
  color: var(--marg-white);
  font-size: 9px;
  line-height: 1;
}

.marg-mobile-menu-button { display: none; }

.marg-search-panel {
  position: absolute;
  top: 100%;
  width: 100%;
  border-bottom: 1px solid var(--marg-line);
  background: var(--marg-paper);
  box-shadow: 0 14px 30px rgba(18, 17, 15, .08);
}

.marg-search-form {
  display: grid;
  padding-block: 28px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
}

.marg-search-form label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.marg-search-form input { min-width: 0; border: 0; border-bottom: 1px solid var(--marg-black); border-radius: 0; background: transparent; padding: 11px 0; color: var(--marg-black); outline: 0; }
.marg-search-form button { border: 0; background: transparent; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }

.marg-mobile-drawer,
.marg-drawer-backdrop { display: none; }

/* Hero */
.marg-hero {
  position: relative;
  display: grid;
  min-height: min(820px, calc(100vh - var(--marg-header-height)));
  grid-template-columns: minmax(500px, 1fr) minmax(0, .74fr);
  background: var(--marg-cream);
}

.marg-hero__copy {
  display: flex;
  padding: clamp(72px, 9vw, 160px) clamp(34px, 5vw, 96px);
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}

.marg-hero__copy h1 { max-width: 100%; margin-bottom: 42px; font-size: clamp(58px, 5.2vw, 104px); overflow-wrap: normal; }
.marg-hero__media { position: relative; min-width: 0; overflow: hidden; background: #16181b; }
.marg-hero__image {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: clamp(30px, 3vw, 66px);
  object-fit: contain;
  object-position: center;
}

/* Hover reveal. Both states are normalised to the same 1206x1454 footprint, so the
   crossfade happens in place with no reflow or frame-size change. site.js adds
   .has-hover-reveal only on hover-capable pointer devices. */
.marg-hero__image--reveal { opacity: 0; }

.marg-hero__media.has-hover-reveal .marg-hero__image {
  transition: opacity 620ms cubic-bezier(.32, .12, .2, 1);
  will-change: opacity;
}

.marg-hero__media.has-hover-reveal:hover .marg-hero__image--default,
.marg-hero__media.has-hover-reveal:focus-within .marg-hero__image--default { opacity: 0; }

.marg-hero__media.has-hover-reveal:hover .marg-hero__image--reveal,
.marg-hero__media.has-hover-reveal:focus-within .marg-hero__image--reveal { opacity: 1; }

.marg-section { padding-block: var(--marg-space-7); }

.marg-collection-intro {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: start;
  border-bottom: 1px solid var(--marg-line);
}

.marg-collection-intro > div { max-width: 850px; }
.marg-collection-intro h2 { margin-bottom: 28px; }
.marg-collection-intro > div p { max-width: 570px; margin-bottom: 0; color: #5d5851; font-size: 18px; }

.marg-collection-grid {
  display: grid;
  padding-top: var(--marg-space-6);
  padding-bottom: var(--marg-space-7);
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3vw, 52px);
}

.marg-collection-card {
  position: relative;
  display: block;
  min-height: clamp(560px, 63vw, 900px);
  overflow: hidden;
  background: var(--marg-sand);
  color: var(--marg-white);
}

.marg-collection-card--weekenders { margin-top: 110px; min-height: clamp(500px, 56vw, 790px); }
.marg-collection-card > img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.2,.65,.3,1); }
.marg-collection-card--backpacks > img { object-position: center 34%; }
.marg-collection-card--weekenders > img { object-position: center; }
.marg-collection-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10, 8, 6, .68)); }
.marg-collection-card__content { position: absolute; right: clamp(24px, 4vw, 58px); bottom: clamp(24px, 4vw, 58px); left: clamp(24px, 4vw, 58px); }
.marg-collection-card__content strong { display: block; margin-bottom: 20px; font-family: var(--marg-font-display); font-size: clamp(42px, 5vw, 78px); font-weight: 400; letter-spacing: -.04em; line-height: 1; }
.marg-collection-card__content > span:last-child { display: inline-flex; align-items: center; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.7); padding-bottom: 7px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.marg-collection-card__content svg { width: 17px; fill: none; stroke: currentColor; }
.marg-collection-card:hover > img,
.marg-collection-card:focus-visible > img { transform: scale(1.025); }

/* Showcase */
.marg-showcase { background: var(--marg-cream); }
.marg-showcase__header { display: flex; padding-top: var(--marg-space-7); align-items: end; justify-content: space-between; gap: 40px; }
.marg-showcase__header h2 { margin-bottom: 0; }
.marg-showcase__header > p { max-width: 440px; margin-bottom: 10px; color: #676058; }
.marg-showcase__grid { display: grid; padding-top: var(--marg-space-5); padding-bottom: var(--marg-space-7); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.marg-showcase-card__image { aspect-ratio: .78; overflow: hidden; background: #dedbd2; }
.marg-showcase-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--marg-transition); }
.marg-showcase-card:nth-child(2) .marg-showcase-card__image img,
.marg-showcase-card:nth-child(4) .marg-showcase-card__image img { object-fit: contain; }
.marg-showcase-card:hover img { transform: scale(1.018); }
.marg-showcase-card > div:last-child { display: flex; padding-top: 16px; align-items: baseline; justify-content: space-between; gap: 10px; }
.marg-showcase-card h3 { margin: 0; color: var(--marg-black); font-family: var(--marg-font-sans); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.marg-showcase-card p { margin: 0; color: #716b64; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

/* Editorial and story */
.marg-editorial-banner { display: grid; padding-top: var(--marg-space-7); padding-bottom: var(--marg-space-7); grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr); }
.marg-editorial-banner__media { height: min(800px, 70vw); overflow: hidden; background: #d4d0ce; }
.marg-editorial-banner__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.marg-editorial-banner__copy { display: flex; padding: clamp(48px, 7vw, 112px); align-items: flex-start; justify-content: center; flex-direction: column; background: var(--marg-brown); color: var(--marg-white); }
.marg-editorial-banner__copy h2 { margin-bottom: 46px; color: var(--marg-white); font-size: clamp(46px, 5vw, 86px); }

.marg-brand-intro { display: grid; padding-top: var(--marg-space-6); padding-bottom: var(--marg-space-7); grid-template-columns: 1fr 2fr; border-top: 1px solid var(--marg-line); }
.marg-brand-intro__index { color: #716b64; font-size: 11px; letter-spacing: .18em; }
.marg-brand-intro__copy { max-width: 920px; }
.marg-brand-intro__copy h2 { margin-bottom: 34px; }
.marg-brand-intro__copy > p:not(.marg-eyebrow) { max-width: 640px; margin-bottom: 34px; color: #5d5851; font-size: 18px; }

.marg-service-shell { padding-block: var(--marg-space-6); border-top: 1px solid var(--marg-line); background: #ede7df; }
.marg-service-grid { display: grid; margin-top: 34px; grid-template-columns: repeat(3, 1fr); }
.marg-service-grid > div { min-height: 190px; padding: 28px clamp(24px, 3vw, 50px); border-left: 1px solid var(--marg-line); }
.marg-service-grid > div:first-child { padding-left: 0; border-left: 0; }
.marg-service-grid span { color: var(--marg-brown); font-size: 10px; letter-spacing: .15em; }
.marg-service-grid h3 { margin: 32px 0 10px; color: var(--marg-black); font-family: var(--marg-font-display); font-size: 29px; font-weight: 400; }
.marg-service-grid p { max-width: 290px; margin: 0; color: #686159; font-size: 14px; }

/* Footer */
.marg-footer { background: var(--marg-black); color: rgba(255,255,255,.76); }
.marg-footer__newsletter { display: grid; padding-top: 86px; padding-bottom: 72px; grid-template-columns: 1fr 1fr; align-items: end; gap: 70px; border-bottom: 1px solid rgba(255,255,255,.18); }
.marg-footer h2 { margin: 0; color: var(--marg-white); font-size: clamp(42px, 4vw, 68px); }
.marg-newsletter-form { display: grid; grid-template-columns: 1fr auto; }
.marg-newsletter-form input { min-width: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.65); border-radius: 0; background: transparent; padding: 14px 0; color: var(--marg-white); outline: 0; }
.marg-newsletter-form input::placeholder { color: rgba(255,255,255,.55); }
.marg-newsletter-form button { border: 0; border-bottom: 1px solid rgba(255,255,255,.65); background: transparent; color: var(--marg-white); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.marg-form-note { grid-column: 1 / -1; margin: 10px 0 0; color: rgba(255,255,255,.55); font-size: 11px; }
.marg-footer__main { display: grid; padding-top: 78px; padding-bottom: 84px; grid-template-columns: 1.8fr repeat(3, 1fr); gap: 56px; }
.marg-wordmark--footer { width: 190px; height: 63px; margin-bottom: 26px; }
.marg-footer__brand p { max-width: 290px; color: rgba(255,255,255,.55); font-size: 14px; }
.marg-footer nav:not(.marg-language-switcher) { display: flex; align-items: flex-start; flex-direction: column; gap: 10px; }
.marg-footer .marg-language-switcher { flex-direction: row; align-items: center; }
.marg-footer nav h3 { margin: 0 0 16px; color: var(--marg-white); font-family: var(--marg-font-sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.marg-footer nav a,
.marg-footer nav > span { color: rgba(255,255,255,.65); font-size: 13px; }
.marg-footer nav a:hover,
.marg-footer nav a:focus-visible { color: var(--marg-white); }
.marg-footer__language { margin-top: 14px; }
.marg-footer__payments { padding-bottom: 30px; }
.marg-footer__payments-label { margin: 0 0 12px; color: rgba(255,255,255,.55); font-family: var(--marg-font-sans); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-align: right; text-transform: uppercase; }
.marg-footer__payments-list { display: flex; margin: 0; padding: 0; flex-wrap: wrap; justify-content: flex-end; gap: 8px; list-style: none; }
.marg-footer__payments-list li { display: flex; }
.marg-footer__payments-list img { display: block; width: 38px; height: 24px; border-radius: 4px; background: #fff; }
.marg-footer__bottom { display: flex; padding-top: 22px; padding-bottom: 22px; justify-content: space-between; gap: 24px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.48); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

/* Interior pages */
.marg-page-hero { display: grid; min-height: 760px; padding-top: var(--marg-space-6); padding-bottom: var(--marg-space-7); grid-template-columns: .82fr 1.18fr; gap: clamp(50px, 8vw, 150px); }
.marg-page-hero__copy { align-self: center; }
.marg-page-hero__copy h1 { margin-bottom: 36px; }
.marg-page-hero__copy > p:last-child { max-width: 510px; color: #5f5952; font-size: 18px; }
.marg-page-hero__media { height: 680px; overflow: hidden; background: #d8d4d2; }
.marg-page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.marg-story-statement { display: grid; padding-top: var(--marg-space-6); padding-bottom: var(--marg-space-6); grid-template-columns: .7fr 1.4fr .9fr; gap: 50px; border-top: 1px solid var(--marg-line); }
.marg-story-statement h2 { margin-bottom: 0; font-size: clamp(40px, 4vw, 68px); }
.marg-story-statement > p:last-child { align-self: end; margin-bottom: 0; color: #625c55; }
.marg-story-image { padding-bottom: var(--marg-space-7); }
.marg-story-image img { width: 100%; max-height: 820px; object-fit: cover; }

.marg-contact-layout { display: grid; min-height: 760px; padding-top: var(--marg-space-7); padding-bottom: var(--marg-space-7); grid-template-columns: .9fr 1.1fr; gap: clamp(70px, 11vw, 190px); }
.marg-contact-intro h1 { margin-bottom: 36px; }
.marg-contact-intro > p { max-width: 560px; color: #5d5851; font-size: 18px; }
.marg-contact-note { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--marg-line); }
.marg-contact-note span { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.marg-contact-note p { margin: 9px 0 0; color: #686159; }
.marg-contact-form { align-self: center; padding: clamp(32px, 5vw, 70px); background: var(--marg-cream); }
.marg-field { margin-bottom: 28px; }
.marg-field label { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.marg-field input,
.marg-field textarea { width: 100%; border: 0; border-bottom: 1px solid var(--marg-black); border-radius: 0; background: transparent; padding: 12px 0; color: var(--marg-black); outline: 0; }
.marg-field textarea { resize: vertical; }
.marg-contact-form .marg-form-note { margin-top: 14px; color: #6b645d; }

.marg-standard-page { min-height: 60vh; padding-top: var(--marg-space-6); padding-bottom: var(--marg-space-7); }
.marg-standard-page__header { padding-bottom: 48px; border-bottom: 1px solid var(--marg-line); }
.marg-standard-page__header h1 { margin-bottom: 0; font-size: clamp(50px, 6vw, 92px); }
.marg-entry-content { padding-top: 48px; }

/* WooCommerce */
.marg-commerce-hero { padding-top: var(--marg-space-6); padding-bottom: var(--marg-space-5); border-bottom: 1px solid var(--marg-line); }
.marg-commerce-hero h1 { margin-bottom: 26px; font-size: clamp(58px, 7vw, 112px); }
.marg-commerce-hero > p:last-child { max-width: 540px; margin-bottom: 0; color: #5f5952; font-size: 17px; }
.marg-commerce-content { padding-top: var(--marg-space-5); padding-bottom: var(--marg-space-7); }
.marg-commerce-content .woocommerce-breadcrumb { margin-bottom: 36px; color: #716b64; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.marg-commerce-content .woocommerce-products-header { display: none; }

/* Breadcrumbs (Yoast). Typography matches .marg-eyebrow so the commerce header reads
   as one block rather than a bolted-on navigation strip. */
.marg-breadcrumbs { padding-top: clamp(22px, 3vw, 40px); }
.marg-breadcrumbs p { margin: 0; color: #7a736a; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.marg-breadcrumbs a { color: #7a736a; border-bottom: 1px solid transparent; transition: color var(--marg-transition), border-color var(--marg-transition); }
.marg-breadcrumbs a:hover,
.marg-breadcrumbs a:focus-visible { color: var(--marg-black); border-bottom-color: var(--marg-black); }
.marg-breadcrumbs .breadcrumb_last { color: var(--marg-black); }

/* WooCommerce catalogue chrome: result count, ordering select and loop cards, brought
   into the MARG type system rather than left on WooCommerce defaults. */
.marg-commerce-content .woocommerce-result-count,
.marg-commerce-content .woocommerce-ordering { margin-bottom: var(--marg-space-4); }
.marg-commerce-content .woocommerce-result-count { color: #7a736a; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.marg-commerce-content .woocommerce-ordering select {
  border: 0;
  border-bottom: 1px solid var(--marg-line);
  border-radius: 0;
  background: transparent;
  padding: 8px 26px 8px 0;
  color: var(--marg-black);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2312110f' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 11px;
}
.marg-commerce-content ul.products li.product .woocommerce-loop-product__title {
  margin: 14px 0 6px;
  color: var(--marg-black);
  font-family: var(--marg-font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.marg-commerce-content ul.products li.product .marg-loop-category { color: #8a837a; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.marg-commerce-content ul.products li.product .price { color: var(--marg-ink); font-family: var(--marg-font-sans); font-size: 13px; }
.marg-commerce-content ul.products li.product img { transition: transform 700ms cubic-bezier(.2,.65,.3,1); }
.marg-commerce-content ul.products li.product a:hover img { transform: scale(1.02); }
.marg-commerce-content ul.products li.product .button {
  display: inline-flex;
  margin-top: 14px;
  align-items: center;
  border-radius: 0;
  background: var(--marg-black);
  padding: 13px 22px;
  color: var(--marg-white);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background var(--marg-transition);
}
.marg-commerce-content ul.products li.product .button:hover { background: var(--marg-brown); }
.marg-commerce-content ul.products li.product .added_to_cart { display: inline-block; margin-top: 10px; border-bottom: 1px solid var(--marg-line); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.marg-commerce-content > .page-title { display: none; }
.marg-commerce-content .woocommerce-result-count,
.marg-commerce-content .woocommerce-ordering { margin-bottom: 30px; font-size: 12px; }
.marg-commerce-content .woocommerce-ordering select { border: 1px solid var(--marg-line); border-radius: 0; background: transparent; padding: 10px 34px 10px 12px; }
.marg-commerce-content ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 18px; }
.marg-commerce-content ul.products::before,
.marg-commerce-content ul.products::after { display: none; }
.marg-commerce-content ul.products li.product { width: auto; margin: 0; }
.marg-commerce-content ul.products li.product .woocommerce-loop-product__title { color: var(--marg-black); font-family: var(--marg-font-sans); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.marg-commerce-content ul.products li.product .price { color: var(--marg-black); font-size: 13px; }
.marg-commerce-content ul.products li.product .button { border-radius: 0; background: var(--marg-black); color: var(--marg-white); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.marg-empty-collection { display: grid; min-height: 620px; grid-template-columns: 1fr 1fr; background: var(--marg-cream); }
.marg-empty-collection__image { min-height: 560px; overflow: hidden; }
.marg-empty-collection__image img { width: 100%; height: 100%; object-fit: contain; }
.marg-empty-collection__copy { display: flex; padding: clamp(42px, 7vw, 110px); align-items: flex-start; justify-content: center; flex-direction: column; }
.marg-empty-collection__copy h2 { margin-bottom: 28px; font-size: clamp(42px, 5vw, 76px); }
.marg-empty-collection__copy > p:not(.marg-eyebrow) { max-width: 470px; margin-bottom: 36px; color: #625c55; }

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit { border-radius: 0; background: var(--marg-black); color: var(--marg-white); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .select2-container .select2-selection--single { border: 1px solid var(--marg-line); border-radius: 0; background: var(--marg-white); padding: 11px; }
.woocommerce table.shop_table { border-color: var(--marg-line); border-radius: 0; }

/* Focus */
.marg-storefront a:focus-visible,
.marg-storefront button:focus-visible,
.marg-storefront input:focus-visible,
.marg-storefront textarea:focus-visible,
.marg-storefront select:focus-visible { outline: 2px solid var(--marg-brown); outline-offset: 4px; }

@media (max-width: 1240px) {
  :root { --marg-header-height: 76px; --marg-shell-pad: 34px; }
  .marg-desktop-nav { gap: 16px; }
  .marg-desktop-nav a,
  .marg-action-label,
  .marg-language-switcher { font-size: 10px; }
  .marg-header-actions { gap: 12px; }
  .marg-action-label { display: none; }
  .marg-showcase__grid { grid-template-columns: repeat(2, 1fr); gap: 44px 18px; }
  .marg-showcase-card__image { aspect-ratio: .9; }
  .marg-footer__main { grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; }
}

@media (max-width: 1024px) {
  :root { --marg-shell-pad: 28px; --marg-space-7: 110px; }
  .marg-desktop-nav,
  .marg-account-link,
  .marg-search-button,
  .marg-language-switcher--desktop { display: none; }
  .marg-mobile-menu-button { display: inline-flex; justify-self: start; }
  .marg-storefront .marg-mobile-menu-button,
  .marg-storefront .marg-cart-link { width: 44px; height: 44px; }
  .marg-header__inner { grid-template-columns: 1fr auto 1fr; }
  .marg-header-actions { justify-self: end; }
  .marg-mobile-drawer { position: fixed; z-index: 1200; top: 0; left: 0; display: flex; width: min(430px, 88vw); height: 100dvh; padding: 26px; background: var(--marg-paper); flex-direction: column; transform: translateX(-102%); transition: transform 320ms cubic-bezier(.2,.65,.3,1); }
  .marg-mobile-drawer[aria-hidden="false"] { transform: translateX(0); }
  .marg-drawer-backdrop { position: fixed; z-index: 1100; inset: 0; display: block; background: rgba(18,17,15,.48); }
  .marg-drawer-backdrop[hidden] { display: none; }
  .marg-mobile-drawer__top { display: flex; padding-bottom: 24px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--marg-line); }
  .marg-mobile-drawer__title { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
  .marg-mobile-nav { display: flex; padding-top: 22px; flex-direction: column; }
  .marg-mobile-nav a { display: flex; padding: 16px 0; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--marg-line); font-family: var(--marg-font-display); font-size: 30px; line-height: 1.1; }
  .marg-mobile-nav svg { width: 20px; }
  .marg-mobile-drawer__language { display: flex; margin-top: auto; padding-top: 24px; align-items: center; justify-content: space-between; border-top: 1px solid var(--marg-line); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
  .marg-language-switcher--mobile { display: flex; }
  .marg-hero { min-height: 620px; grid-template-columns: minmax(400px, 1fr) minmax(0, .9fr); }
  .marg-hero__copy { padding: 80px 40px; }
  .marg-hero__image { padding: clamp(26px, 3vw, 44px); }
  .marg-hero__copy h1 { font-size: clamp(54px, 6.6vw, 76px); }
  .marg-collection-card--weekenders { margin-top: 70px; }
  .marg-editorial-banner { grid-template-columns: 1fr 1fr; }
  .marg-editorial-banner__copy { padding: 46px; }
  .marg-footer__newsletter { grid-template-columns: 1fr; }
  .marg-footer__main { grid-template-columns: 1.5fr 1fr 1fr; }
  .marg-footer__main nav:last-child { grid-column: 2; }
  .marg-page-hero { min-height: auto; gap: 50px; }
  .marg-page-hero__media { height: 600px; }
  .marg-story-statement { grid-template-columns: .5fr 1.5fr; }
  .marg-story-statement > p:last-child { grid-column: 2; }
  .marg-contact-layout { gap: 60px; }
  .marg-commerce-content ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  :root { --marg-shell-pad: 20px; --marg-space-6: 72px; --marg-space-7: 90px; --marg-header-height: 68px; }
  .admin-bar .marg-header { top: 46px; }
  .marg-header__inner { gap: 10px; }
  .marg-wordmark { width: 112px; height: 38px; min-height: 44px; display: flex; align-items: center; }
  .marg-wordmark img { width: 112px; height: 38px; }
  .marg-header-actions { gap: 7px; }
  .marg-language-switcher--desktop { display: none; }
  .marg-hero { display: flex; min-height: auto; flex-direction: column; }
  .marg-hero__copy { flex: 0 0 auto; min-height: 0; padding: 62px var(--marg-shell-pad) 50px; }
  .marg-hero__copy h1 { max-width: 100%; margin-bottom: 32px; font-size: clamp(46px, 13vw, 58px); }
  .marg-hero__media { flex: 0 0 auto; aspect-ratio: 1 / 1.06; max-height: min(72svh, 720px); }
  .marg-hero__image { padding: clamp(18px, 5vw, 40px); }
  .marg-collection-intro { grid-template-columns: 1fr; gap: 30px; }
  .marg-collection-grid { grid-template-columns: 1fr; }
  .marg-collection-card,
  .marg-collection-card--weekenders { min-height: 640px; margin-top: 0; }
  .marg-showcase__header { align-items: flex-start; flex-direction: column; }
  .marg-showcase__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marg-editorial-banner { grid-template-columns: 1fr; }
  .marg-editorial-banner__media { height: 680px; }
  .marg-editorial-banner__copy { min-height: 440px; padding: 48px 30px; }
  .marg-brand-intro { grid-template-columns: 1fr; gap: 34px; }
  .marg-service-grid { grid-template-columns: 1fr; }
  .marg-service-grid > div { min-height: auto; padding: 28px 0; border-top: 1px solid var(--marg-line); border-left: 0; }
  .marg-service-grid > div:first-child { border-top: 0; }
  .marg-service-grid h3 { margin-top: 18px; }
  .marg-footer__main { grid-template-columns: 1fr 1fr; }
  .marg-footer__brand { grid-column: 1 / -1; margin-bottom: 22px; }
  .marg-footer__main nav:last-child { grid-column: auto; }
  .marg-footer__payments-label { text-align: left; }
  .marg-footer__payments-list { justify-content: flex-start; }
  .marg-footer__bottom { align-items: flex-start; flex-direction: column; }
  .marg-page-hero { grid-template-columns: 1fr; }
  .marg-page-hero__media { height: 680px; }
  .marg-story-statement { grid-template-columns: 1fr; }
  .marg-story-statement > p:last-child { grid-column: auto; }
  .marg-contact-layout { grid-template-columns: 1fr; }
  .marg-contact-form { padding: 34px 24px; }
  .marg-empty-collection { grid-template-columns: 1fr; }
  .marg-empty-collection__image { min-height: 440px; }
  .marg-commerce-content ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  :root { --marg-shell-pad: 17px; }
  .marg-header-actions .marg-cart-link { width: 44px; }
  .marg-hero__copy { padding-top: 52px; }
  .marg-hero__copy h1 { font-size: clamp(45px, 12.6vw, 54px); }
  .marg-button { width: 100%; }
  .marg-collection-intro > div p,
  .marg-brand-intro__copy > p:not(.marg-eyebrow),
  .marg-contact-intro > p { font-size: 16px; }
  .marg-collection-card,
  .marg-collection-card--weekenders { min-height: 520px; }
  .marg-collection-card__content strong { font-size: 45px; }
  .marg-showcase__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .marg-showcase-card { min-width: 78vw; scroll-snap-align: start; }
  .marg-showcase-card__image { aspect-ratio: .8; }
  .marg-editorial-banner__media { height: 560px; }
  .marg-editorial-banner__copy h2 { font-size: 46px; }
  .marg-footer__newsletter { padding-top: 64px; }
  .marg-newsletter-form { grid-template-columns: 1fr; }
  .marg-newsletter-form button { min-height: 48px; border: 1px solid rgba(255,255,255,.65); margin-top: 14px; }
  .marg-footer__main { grid-template-columns: 1fr; }
  .marg-footer__main nav:last-child { grid-column: auto; }
  .marg-page-hero { padding-top: 70px; }
  .marg-page-hero__media { height: 540px; }
  .marg-contact-layout { padding-top: 76px; }
  .marg-commerce-content ul.products { grid-template-columns: 1fr; }
  .marg-empty-collection__image { min-height: 340px; }
  .marg-empty-collection__copy { padding: 42px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* -------------------------------------------------------------------------
   WooCommerce commerce chrome (product tabs, notices, forms, cart, checkout).
   WooCommerce ships a blue accent and rounded default inputs; both are brought
   into the MARG palette here without altering layout.
   ---------------------------------------------------------------------- */
.marg-storefront .woocommerce-tabs ul.tabs { margin: 0 0 30px; padding: 0; border-bottom: 1px solid var(--marg-line); }
.marg-storefront .woocommerce-tabs ul.tabs::before { display: none; }
.marg-storefront .woocommerce-tabs ul.tabs li { margin: 0 26px 0 0; border: 0; border-radius: 0; background: transparent; padding: 0; }
.marg-storefront .woocommerce-tabs ul.tabs li::before,
.marg-storefront .woocommerce-tabs ul.tabs li::after { display: none; }
.marg-storefront .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  border-bottom: 2px solid transparent;
  padding: 0 0 12px;
  color: #7a736a;
  font-family: var(--marg-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.marg-storefront .woocommerce-tabs ul.tabs li.active a,
.marg-storefront .woocommerce-tabs ul.tabs li a:hover { border-bottom-color: var(--marg-black); color: var(--marg-black); }
.marg-storefront .woocommerce-tabs .panel > h2:first-child { display: none; }

.marg-storefront .woocommerce-message,
.marg-storefront .woocommerce-info,
.marg-storefront .woocommerce-error,
.marg-storefront .wc-block-components-notice-banner {
  border: 1px solid var(--marg-line);
  border-top: 2px solid var(--marg-black);
  border-radius: 0;
  background: var(--marg-cream);
  color: var(--marg-ink);
  font-size: 14px;
}
.marg-storefront .woocommerce-error { border-top-color: #8c2f2f; }
.marg-storefront .woocommerce-message::before,
.marg-storefront .woocommerce-info::before { color: var(--marg-brown); }
.marg-storefront .wc-block-components-notice-banner > svg { fill: var(--marg-brown); }

.marg-storefront .woocommerce form .form-row input.input-text,
.marg-storefront .woocommerce form .form-row textarea,
.marg-storefront .woocommerce form .form-row select,
.marg-storefront .select2-container .select2-selection--single {
  border: 1px solid var(--marg-line);
  border-radius: 0;
  background: var(--marg-white);
  padding: 13px 14px;
  color: var(--marg-ink);
  font-size: 15px;
}
.marg-storefront .woocommerce form .form-row input.input-text:focus,
.marg-storefront .woocommerce form .form-row textarea:focus,
.marg-storefront .woocommerce form .form-row select:focus { border-color: var(--marg-black); outline: 0; }
.marg-storefront .woocommerce form .form-row label { color: var(--marg-ink); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.marg-storefront .woocommerce h3,
.marg-storefront #order_review_heading { color: var(--marg-black); font-family: var(--marg-font-display); font-size: 28px; font-weight: 400; }

.marg-storefront .woocommerce .button,
.marg-storefront .woocommerce button.button,
.marg-storefront .woocommerce input.button,
.marg-storefront .woocommerce a.button,
.marg-storefront .woocommerce #place_order {
  border: 0;
  border-radius: 0;
  background: var(--marg-black);
  padding: 14px 26px;
  color: var(--marg-white);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background var(--marg-transition);
}
.marg-storefront .woocommerce .button:hover,
.marg-storefront .woocommerce button.button:hover,
.marg-storefront .woocommerce a.button:hover,
.marg-storefront .woocommerce #place_order:hover { background: var(--marg-brown); color: var(--marg-white); }
.marg-storefront .woocommerce .button.alt { background: var(--marg-black); }

.marg-storefront .woocommerce table.shop_table,
.marg-storefront .woocommerce-checkout-review-order-table { border: 0; border-radius: 0; }
.marg-storefront .woocommerce table.shop_table th { color: var(--marg-black); font-family: var(--marg-font-sans); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.marg-storefront .woocommerce table.shop_table td,
.marg-storefront .woocommerce table.shop_table th { border-color: var(--marg-line); }
.marg-storefront .woocommerce-checkout #order_review { border: 1px solid var(--marg-line); padding: 26px; }
.marg-storefront .woocommerce .quantity input.qty { border: 1px solid var(--marg-line); border-radius: 0; padding: 12px 8px; }
.marg-storefront .woocommerce div.product .product_title { font-size: clamp(34px, 3.4vw, 54px); }
.marg-storefront .woocommerce div.product p.price { color: var(--marg-black); font-family: var(--marg-font-sans); font-size: 20px; font-weight: 600; }
.marg-storefront .woocommerce div.product .woocommerce-product-details__short-description { color: #5d5851; }
.marg-storefront .woocommerce .related > h2 { font-size: clamp(30px, 3vw, 46px); }
.marg-storefront .woocommerce-cart table.cart img { width: 78px; }

/* Astra's single-product button styling outranked the shared button rule. */
.marg-storefront .woocommerce div.product form.cart button.single_add_to_cart_button {
  border-radius: 0;
  background: var(--marg-black);
  padding: 14px 26px;
  color: var(--marg-white);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.marg-storefront .woocommerce div.product form.cart button.single_add_to_cart_button:hover { background: var(--marg-brown); }
.marg-storefront .cart_totals h2 { font-size: clamp(26px, 2.4vw, 34px); }
.marg-storefront .woocommerce-cart .cart_totals { border: 1px solid var(--marg-line); padding: 26px; }

/* Honeypot field: off-screen for people, still reachable for bots. */
.marg-honeypot { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.marg-form-note--ok { color: var(--marg-brown); }
.marg-form-note--error { color: #8c2f2f; }
.marg-footer .marg-form-note--ok { color: rgba(255,255,255,.9); }
.marg-footer .marg-form-note--error { color: #e0a0a0; }

/* Payment-pending notice. Deliberately quiet: informative, not alarming. */
.marg-payment-notice {
  display: flex;
  margin-bottom: var(--marg-space-4);
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  border-top: 1px solid var(--marg-black);
  border-bottom: 1px solid var(--marg-line);
  padding: 18px 0;
}
.marg-payment-notice p { margin: 0; color: var(--marg-ink); font-size: 14px; }
.marg-payment-notice .marg-eyebrow { margin: 0; }
@media (max-width: 480px) { .marg-payment-notice { gap: 6px; flex-direction: column; } }

/* Floating WhatsApp support ------------------------------------------------
   Anchored to the bottom-right corner, below the mobile drawer (1200) and its
   backdrop (1100) so an open menu always covers it. site.js raises the bottom
   offset when the footer payment strip would otherwise sit under it.
   The selector carries the element type so it outranks `.marg-storefront a`,
   which sets `color: inherit` and would otherwise darken the label. */
a.marg-wa {
  --marg-wa-edge: 24px;
  position: fixed;
  z-index: 900;
  right: var(--marg-wa-edge);
  bottom: var(--marg-wa-edge);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px 0 13px;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: var(--marg-black);
  box-shadow: 0 4px 18px rgba(18, 17, 15, .24);
  color: #fff;
  font-family: var(--marg-font-sans);
  font-size: 12px;
  letter-spacing: .04em;
  line-height: 1;
  text-decoration: none;
  transition: transform var(--marg-transition), box-shadow var(--marg-transition), background-color var(--marg-transition), bottom var(--marg-transition);
}
.marg-wa__icon { flex: 0 0 auto; width: 18px; height: 18px; fill: #25d366; }
.marg-wa__label { white-space: nowrap; color: #fff; }
a.marg-wa:hover,
a.marg-wa:focus-visible {
  background: var(--marg-ink);
  box-shadow: 0 8px 24px rgba(18, 17, 15, .32);
  color: #fff;
  transform: translateY(-2px);
}
a.marg-wa:focus-visible {
  outline: 2px solid var(--marg-tan);
  outline-offset: 3px;
}
body.marg-drawer-open .marg-wa { opacity: 0; pointer-events: none; }

@media (max-width: 768px) {
  a.marg-wa {
    --marg-wa-edge: 16px;
    width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .marg-wa__icon { width: 20px; height: 20px; }
  .marg-wa__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.marg-wa { transition: none; }
  a.marg-wa:hover, a.marg-wa:focus-visible { transform: none; }
}

/* 14-day returns note (product summary) ----------------------------------- */
.marg-returns-note {
  display: flex;
  margin: 22px 0 0;
  padding-top: 18px;
  align-items: flex-start;
  gap: 10px;
  border-top: 1px solid var(--marg-line);
  color: #686159;
  font-size: 13px;
  line-height: 1.55;
}
.marg-returns-note__icon {
  flex: 0 0 auto;
  margin-top: 2px;
  fill: none;
  stroke: var(--marg-brown);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.marg-returns-note strong {
  color: var(--marg-black);
  font-weight: 600;
  letter-spacing: .02em;
}
.marg-returns-note a { color: var(--marg-black); text-decoration: underline; text-underline-offset: 3px; }
.marg-returns-note__detail { display: block; }