/* ---- amfuels-tokens.css ---- */
/* ==========================================================================
   AM FUELS — DESIGN TOKENS  (load FIRST)
   Paste into the child theme's stylesheet, or Customiser > Additional CSS.
   Every colour is sampled from AM Fuels' own yard photograph. Do not substitute.
   ========================================================================== */
@import url(https://www.amfuels.co.uk/wp-content/themes/child-theme/css/"https://fonts.googleapis.com/css2?family=Gilda+Display&family=Manrope:wght@400;500;600&display=swap");

:root{
  /* --- Slate: signature dark ground + all text. From the barn roofs. --- */
  --amf-slate-900:#191E22; --amf-slate-800:#222A2F; --amf-slate-700:#2F383E;
  --amf-slate-600:#434D54; --amf-slate-500:#5A656C; --amf-slate-400:#77828A;
  --amf-slate-300:#9DA6AD; --amf-slate-200:#C5CBD0; --amf-slate-100:#E2E6E9;

  /* --- Cut: the page ground. From pale sawn end-grain. Never pure white. --- */
  --amf-cut-50:#FBF7EF; --amf-cut-100:#F4EEE1; --amf-cut-200:#E9E0CD;
  --amf-cut-300:#D9C9AC; --amf-cut-400:#C3AE8A;

  /* --- Timber: THE accent. Details only — never a button fill. --- */
  --amf-timber-700:#6E4A22; --amf-timber-600:#8A5E2C; --amf-timber-500:#A8763A;
  --amf-timber-400:#C08F4F; --amf-timber-300:#D6B183; --amf-timber-200:#E8D3B4;
  --amf-timber-100:#F4E8D6;

  /* --- Ember: genuine fire only. A handful of uses per site, if any. --- */
  --amf-ember-600:#8F3A16; --amf-ember-500:#AE471B; --amf-ember-300:#D98E62;
  --amf-ember-100:#F6E1D5;

  /* --- Lichen: certification, sustainability, in-stock. From the stone walls. --- */
  --amf-lichen-700:#3D4A3A; --amf-lichen-600:#4E5C48; --amf-lichen-500:#6B7A63;
  --amf-lichen-300:#A3B09B; --amf-lichen-100:#E7EBE2;

  /* --- Brass: review stars only. --- */
  --amf-brass-500:#AC8747; --amf-brass-100:#F0E7D2;

  /* --- Signal --- */
  --amf-red-600:#96332A;   --amf-red-100:#F5E2DF;
  --amf-amber-600:#8E6A1C; --amf-amber-100:#F5EBD3;

  /* --- Semantic --- */
  --amf-bg:var(--amf-cut-100);
  --amf-bg-alt:var(--amf-cut-50);
  --amf-bg-raised:#FFFFFF;
  --amf-bg-inset:var(--amf-cut-200);
  --amf-bg-dark:var(--amf-slate-900);
  --amf-text:var(--amf-slate-900);
  --amf-text-soft:var(--amf-slate-600);
  --amf-text-muted:var(--amf-slate-500);
  --amf-text-on-dark:var(--amf-cut-50);
  --amf-accent:var(--amf-timber-700);
  --amf-accent-hover:var(--amf-timber-600);
  --amf-rule:rgba(25,30,34,.10);
  --amf-rule-strong:rgba(25,30,34,.32);

  /* --- Type --- */
  --amf-font-display:"Gilda Display",Georgia,serif;
  --amf-font-sans:"Manrope",system-ui,sans-serif;
  --amf-h1:5.5rem;
  --amf-h2:4.25rem;
  --amf-h3:2.875rem;
  --amf-h4:1.5rem;
  --amf-lead:1.1875rem;
  --amf-body:1rem;
  --amf-small:0.875rem;
  --amf-eyebrow:0.6875rem;
  --amf-track-display:0;
  --amf-track-eyebrow:0.2em;
  --amf-track-button:0.05em;

  /* --- Space & layout --- */
  --amf-container:1240px;
  --amf-gutter:clamp(1.25rem,4vw,3rem);
  --amf-section-y:clamp(4rem,8vw,7.5rem);
  --amf-grid-gap:clamp(1rem,2vw,1.75rem);
  --amf-grid-row-gap:2.5rem;

  /* --- Controls: exact values. Do NOT round these to a 4/8px grid. --- */
  --amf-control-h:46px;
  --amf-control-h-lg:54px;
  --amf-control-h-sm:36px;
  --amf-control-pad:22px;

  /* --- Radius: ZERO. This is the single biggest lever on the premium feel. --- */
  --amf-radius:0;

  /* --- Motion: fast, flat, no bounce anywhere --- */
  --amf-fast:140ms;
  --amf-base:220ms;
  --amf-slow:420ms;
  --amf-ease:cubic-bezier(.2,0,.2,1);

  /* --- Scrims for text over photography ---
     --amf-scrim-hero has an opacity FLOOR (44%) and is required on any full-bleed hero:
     a gradient that fades to transparent fails contrast at short viewport heights.
     --amf-scrim is the plain bottom fade, for captions low in an image only. */
  --amf-scrim-hero:linear-gradient(to top,rgba(25,30,34,.90) 0%,rgba(25,30,34,.68) 32%,rgba(25,30,34,.50) 68%,rgba(25,30,34,.44) 100%);
  --amf-scrim:linear-gradient(to top,rgba(25,30,34,.88) 0%,rgba(25,30,34,.58) 34%,rgba(25,30,34,0) 78%);
}

/* Dark sections: add class="amf-dark" and nested styles re-map automatically. */
.amf-dark{
  --amf-bg:var(--amf-slate-900);
  --amf-bg-alt:var(--amf-slate-800);
  --amf-bg-raised:var(--amf-slate-800);
  --amf-bg-inset:var(--amf-slate-700);
  --amf-text:var(--amf-cut-50);
  --amf-text-soft:var(--amf-slate-200);
  --amf-text-muted:var(--amf-slate-300);
  --amf-accent:var(--amf-timber-300);
  --amf-rule:rgba(244,238,225,.12);
  --amf-rule-strong:rgba(244,238,225,.42);
  background:var(--amf-bg);
  color:var(--amf-text);
}

/* ---- amfuels-base.css ---- */
/* ==========================================================================
   AM FUELS — GLOBAL BASE  (load AFTER amfuels-tokens.css)
   ========================================================================== */

body{
  background:var(--amf-bg);
  color:var(--amf-text);
  font-family:var(--amf-font-sans);
  font-size:var(--amf-body);
  line-height:1.7;
  letter-spacing:0;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
}

/* --- KILL ALL ROUNDING. Rule 1. Themes and builders reintroduce this constantly. --- */
*,*::before,*::after{border-radius:var(--amf-radius) !important}
/* the one exception */
input[type="checkbox"][role="switch"],.amf-switch,.amf-switch *{border-radius:999px !important}

/* --- Headings: Gilda Display, regular weight, large, never bold --- */
h1,h2,h3,h4,h5,h6,
.elementor-heading-title,.et_pb_module h1,.et_pb_module h2{
  font-family:var(--amf-font-display) !important;
  font-weight:400 !important;
  letter-spacing:var(--amf-track-display);
  line-height:1.04;
  text-wrap:balance;
  margin:0;
}
h1{font-size:var(--amf-h1);line-height:0.96}
h2{font-size:var(--amf-h2);line-height:1.02}
h3{font-size:var(--amf-h3);line-height:1.08}
h4{font-size:var(--amf-h4);line-height:1.22}
strong,b{font-weight:600}

/* --- The eyebrow: small tracked label above almost every heading.
       Add class="amf-eyebrow" to a span in the builder. --- */
.amf-eyebrow{
  display:inline-block;
  font-family:var(--amf-font-sans);
  font-size:var(--amf-eyebrow);
  font-weight:600;
  letter-spacing:var(--amf-track-eyebrow);
  text-transform:uppercase;
  color:var(--amf-text-muted);
}
/* Optional tan index numeral: <span class="amf-eyebrow"><i>01</i> The range</span> */
.amf-eyebrow i{font-style:normal;color:var(--amf-accent);margin-right:1.1em}

.amf-lead{font-size:var(--amf-lead);line-height:1.65;color:var(--amf-text-soft);max-width:42ch}
p{max-width:58ch}
.amf-container{max-width:var(--amf-container);margin-inline:auto;padding-inline:var(--amf-gutter)}
.amf-section{padding-block:var(--amf-section-y)}
hr,.amf-rule{border:0;height:1px;background:var(--amf-rule);margin:0}

/* --- Links --- */
a{color:var(--amf-accent);text-decoration:none;text-underline-offset:3px;transition:color var(--amf-fast) var(--amf-ease)}
a:hover{color:var(--amf-accent-hover);text-decoration:underline}

/* --- BUTTONS. Rules 4, 5 and 7.
       Slate fill, uppercase tracked label, square, no shadow, no lift. --- */
.amf-btn,
button,input[type="submit"],
.wp-element-button,.wp-block-button__link,
.elementor-button,.et_pb_button,.button{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  height:var(--amf-control-h);
  padding:0 var(--amf-control-pad) !important;
  background:var(--amf-slate-900) !important;
  color:var(--amf-cut-50) !important;
  border:1px solid transparent !important;
  font-family:var(--amf-font-sans) !important;
  font-size:.75rem !important;
  font-weight:600 !important;
  letter-spacing:var(--amf-track-button) !important;
  text-transform:uppercase !important;
  line-height:1 !important;
  text-decoration:none !important;
  box-shadow:none !important;
  transition:background-color var(--amf-fast) var(--amf-ease),color var(--amf-fast) var(--amf-ease);
}
.amf-btn:hover,button:hover,.elementor-button:hover,.et_pb_button:hover,.button:hover,
.wp-block-button__link:hover{
  background:var(--amf-slate-700) !important;
  color:var(--amf-cut-50) !important;
  transform:none !important;
}
.amf-btn:active,button:active,.button:active{background:var(--amf-slate-800) !important;transform:scale(.985)}

.amf-btn--lg{height:var(--amf-control-h-lg);padding:0 30px !important;font-size:.8125rem !important}
.amf-btn--sm{height:var(--amf-control-h-sm);padding:0 14px !important;font-size:.6875rem !important}

/* Outline */
.amf-btn--secondary{
  background:transparent !important;
  color:var(--amf-text) !important;
  border:1px solid var(--amf-rule-strong) !important;
}
.amf-btn--secondary:hover{background:rgba(25,30,34,.06) !important;color:var(--amf-text) !important}

/* Paper fill, for use on dark grounds */
.amf-btn--inverse{background:var(--amf-cut-100) !important;color:var(--amf-slate-900) !important}
.amf-btn--inverse:hover{background:#FFF !important;color:var(--amf-slate-900) !important}

/* Text action on a hairline — the DEFAULT inside product grids */
.amf-btn--link{
  height:auto !important;
  padding:0 0 5px !important;
  background:transparent !important;
  color:var(--amf-text) !important;
  border:0 !important;
  border-bottom:1px solid currentColor !important;
  letter-spacing:.06em !important;
}
.amf-btn--link:hover{background:transparent !important;color:var(--amf-accent) !important}

/* Ember. ONE per site, for something genuinely urgent. Nothing else. */
.amf-btn--ember{background:var(--amf-ember-500) !important;color:var(--amf-cut-50) !important}
.amf-btn--ember:hover{background:var(--amf-ember-600) !important}

/* --- Form controls: square, hairline, tan focus ring --- */
input[type="text"],input[type="email"],input[type="tel"],input[type="search"],
input[type="number"],input[type="password"],textarea,select{
  height:var(--amf-control-h);
  padding:0 14px;
  background:var(--amf-bg-raised);
  border:1px solid rgba(25,30,34,.16);
  color:var(--amf-text);
  font-family:var(--amf-font-sans);
  font-size:var(--amf-small);
  box-shadow:none;
  transition:border-color var(--amf-fast) var(--amf-ease),box-shadow var(--amf-fast) var(--amf-ease);
}
textarea{height:auto;padding:12px 14px}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--amf-accent);
  box-shadow:0 0 0 3px rgba(168,118,58,.28);
}
:focus-visible{outline:2px solid var(--amf-accent);outline-offset:2px}
::selection{background:var(--amf-timber-200);color:var(--amf-slate-900)}

/* --- Full-bleed hero with a protection gradient over photography --- */
.amf-hero{position:relative;min-height:min(86vh,860px);display:flex;align-items:flex-end;background:var(--amf-slate-900)}
/* Client photography is portrait phone frames; bias the crop upward so a wide hero keeps
   the barn and sky rather than cropping to the vertical centre. */
.amf-hero > img,.amf-hero .amf-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
/* ONE gradient WITH AN OPACITY FLOOR. A bottom-anchored gradient that fades to zero leaves
   the top of the hero unprotected, and the eyebrow fails WCAG AA at short viewport heights
   (measured 3.69:1 against bright sky). This never drops below 44%. Do not "clean it up"
   into a plain fade-to-transparent. */
.amf-hero::after{content:"";position:absolute;inset:0;background:var(--amf-scrim-hero);pointer-events:none;z-index:0}
.amf-hero .amf-eyebrow{color:var(--amf-cut-50)}
.amf-hero__inner{position:relative;z-index:1;padding-block:5rem}
.amf-hero h1,.amf-hero .amf-lead{color:var(--amf-cut-50)}
.amf-hero .amf-lead{color:var(--amf-slate-200)}
.amf-hero .amf-eyebrow{color:var(--amf-slate-200)}

/* --- Typographic proof row. Replaces any icon trust strip. --- */
.amf-proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-top:1px solid var(--amf-rule)}
.amf-proof > div{display:flex;flex-direction:column;gap:6px;padding:1.5rem 1.5rem 1.5rem 0}
.amf-proof strong{font-family:var(--amf-font-sans);font-size:var(--amf-eyebrow);font-weight:600;letter-spacing:var(--amf-track-eyebrow);text-transform:uppercase;color:var(--amf-text)}
.amf-proof span{font-size:.75rem;font-weight:500;color:var(--amf-text-muted)}

@media (max-width:1100px){
  :root{--amf-h1:4rem;--amf-h2:3.25rem;--amf-h3:2.375rem}
}
@media (max-width:544px){
  :root{--amf-h1:2.5rem;--amf-h2:2.25rem;--amf-h3:1.875rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:0ms !important;animation-duration:0ms !important}
}

/* ==========================================================================
   PATTERN HOOKS — the classes the Gutenberg block patterns depend on.
   These are what keep the design rules out of block attributes, where they
   would be edited away. Do not rename them.
   ========================================================================== */

/* Hero. The Cover block's own overlay/dim controls are NOT used — this scrim has a
   contrast floor and theirs does not. Leave dimRatio at 0 in the block. */
.amf-hero{position:relative;display:flex;align-items:flex-end;background:var(--amf-slate-900)}
.amf-hero .wp-block-cover__image-background{object-fit:cover;object-position:center 30%}
.amf-hero::after{content:"";position:absolute;inset:0;background:var(--amf-scrim-hero);pointer-events:none;z-index:0}
.amf-hero{padding:0 !important;overflow:hidden}
.amf-hero .wp-block-cover__inner-container{position:relative;z-index:1;width:100%;max-width:calc(var(--amf-container) + 6rem);box-sizing:border-box;margin-inline:auto;padding:5rem var(--amf-gutter);display:flex;flex-direction:column;gap:1.5rem}
.amf-hero h1,.amf-hero h2{max-width:780px;color:var(--amf-cut-50) !important}
.amf-hero h1{font-size:var(--amf-h1) !important;line-height:.96 !important}
.amf-hero .amf-lead{color:var(--amf-slate-200) !important}
.amf-hero .amf-eyebrow{color:var(--amf-cut-50) !important}
.amf-hero--short .wp-block-cover__inner-container{max-width:calc(var(--amf-container) + 6rem);padding-block:4rem;gap:1rem}
.amf-hero--short h2{max-width:680px}
.amf-hero__actions{gap:2rem;align-items:center}

/* Proof row */
.amf-proof{border-top:1px solid var(--amf-rule);gap:0;margin-block:0}
.amf-proof .wp-block-column{padding:1.5rem 1.5rem 1.5rem 0}
.amf-proof__label{font-size:var(--amf-eyebrow);font-weight:600;letter-spacing:var(--amf-track-eyebrow);text-transform:uppercase;color:var(--amf-text);margin:0 0 .35rem}
.amf-proof__note{font-size:.75rem;font-weight:500;color:var(--amf-text-muted);margin:0;max-width:none}

/* Section heading group */
.amf-heading{display:flex;flex-direction:column;gap:1.25rem}
.amf-band{padding-block:var(--amf-section-y)}
.amf-dark h1,.amf-dark h2,.amf-dark h3,.amf-dark h4{color:var(--amf-cut-50) !important}
.amf-dark .amf-lead{color:var(--amf-slate-200) !important}
.amf-dark .amf-eyebrow{color:var(--amf-slate-300) !important}
.amf-cta{display:flex;flex-direction:column;gap:1.25rem}

/* Index numeral above a category title */
.amf-index{font-size:var(--amf-eyebrow);font-weight:600;letter-spacing:var(--amf-track-eyebrow);color:var(--amf-accent);margin:0}

/* Range panels — borderless, portrait crops */
.amf-range{gap:2rem}
.amf-range .wp-block-column{display:flex;flex-direction:column;gap:.75rem}
.amf-range__img{margin:0 0 .5rem}
.amf-range__img img{aspect-ratio:3 / 4;object-fit:cover;width:100%}
.amf-range h3{font-size:var(--amf-h4);line-height:1.22}
.amf-range h3 a{color:var(--amf-text);text-decoration:none}
.amf-range h3 a:hover{color:var(--amf-accent);text-decoration:none}
.amf-portrait img{aspect-ratio:4 / 5;object-fit:cover;width:100%}

/* Two-column editorial rows */
.amf-two-col{gap:5rem}
.amf-note{font-size:var(--amf-small);color:var(--amf-text-muted)}

/* Hairline-ruled list — replaces bullets. No icons. */
.amf-ruled-list{list-style:none;margin:1.5rem 0 0;padding:0}
.amf-ruled-list li{border-top:1px solid var(--amf-rule);padding-block:1rem;color:var(--amf-text-soft)}

/* FAQ via core/details — rules only, questions in the display serif */
.amf-faq{max-width:820px}
.amf-faq .wp-block-details{border-top:1px solid var(--amf-rule);padding-block:1.25rem}
.amf-faq .wp-block-details:last-of-type{border-bottom:1px solid var(--amf-rule)}
.amf-faq summary{font-family:var(--amf-font-display);font-weight:400;font-size:1.5rem;letter-spacing:var(--amf-track-display);cursor:pointer;list-style:none}
.amf-faq summary::-webkit-details-marker{display:none}
.amf-faq .wp-block-details p{margin-top:1rem;color:var(--amf-text-soft)}

/* Gutenberg button variants — the class goes on the wp-block-button wrapper */
.amf-btn--inverse .wp-block-button__link{background-color:var(--amf-cut-100) !important;color:var(--amf-slate-900) !important}
.amf-btn--inverse .wp-block-button__link:hover{background-color:#FFF !important;color:var(--amf-slate-900) !important}
.amf-btn--link .wp-block-button__link{
  background:transparent !important;color:currentColor !important;border:0 !important;
  border-bottom:1px solid currentColor !important;padding:0 0 5px !important;
  line-height:1 !important;letter-spacing:.06em !important;
}
.amf-btn--link .wp-block-button__link:hover{background:transparent !important;color:var(--amf-accent) !important}
.amf-hero .amf-btn--link .wp-block-button__link{color:var(--amf-cut-50) !important}
.amf-dark .amf-btn--link .wp-block-button__link{color:var(--amf-cut-50) !important}

/* Product tile spec line, added by the child theme's Woo hook */
.amf-tile__spec{display:block;font-size:.75rem;font-weight:500;color:var(--amf-text-muted)}

/* ==========================================================================
   CERTIFICATION PANEL & DELIVERY MAP
   Pattern hooks for the Ready to Burn certificate block and the inline SVG
   coverage map. Same rules as the rest of the system: hairlines, zero radius,
   Manrope for anything that behaves like a label.
   ========================================================================== */

/* --- Certificate: the document beside the facts it proves --- */
.amf-cert{gap:4.5rem;align-items:flex-start}
.amf-cert__doc{margin:0}
.amf-cert__doc img{display:block;width:100%;height:auto;border:1px solid var(--amf-rule)}
.amf-cert__doc a{display:block;border:0}
.amf-cert__body .amf-lead{max-width:52ch}
.amf-cert__body .amf-ruled-list{margin-top:2rem}
.amf-cert__body .amf-ruled-list li{display:flex;flex-wrap:wrap;gap:.2rem 1.25rem}
.amf-cert__body .amf-ruled-list strong{flex:0 0 10.5rem;font-family:var(--amf-font-sans);font-size:var(--amf-eyebrow);font-weight:600;letter-spacing:var(--amf-track-eyebrow);text-transform:uppercase;color:var(--amf-lichen-700);line-height:1.9}
.amf-cert__body .amf-ruled-list span{flex:1 1 14rem;color:var(--amf-text)}

/* --- Delivery map (inline SVG) --- */
.amf-map{margin:0 auto;max-width:920px}
.amf-map__frame{border:1px solid var(--amf-rule);background:var(--amf-cut-50);container-type:inline-size}
.amf-map__svg{display:block;width:100%;height:auto}
.amf-map__svg text{font-family:var(--amf-font-sans);fill:var(--amf-text)}
.amf-map__town{font-size:14px;font-weight:600}
.amf-map__town--minor{font-size:12px;font-weight:500;fill:var(--amf-text-soft)}
.amf-map__town--ctx{font-size:11.5px;font-weight:500;fill:var(--amf-text-muted)}
.amf-map__pc{font-size:10px;font-weight:600;letter-spacing:.14em;fill:var(--amf-timber-700)}
.amf-map__base{font-size:16px;font-weight:600}
.amf-map__basepc{font-size:10px;font-weight:600;letter-spacing:.14em;fill:var(--amf-timber-700)}
.amf-map__ring{font-size:10px;font-weight:600;letter-spacing:.16em;fill:var(--amf-lichen-700)}
.amf-map__county{font-size:12px;font-weight:600;letter-spacing:.32em;fill:var(--amf-text);fill-opacity:.32}
.amf-map__road{font-size:9px;font-weight:600;fill:var(--amf-text-soft)}
.amf-map__legh{font-size:11px;font-weight:600;letter-spacing:.16em;fill:var(--amf-text)}
.amf-map__legv{font-size:13px;font-weight:500;fill:var(--amf-text-muted)}
.amf-map__caption{font-size:var(--amf-small);line-height:1.6;color:var(--amf-text-muted);margin:.9rem 0 0;max-width:66ch}

/* The map runs at two very different widths (a full section on Delivery Areas,
   a half column on the home page), so the labels answer to the FRAME, not the
   viewport: in a narrow frame the type steps up and the reference layer
   (road numbers, county names, context towns) drops out to keep it legible. */
@container (max-width:700px){
  .amf-map__town{font-size:21px}
  .amf-map__town--minor{font-size:17px}
  .amf-map__pc,.amf-map__basepc{font-size:14px}
  .amf-map__base{font-size:23px}
  .amf-map__ring{font-size:13px}
  .amf-map__legh{font-size:14px}
  .amf-map__legv{font-size:16px}
  .amf-map__road,.amf-map__chip,.amf-map__town--ctx,.amf-map__county{display:none}
}

/* A map is a diagram: on a phone it keeps a legible minimum width and scrolls
   sideways inside its own frame rather than shrinking the labels to nothing. */
@media (max-width:760px){
  .amf-map__frame{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .amf-map__svg{min-width:540px}
  .amf-cert{gap:2.75rem}
  .amf-cert__body .amf-ruled-list strong{flex:1 0 100%}
}

/* ---- amfuels-astra.css ---- */
/* ==========================================================================
   AM FUELS — ASTRA OVERRIDES
   Load order: amfuels-tokens.css → amfuels-base.css → THIS FILE → amfuels-woocommerce.css

   Astra's own defaults are the main obstacle to this design. Every block below names the
   Astra behaviour it is undoing, so it is always obvious what is fighting the theme and
   what is the design itself. If Astra changes selectors in a major release, this is the
   only file that should need attention.

   Set the matching Customizer values too (see ASTRA-SETUP.md section 5). Fighting Astra
   purely in CSS is fragile — this file is the safety net, not the strategy.
   ========================================================================== */

/* --- CONTAINER
       Astra's default is 1200px with 20px padding; ours is 1240px with a fluid gutter.
       Set 1240 in Customizer > Global > Container as well so the editor preview matches. */
.ast-container,
.ast-container-fluid,
.site-content .ast-container{max-width:var(--amf-container);padding-inline:var(--amf-gutter)}

/* Full-bleed bands must escape the container. */
.ast-container > .alignfull,
.entry-content > .alignfull{margin-inline:calc(var(--amf-gutter) * -1);width:auto;max-width:none}
.ast-page-builder-template .entry-content > .alignfull{margin-inline:0;width:100%;max-width:none}

/* --- BUTTONS  (Rule 1, 4, 7)
       Astra rounds buttons and gives them a border by default, set in the Customizer at
       high specificity. Set radius 0 there too; this enforces it everywhere including Woo. */
.ast-button,
.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-block-button__link,
.wp-element-button,
.ast-custom-button{
  border-radius:0 !important;
  border-width:0 !important;
  box-shadow:none !important;
  font-family:var(--amf-font-sans);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:var(--amf-track-button);
  text-transform:uppercase;
  line-height:var(--amf-control-h);
  height:auto;
  padding-block:0;
  padding-inline:var(--amf-control-pad);
  background-color:var(--amf-slate-900);
  color:var(--amf-cut-50);
  transition:background-color var(--amf-fast) var(--amf-ease),color var(--amf-fast) var(--amf-ease);
}
.ast-button:hover,.ast-button:focus,
.button:hover,.button:focus,
button:hover,button:focus,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.wp-element-button:hover{
  background-color:var(--amf-slate-700);
  color:var(--amf-cut-50);
  transform:none;                 /* Astra lifts buttons on hover. Nothing here lifts. */
  box-shadow:none !important;
}
.ast-button:active,.button:active,button:active{background-color:var(--amf-slate-800);transform:scale(.985)}

/* Astra's outline button style. */
.ast-outline-button,.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;
  color:var(--amf-text);
  border:1px solid var(--amf-rule-strong) !important;
  border-width:1px !important;
}
.ast-outline-button:hover,.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:rgba(25,30,34,.06);
  color:var(--amf-text);
}

/* --- HEADINGS  (Rule 6)
       Astra's typography module sets font-family and weight per heading level from the
       Customizer, and will happily synthesise a fake bold on Gilda Display — which has a
       single weight. This forces 400 regardless of what the Customizer holds. */
h1,h2,h3,h4,h5,h6,
.entry-title,
.ast-archive-title,
.ast-blog-single-element h1,
.widget-title,
.woocommerce div.product .product_title{
  font-family:var(--amf-font-display) !important;
  font-weight:400 !important;
  letter-spacing:var(--amf-track-display);
  text-transform:none !important;
}
h1{font-size:var(--amf-h1);line-height:.96}
h2{font-size:var(--amf-h2);line-height:1.02}
h3{font-size:var(--amf-h3);line-height:1.08}
h4{font-size:var(--amf-h4);line-height:1.22}

/* --- ABOVE HEADER ROW — carries the announcement message.
       Add an HTML element to this row in Customizer > Header Builder. */
.ast-above-header-bar{
  background-color:var(--amf-slate-900) !important;
  color:var(--amf-cut-50);
  min-height:38px;
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
  border-bottom:0;
}
.ast-above-header-bar a,.ast-above-header-bar p{color:var(--amf-cut-50);margin:0}
.ast-above-header-bar .site-header-section{flex:1;justify-content:center}
@media (min-width:769px){.ast-above-header-bar .ast-header-html p{white-space:nowrap}}

/* --- PRIMARY HEADER — translucent with a blur, which Astra cannot do from the Customizer. */
.ast-primary-header-bar{
  background-color:rgba(244,238,225,.88) !important;
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--amf-rule) !important;
}
.site-title,.site-title a{
  font-family:var(--amf-font-display) !important;
  font-weight:400 !important;
  font-size:1.625rem !important;
  letter-spacing:.01em;
  color:var(--amf-text) !important;
}
.site-description{
  font-family:var(--amf-font-sans);
  font-size:var(--amf-eyebrow);
  font-weight:600;
  letter-spacing:var(--amf-track-eyebrow);
  text-transform:uppercase;
  color:var(--amf-text-muted) !important;
}

/* --- NAVIGATION  (Rule 5)
       Active item gets a 1px timber underline. Astra's default is a coloured link plus a
       full-width hover background — both removed. */
.main-header-menu .menu-item > a,
.ast-header-break-point .main-navigation a{
  font-family:var(--amf-font-sans);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:0;
  color:var(--amf-text-soft);
  background:transparent;
}
.main-header-menu .menu-item > a:hover,
.main-header-menu .menu-item > a:focus{background:transparent;color:var(--amf-text)}
.main-header-menu .current-menu-item > a,
.main-header-menu .current_page_item > a,
.main-header-menu .current-menu-ancestor > a{
  color:var(--amf-text);
  box-shadow:inset 0 -1px 0 0 var(--amf-accent);
}
/* Astra's transparent-header preset otherwise leaves white links on the paper header. */
.ast-theme-transparent-header .main-header-menu > .menu-item > .menu-link{
  color:var(--amf-text-soft) !important;
}
.ast-theme-transparent-header .main-header-menu > .menu-item > .menu-link:hover,
.ast-theme-transparent-header .main-header-menu > .current-menu-item > .menu-link{
  color:var(--amf-text) !important;
}
/* Submenus: square, hairline, no shadow. */
.main-header-menu .sub-menu{
  border:1px solid var(--amf-rule) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:var(--amf-bg-raised);
}

/* Mobile menu trigger: keep the familiar hamburger visible on the paper header. */
.ast-button-wrap .menu-toggle{
  display:inline-flex !important;align-items:center;justify-content:center;
  width:44px !important;height:44px !important;min-width:44px;min-height:44px;padding:0 !important;
  background:transparent !important;color:var(--amf-text) !important;
  border:1px solid var(--amf-rule-strong) !important;
}
.ast-button-wrap .menu-toggle .ast-mobile-svg{fill:currentColor !important}

/* Header icons — search, account, cart. */
.ast-header-search .astra-search-icon,
.ast-header-account-wrap,
.ast-site-header-cart a{color:var(--amf-text-soft)}
.ast-site-header-cart .ast-cart-menu-wrap:hover,
.ast-header-search .astra-search-icon:hover{color:var(--amf-text)}
.ast-site-header-cart .ast-cart-menu-wrap .count{
  background:var(--amf-accent) !important;
  color:var(--amf-cut-50) !important;
  border:0 !important;
  border-radius:999px !important;   /* the cart count is the one permitted pill */
  font-size:10px;
  font-weight:700;
}

/* --- FOOTER — Footer Builder supplies the columns; this is the skin. */
.site-footer,
.ast-footer-overlay,
.site-primary-footer-wrap,
.site-above-footer-wrap,
.site-below-footer-wrap{
  background-color:var(--amf-slate-900) !important;
  color:var(--amf-cut-50);
}
.site-footer h2,.site-footer h3,.site-footer .widget-title{
  font-family:var(--amf-font-sans) !important;
  font-size:var(--amf-eyebrow) !important;
  font-weight:600 !important;
  letter-spacing:var(--amf-track-eyebrow) !important;
  text-transform:uppercase !important;
  color:var(--amf-slate-300) !important;
}
.site-footer p,.site-footer li{color:var(--amf-slate-200);font-size:var(--amf-small)}
.site-footer a{display:inline-block;min-height:24px;line-height:24px;color:var(--amf-slate-200);text-decoration:none}
.site-footer a:hover{color:var(--amf-cut-50);text-decoration:none}
.site-below-footer-wrap{
  border-top:1px solid rgba(244,238,225,.18) !important;
  font-size:.75rem;
  color:var(--amf-slate-300);
}

/* --- NO ROUNDING, NO BOXES  (Rules 1 and 2)
       Astra adds radius and shadow to blog cards, Woo tiles, images and covers. */
.ast-article-post,
.ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.woocommerce ul.products li.product,
.wp-block-image img,
.wp-block-cover,
.wp-block-group,
.ast-single-post-order,
input,textarea,select{
  border-radius:0 !important;
}
.ast-article-post,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single{
  box-shadow:none !important;
  border:0 !important;
}

/* Astra's separate-container layout adds a white card round the content. Ours is flat. */
.ast-separate-container .ast-article-single,
.ast-separate-container .site-main > .ast-row > .ast-article-post,
.ast-separate-container #primary{background-color:transparent !important;padding-inline:0}

/* --- FORMS — square, hairline, timber focus ring. */
input[type="text"],input[type="email"],input[type="tel"],input[type="search"],
input[type="number"],input[type="password"],input[type="url"],textarea,select{
  background:var(--amf-bg-raised);
  border:1px solid rgba(25,30,34,.16) !important;
  color:var(--amf-text);
  font-family:var(--amf-font-sans);
  font-size:var(--amf-small);
  box-shadow:none !important;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--amf-accent) !important;
  box-shadow:0 0 0 3px rgba(168,118,58,.28) !important;
  outline:none;
}

/* --- SCROLL-TO-TOP — switch it off in Astra Pro; hidden here as a backstop. */
#ast-scroll-top{display:none !important}

/* --- ASTRA PRO CUSTOM LAYOUTS — the delivery notice on non-Woo pages. */
.ast-custom-layout .amf-notice,
.amf-notice{margin-block:1.5rem}

/* --- EDITOR PARITY
       Astra styles the block editor body too. Keep headings honest in Gutenberg so the
       preview does not lie about weight or family. */
.editor-styles-wrapper h1,.editor-styles-wrapper h2,
.editor-styles-wrapper h3,.editor-styles-wrapper h4{
  font-family:var(--amf-font-display) !important;
  font-weight:400 !important;
  letter-spacing:var(--amf-track-display);
}
.editor-styles-wrapper .wp-block-button__link{border-radius:0 !important;text-transform:uppercase}

/* --- CONTACT — preserve the intended dark/light split after palette changes. --- */
.page-id-968 .uagb-block-bdeb5e49{
  background:var(--amf-slate-900) !important;
}
.page-id-968 .uagb-block-7e4af735{
  background:var(--amf-bg) !important;
  color:var(--amf-text) !important;
  padding:48px !important;
}
.page-id-968 .uagb-block-7e4af735 .uagb-forms-input-label{
  color:var(--amf-text) !important;
}
.page-id-968 .uagb-block-7e4af735 .uagb-forms-main-submit-button{
  min-height:48px;
  padding:0 24px;
}
@media (max-width:767px){
  .page-id-968 .uagb-block-7e4af735{
    padding:40px 24px !important;
  }
}

/* ---- amfuels-woocommerce.css ---- */
/* ==========================================================================
   AM FUELS — WOOCOMMERCE OVERRIDES  (load LAST)
   This is where the design is won or lost. WooCommerce and page-builder product
   widgets both default to bordered cards with badges, ratings and rounded corners —
   all three are removed here.

   NOTE: two things need the PHP snippet in README.md section 3 as well —
   removing the sale flash and the loop rating hooks, and forcing 2 price decimals.
   CSS alone can hide them but the markup is better removed at source.
   ========================================================================== */

/* Product archive titles sit on the pale cut-wood background. */
.woocommerce-products-header__title.page-title,
body.archive.woocommerce .page-title{
  color:var(--amf-text) !important;
}

/* --- 0. ASTRA'S WOO MODULE.
       Astra Pro's WooCommerce module adds its own card styling, a hover "quick view",
       and a shadow on tiles. Turn those off in Customizer > WooCommerce first
       (Shop > Product Style = "Plain"/none, and disable Quick View), then this file
       only has to hold the line. --- */
.ast-woo-shop-archive .woocommerce ul.products li.product,
.woocommerce ul.products li.product.ast-product-shadow,
.woocommerce ul.products li.product.ast-article-post{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
/* Astra centres tile content by default; ours is left-aligned. */
.ast-woo-product-tile-align-center .woocommerce ul.products li.product,
.woocommerce ul.products li.product{text-align:left !important}
/* Astra's own "add to cart" button styling on tiles. */
.woocommerce ul.products li.product .ast-shop-product-out-of-stock,
.woocommerce ul.products li.product .ast-onsale-card{display:none !important}

/* --- 1. SHOP LOOP: borderless gallery tiles. Rules 2 and 3. --- */
.woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr)) !important;
  gap:var(--amf-grid-row-gap) var(--amf-grid-gap) !important;
  margin:0 !important;
  list-style:none;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none !important}

.woocommerce ul.products li.product{
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-align:left !important;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

/* Image: square, flush, gentle scale on hover. No frame. */
.woocommerce ul.products li.product a img{
  margin:0 !important;
  border:0 !important;
  box-shadow:none !important;
  aspect-ratio:4 / 5;
  object-fit:cover;
  width:100%;
  transition:transform var(--amf-slow) cubic-bezier(.16,1,.3,1);
}
.woocommerce ul.products li.product:hover a img{transform:scale(1.02)}
.woocommerce ul.products li.product > a:first-of-type{overflow:hidden;display:block}

/* Name */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--amf-font-display) !important;
  font-weight:400 !important;
  font-size:1.1875rem !important;
  line-height:1.3 !important;
  letter-spacing:var(--amf-track-display);
  color:var(--amf-text) !important;
  padding:0 !important;
  margin:0 !important;
}

/* Price */
.woocommerce ul.products li.product .price{
  font-family:var(--amf-font-sans) !important;
  font-size:1.125rem !important;
  font-weight:500 !important;
  color:var(--amf-text) !important;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
  margin:0 !important;
}
.woocommerce ul.products li.product .price del{color:var(--amf-text-muted);font-size:.875rem;font-weight:400}
.woocommerce ul.products li.product .price ins{text-decoration:none;font-weight:500}

/* REMOVE the furniture WooCommerce adds. Rule 3. */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale,
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .woocommerce-product-rating{
  display:none !important;
}

/* Add to basket becomes a quiet text action that comes forward on hover */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  height:auto !important;
  padding:0 0 5px !important;
  margin:0 !important;
  background:transparent !important;
  color:var(--amf-text) !important;
  border:0 !important;
  border-bottom:1px solid currentColor !important;
  font-size:.6875rem !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  opacity:.82;
  align-self:flex-start;
  transition:opacity var(--amf-base) var(--amf-ease),color var(--amf-fast) var(--amf-ease);
}
.woocommerce ul.products li.product:hover .button,
.woocommerce ul.products li.product:hover .added_to_cart{opacity:1}
.woocommerce ul.products li.product .button:hover{color:var(--amf-accent) !important;background:transparent !important}

/* --- 2. SINGLE PRODUCT --- */
.woocommerce div.product .product_title{
  font-family:var(--amf-font-display) !important;
  font-weight:400 !important;
  font-size:var(--amf-h3) !important;
  letter-spacing:var(--amf-track-display);
  line-height:1.08;
}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  font-family:var(--amf-font-sans) !important;
  font-size:1.75rem !important;
  font-weight:500 !important;
  color:var(--amf-text) !important;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}
.woocommerce div.product .woocommerce-product-gallery img{border:0 !important}
.woocommerce div.product .woocommerce-product-gallery__wrapper img{aspect-ratio:4 / 5;object-fit:cover}

/* Quantity + add to basket: square, slate, aligned */
.woocommerce .quantity .qty{
  height:var(--amf-control-h);
  width:84px;
  text-align:center;
  border:1px solid rgba(25,30,34,.16);
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
.woocommerce div.product form.cart{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.woocommerce div.product form.cart .button{
  height:var(--amf-control-h-lg) !important;
  padding:0 30px !important;
  background:var(--amf-slate-900) !important;
  color:var(--amf-cut-50) !important;
  font-size:.8125rem !important;
  text-transform:uppercase !important;
  letter-spacing:var(--amf-track-button) !important;
}

/* Tabs: hairline row with a tan underline on the active tab. No boxes. */
.woocommerce div.product .woocommerce-tabs ul.tabs{
  display:flex;gap:1.5rem;padding:0 !important;margin:0 0 2.5rem !important;
  border-bottom:1px solid var(--amf-rule) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none !important}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent !important;border:0 !important;margin:0 !important;padding:0 0 .75rem !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--amf-font-sans) !important;font-size:.8125rem !important;font-weight:600 !important;
  color:var(--amf-text-muted) !important;padding:0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom:2px solid var(--amf-accent) !important}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--amf-text) !important}

/* Spec table: rules, not zebra stripes or boxes */
.woocommerce table.shop_attributes{border:0 !important}
.woocommerce table.shop_attributes th,.woocommerce table.shop_attributes td{
  border:0 !important;border-top:1px solid var(--amf-rule) !important;
  padding:1.25rem 0 !important;background:transparent !important;font-style:normal !important;
}
.woocommerce table.shop_attributes th{
  font-family:var(--amf-font-sans);font-size:var(--amf-eyebrow);font-weight:600;
  letter-spacing:var(--amf-track-eyebrow);text-transform:uppercase;color:var(--amf-text-muted);
}

/* --- 3. DELIVERY NOTICE — put this on shop, product and cart. Non-negotiable content. ---
   Markup: <div class="amf-notice"><strong>Delivered locally from Thrapston</strong>
           <span>Selected NN, PE and LE postcode districts. Free delivery on local orders over £80.</span></div> */
.amf-notice{
  display:flex;flex-direction:column;gap:4px;
  padding:1rem 1.25rem;background:var(--amf-amber-100);
}
.amf-notice strong{font-size:.8125rem;font-weight:600;color:var(--amf-amber-600)}
.amf-notice span{font-size:var(--amf-small);color:var(--amf-text-soft)}
.amf-notice--info{background:var(--amf-lichen-100)}
.amf-notice--info strong{color:var(--amf-lichen-600)}

/* --- 4. CART & CHECKOUT --- */
.woocommerce table.shop_table{border:0 !important;border-collapse:collapse !important}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{
  border:0 !important;border-top:1px solid var(--amf-rule) !important;padding:1.5rem 1rem 1.5rem 0 !important;
}
.woocommerce table.shop_table thead th{
  font-family:var(--amf-font-sans);font-size:var(--amf-eyebrow);font-weight:600;
  letter-spacing:var(--amf-track-eyebrow);text-transform:uppercase;color:var(--amf-text-muted);
}
.woocommerce .cart_totals,.woocommerce-checkout #order_review{
  background:var(--amf-bg-alt) !important;border:0 !important;padding:2rem !important;
}
.woocommerce .cart_totals h2,.woocommerce-checkout #order_review_heading{
  font-family:var(--amf-font-sans) !important;font-size:var(--amf-eyebrow) !important;font-weight:600 !important;
  letter-spacing:var(--amf-track-eyebrow) !important;text-transform:uppercase !important;
  color:var(--amf-text-muted) !important;
}
.woocommerce #respond input#submit.alt,.woocommerce a.button.alt,
.woocommerce button.button.alt,.woocommerce input.button.alt{
  background:var(--amf-slate-900) !important;color:var(--amf-cut-50) !important;
}
.woocommerce #respond input#submit.alt:hover,.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{background:var(--amf-slate-700) !important}

/* Woo messages: square, tinted, no left-border accent bars */
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error{
  border:0 !important;border-top:0 !important;background:var(--amf-bg-inset) !important;
  color:var(--amf-text) !important;padding:1rem 1.25rem !important;
}
.woocommerce .woocommerce-message::before,.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before{color:var(--amf-accent) !important}

/* --- 5. Breadcrumb --- */
.woocommerce .woocommerce-breadcrumb{
  font-size:.75rem !important;font-weight:500;color:var(--amf-text-muted) !important;margin-bottom:2rem !important;
}
.woocommerce .woocommerce-breadcrumb a{color:var(--amf-text-muted) !important}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--amf-text) !important;text-decoration:none}

/* --- 6. MOBILE CHECKOUT: keep Stripe fields inside the viewport. --- */
@media (max-width:767px){
  .woocommerce-checkout #payment,
  .woocommerce-checkout #payment ul.payment_methods,
  .woocommerce-checkout #payment li.wc_payment_method,
  .woocommerce-checkout #payment .payment_box,
  .woocommerce-checkout #payment .woocommerce-SavedPaymentMethods,
  .woocommerce-checkout #payment fieldset,
  .woocommerce-checkout #payment .wc-stripe-upe-element,
  .woocommerce-checkout #payment .form-row{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  .woocommerce-checkout #payment ul.payment_methods,
  .woocommerce-checkout #payment .woocommerce-SavedPaymentMethods{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .woocommerce-checkout #payment .payment_box{
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .woocommerce-checkout #payment label{
    max-width:100% !important;
    white-space:normal !important;
  }
  .woocommerce-checkout #place_order{
    width:100% !important;
    min-height:48px !important;
    padding:0 24px !important;
  }
}