@import url(https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap);
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-amber-500:oklch(76.9% .188 70.08);--color-blue-50:oklch(97% .014 254.604);--color-blue-600:oklch(54.6% .245 262.881);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-950:#2b312e;--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-5xl:64rem;--container-7xl:80rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-sm:.25rem;--radius-lg:.5rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-brand-accent:#080c0a;--color-brand-primary:#28e280;--color-brand-primary-alternative:#10934c;--color-brand-primary-hover:#1bc56b;--color-brand-secondary:#293a35;--color-brand-secondary-hover:#192421;--color-configurator-selector-background:#ebebea;--color-configurator-selector-border:#ebebea;--color-gray-0:#fff;--color-gray-025:#f7f8f7;--color-gray-05:#f2f3f2;--color-gray-075:#eaebea;--color-gray-1:#dfe2e0;--color-gray-10:#080c0a;--color-gray-2:#d5d7d6;--color-gray-3:#bec1bf;--color-gray-4:#9ca09e;--color-gray-5:#838785;--color-gray-6:#6e7270;--color-gray-7:#5d6561;--color-gray-8:#4d5651;--color-gray-9:#434c47;--color-gray-925:#353b38;--color-gray-975:#1b221e;--color-ui-error:#b50b0b;--color-ui-error-background:#f7eeee;--color-ui-error-hover:#d40b0b;--color-ui-success:#518c03;--color-ui-success-background:#f3f7ed;--color-ui-success-hover:#5ca003;--color-ui-warning:#e08700;--color-ui-warning-background:#f6f3ee;--color-ui-warning-hover:#f99908;--space-layout-padding:28px;--space-misc-hyperlink-to-icon:6px;--space-ui-large-l:64px;--space-ui-large-m:48px;--space-ui-large-s:32px;--space-ui-medium-l:24px;--space-ui-medium-m:20px;--space-ui-medium-s:12px;--space-ui-small-l:8px;--space-ui-small-m:4px;--space-ui-small-s:2px;--radius-button:2px;--radius-card:4px;--radius-drawer:12px;--radius-inner-radius:2px;--radius-input:2px;--radius-popup:4px;--border-input-width:1px;--typo-button-primary-font-size:14.8px;--typo-button-primary-line-height:24px;--typo-button-secondary-font-size:12.8px;--typo-button-secondary-line-height:24px;--typo-button-tertiary-font-size:12px;--typo-button-tertiary-line-height:24px;--typo-h1-editorial-font-size:40px;--typo-h1-editorial-line-height:64px;--typo-h1-font-size:32px;--typo-h1-line-height:44px;--typo-h2-editorial-font-size:36px;--typo-h2-editorial-line-height:48px;--typo-h2-font-size:24px;--typo-h2-line-height:36px;--typo-h3-font-size:20px;--typo-h3-line-height:32px;--typo-h4-font-size:14.8px;--typo-h4-line-height:26px;--typo-h5-font-size:12px;--typo-h5-line-height:18px;--typo-h6-font-size:11.2px;--typo-h6-line-height:16.8px;--typo-input-font-size:16px;--typo-input-line-height:20px;--typo-input-padding-bottom:8;--typo-input-padding-left:12;--typo-input-padding-right:8;--typo-input-padding-top:8;--typo-p-editorial-large-font-size:24px;--typo-p-editorial-large-line-height:28px;--typo-p-editorial-regular-font-size:16px;--typo-p-editorial-regular-line-height:28px;--typo-p-label-font-size:10px;--typo-p-label-line-height:12px;--typo-p-large-font-size:14.8px;--typo-p-large-line-height:26px;--typo-p-regular-font-size:13.2px;--typo-p-regular-line-height:24px;--typo-p-small-font-size:11.2px;--typo-p-small-line-height:16.8px;--transition-bezier:.25,.46,.45,.94;--transition-button:.4s;--transition-drawer:.5s;--transition-hyperlink:.3s;--transition-input:.25s;--configurator-color-radius:64;--configurator-color-radius-inner:64;--configurator-offset-space:4;--configurator-selector-font-size:12.8px;--configurator-size-radius:2}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing)*0)}.inset-\[-0\.86\%_-0\.87\%_-0\.86\%_-0\.86\%\]{inset:-.86% -.87% -.86% -.86%}.-top-1{top:calc(var(--spacing)*-1)}.top-0{top:calc(var(--spacing)*0)}.top-1{top:calc(var(--spacing)*1)}.top-1\/2{top:50%}.top-full{top:100%}.-right-1{right:calc(var(--spacing)*-1)}.right-0{right:calc(var(--spacing)*0)}.right-1{right:calc(var(--spacing)*1)}.bottom-0{bottom:calc(var(--spacing)*0)}.bottom-\[-1px\]{bottom:-1px}.left-0{left:calc(var(--spacing)*0)}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[200\]{z-index:200}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-\[var\(--space-ui-large-l\)\]{margin-top:var(--space-ui-large-l)}.mt-\[var\(--space-ui-small-m\)\]{margin-top:var(--space-ui-small-m)}.mt-\[var\(--space-ui-small-s\)\]{margin-top:var(--space-ui-small-s)}.mr-1{margin-right:calc(var(--spacing)*1)}.mr-3{margin-right:calc(var(--spacing)*3)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-5{margin-bottom:calc(var(--spacing)*5)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-\[var\(--space-ui-large-l\)\]{margin-bottom:var(--space-ui-large-l)}.mb-\[var\(--space-ui-large-m\)\]{margin-bottom:var(--space-ui-large-m)}.mb-\[var\(--space-ui-large-s\)\]{margin-bottom:var(--space-ui-large-s)}.mb-\[var\(--space-ui-medium-m\)\]{margin-bottom:var(--space-ui-medium-m)}.mb-\[var\(--space-ui-medium-s\)\]{margin-bottom:var(--space-ui-medium-s)}.mb-\[var\(--space-ui-small-l\)\]{margin-bottom:var(--space-ui-small-l)}.mb-\[var\(--space-ui-small-m\)\]{margin-bottom:var(--space-ui-small-m)}.mb-\[var\(--space-ui-small-s\)\]{margin-bottom:var(--space-ui-small-s)}.ml-1{margin-left:calc(var(--spacing)*1)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-auto{margin-left:auto}.box-border{box-sizing:border-box}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.h-1{height:calc(var(--spacing)*1)}.h-3\.5{height:calc(var(--spacing)*3.5)}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-7{height:calc(var(--spacing)*7)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-12{height:calc(var(--spacing)*12)}.h-16{height:calc(var(--spacing)*16)}.h-20{height:calc(var(--spacing)*20)}.h-24{height:calc(var(--spacing)*24)}.h-\[4px\]{height:4px}.h-\[32px\]{height:32px}.h-\[36px\]{height:36px}.h-\[48px\]{height:48px}.h-\[56px\]{height:56px}.h-auto{height:auto}.h-full{height:100%}.max-h-48{max-height:calc(var(--spacing)*48)}.max-h-\[70vh\]{max-height:70vh}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-screen{min-height:100vh}.w-0{width:calc(var(--spacing)*0)}.w-3\.5{width:calc(var(--spacing)*3.5)}.w-4{width:calc(var(--spacing)*4)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-11{width:calc(var(--spacing)*11)}.w-12{width:calc(var(--spacing)*12)}.w-16{width:calc(var(--spacing)*16)}.w-24{width:calc(var(--spacing)*24)}.w-32{width:calc(var(--spacing)*32)}.w-\[24px\]{width:24px}.w-\[36px\]{width:36px}.w-\[64px\]{width:64px}.w-\[393px\]{width:393px}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-\[92px\]{max-width:92px}.max-w-full{max-width:100%}.max-w-md{max-width:var(--container-md)}.max-w-xl{max-width:var(--container-xl)}.min-w-\[140px\]{min-width:140px}.flex-1{flex:1}.flex-none{flex:none}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.basis-0{flex-basis:calc(var(--spacing)*0)}.translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.rotate-180{rotate:180deg}.rotate-\[1deg\]{rotate:1deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-stretch{align-content:stretch}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-around{justify-content:space-around}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-2\.5{gap:calc(var(--spacing)*2.5)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-\[var\(--space-ui-large-m\)\]{gap:var(--space-ui-large-m)}.gap-\[var\(--space-ui-large-s\)\]{gap:var(--space-ui-large-s)}.gap-\[var\(--space-ui-medium-l\)\]{gap:var(--space-ui-medium-l)}.gap-\[var\(--space-ui-medium-m\)\]{gap:var(--space-ui-medium-m)}.gap-\[var\(--space-ui-medium-s\)\]{gap:var(--space-ui-medium-s)}.gap-\[var\(--space-ui-small-l\)\]{gap:var(--space-ui-small-l)}.gap-\[var\(--space-ui-small-m\)\]{gap:var(--space-ui-small-m)}.gap-\[var\(--space-ui-small-s\)\]{gap:var(--space-ui-small-s)}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-\[var\(--space-ui-large-s\)\]>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--space-ui-large-s)*var(--tw-space-y-reverse));margin-block-end:calc(var(--space-ui-large-s)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-\[var\(--space-ui-medium-s\)\]>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--space-ui-medium-s)*var(--tw-space-y-reverse));margin-block-end:calc(var(--space-ui-medium-s)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-1>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*1)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))}.overflow-clip{overflow:clip}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-\[12px\]{border-radius:12px}.rounded-\[12px_12px_0px_0px\]{border-radius:12px 12px 0 0}.rounded-\[var\(--radius-button\)\]{border-radius:var(--radius-button)}.rounded-\[var\(--radius-card\)\]{border-radius:var(--radius-card)}.rounded-\[var\(--radius-inner-radius\)\]{border-radius:var(--radius-inner-radius)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-t-\[var\(--radius-button\)\]{border-top-left-radius:var(--radius-button);border-top-right-radius:var(--radius-button)}.rounded-r-\[var\(--radius-card\)\]{border-top-right-radius:var(--radius-card);border-bottom-right-radius:var(--radius-card)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-\[0\.5px\]{border-style:var(--tw-border-style);border-width:.5px}.border-\[0\.5px_0px_0px\]{border-style:var(--tw-border-style);border-width:.5px 0 0}.border-\[0px_0px_1px\]{border-style:var(--tw-border-style);border-width:0 0 1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-solid{--tw-border-style:solid;border-style:solid}.border-\[\#0D0C07\]{border-color:#0d0c07}.border-\[\#060\]{border-color:#060}.border-\[\#E0E0DE\]{border-color:#e0e0de}.border-\[\#E2E1DF\]{border-color:#e2e1df}.border-\[\#c1c0be\]{border-color:#c1c0be}.border-\[\#e2e1df\]{border-color:#e2e1df}.border-\[\#ffcb00\]{border-color:#ffcb00}.border-\[var\(--color-brand-primary\)\]{border-color:var(--color-brand-primary)}.border-\[var\(--color-gray-1\)\]{border-color:var(--color-gray-1)}.border-\[var\(--color-gray-10\)\]{border-color:var(--color-gray-10)}.border-\[var\(--color-gray-025\)\]{border-color:var(--color-gray-025)}.border-\[var\(--color-ui-error\)\]{border-color:var(--color-ui-error)}.border-\[var\(--color-ui-success\)\]{border-color:var(--color-ui-success)}.border-\[var\(--color-ui-warning\)\]{border-color:var(--color-ui-warning)}.border-gray-0{border-color:var(--color-gray-0)}.border-gray-1{border-color:var(--color-gray-1)}.border-gray-10\/20{border-color:#080c0a33}@supports (color:color-mix(in lab, red, red)){.border-gray-10\/20{border-color:color-mix(in oklab,var(--color-gray-10)20%,transparent)}}.border-gray-500{border-color:var(--color-gray-500)}.border-t-transparent{border-top-color:#0000}.bg-\[\#0D0C07\]{background-color:#0d0c07}.bg-\[\#060\]{background-color:#060}.bg-\[\#72726E\]{background-color:#72726e}.bg-\[\#F3F3F2\]{background-color:#f3f3f2}.bg-\[\#F8F8F7\]{background-color:#f8f8f7}.bg-\[\#FFCB00\]{background-color:#ffcb00}.bg-\[\#ebebea\]{background-color:#ebebea}.bg-\[rgba\(255\,203\,0\,0\.24\)\]{background-color:#ffcb003d}.bg-\[var\(--color-brand-primary\)\]{background-color:var(--color-brand-primary)}.bg-\[var\(--color-brand-secondary\)\]{background-color:var(--color-brand-secondary)}.bg-\[var\(--color-gray-0\)\]{background-color:var(--color-gray-0)}.bg-\[var\(--color-gray-1\)\]{background-color:var(--color-gray-1)}.bg-\[var\(--color-gray-2\)\]{background-color:var(--color-gray-2)}.bg-\[var\(--color-gray-3\)\]{background-color:var(--color-gray-3)}.bg-\[var\(--color-gray-025\)\]{background-color:var(--color-gray-025)}.bg-\[var\(--color-gray-075\)\]{background-color:var(--color-gray-075)}.bg-\[var\(--color-ui-error-background\)\]{background-color:var(--color-ui-error-background)}.bg-\[var\(--color-ui-success\)\]{background-color:var(--color-ui-success)}.bg-\[var\(--color-ui-success-background\)\]{background-color:var(--color-ui-success-background)}.bg-\[var\(--color-ui-warning\)\]{background-color:var(--color-ui-warning)}.bg-\[var\(--color-ui-warning-background\)\]{background-color:var(--color-ui-warning-background)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-gray-0{background-color:var(--color-gray-0)}.bg-gray-025{background-color:var(--color-gray-025)}.bg-ui-error{background-color:var(--color-ui-error)}.bg-white{background-color:var(--color-white)}.object-contain{object-fit:contain}.p-1\.5{padding:calc(var(--spacing)*1.5)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.p-\[var\(--space-ui-large-s\)\]{padding:var(--space-ui-large-s)}.p-\[var\(--space-ui-medium-l\)\]{padding:var(--space-ui-medium-l)}.p-\[var\(--space-ui-medium-m\)\]{padding:var(--space-ui-medium-m)}.p-\[var\(--space-ui-medium-s\)\]{padding:var(--space-ui-medium-s)}.p-\[var\(--space-ui-small-l\)\]{padding:var(--space-ui-small-l)}.p-\[var\(--space-ui-small-m\)\]{padding:var(--space-ui-small-m)}.px-0{padding-inline:calc(var(--spacing)*0)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-\[24px\]{padding-inline:24px}.px-\[var\(--space-layout-padding\)\]{padding-inline:var(--space-layout-padding)}.px-\[var\(--space-ui-medium-m\)\]{padding-inline:var(--space-ui-medium-m)}.px-\[var\(--space-ui-medium-s\)\]{padding-inline:var(--space-ui-medium-s)}.px-\[var\(--space-ui-small-m\)\]{padding-inline:var(--space-ui-small-m)}.px-\[var\(--space-ui-small-s\)\]{padding-inline:var(--space-ui-small-s)}.py-0{padding-block:calc(var(--spacing)*0)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-\[1px\]{padding-block:1px}.py-\[14px\]{padding-block:14px}.py-\[var\(--space-ui-large-m\)\]{padding-block:var(--space-ui-large-m)}.py-\[var\(--space-ui-large-s\)\]{padding-block:var(--space-ui-large-s)}.py-\[var\(--space-ui-medium-s\)\]{padding-block:var(--space-ui-medium-s)}.py-\[var\(--space-ui-small-l\)\]{padding-block:var(--space-ui-small-l)}.py-\[var\(--space-ui-small-m\)\]{padding-block:var(--space-ui-small-m)}.py-\[var\(--space-ui-small-s\)\]{padding-block:var(--space-ui-small-s)}.pt-2{padding-top:calc(var(--spacing)*2)}.pt-4{padding-top:calc(var(--spacing)*4)}.pt-5{padding-top:calc(var(--spacing)*5)}.pt-7{padding-top:calc(var(--spacing)*7)}.pb-0{padding-bottom:calc(var(--spacing)*0)}.pb-3{padding-bottom:calc(var(--spacing)*3)}.pb-4{padding-bottom:calc(var(--spacing)*4)}.pb-6{padding-bottom:calc(var(--spacing)*6)}.pb-8{padding-bottom:calc(var(--spacing)*8)}.pb-\[28px\]{padding-bottom:28px}.pb-\[96px\]{padding-bottom:96px}.pb-\[116px\]{padding-bottom:116px}.pb-\[env\(safe-area-inset-bottom\,24px\)\]{padding-bottom:env(safe-area-inset-bottom,24px)}.text-center{text-align:center}.text-left{text-align:left}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-\[0px\]{font-size:0}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[12\.4px\]{font-size:12.4px}.text-\[12\.8px\]{font-size:12.8px}.text-\[12px\]{font-size:12px}.text-\[14px\]{font-size:14px}.text-\[15\.2px\]{font-size:15.2px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[24px\]{font-size:24px}.leading-\[0\]{--tw-leading:0;line-height:0}.leading-\[15px\]{--tw-leading:15px;line-height:15px}.leading-\[20px\]{--tw-leading:20px;line-height:20px}.leading-\[22px\]{--tw-leading:22px;line-height:22px}.leading-\[24px\]{--tw-leading:24px;line-height:24px}.leading-\[28px\]{--tw-leading:28px;line-height:28px}.leading-\[32px\]{--tw-leading:32px;line-height:32px}.leading-\[40px\]{--tw-leading:40px;line-height:40px}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-0\.96px\]{--tw-tracking:-.96px;letter-spacing:-.96px}.text-nowrap{text-wrap:nowrap}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre{white-space:pre}.text-\[\#0D0C07\],.text-\[\#0d0c07\]{color:#0d0c07}.text-\[\#060\]{color:#060}.text-\[\#65635D\]{color:#65635d}.text-\[\#FFF\]{color:#fff}.text-\[\#ffcb00\]{color:#ffcb00}.text-\[var\(--Color-Grays-Gray-8\,\#56554D\)\]{color:var(--Color-Grays-Gray-8,#56554d)}.text-\[var\(--Color-Grays-Gray-10\,\#0D0C07\)\]{color:var(--Color-Grays-Gray-10,#0d0c07)}.text-\[var\(--color-brand-accent\)\]{color:var(--color-brand-accent)}.text-\[var\(--color-brand-primary\)\]{color:var(--color-brand-primary)}.text-\[var\(--color-brand-secondary\)\]{color:var(--color-brand-secondary)}.text-\[var\(--color-gray-0\)\]{color:var(--color-gray-0)}.text-\[var\(--color-gray-4\)\]{color:var(--color-gray-4)}.text-\[var\(--color-gray-5\)\]{color:var(--color-gray-5)}.text-\[var\(--color-gray-6\)\]{color:var(--color-gray-6)}.text-\[var\(--color-gray-8\)\]{color:var(--color-gray-8)}.text-\[var\(--color-gray-10\)\]{color:var(--color-gray-10)}.text-\[var\(--color-ui-error\)\]{color:var(--color-ui-error)}.text-\[var\(--color-ui-success\)\]{color:var(--color-ui-success)}.text-\[var\(--color-ui-warning\)\]{color:var(--color-ui-warning)}.text-black{color:var(--color-black)}.text-blue-600{color:var(--color-blue-600)}.text-brand-secondary{color:var(--color-brand-secondary)}.text-gray-0{color:var(--color-gray-0)}.text-gray-7{color:var(--color-gray-7)}.text-gray-10{color:var(--color-gray-10)}.text-gray-100{color:var(--color-gray-100)}.text-gray-400{color:var(--color-gray-400)}.capitalize{text-transform:capitalize}.uppercase{text-transform:uppercase}.italic{font-style:italic}.not-italic{font-style:normal}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-75{opacity:.75}.opacity-100{opacity:1}.opacity-\[0\.5\]{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0px_0px_1px_0px_rgba\(13\,12\,7\,0\.12\)\,_0px_-4px_24px_0px_rgba\(13\,12\,7\,0\.12\)\,_1px_-2px_8px_0px_rgba\(13\,12\,7\,0\.08\)\]{--tw-shadow:0px 0px 1px 0px var(--tw-shadow-color,#0d0c071f),0px -4px 24px 0px var(--tw-shadow-color,#0d0c071f),1px -2px 8px 0px var(--tw-shadow-color,#0d0c0714);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0px_1px_2px_0px_rgba\(35\,33\,22\,0\.06\)\,0px_6px_20px_0px_rgba\(83\,81\,69\,0\.1\)\]{--tw-shadow:0px 1px 2px 0px var(--tw-shadow-color,#2321160f),0px 6px 20px 0px var(--tw-shadow-color,#5351451a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-blur-\[32px\]{--tw-backdrop-blur:blur(32px);-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}@media (hover:hover){.hover\:bg-\[var\(--color-gray-1\)\]:hover{background-color:var(--color-gray-1)}.hover\:bg-\[var\(--color-gray-025\)\]:hover{background-color:var(--color-gray-025)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:text-\[var\(--color-brand-primary-hover\)\]:hover{color:var(--color-brand-primary-hover)}.hover\:text-\[var\(--color-gray-10\)\]:hover{color:var(--color-gray-10)}.hover\:opacity-80:hover{opacity:.8}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}@media (min-width:40rem){.sm\:hidden{display:none}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}@media (min-width:48rem){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:opacity-\[0\]{opacity:0}@media (hover:hover){.md\:hover\:border-\[0\.5px\]:hover{border-style:var(--tw-border-style);border-width:.5px}.md\:hover\:border-\[\#090\]:hover{border-color:#090}.md\:hover\:bg-\[\#090\]:hover{background-color:#090}.md\:hover\:bg-\[\#F8F8F7\]:hover{background-color:#f8f8f7}.md\:hover\:bg-\[\#FFCB00\]\/90:hover{background-color:oklab(86.3269% .000268847 .176412/.9)}.md\:hover\:bg-gray-1:hover{background-color:var(--color-gray-1)}.md\:hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.md\:hover\:text-amber-500:hover{color:var(--color-amber-500)}.md\:hover\:opacity-70:hover{opacity:.7}}}@media (min-width:64rem){.lg\:w-48{width:calc(var(--spacing)*48)}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:items-baseline{align-items:baseline}}.font-titleh1-editorial,.typo-h1-editorial{font-family:var(--font-editorial);font-size:var(--typo-h1-editorial-font-size);line-height:var(--typo-h1-editorial-line-height);font-weight:var(--font-weight-medium,500)}.font-titleh2-editorial,.typo-h2-editorial{font-family:var(--font-editorial);font-size:var(--typo-h2-editorial-font-size);line-height:var(--typo-h2-editorial-line-height);font-weight:var(--font-weight-medium,500)}.font-titleh1,.typo-h1{font-family:var(--font-ui);font-size:var(--typo-h1-font-size);line-height:var(--typo-h1-line-height);font-weight:var(--font-weight-medium,500)}.font-titleh2,.typo-h2{font-family:var(--font-ui);font-size:var(--typo-h2-font-size);line-height:var(--typo-h2-line-height);font-weight:var(--font-weight-medium,500)}.font-titleh3,.typo-h3{font-family:var(--font-ui);font-size:var(--typo-h3-font-size);line-height:var(--typo-h3-line-height);font-weight:var(--font-weight-medium,500)}.font-titleh4,.typo-h4{font-family:var(--font-ui);font-size:var(--typo-h4-font-size);line-height:var(--typo-h4-line-height);font-weight:var(--font-weight-medium,500)}.font-titleh5,.typo-h5{font-family:var(--font-ui);font-size:var(--typo-h5-font-size);line-height:var(--typo-h5-line-height);font-weight:var(--font-weight-medium,500);text-transform:uppercase}.font-titleh6,.typo-h6{font-family:var(--font-ui);font-size:var(--typo-h6-font-size);line-height:var(--typo-h6-line-height);font-weight:var(--font-weight-medium,500);text-transform:uppercase}.font-paragraphpeditorial-regular,.typo-body-editorial{font-family:var(--font-editorial);font-size:var(--typo-p-editorial-regular-font-size);line-height:var(--typo-p-editorial-regular-line-height);font-weight:var(--font-weight-normal,400)}.font-paragraphpeditorial-large,.typo-body-editorial-lg{font-family:var(--font-editorial);font-size:var(--typo-p-editorial-large-font-size);line-height:var(--typo-p-editorial-large-line-height);font-weight:var(--font-weight-normal,400)}.font-paragraphplarge,.typo-body-lg{font-family:var(--font-ui);font-size:var(--typo-p-large-font-size);line-height:var(--typo-p-large-line-height);font-weight:var(--font-weight-normal,400)}.font-paragraphpregular,.typo-body{font-family:var(--font-ui);font-size:var(--typo-p-regular-font-size);line-height:var(--typo-p-regular-line-height);font-weight:var(--font-weight-normal,400)}.font-paragraphpsmall,.typo-body-sm{font-family:var(--font-ui);font-size:var(--typo-p-small-font-size);line-height:var(--typo-p-small-line-height);font-weight:var(--font-weight-normal,400)}.font-paragraphplabel,.typo-label{font-family:var(--font-ui);font-size:var(--typo-p-label-font-size);line-height:var(--typo-p-label-line-height);font-weight:var(--font-weight-normal,400)}.font-hyperlinkaeditorial-large,.typo-link-editorial-lg,.font-hyperlinkaeditorial-regular,.typo-link-editorial{font-family:var(--font-ui);font-size:var(--typo-p-editorial-regular-font-size);line-height:var(--typo-p-editorial-regular-line-height);font-weight:var(--font-weight-medium,500)}.font-hyperlinkalarge,.typo-link-lg{font-family:var(--font-ui);font-size:var(--typo-p-large-font-size);line-height:var(--typo-p-large-line-height);font-weight:var(--font-weight-medium,500)}.font-hyperlinkaregular,.typo-link{font-family:var(--font-ui);font-size:var(--typo-p-regular-font-size);line-height:var(--typo-p-regular-line-height);font-weight:var(--font-weight-medium,500)}.font-hyperlinkasmall,.typo-link-sm{font-family:var(--font-ui);font-size:var(--typo-p-small-font-size);line-height:var(--typo-p-small-line-height);font-weight:var(--font-weight-medium,500)}.font-buttonprimary,.typo-btn,.typo-btn-primary{font-family:var(--font-ui);font-size:var(--typo-button-primary-font-size);line-height:var(--typo-button-primary-line-height);font-weight:var(--font-weight-medium,500)}.font-buttonsecondary,.typo-btn-secondary{font-family:var(--font-ui);font-size:var(--typo-button-secondary-font-size);line-height:var(--typo-button-secondary-line-height);font-weight:var(--font-weight-medium,500);text-transform:uppercase}.font-buttontertiary,.typo-btn-tertiary{font-family:var(--font-ui);font-size:var(--typo-button-tertiary-font-size);line-height:var(--typo-button-tertiary-line-height);font-weight:var(--font-weight-medium,500);text-transform:uppercase}.font-inputvalue,.typo-input{font-family:var(--font-ui);font-size:var(--typo-input-font-size);line-height:var(--typo-input-line-height);font-weight:var(--font-weight-medium,500)}.font-inputplaceholder,.typo-input-placeholder{font-family:var(--font-ui);font-size:var(--typo-input-font-size);line-height:var(--typo-input-line-height);font-weight:var(--font-weight-normal,400)}.min-h-safe-screen{min-height:calc((var(--vh,1vh)*100) - var(--header-height));box-sizing:border-box;height:auto}.h-safe-screen{height:calc(var(--vh,1vh)*100)}.pt-small-s{padding-top:var(--space-ui-small-s)}.pt-small-m{padding-top:var(--space-ui-small-m)}.pt-small-l{padding-top:var(--space-ui-small-l)}.pt-medium-s{padding-top:var(--space-ui-medium-s)}.pt-medium-m{padding-top:var(--space-ui-medium-m)}.pt-medium-l{padding-top:var(--space-ui-medium-l)}.pt-large-s{padding-top:var(--space-ui-large-s)}.pt-large-m{padding-top:var(--space-ui-large-m)}.pt-large-l{padding-top:var(--space-ui-large-l)}.pb-small-s{padding-bottom:var(--space-ui-small-s)}.pb-small-m{padding-bottom:var(--space-ui-small-m)}.pb-small-l{padding-bottom:var(--space-ui-small-l)}.pb-medium-s{padding-bottom:var(--space-ui-medium-s)}.pb-medium-m{padding-bottom:var(--space-ui-medium-m)}.pb-medium-l{padding-bottom:var(--space-ui-medium-l)}.pb-large-s{padding-bottom:var(--space-ui-large-s)}.pb-large-m{padding-bottom:var(--space-ui-large-m)}.pb-large-l{padding-bottom:var(--space-ui-large-l)}.py-small-s{padding-top:var(--space-ui-small-s);padding-bottom:var(--space-ui-small-s)}.py-small-m{padding-top:var(--space-ui-small-m);padding-bottom:var(--space-ui-small-m)}.py-small-l{padding-top:var(--space-ui-small-l);padding-bottom:var(--space-ui-small-l)}.py-medium-s{padding-top:var(--space-ui-medium-s);padding-bottom:var(--space-ui-medium-s)}.py-medium-m{padding-top:var(--space-ui-medium-m);padding-bottom:var(--space-ui-medium-m)}.py-medium-l{padding-top:var(--space-ui-medium-l);padding-bottom:var(--space-ui-medium-l)}.py-large-s{padding-top:var(--space-ui-large-s);padding-bottom:var(--space-ui-large-s)}.py-large-m{padding-top:var(--space-ui-large-m);padding-bottom:var(--space-ui-large-m)}.py-large-l{padding-top:var(--space-ui-large-l);padding-bottom:var(--space-ui-large-l)}.px-small-s{padding-left:var(--space-ui-small-s);padding-right:var(--space-ui-small-s)}.px-small-m{padding-left:var(--space-ui-small-m);padding-right:var(--space-ui-small-m)}.px-small-l{padding-left:var(--space-ui-small-l);padding-right:var(--space-ui-small-l)}.px-medium-s{padding-left:var(--space-ui-medium-s);padding-right:var(--space-ui-medium-s)}.px-medium-m{padding-left:var(--space-ui-medium-m);padding-right:var(--space-ui-medium-m)}.px-medium-l{padding-left:var(--space-ui-medium-l);padding-right:var(--space-ui-medium-l)}.px-large-s{padding-left:var(--space-ui-large-s);padding-right:var(--space-ui-large-s)}.px-large-m{padding-left:var(--space-ui-large-m);padding-right:var(--space-ui-large-m)}.px-large-l{padding-left:var(--space-ui-large-l);padding-right:var(--space-ui-large-l)}.pl-small-s{padding-left:var(--space-ui-small-s)}.pl-small-m{padding-left:var(--space-ui-small-m)}.pl-small-l{padding-left:var(--space-ui-small-l)}.pl-medium-s{padding-left:var(--space-ui-medium-s)}.pl-medium-m{padding-left:var(--space-ui-medium-m)}.pl-medium-l{padding-left:var(--space-ui-medium-l)}.pl-large-s{padding-left:var(--space-ui-large-s)}.pl-large-m{padding-left:var(--space-ui-large-m)}.pl-large-l{padding-left:var(--space-ui-large-l)}.pr-small-s{padding-right:var(--space-ui-small-s)}.pr-small-m{padding-right:var(--space-ui-small-m)}.pr-small-l{padding-right:var(--space-ui-small-l)}.pr-medium-s{padding-right:var(--space-ui-medium-s)}.pr-medium-m{padding-right:var(--space-ui-medium-m)}.pr-medium-l{padding-right:var(--space-ui-medium-l)}.pr-large-s{padding-right:var(--space-ui-large-s)}.pr-large-m{padding-right:var(--space-ui-large-m)}.pr-large-l{padding-right:var(--space-ui-large-l)}.mt-small-s{margin-top:var(--space-ui-small-s)}.mt-small-m{margin-top:var(--space-ui-small-m)}.mt-small-l{margin-top:var(--space-ui-small-l)}.mt-medium-s{margin-top:var(--space-ui-medium-s)}.mt-medium-m{margin-top:var(--space-ui-medium-m)}.mt-medium-l{margin-top:var(--space-ui-medium-l)}.mt-large-s{margin-top:var(--space-ui-large-s)}.mt-large-m{margin-top:var(--space-ui-large-m)}.mt-large-l{margin-top:var(--space-ui-large-l)}.mb-small-s{margin-bottom:var(--space-ui-small-s)}.mb-small-m{margin-bottom:var(--space-ui-small-m)}.mb-small-l{margin-bottom:var(--space-ui-small-l)}.mb-medium-s{margin-bottom:var(--space-ui-medium-s)}.mb-medium-m{margin-bottom:var(--space-ui-medium-m)}.mb-medium-l{margin-bottom:var(--space-ui-medium-l)}.mb-large-s{margin-bottom:var(--space-ui-large-s)}.mb-large-m{margin-bottom:var(--space-ui-large-m)}.mb-large-l{margin-bottom:var(--space-ui-large-l)}.gap-small-s{gap:var(--space-ui-small-s)}.gap-small-m{gap:var(--space-ui-small-m)}.gap-small-l{gap:var(--space-ui-small-l)}.gap-medium-s{gap:var(--space-ui-medium-s)}.gap-medium-m{gap:var(--space-ui-medium-m)}.gap-medium-l{gap:var(--space-ui-medium-l)}.gap-large-s{gap:var(--space-ui-large-s)}.gap-large-m{gap:var(--space-ui-large-m)}.gap-large-l{gap:var(--space-ui-large-l)}}:root[data-brand=CLS]{--font-editorial:"Neue Haas Unica W1G",sans-serif;--font-font-family-editorial:"Neue Haas Unica W1G",sans-serif;--font-font-family-ui:"Neue Haas Unica W1G",sans-serif;--font-ui:"Neue Haas Unica W1G",sans-serif;--font-weight-bold:700;--font-weight-medium:500;--font-weight-normal:400;--color-brand-accent:#080c0a;--color-brand-primary:#28e280;--color-brand-primary-alternative:#10934c;--color-brand-primary-hover:#1bc56b;--color-brand-secondary:#293a35;--color-brand-secondary-hover:#192421;--color-configurator-selector-background:#ebebea;--color-configurator-selector-border:#ebebea;--color-gray-0:#fff;--color-gray-025:#f7f8f7;--color-gray-05:#f2f3f2;--color-gray-075:#eaebea;--color-gray-1:#dfe2e0;--color-gray-10:#080c0a;--color-gray-2:#d5d7d6;--color-gray-3:#bec1bf;--color-gray-4:#9ca09e;--color-gray-5:#838785;--color-gray-6:#6e7270;--color-gray-7:#5d6561;--color-gray-8:#4d5651;--color-gray-9:#434c47;--color-gray-925:#353b38;--color-gray-950:#2b312e;--color-gray-975:#1b221e;--color-ui-error:#b50b0b;--color-ui-error-background:#f7eeee;--color-ui-error-hover:#d40b0b;--color-ui-success:#518c03;--color-ui-success-background:#f3f7ed;--color-ui-success-hover:#5ca003;--color-ui-warning:#e08700;--color-ui-warning-background:#f6f3ee;--color-ui-warning-hover:#f99908;--space-layout-padding:28px;--space-misc-hyperlink-to-icon:6px;--space-ui-large-l:64px;--space-ui-large-m:48px;--space-ui-large-s:32px;--space-ui-medium-l:24px;--space-ui-medium-m:20px;--space-ui-medium-s:12px;--space-ui-small-l:8px;--space-ui-small-m:4px;--space-ui-small-s:2px;--radius-button:2px;--radius-card:4px;--radius-drawer:12px;--radius-inner-radius:2px;--radius-input:2px;--radius-popup:4px;--border-input-width:1px;--typo-button-primary-font-size:14.8px;--typo-button-primary-line-height:24px;--typo-button-secondary-font-size:12.8px;--typo-button-secondary-line-height:24px;--typo-button-tertiary-font-size:12px;--typo-button-tertiary-line-height:24px;--typo-h1-editorial-font-size:40px;--typo-h1-editorial-line-height:64px;--typo-h1-font-size:32px;--typo-h1-line-height:44px;--typo-h2-editorial-font-size:36px;--typo-h2-editorial-line-height:48px;--typo-h2-font-size:24px;--typo-h2-line-height:36px;--typo-h3-font-size:20px;--typo-h3-line-height:32px;--typo-h4-font-size:14.8px;--typo-h4-line-height:26px;--typo-h5-font-size:12px;--typo-h5-line-height:18px;--typo-h6-font-size:11.2px;--typo-h6-line-height:16.8px;--typo-input-font-size:16px;--typo-input-line-height:20px;--typo-input-padding-bottom:8;--typo-input-padding-left:12;--typo-input-padding-right:8;--typo-input-padding-top:8;--typo-p-editorial-large-font-size:24px;--typo-p-editorial-large-line-height:28px;--typo-p-editorial-regular-font-size:16px;--typo-p-editorial-regular-line-height:28px;--typo-p-label-font-size:10px;--typo-p-label-line-height:12px;--typo-p-large-font-size:14.8px;--typo-p-large-line-height:26px;--typo-p-regular-font-size:13.2px;--typo-p-regular-line-height:24px;--typo-p-small-font-size:11.2px;--typo-p-small-line-height:16.8px;--transition-bezier:.25,.46,.45,.94;--transition-button:.4s;--transition-drawer:.5s;--transition-hyperlink:.3s;--transition-input:.25s;--configurator-color-radius:64;--configurator-color-radius-inner:64;--configurator-offset-space:4;--configurator-selector-font-size:12.8px;--configurator-size-radius:2}@media (min-width:1024px){:root[data-brand=CLS]{--color-gray-075:#ebebea;--space-layout-padding:40px;--space-ui-large-l:96px;--space-ui-large-m:64px;--space-ui-large-s:48px;--space-ui-medium-l:32px;--space-ui-medium-m:24px;--space-ui-medium-s:16px;--space-ui-small-l:12px;--space-ui-small-m:8px;--space-ui-small-s:4px;--typo-h1-editorial-font-size:56px;--typo-h1-editorial-line-height:84px;--typo-h1-font-size:40px;--typo-h1-line-height:56px;--typo-h2-editorial-font-size:40px;--typo-h2-editorial-line-height:56px;--typo-h2-font-size:32px;--typo-h2-line-height:44px;--typo-h3-font-size:24px;--typo-h3-line-height:36px;--typo-h4-font-size:16px;--typo-h4-line-height:28px;--typo-h5-font-size:14px;--typo-h5-line-height:22px;--typo-h6-font-size:12px;--typo-h6-line-height:18px;--typo-input-font-size:14.8px;--typo-p-editorial-large-font-size:32px;--typo-p-editorial-large-line-height:48px;--typo-p-editorial-regular-font-size:18px;--typo-p-editorial-regular-line-height:32px;--typo-p-large-font-size:16px;--typo-p-large-line-height:28px;--typo-p-regular-font-size:14px;--typo-p-small-font-size:12px;--typo-p-small-line-height:18px}}:root[data-brand=ABC]{--font-editorial:"Superior Title",Georgia,serif;--font-font-family-editorial:"Superior Title Black",sans-serif;--font-font-family-ui:"Manrope",sans-serif;--font-ui:"Manrope",system-ui,sans-serif;--font-weight-bold:700;--font-weight-medium:600;--font-weight-normal:400;--color-brand-accent:#fff;--color-brand-primary:#213469;--color-brand-primary-alternative:#264c9c;--color-brand-primary-hover:#4566c4;--color-brand-secondary:#e2bb5c;--color-brand-secondary-hover:#daa82f;--color-configurator-selector-background:#fff;--color-configurator-selector-border:#bebfc1;--color-gray-0:#fff;--color-gray-025:#f7f7f8;--color-gray-05:#f2f2f3;--color-gray-075:#eaeaeb;--color-gray-1:#dfe0e2;--color-gray-10:#08090c;--color-gray-2:#d5d6d7;--color-gray-3:#bebfc1;--color-gray-4:#9c9da0;--color-gray-5:#838487;--color-gray-6:#6e6f72;--color-gray-7:#5d5f65;--color-gray-8:#4d4f56;--color-gray-9:#43454c;--color-gray-925:#35363b;--color-gray-950:#2b2d31;--color-gray-975:#1b1d22;--color-ui-error:#b50b0b;--color-ui-error-background:#f7eeee;--color-ui-error-hover:#d40b0b;--color-ui-success:#518c03;--color-ui-success-background:#f3f7ed;--color-ui-success-hover:#5ca003;--color-ui-warning:#e08700;--color-ui-warning-background:#f6f3ee;--color-ui-warning-hover:#f99908;--space-layout-padding:28px;--space-misc-hyperlink-to-icon:6px;--space-ui-large-l:64px;--space-ui-large-m:48px;--space-ui-large-s:32px;--space-ui-medium-l:24px;--space-ui-medium-m:20px;--space-ui-medium-s:12px;--space-ui-small-l:8px;--space-ui-small-m:4px;--space-ui-small-s:2px;--radius-button:6px;--radius-card:12px;--radius-drawer:20px;--radius-inner-radius:6px;--radius-input:6px;--radius-popup:12px;--border-input-width:1px;--typo-button-primary-font-size:14.8px;--typo-button-primary-line-height:24px;--typo-button-secondary-font-size:12.8px;--typo-button-secondary-line-height:24px;--typo-button-tertiary-font-size:12px;--typo-button-tertiary-line-height:24px;--typo-h1-editorial-font-size:40px;--typo-h1-editorial-line-height:64px;--typo-h1-font-size:32px;--typo-h1-line-height:44px;--typo-h2-editorial-font-size:36px;--typo-h2-editorial-line-height:48px;--typo-h2-font-size:24px;--typo-h2-line-height:36px;--typo-h3-font-size:20px;--typo-h3-line-height:32px;--typo-h4-font-size:14.8px;--typo-h4-line-height:26px;--typo-h5-font-size:12px;--typo-h5-line-height:18px;--typo-h6-font-size:11.2px;--typo-h6-line-height:16.8px;--typo-input-font-size:16px;--typo-input-line-height:20px;--typo-input-padding-bottom:8;--typo-input-padding-left:12;--typo-input-padding-right:8;--typo-input-padding-top:8;--typo-p-editorial-large-font-size:24px;--typo-p-editorial-large-line-height:28px;--typo-p-editorial-regular-font-size:16px;--typo-p-editorial-regular-line-height:28px;--typo-p-label-font-size:10px;--typo-p-label-line-height:12px;--typo-p-large-font-size:14.8px;--typo-p-large-line-height:26px;--typo-p-regular-font-size:13.2px;--typo-p-regular-line-height:24px;--typo-p-small-font-size:11.2px;--typo-p-small-line-height:16.8px;--transition-bezier:.25,.46,.45,.94;--transition-button:.4s;--transition-drawer:.5s;--transition-hyperlink:.3s;--transition-input:.25s;--configurator-color-radius:6;--configurator-color-radius-inner:4;--configurator-offset-space:4;--configurator-selector-font-size:12.8px;--configurator-size-radius:6}@media (min-width:1024px){:root[data-brand=ABC]{--space-layout-padding:40px;--space-ui-large-l:96px;--space-ui-large-m:64px;--space-ui-large-s:48px;--space-ui-medium-l:32px;--space-ui-medium-m:24px;--space-ui-medium-s:16px;--space-ui-small-l:12px;--space-ui-small-m:8px;--space-ui-small-s:4px;--typo-h1-editorial-font-size:56px;--typo-h1-editorial-line-height:84px;--typo-h1-font-size:40px;--typo-h1-line-height:56px;--typo-h2-editorial-font-size:40px;--typo-h2-editorial-line-height:56px;--typo-h2-font-size:32px;--typo-h2-line-height:44px;--typo-h3-font-size:24px;--typo-h3-line-height:36px;--typo-h4-font-size:16px;--typo-h4-line-height:28px;--typo-h5-font-size:14px;--typo-h5-line-height:22px;--typo-h6-font-size:12px;--typo-h6-line-height:18px;--typo-input-font-size:14.8px;--typo-p-editorial-large-font-size:32px;--typo-p-editorial-large-line-height:48px;--typo-p-editorial-regular-font-size:18px;--typo-p-editorial-regular-line-height:32px;--typo-p-large-font-size:16px;--typo-p-large-line-height:28px;--typo-p-regular-font-size:14px;--typo-p-small-font-size:12px;--typo-p-small-line-height:18px}}:root{--vh:1vh;--header-height:48px;--layout-content-max-width:1360px;--layout-padding-desktop:40px;--layout-padding-mobile:28px;--layout-max-width:calc(var(--layout-content-max-width) + var(--layout-padding-desktop)*2)}*,:before,:after{box-sizing:border-box}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;min-height:100%}body{min-height:100%;margin:0;padding:0;position:relative}.drawer-overlay{transition:opacity .3s cubic-bezier(.25,.46,.45,.94)}.drawer-content{transition:transform .3s cubic-bezier(.25,.46,.45,.94)}.drawer-slide-enter{transform:translateY(100%)}.drawer-slide-enter-active{transition:transform .3s cubic-bezier(.25,.46,.45,.94);transform:translateY(0)}.drawer-slide-exit{transform:translateY(0)}.drawer-slide-exit-active{transition:transform .3s cubic-bezier(.25,.46,.45,.94);transform:translateY(100%)}.drawer-enter{transform:translateY(100%)}.drawer-enter-active,.drawer-exit{transform:translateY(0)}.drawer-exit-active{transform:translateY(100%)}@keyframes fadeIn{0%{opacity:0;background-color:#dbeafe;transform:translateY(10px)}to{opacity:1;background-color:#f9fafb;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.3s ease-in forwards fadeIn}.animate-slide-in{animation:.3s ease-out forwards slideIn}.animate-slide-up{animation:.3s ease-out forwards slideUp}.animate-fadeIn{animation:1s ease-out fadeIn}.product-list-overlay{z-index:99999!important;position:fixed!important}.grocery-list-header{border-bottom:1px solid #eaeaea;justify-content:space-between;align-items:center;padding:16px;display:flex}.grocery-list-header h2{margin:0;font-size:18px;font-weight:700}.grocery-list-tabs{background-color:#fff;border-bottom:1px solid #eaeaea;padding:8px;display:flex}.grocery-tab{cursor:pointer;border-radius:9999px;align-items:center;padding:8px 12px;transition:background-color .2s;display:flex}.grocery-tab:hover,.grocery-tab-active{background-color:#f3f4f6}.grocery-tab-count{background-color:#e5e7eb;border-radius:9999px;margin-left:4px;padding:0 4px;font-size:12px}.grocery-list-content{flex:1;padding:8px;overflow-y:auto}.grocery-category{background-color:#f9fafb;border-radius:8px;margin-bottom:16px;padding:12px}.grocery-category-header{align-items:center;margin-bottom:8px;display:flex}.grocery-category-icon{margin-right:8px;font-size:18px}.grocery-category-title{font-size:16px;font-weight:600}.grocery-items{flex-direction:column;gap:12px;display:flex}.grocery-item{background-color:#fff;border-radius:8px;align-items:center;padding:12px;display:flex;box-shadow:0 1px 2px #0000000d}.grocery-item-image{background-color:#f3f4f6;border-radius:6px;width:40px;height:40px;margin-right:12px;overflow:hidden}.grocery-item-image img{object-fit:cover;width:100%;height:100%}.grocery-item-info{flex:1}.grocery-item-name{margin-bottom:2px;font-weight:500}.grocery-item-quantity{color:#6b7280;margin-bottom:2px;font-size:14px}.grocery-item-price{color:#1f2937;font-size:14px}.grocery-item-button{cursor:pointer;border-radius:4px;padding:6px 10px;font-size:12px;transition:all .2s}.grocery-item-button-need{color:#4b5563;background-color:#f3f4f6}.grocery-item-button-have{color:#065f46;background-color:#d1fae5}.grocery-footer{background-color:#fff;border-top:1px solid #eaeaea;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.grocery-total{font-weight:600}.grocery-average{color:#6b7280;font-size:14px}.grocery-loading{flex-direction:column;justify-content:center;align-items:center;padding:32px;display:flex}.grocery-spinner{border:4px solid #e5e7eb;border-top-color:#f59e0b;border-radius:50%;width:48px;height:48px;margin-bottom:16px;animation:1s linear infinite spin}.grocery-progress-bar{background-color:#e5e7eb;border-radius:4px;width:100%;max-width:320px;height:8px;margin-top:16px;overflow:hidden}.grocery-progress-value{background-color:#f59e0b;border-radius:4px;height:100%;transition:width .3s}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:640px){.grocery-list-panel{max-width:100%}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}

/* =============================================================================
 * ProjectsPage — Landing page with project cards
 * ============================================================================= */

.projects-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-0);
  padding: var(--space-ui-large-m) var(--space-layout-padding);
}

.projects-page__inner {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-ui-medium-m);
}

.projects-page__title {
  color: var(--color-gray-10);
  text-align: center;
}

.projects-page__subtitle {
  color: var(--color-gray-5);
  text-align: center;
  margin-top: calc(var(--space-ui-small-m) * -1);
}

.projects-page__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-ui-medium-s);
  width: 100%;
  margin-top: var(--space-ui-medium-m);
}

@media (min-width: 640px) {
  .projects-page__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.projects-page__card {
  display: flex;
  align-items: center;
  gap: var(--space-ui-medium-s);
  padding: var(--space-ui-medium-m) var(--space-ui-medium-l);
  background: var(--color-gray-0);
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-card);
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--transition-button) cubic-bezier(var(--transition-bezier)),
    box-shadow var(--transition-button) cubic-bezier(var(--transition-bezier));
}

.projects-page__card:hover {
  border-color: var(--color-gray-5);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.projects-page__card:active {
  border-color: var(--color-brand-primary);
}

.projects-page__flag {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}

.projects-page__card-label {
  color: var(--color-gray-10);
  flex: 1;
  min-width: 0;
}

.projects-page__card-country {
  color: var(--color-gray-5);
  flex-shrink: 0;
}

.projects-page__ds-link {
  margin-top: var(--space-ui-medium-m);
  color: var(--color-gray-5);
  transition: color var(--transition-hyperlink) cubic-bezier(var(--transition-bezier));
}

.projects-page__ds-link:hover {
  color: var(--color-gray-10);
}

/* =============================================================================
 * Hyperlink Component Styles
 * Uses design system typography classes and CSS variables from tokens
 * ============================================================================= */

/* =============================================================================
 * CSS Custom Properties for Hyperlink states
 * ============================================================================= */
.hyperlink {
  /* State colors - synced from Figma (node 19:133) */
  --hyperlink-color-default: var(--color-gray-10);      /* #080c0a */
  --hyperlink-color-hover: var(--color-brand-primary-alternative); /* #10934c */
  --hyperlink-color-focus: var(--color-gray-950);         /* #2b312e */
  --hyperlink-color-disabled: var(--color-gray-5);      /* #838785 */
  
  /* Transition settings - synced from Figma tokens */
  --hyperlink-transition-duration: var(--transition-hyperlink, 250ms);
  --hyperlink-transition-timing: cubic-bezier(var(--transition-bezier, 0.22, 1, 0.36, 1));
  --hyperlink-underline-transition: var(--transition-hyperlink, 250ms);
}

/* =============================================================================
 * Base Hyperlink Styles
 * ============================================================================= */
.hyperlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-misc-hyperlink-to-icon, 6px);
  position: relative;
  text-decoration: none;
  cursor: pointer;
  
  /* Default state color */
  color: var(--hyperlink-color-default);
  
  /* Smooth transitions */
  transition: 
    color var(--hyperlink-transition-duration) var(--hyperlink-transition-timing);
}

/* =============================================================================
 * Text Element (inherits typography from parent via class)
 * ============================================================================= */
.hyperlink__text {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /* Match icon height for perfect vertical alignment */
  min-height: 20px;
}

/* =============================================================================
 * Icon Container
 * ============================================================================= */
.hyperlink__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.hyperlink__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  transition: 
    stroke var(--hyperlink-transition-duration) var(--hyperlink-transition-timing);
}

/* =============================================================================
 * Underline (for variants with animated underline)
 * ============================================================================= */
.hyperlink__underline {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: currentColor;
  
  /* Hidden by default, animates in on hover */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--hyperlink-underline-transition) var(--hyperlink-transition-timing);
}

/* Show underline on hover for variants with underline (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .hyperlink--has-underline:hover .hyperlink__underline,
  .hyperlink--has-underline:focus .hyperlink__underline {
    transform: scaleX(1);
  }
}

/* =============================================================================
 * Interactive States
 * ============================================================================= */

/* Visited state - same as default */
.hyperlink:visited:not(.hyperlink--disabled) {
  color: var(--hyperlink-color-default);
}

/* Hover state (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .hyperlink:hover:not(.hyperlink--disabled) {
    color: var(--hyperlink-color-hover);
  }
}

/* Focus state */
.hyperlink:focus:not(.hyperlink--disabled) {
  color: var(--hyperlink-color-focus);
  outline: none;
}

/* Focus visible for keyboard navigation */
.hyperlink:focus-visible {
  outline: 2px solid var(--hyperlink-color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-button);
}

/* Disabled state */
.hyperlink--disabled {
  color: var(--hyperlink-color-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.hyperlink--disabled .hyperlink__underline {
  display: none;
}

/* =============================================================================
 * Variant: Small - smaller icon
 * ============================================================================= */
.hyperlink--small .hyperlink__icon {
  width: 16px;
  height: 16px;
}

/* =============================================================================
 * Variant: Editorial Large - special underline animation
 * ============================================================================= */
.hyperlink--editorial-large .hyperlink__underline {
  transform-origin: right center;
}

@media (hover: hover) and (pointer: fine) {
  .hyperlink--editorial-large:hover .hyperlink__underline,
  .hyperlink--editorial-large:focus .hyperlink__underline {
    transform-origin: left center;
  }
}

/* =============================================================================
 * Variant: Label - smaller gap and icon
 * ============================================================================= */
.hyperlink--label {
  gap: 6px;
}

.hyperlink--label .hyperlink__icon {
  width: 16px;
  height: 16px;
}

/* =============================================================================
 * Button Component Styles
 * Uses design system tokens from Figma
 * 
 * Figma nodes:
 * - Primary (Large): 3617:488
 * - Secondary (Medium): 3617:707
 * - Tertiary (Small): 3617:926
 * ============================================================================= */

/* =============================================================================
 * CSS Custom Properties
 * ============================================================================= */
.button {
  /* Base colors - synced from Figma */
  --button-bg-main: var(--color-brand-primary);                /* #28e280 CLS / #213469 ABC */
  --button-bg-main-hover: var(--color-brand-primary-hover);    /* #1bc56b CLS / #4566c4 ABC */
  --button-bg-alternative: var(--color-ui-success);             /* #518c03 — from Figma node 3617:534 */
  --button-bg-alternative-hover: var(--color-ui-success-hover);  /* #5ca003 */
  --button-bg-danger: var(--color-ui-error);                   /* #b50b0b */
  --button-bg-danger-hover: var(--color-ui-error-hover);       /* #d40b0b */
  --button-bg-black: var(--color-gray-10);                     /* #080c0a */
  --button-bg-black-hover: var(--color-gray-9);                /* #434c47 */
  --button-bg-white: var(--color-gray-0);                      /* #ffffff */
  --button-bg-gray: var(--color-gray-1);                       /* #d5d7d6 */
  --button-bg-gray-hover: var(--color-gray-2);                 /* #bec1bf */
  --button-bg-disabled: var(--color-gray-1);                   /* #dfe2e0 */
  
  /* Text colors */
  --button-text-accent: var(--color-brand-accent);             /* #080c0a CLS / #ffffff ABC - for primary buttons */
  --button-text-dark: var(--color-gray-10);                    /* #080c0a - on light backgrounds */
  --button-text-light: var(--color-gray-0);                    /* #ffffff - on dark backgrounds */
  --button-text-disabled: var(--color-gray-3);                 /* #bec1bf */
  --button-text-danger: var(--color-ui-error);                 /* #b50b0b */
  
  /* Border */
  --button-border-width: var(--border-input-width, 1px);
  --button-radius: var(--radius-button, 2px);
  
  /* Transitions - synced from Figma tokens */
  --button-transition-duration: var(--transition-button, 250ms);
  --button-transition-timing: cubic-bezier(var(--transition-bezier, 0.22, 1, 0.36, 1));
}

/* =============================================================================
 * Base Button Styles
 * ============================================================================= */
.button {
  /* Reset */
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  
  /* Layout */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* Styling */
  border-radius: var(--button-radius);
  cursor: pointer;
  
  /* Transition */
  transition: 
    background-color var(--button-transition-duration) var(--button-transition-timing),
    border-color var(--button-transition-duration) var(--button-transition-timing),
    color var(--button-transition-duration) var(--button-transition-timing),
    box-shadow var(--button-transition-duration) var(--button-transition-timing);
}

/* Focus visible state */
.button:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

/* =============================================================================
 * Size Variants
 * ============================================================================= */

/* Primary (Large) - 52px height */
.button--primary {
  height: 52px;
  padding: 14px 20px;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: var(--typo-button-primary-font-size, 14.8px);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--typo-button-primary-line-height, 24px);
}

.button--primary.button--icon-only {
  width: 56px;
  padding: 14px;
}

/* Secondary (Medium) - 44px height */
.button--secondary {
  height: 44px;
  padding: 10px 16px;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: var(--typo-button-secondary-font-size, 12.8px);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--typo-button-secondary-line-height, 24px);
  text-transform: uppercase;
}

.button--secondary.button--icon-only {
  width: 48px;
  padding: 10px;
}

/* Tertiary (Small) - 36px height */
.button--tertiary {
  height: 36px;
  padding: 6px 12px;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: var(--typo-button-tertiary-font-size, 12px);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--typo-button-tertiary-line-height, 24px);
  text-transform: uppercase;
}

.button--tertiary.button--icon-only {
  width: 36px;
  padding: 6px;
}

/* =============================================================================
 * Color Variants
 * ============================================================================= */

/* Main (Primary brand color) */
.button--main {
  background-color: var(--button-bg-main);
  border: var(--button-border-width) solid var(--button-bg-main);
  color: var(--button-text-accent);
}

.button--main:hover:not(:disabled) {
  background-color: var(--button-bg-main-hover);
  border-color: var(--button-bg-main-hover);
}

.button--main:active:not(:disabled) {
  background-color: var(--button-bg-main);
  border-color: var(--button-bg-main);
}

/* Alternative (Secondary brand color) */
.button--alternative {
  background-color: var(--button-bg-alternative);
  border: var(--button-border-width) solid var(--button-bg-alternative);
  color: var(--button-text-light);
}

.button--alternative:hover:not(:disabled) {
  background-color: var(--button-bg-alternative-hover);
  border-color: var(--button-bg-alternative-hover);
}

.button--alternative:active:not(:disabled) {
  background-color: var(--button-bg-alternative);
  border-color: var(--button-bg-alternative);
}

/* Danger (Red) */
.button--danger {
  background-color: var(--button-bg-danger);
  border: var(--button-border-width) solid var(--button-bg-danger);
  color: var(--button-text-light);
}

.button--danger:hover:not(:disabled) {
  background-color: var(--button-bg-danger-hover);
  border-color: var(--button-bg-danger-hover);
}

/* Outline (Transparent with border) */
.button--outline {
  background-color: transparent;
  border: var(--button-border-width) solid var(--button-bg-black);
  color: var(--button-text-dark);
}

.button--outline:hover:not(:disabled) {
  background-color: var(--button-bg-black);
  color: var(--button-text-light);
}

.button--outline:active:not(:disabled) {
  background-color: var(--button-bg-black-hover);
  border-color: var(--button-bg-black-hover);
  color: var(--button-text-light);
}

/* Black */
.button--black {
  background-color: var(--button-bg-black);
  border: var(--button-border-width) solid var(--button-bg-black);
  color: var(--button-text-light);
}

.button--black:hover:not(:disabled) {
  background-color: var(--button-bg-black-hover);
  border-color: var(--button-bg-black-hover);
}

/* White */
.button--white {
  background-color: var(--button-bg-white);
  border: var(--button-border-width) solid var(--button-bg-white);
  color: var(--button-text-dark);
}

.button--white:hover:not(:disabled) {
  background-color: var(--color-gray-1);
  border-color: var(--color-gray-1);
}

/* Gray */
.button--gray {
  background-color: var(--button-bg-gray);
  border: var(--button-border-width) solid var(--button-bg-gray);
  color: var(--button-text-dark);
}

.button--gray:hover:not(:disabled) {
  background-color: var(--button-bg-gray-hover);
  border-color: var(--button-bg-gray-hover);
}

/* Text (Transparent) - Gray-5 color, gray-1 hover bg */
.button--text {
  background-color: transparent;
  border: var(--button-border-width) solid transparent;
  color: var(--color-gray-5);  /* Gray-5 for subtle appearance */
}

.button--text:hover:not(:disabled) {
  background-color: var(--color-gray-1);
  border-color: var(--color-gray-1);
  color: var(--color-gray-10);  /* Black on hover */
}

/* Text Danger - Gray by default, red on hover (from Figma DatePicker clear button) */
.button--text-danger {
  background-color: transparent;
  border: var(--button-border-width) solid transparent;
  color: var(--color-gray-5);  /* Gray by default for subtle appearance */
}

.button--text-danger:hover:not(:disabled) {
  background-color: var(--color-ui-error-background, rgba(181, 11, 11, 0.1));
  color: var(--button-text-danger);  /* Red on hover */
}

/* =============================================================================
 * States
 * ============================================================================= */

/* Disabled */
.button--disabled,
.button:disabled {
  background-color: var(--button-bg-disabled);
  border-color: var(--button-bg-disabled);
  color: var(--button-text-disabled);
  cursor: not-allowed;
}

/* Disabled for outline variant */
.button--outline.button--disabled,
.button--outline:disabled {
  background-color: transparent;
  border-color: var(--button-bg-disabled);
  color: var(--button-text-disabled);
}

/* Disabled for text variants */
.button--text.button--disabled,
.button--text:disabled,
.button--text-danger.button--disabled,
.button--text-danger:disabled {
  background-color: transparent;
  border-color: transparent;
  color: var(--button-text-disabled);
}

/* Loading */
.button--loading {
  cursor: wait;
}

.button--loading .button__content {
  visibility: hidden;
}

/* =============================================================================
 * Content Layout
 * ============================================================================= */

.button__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
}

.button__text {
  white-space: nowrap;
}

/* =============================================================================
 * Icons
 * ============================================================================= */

.button__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Icon sizes based on button size */
.button--primary .button__icon {
  width: 24px;
  height: 24px;
}

.button--primary .button__icon svg {
  width: 20px;
  height: 20px;
}

.button--secondary .button__icon {
  width: 24px;
  height: 24px;
}

.button--secondary .button__icon svg {
  width: 20px;
  height: 20px;
}

.button--tertiary .button__icon {
  width: 24px;
  height: 24px;
}

.button--tertiary .button__icon svg {
  width: 20px;
  height: 20px;
}

/* Icon color inherits from button text */
.button__icon svg {
  stroke: currentColor;
}

/* =============================================================================
 * Loader
 * ============================================================================= */

.button__loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.button__loader-icon {
  width: 24px;
  height: 24px;
  animation: button-spin 1s linear infinite;
  stroke: currentColor;
}

@keyframes button-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* =============================================================================
 * NavigationCard Component
 * Figma node: 3747:12301
 *
 * Variants: Image with Button | Image with Link
 * States: Default | Hover
 * Width: 276px (fixed in submenu column context)
 * ============================================================================= */

.nav-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-ui-medium-s);
  align-items: flex-start;
  flex: 1 1 0;
  max-width: 276px;
  min-width: 0;
}

/* =============================================================================
 * Image
 * Aspect ratio ~276:221 ≈ 1.25:1
 * Rounded with radius-button (2px)
 * On hover: slight scale-up
 * ============================================================================= */

.nav-card__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 276 / 221;
  border-radius: var(--radius-button);
  overflow: hidden;
}

.nav-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms cubic-bezier(var(--transition-bezier));
}

.nav-card:hover .nav-card__image {
  transform: scale(1.04);
}

/* =============================================================================
 * Action area — Button or Link variant
 * Full width for button, inline for link
 * ============================================================================= */

.nav-card__action {
  width: 100%;
  flex-shrink: 0;
}

.nav-card__button {
  width: 100%;
}

/* Link variant: Hyperlink a.Regular with arrow-right */
.nav-card__link {
  flex-shrink: 0;
}

/* ============================================================================
 * Price Component
 * Figma parent: 3799:17093
 *
 * BEM: ds-price / ds-price__amount / ds-price__original / ds-price__badge / …
 * ============================================================================ */

/* ---------- Root ---------- */
.ds-price {
  display: flex;
  position: relative;
}

/* ---------- Default alignment per type ---------- */
.ds-price--xx-large,
.ds-price--x-large,
.ds-price--large,
.ds-price--medium,
.ds-price--shopping-cart,
.ds-price--package {
  align-items: flex-end;
}

.ds-price--regular,
.ds-price--small {
  align-items: flex-start;
}

/* ============================================================================
 * Amount (main price) — typography per type
 * ============================================================================ */

/* xx-Large  →  typo-h2 */
.ds-price--xx-large .ds-price__amount {
  font-family: var(--font-ui);
  font-size: var(--typo-h2-font-size);
  line-height: var(--typo-h2-line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-10);
}

/* x-Large  →  typo-h3 */
.ds-price--x-large .ds-price__amount {
  font-family: var(--font-ui);
  font-size: var(--typo-h3-font-size);
  line-height: var(--typo-h3-line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-10);
}

/* Large  →  typo-body-editorial (18 / 32) */
.ds-price--large .ds-price__amount {
  font-family: var(--font-editorial);
  font-size: var(--typo-p-editorial-regular-font-size);
  line-height: var(--typo-p-editorial-regular-line-height);
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-10);
}

/* Shopping Cart, Medium  →  typo-body-lg (16 / 28) */
.ds-price--shopping-cart .ds-price__amount,
.ds-price--medium .ds-price__amount {
  font-family: var(--font-ui);
  font-size: var(--typo-p-large-font-size);
  line-height: var(--typo-p-large-line-height);
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-10);
}

/* Package  →  typo-body-lg (default) */
.ds-price--package .ds-price__amount {
  font-family: var(--font-ui);
  font-size: var(--typo-p-large-font-size);
  line-height: var(--typo-p-large-line-height);
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-10);
}

/* Regular  →  typo-body (14 / 24) */
.ds-price--regular .ds-price__amount {
  font-family: var(--font-ui);
  font-size: var(--typo-p-regular-font-size);
  line-height: var(--typo-p-regular-line-height);
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-10);
}

/* Small  →  typo-body-sm (12 / 18) */
.ds-price--small .ds-price__amount {
  font-family: var(--font-ui);
  font-size: var(--typo-p-small-font-size);
  line-height: var(--typo-p-small-line-height);
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-10);
}

/* ============================================================================
 * Discounted state
 * ============================================================================ */

/* --- Row discounted layout --- */
.ds-price--discounted {
  gap: var(--space-ui-small-m);
}

/* Large: row, items-end */
.ds-price--large.ds-price--discounted {
  align-items: flex-end;
}

/* Medium, Regular, Small: row, items-start */
.ds-price--medium.ds-price--discounted,
.ds-price--regular.ds-price--discounted,
.ds-price--small.ds-price--discounted {
  align-items: flex-start;
}

/* --- Column discounted (x-large, shopping-cart) --- */
.ds-price--x-large.ds-price--discounted {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.ds-price--shopping-cart.ds-price--discounted {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* --- Package discounted: row, center, wider gap --- */
.ds-price--package.ds-price--discounted {
  align-items: center;
  gap: var(--space-ui-small-l);
}

/* --- Green price colour for medium / regular / small / package --- */
.ds-price--medium.ds-price--discounted .ds-price__amount,
.ds-price--regular.ds-price--discounted .ds-price__amount,
.ds-price--small.ds-price--discounted .ds-price__amount {
  color: var(--color-ui-success);
}

/* Package discounted: editorial font, tighter line-height, green */
.ds-price--package.ds-price--discounted .ds-price__amount {
  font-family: var(--font-editorial);
  font-size: var(--typo-p-editorial-regular-font-size);
  line-height: 20px; /* Figma-specific: tighter than editorial default 32px */
  font-weight: var(--font-weight-normal);
  color: var(--color-ui-success);
}

/* ============================================================================
 * Original price (strikethrough)
 * ============================================================================ */

.ds-price__original {
  text-decoration: line-through;
  font-family: var(--font-ui);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-5);
}

/* x-Large: 14 / 24 */
.ds-price--x-large .ds-price__original {
  font-size: var(--typo-p-regular-font-size);
  line-height: var(--typo-p-regular-line-height);
}

/* Large: 18 / 32, normal weight, gray-6 */
.ds-price--large .ds-price__original {
  font-size: var(--typo-p-editorial-regular-font-size);
  line-height: var(--typo-p-editorial-regular-line-height);
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-6);
}

/* Shopping Cart → discounted: 14 / 24 */
.ds-price--shopping-cart.ds-price--discounted .ds-price__original {
  font-size: var(--typo-p-regular-font-size);
  line-height: var(--typo-p-regular-line-height);
}

/* Shopping Cart → included: 16 / 28 */
.ds-price--shopping-cart.ds-price--included .ds-price__original {
  font-size: var(--typo-p-large-font-size);
  line-height: var(--typo-p-large-line-height);
}

/* Medium, Package: 16 / 28 */
.ds-price--medium .ds-price__original,
.ds-price--package .ds-price__original {
  font-size: var(--typo-p-large-font-size);
  line-height: var(--typo-p-large-line-height);
}

/* Regular: 14 / 24 */
.ds-price--regular .ds-price__original {
  font-size: var(--typo-p-regular-font-size);
  line-height: var(--typo-p-regular-line-height);
}

/* Small: 12 / 18, NO strikethrough per Figma */
.ds-price--small .ds-price__original {
  font-size: var(--typo-p-small-font-size);
  line-height: var(--typo-p-small-line-height);
}

/* ============================================================================
 * Included state
 * ============================================================================ */

/* x-Large included: column, green price + badge below */
.ds-price--x-large.ds-price--included {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-ui-small-s);
}

.ds-price--x-large.ds-price--included .ds-price__amount {
  color: var(--color-ui-success);
}

/* Shopping Cart included: column, badge first */
.ds-price--shopping-cart.ds-price--included {
  flex-direction: column;
  align-items: flex-start;
}

/* Medium, Small, Package included: just badge */
.ds-price--medium.ds-price--included,
.ds-price--small.ds-price--included,
.ds-price--package.ds-price--included {
  align-items: flex-start;
}

/* ============================================================================
 * Badge (Included badge element)
 * ============================================================================ */

.ds-price__badge {
  display: inline-flex;
  align-items: flex-start;
  background: var(--color-ui-success-background);
  border: 1px solid var(--color-brand-primary-alternative);
  border-radius: var(--radius-button);
  padding: var(--space-ui-small-s) var(--space-ui-small-m);
}

.ds-price__badge-text {
  color: var(--color-gray-7);
  /* typo-h6 class applied in JSX (12px, uppercase, medium weight) */
}

/* ============================================================================
 * Prices row (Shopping Cart included: price + original side-by-side)
 * ============================================================================ */

.ds-price__prices {
  display: flex;
  align-items: flex-start;
  gap: var(--space-ui-small-s);
}

/* ============================================================================
 * Package discounted: separator + details
 * ============================================================================ */

.ds-price__separator {
  align-self: stretch;
  width: 1px;
  background: var(--color-gray-3);
  border-radius: 1px;
}

.ds-price__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: var(--space-ui-small-s);
}

.ds-price__savings {
  font-family: var(--font-ui);
  font-size: var(--typo-h6-font-size);
  line-height: var(--typo-h6-line-height);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  color: var(--color-ui-success);
}

/* =============================================================================
 * TopBar Component — Responsive (Mobile-first + @media ≥ 1024px)
 * Figma node: 3848:18424
 *
 * Dark bar above Header with centered notice + right-aligned links (desktop)
 * Mobile: just centered notice text
 * Variants: CLS/ABC (color token differences handled by brand vars)
 * ============================================================================= */

.ds-topbar {
  width: 100%;
  background: var(--color-gray-05);
  padding: var(--space-ui-small-m) 0;
  display: flex;
  justify-content: center;
}

.ds-topbar__inner {
  width: 100%;
  max-width: var(--layout-max-width);
  padding: 0 var(--layout-padding-mobile, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 17px;
}

@media (min-width: 1024px) {
  .ds-topbar__inner {
    padding: 0 var(--layout-padding-desktop);
    justify-content: flex-end;
  }
}

/* Notice — centered on all viewports */
.ds-topbar__notice {
  color: var(--color-gray-6);
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .ds-topbar__notice {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Links — hidden on mobile, visible on desktop */
.ds-topbar__links {
  display: none;
}

@media (min-width: 1024px) {
  .ds-topbar__links {
    display: flex;
    align-items: center;
    gap: var(--space-ui-medium-l);
  }
}

/* Override Hyperlink colors for dark background */
.ds-topbar__link {
  --hyperlink-color-default: var(--color-gray-6);
  text-transform: uppercase;
}

/* =============================================================================
 * DesignSystemPage: Mobile Preview via container query
 * ============================================================================= */

.ds-topbar-mobile-preview {
  container-type: inline-size;
}

@container (max-width: 1023px) {
  .ds-topbar__inner {
    justify-content: center;
    padding: 0;
  }

  .ds-topbar__notice {
    position: static;
    transform: none;
  }

  .ds-topbar__links {
    display: none;
  }
}

/* =============================================================================
 * Header Component — Responsive (Mobile-first + @media ≥ 1024px)
 * Figma node: 3602:1212
 *
 * Variants: CLS/ABC × Default/Checkout = 4 logical states
 * Resolution: ONE component, CSS media queries for Desktop/Mobile
 * Reuses: Button (tertiary/text, tertiary/gray), Hyperlink (small, regular)
 * ============================================================================= */

.ds-header {
  width: 100%;
}

.ds-header-sticky {
  position: sticky;
  top: 0;
  z-index: 900;
  transition: transform var(--transition-drawer) cubic-bezier(var(--transition-bezier));
}

.ds-header-sticky--hidden {
  transform: translateY(-100%);
  pointer-events: none;
}

/* =============================================================================
 * Main Bar
 * Mobile (default): white 88% opacity + backdrop-blur 60px
 * Desktop (≥ 1024px): solid white bg (no blur!)
 * ============================================================================= */

.ds-header__main {
  background: color-mix(in srgb, var(--color-gray-0) 88%, transparent);
  backdrop-filter: blur(60px);
  padding: 0;
  border-bottom: 1px solid var(--color-gray-0);
}

@media (min-width: 1024px) {
  .ds-header__main {
    background: var(--color-gray-0);
    backdrop-filter: none;
    padding: var(--space-ui-medium-s) 0;
    border-bottom: none;
  }
}

.ds-header__main-row {
  width: 100%;
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0 var(--space-ui-medium-s);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  min-height: 48px;
}

@media (min-width: 1024px) {
  .ds-header__main-row {
    min-height: auto;
    padding: 0 var(--layout-padding-desktop);
  }

  /* ABC Desktop: gap-based layout (no justify-between) */
  .ds-header--abc .ds-header__main-row {
    justify-content: flex-start;
    gap: var(--space-ui-medium-m);
  }
}

/* =============================================================================
 * Logo
 * Mobile (all brands): absolute centered between left/right buttons
 * Desktop CLS: absolute centered (NAV is left, Logo floats over center)
 * Desktop ABC: static left (Logo first, then Nav fills remaining space)
 * ============================================================================= */

.ds-header__logo {
  display: inline-flex;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  flex-shrink: 0;
}

/* ABC Desktop: logo static left (first in flow) */
@media (min-width: 1024px) {
  .ds-header--abc .ds-header__logo {
    position: relative;
    left: auto;
    transform: none;
  }
}

/* CLS Desktop: logo stays absolute centered */
@media (min-width: 1024px) {
  .ds-header--cls .ds-header__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

.ds-header__logo-image {
  display: block;
  max-width: 100%;
  height: auto;
}

/* =============================================================================
 * Navigation — Desktop Default only (hidden on mobile)
 * CLS: static left, gap medium-m (24px). Hyperlink small (a.Small, 12px)
 * ABC: static left, flex-grow, gap medium-l (32px). Hyperlink small (12px)
 * ============================================================================= */

.ds-header__nav {
  display: none;
}

@media (min-width: 1024px) {
  .ds-header__nav {
    display: flex;
    align-items: center;
  }

  /* CLS: nav left — spacing via padding on nav-items (no gap → no dead zone) */
  .ds-header--cls .ds-header__nav {
    gap: 0;
  }
  .ds-header--cls .ds-header__nav-item {
    padding-left: calc(var(--space-ui-medium-m) / 2);
    padding-right: calc(var(--space-ui-medium-m) / 2);
  }
  .ds-header--cls .ds-header__nav-item:first-child { padding-left: 0; }
  .ds-header--cls .ds-header__nav-item:last-child  { padding-right: 0; }

  /* ABC: nav flex-grow after logo — spacing via padding on nav-items */
  .ds-header--abc .ds-header__nav {
    flex: 1 0 0;
    min-width: 0;
    gap: 0;
  }
  .ds-header--abc .ds-header__nav-item {
    padding-left: calc(var(--space-ui-medium-l) / 2);
    padding-right: calc(var(--space-ui-medium-l) / 2);
  }
  .ds-header--abc .ds-header__nav-item:first-child { padding-left: 0; }
  .ds-header--abc .ds-header__nav-item:last-child  { padding-right: 0; }
}

.ds-header__nav-link {
  color: var(--color-gray-10);
  text-transform: uppercase;
}

/* =============================================================================
 * Actions — Desktop Default (school btn + cart) — hidden on mobile
 * Figma gap: small-m (8px)
 * ============================================================================= */

.ds-header__actions {
  display: none;
}

@media (min-width: 1024px) {
  .ds-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-ui-small-m);
  }
}

/* =============================================================================
 * Mobile-only elements (hidden on desktop)
 * ============================================================================= */

/* Hamburger menu — mobile default mode */
.ds-header__menu-btn {
  display: flex;
}

/* Cart on mobile (right side) — mobile default mode */
.ds-header__cart-mobile {
  display: block;
}

/* Back icon (mobile checkout) */
.ds-header__back-mobile {
  display: flex;
}

/* Secure icon (mobile checkout) */
.ds-header__secure-mobile {
  display: flex;
}

@media (min-width: 1024px) {
  .ds-header__menu-btn,
  .ds-header__cart-mobile,
  .ds-header__back-mobile,
  .ds-header__secure-mobile {
    display: none;
  }
}

/* =============================================================================
 * Desktop-only elements (hidden on mobile)
 * ============================================================================= */

/* Back button with label (desktop checkout) */
.ds-header__back-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .ds-header__back-desktop {
    display: flex;
  }
}

/* =============================================================================
 * Buttons in Header
 * ============================================================================= */

.ds-header__icon-btn {
  width: 36px;
  min-width: 36px;
}

.ds-header__back-btn {
  min-width: 72px;
}

/* =============================================================================
 * Cart with Badge overlay
 * Figma: count rendered inside custom SVG at inset [42.5% 37.5% 17.5% 37.5%]
 * We approximate with absolute positioning over the lucide ShoppingBag
 * ============================================================================= */

.ds-header__cart-wrap {
  position: relative;
}

.ds-header__cart-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -10%);
  color: var(--color-gray-10);
  opacity: 0.8;
  font-size: 8px;
  line-height: 8px;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}

/* =============================================================================
 * Cart Expander / Popup
 * ============================================================================= */

.ds-header__cart-popup {
  position: absolute;
  top: calc(100% + var(--space-ui-small-m));
  right: -5px; /* slight overhang so it aligns nicely with right edge of header */
  width: 440px;
  max-width: 95vw; /* responsive safety */
  background: var(--color-gray-0);
  border-radius: var(--radius-dropdown, var(--radius-card, 4px));
  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-ui-medium-l) var(--space-ui-medium-l);
  animation: ds-cart-popup-in var(--transition-input) cubic-bezier(var(--transition-bezier));
  text-align: left;
}

@keyframes ds-cart-popup-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ds-header__cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-ui-medium-m) 0;
  border-bottom: 1px solid var(--color-gray-1);
}

.ds-header__cart-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-gray-10);
  text-decoration: underline;
  padding: 0;
}

.ds-header__cart-items {
  display: flex;
  flex-direction: column;
  max-height: 50vh;
  overflow-y: auto;
}

.ds-header__cart-item {
  padding: var(--space-ui-medium-m) 0;
  border-bottom: 1px solid var(--color-gray-1);
}

.ds-header__cart-item-name {
  margin-bottom: var(--space-ui-small-l);
  color: var(--color-gray-10);
}

.ds-header__cart-item-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-ui-small-l);
}

.ds-header__cart-item-img-wrap {
  width: 44px;
  flex-shrink: 0;
}

.ds-header__cart-item-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.ds-header__cart-item-details {
  flex: 1;
  color: var(--color-gray-10);
  word-break: break-word;
  padding-right: var(--space-ui-small-m);
}

.ds-header__cart-item-qty {
  flex-shrink: 0;
}

.ds-header__cart-qty-pill {
  color: var(--color-gray-10);
  white-space: nowrap;
}

.ds-header__cart-item-price {
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 60px;
  display: flex;
  justify-content: flex-end;
  text-align: right;
  color: var(--color-gray-10);
}

.ds-header__cart-summary {
  padding: var(--space-ui-medium-m) 0;
  color: var(--color-gray-10);
}

.ds-header__cart-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.ds-header__cart-footer {
  display: flex;
  justify-content: center;
}

.ds-header__cart-footer .button {
  width: 100%;
}

/* =============================================================================
 * Secure Checkout — Desktop Checkout, right side (hidden on mobile)
 * Figma: lock-keyhole 24px + H6 text, color gray-6, gap small-m
 * NOT a button/link, just a label indicator
 * ============================================================================= */

.ds-header__secure {
  display: none;
}

@media (min-width: 1024px) {
  .ds-header__secure {
    display: flex;
    align-items: center;
    gap: var(--space-ui-small-m);
    color: var(--color-gray-6);
    text-transform: uppercase;
  }
}

.ds-header__secure svg {
  flex-shrink: 0;
}

/* =============================================================================
 * Checkout: Logo absolute center (both mobile and desktop in checkout)
 * ============================================================================= */

.ds-header--checkout .ds-header__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* =============================================================================
 * Mobile Drawer — Sidebar navigation (< 1024px)
 * Figma node: 3845:15371
 * Width 360px, slide-in from left, popup shadow/radius
 * ============================================================================= */

/* Overlay */
.ds-header__drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  z-index: 999;
  animation: ds-drawer-overlay-in var(--transition-drawer) cubic-bezier(var(--transition-bezier)) both;
}

@keyframes ds-drawer-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Sidebar panel */
.ds-header__drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 360px;
  max-width: 100vw;
  background: var(--color-gray-0);
  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.12);
  border-radius: 0 var(--radius-drawer) var(--radius-drawer) 0;
  z-index: 1000;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  animation: ds-drawer-slide-in var(--transition-drawer) cubic-bezier(var(--transition-bezier)) both;
}

@keyframes ds-drawer-slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* Entered state: disable CSS entrance animation so inline swipe transforms work.
   Applied after the entrance animation completes, or immediately when swiping. */
.ds-header__drawer--entered {
  animation: none !important;
}

.ds-header__drawer-overlay--entered {
  animation: none !important;
}

/* Closing state: slide drawer out + fade overlay */
.ds-header__drawer--closing {
  animation: ds-drawer-slide-out var(--transition-drawer) cubic-bezier(var(--transition-bezier)) both !important;
}

.ds-header__drawer-overlay--closing {
  animation: ds-drawer-overlay-out var(--transition-drawer) cubic-bezier(var(--transition-bezier)) both !important;
}

@keyframes ds-drawer-slide-out {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes ds-drawer-overlay-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Header bar — matches Figma Sidebar Header */
.ds-header__drawer-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 52px;
  padding: var(--space-ui-small-l) var(--space-layout-padding);
  background: var(--color-gray-05, #f2f3f2);
  flex-shrink: 0;
  position: relative;
  touch-action: pan-y;
}

/* Title group: back button + title text */
.ds-header__drawer-header-title {
  display: flex;
  align-items: center;
  gap: var(--space-ui-medium-s);
  max-width: calc(100% - 36px - var(--space-ui-medium-s));
}

.ds-header__drawer-title {
  color: var(--color-gray-10);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-header__drawer-back {
  flex-shrink: 0;
  animation: ds-drawer-back-in var(--transition-hyperlink) cubic-bezier(var(--transition-bezier)) both;
}

@keyframes ds-drawer-back-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.ds-header__drawer-close {
  position: absolute;
  right: var(--space-layout-padding);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

/* Scrollable content area */
.ds-header__drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-ui-medium-m) var(--space-layout-padding);
  display: flex;
  flex-direction: column;
  touch-action: pan-y; /* Allow vertical scroll only; horizontal swipe handled by JS */
}

/* Slide animations for content transitions */
.ds-header__drawer-content--slide-forward {
  animation: ds-drawer-slide-forward var(--transition-hyperlink) cubic-bezier(var(--transition-bezier)) both;
}

.ds-header__drawer-content--slide-back {
  animation: ds-drawer-slide-back var(--transition-hyperlink) cubic-bezier(var(--transition-bezier)) both;
}

@keyframes ds-drawer-slide-forward {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ds-drawer-slide-back {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Promo card at top of default view */
.ds-header__drawer-promo {
  margin-bottom: var(--space-ui-medium-m);
}

.ds-header__drawer-promo .nav-card {
  max-width: 100%;
  flex: none;
}

/* Nav links list (default view) */
.ds-header__drawer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ds-header__drawer-nav-item {
  border-top: 0.5px solid var(--color-gray-2);
}

.ds-header__drawer-nav-item:last-child {
  border-bottom: 0.5px solid var(--color-gray-2);
}

.ds-header__drawer-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-ui-medium-s) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

.ds-header__drawer-link-text {
  flex: 1;
  min-width: 0;
  text-transform: uppercase;
}

.ds-header__drawer-arrow {
  flex-shrink: 0;
  color: var(--color-gray-10);
}

/* Submenu view (extended) */
.ds-header__drawer-submenu-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-ui-medium-m);
}

.ds-header__drawer-card {
  max-width: 100%;
  flex: none;
}

/* Submenu nav list (Level 2 — bordered like Level 1 but no uppercase) */
.ds-header__drawer-submenu-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ds-header__drawer-submenu-nav-item {
  border-top: 0.5px solid var(--color-gray-2);
}

.ds-header__drawer-submenu-nav-item:last-child {
  border-bottom: 0.5px solid var(--color-gray-2);
}

.ds-header__drawer-submenu-nav-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-ui-medium-s) 0;
  color: var(--color-gray-10);
  /* No text-transform: uppercase — intentionally sentence case */
}

/* Footer — school selector */
.ds-header__drawer-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-ui-medium-m) var(--space-layout-padding);
  background: var(--color-gray-05, #f2f3f2);
  border-top: 1px solid var(--color-gray-2);
  box-shadow: 0px 0px 20px 0px rgba(10, 11, 10, 0.06);
  touch-action: pan-y;
}

.ds-header__drawer-school {
  display: flex;
  align-items: center;
  gap: var(--space-ui-small-l, 6px);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-gray-10);
  font: inherit;
  padding: 0;
}

/* Hide drawer on desktop (≥ 1024px) */
@media (min-width: 1024px) {
  .ds-header__drawer-overlay,
  .ds-header__drawer {
    display: none;
  }
}

/* =============================================================================
 * DesignSystemPage: Mobile Preview via container query
 * Wrapping a Header inside .ds-header-mobile-preview forces mobile layout
 * even on a desktop viewport, for preview purposes only.
 * ============================================================================= */

/* =============================================================================
 * Navigation item wrapper (for hover/active state on submenu items)
 * ============================================================================= */

.ds-header__nav-item {
  display: flex;
  align-items: center;
  padding-top: var(--space-ui-medium-s);
  padding-bottom: var(--space-ui-medium-s);
  margin-top: calc(var(--space-ui-medium-s) * -1);
  margin-bottom: calc(var(--space-ui-medium-s) * -1);
}

.ds-header__nav-item--active .ds-header__nav-link {
  opacity: 1;
}

/* Force hover appearance on an active nav link (open submenu) */
.ds-header__nav-item--active .ds-header__nav-link {
  --hyperlink-color-default: var(--hyperlink-color-hover);
}

.ds-header__nav-item--active .ds-header__nav-link .hyperlink__underline {
  transform: scaleX(1);
}

/* =============================================================================
 * Expander (Mega-menu) — Desktop only
 * Figma node: 3842:15021
 * Slide-down + fade animation, white bg, border-bottom separator
 * ============================================================================= */

.ds-header__expander {
  display: none;
}

@media (min-width: 1024px) {
  .ds-header__expander {
    /*display: block;*/
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 200;
    background: var(--color-gray-0);
    border-bottom: 1px solid var(--color-gray-2);
    animation: ds-header-expander-in var(--transition-drawer) cubic-bezier(0.16, 1, 0.3, 1) both;
    overflow: hidden;
    border-radius: 0 0 var(--radius-drawer) var(--radius-drawer);
  }
}

@keyframes ds-header-expander-in {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(-12px);
  }
  40% {
    opacity: 1;
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

/* Exit animation — fade out + slide up */
@media (min-width: 1024px) {
  .ds-header__expander--closing {
    animation: ds-header-expander-out calc(var(--transition-drawer) / 2) cubic-bezier(0.4, 0, 0.2, 1) both;
    pointer-events: none;
  }
}

@keyframes ds-header-expander-out {
  from {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
  60% {
    opacity: 0;
  }
  to {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(-12px);
  }
}

/* Switching animation — fade of inner content only (container stays) */
@media (min-width: 1024px) {
  .ds-header__expander--switching .ds-header__expander-inner {
    animation: ds-header-expander-switch-out calc(var(--transition-hyperlink) / 2) cubic-bezier(var(--transition-bezier)) both;
  }
}

@keyframes ds-header-expander-switch-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.ds-header__expander-inner {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: var(--space-ui-large-m) var(--layout-padding-desktop);
  position: relative;
  overflow: hidden;
}

.ds-header__expander-columns {
  display: flex;
  justify-content: left;
  gap: var(--space-layout-padding);
  align-items: flex-start;
}

/* Staggered column appearance — each column fades in with incremental delay */
.ds-header__expander-col {
  animation: ds-header-col-in calc(var(--transition-drawer) / 2) cubic-bezier(var(--transition-bezier)) both;
  animation-delay: calc(var(--col-index, 0) * calc(var(--transition-hyperlink) / 4));
  flex: 1 1 0;
  max-width: 276px;
  min-width: 0;
}

@keyframes ds-header-col-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Watermark — editorial h1 text, positioned bottom-right, decorative */
.ds-header__expander-watermark {
  position: absolute;
  right: var(--space-layout-padding);
  bottom: calc(var(--space-ui-large-m) * -0.25);
  color: var(--color-gray-1);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
}

/* Links column (vertical list of Hyperlink a.Regular) */
.ds-header__expander-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-ui-medium-s);
  padding-top: var(--space-ui-small-m);
  flex: 1 1 0;
  max-width: 276px;
  min-width: 0;
}

.ds-header__expander-link {
  color: var(--color-gray-10);
}

.ds-header-mobile-preview {
  container-type: inline-size;
}

/* Override desktop styles inside narrow container */
@container (max-width: 1023px) {
  /* Main bar: frosted glass */
  .ds-header__main {
    background: color-mix(in srgb, var(--color-gray-0) 88%, transparent);
    backdrop-filter: blur(60px);
    padding: 0;
    border-bottom: 1px solid var(--color-gray-0);
  }

  .ds-header__main-row {
    min-height: 48px;
    padding: 0 var(--space-layout-padding);
    justify-content: space-between;
    gap: 0;
  }

  /* Logo centered */
  .ds-header__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Hide desktop elements */
  .ds-header__nav { display: none; }
  .ds-header__actions { display: none; }
  .ds-header__back-desktop { display: none; }
  .ds-header__secure { display: none; }
  .ds-header__expander { display: none; }

  /* Show mobile elements */
  .ds-header__menu-btn { display: flex; }
  .ds-header__cart-mobile { display: block; }
  .ds-header__back-mobile { display: flex; }
  .ds-header__secure-mobile { display: flex; }
}

/* =============================================================================
 * Footer Component — Responsive (Mobile-first + @media ≥ 1024px)
 * Figma node: 3787:1310 (Footer/Clothing)
 *
 * Top section: bg gray-025, 3 columns with links + contact + socials
 * Bottom bar: bg gray-05, legal links + copyright
 *
 * Desktop: 3787:1309 — columns in a row
 * Mobile: 3848:19879 — columns stacked vertically
 * ============================================================================= */

/* Root */
.ds-footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
}

/* =============================================================================
 * Container — Top section with columns
 * ============================================================================= */

.ds-footer__container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-gray-025);
  padding: var(--space-ui-large-m) 0;
}

.ds-footer__content {
  width: 100%;
  max-width: var(--layout-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0 var(--layout-padding-mobile, 16px);
}

/* Row: vertical on mobile, horizontal on desktop */
.ds-footer__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-layout-padding);
  width: 100%;
}

@media (min-width: 1024px) {
  .ds-footer__content {
    padding: 0 var(--layout-padding-desktop);
  }

  .ds-footer__row {
    flex-direction: row;
    gap: var(--space-layout-padding);
  }
}

/* =============================================================================
 * Columns
 * ============================================================================= */

.ds-footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-ui-medium-m);
  width: 100%;
}

@media (min-width: 1024px) {
  .ds-footer__column {
    flex: 1 0 0;
    min-width: 0;
    min-height: 1px;
  }
}

/* Column title: typo-h5 + uppercase */
.ds-footer__column-title {
  text-transform: uppercase;
  color: var(--color-gray-950);
  margin: 0;
}

/* Links within a column */
.ds-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-ui-small-l);
}

/* Footer link — color override for gray-950 default (matches Figma footer context) */
.ds-footer__link {
  --hyperlink-color-default: var(--color-gray-950);
}

/* Address paragraph */
.ds-footer__address {
  color: var(--color-gray-950);
  margin: 0;
  white-space: pre-wrap;
}

/* =============================================================================
 * Social Icons
 * ============================================================================= */

.ds-footer__socials {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.ds-footer__social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-gray-0);
  border: var(--border-input-width) solid var(--color-gray-0);
  border-radius: var(--radius-button);
  color: var(--color-gray-10);
  cursor: pointer;
  transition: background var(--transition-button) cubic-bezier(var(--transition-bezier)),
              color var(--transition-button) cubic-bezier(var(--transition-bezier));
  text-decoration: none;
}

.ds-footer__social-btn:hover {
  background: var(--color-gray-075);
  border-color: var(--color-gray-075);
}

.ds-footer__social-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* =============================================================================
 * Bottom Bar — Legal links + Copyright
 * ============================================================================= */

.ds-footer__bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-05);
  padding: var(--space-ui-medium-s) 0;
}

.ds-footer__bottom-inner {
  width: 100%;
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0 var(--layout-padding-mobile, 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-ui-medium-m);
}

@media (min-width: 1024px) {
  .ds-footer__bottom {
    padding: var(--space-ui-medium-s) 0;
  }

  .ds-footer__bottom-inner {
    flex-direction: row;
    align-items: center;
    padding: 0 var(--layout-padding-desktop);
  }
}

/* Legal links row */
.ds-footer__legal-links {
  display: flex;
  gap: 32px;
  align-items: center;
}

@media (min-width: 1024px) {
  .ds-footer__legal-links {
    flex: 1 0 0;
    min-width: 0;
    min-height: 1px;
  }
}

/* Legal link — uses small variant Hyperlink, color gray-9 */
.ds-footer__legal-link {
  --hyperlink-color-default: var(--color-gray-9);
  --hyperlink-color-hover: var(--color-gray-10);
}

/* Copyright text */
.ds-footer__copyright {
  color: var(--color-gray-9);
  margin: 0;
}

@media (min-width: 1024px) {
  .ds-footer__copyright {
    flex: 1 0 0;
    text-align: right;
    min-width: 0;
    min-height: 1px;
  }
}

/* =============================================================================
 * DesignSystemPage: Mobile Preview via container query
 * ============================================================================= */

.ds-footer-mobile-preview {
  container-type: inline-size;
}

@container (max-width: 1023px) {
  .ds-footer__row {
    flex-direction: column;
  }

  .ds-footer__column {
    flex: none;
    width: 100%;
  }

  .ds-footer__bottom-inner {
    flex-direction: column;
    align-items: center;
  }

  .ds-footer__legal-links {
    flex: none;
  }

  .ds-footer__copyright {
    flex: none;
    text-align: right;
  }
}

/* =============================================================================
 * Input Component Styles
 * Pixel-perfect implementation from Figma via MCP
 * Uses design system tokens and reusable components (Button)
 * 
 * Figma nodes:
 * - Single Input: 3637:10702 (Status=Default)
 * - Password Input: 3637:10765
 * - Dropdown Input: 3637:10797
 * - Textarea: 3637:10862
 * - Action Input: 3637:10733
 * ============================================================================= */

/* =============================================================================
 * CSS Custom Properties - from Figma tokens
 * ============================================================================= */
.input-wrapper {
  /* Colors - from Figma: colors/grays/* and colors/ui/* */
  --input-bg-default: var(--color-gray-025);        /* #f7f8f7 - Default background */
  --input-bg-hover: var(--color-gray-0);            /* white - Hover/Focus background */
  --input-bg-filled: var(--color-gray-0);           /* white - Filled background */
  
  /* Border colors */
  --input-border-default: var(--color-gray-4);      /* #9ca09e - Default border */
  --input-border-hover: var(--color-gray-10);       /* #080c0a - Hover border */
  --input-border-focus: var(--color-gray-10);       /* #080c0a - Focus border */
  --input-border-filled: var(--color-gray-10);      /* #080c0a - Filled (focus out) */
  --input-border-error: var(--color-ui-error);      /* #d40b0b - Error border */
  
  /* Text colors */
  --input-text-placeholder: var(--color-gray-7);    /* #5d6561 - Placeholder/Label default */
  --input-text-label-filled: var(--color-gray-6);   /* #6e7270 - Label when filled */
  --input-text-value: var(--color-gray-10);         /* #080c0a - Input value */
  --input-text-helper: var(--color-gray-5);         /* #838785 - Helper/notes text */
  --input-text-error: var(--color-ui-error);        /* #b50b0b - Error text */
  --input-icon-color: var(--color-gray-10);         /* #080c0a - Icon color */
  
  /* Sizing - from Figma: min-h-[52px] */
  --input-height: 52px;
  --input-border-width: var(--border-input-width, 1px);
  --input-border-radius: var(--radius-input, 2px);
  
  /* Padding - from Figma tokens: Paragraph/Input/input-padding-* */
  --input-padding-top: calc(var(--typo-input-padding-top, 8) * 1px);
  --input-padding-bottom: calc(var(--typo-input-padding-bottom, 8) * 1px);
  --input-padding-left: calc(var(--typo-input-padding-left, 12) * 1px);
  --input-padding-right: calc(var(--typo-input-padding-right, 8) * 1px);
  
  /* Icon sizing - from Figma: size-[24px] container, size-[20px] inner */
  --input-icon-container-size: 24px;
  --input-icon-size: 20px;
  /* Icon padding uses input-padding-right token from Figma */
  --input-icon-padding-right: calc(var(--typo-input-padding-right, 8) * 1px);
  
  /* Action button - 36px square, uses Button Tertiary */
  --input-action-size: 36px;
  
  /* Typography - from Figma styles */
  /* Input/Placeholder: from tokens */
  --input-font-size: var(--typo-input-font-size, 14.8px);
  --input-line-height: calc(var(--typo-input-line-height, 20) * 1px);
  --input-font-weight: var(--font-weight-normal, 400);
  
  /* Input/Value: 14.8px / 24px / Medium (500) */
  --input-value-font-weight: var(--font-weight-medium, 500);
  
  /* Paragraph/P.Label: 10px / 12px */
  --input-label-font-size: var(--typo-p-label-font-size, 10px);
  --input-label-line-height: var(--typo-p-label-line-height, 12px);
  
  /* Paragraph/P.Small: 12px / 18px */
  --input-helper-font-size: var(--typo-p-small-font-size, 12px);
  --input-helper-line-height: var(--typo-p-small-line-height, 18px);
  
  /* Transitions */
  --input-transition-duration: var(--transition-input, 250ms);
  --input-transition-timing: cubic-bezier(var(--transition-bezier, 0.16, 1, 0.3, 1));

  /* Shadow for error tooltip - from Figma: Shadow/Popup */
  --input-error-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.12);
  
  /* Error background - from Figma: --colors/ui/error-background */
  --input-error-bg: var(--color-ui-error-background, #f7eeee);
}

/* =============================================================================
 * Autofill / Autocomplete Override
 * Removes the default blue/yellow background that browsers apply on autofill
 * ============================================================================= */
.input__field:-webkit-autofill,
.input__field:-webkit-autofill:hover,
.input__field:-webkit-autofill:focus,
.input__field:-webkit-autofill:active {
  /* Use a long transition delay to effectively disable the background */
  -webkit-transition-delay: 99999s;
  transition-delay: 99999s;
  /* Override the background color with box-shadow trick */
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg-filled, #fff) inset !important;
  box-shadow: 0 0 0 1000px var(--input-bg-filled, #fff) inset !important;
  /* Keep the text color */
  -webkit-text-fill-color: var(--input-text-value, #080c0a) !important;
}

/* =============================================================================
 * Input Wrapper
 * ============================================================================= */
.input-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

/* Reserve space for error tooltip when there's an error */
.input-wrapper--has-error {
  margin-bottom: 30px; /* Space for error tooltip (29px + 1px buffer) */
}

/* =============================================================================
 * Input Container - Main box
 * From Figma: data-name="input"
 * ============================================================================= */
.input {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: var(--input-height);
  padding-top: var(--input-padding-top);
  padding-bottom: var(--input-padding-bottom);
  padding-left: var(--input-padding-left);
  padding-right: var(--input-padding-right);
  background-color: var(--input-bg-default);
  border: var(--input-border-width) solid var(--input-border-default);
  border-radius: var(--input-border-radius);
  cursor: text;
  
  transition: 
    background-color var(--input-transition-duration) var(--input-transition-timing),
    border-color var(--input-transition-duration) var(--input-transition-timing);
}

/* =============================================================================
 * Content Row - contains icon, label-and-value, right-ui
 * From Figma: data-name="content"
 * ============================================================================= */
.input__content {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

/* =============================================================================
 * Left Icon Container
 * From Figma: data-name="icon" with pr-[var(--paragraph/input/input-padding-right)]
 * ============================================================================= */
.input__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: var(--input-icon-padding-right);
  color: var(--input-icon-color);
}

.input__icon-container {
  position: relative;
  width: var(--input-icon-container-size);
  height: var(--input-icon-container-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

.input__icon svg {
  width: var(--input-icon-size);
  height: var(--input-icon-size);
}

/* =============================================================================
 * Label and Value Container
 * From Figma: data-name="label-and-value" - flex-[1_0_0] pt-[2px]
 * ============================================================================= */
.input__field-container {
  position: relative;
  display: flex;
  flex: 1 0 0;
  align-items: flex-end;
  min-height: 1px;
  min-width: 1px;
  padding-top: 2px; /* From Figma: pt-[2px] */
}

/* =============================================================================
 * Floating Label
 * From Figma: data-name="placeholder-label"
 * Default state: centered vertically (top-1/2 -translate-y-1/2)
 * Filled state: at top (top-0)
 * ============================================================================= */
.input__label {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  
  /* Default: centered vertically */
  top: 50%;
  transform: translateY(-50%);
  
  /* Typography: Input/Placeholder */
  font-family: var(--font-ui);
  font-size: var(--input-font-size);
  font-weight: var(--input-font-weight);
  line-height: var(--input-line-height);
  color: var(--input-text-placeholder);
  white-space: pre-wrap;
  
  pointer-events: none;
  
  transition: 
    top var(--input-transition-duration) var(--input-transition-timing),
    transform var(--input-transition-duration) var(--input-transition-timing),
    font-size var(--input-transition-duration) var(--input-transition-timing),
    line-height var(--input-transition-duration) var(--input-transition-timing),
    color var(--input-transition-duration) var(--input-transition-timing);
}

/* Label floated up - when focused or has value */
.input--has-value .input__label,
.input--focused .input__label {
  top: 0;
  transform: translateY(0);
  
  /* Typography: Paragraph/P.Label */
  font-size: var(--input-label-font-size);
  line-height: var(--input-label-line-height);
  color: var(--input-text-label-filled);
}

/* =============================================================================
 * Input Field (actual input/textarea)
 * From Figma: data-name="value" with pt-[12px]
 * ============================================================================= */
.input__field {
  flex: 1 0 0;
  min-height: 1px;
  min-width: 1px;
  width: 100%;
  padding: 0;
  padding-top: 12px; /* Space for floated label */
  
  /* Typography: Input/Value */
  font-family: var(--font-ui);
  font-size: var(--input-font-size);
  font-weight: var(--input-value-font-weight);
  line-height: var(--input-line-height);
  color: var(--input-text-value);
  
  background: transparent;
  border: none;
  outline: none;
  
  /* Hide when not focused and no value */
  opacity: 0;
  
  transition: opacity var(--input-transition-duration) var(--input-transition-timing);
}

/* Show field when focused or has value */
.input--has-value .input__field,
.input--focused .input__field {
  opacity: 1;
}

.input__field::placeholder {
  color: transparent;
}

/* =============================================================================
 * Right UI Container
 * From Figma: data-name="right-ui"
 * ============================================================================= */
.input__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 0;
}

/* =============================================================================
 * Icon Buttons (success, clear/cancel, chevron)
 * These should use the Button component
 * ============================================================================= */

/* Success Icon - just an icon, not a button */
.input__success-icon {
  display: flex;
  align-items: flex-start;
  width: var(--input-icon-container-size);
  height: var(--input-icon-container-size);
  color: var(--color-ui-success, #28a745);
}

.input__success-icon svg {
  width: var(--input-icon-size);
  height: var(--input-icon-size);
}

/* Action buttons container - holds Button components */
.input__action-btn-wrapper {
  display: flex;
  align-items: flex-start;
  width: var(--input-action-size);
}

/* =============================================================================
 * Input States
 * ============================================================================= */

/* Hover State */
.input:hover:not(.input--disabled):not(.input--error) {
  background-color: var(--input-bg-hover);
  border-color: var(--input-border-hover);
}

.input:hover:not(.input--disabled):not(.input--error) .input__label {
  color: var(--input-text-value);
}

/* Focus State */
.input--focused:not(.input--error) {
  background-color: var(--input-bg-filled);
  border-color: var(--input-border-focus);
}

/* Filled (Focus Out) State */
.input--filled-out:not(.input--focused):not(.input--error) {
  background-color: var(--input-bg-filled);
  border-color: var(--input-border-filled);
}

/* Error State */
.input--error {
  background-color: var(--input-bg-filled);
  border-color: var(--input-border-error);
}

/* Disabled State */
.input--disabled {
  background-color: var(--color-gray-1);
  border-color: var(--color-gray-2);
  cursor: not-allowed;
  opacity: 0.6;
}

.input--disabled .input__label,
.input--disabled .input__field {
  color: var(--color-gray-4);
}

/* =============================================================================
 * Textarea Variant
 * From Figma: height: 116px, label at TOP in default state (not centered!)
 * ============================================================================= */
.input--textarea {
  min-height: 116px;
  align-items: flex-start;
}

.input--textarea .input__content {
  align-items: flex-start;
  height: 100%;
}

.input--textarea .input__field-container {
  height: 100%;
}

/* IMPORTANT: Textarea label should be at TOP in default state (not centered) */
.input--textarea .input__label {
  top: 0;
  transform: translateY(0);
}

/* Textarea field */
.input--textarea .input__field {
  resize: vertical;
  min-height: 60px;
  padding-top: 12px;
  opacity: 1;
}

/* Resize handle */
.input__resize-handle {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.input__resize-handle-lines {
  position: absolute;
  left: 7.5px;
  top: 8px;
  width: 6px;
  height: 6px;
}

.input__resize-handle-lines svg {
  width: 100%;
  height: 100%;
}

/* =============================================================================
 * Dropdown Variant
 * ============================================================================= */
.input--dropdown {
  cursor: pointer;
}

.input--dropdown .input__field {
  cursor: pointer;
  caret-color: transparent;
}

/* Chevron rotation on open */
.input--open .input__chevron svg {
  transform: rotate(180deg);
}

.input__chevron svg {
  transition: transform var(--input-transition-duration) var(--input-transition-timing);
}

/* Dropdown list - synced from Figma via component-tokens.css
 * Popup Small with shadow, no border, rounded corners
 * Positioned relative to .input-wrapper, appears below .input */
.input__dropdown {
  position: absolute;
  top: calc(var(--input-height, 52px) + var(--input-dropdown-gap, 4px));
  left: 0;
  right: 0;
  max-height: var(--input-dropdown-max-height, 276px);
  overflow-y: auto;
  overflow-x: hidden;
  
  /* From Figma: Popup Small */
  background-color: var(--input-dropdown-bg, #ffffff);
  border: none;
  border-radius: var(--input-dropdown-radius, 2px);
  box-shadow: var(--input-dropdown-shadow, 0px 8px 32px 0px rgba(0, 0, 0, 0.12));
  
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  
  transition: 
    opacity var(--input-transition-duration, 250ms) var(--input-transition-timing, ease-out),
    transform var(--input-transition-duration, 250ms) var(--input-transition-timing, ease-out),
    visibility var(--input-transition-duration, 250ms);
  
  z-index: 100;
}

.input--open .input__dropdown,
.input-wrapper--open .input__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dropdown Options Container */
.input__dropdown-options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  background-color: var(--color-gray-0);
  border-bottom-left-radius: 1px; /* rounded-bl-[1px] rounded-br-[1px] */
  border-bottom-right-radius: 1px;
}

/* Dropdown single option - synced from Figma via component-tokens.css */
.input__option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  /* Padding from component-tokens */
  padding: var(--input-option-padding-top, 12px) var(--input-option-padding-right, 8px) var(--input-option-padding-bottom, 12px) var(--input-option-padding-left, 12px);
  
  background-color: var(--input-dropdown-bg, #ffffff);
  border-bottom: var(--border-base-width, 0.5px) solid var(--input-option-border-color, #d5d7d6);
  
  overflow: hidden;
  cursor: pointer;
  
  transition: background-color var(--input-transition-duration, 250ms) var(--input-transition-timing, ease-out);
}

.input__option:last-child {
  border-bottom: none;
}

/* Option inner content - from Figma: data-name="value" - flex row with icon + text
 * Icon on left, text centered in remaining space */
.input__option-content {
  display: flex;
  align-items: center;
  width: 100%;
}

/* Option icon container - synced from component-tokens */
.input__option-icon {
  display: flex;
  align-items: center;
  padding-right: var(--input-option-icon-gap, 8px);
  flex-shrink: 0;
}

.input__option-icon-container {
  position: relative;
  width: var(--input-option-icon-size);
  height: var(--input-option-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

.input__option-icon svg {
  width: var(--input-option-icon-inner-size, 20px);
  height: var(--input-option-icon-inner-size, 20px);
}

/* Option text - synced from Figma via component-tokens.css */
.input__option-text {
  flex: 1 0 0;
  min-height: 1px;
  min-width: 1px;
  
  font-family: var(--font-ui, sans-serif);
  font-size: var(--input-option-font-size, 14px);
  font-weight: var(--input-option-font-weight, 400);
  line-height: var(--input-option-line-height, 24px);
  color: var(--input-option-color, #080c0a);
  text-align: left;
  white-space: pre-wrap;
}

.input__option:hover {
  background-color: var(--input-option-hover-bg, #f2f3f2);
}

/* Selected option */
.input__option--selected {
  background-color: var(--input-option-selected-bg, #f3f7ed);
}

/* Option checkbox for multi-select */
.input__option-checkbox {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-gray-4);
  border-radius: 2px;
  flex-shrink: 0;
}

.input__option--selected .input__option-checkbox {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-brand-accent);
}

/* =============================================================================
 * Multi-select Tags
 * ============================================================================= */
.input__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-ui-small-s, 4px);
  padding-top: 12px;
  flex: 1 0 0;
}

.input__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-ui-small-s, 4px);
  padding: var(--space-ui-small-s, 4px) var(--space-ui-small-m, 8px);
  
  background-color: var(--color-gray-1);
  border-radius: var(--radius-button, 2px);
  
  font-family: var(--font-ui);
  font-size: var(--input-helper-font-size);
  line-height: var(--input-helper-line-height);
  color: var(--input-text-value);
}

.input__tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 16px;
  height: 16px;
  
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-gray-6);
  
  transition: color var(--input-transition-duration) var(--input-transition-timing);
}

.input__tag-remove:hover {
  color: var(--color-ui-error);
}

.input__tag-remove svg {
  width: 12px;
  height: 12px;
}

/* =============================================================================
 * Helper Text / Notes
 * From Figma: data-name="notes" - positioned below input
 * ============================================================================= */
.input__helper {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-ui-small-s, 4px);
  width: 100%;
}

.input__helper-text {
  font-family: var(--font-ui);
  font-size: var(--input-helper-font-size);
  font-weight: var(--input-font-weight);
  line-height: var(--input-helper-line-height);
  color: var(--input-text-helper);
  text-align: right;
}

/* =============================================================================
 * Error Message
 * From Figma: data-name="error" - tooltip style below input
 * bottom-[-29px] left-0 px-[8px] py-[4px]
 * ============================================================================= */
.input__error {
  position: absolute;
  bottom: -29px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* From Figma spacing tokens: horizontal = small-l, vertical = small-m */
  padding: var(--space-ui-small-m, 4px) var(--space-ui-small-l, 8px);
  
  background-color: var(--input-error-bg);
  border: 1px solid var(--color-gray-0);
  border-radius: var(--input-border-radius);
  box-shadow: var(--input-error-shadow);
  
  z-index: 10;
}

.input__error-text {
  font-family: var(--font-ui);
  font-size: var(--input-helper-font-size);
  font-weight: var(--input-font-weight);
  line-height: var(--input-helper-line-height);
  color: var(--input-text-error);
  white-space: pre-wrap;
  max-width: 251px;
}

/* =============================================================================
 * Searchable Dropdown
 * From Figma: input text is always gray-10
 * ============================================================================= */
.input--searchable .input__field {
  caret-color: auto;
  cursor: text;
  /* Input text is always gray-10 */
  color: var(--color-gray-10, #080c0a);
}

/* Highlight matched text in dropdown options - gray-6 */
.input__option-text-match {
  color: var(--color-gray-6, #6e7270);
}

/* =============================================================================
 * Mobile Focus Mode — Searchable Dropdown
 * Full-screen takeover on mobile when searchable input is focused.
 * Input stays at top with layout-padding, dropdown fills remaining space.
 * ============================================================================= */
@media (max-width: 1023px) {
  .input-wrapper--mobile-focus {
    position: fixed;
    top: var(--mobile-vp-offset, 0px);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1100;
    background: var(--color-gray-0);
    padding: var(--layout-padding-mobile);
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    height: var(--mobile-vp-height, 100dvh);
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
  }

  .input-wrapper--mobile-focus .input {
    flex-shrink: 0;
  }

  .input-wrapper--mobile-focus .input__dropdown {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    flex: 0 1 auto;
    min-height: 0;
    max-height: calc(
      var(--mobile-vp-height, 100dvh)
      - var(--layout-padding-mobile)
      - var(--input-height, 52px)
      - var(--input-dropdown-gap, 4px)
      - var(--layout-padding-mobile)
    );
    opacity: 1;
    visibility: visible;
    transform: none;
    /* Keep standard dropdown styling: shadow, radius, bg */
    background-color: var(--input-dropdown-bg, #ffffff);
    border-radius: var(--input-dropdown-radius, 2px);
    box-shadow: var(--input-dropdown-shadow, 0px 8px 32px 0px rgba(0, 0, 0, 0.12));
    border: none;
    margin-top: var(--input-dropdown-gap, 4px);
    margin-bottom: var(--layout-padding-mobile);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }

  .input-wrapper--mobile-focus .input__helper {
    display: none;
  }
}

/* =============================================================================
 * DatePicker Component Styles
 * Pixel-perfect implementation from Figma via MCP
 * 
 * Figma nodes:
 * - Date Picker: 3637:10829
 * - Expanded: 3637:10834
 * - Datepicker/Expander: 3637:11063
 * ============================================================================= */

/* =============================================================================
 * DatePicker Wrapper
 * ============================================================================= */
.datepicker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

/* Gap between input and calendar popup */
.datepicker--open {
  gap: var(--space-ui-small-m, 4px);
}

/* =============================================================================
 * Input Trigger Container
 * ============================================================================= */
.datepicker__trigger {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
  cursor: pointer;
}

.datepicker__trigger .datepicker__input {
  flex: 1;
}

/* Right UI container with Cancel (X) and Chevron */
.datepicker__right-ui {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 2;
}

/* Clear button styling */
.datepicker__clear-btn {
  flex-shrink: 0;
}

/* Clear button gray color - uses Gray/color-5 */
.datepicker__clear-gray.button {
  color: var(--color-gray-5, #7a7e7c);
}

.datepicker__clear-gray.button:hover:not(:disabled) {
  color: var(--color-gray-7, #5d6561);
  background-color: var(--color-gray-1, #eaebea);
}

/* Chevron button styling */
.datepicker__chevron-btn {
  flex-shrink: 0;
}

.datepicker__chevron-icon--open {
  transform: rotate(180deg);
}

.datepicker__chevron-btn svg {
  transition: transform var(--transition-input, 250ms) cubic-bezier(var(--transition-bezier, 0.16, 1, 0.3, 1));
}

/* =============================================================================
 * Calendar Popup Container
 * From Figma: Datepicker/Expander - Popup Small with shadow
 * ============================================================================= */
.datepicker__popup {
  position: absolute;
  top: calc(100% + var(--space-ui-small-m, 4px));
  left: 0;
  width: 352px; /* From Figma: w-[352px] */
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  
  background-color: var(--color-gray-0);
  border-radius: var(--radius-popup, 4px);
  /* Shadow/Card/Default from Figma */
  box-shadow: 
    2px 6px 12px 0px rgba(83, 81, 69, 0.06),
    0px 1px 2px 0px rgba(35, 33, 22, 0.02);
  
  overflow: hidden;
  
  /* Animation */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  
  transition: 
    opacity var(--transition-input, 250ms) cubic-bezier(var(--transition-bezier, 0.16, 1, 0.3, 1)),
    transform var(--transition-input, 250ms) cubic-bezier(var(--transition-bezier, 0.16, 1, 0.3, 1)),
    visibility var(--transition-input, 250ms);
  
  z-index: 100;
}

.datepicker--open .datepicker__popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* =============================================================================
 * Calendar Header
 * From Figma: data-name="Header" with bg-gray-05 and border-bottom
 * ============================================================================= */
.datepicker__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  
  padding: var(--space-ui-small-l, 12px) var(--space-ui-medium-s, 16px);
  
  background-color: var(--color-gray-05, #f2f3f2);
  border-bottom: var(--border-input-width, 1px) solid var(--color-gray-1);
}

/* Navigation row: prev, month-year, next */
.datepicker__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

/* Month-Year title */
.datepicker__title {
  flex: 1 0 0;
  min-height: 1px;
  min-width: 1px;
  
  font-family: var(--font-ui);
  font-size: var(--typo-h4-font-size, 16px);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--typo-h4-line-height, 28px);
  color: var(--color-gray-10);
  text-align: center;
  white-space: pre-wrap;
}

/* Navigation buttons - 32px wide from Figma */
.datepicker__nav-btn {
  width: 32px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure nav button icons are visible */
.datepicker__nav-btn svg {
  color: var(--color-gray-10);
  width: 20px;
  height: 20px;
}

/* Weekday header row */
.datepicker__weekdays {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  
  font-family: var(--font-ui);
  font-size: var(--typo-p-regular-font-size, 14px);
  font-weight: var(--font-weight-normal, 400);
  line-height: var(--typo-p-regular-line-height, 24px);
  color: var(--color-gray-6);
  text-align: center;
  white-space: pre-wrap;
}

.datepicker__weekday {
  flex: 1 0 0;
  max-width: 36px;
  min-height: 1px;
  min-width: 1px;
}

/* =============================================================================
 * Calendar Content (Days Grid)
 * From Figma: data-name="Content" with p-16px
 * ============================================================================= */
.datepicker__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  
  padding: var(--space-ui-medium-s, 16px);
  
  background-color: var(--color-gray-0);
}

/* Days container */
.datepicker__days {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  width: 100%;
}

/* Days row */
.datepicker__week {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

/* =============================================================================
 * Day Buttons
 * From Figma: Button Tertiary variants, 36px square
 * ============================================================================= */
.datepicker__day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 6px 12px;
  
  background: transparent;
  border: var(--border-input-width, 1px) solid transparent;
  border-radius: var(--radius-button, 2px);
  
  font-family: var(--font-ui);
  font-size: var(--typo-btn-tertiary-font-size, 12px);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--typo-btn-tertiary-line-height, 24px);
  color: var(--color-gray-10);
  text-align: center;
  text-transform: uppercase;
  
  cursor: pointer;
  
  transition: 
    background-color var(--transition-button, 350ms) cubic-bezier(var(--transition-bezier, 0.16, 1, 0.3, 1)),
    border-color var(--transition-button, 350ms) cubic-bezier(var(--transition-bezier, 0.16, 1, 0.3, 1));
}

/* Hover state */
.datepicker__day:hover:not(.datepicker__day--disabled):not(.datepicker__day--selected) {
  background-color: var(--color-gray-075, #f4f5f4);
}

/* Selected day - brand primary background with accent text color */
.datepicker__day--selected {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  /* From Figma: text-[color:var(--colors/brand/accent,#080c0a)] */
  color: var(--color-brand-accent, var(--color-gray-10));
}

/* Today indicator */
.datepicker__day--today:not(.datepicker__day--selected) {
  border-color: var(--color-gray-4);
}

/* Disabled/outside month days */
.datepicker__day--disabled {
  color: #bdbec2; /* From Figma: ABC/Gray/Gray-3 */
  cursor: not-allowed;
}

.datepicker__day--disabled:hover {
  background: transparent;
}

/* Outside current month */
.datepicker__day--outside {
  color: #bdbec2;
}

/* ============================================================================
 * ProductCard
 * Figma parent: 3676:10558
 * 
 * Brand differences handled via [data-brand]:
 *   CLS: no padding, no border, inner-radius 2px, no shadow
 *   ABC: padding medium-s, border 1px gray-05, radius-card 12px, card shadow
 * 
 * Hover:
 *   CLS: image zoom (scale 1.05)
 *   ABC: border → success color, different shadow
 * ============================================================================ */

/* --------------------------------------------------------------------------
 * Root
 * -------------------------------------------------------------------------- */

.ds-product-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow var(--transition-button) cubic-bezier(var(--transition-bezier)),
              border-color var(--transition-button) cubic-bezier(var(--transition-bezier));
}

/* CLS brand — no padding, no border, no shadow, no card radius */
[data-brand="CLS"] .ds-product-card {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

/* ABC brand — padded card with border, shadow, and card radius */
[data-brand="ABC"] .ds-product-card {
  padding: var(--space-ui-medium-s);
  border: var(--border-input-width) solid var(--color-gray-05);
  border-radius: var(--radius-card);
  background: var(--color-gray-0);
  box-shadow:
    0px 1px 3px 0px rgba(32, 32, 32, 0.02),
    0px 2px 12px 0px rgba(71, 71, 71, 0.08);
}

/* --------------------------------------------------------------------------
 * Hover states
 * -------------------------------------------------------------------------- */

/* Desktop-only hover states (≥ 1024px) */
@media (min-width: 1024px) {
  /* CLS hover — image zoom */
  [data-brand="CLS"] .ds-product-card:hover .ds-product-card__image {
    transform: scale(1.05);
  }

  /* ABC hover — border + shadow change + image zoom */
  [data-brand="ABC"] .ds-product-card:hover {
    border-color: var(--color-ui-success);
    box-shadow:
      0px 1px 3px 0px rgba(28, 30, 33, 0.01),
      0px 2px 12px 0px rgba(55, 86, 175, 0.04);
  }

  [data-brand="ABC"] .ds-product-card:hover .ds-product-card__image {
    transform: scale(1.05);
  }
}

/* --------------------------------------------------------------------------
 * Image
 * -------------------------------------------------------------------------- */

.ds-product-card__image-wrap {
  display: flex;
  position: relative;
  width: 100%;
  overflow: hidden;
}

[data-brand="CLS"] .ds-product-card__image-wrap {
  border-radius: var(--radius-inner-radius);
}

[data-brand="ABC"] .ds-product-card__image-wrap {
  border-radius: var(--radius-inner-radius);
}

/* 4:5 aspect ratio container */
.ds-product-card__image-ratio {
  position: relative;
  width: 100%;
  padding-bottom: 125%; /* 5/4 = 1.25 = 125% → 4:5 aspect ratio */
  background: var(--color-gray-05);
}

.ds-product-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--transition-drawer) cubic-bezier(var(--transition-bezier)),
              transform var(--transition-drawer) cubic-bezier(var(--transition-bezier));
}

/* --- Dual image: desktop hover fade --- */
.ds-product-card__image--primary {
  opacity: 1;
  z-index: 1;
}

.ds-product-card__image--secondary {
  opacity: 0;
  z-index: 2;
}

/* Desktop (≥ 1024px): hover swaps images via opacity */
@media (min-width: 1024px) {
  .ds-product-card__image-wrap--dual:hover .ds-product-card__image--primary {
    opacity: 0;
  }
  .ds-product-card__image-wrap--dual:hover .ds-product-card__image--secondary {
    opacity: 1;
  }
}

/* --- Dual image: mobile swipe --- */
/* Mobile (< 1024px): controlled by JS adding --mobile-hidden / --mobile-visible classes */
@media (max-width: 1023px) {
  .ds-product-card__image--primary.ds-product-card__image--mobile-hidden {
    opacity: 0;
  }
  .ds-product-card__image--secondary.ds-product-card__image--mobile-visible {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
 * Bullet indicators (mobile only)
 * -------------------------------------------------------------------------- */

.ds-product-card__bullets {
  display: none;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  gap: 6px;
  align-items: center;
}

@media (max-width: 1023px) {
  .ds-product-card__bullets {
    display: flex;
  }
}

.ds-product-card__bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.5);
  transition: background var(--transition-input) cubic-bezier(var(--transition-bezier));
}

.ds-product-card__bullet--active {
  background: var(--color-gray-0);
}

/* --------------------------------------------------------------------------
 * Selected badge
 * -------------------------------------------------------------------------- */

.ds-product-card__badge {
  position: absolute;
  top: 6px;
  right: 6px;
}

/* Badge text — Figma: Title/H6 */
.ds-product-card__badge-text {
  display: inline-block;
  padding: var(--space-ui-small-s) var(--space-ui-small-m);
  background: var(--color-ui-success);
  font-family: var(--font-ui);
  font-size: var(--typo-h6-font-size);
  line-height: var(--typo-h6-line-height);
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  color: var(--color-gray-0);
}

[data-brand="CLS"] .ds-product-card__badge-text {
  border-radius: var(--radius-inner-radius);
}

[data-brand="ABC"] .ds-product-card__badge-text {
  border-radius: var(--radius-inner-radius);
}

/* --------------------------------------------------------------------------
 * Content
 * -------------------------------------------------------------------------- */

.ds-product-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

/* Title — Figma: Title/H6 */
.ds-product-card__title {
  width: 100%;
  padding-top: var(--space-ui-small-l);
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--typo-h6-font-size);
  line-height: var(--typo-h6-line-height);
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  color: var(--color-gray-10);
}

/* Description — Figma: Paragraph/P.Small */
.ds-product-card__description {
  width: 100%;
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--typo-p-small-font-size);
  line-height: var(--typo-p-small-line-height);
  font-weight: var(--font-weight-normal, 400);
  color: var(--color-gray-8);
}

/* Price wrapper — spacing only, typography handled by Price component */
.ds-product-card__price {
  width: 100%;
  padding-top: var(--space-ui-small-s);
  margin: 0;
}

/* --------------------------------------------------------------------------
 * Color swatches
 * -------------------------------------------------------------------------- */

.ds-product-card__colors {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  padding-top: var(--space-ui-small-l);
  width: 100%;
}

.ds-product-card__color-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-ui-small-s);
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.ds-product-card__color-swatch {
  display: block;
  width: 12px;
  height: 12px;
  border: var(--border-input-width) solid var(--color-gray-05);
  flex-shrink: 0;
}

[data-brand="CLS"] .ds-product-card__color-swatch {
  border-radius: var(--radius-inner-radius);
}

[data-brand="ABC"] .ds-product-card__color-swatch {
  border-radius: var(--radius-inner-radius);
}

.ds-product-card__color-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  padding: 0 var(--space-ui-small-s);
  background: var(--color-gray-05);
  border: none;
  font-family: var(--font-ui, sans-serif);
  font-weight: var(--font-weight-medium, 500);
  font-size: 8px;
  line-height: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  /* auto-expand to fit text */
  width: auto;
  min-width: 12px;
}

[data-brand="CLS"] .ds-product-card__color-more {
  border-radius: var(--radius-inner-radius);
}

[data-brand="ABC"] .ds-product-card__color-more {
  border-radius: var(--radius-inner-radius);
}

/* ============================================================
   FullwidthBlock — Design System Component
   Figma node: 3869:104
   ============================================================ */

/* ── Root / Section ──────────────────────────────────────── */

.fullwidth-block {
  width: 100%;
}

/* ── Container ───────────────────────────────────────────── */

.fullwidth-block__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: var(--space-ui-large-m) var(--layout-padding-mobile);
}

@media (min-width: 1024px) {
  .fullwidth-block__container {
    padding-left: var(--layout-padding-desktop);
    padding-right: var(--layout-padding-desktop);
  }
}

/* ── Image ───────────────────────────────────────────────── */

.fullwidth-block__image-wrapper {
  width: 100%;
  aspect-ratio: 1360 / 400;
  border-radius: var(--radius-card);
  overflow: hidden;
  flex-shrink: 0;
  padding-bottom: var(--space-ui-medium-l);
}

.fullwidth-block__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
  pointer-events: none;
}

/* ── Content Wrapper ─────────────────────────────────────── */

.fullwidth-block__content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: var(--space-ui-medium-l);
}

/* ── Content (max 1024px, centered) ─────────────────────── */

.fullwidth-block__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1024px;
}

/* ── Subtitle ────────────────────────────────────────────── */

.fullwidth-block__subtitle-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding-top: var(--space-ui-medium-l);
}

.fullwidth-block__subtitle {
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-gray-10);
}

/* ── Main Copy ───────────────────────────────────────────── */

.fullwidth-block__main-copy-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: var(--space-ui-medium-l);
}

.fullwidth-block__main-copy {
  width: 100%;
  max-width: 1024px;
  text-align: center;
  color: var(--color-gray-10);
}

/* ── Additional Copy ─────────────────────────────────────── */

.fullwidth-block__additional-copy-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding-top: var(--space-ui-medium-l);
}

.fullwidth-block__additional-copy {
  width: 100%;
  text-align: center;
  color: var(--color-gray-10);
}

/* ── Tags ────────────────────────────────────────────────── */

.fullwidth-block__tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding-top: var(--space-ui-medium-l);
}

.fullwidth-block__tag {
  display: inline-flex;
  align-items: center;
  padding: 6px var(--space-ui-medium-s);
  background-color: var(--color-gray-1);
  border-radius: var(--radius-card);
  color: var(--color-gray-10);
  flex-shrink: 0;
}

/* ── Hyperlink ───────────────────────────────────────────── */

.fullwidth-block__hyperlink-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: var(--space-ui-medium-l);
}

/* ============================================================
   HeroBlock — Design System Component
   Figma node: 3869:14163

   Full-width hero banner: content left + visual right (desktop),
   stacked on mobile. Uses DS tokens for all values.

   Mobile-first, desktop breakpoint ≥ 1024px.
   ============================================================ */

/* ── Root ─────────────────────────────────────────────────── */

.hero-block {
  width: 100%;
  background: var(--color-gray-1);
  overflow: clip;
  background-size: cover;
  background-position: center;
}

/* ── Container ───────────────────────────────────────────── */

.hero-block__container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 0 var(--layout-padding-mobile);
}

/* ── Content side ────────────────────────────────────────── */

.hero-block__content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.hero-block__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: var(--space-ui-large-s) 0;
}

/* ── Subtitle ────────────────────────────────────────────── */

.hero-block__subtitle-row {
  width: 100%;
  overflow: clip;
  padding-bottom: var(--space-ui-small-l);
}

.hero-block__subtitle {
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-gray-10);
  margin: 0;
}

/* ── Title ───────────────────────────────────────────────── */

.hero-block__title-row {
  width: 100%;
  overflow: clip;
}

.hero-block__title {
  width: 100%;
  text-align: center;
  color: var(--color-gray-10);
  margin: 0;
}

/* ── Copy ────────────────────────────────────────────────── */

.hero-block__copy-row {
  width: 100%;
  padding-top: var(--space-ui-medium-s);
}

.hero-block__copy {
  width: 100%;
  text-align: center;
  color: var(--color-gray-10);
  margin: 0;
}

/* ── CTA ─────────────────────────────────────────────────── */

.hero-block__cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: var(--space-ui-medium-l);
}

/* ── Caption ─────────────────────────────────────────────── */

.hero-block__caption-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: var(--space-ui-medium-m);
}

.hero-block__caption {
  width: 100%;
  text-align: center;
  color: var(--color-gray-8);
  margin: 0;
}

/* ── Visual side ─────────────────────────────────────────── */

.hero-block__visual {
  width: 100%;
  aspect-ratio: 390 / 291;
  position: relative;
}

.hero-block__visual-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* ── Overlay (custom content on top of visual) ───────────── */

.hero-block__overlay {
  display: none;
}

/* ============================================================
   Desktop ≥ 1024px
   Side-by-side: content left (flex: 1), visual right (flex: 1)
   Container: 512px height, items-end, gap 40px
   ============================================================ */

@media (min-width: 1024px) {
  .hero-block__container {
    flex-direction: row;
    align-items: flex-end;
    max-width: var(--layout-max-width);
    height: 512px;
    padding: 0 var(--layout-padding-desktop);
    gap: 40px;
  }

  .hero-block__content {
    flex: 1 0 0;
    height: 100%;
  }

  .hero-block__wrapper {
    max-width: 520px;
    width: 100%;
  }

  .hero-block__visual {
    flex: 1 0 0;
    aspect-ratio: 660 / 492;
    min-width: 300px;
    min-height: 224px;
    height: auto;
    align-self: flex-end;
    border-radius: 1px 0 0 1px;
  }

  .hero-block__visual-image {
    border-radius: 1px 0 0 1px;
  }

  /* Overlay becomes visible on desktop */
  .hero-block__overlay {
    display: flex;
    position: absolute;
    right: 0;
    bottom: var(--space-ui-large-s);
  }
}

/* ============================================================
   Dark theme — white text on dark/image background
   Applied via `theme="dark"` prop → .hero-block--dark
   ============================================================ */

.hero-block--dark {
  background-color: var(--color-gray-10);
}

.hero-block--dark .hero-block__subtitle,
.hero-block--dark .hero-block__title,
.hero-block--dark .hero-block__copy {
  color: var(--color-gray-0);
}

.hero-block--dark .hero-block__caption {
  color: var(--color-gray-4);
}

/* ============================================================================
 * ProductsGridBlock — DS responsive product grid
 * Figma node: 3871:1020
 *
 * Defaults:
 *   row-gap:    var(--space-ui-large-s)  = 48px
 *   column-gap: var(--space-ui-medium-l) = 32px
 *   columns:    1 (≤375) → 2 (376–767) → 4 (≥768)
 *
 * Override via CSS custom properties:
 *   --products-grid-row-gap
 *   --products-grid-col-gap
 *   --products-grid-cols      (base ≤375)
 *   --products-grid-cols-sm   (376–767)
 *   --products-grid-cols-md   (≥768)
 * ========================================================================== */

/* ── Section wrapper ── */
.ds-products-grid-block {
  width: 100%;
  padding-top: var(--pgb-pt, var(--space-ui-large-m));
  padding-bottom: var(--pgb-pb, var(--space-ui-large-m));
  background-color: var(--pgb-bg, transparent);
  background-image: var(--pgb-bg-image, none);
  background-size: var(--pgb-bg-size, cover);
  background-position: var(--pgb-bg-position, center);
  background-repeat: no-repeat;
}

/* ── Dark theme ─ white text on dark/image backgrounds ── */
.ds-products-grid-block--dark .ds-products-grid-block__title,
.ds-products-grid-block--dark .ds-products-grid-block__subtitle {
  color: var(--color-gray-0);
}

/* ── Centred container ── */
.ds-products-grid-block__container {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0 var(--space-ui-medium-s);
}

@media (min-width: 1024px) {
  .ds-products-grid-block__container {
    padding: 0 var(--layout-padding-desktop);
  }
}

/* ── Optional header ── */
.ds-products-grid-block__header {
  padding-bottom: var(--space-ui-large-s);
  text-align: center;
}

.ds-products-grid-block__title {
  margin: 0;
  color: var(--color-gray-10);
}

.ds-products-grid-block__subtitle {
  margin: 0;
  margin-top: var(--space-ui-small-l);
  color: var(--color-gray-10);
}

/* ── Optional CTA ── */
.ds-products-grid-block__cta {
  display: flex;
  justify-content: center;
  padding-top: var(--space-ui-large-m);
}

/* ── Grid ── */

.ds-products-grid {
  display: grid;
  grid-template-columns: repeat(var(--products-grid-cols, 1), 1fr);
  row-gap: var(--products-grid-row-gap, var(--space-ui-medium-l));
  column-gap: var(--products-grid-col-gap, var(--space-ui-medium-s));
  width: 100%;
}

/* ── 376px+ → 2 columns (default) ── */
@media (min-width: 376px) {
  .ds-products-grid {
    grid-template-columns: repeat(var(--products-grid-cols-sm, 2), 1fr);
    row-gap: var(--products-grid-row-gap-sm, var(--products-grid-row-gap, var(--space-ui-medium-l)));
    column-gap: var(--products-grid-col-gap-sm, var(--products-grid-col-gap, var(--space-ui-medium-s)));
  }
}

/* ── 768px+ → 4 columns (default) ── */
@media (min-width: 768px) {
  .ds-products-grid {
    grid-template-columns: repeat(var(--products-grid-cols-md, 4), 1fr);
    row-gap: var(--products-grid-row-gap-md, var(--products-grid-row-gap-sm, var(--products-grid-row-gap, var(--space-ui-large-s))));
    column-gap: var(--products-grid-col-gap-md, var(--products-grid-col-gap-sm, var(--products-grid-col-gap, var(--space-ui-medium-l))));
  }
}

/* ================================================================
   SchoolSelector — Desktop popup + Mobile bottom-sheet drawer
   Figma nodes: Desktop 3639:14237 / Mobile 3643:12850
   ================================================================ */

/* ── Overlay ── */
.ds-school-selector__overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.32);
  animation: ds-school-overlay-in var(--transition-drawer) cubic-bezier(var(--transition-bezier)) both;
}

.ds-school-selector__overlay--closing {
  animation: ds-school-overlay-out var(--transition-drawer) cubic-bezier(var(--transition-bezier)) both;
}

@keyframes ds-school-overlay-in {
  from { background-color: rgba(0, 0, 0, 0); }
  to   { background-color: rgba(0, 0, 0, 0.32); }
}

@keyframes ds-school-overlay-out {
  from { background-color: rgba(0, 0, 0, 0.32); }
  to   { background-color: rgba(0, 0, 0, 0); }
}

/* ── Shared panel base ── */
.ds-school-selector {
  background: var(--color-gray-0);
  display: flex;
  z-index: 1001;
}

/* ── Desktop: centered popup ── */
.ds-school-selector--desktop {
  width: 800px;
  max-width: 95vw;
  max-height: 95vh;
  border-radius: var(--radius-popup, 4px);
  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.12);
  flex-direction: row;
  animation: ds-school-popup-in var(--transition-drawer) cubic-bezier(var(--transition-bezier)) both;
}

.ds-school-selector--desktop.ds-school-selector--closing {
  animation: ds-school-popup-out var(--transition-drawer) cubic-bezier(var(--transition-bezier)) both;
}

@keyframes ds-school-popup-in {
  from {
    transform: translateY(100vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes ds-school-popup-out {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100vh);
  }
}

/* ── Mobile: bottom sheet ── */
.ds-school-selector--mobile {
  display: none;
}

/* ── Banner (desktop only) ── */
.ds-school-selector__banner {
  flex: 1 0 0;
  max-width: 280px;
  min-height: 100%;
  position: relative;
  border-radius: var(--radius-popup, 4px) 0 0 var(--radius-popup, 4px);
  overflow: hidden;
}

.ds-school-selector__banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* ── Content wrapper ── */
.ds-school-selector__content {
  flex: 1 0 0;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ── Container (padded area) ── */
.ds-school-selector__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-ui-large-m) var(--layout-padding-desktop);
  position: relative;
  flex: 1;
}

/* ── Close button ── */
.ds-school-selector__close {
  position: absolute;
  top: var(--space-ui-small-m);
  right: var(--space-ui-small-m);
  z-index: 2;
}

/* ── Wrapper ── */
.ds-school-selector__wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 348px;
}

/* ── Top: title + info ── */
.ds-school-selector__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-ui-small-l);
  padding-bottom: var(--space-ui-medium-m);
}

.ds-school-selector__top--class {
  padding-bottom: var(--space-ui-medium-l);
}

.ds-school-selector__title {
  color: var(--color-gray-10);
}

.ds-school-selector__info {
  background: var(--color-ui-success-background);
  padding: var(--space-ui-small-l) var(--space-ui-medium-s);
  border-radius: var(--radius-inner-radius, 2px);
}

.ds-school-selector__info-text {
  color: var(--color-ui-success);
}

/* ── Form ── */
.ds-school-selector__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-ui-medium-m);
}

.ds-school-selector__inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-ui-medium-s);
}

/* ── DS Input overrides within SchoolSelector ── */
.ds-school-selector__inputs .input-wrapper {
  width: 100%;
}

/* ── Submit button ── */
.ds-school-selector__submit {
  width: 100%;
}

/* ── Bottom area (shared base) ── */
.ds-school-selector__bottom {
  padding: var(--space-ui-medium-m) var(--layout-padding-desktop) var(--space-ui-medium-l);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ds-school-selector--desktop .ds-school-selector__bottom {
  border-bottom-right-radius: var(--radius-popup, 4px);
}

.ds-school-selector--desktop:not(:has(.ds-school-selector__banner)) .ds-school-selector__bottom {
  border-bottom-left-radius: var(--radius-popup, 4px);
}

/* ── Bottom: "school not found" variant ── */
.ds-school-selector__bottom--not-found {
  border-top: var(--border-input-width, 1px) solid var(--color-gray-2);
  background: var(--color-gray-05);
}

/* ── Bottom: "school dates" variant ── */
.ds-school-selector__bottom--dates {
  border-top: 0.5px solid var(--color-ui-warning-hover);
  background: var(--color-ui-warning-background);
}

.ds-school-selector__bottom-content {
  width: 100%;
  max-width: 348px;
  display: flex;
  flex-direction: column;
  gap: var(--space-ui-small-m);
}

.ds-school-selector__bottom-title {
  color: var(--color-gray-10);
}

/* ── School dates block ── */
.ds-school-selector__dates {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.ds-school-selector__dates-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  color: var(--color-ui-warning-hover);
}

.ds-school-selector__dates-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ds-school-selector__dates-label {
  color: var(--color-gray-6);
}

.ds-school-selector__dates-range {
  color: var(--color-gray-10);
}

.ds-school-selector__dates-desc {
  color: var(--color-gray-7);
}

/* ── Swipe handle (mobile only) ── */
/* Hide swipe handle on desktop */
.ds-school-selector__swipe-handle {
  display: none;
}

/* ================================================================
   MOBILE: < 1024px
   Bottom sheet drawer
   ================================================================ */
@media (max-width: 1023px) {
  .ds-school-selector__overlay {
    align-items: flex-end;
    justify-content: center;
  }

  /* Hide desktop popup */
  .ds-school-selector--desktop {
    display: none;
  }

  /* Show mobile bottom-sheet */
  .ds-school-selector--mobile {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
    max-height: 90vh;
    border-radius: var(--radius-drawer) var(--radius-drawer) 0 0;
    box-shadow: 0px -8px 32px 0px rgba(0, 0, 0, 0.12);
    animation: ds-school-sheet-in var(--transition-drawer) cubic-bezier(var(--transition-bezier)) both;
    overflow-y: auto;
    position: relative;
    box-sizing: border-box;
  }

  .ds-school-selector--mobile.ds-school-selector--entered {
    animation: none;
  }

  /* When an Input inside the drawer enters mobile-focus (position: fixed fullscreen),
     hide the overlay background so it doesn't bleed through, and allow the fixed
     element to escape the drawer's overflow clipping. */
  .ds-school-selector__overlay:has(.input-wrapper--mobile-focus) {
    background: transparent;
  }
  .ds-school-selector--mobile:has(.input-wrapper--mobile-focus) {
    overflow: hidden;
    transform: none !important;
    animation: none !important;
  }

  .ds-school-selector--mobile.ds-school-selector--closing {
    animation: ds-school-sheet-out var(--transition-drawer) cubic-bezier(var(--transition-bezier)) both;
  }

  @keyframes ds-school-sheet-in {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  @keyframes ds-school-sheet-out {
    to {
      transform: translateY(100%);
    }
  }

  /* Swipe handle — styled via useSwipeToClose DragHandle */
  .ds-school-selector__swipe-handle {
    display: flex;
    z-index: 2;
    cursor: grab;
  }

  .ds-school-selector__swipe-handle:active {
    cursor: grabbing;
  }

  /* Banner hidden on mobile */
  .ds-school-selector__banner {
    display: none;
  }

  /* Padding adjustments */
  .ds-school-selector__container {
    padding: var(--space-ui-large-m) var(--layout-padding-mobile);
  }

  .ds-school-selector__wrapper {
    max-width: none;
  }

  .ds-school-selector__top {
    gap: var(--space-ui-small-l);
    padding-bottom: var(--space-ui-medium-l);
  }

  .ds-school-selector__form {
    gap: var(--space-ui-medium-m);
  }

  .ds-school-selector__inputs {
    gap: var(--space-ui-medium-s);
  }

  .ds-school-selector__bottom {
    padding: var(--space-ui-medium-m) var(--layout-padding-mobile) var(--space-ui-medium-l);
  }

  .ds-school-selector__bottom-content {
    max-width: none;
  }
}

/* ================================================================
   DesignSystemPage preview container
   ================================================================ */
.ds-school-selector-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Static preview (no overlay, non-modal) */
.ds-school-selector-preview .ds-school-selector__overlay {
  position: relative;
  inset: auto;
  background: none;
  animation: none;
  z-index: auto;
}

.ds-school-selector-preview .ds-school-selector__overlay--closing {
  animation: none;
}

.ds-school-selector-preview .ds-school-selector--desktop,
.ds-school-selector-preview .ds-school-selector--mobile {
  animation: none;
  position: relative;
}

.ds-school-selector-preview .ds-school-selector--desktop.ds-school-selector--closing,
.ds-school-selector-preview .ds-school-selector--mobile.ds-school-selector--closing {
  animation: none;
}

/* Mobile preview wrapper */
.ds-school-selector-mobile-preview {
  width: 393px;
  max-width: 100%;
  position: relative;
}

.ds-school-selector-mobile-preview .ds-school-selector__overlay {
  position: relative;
  inset: auto;
  background: none;
  animation: none;
  z-index: auto;
  align-items: flex-end;
}

.ds-school-selector-mobile-preview .ds-school-selector--desktop {
  display: none;
}

.ds-school-selector-mobile-preview .ds-school-selector--mobile {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--radius-drawer, 12px) var(--radius-drawer, 12px) 0 0;
  box-shadow: 0px -8px 32px 0px rgba(0, 0, 0, 0.12);
  animation: none;
  overflow-y: auto;
  position: relative;
}

.ds-school-selector-mobile-preview .ds-school-selector__banner {
  display: none;
}

.ds-school-selector-mobile-preview .ds-school-selector__container {
  padding: var(--space-ui-large-m) var(--layout-padding-mobile);
}

.ds-school-selector-mobile-preview .ds-school-selector__wrapper {
  max-width: none;
}

.ds-school-selector-mobile-preview .ds-school-selector__bottom {
  padding: var(--space-ui-medium-m) var(--layout-padding-mobile) var(--space-ui-medium-l);
}

.ds-school-selector-mobile-preview .ds-school-selector__bottom-content {
  max-width: none;
}

.ds-school-selector-mobile-preview .ds-school-selector__swipe-handle {
  display: flex;
}

/* =============================================================================
 * QuantityInput Component Styles
 * Pixel-perfect implementation from Figma via MCP
 * 
 * Figma node: 3797:15947
 * States: Default, Hover, Focus or Populated Hover, Focus & Filled, Error
 *
 * Structure:
 *   .qty-input                    — wrapper (relative, for error tooltip)
 *     .qty-input__field           — input container (border, bg, radius)
 *       .qty-input__content       — flex row (minus · value · plus)
 *         .qty-input__btn         — stepper button (tertiary style)
 *         .qty-input__value-wrap  — center cell with value text
 *     .qty-input__error           — absolute error tooltip below
 * ============================================================================= */

/* =============================================================================
 * CSS Custom Properties — from Figma tokens (reuses input tokens)
 * ============================================================================= */
.qty-input {
  --qty-bg-default: var(--color-gray-0);             /* white — Default & Focus or Populated */
  --qty-bg-hover: var(--color-gray-025);             /* #f7f8f7 — Hover / Focus&Filled / Error */
  --qty-border-default: var(--color-gray-4);         /* #9ca09e — Default border */
  --qty-border-hover: var(--color-gray-10);          /* #080c0a — Hover / Focus border */
  --qty-border-error: var(--color-ui-error);         /* #b50b0b — Error border */
  --qty-text-color: var(--color-gray-10);            /* #080c0a — Value text */
  --qty-text-disabled: var(--color-gray-4);          /* #9ca09e — Disabled text */
  --qty-btn-bg: var(--color-gray-0);                 /* white — Button bg */
  --qty-btn-border: var(--color-gray-0);             /* white — Button border (invisible) */
  --qty-height: 52px;
  --qty-border-width: var(--border-input-width, 1px);
  --qty-border-radius: var(--radius-input, 2px);
  --qty-btn-radius: var(--radius-button, 2px);
  --qty-btn-size: 36px;
  --qty-value-width: 36px;

  /* Padding — from Figma: px = input-padding-right (8px), py = input-padding-top/bottom (8px) */
  --qty-padding-x: calc(var(--typo-input-padding-right, 8) * 1px);
  --qty-padding-y: calc(var(--typo-input-padding-top, 8) * 1px);

  /* Transitions */
  --qty-transition: var(--transition-input, 250ms);
  --qty-timing: cubic-bezier(var(--transition-bezier, 0.16, 1, 0.3, 1));

  /* Error tooltip */
  --qty-error-bg: var(--color-ui-error-background, #f7eeee);
  --qty-error-border: var(--color-gray-0);
  --qty-error-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.12);

  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

/* =============================================================================
 * Field — the bordered input container
 * ============================================================================= */
.qty-input__field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: var(--qty-height);
  outline: none;
}

.qty-input__field::after {
  /* Focus-visible ring for accessibility (keyboard users) */
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--qty-border-radius) + 2px);
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color var(--qty-transition) var(--qty-timing);
}

.qty-input__field:focus-visible::after {
  border-color: var(--color-brand-primary, #28e280);
}

/* =============================================================================
 * Content — flex row: [−] value [+]
 * ============================================================================= */
.qty-input__content {
  display: flex;
  align-items: center;
  min-height: var(--qty-height);
  padding: var(--qty-padding-y) var(--qty-padding-x);
  background: var(--qty-bg-default);
  border: var(--qty-border-width) solid var(--qty-border-default);
  border-radius: var(--qty-border-radius);
  transition:
    background var(--qty-transition) var(--qty-timing),
    border-color var(--qty-transition) var(--qty-timing);
  cursor: default;
  user-select: none;
}

/* =============================================================================
 * State variants
 * ============================================================================= */

/* Hover — bg gray-025, border gray-10 */
.qty-input--hover .qty-input__content {
  background: var(--qty-bg-hover);
  border-color: var(--qty-border-hover);
}

/* Focus or Populated Hover — bg gray-0, border gray-4 (same as default visually, 
   but Figma shows it as a distinct variant; matches "Focus or Populated Hover") */
/* Focus & Filled — bg gray-025, border gray-10 */
.qty-input--focus .qty-input__content {
  background: var(--qty-bg-hover);
  border-color: var(--qty-border-hover);
}

/* Error — bg gray-025, border ui-error */
.qty-input--error .qty-input__content {
  background: var(--qty-bg-hover);
  border-color: var(--qty-border-error);
}

/* Disabled */
.qty-input--disabled .qty-input__content {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =============================================================================
 * Stepper Buttons — tertiary style from Figma (Button Tertiary / White)
 * ============================================================================= */
.qty-input__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--qty-btn-size);
  height: 36px;
  padding: 6px 12px;
  background: var(--qty-btn-bg);
  border: var(--qty-border-width) solid var(--qty-btn-border);
  border-radius: var(--qty-btn-radius);
  color: var(--qty-text-color);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    color var(--qty-transition) var(--qty-timing),
    background var(--qty-transition) var(--qty-timing);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.qty-input__btn:hover:not(:disabled) {
  background: var(--color-gray-1, #eef0ef);
}

.qty-input__btn:active:not(:disabled) {
  background: var(--color-gray-2, #d8dbd9);
}

.qty-input__btn--disabled,
.qty-input__btn:disabled {
  color: var(--qty-text-disabled);
  cursor: default;
  pointer-events: none;
}

.qty-input__btn svg {
  flex-shrink: 0;
}

/* =============================================================================
 * Value — center cell
 * ============================================================================= */
.qty-input__value-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: var(--qty-value-width);
  width: var(--qty-value-width);
  flex-shrink: 0;
}

.qty-input__value {
  flex: 1;
  text-align: center;
  color: var(--qty-text-color);
  /* Typography: typo-input class handles font-size, line-height, font-family */
}

.qty-input--disabled .qty-input__value {
  color: var(--qty-text-disabled);
}

/* =============================================================================
 * Error tooltip — absolute below the field
 * ============================================================================= */
.qty-input__error {
  position: absolute;
  bottom: -28px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-ui-small-m, 4px) var(--space-ui-small-l, 8px);
  background: var(--qty-error-bg);
  border: 1px solid var(--qty-error-border);
  border-radius: var(--qty-border-radius);
  box-shadow: var(--qty-error-shadow);
  white-space: nowrap;
  z-index: 10;

  /* Fade-in animation */
  animation: qty-error-in var(--qty-transition) var(--qty-timing) both;
}

@keyframes qty-error-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.qty-input__error-text {
  color: var(--color-ui-error, #b50b0b);
  margin: 0;
  /* Uses P.Small from Figma: 12px / 18px */
}

/* Apply typo-body-sm styles inline (matches Figma P.Small) */
.qty-input__error-text {
  font-size: var(--typo-p-small-font-size, 12px);
  line-height: var(--typo-p-small-line-height, 18px);
  font-weight: var(--font-weight-normal, 400);
}

/* =============================================================================
 * LabelSelector — Configurator
 * Small selectable label button for product configurators (size/qty picker).
 *
 * Figma component set: 3812:1131
 * States: Default, Hover, Selected, Disabled
 *
 * Tokens consumed:
 *   --color-configurator-selector-background
 *   --color-configurator-selector-border
 *   --configurator-size-radius       (unitless → * 1px)
 *   --configurator-selector-font-size (already has px)
 *   --border-input-width
 *   --color-ui-success
 *   --color-gray-0 / gray-3 / gray-10
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * Root element — <button> or <div> (disabled)
 * -------------------------------------------------------------------------- */
.cfg-label-selector {
  /* Reset */
  appearance: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  border: none;

  /* Layout */
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 48px;
  height: 40px;
  isolation: isolate;
  cursor: pointer;
}

/* -----------------------------------------------------------------------------
 * Inner container — background + border
 * -------------------------------------------------------------------------- */
.cfg-label-selector__container {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  position: relative;
  z-index: 1;

  background: var(--color-configurator-selector-background);
  border: var(--border-input-width, 1px) solid var(--color-configurator-selector-border);
  border-radius: calc(var(--configurator-size-radius) * 1px);

  transition:
    border-color var(--transition-input) cubic-bezier(var(--transition-bezier)),
    background-color var(--transition-input) cubic-bezier(var(--transition-bezier)),
    box-shadow var(--transition-input) cubic-bezier(var(--transition-bezier));
}

/* -----------------------------------------------------------------------------
 * Value text (e.g. "1", "S", "M")
 * -------------------------------------------------------------------------- */
.cfg-label-selector__value {
  position: relative;
  z-index: 2;
  font-size: var(--configurator-selector-font-size);
  font-weight: var(--font-weight-medium, 500);
  line-height: normal;
  color: var(--color-gray-10);
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
 * Boolean icons (Check ✓ / X ✕) — sit inside the container
 * -------------------------------------------------------------------------- */
.cfg-label-selector__booleans {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.cfg-label-selector__bool-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-gray-10);
}

/* -----------------------------------------------------------------------------
 * Favourite heart badge — positioned top-right, overflows the container
 * -------------------------------------------------------------------------- */
.cfg-label-selector__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.cfg-label-selector__badge-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* =============================================================================
 * States
 * ============================================================================= */

/* --- Hover ---------------------------------------------------------------- */
.cfg-label-selector:hover:not(.cfg-label-selector--disabled):not(.cfg-label-selector--selected)
  .cfg-label-selector__container {
  background: var(--color-gray-0);
  border-color: var(--color-gray-10);
}

/* --- Selected ------------------------------------------------------------- */
.cfg-label-selector--selected .cfg-label-selector__container {
  background: var(--color-gray-0);
  border-color: var(--color-ui-success);
}

/* --- Disabled ------------------------------------------------------------- */
.cfg-label-selector--disabled {
  cursor: not-allowed;
}

.cfg-label-selector--disabled .cfg-label-selector__container {
  border-color: var(--color-configurator-selector-border);
}

.cfg-label-selector--disabled .cfg-label-selector__value {
  color: var(--color-gray-3);
}

.cfg-label-selector--disabled .cfg-label-selector__bool-icon {
  color: var(--color-gray-3);
}

/* --- Focus-visible -------------------------------------------------------- */
.cfg-label-selector:focus-visible .cfg-label-selector__container {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

/* =============================================================================
 * ColorSelector — Configurator
 * Circular colour-swatch picker with tooltip on hover.
 *
 * Figma component set: 3812:1202
 * States: Default, Hover, Selected, Selected & Hover, Error
 *
 * Tokens consumed:
 *   --color-gray-0 / gray-3 / gray-10
 *   --color-configurator-selector-border
 *   --configurator-offset-space          (unitless → * 1px)
 *   --configurator-color-radius          (unitless → * 1px)
 *   --configurator-color-radius-inner    (unitless → * 1px)
 *   --color-ui-success / --color-ui-error
 *   --radius-button
 *   --space-ui-small-l / --space-ui-small-m
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * Root element — <button> (interactive) or <div> (error display-only)
 * -------------------------------------------------------------------------- */
.cfg-color-selector {
  /* Reset */
  appearance: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  border: none;

  /* Layout */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
}

/* -----------------------------------------------------------------------------
 * Swatch ring (outer circle — white bg + border)
 * -------------------------------------------------------------------------- */
.cfg-color-selector__swatch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 44px;
  height: 44px;
  padding: calc(var(--configurator-offset-space) * 1px);
  box-sizing: border-box;

  background: var(--color-gray-0);
  border: 1px solid var(--color-configurator-selector-border);
  border-radius: calc(var(--configurator-color-radius) * 1px);
  flex-shrink: 0;

  transition:
    border-color var(--transition-input) cubic-bezier(var(--transition-bezier)),
    box-shadow var(--transition-input) cubic-bezier(var(--transition-bezier));
}

/* -----------------------------------------------------------------------------
 * Colour fill (inner circle)
 * -------------------------------------------------------------------------- */
.cfg-color-selector__color {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--configurator-color-radius-inner) * 1px);
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
 * Tooltip — visible on hover, positioned below the swatch
 * -------------------------------------------------------------------------- */
.cfg-color-selector__tooltip {
  position: absolute;
  top: 46px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 60px;
  padding: var(--space-ui-small-m) var(--space-ui-small-l);

  background: var(--color-gray-0);
  border-radius: calc(var(--radius-button, 2) * 1px);
  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.12);

  /* Typography — p-small */
  font-size: 12px;
  line-height: 18px;
  color: var(--color-gray-10);
  text-align: center;
  white-space: nowrap;

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-input) cubic-bezier(var(--transition-bezier));
}

/* =============================================================================
 * States
 * ============================================================================= */

/* --- Hover (all interactive states) --------------------------------------- */
.cfg-color-selector:hover .cfg-color-selector__swatch {
  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.12);
}

.cfg-color-selector:hover:not(.cfg-color-selector--selected):not(.cfg-color-selector--error)
  .cfg-color-selector__swatch {
  border-color: var(--color-gray-10);
}

.cfg-color-selector:hover .cfg-color-selector__tooltip {
  opacity: 1;
  visibility: visible;
}

/* --- Selected ------------------------------------------------------------- */
.cfg-color-selector--selected .cfg-color-selector__swatch {
  border-color: var(--color-ui-success);
}

/* --- Error ---------------------------------------------------------------- */
.cfg-color-selector--error .cfg-color-selector__swatch {
  border-color: var(--color-ui-error);
}

.cfg-color-selector--error:hover .cfg-color-selector__swatch {
  box-shadow: none;
}

/* --- Focus-visible -------------------------------------------------------- */
.cfg-color-selector:focus-visible .cfg-color-selector__swatch {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

/* =============================================================================
 * InfoButton — Configurator
 * Small circular (?) button with tooltip on hover.
 *
 * Figma node: 3815:1665 (parent), 3815:1664 (default), 3815:1666 (hover)
 *
 * Tokens consumed:
 *   Typography: typo-body-sm, typo-label
 *   Colors:     --color-gray-05, --color-gray-1, --color-gray-5, --color-gray-10, --color-gray-0
 *   Spacing:    --space-ui-small-m, --space-ui-small-l
 *   Radius:     --radius-button
 *   Border:     --border-input-width
 *   Transition: --transition-input, --transition-bezier
 *   Shadow:     Shadow/Popup (0 8px 32px rgba(0,0,0,0.12))
 * ============================================================================= */

.cfg-info-btn {
  /* Reset */
  appearance: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  border: none;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

/* --- Circle container ---------------------------------------------------- */
.cfg-info-btn__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: -1px; /* optical alignment with typo-h4 cap-height */
  border-radius: 18px;
  overflow: hidden;

  transition: opacity var(--transition-input) cubic-bezier(var(--transition-bezier));
}

.cfg-info-btn:hover .cfg-info-btn__circle {
  opacity: 0.7;
}

/* --- Question mark ------------------------------------------------------- */
.cfg-info-btn__icon {
  color: var(--color-gray-5);
  line-height: 1;
}

/* --- Tooltip ------------------------------------------------------------- */
.cfg-info-btn__tooltip {
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);

  padding: var(--space-ui-small-m) var(--space-ui-small-l);
  background: var(--color-gray-0);
  border-radius: var(--radius-button);
  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.12);

  max-width: 320px;
  width: max-content;
  white-space: normal;
  text-align: center;
  color: var(--color-gray-10);

  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-input) cubic-bezier(var(--transition-bezier));
}

.cfg-info-btn:hover .cfg-info-btn__tooltip {
  opacity: 1;
}

/* =============================================================================
 * HeadingSmall — Configurator
 * Compact section heading row: Title / SELECTOR (?) Extra Info    +49,-
 *
 * Figma node: 3815:1534
 *
 * Tokens consumed:
 *   Typography: typo-h4, typo-h6, typo-body-sm, typo-label
 *   Colors:     --color-gray-4, --color-gray-5, --color-gray-7, --color-gray-10
 *               --color-gray-05, --color-gray-1
 *   Spacing:    --space-ui-small-s, --space-ui-small-m
 *   Border:     --border-input-width
 * ============================================================================= */

.cfg-heading-sm {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: var(--space-ui-small-m);
}

/* Main row — all content on one line */
.cfg-heading-sm__row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

/* --- Left group: title + selection + extra info (fills available space) --- */
.cfg-heading-sm__left {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: var(--space-ui-small-m);
  min-width: 0;
}

/* Title */
.cfg-heading-sm__title {
  flex-shrink: 0;
  color: var(--color-gray-10);
  white-space: nowrap;
}

/* --- Selection cluster: / SELECTOR (?) ----------------------------------- */
.cfg-heading-sm__selection-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-ui-small-s);
  flex-shrink: 0;
}

.cfg-heading-sm__selection {
  display: flex;
  align-items: center;
  gap: var(--space-ui-small-s);
  white-space: nowrap;
}

.cfg-heading-sm__separator {
  color: var(--color-gray-4);
}

.cfg-heading-sm__selection-label {
  color: var(--color-gray-7);
}

/* Info button is provided by InfoButton component (../InfoButton) */

.cfg-heading-sm__info-btn:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

/* --- Extra info ---------------------------------------------------------- */
.cfg-heading-sm__extra {
  flex: 1 0 0;
  min-width: 0;
  color: var(--color-gray-7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Price (right-aligned) ----------------------------------------------- */
.cfg-heading-sm__price {
  flex-shrink: 0;
  color: var(--color-gray-7);
  white-space: nowrap;
}

/* =============================================================================
 * HeadingMedium — Configurator
 * Mid-size section heading row:  Title (H3)                   +159,-
 *
 * Figma node: 3911:14678
 *
 * Tokens consumed:
 *   Typography: typo-h3, typo-body
 *   Colors:     --color-gray-7, --color-gray-10
 *   Spacing:    --space-ui-small-l
 * ============================================================================= */

.cfg-heading-md {
  display: flex;
  align-items: center;
  width: 100%;
  padding-bottom: var(--space-ui-small-l);
}

/* Title — fills available space */
.cfg-heading-md__title {
  flex: 1 0 0;
  min-width: 0;
  color: var(--color-gray-10);
}

/* Price — right-aligned */
.cfg-heading-md__price {
  flex-shrink: 0;
  color: var(--color-gray-7);
  white-space: nowrap;
}

/* =============================================================================
 * HeadingLarge — Configurator
 * Hero-level heading with editorial title, price and multi-paragraph description.
 *
 * Figma node: 3911:14671
 *
 * Tokens consumed:
 *   Typography: typo-h2-editorial, typo-body, typo-body-sm
 *   Colors:     --color-gray-7, --color-gray-10
 *   Spacing:    --space-ui-small-m, --space-ui-medium-s, --space-ui-medium-m
 * ============================================================================= */

.cfg-heading-lg {
  display: flex;
  flex-direction: column;
  gap: var(--space-ui-medium-s);
  align-items: flex-start;
  width: 100%;
  padding-bottom: var(--space-ui-medium-m);
}

/* --- Top block: title + price -------------------------------------------- */
.cfg-heading-lg__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-ui-small-m);
  align-items: flex-start;
  width: 100%;
}

/* Title */
.cfg-heading-lg__title {
  width: 100%;
  color: var(--color-gray-10);
  margin: 0;
}

/* Price */
.cfg-heading-lg__price {
  width: 100%;
  color: var(--color-gray-10);
}

/* --- Description --------------------------------------------------------- */
.cfg-heading-lg__description {
  width: 100%;
  color: var(--color-gray-7);
  /* Preserve paragraph whitespace / line-breaks when using plain text */
  white-space: pre-wrap;
}

/* =============================================================================
 * StickyFooter — Configurator
 * Sticky bottom bar: Total price + delivery info + CTA button.
 *
 * Figma nodes:
 *   Desktop: 3803:17976
 *   Mobile:  3917:4172
 *
 * Tokens consumed:
 *   Typography: typo-label, typo-body-editorial (mapped to p-editorial-regular),
 *               typo-h5, typo-body-sm
 *   Colors:     --color-gray-0, --color-gray-05, --color-gray-2, --color-gray-3,
 *               --color-gray-7, --color-gray-8, --color-gray-10
 *   Spacing:    --space-ui-small-s, --space-ui-small-l, --space-ui-large-m
 *   Radius:     --radius-button, --radius-popup
 *   Border:     --border-input-width
 *   Layout:     --layout-max-width, --layout-padding-desktop
 *   Shadow:     Popup (desktop), StickyFooter (mobile)
 * ============================================================================= */

/* ---------------------------------------------------------------------------
 * Root — shared
 * --------------------------------------------------------------------------- */
.cfg-sticky-footer {
  position: sticky;
  bottom: var(--space-ui-medium-s, 12px);
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

/* Preview override — static instead of sticky for DesignSystemPage */
.cfg-sticky-footer--preview-desktop {
  position: relative;
  bottom: auto;
}

/* ---------------------------------------------------------------------------
 * Mobile-first styles (< 1024px)
 * Floating rounded bar with frosted glass
 * --------------------------------------------------------------------------- */
.cfg-sticky-footer {
  background: color-mix(in srgb, var(--color-gray-0) 80%, transparent);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border-radius: var(--radius-popup, 4px);
  box-shadow:
    0px -6px 12px 0px rgba(10, 11, 10, 0.04),
    0px -8px 20px 0px rgba(10, 11, 10, 0.06);
  padding: var(--space-ui-small-l, 8px);
  margin: 0 var(--layout-padding-mobile, 28px);
}

.cfg-sticky-footer__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  width: 100%;
}

/* --- Left: price + delivery --- */
.cfg-sticky-footer__left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Total price block */
.cfg-sticky-footer__total {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 88px;
}

.cfg-sticky-footer__total-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cfg-sticky-footer__label {
  color: var(--color-gray-7);
  white-space: nowrap;
}

.cfg-sticky-footer__price {
  color: var(--color-gray-10);
  white-space: nowrap;
}

/* Delivery block — hidden on mobile by default */
.cfg-sticky-footer__delivery {
  display: none;
}

/* --- Right: CTA button --- */
.cfg-sticky-footer__right {
  display: flex;
  flex: 1;
  min-width: 0;
}

.cfg-sticky-footer__btn {
  width: 100%;
}

/* ---------------------------------------------------------------------------
 * Desktop (≥ 1024px)
 * Full-width sticky bar with border-top and popup shadow
 * --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .cfg-sticky-footer {
    position: sticky;
    bottom: 0;
    background: var(--color-gray-0);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    border-top: var(--border-input-width, 1px) solid var(--color-gray-2);
    box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.12);
    padding: 0;
    margin: 0;
    height: 80px;
  }

  .cfg-sticky-footer__inner {
    max-width: var(--layout-max-width, 1440px);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--layout-padding-desktop, 40px);
    justify-content: space-between;
    gap: 0;
  }

  /* Left column — fills half, shows delivery */
  .cfg-sticky-footer__left {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Total: more padding on desktop */
  .cfg-sticky-footer__total {
    width: auto;
    padding-right: 52px;
    text-align: left;
    align-items: flex-start;
  }

  /* Delivery: visible on desktop */
  .cfg-sticky-footer__delivery {
    display: flex;
    align-items: center;
    align-self: stretch;
    border-left: var(--border-input-width, 1px) solid var(--color-gray-2);
    padding-left: 52px;
  }

  .cfg-sticky-footer__delivery-content {
    display: flex;
    align-items: center;
    gap: var(--space-ui-small-l, 12px);
  }

  .cfg-sticky-footer__delivery-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--color-gray-05);
    border-radius: var(--radius-button, 2px);
    color: var(--color-gray-10);
  }

  .cfg-sticky-footer__delivery-text {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
  }

  .cfg-sticky-footer__delivery-headline {
    display: flex;
    align-items: center;
    gap: var(--space-ui-small-s, 4px);
  }

  .cfg-sticky-footer__delivery-time,
  .cfg-sticky-footer__delivery-cost {
    color: var(--color-gray-10);
    text-transform: uppercase;
  }

  .cfg-sticky-footer__delivery-dot {
    color: var(--color-gray-3);
  }

  .cfg-sticky-footer__delivery-desc {
    color: var(--color-gray-8);
  }

  /* Right column — CTA with padding */
  .cfg-sticky-footer__right {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: var(--space-ui-large-m, 64px);
    padding-right: var(--layout-padding-desktop, 40px);
  }
}

/* ---------------------------------------------------------------------------
 * DesignSystemPage preview — mobile in desktop viewport
 * Container query wrapper: .cfg-sticky-footer-mobile-preview
 * --------------------------------------------------------------------------- */
.cfg-sticky-footer-mobile-preview {
  container-type: inline-size;
  container-name: cfg-sticky-footer-preview;
}

@container cfg-sticky-footer-preview (max-width: 600px) {
  .cfg-sticky-footer {
    bottom: var(--space-ui-medium-s, 12px);
    background: color-mix(in srgb, var(--color-gray-0) 80%, transparent);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border-radius: var(--radius-popup, 4px);
    border-top: none;
    box-shadow:
      0px -6px 12px 0px rgba(10, 11, 10, 0.04),
      0px -8px 20px 0px rgba(10, 11, 10, 0.06);
    padding: var(--space-ui-small-l, 8px);
    margin: 0 var(--layout-padding-mobile, 28px);
    height: auto;
  }

  .cfg-sticky-footer__inner {
    max-width: none;
    padding: 0;
    gap: 12px;
    justify-content: center;
  }

  .cfg-sticky-footer__left {
    flex: 0 0 auto;
  }

  .cfg-sticky-footer__total {
    width: 88px;
    padding-right: 0;
    text-align: center;
    align-items: center;
  }

  .cfg-sticky-footer__total-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .cfg-sticky-footer__delivery {
    display: none;
  }

  .cfg-sticky-footer__right {
    flex: 1;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ============================================================================
 * USPBlock — Design System Component
 * Figma node: 3872:1612
 *
 * Horizontal bar: USP feature items (left) + Trustpilot widget (right).
 * Mobile-first:
 *   — items hidden
 *   — only endContent (Trustpilot) visible, centered
 * Desktop (≥ 1024px):
 *   — items + endContent, row, space-between
 *
 * BEM prefix: ds-usp-block
 * ============================================================================ */

/* ── Root ── */
.ds-usp-block {
  background: var(--color-gray-05);
}

/* ── Container ── */
.ds-usp-block__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px var(--layout-padding-mobile);
  gap: var(--space-ui-medium-s);
  max-width: var(--layout-max-width);
  margin: 0 auto;
}

/* ── Feature items — hidden on mobile ── */
.ds-usp-block__items {
  display: none;
  gap: var(--space-ui-large-s);
  align-items: center;
}

.ds-usp-block__item {
  display: flex;
  align-items: center;
  gap: var(--space-ui-small-m);
  color: var(--color-gray-10);
}

.ds-usp-block__item-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-usp-block__item-label {
  white-space: nowrap;
}

/* ── End content slot (Trustpilot widget) ── */
.ds-usp-block__end {
  display: flex;
  align-items: center;
  min-height: 31px;
}

/* ── Desktop ── */
@media (min-width: 1024px) {
  .ds-usp-block__container {
    flex-direction: row;
    justify-content: space-between;
    padding: 20px var(--layout-padding-desktop);
    gap: 0;
  }

  .ds-usp-block__items {
    display: flex;
  }
}

/* ============================================================================
 * Built-in feature icons
 * ============================================================================ */

/* Single-layer SVG icon (e.g. fast-delivery) */
.ds-usp-block__icon {
  display: block;
  flex-shrink: 0;
}

/* Composite icon: 32×32 container with absolutely positioned SVG children */
.ds-usp-block__icon--composite {
  position: relative;
  width: 32px;
  height: 32px;
  overflow: hidden;
  flex-shrink: 0;
}

.ds-usp-block__icon--composite > svg {
  position: absolute;
}

/* cap + measure */
.ds-usp-block__icon-cap {
  top: 15%;
  left: 0;
  width: 100%;
  height: 80%;
}

.ds-usp-block__icon-cap-badge {
  top: 43%;
  left: 49%;
  width: 51%;
  height: 50%;
}

/* number-one wreath + ellipse */
.ds-usp-block__icon-wreath {
  top: 9%;
  left: 0;
  width: 100%;
  height: 83%;
}

.ds-usp-block__icon-ellipse {
  top: 15%;
  left: 25%;
  width: 50%;
  height: 50%;
}

/* =============================================================================
 * SecondaryBannerBlock Component Styles
 * Figma node: 3874:669 (Secondary Banner)
 * Uses design system tokens (colors, spacing, radius, transitions)
 * ============================================================================= */

/* =============================================================================
 * Root
 * ============================================================================= */
.content-banner {
  width: 100%;
}

/* =============================================================================
 * Container — max-width + layout padding
 * ============================================================================= */
.content-banner__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-ui-medium-m);
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0 var(--layout-padding-mobile);
}

@media (min-width: 1024px) {
  .content-banner__container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(640px, auto);
    gap: var(--space-ui-large-s);
    padding: 0 var(--layout-padding-desktop);
  }
}

/* Direction: reverse — swap content & visual columns on desktop */
@media (min-width: 1024px) {
  .content-banner--reverse .content-banner__content {
    order: 2;
  }
  .content-banner--reverse .content-banner__visual {
    order: 1;
  }
}

/* =============================================================================
 * Content Wrapper — gray-1 bg card
 * ============================================================================= */
.content-banner__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  background-color: var(--content-banner-content-bg, transparent);
  padding: var(--space-ui-large-m) var(--space-ui-medium-l);
  border-radius: var(--radius-card);
}

@media (min-width: 1024px) {
  .content-banner__content {
    padding: var(--space-ui-large-s) var(--space-ui-large-m);
  }
}

/* =============================================================================
 * Content inner — wraps subtitle, title, copy, slogan, link
 * ============================================================================= */
.content-banner__content-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

/* =============================================================================
 * Text alignment modifiers
 * ============================================================================= */
.content-banner--align-center .content-banner__content-inner {
  align-items: center;
}
.content-banner--align-center .content-banner__subtitle,
.content-banner--align-center .content-banner__title,
.content-banner--align-center .content-banner__paragraph,
.content-banner--align-center .content-banner__slogan,
.content-banner--align-center .content-banner__caption {
  text-align: center;
}
.content-banner--align-center .content-banner__link-row {
  display: flex;
  justify-content: center;
}

.content-banner--align-right .content-banner__content-inner {
  align-items: flex-end;
}
.content-banner--align-right .content-banner__subtitle,
.content-banner--align-right .content-banner__title,
.content-banner--align-right .content-banner__paragraph,
.content-banner--align-right .content-banner__slogan,
.content-banner--align-right .content-banner__caption {
  text-align: right;
}
.content-banner--align-right .content-banner__link-row {
  display: flex;
  justify-content: flex-end;
}

/* =============================================================================
 * Subtitle
 * ============================================================================= */
.content-banner__subtitle {
  width: 100%;
  overflow: hidden;
  text-transform: uppercase;
  color: var(--color-gray-10);
}

/* =============================================================================
 * Title
 * ============================================================================= */
.content-banner__title-row {
  width: 100%;
  overflow: hidden;
  padding-bottom: var(--space-ui-medium-s);
}

.content-banner__title {
  width: 100%;
  color: var(--color-gray-10);
}

/* =============================================================================
 * Bullets
 * ============================================================================= */
.content-banner__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-ui-medium-s);
  width: 100%;
  overflow: hidden;
  padding-bottom: var(--space-ui-medium-m);
}

.content-banner__bullet {
  display: flex;
  gap: var(--space-ui-small-m);
  align-items: flex-start;
  width: 100%;
  overflow: hidden;
}

.content-banner__bullet-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-brand-primary-alternative);
}

.content-banner__bullet-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}

.content-banner__bullet-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-ui-small-s);
  align-items: flex-start;
  justify-content: center;
  color: var(--color-gray-10);
}

.content-banner__bullet-title {
  text-transform: uppercase;
}

/* =============================================================================
 * Paragraph
 * ============================================================================= */
.content-banner__paragraph-row {
  width: 100%;
  overflow: hidden;
  padding-bottom: var(--space-ui-medium-m);
}

.content-banner__paragraph {
  width: 100%;
  color: var(--color-gray-10);
}

/* =============================================================================
 * Slogan
 * ============================================================================= */
.content-banner__slogan-row {
  width: 100%;
  overflow: hidden;
  padding-bottom: var(--space-ui-medium-m);
}

.content-banner__slogan {
  width: 100%;
  color: var(--color-gray-10);
}

/* =============================================================================
 * Link
 * ============================================================================= */
.content-banner__link-row {
  width: 100%;
  padding-bottom: var(--space-ui-medium-m);
}

/* =============================================================================
 * Caption
 * ============================================================================= */
.content-banner__caption-row {
  width: 100%;
  padding-top: var(--space-ui-medium-s);
}

.content-banner__caption {
  width: 100%;
  color: var(--color-gray-7);
}

/* =============================================================================
 * Visual — image / slider block
 * ============================================================================= */
.content-banner__visual {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  position: relative;
  /* Mobile: auto height with aspect ratio */
  aspect-ratio: 390 / 500;
}

@media (min-width: 1024px) {
  .content-banner__visual {
    aspect-ratio: unset;
  }
}

/* =============================================================================
 * Single image
 * ============================================================================= */
.content-banner__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* =============================================================================
 * Slider
 * ============================================================================= */
.content-banner__slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.content-banner__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(var(--transition-bezier));
  will-change: opacity, transform;
}

.content-banner__slide--active {
  opacity: 1;
}

.content-banner__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =============================================================================
 * Dark theme
 * ============================================================================= */
.content-banner--dark .content-banner__content {
  background-color: var(--content-banner-content-bg, var(--color-gray-10));
}

.content-banner--dark .content-banner__subtitle,
.content-banner--dark .content-banner__title,
.content-banner--dark .content-banner__paragraph,
.content-banner--dark .content-banner__slogan,
.content-banner--dark .content-banner__bullet-copy {
  color: var(--color-gray-0);
}

.content-banner--dark .content-banner__caption {
  color: var(--color-gray-4);
}

.content-banner--dark .content-banner__bullet-icon {
  color: var(--color-brand-primary);
}

.content-banner--dark .content-banner__link-row .hyperlink {
  color: var(--color-gray-0);
}

.content-banner--dark .content-banner__link-row .hyperlink__underline-hover-1,
.content-banner--dark .content-banner__link-row .hyperlink__underline-hover-2 {
  background-color: var(--color-gray-0);
}

/* ============================================================================
 * CLS DK Landing Page — Layout from Figma spec (1440px canvas)
 * Mobile-first, desktop breakpoint ≥ 1024px
 * box-sizing: border-box (Tailwind v4)
 *
 * Page layout vars (from index.css):
 *   --layout-max-width: 1440px
 *   --layout-padding-desktop: 40px
 *   --layout-padding-mobile: 28px
 *   Content area: 1360px (1440 − 2×40)
 *
 * Hero & Features use wider 120px desktop padding.
 * ============================================================================ */

/* ── Root ── */
.landing {
  min-height: 100vh;
  background: var(--color-gray-0);
  color: var(--color-gray-10);
}

/* ============================================================================
 * 1. HERO BANNER — uses HeroBlock DS component
 * Landing-specific overrides: open-shop overlay card
 * ============================================================================ */
.landing-hero__open-shop {
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-ui-medium-s);
  background: var(--color-gray-0);
  border-radius: var(--radius-card);
  padding: var(--space-ui-medium-s) var(--space-ui-medium-m);
  text-align: center;
}

.landing-hero__open-shop-copy {
  margin: 0;
}

/* ============================================================================
 * 2. USP BLOCK — icons for custom SVG composition
 * Layout now handled by DS component: _designSystem/USPBlock
 * Only icon composition styles remain here (landing-specific custom SVGs)
 * ============================================================================ */


/* ============================================================================
 * 4. FULLWIDTH CONTENT WIDGET
 * Centered text block with subtitle, heading, tags
 * Mobile: padding 48px 16px
 * Desktop: padding 96px, inner padding 80px (40+40)
 * ============================================================================ */
.landing-content-widget {
  padding: 48px var(--layout-padding-mobile);
}

.landing-content-widget__inner {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  text-align: center;
  padding: 0;
}

.landing-content-widget__subtitle {
  color: var(--color-gray-5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

.landing-content-widget__heading {
  color: var(--color-gray-10);
  margin: 0;
  padding: 48px 0;
  max-width: 100%;
}

.landing-content-widget__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto;
}

.landing-content-widget__tag {
  display: inline-block;
  padding: 6px 12px;
  background: var(--color-gray-05);
  border-radius: 4px;
  color: var(--color-gray-7);
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .landing-content-widget {
    padding: 96px 0;
  }

  .landing-content-widget__inner {
    padding: 0 80px;
  }

  .landing-content-widget__heading {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================================
 * 5. SECONDARY BANNER (Package)
 * Mobile: Stacked, padding 48px 16px, dark content column
 * Desktop: Side-by-side, dark left + image right, padding 64px 40px
 * ============================================================================ */
.landing-banner {
  padding: 48px var(--layout-padding-mobile);
}

.landing-banner__container {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border-radius: 1px;
  overflow: hidden;
}

.landing-banner__content {
  background: var(--color-gray-10);
  padding: var(--space-ui-large-m) 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.landing-banner__subtitle {
  color: var(--color-gray-4);
  text-transform: uppercase;
  margin: 0;
}

.landing-banner__title {
  color: var(--color-gray-0);
  margin: 0;
  margin-top: var(--space-ui-small-l);
}

.landing-banner__slogan {
  color: var(--color-gray-4);
  margin: 0;
  margin-top: var(--space-ui-medium-l);
}

.landing-banner__link {
  margin-top: var(--space-ui-large-s);
}

/* Override Hyperlink colors for dark background */
.landing-banner__link .hyperlink {
  --hyperlink-color-default: var(--color-gray-4);
  --hyperlink-color-hover: var(--color-gray-2);
}

.landing-banner__visual {
  width: 100%;
  aspect-ratio: 334 / 400;
}

.landing-banner__visual-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-gray-1) 0%, var(--color-gray-2) 100%);
}

@media (min-width: 1024px) {
  .landing-banner {
    padding: 64px var(--layout-padding-desktop);
  }

  .landing-banner__container {
    flex-direction: row;
  }

  .landing-banner__content {
    flex: 1 0 0;
    justify-content: center;
    padding: 24px 64px;
  }

  .landing-banner__visual {
    flex: 1 0 0;
    aspect-ratio: auto;
    height: 684px;
  }
}

/* ============================================================================
 * 6. FULLWIDTH CONTENT WITH IMAGE
 * Mobile: image top, content below, padding 48px 16px
 * Desktop: full-width image, centered text, padding-top 64px, padding-x 40px
 * ============================================================================ */
.landing-content-image {
  padding: 48px var(--layout-padding-mobile);
}

.landing-content-image__inner {
  max-width: var(--layout-max-width);
  margin: 0 auto;
}

.landing-content-image__visual {
  width: 100%;
  aspect-ratio: 334 / 133;
  border-radius: 1px;
  overflow: hidden;
}

.landing-content-image__visual-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-gray-2) 0%, var(--color-gray-3) 100%);
}

.landing-content-image__body {
  text-align: center;
  padding: 32px 0 0;
}

.landing-content-image__subtitle {
  color: var(--color-gray-5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

.landing-content-image__heading {
  color: var(--color-gray-10);
  margin: 0;
  padding: 32px 0 0;
}

.landing-content-image__additional {
  color: var(--color-gray-6);
  margin: 0;
  margin-top: var(--space-ui-medium-m);
}

.landing-content-image__link {
  padding-top: 48px;
}

@media (min-width: 1024px) {
  .landing-content-image {
    padding: 64px var(--layout-padding-desktop) 0;
  }

  .landing-content-image__visual {
    aspect-ratio: 1360 / 400;
  }

  .landing-content-image__body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 40px 0;
  }

  .landing-content-image__heading {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * Product Details Page — CLS DK
 * Mobile-first • Desktop ≥ 1024px
 * BEM: .pdp__*
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Root ── */
.pdp {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  background: var(--color-gray-0);
}

/* ═══════════════════════════════════════════════════════════
 * HEADER
 * ═══════════════════════════════════════════════════════════ */

/* Desktop header — visible ≥ 1024px */
.pdp__header {
  display: none;
  border-bottom: 1px solid var(--color-gray-2);
}

/* Mobile header — in normal document flow, scrolls with page */
.pdp__header-mobile {
  position: relative;
  z-index: 100;
}

/* Give header a solid background since it’s no longer overlaying the image */
.pdp__header-mobile .ds-header__main {
  background: var(--color-gray-0);
  box-shadow: none;
  border-bottom: none;
}

@media (min-width: 1024px) {
  .pdp__header {
    display: block;
    position: relative;
    z-index: 100;
  }
  .pdp__header-mobile {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════
 * MAIN CONTENT — 2-column layout
 * ═══════════════════════════════════════════════════════════ */
.pdp__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

@media (min-width: 1024px) {
  .pdp__main {
    flex-direction: row;
    max-width: var(--layout-max-width);
    margin: 0 auto;
    padding: 0 var(--layout-padding-desktop);
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════
 * COLUMN 1: GALLERY
 * ═══════════════════════════════════════════════════════════ */
.pdp__gallery {
  position: relative;
  background: var(--color-gray-0);
  overflow: hidden;
}

/* Mobile: stuck to top */
@media (max-width: 1023px) {
  .pdp__gallery {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 15;
    height: 80vw;
    max-height: 280px;
    border-bottom: var(--border-input-width, 1px) solid var(--color-gray-2);
  }

  /* Zoomed mode: full height */
  .pdp--zoomed .pdp__gallery {
    top: 0;
    height: 100vh;
    max-height: none;
    z-index: 50;
  }

  /* Hide configurator when zoomed */
  .pdp--zoomed .pdp__configurator {
    display: none;
  }

  /* Hide header in zoom */
  .pdp--zoomed .pdp__header-mobile {
    display: none;
  }
}

/* Desktop gallery */
@media (min-width: 1024px) {
  .pdp__gallery {
    flex: 1;
    border-right: 1px solid var(--color-gray-2);
    display: grid;
    /* Col 1 & 3 are equal, enforcing perfect horizontal centering of Col 2 */
    grid-template-columns: minmax(var(--layout-padding-desktop), 1fr) minmax(0, 560px) minmax(var(--layout-padding-desktop), 1fr);
    grid-template-rows: auto 1fr;
    gap: 0; /* use columns to separate */
    overflow: visible; /* CRUCIAL for sticky to work! */
    padding-top: var(--space-ui-medium-l, 32px);
    align-items: start;
  }
}

/* ── Back — Desktop ── */
.pdp__back-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .pdp__back-desktop {
    display: flex;
    position: sticky;
    top: var(--space-ui-medium-l, 32px);
    grid-column: 1;
    grid-row: 1;
    z-index: 5;
    align-self: start;
    justify-self: flex-start; /* Center horizontally in the left column */
    white-space: nowrap;
  }
}

/* ── Back — Mobile (icon only) ── */
.pdp__back-mobile {
  position: absolute;
  top: var(--space-ui-medium-s);
  left: var(--space-ui-medium-s);
  z-index: 5;
  display: flex;
}

.pdp--zoomed .pdp__back-mobile {
  display: none;
}

@media (min-width: 1024px) {
  .pdp__back-mobile {
    display: none;
  }
}

/* ── Thumbnails — Desktop ── */
.pdp__thumbs {
  display: none;
}

@media (min-width: 1024px) {
  .pdp__thumbs {
    display: flex;
    flex-direction: column;
    gap: var(--space-ui-small-l, 12px);
    position: sticky;
    top: calc(var(--space-ui-medium-l, 32px) + 64px); /* Just below the sticky back button */
    grid-column: 1;
    grid-row: 2;
    z-index: 3;
    padding-top: var(--space-ui-medium-m, 12px);
  }
}

.pdp__thumb {
  width: 48px;
  aspect-ratio: 4/5;
  border-radius: var(--radius-input, 2px);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--color-gray-0);
  padding: 0;
  transition: border-color var(--transition-input) cubic-bezier(var(--transition-bezier));
}

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

.pdp__thumb--active {
  border-color: var(--color-gray-10);
}

/* ── Image carousel ── */
.pdp__image-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.pdp--zoomed .pdp__image-container {
  padding-top: 0;
}

@media (min-width: 1024px) {
  .pdp__image-container {
    padding-top: 0;
    position: sticky;
    top: var(--space-ui-medium-l, 32px);
    grid-column: 2;
    grid-row: 1 / 3; /* span both rows */
    aspect-ratio: 4/5;
    width: 100%;
    /* We don't need max-width 600px here because grid-column 2 already maxes at 560px */
    border-radius: var(--radius-input, 2px);
    overflow: hidden;
    height: auto;
    margin: 0 auto;
    align-self: start;
    justify-self: center; /* <<< Center the image container itself within grid cell */
  }
}

.pdp__image-track {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform 0.4s cubic-bezier(var(--transition-bezier));
  will-change: transform;
}

.pdp__image-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
}

.pdp__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
}

@media (min-width: 1024px) {
  .pdp__image {
    object-fit: cover;
  }
}

/* ── Bullets — Mobile ── */
.pdp__bullets {
  display: flex;
  gap: var(--space-ui-small-m, 8px);
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  background: color-mix(in srgb, var(--color-gray-0) 92%, transparent);
  padding: var(--space-ui-small-m, 8px);
  border-radius: var(--radius-card, 4px);
}

.pdp__bullet {
  width: 8px;
  height: 2px;
  border-radius: 2px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--color-gray-2);
  transition: background var(--transition-input) cubic-bezier(var(--transition-bezier));
}

.pdp__bullet--active {
  background: var(--color-gray-10);
}

@media (min-width: 1024px) {
  .pdp__bullets {
    display: none;
  }
}

/* ── Zoom button — Mobile ── */
.pdp__zoom-btn-container {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 5;
  display: flex;
}

@media (min-width: 1024px) {
  .pdp__zoom-btn-container {
    display: none;
  }
}

/* ── Zoom close — Mobile ── */
.pdp__zoom-close-container {
  display: none;
}

.pdp--zoomed .pdp__zoom-close-container {
  display: flex;
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 55;
}

@media (min-width: 1024px) {
  .pdp__zoom-close-container {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
 * COLUMN 2: CONFIGURATOR
 * ═══════════════════════════════════════════════════════════ */
.pdp__configurator {
  position: relative;
  padding: var(--space-ui-medium-l, 32px) var(--layout-padding-mobile, 28px)
    var(--space-ui-large-m, 64px);
  background: var(--color-gray-0);
  z-index: 10;
}

/* Extra bottom padding on mobile to prevent fixed footer from hiding content */
@media (max-width: 1023px) {
  .pdp__configurator {
    padding-bottom: 140px;
  }
}

@media (min-width: 1024px) {
  .pdp__configurator {
    flex: 0 0 50%;
    max-width: 50%;
    padding: var(--space-ui-medium-l, 32px) var(--layout-padding-desktop, 40px)
      var(--space-ui-large-m, 64px) var(--space-ui-large-m, 64px);
  }
}

/* ── Description truncation — mobile only ── */
@media (max-width: 1023px) {
  .pdp__description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .pdp__description--expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  .pdp__read-more {
    margin-top: var(--space-ui-small-m);
  }
}

/* ──  Sections inside configurator ── */
.pdp__options {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.pdp__section {
  padding-bottom: var(--space-ui-medium-l, 32px);
}

.pdp__color-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-ui-small-m, 8px);
}

.pdp__size-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-ui-small-l, 12px);
}

.pdp__size-guide {
  padding-top: var(--space-ui-medium-s, 16px);
}

.pdp__toggle-row {
  display: flex;
  gap: var(--space-ui-small-l, 12px);
}

/* ── Addons reveal animation ── */
.pdp__addons-reveal {
  animation: pdp-addons-in var(--transition-drawer) cubic-bezier(var(--transition-bezier)) forwards;
}

@keyframes pdp-addons-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── Risk-free block ── */
.pdp__risk-free {
  text-align: center;
  padding-top: var(--space-ui-medium-l, 32px);
}

.pdp__risk-free-title {
  color: var(--color-ui-success);
  text-transform: uppercase;
}

.pdp__risk-free-text {
  color: var(--color-gray-10);
}

/* ── Delivery block — Mobile only ── */
.pdp__delivery-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-ui-small-l, 8px);
  margin-top: var(--space-ui-large-s, 32px);
  padding-top: var(--space-ui-large-s, 32px);
  border-top: var(--border-input-width, 1px) solid var(--color-gray-2);
}

@media (min-width: 1024px) {
  .pdp__delivery-mobile {
    display: none;
  }
}

.pdp__delivery-mobile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--color-gray-05);
  border-radius: var(--radius-button, 2px);
  color: var(--color-gray-10);
}

.pdp__delivery-mobile-text {
  display: flex;
  flex-direction: column;
}

.pdp__delivery-mobile-headline {
  display: flex;
  align-items: center;
  gap: var(--space-ui-small-s, 4px);
}

.pdp__delivery-mobile-time,
.pdp__delivery-mobile-cost {
  color: var(--color-gray-10);
  text-transform: uppercase;
}

.pdp__delivery-mobile-dot {
  color: var(--color-gray-3);
}

.pdp__delivery-mobile-desc {
  color: var(--color-gray-8);
}

/* ═══════════════════════════════════════════════════════════
 * STICKY FOOTER
 * ═══════════════════════════════════════════════════════════ */
.pdp__footer {
  z-index: 40;
}

/* Mobile: fixed to viewport bottom so Chrome UI collapse doesn't detach it */
@media (max-width: 1023px) {
  .pdp__footer {
    position: fixed;
    bottom: var(--space-ui-medium-s, 12px);
    left: 0;
    right: 0;
  }

  .pdp--zoomed .pdp__footer {
    display: none;
  }
}

@media (min-width: 1024px) {
  .pdp__footer {
    position: sticky;
    bottom: 0;
    width: 100%;
    align-self: stretch;
  }
}

/* ═══════════════════════════════════════════════════════════
 * MOBILE FOCUS CARD — Bottom-sheet for text inputs
 * ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .pdp__footer--hidden {
    display: none !important;
  }

  .pdp__focus-trigger {
    cursor: text;
  }

  .pdp__focus-trigger > * {
    pointer-events: none;
  }

  .pdp__focus-modal { 
    position: fixed;
    top: var(--focus-vp-offset, 0px);
    left: 0;
    width: 100%;
    height: var(--focus-vp-height, 100dvh);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
    opacity: 0;
  }

  .pdp__focus-modal--active {
    pointer-events: auto;
    opacity: 1;
  }

  .pdp__focus-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: transparent;
    transition: opacity var(--transition-input) var(--transition-bezier);
  }

  .pdp__focus-modal--active .pdp__focus-backdrop {
    
  }

  .pdp__focus-card {
    position: relative;
    z-index: 1;
    background: var(--color-gray-025);
    border: 1px solid var(--color-gray-0);
    border-radius: 10px;
    box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.12);
    padding: var(--space-ui-medium-s) var(--space-ui-medium-m);
    margin: 0 var(--layout-padding-mobile);
    margin-bottom: var(--space-ui-medium-s);
    transform: translateY(20px);
    
    transition: all var(--transition-input) cubic-bezier(var(--transition-bezier));
  }

  .pdp__focus-modal--active .pdp__focus-card {
    transform: translateY(0);
    
  }

  .pdp__focus-card .cfg-heading-sm {
    margin-bottom: var(--space-ui-small-l);
  }
}



@media (min-width: 1024px) {
  .pdp__focus-modal {
  }
}


@media (min-width: 1024px) {
  .pdp__focus-modal {
    display: none !important;
  }
}

/* ══ Addon tooltip content (rendered inside DS InfoTooltip children) ══ */
.pdp-addon-tip__title {
  color: var(--color-gray-10);
  padding-right: 40px; /* space for close button */
}

.pdp-addon-tip__image-wrap {
  width: 100%;
  border-radius: var(--radius-card, 4px);
  overflow: hidden;
}

.pdp-addon-tip__image {
  width: 100%;
  max-height: 320px;
  display: block;
  object-fit: contain;
}

.pdp-addon-tip__description {
  color: var(--color-gray-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-ui-small-l, 12px);
}

.pdp-addon-tip__description p {
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
 * SidePanel — Generic right-side drawer
 * Desktop: 880px  |  Mobile: full-width
 * BEM: .side-panel__*
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Overlay ── */
.side-panel__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  z-index: 999;
  animation: side-panel-overlay-in var(--transition-drawer) cubic-bezier(var(--transition-bezier)) both;
}

.side-panel__overlay--closing {
  animation: side-panel-overlay-out var(--transition-drawer) cubic-bezier(var(--transition-bezier)) both;
}

@keyframes side-panel-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes side-panel-overlay-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ── Panel (slides in from right) ── */
.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 880px;
  max-width: 100vw;
  background: var(--color-gray-0);
  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-popup, 4px) 0 0 var(--radius-popup, 4px);
  overflow: hidden;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  animation: side-panel-slide-in var(--transition-drawer) cubic-bezier(var(--transition-bezier)) both;
}

.side-panel--closing {
  animation: side-panel-slide-out var(--transition-drawer) cubic-bezier(var(--transition-bezier)) both;
}

@keyframes side-panel-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes side-panel-slide-out {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

/* ── Header (sticky) ── */
.side-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-ui-medium-s, 16px) var(--layout-padding-desktop, 40px);
  border-bottom: var(--border-input-width, 1px) solid var(--color-gray-3);
  background: var(--color-gray-0);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 1;
}

.side-panel__title {
  color: var(--color-gray-10);
}

/* ── Scrollable content ── */
.side-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-ui-medium-l, 32px) var(--layout-padding-desktop, 40px);
}

/* ══ Mobile ══ */
@media (max-width: 1023px) {
  .side-panel {
    width: 100vw;
    border-radius: 0;
  }

  .side-panel__header {
    padding: var(--space-ui-medium-s, 16px) var(--layout-padding-mobile, 28px);
  }

  .side-panel__body {
    padding: var(--space-ui-medium-l, 32px) var(--layout-padding-mobile, 28px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * Size Guide Content — CLS DK Product Details
 * Drawer chrome provided by DS SidePanel; this file is content-only.
 * BEM: .sg-*
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Items list ── */
.sg-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-ui-medium-l, 32px);
}

/* ── Individual item ── */
.sg-item {
  display: flex;
  gap: var(--space-ui-medium-m, 24px);
  align-items: flex-start;
}

.sg-item--border {
  padding-bottom: var(--space-ui-medium-l, 32px);
  border-bottom: 1px solid var(--color-gray-2);
}

/* Image */
.sg-item__image {
  flex-shrink: 0;
  width: 200px;
  border-radius: var(--radius-input, 2px);
  overflow: hidden;
}

.sg-item__image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* Details */
.sg-item__details {
  flex: 1;
  min-width: 0;
}

.sg-item__name {
  color: var(--color-gray-10);
  padding-bottom: var(--space-ui-small-l, 12px);
}

.sg-item__sizes {
  display: flex;
  flex-direction: column;
  gap: var(--space-ui-medium-s, 16px);
}

.sg-item__size-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-ui-small-s, 4px);
}

.sg-item__size-label {
  color: var(--color-gray-6);
  text-transform: uppercase;
}

.sg-item__size-values {
  color: var(--color-gray-10);
}

.sg-item__dot {
  color: var(--color-gray-3);
}

/* ══ Mobile ══ */
@media (max-width: 1023px) {
  .sg-item {
    flex-direction: column;
    gap: var(--space-ui-medium-s, 16px);
  }

  .sg-item__image {
    width: 66%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * InfoTooltip — Generic DS popup / drawer
 * Desktop: centered popup  |  Mobile: bottom-sheet drawer
 * BEM: .info-tooltip__*
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Overlay ── */
.info-tooltip__overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.32);
  animation: info-tooltip-overlay-in var(--transition-drawer) cubic-bezier(var(--transition-bezier)) both;
}

.info-tooltip__overlay--closing {
  animation: info-tooltip-overlay-out var(--transition-drawer) cubic-bezier(var(--transition-bezier)) both;
}

@keyframes info-tooltip-overlay-in {
  from { background-color: rgba(0, 0, 0, 0); }
  to   { background-color: rgba(0, 0, 0, 0.32); }
}

@keyframes info-tooltip-overlay-out {
  from { background-color: rgba(0, 0, 0, 0.32); }
  to   { background-color: rgba(0, 0, 0, 0); }
}

/* ── Shared panel base ── */
.info-tooltip {
  background: var(--color-gray-0);
  display: flex;
  flex-direction: column;
  z-index: 1001;
  position: relative;
}

/* ── Desktop: centered popup ── */
.info-tooltip--desktop {
  width: 520px;
  max-width: 95vw;
  max-height: 90vh;
  border-radius: var(--radius-popup, 4px);
  box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.12);
  overflow-y: auto;
  animation: info-tooltip-popup-in var(--transition-drawer) cubic-bezier(var(--transition-bezier)) both;
}

.info-tooltip--desktop.info-tooltip--closing {
  animation: info-tooltip-popup-out var(--transition-drawer) cubic-bezier(var(--transition-bezier)) both;
}

.info-tooltip--desktop.info-tooltip--entered {
  animation: none;
}

@keyframes info-tooltip-popup-in {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes info-tooltip-popup-out {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(40px); opacity: 0; }
}

/* ── Mobile: hidden on desktop ── */
.info-tooltip--mobile {
  display: none;
}

/* ── Close button ── */
.info-tooltip__close {
  position: absolute;
  top: var(--space-ui-medium-s, 16px);
  right: var(--space-ui-medium-s, 16px);
  z-index: 2;
}

/* ── Body (padded content area) ── */
.info-tooltip__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-ui-medium-s, 16px);
  padding: var(--space-ui-large-s, 48px) var(--space-ui-medium-l, 32px) var(--space-ui-medium-l, 32px);
}

/* ── Swipe handle (hidden on desktop) ── */
.info-tooltip__swipe-handle {
  display: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE: < 1024px — bottom-sheet drawer
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .info-tooltip__overlay {
    align-items: flex-end;
    justify-content: center;
  }

  /* Hide desktop popup */
  .info-tooltip--desktop {
    display: none;
  }

  /* Show mobile drawer */
  .info-tooltip--mobile {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
    max-height: 85vh;
    border-radius: var(--radius-drawer) var(--radius-drawer) 0 0;
    box-shadow: 0px -8px 32px 0px rgba(0, 0, 0, 0.12);
    animation: info-tooltip-sheet-in var(--transition-drawer) cubic-bezier(var(--transition-bezier)) both;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: relative;
    box-sizing: border-box;
  }

  .info-tooltip--mobile.info-tooltip--entered {
    animation: none;
  }

  .info-tooltip--mobile.info-tooltip--closing {
    animation: info-tooltip-sheet-out var(--transition-drawer) cubic-bezier(var(--transition-bezier)) both;
  }

  @keyframes info-tooltip-sheet-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  @keyframes info-tooltip-sheet-out {
    to { transform: translateY(100%); }
  }

  /* Swipe handle */
  .info-tooltip__swipe-handle {
    display: flex;
    z-index: 2;
    cursor: grab;
  }

  .info-tooltip__swipe-handle:active {
    cursor: grabbing;
  }

  /* Body padding mobile */
  .info-tooltip__body {
    padding: var(--space-ui-medium-m, 24px) var(--layout-padding-mobile, 28px) var(--space-ui-large-s, 48px);
  }

  .info-tooltip__close {
    top: var(--space-ui-small-l, 12px);
    right: var(--space-ui-small-l, 12px);
  }
}

.secondary-banner {
  background-color: var(--color-gray-075, #ebebea);
  border-bottom: 1px solid var(--color-gray-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.secondary-banner__inner {
  max-width: var(--layout-max-width);
  width: 100%;
  padding: var(--space-ui-medium-l) var(--layout-padding-mobile);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (min-width: 1024px) {
  .secondary-banner__inner {
    padding-left: var(--layout-padding-desktop);
    padding-right: var(--layout-padding-desktop);
  }
}

.secondary-banner__tag {
  background-color: var(--color-gray-025);
  border: 1px solid var(--color-gray-0);
  border-radius: var(--radius-button);
  padding: var(--space-ui-small-m) var(--space-ui-small-l);
  display: inline-block;
  margin-bottom: var(--space-ui-small-l);
}

.secondary-banner__tag-text {
  color: var(--color-gray-10);
  text-transform: uppercase;
  margin: 0;
}

.secondary-banner__title {
  color: var(--color-gray-10);
  margin: 0;
}

.secondary-banner__trustpilot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-ui-medium-s);
}

.secondary-banner__trustpilot-text {
  color: var(--color-gray-10);
  font-size: 14px;
}

.secondary-banner__trustpilot-stars {
  height: 20px;
}

.fomo-block {
  background-color: var(--color-ui-success-background);
  border: 1px solid var(--color-ui-success);
  border-radius: var(--radius-inner-radius, 2px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-ui-small-l);
  padding: var(--space-ui-medium-s) var(--space-ui-medium-s);
}

.fomo-block__text {
  flex: 1 1 0;
  margin: 0;
  color: var(--color-gray-10);
}

@media (min-width: 1024px) {
  .fomo-block__text {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.school-shop-products {
  min-height: 100vh;
  background: var(--color-gray-0);
  color: var(--color-gray-10);
  display: flex;
  flex-direction: column;
}

.school-shop-products__wrapper {
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.school-shop-products__fomo-container {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  width: 100%;
  padding: var(--space-ui-medium-l) var(--space-ui-medium-s) 0;
}

@media (min-width: 1024px) {
  .school-shop-products__fomo-container {
    padding-left: var(--layout-padding-desktop);
    padding-right: var(--layout-padding-desktop);
  }
}

/* ============================================================================
 * CLS DK Landing Page — Layout from Figma spec (1440px canvas)
 * Mobile-first, desktop breakpoint ≥ 1024px
 * box-sizing: border-box (Tailwind v4)
 *
 * Page layout vars (from index.css):
 *   --layout-max-width: 1440px
 *   --layout-padding-desktop: 40px
 *   --layout-padding-mobile: 28px
 *   Content area: 1360px (1440 − 2×40)
 *
 * Hero & Features use wider 120px desktop padding.
 * ============================================================================ */

/* ── Root ── */
.landing {
  min-height: 100vh;
  background: var(--color-gray-0);
  color: var(--color-gray-10);
}

/* ============================================================================
 * 1. HERO BANNER — uses HeroBlock DS component
 * Landing-specific overrides: open-shop overlay card
 * ============================================================================ */
.landing-hero__open-shop {
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-ui-medium-s);
  background: var(--color-gray-0);
  border-radius: var(--radius-card);
  padding: var(--space-ui-medium-s) var(--space-ui-medium-m);
  text-align: center;
}

.landing-hero__open-shop-copy {
  margin: 0;
}

/* ============================================================================
 * 2. USP BLOCK — icons for custom SVG composition
 * Layout now handled by DS component: _designSystem/USPBlock
 * Only icon composition styles remain here (landing-specific custom SVGs)
 * ============================================================================ */


/* ============================================================================
 * 4. FULLWIDTH CONTENT WIDGET
 * Centered text block with subtitle, heading, tags
 * Mobile: padding 48px 16px
 * Desktop: padding 96px, inner padding 80px (40+40)
 * ============================================================================ */
.landing-content-widget {
  padding: 48px var(--layout-padding-mobile);
}

.landing-content-widget__inner {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  text-align: center;
  padding: 0;
}

.landing-content-widget__subtitle {
  color: var(--color-gray-5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

.landing-content-widget__heading {
  color: var(--color-gray-10);
  margin: 0;
  padding: 48px 0;
  max-width: 100%;
}

.landing-content-widget__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto;
}

.landing-content-widget__tag {
  display: inline-block;
  padding: 6px 12px;
  background: var(--color-gray-05);
  border-radius: 4px;
  color: var(--color-gray-7);
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .landing-content-widget {
    padding: 96px 0;
  }

  .landing-content-widget__inner {
    padding: 0 80px;
  }

  .landing-content-widget__heading {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================================
 * 5. SECONDARY BANNER (Package)
 * Mobile: Stacked, padding 48px 16px, dark content column
 * Desktop: Side-by-side, dark left + image right, padding 64px 40px
 * ============================================================================ */
.landing-banner {
  padding: 48px var(--layout-padding-mobile);
}

.landing-banner__container {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border-radius: 1px;
  overflow: hidden;
}

.landing-banner__content {
  background: var(--color-gray-10);
  padding: var(--space-ui-large-m) 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.landing-banner__subtitle {
  color: var(--color-gray-4);
  text-transform: uppercase;
  margin: 0;
}

.landing-banner__title {
  color: var(--color-gray-0);
  margin: 0;
  margin-top: var(--space-ui-small-l);
}

.landing-banner__slogan {
  color: var(--color-gray-4);
  margin: 0;
  margin-top: var(--space-ui-medium-l);
}

.landing-banner__link {
  margin-top: var(--space-ui-large-s);
}

/* Override Hyperlink colors for dark background */
.landing-banner__link .hyperlink {
  --hyperlink-color-default: var(--color-gray-4);
  --hyperlink-color-hover: var(--color-gray-2);
}

.landing-banner__visual {
  width: 100%;
  aspect-ratio: 334 / 400;
}

.landing-banner__visual-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-gray-1) 0%, var(--color-gray-2) 100%);
}

@media (min-width: 1024px) {
  .landing-banner {
    padding: 64px var(--layout-padding-desktop);
  }

  .landing-banner__container {
    flex-direction: row;
  }

  .landing-banner__content {
    flex: 1 0 0;
    justify-content: center;
    padding: 24px 64px;
  }

  .landing-banner__visual {
    flex: 1 0 0;
    aspect-ratio: auto;
    height: 684px;
  }
}

/* ============================================================================
 * 6. FULLWIDTH CONTENT WITH IMAGE
 * Mobile: image top, content below, padding 48px 16px
 * Desktop: full-width image, centered text, padding-top 64px, padding-x 40px
 * ============================================================================ */
.landing-content-image {
  padding: 48px var(--layout-padding-mobile);
}

.landing-content-image__inner {
  max-width: var(--layout-max-width);
  margin: 0 auto;
}

.landing-content-image__visual {
  width: 100%;
  aspect-ratio: 334 / 133;
  border-radius: 1px;
  overflow: hidden;
}

.landing-content-image__visual-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-gray-2) 0%, var(--color-gray-3) 100%);
}

.landing-content-image__body {
  text-align: center;
  padding: 32px 0 0;
}

.landing-content-image__subtitle {
  color: var(--color-gray-5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

.landing-content-image__heading {
  color: var(--color-gray-10);
  margin: 0;
  padding: 32px 0 0;
}

.landing-content-image__additional {
  color: var(--color-gray-6);
  margin: 0;
  margin-top: var(--space-ui-medium-m);
}

.landing-content-image__link {
  padding-top: 48px;
}

@media (min-width: 1024px) {
  .landing-content-image {
    padding: 64px var(--layout-padding-desktop) 0;
  }

  .landing-content-image__visual {
    aspect-ratio: 1360 / 400;
  }

  .landing-content-image__body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 40px 0;
  }

  .landing-content-image__heading {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
  }
}

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: var(--fixed-svh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Page Transition Styles */
.page-transition-container {
  position: relative;
  width: 100%;
  min-height: calc(var(--fixed-svh) - 80px); /* Account for header height */
  overflow: hidden;
}



/* Ensure header stays on top */
header {
  position: relative;
  z-index: 100;
}

/* Safe area padding for iOS devices */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}