/*
Theme Name: GarageRisteriet
Theme URI: https://garageristeriet.live
Update URI: https://github.com/kristianwind/garageristeriet-theme
Author: GarageRisteriet
Author URI: https://garageristeriet.live
Description: Warmt nordisk / japandi blocktheme (FSE) til GarageRisteriet - specialkafferisteri i Hornslet. Onepager-forside, WooCommerce-klar, selvhostede fonte, ingen eksterne CDN-kald (GDPR).
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.3.12
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: garageristeriet
Tags: full-site-editing, block-patterns, e-commerce, one-column, custom-colors, custom-logo, editor-style, translation-ready
*/

/* ─ Tokens (fra design-systemet) ───────────────────────── */
:root{
--gr-paper-000:#ffffff;--gr-paper-050:#faf7f1;--gr-paper-100:#f3ede3;--gr-paper-200:#e8dfd1;--gr-paper-300:#dacdb9;
--gr-latte-400:#c9b295;--gr-latte-500:#b2946f;--gr-wood-600:#98764f;--gr-wood-700:#75593b;
--gr-cocoa-800:#4a3428;--gr-cocoa-900:#2e211a;--gr-espresso-950:#1b1310;--gr-ink:#1f1f1d;
--gr-sage-500:#8a9481;--gr-sage-200:#ccd2c3;--gr-copper-500:#a9603c;--gr-copper-200:#e6c9b7;
--gr-success-600:#5f7a51;--gr-warning-600:#b4801f;--gr-danger-600:#9b3a2b;--gr-info-600:#5f7480;
--gr-alpha-cocoa-04:rgba(46,33,26,.04);--gr-alpha-cocoa-08:rgba(46,33,26,.08);--gr-alpha-cocoa-14:rgba(46,33,26,.14);--gr-alpha-cocoa-32:rgba(46,33,26,.32);
--gr-alpha-paper-12:rgba(250,247,241,.12);
--surface-page:var(--gr-paper-050);--surface-card:var(--gr-paper-000);--surface-sunken:var(--gr-paper-100);--surface-muted:var(--gr-paper-200);--surface-inverse:var(--gr-espresso-950);--surface-accent:var(--gr-cocoa-800);--surface-sage:var(--gr-sage-200);
--text-strong:var(--gr-espresso-950);--text-body:var(--gr-cocoa-900);--text-muted:var(--gr-wood-700);--text-subtle:var(--gr-latte-500);--text-on-dark:var(--gr-paper-050);--text-on-dark-muted:var(--gr-latte-400);--text-link:var(--gr-cocoa-800);--text-link-hover:var(--gr-copper-500);--text-price:var(--gr-espresso-950);--text-sale:var(--gr-copper-500);
--border-hairline:var(--gr-alpha-cocoa-08);--border-subtle:var(--gr-paper-200);--border-strong:var(--gr-latte-400);--border-inverse:var(--gr-alpha-paper-12);
--font-display:Anton,Haettenschweiler,"Arial Narrow",sans-serif;
--font-serif:"Source Serif 4",Georgia,serif;
--font-sans:"Source Sans 3","Segoe UI",system-ui,sans-serif;
--font-sans-cond:"Source Sans 3","Roboto Condensed",system-ui,sans-serif;
--fs-2xs:11px;--fs-xs:12px;--fs-sm:14px;--fs-base:17px;--fs-md:19px;--fs-lg:22px;--fs-xl:28px;--fs-2xl:36px;--fs-3xl:46px;--fs-4xl:60px;--fs-5xl:78px;
--lh-tight:.94;--lh-snug:1.15;--lh-heading:1.22;--lh-body:1.62;
--ls-eyebrow:.18em;--ls-button:.06em;--ls-heading:-.005em;
--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:20px;--space-7:24px;--space-8:32px;--space-9:40px;--space-10:48px;--space-11:64px;--space-12:80px;--space-13:96px;
--page-max:1240px;--page-pad:32px;--content-max:720px;--section-y:96px;
--radius-xs:2px;--radius-sm:4px;--radius-md:8px;--radius-lg:14px;--radius-pill:999px;
--shadow-sm:0 1px 2px var(--gr-alpha-cocoa-08);--shadow-md:0 6px 18px -8px var(--gr-alpha-cocoa-14);--shadow-lg:0 18px 40px -18px var(--gr-alpha-cocoa-14);
--ease-standard:cubic-bezier(.2,.6,.2,1);--dur-fast:160ms;--dur-mid:240ms;
--ring-focus:0 0 0 2px var(--gr-paper-050),0 0 0 6px var(--gr-cocoa-800);
--texture-paper:radial-gradient(120% 80% at 20% 10%,rgba(201,178,149,.18),transparent 60%),radial-gradient(90% 70% at 85% 90%,rgba(152,118,79,.14),transparent 65%);
--scrim-image:linear-gradient(to top,rgba(27,19,16,.72),rgba(27,19,16,0) 62%);
}

/* ─ Basis ──────────────────────────────────────────────── */
body{background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal}
h1,h2,h3,h4,h5,h6{text-wrap:pretty;letter-spacing:var(--ls-heading);color:var(--text-strong)}
h1,h2,h4,h5{font-family:var(--font-serif);font-weight:400}
h3{font-family:var(--font-sans);font-weight:600}
p{text-wrap:pretty}
a{color:var(--text-link);text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
:where(a,button,input,select,textarea,summary):focus-visible{outline:none;box-shadow:var(--ring-focus)}
figure,img{max-width:100%}
img{height:auto}
.gr-tabular,.woocommerce-Price-amount,td,th{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*{transition-duration:1ms!important;animation-duration:1ms!important}}

/* ─ Tekstroller ────────────────────────────────────────── */
.gr-eyebrow{font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--space-4)}
.gr-lead{font-size:var(--fs-md);color:var(--text-muted);max-width:42ch}
.gr-small{font-size:var(--fs-sm);color:var(--text-muted)}
.gr-display{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.01em;line-height:var(--lh-tight);color:var(--gr-latte-400)}
.gr-section{padding-top:var(--section-y)}
.gr-rule{border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.gr-on-dark,.gr-on-dark p,.gr-on-dark li{color:var(--text-on-dark-muted)}
.gr-on-dark h1,.gr-on-dark h2,.gr-on-dark h3{color:var(--text-on-dark)}
.gr-on-dark .gr-eyebrow{color:var(--gr-wood-600)}

/* ─ Header ─────────────────────────────────────────────── */
.gr-strip{background:var(--surface-inverse);color:var(--text-on-dark-muted);font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;text-align:center;padding:var(--space-3) var(--space-5);margin:0}
.gr-header{position:sticky;top:0;z-index:30;background:var(--surface-page);border-bottom:1px solid var(--border-hairline)}
.gr-header .wp-block-site-logo img{height:72px;width:auto}
.gr-nav a,.gr-nav .wp-block-navigation-item__content{font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-button);text-transform:uppercase;color:var(--text-muted);text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent}
.gr-nav a:hover,.gr-nav .current-menu-item .wp-block-navigation-item__content{color:var(--text-strong);border-bottom-color:var(--gr-cocoa-800)}

/* ─ Knapper ────────────────────────────────────────────── */
.wp-block-button__link,.gr-btn,button.single_add_to_cart_button,a.button,button.button,input[type=submit],.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--ls-button);text-transform:uppercase;background:var(--gr-espresso-950);color:var(--gr-paper-050);border:1px solid var(--gr-espresso-950);border-radius:var(--radius-sm);padding:0 var(--space-7);min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast)}
.wp-block-button__link:hover,.gr-btn:hover,a.button:hover,button.button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--gr-cocoa-800);border-color:var(--gr-cocoa-800);color:var(--gr-paper-050);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.wp-block-button__link:active,.gr-btn:active{transform:scale(.985);box-shadow:none}
.is-style-outline .wp-block-button__link,.gr-btn--secondary{background:transparent;color:var(--gr-cocoa-900);border:1px solid var(--gr-latte-500)}
.is-style-outline .wp-block-button__link:hover,.gr-btn--secondary:hover{background:var(--gr-paper-100);color:var(--gr-espresso-950);border-color:var(--gr-wood-600)}
.gr-btn--quiet{background:transparent;border-color:transparent;color:var(--text-muted)}
.gr-btn--quiet:hover{background:var(--gr-paper-100);border-color:transparent;color:var(--text-strong)}
.gr-on-dark .wp-block-button__link,.gr-btn--inverse{background:var(--gr-paper-050);color:var(--gr-espresso-950);border-color:var(--gr-paper-050)}
.gr-on-dark .wp-block-button__link:hover{background:var(--gr-paper-200);color:var(--gr-espresso-950)}

/* ─ Kort ───────────────────────────────────────────────── */
.gr-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-7)}
.gr-card--lg{padding:var(--space-10)}
.gr-card--flat{background:var(--surface-sunken);border-color:transparent}
.gr-card--link{transition:transform var(--dur-mid) var(--ease-standard),box-shadow var(--dur-mid),border-color var(--dur-mid)}
.gr-card--link:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.gr-badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-2xs);font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;padding:5px 11px;border-radius:var(--radius-pill);background:var(--gr-sage-200);color:#3f4a36}
.gr-badge--outline{background:transparent;border:1px solid var(--border-strong);color:var(--text-muted)}
.gr-badge--sale{background:var(--gr-copper-200);color:#6f3a20}

/* ─ Billedpladsholder (indtil fotos findes) ────────────── */
.gr-ph{position:relative;display:flex;align-items:flex-end;background-color:var(--gr-paper-100);background-image:var(--texture-paper);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;padding:var(--space-5)}
.gr-ph::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,rgba(152,118,79,.10) 0 1px,transparent 1px 9px)}
.gr-ph p{position:relative;margin:0;font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs);letter-spacing:.02em;color:var(--text-muted)}
.gr-ph--16x9{aspect-ratio:16/9}.gr-ph--4x5{aspect-ratio:4/5}.gr-ph--3x2{aspect-ratio:3/2}.gr-ph--4x3{aspect-ratio:4/3}
.gr-on-dark .gr-ph{background-color:var(--gr-cocoa-800);border-color:var(--border-inverse)}
.gr-on-dark .gr-ph p{color:var(--gr-latte-400)}

/* ─ Sektioner ──────────────────────────────────────────── */
.gr-usp{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);padding:var(--space-9) 0}
.gr-usp h3{font-size:var(--fs-base);margin:0 0 var(--space-2)}
.gr-usp p{margin:0;font-size:var(--fs-sm);color:var(--text-muted)}
.gr-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8)}
.gr-steps .gr-num{font-family:var(--font-display);font-size:var(--fs-2xl);line-height:1;color:var(--gr-latte-400);margin:0 0 var(--space-4)}
.gr-band{background:var(--surface-inverse);padding:var(--space-12) 0;margin-top:var(--section-y)}
.gr-quote{font-family:var(--font-serif);font-size:var(--fs-2xl);line-height:var(--lh-snug);color:var(--text-on-dark);max-width:28ch;margin:var(--space-8) 0 0;border:0;padding:0}
.gr-hours{display:flex;justify-content:space-between;gap:var(--space-5);padding:var(--space-4) 0;border-bottom:1px solid var(--border-subtle);margin:0}
.gr-hours span:first-child{color:var(--text-muted)}
.gr-hours span:last-child{color:var(--text-strong)}
.gr-notice{background:var(--gr-paper-100);border:1px solid var(--border-subtle);border-left:3px solid var(--gr-sage-500);border-radius:var(--radius-sm);padding:var(--space-6)}
.gr-notice strong{display:block;color:var(--text-strong);margin-bottom:var(--space-2)}
.gr-meter{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-card);padding:var(--space-6)}
.gr-meter .gr-bars{display:flex;gap:6px;margin:var(--space-4) 0 var(--space-3)}
.gr-meter .gr-bars i{display:block;height:10px;flex:1;border-radius:var(--radius-xs);background:var(--gr-paper-200)}
.gr-meter .gr-bars i.on{background:var(--gr-cocoa-800)}

/* ─ Footer ─────────────────────────────────────────────── */
.gr-footer{background:var(--surface-inverse);color:var(--text-on-dark-muted);margin-top:var(--section-y)}
.gr-footer a{color:var(--text-on-dark-muted);text-decoration:none}
.gr-footer a:hover{color:var(--gr-paper-050)}
.gr-footer a.gr-btn,.gr-footer .wp-block-button__link,.gr-footer .gr-btn--inverse{color:var(--gr-espresso-950)}
.gr-footer a.gr-btn:hover,.gr-footer .wp-block-button__link:hover,.gr-footer .gr-btn--inverse:hover{color:var(--gr-espresso-950);background:var(--gr-paper-200);border-color:var(--gr-paper-200)}
.gr-footer a.gr-btn--secondary{color:var(--gr-paper-050);border-color:var(--gr-wood-700)}
.gr-footer a.gr-btn--secondary:hover{color:var(--gr-espresso-950);background:var(--gr-paper-050);border-color:var(--gr-paper-050)}
.gr-footer .gr-fh{font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-on-dark);margin:0 0 var(--space-5)}
.gr-footer ul{list-style:none;margin:0;padding:0}
.gr-footer li{font-size:var(--fs-sm);padding:var(--space-2) 0}
.gr-footer .wp-block-site-logo img{height:54px;width:auto}
.gr-fcols{display:grid;grid-template-columns:1.4fr .85fr .95fr 1fr 1.5fr;gap:var(--space-8)}
.gr-marks{display:flex;align-items:flex-end;gap:var(--space-9);flex-wrap:wrap;border-top:1px solid var(--border-inverse);padding-top:var(--space-8)}
.gr-mark-label{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gr-wood-600);margin:0 0 var(--space-3)}
.gr-mark-row{display:flex;gap:var(--space-4);flex-wrap:wrap;margin:0}
.gr-mark{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-width:74px;height:30px;padding:0 6px;border:1px solid var(--gr-wood-700);border-radius:var(--radius-xs);font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gr-latte-400)}
.gr-bottom{border-top:1px solid var(--border-inverse);padding-top:var(--space-6);display:flex;gap:var(--space-7);flex-wrap:wrap;font-size:var(--fs-xs);color:var(--gr-wood-600)}
.gr-bottom a{color:var(--gr-wood-600)}

/* ─ Formularer ─────────────────────────────────────────── */
input[type=text],input[type=email],input[type=tel],input[type=search],input[type=number],input[type=password],select,textarea,.wp-block-search__input{width:100%;font-family:var(--font-sans);font-size:var(--fs-base);color:var(--text-body);background:var(--surface-card);border:1px solid var(--gr-latte-500);border-radius:var(--radius-sm);min-height:44px;padding:0 var(--space-5)}
textarea{padding:var(--space-4) var(--space-5);min-height:120px}
input::placeholder,textarea::placeholder{color:var(--text-subtle)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gr-cocoa-800);box-shadow:0 0 0 3px var(--gr-alpha-cocoa-08)}
label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text-strong);margin-bottom:var(--space-3)}
.gr-on-dark input,.gr-on-dark select,.gr-on-dark textarea{background:transparent;border-color:var(--gr-wood-700);color:var(--text-on-dark)}

/* ─ WooCommerce ────────────────────────────────────────── */
.woocommerce ul.products li.product{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;padding:0 0 var(--space-7);text-align:left;transition:transform var(--dur-mid) var(--ease-standard),box-shadow var(--dur-mid),border-color var(--dur-mid)}
.woocommerce ul.products li.product:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.woocommerce ul.products li.product a img{margin:0 0 var(--space-6);aspect-ratio:4/5;object-fit:cover;border-radius:0}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--font-serif);font-size:var(--fs-lg)!important;color:var(--text-strong);padding:0 var(--space-7) var(--space-2)!important}
.woocommerce ul.products li.product .price,.woocommerce div.product p.price{color:var(--text-strong);font-size:var(--fs-md);font-weight:600;padding:0 var(--space-7)}
.woocommerce ul.products li.product .price del{color:var(--text-subtle);font-weight:400}
.woocommerce ul.products li.product .price ins{color:var(--gr-copper-500);text-decoration:none}
.woocommerce ul.products li.product .button{margin:var(--space-6) var(--space-7) 0}
.woocommerce span.onsale{background:var(--gr-copper-200);color:#6f3a20;border-radius:var(--radius-pill);font-size:var(--fs-2xs);font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;min-height:0;line-height:1;padding:7px 12px;top:16px;left:16px;right:auto}
.woocommerce div.product .product_title{font-family:var(--font-serif);font-size:var(--fs-2xl)}
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error{background:var(--gr-paper-100);border-top:0;border-left:3px solid var(--gr-sage-500);border-radius:var(--radius-sm);color:var(--text-body)}
.woocommerce .woocommerce-error{border-left-color:var(--gr-danger-600)}
.woocommerce table.shop_table{border:1px solid var(--border-subtle);border-radius:var(--radius-md);border-collapse:collapse}
.woocommerce table.shop_table th{font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.woocommerce table.shop_table td,.woocommerce table.shop_table th{border-bottom:1px solid var(--border-subtle)}
.wc-block-components-button,.wc-block-cart__submit-button{border-radius:var(--radius-sm)!important;text-transform:uppercase;letter-spacing:var(--ls-button)}

/* ─ Responsivt ─────────────────────────────────────────── */
@media (max-width:1023px){
.gr-fcols{grid-template-columns:1fr 1fr 1fr}
.gr-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:781px){
:root{--section-y:64px;--page-pad:20px}
.gr-usp,.gr-steps,.gr-fcols{grid-template-columns:1fr;gap:var(--space-7)}
.gr-quote{font-size:var(--fs-xl)}
h1{font-size:var(--fs-2xl)}
}


/* ─ Breddegaranti ──────────────────────────────────────────
   Uafhængig af sitets globale indholdsbredde: forsidens
   sektioner får 1240px, header og footer får samme ramme. */
.home .wp-site-blocks > main.wp-block-group,
.wp-site-blocks > main.wp-block-group{max-width:none;padding-left:0;padding-right:0}
.wp-site-blocks > main.wp-block-group > section{max-width:1240px;margin-left:auto;margin-right:auto;padding-left:var(--page-pad);padding-right:var(--page-pad);width:100%;box-sizing:border-box}
.wp-site-blocks > main.wp-block-group > section.gr-band,
.wp-site-blocks > main.wp-block-group > section.gr-uspband{max-width:none;padding-left:0;padding-right:0}
.gr-band > .wp-block-columns,.gr-band > .wp-block-group{max-width:1240px;margin-left:auto;margin-right:auto;padding-left:var(--page-pad);padding-right:var(--page-pad);box-sizing:border-box}
.gr-header > .wp-block-group,.gr-footer > .wp-block-group{max-width:1240px;margin-left:auto;margin-right:auto;padding-left:var(--page-pad);padding-right:var(--page-pad);box-sizing:border-box}
.gr-header > .gr-strip{max-width:none;margin:0;padding-left:var(--page-pad);padding-right:var(--page-pad)}
.wp-site-blocks > main.wp-block-group > section > .wp-block-columns,
.wp-site-blocks > main.wp-block-group > section > .wp-block-group{max-width:none}
.gr-products,.woocommerce ul.products{max-width:none}


/* ─ Typografi-garanti ──────────────────────────────────────
   Overstyrer gemte globale stilarter fra det gamle tema. */
.wp-site-blocks h1,.wp-site-blocks .wp-block-post-title{font-family:var(--font-serif);font-weight:400;font-size:clamp(38px,4.6vw,60px);line-height:1.05;letter-spacing:-.005em}
.wp-site-blocks h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(28px,2.6vw,36px);line-height:1.22;letter-spacing:-.005em}
.wp-site-blocks h3{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-lg);line-height:1.22}
.wp-site-blocks h4{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-md)}
.wp-site-blocks .gr-usp h3{font-size:var(--fs-base)}
.wp-site-blocks .gr-lead{font-size:var(--fs-md);line-height:1.6;max-width:46ch}
.wp-site-blocks .gr-eyebrow{font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.wp-site-blocks .gr-quote{font-size:clamp(28px,2.6vw,36px)}
.wp-site-blocks .gr-card h3{margin-top:0}

/* ─ WooCommerce-produktgrid ────────────────────────────────
   Woo bruger floats som standard; her er det et rigtigt grid
   i brandets kortstil. */
.wp-block-shortcode,.wp-block-woocommerce-all-products{max-width:none}
.woocommerce ul.products,.woocommerce-page ul.products{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8);margin:0!important;padding:0!important;list-style:none;width:100%}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none!important}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{width:auto!important;margin:0!important;float:none!important;clear:none!important;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;text-align:left;padding:0;position:relative;transition:border-color .16s ease,box-shadow .16s ease,transform .24s ease}
.woocommerce ul.products li.product:hover{border-color:var(--border-strong);box-shadow:0 6px 18px -8px rgba(46,33,26,.14);transform:translateY(-2px)}
.woocommerce ul.products li.product > a:first-of-type{display:block}
.woocommerce ul.products li.product a img,.woocommerce ul.products li.product img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;margin:0!important;border-radius:0;display:block}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--font-serif)!important;font-weight:400;font-size:var(--fs-lg);line-height:1.22;color:var(--text-strong);padding:var(--space-6) var(--space-6) var(--space-2);margin:0}
.woocommerce ul.products li.product .price{font-family:var(--font-sans);font-size:var(--fs-md);font-weight:600;color:var(--text-price);padding:0 var(--space-6) var(--space-5);margin:0;font-variant-numeric:tabular-nums;display:block}
.woocommerce ul.products li.product .price del{color:var(--text-subtle);font-weight:400;margin-right:8px}
.woocommerce ul.products li.product .price ins{text-decoration:none;color:var(--text-sale,var(--gr-copper-500))}
.woocommerce ul.products li.product .woocommerce-loop-product__link{text-decoration:none}
.woocommerce ul.products li.product .star-rating{margin:0 var(--space-6) var(--space-4);font-size:.8em;color:var(--gr-latte-500)}
.woocommerce ul.products li.product .button,.woocommerce ul.products li.product .added_to_cart{margin:auto var(--space-6) var(--space-6)!important;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--text-body);border:1px solid var(--border-strong);border-radius:4px;padding:12px 18px;font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--ls-button);text-transform:uppercase;text-decoration:none}
.woocommerce ul.products li.product .button:hover{background:var(--surface-sunken);border-color:var(--gr-wood-600);color:var(--text-strong)}
.woocommerce ul.products li.product .onsale{position:absolute;top:var(--space-5);left:var(--space-5);right:auto;margin:0;background:var(--gr-copper-500);color:var(--gr-paper-050);border-radius:999px;padding:4px 12px;font-family:var(--font-sans);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;min-height:0;line-height:1.4}
@media (max-width:1023px){.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:1fr}}


/* ─ Felter og select ──────────────────────────────────────
   Bruges af formalingsvalget paa produktsiden (inc/grind.php). */
.gr-btn--sm{padding:10px 16px;font-size:var(--fs-xs)}
.gr-field{display:block;min-width:0}
.gr-select{position:relative;display:block}
.gr-select select,.gr-select .gr-control{appearance:none;-webkit-appearance:none;padding-right:38px}
.gr-select__chev{position:absolute;top:50%;right:12px;transform:translateY(-50%);display:flex;color:var(--text-muted);pointer-events:none}

/* ─ Formalingsvalg (inc/grind.php) ─────────────────────────
   1.3.0, og feltet skal ikke arve navnet paa noget der ikke findes.
   Reglerne her er de tre gamle slaaet sammen i den raekkefoelge
   kaskaden alligevel gav dem. */
.gr-grind{display:block;margin:0}
.gr-grind .gr-field__label{display:block;font-family:var(--font-sans);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin:0 0 6px}
.gr-grind .gr-select select,.gr-grind .gr-control{min-height:40px;padding:0 34px 0 12px}

/* ─ Produktsiden ───────────────────────────────────────────
   Vi overtager IKKE WooCommerces produktskabelon — abonnements-
   pluginnet skriver sine egne felter der. Her klaedes Woo's egen
   opbygning bare i brandets toej. */
.woocommerce div.product{max-width:1240px;margin:0 auto;padding:var(--section-y) var(--page-pad)}
.woocommerce div.product .product_title{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-3xl);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);color:var(--text-strong);margin:0 0 var(--space-4)}
.woocommerce div.product .woocommerce-product-details__short-description{font-size:var(--fs-md);line-height:var(--lh-body);color:var(--text-body);max-width:56ch}
.woocommerce div.product p.price,.woocommerce div.product span.price{font-family:var(--font-sans);font-size:var(--fs-xl);font-weight:600;color:var(--text-price);font-variant-numeric:tabular-nums}
.woocommerce div.product p.price del,.woocommerce div.product span.price del{color:var(--text-muted);font-weight:400}
.woocommerce div.product p.price ins,.woocommerce div.product span.price ins{text-decoration:none;color:var(--text-sale)}
.woocommerce div.product div.images img{border-radius:var(--radius-md);background:var(--surface-sunken)}
.woocommerce div.product form.cart{display:grid;gap:var(--space-5);padding:var(--space-7);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-top:var(--space-6)}
.woocommerce div.product form.cart .variations{width:100%;border-collapse:collapse;margin:0}
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td{display:block;width:100%;padding:0;text-align:left;border:0}
.woocommerce div.product form.cart .variations th.label label{font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);margin:0 0 6px;display:block}
.woocommerce div.product form.cart .variations td.value{margin-bottom:var(--space-5)}
.woocommerce div.product form.cart .reset_variations{font-size:var(--fs-sm);color:var(--text-muted)}
.woocommerce div.product form.cart .quantity{display:inline-flex}
.woocommerce div.product form.cart .single_add_to_cart_button{width:100%;justify-content:center}
.woocommerce div.product .woocommerce-variation-price{padding-top:var(--space-4);border-top:1px solid var(--border-hairline)}
.woocommerce div.product .woocommerce-tabs ul.tabs{border-bottom:1px solid var(--border-subtle);padding:0;margin:0 0 var(--space-7)}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:none;border:0;border-radius:0;margin:0 var(--space-6) 0 0;padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);padding:var(--space-3) 0;display:block;border-bottom:2px solid transparent}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--text-strong);border-bottom-color:var(--gr-copper-500)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce .related>h2,.woocommerce .upsells>h2{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-2xl);color:var(--text-strong);margin:0 0 var(--space-7)}
.woocommerce .related,.woocommerce .upsells{max-width:1240px;margin:var(--section-y) auto 0;padding:0 var(--page-pad)}


/* ─ Forside 1.1: hero, USP-bånd, abonnement, butik ─────── */
.gr-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-10);align-items:center;padding-top:var(--space-10)}
.gr-hero__title{font-size:clamp(34px,4.4vw,54px);line-height:1.06;margin:0 0 var(--space-5)}
.gr-hero__text .gr-lead{color:var(--text-body);max-width:46ch;margin:0 0 var(--space-6)}
.gr-hero__media{aspect-ratio:1/1;width:100%;max-width:420px;margin-left:auto;border-radius:var(--radius-md)}
.gr-metarow{display:flex;gap:var(--space-7);flex-wrap:wrap;margin:var(--space-7) 0 0;padding-top:var(--space-5);border-top:1px solid var(--border-subtle);font-size:var(--fs-sm);color:var(--text-muted)}
.gr-ph--1x1{aspect-ratio:1/1}

.gr-uspband{background:var(--surface-inverse);color:var(--text-on-dark);margin-top:var(--space-10)}
.gr-uspband__inner{max-width:var(--page-max);margin:0 auto;padding:var(--space-9) var(--page-pad);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8)}
.gr-uspband__item p{margin:0;color:var(--text-on-dark);font-size:var(--fs-base);line-height:var(--lh-body)}
.gr-icon{display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center;border:1px solid var(--gr-wood-700);border-radius:var(--radius-pill);color:var(--gr-latte-400);margin-bottom:var(--space-5)}
.gr-icon--sm{width:38px;height:38px;flex-shrink:0;margin:0;border-color:var(--border-strong);color:var(--text-muted)}

.gr-subhead{font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid var(--border-subtle)}
.gr-subhead--plain{border:0;padding:0;margin-bottom:var(--space-5)}
.gr-note{margin-top:var(--space-8);background:var(--surface-sunken);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-7);max-width:56ch}
.gr-note p{margin:0}
.gr-note__title{font-weight:600;color:var(--text-strong);margin-bottom:var(--space-3)!important}

.gr-steps .gr-num{font-family:var(--font-display);font-size:var(--fs-xl);line-height:1;color:var(--gr-latte-500);margin:0 0 var(--space-4)}
.gr-steps .gr-card h3{margin:0 0 var(--space-3)}
.gr-steps .gr-card p.gr-small{margin:0;color:var(--text-body)}

.gr-abo{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);align-items:center}
.gr-abo__rows{display:grid;gap:var(--space-4)}
.gr-abo__row{display:flex;gap:var(--space-5);align-items:flex-start;padding:var(--space-5);border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}
.gr-abo__row p{margin:0}
.gr-abo__rowtitle{font-weight:600;color:var(--text-strong);margin-bottom:2px!important}

.gr-bullets{list-style:none;margin:0 0 var(--space-6);padding:0;display:grid;gap:var(--space-4)}
.gr-bullets li{position:relative;padding-left:var(--space-6)}
.gr-bullets li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--gr-copper-500)}

.gr-butik{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-7);align-items:stretch}
.gr-butik .gr-card p:last-child{margin-bottom:0}
.gr-butik .gr-ph{min-height:280px}
.gr-hours--last{border-bottom:0}

@media (max-width:1023px){
.gr-hero{grid-template-columns:1fr;gap:var(--space-8)}
.gr-hero__media{margin-left:0}
.gr-uspband__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
.gr-abo,.gr-butik{grid-template-columns:1fr}
}
@media (max-width:640px){
.gr-uspband__inner{grid-template-columns:1fr}
}


/* ─ 1.1.1: rettelser efter gennemgang ──────────────────── */
/* WP's blockGap giver soeskende en margin-top; den maa ikke skubbe kort skaevt.
   Enhver Gruppe-blok i flow-layout goer det: WordPress skriver
   .is-layout-flow > * { margin-block-start: <gap> } og nulstiller kun det
   FOERSTE barn. I et flex-grid betyder det at barn 1 staar rigtigt og alle de
   andre er skubbet ned — hvilket ligner en fejl i ens eget markup og ikke i
   layoutet, fordi de forkerte staar paa linje med hinanden.
   1.3.10: .gr-bottom kom til. Maerkerne i footeren (oekologi, betaling, fragt,
   anmeldelser) laa der med 32px paa de tre sidste, saa Oekologi hang alene
   hoejere end resten. Maalt paa den levende side: top 821 mod 853.
   .gr-marks er med af samme grund, selv om ingen bruger den endnu — den er
   bygget til praecis den raekke og ville faa praecis samme fejl. */
.gr-steps > *,.gr-butik > *,.gr-abo > *,.gr-abo__rows > *,.gr-uspband__item,
.gr-bottom > *,.gr-marks > *{margin-top:0!important;margin-bottom:0!important}
.gr-steps{align-items:stretch}
.gr-steps > .gr-card{display:flex;flex-direction:column;height:100%}

.woocommerce ul.products li.product > *:empty{display:none!important}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* 4 op paa desktop */
@media (min-width:1280px){.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1279px) and (min-width:1024px){.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}}


/* ─ 1.1.2: produktkortet strammet op ───────────────────── */
/* simple produkter: knappen skal ikke svaeve midt i kortet */
.woocommerce ul.products li.product .button,.woocommerce ul.products li.product .added_to_cart{margin:auto var(--space-6) var(--space-6)!important;align-self:flex-start}

/* ─ Butik som WordPress-kolonner ───────────────────────────
   .gr-butik er et grid med align-items:stretch, saa de tre bokse faar samme
   hoejde af sig selv. Det holder kun saa laenge de er soeskende i ÉN
   html-blok. Skal den tredje vaere en rigtig Billede-blok — saa fotoet kan
   skiftes i editoren — maa sektionen deles i en Kolonner-blok.

   Loesningen er at give Kolonner-blokken SAMME grid som .gr-butik frem for
   at arbejde med WordPress' flex. Maalt: med flex blev kortene 377px hoeje
   inde i kolonner paa 319px — indholdet floed ud over, fordi height:100% mod
   en forael der uden bestemt hoejde bliver til auto. Grid med stretch har
   ikke det problem; det er samme mekanik som .gr-butik og .gr-steps.

   Saet klassen gr-butik-cols paa KOLONNER-blokken, ikke paa kolonnerne. */
.gr-butik-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--space-7);align-items:stretch}
.gr-butik-cols > .wp-block-column{display:flex;flex-direction:column;flex-basis:auto!important}
.gr-butik-cols > .wp-block-column > *{flex:1;width:100%;margin-block:0}
.gr-butik-cols .gr-card{display:flex;flex-direction:column}
.gr-butik-cols .gr-ph{min-height:280px}

/* Billedet i rammen: samme kant og hjoerneradius som .gr-card og .gr-ph.
   object-fit:cover fordi hoejden nu kommer fra soeskende og ikke fra
   billedets eget sideforhold — uden den ville fotoet blive trukket skaevt.
   Brug IKKE gr-ph--4x3 eller anden aspect-ratio her; den laaser hoejden til
   bredden og kaemper mod straekningen. */
.gr-butik-cols figure.wp-block-image{margin:0;display:flex}
.gr-butik-cols figure.wp-block-image img{display:block;width:100%;height:100%;
object-fit:cover;border:1px solid var(--border-subtle);border-radius:var(--radius-md);
box-sizing:border-box}

/* Stakket falder hoejden vaek, og saa skal fotoet have sit eget forhold igen.
   1023px matcher det breakpoint .gr-butik selv bruger. */
@media (max-width:1023px){
.gr-butik-cols{grid-template-columns:1fr}
.gr-butik-cols figure.wp-block-image img{height:auto;aspect-ratio:4/3}
}

/* ─ 1.3.1: produktkort i ens hoejde, lavere knap ───────────
   Maalt paa forsiden foer: raekke 1 var 583px og raekke 2 641px, fordi
   "Økologisk Papua Ny Guinea Korofeigu A/X" fylder to titellinjer. Grid
   giver hver raekke sin egen hoejde, saa kort i FORSKELLIGE raekker blev
   ikke ens. grid-auto-rows:1fr giver alle raekker samme hoejde som den
   hoejeste. */
.woocommerce ul.products,.woocommerce-page ul.products{grid-auto-rows:1fr}
.woocommerce ul.products li.product{height:100%}

/* Knappen var 70px hoej — Woos block-button-styles laegger egen padding og
   min-height oveni temaets 12px. Den skal vaere en diskret sekundaer knap,
   ikke sektionens tungeste element. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
padding:9px 16px!important;min-height:0!important;line-height:1.35!important;
font-size:var(--fs-xs)}

/* Titlen faar plads til to linjer uden at skubbe knappen skaevt: knappen
   sidder i bunden via margin-top:auto, og den plads titlen ikke bruger,
   bliver tom i stedet for at flytte noget. */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
min-height:calc(2 * 1.22em)}

/* ─ 1.3.2: vandret overloeb ─────────────────────────────────────────────
   Maalt paa forsiden: document.scrollWidth 1472 ved et viewport paa 1440.
   Tre aarsager, tre rettelser.

   1) theme.json saetter useRootPaddingAwareAlignments + 32px root-padding,
      saa WordPress giver main klassen .has-global-padding og udsender
      reglen .has-global-padding > .alignfull { margin-inline: -32px }.
      Den negative margin findes for at OPHAEVE en padding — men linje 189
      herover nulstiller netop den padding paa main, fordi temaet selv
      styrer sektionernes indryk. Tilbage staar den negative margin uden
      noget at ophaeve, og hver alignfull stikker 32px ud i hver side. */
.wp-site-blocks > main.wp-block-group.has-global-padding > .alignfull{
margin-left:0;margin-right:0}

/* 2) .gr-butik .gr-ph har min-height:280px og .gr-ph--4x3 har
      aspect-ratio:4/3. En mindste HOEJDE plus et sideforhold er ogsaa en
      mindste BREDDE — 280 x 4/3 = 373px — og uden max-width kan kortet
      ikke blive smallere end sin egen hoejde tillader. box-sizing skal med:
      med content-box lagde de 16px padding og 1px kant sig UDEN PAA de
      100%, saa kassen stak 34px ud alligevel. */
.gr-ph{max-width:100%;box-sizing:border-box}

/* 3) .gr-bottom er display:flex, og et flex-element har min-width:auto.
      Copyright-linjen kunne derfor ikke krympe under sin min-content-bredde
      og stak ud af footeren paa smalle skaerme. */
.gr-bottom > *{min-width:0}

/* ─ 1.3.2: logoet til venstre, menuen til hoejre ────────────────────────
   Headerraekken er en flex-gruppe med logo, navigation, konto og kurv.
   Alle fire laa venstrestillet, saa hoejre tredjedel stod tom. margin-left
   paa navigationen skubber den OG alt efter den ud til hoejre kant i én
   bevaegelse — logoet bliver staaende. Paa smalle skaerme fylder raekken
   allerede bredden ud, saa reglen goer ingenting der. */
.gr-header .gr-nav{margin-left:auto}

/* ─ 1.3.5: formularer ───────────────────────────────────────────────────
   WPForms leverer sit eget stylesheet, og det vinder paa kaskaden: knappen
   stod blaa selvom gr-btn sad paa den. Reglerne herunder haenger derfor paa
   .wpforms-container, som er mere specifikt end pluginets egne selektorer.
   Ingen !important udover paa knappen, hvor pluginet selv bruger den. */
.wpforms-container{max-width:none;margin:0}
.wpforms-container .wpforms-form{display:grid;gap:var(--space-6)}
.wpforms-container .wpforms-field{padding:0}

.wpforms-container .wpforms-field-label,
.wpforms-container .wpforms-field-label-inline{
font-family:var(--font-sans);font-size:var(--fs-2xs);font-weight:600;
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);
margin:0 0 7px;display:block}
.wpforms-container .wpforms-required-label{color:var(--gr-copper-500);border:0}

/* Selve felterne arver temaets input-regler (linje 147) — her rettes kun det
   pluginet tvinger igennem: egen hoejde, egen kant og egen skriftstoerrelse. */
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container textarea{
font-size:var(--fs-base);border:1px solid var(--gr-latte-500);
border-radius:var(--radius-sm);background:var(--surface-card);
color:var(--text-body);padding:0 var(--space-5);min-height:48px;box-sizing:border-box}
.wpforms-container textarea{padding:14px var(--space-5);min-height:132px;line-height:1.5}
.wpforms-container input::placeholder,.wpforms-container textarea::placeholder{color:var(--text-subtle)}
.wpforms-container input:focus,.wpforms-container textarea:focus{
outline:2px solid var(--gr-cocoa-800);outline-offset:1px;border-color:var(--gr-cocoa-800)}

.wpforms-container .wpforms-field-description{
font-size:var(--fs-xs);color:var(--text-muted);margin:7px 0 0}

/* Samtykkefeltet: afkrydsningen og teksten paa linje, teksten i broedtekst og
   ikke i versaler — det er en saetning man skal laese, ikke en etiket. */
.wpforms-container .wpforms-field-checkbox ul{list-style:none;margin:0;padding:0}
.wpforms-container .wpforms-field-checkbox li{display:flex;align-items:flex-start;gap:12px}
.wpforms-container .wpforms-field-checkbox input[type=checkbox]{
appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;
border:1px solid var(--gr-latte-500);border-radius:var(--radius-xs);
background:var(--surface-card);cursor:pointer}
.wpforms-container .wpforms-field-checkbox input[type=checkbox]:checked{
background:var(--gr-espresso-950);border-color:var(--gr-espresso-950)}
.wpforms-container .wpforms-field-checkbox input[type=checkbox]:checked::after{
content:"";display:block;width:6px;height:11px;margin:3px auto 0;
border:solid var(--gr-paper-050);border-width:0 2px 2px 0;transform:rotate(45deg)}
.wpforms-container .wpforms-field-checkbox .wpforms-field-label-inline{
font-size:var(--fs-base);font-weight:400;letter-spacing:0;text-transform:none;
color:var(--text-body);margin:0}

.wpforms-container .wpforms-submit-container{margin:0}
.wpforms-container button.wpforms-submit{
font-family:var(--font-sans)!important;font-size:var(--fs-sm)!important;font-weight:600!important;
letter-spacing:var(--ls-button)!important;text-transform:uppercase!important;
background:var(--gr-espresso-950)!important;color:var(--gr-paper-050)!important;
border:1px solid var(--gr-espresso-950)!important;border-radius:var(--radius-sm)!important;
padding:0 var(--space-7)!important;min-height:52px!important;width:100%;
display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}
.wpforms-container button.wpforms-submit::after{content:"→";font-size:15px;line-height:1}
.wpforms-container button.wpforms-submit:hover{background:var(--gr-cocoa-800)!important;border-color:var(--gr-cocoa-800)!important}
.wpforms-container .wpforms-error{color:var(--gr-copper-500);font-size:var(--fs-xs)}

/* Nyhedsbrevet i footeren. Det poster direkte til Mailchimp, saa der er ingen
   kode paa vores side — men det staar paa moerk bund og skal have sine egne
   farver; temaets input-regler er lavet til lys bund. */
.gr-news{margin:0}
.gr-news p{margin:0 0 var(--space-4)}
.gr-news__row{display:flex;flex-direction:column;gap:var(--space-4)}
.gr-news input[type=email]{
background:transparent;border:1px solid var(--gr-wood-700);border-radius:var(--radius-sm);
color:var(--text-on-dark);min-height:46px;padding:0 var(--space-5);font-size:var(--fs-sm);
width:100%;box-sizing:border-box}
.gr-news input[type=email]::placeholder{color:var(--gr-wood-600)}
.gr-news input[type=email]:focus{outline:2px solid var(--gr-latte-400);outline-offset:1px;border-color:var(--gr-latte-400)}
.gr-news button{
font-family:var(--font-sans);font-size:var(--fs-xs);font-weight:600;
letter-spacing:var(--ls-button);text-transform:uppercase;
background:var(--gr-paper-050);color:var(--gr-espresso-950);
border:1px solid var(--gr-paper-050);border-radius:var(--radius-sm);
min-height:44px;padding:0 var(--space-7);cursor:pointer;align-self:flex-start}
.gr-news button:hover{background:var(--gr-latte-400);border-color:var(--gr-latte-400)}

/* ─ 1.3.6: headeren sidder fast, og menuen scroller bloedt ──────────────
   Headeren HAVDE position:sticky (linje 74) og sad alligevel ikke fast.
   Maalt: efter 1200px scroll stod dens top paa -1200, altsaa helt vaek.
   Aarsagen er ikke overflow nogen steder — det er at indpakningen
   <header class="wp-block-template-part"> er praecis 172px hoej, samme som
   headeren selv. Et sticky element kan kun bevaege sig inden for sin
   foraelders kasse, og med nul plads opfoerer det sig som static. Derfor
   flyttes klistringen ud paa indpakningen, som sidder direkte i
   .wp-site-blocks og dermed har hele siden at bevaege sig i.

   1.3.12: :has(.gr-header) kom til. Kassen har IKKE temaets header — den
   bruger WooCommerces egen template-part, 68px hoej, kun sitetitlen, ingen
   menu og ingen footer. Altsaa en bevidst fokus-skaerm. Reglen her ramte den
   alligevel, og den har ingen baggrundsfarve, saa indholdet kravlede op under
   den: maalt paa /kasse/ efter 450px scroll laa "Faktureringsoplysninger" oven
   i sidetitlen. Enten er en header fast MED baggrund, eller den er fokuseret
   og saa ikke fast. Den her er det sidste.
   :has() frem for at undtage en body-klasse, fordi kriteriet saa er det
   rigtige: det er temaets header der skal klistre, ikke enhver header. Falder
   :has() vaek, holder ingenting fast — det er den ufarlige vej at fejle. */
.wp-site-blocks > header.wp-block-template-part:has(.gr-header){position:sticky;top:0;z-index:30}
.gr-header{position:static}

/* Bloed scroll til ankrene i menuen. prefers-reduced-motion respekteres:
   en lang animeret scroll er ubehagelig for nogle, og det er et
   tilgaengelighedskrav, ikke en smagssag. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Og saa maa headeren ikke laegge sig oven paa det man klikkede sig hen til.
   192px er headerens hoejde paa den SMALLESTE skaerm, hvor annoncestriben
   braekker til to linjer (35px -> 55px). Der bruges én vaerdi og ikke et
   media query, fordi brudpunktet afhaenger af stribens TEKSTLAENGDE og
   dermed flytter sig, naar teksten aendres. Paa desktop giver det 20px
   ekstra luft — usynligt. Den modsatte fejl, 20px for lidt, skjuler
   overskriften bag headeren.
   Maalt efter aendringen: 115-234px luft under headeren paa alle fem
   ankre i 1440, 768 og 390px. */
.wp-site-blocks main section[id]{scroll-margin-top:192px}

/* ─ 1.3.7: sektioner toner ind under scroll ─────────────────────────────
   Uden JavaScript. Temaet indlaeser ingen scripts, og en dekoration er en
   daarlig grund til at begynde. animation-timeline:view() goer det i ren CSS
   og koerer uden om hovedtraaden.

   🔴 Raekkefoelgen er det vigtige. Indholdet er synligt SOM UDGANGSPUNKT, og
   animationen laegges kun oveni inde i @supports. Den omvendte konstruktion —
   opacity:0 i grundtilstanden og en animation til at taende den — viser en
   TOM side i enhver browser uden support. Firefox har det stadig kun i
   preview (MDN browser-compat-data, tjekket 2026-09-21); Chrome 115+ og
   Safari 26+ har det. Firefox ser bare ingen animation, og det er usynligt.

   prefers-reduced-motion respekteres, og det er ikke pynt: indhold der
   bevaeger sig under scroll er en kendt kilde til ubehag.

   Hero'en er undtaget med vilje. Den er det foerste man ser, og den er
   sidens LCP-element — starter det paa opacity:0, maaler browseren LCP
   senere, end billedet faktisk stod der. En animation maa ikke koste
   maalingen af hvor hurtig siden er. */
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
.wp-site-blocks main section[id]:not(.gr-hero){
animation:gr-rise linear both;animation-timeline:view();
animation-range:entry 0% entry 55%}
@keyframes gr-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}}

/* ─ 1.3.8: antalsfeltet ─────────────────────────────────────────────────
   Paa /vare/colombia-to-go/ var feltet 84x75px mod 59x46 paa en variabel
   vare. Browserens egen matcher (DevTools-protokollen, ikke et gaet) pegede
   paa to regler fra WooCommerce Blocks:

     .wc-block-add-to-cart-form .input-text          padding:.9rem 1.1rem
     .wp-block-...add-to-cart-form .quantity .qty    box-sizing:content-box

   content-box er det afgoerende: de 17,6px padding laegges UDEN PAA bredden,
   og min-height:44px faar 28,8px padding oveni. Derfor vokser feltet i begge
   retninger paa netop de sider, der bruger blok-formularen.

   Maalt efter: 63x44 paa grupperet, variabelt og simpelt produkt — ens, og
   samme hoejde som knappen ved siden af. */
.woocommerce .quantity .qty,
.woocommerce .wp-block-woocommerce-add-to-cart-form .quantity .qty,
.woocommerce .wc-block-add-to-cart-form .input-text.qty{
box-sizing:border-box;width:4.5em;min-width:0;min-height:44px;height:44px;
padding:0 6px;text-align:center;font-size:var(--fs-sm);line-height:1}


/* ═ 1.3.9: kortet i butiks-sektionen ═══════════════════════
   Fliserne er vores egne indtil nogen trykker paa dem. Der ligger ingen
   iframe i kilden: Google saetter cookies og faar den besoegendes IP i det
   oejeblik et Maps-embed indlaeses, og cookiepolitikken lover ordret at
   forsiden ikke saetter en eneste cookie og derfor ikke har nogen banner.
   assets/js/map.js bygger iframen af et klik. Se kommentaren der.

   Hoejden kommer fra soeskende: .gr-butik er et grid med align-items:stretch,
   saa de tre bokse er lige hoeje. min-height matcher .gr-butik .gr-ph, saa
   raekken ikke skifter hoejde af at pladsholderen blev til et kort. Ingen
   aspect-ratio her — den ville laase hoejden og braekke den udligning. */
.gr-map{position:relative;min-height:280px;overflow:hidden;
border:1px solid var(--border-subtle);border-radius:var(--radius-md);
background-color:var(--gr-paper-100);background-image:var(--texture-paper)}

/* Samme skraveringe som .gr-ph, saa den utrykte flise hoerer til familien.
   pointer-events:none, ellers ligger den oven paa knappen og spiser klikket. */
.gr-map::before{content:"";position:absolute;inset:0;pointer-events:none;
background-image:repeating-linear-gradient(135deg,rgba(152,118,79,.10) 0 1px,transparent 1px 9px)}

/* Knappen fylder hele flisen, saa hele feltet er klikbart og ikke kun en
   lille knap midt i et stort felt der ligner et billede. Den nulstiller
   bevidst tema-knappens udseende: den globale knap-regel rammer .gr-btn og
   button.button, ikke denne, men browserens egen knapstil gaelder stadig. */
.gr-map__load{position:absolute;inset:0;z-index:1;width:100%;height:100%;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:var(--space-3);padding:var(--space-6);text-align:center;
background:transparent;border:0;border-radius:0;box-shadow:none;
font-family:var(--font-sans);color:var(--text-body);cursor:pointer;
min-height:0;text-transform:none;letter-spacing:normal;
transition:background var(--dur-fast) var(--ease-standard)}
.gr-map__load:hover{background:rgba(255,255,255,.5);transform:none;box-shadow:none}
.gr-map__load:focus-visible{outline:0;box-shadow:var(--ring-focus)}
.gr-map__load svg{display:block;color:var(--gr-wood-600)}
.gr-map__title{font-size:var(--fs-sm);font-weight:600;
letter-spacing:var(--ls-button);text-transform:uppercase;color:var(--text-strong)}
.gr-map__addr{font-size:var(--fs-sm);color:var(--text-muted)}
.gr-map__fine{font-size:var(--fs-xs);line-height:1.45;color:var(--text-subtle);max-width:32ch}

/* Kortet naar det er hentet. inset:0 frem for width/height, saa den daekker
   flisen uanset hvilken hoejde raekken endte med. */
.gr-map iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}


/* ═ 1.3.11: maerkerne i footeren som blokke ════════════════
   Raekken var et wp:html-felt med styling i style="" paa hver enkelt span.
   Nu er den rigtige blokke — Gruppe, Gruppe, Billede — saa den kan redigeres
   i Site Editoren uden at nogen skal ind i HTML. Prisen er at alt det der
   stod inline skal staa her i stedet.

   To ting er maalt frem og ikke gaettet:

   1. box-sizing. .gr-mark saetter height:30px, og temaet har ingen global
      border-box. En Gruppe-blok faar border-box fra blok-bibliotekets CSS,
      en <figure> goer ikke — saa pladen med EU-bladet blev 30px hoej og de
      syv andre 32. Klassen faar den derfor selv.

   2. Billedblokken. core saetter .wp-block-image img{height:auto}, som er
      praecis lige saa specifik som .gr-mark--plate img. Hvem der vinder
      afhaenger saa af indlaesningsraekkefoelgen, og det er ikke noget at
      bygge paa — derfor figure.gr-mark--plate img, som er en tand mere
      specifik og vinder uanset.

   Blok-udgaven har i oevrigt ikke blockGap-fejlen fra 1.3.10: den ydre gruppe
   er flex-layout, og der bruger WordPress gap i stedet for margin paa
   soeskende. Fejlen findes kun i flow-layout. */
.gr-mark{box-sizing:border-box}
.gr-mark-row figure.wp-block-image,.gr-mark--leaf figure.wp-block-image{margin:0}
.gr-mark--plate{background:#fff;border-color:transparent;padding:0 7px;min-width:0}
figure.gr-mark--plate img,.gr-mark--plate figure.wp-block-image img{display:block;height:20px;width:auto;max-width:none}
.gr-mark--leaf{padding:0 8px}
.gr-mark--oe{padding:0 12px}
.gr-mark__code{margin:0;color:var(--gr-cocoa-800);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.gr-marks__right{margin-left:auto}