/* Hidrosting Trust — commerce components, motion and detail polish (loaded after style.css) */
:root {
  --ease: cubic-bezier(.2, .8, .2, 1);
  --g-blue: #4285f4;
  --g-red: #ea4335;
  --g-yellow: #fbbc05;
  --g-green: #34a853;
  --star: #fbbc04;
  --ok: #1f8a46;
  --shadow-lg: 0 24px 60px rgba(10, 16, 37, .16);
}
textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.nav-cta { display: none; }
::selection { background: var(--red); color: var(--white); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ---------- Header polish ---------- */
.site-header { transition: box-shadow .25s, border-color .25s; }
.site-header.is-scrolled { border-bottom-color: transparent; box-shadow: 0 8px 30px rgba(10, 16, 37, .08); }
.main-nav a.nav-link { position: relative; }
.main-nav > .nav-item > a.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.main-nav > .nav-item > a.nav-link:hover::after, .main-nav > .nav-item > a.nav-link.is-active::after { transform: scaleX(1); }
.cart-count { transition: transform .2s; }
.cart-count.is-bump { animation: bump .5s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.55); } 100% { transform: scale(1); } }
.icon-btn[data-cart-open].is-bump { animation: shake .5s var(--ease); }
@keyframes shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 60% { transform: rotate(9deg); } }

/* ---------- Buttons: arrow nudge + shine ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn .icon { transition: transform .25s var(--ease); }
.btn:hover .icon { transform: translateX(4px); }
.btn-red::before { content: ""; position: absolute; inset: 0 auto 0 -60%; z-index: -1; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-20deg); transition: left .6s var(--ease); }
.btn-red:hover::before { left: 120%; }
.btn[disabled] { cursor: progress; }
.btn .spinner, .add-btn .spinner { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: var(--white); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn.is-loading, .add-btn.is-loading { pointer-events: none; }
.btn.is-done, .add-btn.is-done { background: var(--ok); border-color: var(--ok); }
.btn.is-done .icon, .add-btn.is-done .icon { animation: pop .4s var(--ease); }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }

/* ---------- Hero: no overlapping diacritics, staged entrance ---------- */
.hero h1 { font-size: clamp(48px, 5.4vw, 84px); line-height: 1.12; margin: 20px 0 20px; }
.hero-copy { max-width: 600px; }
.hero h1 .line { display: block; overflow: hidden; padding: .06em 0 .1em; margin: -.06em 0 -.1em; }
.hero h1 .line > span { display: block; }
.hero h1 .red { display: block; }
.hero-media img { transform-origin: 70% 40%; }
.hero-badge { position: absolute; right: var(--gutter); bottom: 34px; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; background: rgba(20, 21, 21, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .14); color: var(--white); }
.hero-badge .g-logo { width: 34px; height: 34px; padding: 6px; background: var(--white); border-radius: 50%; }
.hero-badge strong { display: flex; align-items: center; gap: 8px; font-family: var(--condensed); font-size: 24px; line-height: 1; }
.hero-badge:hover { border-color: rgba(255, 255, 255, .4); }
.trust-grid.trust-3 { grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.hero-badge small { color: rgba(255, 255, 255, .7); font-size: 12px; }
.hero-scroll { position: absolute; left: 50%; bottom: 18px; z-index: 2; width: 22px; height: 34px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 12px; transform: translateX(-50%); }
.hero-scroll::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--white); animation: scrollDot 1.6s var(--ease) infinite; }
@keyframes scrollDot { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

.js .hero .eyebrow { opacity: 0; animation: fadeUp .7s var(--ease) .1s forwards; }
.js .hero .eyebrow::after { transform: scaleX(0); transform-origin: left; animation: grow 1.1s var(--ease) .5s forwards; }
.js .hero h1 .line > span { transform: translateY(108%); animation: rise .95s var(--ease) forwards; }
.js .hero h1 .line:nth-child(1) > span { animation-delay: .2s; }
.js .hero h1 .line:nth-child(2) > span { animation-delay: .32s; }
.js .hero h1 .line:nth-child(3) > span { animation-delay: .44s; }
.js .hero .hero-lead { opacity: 0; animation: fadeUp .8s var(--ease) .75s forwards; }
.js .hero .hero-actions { opacity: 0; animation: fadeUp .8s var(--ease) .9s forwards; }
.js .hero-media img { animation: heroZoom 2.4s var(--ease) both; }
.js .hero-badge { opacity: 0; animation: fadeUp .8s var(--ease) 1.2s forwards; }
@keyframes rise { to { transform: none; } }
@keyframes grow { to { transform: scaleX(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes heroZoom { from { transform: scale(1.14); filter: brightness(.6); } to { transform: scale(1); filter: none; } }

/* ---------- Scroll reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="left"] { transform: translateX(-30px); }
.js [data-reveal="zoom"] { transform: scale(.96); }

/* ---------- Strip ---------- */
.strip-item { position: relative; transition: background .3s; }
.strip-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.strip-item:first-child::after { left: 0; }
.strip-item:hover::after { transform: scaleX(1); }
.strip-item:hover .strip-num { transform: translateY(-3px); }
.strip-num { transition: transform .3s var(--ease); }

/* ---------- Category cards ---------- */
.cat-card img { transition: transform .6s var(--ease); transform-origin: bottom right; }
.cat-card:hover img { transform: scale(1.06); }
.cat-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease); z-index: 2; }
.cat-card:hover::before { transform: scaleY(1); }
.cat-chip { position: relative; overflow: hidden; transition: color .2s, background .2s; }
.cat-chip:hover { background: var(--black); color: var(--white); }
.cat-chip:hover small { color: rgba(255, 255, 255, .6); }

/* ---------- Product cards ---------- */
.product-card { transition: box-shadow .35s var(--ease), border-color .35s, transform .35s var(--ease); }
.product-card:hover { transform: translateY(-4px); }
.product-media img { transition: transform .6s var(--ease); }
.product-card:hover .product-media img { transform: scale(1.07) rotate(-1.5deg); }
.quick-view { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; display: flex; justify-content: center; padding: 10px; background: var(--white); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: 0; transform: translateY(10px); transition: .3s var(--ease); }
.product-card:hover .quick-view { opacity: 1; transform: none; }
.quick-view:hover { color: var(--red); }
.add-btn { position: relative; overflow: hidden; }
.add-btn::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .25); transform: scale(0); border-radius: 50%; transition: transform .4s; }
.add-btn:active::after { transform: scale(2); transition: 0s; }
.price-old { margin-right: 6px; font-family: var(--body); font-size: 14px; font-weight: 400; color: var(--grey-light); text-decoration: line-through; }

/* ---------- Ticker ---------- */
.ticker { overflow: hidden; background: var(--red); color: var(--white); border-block: 1px solid rgba(0, 0, 0, .15); }
.ticker-track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-group { display: flex; align-items: center; }
.ticker-item { display: flex; align-items: center; gap: 28px; padding: 16px 0 16px 28px; font-family: var(--display); font-size: 30px; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.ticker-item svg { width: 18px; height: 22px; opacity: .85; }
.ticker-item svg path:first-child { fill: var(--white); }
.ticker-item svg path:last-child { fill: var(--red); }
.ticker-item.is-outline { color: var(--black); }
.ticker-item.is-outline svg path:first-child { fill: var(--black); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Counters strip in service band ---------- */
.service-band::before { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(217, 23, 26, .35), transparent); filter: blur(10px); pointer-events: none; }
.steps li { transition: padding-left .35s var(--ease), background .35s; }
.steps li:hover { padding-left: 14px; background: rgba(255, 255, 255, .03); }

/* ---------- Google reviews ---------- */
.g-logo { width: 22px; height: 22px; flex: none; }
.stars-g { display: inline-flex; gap: 2px; color: var(--star); }
.stars-g svg { width: 16px; height: 16px; }
.reviews-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; margin-bottom: 30px; padding: 24px 28px; background: var(--white); border: 1px solid var(--line); }
.g-summary { display: flex; align-items: center; gap: 16px; }
.g-summary .g-logo { width: 46px; height: 46px; }
.g-summary .g-title { font-family: "Roboto", sans-serif; font-size: 20px; font-weight: 500; color: #202124; }
.g-summary .g-title span { color: #5f6368; font-weight: 400; }
.g-score { display: flex; align-items: center; gap: 12px; }
.g-score b { font-family: "Roboto", sans-serif; font-size: 44px; font-weight: 400; line-height: 1; color: #202124; }
.g-score .stars-g svg { width: 22px; height: 22px; }
.g-score small { display: block; margin-top: 4px; color: #5f6368; font-size: 14px; }
.g-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.btn-google.is-primary { background: #1a73e8; border-color: #1a73e8; color: var(--white); }
.btn-google.is-primary:hover { background: #1765cc; }
.btn-google { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border: 1px solid #dadce0; border-radius: 22px; background: var(--white); color: #1a73e8; font-family: "Roboto", sans-serif; font-size: 14px; font-weight: 500; transition: background .2s, box-shadow .2s; }
.btn-google:hover { background: #f6fafe; box-shadow: 0 1px 3px rgba(60, 64, 67, .2); }
.btn-google svg { width: 18px; height: 18px; }
.reviews-slider { position: relative; }
.reviews-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.reviews-track::-webkit-scrollbar { display: none; }
.review { position: relative; display: flex; flex-direction: column; min-height: 230px; padding: 22px; background: var(--white); border: 1px solid #e3e3e3; border-radius: 12px; scroll-snap-align: start; font-family: "Roboto", sans-serif; transition: box-shadow .3s, transform .3s var(--ease); }
.review:hover { box-shadow: 0 1px 3px rgba(60, 64, 67, .2), 0 4px 12px rgba(60, 64, 67, .12); transform: translateY(-3px); }
.review header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-right: 28px; }
.review .avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; color: var(--white); font-size: 18px; font-weight: 500; }
.review h3 { margin: 0; font-size: 15px; font-weight: 500; color: #202124; line-height: 1.2; }
.review time { font-size: 12px; color: #70757a; }
.review > .g-logo { position: absolute; top: 22px; right: 20px; width: 20px; height: 20px; }
.review .stars-g { margin-bottom: 10px; }
.review p { margin: 0; font-size: 14px; line-height: 1.6; color: #3c4043; }
.review footer { margin-top: auto; padding-top: 14px; font-size: 12px; color: #70757a; display: flex; align-items: center; gap: 6px; }
.review footer svg { width: 14px; height: 14px; color: var(--g-blue); }
.slider-nav { display: flex; gap: 8px; }
.slider-nav button { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--ink); border-radius: 50%; background: var(--white); cursor: pointer; transition: background .2s, color .2s; }
.slider-nav button:hover { background: var(--ink); color: var(--white); }
.slider-nav button svg { width: 18px; height: 18px; }
.slider-nav button[data-dir="-1"] svg { transform: rotate(180deg); }
.reviews-note { margin: 16px 0 0; font-size: 13px; color: var(--grey); }

/* ---------- Toast v2 ---------- */
.toast-stack { position: fixed; right: 24px; bottom: 24px; z-index: 120; display: grid; gap: 10px; width: min(380px, calc(100% - 32px)); pointer-events: none; }
.toast2 { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 14px 16px; background: var(--black); color: var(--white); box-shadow: var(--shadow-lg); overflow: hidden; pointer-events: auto; animation: toastIn .45s var(--ease); }
.toast2.is-out { animation: toastOut .35s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px); } }
.toast2 img { width: 54px; height: 54px; object-fit: contain; padding: 4px; background: var(--white); }
.toast2 .toast-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ok); }
.toast2 .toast-ic svg { width: 18px; height: 18px; }
.toast2 .toast-ic.is-info { background: var(--red); }
.toast2 strong { display: flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #6ee49a; }
.toast2 strong svg { width: 14px; height: 14px; }
.toast2 p { margin: 2px 0 0; font-size: 15px; line-height: 1.3; }
.toast2 .toast-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.toast2 .toast-link { padding: 8px 12px; background: var(--red); color: var(--white); font-size: 13px; font-weight: 700; white-space: nowrap; }
.toast2 .toast-link:hover { background: var(--red-dark); }
.toast2 .toast-undo { border: 0; background: none; color: var(--white); font-weight: 700; text-decoration: underline; cursor: pointer; }
.toast2 .toast-x { display: grid; place-items: center; width: 24px; height: 24px; border: 0; background: none; color: rgba(255, 255, 255, .55); cursor: pointer; padding: 0; }
.toast2 .toast-x:hover { color: var(--white); }
.toast2 .toast-x svg { width: 14px; height: 14px; }
.toast2.is-info strong { color: #ffb4b0; }
.toast2.is-info .toast-actions { flex-direction: row-reverse; align-items: center; gap: 10px; }
.toast2 .toast-undo { padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .35); text-decoration: none; font-size: 13px; transition: background .2s, border-color .2s; }
.toast2 .toast-undo:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.toast2 .toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--red); transform-origin: left; animation: toastBar var(--t, 4s) linear forwards; }
.toast2:hover .toast-bar { animation-play-state: paused; }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.fly-img { position: fixed; z-index: 130; pointer-events: none; object-fit: contain; background: var(--white); border-radius: 50%; box-shadow: var(--shadow-lg); }

/* ---------- Drawer v2 ---------- */
.drawer-ship { padding: 16px 24px; background: var(--beige); border-bottom: 1px solid var(--line); font-size: 14px; }
.ship-bar { position: relative; height: 6px; margin-top: 9px; background: #e2ddd5; overflow: hidden; }
.ship-bar i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: linear-gradient(90deg, var(--red), var(--red-bright)); transition: width .6s var(--ease); }
.ship-bar.is-full i { background: var(--ok); }
.drawer-item.is-enter { animation: fadeUp .45s var(--ease) both; }
.drawer-ship .icon { color: var(--ok); vertical-align: -2px; }
.drawer-head small { font-weight: 400; }
.drawer-item .mini-qty { display: inline-flex; align-items: center; margin-top: 8px; border: 1px solid var(--line); }
.mini-qty button { width: 28px; height: 28px; border: 0; background: none; cursor: pointer; font-size: 16px; text-decoration: none; color: var(--ink); }
.mini-qty button:hover { color: var(--red); }
.mini-qty span { min-width: 26px; text-align: center; font-weight: 700; font-size: 14px; }
.drawer-item .line-price { font-family: var(--condensed); font-weight: 700; font-size: 19px; white-space: nowrap; text-align: right; }
.drawer-item .rm { display: block; margin-top: 6px; margin-left: auto; }
.drawer-foot .btn + .btn { margin-top: 10px; }
.drawer-empty > svg { display: block; width: 56px; height: 56px; margin: 0 auto 14px; color: #d8d2ca; }

/* ---------- Page head + steps (cart / checkout) ---------- */
.shop-head { background: linear-gradient(180deg, #fafafa, var(--white)); }
.shop-head .wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding-block: 6px 30px; flex-wrap: wrap; }
.shop-head .breadcrumb { padding: 0 0 6px; }
.shop-head h1 { position: relative; margin: 0; padding-bottom: 16px; font-family: var(--display); font-weight: 400; font-size: clamp(46px, 5vw, 76px); line-height: 1.1; }
.shop-head h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 4px; background: var(--red); }
.js .shop-head h1::after { transform: scaleX(0); transform-origin: left; animation: grow .9s var(--ease) .3s forwards; }
.shop-head .sub { margin: 14px 0 0; font-size: 19px; color: var(--grey); }
.steps-bar { display: flex; align-items: flex-start; margin: 0 0 6px; padding: 0; list-style: none; }
.steps-bar li { position: relative; display: grid; justify-items: center; gap: 8px; width: 130px; color: var(--grey); font-size: 15px; text-align: center; }
.steps-bar li + li::before { content: ""; position: absolute; top: 24px; right: calc(50% + 34px); width: calc(100% - 68px); height: 1px; background: #cfc9c1; }
.steps-bar b { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #cfc9c1; border-radius: 50%; background: var(--white); font-family: var(--condensed); font-weight: 700; font-size: 20px; color: var(--grey); }
.steps-bar a { display: contents; }
.steps-bar .is-done b { border-color: var(--ink); color: var(--ink); }
.steps-bar .is-done span { display: inline-flex; align-items: center; gap: 7px; }
.steps-bar .is-done span::after { content: ""; width: 5px; height: 10px; margin-top: -3px; border: solid var(--ok); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.steps-bar a:hover b { background: var(--ink); color: var(--white); }
.steps-bar b { transition: background .25s, color .25s; }
.steps-bar .is-done { color: var(--ink); }
.steps-bar .is-current { color: var(--red); font-weight: 500; }
.steps-bar .is-current b { border-color: var(--red); background: var(--red); color: var(--white); box-shadow: 0 0 0 6px rgba(217, 23, 26, .12); }
.steps-bar .is-done + li::before { background: var(--ink); }

.shop-layout { display: grid; grid-template-columns: 1fr 410px; gap: 28px; align-items: start; padding-block: 10px 70px; }
.shop-layout > * { min-width: 0; }
.ship-progress { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; padding: 16px 20px; background: var(--beige); font-size: 15px; }
.ship-progress > svg { width: 28px; height: 28px; color: var(--red); flex: none; }
.ship-progress > div { flex: 1; }
.ship-progress.is-full > svg { color: var(--ok); }
.trust-band { background: var(--beige); border-top: 1px solid var(--line); }
.trust-band .wrap { display: grid; grid-template-columns: repeat(3, 1fr); }
.trust-band .tb-item { display: flex; align-items: center; gap: 22px; padding: 30px 34px; border-left: 1px solid #d8d2ca; }
.trust-band .tb-item:first-child { border-left: 0; padding-left: 0; }
.trust-band svg { width: 46px; height: 46px; color: var(--red); flex: none; }
.trust-band h3 { margin: 0 0 2px; font-family: var(--condensed); font-weight: 700; font-size: 24px; line-height: 1.05; }
.trust-band p { margin: 0; font-size: 14px; color: var(--grey); }

/* ---------- Cart page ---------- */
.cart-table { border: 1px solid var(--line); background: var(--white); }
.cart-row { display: grid; grid-template-columns: 100px minmax(0, 1fr) 110px 140px 120px 40px; gap: 20px; align-items: center; padding: 18px 20px; border-top: 1px solid var(--line); transition: opacity .35s, transform .35s var(--ease); }
.cart-row.is-removing { opacity: 0; transform: translateX(-40px); }
.cart-row.is-head { padding: 14px 20px; border-top: 0; background: #f3f3f2; font-family: var(--condensed); font-weight: 700; font-size: 18px; color: var(--ink); }
.cart-row.is-head span:nth-child(n+2) { text-align: center; }
.cart-row.is-head span:nth-child(4) { text-align: right; }
.cart-row .unit-price { font-size: 16px; text-align: center; white-space: nowrap; }
.cart-row .qty-cell { display: flex; justify-content: center; }
.cart-row .stock { margin: 6px 0 0; }
.cart-row .addon-toggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--grey); cursor: pointer; }
.cart-row .addon-toggle input { width: 16px; height: 16px; accent-color: var(--red); }
.cart-row .total.is-tick { animation: tick .45s var(--ease); }
@keyframes tick { 40% { transform: translateY(-4px); color: var(--red); } }
.cart-collapse { overflow: hidden; transition: height .35s var(--ease) .15s; }
.cart-box-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border-top: 1px solid var(--line); }
.cart-row .thumb { display: block; aspect-ratio: 1; background: var(--card); }
.cart-row .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: multiply; }
.cart-row h3 { margin: 0 0 4px; font-family: var(--condensed); font-weight: 700; font-size: 26px; line-height: 1.05; }
.cart-row h3 a:hover { color: var(--red); }
.cart-row .meta { margin: 0; font-size: 14px; color: var(--grey); text-wrap: pretty; }
.cart-row .addon-line { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; background: var(--beige); font-size: 13px; }
.cart-row .unit { display: none; margin-top: 4px; font-size: 14px; color: var(--grey); }
.cart-row .total { display: block; font-family: var(--condensed); font-weight: 700; font-size: 24px; text-align: right; white-space: nowrap; }
.cart-row .rm-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: var(--grey-light); cursor: pointer; transition: color .2s, background .2s; }
.cart-row .rm-btn:hover { color: var(--red); background: #fff1f0; }
.cart-row .rm-btn svg { width: 18px; height: 18px; }
.qty.qty-sm button { width: 38px; height: 42px; }
.qty.qty-sm input { width: 40px; }
.coupon { display: flex; flex-wrap: wrap; max-width: 420px; flex: 1; }
.coupon input { flex: 1; min-width: 0; padding: 13px 16px; border: 1px solid var(--line); border-right: 0; border-radius: 2px 0 0 2px; background: var(--white); text-transform: uppercase; }
.coupon .btn { border-radius: 0 2px 2px 0; }
.coupon input:focus-visible { outline: 0; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.coupon-msg { width: 100%; margin: 8px 0 0; font-size: 14px; }
.coupon-msg:empty { display: none; }
.coupon-chip { display: inline-flex; align-items: center; gap: 8px; padding: 2px 4px 2px 10px; background: #e7f4ec; color: var(--ok); font-size: 13px; font-weight: 700; }
.coupon-chip button { display: grid; place-items: center; width: 22px; height: 22px; border: 0; background: none; color: var(--ok); cursor: pointer; }
.coupon-chip svg { width: 12px; height: 12px; }
.coupon-msg.is-ok { color: var(--ok); }
.coupon-msg.is-err { color: var(--red); }

.summary { position: sticky; top: 92px; background: var(--beige); }
.summary-inner { padding: 30px 28px; }
.summary h2 { margin: 0 0 18px; font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1.05; }
.summary dl { margin: 0; }
.summary dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: 15px; }
.summary dl dt { color: var(--grey); }
.summary dl dt small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ok); }
.summary dl dd { margin: 0; font-weight: 500; text-align: right; }
.summary .discount dd { color: var(--ok); }
.summary .grand { margin-top: 8px; padding-top: 18px; border-top: 2px solid var(--ink); align-items: baseline; }
.summary .grand dt { color: var(--ink); font-family: var(--condensed); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: .04em; }
.summary .grand dd { font-family: var(--condensed); font-weight: 700; font-size: 40px; line-height: 1; }
.summary .vat { margin: 4px 0 20px; font-size: 13px; color: var(--grey); text-align: right; }
.summary .ship-box { margin: 0 0 20px; padding: 14px 16px; background: var(--white); font-size: 14px; }
.summary .btn-block + .btn-block { margin-top: 10px; }
.summary-trust { display: grid; gap: 12px; margin: 0; padding: 20px 28px; list-style: none; border-top: 1px solid var(--line); background: #f1ede7; }
.summary-trust li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--grey); }
.summary-trust svg { width: 22px; height: 22px; color: var(--red); flex: none; }
.pay-badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 28px 24px; background: #f1ede7; }
.pay-badges span { display: grid; place-items: center; height: 30px; padding: 0 10px; border: 1px solid var(--line); background: var(--white); font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--ink); }
.pay-badges .visa { color: #1a1f71; font-style: italic; font-size: 14px; letter-spacing: 0; }
.pay-badges .mc { gap: 0; }
.pay-badges .mc i { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #eb001b; }
.pay-badges .mc i + i { margin-left: -6px; background: #f79e1b; mix-blend-mode: multiply; }
.cart-empty { display: grid; justify-items: center; gap: 14px; padding: 70px 20px; text-align: center; background: var(--beige); }
.cart-empty svg { width: 76px; height: 76px; color: var(--red); }
.cart-empty h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1.05; }
.cart-empty p { margin: 0 0 8px; color: var(--grey); }
.upsell { margin-top: 0; }
.upsell h2 { margin: 0 0 18px; font-family: var(--display); font-weight: 400; font-size: 34px; }
.upsell .product-grid { grid-template-columns: repeat(3, 1fr); }

/* ---------- Checkout ---------- */
.co-section { padding: 30px 0 34px; border-top: 1px solid var(--line); }
.co-section:first-child { border-top: 2px solid var(--ink); }
.co-title { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; font-family: var(--condensed); font-weight: 700; font-size: 30px; line-height: 1; }
.co-title b { font-family: var(--display); font-weight: 400; font-size: 34px; color: var(--red); }
.co-title small { margin-left: auto; font-family: var(--body); font-weight: 400; font-size: 14px; color: var(--grey); }
.co-title small a { color: var(--ink); text-decoration: underline; }
.fields { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.field { position: relative; grid-column: span 3; }
.field.full { grid-column: 1 / -1; }
.field.third { grid-column: span 2; }
.field input, .field select, .field textarea { width: 100%; height: 58px; padding: 22px 16px 8px; border: 1px solid #d9d3cb; border-radius: 2px; background: var(--white); font-size: 16px; transition: border-color .2s, box-shadow .2s; appearance: none; -webkit-appearance: none; }
.field textarea { height: 96px; padding-top: 26px; resize: vertical; }
.field select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230a1025' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; cursor: pointer; }
.field label { position: absolute; left: 17px; right: 12px; top: 18px; overflow: hidden; font-size: 16px; color: var(--grey); white-space: nowrap; text-overflow: ellipsis; pointer-events: none; transform-origin: left top; transition: transform .2s var(--ease), color .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10, 16, 37, .08); }
.field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label, .field select + label { transform: translateY(-11px) scale(.76); }
.field input:focus + label, .field textarea:focus + label { color: var(--ink); }
.field .req { color: var(--red); }
.field.is-error input, .field.is-error select, .field.is-error textarea { border-color: var(--red); box-shadow: 0 0 0 3px rgba(217, 23, 26, .1); }
.field.is-error label { color: var(--red); }
.field .err { display: none; margin: 6px 0 0; font-size: 13px; color: var(--red); }
.field.is-error .err { display: block; }
.field.is-valid input { border-color: #b6dcc3; }
.field .ok-ic { position: absolute; right: 14px; top: 19px; width: 20px; height: 20px; color: var(--ok); opacity: 0; transform: scale(.5); transition: .25s var(--ease); }
.field.is-valid .ok-ic { opacity: 1; transform: none; }
.is-shake { animation: shakeX .45s; }
@keyframes shakeX { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.seg { display: inline-grid; grid-auto-flow: column; margin-bottom: 20px; padding: 4px; background: var(--beige); }
.seg button { position: relative; padding: 11px 22px; border: 0; background: none; font-weight: 500; cursor: pointer; color: var(--grey); transition: color .2s; }
.seg button.is-active { background: var(--black); color: var(--white); }
.company-fields { display: none; }
.company-fields.is-on { display: grid; animation: fadeUp .45s var(--ease); margin-bottom: 16px; }

.options { display: grid; gap: 12px; }
.option { position: relative; display: grid; grid-template-columns: 24px 1fr auto; gap: 16px; align-items: center; padding: 18px 20px; border: 1px solid #d9d3cb; background: var(--white); cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
.option:hover { border-color: #b7aea2; }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option .radio { width: 22px; height: 22px; border: 2px solid #b7aea2; border-radius: 50%; display: grid; place-items: center; transition: border-color .2s; }
.option .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform .25s var(--ease); }
.option:has(input:checked) { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); background: #fffaf9; }
.option:has(input:checked) .radio { border-color: var(--red); }
.option:has(input:checked) .radio::after { transform: scale(1); }
.option strong { display: block; font-size: 16px; }
.option small { display: block; margin-top: 2px; color: var(--grey); font-size: 14px; }
.option .opt-price { font-family: var(--condensed); font-weight: 700; font-size: 20px; white-space: nowrap; }
.option .opt-price.free { color: var(--ok); }
.option .opt-extra { grid-column: 2 / -1; display: none; margin-top: 4px; font-size: 14px; color: var(--grey); }
.option:has(input:checked) .opt-extra { display: block; animation: fadeUp .35s var(--ease); }
.pay-logos { display: inline-flex; gap: 6px; vertical-align: middle; margin-left: 8px; }
.pay-logos span { display: inline-grid; place-items: center; height: 22px; padding: 0 6px; border: 1px solid var(--line); font-size: 10px; font-weight: 700; }
.check-line { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; font-size: 15px; cursor: pointer; }
.check-line input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--red); flex: none; }
.check-line a { text-decoration: underline; }
.check-line.is-error { color: var(--red); }

.co-summary .co-items { display: grid; gap: 14px; margin: 0 -10px 18px; padding: 10px 10px 2px; max-height: 320px; overflow-y: auto; }
.co-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; }
.co-item .thumb { position: relative; background: var(--white); }
.co-item .thumb img { width: 64px; height: 64px; object-fit: contain; padding: 6px; }
.co-item .thumb b { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--ink); color: var(--white); font-size: 12px; }
.co-item h3 { margin: 0; font-family: var(--condensed); font-weight: 700; font-size: 19px; line-height: 1.1; }
.co-item p { margin: 2px 0 0; font-size: 13px; color: var(--grey); }
.co-item .line-price { font-weight: 500; white-space: nowrap; }
.secure-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; font-size: 13px; color: var(--grey); }
.secure-note svg { width: 16px; height: 16px; color: var(--ok); }

/* ---------- Order confirmation ---------- */
.confirm { display: none; padding: 40px 0 90px; }
.confirm.is-on { display: block; }
.confirm-card { max-width: 860px; margin: 0 auto; text-align: center; }
.check-anim { width: 110px; height: 110px; margin: 0 auto 24px; }
.check-anim circle { fill: none; stroke: var(--ok); stroke-width: 3; stroke-dasharray: 340; stroke-dashoffset: 340; animation: draw .8s var(--ease) forwards; }
.check-anim path { fill: none; stroke: var(--ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; animation: draw .5s var(--ease) .7s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.confirm h1 { margin: 0 0 10px; font-family: var(--display); font-weight: 400; font-size: clamp(42px, 5vw, 70px); line-height: 1.05; }
.confirm h1 .red { color: var(--red); }
.confirm .lead { margin: 0 auto 30px; max-width: 560px; font-size: 18px; color: var(--grey); }
.order-no { display: inline-flex; gap: 10px; align-items: center; margin-bottom: 40px; padding: 12px 18px; background: var(--beige); font-size: 15px; }
.order-no b { font-family: var(--condensed); font-size: 22px; letter-spacing: .04em; }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0 0 40px; padding: 0; list-style: none; text-align: left; }
.timeline li { position: relative; padding: 24px 18px 0 0; border-top: 3px solid var(--line); }
.timeline li.is-done { border-top-color: var(--ok); }
.timeline li.is-now { border-top-color: var(--red); }
.timeline li::before { content: ""; position: absolute; left: 0; top: -9px; width: 15px; height: 15px; border-radius: 50%; background: var(--line); }
.timeline li.is-done::before { background: var(--ok); }
.timeline li.is-now::before { background: var(--red); box-shadow: 0 0 0 0 rgba(217, 23, 26, .5); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(217, 23, 26, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 23, 26, 0); } }
.timeline strong { display: block; font-family: var(--condensed); font-size: 21px; }
.timeline span { font-size: 14px; color: var(--grey); }
.confirm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 34px; text-align: left; }
.confirm-grid > div { padding: 22px 24px; background: var(--beige); }
.confirm-grid h3 { margin: 0 0 8px; font-family: var(--condensed); font-size: 20px; text-transform: uppercase; letter-spacing: .04em; }
.confirm-grid p { margin: 0; font-size: 15px; color: var(--grey); line-height: 1.6; }
.confirm .hero-actions { justify-content: center; }
.confetti { position: fixed; inset: 0; z-index: 140; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 9px; height: 14px; opacity: .95; animation: fall var(--dur, 2.6s) cubic-bezier(.25, .6, .4, 1) forwards; }
@keyframes fall { to { transform: translate3d(var(--x, 0), 105vh, 0) rotate(var(--r, 540deg)); opacity: .9; } }

/* ---------- Product page extras ---------- */
.gallery-main { cursor: zoom-in; }
.gallery-main img { transition: transform .25s ease, opacity .25s; }
.gallery-main.is-zoom img:not(.is-photo) { transform: scale(1.9); }
.gallery-main img.is-swap { opacity: 0; }
.pdp-pay.pay-badges { align-items: center; margin-top: 16px; padding: 0; background: none; }
.pdp-pay em { margin-right: 6px; font-style: normal; font-size: 13px; color: var(--grey); }
.pdp-page .toast-stack { bottom: 104px; }
.eta { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 14px; color: var(--grey); }
.eta svg { width: 18px; height: 18px; color: var(--red); }
.eta b { color: var(--ink); }
.sticky-buy .sb-prod { display: none; }
@media (min-width: 961px) {
  .sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: block; padding: 12px 0; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(10, 16, 37, .08); transform: translateY(110%); transition: transform .4s var(--ease); }
  .sticky-buy.is-on { transform: none; }
  .sticky-buy .sb-inner { display: flex; align-items: center; gap: 22px; }
  .sticky-buy .sb-prod { display: flex; align-items: center; gap: 14px; margin-right: auto; }
  .sticky-buy .sb-prod img { width: 54px; height: 54px; object-fit: contain; background: var(--card); padding: 4px; mix-blend-mode: multiply; }
  .sticky-buy .sb-prod strong { font-family: var(--condensed); font-size: 24px; }
}
@media (max-width: 960px) {
  .sticky-buy .sb-inner { display: contents; }
}

/* ---------- Footer extras ---------- */
.footer-pay { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.footer-pay span { display: grid; place-items: center; height: 28px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .2); font-size: 11px; font-weight: 700; letter-spacing: .06em; color: rgba(255, 255, 255, .8); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .reviews-track { grid-auto-columns: calc((100% - 2 * 16px) / 3); }
  .shop-layout { grid-template-columns: 1fr 360px; gap: 28px; }
  .cart-row { grid-template-columns: 84px minmax(0, 1fr) 130px 104px 40px; gap: 16px; }
  .cart-row .unit-price, .cart-row.is-head span:nth-child(2) { display: none; }
  .cart-row .unit { display: block; }
}
@media (max-width: 960px) {
  .main-nav .nav-cta { display: flex; margin-top: 26px; }
  .hero-badge { position: relative; right: auto; bottom: auto; margin-top: 30px; width: max-content; max-width: 100%; }
  .hero-scroll { display: none; }
  .reviews-head { grid-template-columns: 1fr; gap: 18px; }
  .g-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); justify-content: stretch; }
  .g-actions .btn-google { justify-content: center; padding: 11px 10px; }
  .g-bars { margin-left: 0; }
  .reviews-track { grid-auto-columns: 78%; }
  .shop-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .cart-row { grid-template-columns: 76px minmax(0, 1fr) auto 36px; grid-template-areas: "thumb info info rm" "thumb qty total total"; gap: 12px; padding: 16px; }
  .cart-row h3 { font-size: 22px; }
  .cart-row .rm-btn { width: 36px; height: 36px; }
  .cart-row .qty-cell { justify-content: flex-start; }
  .cart-box-foot { padding: 16px; }
  .trust-band .wrap { grid-template-columns: 1fr; }
  .trust-band .tb-item, .trust-band .tb-item:first-child { padding: 20px 0; border-left: 0; border-top: 1px solid #d8d2ca; }
  .trust-band .tb-item:first-child { border-top: 0; }
  .steps-bar li { width: 92px; font-size: 13px; }
  .steps-bar b { width: 42px; height: 42px; font-size: 17px; }
  .steps-bar li + li::before { top: 20px; right: calc(50% + 28px); width: calc(100% - 56px); }
  .cart-row.is-head { display: none; }
  .cart-row .thumb { grid-area: thumb; align-self: start; }
  .cart-row .info { grid-area: info; }
  .cart-row .qty-cell { grid-area: qty; }
  .cart-row .total { grid-area: total; font-size: 22px; }
  .cart-row .rm-cell { grid-area: rm; align-self: start; }
  .upsell .product-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: 1fr 1fr; row-gap: 26px; }
}
@media (max-width: 640px) {
  .hide-sm { display: none; }
  .trust-grid.trust-3 { grid-template-columns: 1fr; }
  .hero h1 { line-height: 1.14; }
  .fields { grid-template-columns: 1fr 1fr; }
  .field, .field.third { grid-column: 1 / -1; }
  .field.half-m { grid-column: span 1; }
  .co-title { font-size: 25px; }
  .co-title small { display: none; }
  .confirm-grid { grid-template-columns: 1fr; }
  .toast-stack { right: 16px; left: 16px; bottom: 16px; width: auto; }
  .sticky-buy ~ .toast-stack, .pdp-page .toast-stack { bottom: 86px; }
  .ticker-item { font-size: 22px; padding-block: 12px; }
  .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
  .seg button { padding: 11px 10px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
}

/* ---------- Cart / checkout details ---------- */
.icon-back { transform: rotate(180deg); }
.btn:hover .icon-back { transform: rotate(180deg) translateX(4px); }
.summary .grand dd { color: var(--red); }
.summary .free { color: var(--ok); font-weight: 700; }
.summary .phone-order { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; font-size: 14px; color: var(--grey); }
.summary .phone-order a { color: var(--ink); font-weight: 700; }
.summary .phone-order svg { width: 16px; height: 16px; color: var(--red); }
.upsell .product-grid { grid-template-columns: repeat(4, 1fr); }
.mobile-checkout { display: none; }
.option.is-disabled { opacity: .45; cursor: not-allowed; }
.option.is-disabled * { pointer-events: none; }
.option .opt-ic { display: none; }
.co-section { margin-bottom: 14px; padding: 26px 28px 30px; background: var(--white); border: 1px solid var(--line); }
.co-section:first-child { border-top: 1px solid var(--line); }
.co-hint { margin: 14px 0 0; font-size: 14px; color: var(--grey); }
.co-coupon { margin: 0 0 16px; font-size: 14px; }
.co-coupon summary { cursor: pointer; color: var(--ink); text-decoration: underline; list-style: none; }
.co-coupon summary::-webkit-details-marker { display: none; }
.co-coupon .coupon { margin-top: 10px; max-width: none; }
.co-coupon .coupon input { padding: 11px 14px; }
.co-coupon .coupon .btn { padding: 11px 18px; }
.summary .co-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.summary .co-head h2 { margin: 0; }
.summary .co-head a { font-size: 14px; color: var(--red); text-decoration: underline; }
.summary .check-line { font-size: 14px; }
.summary .check-line a { color: var(--red); }
#place-order { margin-top: 16px; padding-block: 18px; font-size: 19px; }
.pay-redirect { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; background: rgba(255, 255, 255, .96); opacity: 0; visibility: hidden; transition: .3s; }
.pay-redirect.is-on { opacity: 1; visibility: visible; }
.pay-redirect > div { display: grid; justify-items: center; gap: 14px; text-align: center; max-width: 420px; }
.pay-redirect .spinner { width: 54px; height: 54px; border-width: 3px; border-color: var(--line); border-top-color: var(--red); }
.pay-redirect h2 { margin: 6px 0 0; font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1.1; }
.pay-redirect p { margin: 0; color: var(--grey); }
.pay-redirect .secure-note { margin: 0; }
.confirm h2 { margin: 0 0 10px; font-family: var(--display); font-weight: 400; font-size: clamp(40px, 5vw, 68px); line-height: 1.1; }
.confirm h2 .red { color: var(--red); }
.confirm-items { margin: 0 0 34px; padding: 0; list-style: none; border-top: 1px solid var(--line); text-align: left; }
.confirm-items li { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.confirm-items img { width: 56px; height: 56px; object-fit: contain; padding: 4px; background: var(--card); mix-blend-mode: multiply; }
.confirm-items strong { font-family: var(--condensed); font-size: 20px; }
.confirm-items .sum { font-weight: 700; white-space: nowrap; }
.confirm-items li.total-line { grid-template-columns: 1fr auto; border-bottom: 0; font-family: var(--condensed); font-weight: 700; font-size: 26px; }
.confirm-items li.total-line span:last-child { color: var(--red); }
@media (max-width: 1180px) {
  .upsell .product-grid { grid-template-columns: repeat(3, 1fr); }
  .upsell .product-grid > :nth-child(4) { display: none; }
}
@media (max-width: 960px) {
  .mobile-checkout { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(10, 16, 37, .08); }
  .mobile-checkout small { display: block; font-size: 12px; color: var(--grey); }
  .mobile-checkout .price { font-size: 26px; }
  .cart-page { padding-bottom: 76px; }
  .cart-page .toast-stack { bottom: 90px; }
  .upsell .product-grid { grid-template-columns: repeat(2, 1fr); }
  .upsell .product-grid > :nth-child(4) { display: flex; }
  .co-section { padding: 22px 18px 24px; }
}
@media (max-width: 640px) {
  .shop-head .wrap { padding-block: 4px 22px; }
  .shop-head .sub { font-size: 16px; }
  .steps-bar { width: 100%; justify-content: space-between; }
  .steps-bar li { width: 33.333%; }
  .cart-box-foot { flex-direction: column-reverse; align-items: stretch; }
  .cart-box-foot > .btn { width: 100%; }
  .coupon { max-width: none; }
  .summary-inner { padding: 24px 18px; }
  .summary-trust, .pay-badges { padding-inline: 18px; }
  .option { grid-template-columns: 22px 1fr auto; gap: 12px; padding: 16px 14px; }
  .confirm { padding: 40px 0 60px; }
  .timeline { grid-template-columns: 1fr; }
  .timeline li { padding: 0 0 18px 26px; border-top: 0; border-left: 3px solid var(--line); }
  .timeline li.is-done { border-left-color: var(--ok); }
  .timeline li.is-now { border-left-color: var(--red); }
  .timeline li::before { left: -9px; top: 0; }
}
.option > .icon { width: 26px; height: 26px; color: var(--grey); }
.option:has(input:checked) > .icon { color: var(--red); }
/* Blend category photos into the card: fade the top and left edges of the crop */
.cat-card img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%), linear-gradient(180deg, transparent 0, #000 24%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 24%), linear-gradient(180deg, transparent 0, #000 24%); mask-composite: intersect; }

/* Anton's tall diacritics (ș, ț, î, ă) need extra leading on multi-line titles */
.section-title, .page-banner h1, .pdp-info h1, .footer-cta h2, .cat-card h3, .promo-card h3 { line-height: 1.14; }
/* Horizontal-only scroller: never steal vertical wheel scrolling, keep hover lift + shadow visible */
.reviews-track { overflow-y: hidden; overscroll-behavior-x: contain; margin: -8px -4px 0; padding: 8px 4px 14px; scroll-padding-inline: 4px; }
.footer-cta h2 { line-height: 1.2; }
.footer-pay .visa { font-style: italic; font-size: 14px; letter-spacing: 0; }
.footer-pay .mc i { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #eb001b; }
.footer-pay .mc i + i { margin-left: -6px; background: #f79e1b; opacity: .9; }
.footer-pay .mc { display: flex; align-items: center; }
.pay-badges .mc { display: flex; align-items: center; }

/* Long secondary CTA on narrow screens */
@media (max-width: 640px) {
  .buy-secondary { padding-left: 14px; padding-right: 14px; font-size: 15px; white-space: normal; text-align: center; }
}

/* ---------- Mobile checkout: sticky total bar that expands into the order breakdown ---------- */
.co-bar, .co-scrim { display: none; }
@media (max-width: 960px) {
  .co-scrim { position: fixed; inset: 0; z-index: 55; display: block; background: rgba(10, 16, 37, .45); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
  .co-scrim.is-on { opacity: 1; visibility: visible; transition: opacity .3s; }
  .co-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 56; display: block; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(10, 16, 37, .1); transition: transform .45s var(--ease); }
  .js .co-bar { animation: co-bar-in .6s var(--ease) .35s backwards; }
  .co-bar.is-hidden { transform: translateY(calc(100% + 30px)); visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s; }
  .co-bar-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
  .co-bar.is-open .co-bar-panel { grid-template-rows: 1fr; }
  .co-bar-scroll { min-height: 0; max-height: min(58vh, 460px); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; transition: visibility 0s .45s; }
  .co-bar.is-open .co-bar-scroll { visibility: visible; transition: none; }
  .co-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 20px 16px 4px; }
  .co-bar-head strong { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.1; }
  .co-bar-head a { font-size: 14px; color: var(--red); text-decoration: underline; }
  .co-bar-items { display: grid; gap: 14px; padding: 16px; }
  .co-bar-items .co-item { grid-template-columns: 52px 1fr auto; gap: 12px; }
  .co-bar-items .co-item .thumb { background: var(--card); }
  .co-bar-items .co-item .thumb img { width: 52px; height: 52px; padding: 5px; mix-blend-mode: multiply; }
  .co-bar-items .co-item h3 { font-size: 17px; }
  .co-bar-items .co-item p { font-size: 12.5px; }
  .co-bar-lines { margin: 0 16px; padding: 8px 0 12px; border-top: 1px solid var(--line); }
  .co-bar-lines div { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: 14px; }
  .co-bar-lines dt { color: var(--grey); }
  .co-bar-lines dd { margin: 0; font-weight: 500; text-align: right; white-space: nowrap; }
  .co-bar-lines .discount dd, .co-bar-lines .free { color: var(--ok); }
  .co-bar-lines .free { font-weight: 700; }
  .co-bar-lines .vat { font-size: 13px; }
  .co-bar-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--white); }
  .co-bar.is-open .co-bar-main { border-top: 1px solid var(--line); }
  .co-bar-toggle { display: grid; gap: 4px; min-width: 0; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .co-bar-toggle small { overflow: hidden; font-size: 12px; color: var(--grey); white-space: nowrap; text-overflow: ellipsis; }
  .co-bar-total { display: flex; align-items: center; gap: 10px; }
  .co-bar-total .price { font-size: 26px; }
  .co-bar-more { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 500; color: var(--red); }
  .co-bar-more span { text-decoration: underline; text-underline-offset: 3px; }
  .co-bar-more svg { width: 16px; height: 16px; transform: rotate(180deg); transition: transform .4s var(--ease); }
  .co-bar.is-open .co-bar-more svg { transform: none; }
  .co-bar-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
  .co-bar-main .btn { flex: none; padding-inline: 20px; }
  .has-co-bar .toast-stack { bottom: 92px; }
}
@keyframes co-bar-in { from { transform: translateY(100%); } }

/* ---------- Compact cart/checkout header on phones: the form starts higher on the first screen ---------- */
@media (max-width: 640px) {
  .shop-head:has(.steps-bar) .wrap { gap: 14px; padding-block: 0 16px; }
  .shop-head:has(.steps-bar) .breadcrumb { display: none; }
  .shop-head:has(.steps-bar) h1 { padding: 16px 0 10px; font-size: 36px; }
  .shop-head:has(.steps-bar) h1::after { width: 36px; height: 3px; }
  .steps-bar { margin: 0; }
  .steps-bar li { display: flex; align-items: center; gap: 6px; width: auto; font-size: 12.5px; white-space: nowrap; }
  .steps-bar li + li { flex: 1 1 auto; }
  .steps-bar li + li::before { position: static; flex: 1; width: auto; min-width: 8px; margin: 0 6px; }
  .steps-bar b { flex: none; width: 26px; height: 26px; font-size: 13px; }
  .steps-bar .is-current b { box-shadow: 0 0 0 4px rgba(217, 23, 26, .12); }
  .steps-bar .is-done span { gap: 5px; }
}
@media (max-width: 359px) {
  .steps-bar li:not(.is-current) span { display: none; }
}