/**
 * Design tokens — Printmania
 *
 * Single source of truth for every design constant in the theme.
 * Extracted 1:1 from the DesignCombo mockup (design/_regions/*). The mockup ships
 * all styles inline and defines no :root block, so values were scanned, clustered
 * and named here without rounding — if the design uses both 13px and 13.5px, both
 * survive as separate steps.
 *
 * Structure: 1) PRIMITIVES — the raw scale.  2) SEMANTIC ALIASES — what components use.
 * Components must reference the semantic layer wherever one exists.
 *
 * @package Printmania
 */

:root {

	/* =========================================================================
	 * 1. PRIMITIVES
	 * ========================================================================= */

	/* --- Brand hues ------------------------------------------------------- */
	--c-magenta-200: #FCA8D2; /* light magenta on dark surfaces */
	--c-magenta-500: #E93890; /* primary brand */
	--c-plum-700:    #7d2c55; /* CTA radial gradient stop */
	--c-plum-900:    #3a1a29; /* CTA radial gradient stop */

	--c-cyan-300: #7FD3ED; /* light cyan on dark surfaces */
	--c-cyan-500: #56BCE1; /* secondary brand */
	--c-cyan-600: #29B6E8; /* rainbow gradient stop */
	--c-cyan-700: #2a95bd; /* accessible cyan on light surfaces */

	--c-yellow-500: #F7D347; /* tertiary brand */
	--c-yellow-600: #F7C800; /* review stars */
	--c-yellow-800: #b48700; /* accessible yellow on light surfaces */

	--c-orange-300: #F0954B; /* light orange on dark surfaces */
	--c-orange-500: #ED6C09;

	--c-purple-500: #7B4BD6; /* rainbow gradient stop */
	--c-blue-600:   #0A4DFF; /* newsletter gradient stop */
	--c-navy-700:   #2A2350; /* hero confetti triangle */
	--c-green-500:  #1F9D55; /* in-stock / quality */
	--c-azure-500:  #0096D6; /* brand lockup wordmark (HP) on the archive */

	/* --- Ink & neutrals --------------------------------------------------- */
	--c-white:    #ffffff;
	--c-ink-950:  #0a0a0a;
	--c-ink-900:  #121212; /* body text + dark surfaces */
	--c-ink-850:  #1a1a1a;
	--c-ink-800:  #1f1f1f; /* dark chips, deal-banner gradient stop */
	--c-ink-750:  #2a2a2a; /* hairlines on dark */
	--c-ink-700:  #333333; /* mega-menu links */
	--c-ink-650:  #3d3d3d; /* B2B list copy (light) */
	--c-ink-600:  #444444; /* review copy, hero subhead */
	--c-ink-550:  #555555; /* B2B stat labels (light) */

	--c-gray-600: #6B6B6B; /* muted body copy */
	--c-gray-500: #8c8c8c; /* footer muted copy */
	--c-gray-450: #9a9a9a; /* meta text + placeholders */
	--c-gray-400: #b5b5b5; /* struck-through price */
	--c-gray-300: #cccccc; /* payment chips */
	--c-gray-250: #cfcfcf; /* footer base text */
	--c-gray-200: #e8e8e8; /* nav links on dark */
	--c-gray-150: #ededed; /* printer illustration */

	--c-line:     #ECECE7; /* the single border colour of the design */
	--c-line-700: #d6d6d2; /* darker hairline — unchecked filter checkbox */
	--c-sand-100: #F1F1ED; /* chip background */
	--c-sand-50:  #FAFAF7; /* page background + tile background */

	/* --- Blue-tinted surfaces (hero A / promo) ---------------------------- */
	--c-sky-50:  #F6FBFE;
	--c-sky-100: #E9F5FB;
	--c-sky-150: #EAF1F6;
	--c-sky-200: #E2EBF1; /* promo card border */
	--c-sky-300: #C7D2DA; /* dashed coupon border */

	/* --- Dark violets (mega promo / hero B) ------------------------------- */
	--c-violet-800: #3a1d52;
	--c-violet-900: #241433;
	--c-violet-950: #1b1330;
	--c-night-700:  #241634;
	--c-night-800:  #1c1530;
	--c-night-900:  #141019;

	/* --- Channel triplets -------------------------------------------------
	 * For one-off alphas not covered by a named tint below:
	 * rgb( var( --rgb-magenta ) / .28 )
	 * --------------------------------------------------------------------- */
	--rgb-magenta:    233 56 144;
	--rgb-cyan:       86 188 225;
	--rgb-yellow:     247 211 71;
	--rgb-orange:     237 108 9;
	--rgb-ink:        18 18 18;
	--rgb-white:      255 255 255;
	--rgb-black:      0 0 0;
	--rgb-violet-950: 27 19 48;

	/* --- Named tints (recurring translucent fills & borders) -------------- */
	--c-magenta-a07: rgba( 233, 56, 144, .07 ); /* category-card blob */
	--c-magenta-a10: rgba( 233, 56, 144, .10 );
	--c-magenta-a12: rgba( 233, 56, 144, .12 );
	--c-magenta-a16: rgba( 233, 56, 144, .16 );
	--c-magenta-a18: rgba( 233, 56, 144, .18 );
	--c-magenta-a20: rgba( 233, 56, 144, .20 );
	--c-magenta-a24: rgba( 233, 56, 144, .24 );
	--c-magenta-a26: rgba( 233, 56, 144, .26 );
	--c-magenta-a30: rgba( 233, 56, 144, .30 );
	--c-magenta-a40: rgba( 233, 56, 144, .40 );
	--c-magenta-a00: rgba( 233, 56, 144, 0 );

	--c-cyan-a12: rgba( 86, 188, 225, .12 );
	--c-cyan-a14: rgba( 86, 188, 225, .14 );
	--c-cyan-a16: rgba( 86, 188, 225, .16 );
	--c-cyan-a22: rgba( 86, 188, 225, .22 );
	--c-cyan-a30: rgba( 86, 188, 225, .30 );
	--c-cyan-a32: rgba( 86, 188, 225, .32 );
	--c-cyan-a40: rgba( 86, 188, 225, .40 );
	--c-cyan-a00: rgba( 86, 188, 225, 0 );

	--c-yellow-a14: rgba( 247, 211, 71, .14 );
	--c-yellow-a16: rgba( 247, 211, 71, .16 );
	--c-yellow-a22: rgba( 247, 211, 71, .22 );
	--c-yellow-a32: rgba( 247, 211, 71, .32 );

	--c-orange-a12: rgba( 237, 108, 9, .12 );
	--c-orange-a18: rgba( 237, 108, 9, .18 );

	--c-white-a045: rgba( 255, 255, 255, .045 );
	--c-white-a06:  rgba( 255, 255, 255, .06 );
	--c-white-a10:  rgba( 255, 255, 255, .10 );
	--c-white-a12:  rgba( 255, 255, 255, .12 );
	--c-white-a18:  rgba( 255, 255, 255, .18 );
	--c-white-a35:  rgba( 255, 255, 255, .35 );
	--c-white-a66:  rgba( 255, 255, 255, .66 );
	--c-white-a70:  rgba( 255, 255, 255, .70 );
	--c-white-a72:  rgba( 255, 255, 255, .72 );
	--c-white-a74:  rgba( 255, 255, 255, .74 );
	--c-white-a78:  rgba( 255, 255, 255, .78 );
	--c-white-a90:  rgba( 255, 255, 255, .90 );

	/* --- Gradients -------------------------------------------------------- */
	--gradient-rainbow: linear-gradient( 90deg, #29B6E8, #7B4BD6, #E93890, #ED6C09, #F7D347 ); /* search-field frame */
	--gradient-brand-dot: linear-gradient( 135deg, #56BCE1, #E93890 ); /* avatar bubble */
	--gradient-brand-text: linear-gradient( 90deg, #56BCE1, #E93890 ); /* clipped headline text */
	--gradient-brand-text-3: linear-gradient( 90deg, #56BCE1, #E93890 55%, #F7D347 ); /* clipped hero text */
	--gradient-b2b-cta: linear-gradient( 90deg, #E93890, #ED6C09 );
	--gradient-newsletter: linear-gradient( 135deg, #56BCE1, #0A4DFF );

	--gradient-hero-a: linear-gradient( 180deg, #FFFFFF 0%, #E9F5FB 100% );
	--gradient-promo-card: linear-gradient( 120deg, #EAF1F6, #F6FBFE );
	--gradient-cat-blob: radial-gradient( circle, rgba( 233, 56, 144, .07 ), rgba( 233, 56, 144, 0 ) 70% );

	--gradient-hero-b: radial-gradient( 820px 460px at 10% 18%, rgba( 86, 188, 225, .22 ), transparent 60% ),
		radial-gradient( 760px 540px at 92% 6%, rgba( 233, 56, 144, .26 ), transparent 55% ),
		linear-gradient( 135deg, #141019, #1c1530 55%, #241634 );
	--gradient-deal-banner: radial-gradient( 700px 400px at 88% 30%, rgba( 233, 56, 144, .4 ), transparent 60% ),
		radial-gradient( 600px 360px at 6% 80%, rgba( 86, 188, 225, .3 ), transparent 60% ),
		linear-gradient( 120deg, #121212, #1f1f1f );

	--gradient-mega-promo: radial-gradient( 130% 100% at 100% 0%, #3a1d52 0%, #241433 48%, #1b1330 100% );
	--gradient-mega-glow: radial-gradient( circle at 54% 54%, rgba( 86, 188, 225, .40 ), rgba( 233, 56, 144, .24 ) 47%, transparent 72% );
	--gradient-mega-scrim: linear-gradient( 100deg, #1b1330 26%, rgba( 27, 19, 48, .35 ) 52%, rgba( 27, 19, 48, 0 ) 74% );

	--gradient-glow-cyan: radial-gradient( circle, rgba( 86, 188, 225, .22 ), rgba( 86, 188, 225, 0 ) 68% );
	--gradient-glow-cyan-soft: radial-gradient( circle, rgba( 86, 188, 225, .14 ), rgba( 86, 188, 225, 0 ) 68% );
	--gradient-glow-magenta: radial-gradient( circle, rgba( 233, 56, 144, .20 ), rgba( 233, 56, 144, 0 ) 68% );
	--gradient-glow-magenta-soft: radial-gradient( circle, rgba( 233, 56, 144, .1 ), rgba( 233, 56, 144, 0 ) 68% );

	/* Conversion CTA: a magenta wipe riding over a dark radial base.
	 * Needs all four background-* longhands together — see the CTA aliases below. */
	--gradient-cta: linear-gradient( 90deg, #E93890 0%, #E93890 45%, rgba( 233, 56, 144, 0 ) 62% ),
		radial-gradient( 240% 340% at -8% 50%, #7d2c55 0%, #3a1a29 50%, #121212 100% );
	--gradient-cta-repeat: no-repeat, no-repeat;
	--gradient-cta-size: 250% 100%, 100% 100%;
	--gradient-cta-position: 100% 0, center;
	--gradient-cta-position-hover: 0 0, center;

	/* --- Shadows ---------------------------------------------------------- */
	--shadow-1: 0 8px 24px rgba( 18, 18, 18, .04 );  /* B2B stat rows */
	--shadow-2: 0 6px 18px rgba( 233, 56, 144, .28 ), inset 0 1px 0 rgba( 255, 255, 255, .24 ); /* CTA hover */
	--shadow-3: 0 10px 30px rgba( 0, 0, 0, .18 );    /* newsletter form */
	--shadow-4: 0 10px 30px rgba( 233, 56, 144, .28 ); /* B2B CTA on light */
	--shadow-5: 0 10px 30px rgba( 233, 56, 144, .35 ); /* B2B CTA on dark */
	--shadow-6: 0 14px 30px rgba( 0, 0, 0, .10 );    /* card hover lift */
	--shadow-7: 0 20px 44px rgba( 18, 18, 18, .08 ); /* finder panel */
	--shadow-8: 0 24px 48px rgba( 0, 0, 0, .22 );    /* mega menu */
	--shadow-9: 0 28px 56px rgba( 0, 0, 0, .34 );    /* hero B form */
	--shadow-inset-cta: inset 0 0 0 1px rgba( 255, 255, 255, .16 ), inset 0 1px 0 rgba( 255, 255, 255, .30 );

	/* --- Drop shadows (filter) -------------------------------------------- */
	--drop-shadow-1: drop-shadow( 0 18px 30px rgba( 0, 0, 0, .3 ) );  /* newsletter mascot */
	--drop-shadow-2: drop-shadow( 0 26px 44px rgba( 0, 0, 0, .5 ) );  /* deal-banner mascot */
	--drop-shadow-3: drop-shadow( 0 40px 60px rgba( 0, 0, 0, .45 ) ); /* hero B mascot */

	/* --- Spacing ----------------------------------------------------------
	 * Value-indexed: --space-N is exactly Npx. The mockup works on a 1px
	 * granularity (9px, 11px, 13px, 13.5px…), so an ordinal 4px scale would
	 * have forced rounding. Every step below is used somewhere in the design.
	 * --------------------------------------------------------------------- */
	--space-2:  2px;
	--space-3:  3px;
	--space-4:  4px;
	--space-5:  5px;
	--space-6:  6px;
	--space-7:  7px;
	--space-8:  8px;
	--space-9:  9px;
	--space-10: 10px;
	--space-11: 11px;
	--space-12: 12px;
	--space-13: 13px;
	--space-14: 14px;
	--space-15: 15px;
	--space-16: 16px;
	--space-18: 18px;
	--space-20: 20px;
	--space-22: 22px;
	--space-24: 24px;
	--space-26: 26px;
	--space-28: 28px;
	--space-30: 30px;
	--space-32: 32px;
	--space-36: 36px;
	--space-38: 38px;
	--space-40: 40px;
	--space-42: 42px;
	--space-44: 44px;
	--space-46: 46px;
	--space-56: 56px;
	--space-58: 58px;
	--space-60: 60px;
	--space-64: 64px;

	/* --- Radius ----------------------------------------------------------- */
	--radius-3xs:    5px;
	--radius-2xs:    7px;
	--radius-xs:     8px;
	--radius-sm:     9px;
	--radius-md:     10px;
	--radius-lg:     11px; /* the design's control radius — buttons, icon tiles */
	--radius-xl:     12px;
	--radius-2xl:    14px; /* the design's card radius */
	--radius-3xl:    16px;
	--radius-4xl:    18px;
	--radius-5xl:    20px;
	--radius-pill:   999px;
	--radius-circle: 50%;

	/* --- Type scale --------------------------------------------------------
	 * The `-5` suffix means the half step (e.g. --text-sm-5 is 14.5px).
	 * --------------------------------------------------------------------- */
	--text-xxs:  12px;
	--text-xs:   13px;
	--text-xs-5: 13.5px;
	--text-sm:   14px;
	--text-sm-5: 14.5px;
	--text-base: 15px;
	--text-md:   16px;
	--text-md-5: 16.5px;
	--text-lg:   17px;
	--text-xl:   18px;
	--text-2xl:  19px;
	--text-3xl:  20px;
	--text-4xl:  21px;
	--text-5xl:  24px;
	--text-6xl:  27px;
	--text-7xl:  34px;

	/* Fluid display sizes, verbatim from the mockup's clamp() values. */
	--text-display-hero:       clamp( 34px, 4.2vw, 56px ); /* hero B h1 */
	--text-display-promo:      clamp( 36px, 4.4vw, 56px ); /* hero A promo figure */
	--text-display-section:    clamp( 26px, 3vw, 38px );   /* section h2 */
	--text-display-banner:     clamp( 28px, 3.4vw, 46px ); /* deal banner h2 */
	--text-display-b2b:        clamp( 30px, 3.4vw, 46px ); /* B2B h2 */
	--text-display-newsletter: clamp( 24px, 3vw, 34px );   /* newsletter h3 */
	--text-display-category:   clamp( 28px, 3.2vw, 40px ); /* archive h1 */

	/* --- Font families -----------------------------------------------------
	 * Grift is the preferred display face; Hanken Grotesk is the Google font
	 * actually loaded and carries the whole design in practice.
	 * --------------------------------------------------------------------- */
	--font-body: 'Grift', 'Hanken Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
	--font-display: var( --font-body );

	/* --- Font weights ----------------------------------------------------- */
	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;
	--fw-black:    800;

	/* --- Line heights ----------------------------------------------------- */
	--lh-none:     1;
	--lh-crushed:  .95;  /* promo figure */
	--lh-hero:     1.02;
	--lh-b2b:      1.03;
	--lh-banner:   1.08;
	--lh-tight:    1.15;
	--lh-snug:     1.3;
	--lh-stat:     1.35;
	--lh-normal:   1.4;
	--lh-body:     1.5;
	--lh-relaxed:  1.6;
	--lh-loose:    1.65;
	--lh-airy:     1.7;

	/* --- Letter spacing --------------------------------------------------- */
	--ls-display-xl: -2px;
	--ls-display-lg: -1.5px;
	--ls-display:    -1px;
	--ls-tight:      -.5px;
	--ls-tighter:    -.4px;
	--ls-body:       -0.01em; /* global body tracking */
	--ls-wide:       .4px;
	--ls-wide-5:     .5px;
	--ls-wide-6:     .6px;
	--ls-wider:      .8px;
	--ls-caps:       1px;
	--ls-caps-2:     1.2px;
	--ls-caps-4:     1.4px;
	--ls-caps-5:     1.5px;
	--ls-caps-6:     1.6px;
	--ls-stars:      2px;

	/* --- Borders ---------------------------------------------------------- */
	--border-width:        1px;
	--border-width-strong: 1.5px;
	--border-width-box:    2px; /* filter checkbox */
	--border-width-accent: 3px; /* nav active underline, promo pill bottom rule */

	/* --- Layout ----------------------------------------------------------- */
	--container:         1240px;
	--container-padding: 16px; /* mobile mockup; 24px from --breakpoint-md (below) */
	--width-search:      640px;
	--width-sidebar:     264px; /* archive filter column */
	--width-hero-form:   560px;
	--width-prose:       480px;
	--width-prose-lg:    500px;
	--width-prose-sm:    300px;
	--sticky-top-sidebar: 150px; /* archive sidebar sticky offset, clears the sticky header */

	/* --- Brand / model archives (design/_regions/brand-l1 + brand-l2) ------ */
	--c-sand-150:  #F4F4EF; /* placeholder stripe, light */
	--c-sand-200:  #E7E7E1; /* notify button hover */
	--c-line-100:  #F0F0EC; /* class-card divider, notify button fill */
	--c-line-200:  #E2E2DC; /* notify button border */
	--c-gray-350:  #A8A8A2; /* placeholder printer / cartridge glyph */
	--c-cyan-650:  #1E9FCB; /* "Uložiť do mojich tlačiarní" text */
	--gradient-stripes-lg: repeating-linear-gradient( 45deg, #F4F4EF, #F4F4EF 9px, #ECECE7 9px, #ECECE7 18px ); /* model hero placeholder */
	--gradient-stripes-md: repeating-linear-gradient( 45deg, #F4F4EF, #F4F4EF 8px, #ECECE7 8px, #ECECE7 16px ); /* model tile placeholder */
	--gradient-stripes-sm: repeating-linear-gradient( 45deg, #F4F4EF, #F4F4EF 6px, #ECECE7 6px, #ECECE7 12px ); /* product row placeholder */
	--text-xxs-5: 12.5px; /* notify button */
	--text-6xl-sm: 26px;  /* "Vyberte model tlačiarne" h2 */
	--text-8xl: 38px;     /* mascot board figure */
	--text-display-model: clamp( 26px, 3vw, 36px ); /* model archive h1 */
	--space-54: 54px;     /* product row thumbnail */
	--width-model-image: 300px; /* model hero image column */
	--width-board: 380px;       /* mascot board column */
	--width-board-max: 420px;   /* mascot board image */
	--width-mascot: 280px;      /* contact section mascot column */
	--width-contact: 1000px;    /* contact section inner width */
	--width-prose-xl: 640px;    /* model intro paragraph */
	--offset-board: -104px;     /* mascot board rides up into the heading row */
	--board-left: 14%;          /* overlay box on the mascot's board */
	--board-top: 41.5%;
	--board-width: 72%;
	--board-height: 44%;
	--ratio-tile: 4 / 3;        /* model tile image panel */
	--space-52: 52px;           /* brand contact section top padding */
	--radius-13: 13px;          /* class card + product row radius */
	--text-4xl-5: 22px;         /* product row price */
	--lh-board: 1.25;           /* mascot board copy */

	/* --- Motion ----------------------------------------------------------- */
	--ease-cta:        cubic-bezier( .33, 1, .68, 1 );
	--duration-fast:   .15s;
	--duration-nav:    .18s;
	--duration-base:   .2s;
	--duration-wipe:   .8s;
	--transition-base: all var( --duration-base );
	--transition-color: color var( --duration-fast );
	--transition-cta:  background-position var( --duration-wipe ) var( --ease-cta );
	--lift-card:       -3px; /* card hover translateY */
	--lift-cta:        -2px; /* CTA hover translateY */

	/* --- Breakpoints -------------------------------------------------------
	 * The mockup contains no @media queries — it is a desktop-only export.
	 * These are the theme's own responsive steps, derived from the design's
	 * grid: 1240px container + 24px gutters -> 1288px; the 7-up brand grid and
	 * 4-up card grids collapse below tablet. Custom properties cannot be used
	 * in a media query condition, so these exist for documentation and for JS;
	 * the literal px must be repeated in @media. Keep the two in sync.
	 * --------------------------------------------------------------------- */
	--breakpoint-sm: 480px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 1024px;
	--breakpoint-xl: 1288px;

	/* =========================================================================
	 * 2. SEMANTIC ALIASES — components reference these
	 * ========================================================================= */

	/* --- Surfaces --------------------------------------------------------- */
	--color-page:            var( --c-sand-50 );
	--surface:               var( --c-white );
	--surface-sunken:        var( --c-sand-50 );  /* icon tiles, product thumbs */
	--surface-chip:          var( --c-sand-100 );
	--surface-dark:          var( --c-ink-900 );  /* nav bar, footer, B2B */
	--surface-dark-elevated: var( --c-ink-800 );  /* footer social + payment chips */
	--surface-on-dark:       var( --c-white-a045 );
	--surface-on-dark-hover: var( --c-white-a12 );
	--surface-on-dark-soft:  var( --c-white-a06 );

	/* --- Text ------------------------------------------------------------- */
	--color-text:            var( --c-ink-900 );
	--color-text-soft:       var( --c-ink-600 );
	--color-text-muted:      var( --c-gray-600 );
	--color-text-meta:       var( --c-gray-450 );
	--color-text-strike:     var( --c-gray-400 );
	--color-placeholder:     var( --c-gray-450 );
	--color-text-invert:     var( --c-white );
	--color-text-on-dark:    var( --c-white-a74 );
	--color-text-on-dark-mute: var( --c-white-a66 );
	--color-text-footer:     var( --c-gray-250 );
	--color-text-footer-mute: var( --c-gray-500 );
	--color-text-footer-link: var( --c-gray-450 );
	--color-text-nav:        var( --c-gray-200 );
	--color-text-mega-link:  var( --c-ink-700 );

	/* --- Brand ------------------------------------------------------------ */
	--color-primary:          var( --c-magenta-500 );
	--color-primary-soft:     var( --c-magenta-200 );
	--color-primary-tint:     var( --c-magenta-a16 );
	--color-primary-border:   var( --c-magenta-a30 );
	--color-brand-lockup:     var( --c-azure-500 );
	--color-secondary:        var( --c-cyan-500 );
	--color-secondary-soft:   var( --c-cyan-300 );
	--color-secondary-strong: var( --c-cyan-700 );
	--color-secondary-tint:   var( --c-cyan-a14 );
	--color-secondary-border: var( --c-cyan-a32 );
	--color-accent:           var( --c-yellow-500 );
	--color-accent-strong:    var( --c-yellow-800 );
	--color-accent-tint:      var( --c-yellow-a14 );
	--color-accent-border:    var( --c-yellow-a32 );
	--color-tertiary:         var( --c-orange-500 );
	--color-tertiary-soft:    var( --c-orange-300 );
	--color-success:          var( --c-green-500 );
	--color-star:             var( --c-yellow-600 );

	/* --- Lines ------------------------------------------------------------ */
	--color-border:         var( --c-line );
	--color-border-strong:  var( --c-ink-900 );
	--color-border-dark:    var( --c-ink-750 );
	--color-border-on-dark: var( --c-white-a10 );
	--color-border-promo:   var( --c-sky-200 );
	--color-control-border: var( --c-line-700 );
	--color-border-coupon:  var( --c-sky-300 );

	/* --- Component sizing (repeated across the design) -------------------- */
	--gap-card:      var( --space-18 ); /* 4-up card grids */
	--gap-grid:      var( --space-12 ); /* brand grid, stat rows */
	--gap-section:   var( --space-24 );
	--section-space: var( --space-60 ); /* standard section top padding */
	--card-padding:  var( --space-26 );
	--control-height: 48px;
	--control-height-sm: 46px;
	--control-height-lg: 50px;
	--icon-button-size: 42px;
	--icon-tile-size:   44px;
	--radius-control: var( --radius-lg );
	--radius-card:    var( --radius-2xl );

	/* --- Single product (design/_regions/product.part.html) --------------- */
	--surface-buy:             #FDF4F8; /* buy box background */
	--color-buy-border:        #F6DCE9; /* buy box border */
	--color-buy-line:          #F3DEE9; /* buy box hairlines */
	--color-success-tint:      #E8F6EE; /* saving pill / Recogreen pill background */
	--color-success-strong:    #137A41; /* saving pill text */
	--color-success-ring:      rgba( 31, 157, 85, .18 ); /* in-stock dot halo */
	--color-primary-tint-soft: #FCEFF6; /* Premium pill background */
	--color-backdrop:          rgba( 18, 18, 18, .55 ); /* modal scrim */
	--color-star-empty:        #D8D8D2;
	--color-underline-soft:    #D8D8D2; /* review-count underline */
	--color-text-cap:          #8A8A85; /* alternative card capacity note */

	--gradient-stage-glow-cyan:    radial-gradient( circle, rgba( 86, 188, 225, .16 ), transparent 65% );
	--gradient-stage-glow-magenta: radial-gradient( circle, rgba( 233, 56, 144, .13 ), transparent 65% );
	--gradient-stripes:  repeating-linear-gradient( 45deg, #F4F4EF, #F4F4EF 7px, #ECECE7 7px, #ECECE7 14px ); /* printer thumb placeholder */
	--gradient-avatar-a: linear-gradient( 135deg, #E93890, #56BCE1 );
	--gradient-avatar-b: linear-gradient( 135deg, #56BCE1, #F7D347 );
	--drop-shadow-stage: drop-shadow( 0 30px 50px rgba( 0, 0, 0, .18 ) ); /* product stage image */
	--shadow-modal:      0 30px 70px rgba( 0, 0, 0, .32 );

	--text-display-product: clamp( 24px, 2.4vw, 31px ); /* product h1 */
	--text-star-picker: 36px; /* review modal star picker */
	--text-9xl:  40px; /* buy box price */
	--text-10xl: 52px; /* rating summary figure */
	--ls-display-price: -1.8px;
	--lh-title: 1.14;
	--lh-list:  1.9;
	--space-34: 34px;
	--space-48: 48px;
	--radius-xl-5: 13px; /* shipping tiles, review cards */
	--control-height-xl: 52px; /* add-to-cart button */
	--width-alt-card: 258px; /* alternatives grid min column */
	--width-modal-sm: 480px;
	--width-modal-md: 500px;
	--width-modal-lg: 820px;
}

/* Shop pages (cart / checkout / My account) — 16.9.2026 */
:root {
	--space-72: 72px;
	--space-88: 88px;
	--space-96: 96px;
	--space-120: 120px;
	--space-200: 200px;
	--width-summary: 420px;
	--color-tertiary-tint: rgb( var( --rgb-orange ) / .14 );

	/* Info pages — Kontakt, Doprava a platba, Pre firmy (pages/info.css). */
	--height-info-mascot: 300px; /* hero mascot cap */

	/* Legal documents — VOP, GDPR, Výzva (pages/legal.css). */
	--width-prose-legal: 760px; /* legal text column, ~80 characters per line */
}

/* Mobile mockup (Printmania.sk-respo) — header drawer + small-screen layout. */
:root {
	--container-padding-md: 24px; /* desktop container padding */
	--logo-height:      28px; /* mobile header + drawer logo */
	--logo-height-lg:   34px; /* desktop header logo */
	--space-62:         62px; /* drawer third-level indent */
	--overlay-drawer:   rgba( 18, 18, 18, .55 );
	--shadow-drawer:    20px 0 50px rgba( 0, 0, 0, .25 );
	--color-border-soft: var( --c-line-100 ); /* drawer row dividers */
	--color-caret:      var( --c-gray-450 ); /* drawer accordion caret */
}

/* Mobile mockup type scale (its global <=820px rule: h1 30px, h2 22px).
   The desktop clamp()s come back from --breakpoint-md. */
:root {
	--text-display-hero-sm:     30px;
	--text-display-section-sm:  22px;
	--lh-display-sm:            1.12;
}

@media ( max-width: 767px ) {
	:root {
		--text-display-hero:     var( --text-display-hero-sm );
		--text-display-category: var( --text-display-hero-sm );
		--text-display-model:    var( --text-display-hero-sm );
		--text-display-section:  var( --text-display-section-sm );
		--text-display-product:  var( --text-display-section-sm );
	}
}

@media ( min-width: 768px ) {
	:root {
		--container-padding: var( --container-padding-md );
	}
}

/* Mobile — brand + model archives */
:root {
	--height-mascot-sm: 220px; /* brand contact mascot cap below 768px */
}

/* Mobile — single product */
:root {
	--height-product-img-sm: 220px; /* gallery photo cap below 768px */
	--lh-title-sm:           1.2;   /* product h1 below 768px */
	--shadow-stickybar:      0 -10px 30px rgba( 0, 0, 0, .08 );
	--height-stickybar:      66px;  /* 10 + 46 + 10, footer clearance */
}

/* Mobile — homepage + product card */
:root {
	--text-badge-sm:   11px;      /* card "Doprava zdarma" badge below 768px */
	--text-price-sm:   23px;      /* card price below 768px */
	--ls-badge-sm:     .2px;      /* card shipping badge tracking below 768px */
	--height-hero-mascot-sm: 340px; /* hero mascot cap below 768px */
	--color-dot-idle:  #D9D9D4;   /* review carousel inactive dot */
}