/* ==========================================================================
   chocoflow.css - Chocoflow.hu Hungarian multi-page rebuild - the ONLY
   stylesheet for every page of the site.
   --------------------------------------------------------------------------
   Hand-authored, dependency-free. No framework, no copied normalize.css, no
   webfont declarations, no @import and no remote resource of any kind: the
   pages must open from a local file with zero network requests.

   Every colour, size and rhythm value comes from the frozen custom properties
   in SECTION 1. Numeric literals appear only where a value is itself frozen
   (button padding 15px 25px, copyright 42px 0 26px, marquee 160px / 15px /
   90s, feature-card image 500px, icon 20px, nav 15px, ...).

   Breakpoints in use - these four only: 1199px, 991px, 767px, 479px, plus one
   `prefers-reduced-motion: reduce` query and one print block.
   `!important` declarations: exactly 1, inside the reduced-motion block;
   every other override in this file is an ordinary cascade win.
   ========================================================================== */

/* ==========================================================================
   0. SHARED COMPONENT CATALOGUE - the interface every page worker builds on
   --------------------------------------------------------------------------
   Copy these snippets verbatim; every class named here exists in this file.
   Sizes/colours come from the tokens in section 1 - never hard-code new ones.

   PAGE SHELL
     <header class="cf-header">...</header>
     <main> ... </main>
     <footer class="cf-footer">...</footer>

   .cf-container
     <div class="cf-container">...</div>

   .cf-section                       (vertical rhythm for a page band)
     <section class="cf-section" aria-labelledby="x">
       <div class="cf-container"><h2 class="cf-section__title" id="x">Cim</h2>
       <p class="cf-section__lead">Bevezeto.</p></div>
     </section>

   .cf-hero / .cf-hero--page         (page hero: H1 + lead + optional CTA)
     <section class="cf-hero cf-hero--page" aria-labelledby="x">
       <div class="cf-container">
         <h1 class="cf-hero__title" id="x">Oldal cime</h1>
         <p class="cf-hero__lead">Rovid bevezeto.</p>
         <p class="cf-hero__cta"><a class="cf-btn cf-btn--primary" href="./ajanlat.html">Ajanlatot kerek</a></p>
       </div>
     </section>

   .cf-breadcrumb
     <nav class="cf-breadcrumb" aria-label="Morzsamen&#252;">
       <ol class="cf-breadcrumb__list">
         <li class="cf-breadcrumb__item"><a class="cf-breadcrumb__link" href="./index.html">Fooldal</a></li>
         <li class="cf-breadcrumb__item" aria-current="page">Csokoladek</li>
       </ol>
     </nav>

   .cf-grid--2 / .cf-grid--3 / .cf-grid--4   (responsive; 3 and 4 collapse
   to 2 columns at <=991px and to 1 column at <=767px)
     <div class="cf-grid cf-grid--3">...</div>

   .cf-card                          (feature card: body + media)
     <article class="cf-card">
       <div class="cf-card__body"><h2 class="cf-card__title">...</h2>
         <p class="cf-card__text">...</p></div>
       <div class="cf-card__media"><img src="..." alt="" width="775" height="394" loading="lazy"></div>
     </article>

   .cf-card--panel                   (generic content card with a surface)
     <article class="cf-card cf-card--panel">
       <div class="cf-card__media"><img src="..." alt="" width="600" height="450" loading="lazy"></div>
       <div class="cf-card__body"><h3 class="cf-card__title">...</h3>
         <p class="cf-card__text">...</p></div>
     </article>

   .cf-product-card                  (image + name + weight + price-from + link)
     <li class="cf-product-card">
       <a class="cf-product-card__media" href="./csokik.html#chocoflow-classic"><img src="..." alt="" width="600" height="600" loading="lazy"></a>
       <h3 class="cf-product-card__name"><a href="./csokik.html#chocoflow-classic">Chocoflow Classic</a></h3>
       <p class="cf-product-card__meta">115&nbsp;gr &#183; min. 20&nbsp;db</p>
       <p class="cf-product-card__price">4.900&nbsp;Ft-tol</p>
     </li>

   .cf-btn / .cf-btn--primary / .cf-btn--ghost / .cf-btn--sm
     <a class="cf-btn cf-btn--primary" href="./ajanlat.html">Ajanlatot kerek</a>
     <a class="cf-btn cf-btn--ghost" href="./csokik.html">Csokoladek</a>
     <a class="cf-btn cf-btn--primary cf-btn--sm" href="./blog.html">Tovabb</a>
     <button class="cf-btn cf-btn--primary" type="submit">Kuldes</button>

   .cf-list                          (icon list; icon = inline SVG from D.4)
     <ul class="cf-list">
       <li class="cf-list__item"><svg class="cf-list__icon" ...>...</svg><span>Pont</span></li>
     </ul>

   .cf-accordion                     (native <details>, no JS)
     <div class="cf-accordion">
       <details class="cf-accordion__item">
         <summary class="cf-accordion__q"><span>Kerdes?</span><svg ...>...</svg></summary>
         <p class="cf-accordion__a">Valasz.</p>
       </details>
     </div>

   .cf-table                         (spec/price table; stacks on <=767px,
   every <td> MUST carry data-label="<column heading>")
     <div class="cf-table-wrap">
       <table class="cf-table">
         <caption>Muszaki adatok</caption>
         <thead><tr><th scope="col">Nett&#243; t&#246;meg</th><th scope="col">A&#225;r</th></tr></thead>
         <tbody><tr><td data-label="Nett&#243; t&#246;meg">115&nbsp;gr</td><td data-label="A&#225;r">4.900&nbsp;Ft</td></tr></tbody>
       </table>
     </div>

   .cf-prose                         (long-form copy: about, privacy, blog)
     <div class="cf-prose"><h2>...</h2><p>...</p><ul><li>...</li></ul></div>

   .cf-pagination                    (blog index)
     <nav class="cf-pagination" aria-label="Lapozas">
       <a class="cf-pagination__link" href="?page=1">1</a>
       <a class="cf-pagination__link" href="?page=2" aria-current="page">2</a>
     </nav>

   .cf-form (+ .cf-field*, freeze-frozen contract section C - do not rename)
     <form id="quote-form" class="cf-form" method="post" action="/api/quote" novalidate>
       <div class="cf-form__grid">
         <div class="cf-field">
           <label class="cf-field__label" for="cf-name">Kapcsolattarto neve</label>
           <input class="cf-field__input" type="text" id="cf-name" name="name" data-cf-field="name">
           <p data-cf-error="name" class="cf-field__error" aria-live="polite"></p>
         </div>
       </div>
       <div class="cf-form__actions"><button class="cf-btn cf-btn--primary" type="submit" data-cf-submit>...</button></div>
       <p data-cf-status role="status" aria-live="polite" class="cf-form__status"></p>
     </form>

   .cf-marquee                       (pure CSS, duplicated track, no JS)
     <div class="cf-marquee"><div class="cf-marquee__track">
       <div class="cf-marquee__item"><img src="..." alt="" width="416" height="416" loading="eager"></div>
     </div></div>

   HEADER + FOOTER (shell, identical on every page)
     <header class="cf-header"><div class="cf-container cf-header__inner">
       <a class="cf-logo" href="./index.html"><img class="cf-logo__img" src="./assets/img/chocoflow-csokolade-logo.png" alt="Chocoflow - ceges csokoladek" width="230" height="70"></a>
       <nav class="cf-nav" data-cf-nav aria-label="Fomenu"><ul class="cf-nav__list">
         <li class="cf-nav__item"><a class="cf-nav__link" href="./magunkrol.html">Magunkrol</a></li>
         <li class="cf-nav__item cf-nav__item--cta"><a class="cf-nav__link" href="./ajanlat.html">Kerjen dijmentes mintacsokit</a></li>
       </ul></nav>
       <a class="cf-header__phone" href="tel:+36208091614" aria-label="Telefon: +36-20-809-1614">...</a>
       <button class="cf-nav__toggle" type="button" data-cf-nav-toggle aria-expanded="false" aria-label="Menu megnyitasa">...</button>
     </div></header>
     The active page is marked with aria-current="page" on its .cf-nav__link
     (and .cf-footer__nav-link); site.js adds it automatically, a static
     attribute in the HTML is equally fine.

     <footer class="cf-footer">
       <section class="cf-section" id="kapcsolat" aria-label="Kapcsolat">
         <div class="cf-container cf-footer__cols">
           <div class="cf-footer__col"><h3 class="cf-footer__heading">Kapcsolat</h3>
             <ul class="cf-contact-list"><li class="cf-contact-list__item"><svg ...>...</svg>
               <span class="cf-contact-list__label">Telefon</span>
               <a class="cf-contact-list__value" href="tel:+36208091614">+36-20-809-1614</a></li></ul></div>
           <div class="cf-footer__col"><h3 class="cf-footer__heading">Informaciok</h3>
             <nav class="cf-footer__nav" aria-label="Lablec men&#252;">
               <a class="cf-footer__nav-link" href="./faq.html">FAQ</a>
               <a class="cf-footer__nav-link" href="./adatkezelesi-tajekoztatas.html">Adatkezelesi tajekoztato</a>
             </nav></div>
           <div class="cf-footer__col"><ul class="cf-social"><li><a class="cf-social__link" href="..." aria-label="...">...</a></li></ul></div>
         </div>
       </section>
       <div class="cf-container"><p class="cf-copyright">&#169; Boxmedia 2022. Minden jog fenntartva.</p></div>
     </footer>
   ========================================================================== */

/* ===== 1. DESIGN TOKENS (frozen - values verbatim, do not re-derive) ===== */
:root{
  /* brand ---------------------------------------------------------------- */
  --cf-gold:            #C19F5F; /* --main/--second: h3 accents, footer rule, links */
  --cf-gold-accent:     #B99961; /* Elementor "accent": primary button fill */
  --cf-yellow:          #F7B614; /* --yellow (kept for CRM UI / focus ring) */
  --cf-gray:            #2D2627; /* --gray  (panels, inputs on light) */
  --cf-charcoal:        #241F20; /* HERO background - exact mirror value */
  --cf-black:           #0F0E0F; /* --black: PAGE background */
  --cf-near-black:      #0B0A0B; /* footer band background */
  --cf-white:           #FFFFFF;
  --cf-red:             #D12323; /* -red: error/focus BORDERS only (3.65:1 as text
                                    on --cf-black -> never used for text) */
  --cf-red-text:        #FF8A80; /* error TEXT on dark: 8.44:1 vs #0F0E0F (AA+AAA) */
  --cf-green:           #39b972; /* -green: success (7.67:1 vs --cf-black) */

  /* derived (frozen, do not invent new ones) ----------------------------- */
  --cf-text:            rgba(255,255,255,.80); /* 12.0:1 vs --cf-black */
  --cf-text-dim:        rgba(255,255,255,.60); /* 6.76:1 vs --cf-black */
  --cf-hairline:        rgba(255,255,255,.15); /* thin dividers on dark */
  --cf-surface:         rgba(255,255,255,.03); /* raised panel above the page bg */
  --cf-btn-hover-bg:    #231F20;               /* button:hover background */
  --cf-btn-hover-fg:    #C19F5F;               /* button:hover text (6.51:1) */
  --cf-input-bg:        #090909;               /* dark input background */
  --cf-focus:           #F7B614;               /* :focus-visible ring */

  /* fonts: system stacks only - the mirror ships no local font file ------- */
  --cf-font-primary: "Gilroy","Poppins","Montserrat","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --cf-font-accent:  "Athelas","Iowan Old Style",Georgia,"Times New Roman",serif;

  /* container + rhythm --------------------------------------------------- */
  --cf-container:       1140px;
  --cf-gutter:          15px;
  --cf-radius-pill:     25px;   /* buttons: border-radius 25px */
  --cf-radius:          8px;    /* cards / inputs / FAQ */
  --cf-radius-sm:       4px;

  /* --- unified image frame: soft cocoa matte + warm cocoa ring -------------
     One treatment for every non-transparent image on the site, so a photo
     never ends in a hard edge against the dark page. A photographic image is
     opaque, so it is a solid block of light inside a dark layout. Drawing a
     thin line around that block is not enough: the line sits on the seam, so
     the eye still reads a rectangle pasted on a page. Instead the image is set
     into a COCOA MOUNT, the way a print sits in a passe-partout: a warm
     chocolate band separates image from page, so the picture has a border of
     its own material and the transition is gradual rather than abrupt.

     The palette is sampled from the reference photograph the brief was built
     from: deep chocolate rails #591405 / #421300 / #3E190D over a lit field,
     with warm grey #B19D97 where the light catches a corner.

     The mount is built from tokens only, so the entire image language of the
     site changes in one place. Four layers, outside in:
       1. matte  - cocoa band (padding + background on the framed object)
       2. ring   - 1px cocoa line at the OUTER edge of the mount
       3. inset  - 1px dark rebate where the image meets the mount
       4. lift   - warm two-stage cast shadow, so the frame sits ON the page */
  --cf-frame-matte:       #241a16;  /* mount colour: cocoa, darker than page-toned cards */
  --cf-frame-matte-hover: #2e211b;  /* mount warms a step on hover */
  --cf-frame-matte-top:   #2b1f1a;  /* faint top-lit gradient stop on the mount */
  --cf-frame-matte-pad:   14px;     /* mount width (desktop) */
  --cf-frame-matte-pad-sm: 10px;    /* <=767px */
  --cf-frame-matte-pad-xs:  7px;    /* <=479px */
  --cf-frame-radius:      14px;     /* outer radius: one step above --cf-radius */
  --cf-frame-radius-inner: 6px;     /* concentric inner radius of the image */
  --cf-frame-ring:        rgba(122,74,50,.55);  /* cocoa line, outer edge of mount */
  --cf-frame-ring-hover:  rgba(154,96,64,.85);  /* warms with the card on hover */
  --cf-frame-inset:       inset 0 0 0 1px rgba(12,7,5,.55); /* rebate img<->mount */
  /* warm-tinted elevation: a shadow with no hue reads as grey haze on a
     chocolate page, so both stops carry a little red/yellow */
  --cf-frame-shadow:      0 1px 2px rgba(8,4,3,.55), 0 8px 22px rgba(14,7,4,.42);
  --cf-frame-shadow-hover:0 2px 5px rgba(8,4,3,.62), 0 14px 34px rgba(18,9,5,.50);

  /* --- product plinth: the same cocoa, lit ---------------------------------
     A cut-out product shot needs a surface of its own, and that surface used
     to be white - which made the tile the loudest rectangle on the page. It is
     now a COCOA plinth drawn from the frame palette: a faint top-lit radial so
     the tile is still a lit object that separates the product from the card,
     while belonging to the chocolate page instead of sitting on top of it.
     Four stops, one family: lit cocoa at the top, deep cocoa at the foot, and
     both warm a step on hover. The tile keeps its padding, its rebate inset and
     its concentric radius - only the colour moves. A transparent cut-out reads
     as chocolate laid on cocoa; an opaque studio photo reads as a print in a
     warm mount, including where the square tile letterboxes a 4:3 shot. */
  --cf-product-plinth-top:       #6f4e39;  /* lit cocoa: top stop, plinth at rest */
  --cf-product-plinth:           #4d3628;  /* deep cocoa: foot of the plinth */
  --cf-product-plinth-top-hover: #7d5a42;  /* plinth warms one step on hover ... */
  --cf-product-plinth-hover:     #57402f;  /* ... at both gradient stops */

  --cf-space-1:         4px;
  --cf-space-2:         8px;
  --cf-space-3:         12px;
  --cf-space-4:         16px;
  --cf-space-5:         24px;
  --cf-space-6:         32px;
  --cf-space-7:         48px;
  --cf-space-8:         64px;
  --cf-space-9:         96px;
  --cf-section-y:       96px;   /* default section vertical padding (desktop) */
  --cf-section-y-sm:    56px;   /* <=767px */

  /* hero ----------------------------------------------------------------- */
  --cf-hero-bg:         #241F20;
  --cf-hero-pad-top:    200px;
  --cf-hero-pad-bottom: 150px;
  --cf-hero-pad-x:      70px;
  --cf-hero-pad-top-sm: 140px;
  --cf-hero-pad-bottom-sm: 70px;
  --cf-hero-pad-x-sm:   20px;

  /* type ----------------------------------------------------------------- */
  --cf-fs-hero-1:       60px;   /* home hero line 1, line-height 1.2 */
  --cf-fs-hero-1-sm:    41px;   /* <=767px */
  --cf-fs-hero-2:       60px;   /* home hero line 2 */
  --cf-fs-hero-2-sm:    36px;   /* <=767px */
  --cf-fs-h1:           46px;   /* page hero H1 (inner pages) */
  --cf-fs-h1-sm:        30px;   /* <=767px */
  --cf-fs-card-title:   2.5rem; /* 40px */
  --cf-fs-card-title-md: 18px;  /* <=1199px */
  --cf-fs-card-title-sm: 20px;  /* <=767px */
  --cf-fs-body:         18px;
  --cf-fs-list:         17px;   /* icon-list desktop */
  --cf-fs-list-md:      18px;   /* <=1199px */
  --cf-fs-list-sm:      20px;   /* <=767px */
  --cf-fs-h3:           30px;
  --cf-lh-heading:      1.2;
  --cf-lh-body:         1.6;

  /* media inside the feature cards --------------------------------------- */
  --cf-card-img-h:      500px;
  --cf-card-img-h-sm:   350px;

  /* misc ----------------------------------------------------------------- */
  --cf-icon-size:       20px;
  --cf-list-gap:        13px;   /* icon-list item spacing (13px/2 top+bottom) */
}

/* ===== 2. MINIMAL RESET (hand-written, nothing lifted wholesale from a library) ===== */
*,
*::before,
*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  color-scheme:dark;                    /* native form controls / scrollbars */
  scroll-padding-top:var(--cf-space-8); /* anchor targets clear the sticky header */
}

body,
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,
ul,ol{margin:0}

ul,ol{padding:0;list-style:none}

img,svg,video{display:block;max-width:100%}
img{height:auto}                        /* component rules below set explicit heights */

table{border-collapse:collapse}

button,input,select,textarea{font:inherit;color:inherit}

summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}

/* ==========================================================================
   2b. UNIFIED IMAGE FRAME
   --------------------------------------------------------------------------
   The site is a dark chocolate layout (--cf-black #0F0E0F) holding
   photographs and product cut-outs. Both are OPAQUE: a photo ends where its
   rectangle ends, so an unframed image reads as a hard-edged block of light
   cut out of the page, and the eye registers the seam far more strongly than
   the picture.

   A hairline around that block is not enough, because the line sits exactly on
   the seam. What removes the dissonance is separating the two materials: the
   image is set into a COCOA MOUNT, the way a photographic print sits in a
   passe-partout. The picture then has a border made of its own substance, and
   the edge of the layout is a soft cocoa band instead of a cut.

   Every opaque image therefore gets ONE treatment, built from four layers:

     1. MATTE - a cocoa band (padding + background on the framed object) that
        holds the image away from the page on all four sides;
     2. RING  - a 1px cocoa line at the OUTER edge of the mount, which is what
        makes the whole assembly read as a framed print rather than a padded
        box;
     3. INSET - a 1px dark rebate line where the image meets the mount. This is
        the detail that does most of the work: it is the shadow a real mount
        casts on the print, and it stops a bright photo looking pasted flat on;
     4. LIFT  - a warm two-stage cast shadow, so the frame sits ON the page.

   The mount uses concentric radii (a larger outer radius, a smaller inner one)
   so the cocoa band has an even thickness at the corners; two identical radii
   would pinch it and read as two stacked boxes rather than one milled object.

   Colour, width, radius and elevation are all tokens (see :root), so the whole
   site's image language changes in one place.

   No `border` property is used anywhere in this section. A border would add to
   the content box and reflow every page; padding, background, outline and
   box-shadow reproduce the same look at zero layout cost.

   Images that are genuinely decorative or already framed by their container
   opt out with .cf-img--bare (the marquee logos and the header lockup).
   ========================================================================== */
/* --------------------------------------------------------------------------
   THE MODEL: exactly one frame per image.

   An image is framed by its WRAPPER when it has one (.cf-card__media,
   .cf-product-card__media, a gallery <a>), and by ITSELF only when it is a
   bare child of flowing content (prose, or anywhere else in <main>).

   This two-tier rule is what keeps a frame from being applied twice, which
   would otherwise cast a shadow *inside* a framed tile and make the ring
   double up on the tile edge.
   -------------------------------------------------------------------------- */

/* Tier 1 - the wrapper is the framed object.

   The gallery clause carries `:not(.cf-product-card__media)` on purpose. A
   product card's media link is ALSO a grid-child link, so a bare
   `.cf-grid > li > a:has(> img)` would match it and out-specify the product
   plinth rule, re-adding the cocoa mount and the cast shadow inside the white
   tile. That exclusion is what keeps the plinth exception reachable.

   The mount is declared HERE and nowhere else. Re-declaring it in the gallery
   section would give that copy a higher source order at equal specificity,
   which would pin every gallery tile to the desktop 14px band on phones and
   make --cf-frame-matte-pad-sm / -xs dead. */
.cf-frame,
.cf-card__media,
.cf-product-card__media,
.cf-gallery__item,
.cf-grid > li > a:has(> img):not(.cf-product-card__media){
  padding:var(--cf-frame-matte-pad);      /* the cocoa mount itself */
  background:
    linear-gradient(180deg, var(--cf-frame-matte-top) 0%, var(--cf-frame-matte) 100%);
  border-radius:var(--cf-frame-radius);
  overflow:hidden;                        /* clip the image to the inner radius */
  box-shadow:var(--cf-frame-shadow);
  /* outline, not border: it never affects layout, so adding the ring cannot
     shift a single pixel of the existing design */
  outline:1px solid var(--cf-frame-ring);
  outline-offset:-1px;
}

/* The image inside a framed wrapper gets the CONCENTRIC inner radius and the
   dark rebate. This is expressed here rather than relying on the neutraliser
   below, because the neutraliser exists only to stop the outer frame being
   applied twice; the inner radius and rebate are genuinely part of the mount. */
main .cf-frame img,
main .cf-card__media img,
main .cf-product-card__media img,
main .cf-gallery__item img,
main a:has(> img) > img:not(.cf-logo__img):not(.cf-img--bare){
  border-radius:var(--cf-frame-radius-inner);
  box-shadow:var(--cf-frame-inset);
}

/* Tier 2 - a bare image frames itself.
   The long :not() chain is deliberate: it is what guarantees a single frame.
   An <img> whose parent is already a framed wrapper is excluded here, so the
   two tiers can never stack (a shadow cast inside a framed tile, or a
   doubled ring on a gallery edge, would both read as a rendering fault).
   These selectors must out-specify the plain `main img` rule below, so they
   are written with the same :not() terms plus the parent test.
   A bare image cannot take padding (that would be padding on a replaced
   element, which does not create a mount), so it carries the mount as a
   `border`-free ring of cocoa built from an outer box-shadow spread. */
main img:not(.cf-logo__img):not(.cf-img--bare),
.cf-prose img{
  display:block;
  border-radius:var(--cf-frame-radius-inner);
  box-shadow:var(--cf-frame-inset), var(--cf-frame-shadow);
  /* the cocoa mount, drawn outside the image edge and clipped to nothing it
     owns, so it adds no layout and cannot reflow the page */
  outline:1px solid var(--cf-frame-ring);
  outline-offset:calc(var(--cf-frame-matte-pad) - 1px);
}

/* Neutralise the outer frame on the inner image of a framed wrapper. Listed
   AFTER tier 2 and with matching-or-higher specificity so it always wins.
   It clears only the OUTER frame (radius is restored to the concentric inner
   value just above, and the rebate inset is re-applied) - it must not clear
   the inset, which belongs to the mount.

   It clears the outer CAST shadow as well. Tier 2 paints `inset + cast` on
   every image in <main>, so an image inside a framed wrapper would otherwise
   carry a second cast shadow identical to its wrapper's: the photo would drop
   a shadow onto its own cocoa band. A wrapper-internal image therefore ends
   with the rebate (inset) and the concentric inner radius, and nothing else. */
.cf-card__media img,
.cf-product-card__media img,
.cf-gallery__item img,
main a:has(> img) > img,
main picture > img,
main .cf-card__media img,
main .cf-product-card__media img,
main .cf-gallery__item img,
main a:has(> img) > img:not(.cf-logo__img):not(.cf-img--bare),
main .cf-card__media img:not(.cf-logo__img):not(.cf-img--bare),
main .cf-product-card__media img:not(.cf-logo__img):not(.cf-img--bare){
  outline:0;                              /* the wrapper owns the outer ring */
  outline-offset:0;
  box-shadow:var(--cf-frame-inset);       /* rebate only - never a cast shadow */
  border-radius:var(--cf-frame-radius-inner); /* concentric with the mount */
}

/* The product cut-outs sit on their own lit plinth. That plinth is a cocoa
   surface (see the --cf-product-plinth-* tokens), so it must NOT take the
   cocoa MOUNT: painting the mount band behind it would only double a band it
   already is. It keeps a zero-width mount (no cocoa band), keeps only the
   rebate inset that defines its edge against the dark card, and must NOT cast
   a shadow outward. Written with extra specificity so it cannot be beaten by
   the tier-1 frame selector. */
main .cf-product-card .cf-product-card__media,
main a.cf-product-card__media,
.cf-product-card > .cf-product-card__media{
  padding:var(--cf-space-3);              /* a lit cocoa plinth, not a cocoa mount */
  background:radial-gradient(120% 120% at 50% 0%,
    var(--cf-product-plinth-top) 0%, var(--cf-product-plinth) 100%);
  box-shadow:var(--cf-frame-inset);
}

/* Hover: the mount warms in step with the card's own border, so image and card
   respond as one object. The product plinth keeps its flat inset (a tile
   lifting off the card it is sitting in would read as a mistake), so it is
   excluded here and only its ring warms. */
a.cf-product-card__media:hover,
.cf-card--link:hover .cf-card__media,
.cf-gallery__item:hover,
.cf-grid > li > a:has(> img):hover{
  outline-color:var(--cf-frame-ring-hover);
  background:
    linear-gradient(180deg, var(--cf-frame-matte-top) 0%, var(--cf-frame-matte-hover) 100%);
  box-shadow:var(--cf-frame-shadow-hover);
}
/* The plinth stays FLAT: the gallery tile's hover lift must not drag the
   product tile up with it (the plinth is a surface in the card, not a print
   lifted off the page). `transform:none` is declared here, with the card-scoped
   selector, so it out-specifies the gallery hover rule's translateY. */
.cf-product-card:hover .cf-product-card__media,
a.cf-product-card__media:hover{
  outline-color:var(--cf-frame-ring-hover);
  box-shadow:var(--cf-frame-inset);
  transform:none;
}

/* The mount must shrink with the layout, or a 14px-wide band on a 320px screen
   would eat the photograph. The product plinth is excluded: it is a tile with
   its own padding, and its own rule (above, higher specificity) wins. */
@media (max-width:767px){
  .cf-frame,
  .cf-card__media,
  .cf-gallery__item,
  .cf-grid > li > a:has(> img):not(.cf-product-card__media){padding:var(--cf-frame-matte-pad-sm)}
}
@media (max-width:479px){
  .cf-frame,
  .cf-card__media,
  .cf-gallery__item,
  .cf-grid > li > a:has(> img):not(.cf-product-card__media){padding:var(--cf-frame-matte-pad-xs)}
}

/* ===== 3. BASE DOCUMENT + TYPOGRAPHY ===== */
body{
  background:var(--cf-black);
  color:var(--cf-white);
  font-family:var(--cf-font-primary);
  font-size:var(--cf-fs-body);
  font-weight:300;
  line-height:var(--cf-lh-body);
  font-synthesis-weight:none;            /* never fake-bold a 500/300 face */
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--cf-font-primary);
  font-weight:500;                       /* 500 = medium headings/buttons */
  line-height:var(--cf-lh-heading);
  color:var(--cf-white);
}

h1{font-size:var(--cf-fs-h1)}
h3{font-size:var(--cf-fs-h3)}

p{line-height:var(--cf-lh-body)}

a{color:var(--cf-gold);text-decoration:none}
a:hover{text-decoration:underline}

svg{flex-shrink:0}

::selection{background:var(--cf-gold-accent);color:#000}

/* ===== 4. ACCESSIBILITY UTILITIES ===== */
/* Real visually-hidden implementation (keeps the element in the a11y tree and
   in the tab order). Used by visually hidden section headings. */
.cf-visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.cf-skip-link{
  position:absolute;
  top:0;
  left:-9999px;
  z-index:100;
  padding:var(--cf-space-3) var(--cf-space-5);
  background:var(--cf-gold);
  color:#000;
  font-weight:500;
  border-radius:0 0 var(--cf-radius) 0;
}
.cf-skip-link:focus{left:0;text-decoration:none}

/* Mandatory, everywhere: 2px focus ring with 2px offset */
:focus-visible{
  outline:2px solid var(--cf-focus);
  outline-offset:2px;
}

/* ===== 5. LAYOUT: container, sections, grids ===== */
.cf-container{
  width:100%;
  max-width:var(--cf-container);
  margin-inline:auto;
  padding-inline:var(--cf-gutter);
}

.cf-section{padding-block:var(--cf-section-y)}

/* Tuned variants - each section carries its own rhythm so it renders
   correctly on its own page too. */
.cf-section--features{padding-block:var(--cf-space-8) var(--cf-section-y)}
.cf-section--refs{padding-block:var(--cf-space-8)}
.cf-section--faq{padding-block:var(--cf-section-y)}
.cf-section--quote{padding-block:var(--cf-section-y)}
.cf-section--products{padding-block:var(--cf-section-y)}
.cf-section--tight{padding-block:var(--cf-space-8)}

.cf-section__title{
  font-size:var(--cf-fs-card-title);
  font-weight:500;
  line-height:var(--cf-lh-heading);
  color:var(--cf-white);
  margin-bottom:var(--cf-space-4);
}

.cf-section__lead{
  color:var(--cf-text);
  font-weight:300;
  max-width:var(--cf-container);
  margin-bottom:var(--cf-space-6);
}

.cf-grid{
  display:grid;
  gap:var(--cf-space-5);
}

/* A grid item's automatic minimum size is its content's min-content size, so a
   single wide image (or a broken image rendered at its width attribute) can
   force the whole row wider than the viewport. min-width:0 lets the track
   shrink to the column it was given. */
.cf-grid > *{min-width:0}

/* #rolunk: 2 columns x 2 rows, row-major (mirror e-con grid values) */
.cf-grid--2{
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(2,1fr);
  grid-auto-flow:row;
}

.cf-grid--3{grid-template-columns:repeat(3,1fr)}
.cf-grid--4{grid-template-columns:repeat(4,1fr)}

/* Card grids: children stretch so prices/CTAs line up */
.cf-grid--3>.cf-card,
.cf-grid--3>.cf-product-card,
.cf-grid--4>.cf-card,
.cf-grid--4>.cf-product-card{height:100%}

/* ===== 6. BREADCRUMB ===== */
.cf-breadcrumb{
  margin-bottom:var(--cf-space-5);
  font-size:15px;
  font-weight:300;
}

.cf-breadcrumb__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--cf-space-2);
}

.cf-breadcrumb__item{
  color:var(--cf-text-dim);
  min-width:0;
}
.cf-breadcrumb__item + .cf-breadcrumb__item::before{
  content:"/";
  margin-right:var(--cf-space-2);
  color:var(--cf-text-dim);
}
.cf-breadcrumb__item[aria-current="page"]{color:var(--cf-white)}

.cf-breadcrumb__link{color:var(--cf-gold);text-decoration:underline}
.cf-breadcrumb__link:hover{color:var(--cf-white)}

/* ===== 7. HEADER + NAVIGATION ===== */
.cf-header{
  position:sticky;                       /* replaces the mirror's affix JS */
  top:0;
  z-index:50;
  background:rgba(15,14,15,.92);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--cf-hairline);
}

.cf-header__inner{
  display:flex;
  flex-wrap:wrap;                        /* lets the mobile nav panel drop to line 2 */
  align-items:center;
  justify-content:space-between;
  gap:var(--cf-space-4);
  padding-block:var(--cf-space-3);
}

.cf-logo{display:inline-flex;align-items:center;flex:0 0 auto}
.cf-logo:hover{text-decoration:none}
.cf-logo__img{height:40px;width:auto;display:block}

.cf-nav{display:flex;align-items:center}

.cf-nav__list{display:flex;align-items:center;flex-wrap:wrap;gap:0}

/* Desktop nav: plain 1-row list, light-weight white links */
.cf-nav__link{
  display:inline-block;
  padding:var(--cf-space-2) var(--cf-space-4);
  color:var(--cf-white);
  font-weight:300;
  font-size:15px;
  line-height:var(--cf-lh-body);
}
.cf-nav__link:hover,
.cf-nav__link:focus-visible{color:var(--cf-gold);text-decoration:none}

/* the nav item that leads to the quote page */
.cf-nav__item--cta .cf-nav__link{color:var(--cf-gold);font-weight:500}

/* Current page: gold AND underlined - never colour alone (WCAG 1.4.1) */
.cf-nav__link[aria-current="page"]{
  color:var(--cf-gold);
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:4px;
}

.cf-nav__toggle{
  display:none;                          /* desktop: the list is always visible */
  align-items:center;
  gap:var(--cf-space-2);
  padding:var(--cf-space-2) var(--cf-space-3);
  border:1px solid var(--cf-hairline);
  border-radius:var(--cf-radius-sm);
  background:transparent;
  color:var(--cf-white);
  font-family:var(--cf-font-primary);
  font-size:15px;
  font-weight:300;
  cursor:pointer;
}
.cf-nav__toggle:hover{color:var(--cf-gold);border-color:var(--cf-gold)}
.cf-nav__toggle svg{width:var(--cf-icon-size);height:var(--cf-icon-size)}

/* Phone CTA: desktop only (hidden <=991px) */
.cf-header__phone{
  display:inline-flex;
  align-items:center;
  gap:var(--cf-space-2);
  color:var(--cf-white);
  font-weight:300;
  font-size:15px;
  white-space:nowrap;
}
.cf-header__phone svg{width:var(--cf-icon-size);height:var(--cf-icon-size);color:var(--cf-gold)}
.cf-header__phone:hover{color:var(--cf-gold);text-decoration:none}

/* ===== 8. HERO (home hero + inner-page hero) ===== */
.cf-hero{
  background:var(--cf-hero-bg);
  padding:var(--cf-hero-pad-top) var(--cf-hero-pad-x) var(--cf-hero-pad-bottom);
  text-align:center;
}

/* Inner pages: no 200px band under the sticky header, smaller H1 */
.cf-hero--page{
  padding:var(--cf-space-9) var(--cf-hero-pad-x) var(--cf-space-8);
}

.cf-hero__title{
  display:block;
  max-width:var(--cf-container);
  margin-inline:auto;
  font-size:var(--cf-fs-hero-1);
  font-weight:500;                       /* home hero line 1 */
  line-height:var(--cf-lh-heading);
  color:var(--cf-white);
  text-align:center;
}
.cf-hero--page .cf-hero__title{font-size:var(--cf-fs-h1)}

.cf-hero__title--light{
  display:block;                         /* home hero line 2 */
  font-size:var(--cf-fs-hero-2);
  font-weight:300;
}

.cf-hero__lead{
  max-width:64ch;
  margin:var(--cf-space-5) auto 0;
  color:var(--cf-text);
  font-weight:300;
  font-size:var(--cf-fs-body);
  text-align:center;
}

.cf-hero__cta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:var(--cf-space-3);
  margin-top:var(--cf-space-6);
}
/* a CTA held in a <p> must not inherit paragraph margins */
p.cf-hero__cta{margin-bottom:0}

/* ===== 9. CARDS (feature card + generic content card) ===== */
.cf-card{
  display:flex;
  flex-direction:column;                 /* mirror --flex-direction:column */
  align-self:center;
  gap:var(--cf-space-5);
  min-width:0;                           /* long HU words stay inside the grid */
}

.cf-card__body{
  display:flex;
  flex-direction:column;
  gap:var(--cf-space-5);
  justify-content:center;
  align-items:flex-start;
  min-width:0;
}

.cf-card__media{
  display:flex;
  flex-direction:column;
  gap:var(--cf-space-3);
  width:100%;
}

.cf-card__media img{
  width:100%;
  height:var(--cf-card-img-h);           /* feature-card crop */
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:var(--cf-frame-radius-inner);  /* concentric with the mount */
}

.cf-card__title{
  font-size:var(--cf-fs-card-title);
  font-weight:500;
  line-height:var(--cf-lh-heading);
  color:var(--cf-white);
}

.cf-card__text{
  color:var(--cf-text);
  font-size:var(--cf-fs-body);
  font-weight:300;
  line-height:var(--cf-lh-body);
}

/* Cards A and C put the media above the text on mobile (see <=767px block). */
.cf-card--media-first{min-width:0}

/* --- generic reusable card: surface, padding, fluid media ------------- */
.cf-card--panel{
  align-self:stretch;
  height:100%;
  background:var(--cf-surface);
  border:1px solid var(--cf-hairline);
  border-radius:var(--cf-radius);
  padding:var(--cf-space-6);
  transition:border-color .25s ease;
}
.cf-card--panel .cf-card__media img{
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
}
.cf-card--panel .cf-card__body{flex:1 1 auto}
.cf-card--panel .cf-card__title{font-size:var(--cf-fs-h3)}

/* whole-card link variant */
.cf-card--link{color:inherit}
.cf-card--link:hover{border-color:var(--cf-gold);text-decoration:none}

/* ===== 10. PRODUCT CARD (catalogue + home featured strip) ===== */
.cf-product-card{
  display:flex;
  flex-direction:column;
  gap:var(--cf-space-3);
  height:100%;
  padding:var(--cf-space-4);
  background:var(--cf-surface);
  border:1px solid var(--cf-hairline);
  border-radius:var(--cf-radius);
  transition:border-color .25s ease;
}
.cf-product-card:hover{border-color:var(--cf-gold)}

.cf-product-card__media{
  display:block;
  /* The tile is the product's own cocoa plinth (tokens in :root). It used to be
     white, which made it the loudest rectangle on a chocolate page; the plinth
     now belongs to the same palette as every image mount, and stays a LIT
     surface so the product still separates from the card. */
  background:
    radial-gradient(120% 120% at 50% 0%,
      var(--cf-product-plinth-top) 0%, var(--cf-product-plinth) 100%);
  border-radius:var(--cf-frame-radius);
  overflow:hidden;
  padding:var(--cf-space-3);              /* breathing room: subject never kisses the edge */
  /* the tile takes the rebate inset but never the cocoa mount band (see the
     product plinth exception in the unified frame) and never a cast shadow */
  box-shadow:var(--cf-frame-inset);
  transition:outline-color .25s ease, background .25s ease;
}
.cf-product-card:hover .cf-product-card__media,
a.cf-product-card__media:hover{
  background:
    radial-gradient(120% 120% at 50% 0%,
      var(--cf-product-plinth-top-hover) 0%, var(--cf-product-plinth-hover) 100%);
}
.cf-product-card__media img{
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:contain;
  display:block;
  border-radius:var(--cf-frame-radius-inner);  /* concentric with the tile */
}
/* A product image is a square tile in a plinth, never a gallery tile. The
   gallery rule below targets `.cf-grid > li > a:has(> img) > img`, which also
   matches a product card's media link (it is a grid child link too) and would
   crop every square product shot to 4:3. This rule is scoped to the plinth and
   out-specifies the gallery one, so the square tile and `contain` survive. */
main .cf-product-card .cf-product-card__media img,
main .cf-product-card > a.cf-product-card__media img,
main a.cf-product-card__media img{
  aspect-ratio:1 / 1;
  object-fit:contain;
}

.cf-product-card__name{
  font-size:var(--cf-fs-body);
  font-weight:500;
  line-height:var(--cf-lh-heading);
  color:var(--cf-white);
}
.cf-product-card__name a{color:var(--cf-white);text-decoration:underline;text-underline-offset:4px}
.cf-product-card__name a:hover{color:var(--cf-gold)}

.cf-product-card__meta{
  font-size:15px;
  font-weight:300;
  color:var(--cf-text-dim);
}

.cf-product-card__price{
  margin-top:auto;                        /* sticks to the bottom of the card */
  font-size:var(--cf-fs-body);
  font-weight:500;
  color:var(--cf-gold);
}

/* ===== 11. ICON LIST (check-marked bullet lists) ===== */
.cf-list{display:flex;flex-direction:column;width:100%}

.cf-list__item{
  display:flex;
  align-items:center;
  gap:var(--cf-space-3);
  padding-block:calc(var(--cf-list-gap) / 2);   /* 13px between rows */
  font-family:var(--cf-font-primary);
  font-size:var(--cf-fs-list);
  font-weight:300;
  color:var(--cf-white);
}

.cf-list__icon{
  width:var(--cf-icon-size);
  height:var(--cf-icon-size);
  color:var(--cf-white);
}
.cf-list__icon svg{width:100%;height:100%}

/* ===== 12. BUTTONS ===== */
.cf-btn{
  display:inline-block;
  font-family:var(--cf-font-primary);
  font-size:15px;
  font-weight:500;
  line-height:var(--cf-lh-heading);
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  /* a bare .cf-btn is the secondary look: white label on a gold hairline */
  background:transparent;
  color:var(--cf-white);
  border:1px solid var(--cf-gold);
  border-radius:var(--cf-radius-pill);
  padding:15px 25px;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.cf-btn:hover,
.cf-btn:focus-visible{
  text-decoration:none;
  background:var(--cf-gold-accent);
  color:#000;
  border-color:var(--cf-gold-accent);
}
.cf-btn[disabled],
.cf-btn[aria-busy="true"]{opacity:.6;cursor:progress}

/* background accent #B99961, black text: 7.79:1 */
.cf-btn--primary{
  background:var(--cf-gold-accent);
  color:#000;
  border-color:var(--cf-gold-accent);
}
/* hover/focus -> #231F20 background, gold text: 6.51:1 */
.cf-btn--primary:hover,
.cf-btn--primary:focus-visible{
  background:var(--cf-btn-hover-bg);
  color:var(--cf-btn-hover-fg);
  border-color:var(--cf-gold-accent);
}

/* secondary action: white text on the page background, gold hairline */
.cf-btn--ghost{
  background:transparent;
  color:var(--cf-white);
  border-color:var(--cf-gold);
}
.cf-btn--ghost:hover,
.cf-btn--ghost:focus-visible{
  background:var(--cf-gold-accent);
  color:#000;
  border-color:var(--cf-gold-accent);
}

/* compact variant for inline/"read more" actions */
.cf-btn--sm{
  padding:var(--cf-space-2) var(--cf-space-5);
  font-size:14px;
}

/* ===== 13. TABLE (product specs / prices; stacks at <=767px) ===== */
.cf-table-wrap{
  overflow-x:auto;                       /* safety net for wide tables */
  max-width:100%;
}

.cf-table{
  width:100%;
  font-size:15px;
  font-weight:300;
  line-height:var(--cf-lh-body);
  color:var(--cf-white);
}

.cf-table caption{
  text-align:left;
  color:var(--cf-text-dim);
  font-size:14px;
  padding-bottom:var(--cf-space-3);
}

.cf-table th,
.cf-table td{
  padding:var(--cf-space-3);
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--cf-hairline);
}

.cf-table thead th{
  color:var(--cf-gold);
  font-weight:500;
  white-space:nowrap;
  border-bottom:2px solid var(--cf-gold);
}

.cf-table tbody tr:hover{background:var(--cf-surface)}

/* ===== 14. PROSE (long-form copy: Magunkrol, adatkezelesi tajekoztatas, blog) ===== */
.cf-prose{
  max-width:76ch;
  color:var(--cf-text);
  font-weight:300;
  line-height:var(--cf-lh-body);
}
.cf-prose > * + *{margin-top:var(--cf-space-5)}
.cf-prose > h2{
  margin-top:var(--cf-space-7);
  font-size:var(--cf-fs-h3);
  color:var(--cf-white);
}
.cf-prose > h3{
  margin-top:var(--cf-space-6);
  font-size:var(--cf-fs-body);
  color:var(--cf-white);
}
.cf-prose ul{list-style:disc}
.cf-prose ol{list-style:decimal}
.cf-prose ul,
.cf-prose ol{padding-left:var(--cf-space-6)}
.cf-prose li + li{margin-top:var(--cf-space-2)}
.cf-prose a{color:var(--cf-gold);text-decoration:underline}
.cf-prose strong{color:var(--cf-white);font-weight:500}
.cf-prose blockquote{
  padding-left:var(--cf-space-5);
  border-left:2px solid var(--cf-gold);
  color:var(--cf-white);
}
.cf-prose hr{border:0;border-top:1px solid var(--cf-hairline)}
.cf-prose .cf-table{margin-top:var(--cf-space-5)}

/* ===== 15. ACCORDION (native <details>, no JS) - .cf-faq is the legacy alias ===== */
.cf-faq,
.cf-accordion{display:flex;flex-direction:column;gap:var(--cf-space-3)}

.cf-faq__item,
.cf-accordion__item{
  background:var(--cf-surface);
  border:1px solid var(--cf-hairline);
  border-radius:var(--cf-radius);
  padding:var(--cf-space-4) var(--cf-space-5);
}

.cf-faq__q,
.cf-accordion__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--cf-space-3);
  font-family:var(--cf-font-primary);
  font-size:var(--cf-fs-body);
  font-weight:500;
  color:var(--cf-white);
}
.cf-faq__q:hover,
.cf-faq__q:focus-visible,
.cf-accordion__q:hover,
.cf-accordion__q:focus-visible{color:var(--cf-gold)}

.cf-faq__q svg,
.cf-accordion__q svg{
  width:var(--cf-icon-size);
  height:var(--cf-icon-size);
  color:var(--cf-gold);
  transition:transform .25s ease;
}
.cf-faq__item[open] .cf-faq__q,
.cf-accordion__item[open] .cf-accordion__q{color:var(--cf-gold)}
.cf-faq__item[open] .cf-faq__q svg,
.cf-accordion__item[open] .cf-accordion__q svg{transform:rotate(180deg)}

.cf-faq__a,
.cf-accordion__a{
  margin-top:var(--cf-space-4);
  color:var(--cf-text);
  font-weight:300;
  line-height:var(--cf-lh-body);
}
.cf-faq__a p:not(:last-child),
.cf-accordion__a p:not(:last-child){margin-bottom:var(--cf-space-3)}

/* ===== 16. PAGINATION (blog index) ===== */
.cf-pagination{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--cf-space-2);
  margin-top:var(--cf-space-7);
}

.cf-pagination__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 var(--cf-space-3);
  border:1px solid var(--cf-hairline);
  border-radius:var(--cf-radius-sm);
  color:var(--cf-white);
  font-size:15px;
  font-weight:300;
}
.cf-pagination__link:hover,
.cf-pagination__link:focus-visible{
  color:var(--cf-gold);
  border-color:var(--cf-gold);
  text-decoration:none;
}
.cf-pagination__link[aria-current="page"]{
  background:var(--cf-gold-accent);
  border-color:var(--cf-gold-accent);
  color:#000;
  font-weight:500;
}
.cf-pagination__link[aria-disabled="true"],
.cf-pagination__link--disabled{opacity:.5;pointer-events:none}

/* ==========================================================================
   16b. GALLERY
   --------------------------------------------------------------------------
   Gallery tiles are <li><a href="..."><img></a> inside a .cf-grid. The <a> is
   the framed object (see the unified image frame above); the image just fills
   it. The uniform 4/3 aspect ratio turns the mixed portrait/landscape source
   photos into an even mosaic instead of a ragged one.
   ========================================================================== */
/* The mount itself (padding, cocoa background, radius, ring, lift) is owned by
   section 2b above and is NOT re-declared here. Repeating it here would out-
   specify the responsive mount widths in 2b (this selector has the higher
   source order at equal specificity), which would pin every gallery tile to
   the desktop 14px band on phones and make --cf-frame-matte-pad-sm/-xs dead.
   Only gallery-specific geometry lives here. */
.cf-gallery__item,
.cf-grid > li > a:has(> img){
  display:block;
  position:relative;
  min-width:0;
  overflow:hidden;
  transition:outline-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease;
}
.cf-gallery__item:hover,
.cf-grid > li > a:has(> img):not(.cf-product-card__media):hover{
  outline-color:var(--cf-frame-ring-hover);
  background:
    linear-gradient(180deg, var(--cf-frame-matte-top) 0%, var(--cf-frame-matte-hover) 100%);
  box-shadow:var(--cf-frame-shadow-hover);
  transform:translateY(-2px);            /* the tile lifts, reinforcing "object" */
}
/* NOTE: the product card's media link is a grid child link as well, so every
   selector here that would also match it carries `:not(.cf-product-card__media)`.
   A product image is a square plinth tile, not a 4/3 gallery tile: without the
   exclusion this rule crops every square product shot to landscape and lifts
   the flat plinth on hover. */
.cf-gallery__item img,
.cf-grid > li > a:has(> img):not(.cf-product-card__media) > img{
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;                    /* uniform tiles -> an even mosaic */
  object-fit:cover;
  display:block;
  border-radius:var(--cf-frame-radius-inner);  /* concentric with the mount */
  outline:0;
  box-shadow:var(--cf-frame-inset);      /* the rebate where photo meets mount */
}
.cf-grid > li{min-width:0}               /* a wide image cannot widen the track */

/* ===== 17. REFERENCE MARQUEE (pure CSS - replaces the mirror's Swiper autoplay) ===== */
.cf-marquee{
  overflow:hidden;
  width:100%;
  min-height:260px;                      /* fixed band height -> no CLS */
  display:flex;
  align-items:center;
}

.cf-marquee__track{
  display:flex;
  align-items:center;
  gap:15px;
  width:max-content;
  animation:cf-marquee 90s linear infinite;
}

.cf-marquee__item{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.cf-marquee__item img{
  height:160px;
  width:auto;
  max-width:260px;
  object-fit:contain;
  display:block;
}

/* The marquee mount. Opaque client photographs scroll in a band and each gets
   the unified mount, so the strip reads as a row of framed prints rather than
   clipped rectangles. A bare <img> cannot hold padding (padding on a replaced
   element does not create a mount), so the cocoa band is drawn OUTSIDE the
   image edge with an outline offset to the mount width. Outline never affects
   layout, so the scrolling track's geometry is untouched.

   The `:not()` terms are a SPECIFICITY LEVER, not a semantic exclusion - the
   marquee's opaque photos are not bare, they keep the mount. Tier 2 declares
   the same two terms, so a plain class selector loses the offset to tier 2 and
   the cocoa ring floats detached, with page background showing between ring and
   photograph. Naming the terms here puts this rule above tier 2, so the strip
   gets the marquee's own, smaller offset.

   Geometry deliberately stays in the rule above at its low specificity: the
   <=767px and reduced-motion `height:120px` overrides are equally specific and
   must keep winning by source order. */
main .cf-marquee__item img:not(.cf-logo__img):not(.cf-img--bare){
  border-radius:var(--cf-frame-radius-inner);
  box-shadow:var(--cf-frame-inset), var(--cf-frame-shadow);
  outline:1px solid var(--cf-frame-ring);
  outline-offset:calc(var(--cf-frame-matte-pad-sm) - 1px);
}

@keyframes cf-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}         /* track duplicated once -> seamless */
}

/* ==========================================================================
   18. QUOTE FORM  (freeze-frozen contract section C - do not rename a class,
       a field name, an id or a data attribute here)
   ========================================================================== */
.cf-form{display:flex;flex-direction:column;gap:var(--cf-space-5)}

.cf-form__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--cf-space-5);
}

.cf-field{
  display:flex;
  flex-direction:column;
  gap:var(--cf-space-2);
  min-width:0;
}
.cf-field--full{grid-column:1 / -1}

.cf-field__label{
  font-size:15px;
  font-weight:500;
  color:var(--cf-white);
}

/* the frozen `*` marker on required labels */
.cf-req{color:var(--cf-gold);margin-left:var(--cf-space-1)}

.cf-field__input,
.cf-field__select,
.cf-field__textarea{
  background:var(--cf-input-bg);
  color:var(--cf-white);
  border:1px solid var(--cf-hairline);
  border-radius:var(--cf-radius);
  padding:12px 14px;
  font-family:var(--cf-font-primary);
  font-size:16px;
  line-height:var(--cf-lh-body);
  width:100%;
}
.cf-field__input::placeholder,
.cf-field__textarea::placeholder{color:var(--cf-text-dim)}

.cf-field__textarea{min-height:160px;resize:vertical}

/* Native select widget kept on purpose: no arrow image can be used offline. */
.cf-field__select{cursor:pointer}

.cf-field__check{
  display:flex;
  align-items:flex-start;
  gap:var(--cf-space-3);
  font-size:15px;
  font-weight:300;
  line-height:var(--cf-lh-body);
  color:var(--cf-text);
}
.cf-field__check input[type="checkbox"]{
  flex:0 0 auto;
  width:var(--cf-icon-size);
  height:var(--cf-icon-size);
  margin:2px 0 0;
  accent-color:var(--cf-gold-accent);
}
.cf-field__check a{color:var(--cf-gold);text-decoration:underline}

/* error TEXT uses --cf-red-text (8.44:1); --cf-red is borders only */
.cf-field__error{
  color:var(--cf-red-text);
  font-size:14px;
  font-weight:300;
  margin:var(--cf-space-1) 0 0;
}

.cf-field__hint{
  color:var(--cf-text-dim);
  font-size:14px;
  font-weight:300;
  margin:var(--cf-space-1) 0 0;
}

/* malformed field */
.cf-form [aria-invalid="true"]{border-color:var(--cf-red)}

.cf-form__actions{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--cf-space-4);
}

.cf-form__status{
  min-height:var(--cf-space-5);          /* reserve the line: no layout shift */
  font-size:15px;
  font-weight:300;
  color:var(--cf-text);
}
.cf-form__status--ok{color:var(--cf-green)}
.cf-form__status--err{color:var(--cf-red-text)}
.cf-form__status a{color:var(--cf-gold);text-decoration:underline}

/* honeypot: off-screen but never `display:none` (bots skip hidden fields) */
.cf-hp{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ===== 19. FOOTER ===== */
.cf-footer{
  background:var(--cf-near-black);
  border-top:1px solid var(--cf-gold);
  color:var(--cf-white);
  padding-block:var(--cf-space-8) 0;
}

.cf-footer a{color:var(--cf-white)}
.cf-footer a:hover{color:var(--cf-gold);text-decoration:underline}

.cf-footer .cf-section{padding-block:0}   /* the band supplies the rhythm */

.cf-footer__cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--cf-space-7);
}

.cf-footer__col{
  display:flex;
  flex-direction:column;
  gap:var(--cf-space-4);
  min-width:0;
}

.cf-footer__heading{
  font-size:var(--cf-fs-h3);
  font-weight:500;
  line-height:var(--cf-lh-heading);
  color:var(--cf-gold);
}

/* site link column */
.cf-footer__nav{
  display:flex;
  flex-direction:column;
  gap:var(--cf-space-3);
}

.cf-footer__nav-link{
  font-size:15px;
  font-weight:300;
  color:var(--cf-white);
}
.cf-footer__nav-link[aria-current="page"]{
  color:var(--cf-gold);
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:4px;
}

.cf-contact-list{
  display:flex;
  flex-direction:column;
  gap:var(--cf-space-3);
}

.cf-contact-list__item{
  display:flex;
  align-items:flex-start;
  gap:var(--cf-space-3);
  font-size:15px;
  font-weight:300;
  line-height:var(--cf-lh-body);
}
.cf-contact-list__item svg{
  width:var(--cf-icon-size);
  height:var(--cf-icon-size);
  margin-top:2px;
  color:var(--cf-gold);
}

.cf-contact-list__label{color:var(--cf-text-dim);flex:0 0 auto}
.cf-contact-list__value{color:var(--cf-white);word-break:break-word}

.cf-social{
  display:flex;
  align-items:center;
  gap:var(--cf-space-3);
}

.cf-social__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid var(--cf-hairline);
  border-radius:50%;
  color:var(--cf-white);
}
.cf-social__link:hover,
.cf-social__link:focus-visible{
  color:var(--cf-gold);
  border-color:var(--cf-gold);
  text-decoration:none;
}
.cf-social__link svg{width:var(--cf-icon-size);height:var(--cf-icon-size)}

.cf-copyright{
  background:transparent;
  color:var(--cf-text-dim);
  text-align:center;
  padding:42px 0 26px;
  font-size:14px;
  font-weight:300;
}

/* ===== 20. RESPONSIVE OVERRIDES (1199 / 991 / 767 / 479 only) ===== */

/* ---- <=1199px ---------------------------------------------------------- */
@media (max-width:1199px){
  .cf-card__title{font-size:var(--cf-fs-card-title-md)}   /* 18px */
  .cf-list__item{font-size:var(--cf-fs-list-md)}          /* 18px */
  /* tighter nav so the 7 real nav items stay on one header row */
  .cf-nav__link{padding:var(--cf-space-2) var(--cf-space-3);font-size:14px}
  .cf-header__phone{font-size:14px}
}

/* ---- <=991px: nav collapses into a toggled panel ------------------------ */
@media (max-width:991px){
  .cf-nav{
    display:none;                        /* hidden until .cf-nav--open */
    order:3;
    width:100%;
    padding-bottom:var(--cf-space-3);
  }
  .cf-nav--open{display:block}

  .cf-nav__toggle{display:inline-flex;order:2}

  .cf-nav__list{flex-direction:column;align-items:stretch;width:100%}
  .cf-nav__item{width:100%}
  .cf-nav__link{
    display:block;
    padding:var(--cf-space-3) 0;
    border-top:1px solid var(--cf-hairline);
    font-size:var(--cf-fs-body);
  }

  .cf-header__phone{display:none}

  .cf-footer__cols{grid-template-columns:repeat(2,1fr)}

  .cf-grid--3,
  .cf-grid--4{grid-template-columns:repeat(2,1fr)}
}

/* ---- <=767px ----------------------------------------------------------- */
@media (max-width:767px){
  .cf-hero{
    padding:var(--cf-hero-pad-top-sm) var(--cf-hero-pad-x-sm) var(--cf-hero-pad-bottom-sm);
  }
  .cf-hero__title{font-size:var(--cf-fs-hero-1-sm)}         /* 41px */
  .cf-hero__title--light{font-size:var(--cf-fs-hero-2-sm)}  /* 36px */
  .cf-hero--page{padding:var(--cf-space-8) var(--cf-hero-pad-x-sm) var(--cf-space-7)}
  .cf-hero--page .cf-hero__title{font-size:var(--cf-fs-h1-sm)}

  .cf-section,
  .cf-section--features,
  .cf-section--faq,
  .cf-section--quote,
  .cf-section--products{padding-block:var(--cf-section-y-sm)}
  .cf-section--refs{padding-block:var(--cf-space-7)}

  .cf-section__title{font-size:var(--cf-fs-h3)}

  /* cards stack A, B, C */
  .cf-grid--2,
  .cf-grid--3,
  .cf-grid--4{grid-template-columns:1fr}

  .cf-card__title{font-size:var(--cf-fs-card-title-sm)}      /* 20px */
  .cf-card__media img{height:var(--cf-card-img-h-sm)}        /* 350px */

  /* MOBILE ORDER RULE: media above the card text */
  .cf-card__media,
  .cf-card--media-first .cf-card__media{order:-1}
  /* the generic panel card keeps the same mobile order */
  .cf-card--panel{padding:var(--cf-space-5)}

  .cf-list__item{font-size:var(--cf-fs-list-sm)}             /* 20px */

  .cf-form__grid{grid-template-columns:1fr}

  .cf-footer__cols{grid-template-columns:1fr}

  .cf-marquee{min-height:200px}
  .cf-marquee__item img{height:120px}

  /* ---- table: one stacked record per row, label from data-label ------ */
  .cf-table{font-size:var(--cf-fs-body)}
  .cf-table thead{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
  }
  .cf-table,
  .cf-table tbody,
  .cf-table tr,
  .cf-table th,
  .cf-table td{display:block;width:100%}
  .cf-table tr{padding-block:var(--cf-space-3);border-bottom:1px solid var(--cf-hairline)}
  .cf-table tr:hover{background:transparent}
  /* row-header table (th scope="row"): the header leads the stacked record */
  .cf-table th[scope="row"]{padding:0 0 var(--cf-space-1);border:0;color:var(--cf-gold);white-space:normal}
  .cf-table td{padding:var(--cf-space-1) 0;border:0}
  /* labelled cell: <td data-label="Nettó tömeg">115 gr</td> */
  .cf-table td[data-label]{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:var(--cf-space-4);
  }
  .cf-table td[data-label]::before{
    content:attr(data-label);
    flex:0 0 auto;
    color:var(--cf-text-dim);
    font-weight:500;
  }
  .cf-table td:empty{display:none}
}

/* ---- <=479px: very small phones ---------------------------------------- */
@media (max-width:479px){
  .cf-header__inner{padding-block:var(--cf-space-2)}

  .cf-hero__title{font-size:var(--cf-fs-hero-2-sm)}          /* 36px */
  .cf-hero__title--light{font-size:var(--cf-fs-h3)}          /* 30px */

  .cf-btn{width:100%}                                        /* full-width taps */
  .cf-form__actions{flex-direction:column;align-items:stretch}
  .cf-hero__cta{flex-direction:column;align-items:stretch}

  .cf-contact-list__item{flex-wrap:wrap}
  .cf-social{flex-wrap:wrap}
  .cf-card--panel{padding:var(--cf-space-4)}
}

/* ===== 21. REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce){
  .cf-marquee{min-height:0}
  .cf-marquee__track{
    animation:none;
    flex-wrap:wrap;
    justify-content:center;
    width:100%;
    row-gap:var(--cf-space-5);
  }
  .cf-marquee__item img{height:120px}
  .cf-faq__q svg,
  .cf-accordion__q svg{transition:none}
  /* the single documented `!important`: a user asking for reduced motion must win
     over every component transition, including ones declared later in this file */
  *,*::before,*::after{transition-duration:.001ms !important}
  /* Neutralising the transition is not enough on its own: the gallery tile still
     JUMPED 2px on hover (a translateY with a zero-duration transition is still a
     visible movement). A user asking for reduced motion must not get an animated
     lift at all, so the hover transform is cancelled here too. */
  .cf-gallery__item:hover,
  .cf-grid > li > a:has(> img):hover,
  .cf-grid > li > a:has(> img):not(.cf-product-card__media):hover,
  main .cf-grid > li > a:has(> img):not(.cf-product-card__media):hover{
    transform:none;
  }
}

/* ===== 22. PRINT - black text on white, no dark bands ===== */
@media print{
  html,body{background:#fff;color:#000}
  .cf-skip-link,
  .cf-hp{display:none}
  .cf-header{position:static;background:#fff;border-bottom:1px solid #000}
  :is(.cf-hero,.cf-footer,.cf-copyright,.cf-faq__item,.cf-accordion__item,
      .cf-marquee,.cf-card--panel,.cf-product-card,.cf-table tbody tr:hover,
      .cf-field__input,.cf-field__select,.cf-field__textarea,
      .cf-form__status,.cf-card__media img){
    background:#fff;
    border-color:#bbb;
  }
  :is(.cf-header,.cf-hero,.cf-footer,.cf-copyright,.cf-card__title,.cf-card__text,
      .cf-section__title,.cf-section__lead,.cf-faq__q,.cf-faq__a,
      .cf-accordion__q,.cf-accordion__a,.cf-list__item,.cf-product-card__name,
      .cf-product-card__meta,.cf-product-card__price,.cf-table,.cf-prose,
      .cf-prose > h2,.cf-prose > h3,.cf-nav__link,.cf-footer__nav-link,
      .cf-header__phone,.cf-field__label,.cf-field__check,.cf-breadcrumb__item,
      .cf-field__hint,.cf-field__error,.cf-form__status){color:#000}
  .cf-btn--primary{background:#fff;color:#000;border-color:#000}
  .cf-btn--ghost{color:#000;border-color:#000}
  .cf-marquee{min-height:0;overflow:visible}
  .cf-marquee__track{animation:none;flex-wrap:wrap;width:auto}
  /* The cocoa mount is a SCREEN object: with background graphics enabled it
     would print every framed tile as a dark plate with a drop shadow. Stripped
     here on every frame owner. Each selector mirrors the exact shape of the
     rule that applied the mount (including the gallery's
     `:not(.cf-product-card__media)` and the plinth's card scope), because the
     mount selectors are more specific than a bare class and source order alone
     would not win. */
  .cf-frame,
  .cf-card__media,
  .cf-gallery__item,
  main .cf-product-card .cf-product-card__media,
  .cf-grid > li > a:has(> img),
  .cf-grid > li > a:has(> img):not(.cf-product-card__media),
  main .cf-grid > li > a:has(> img):not(.cf-product-card__media),
  main .cf-marquee__item img:not(.cf-logo__img):not(.cf-img--bare){
    background:#fff;
    background-image:none;
    box-shadow:none;
    outline:0;
  }
  .cf-table thead th{color:#000;border-bottom-color:#000}
}


/* ==========================================================================
   99. FOCUS INDICATOR (LAST WORD)
   --------------------------------------------------------------------------
   Declared at the very end of the stylesheet on purpose: source order only
   breaks ties at EQUAL specificity, so these selectors also mirror the
   :hover / :has() shape of the frame rules they must beat. This is what
   guarantees a keyboard user always sees the 2px gold indicator, never the
   1px cocoa ring and never the cocoa hover tone.
   ========================================================================== */
/* --------------------------------------------------------------------------
   KEYBOARD FOCUS MUST WIN OVER THE DECORATIVE COCOA RING.

   The frame rules set `outline`/`outline-color` on focusable frame owners
   (gallery tiles, the framed product media link). Several of those selectors
   are more specific than the global `:focus-visible` rule, so without this
   block they would replace the mandated 2px gold focus indicator with the 1px
   cocoa ring - or, with the pointer resting on the tile while it is keyboard
   focused, recolour the indicator to the cocoa hover tone (~3:1 against the
   page instead of the gold ~10.7:1). Both leave a keyboard user without a
   usable indicator (WCAG 2.4.7 Focus Visible / 2.4.11 Focus Appearance).

   NOTE ON PLACEMENT: this block lives at the very END of the stylesheet, after
   every frame and hover rule, and every selector here carries the same
   `:focus-visible` + `:hover` / `:has()` shape as the rules it must beat. That
   combination is what actually wins: source order only breaks ties at EQUAL
   specificity, so sitting at the end of the frame section alone was not
   enough - the gallery hover rule declared later still out-specified it.
   -------------------------------------------------------------------------- */
a.cf-gallery__item:focus-visible,
.cf-gallery__item:focus-visible,
.cf-frame:focus-visible,
a.cf-card__media:focus-visible,
.cf-card__media:focus-visible,
a.cf-product-card__media:focus-visible,
.cf-product-card__media:focus-visible,
main a:has(> img):focus-visible,
main .cf-grid > li > a:has(> img):focus-visible,
.cf-gallery__item:focus-visible:hover,
a.cf-gallery__item:focus-visible:hover,
main .cf-grid > li > a:has(> img):focus-visible:hover,
main .cf-grid > li > a:has(> img):not(.cf-product-card__media):focus-visible:hover,
.cf-product-card__media:focus-visible,
a.cf-product-card__media:focus-visible,
.cf-product-card:hover .cf-product-card__media:focus-visible,
a.cf-product-card__media:focus-visible:hover,
.cf-card__media:focus-visible,
a.cf-card__media:focus-visible:hover,
.cf-card--link:hover .cf-card__media:focus-visible{
  outline:2px solid var(--cf-focus);
  outline-color:var(--cf-focus);
  outline-offset:2px;
}