/* =====================================================================
amihub – main stylesheet
1. Fonts & tokens 2. Base 3. Utilities/components 4. Header
5. Home sections 6. Pages 7. WooCommerce 8. Responsive
===================================================================== */
/* 1. Fonts ---------------------------------------------------------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--navy-950: #0B1426;
--navy-900: #14213D;
--navy-800: #1B2E55;
--navy-700: #24407A;
--navy-100: #E8EDF6;
--brand: #F28C1D;
--brand-600: #D9770F;
--brand-700: #B8620A;
--brand-100: #FDEBD6;
--brand-50: #FFF6EC;
--ink: #14213D;
--ink-2: #2C3A55;
--muted: #5B6B85;
--muted-2: #8A97AD;
--line: #E3E8EF;
--line-2: #D2D9E4;
--bg: #F5F7FA;
--bg-2: #EEF2F7;
--white: #FFFFFF;
--success: #1F9D55;
--success-100: #E3F5EA;
--danger: #D9534F;
--danger-100: #FCE8E7;
--radius: 12px;
--radius-lg: 18px;
--radius-sm: 8px;
--shadow-sm: 0 1px 2px rgba(20, 33, 61, .06), 0 1px 1px rgba(20, 33, 61, .04);
--shadow: 0 6px 20px -8px rgba(20, 33, 61, .18), 0 2px 6px rgba(20, 33, 61, .06);
--shadow-lg: 0 24px 50px -20px rgba(20, 33, 61, .3);
--container: 1400px;
--gutter: clamp(16px, 4vw, 32px);
--header-h: 72px;
--ease: cubic-bezier(.2, .7, .2, 1);
}
/* 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
body.drawer-open { overflow: hidden; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-700); text-decoration: none; }
a:hover { color: var(--brand-600); }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; font-weight: 500; letter-spacing: -.015em; color: var(--ink); }
strong, b { font-weight: 600; }
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 3px solid rgba(242, 140, 29, .55); outline-offset: 2px; border-radius: 4px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -100px; z-index: 1000; padding: 10px 16px; background: var(--navy-900); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 8px; }
.muted { color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 3. Utilities / components ----------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding: clamp(56px, 7vw, 96px) 0; }
.section--alt { background: var(--bg); }
.section-heading { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-heading--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-heading--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.section-heading--row > div { max-width: 720px; }
.section-title { margin-bottom: .35em; }
.section-lead { margin: 0; color: var(--muted); font-size: 1.075rem; }
.section-footer { margin-top: 36px; text-align: center; }
/* Home page: every section heading in the scale of the dark pallet block (apple.com's section headlines are
48/52 semibold on desktop and 32/36 on a phone), so the page reads as one design. */
.home .section-title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; }
.home .section-heading { margin-bottom: clamp(30px, 3.4vw, 48px); }
/* „Виж всички ›“ beside a heading (Apple's „Shop iPhone ›“): on the text's last line on desktop, under it on a phone */
.section-link { display: inline-flex; align-items: center; gap: 2px; flex: none; color: var(--navy-700); font-size: 1.0625rem; font-weight: 500; white-space: nowrap; }
.section-link .icon { margin-top: 1px; transition: transform .2s var(--ease); }
.section-link:hover { color: var(--navy-900); text-decoration: underline; text-underline-offset: 3px; }
.section-link:hover .icon { transform: translateX(2px); }
/* Reveal on scroll (home page). The classes are set by main.js only, so nothing is hidden without it; the
move is apple.com's, measured: 30px up while fading in. */
.reveal { opacity: 0; transform: translateY(30px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .9s ease-in-out var(--reveal-delay, 0ms), transform .75s ease-in-out var(--reveal-delay, 0ms); }
@media print { .reveal { opacity: 1; transform: none; } }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-600); }
.eyebrow--light { color: var(--brand); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 10px; font-weight: 600; font-size: .95rem; line-height: 1.2; border: 1.5px solid transparent; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn .icon { flex: none; }
.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 6px 16px -6px rgba(242, 140, 29, .6); }
.btn--primary:hover { background: var(--brand-600); color: #fff; }
.btn--dark { background: var(--navy-900); color: #fff; }
.btn--dark:hover { background: var(--navy-800); color: #fff; }
.btn--outline { background: #fff; color: var(--navy-900); border-color: var(--line-2); }
.btn--outline:hover { border-color: var(--navy-900); color: var(--navy-900); }
.btn--ghost { background: transparent; color: var(--navy-900); }
.btn--ghost:hover { background: var(--bg-2); color: var(--navy-900); }
.btn--ghost-light { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .28); backdrop-filter: blur(4px); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn--lg { padding: 15px 26px; font-size: 1.02rem; border-radius: 12px; }
.btn--sm { padding: 9px 14px; font-size: .875rem; border-radius: 8px; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: var(--ink); }
.icon-btn:hover { background: var(--bg-2); }
.badges { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; }
.badge { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .02em; background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); border: 1px solid rgba(20, 33, 61, .08); }
.badge--sale { background: var(--brand); color: #fff; border-color: transparent; }
.badge--expected { background: #2C7BE5; color: #fff; border-color: transparent; }
.badge--clearance { background: var(--danger); color: #fff; border-color: transparent; }
.badge--size { background: var(--navy-900); color: #fff; border-color: transparent; }
.badge--grade { background: #fff; }
.badge--klas-a { color: var(--success); }
.badge--klas-a-b { color: #2C7BE5; }
.badge--klas-b { color: var(--brand-700); }
.badge--klas-c { color: var(--danger); }
.chip { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; font-size: .875rem; font-weight: 500; color: var(--ink-2); transition: all .15s; }
.chip:hover { border-color: var(--navy-900); color: var(--navy-900); }
.chip.is-active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; font-weight: 500; color: var(--ink-2); }
.field input:not([type="range"]):not([type="checkbox"]), .field select, .field textarea, .form-row input.input-text, .form-row select, .form-row textarea, .woocommerce-Input, .search-again input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff; font-weight: 500; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus, .form-row input.input-text:focus, .form-row select:focus, .form-row textarea:focus, .woocommerce-Input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(242, 140, 29, .18); }
.field--full { grid-column: 1 / -1; }
.field--range span { display: flex; justify-content: space-between; }
.field--range output { color: var(--brand-600); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 16px; }
.hp { position: absolute !important; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--muted); margin-bottom: 20px; }
.checkbox input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand); }
input[type="range"] { width: 100%; accent-color: var(--brand); }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 10px; font-weight: 500; margin-bottom: 16px; }
.notice--success { background: var(--success-100); color: #14602F; }
.notice--error { background: var(--danger-100); color: #8B2B27; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.check-list { list-style: none; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); }
.check-list .icon { flex: none; margin-top: 4px; color: var(--success); }
.empty-state { text-align: center; color: var(--muted); padding: 40px 0; }
/* 4. Header ---------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: 0 6px 24px -12px rgba(20, 33, 61, .25); }
.header__inner { display: flex; align-items: center; gap: clamp(12px, 2.5vw, 36px); min-height: var(--header-h); }
.header__brand { flex: none; }
.menu-toggle { display: none; margin-left: -8px; }
.brand { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 1.6rem; letter-spacing: -.02em; line-height: 1; color: var(--navy-900); }
.brand:hover { color: var(--navy-900); }
.brand__ami { color: var(--navy-900); }
.brand__hub { display: inline-block; padding: 4px 8px 5px; border-radius: 7px; background: var(--brand); color: #fff; font-weight: 700; font-size: .9em; }
.custom-logo-link img { max-height: 48px; width: auto; }
.header__search { flex: 1 1 auto; max-width: 620px; }
.search-form { display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 6px 0 18px; background: #fff; border: 1px solid var(--brand); border-radius: 999px; transition: border-color .15s, box-shadow .15s; }
.search-form:focus-within { border-color: var(--brand-600); box-shadow: 0 0 0 3px rgba(242, 140, 29, .18); }
.search-form__input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0; font-size: .95rem; color: var(--ink); }
.search-form__input::placeholder { color: var(--muted-2); }
.search-form__input:focus { outline: none; }
.search-form__submit { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: transparent; color: var(--brand); transition: background .15s, color .15s; }
.search-form__submit:hover { background: var(--brand-50); color: var(--brand-600); }
.header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.header-action { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; color: var(--ink); line-height: 1.15; font-weight: 500; font-size: .9rem; }
.header-action:hover { background: var(--bg-2); color: var(--ink); }
.header-action__label { display: flex; flex-direction: column; }
.header-cart { gap: 16px; }
.header-cart .icon-cart { color: var(--brand); }
.header-cart:hover .icon-cart { color: var(--brand-600); }
.header-cart__icon { position: relative; display: inline-flex; }
.header-cart__count { position: absolute; top: -10px; right: -13px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .67rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.header-cart__count.bump { animation: bump .4s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.main-nav { border-top: 1px solid var(--line); background: #fff; }
.main-nav__inner { display: flex; align-items: center; gap: 8px; min-height: 50px; }
.cat-menu { position: relative; flex: none; }
.cat-menu__toggle { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; margin-left: calc(-1 * var(--gutter) / 2); border-radius: 10px; background: var(--navy-900); color: #fff; font-weight: 600; font-size: .92rem; }
.cat-menu__toggle:hover, .cat-menu.is-open .cat-menu__toggle { background: var(--navy-800); }
.cat-menu__chevron { transition: transform .2s; }
.cat-menu.is-open .cat-menu__chevron { transform: rotate(180deg); }
.cat-menu__panel { position: absolute; top: calc(100% + 8px); left: calc(-1 * var(--gutter) / 2); width: 320px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 50; }
.cat-menu__panel ul { list-style: none; }
.cat-menu__panel a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--ink); font-weight: 500; font-size: .92rem; }
.cat-menu__panel a:hover { background: var(--bg); color: var(--ink); }
.cat-menu__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--pl-box-top, var(--bg-2)); color: var(--cat-accent, var(--navy-900)); flex: none; }
.cat-menu__name { flex: 1; min-width: 0; }
.cat-menu__all a { color: var(--brand-600); font-weight: 500; border-top: 1px solid var(--line); margin-top: 6px; border-radius: 0 0 10px 10px; }
.primary-menu { display: flex; align-items: center; gap: 4px; list-style: none; }
.primary-menu > li { position: relative; }
.primary-menu a { display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 10px; color: var(--ink-2); font-weight: 500; font-size: .92rem; }
.primary-menu a:hover, .primary-menu .current-menu-item > a, .primary-menu .current_page_item > a, .primary-menu .current-menu-ancestor > a { color: var(--navy-900); background: var(--bg-2); }
.primary-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 220px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; list-style: none; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .18s var(--ease); z-index: 40; }
.primary-menu li:hover > .sub-menu, .primary-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.primary-menu .sub-menu a { display: flex; width: 100%; font-weight: 500; }
.main-nav__cta { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; color: var(--brand-700); background: var(--brand-50); font-weight: 600; font-size: .88rem; }
.main-nav__cta:hover { background: var(--brand-100); color: var(--brand-700); }
/* Seven items in the bar: never break a label mid-phrase; below ~1340px tighten instead of wrapping,
and under 1120px the offers pill keeps only its star until the phone menu takes over at 960px. */
.primary-menu a, .main-nav__cta, .cat-menu__toggle { white-space: nowrap; }
@media (max-width: 1340px) and (min-width: 961px) {
.primary-menu { gap: 0; }
.primary-menu a { padding: 9px 9px; font-size: .86rem; }
.cat-menu__toggle { padding: 9px 12px; gap: 8px; font-size: .86rem; }
.main-nav__cta { padding: 8px 10px; font-size: .82rem; gap: 6px; }
}
@media (max-width: 1120px) and (min-width: 961px) {
.main-nav__cta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.main-nav__cta { padding: 9px 11px; }
}
.drawer-backdrop { position: fixed; inset: 0; background: rgba(11, 20, 38, .55); z-index: 200; opacity: 0; transition: opacity .25s; }
.drawer-backdrop.is-open { opacity: 1; }
.mobile-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(360px, 88vw); background: #fff; z-index: 201; transform: translateX(-100%); transition: transform .28s var(--ease); overflow-y: auto; padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 18px; }
.mobile-drawer.is-open { transform: none; }
.mobile-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.drawer-menu, .drawer-cats { list-style: none; display: grid; gap: 2px; }
.drawer-menu a { display: block; padding: 12px 10px; border-radius: 10px; font-weight: 500; color: var(--ink); font-size: 1.02rem; }
.drawer-menu a:hover { background: var(--bg); }
.drawer-menu .sub-menu { display: none; }
.mobile-drawer__label { margin: 4px 0 -8px; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.drawer-menu--offers { margin-bottom: 2px; }
.drawer-menu__offers { display: flex !important; align-items: center; gap: 10px; background: var(--brand-50); color: var(--brand-600) !important; font-weight: 600 !important; }
.drawer-menu__offers:hover { background: var(--brand-100); }
.drawer-menu__offers .icon { color: var(--brand); }
.offers-page__intro { margin-bottom: 28px; }
.offers-page__empty { color: var(--muted); font-size: 1.02rem; }
.drawer-cats a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; color: var(--ink-2); font-weight: 500; }
.drawer-cats a:hover { background: var(--bg); }
.mobile-drawer__actions { display: grid; gap: 10px; }
.mobile-drawer__contacts { display: grid; gap: 8px; font-size: .95rem; padding-top: 16px; border-top: 1px solid var(--line); }
.mobile-drawer__contacts a { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
/* 5. Home sections --------------------------------------------------- */
/* Hero slider */
.hero { position: relative; background: var(--navy-900); color: #fff; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 500px at 80% 20%, rgba(36, 64, 122, .55), transparent 60%), radial-gradient(800px 400px at 10% 90%, rgba(242, 140, 29, .16), transparent 60%), linear-gradient(180deg, var(--navy-900), var(--navy-950)); }
.hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%); pointer-events: none; }
/* Hero slider */
.hero-slider { position: relative; z-index: 1; }
/* locked to the banner's own 2400x706 ratio – a fixed height crops the art sideways */
.hero-slider__track { position: relative; height: auto; aspect-ratio: 2400 / 706; min-height: 360px; }
.hero-slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility .7s; }
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide__media { position: absolute; inset: 0; overflow: hidden; }
.hero-slide__media img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; transform: scale(1.02); }
.hero-slide.is-active .hero-slide__media img { animation: heroZoom 14s ease-out both; }
.hero-slide__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 20, 38, .95) 0%, rgba(11, 20, 38, .86) 30%, rgba(11, 20, 38, .4) 56%, rgba(11, 20, 38, .05) 100%), linear-gradient(180deg, rgba(11, 20, 38, .18) 0%, rgba(11, 20, 38, 0) 40%, rgba(11, 20, 38, .42) 100%); }
.hero-slide__inner { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1fr; align-items: center; gap: clamp(20px, 3vw, 40px); padding-top: 36px; padding-bottom: 64px; }
.hero-slide--products .hero-slide__inner { grid-template-columns: 1fr 1.05fr; }
.hero-slide__content { max-width: 620px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hero-slide.is-active .hero-slide__content > * { animation: rise .7s var(--ease) both; }
.hero-slide.is-active .hero-slide__content > :nth-child(2) { animation-delay: .08s; }
.hero-slide.is-active .hero-slide__content > :nth-child(3) { animation-delay: .16s; }
.hero-slide.is-active .hero-slide__content > :nth-child(4) { animation-delay: .24s; }
.hero-slide__eyebrow { display: block; margin: 0; color: rgba(255, 255, 255, .92); font-weight: 500; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.hero-slide__eyebrow > span { display: inline; line-height: 1.4; }
.hero-slide__title { margin: 0; color: #fff; font-size: clamp(1.9rem, 3.1vw, 3rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.14; text-shadow: 0 2px 20px rgba(0, 0, 0, .35); }
.hero-slide__text { margin: 0; max-width: 520px; color: rgba(255, 255, 255, .85); font-size: clamp(.95rem, 1.05vw, 1.05rem); line-height: 1.5; }
.hero-slide__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.hero-slide__actions .btn--lg { padding: 12px 20px; font-size: .95rem; border-radius: 10px; }
.hero-slide__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; }
.hero-slide__glow { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(242, 140, 29, .38), rgba(242, 140, 29, 0) 70%); filter: blur(12px); }
.hero-slide__products { position: relative; width: min(100%, 700px); height: auto; }
.hero-slide.is-active .hero-slide__products { animation: floatIn .9s var(--ease) both; }
@keyframes floatIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.hero-slider__arrow { position: absolute; top: 50%; bottom: auto; transform: translateY(-50%); z-index: 3; width: 34px; height: 62px; padding: 0; border: 0; border-radius: 4px; background: none; color: #fff; opacity: .45; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; filter: drop-shadow(0 1px 4px rgba(11, 20, 38, .6)); transition: opacity .2s; }
.hero-slider__arrow--prev { left: 0; right: auto; }
.hero-slider__arrow--next { right: 0; }
.hero-slider__arrow:hover { opacity: 1; }
.hero-slider__arrow:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: -2px; }
/* the dots: small rings at the foot, the current one filled in the brand orange (eMAG's pattern) */
.hero-slider__pager { position: absolute; left: 50%; bottom: 16px; z-index: 3; display: flex; gap: 4px; transform: translateX(-50%); }
.hero-slider__pip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hero-slider__pip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85), 0 1px 3px rgba(11, 20, 38, .45); transition: background-color .2s, box-shadow .2s; }
.hero-slider__pip:hover::before { background: rgba(255, 255, 255, .45); }
.hero-slider__pip.is-active::before { background: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand), 0 1px 3px rgba(11, 20, 38, .45); }
.hero-slider__pip:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 50%; }
.hero-slider.is-light .hero-slider__pip::before { box-shadow: inset 0 0 0 1.5px rgba(20, 33, 61, .7); }
.hero-slider.is-light .hero-slider__pip.is-active::before { background: var(--navy-900); box-shadow: inset 0 0 0 1.5px var(--navy-900); }
/* The price beside the button that leads to the catalog („From $1199 … Buy“ on Apple's hero): one glass
platter around both. On a phone the price stands above the button, inside the slide. */
.hero-price { display: inline-flex; align-items: center; gap: 16px; padding: 6px 6px 6px 18px; border-radius: 16px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hero-price__text { color: #F5F5F7; font-size: .95rem; font-weight: 600; line-height: 1.25; white-space: nowrap; }
/* Products slide: brand-orange banner (eMAG pattern), navy text */
.hero-slide--orange { background: linear-gradient(135deg, #F9B25C 0%, #F28C1D 55%, #E37D14 100%); }
.hero-slide--orange .hero-slide__title { color: var(--navy-900); text-shadow: none; }
.hero-slide--orange .hero-slide__text { color: rgba(20, 33, 61, .86); }
.hero-slide--orange .hero-slide__eyebrow { color: rgba(20, 33, 61, .8); text-shadow: none; }
.hero-slide--orange .hero-slide__eyebrow .text-brand { color: var(--navy-900); }
.hero-slide--orange .btn--primary { background: var(--navy-900); box-shadow: 0 8px 18px -8px rgba(20, 33, 61, .7); }
.hero-slide--orange .btn--primary:hover { background: #0B1426; }
.hero-slide--orange .btn--ghost-light { color: var(--navy-900); border-color: rgba(20, 33, 61, .35); background: rgba(255, 255, 255, .28); }
.hero-slide--orange .btn--ghost-light:hover { background: rgba(255, 255, 255, .45); color: var(--navy-900); border-color: rgba(20, 33, 61, .5); }
.hero-slide--orange .hero-slide__glow { background: radial-gradient(circle, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%); }
.hero-slide--orange .hero-price { background: rgba(255, 255, 255, .28); box-shadow: inset 0 0 0 1px rgba(20, 33, 61, .2); }
.hero-slide--orange .hero-price__text { color: var(--navy-900); }
.hero-slider.is-light .hero-slider__arrow { color: var(--navy-900); filter: drop-shadow(0 1px 4px rgba(255, 255, 255, .7)); }
/* Violet tone (eMAG-style banner): photo overlay and products background in the same hue */
.hero-slide--violet { background: linear-gradient(135deg, #3B1580 0%, #5B2BB8 55%, #6F3BD0 100%); }
.hero-slide--violet .hero-slide__overlay { background: linear-gradient(90deg, rgba(43, 14, 96, .92) 0%, rgba(43, 14, 96, .8) 30%, rgba(43, 14, 96, .3) 54%, rgba(43, 14, 96, 0) 72%), linear-gradient(180deg, rgba(43, 14, 96, .15) 0%, rgba(43, 14, 96, 0) 40%, rgba(43, 14, 96, .35) 100%); }
.hero-slide--violet .hero-slide__glow { background: radial-gradient(circle, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 70%); }
@media (prefers-reduced-motion: reduce) {
.hero-slide, .hero-slide.is-active .hero-slide__media img, .hero-slide.is-active .hero-slide__content > *, .hero-slide.is-active .hero-slide__products { animation: none; transition: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Hero video */
.hero--video { min-height: 560px; display: flex; align-items: center; }
.hero--video::before, .hero--video::after { display: none; }
.hero-video__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 20, 38, .88) 0%, rgba(11, 20, 38, .55) 55%, rgba(11, 20, 38, .3) 100%); }
.hero-video__content { position: relative; z-index: 1; padding-top: 80px; padding-bottom: 96px; max-width: calc(var(--container)); }
.hero-video__content .hero-slide__title, .hero-video__content .hero-slide__text { max-width: 640px; }
.hero-video__toggle { position: absolute; right: var(--gutter); bottom: 22px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
/* Trust strip */
.trust { background: #fff; border-bottom: 1px solid var(--line); }
.trust__list { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.trust__item { display: flex; align-items: center; gap: 14px; padding: 22px 20px; border-right: 1px solid var(--line); }
.trust__item:last-child { border-right: 0; }
.trust__icon { flex: none; width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-50); color: var(--brand-600); }
.trust__text { display: flex; flex-direction: column; gap: 2px; font-size: .82rem; color: var(--muted); }
.trust__text strong { font-size: .95rem; color: var(--ink); }
/* Brand strip */
/* Brand marquee: one slow loop (~34 s), paused on hover, edges faded; a static wrapped row when motion is reduced */
.brands { padding: clamp(26px, 4vw, 44px) 0 clamp(26px, 4vw, 44px); background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.brands__label { margin: 0 0 20px; text-align: center; font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.brands__marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.brands__track { display: flex; width: max-content; animation: brands-scroll 34s linear infinite; will-change: transform; }
.brands__marquee:hover .brands__track { animation-play-state: paused; }
.brands__list { flex: none; display: flex; align-items: center; gap: clamp(44px, 5.5vw, 80px); margin: 0; padding: 0 clamp(44px, 5.5vw, 80px) 0 0; list-style: none; }
.brands__item { white-space: nowrap; font-size: clamp(1.3rem, 1.9vw, 1.7rem); font-weight: 800; letter-spacing: -.02em; color: #1d1d1f; }
.brands__item--note { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--muted-2); }
.brands__item--logo { display: flex; align-items: center; }
.brands__logo { display: block; height: var(--h, 28px); aspect-ratio: var(--ratio, 4); background: var(--logo) no-repeat center / contain; }
.brands__logo-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes brands-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.brands__track { animation: none; width: auto; justify-content: center; }
.brands__list { flex-wrap: wrap; justify-content: center; padding-right: 0; gap: 12px 36px; }
.brands__list[aria-hidden="true"] { display: none; }
.brands__marquee { -webkit-mask-image: none; mask-image: none; }
}
.woocommerce span.onsale, .woocommerce-page span.onsale { display: none !important; }
/* Offers carousel */
.offers { background: var(--bg); }
.carousel-nav { display: flex; gap: 8px; flex: none; }
.carousel-nav__btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line-2); background: #fff; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; transition: all .15s; }
.carousel-nav__btn:hover:not(:disabled) { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.carousel-nav__btn:disabled { opacity: .35; cursor: default; }
.carousel { position: relative; }
.carousel__track { display: flex !important; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 4px 12px; margin: -4px -4px 0; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > li { flex: 0 0 calc((100% - 60px) / 4); scroll-snap-align: start; }
/* under the row: the dots in the middle, the arrows at the right end; gone when everything fits on one page */
.carousel__foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 10px; }
.carousel__foot .carousel__dots { grid-column: 2; margin-top: 0; }
.carousel__foot .carousel-nav { grid-column: 3; justify-self: end; }
.carousel.is-static .carousel__foot { display: none; }
.carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); transition: all .2s; }
.carousel__dot.is-active { background: var(--brand); width: 24px; border-radius: 4px; }
/* Product card (shared with shop) */
ul.products { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; }
ul.products::before, ul.products::after, .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after { display: none !important; content: none !important; }
.product-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; min-width: 0; margin: 0 !important; width: auto !important; float: none !important; }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.product-card__media { position: relative; display: block; aspect-ratio: 4 / 3; background: #fff; border-bottom: 1px solid var(--line); overflow: hidden; }
.product-visual { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.product-visual--photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.product-card:hover .product-visual--photo img { transform: scale(1.04); }
.product-visual--illustration { background: radial-gradient(ellipse at 50% 90%, var(--pl-box-top, #eee) 0%, transparent 60%); }
.product-visual__svg { width: 72%; height: auto; transition: transform .35s var(--ease); }
.product-card:hover .product-visual__svg { transform: translateY(-4px) scale(1.03); }
.product-visual__icon { position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--cat-accent, var(--navy-900)); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.product-card__soldout { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .6); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--danger); font-size: 1.1rem; }
.product-card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; flex: 1; }
.product-card__cat { font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.product-card__title { font-size: 1.05rem; line-height: 1.3; margin: 0; font-weight: 500; }
.product-card__title a { color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__title a:hover { color: var(--navy-700); }
.product-card__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: .84rem; color: var(--muted); font-weight: 500; }
.product-card__meta span + span::before { content: "·"; margin-right: 8px; color: var(--muted-2); }
.product-card__items { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.price-block__main { font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; color: var(--navy-900); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price-block__main .price { display: contents; }
.price-block__main del { font-size: .95rem; font-weight: 500; color: var(--muted-2); text-decoration: line-through; }
.price-block__main del .amount { color: var(--muted-2); }
.price-block__main ins { text-decoration: none; }
.price-block__main .amount { color: var(--navy-900); }
.price-block__meta { display: flex; gap: 10px; font-size: .78rem; color: var(--muted); }
.product-card__actions { flex: none; position: relative; z-index: 2; }
.woocommerce .product-card__actions a.button, .product-card__actions .button { display: inline-flex !important; align-items: center; justify-content: center; width: 46px; height: 46px; min-width: 46px; padding: 0 !important; border-radius: 12px !important; background: var(--brand) !important; color: #fff !important; border: 0; box-shadow: 0 4px 12px -4px rgba(242, 140, 29, .55); transition: background .15s, transform .15s var(--ease), box-shadow .15s; }
.woocommerce .product-card__actions a.button:hover, .product-card__actions .button:hover { background: var(--brand-600) !important; transform: translateY(-1px); box-shadow: 0 6px 16px -4px rgba(242, 140, 29, .6); }
.product-card__actions .button .icon { width: 21px; height: 21px; flex: none; }
.product-card__actions .button:active { transform: translateY(0); }
.product-card__actions .button.loading { opacity: .65; }
.woocommerce .product-card__actions a.button.added, .product-card__actions .button.added { background: var(--success) !important; box-shadow: none; }
.product-card__actions .added_to_cart { display: none; }
/* the whole card links to the pallet; the cart button and the category link stay clickable */
.product-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-lg); }
.product-card__media { position: relative; z-index: 2; }
/* Sizes */
.sizes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 28px; }
.sizes-single { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: stretch; }
.pallet-explainer--side { grid-template-columns: 1fr; align-content: center; }
.pallet-explainer--side .pallet-explainer__visual { max-width: 300px; }
.sizes-single--page { align-items: start; }
.sizes-single--page .size-card { grid-template-columns: 1fr; }
.sizes-single--page .size-card__visual { aspect-ratio: 4 / 3; min-height: 0; }
.sizes-single--page .size-card__body { padding: 26px 28px 28px; }
.size-card { display: grid; grid-template-columns: 1.1fr .9fr; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.size-card__visual { position: relative; background: #F6F7F8; min-height: 380px; }
.size-card__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The render is a photograph now: white lines with a soft shadow read on concrete and cardboard alike. */
.size-card__dimlines { position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; pointer-events: none; }
.size-card__dimlines .dim-line { fill: none; stroke: currentColor; stroke-width: 2.2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.size-card__dimlines .dim-tick { stroke: currentColor; stroke-width: 2.2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.size-card__dimlines .dim-label { font: 700 32px/1 var(--font); fill: var(--navy-900); }
.size-card__dimlines .dim-label-bg { fill: #fff; stroke: var(--line-2); stroke-width: 1; }
.size-card__body { padding: 34px 36px 36px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.size-card__title { margin: 0; font-size: 1.6rem; }
.size-card__text { color: var(--muted); margin: 0; }
/* Four figures, hairline-separated: the 1px gap over a line-coloured bed draws the rules. */
.size-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 8px 0 0; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.size-specs__cell { background: #fff; padding: 15px 18px; }
.size-specs dt { margin: 0 0 3px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.size-specs dd { margin: 0; font-size: 1.22rem; font-weight: 600; line-height: 1.2; color: var(--navy-900); white-space: nowrap; }
.size-specs dd span { margin-left: 4px; font-size: .8rem; font-weight: 500; color: var(--muted); }
.pallet-explainer { display: grid; grid-template-columns: 360px 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-lg); background: var(--navy-900); color: #fff; }
.pallet-explainer .eyebrow { color: var(--brand); }
.pallet-explainer h3, .pallet-explainer h2 { color: #fff; font-size: 1.5rem; }
.pallet-explainer p { color: rgba(255, 255, 255, .78); }
.pallet-explainer .check-list li { color: rgba(255, 255, 255, .88); }
.pallet-explainer .check-list .icon { color: var(--brand); }
.pallet-explainer__svg { width: 100%; --pl-shadow: #000; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35)); }
.pallet-explainer__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.pallet-explainer--page { background: #fff; color: var(--ink); padding: 0; grid-template-columns: 420px 1fr; }
.pallet-explainer--page h2 { color: var(--ink); font-size: clamp(1.5rem, 2.6vw, 2.125rem); }
.pallet-explainer--page p { color: var(--ink-2); }
.pallet-explainer--page .eyebrow { color: var(--brand-600); }
.pallet-explainer--page .pallet-explainer__svg { --pl-shadow: #0f1a30; filter: drop-shadow(0 20px 30px rgba(20, 33, 61, .18)); }
/* Why amihub + quick inquiry */
.why { background: linear-gradient(180deg, #fff 0%, var(--bg) 100%); }
.why__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.stats { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat { position: relative; padding: 22px 22px 20px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.stat__icon { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-50); color: var(--brand-600); display: inline-flex; align-items: center; justify-content: center; }
.stat__value { font-size: 2.2rem; font-weight: 700; letter-spacing: -.03em; color: var(--navy-900); line-height: 1.1; }
.stat__label { color: var(--muted); font-size: .92rem; max-width: 200px; }
.why__grid { align-items: center; }
.why__intro .section-heading { margin-bottom: 26px; }
.why__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 28px; }
.why__fact-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-50); color: var(--brand-600); margin-bottom: 12px; }
.why__fact-title { margin: 0 0 6px; font-size: 1.02rem; }
.why__fact-text { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.55; }
.why__media { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: #F6F7F8; box-shadow: var(--shadow); }
.why__media img { display: block; width: 100%; height: auto; }
.contact-form--compact .form-grid { gap: 12px; margin-bottom: 12px; }
/* How it works */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { position: relative; padding: 28px 24px 26px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); }
.step__num { position: absolute; top: 18px; right: 20px; font-size: 3rem; font-weight: 700; color: var(--bg-2); line-height: 1; letter-spacing: -.04em; }
.step__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--brand-50); color: var(--brand-600); margin-bottom: 18px; }
.step__title { font-size: 1.1rem; margin-bottom: 8px; }
.step__text { margin: 0; color: var(--muted); font-size: .95rem; }
.how { background: #fff; }
/* FAQ */
.faq__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.faq__aside { position: sticky; top: 140px; }
.faq-list { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.faq-item + .faq-item { border-top: 1px solid var(--line); }
/* The open item is marked while it moves: [open] is set for the whole glide, .is-closing flips the
look back at the start of the close. Timings copied from the reference: 500 ms ease for the panel
and the icon turn, 300 ms for colours, the highlight 250 ms after the panel starts. */
.faq-item { position: relative; isolation: isolate; }
.faq-item::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(242, 140, 29, .10), rgba(242, 140, 29, .035) 55%, rgba(242, 140, 29, 0)); transition: opacity .3s ease; }
.faq-item[open]:not(.is-closing)::before { opacity: 1; transition-delay: .25s; }
.faq-item__q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; font-weight: 600; font-size: 1.04rem; color: var(--navy-900); cursor: pointer; transition: color .3s ease, background .2s ease; }
.faq-item__q:hover { background: var(--bg); }
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__icon { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-2); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; transition: transform .5s ease, background .3s ease, color .3s ease, border-color .3s ease; }
.faq-item[open]:not(.is-closing) .faq-item__q { color: var(--brand-600); }
.faq-item[open]:not(.is-closing) .faq-item__icon { transform: rotate(45deg); background: var(--brand); border-color: var(--brand); color: #fff; }
.faq-item__a { padding: 0 24px 22px; color: var(--ink-2); max-width: 66ch; opacity: 1; transform: none; transition: opacity .3s ease .12s, transform .5s ease; }
.faq-item.is-closing .faq-item__a { opacity: 0; transform: translateY(-4px); transition-delay: 0s; }
.faq-item.is-animating:not(.is-closing) .faq-item__a { animation: fade .5s ease both; }
.faq-item__a p:last-child { margin-bottom: 0; }
@keyframes fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.faq__more { margin-top: 18px; }
.help-card { margin-top: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 2.6vw, 30px); box-shadow: var(--shadow); }
.help-card__title { margin: 0 0 6px; font-size: 1.25rem; }
.help-card__sub { margin: 0 0 14px; color: var(--muted); font-size: .95rem; }
.help-card__row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); color: var(--ink); }
.help-card__row:hover strong { color: var(--brand-600); }
.help-card__ico { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-50); color: var(--brand-600); display: inline-flex; align-items: center; justify-content: center; }
.help-card__row strong { display: block; font-weight: 600; font-size: 1.02rem; color: var(--navy-900); transition: color .15s var(--ease); }
.help-card__row small { display: block; color: var(--muted); font-size: .83rem; margin-top: 2px; }
.help-card__btn { width: 100%; margin-top: 16px; }
/* CTA: dark rounded card inside a white section (the full-width navy band ended in a hard seam
against the light footer) */
.cta { background: #fff; padding: clamp(40px, 5vw, 64px) 0 clamp(44px, 5vw, 72px); }
.cta__card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(28px, 3.4vw, 44px) clamp(22px, 3.2vw, 48px); border-radius: 20px; background: var(--navy-900); color: #fff; }
.cta__card::before { content: ""; position: absolute; right: -8%; top: -70%; width: 45%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(242, 140, 29, .28), transparent 65%); }
.cta__text { position: relative; max-width: 620px; }
.cta__text h2 { color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 8px; }
.cta__text p { margin: 0; color: rgba(255, 255, 255, .75); }
.cta__text p:empty { display: none; }
.cta__actions { position: relative; display: flex; gap: 12px; flex-wrap: wrap; flex: none; }
/* Footer: light, eMAG-like — white band, four columns, trust row, grey copyright bar */
.site-footer { background: #fff; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13px; line-height: 20px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-top: 44px; padding-bottom: 28px; }
.footer__about p { margin: 14px 0 18px; max-width: 360px; color: var(--muted); }
.footer__contacts { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; }
.footer__contacts li, .footer__contacts a { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.footer__contacts a:hover { color: var(--brand-600); }
.footer__contacts .icon { color: var(--brand); flex: none; }
.footer__social { display: flex; gap: 8px; margin-top: 18px; }
.footer__social a { width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--ink); }
.footer__social a:hover { border-color: var(--brand); color: var(--brand-600); }
.footer__title { color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; margin: 0 0 14px; }
.footer-menu { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; }
.footer-menu a { color: var(--ink-2); }
.footer-menu a:hover { color: var(--brand-600); text-decoration: underline; }
.footer__trust { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 0 0 28px; }
.footer__trust-item { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer__trust-label { font-size: 12px; color: var(--muted); }
.marks { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mark { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 6px; background: #fff; border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.mark--visa { color: #1A1F71; font-style: italic; font-weight: 800; font-size: 14px; letter-spacing: .02em; }
.mark--paypal { gap: 0; font-style: italic; font-weight: 800; font-size: 14px; letter-spacing: -.01em; }
.mark--paypal b { font-weight: inherit; color: #003087; }
.mark--paypal b + b { color: #009CDE; }
.mark--mastercard svg { display: block; width: 34px; height: 20px; }
.footer__bottom { background: var(--bg); border-top: 1px solid var(--line); }
.footer__bottom-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; font-size: 12px; color: var(--muted); }
.footer__bottom p { margin: 0; }
/* 6. Pages ------------------------------------------------------------ */
.page-header { background: var(--navy-900); color: #fff; padding: clamp(36px, 5vw, 64px) 0; position: relative; overflow: hidden; }
.page-header::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 300px at 85% 0%, rgba(36, 64, 122, .6), transparent 60%); }
.page-header .container { position: relative; }
.page-header__title { color: #fff; margin-bottom: 8px; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.page-header__text { margin: 0; max-width: 680px; color: rgba(255, 255, 255, .75); font-size: 1.05rem; }
.page-main .container { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(48px, 6vw, 80px); }
.page-content--wide { max-width: none; }
.prose { max-width: 760px; font-size: 1.05rem; color: var(--ink-2); }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3 { color: var(--ink); margin-top: 1.6em; }
.prose img { border-radius: var(--radius); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose blockquote { margin: 1.5em 0; padding: 12px 20px; border-left: 4px solid var(--brand); background: var(--bg); border-radius: 0 10px 10px 0; }
.prose__hero { margin: 0 0 24px; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: clamp(32px, 4vw, 56px) 0; }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.post-card__media img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.post-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card__date { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.post-card__title { font-size: 1.15rem; margin: 0; }
.post-card__title a { color: var(--ink); }
.post-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.post-nav { display: flex; justify-content: space-between; gap: 16px; padding: 32px 0 64px; max-width: 760px; font-weight: 500; }
.pagination, .woocommerce-pagination { margin: 40px 0 0; }
.nav-links, .woocommerce-pagination ul.page-numbers { display: flex; justify-content: center; gap: 6px; list-style: none; border: 0 !important; margin: 0; }
.woocommerce-pagination ul.page-numbers li { border: 0 !important; }
.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--line-2) !important; background: #fff !important; color: var(--ink) !important; font-weight: 500; }
.page-numbers.current, .page-numbers:hover { background: var(--navy-900) !important; border-color: var(--navy-900) !important; color: #fff !important; }
.search-again { max-width: 560px; margin: 24px 0; }
/* 404: plain centred page, no card and no illustration */
.error-page { text-align: center; padding: clamp(56px, 7vw, 100px) var(--gutter) clamp(52px, 6vw, 92px); display: flex; flex-direction: column; align-items: center; }
.error-page .eyebrow { margin-bottom: 10px; }
.error-page__title { margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.error-page__text { max-width: 480px; margin: 12px 0 0; color: var(--muted); font-size: 1.02rem; line-height: 1.6; }
.error-page__search { width: min(100%, 460px); margin: 26px 0 0; }
.error-page__search .search-form { display: flex; }
.error-page__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.error-page__links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); width: min(100%, 460px); font-size: .92rem; }
.error-page__links a { color: var(--muted); }
.error-page__links a:hover { color: var(--brand-600); text-decoration: underline; }
@media (max-width: 640px) {
.error-page__actions .btn { width: 100%; }
}
.grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grade-card { padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff; border-top: 4px solid var(--line-2); }
.grade-card--a { border-top-color: var(--success); }
.grade-card--a-b { border-top-color: #2C7BE5; }
.grade-card--b { border-top-color: var(--brand); }
.grade-card--c { border-top-color: var(--danger); }
.grade-card__badge { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--bg); font-weight: 600; font-size: .8rem; margin-bottom: 12px; }
.grade-card h3 { font-size: 1.1rem; }
.grade-card p { margin: 0; color: var(--muted); font-size: .95rem; }
/* 7. WooCommerce ------------------------------------------------------ */
.shop-main .container { padding-bottom: clamp(48px, 6vw, 80px); }
.shop-header { padding: 18px 0 6px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .84rem; color: var(--muted); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--navy-900); }
.breadcrumbs .sep { display: inline-flex; color: var(--muted-2); }
.woocommerce-products-header { padding: 8px 0 24px; }
.woocommerce-products-header__title { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin-bottom: 6px; }
.woocommerce-products-header .term-description, .woocommerce-products-header p { color: var(--muted); max-width: 720px; font-size: 1.05rem; }
.shop-filters { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 16px 0; border-top: 1px solid var(--line); }
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-group__label { font-size: .82rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0 22px; }
.woocommerce-result-count { margin: 0 !important; color: var(--muted); font-size: .9rem; float: none !important; }
.woocommerce-ordering { margin: 0 !important; float: none !important; }
.woocommerce-ordering select { padding: 9px 36px 9px 14px; border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff; font-weight: 500; font-size: .9rem; }
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { border-radius: 12px !important; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-width: 0 !important; border-left: 4px solid var(--success) !important; background: var(--success-100) !important; color: #14602F !important; padding: 14px 18px 14px 48px !important; margin-bottom: 24px !important; }
.woocommerce-info { border-left-color: var(--navy-700) !important; background: var(--navy-100) !important; color: var(--navy-900) !important; }
.woocommerce-error { border-left-color: var(--danger) !important; background: var(--danger-100) !important; color: #8B2B27 !important; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { top: 15px !important; color: inherit !important; }
.woocommerce-message .button, .woocommerce-info .button { float: right; background: var(--navy-900); color: #fff; border-radius: 8px; padding: 8px 14px; font-weight: 600; }
/* WooCommerce moves focus to the notice after add-to-cart; the ring on a plain message reads as an error. */
.woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus, .woocommerce-notices-wrapper > *:focus { outline: none !important; }
.shop-main ul.products { margin-top: 4px; }
.shop-main ul.products li.product { margin: 0; width: auto; }
/* Single product */
/* Cart / Checkout blocks & classic */
.page-main--wide .page-header { padding: 28px 0; }
.wc-block-components-button, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button { background: var(--brand) !important; color: #fff !important; border-radius: 10px !important; font-weight: 600 !important; border: 0 !important; }
.wc-block-components-button:hover { background: var(--brand-600) !important; }
.wc-block-components-button.outlined, .wc-block-components-button.contained.outlined { background: #fff !important; color: var(--navy-900) !important; border: 1.5px solid var(--line-2) !important; }
.wc-block-components-product-name { font-weight: 600 !important; color: var(--ink) !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--navy-900); }
.wc-block-cart .wc-block-cart-items__row, .wc-block-components-order-summary-item { border-color: var(--line) !important; }
.wc-block-components-sidebar .wc-block-components-panel, .wc-block-components-totals-wrapper { border-color: var(--line) !important; }
.wc-block-components-text-input input, .wc-block-components-combobox .components-combobox-control__input, .wc-block-components-select .components-custom-select-control__button, .wc-block-components-textarea { border-radius: 10px !important; border-color: var(--line-2) !important; }
.wc-block-components-text-input input:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 1px var(--brand) !important; }
.wc-block-components-checkout-step__heading .wc-block-components-title, .wc-block-components-title { color: var(--ink) !important; }
.wc-block-components-radio-control__option { border-radius: 10px; }
.wc-block-components-radio-control__input:checked { border-color: var(--brand) !important; }
.wc-block-components-radio-control__input:checked::before { background: var(--brand) !important; }
.wc-block-components-checkbox .wc-block-components-checkbox__input:checked { background: var(--brand) !important; border-color: var(--brand) !important; }
.wc-block-components-product-badge, .wc-block-components-sale-badge { border-radius: 999px !important; }
.wc-block-cart-item__image img, .wc-block-components-order-summary-item__image img { border-radius: 10px; }
.wc-block-components-checkout-return-to-cart-button, .wc-block-components-checkout-return-to-cart-button:hover { color: var(--navy-900) !important; }
.wc-block-components-order-summary .wc-block-components-panel__button { font-weight: 600; }
.wc-block-cart__empty-cart__title, .wc-block-components-checkout-order-summary__title-text { color: var(--ink); }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce-page a.button, .wc-block-grid__product-add-to-cart .wp-block-button__link { background: var(--navy-900) !important; color: #fff !important; border-radius: 10px !important; font-weight: 600 !important; padding: 12px 20px !important; line-height: 1.2 !important; border: 0; }
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--navy-800) !important; }
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #place_order { background: var(--brand) !important; }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce #place_order:hover { background: var(--brand-600) !important; }
.woocommerce table.shop_table { border: 1px solid var(--line) !important; border-radius: 14px !important; border-collapse: separate !important; overflow: hidden; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 14px 16px !important; border-color: var(--line) !important; }
.woocommerce table.shop_table thead th { background: var(--bg); color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.woocommerce form .form-row { margin-bottom: 16px !important; }
.woocommerce form .form-row label { font-weight: 500; font-size: .9rem; color: var(--ink-2); margin-bottom: 6px; }
.woocommerce form .form-row .required { color: var(--danger); }
.woocommerce-checkout .woocommerce-checkout-review-order-table { margin-bottom: 24px; }
.woocommerce-checkout h3 { font-size: 1.25rem; margin: 8px 0 16px; }
.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword, .woocommerce-form-coupon, .woocommerce-form-track-order { border: 1px solid var(--line) !important; border-radius: var(--radius-lg) !important; padding: clamp(24px, 3vw, 36px) !important; background: #fff; }
.woocommerce-form-login__rememberme { display: flex !important; align-items: center; gap: 8px; }
.woocommerce-form-login__submit, .woocommerce-form-register__submit { width: 100%; margin-top: 8px !important; background: var(--brand) !important; }
.woocommerce-privacy-policy-text { font-size: .85rem; color: var(--muted); }
.woocommerce .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { float: none !important; width: auto !important; max-width: none !important; }
.woocommerce .col2-set .col-1 h2, .woocommerce .col2-set .col-2 h2 { font-size: 1.35rem; margin-bottom: 8px; }
.woocommerce .col2-set .col-1 p, .woocommerce .col2-set .col-2 p { color: var(--muted); }
.woocommerce-password-strength { border-radius: 8px; }
.show-password-input { top: 50% !important; transform: translateY(-50%); right: 10px !important; }
/* My account */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper, .woocommerce-account .woocommerce > .woocommerce-form-login, .woocommerce-account .woocommerce > .col2-set, .woocommerce-account .woocommerce > .woocommerce-ResetPassword { grid-column: 1 / -1; }
.woocommerce-account .woocommerce > .woocommerce-form-login, .woocommerce-account .woocommerce > .woocommerce-ResetPassword { max-width: 480px; margin: 0 auto; width: 100%; }
.woocommerce-account .woocommerce > .col2-set { max-width: 980px; margin: 0 auto; }
.woocommerce-account .woocommerce > .col2-set .col-1, .woocommerce-account .woocommerce > .col2-set .col-2 { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 36px); background: #fff; }
.woocommerce-account .woocommerce > .col2-set .col-1 h2, .woocommerce-account .woocommerce > .col2-set .col-2 h2 { margin-bottom: 20px; }
.woocommerce-account .woocommerce > .col2-set form { border: 0 !important; padding: 0 !important; }
.woocommerce-MyAccount-navigation { float: none !important; width: auto !important; }
.woocommerce-MyAccount-content { float: none !important; width: auto !important; }
.woocommerce-MyAccount-content > p:first-child { color: var(--ink-2); font-size: 1.05rem; }
.woocommerce-MyAccount-content h3, .woocommerce-MyAccount-content legend { font-size: 1.15rem; margin: 24px 0 12px; font-weight: 600; }
.woocommerce-MyAccount-content fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 8px 20px 12px; margin-top: 20px; }
.woocommerce-MyAccount-content .woocommerce-Address { border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.woocommerce-MyAccount-content .woocommerce-Address-title { display: flex; justify-content: space-between; align-items: baseline; }
.woocommerce-MyAccount-content .woocommerce-Address-title .edit { font-size: .85rem; font-weight: 600; }
.woocommerce-orders-table__cell-order-actions .button { padding: 8px 12px !important; font-size: .82rem !important; margin-right: 6px; }
.woocommerce-order .woocommerce-order-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; list-style: none; margin: 0 0 32px; }
.woocommerce-order .woocommerce-order-overview li { border: 1px solid var(--line) !important; border-radius: 12px; padding: 14px 16px !important; margin: 0 !important; font-size: .8rem !important; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); float: none !important; }
.woocommerce-order .woocommerce-order-overview li strong { display: block; text-transform: none; letter-spacing: 0; font-size: 1.05rem; color: var(--ink); margin-top: 4px; }
.woocommerce-thankyou-order-received { font-size: 1.3rem; font-weight: 600; color: var(--success); }
.woocommerce-bacs-bank-details { border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.woocommerce-bacs-bank-details .wc-bacs-bank-details-heading { font-size: 1.15rem; }
.wc-bacs-bank-details { list-style: none; display: grid; gap: 6px; }
.wc-bacs-bank-details li { margin: 0 !important; float: none !important; width: auto !important; }
/* 8. Responsive ------------------------------------------------------- */
/* widest first: later, narrower queries must be able to override these */
@media (max-width: 1180px) {
.carousel__track > li { flex-basis: calc((100% - 40px) / 3); }
}
@media (max-width: 1100px) {
.steps, .grades { grid-template-columns: repeat(2, 1fr); }
.carousel__track > li { flex-basis: calc((100% - 20px) / 2); }
ul.products { grid-template-columns: repeat(2, 1fr); }
.size-card { grid-template-columns: 1fr; }
.size-card__visual { aspect-ratio: 4 / 3; min-height: 0; }
}
@media (max-width: 960px) {
.header__search { order: 10; flex-basis: 100%; max-width: none; }
.header__inner { flex-wrap: wrap; padding-top: 10px; padding-bottom: 12px; row-gap: 10px; }
.header-action__label { display: none; }
.menu-toggle { display: inline-flex; }
.main-nav { display: none; }
.trust__list { grid-template-columns: repeat(2, 1fr); }
.trust__item:nth-child(2) { border-right: 0; }
.trust__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.sizes-grid, .sizes-single, .why__grid, .faq__grid { grid-template-columns: 1fr; }
/* phones: the aside dissolves so its children become grid items – heading first, questions, then the contact card */
.faq__aside { display: contents; }
.faq__aside > * { order: 0; }
.faq__list { order: 1; }
.faq__aside > :last-child { order: 2; }
.pallet-explainer, .pallet-explainer--page { grid-template-columns: 1fr; }
.pallet-explainer__visual { max-width: 360px; margin: 0 auto; }
.section-heading--row { flex-direction: column; align-items: flex-start; gap: 14px; }
.cta__card { flex-direction: column; align-items: stretch; gap: 20px; }
.cta__actions { width: 100%; }
.cta__actions .btn { flex: 1 1 200px; }
.footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 32px; padding-bottom: 24px; }
.footer__about { grid-column: 1 / -1; }
.single-product div.product { grid-template-columns: 1fr; }
.woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 24px; }
.woocommerce-account .woocommerce-MyAccount-navigation { order: 2; }
.woocommerce-account .woocommerce-MyAccount-content { order: 1; }
.post-grid { grid-template-columns: repeat(2, 1fr); }
.woocommerce .col2-set { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.brand { font-size: 1.4rem; }
.carousel__track { gap: 12px; }
.carousel__track > li { flex-basis: calc((100% - 12px) / 2); }
ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
/* compact two-up cards */
.product-card { border-radius: 14px; }
.product-card__body { padding: 12px 12px 14px; gap: 6px; }
.product-card__cat { font-size: .64rem; letter-spacing: .04em; }
.product-card__title { font-size: .92rem; line-height: 1.25; }
.product-card__meta { font-size: .74rem; gap: 2px 6px; }
/* The condition line is the same on every pallet and wrapped to two lines in a two-up grid. */
.product-card__meta span + span { display: none; }
.product-card__items { font-size: .76rem; -webkit-line-clamp: 2; }
.product-card__footer { padding-top: 10px; gap: 8px; }
.price-block__main { font-size: 1.08rem; gap: 6px; }
.price-block__main del { font-size: .74rem; }
.price-block__meta { font-size: .7rem; }
.woocommerce .product-card__actions a.button, .product-card__actions .button { width: 38px; height: 38px; min-width: 38px; border-radius: 10px !important; }
.product-card__actions .button .icon { width: 18px; height: 18px; }
.badges { top: 8px; left: 8px; gap: 4px; }
.badge { font-size: .6rem; padding: 3px 7px; }
.badge--size { display: none; } /* every pallet is 120 × 80 cm – no information on a small card */
.product-visual__icon { width: 30px; height: 30px; right: 8px; bottom: 8px; border-radius: 9px; }
.product-visual__icon .icon { width: 16px; height: 16px; }
.trust__list { grid-template-columns: 1fr; }
.trust__item { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 0; }
.trust__item:last-child { border-bottom: 0; }
.steps, .grades, .post-grid { grid-template-columns: 1fr; }
.form-grid { grid-template-columns: 1fr; }
.stats { grid-template-columns: 1fr; }
.footer__trust { gap: 14px; }
.size-card__body { padding: 22px 18px 24px; }
.size-specs__cell { padding: 13px 15px; }
.size-specs dd { font-size: 1.1rem; }
.single-trust { grid-template-columns: 1fr; }
.shop-toolbar { flex-direction: column; align-items: flex-start; }
.carousel-nav { display: none; }
.section-link { font-size: .95rem; }
}
/* WooCommerce clearfix pseudo-elements would otherwise occupy cells in our CSS grids. */
.woocommerce .col2-set::before, .woocommerce .col2-set::after, .woocommerce-page .col2-set::before, .woocommerce-page .col2-set::after,
.woocommerce-account .woocommerce::before, .woocommerce-account .woocommerce::after,
.woocommerce div.product::before, .woocommerce div.product::after,
.woocommerce-page div.product::before, .woocommerce-page div.product::after { display: none !important; content: none !important; }
/* Classic cart polish */
.woocommerce-cart table.cart img { width: 64px; border-radius: 8px; }
.woocommerce-cart table.cart td.product-name a { font-weight: 600; color: var(--ink); }
.woocommerce a.remove { color: var(--danger) !important; font-weight: 400; }
.woocommerce a.remove:hover { background: var(--danger) !important; color: #fff !important; }
.woocommerce .quantity .qty { width: 72px; padding: 9px 8px; border: 1.5px solid var(--line-2); border-radius: 8px; text-align: center; font-weight: 500; }
.woocommerce-cart table.cart td.actions { padding: 16px !important; }
.woocommerce-cart table.cart td.actions .coupon { display: flex; gap: 8px; float: none; }
.woocommerce-cart table.cart td.actions .coupon .input-text { width: 220px !important; padding: 10px 12px !important; border: 1.5px solid var(--line-2) !important; border-radius: 10px; }
.woocommerce-cart table.cart td.actions > .button { float: right; }
.woocommerce-cart .cart-collaterals { display: flex; justify-content: flex-end; }
.woocommerce-cart .cart-collaterals .cart_totals { float: none !important; width: 100% !important; max-width: 480px; }
.woocommerce-cart .cart_totals h2 { font-size: 1.3rem; margin-bottom: 12px; }
.woocommerce-cart .wc-proceed-to-checkout { padding: 16px 0 0 !important; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; text-align: center; font-size: 1.05rem !important; padding: 15px 20px !important; }
.woocommerce-cart .return-to-shop a.button { background: var(--navy-900) !important; }
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info, .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info { margin-bottom: 12px !important; }
.woocommerce-checkout table.shop_table tfoot th { color: var(--ink); text-transform: none; font-size: 1rem; }
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount { color: var(--navy-900); font-size: 1.2rem; }
.woocommerce-checkout #place_order { width: 100%; padding: 15px 20px !important; font-size: 1.05rem !important; }
@media (max-width: 640px) {
.woocommerce-cart table.cart td.actions .coupon { flex-wrap: wrap; }
.woocommerce-cart table.cart td.actions .coupon .input-text { width: 100% !important; }
.woocommerce-cart table.cart td.actions > .button { float: none; width: 100%; margin-top: 10px; }
}
/* Mobile hero: illustration above the chips, single-line top bar */
@media (max-width: 960px) {
}
/* Order received page */
.woocommerce-order .woocommerce-order-overview { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.woocommerce-order .woocommerce-order-overview li { min-width: 0; overflow-wrap: anywhere; }
.woocommerce-order h2, .woocommerce-order .woocommerce-column__title { font-size: 1.35rem; margin: 28px 0 12px; }
.woocommerce-order .woocommerce-bacs-bank-details h2 { margin-top: 0; }
.woocommerce-order .woocommerce-customer-details address { border: 1px solid var(--line) !important; border-radius: 14px; padding: 18px 20px !important; line-height: 1.7; }
.woocommerce-order .woocommerce-notice--success { margin-bottom: 20px; }
/* Hero – single: full-width photo on desktop, compact banner card on phones */
.hero--single { background: var(--navy-900); color: #fff; overflow: hidden; }
.hero--single::before, .hero--single::after { display: none; }
.hero-banner { position: relative; isolation: isolate; min-height: clamp(560px, 76vh, 780px); display: flex; align-items: center; }
.hero-banner__media { position: absolute; inset: 0; overflow: hidden; }
.hero-banner__media img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; transform: scale(1.02); animation: heroZoom 14s ease-out both; }
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1.02); } }
.hero-banner__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 20, 38, .95) 0%, rgba(11, 20, 38, .86) 30%, rgba(11, 20, 38, .4) 56%, rgba(11, 20, 38, .05) 100%), linear-gradient(180deg, rgba(11, 20, 38, .18) 0%, rgba(11, 20, 38, 0) 40%, rgba(11, 20, 38, .42) 100%); }
.hero-banner__content { position: relative; z-index: 1; width: 100%; max-width: var(--container); margin: 0 auto; padding: clamp(64px, 9vw, 120px) var(--gutter); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hero-banner__content > * { animation: rise .7s var(--ease) both; }
.hero-banner__content > :nth-child(2) { animation-delay: .08s; }
.hero-banner__content > :nth-child(3) { animation-delay: .16s; }
.hero-banner__content > :nth-child(4) { animation-delay: .24s; }
.hero-banner__content > :nth-child(5) { animation-delay: .32s; }
.hero-banner__eyebrow { display: block; margin: 0; color: rgba(255, 255, 255, .92); font-weight: 600; font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.hero-banner__eyebrow > span { display: inline; line-height: 1.4; }
.text-brand { color: var(--brand); }
.hero-banner__title { margin: 0; max-width: 660px; color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.hero-banner__text { margin: 0; max-width: 560px; color: rgba(255, 255, 255, .85); font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.55; }
.hero-banner__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
@media (max-width: 960px) and (min-width: 768px) {
.hero-banner { min-height: 0; }
.hero-banner__media img { object-position: 62% 50%; }
.hero-banner__content { padding-top: 48px; padding-bottom: 56px; }
.hero-banner__overlay { background: linear-gradient(90deg, rgba(11, 20, 38, .94) 0%, rgba(11, 20, 38, .8) 45%, rgba(11, 20, 38, .3) 100%); }
}
@media (max-width: 767px) {
.hero--single { background: var(--white); overflow: visible; }
.hero-banner { display: block; min-height: 0; aspect-ratio: 4 / 3; margin: 0; border-radius: 0; overflow: hidden; background: var(--navy-900); box-shadow: none; }
.hero-banner__media img { animation: none; transform: none; object-position: 50% 50%; }
.hero-banner__overlay { background: linear-gradient(90deg, rgba(11, 20, 38, .94) 0%, rgba(11, 20, 38, .86) 36%, rgba(11, 20, 38, .4) 56%, rgba(11, 20, 38, .05) 72%, rgba(11, 20, 38, 0) 100%), linear-gradient(180deg, rgba(11, 20, 38, .15) 0%, rgba(11, 20, 38, 0) 30%, rgba(11, 20, 38, .25) 100%); }
.hero-banner__content { position: absolute; inset: 0; margin: 0; max-width: 64%; padding: 16px 16px; gap: 8px; justify-content: center; }
.hero-banner__eyebrow { font-size: .62rem; letter-spacing: .08em; }
.hero-banner__title { font-size: clamp(1.15rem, 5.6vw, 1.5rem); line-height: 1.12; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.hero-banner__text { display: none; }
.hero-banner__actions { gap: 8px; margin-top: 4px; }
.hero-banner__actions .btn { padding: 9px 13px; font-size: .84rem; border-radius: 9px; }
.hero-banner__actions .btn--ghost-light { display: none; }
}
/* Econt delivery notice ---------------------------------------------- */
.econt-notice { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 14px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--ink-2); }
.econt-notice__icon { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--brand-600); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.econt-notice__body { display: flex; flex-direction: column; gap: 6px; font-size: .95rem; }
.econt-notice__body strong { color: var(--ink); }
.econt-notice__body p { margin: 0; }
.ship-prices { list-style: none; display: grid; gap: 6px; margin: 2px 0; }
.ship-prices li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 14px; border-radius: 10px; background: #fff; font-size: .92rem; }
.ship-prices b { font-size: 1.15rem; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.econt-notice__small { font-size: .85rem; color: var(--muted); }
.econt-notice__small a { color: var(--navy-700); text-decoration: underline; }
.econt-notice--compact { padding: 14px 16px; }
.econt-notice--compact .econt-notice__body { font-size: .9rem; }
.woocommerce-checkout .econt-notice { margin: 0 0 20px; }
.single-product .econt-notice { margin-top: 4px; }
/* Sizes section: explainer card beside the single size card */
.sizes-single .pallet-explainer { grid-template-columns: 1fr; align-content: start; gap: 18px; }
.sizes-single .pallet-explainer__visual { max-width: 280px; margin: 0; }
.sizes-single .pallet-explainer h3 { font-size: 1.35rem; }
@media (max-width: 960px) {
.sizes-single .pallet-explainer__visual { max-width: 240px; }
}
/* Sizes section: a single card, illustration left / specs right */
.sizes-single--solo { grid-template-columns: 1fr; }
.sizes-single--solo .size-card { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.sizes-single--solo .size-card__body { padding: 32px 36px; }
@media (max-width: 960px) {
.sizes-single--solo .size-card { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
.brands__label { margin-bottom: 14px; }
.brands__list { gap: 30px; padding-right: 30px; }
.brands__item { font-size: 1.12rem; }
.brands__logo { height: calc(var(--h, 28px) * .72); }
.brands__item--note { font-size: .9rem; }
}
@media (max-width: 1023px) {
.hero-slider__track { aspect-ratio: auto; height: clamp(320px, 38vw, 420px); }
.hero-price ~ .btn--ghost-light { display: none; }
.hero-slide--products .hero-slide__inner { grid-template-columns: 1fr 1fr; }
.hero-slide__products { width: min(100%, 460px); }
}
@media (max-width: 767px) {
.hero-slider__track { height: auto; aspect-ratio: 4 / 3; min-height: 280px; }
.hero-slide { display: block; }
.hero-slide__media img { animation: none !important; transform: none; object-position: 50% 50%; }
.hero-slide__overlay { background: linear-gradient(90deg, rgba(11, 20, 38, .94) 0%, rgba(11, 20, 38, .86) 36%, rgba(11, 20, 38, .4) 56%, rgba(11, 20, 38, .05) 72%, rgba(11, 20, 38, 0) 100%), linear-gradient(180deg, rgba(11, 20, 38, .15) 0%, rgba(11, 20, 38, 0) 30%, rgba(11, 20, 38, .25) 100%); }
.hero-slide--violet .hero-slide__overlay { background: linear-gradient(90deg, rgba(43, 14, 96, .94) 0%, rgba(43, 14, 96, .86) 36%, rgba(43, 14, 96, .4) 56%, rgba(43, 14, 96, .05) 72%, rgba(43, 14, 96, 0) 100%), linear-gradient(180deg, rgba(43, 14, 96, .15) 0%, rgba(43, 14, 96, 0) 30%, rgba(43, 14, 96, .25) 100%); }
.hero-slide__inner, .hero-slide--products .hero-slide__inner { position: absolute; inset: 0; display: block; padding: 0; }
.hero-slide__content { position: absolute; left: 30px; top: 0; bottom: 22px; max-width: 56%; justify-content: center; gap: 8px; }
.hero-slide__eyebrow { font-size: .62rem; letter-spacing: .08em; }
.hero-slide__title { font-size: clamp(1.05rem, 5vw, 1.35rem); line-height: 1.18; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.hero-slide__text { display: none; }
.hero-slide__actions { gap: 8px; margin-top: 4px; }
.hero-slide__actions .btn { padding: 9px 13px; font-size: .84rem; border-radius: 9px; }
.hero-slide__actions .btn--ghost-light { display: none; }
.hero-slide--products .hero-slide__content { max-width: 56%; }
.hero-slide__visual { position: absolute; right: -4%; top: 10%; bottom: 15%; width: 52%; min-height: 0; display: flex; align-items: flex-end; justify-content: flex-end; }
.hero-slide__glow { width: 110%; }
.hero-slide__products { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
.hero-slider__arrow { width: 26px; height: 52px; opacity: .7; }
.hero-slider__arrow .icon { width: 18px; height: 18px; }
.hero-slider__pager { bottom: 6px; }
/* The price stays inside the slide: the text column is too narrow for the platter, so the price
stands on its own line above the catalog button, without the glass around them. */
.hero-price { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero-price__text { font-size: .875rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.hero-slide--orange .hero-price { background: none; box-shadow: none; }
.hero-slide--orange .hero-price__text { text-shadow: none; }
}
@media (max-width: 640px) {
.why__facts { grid-template-columns: 1fr; gap: 18px; }
}
/* Login / registration (bare centred screen) */
body.amihub-auth .main-nav, body.amihub-auth .header__actions, body.amihub-auth .header__search, body.amihub-auth .footer__grid, body.amihub-auth .header__burger, body.amihub-auth .page-header { display: none !important; }
body.amihub-auth .site-header { border-bottom: 1px solid var(--line); box-shadow: none; }
body.amihub-auth .header__inner { justify-content: center; }
body.amihub-auth .menu-toggle { display: none !important; }
body.amihub-auth .site-main { background: var(--bg); }
body.amihub-auth .woocommerce { display: block !important; }
body.amihub-auth .woocommerce-notices-wrapper { max-width: 460px; margin: 0 auto; }
.auth { max-width: 460px; margin: 0 auto; padding: clamp(32px, 7vw, 72px) 0; text-align: center; }
.auth__card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 40px); box-shadow: var(--shadow); text-align: left; }
.auth__title { margin: 0 0 22px; font-size: 1.6rem; font-weight: 500; text-align: center; }
.auth__email { margin: -12px 0 20px; text-align: center; color: var(--muted); font-size: .93rem; }
.auth__email a { margin-left: 6px; font-weight: 600; color: var(--brand-600); }
.auth__form .field span { font-weight: 600; color: var(--ink); }
.auth__form .field input { padding: 13px 16px; }
.auth__submit { width: 100%; margin-top: 18px; }
.auth__remember { margin: 14px 0 0; }
.auth__hint { margin: 18px 0 0; text-align: center; color: var(--muted); font-size: .92rem; }
.auth__hint a { font-weight: 600; color: var(--brand-600); }
.auth__help { margin: 22px 0 0; text-align: center; }
.auth__help a { font-weight: 600; color: var(--brand-600); }
.auth__or { display: flex; align-items: center; gap: 14px; margin: 22px 0 18px; color: var(--muted); font-size: .84rem; text-align: center; }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth__google { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; padding: 15px 20px 15px 68px; border-radius: 999px; background: #D2553A; color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: .01em; box-shadow: 0 6px 16px -10px rgba(210, 85, 58, .9); transition: background .18s var(--ease), box-shadow .18s var(--ease); }
.auth__google:hover { background: #BC4630; color: #fff; box-shadow: 0 8px 20px -10px rgba(188, 70, 48, .95); }
.auth__google-mark { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; padding-right: 16px; border-right: 1px solid rgba(255, 255, 255, .4); }
/* Account dashboard */
.acct-nav { margin: 0; }
.acct-list { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.acct-list__item + .acct-list__item { border-top: 1px solid var(--line); }
.acct-list__link { display: flex; align-items: center; gap: 14px; padding: 13px 16px; color: var(--navy-900); font-weight: 600; font-size: .97rem; transition: background .15s var(--ease); }
.acct-list__link:hover, .acct-list__item.is-active .acct-list__link { background: var(--bg); color: var(--navy-900); }
.acct-list__item.is-active .acct-list__label { color: var(--brand-600); }
.acct-list__ico { flex: none; width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.acct-list__ico--navy { background: var(--navy-900); }
.acct-list__ico--blue { background: #2F6FED; }
.acct-list__ico--violet { background: #6F3BD0; }
.acct-list__ico--green { background: #1E9E63; }
.acct-list__ico--orange { background: var(--brand); }
.acct-list__ico--teal { background: #0E8C9C; }
.acct-list__ico--red { background: #D64545; }
.acct-list__label { flex: 1; }
.acct-list__chev { color: var(--muted); }
.acct-list__item--muted .acct-list__link { color: var(--muted); }
.acct-list__item--muted .acct-list__ico { opacity: .75; }
.acct-hero { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--navy-900) 0%, #3B1580 100%); color: #fff; margin-bottom: 20px; }
.acct-hero__avatar { flex: none; width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, .18); border: 2px solid rgba(255, 255, 255, .35); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; letter-spacing: .02em; }
.acct-hero__body { flex: 1; min-width: 0; }
.acct-hero__name { margin: 0 0 4px; color: #fff; font-size: 1.35rem; font-weight: 600; }
.acct-hero__meta { margin: 0; color: rgba(255, 255, 255, .78); font-size: .9rem; overflow-wrap: anywhere; }
.acct-hero__edit { flex: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .15s var(--ease); }
.acct-hero__edit:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.acct-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.acct-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); text-align: center; color: var(--navy-900); font-weight: 600; font-size: .95rem; transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
.acct-tile:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); color: var(--navy-900); }
.acct-tile__ico { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.acct-tile__sub { font-weight: 500; font-size: .82rem; color: var(--muted); margin-top: -4px; }
@media (max-width: 900px) {
.acct-tiles { grid-template-columns: repeat(2, 1fr); }
.acct-hero { padding: 18px; }
}
.acct-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 32px); }
.acct-panel__title { margin: 0 0 18px; font-size: 1.3rem; }
.field--static .field__static { padding: 12px 14px; border: 1.5px dashed var(--line-2); border-radius: 10px; background: var(--bg); color: var(--ink-2); font-weight: 500; }
.field__note { display: block; margin-top: 6px; color: var(--muted); font-size: .82rem; font-weight: 400; }
.auth__lead { margin: -8px 0 18px; color: var(--ink-2); font-size: .93rem; text-align: center; }
.auth__code { font-size: 1.5rem !important; letter-spacing: .35em; text-align: center; font-weight: 600 !important; }
.auth__resend { margin: 0; }
.auth__linkbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--brand-600); cursor: pointer; text-decoration: underline; }
.auth .notice { margin-bottom: 18px; font-size: .92rem; }
.auth__mailbox { width: 64px; height: 64px; margin: 4px auto 14px; border-radius: 50%; background: var(--brand-50); color: var(--brand-600); display: flex; align-items: center; justify-content: center; }
.auth__form .form-grid { margin-bottom: 14px; }
.auth .woocommerce-error, .auth .woocommerce-message, .auth .woocommerce-info { list-style: none; margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; font-size: .92rem; font-weight: 500; }
.auth .woocommerce-error { background: var(--danger-100); color: #8B2B27; }
.auth .woocommerce-message, .auth .woocommerce-info { background: var(--success-100); color: #14602F; }
.activated-bar { padding-top: 18px; }
.activated-bar .notice { margin-bottom: 0; }
.activated-bar a { font-weight: 600; text-decoration: underline; color: inherit; }
/* „За нас“ (templates/page-pallets.php), „Доставка и плащане“ (templates/page-delivery.php), „Контакти“
(templates/page-contact.php) and „Често задавани въпроси“ (templates/page-faq.php) in the look of
support.apple.com: a white head with a large centred title, the lead and (on „За нас“ and „Контакти“) three
soft cards; a light grey band of white rounded cards; on „За нас“ the questions on white.
Measured there: a 980px column, the title 64/68 (40/44 on a phone), the lead 24/32 (21/29), the head's
cards 18px round with a soft 8px shadow, the band's cards white, 18px round, 24px apart, section titles
40/44 (28/32), card titles 24/28 (21/25), text 17/25. The colours are the site's: ink, muted, its light
grey, and the one navy for the panel that stands where Apple puts a photograph. No motion. */
.abt { --abt-gap: 24px; }
.abt-wrap { width: 100%; max-width: calc(980px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.abt-head { padding: clamp(44px, 6.6vw, 92px) 0 clamp(56px, 6vw, 80px); background: #fff; text-align: center; }
.abt-head__title { margin: 0; color: var(--ink); font-size: clamp(2.5rem, 4.5vw, 4rem); font-weight: 600; line-height: 1.0625; letter-spacing: -.009em; }
.abt-head__lead { max-width: 820px; margin: 24px auto 0; color: var(--ink-2); font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.36; text-wrap: balance; }
.abt-quick { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abt-gap); margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; }
.abt-quick__card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 181px; padding: 28px 20px; border-radius: 18px; background: var(--bg); box-shadow: 8px 8px 16px rgba(20, 33, 61, .08); }
.abt-quick__value { color: var(--ink); font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; }
.abt-quick__label { color: var(--muted); font-size: 1.0625rem; line-height: 1.3; }
.abt-band { padding: var(--abt-gap) 0 clamp(64px, 8vw, 100px); background: var(--bg); }
.abt-card { border-radius: 18px; background: #fff; }
.abt-card p { margin: 0; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.47; }
.abt-card p + p { margin-top: .8em; }
.abt-sec { margin-top: clamp(64px, 8vw, 96px); }
.abt-sec__title { margin: 0 0 clamp(24px, 3vw, 40px); color: var(--ink); text-align: center; font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
/* the split card: the text on one side, a navy panel with the categories on the other */
.abt-split { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); overflow: hidden; }
.abt-split__text { padding: clamp(36px, 5.6vw, 72px) clamp(24px, 5.6vw, 64px); }
.abt-split__title { margin: 0 0 18px; color: var(--ink); font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; }
.abt-facts { margin: 28px 0 0; border-top: 1px solid var(--line); }
.abt-facts div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.abt-facts dt { color: var(--muted); font-size: .875rem; line-height: 1.4; }
.abt-facts dd { margin: 2px 0 0; color: var(--ink); font-size: 1.0625rem; font-weight: 500; line-height: 1.45; }
.abt-split__panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 56px); background: var(--navy-900); color: #fff; }
.abt-split__label { margin: 0 0 12px; color: rgba(255, 255, 255, .66); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.abt-cats { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.abt-cats li { padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 1.0625rem; font-weight: 500; line-height: 1.35; }
/* groups of small cards: a title, then text */
.abt-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abt-gap); margin: 0; padding: 0; }
.abt-tile { padding: 34px 30px 36px; }
.abt-tile h3 { margin: 0 0 12px; color: var(--ink); font-size: clamp(1.1875rem, 1.7vw, 1.5rem); font-weight: 600; line-height: 1.17; letter-spacing: -.01em; }
/* the steps: number, what happens, how; one row each */
.abt-steps { list-style: none; counter-reset: abt-step; margin: 0; padding: 8px clamp(24px, 5.6vw, 64px); }
.abt-steps li { counter-increment: abt-step; display: grid; grid-template-columns: 44px minmax(0, 250px) minmax(0, 1fr); gap: 4px 24px; align-items: baseline; padding: 24px 0; border-top: 1px solid var(--line); }
.abt-steps li:first-child { border-top: 0; }
.abt-steps li::before { content: counter(abt-step); color: var(--muted-2); font-size: 1.5rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.abt-steps strong { color: var(--ink); font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.abt-steps span { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.47; }
/* a text card in the middle, like Apple's „Designing for longevity“ */
.abt-note { padding: 40px clamp(24px, 8.4vw, 82px) 44px; text-align: center; }
.abt-note__title { margin: 0 0 14px; color: var(--ink); font-size: clamp(1.3125rem, 1.7vw, 1.5rem); font-weight: 600; line-height: 1.17; text-wrap: balance; }
.abt-note p { max-width: 820px; margin-left: auto; margin-right: auto; }
.abt-note + .abt-grid { margin-top: var(--abt-gap); }
/* one line on a card of its own */
.abt-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; gap: 10px 40px; margin-top: var(--abt-gap); padding: 34px clamp(24px, 5.6vw, 64px); }
.abt-line__title { margin: 0; color: var(--ink); font-size: clamp(1.3125rem, 1.7vw, 1.5rem); font-weight: 600; line-height: 1.17; }
.abt-faq { padding: clamp(64px, 8vw, 96px) 0 clamp(48px, 6vw, 72px); background: #fff; }
.abt-faq .faq-list { max-width: 820px; margin: 0 auto; }
.abt-faq__more { margin: 28px 0 0; text-align: center; }
/* the delivery page: a head without cards, the summary card's two buttons, a small note, the second split
card mirrored (its panel on the left, like Apple's AppleCare card above its Repair card), and the two
panels' lists: the prices set large, the ways to pay as term and line */
.abt-head--plain { padding-bottom: clamp(48px, 6vw, 72px); }
.abt-band > .abt-wrap > .abt-card + .abt-card { margin-top: var(--abt-gap); }
.abt-note__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.abt-card .abt-small { color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.abt-split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
.abt-split--flip .abt-split__panel { order: -1; }
.abt-figs, .abt-ways { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.abt-figs div, .abt-ways div { border-top: 1px solid rgba(255, 255, 255, .14); }
.abt-figs div { padding: 16px 0; }
.abt-figs dt { color: rgba(255, 255, 255, .66); font-size: .9375rem; line-height: 1.3; }
.abt-figs dd { margin: 4px 0 0; color: #fff; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.abt-figs dd span { display: block; margin-top: 4px; color: rgba(255, 255, 255, .66); font-size: .9375rem; font-weight: 400; line-height: 1.3; letter-spacing: 0; }
.abt-ways div { padding: 14px 0; }
.abt-ways dt { color: #fff; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.abt-ways dd { margin: 3px 0 0; color: rgba(255, 255, 255, .72); font-size: .9375rem; line-height: 1.45; }
/* the contact page: the ways to reach us as link cards (the phone and the e-mail start a call or a message),
the values set smaller than the pallet's figures because an address is longer than a number; then the
form in one card with its title and the reply time beside it */
.abt-quick--contact > li { display: flex; }
.abt-quick--contact .abt-quick__card { flex: 1 1 auto; color: inherit; transition: background-color .2s var(--ease); }
.abt-quick--contact .abt-quick__value { font-size: clamp(1.25rem, 2vw, 1.625rem); letter-spacing: -.01em; }
a.abt-quick__card:hover { background: var(--bg-2); color: inherit; }
a.abt-quick__card:hover .abt-quick__value { color: var(--navy-700); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
a.abt-quick__card:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 3px; }
.abt-quick--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 646px; margin-left: auto; margin-right: auto; }
.abt-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px clamp(32px, 5vw, 64px); padding: clamp(32px, 5.6vw, 64px); scroll-margin-top: 24px; }
.abt-form__title { margin: 0 0 14px; color: var(--ink); font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; }
.abt-form .contact-form > .notice { margin-bottom: 18px; }
.abt-form .checkbox { margin-bottom: 22px; }
.abt-map { overflow: hidden; }
.abt-map iframe { display: block; width: 100%; height: 380px; border: 0; }
/* the questions page: every question in one white card, set like apple.com/business's „Questions? Answers.“
(questions 24/28 semibold, 28px above and below, a hairline between them, answers 17/25); the rows run to
the card's edges, so that the hover tint and the open answer's wash fill them. The accordion's own motion,
icon and open colour stay the site's. Under the questions, the card for what they do not answer. */
.abt-qa { overflow: hidden; }
.abt-qa .faq-list { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.abt-qa .faq-item + .faq-item { border-top-color: var(--line); }
.abt-qa .faq-item__q { gap: 24px; padding: 28px clamp(24px, 5.6vw, 56px); color: var(--ink); font-size: clamp(1.1875rem, 1.9vw, 1.5rem); line-height: 1.17; letter-spacing: -.01em; }
.abt-qa .faq-item__icon { width: 34px; height: 34px; }
.abt-qa .faq-item__a { max-width: 820px; padding: 0 clamp(24px, 5.6vw, 56px) 30px; font-size: 1.0625rem; line-height: 1.47; }
.abt-help { padding: clamp(36px, 5vw, 56px) clamp(24px, 5.6vw, 64px); text-align: center; }
.abt-help__title { margin: 0 0 10px; color: var(--ink); font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; }
.abt-help .abt-quick { margin-top: 28px; }
.abt-help .abt-quick__card { min-height: 150px; }
.abt-help__more { margin: 28px 0 0 !important; }
.abt .cta > .container { max-width: calc(980px + 2 * var(--gutter)); } /* the closing band in the page's column */
@media (max-width: 1023px) {
.abt-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.abt-tile { padding: 28px 24px 30px; }
}
@media (max-width: 899px) {
.abt-quick__card { min-height: 150px; padding: 24px 12px; }
.abt-split, .abt-split--flip, .abt-form { grid-template-columns: 1fr; }
.abt-split--flip .abt-split__panel { order: 0; }
}
@media (max-width: 767px) {
.abt { --abt-gap: 14px; }
.abt-quick { grid-template-columns: 1fr; }
.abt-quick__card { min-height: 0; padding: 24px 20px; gap: 8px; }
.abt-head { text-align: center; }
.abt-grid, .abt-grid--wide { grid-template-columns: 1fr; }
.abt-tile { padding: 24px 22px 26px; }
.abt-tile h3 { margin-bottom: 8px; }
.abt-steps { padding: 4px 22px; }
.abt-steps li { grid-template-columns: 32px minmax(0, 1fr); gap: 6px 12px; padding: 20px 0; }
.abt-steps li::before { grid-row: span 2; font-size: 1.25rem; }
.abt-steps strong { font-size: 1.0625rem; }
.abt-note { padding: 30px 22px 32px; }
.abt-line { grid-template-columns: 1fr; padding: 26px 22px 28px; }
.abt-faq__more .btn { width: 100%; }
.abt-note__actions { display: grid; justify-content: stretch; }
.abt-note__actions .btn { width: 100%; }
.abt-quick--two { grid-template-columns: 1fr; }
.abt-quick--contact .abt-quick__card { padding: 20px; }
.abt-form { padding: 28px 22px 30px; }
.abt-form .contact-form .btn { width: 100%; }
.abt-qa .faq-item__q { gap: 16px; padding: 20px 22px; line-height: 1.25; }
.abt-qa .faq-item__icon { width: 30px; height: 30px; }
.abt-qa .faq-item__a { padding: 0 22px 22px; font-size: 1rem; }
.abt-help { padding: 30px 22px 32px; }
.abt-help .abt-quick { margin-top: 22px; }
.abt-help .abt-quick__card { min-height: 0; }
.abt-help__more .btn { width: 100%; }
}
@media (max-width: 560px) {
/* value under the label, both left aligned – right-aligned values wrapped badly */
.spec-list__row { grid-template-columns: 18px 1fr; row-gap: 2px; padding: 12px 14px; }
.spec-list dd { grid-column: 2; text-align: left; }
}
/* Hero cards (v2 page, phones only) – one solid colour per card, big headline, art to the edges */
.hero-cards { display: none; }
@media (max-width: 767px) {
.hero-cards { display: block; padding: 12px 0 4px; }
.home-v2 .hero--slider { display: none; }
/* Asymmetric on purpose, the way amazon.com does it: a small left inset so the first card
rests near the left edge, and half the leftover width on the right so every later card
(including the last) can still snap to the centre. */
.hero-cards__track { display: flex; gap: 10px; padding: 0 12vw 6px 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hero-cards__track::-webkit-scrollbar { display: none; }
/* centre alignment: the active card sits mid-screen with a sliver of both neighbours */
/* the height follows the width at the art's own 11:16 ratio, so the artwork never crops */
.hero-card { position: relative; flex: 0 0 76vw; scroll-snap-align: center; display: flex; flex-direction: column; aspect-ratio: 11 / 16; min-height: 0; padding: 22px 20px 0; border-radius: 14px; overflow: hidden; color: #fff; text-decoration: none; background-size: cover; background-position: center bottom; background-repeat: no-repeat; }
.hero-card--sky { background-color: #A6DCEB; color: var(--navy-900); }
.hero-card--violet { background-color: #2A1060; }
.hero-card--sun { background-color: #F28C1D; color: #fff; }
.hero-card__title { margin: 0 0 4px; font-size: 1.6rem; font-weight: 700; line-height: 1.12; letter-spacing: -.02em; color: inherit; }
.hero-card__grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 20px; align-content: center; }
.hero-card__thumb { position: relative; display: block; aspect-ratio: 1; background-color: #fff; background-repeat: no-repeat; border-radius: 8px; overflow: hidden; }
/* the collage is 4:3 with four products; auto/200% + these offsets frame exactly one of them */
.hero-card__thumb--q0, .hero-card__thumb--q1, .hero-card__thumb--q2, .hero-card__thumb--q3 { background-size: auto 200%; }
.hero-card__thumb--q0 { background-position: 10% 0%; }
.hero-card__thumb--q1 { background-position: 90% 0%; }
.hero-card__thumb--q2 { background-position: 10% 100%; }
.hero-card__thumb--q3 { background-position: 90% 100%; }
.hero-card__thumb--full { background-size: cover; background-position: center; }
.hero-card__tag { position: absolute; left: 6px; bottom: 6px; padding: 3px 7px; border-radius: 5px; background: var(--danger); color: #fff; font-size: .66rem; font-weight: 700; }
.hero-cards__controls { position: relative; display: flex; align-items: center; justify-content: center; margin-top: 10px; }
.hero-cards__dots { display: flex; justify-content: center; gap: 8px; }
.hero-cards__toggle { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: var(--bg-2); color: var(--ink-2); cursor: pointer; }
.hero-cards__toggle .is-play { display: none; }
.hero-cards.is-paused .hero-cards__toggle .is-play { display: block; }
.hero-cards.is-paused .hero-cards__toggle .is-pause { display: none; }
.hero-cards__dot { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; cursor: pointer; }
.hero-cards__dot span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); transition: background .2s var(--ease), transform .2s var(--ease); }
.hero-cards__dot.is-active span { background: var(--brand); transform: scale(1.3); }
}
/* Cart / checkout: slimmer header, item cards, order summary (eMAG pattern) */
body.amihub-order-flow .main-nav { display: none; }
body.amihub-order-flow .menu-toggle { display: inline-flex; }
body.amihub-order-flow .site-header { border-bottom: 1px solid var(--line); }
/* eMAG keeps the cart plain: a light heading, not the dark promo band */
body.amihub-order-flow .page-header { background: #fff; color: var(--navy-900); padding: 22px 0 6px; }
body.amihub-order-flow .page-header::before { display: none; }
body.amihub-order-flow .page-header .container { min-height: 0; display: block; padding-block: 0; }
body.amihub-order-flow .page-header__title { color: var(--navy-900); margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); }
body.amihub-order-flow .page-header__text, body.amihub-order-flow .page-header .eyebrow { display: none; }
.woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(20px, 3vw, 32px); align-items: start; }
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.cart-list { display: grid; gap: 14px; }
.cart-line { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 18px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; }
.cart-line__media { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; aspect-ratio: 1; }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-line__title { margin: 0 0 8px; font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.cart-line__title a { color: var(--navy-900); }
.cart-line__title a:hover { color: var(--brand-600); }
.cart-line__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: .9rem; }
.cart-line__meta li { display: inline-flex; align-items: center; gap: 6px; }
.cart-line__meta .icon { color: var(--brand-600); }
.cart-line__stock { color: var(--success); font-weight: 600; }
.cart-line__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
.cart-line__price { font-size: 1.2rem; font-weight: 700; color: var(--navy-900); white-space: nowrap; }
.cart-line__qty .quantity { display: inline-flex; }
.cart-line__qty input.qty { width: 68px; padding: 8px 6px; text-align: center; border: 1.5px solid var(--line-2); border-radius: 10px; }
.cart-line__remove { font-size: .88rem; color: var(--muted); text-decoration: underline; }
.cart-line__remove:hover { color: var(--danger); }
.cart-list__actions { display: flex; justify-content: flex-end; }
.cart-summary { position: sticky; top: 100px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.cart-summary__title { margin: 0 0 16px; font-size: 1.15rem; }
.cart-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: .95rem; color: var(--ink-2); }
.cart-summary__row b { color: var(--navy-900); font-weight: 600; text-align: right; }
.cart-summary__ship { color: var(--muted) !important; font-weight: 500 !important; font-size: .88rem; }
.cart-summary__total { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 1.05rem; }
.cart-summary__total b { font-size: 1.5rem; font-weight: 700; color: var(--navy-900); }
.cart-summary .wc-proceed-to-checkout { margin-top: 16px; padding: 0; }
.cart-summary .checkout-button { display: inline-flex !important; width: 100%; align-items: center; justify-content: center; gap: 8px; }
.cart-collaterals { margin-top: 8px; }
@media (max-width: 1100px) {
.woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
.cart-summary { position: static; }
}
@media (max-width: 640px) {
.cart-line { grid-template-columns: 96px minmax(0, 1fr); }
.cart-line__side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; border-top: 1px solid var(--line); padding-top: 12px; }
}
/* Checkout: the order form as numbered steps (eMAG pattern) */
body.woocommerce-checkout.amihub-order-flow { background: var(--bg); }
body.woocommerce-checkout.amihub-order-flow .page-header { background: transparent; }
body.woocommerce-checkout.amihub-order-flow .page-main .container { max-width: 950px; }
.page-header__badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; box-shadow: var(--shadow-sm); }
.page-header__badge .icon { color: var(--success); }
body.amihub-order-flow .page-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.woocommerce-checkout .woocommerce { display: block; }
.co__grid { display: block; max-width: 900px; margin: 0 auto; }
.co__main { display: grid; gap: 16px; min-width: 0; }
.co__aside { min-width: 0; margin-top: 16px; }
.co-aside__inner { display: grid; gap: 16px; }
.co-step { background: #fff; border: 0; border-radius: 10px; box-shadow: 0 1px 3px rgba(20, 33, 61, .1), 0 1px 1px rgba(20, 33, 61, .04); overflow: hidden; }
.co-step__head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.co-step__num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--navy-900); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .92rem; font-weight: 700; }
.co-step__title { margin: 0; font-size: 1.12rem; font-weight: 600; }
.co-step__body { padding: 22px; }
/* Step 1: delivery method */
.co-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.co-tab { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0; background: #fff; cursor: pointer; transition: box-shadow .18s var(--ease); }
.co-tab + .co-tab::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
.co-tab:not(.is-on):hover { background: var(--bg); }
.co-tab input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.co-tab.is-on { z-index: 1; border-bottom-color: transparent; box-shadow: 0 -1px 10px rgba(20, 33, 61, .1), 1px 0 10px rgba(20, 33, 61, .06), -1px 0 10px rgba(20, 33, 61, .06); }
/* Hide the shadow where the chosen tab meets its panel, so the two read as one surface. */
.co-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 5px; background: #fff; }
.co-tab.is-on + .co-tab::before, .co-tab.is-on::before { display: none; }
.co-tab__mark { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease); }
.co-tab.is-on .co-tab__mark { border-color: var(--brand); background: var(--brand); color: #fff; }
.co-tab__mark .icon { stroke-width: 3.2; }
.co-tab input:focus-visible + .co-tab__mark { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.co-tab__name { font-weight: 600; color: var(--navy-900); line-height: 1.3; }
.co-tab__cost { margin-left: auto; font-size: .95rem; font-weight: 700; color: var(--navy-900); white-space: nowrap; }
.co-ship__panel { padding-top: 24px; }
.co-ship__panel-title { margin: 0 0 14px; font-size: 1.05rem; font-weight: 600; }
.co-ship__hint { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.co-ship__hint .icon { flex: 0 0 auto; margin-top: 2px; color: var(--navy-700); }
/* Step 1: saved address */
.co-addr { display: flex; align-items: flex-start; gap: 14px; }
.co-addr__pin { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--navy-700); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.co-addr--empty .co-addr__pin { background: var(--line); color: var(--muted); }
.co-addr__body { min-width: 0; }
.co-addr__name { display: block; color: var(--navy-900); font-weight: 600; }
.co-addr__line { margin: 3px 0 0; color: var(--muted); font-size: .93rem; line-height: 1.45; }
.co-addr__change { margin-top: 11px; padding: 8px 16px; border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--navy-900); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; transition: border-color .18s var(--ease), color .18s var(--ease); }
.co-addr__change:hover { border-color: var(--navy-900); }
.co-addr__add { margin-top: 12px; }
/* Step 1: delivery window */
.co-eta { margin-top: 22px; padding: 14px 16px 16px; border-radius: 10px; background: var(--bg); }
.co-eta__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--muted); font-size: .88rem; }
.co-eta__head .icon { color: var(--navy-700); }
.co-eta__card { padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.co-eta__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 14px; }
.co-eta__thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.co-eta__thumb { display: block; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.co-eta__thumb img { width: 100%; height: 100%; object-fit: cover; }
.co-eta__when { color: var(--ink-2); font-size: .93rem; }
.co-eta__cost { margin-left: auto; font-weight: 700; color: var(--navy-900); white-space: nowrap; }
/* Address dialog */
.co-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.co-modal[hidden] { display: none; }
.co-modal__backdrop { position: absolute; inset: 0; background: rgba(11, 20, 38, .55); }
.co-modal__box { position: relative; width: min(640px, 100%); max-height: min(92vh, 820px); display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.co-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.co-modal__title { margin: 0; font-size: 1.1rem; font-weight: 600; }
.co-modal__close { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.co-modal__close:hover { background: var(--bg); color: var(--ink); }
.co-modal__body { padding: 22px; overflow-y: auto; }
.co-modal__foot { padding: 16px 22px; border-top: 1px solid var(--line); background: var(--bg); }
.co-modal__save { width: 100%; }
/* Form fields */
.co-field-hidden { display: none !important; }
.woocommerce .co-fields .form-row, .co-fields .form-row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; padding: 0; float: none; width: auto; }
.co-fields__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.co-fields__grid .form-row-wide, .co-fields__grid .co-notes-field { grid-column: 1 / -1; }
.woocommerce .co-fields label, .co-fields label { display: block; margin-bottom: 6px; font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.co-fields .form-row > label:last-child { margin-bottom: 0; }
.co-fields label .required { color: var(--danger); text-decoration: none; border: 0; }
.co-fields .woocommerce-input-wrapper { display: block; width: 100%; }
.woocommerce .co-fields input[type="text"], .woocommerce .co-fields input[type="tel"], .woocommerce .co-fields input[type="email"], .woocommerce .co-fields textarea, .woocommerce .co-fields select, .co-fields input[type="text"], .co-fields input[type="tel"], .co-fields input[type="email"], .co-fields input[type="number"], .co-fields textarea, .co-fields select, .co-fields .select2-container .select2-selection--single { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff; font: inherit; font-size: .95rem; color: var(--ink); }
.co-fields textarea { min-height: 96px; resize: vertical; }
.co-fields input:focus, .co-fields textarea:focus, .co-fields select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(242, 140, 29, .15); }
.co-fields .woocommerce-invalid input, .co-fields .woocommerce-invalid select { border-color: var(--danger); }
.co-fields .select2-container--default .select2-selection--single { height: auto; }
.co-fields .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 1.45; color: var(--ink); }
.co-fields .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: 8px; }
/* Step 3: payment */
/* Neutralise WooCommerce's default payment panel; the step card is the surface. */
.woocommerce-checkout #payment.co-pay { background: transparent; border-radius: 0; padding: 0; }
.woocommerce-checkout #payment.co-pay ul.payment_methods { padding: 0; margin: 0; border: 0; background: transparent; }
.woocommerce-checkout #payment.co-pay div.payment_box { background: var(--bg); color: var(--ink-2); }
.woocommerce-checkout #payment.co-pay div.payment_box::before { display: none; }
.co-pay__note { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; background: var(--navy-100); color: var(--navy-900); font-size: .88rem; line-height: 1.5; }
.co-pay__note .icon { flex: 0 0 auto; margin-top: 1px; color: var(--navy-700); }
.co-pay__list { list-style: none; margin: 0; padding: 0; display: grid; }
.co-pay__list > li { padding: 0; border-bottom: 1px solid var(--line); background: #fff; }
.co-pay__list > li:last-child { border-bottom: 0; }
.co-pay__list input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.co-pay__list label { display: flex; align-items: center; gap: 14px; padding: 18px 2px; margin: 0; font-weight: 600; font-size: 1rem; color: var(--navy-900); cursor: pointer; }
.co-pay__mark { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); background: #fff; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.co-pay__list > li.is-on .co-pay__mark, .co-pay__list > li:has(input:checked) .co-pay__mark { border-color: var(--brand); border-width: 7px; }
.co-pay__list input:focus-visible + label .co-pay__mark { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.co-pay__name { min-width: 0; }
.co-pay__brands { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.co-pay__brands img { max-height: 24px; width: auto; }
.co-pay__brands .payment-badge { border: 1px solid var(--line); padding: 5px 9px; }
.co-pay__list .payment_box { margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; background: var(--bg); color: var(--ink-2); font-size: .9rem; }
.co-pay__list .payment_box p:last-child { margin-bottom: 0; }
.co-notes { margin-top: 20px; }
.co-notes .form-row { margin-bottom: 0; }
/* Order summary: one card, the order on the left and what to pay on the right */
.co-final { display: grid; grid-template-columns: minmax(0, 1fr) 300px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.co-final__left { min-width: 0; padding: 22px; }
.co-final__right { min-width: 0; padding: 22px; border-left: 1px solid var(--line); }
.co-sum__title { margin: 0 0 16px; font-size: 1.12rem; }
.co-sum__items { list-style: none; margin: 0 0 16px; padding: 0 0 6px; display: grid; gap: 12px; border-bottom: 1px solid var(--line); }
.co-sum__item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.co-sum__thumb { display: block; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.co-sum__thumb img { width: 100%; height: 100%; object-fit: cover; }
.co-sum__name { font-size: .9rem; line-height: 1.35; color: var(--ink-2); }
.co-sum__name small { display: block; color: var(--muted-2); font-size: .82rem; }
.co-sum__price { font-weight: 600; color: var(--navy-900); white-space: nowrap; }
.co-sum__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: .95rem; color: var(--ink-2); }
.co-sum__row b { color: var(--navy-900); font-weight: 600; text-align: right; }
/* The consent line, under a hairline of its own */
.co-terms { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .88rem; }
.woocommerce .co-terms .form-row { margin: 0; padding: 0; }
.co-terms label { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--ink-2); line-height: 1.45; cursor: pointer; }
.woocommerce .co-terms input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand); }
.co-terms a { color: var(--brand); }
/* Place order */
.co-place { margin: 0; padding: 0; max-width: none; }
.co-place__total { margin: 0 0 14px; }
.co-place__label { display: block; font-size: 1.12rem; font-weight: 600; color: var(--navy-900); }
.co-place__sum { display: block; margin-top: 2px; font-size: 1.9rem; font-weight: 700; line-height: 1.15; color: var(--navy-900); }
.co-place__sum strong { font-weight: 700; }
.co-place__sum sup { font-size: .58em; font-weight: 700; top: -.52em; margin-left: 1px; }
.co-place__sum small { display: block; margin-top: 4px; font-size: .74rem; font-weight: 500; color: var(--muted); }
.co-place__btn { display: inline-flex !important; width: 100%; float: none; }
@media (max-width: 960px) {
.co-final { grid-template-columns: 1fr; }
.co-final__right { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
.co-step__head { padding: 15px 16px; }
.co-step__body { padding: 16px; }
.co-tabs { grid-template-columns: 1fr; }
/* Stacked, so the divider belongs between rows rather than beside them. */
.co-tab + .co-tab::before { display: none; }
.co-tab { border-radius: 8px; }
.co-tab.is-on { border-bottom-color: transparent; }
.co-tab.is-on::after { display: none; }
.co-tab__cost { font-size: .95rem; }
.co-eta__row { flex-wrap: wrap; }
.co-eta__when { order: 3; flex: 1 0 100%; }
.co-fields__grid { grid-template-columns: 1fr; }
.co-modal { padding: 0; align-items: stretch; }
.co-modal__box { width: 100%; max-height: 100%; border-radius: 0; }
.co-final__left, .co-final__right, .co-modal__body { padding: 16px; }
}
/* Econt office picker (inside the delivery dialog) */
.co-modal--wide .co-modal__box { width: min(1000px, 100%); }
.co-office { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; margin-top: 4px; height: 420px; }
.co-office[hidden] { display: none; }
.co-office--nomap { grid-template-columns: 1fr; }
.co-office__side { display: flex; flex-direction: column; min-height: 0; }
.co-office__filters { display: grid; gap: 10px; }
.woocommerce .co-office__city, .woocommerce .co-office__search { width: 100%; padding: 11px 13px; border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff; font: inherit; font-size: .92rem; color: var(--ink); }
.co-office__city:focus, .co-office__search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(242, 140, 29, .15); }
.co-office__count { margin: 12px 0 8px; color: var(--muted); font-size: .82rem; }
.co-office__list { flex: 1 1 auto; list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; grid-auto-rows: max-content; gap: 8px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.co-office__item { margin: 0; }
.co-office__pick { display: block; width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); }
.co-office__pick:hover { border-color: var(--line-2); background: var(--bg); }
.co-office__item.is-on .co-office__pick { border-color: var(--brand); background: var(--brand-50); }
.co-office__name { display: block; font-weight: 600; font-size: .92rem; color: var(--navy-900); }
.co-office__addr { display: block; margin-top: 2px; color: var(--muted); font-size: .84rem; line-height: 1.4; }
.co-office__hours { display: block; margin-top: 3px; color: var(--muted-2); font-size: .78rem; }
.co-office__hours:empty { display: none; }
.co-office__map { height: 100%; min-height: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg-2); z-index: 0; }
.co-office__pin span { display: block; width: 16px; height: 16px; margin: 3px; border: 2px solid #fff; border-radius: 50%; background: var(--navy-700); box-shadow: 0 1px 4px rgba(20, 33, 61, .4); }
.co-office__pin.is-on span { width: 22px; height: 22px; margin: 0; background: var(--brand); }
.leaflet-container { font: inherit; }
.leaflet-popup-content { font-size: .86rem; line-height: 1.45; }
@media (max-width: 860px) {
.co-office { grid-template-columns: 1fr; height: auto; }
.co-office__map { height: 260px; order: -1; }
.co-office__list { max-height: 300px; }
}
/* Step 2: the saved invoicing details */
.co-bill { padding: 14px 16px 16px; border-radius: 10px; background: var(--bg); }
.co-bill__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--muted); font-size: .88rem; font-weight: 600; }
.co-bill__head .icon { color: var(--navy-700); }
.co-bill__card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.co-bill__body { min-width: 0; }
.co-bill__type { display: block; margin-bottom: 2px; color: var(--muted-2); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.co-bill__title { display: block; color: var(--navy-900); font-weight: 600; }
.co-bill__line { margin: 3px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.co-bill__card .co-addr__change, .co-bill__card .btn { margin-top: 0; flex: 0 0 auto; }
.co-bill__tabs { margin-bottom: 22px; }
.co-tab[data-bill] { font: inherit; }
.woocommerce .co-fields .co-novat { align-self: end; }
.co-novat .optional { display: none; }
#co-billing #billing_country_field { display: none !important; }
.co-modal--company .co-modal__box { width: min(760px, 100%); }
/* On a white dialog the joined tabs need the unchosen side tinted to read as a tab. */
.co-modal .co-tab:not(.is-on) { background: var(--bg); }
.co-modal .co-tabs { border-bottom: 1px solid var(--line); }
/* WooCommerce paints a green border on every filled field; it reads as a warning. */
.woocommerce .co-fields .woocommerce-validated input.input-text,
.woocommerce .co-fields .woocommerce-validated select,
.woocommerce .co-fields .woocommerce-validated .select2-container .select2-selection--single { border-color: var(--line-2); }
.co-account { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.woocommerce .co-fields .co-novat label { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 12px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.woocommerce .co-fields .co-novat input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); }
.woocommerce .co-fields input:disabled { background: var(--bg); color: var(--muted-2); }
@media (max-width: 640px) {
.co-bill__card { flex-direction: column; align-items: flex-start; }
}
.co-heading { grid-column: 1 / -1; margin: 6px 0 12px; color: var(--navy-900); font-size: 1rem; font-weight: 600; }
.co-heading:first-child { margin-top: 0; }
/* Dual pricing: euro first, leva alongside or underneath */
.woo-bg--currency.amount-bgn { white-space: nowrap; font-weight: inherit; }
.woo-bg--currency.amount-bgn::before { content: " / "; }
/* In a total the lev figure sits under the euro one, so the slash would read oddly.
The checkout total already stacks its parts as blocks, so only the cart one needs
switching over. */
.cart-summary__total b { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cart-summary__total .amount-bgn, .co-place__sum .amount-bgn { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); }
.cart-summary__total .amount-bgn::before, .co-place__sum .amount-bgn::before { content: none; }
/* The VAT note is a sentence; a second figure inside it only breaks the line. */
.cart-summary__total .includes_tax .amount-bgn { display: none; }
.rate_cart_page { display: block; margin: 10px 0 0; color: var(--muted); font-size: .78rem; }
.co-eta__cost .amount-bgn, .co-pay__brands .amount-bgn { font-size: .8rem; color: var(--muted); }
.price .amount-bgn { font-weight: inherit; }
/* The rate note comes before the button; keep it out of the button's own spacing. */
.cart-summary .wc-proceed-to-checkout .rate_cart_page { margin-top: 0; margin-bottom: 14px; }
/* The thousands separator is a space, so "1 280,00 €" breaks across lines without this. */
.woocommerce-Price-amount, .amount { white-space: nowrap; }
/* Wallet button slot beside the order button (filled by PayPal's plugin when a wallet row is chosen) */
.co-place__wallet { margin-top: 10px; }
.co-place__wallet:empty { display: none; }
.co-place__wallet .ppc-button-wrapper { margin: 0; }
/* Who it is for: three text columns, a hairline and a counter over each – no cards, icons or chips */
.fit { background: #fff; }
.fit-list { list-style: none; counter-reset: fit; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 2.4vw, 36px); }
.fit-item { padding-top: 18px; border-top: 1px solid var(--line-2); }
@media (max-width: 1100px) { .fit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fit-item::before { counter-increment: fit; content: counter(fit, decimal-leading-zero); display: block; margin-bottom: 14px; font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--brand-600); }
.fit-item__title { font-size: 1.08rem; margin: 0 0 8px; }
.fit-item__text { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
@media (max-width: 760px) {
.fit-list { grid-template-columns: 1fr; gap: 20px; }
}
/* „За кого е подходящо“ as four photographs with a caption each (template-parts/home/fit-gallery.php): the
„Apple experts“ gallery of apple.com/business/small-business. Sizes are measured there: square photos
28px round and 20px apart, the caption 30px under its photo and 12px in from its edge, a 24/28 semibold
name, 17/25 grey text, a link 14px under it; on a phone 295px photos in a row that is swiped, 19/23 and
14/20. No controls on purpose: all four are on the page, and on a phone the next photo shows at the edge. */
.fitg { background: #fff; }
.fitg__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.fitg__photo { aspect-ratio: 1; border-radius: 28px; overflow: hidden; background: var(--bg-2); }
.fitg__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.fitg__copy { padding: 30px 12px 0; }
/* the name follows the column's width, so that the longest one („Обяви и социални мрежи“) stays on one line */
.fitg__name { margin: 0; font-size: clamp(1.0625rem, calc(2vw - 5px), 1.4375rem); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.fitg__text { margin: 14px 0 0; color: var(--muted); font-size: 1.0625rem; font-weight: 500; line-height: 1.47; }
.fitg__link { display: inline-flex; align-items: center; gap: 2px; margin-top: 14px; color: var(--navy-700); font-size: 1.0625rem; font-weight: 500; }
.fitg__link .icon { margin-top: 1px; transition: transform .2s var(--ease); }
.fitg__link:hover { color: var(--navy-900); text-decoration: underline; text-underline-offset: 3px; }
.fitg__link:hover .icon { transform: translateX(2px); }
@media (hover: hover) { .fitg__item:hover .fitg__photo img { transform: scale(1.04); } }
@media (max-width: 1279px) { .fitg__text, .fitg__link { font-size: 1rem; } }
/* tablets: two by two, the photos cut to 4:3 so that four of them are not two screens tall */
@media (max-width: 1099px) {
.fitg__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
.fitg__photo { aspect-ratio: 4 / 3; }
.fitg__copy { padding-top: 24px; }
.fitg__name { font-size: 1.375rem; }
}
/* phones: Apple's swiped row. It runs to both screen edges; a photo snaps to the text column's left edge. */
@media (max-width: 767px) {
.fitg__scroll { margin: 0 calc(var(--gutter) * -1); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
.fitg__scroll::-webkit-scrollbar { display: none; }
.fitg__list { display: flex; gap: 16px; width: max-content; padding: 0 var(--gutter); }
.fitg__item { flex: none; width: min(295px, 78vw); scroll-snap-align: start; }
.fitg__photo { aspect-ratio: 1; }
.fitg__copy { padding: 24px 10px 0; }
.fitg__name { font-size: 1.1875rem; line-height: 1.21; letter-spacing: -.01em; }
.fitg__text { margin-top: 11px; font-size: .875rem; line-height: 1.43; }
.fitg__link { margin-top: 11px; font-size: .875rem; }
}
/* Pallet status: „Очакван внос“ line on cards and the note on the pallet page */
.product-card__expected { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .84rem; font-weight: 600; color: #2C7BE5; }
.single-expected { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: #EAF2FD; color: #1F4E8C; font-size: .95rem; line-height: 1.5; }
.single-expected .icon { flex: none; margin-top: 2px; }
.price-block__main--ask { font-size: 1.15rem; font-weight: 600; color: var(--ink); }
/* ==========================================================================
Product page, a copy of eMAG's: grey page, white bands, 3 equal columns, buy box with shadow,
dark sticky tab bar, striped spec tables, compact bar under the header (bottom bar on phones)
========================================================================== */
.pdp-main { --pdp-ink: #222; --pdp-muted: #7f7f7f; --pdp-line: #e5e5e5; --pdp-stripe: #f3f6fb; --pdp-link: var(--navy-700); background: #f5f5f5; font-size: 14px; line-height: 20px; color: var(--pdp-ink); padding-bottom: 20px; }
.pdp-main .container.pdp__wrap { max-width: calc(1200px + 2 * var(--gutter)); padding-bottom: 0; }
.pdp__band { background: #fff; }
.pdp__band--top .pdp__wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; grid-template-areas: "crumbs crumbs crumbs" "head head head" "gallery mid buy"; align-items: start; padding-bottom: 20px; }
.pdp__crumbs { grid-area: crumbs; display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 12px; color: var(--pdp-muted); }
.pdp__back { display: none; }
.pdp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; color: #666; }
.pdp-crumbs a { color: #666; font-weight: 600; }
.pdp-crumbs a:hover { color: var(--pdp-ink); text-decoration: underline; }
.pdp-crumbs .sep { color: #666; }
.pdp__code { margin-left: auto; white-space: nowrap; color: var(--pdp-muted); }
.pdp__head { grid-area: head; margin: 10px 0; }
.pdp__head .product_title { font-size: 22px; line-height: 28px; font-weight: 400; margin: 0 0 5px; color: var(--pdp-ink); letter-spacing: 0; }
/* gallery */
.pdp__gallery { grid-area: gallery; position: relative; }
.pdp__gallery .badges { position: absolute; top: 8px; left: 8px; z-index: 3; gap: 4px; flex-direction: column; align-items: flex-start; }
.pdp__gallery .badge { border-radius: 3px; padding: 2px 8px; font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: 0; box-shadow: none; border: 0; }
.pdp .woocommerce-product-gallery { float: none !important; width: auto !important; margin: 0 !important; }
.pdp .woocommerce-product-gallery__wrapper { margin: 0; padding: 5px; border: 1px solid transparent; border-radius: 6px; background: #fff; }
.pdp .woocommerce-product-gallery__image img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; display: block; }
.pdp .woocommerce-product-gallery__trigger { display: none !important; }
.pdp .flex-control-thumbs { display: flex; justify-content: center; gap: 5px; margin: 14px 0 0 !important; padding: 0; list-style: none; }
.pdp .flex-control-thumbs li { width: 60px !important; height: 60px; float: none !important; margin: 0 !important; padding: 5px; border: 1px solid var(--pdp-line); border-radius: 6px; background: #fff; cursor: pointer; }
.pdp .flex-control-thumbs li img { width: 100%; height: 100%; object-fit: contain; opacity: 1 !important; }
.pdp .flex-control-thumbs li:has(img.flex-active) { border-color: var(--brand); }
/* middle column */
.pdp__mid { grid-area: mid; }
.pdp-block { margin-bottom: 20px; }
.pdp-block__title, .pdp-de__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--pdp-ink); }
.pdp-facts__list { margin: 8px 0 0; display: grid; }
.pdp-facts__list > div { display: grid; grid-template-columns: 45% 1fr; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--pdp-line); font-size: 13px; line-height: 18px; }
.pdp-facts__list > div:last-child { border-bottom: 0; }
.pdp-facts__list dt { color: var(--pdp-muted); font-weight: 400; }
.pdp-facts__list dd { margin: 0; font-weight: 600; }
.pdp-facts__list dd a { color: var(--pdp-link); }
.pdp-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--pdp-link); }
.pdp-more:hover { text-decoration: underline; }
.pdp-de__eta { margin: 0 0 12px; font-size: 14px; }
.pdp-de__box { display: flex; gap: 10px; padding: 8px 10px; border-radius: 8px; }
.pdp-de__box + .pdp-de__box { margin-top: 4px; }
.pdp-de__box:hover { background: #fafafa; }
.pdp-de__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy-100); color: var(--navy-900); }
.pdp-de__line { margin: 2px 0 0; font-size: 13px; line-height: 18px; }
.pdp-de__price { margin: 2px 0 0; font-size: 13px; line-height: 18px; font-weight: 600; }
.pdp-de .pdp-more { margin-left: 10px; }
.pdp-info__list { list-style: none; margin: 4px 0 0; padding: 0; }
.pdp-info__list li { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; }
.pdp-info__list .icon { color: var(--success); flex: none; }
.pdp-info .pdp-de__box { padding-left: 0; }
.pdp-info .pdp-de__box:hover { background: transparent; }
/* buy box */
.pdp__buy { grid-area: buy; }
.pdp__box { padding: 20px; border-radius: 12px; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, .1); }
.pdp-price { margin: 4px 0; font-size: 26px; line-height: 26px; font-weight: 700; color: var(--navy-900); white-space: nowrap; }
.pdp-price sup { font-size: .55em; font-weight: 700; vertical-align: top; position: relative; top: .05em; margin-left: 1px; }
.pdp-price__cur { font-size: .85em; }
.pdp-price--sm { font-size: 18px; line-height: 20px; margin: 0; }
.pdp-price--ask { font-size: 18px; line-height: 24px; }
.pdp-price-old { margin: 0; font-size: 12px; line-height: 16px; color: var(--pdp-muted); }
.pdp-price-old s { text-decoration: line-through; }
.pdp__seller { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--pdp-line); }
.pdp-stock { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.pdp-stock--low { color: var(--danger); font-weight: 600; }
.pdp-stock--out { color: var(--pdp-muted); }
.pdp-note { display: flex; gap: 12px; margin: 12px 0 0; padding: 10px; border-radius: 8px; background: #f4f4f4; font-size: 13px; line-height: 17px; }
.pdp-note__ico { flex: none; width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--navy-900); color: #fff; }
.pdp-note p { margin: 0; }
.pdp-note__title { font-weight: 600; }
.pdp-note a { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--pdp-ink); text-decoration: underline; }
.pdp__actions { margin-top: 16px; }
.pdp .stock, .pdp form.cart .quantity { display: none !important; }
.single-product div.product.pdp form.cart { display: block; margin: 0 0 10px !important; padding: 0; float: none; }
.pdp-btn, .pdp .single_add_to_cart_button { position: relative; display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; padding: 12px 20px !important; border: 0; border-radius: 10px !important; font: inherit; font-size: 16px !important; font-weight: 600 !important; line-height: 20px; color: #fff !important; text-align: center; cursor: pointer; transition: background .15s, border-color .15s; }
.pdp-btn--cart, .pdp .single_add_to_cart_button, .woocommerce div.product.pdp button.single_add_to_cart_button { background: var(--brand) !important; }
.pdp-btn--cart:hover, .pdp .single_add_to_cart_button:hover, .woocommerce div.product.pdp button.single_add_to_cart_button:hover { background: var(--brand-600) !important; color: #fff !important; }
.pdp .single_add_to_cart_button.loading { opacity: .7; }
.pdp .single_add_to_cart_button::after { display: none !important; }
.pdp-btn__ico, .pdp .single_add_to_cart_button::before { content: ""; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: inherit; }
.pdp-btn__ico svg { width: 100%; height: 100%; }
.pdp .single_add_to_cart_button::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 3.3h2a1.4 1.4 0 0 1 1.37 1.1L6.5 7h14.3a.9.9 0 0 1 .87 1.13l-1.6 6a2.1 2.1 0 0 1-2.03 1.57H10a2.1 2.1 0 0 1-2.06-1.69L6.5 7'/%3E%3Ccircle cx='10.6' cy='19.5' r='1.6'/%3E%3Ccircle cx='17.1' cy='19.5' r='1.6'/%3E%3C/svg%3E") center / 22px 22px no-repeat; }
.pdp-btn--outline { background: #fff; color: var(--navy-900) !important; border: 1.5px solid var(--line-2); min-height: 50px; margin-top: 10px; }
.pdp-btn--outline:hover { background: var(--bg-2); border-color: var(--navy-900); }
.pdp-btn--md { min-height: 40px; padding: 8px 16px !important; width: auto; font-size: 15px !important; }
.pdp-btn--md .pdp-btn__ico { width: 20px; height: 20px; }
.pdp-btn--square { flex: none; display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; min-height: 40px; padding: 0 !important; border: 1.5px solid var(--line-2); border-radius: 10px !important; background: #fff; color: var(--navy-900) !important; }
.pdp-btn--square:hover { background: var(--bg-2); border-color: var(--navy-900); }
.pdp-expected { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 10px; border-radius: 8px; background: var(--brand-50); color: var(--brand-700); font-size: 13px; line-height: 18px; }
.pdp-expected .icon { flex: none; margin-top: 1px; }
.pdp .product_meta { margin: 10px 0 0; font-size: 12px; line-height: 16px; color: var(--pdp-muted); }
.pdp .product_meta > span { display: inline; }
/* related band */
.pdp__band--related { margin-top: 8px; }
.pdp__band--related .pdp__wrap { padding-top: 10px; padding-bottom: 20px; }
.pdp__title { margin: 20px 0 10px; font-size: 25px; line-height: 36px; font-weight: 400; color: var(--pdp-ink); letter-spacing: 0; }
.pdp__band--related section.related { margin: 0; padding: 0; border: 0; }
.pdp__band--related section.related > h2 { display: none; }
.pdp__band--related ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* sticky tab bar */
.pdp__tabs { position: sticky; top: var(--pdp-top, 124px); z-index: 30; background: var(--navy-900); }
.pdp--barred .pdp__tabs { top: calc(var(--pdp-top, 124px) + var(--pdp-bar-h, 0px)); }
.pdp__tabs ul { list-style: none; display: flex; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.pdp__tabs ul::-webkit-scrollbar { display: none; }
.pdp__tabs li { margin: 4px 4px 4px 0; }
.pdp__tabs a { display: block; padding: 0 15px; line-height: 36px; border-radius: 3px; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; }
.pdp__tabs a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.pdp__tabs a.is-active { background: rgba(255, 255, 255, .95); color: var(--pdp-ink); }
/* sections */
.pdp__band--sections .pdp__wrap { padding-bottom: 20px; }
.pdp__section { padding-bottom: 20px; scroll-margin-top: calc(var(--pdp-top, 124px) + var(--pdp-bar-h, 0px) + 60px); }
.pdp__prose { max-width: 960px; font-size: 14px; line-height: 20px; color: var(--pdp-ink); }
.pdp__prose p { margin: 0 0 10px; }
.pdp__prose h3 { font-size: 15px; font-weight: 600; margin: 16px 0 6px; }
.pdp__prose ul, .pdp__prose ol { margin: 0 0 10px 20px; }
.pdp-spec__group { margin: 0 0 10px; padding-top: 20px; font-size: 14px; font-weight: 700; text-transform: uppercase; }
.pdp-spec__group:first-child { padding-top: 0; }
.pdp-spec { width: 100%; border-collapse: collapse; margin: 0 0 10px; font-size: 14px; line-height: 20px; }
.pdp-spec tbody tr:nth-child(odd) { background: var(--pdp-stripe); }
.pdp-spec td { padding: 8px; vertical-align: top; text-align: left; border: 0; }
.pdp-spec td.pdp-spec__k { width: 33.333%; color: var(--pdp-muted); }
.pdp-spec td a { color: var(--pdp-link); }
/* compact bar */
.pdp-bar { position: fixed; top: var(--pdp-top, 124px); left: 0; right: 0; z-index: 90; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); }
.pdp-bar[hidden] { display: none; }
.pdp-bar__inner { display: flex; align-items: center; gap: 20px; min-height: 60px; padding-top: 6px; padding-bottom: 6px; }
.pdp-bar__thumb { flex: none; width: 52px; height: 52px; display: block; }
.pdp-bar__thumb img { width: 52px; height: 52px !important; object-fit: cover; border-radius: 6px; border: 1px solid var(--pdp-line); }
.pdp-bar__title { flex: 1; min-width: 0; font-size: 16px; line-height: 20px; color: var(--pdp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdp-bar__title:hover { color: var(--pdp-ink); text-decoration: underline; }
.pdp-bar__price { flex: none; white-space: nowrap; }
.pdp-bar__price .pdp-price-old { display: none; }
.pdp-bar .pdp-btn--md { flex: none; }
@media (max-width: 1100px) {
.pdp__band--top .pdp__wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "crumbs crumbs" "head head" "gallery buy" "mid mid"; }
.pdp__mid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; margin-top: 20px; }
.pdp__band--related ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
.pdp-main { padding-bottom: 80px; }
.pdp__band--top .pdp__wrap { display: flex; flex-direction: column; padding-bottom: 16px; }
.pdp__crumbs { order: 1; flex-wrap: nowrap; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; gap: 10px; padding: 10px 0; }
.pdp__crumbs::-webkit-scrollbar { display: none; }
.pdp__back { display: inline-flex; flex: none; align-items: center; height: 30px; padding: 0 10px; border-radius: 6px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); color: var(--pdp-ink); font-size: 13px; font-weight: 600; }
.pdp-crumbs { flex-wrap: nowrap; white-space: nowrap; }
.pdp__code { display: none; }
.pdp__gallery { order: 2; margin: 0 calc(-1 * var(--gutter)); }
.pdp .woocommerce-product-gallery__wrapper { padding: 0; border: 0; border-radius: 0; }
.pdp .woocommerce-product-gallery__image img { aspect-ratio: 5 / 4; }
.pdp__gallery .badges { top: 8px; left: var(--gutter); }
.pdp__head { order: 3; margin: 12px 0 10px; }
.pdp__head .product_title { font-size: 16px; line-height: 22px; font-weight: 600; margin: 0; }
.pdp__buy { order: 4; }
.pdp__box { padding: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, .1); }
.pdp__mid { order: 5; display: block; margin-top: 20px; }
.pdp-block__title, .pdp-de__eta, .pdp-de__eta b { font-size: 18px; line-height: 24px; font-weight: 600; }
.pdp-de__title, .pdp-info .pdp-de__title { font-size: 14px; line-height: 20px; }
.pdp__band--related ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pdp__title { font-size: 20px; line-height: 28px; }
.pdp__tabs li { margin: 4px 0 4px 0; }
.pdp__tabs a { padding: 0 12px; }
.pdp-spec td.pdp-spec__k { width: 42%; }
.pdp-bar { top: auto; bottom: 0; box-shadow: 0 0 6px rgba(0, 0, 0, .16); }
.pdp-bar__inner { gap: 10px; padding: 10px var(--gutter); min-height: 60px; }
.pdp-bar__thumb, .pdp-bar__title, .pdp-bar__price { display: none; }
.pdp-bar .pdp-btn--md { flex: 1; order: 2; }
.pdp-bar .pdp-btn--square { order: 1; }
.pdp--barred .pdp__tabs { top: var(--pdp-top, 124px); }
}
@media (max-width: 640px) {
.cta { padding: 28px 0 32px; }
.cta__card { gap: 16px; padding: 22px 18px; border-radius: 16px; }
.cta__card::before { width: 70%; top: -40%; right: -20%; }
.cta__text h2 { font-size: 1.2rem; line-height: 1.3; margin-bottom: 6px; }
.cta__text p { font-size: .92rem; }
.cta__actions { flex-direction: column; gap: 10px; }
.cta__actions .btn { width: 100%; flex: none; padding: 13px 18px; font-size: .95rem; border-radius: 10px; box-shadow: none; }
}
/* ==========================================================================
Pallet story (template-parts/home/story.php): one cardboard box, five scenes, a pill explorer.
The text layer is Apple's product-explorer pattern (iphone-18-pro, "Design"): a headline band, then
a column of labelled pills beside the box; the pill of the current scene is open, grown into a card
with its copy. The base rules are the static layout reduced motion / no JS keep: band, the box at
rest, all five cards open one under the other, the brand and category rows. `.story.is-live` is what
story.js switches on: a tall section, a stage pinned under the header, the pills in a left column
(scroll moves the open one, a click jumps to that scene), the box and its clouds on the right.
The box is six CSS faces on a kraft texture, a printed AMIhub mark on the front, a shipping sticker
on the left (the side that turns to the visitor in the Amazon scene), a lid of four flaps. Each face
darkens by its own --sh-* variable, which the script sets from the pose.
========================================================================== */
.story { --kraft: #BE8A57; --kraft-ink: rgba(70, 42, 14, .85); --bw: 310px; --bh: 226px; --bd: 210px; --cs: 1; position: relative; background: #fff; padding: clamp(56px, 7vw, 96px) 0; }
.story__band .section-heading { max-width: 760px; margin-bottom: clamp(24px, 3vw, 36px); }
.story__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 800px; }
.story__pin { position: relative; }
.story__visual { position: relative; order: 0; height: 400px; }
.story__space { position: absolute; inset: 0; perspective: 1400px; perspective-origin: 50% 42%; --open: 0; }
/* Pills. Static: five open cards one under the other. */
.story__pills { order: 1; }
.story__pill-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.story__pill { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; }
.story__pill-head { margin: 0; font: inherit; color: inherit; } /* the h3 colour rule would paint the label navy on the navy card */
.story__pill-btn { display: flex; align-items: center; gap: 10px; text-align: left; font-weight: 600; font-size: 1.05rem; line-height: 1.3; color: var(--ink); cursor: default; }
.story__pill-ico { flex: none; display: none; }
.story__pill-body { display: grid; grid-template-rows: 1fr; }
.story__pill-inner { min-height: 0; overflow: hidden; }
.story__pill-text { margin: 10px 0 0; color: var(--muted); font-size: .98rem; line-height: 1.6; }
.story__specs { margin-top: 12px; }
.story__cta { margin-top: 14px; }
.story__cloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.story__cloud--brands { order: 2; }
.story__cloud--cats { order: 3; }
.story__cloud--brands li { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: #1d1d1f; white-space: nowrap; }
.story__cloud--brands li.story__cloud-note { font-weight: 500; font-size: 1rem; letter-spacing: 0; color: var(--muted-2); }
.story__cloud--items { display: none; }
.story__cat { display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-weight: 600; font-size: .88rem; color: var(--ink); white-space: nowrap; }
.story__cat:hover { border-color: var(--line-2); color: var(--ink); }
.story__cat-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--pl-box-top, var(--bg-2)); color: var(--cat-accent, var(--navy-900)); flex: none; }
/* The box */
.story__box { position: absolute; left: 50%; top: 50%; width: var(--bw); height: var(--bh); margin: calc(var(--bh) / -2) 0 0 calc(var(--bw) / -2); transform-style: preserve-3d; transform: rotateX(-12deg) rotateY(-24deg); --sh-front: .12; --sh-back: .4; --sh-left: .3; --sh-right: .34; --sh-top: .08; --sh-bottom: .5; }
.story__face { position: absolute; left: 0; top: 0; width: var(--bw); height: var(--bh); opacity: var(--bo, 1); background-color: var(--kraft); background-image: radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .05) 60%, rgba(0, 0, 0, .17)), linear-gradient(rgba(190, 138, 87, .64), rgba(190, 138, 87, .64)), url("../img/kraft.webp"); background-size: auto, auto, auto, 560px 560px; background-position: 0 0, 0 0, 0 0, var(--tex, 0 0); box-shadow: inset 0 0 0 1px rgba(70, 44, 14, .3), inset 0 -16px 20px -16px rgba(0, 0, 0, .3); backface-visibility: hidden; overflow: hidden; }
.story__face::after { content: ""; position: absolute; inset: 0; background: #3A2810; opacity: var(--sh, .1); pointer-events: none; }
.story__face--front { --sh: var(--sh-front); --tex: 0 0; transform: translateZ(calc(var(--bd) / 2)); box-shadow: inset 0 0 0 1px rgba(70, 44, 14, .3), inset 1px 0 0 rgba(255, 255, 255, .16), inset -1px 0 0 rgba(0, 0, 0, .14), inset 0 -16px 20px -16px rgba(0, 0, 0, .3); }
/* Light from the open lid spilling down the front, under the print */
.story__face--front::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--open); background: linear-gradient(180deg, rgba(255, 200, 115, .5), rgba(255, 200, 115, 0) 55%); }
.story__face--back { --sh: var(--sh-back); --tex: -40px -400px; transform: rotateY(180deg) translateZ(calc(var(--bd) / 2)); }
.story__face--right, .story__face--left { width: var(--bd); left: 50%; margin-left: calc(var(--bd) / -2); }
.story__face--right { --sh: var(--sh-right); --tex: -220px -80px; transform: rotateY(90deg) translateZ(calc(var(--bw) / 2)); }
.story__face--left { --sh: var(--sh-left); --tex: -90px -300px; transform: rotateY(-90deg) translateZ(calc(var(--bw) / 2)); }
.story__face--top, .story__face--bottom { height: var(--bd); top: 50%; margin-top: calc(var(--bd) / -2); }
.story__face--bottom { --sh: var(--sh-bottom); transform: rotateX(-90deg) translateZ(calc(var(--bh) / 2)); }
.story__print { position: absolute; inset: 40% 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; mix-blend-mode: multiply; }
.story__print .brand { font-size: calc(var(--bw) * .14); color: rgba(27, 46, 85, .92); }
.story__print .brand__ami { color: rgba(27, 46, 85, .92); }
.story__print .brand__hub { background: rgba(242, 140, 29, .94); }
.story__print-sub { font-size: calc(var(--bw) * .036); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--kraft-ink); }
.story__sticker { position: absolute; left: 20%; top: 38%; width: 60%; padding: 3.5% 4.5% 4.5%; background: #FCFBF7; border-radius: 3px; transform: rotate(-1.5deg); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .22), 0 4px 8px -3px rgba(0, 0, 0, .25); color: #1d1d1f; display: grid; gap: 1px; font-size: calc(var(--bd) * .042); line-height: 1.25; }
.story__sticker-key { margin-top: .5em; font-size: .68em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #7b7b7b; }
.story__sticker-key:first-child { margin-top: 0; }
.story__sticker-val { font-weight: 700; }
.story__barcode { display: block; height: 1.9em; margin: .5em 0 .1em; background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 8px, #111 8px 11px, transparent 11px 13px, #111 13px 14px, transparent 14px 16px); }
.story__marks { position: absolute; left: 12%; bottom: 12%; display: grid; gap: 4px; mix-blend-mode: multiply; color: var(--kraft-ink); font-size: calc(var(--bd) * .04); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.story__arrows { font-size: 3.2em; line-height: 1; letter-spacing: -.08em; }
.story__shadow { position: absolute; left: 50%; top: 50%; width: calc(var(--bw) * 1.5); height: calc(var(--bd) * .5); margin: calc(var(--bh) * .5) 0 0 calc(var(--bw) * -.75); border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 33, 61, .34) 0%, rgba(20, 33, 61, .16) 35%, rgba(20, 33, 61, .05) 65%, rgba(20, 33, 61, 0) 100%); }
.story__shadow::after { content: ""; position: absolute; inset: -14% -8%; border-radius: 50%; opacity: var(--open); background: radial-gradient(closest-side, rgba(255, 196, 110, .6), rgba(255, 196, 110, .18) 50%, rgba(255, 196, 110, 0)); }
/* The lid and the inside. The top is four flaps on one plane, hinged on the box's top edges; --open (0..1,
written by the script) swings them out, lights the mouth and reveals the inner walls and floor. Closed,
the flaps read exactly like the old top face. Faces are leaves (no opacity/filter on the preserve-3d parents). */
.story__top { position: absolute; left: 0; top: 50%; width: var(--bw); height: var(--bd); margin-top: calc(var(--bd) / -2); transform: rotateX(90deg) translateZ(calc(var(--bh) / 2)); transform-style: preserve-3d; }
.story__flap { position: absolute; transform-style: preserve-3d; }
.story__flap--front { left: 0; top: 50%; width: 100%; height: 50%; transform-origin: 50% 100%; transform: rotateX(calc(var(--open) * -150deg)); }
.story__flap--back { left: 0; top: 0; width: 100%; height: 50%; transform-origin: 50% 0; transform: rotateX(calc(var(--open) * 100deg)); }
.story__flap--l { left: 0; top: 0; width: 42%; height: 100%; transform-origin: 0 50%; transform: translateZ(-1px) rotateY(calc(var(--open) * -150deg)); }
.story__flap--r { right: 0; top: 0; width: 42%; height: 100%; transform-origin: 100% 50%; transform: translateZ(-1px) rotateY(calc(var(--open) * 150deg)); }
.story__flap-out, .story__flap-in { position: absolute; inset: 0; opacity: var(--bo, 1); --tex: -320px -160px; background-color: var(--kraft); background-image: radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .05) 60%, rgba(0, 0, 0, .17)), linear-gradient(rgba(190, 138, 87, .64), rgba(190, 138, 87, .64)), url("../img/kraft.webp"); background-size: auto, auto, auto, 560px 560px; background-position: 0 0, 0 0, 0 0, var(--tex, 0 0); box-shadow: inset 0 0 0 1px rgba(70, 44, 14, .3); backface-visibility: hidden; overflow: hidden; }
.story__flap--l .story__flap-out, .story__flap--l .story__flap-in { --tex: -60px -420px; }
.story__flap--r .story__flap-out, .story__flap--r .story__flap-in { --tex: -400px -40px; }
.story__flap-out::after, .story__flap-in::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.story__flap-out::after { background: #3A2810; opacity: var(--sh-top, .08); }
.story__flap-in { transform: rotateY(180deg); }
.story__flap-in::after { background: rgba(40, 25, 8, .3); }
.story__flap-in::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: var(--open); }
.story__flap--front .story__flap-in::before { background: radial-gradient(80% 100% at 50% 100%, rgba(255, 214, 140, .98), rgba(255, 178, 80, .55) 55%, rgba(255, 178, 80, 0)); }
.story__flap--back .story__flap-in::before { background: radial-gradient(80% 100% at 50% 0, rgba(255, 214, 140, .98), rgba(255, 178, 80, .55) 55%, rgba(255, 178, 80, 0)); }
.story__flap--l .story__flap-in::before { background: radial-gradient(100% 80% at 100% 50%, rgba(255, 214, 140, .98), rgba(255, 178, 80, .55) 55%, rgba(255, 178, 80, 0)); }
.story__flap--r .story__flap-in::before { background: radial-gradient(100% 80% at 0 50%, rgba(255, 214, 140, .98), rgba(255, 178, 80, .55) 55%, rgba(255, 178, 80, 0)); }
.story__flute { position: absolute; left: 0; right: 0; height: 3px; z-index: 2; background: repeating-linear-gradient(90deg, rgba(60, 38, 12, .42) 0 2px, rgba(215, 185, 135, .3) 2px 5px); }
.story__flap--front .story__flute { top: 0; }
.story__flap--back .story__flute { bottom: 0; }
.story__glow { position: absolute; inset: 2%; transform: translateZ(-3px); opacity: var(--open); background: radial-gradient(closest-side, #FFF6E4 0%, rgba(255, 228, 170, .98) 22%, rgba(255, 190, 95, .8) 50%, rgba(255, 160, 60, 0) 100%); }
.story__inner { position: absolute; left: 0; top: 0; width: var(--bw); height: var(--bh); opacity: var(--bo, 1); background-color: #8C6B45; background-image: url("../img/kraft.webp"); background-size: 560px 560px; background-position: -200px -260px; backface-visibility: hidden; }
.story__inner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40, 25, 8, .35), rgba(40, 25, 8, .6)); }
.story__inner::before { content: ""; position: absolute; inset: 0; z-index: 1; opacity: var(--open); background: linear-gradient(180deg, rgba(255, 210, 130, .9), rgba(255, 190, 100, .45) 45%, rgba(255, 180, 80, 0) 85%); }
.story__inner--back { transform: translateZ(calc(var(--bd) / -2 + 1px)); }
.story__inner--left, .story__inner--right { width: var(--bd); left: 50%; margin-left: calc(var(--bd) / -2); }
.story__inner--left { transform: rotateY(90deg) translateZ(calc(var(--bw) / -2 + 1px)); }
.story__inner--right { transform: rotateY(-90deg) translateZ(calc(var(--bw) / -2 + 1px)); }
.story__inner--floor { height: var(--bd); top: 50%; margin-top: calc(var(--bd) / -2); transform: rotateX(90deg) translateZ(calc(var(--bh) / -2 + 1px)); }
.story__inner--floor::before { background: radial-gradient(closest-side, #FFF8EA, rgba(255, 224, 160, .95) 35%, rgba(255, 180, 80, .6) 70%, rgba(255, 150, 50, 0)); }
/* Light spilling out of the open box: a soft beam with a few specks, a 2D layer the script keeps over the mouth */
.story__beam { position: absolute; left: 50%; top: 50%; width: calc(var(--bw) * 2.3); height: calc(var(--bh) * 2.4); margin: calc(var(--bh) * -2.9) 0 0 calc(var(--bw) * -1.15); transform-origin: 50% 100%; opacity: 0; pointer-events: none; overflow: hidden; background: radial-gradient(38% 42% at 50% 100%, rgba(255, 244, 218, .95), rgba(255, 214, 140, .7) 35%, rgba(255, 180, 85, .25) 65%, rgba(255, 160, 60, 0) 100%), radial-gradient(60% 100% at 50% 100%, rgba(255, 200, 115, .5), rgba(255, 175, 75, .18) 45%, rgba(255, 150, 50, 0) 80%), conic-gradient(from 0deg at 50% 100%, rgba(255, 240, 205, 0) 0deg, rgba(255, 240, 205, 0) -34.0deg, rgba(255, 240, 205, 0.16) -33.1deg, rgba(255, 240, 205, 0) -32.2deg, rgba(255, 240, 205, 0) -26.0deg, rgba(255, 240, 205, 0.23) -25.4deg, rgba(255, 240, 205, 0) -24.7deg, rgba(255, 240, 205, 0) -19.7deg, rgba(255, 240, 205, 0.22) -19.1deg, rgba(255, 240, 205, 0) -18.4deg, rgba(255, 240, 205, 0) -14.8deg, rgba(255, 240, 205, 0.15) -13.7deg, rgba(255, 240, 205, 0) -12.7deg, rgba(255, 240, 205, 0) -8.8deg, rgba(255, 240, 205, 0.27) -7.8deg, rgba(255, 240, 205, 0) -6.8deg, rgba(255, 240, 205, 0) -2.8deg, rgba(255, 240, 205, 0.24) -2.0deg, rgba(255, 240, 205, 0) -1.2deg, rgba(255, 240, 205, 0) 6.1deg, rgba(255, 240, 205, 0.20) 7.3deg, rgba(255, 240, 205, 0) 8.5deg, rgba(255, 240, 205, 0) 15.9deg, rgba(255, 240, 205, 0.28) 16.5deg, rgba(255, 240, 205, 0) 17.2deg, rgba(255, 240, 205, 0) 21.8deg, rgba(255, 240, 205, 0.16) 22.6deg, rgba(255, 240, 205, 0) 23.3deg, rgba(255, 240, 205, 0) 28.1deg, rgba(255, 240, 205, 0.17) 29.5deg, rgba(255, 240, 205, 0) 30.9deg, rgba(255, 240, 205, 0) 360deg); -webkit-mask-image: radial-gradient(70% 105% at 50% 100%, #000 25%, rgba(0, 0, 0, .6) 55%, transparent 100%); mask-image: radial-gradient(70% 105% at 50% 100%, #000 25%, rgba(0, 0, 0, .6) 55%, transparent 100%); }
.story__dust { position: absolute; inset: 0; pointer-events: none; transform: translate3d(0, calc(var(--open) * -34px), 0); background-image: radial-gradient(circle at 46% 55%, rgba(255, 250, 235, 0.76) 0 2.3px, rgba(255, 250, 235, 0) 3.5px), radial-gradient(circle at 51% 58%, rgba(255, 250, 235, 0.78) 0 1.0px, rgba(255, 250, 235, 0) 2.2px), radial-gradient(circle at 61% 77%, rgba(255, 250, 235, 0.69) 0 0.9px, rgba(255, 250, 235, 0) 2.1px), radial-gradient(circle at 14% 78%, rgba(255, 250, 235, 0.57) 0 1.9px, rgba(255, 250, 235, 0) 3.1px), radial-gradient(circle at 92% 93%, rgba(255, 250, 235, 0.83) 0 1.8px, rgba(255, 250, 235, 0) 3.0px), radial-gradient(circle at 20% 5%, rgba(255, 250, 235, 0.58) 0 1.6px, rgba(255, 250, 235, 0) 2.8px), radial-gradient(circle at 23% 26%, rgba(255, 250, 235, 0.76) 0 0.8px, rgba(255, 250, 235, 0) 2.0px), radial-gradient(circle at 45% 82%, rgba(255, 250, 235, 0.84) 0 1.6px, rgba(255, 250, 235, 0) 2.8px), radial-gradient(circle at 50% 65%, rgba(255, 250, 235, 0.68) 0 1.5px, rgba(255, 250, 235, 0) 2.7px), radial-gradient(circle at 94% 96%, rgba(255, 250, 235, 0.87) 0 2.1px, rgba(255, 250, 235, 0) 3.3px), radial-gradient(circle at 34% 25%, rgba(255, 250, 235, 0.58) 0 1.2px, rgba(255, 250, 235, 0) 2.4px), radial-gradient(circle at 73% 41%, rgba(255, 250, 235, 0.72) 0 2.1px, rgba(255, 250, 235, 0) 3.3px), radial-gradient(circle at 90% 82%, rgba(255, 250, 235, 0.64) 0 0.7px, rgba(255, 250, 235, 0) 1.9px), radial-gradient(circle at 86% 47%, rgba(255, 250, 235, 0.73) 0 2.4px, rgba(255, 250, 235, 0) 3.6px), radial-gradient(circle at 12% 62%, rgba(255, 250, 235, 0.67) 0 2.0px, rgba(255, 250, 235, 0) 3.2px), radial-gradient(circle at 14% 35%, rgba(255, 250, 235, 0.89) 0 2.3px, rgba(255, 250, 235, 0) 3.5px), radial-gradient(circle at 16% 27%, rgba(255, 250, 235, 0.58) 0 0.9px, rgba(255, 250, 235, 0) 2.1px), radial-gradient(circle at 76% 20%, rgba(255, 250, 235, 0.75) 0 1.7px, rgba(255, 250, 235, 0) 2.9px), radial-gradient(circle at 23% 71%, rgba(255, 250, 235, 0.84) 0 0.9px, rgba(255, 250, 235, 0) 2.1px), radial-gradient(circle at 16% 43%, rgba(255, 250, 235, 0.67) 0 1.1px, rgba(255, 250, 235, 0) 2.3px), radial-gradient(circle at 91% 78%, rgba(255, 250, 235, 0.95) 0 1.2px, rgba(255, 250, 235, 0) 2.4px), radial-gradient(circle at 25% 40%, rgba(255, 250, 235, 0.84) 0 2.2px, rgba(255, 250, 235, 0) 3.4px), radial-gradient(circle at 15% 95%, rgba(255, 250, 235, 0.67) 0 1.1px, rgba(255, 250, 235, 0) 2.3px), radial-gradient(circle at 74% 34%, rgba(255, 250, 235, 0.58) 0 1.2px, rgba(255, 250, 235, 0) 2.4px), radial-gradient(circle at 14% 58%, rgba(255, 250, 235, 0.82) 0 1.1px, rgba(255, 250, 235, 0) 2.3px), radial-gradient(circle at 39% 46%, rgba(255, 250, 235, 0.77) 0 2.3px, rgba(255, 250, 235, 0) 3.5px); }
.story__dust--far { transform: translate3d(0, calc(var(--open) * -14px), 0) scale(1.08); opacity: .8; background-image: radial-gradient(circle at 87% 91%, rgba(255, 250, 235, 0.59) 0 3.3px, rgba(255, 250, 235, 0) 5.7px), radial-gradient(circle at 58% 43%, rgba(255, 250, 235, 0.61) 0 2.2px, rgba(255, 250, 235, 0) 4.6px), radial-gradient(circle at 23% 45%, rgba(255, 250, 235, 0.75) 0 1.3px, rgba(255, 250, 235, 0) 3.7px), radial-gradient(circle at 8% 12%, rgba(255, 250, 235, 0.74) 0 2.8px, rgba(255, 250, 235, 0) 5.2px), radial-gradient(circle at 51% 72%, rgba(255, 250, 235, 0.58) 0 1.7px, rgba(255, 250, 235, 0) 4.1px), radial-gradient(circle at 75% 58%, rgba(255, 250, 235, 0.83) 0 2.6px, rgba(255, 250, 235, 0) 5.0px), radial-gradient(circle at 91% 37%, rgba(255, 250, 235, 0.72) 0 2.9px, rgba(255, 250, 235, 0) 5.3px), radial-gradient(circle at 56% 65%, rgba(255, 250, 235, 0.59) 0 1.6px, rgba(255, 250, 235, 0) 4.0px), radial-gradient(circle at 48% 70%, rgba(255, 250, 235, 0.75) 0 2.4px, rgba(255, 250, 235, 0) 4.8px), radial-gradient(circle at 63% 21%, rgba(255, 250, 235, 0.70) 0 1.2px, rgba(255, 250, 235, 0) 3.6px), radial-gradient(circle at 78% 22%, rgba(255, 250, 235, 0.59) 0 1.0px, rgba(255, 250, 235, 0) 3.4px), radial-gradient(circle at 9% 29%, rgba(255, 250, 235, 0.92) 0 2.4px, rgba(255, 250, 235, 0) 4.8px), radial-gradient(circle at 35% 38%, rgba(255, 250, 235, 0.69) 0 1.5px, rgba(255, 250, 235, 0) 3.9px), radial-gradient(circle at 74% 55%, rgba(255, 250, 235, 0.60) 0 1.4px, rgba(255, 250, 235, 0) 3.8px), radial-gradient(circle at 75% 69%, rgba(255, 250, 235, 0.66) 0 3.1px, rgba(255, 250, 235, 0) 5.5px), radial-gradient(circle at 54% 89%, rgba(255, 250, 235, 0.98) 0 2.4px, rgba(255, 250, 235, 0) 4.8px), radial-gradient(circle at 21% 94%, rgba(255, 250, 235, 0.74) 0 0.9px, rgba(255, 250, 235, 0) 3.3px), radial-gradient(circle at 8% 78%, rgba(255, 250, 235, 0.99) 0 2.7px, rgba(255, 250, 235, 0) 5.1px); }
/* Live: pinned stage, the pill column on the left, the box and its clouds on the right */
.story.is-live { height: 450vh; padding: 0; }
.story.is-live .story__band { padding-top: clamp(56px, 7vw, 96px); }
.story.is-live .story__pin { position: sticky; top: var(--story-top, 0px); height: calc(100vh - var(--story-top, 0px)); overflow: hidden; }
@supports (height: 100svh) { .story.is-live .story__pin { height: calc(100svh - var(--story-top, 0px)); } }
.story.is-live .story__stage { display: block; max-width: var(--container); height: 100%; }
.story.is-live .story__visual { position: absolute; inset: 0; height: auto; }
/* Only transform here: will-change (or a real value) of opacity, filter or overflow on the box would flatten its 3D context and leave a single face. */
.story.is-live .story__box { will-change: transform; }
.story.is-live .story__shadow { will-change: transform, opacity; }
/* The explorer column. A closed pill hugs its label (the circled plus and the name); the current scene's
pill grows into a navy card, the site's dark card, with its copy. `contain: inline-size` keeps a
closed card's text out of the pill's width; min-width 0 -> 100% is the growth Apple animates. */
.story.is-live .story__pills { position: absolute; left: var(--gutter); top: 17%; width: min(440px, 34%); z-index: 2; }
.story.is-live .story__pill { width: max-content; max-width: 100%; min-width: 0; padding: 0; background: var(--bg-2); border: 0; border-radius: 28px; color: var(--ink); transition: min-width .4s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-radius .3s var(--ease), box-shadow .3s var(--ease); }
.story.is-live .story__pill:hover { background: var(--line); }
.story.is-live .story__pill-btn { min-height: 52px; padding: 0 22px 0 16px; font-size: 1rem; color: inherit; cursor: pointer; transition: padding .3s var(--ease), min-height .3s var(--ease), font-size .3s var(--ease); }
.story.is-live .story__pill-btn:focus-visible { outline-offset: -3px; border-radius: 28px; }
.story.is-live .story__pill-ico { display: block; width: 22px; height: 22px; opacity: .9; transition: width .3s var(--ease), opacity .3s var(--ease), margin-right .3s var(--ease); }
.story.is-live .story__pill-body { contain: inline-size; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .4s var(--ease), visibility 0s .4s; }
.story.is-live .story__pill-inner { padding: 0 24px; opacity: 0; transition: opacity .2s var(--ease); }
.story.is-live .story__pill-inner::after { content: ""; display: block; height: 22px; }
.story.is-live .story__pill.is-open { min-width: 100%; background: var(--navy-900); color: #fff; border-radius: 22px; box-shadow: var(--shadow-lg); }
.story.is-live .story__pill.is-open .story__pill-btn { min-height: 0; padding: 22px 24px 0; font-size: 1.08rem; cursor: default; }
.story.is-live .story__pill.is-open .story__pill-ico { width: 0; opacity: 0; margin-right: -10px; }
.story.is-live .story__pill.is-open .story__pill-body { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .4s var(--ease), visibility 0s; }
.story.is-live .story__pill.is-open .story__pill-inner { opacity: 1; transition: opacity .35s var(--ease) .15s; }
.story.is-live .story__pill-text { margin-top: 8px; color: rgba(255, 255, 255, .82); }
.story.is-live .story__pill .size-specs { margin-top: 14px; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .14); }
.story.is-live .story__pill .size-specs__cell { background: rgba(255, 255, 255, .06); padding: 12px 16px; }
.story.is-live .story__pill .size-specs dt { color: rgba(255, 255, 255, .55); }
.story.is-live .story__pill .size-specs dd { color: #fff; font-size: 1.15rem; }
.story.is-live .story__pill .size-specs dd span { color: rgba(255, 255, 255, .6); }
.story.is-live .story__cta { margin-top: 16px; }
/* Clouds: labels and products placed around where the box rests during their scene */
.story.is-live .story__cloud { position: absolute; left: calc(50% + var(--cx, 0px)); top: calc(50% + var(--cy, 0px)); width: 0; height: 0; display: block; perspective: 1400px; --reveal: 0; }
.story.is-live .story__cloud.is-out { visibility: hidden; }
.story.is-live .story__cloud li { position: absolute; left: 0; top: 0; --t: clamp(0, calc((var(--reveal) * 1.5 - var(--d, 0)) / .45), 1); opacity: var(--t); transform: translate3d(calc(var(--x, 0px) * var(--cs) * var(--t) - 50%), calc(var(--y, 0px) * var(--cs) * var(--t) + var(--mouth, 0px) * (1 - var(--t)) - 50%), var(--z, 0px)); }
.story.is-live .story__cloud--brands li { font-size: clamp(1.15rem, 1.5vw, 1.5rem); transform: translate3d(calc(var(--x, 0px) * var(--cs) - 50%), calc(var(--y, 0px) * var(--cs) - 50% + (1 - var(--t)) * 16px), var(--z, 0px)); } /* names settle in place; only products and chips burst from the mouth */
.story.is-live .story__cloud--brands li:nth-child(1) { --x: -350px; --y: 0px; --z: 40px; --d: 0; }
.story.is-live .story__cloud--brands li:nth-child(2) { --x: 350px; --y: 10px; --z: -30px; --d: .07; }
.story.is-live .story__cloud--brands li:nth-child(3) { --x: -320px; --y: 125px; --z: -80px; --d: .14; }
.story.is-live .story__cloud--brands li:nth-child(4) { --x: 320px; --y: 130px; --z: 60px; --d: .21; }
.story.is-live .story__cloud--brands li:nth-child(5) { --x: -200px; --y: 215px; --z: 20px; --d: .28; }
.story.is-live .story__cloud--brands li:nth-child(6) { --x: 200px; --y: 215px; --z: -60px; --d: .35; }
.story.is-live .story__cloud--brands li:nth-child(7) { --x: -70px; --y: 250px; --z: 90px; --d: .42; }
.story.is-live .story__cloud--brands li:nth-child(8) { --x: 70px; --y: 250px; --z: -40px; --d: .49; }
.story.is-live .story__cloud--brands li:nth-child(9) { --x: -360px; --y: 25px; --z: 0px; --d: .56; }
.story.is-live .story__cloud--brands li:nth-child(10) { --x: 360px; --y: 30px; --z: 0px; --d: .63; }
.story.is-live .story__cloud--brands li:nth-child(n+11):not(.story__cloud-note) { display: none; }
.story.is-live .story__cloud--brands li.story__cloud-note { --x: 0px; --y: 290px; --z: 0px; --d: .6; font-size: 1rem; }
.story.is-live .story__cloud--items li { width: calc(var(--iw, 120px) * var(--cs)); transform: translate3d(calc(var(--x, 0px) * var(--cs) * var(--t) - 50%), calc(var(--y, 0px) * var(--cs) * var(--t) + var(--mouth, 0px) * (1 - var(--t)) - (1 - var(--t)) * var(--t) * 160px - 50%), var(--z, 0px)) rotate(calc(var(--r, 0deg) * var(--t))) scale(calc(.5 + .5 * var(--t))); }
.story.is-live .story__cloud--items li img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 20px rgba(20, 33, 61, .3)); }
.story.is-live .story__cloud--items li:nth-child(1) { --x: -215px; --y: -295px; --z: 40px; --d: .05; --r: -12deg; --iw: 150px; }
.story.is-live .story__cloud--items li:nth-child(2) { --x: -45px; --y: -325px; --z: 80px; --d: .12; --r: 5deg; --iw: 160px; }
.story.is-live .story__cloud--items li:nth-child(3) { --x: 130px; --y: -310px; --z: 30px; --d: .19; --r: 14deg; --iw: 132px; }
.story.is-live .story__cloud--items li:nth-child(4) { --x: 275px; --y: -245px; --z: -20px; --d: .26; --r: 18deg; --iw: 170px; }
.story.is-live .story__cloud--items li:nth-child(5) { --x: -335px; --y: -190px; --z: -40px; --d: .33; --r: -18deg; --iw: 136px; }
.story.is-live .story__cloud--items li:nth-child(6) { --x: 330px; --y: -125px; --z: 60px; --d: .4; --r: 20deg; --iw: 124px; }
.story.is-live .story__cloud--cats li:nth-child(1) { --x: -300px; --y: -150px; --d: 0; }
.story.is-live .story__cloud--cats li:nth-child(2) { --x: 300px; --y: -150px; --d: .07; }
.story.is-live .story__cloud--cats li:nth-child(3) { --x: -330px; --y: -50px; --d: .14; }
.story.is-live .story__cloud--cats li:nth-child(4) { --x: 330px; --y: -50px; --d: .21; }
.story.is-live .story__cloud--cats li:nth-child(5) { --x: -320px; --y: 50px; --d: .28; }
.story.is-live .story__cloud--cats li:nth-child(6) { --x: 320px; --y: 50px; --d: .35; }
.story.is-live .story__cloud--cats li:nth-child(7) { --x: -295px; --y: 150px; --d: .42; }
.story.is-live .story__cloud--cats li:nth-child(8) { --x: 295px; --y: 150px; --d: .49; }
.story.is-live .story__cloud--cats li:nth-child(n+9) { display: none; }
.story.is-live .story__cloud--cats li { width: max-content; } /* an absolute li in the 0-wide cloud would shrink to its longest word */
.story.is-live .story__cat { max-width: 262px; white-space: normal; text-align: left; line-height: 1.25; }
@media (max-width: 1300px) { .story { --cs: .86; } }
@media (max-width: 1200px) { .story.is-live .story__cat { max-width: 210px; } }
@media (max-width: 1100px) { .story { --bw: 250px; --bh: 196px; --bd: 184px; --cs: .74; } .story.is-live .story__pills { width: 32%; } .story.is-live .story__pill-btn { font-size: .95rem; } .story.is-live .story__pill.is-open .story__pill-btn { font-size: 1rem; } .story.is-live .story__pill-text { font-size: .93rem; } }
@media (max-height: 780px) and (min-width: 1025px) { .story { --bw: 250px; --bh: 196px; --bd: 184px; --cs: .8; } .story.is-live .story__pills { top: 12%; } .story.is-live .story__pill-btn { min-height: 46px; } .story.is-live .story__pill .size-specs__cell { padding: 9px 14px; } }
/* Narrow screens (tablets and phones): the box high up, a row of pills with the open card under it at the
bottom, the clouds as wrapped rows between them. Must stay after the desktop rules. The card is positioned
against .story__pills, not the scrolling row, so it neither scrolls nor gets clipped with the row. */
@media (max-width: 1024px) {
.story { --bw: 230px; --bh: 180px; --bd: 168px; --cs: 1; --pill-body: 150px; }
.story.is-live { height: 360vh; }
.story.is-live .story__pills { left: var(--gutter); right: var(--gutter); top: auto; bottom: 14px; width: auto; }
.story.is-live .story__pill-list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 calc(var(--pill-body) + 10px); transition: padding .3s var(--ease); } /* --pill-body: the open card's real height, measured by the script */
.story.is-live .story__pill-list::-webkit-scrollbar { display: none; }
.story.is-live .story__pill { flex: none; position: static; }
.story.is-live .story__pill.is-open { min-width: 0; border-radius: 28px; box-shadow: none; }
.story.is-live .story__pill-btn, .story.is-live .story__pill.is-open .story__pill-btn { min-height: 44px; padding: 0 18px 0 14px; font-size: .95rem; cursor: pointer; }
.story.is-live .story__pill-ico, .story.is-live .story__pill.is-open .story__pill-ico { width: 18px; height: 18px; opacity: .9; margin-right: 0; }
.story.is-live .story__pill-body, .story.is-live .story__pill.is-open .story__pill-body { position: absolute; left: 0; right: 0; top: 56px; display: block; contain: none; background: var(--navy-900); color: #fff; border-radius: 18px; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }
.story.is-live .story__pill.is-open .story__pill-body { opacity: 1; visibility: visible; transition: opacity .3s var(--ease), visibility 0s; }
.story.is-live .story__pill-inner, .story.is-live .story__pill.is-open .story__pill-inner { padding: 16px 18px; opacity: 1; transition: none; }
.story.is-live .story__pill-inner::after { display: none; }
.story.is-live .story__pill-text { margin: 0; font-size: .93rem; }
.story.is-live .story__pill .size-specs { margin-top: 0; }
.story.is-live .story__pill .size-specs__cell { padding: 10px 14px; }
.story.is-live .story__pill .size-specs dd { font-size: 1.05rem; }
.story.is-live .story__cta { width: 100%; margin-top: 12px; }
.story.is-live .story__cloud { left: var(--gutter); right: var(--gutter); top: 44%; width: auto; height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; perspective: none; }
.story.is-live .story__cloud li { position: static; transform: translate3d(0, calc((1 - var(--t)) * 10px), 0); }
.story.is-live .story__cloud--cats { gap: 8px; }
.story.is-live .story__cloud--cats li { flex: 0 0 calc(33.333% - 6px); width: auto; }
.story.is-live .story__cloud--cats .story__cat { width: 100%; max-width: none; line-height: 1.2; }
.story.is-live .story__cloud--items { left: calc(50% + var(--cx, 0px)); right: auto; top: calc(50% + var(--cy, 0px)); width: 0; height: 0; display: block; }
.story.is-live .story__cloud--items li { position: absolute; transform: translate3d(calc(var(--x, 0px) * var(--t) - 50%), calc(var(--y, 0px) * var(--t) + var(--mouth, 0px) * (1 - var(--t)) - (1 - var(--t)) * var(--t) * 90px - 50%), 0) rotate(calc(var(--r, 0deg) * var(--t))) scale(calc(.5 + .5 * var(--t))); }
.story.is-live .story__cloud--items li:nth-child(1) { --x: -150px; --y: -150px; --iw: 92px; }
.story.is-live .story__cloud--items li:nth-child(2) { --x: -40px; --y: -185px; --iw: 100px; }
.story.is-live .story__cloud--items li:nth-child(3) { --x: 75px; --y: -175px; --iw: 86px; }
.story.is-live .story__cloud--items li:nth-child(4) { --x: 175px; --y: -135px; --iw: 96px; }
.story.is-live .story__cloud--items li:nth-child(n+5) { display: none; }
/* Tall tablets: keep the composition in a centred band instead of stretching it over the whole screen. */
.story.is-live .story__stage { max-height: 860px; top: 50%; transform: translateY(-50%); }
}
@media (max-width: 1024px) and (max-height: 820px) {
.story { --bw: 176px; --bh: 138px; --bd: 128px; }
.story.is-live .story__cloud { top: 43%; }
}
@media (max-width: 767px) {
.story { --bw: 176px; --bh: 138px; --bd: 128px; padding: 48px 0; }
.story__band .section-heading { margin-bottom: 20px; }
.story__visual { height: 300px; }
.story__pill { padding: 16px 18px; border-radius: 16px; }
.story__pill-btn { font-size: 1rem; }
.story__pill-text { font-size: .95rem; }
.story__specs .size-specs__cell { padding: 10px 12px; }
.story__specs dd { font-size: 1.05rem; }
.story__cloud--brands li { font-size: 1.1rem; }
.story__cat { font-size: .82rem; padding: 4px 12px 4px 4px; }
.story__cat-icon { width: 26px; height: 26px; border-radius: 7px; }
.story.is-live { height: 340vh; }
.story.is-live .story__pill-btn, .story.is-live .story__pill.is-open .story__pill-btn { min-height: 40px; padding: 0 14px 0 12px; font-size: .88rem; }
.story.is-live .story__pill-body, .story.is-live .story__pill.is-open .story__pill-body { top: 52px; }
.story.is-live .story__cloud { top: 41%; gap: 8px 16px; }
.story.is-live .story__cloud--cats { gap: 8px; }
.story.is-live .story__cloud--cats li { flex: 0 0 calc(50% - 4px); }
.story.is-live .story__cloud--items li:nth-child(1) { --x: -105px; --y: -108px; --iw: 66px; }
.story.is-live .story__cloud--items li:nth-child(2) { --x: -28px; --y: -134px; --iw: 74px; }
.story.is-live .story__cloud--items li:nth-child(3) { --x: 52px; --y: -126px; --iw: 62px; }
.story.is-live .story__cloud--items li:nth-child(4) { --x: 124px; --y: -96px; --iw: 68px; }
}
@media (max-width: 767px) and (max-height: 700px) {
.story { --bw: 150px; --bh: 118px; --bd: 110px; --story-box-y: -0.27; }
.story.is-live .story__cloud { top: 32%; }
.story.is-live .story__cloud--cats { gap: 6px; }
.story.is-live .story__cat { font-size: .76rem; padding: 3px 10px 3px 3px; }
.story.is-live .story__cat-icon { width: 24px; height: 24px; }
.story.is-live .story__cloud--brands li { font-size: 1rem; }
.story.is-live .story__pill-text { font-size: .88rem; }
.story.is-live .story__pill-inner, .story.is-live .story__pill.is-open .story__pill-inner { padding: 12px 14px; }
.story.is-live .story__pills { bottom: 10px; }
}
/* ==========================================================================
Pallet explorer (template-parts/home/explorer.php): Apple's product explorer, whole. One colour from
the headline to the end of the stage: the site's navy (`--xp-bg`), the same as the hero and the contact
card. Base rules = the static layout without JavaScript: every card open under its pill, the first photo
showing. `.xp.is-ready` (set by explorer.js)
= the interactive one. Desktop: a column of pills on the left, the photo on the right; a click makes the
pill's box (`.xp__box`, which the script grows and shrinks inline, clipping inside) into a card while
the label fades out, the copy fades in with a rise after 0.28 s, the ↑↓ paddles fade in beside it and
the photo crossfades; ✕ at the top right. Narrow (<=1024): photo, then a horizontal row of pills;
`.xp.is-open` turns the stage into a fixed full-screen overlay that fades in, with the card rising at the
bottom, ‹ › and ✕. The photographs were shot on near-black. `mix-blend-mode: lighten` lifts that backdrop
to the block's navy (the figure carries the same colour under the photo, because a figure that fades and
scales is a stacking context of its own and the photo can only blend with what is inside it), and on
desktop a soft mask fades what is lighter than the navy at the photo's left and bottom: the floor's
reflections. So a photo has no box of its own. A backdrop must be darker than the navy everywhere: the
studio light in the corner of some shots was taken out of the files (tools/explorer-backdrop.py).
Timings follow apple.com's measured ones.
========================================================================== */
.xp { --xp-bg: var(--navy-900); --xp-pill: rgba(255, 255, 255, .08); --xp-pill-hover: rgba(255, 255, 255, .14); --xp-card: rgba(255, 255, 255, .1); --xp-text: #F5F5F7; --xp-muted: rgba(255, 255, 255, .78); position: relative; background: var(--xp-bg); color: var(--xp-text); }
.xp__band { padding: clamp(48px, 6vw, 88px) 0 0; }
.xp__band .section-heading { max-width: 780px; margin: 0; }
.xp__band .section-title { color: #fff; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; }
.xp__band .section-lead { color: var(--xp-muted); }
.xp__stage { position: relative; padding: clamp(28px, 3.4vw, 48px) 0 clamp(48px, 6vw, 80px); }
.xp__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.xp__controls { position: relative; }
.xp__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.xp__item { position: relative; }
.xp__box { position: relative; background: var(--xp-pill); border-radius: 28px; }
.xp__head { margin: 0; font: inherit; color: inherit; }
.xp__open { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 32px 0 14px; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--xp-text); text-align: left; cursor: default; }
.xp__ico { flex: none; width: 24px; height: 24px; display: none; }
.xp__panel { display: grid; grid-template-rows: 1fr; outline: none; }
.xp__panel-in { min-height: 0; overflow: hidden; padding: 0 28px 26px; }
.xp__text { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--xp-muted); }
.xp__text strong { font-weight: 600; color: var(--xp-text); }
.xp:not(.is-ready) .xp__text strong { display: none; } /* the pill above already names the step */
.xp__specs { margin-top: 14px; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .14); }
.xp__specs .size-specs__cell { background: rgba(255, 255, 255, .06); padding: 12px 16px; }
.xp__specs dt { color: rgba(255, 255, 255, .55); }
.xp__specs dd { color: #fff; font-size: 1.15rem; }
.xp__specs dd span { color: rgba(255, 255, 255, .6); }
.xp__cta { margin-top: 16px; }
.xp__nav, .xp__close { display: none; }
.xp__media { position: relative; aspect-ratio: 4 / 3; }
.xp__figure { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; background: var(--xp-bg); }
.xp__figure.is-current { opacity: 1; visibility: visible; }
.xp__figure picture, .xp__figure img { display: block; width: 100%; height: 100%; }
.xp__figure img { object-fit: cover; object-position: 50% 50%; mix-blend-mode: lighten; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%), linear-gradient(0deg, transparent, #000 14%); mask-image: linear-gradient(90deg, transparent, #000 10%), linear-gradient(0deg, transparent, #000 14%); -webkit-mask-composite: source-in; mask-composite: intersect; } /* the floor and whatever stands at the left edge fade out; the top and the right edge are backdrop in every photo */
/* The brands photo carries our logo row, the categories photo the category chips (real links) */
.xp__logos, .xp__chips { position: absolute; left: 6%; right: 6%; bottom: 7%; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 30px; }
.xp__logo { display: block; height: calc(var(--h, 28px) * .88); aspect-ratio: var(--ratio, 4); background: var(--logo) no-repeat center / contain; filter: brightness(0) invert(1); opacity: .92; }
.xp__logo-item--text { font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.xp__logo-item--note { font-size: .95rem; font-weight: 500; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.xp__chips { gap: 10px; }
.xp__chip { display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border-radius: 999px; background: #fff; border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .6); font-weight: 600; font-size: .88rem; color: var(--ink); white-space: nowrap; }
.xp__chip:hover { color: var(--ink); background: var(--bg); }
.xp__chip-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--pl-box-top, var(--bg-2)); color: var(--cat-accent, var(--navy-900)); flex: none; }
.xp__paddle-h { display: none; }
.xp__paddle-v--up { transform: rotate(180deg); }
@keyframes xp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes xp-rise { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes xp-nav-in { from { opacity: 0; transform: translate(-6px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
@keyframes xp-nav-out { from { opacity: 1; transform: translate(0, -50%); } to { opacity: 0; transform: translate(-6px, -50%); } }
/* Interactive: desktop (the pill column, the photo beside it). The box's size is animated by the script;
the CSS only sets the two resting states and fades the label, the copy and the paddles. */
.xp.is-ready .xp__grid { grid-template-columns: minmax(280px, 36%) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.xp.is-ready .xp__controls { padding-left: 56px; } /* room for the paddles beside the open card */
.xp.is-ready .xp__list { justify-items: start; }
.xp.is-ready .xp__item { width: max-content; max-width: 100%; min-width: 0; }
.xp.is-ready .xp__box { width: max-content; max-width: 100%; transition: background-color .25s linear, transform .15s var(--ease); }
.xp.is-ready .xp__item:hover .xp__box { background: var(--xp-pill-hover); }
.xp.is-ready .xp__item:not(.is-open) .xp__box:active { transform: scale(.97); }
.xp.is-ready .xp__box:has(:focus-visible) { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }
.xp.is-ready .xp__open { cursor: pointer; opacity: 1; transition: opacity .35s ease-in-out .3s, visibility 0s; }
.xp.is-ready .xp__open:focus-visible { outline: none; }
.xp.is-ready .xp__ico { display: block; }
.xp.is-ready .xp__panel { grid-template-rows: 0fr; contain: inline-size; visibility: hidden; }
.xp.is-ready .xp__panel-in { padding: 0 28px; opacity: 0; transform: translateY(28px); transition: opacity .2s ease-out, transform 0s .2s; }
.xp.is-ready .xp__panel-in::before, .xp.is-ready .xp__panel-in::after { content: ""; display: block; height: 26px; }
.xp.is-ready .xp__item.is-open { min-width: 100%; }
.xp.is-ready .xp__item.is-open .xp__box, .xp.is-ready .xp__item.is-closing .xp__box { background: var(--xp-card); }
.xp.is-ready .xp__item.is-open .xp__box { width: 100%; max-width: none; }
.xp.is-ready .xp__item.is-animating .xp__box { overflow: hidden; max-width: none; transition: background-color .25s linear; } /* the script writes the transform: no transition on it */
.xp.is-ready .xp__item.is-open .xp__open, .xp.is-ready .xp__item.is-closing .xp__open { position: absolute; top: 0; left: 0; white-space: nowrap; }
.xp.is-ready .xp__item.is-open .xp__open { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease-out, visibility 0s .3s; }
.xp.is-ready .xp__item.is-open .xp__panel, .xp.is-ready .xp__item.is-closing .xp__panel { grid-template-rows: 1fr; visibility: visible; }
.xp.is-ready .xp__item.is-open .xp__panel-in { opacity: 1; transform: none; transition: opacity .45s ease-in-out .28s, transform .45s ease-in-out .28s; }
.xp.is-ready .xp__nav { position: absolute; left: -56px; top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 10px; }
.xp.is-ready .xp__item.is-open .xp__nav { display: flex; animation: xp-nav-in .35s ease-out .3s both; }
.xp.is-ready .xp__item.is-closing .xp__nav { display: flex; animation: xp-nav-out .15s ease-out both; }
.xp__paddle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; transition: background-color .2s var(--ease); }
.xp__paddle:hover { background: rgba(255, 255, 255, .22); }
.xp__paddle:disabled { opacity: .3; cursor: default; }
.xp__paddle:focus-visible { outline: 3px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.xp.is-ready .xp__close { position: absolute; top: 20px; right: var(--gutter); z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #111; opacity: 0; visibility: hidden; transform: scale(.9); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s; }
.xp.is-ready.is-open .xp__close { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s; }
.xp.is-ready .xp__media { max-height: 700px; }
.xp.is-ready .xp__figure { transform: scale(1.03); transition: opacity .3s ease-out, transform .7s var(--ease), visibility 0s .3s; will-change: opacity, transform; }
.xp.is-ready .xp__figure.is-current { transform: none; transition: opacity .3s ease-out .08s, transform .7s var(--ease) .08s, visibility 0s; }
@media (max-width: 1300px) { .xp.is-ready .xp__grid { grid-template-columns: minmax(260px, 38%) minmax(0, 1fr); } .xp__logo-item--text { font-size: 1.15rem; } }
/* Narrow screens (Apple's small breakpoint, measured on apple.com/iphone-18-pro at 390px). The stage
is the photo: 640px tall (720 on tablets, less on short screens), full width, with the row of pills
over its foot. A tap grows the tapped pill from its place in the row into a card at the foot (the
script animates the box; it is absolutely positioned against the controls, so it escapes the row's
scroll clipping, and its keeps the slot) while the other pills slide off to the sides and fade;
✕ scales in at the stage's top right (sticky under the header), ‹ › sit at the screen edges level with
the card, and swipes slide the cards sideways (keyframes keyed off data-motion). ✕ shrinks the card back
into its pill, centred in the row, while the others slide back in. No overlay, no scroll lock. */
@media (max-width: 1024px) {
.xp { --xp-card-m: rgba(54, 66, 94, .84); --xp-slide: cubic-bezier(.22, .61, .36, 1); } /* the card over the photo: the block's navy, a step lighter */
.xp__band { padding-bottom: 24px; }
.xp.is-ready .xp__stage { height: min(720px, calc(100vh - var(--xp-top, 124px))); padding: 0; overflow: clip; }
@supports (height: 100svh) { .xp.is-ready .xp__stage { height: min(720px, calc(100svh - var(--xp-top, 124px))); } }
.xp.is-ready .xp__grid { position: static; display: block; max-width: none; padding: 0; }
.xp.is-ready .xp__media { position: absolute; inset: 0; z-index: 1; aspect-ratio: auto; max-height: none; }
/* the whole photo, a size smaller, standing just above the row of pills (the pallet filled the stage and
read as too big, 2026-09-30); its foot fades out before the pills, its backdrop is the block's navy */
.xp.is-ready .xp__figure img { object-fit: contain; object-position: 50% 100%; padding: 22px 7% 84px; -webkit-mask-image: linear-gradient(0deg, transparent 84px, #000 150px); mask-image: linear-gradient(0deg, transparent 84px, #000 150px); }
/* the controls: the one positioned ancestor, so an absolute card and the paddles measure from here */
.xp.is-ready .xp__controls { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 2; padding: 0; margin: 0; min-width: 0; }
.xp.is-ready .xp__list { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 20px; }
.xp.is-ready .xp__list::-webkit-scrollbar { display: none; }
.xp.is-ready.is-open .xp__list { overflow-x: hidden; } /* keeps its scroll position, but no dragging under the card */
.xp.is-ready .xp__item, .xp.is-ready .xp__item.is-open { position: static; flex: none; min-width: 0; width: auto; max-width: none; }
.xp.is-ready .xp__box { background: rgba(255, 255, 255, .12); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: background-color .25s linear, transform .5s var(--xp-slide), opacity .3s ease-out; }
.xp.is-ready .xp__item:hover .xp__box { background: rgba(255, 255, 255, .12); }
.xp.is-ready .xp__item:not(.is-open) .xp__box:active { transform: none; }
.xp.is-ready .xp__item.is-animating .xp__box { transition: background-color .25s linear, opacity .3s ease-out; } /* the script writes the transform */
.xp.is-ready .xp__nav { display: none; } /* the panel stays in the DOM flow, collapsed, so its copy can fade in like on desktop */
/* the neighbours leave to the sides while a card is open */
.xp.is-ready .xp__item.is-before .xp__box { transform: translateX(-120vw); opacity: 0; pointer-events: none; }
.xp.is-ready .xp__item.is-after .xp__box { transform: translateX(120vw); opacity: 0; pointer-events: none; }
/* the card: an absolute box at the foot, centred, its holding the pill's slot in the row */
.xp.is-ready .xp__item.is-open .xp__box, .xp.is-ready .xp__item.is-closing .xp__box { position: absolute; left: max(44px, calc(50% - 280px)); bottom: 0; width: min(calc(100% - 88px), 560px); max-width: none; background: var(--xp-card-m); opacity: 1; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8); }
.xp.is-ready .xp__item.is-open .xp__box { z-index: 2; }
.xp.is-ready .xp__item.is-closing .xp__box { z-index: 1; }
.xp.is-ready .xp__item.is-open .xp__panel, .xp.is-ready .xp__item.is-closing .xp__panel { display: grid; grid-template-rows: 1fr; visibility: visible; }
.xp.is-ready .xp__panel-in { padding: 0 24px; transform: translateY(24px); }
.xp.is-ready .xp__panel-in::before, .xp.is-ready .xp__panel-in::after { height: 24px; }
.xp.is-ready .xp__text { font-size: 1.0625rem; line-height: 1.47; }
.xp.is-ready .xp__specs { margin-top: 12px; }
.xp.is-ready .xp__specs .size-specs__cell { padding: 10px 14px; }
.xp.is-ready .xp__specs dd { font-size: 1.05rem; }
.xp.is-ready .xp__cta { width: 100%; margin-top: 14px; padding: 12px 12px; font-size: .92rem; }
/* ‹ › at the screen edges, level with the card's middle (the script publishes the card's height) */
.xp.is-ready .xp__item.is-open .xp__nav { display: block; position: static; transform: none; animation: none; }
.xp.is-ready .xp__paddle { position: absolute; top: auto; bottom: calc(var(--xp-card, 150px) / 2 - 32px); width: 64px; height: 64px; margin: 0; z-index: 3; background: rgba(54, 66, 94, .94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.xp.is-ready .xp__paddle--prev { left: -32px; padding-left: 26px; }
.xp.is-ready .xp__paddle--next { right: -32px; padding-right: 26px; }
.xp.is-ready .xp__paddle-v { display: none; }
.xp.is-ready .xp__paddle-h { display: block; }
.xp[data-motion="open"] .xp__item.is-open .xp__paddle { animation: xp-fade .3s ease-out .3s both; }
/* ✕: in the stage's flow at its top right, sticky under the header, scaling in from nothing like Apple's */
.xp.is-ready .xp__close { position: sticky; top: calc(var(--xp-top, 124px) + 16px); right: auto; z-index: 3; display: flex; width: 36px; height: 36px; margin: 16px 16px 0 auto; background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transform: scale(0); transition: opacity .2s ease-out, transform .3s ease-in, visibility 0s .3s; }
.xp.is-ready.is-open .xp__close { transform: none; transition: opacity .2s ease-out, transform .35s cubic-bezier(.34, 1.56, .64, 1), visibility 0s; }
/* the slides between cards */
.xp[data-motion="next"] .xp__item.is-open .xp__box { animation: xp-in-right .45s var(--xp-slide) both; }
.xp[data-motion="next"] .xp__item.is-closing .xp__box { animation: xp-out-left .45s var(--xp-slide) both; }
.xp[data-motion="prev"] .xp__item.is-open .xp__box { animation: xp-in-left .45s var(--xp-slide) both; }
.xp[data-motion="prev"] .xp__item.is-closing .xp__box { animation: xp-out-right .45s var(--xp-slide) both; }
/* the logo and chip rows sit just above the card, as scrolling rows; gone the moment the card closes */
.xp__logos, .xp__chips { gap: 10px 20px; }
.xp__chips { left: 0; right: 0; padding: 0 20px; gap: 8px; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.xp__chips::-webkit-scrollbar { display: none; }
.xp__chips li { flex: none; }
.xp__logo { height: calc(var(--h, 28px) * .7); }
.xp__logo-item--text { font-size: 1.05rem; }
.xp__chip { font-size: .8rem; padding: 4px 11px 4px 4px; }
.xp__chip-icon { width: 26px; height: 26px; border-radius: 7px; }
.xp.is-ready:not(.is-open) .xp__logos, .xp.is-ready:not(.is-open) .xp__chips { opacity: 0; }
.xp.is-ready.is-open .xp__logos, .xp.is-ready.is-open .xp__chips { top: auto; bottom: calc(var(--xp-card, 200px) + 40px); left: 20px; right: 20px; animation: xp-fade .4s ease-out .25s both; }
.xp.is-ready.is-open .xp__chips { left: 0; right: 0; }
/* the logo row on narrow screens: compact, just above the card, on a soft scrim so it reads over the products' reflections */
.xp.is-ready.is-open .xp__logos { bottom: calc(var(--xp-card, 200px) + 14px); left: 0; right: 0; padding: 30px 20px 10px; gap: 8px 16px; background: linear-gradient(180deg, rgba(20, 33, 61, 0), rgba(20, 33, 61, .78) 45%, rgba(20, 33, 61, .78)); }
.xp.is-ready.is-open .xp__logo { height: calc(var(--h, 28px) * .6); }
.xp.is-ready.is-open .xp__logo-item--text { font-size: .95rem; }
.xp.is-ready.is-open .xp__logo-item--note { font-size: .85rem; }
}
@keyframes xp-in-right { from { transform: translateX(calc(100% + 60px)); } to { transform: none; } }
@keyframes xp-in-left { from { transform: translateX(calc(-100% - 60px)); } to { transform: none; } }
@keyframes xp-out-left { from { transform: none; } to { transform: translateX(calc(-100% - 60px)); } }
@keyframes xp-out-right { from { transform: none; } to { transform: translateX(calc(100% + 60px)); } }
@media (max-width: 767px) {
.xp__band { padding: 44px 0 28px; }
.xp__media { aspect-ratio: 4 / 5; }
.xp__stage { padding: 24px 0 40px; }
.xp.is-ready .xp__stage { height: min(640px, calc(100vh - var(--xp-top, 123px))); }
@supports (height: 100svh) { .xp.is-ready .xp__stage { height: min(640px, calc(100svh - var(--xp-top, 123px))); } }
.xp.is-ready .xp__open { min-height: 48px; padding: 0 22px 0 12px; font-size: .95rem; gap: 10px; }
.xp.is-ready .xp__ico { width: 20px; height: 20px; }
.xp:not(.is-ready) .xp__open { font-size: 1rem; }
.xp:not(.is-ready) .xp__panel-in { padding: 0 20px 20px; }
.xp.is-ready .xp__item.is-open .xp__panel-in, .xp.is-ready .xp__item.is-closing .xp__panel-in { padding: 0 20px; }
.xp.is-ready .xp__panel-in::before, .xp.is-ready .xp__panel-in::after { height: 20px; }
.xp.is-ready .xp__text { font-size: 1rem; }
}
/* Short phones: a tighter card, so the photo keeps its subject above it */
@media (max-width: 767px) and (max-height: 700px) {
.xp.is-ready .xp__text { font-size: .95rem; line-height: 1.45; }
.xp.is-ready .xp__panel-in::before, .xp.is-ready .xp__panel-in::after { height: 16px; }
.xp.is-ready .xp__specs { margin-top: 10px; }
.xp.is-ready .xp__specs .size-specs__cell { padding: 8px 12px; }
.xp.is-ready .xp__specs dd { font-size: .98rem; }
.xp.is-ready .xp__cta { margin-top: 10px; padding: 10px 12px; }
}
/* Very narrow phones (360px): the card is 272px wide, so the figures step down a size and stay clear of the cell edges */
@media (max-width: 380px) {
.xp.is-ready .xp__specs .size-specs__cell { padding-left: 10px; padding-right: 10px; }
.xp.is-ready .xp__specs dd { font-size: .95rem; }
.xp.is-ready .xp__specs dd span { margin-left: 3px; font-size: .72rem; }
}