/** * AUTO-GENERATED — npm run extract:ds-css * Zdroj: public/eshop.legacy.html — CSS-in-JS blokov Design System komponentov * (Badge, Button, IconButton, QuantityStepper, Rating, Tag, Input/Select, * Photo, CategoryTile, ProductCard, SectionHeading), ktoré originál vkladá * do cez JS runtime. Next tieto komponenty prepisuje na čisté React * (src/components/design-system/index.tsx) bez portovania CSS — táto * extrakcia dopĺňa presne to, čo tam chýba (žiadny nový dizajn). */ /* ---- Badge ---- */ .vn-badge{ display:inline-flex;align-items:center;gap:5px; font-family:var(--font-body);font-weight:var(--weight-semibold); font-size:var(--text-xs);line-height:1;letter-spacing:var(--tracking-wide); padding:6px 11px;border-radius:var(--radius-pill);white-space:nowrap; } .vn-badge--gold{ background:var(--accent); color:var(--bily-vosk); } .vn-badge--gold-soft{ background:var(--accent-wash); color:var(--tmavy-med); } .vn-badge--green{ background:var(--accent-secondary); color:var(--bily-vosk); } .vn-badge--green-soft{ background:var(--accent-secondary-wash); color:var(--lucni-zelena-tmava); } .vn-badge--cream{ background:var(--kremova-plast); color:var(--tmava-hlina); } .vn-badge svg{ width:13px;height:13px;stroke-width:2; } /* ---- Button ---- */ .vn-btn{ font-family:var(--font-body); font-weight:var(--weight-semibold); display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2); border:var(--border-width-strong) solid transparent; border-radius:var(--radius-md); cursor:pointer;text-decoration:none;white-space:nowrap; transition:background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-base) var(--ease-out); } .vn-btn:active{ transform:translateY(1px) scale(0.99); } .vn-btn:disabled,.vn-btn[aria-disabled="true"]{ opacity:.45;cursor:not-allowed;transform:none;box-shadow:none; } .vn-btn--sm{ font-size:var(--text-base); padding:8px 16px; min-height:38px; } .vn-btn--md{ font-size:var(--text-base); padding:12px 22px; min-height:48px; } .vn-btn--lg{ font-size:var(--text-base); padding:16px 30px; min-height:56px; } .vn-btn--block{ display:flex;width:100%; } .vn-btn--primary{ background:var(--accent); color:var(--text-on-accent); box-shadow:var(--shadow-cta); } .vn-btn--primary:hover:not(:disabled){ background:var(--accent-hover); } .vn-btn--secondary{ background:transparent; color:var(--tmavy-med); border-color:var(--border-strong); } .vn-btn--secondary:hover:not(:disabled){ background:var(--kremova-plast); border-color:var(--tmavy-med); } .vn-btn--ghost{ background:transparent; color:var(--tmavy-med); border-color:transparent; padding-inline:10px; } .vn-btn--ghost:hover:not(:disabled){ background:var(--accent-wash); } .vn-btn--green{ background:var(--accent-secondary); color:var(--bily-vosk); } .vn-btn--green:hover:not(:disabled){ background:var(--lucni-zelena-tmava); } .vn-btn svg{ width:1.15em;height:1.15em;flex:none; } /* ---- IconButton ---- */ .vn-iconbtn{ position:relative;display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:var(--radius-pill); background:transparent;border:none;cursor:pointer;color:var(--tmava-hlina); transition:background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-soft); } .vn-iconbtn:hover{ background:var(--accent-wash); color:var(--tmavy-med); } .vn-iconbtn:active{ transform:scale(0.92); } .vn-iconbtn--sm{ width:38px;height:38px; } .vn-iconbtn--solid{ background:var(--kremova-plast); } .vn-iconbtn--solid:hover{ background:var(--accent-wash); } .vn-iconbtn svg{ width:22px;height:22px;stroke-width:1.7; } .vn-iconbtn--sm svg{ width:18px;height:18px; } .vn-iconbtn__count{ position:absolute;top:2px;right:0px;min-width:18px;height:18px;padding:0 5px; display:flex;align-items:center;justify-content:center; background:var(--accent);color:var(--bily-vosk); font-family:var(--font-body);font-size:11px;font-weight:var(--weight-bold); border-radius:var(--radius-pill);border:2px solid var(--surface-page); line-height:1; } /* ---- QuantityStepper ---- */ .vn-stepper{ display:inline-flex;align-items:center; border:var(--border-width) solid var(--border-strong); border-radius:var(--radius-md);background:var(--surface-card);overflow:hidden; } .vn-stepper__btn{ width:44px;height:44px;border:none;background:transparent;cursor:pointer; display:flex;align-items:center;justify-content:center;color:var(--tmavy-med); font-size:20px;line-height:1; transition:background-color var(--dur-fast) var(--ease-out); } .vn-stepper__btn:hover:not(:disabled){ background:var(--accent-wash); } .vn-stepper__btn:disabled{ color:var(--text-faint);cursor:not-allowed; } .vn-stepper__val{ min-width:40px;text-align:center;font-family:var(--font-body); font-weight:var(--weight-semibold);font-size:var(--text-base);color:var(--tmava-hlina); font-variant-numeric:tabular-nums; } .vn-stepper--sm .vn-stepper__btn{ width:36px;height:36px;font-size:17px; } .vn-stepper--sm .vn-stepper__val{ min-width:32px;font-size:var(--text-sm); } /* ---- Rating ---- */ .vn-rating{ display:inline-flex;align-items:center;gap:8px; } .vn-rating__stars{ display:inline-flex;gap:2px;color:var(--accent); } .vn-rating__stars svg{ width:1em;height:1em;display:block; } .vn-rating--sm{ font-size:15px; } .vn-rating--md{ font-size:19px; } .vn-rating--lg{ font-size:24px; } .vn-rating__count{ font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-muted); } /* ---- Tag ---- */ .vn-tag{ display:inline-flex;align-items:center;gap:6px; font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-medium); color:var(--lucni-zelena-tmava); } .vn-tag__dot{ width:7px;height:7px;border-radius:50%;background:var(--accent-secondary);flex:none; } .vn-tag svg{ width:14px;height:14px;color:var(--accent-secondary);stroke-width:1.8;flex:none; } .vn-tag--chip{ background:var(--accent-secondary-wash);padding:5px 10px;border-radius:var(--radius-sm); } /* ---- Input/Select ---- */ .vn-field{ display:flex;flex-direction:column;gap:6px;font-family:var(--font-body); } .vn-field__label{ font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--tmavy-med); } .vn-field__wrap{ position:relative;display:flex;align-items:center; } .vn-input{ width:100%;font-family:var(--font-body);font-size:var(--text-base);color:var(--tmava-hlina); background:var(--surface-card); border:var(--border-width) solid var(--border-strong);border-radius:var(--radius-md); padding:13px 15px;min-height:48px; transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .vn-input::placeholder{ color:var(--text-faint); } .vn-input:hover{ border-color:var(--tmavy-med-svetly); } .vn-input:focus{ outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash); } /* Zelené len pri .vn-field.is-ok (JS formát); poznámka vždy biela */ .vn-field.is-ok .vn-input:not(:focus):not(:disabled), .vn-field.is-ok textarea.vn-input:not(:focus):not(:disabled){ background:var(--lucni-zelena-jemna, #E4E7DB); } .vn-input:not(.kit-checkout__note):-webkit-autofill, .vn-input:not(.kit-checkout__note):-webkit-autofill:hover, .vn-input:not(.kit-checkout__note):-webkit-autofill:focus, .vn-input:not(.kit-checkout__note):-webkit-autofill:active, textarea.vn-input:not(.kit-checkout__note):-webkit-autofill, textarea.vn-input:not(.kit-checkout__note):-webkit-autofill:hover, textarea.vn-input:not(.kit-checkout__note):-webkit-autofill:focus{ -webkit-box-shadow:0 0 0 1000px var(--surface-card, #fff) inset !important; box-shadow:0 0 0 1000px var(--surface-card, #fff) inset !important; -webkit-text-fill-color:var(--tmava-hlina, #2C2620) !important; caret-color:var(--tmava-hlina, #2C2620); border-color:var(--border-strong); transition:background-color 99999s ease-out; } .vn-field.is-ok .vn-input:-webkit-autofill, .vn-field.is-ok .vn-input:-webkit-autofill:hover, .vn-field.is-ok .vn-input:-webkit-autofill:focus, .vn-field.is-ok textarea.vn-input:-webkit-autofill{ -webkit-box-shadow:0 0 0 1000px var(--lucni-zelena-jemna, #E4E7DB) inset !important; box-shadow:0 0 0 1000px var(--lucni-zelena-jemna, #E4E7DB) inset !important; } .kit-checkout__note, .kit-checkout__note:not(:placeholder-shown):not(:focus), .kit-checkout__note:focus{ background:var(--surface-card, #fff) !important; } .vn-input--has-icon{ padding-left:44px; } .vn-field__icon{ position:absolute;left:14px;display:flex;color:var(--text-muted);pointer-events:none; } .vn-field__icon svg{ width:19px;height:19px;stroke-width:1.8; } .vn-field--pill .vn-input{ border-radius:var(--radius-pill); } .vn-field__hint{ font-size:var(--text-xs);color:var(--text-muted); } .vn-field--error .vn-input{ border-color:var(--chyba);background:var(--chyba-jemna); } .vn-field--error .vn-input:not(:placeholder-shown):not(:focus){ background:var(--chyba-jemna); } /* ---- Select (dropdown) ---- */ .vn-select{ position:relative; display:flex; flex-direction:column; gap:6px; font-family:var(--font-body); } .vn-select__label{ font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--tmavy-med); } /* Trigger — fully rounded to match the rest of the soft, rounded UI. */ .vn-select__trigger{ appearance:none; width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--font-body); font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--tmava-hlina); background:var(--surface-card); cursor:pointer; text-align:left; border:var(--border-width) solid var(--border-strong); border-radius:var(--radius-pill); padding:11px 16px 11px 18px; min-height:46px; transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .vn-select__trigger:hover{ border-color:var(--tmavy-med-svetly); } .vn-select__trigger:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); } .vn-select[data-open="true"] .vn-select__trigger{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); } .vn-select__chevron{ flex:none; color:var(--text-muted); display:flex; transition:transform var(--dur-base) var(--ease-soft); } .vn-select[data-open="true"] .vn-select__chevron{ transform:rotate(180deg); } .vn-select__chevron svg{ width:18px; height:18px; } .vn-select--quiet .vn-select__trigger{ border-color:transparent; background:var(--kremova-plast); } .vn-select--quiet .vn-select__trigger:hover{ background:var(--plast-tmava); } /* Rounded, warm popover list — no native OS blue anywhere. */ .vn-select__panel{ position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:50; background:var(--surface-card); border:var(--border-width) solid var(--border-soft); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:6px; max-height:280px; overflow-x:hidden; overflow-y:auto; opacity:0; transform:translateY(-6px) scale(.99); transform-origin:top center; pointer-events:none; transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-soft); } .vn-select[data-open="true"] .vn-select__panel, .vn-select__panel[data-open="true"]{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } .vn-select__panel--portal{ z-index:350; } .vn-select__opt{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:var(--text-sm); color:var(--tmava-hlina); cursor:pointer; padding:4px 6px 4px 4px; border-radius:var(--radius-md); white-space:nowrap; transition:color var(--dur-fast) var(--ease-out); } .vn-select__opt > span:first-child{ flex:1; min-width:0; padding:8px 10px; border-radius:var(--radius-md); transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .vn-select__opt:hover > span:first-child{ background:var(--accent-wash); color:var(--tmavy-med); } .vn-select__opt[aria-selected="true"] > span:first-child{ background:var(--accent-wash); color:var(--tmavy-med); font-weight:var(--weight-semibold); } .vn-select__opt[aria-selected="true"] .vn-select__check{ opacity:1; } .vn-select__opt--disabled, .vn-select__opt[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; } .vn-select__opt--disabled:hover > span:first-child, .vn-select__opt[aria-disabled="true"]:hover > span:first-child{ background:transparent; color:var(--tmava-hlina); } .vn-select__check{ flex:none; opacity:0; display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--surface-card); border:2px solid var(--border-soft); color:var(--accent); box-shadow:0 1px 2px rgba(44,38,32,.08); transition:opacity var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .vn-select__opt[aria-selected="true"] .vn-select__check{ background:var(--accent); border-color:var(--accent); color:var(--bily-vosk); } .vn-select__check svg{ width:12px; height:12px; stroke-width:2.4; } .vn-select--compact{ gap:0; width:auto; max-width:100%; align-self:center; --vn-var-pad-x:10px; --vn-var-pad-y:5px; --vn-var-gap:10px; --vn-var-check:16px; --vn-var-chevron:12px; --vn-var-panel-pad:10px; } .vn-select--compact.kit-line__variant{ min-width:0; width:max-content; } .vn-select--compact .vn-select__trigger{ width:max-content; min-width:0; min-height:28px; font-size:var(--text-xs); font-weight:600; color:var(--tmavy-med); padding:var(--vn-var-pad-y) var(--vn-var-pad-x); gap:var(--vn-var-gap); border-color:var(--border-soft); box-shadow:inset 0 1px 0 rgba(255,255,255,.55); } .vn-select--compact .vn-select__trigger > span:first-child{ flex:none; text-align:left; white-space:nowrap; line-height:1.2; } .vn-select--compact .vn-select__trigger:hover{ border-color:var(--border-strong); box-shadow:inset 0 1px 0 rgba(255,255,255,.55); } .vn-select--compact[data-open="true"] .vn-select__trigger{ box-shadow:0 0 0 3px var(--accent-wash); } .vn-select--compact .vn-select__chevron{ flex:none; width:var(--vn-var-chevron); } .vn-select--compact .vn-select__chevron svg{ width:var(--vn-var-chevron); height:var(--vn-var-chevron); } /* vn-variant-dropdown:5 — compact panel (portal renders outside .vn-select--compact) */ .vn-select__panel--compact{ --vn-var-pad-x:10px; --vn-var-pad-y:5px; --vn-var-gap:10px; --vn-var-check:16px; --vn-var-panel-pad:10px; box-sizing:border-box; padding:var(--vn-var-panel-pad); max-height:220px; overflow:visible; left:0; right:auto; min-width:0; } .vn-select__panel--compact .vn-select__opt{ display:block; font-size:var(--text-xs); color:var(--tmavy-med); padding:0; margin:0 0 4px; background:transparent; border-radius:0; justify-content:flex-start; } .vn-select__panel--compact .vn-select__opt:last-child{ margin-bottom:0; } /* Reset base .vn-select__opt > span:first-child — otherwise it styles .vn-select__opt-row */ .vn-select__panel--compact .vn-select__opt > span:first-child{ flex:none; min-width:0; padding:0; margin:0; border-radius:0; background:transparent !important; color:inherit; font-weight:inherit; } .vn-select__panel--compact .vn-select__opt:hover > span:first-child, .vn-select__panel--compact .vn-select__opt[aria-selected="true"] > span:first-child{ background:transparent !important; color:inherit; font-weight:inherit; } .vn-select__panel--compact .vn-select__opt-row{ display:grid; grid-template-columns:max-content 10px 16px; align-items:center; column-gap:0; box-sizing:border-box; width:100%; } .vn-select__panel--compact .vn-select__opt-bubble{ grid-column:1; display:inline-flex; align-items:center; flex:none; padding:var(--vn-var-pad-y) var(--vn-var-pad-x); border-radius:var(--radius-pill); line-height:1.2; white-space:nowrap; font-weight:600; color:var(--tmavy-med); background:transparent; transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .vn-select__panel--compact .vn-select__opt[aria-selected="true"] .vn-select__opt-bubble{ background:var(--accent-wash); font-weight:var(--weight-semibold); } .vn-select__panel--compact .vn-select__opt:hover:not([aria-selected="true"]) .vn-select__opt-bubble{ background:var(--accent-wash); } .vn-select__panel--compact .vn-select__opt-check-slot{ grid-column:3; flex:none; width:var(--vn-var-check); height:var(--vn-var-check); margin:0; display:inline-flex; align-items:center; justify-content:center; } .vn-select__panel--compact .vn-select__check{ flex:none; width:var(--vn-var-check); height:var(--vn-var-check); margin:0; opacity:1; display:inline-flex; align-items:center; justify-content:center; background:var(--accent); border:0; border-radius:50%; color:var(--bily-vosk); box-shadow:none; } .vn-select__panel--compact .vn-select__check svg{ width:10px; height:10px; stroke-width:2.4; } .kit-sum-line__title-row .kit-sum-line__variant.kit-line__variant, .kit-sum-line__title-row .kit-sum-line__variant.vn-select--compact.kit-line__variant { --vn-variant-select-min: 0; } /* ---- Photo ---- */ .vn-photo{ position:relative;overflow:hidden;border-radius:var(--radius-lg); background-color:var(--kremova-plast); background-image: radial-gradient(120% 100% at 70% 10%, var(--medova-zlata-jemna) 0%, transparent 55%), radial-gradient(120% 120% at 20% 100%, var(--lucni-zelena-jemna) 0%, transparent 60%); isolation:isolate; } .vn-photo::before{ content:"";position:absolute;inset:0; background-image:url("HONEYCOMB_URL"); background-size:34px 60px;opacity:.5;mix-blend-mode:multiply; -webkit-mask-image:radial-gradient(140% 120% at 50% 40%, #000 30%, transparent 78%); mask-image:radial-gradient(140% 120% at 50% 40%, #000 30%, transparent 78%); } .vn-photo__label{ position:absolute;inset:0;z-index:1; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px; text-align:center;padding:16px;color:var(--text-muted); } .vn-photo__label svg{ width:30px;height:30px;opacity:.7;stroke-width:1.4; } .vn-photo__label span{ font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium); letter-spacing:var(--tracking-wide); } .vn-photo__img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;display:block; } /* ---- CategoryTile ---- */ .vn-cattile{ position:relative;display:block;border-radius:var(--radius-xl);overflow:hidden; text-decoration:none;color:inherit;isolation:isolate; transition:transform var(--dur-base) var(--ease-soft),box-shadow var(--dur-base) var(--ease-out); } .vn-cattile:hover{ transform:translateY(-3px);box-shadow:var(--shadow-md);text-decoration:none; } .vn-cattile .vn-photo{ border-radius:0; } .vn-cattile__scrim{ position:absolute;inset:0;z-index:3; background:linear-gradient(to top, rgba(44,38,32,.72) 0%, rgba(44,38,32,.15) 45%, transparent 75%); } .vn-cattile__body{ position:absolute;left:0;right:0;bottom:0;z-index:4;padding:20px 22px; display:flex;align-items:flex-end;justify-content:space-between;gap:12px; } .vn-cattile__name{ font-family:var(--font-body);font-weight:var(--weight-semibold); font-size:var(--text-h3);line-height:1.15;color:var(--bily-vosk);margin:0; } .vn-cattile__count{ font-family:var(--font-body);font-size:var(--text-sm);color:var(--medova-zlata-jemna);display:block;margin-top:4px; } .vn-cattile__arrow{ flex:none;width:38px;height:38px;border-radius:var(--radius-pill); background:var(--accent);color:var(--bily-vosk); display:flex;align-items:center;justify-content:center; transition:transform var(--dur-base) var(--ease-soft); } .vn-cattile:hover .vn-cattile__arrow{ transform:translateX(3px); } .vn-cattile__arrow svg{ width:18px;height:18px;stroke-width:2.2; } /* ---- ProductCard ---- */ .vn-pcard{ container-type:inline-size; display:flex;flex-direction:column;background:var(--surface-card); border-radius:var(--radius-lg);overflow:hidden; border:var(--border-width) solid var(--border-soft); transition:transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .vn-pcard:hover{ transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-strong); } .vn-pcard__media{ position:relative; } .vn-pcard__media .vn-photo{ border-radius:0; } .vn-pcard__flags{ position:absolute;top:12px;left:12px;z-index:3;display:flex;gap:6px; } .vn-pcard__wish{ position:absolute;top:10px;right:10px;z-index:3; width:40px;height:40px;border-radius:var(--radius-pill);border:none;cursor:pointer; background:rgba(251,248,241,.85);backdrop-filter:blur(4px); display:flex;align-items:center;justify-content:center;color:var(--tmavy-med); transition:background-color var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-soft); } .vn-pcard__wish:hover{ background:var(--bily-vosk); } .vn-pcard__wish:active{ transform:scale(.9); } .vn-pcard__wish svg{ width:20px;height:20px;stroke-width:1.7; } .vn-pcard__wish[aria-pressed="true"]{ color:var(--chyba); } .vn-pcard__wish[aria-pressed="true"] svg{ fill:var(--chyba); } .vn-pcard__body{ display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px; } .vn-pcard__name{ font-family:var(--font-display);font-weight:var(--weight-semibold); font-size:var(--text-h3);line-height:1.2;color:var(--text-body);margin:0; font-variation-settings:var(--fraunces-soft-heading); } .vn-pcard__name a{ color:inherit;text-decoration:none; } .vn-pcard__name a:hover{ text-decoration:underline;text-decoration-thickness:1px; } .vn-pcard__meta{ font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-muted); } /* Region label inside the card reads as quiet meta, not the green provenance tag. */ .vn-pcard .vn-tag{ color:var(--text-muted);font-weight:var(--weight-medium); } .vn-pcard .vn-tag__dot{ background:var(--text-muted); } .vn-pcard__foot{ display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;flex-wrap:wrap; } .vn-pcard__price{ display:flex;align-items:baseline;gap:8px; } .vn-pcard__price b{ font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-price);color:var(--text-body); } .vn-pcard__price s{ color:var(--text-faint);font-size:var(--text-sm);text-decoration:line-through; } .vn-pcard__add{ display:inline-flex;align-items:center;gap:7px;border:none;cursor:pointer; background:var(--accent);color:var(--bily-vosk); font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-sm); padding:10px 16px;border-radius:var(--radius-pill);min-height:42px; box-shadow:var(--shadow-cta); transition:background-color var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-soft); } .vn-pcard__add:hover{ background:var(--accent-hover); } .vn-pcard__add:active{ transform:scale(.96); } .vn-pcard__add svg{ width:17px;height:17px;stroke-width:2;flex:none; } .vn-pcard__add-label{ display:inline; } /* On narrow cards (2-up mobile grid) collapse quick-add to an icon-only pill so the price + button never overflow. */ @container (max-width: 215px){ .vn-pcard__add{ padding:11px;min-width:44px;justify-content:center; } .vn-pcard__add-label{ display:none; } } /* ---- SectionHeading ---- */ .vn-secthead{ display:flex;flex-direction:column;gap:12px;max-width:640px; } .vn-secthead--center{ align-items:center;text-align:center;margin-inline:auto; } .vn-secthead__title{ font-family:var(--font-display);color:var(--text-heading); font-size:var(--text-h2);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight); font-weight:var(--weight-semibold);margin:0; font-variation-settings:var(--fraunces-soft-heading); } .vn-secthead__lead{ font-size:var(--text-lead);line-height:var(--leading-relaxed);color:var(--text-muted);margin:0; } .vn-secthead__row{ display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap; }