/* ============================================================ Salonix Storefront — Design System Deep green + gold. Clean, bilingual (bn/en), mobile-first. ============================================================ */ :root { /* Brand — Green #1F4B3A + Cream #F5EFE4 + Gold #C8A96B */ --green-900:#143528; --green-800:#1a4031; --green-700:#1F4B3A; /* primary */ --green-600:#2c6350; /* hover */ --green-500:#3a7a63; --green-100:#dde8e2; --green-050:#ecf3ef; --gold-600:#a5854e; --gold-500:#C8A96B; /* accent */ --gold-400:#d3ba8a; --gold-300:#dfcaa4; --gold-100:#f1e8d7; --cream:#F5EFE4; --white:#FFFFFF; /* Neutrals */ --ink:#26302b; --ink-soft:#5f6b64; --line:#e4ddce; --bg:#F5EFE4; /* page background = cream */ --bg-alt:#efe7d7; /* slightly deeper cream */ --card:#FFFFFF; /* panels / cards */ /* Feedback */ --sale:#c0392b; --ok:#2c6350; --warn:#b0791f; /* Shape & motion */ --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px; --shadow-1:0 1px 3px rgba(20,58,34,.08); --shadow-2:0 6px 24px rgba(20,58,34,.12); --ease:200ms cubic-bezier(.2,.7,.3,1); /* Layout */ --maxw:1240px; --gutter:clamp(16px,4vw,32px); --rail-top:110px; /* Type */ --font-en:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-bn:'Hind Siliguri','Noto Sans Bengali',system-ui,sans-serif; --font-display:'Fraunces',Georgia,serif; } html[lang="bn"] body { font-family:var(--font-bn); } * { box-sizing:border-box; margin:0; padding:0; } [hidden] { display:none !important; } html { scroll-behavior:smooth; overflow-x:hidden; } /* Lucide icons: sized via font-size, coloured via currentColor */ [data-lucide], .lucide { width:1em; height:1em; display:inline-block; vertical-align:-0.14em; flex:none; } svg.lucide { stroke-width:2; } .btn svg.lucide { width:1.15em; height:1.15em; } body { font-family:var(--font-en); color:var(--ink); background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased; } img { display:block; max-width:100%; } a { color:inherit; text-decoration:none; } button { font:inherit; cursor:pointer; border:0; background:none; color:inherit; } ul { list-style:none; } /* i18n visibility — toggled by setting */ html[data-lang="bn"] .lang-en, html[data-lang="en"] .lang-bn { display:none !important; } .container { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .section { padding-block:clamp(32px,6vw,64px); } .section-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:24px; } .section-head h2 { font-family:var(--font-display); font-size:clamp(1.4rem,3vw,2rem); color:var(--green-700); font-weight:600; } .section-head a { color:var(--gold-600); font-weight:600; font-size:.9rem; } /* ---------- Buttons ---------- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:var(--r-pill); font-weight:600; font-size:.95rem; transition:transform var(--ease),background var(--ease),box-shadow var(--ease); } .btn:active { transform:translateY(1px); } .btn-primary { background:var(--green-700); color:var(--cream); } .btn-primary:hover { background:var(--green-600); box-shadow:var(--shadow-2); } .btn-gold { background:linear-gradient(180deg,var(--gold-300),var(--gold-500)); color:var(--green-900); } .btn-gold:hover { box-shadow:var(--shadow-2); } .btn-ghost { border:1.5px solid var(--line); color:var(--ink); } .btn-ghost:hover { border-color:var(--green-600); color:var(--green-700); } .btn-block { width:100%; } /* ---------- Top utility bar ---------- */ .util-bar { background:var(--green-900); color:#cfe0d5; font-size:.78rem; } .util-bar .container { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:36px; } .util-bar a:hover { color:var(--gold-300); } .util-bar .util-links { display:flex; gap:18px; align-items:center; } .util-bar .util-pro { color:var(--gold-300); font-weight:600; } @media (max-width:768px){ .util-bar .util-links { display:none; } .util-bar .container { justify-content:center; } } /* ---------- Header ---------- */ .site-header { position:sticky; top:0; z-index:50; background:var(--card); border-bottom:1px solid var(--line); transition:background var(--ease),box-shadow var(--ease),backdrop-filter var(--ease),border-color var(--ease); } .site-header.scrolled { background:rgba(255,255,255,.7); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); box-shadow:0 10px 34px rgba(20,58,34,.12); border-bottom-color:rgba(255,255,255,.45); } :root:not([data-theme="light"]) .site-header.scrolled { background:rgba(255,255,255,.7); } .site-header.scrolled .nav-bar { background:rgba(31,77,46,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .header-main { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:clamp(12px,2.4vw,26px); padding-block:clamp(11px,1.6vw,16px); transition:padding var(--ease); } .logo img { height:clamp(34px,4vw,46px); width:auto; display:block; } .search { display:flex; align-items:center; width:100%; max-width:600px; border:1.5px solid var(--line); border-radius:var(--r-pill); overflow:hidden; background:var(--bg-alt); transition:border-color var(--ease), box-shadow var(--ease), background var(--ease); } .search:focus-within { border-color:var(--green-600); background:#fff; box-shadow:0 0 0 4px var(--green-050); } .search input { flex:1; min-width:0; border:0; outline:0; padding:11px 18px; font:inherit; background:transparent; } .search button { background:var(--green-700); color:#fff; padding:0 clamp(14px,2vw,22px); align-self:stretch; display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:.9rem; } .search button:hover { background:var(--green-600); } .header-actions { display:flex; align-items:center; gap:clamp(2px,0.8vw,8px); } .icon-btn { position:relative; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:var(--ink-soft); transition:background var(--ease), color var(--ease); } .icon-btn:hover { color:var(--green-700); background:var(--green-050); } .icon-btn svg { width:21px; height:21px; } .icon-btn > span:not(.count) { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; } .icon-btn .count { position:absolute; top:5px; right:5px; background:var(--gold-500); color:var(--green-900); font-size:.66rem; font-weight:800; min-width:17px; height:17px; border-radius:var(--r-pill); display:grid; place-items:center; padding:0 4px; border:2px solid var(--card); } .lang-switch { display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--line); border-radius:var(--r-pill); padding:8px 12px; font-weight:600; font-size:.8rem; color:var(--ink-soft); } .lang-switch:hover { border-color:var(--green-600); color:var(--green-700); } .lang-switch svg { width:14px; height:14px; } /* hamburger — only below the nav breakpoint */ .menu-toggle { display:none; width:42px; height:42px; border-radius:12px; place-items:center; color:var(--green-800,var(--green-700)); } .menu-toggle:hover { background:var(--green-050); } .menu-toggle svg { width:22px; height:22px; } /* ---------- Primary nav (desktop) ---------- */ .nav-bar { background:var(--green-700); color:#eaf2ec; transition:background var(--ease); } .nav-bar .container { display:flex; align-items:center; gap:4px; height:48px; } .nav-bar a { padding:8px 12px; border-radius:var(--r-sm); font-size:.88rem; font-weight:500; white-space:nowrap; transition:background var(--ease); } .nav-bar a:hover, .nav-bar a[aria-current="page"] { background:rgba(255,255,255,.14); } .nav-bar .pill { display:inline-flex; align-items:center; gap:6px; background:var(--gold-500); color:var(--green-900); font-weight:700; margin-inline-start:auto; } .nav-bar .pill svg { width:14px; height:14px; } /* Mega menu */ .nav-mega { position:relative; } .nav-mega-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:var(--r-sm); font-size:.88rem; font-weight:600; color:#fff; } .nav-mega-btn:hover { background:rgba(255,255,255,.14); } .nav-mega-btn svg { width:15px; height:15px; } .nav-mega-panel { position:absolute; top:100%; left:0; margin-top:6px; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-2); padding:8px; display:grid; grid-template-columns:1fr 1fr; gap:2px; width:520px; max-width:88vw; opacity:0; visibility:hidden; transform:translateY(-6px); transition:var(--ease); z-index:40; } .nav-mega:hover .nav-mega-panel, .nav-mega:focus-within .nav-mega-panel { opacity:1; visibility:visible; transform:none; } .nav-mega-panel a { display:flex; align-items:center; gap:8px; padding:9px 12px; font-size:.86rem; font-weight:500; border-radius:var(--r-sm); } .nav-mega-panel a svg { width:17px; height:17px; color:var(--green-600); flex:none; } .nav-mega-panel a span { flex:1; } .nav-mega-panel a:hover { background:var(--green-050); color:var(--green-700); } .nav-mega-panel a em { margin-inline-start:auto; font-style:normal; font-size:.75rem; color:var(--ink-soft); } /* ---------- Responsive header / mobile nav ---------- */ @media (max-width:1024px){ .nav-bar { display:none; } .menu-toggle { display:grid; } .header-main { grid-template-columns:auto 1fr auto; grid-template-areas:"menu logo actions" "search search search"; row-gap:10px; column-gap:12px; } .menu-toggle { grid-area:menu; } .logo { grid-area:logo; } .logo img { margin-inline:auto; } .header-actions { grid-area:actions; } .search { grid-area:search; max-width:none; } } @media (min-width:1025px){ .header-main .logo { justify-self:start; } } /* Mobile nav drawer */ .mobile-nav { position:fixed; inset:0; z-index:70; visibility:hidden; } .mobile-nav.open { visibility:visible; } .mnav-scrim { position:absolute; inset:0; background:rgba(20,58,34,.45); opacity:0; transition:opacity var(--ease); } .mobile-nav.open .mnav-scrim { opacity:1; } .mnav-panel { position:absolute; top:0; left:0; height:100%; width:min(320px,86vw); background:#fff; transform:translateX(-100%); transition:transform var(--ease); overflow-y:auto; padding-bottom:24px; box-shadow:12px 0 40px rgba(20,58,34,.2); } .mobile-nav.open .mnav-panel { transform:none; } .mnav-head { display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--line); } .mnav-head img { height:38px; } .mnav-close { display:grid; place-items:center; padding:6px; color:var(--ink-soft); } .mnav-close svg { width:20px; height:20px; } .mnav-panel > a { display:flex; align-items:center; gap:12px; padding:13px 18px; font-size:.92rem; font-weight:500; border-bottom:1px solid var(--green-050); } .mnav-panel > a svg { width:18px; height:18px; color:var(--green-600); flex:none; } .mnav-panel > a span { flex:1; } .mnav-panel > a em { font-style:normal; font-size:.75rem; color:var(--ink-soft); } .mnav-panel > a:hover { background:var(--green-050); color:var(--green-700); } .mnav-panel > a.mnav-offer { color:var(--gold-600); font-weight:700; } /* ---------- Layout with sidebar ---------- */ .shell { display:grid; grid-template-columns:264px 1fr; gap:32px; align-items:start; } @media (max-width:960px){ .shell { grid-template-columns:1fr; } .sidebar { display:none; } } .sidebar { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; position:sticky; top:150px; } .sidebar h3 { background:var(--green-050); color:var(--green-700); padding:12px 16px; font-size:.95rem; border-bottom:1px solid var(--line); } .cat-tree a { display:flex; gap:9px; align-items:center; padding:11px 16px; font-size:.9rem; border-bottom:1px solid var(--line); } .cat-tree a:last-child { border-bottom:0; } .cat-tree a span { flex:1; } .cat-tree a svg { width:16px; height:16px; color:var(--green-600); flex:none; } .cat-tree a svg:last-child { width:14px; opacity:.5; } .cat-tree a:hover { background:var(--green-050); color:var(--green-700); } .cat-tree a[aria-current="page"] { background:var(--green-050); color:var(--green-700); font-weight:600; } /* ---------- Hero ---------- */ .hero { position:relative; background:linear-gradient(120deg,var(--green-700),var(--green-900)); color:#fff; border-radius:var(--r-lg); overflow:hidden; } .hero-inner { display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; padding:clamp(24px,5vw,56px); } @media (max-width:760px){ .hero-inner { grid-template-columns:1fr; text-align:center; } } .hero h1 { font-family:var(--font-display); font-size:clamp(1.8rem,5vw,3rem); line-height:1.1; font-weight:600; } .hero p { margin:14px 0 22px; color:#d8e6dc; max-width:46ch; } .hero .eyebrow { color:var(--gold-300); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.8rem; } .hero-media { background:rgba(255,255,255,.08); border-radius:var(--r-md); aspect-ratio:4/3; display:grid; place-items:center; color:#9fbfa9; overflow:hidden; } .hero-media img { width:100%; height:100%; object-fit:contain; padding:18px; } .hero-stats { display:flex; gap:22px; margin-top:22px; flex-wrap:wrap; } .hero-stats div { font-size:.82rem; color:#cfe0d5; } .hero-stats b { display:block; font-family:var(--font-display); font-size:1.15rem; color:#fff; } @media (max-width:760px){ .hero-stats { justify-content:center; } } /* Section subtitle */ .section-head .sub { font-size:.85rem; color:var(--ink-soft); margin-top:2px; } .section-head .head-txt h2 + .sub { margin-top:4px; } /* Category tiles with count */ .cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; } .cat-tile { border:1px solid var(--line); border-radius:var(--r-md); padding:18px 14px; text-align:center; transition:var(--ease); background:var(--card); } .cat-tile:hover { border-color:var(--gold-500); box-shadow:var(--shadow-1); transform:translateY(-2px); } .cat-tile .ic { font-size:1.8rem; } .cat-tile b { display:block; font-size:.86rem; margin-top:8px; color:var(--ink); } .cat-tile span { font-size:.75rem; color:var(--ink-soft); } .cat-tile.disabled { opacity:.5; pointer-events:none; } /* Combo tiles */ .combo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; } .combo { border:1px solid var(--gold-300); background:linear-gradient(160deg,var(--gold-100),#fff); border-radius:var(--r-md); padding:20px; } .combo h4 { font-family:var(--font-display); color:var(--green-700); font-size:1.05rem; } .combo .save-tag { display:inline-block; background:var(--green-700); color:#fff; font-size:.74rem; font-weight:700; padding:3px 9px; border-radius:var(--r-pill); margin:8px 0; } /* Brand partners */ .brand-strip { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; } .brand-strip a { border:1px solid var(--line); border-radius:var(--r-md); padding:16px 10px; text-align:center; font-weight:700; color:var(--green-700); font-family:var(--font-display); transition:var(--ease); } .brand-strip a:hover { border-color:var(--gold-500); background:var(--green-050); } /* Trust band */ .trust-band { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; } @media (max-width:760px){ .trust-band { grid-template-columns:1fr 1fr; } } .trust-band div { padding:20px 16px; display:flex; gap:12px; align-items:center; border-right:1px solid var(--line); } .trust-band div:last-child { border-right:0; } .trust-band .ic { font-size:1.5rem; } .trust-band b { display:block; font-size:.88rem; color:var(--green-900); } .trust-band span { font-size:.76rem; color:var(--ink-soft); } /* Promo split banners */ .promo-split { display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:700px){ .promo-split { grid-template-columns:1fr; } } .promo-split a { border-radius:var(--r-md); padding:26px; color:#fff; font-family:var(--font-display); font-size:1.2rem; display:flex; align-items:flex-end; min-height:150px; } .promo-split a:first-child { background:linear-gradient(120deg,var(--green-600),var(--green-900)); } .promo-split a:last-child { background:linear-gradient(120deg,var(--gold-600),#7a5f12); } /* ---------- USP strip ---------- */ .usp { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } @media (max-width:760px){ .usp { grid-template-columns:repeat(2,1fr); } } .usp li { display:flex; gap:12px; align-items:center; padding:16px; background:var(--bg-alt); border-radius:var(--r-md); } .usp .ic { width:38px; height:38px; flex:none; display:grid; place-items:center; background:var(--green-100); color:var(--green-700); border-radius:var(--r-pill); } .usp b { display:block; font-size:.9rem; color:var(--green-900); } .usp span { font-size:.78rem; color:var(--ink-soft); } /* ---------- Category chips ---------- */ .chips { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; } .chip-card { border:1px solid var(--line); border-radius:var(--r-md); padding:18px 14px; text-align:center; transition:var(--ease); } .chip-card:hover { border-color:var(--gold-500); box-shadow:var(--shadow-1); transform:translateY(-2px); } .chip-card .thumb { width:64px; height:64px; margin:0 auto 10px; border-radius:var(--r-pill); background:var(--green-050); display:grid; place-items:center; color:var(--green-600); } .chip-card b { font-size:.86rem; } /* ---------- Product grid & card (Chaldal-style) ---------- */ .grid-products { display:grid; grid-template-columns:repeat(auto-fill,minmax(clamp(150px,42vw,208px),1fr)); gap:clamp(10px,1.6vw,16px); } .pcard { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--card); display:flex; flex-direction:column; transition:box-shadow var(--ease), border-color var(--ease); position:relative; } .pcard:hover { box-shadow:var(--shadow-2); border-color:var(--gold-300); } .pcard .media { aspect-ratio:1; background:var(--white); display:block; overflow:hidden; position:relative; cursor:pointer; } .pcard .media-img { width:100%; height:100%; object-fit:contain; padding:12px; transform-origin:60% 40%; transition:transform .45s ease; } .pcard:hover .media-img { transform:scale(1.07); } @media (prefers-reduced-motion: reduce){ .pcard:hover .media-img { transform:none; } } .pcard .media-img.ph, .thumb-img.ph, .media-img.img-failed, .thumb-img.img-failed { background:var(--bg-alt) center/32px no-repeat; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b7c3bb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E"); } .pcard.is-out .media-img { opacity:.5; filter:grayscale(.4); } .pcard-badges { position:absolute; top:9px; left:9px; display:flex; flex-direction:column; gap:5px; z-index:2; } .pcard .badge { font-size:.68rem; font-weight:700; padding:3px 7px; border-radius:var(--r-pill); width:fit-content; } .pcard .badge.sale { background:var(--sale); color:#fff; } .pcard .badge.best { background:var(--gold-500); color:var(--green-900); } .pcard .wish { position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:var(--r-pill); background:rgba(255,255,255,.94); box-shadow:var(--shadow-1); display:grid; place-items:center; z-index:3; color:var(--ink-soft); } .pcard .wish svg { width:15px; height:15px; } .pcard .wish:hover, .pcard .wish.on { color:var(--sale); } .pcard .wish.on svg { fill:currentColor; } .thumb-img { width:100%; height:100%; object-fit:contain; border-radius:var(--r-sm); background:var(--white); } /* on-image add / stepper widget — sits half over the image, half over the white body, never clipped */ .pcard-cart { position:absolute; right:10px; top:-19px; z-index:4; } .pc-add { width:40px; height:40px; border-radius:var(--r-pill); background:var(--white); color:var(--green-700); border:1.5px solid var(--green-700); display:grid; place-items:center; box-shadow:0 6px 16px rgba(31,75,58,.22); transition:transform var(--ease), background var(--ease), color var(--ease); } .pc-add svg { width:20px; height:20px; stroke-width:2.5; } .pc-add:hover { background:var(--green-700); color:var(--cream); transform:scale(1.06); } .pc-add:active { transform:scale(.94); } .pc-add.sm { width:30px; height:30px; box-shadow:var(--shadow-1); } .pc-add.sm svg { width:15px; height:15px; } .pc-oos { display:inline-block; background:#5b6660; color:#fff; font-size:.68rem; font-weight:700; padding:5px 10px; border-radius:var(--r-pill); } .pc-qty { display:inline-flex; align-items:center; background:var(--green-700); color:var(--cream); border-radius:var(--r-pill); box-shadow:0 6px 16px rgba(31,75,58,.28); overflow:hidden; } .pc-qty button { width:34px; height:40px; display:grid; place-items:center; color:var(--cream); transition:background var(--ease); } .pc-qty button:hover { background:var(--green-600); } .pc-qty button svg { width:14px; height:14px; stroke-width:2.5; } .pc-qty input { width:26px; text-align:center; border:0; outline:0; background:transparent; color:var(--cream); font:inherit; font-weight:700; font-size:.9rem; -moz-appearance:textfield; } .pc-qty input::-webkit-outer-spin-button, .pc-qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; } .pcard .body { position:relative; padding:26px 12px 12px; display:flex; flex-direction:column; gap:5px; flex:1; cursor:pointer; } .pcard .price { display:flex; align-items:baseline; gap:7px; } .pcard .price .now { font-size:1.02rem; font-weight:700; color:var(--sale); } .pcard .price .was { font-size:.78rem; color:var(--ink-soft); text-decoration:line-through; } .pcard .name { font-size:.86rem; font-weight:500; color:var(--ink); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em; } .pcard-foot { margin-top:auto; padding-top:4px; display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:.72rem; color:var(--ink-soft); } .pcard-eta { display:inline-flex; align-items:center; gap:4px; } .pcard-eta svg { width:12px; height:12px; } .stars { display:inline-flex; color:var(--gold-500); font-size:.8rem; } .stars svg { fill:none; opacity:.35; } .stars svg.on { fill:currentColor; opacity:1; } /* ---------- Countdown deal band ---------- */ .deal-band { background:linear-gradient(120deg,var(--gold-100),#fff); border:1px solid var(--gold-300); border-radius:var(--r-lg); padding:20px clamp(16px,4vw,28px); display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; } .deal-band h2 { font-family:var(--font-display); color:var(--green-700); font-size:1.3rem; } .countdown { display:flex; gap:8px; } .countdown span { background:var(--green-900); color:#fff; font-weight:700; padding:6px 10px; border-radius:var(--r-sm); font-variant-numeric:tabular-nums; } /* ---------- Concern cards ---------- */ .concerns { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; } .concern { border-radius:var(--r-md); padding:20px 16px; background:var(--green-050); border:1px solid var(--green-100); font-weight:600; color:var(--green-700); text-align:center; transition:var(--ease); display:flex; flex-direction:column; align-items:center; gap:8px; } .concern svg { width:22px; height:22px; } .concern:hover { background:var(--green-100); transform:translateY(-2px); box-shadow:var(--shadow-1); } /* ---------- Breadcrumb / toolbar ---------- */ .crumb { font-size:.82rem; color:var(--ink-soft); padding-block:14px; } .crumb a:hover { color:var(--green-700); } .list-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-block:1px solid var(--line); } .list-toolbar select { padding:8px 12px; border:1.5px solid var(--line); border-radius:var(--r-sm); font:inherit; } .filter-group { margin-bottom:6px; } .filter-group summary { padding:11px 16px; font-weight:600; font-size:.88rem; cursor:pointer; border-bottom:1px solid var(--line); } .filter-group .opts { padding:10px 16px 14px; display:flex; flex-direction:column; gap:8px; font-size:.86rem; } .filter-group label { display:flex; gap:8px; align-items:center; color:var(--ink-soft); } /* ============================================================ PDP — 3-column: gallery · info · buy-together sidebar ============================================================ */ .pdp { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(280px,340px); gap:clamp(20px,3vw,40px); align-items:start; margin-top:14px; } @media (max-width:1080px){ .pdp { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); } .pdp-side { grid-column:1 / -1; } } @media (max-width:720px){ .pdp { grid-template-columns:1fr; } } /* --- gallery --- */ .pdp-gallery { position:sticky; top:150px; display:flex; flex-direction:column; gap:12px; } @media (max-width:1080px){ .pdp-gallery { position:static; } } .pg-main { aspect-ratio:1; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); display:grid; place-items:center; overflow:hidden; } .pg-main img { width:100%; height:100%; object-fit:contain; padding:22px; transition:transform .5s ease; } .pg-main:hover img { transform:scale(1.12); } .pg-main .ph-ic { font-size:3rem; color:#b7c3bb; } .pg-thumbs { display:flex; gap:10px; } .pg-thumbs button { width:62px; height:62px; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-sm); overflow:hidden; padding:5px; transition:border-color var(--ease); } .pg-thumbs button[aria-current="true"] { border-color:var(--green-600); } .pg-thumbs img { width:100%; height:100%; object-fit:contain; } .pg-thumbs button:nth-child(2) img, .pg-thumbs button:nth-child(3) img { opacity:.6; } /* --- info column --- */ .pdp-info h1 { font-family:var(--font-display); font-size:clamp(1.35rem,2.6vw,1.9rem); color:var(--green-900); font-weight:600; margin:4px 0 8px; } .pdp-brand { color:var(--gold-600); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.76rem; } .rating-row { display:flex; align-items:center; flex-wrap:wrap; gap:7px; font-size:.85rem; color:var(--ink-soft); margin-bottom:12px; } .rating-row b { color:var(--ink); } .rating-row:hover b { color:var(--green-700); } .price-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px 14px; margin:12px 0; } .price-row .now { font-size:1.7rem; font-weight:700; color:var(--green-700); } .price-row .was { text-decoration:line-through; color:var(--ink-soft); } .price-row .save { background:var(--green-100); color:var(--green-700); font-size:.78rem; font-weight:700; padding:4px 9px; border-radius:var(--r-pill); } .pdp-highlights { display:grid; gap:7px; margin:14px 0 18px; } .pdp-highlights li { display:flex; gap:9px; font-size:.9rem; color:var(--ink); align-items:flex-start; } .pdp-highlights svg { width:16px; height:16px; color:var(--green-600); flex:none; margin-top:3px; } .pdp-field { margin:16px 0; } .pdp-field > b { font-size:.85rem; display:block; margin-bottom:8px; } .variants { display:flex; gap:8px; flex-wrap:wrap; } .variants button { border:1.5px solid var(--line); border-radius:var(--r-pill); padding:8px 16px; font-size:.86rem; transition:var(--ease); } .variants button[aria-pressed="true"] { border-color:var(--green-600); background:var(--green-050); color:var(--green-700); font-weight:600; } .pdp-buy { border:1px solid var(--line); border-radius:var(--r-md); padding:16px; background:var(--bg-alt); margin:16px 0; } .pdp-qty-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:12px; } .pdp-qty-row > b { font-size:.85rem; } .pdp-urgent { display:inline-flex; align-items:center; gap:5px; font-size:.8rem; font-weight:600; color:var(--warn); } .pdp-urgent svg { width:14px; height:14px; } .buy-row { display:flex; gap:10px; flex-wrap:wrap; } .buy-row .btn { flex:1; min-width:140px; gap:7px; } .pdp-assure { display:grid; gap:9px; font-size:.85rem; color:var(--ink-soft); margin:14px 0; } .pdp-assure li { display:flex; gap:9px; align-items:flex-start; } .pdp-assure svg { width:16px; height:16px; flex:none; margin-top:2px; color:var(--green-600); } .pdp-assure .ok { color:var(--ok); font-weight:600; } .pdp-assure b { color:var(--ink); } .pdp-share { display:flex; gap:10px; } .pdp-share button { display:inline-flex; align-items:center; gap:7px; font-size:.84rem; font-weight:600; color:var(--ink-soft); border:1.5px solid var(--line); border-radius:var(--r-pill); padding:8px 16px; transition:var(--ease); } .pdp-share button:hover { border-color:var(--green-600); color:var(--green-700); } .pdp-share button svg { width:15px; height:15px; } .pdp-share button.added { border-color:var(--green-600); background:var(--green-050); color:var(--green-700); } .pdp-share button[data-wish].on { color:var(--sale); border-color:var(--sale); } .pdp-share button[data-wish].on svg { fill:currentColor; } /* --- column 3: frequently bought together --- */ .pdp-side { position:sticky; top:150px; display:flex; flex-direction:column; gap:16px; } @media (max-width:1080px){ .pdp-side { position:static; flex-direction:row; flex-wrap:wrap; align-items:flex-start; } .pdp-side > * { flex:1; min-width:280px; } } .fbt { border:1px solid var(--gold-300); border-radius:var(--r-md); overflow:hidden; background:linear-gradient(180deg,var(--gold-100),#fff); } .fbt-head { padding:14px 14px 10px; } .fbt-head b { display:flex; align-items:center; gap:7px; font-family:var(--font-display); color:var(--green-700); font-size:1rem; } .fbt-head b svg { width:17px; height:17px; } .fbt-head span { font-size:.78rem; } .fbt-list { padding:4px 10px 10px; display:flex; flex-direction:column; } .fbt-item { display:grid; grid-template-columns:20px 44px 1fr; align-items:center; gap:9px; padding:9px 4px; border-top:1px solid rgba(20,58,34,.08); cursor:pointer; position:relative; } .fbt-item:first-child { border-top:0; } .fbt-item input { position:absolute; opacity:0; pointer-events:none; } .fbt-check { width:20px; height:20px; border:1.5px solid var(--green-600); border-radius:6px; display:grid; place-items:center; color:#fff; background:#fff; transition:var(--ease); } .fbt-check svg { width:13px; height:13px; opacity:0; } .fbt-item input:checked ~ .fbt-check { background:var(--green-700); } .fbt-item input:checked ~ .fbt-check svg { opacity:1; } .fbt-item.locked { cursor:default; } .fbt-item.locked .fbt-check { background:var(--green-600); opacity:.6; } .fbt-thumb { width:44px; height:44px; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; display:grid; place-items:center; } .fbt-thumb img { width:100%; height:100%; object-fit:contain; padding:3px; } .fbt-thumb svg { width:18px; height:18px; color:#b7c3bb; } .fbt-txt { min-width:0; font-size:.82rem; } .fbt-txt a { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; } .fbt-txt a:hover { color:var(--green-700); } .fbt-txt b { display:block; color:var(--green-700); margin-top:2px; } .fbt-foot { padding:12px 14px 14px; border-top:1px solid var(--gold-300); background:rgba(255,255,255,.5); } .fbt-total { display:flex; justify-content:space-between; align-items:baseline; font-size:.9rem; margin-bottom:10px; } .fbt-total b { font-size:1.15rem; font-weight:700; color:var(--green-700); } .also-bought { border:1px solid var(--line); border-radius:var(--r-md); padding:14px; } .also-bought > b { display:flex; align-items:center; gap:7px; font-family:var(--font-display); color:var(--green-700); font-size:.95rem; margin-bottom:10px; } .also-bought > b svg { width:16px; height:16px; } .also-bought ul { display:flex; flex-direction:column; gap:12px; } .also-bought li { display:grid; grid-template-columns:48px 1fr; gap:10px; align-items:center; } .ab-thumb { width:48px; height:48px; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; display:grid; place-items:center; } .ab-thumb img { width:100%; height:100%; object-fit:contain; padding:3px; } .ab-thumb svg { width:18px; height:18px; color:#b7c3bb; } .ab-txt { min-width:0; font-size:.82rem; } .ab-txt span { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; } .ab-txt em { display:flex; align-items:center; gap:6px; font-style:normal; margin-top:3px; font-size:.78rem; color:var(--ink-soft); } .ab-txt em b { color:var(--green-700); } .ab-txt:hover span { color:var(--green-700); } /* --- full-width detail tabs --- */ .pdp-detail { margin:44px 0 8px; } .pdp-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto; position:sticky; top:110px; background:var(--card); z-index:5; } .pdp-tabs button { padding:12px 18px; font-weight:600; font-size:.9rem; color:var(--ink-soft); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; } .pdp-tabs button[aria-selected="true"] { color:var(--green-700); border-color:var(--green-600); } .pdp-panels { padding-top:22px; } .pdp-panel .lead { font-size:.95rem; color:var(--ink); max-width:75ch; margin-bottom:20px; } .pdp-panel h4 { font-family:var(--font-display); color:var(--green-700); font-size:1rem; margin:18px 0 10px; } .pdp-cols { display:grid; grid-template-columns:1fr 1fr; gap:10px 40px; } @media (max-width:640px){ .pdp-cols { grid-template-columns:1fr; } } ul.tick { display:flex; flex-direction:column; gap:7px; } ul.tick li { position:relative; padding-left:22px; font-size:.9rem; color:var(--ink-soft); } ul.tick li::before { content:""; position:absolute; left:0; top:3px; width:14px; height:14px; background:var(--green-600); border-radius:4px; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; } .chip-row { display:flex; flex-wrap:wrap; gap:8px; } .chip-row span { background:var(--green-050); border:1px solid var(--green-100); color:var(--green-700); font-size:.82rem; font-weight:600; padding:6px 13px; border-radius:var(--r-pill); } .spec-table { width:100%; border-collapse:collapse; max-width:640px; } .spec-table th, .spec-table td { text-align:start; padding:11px 14px; font-size:.88rem; border:1px solid var(--line); } .spec-table th { background:var(--green-050); color:var(--green-700); font-weight:600; width:40%; } .rev-summary { display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px; margin-bottom:20px; } @media (max-width:640px){ .rev-summary { grid-template-columns:1fr; gap:14px; text-align:center; } } .rev-score { display:flex; flex-direction:column; align-items:center; gap:4px; } .rev-score b { font-size:2.2rem; font-weight:700; color:var(--green-700); line-height:1; } .rev-score .muted { font-size:.76rem; } .rev-bars { display:flex; flex-direction:column; gap:6px; } .rev-bar { display:grid; grid-template-columns:28px 1fr 32px; align-items:center; gap:8px; font-size:.78rem; color:var(--ink-soft); } .rev-bar i { display:block; height:7px; background:rgba(20,58,34,.1); border-radius:var(--r-pill); overflow:hidden; } .rev-bar em { display:block; height:100%; background:var(--gold-500); border-radius:var(--r-pill); } .rev-list { display:flex; flex-direction:column; gap:14px; } .rev-card { border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; } .rev-top { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:.85rem; margin-bottom:7px; } .rev-top .stars { font-size:.75rem; } .rev-verified { display:inline-flex; align-items:center; gap:4px; font-size:.72rem; color:var(--green-700); font-weight:600; } .rev-verified svg { width:13px; height:13px; } .rev-card p { font-size:.88rem; color:var(--ink-soft); } .qa-list { display:flex; flex-direction:column; gap:14px; } .qa-item { border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; } .qa-q { font-weight:600; font-size:.9rem; display:flex; gap:8px; align-items:flex-start; } .qa-a { font-size:.88rem; color:var(--ink-soft); display:flex; gap:8px; align-items:flex-start; margin-top:8px; } .qa-q svg, .qa-a svg { width:15px; height:15px; flex:none; margin-top:3px; color:var(--green-600); } /* ---------- Cart / Checkout ---------- */ .cart-layout, .checkout-layout { display:grid; grid-template-columns:1fr 360px; gap:32px; align-items:start; } @media (max-width:900px){ .cart-layout, .checkout-layout { grid-template-columns:1fr; } } .cart-row { display:grid; grid-template-columns:88px 1fr auto; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); align-items:center; } .cart-row .thumb { width:88px; height:88px; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; } .summary { border:1px solid var(--line); border-radius:var(--r-md); padding:20px; position:sticky; top:150px; } .summary h3 { font-family:var(--font-display); color:var(--green-700); margin-bottom:14px; } .summary .line { display:flex; justify-content:space-between; padding:7px 0; font-size:.92rem; color:var(--ink-soft); } .summary .line.total { border-top:1px solid var(--line); margin-top:8px; padding-top:12px; font-size:1.1rem; font-weight:700; color:var(--ink); } .coupon { display:flex; gap:8px; margin:12px 0; } .coupon input { flex:1; border:1.5px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; font:inherit; } .field { margin-bottom:14px; } .field label { display:block; font-size:.84rem; font-weight:600; margin-bottom:5px; } .field input, .field select, .field textarea { width:100%; border:1.5px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; font:inherit; } .field input:focus, .field select:focus, .field textarea:focus { outline:2px solid var(--green-100); border-color:var(--green-600); } .pay-methods { display:flex; flex-direction:column; gap:10px; } .pay-methods label { display:flex; gap:10px; align-items:center; border:1.5px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; font-size:.9rem; } .step-head { display:flex; align-items:center; gap:10px; font-family:var(--font-display); color:var(--green-700); font-size:1.15rem; margin:22px 0 12px; } .step-head .num { width:26px; height:26px; background:var(--green-700); color:#fff; border-radius:var(--r-pill); display:grid; place-items:center; font-size:.85rem; font-family:var(--font-en); } .step-head svg { width:18px; height:18px; color:var(--green-600); } .pay-methods label svg { width:17px; height:17px; color:var(--green-700); } .pay-methods label:has(input:checked) { border-color:var(--green-600); background:var(--green-050); } .co-secure { display:flex; align-items:center; gap:7px; justify-content:center; font-size:.85rem; color:var(--ink-soft); font-weight:600; } .co-secure svg { width:16px; height:16px; color:var(--green-600); } /* ---------- Account ---------- */ .acct-layout { display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:start; } @media (max-width:820px){ .acct-layout { grid-template-columns:1fr; } } .acct-nav a { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--r-sm); font-size:.9rem; } .acct-nav a svg { width:17px; height:17px; color:var(--green-600); } .acct-nav a[aria-current="page"], .acct-nav a:hover { background:var(--green-050); color:var(--green-700); font-weight:600; } .order-card { border:1px solid var(--line); border-radius:var(--r-md); padding:16px; margin-bottom:14px; } .order-card .top { display:flex; justify-content:space-between; font-size:.84rem; color:var(--ink-soft); border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:10px; } .status { font-size:.76rem; font-weight:700; padding:3px 10px; border-radius:var(--r-pill); display:inline-flex; align-items:center; gap:5px; } .status svg { width:13px; height:13px; } .status.delivered { background:var(--green-100); color:var(--green-700); } .status.transit { background:var(--gold-100); color:var(--gold-600); } .status.processing { background:#eef1f0; color:var(--ink-soft); } /* ---------- Footer ---------- */ .site-footer { background:var(--green-900); color:#c7d6cc; margin-top:56px; } .footer-grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:28px; padding-block:44px; } @media (max-width:760px){ .footer-grid { grid-template-columns:1fr 1fr; } } .site-footer h4 { color:#fff; font-size:.95rem; margin-bottom:12px; } .site-footer a:hover { color:var(--gold-300); } .site-footer li { padding:5px 0; font-size:.86rem; } .footer-bottom { border-top:1px solid rgba(255,255,255,.12); padding-block:16px; font-size:.8rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; } /* ---------- Drawer (cart) — glassmorphism ---------- */ .drawer-scrim { position:fixed; inset:0; background:rgba(20,58,34,.42); opacity:0; pointer-events:none; transition:var(--ease); z-index:60; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); } .drawer-scrim.open { opacity:1; pointer-events:auto; } .drawer { position:fixed; top:0; right:0; height:100%; width:min(410px,92vw); z-index:61; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.75,.3,1); background:linear-gradient(160deg, rgba(255,255,255,.82), rgba(243,248,244,.86)); -webkit-backdrop-filter:saturate(180%) blur(30px); backdrop-filter:saturate(180%) blur(30px); border-left:1px solid rgba(255,255,255,.6); box-shadow:-24px 0 70px rgba(20,58,34,.28); } .drawer.open { transform:none; } .drawer header { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.4); font-family:var(--font-display); color:var(--green-700); font-size:1.05rem; } .drawer header > span { display:flex; align-items:center; gap:9px; } .drawer header svg { width:18px; height:18px; } .drawer .items { flex:1; overflow-y:auto; padding:14px 18px; } .drawer .items .cart-row { border-bottom:1px solid rgba(20,58,34,.09); } .drawer footer { padding:16px 18px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.5); } .drawer footer .line.total { display:flex; justify-content:space-between; font-size:1.05rem; font-weight:700; margin:10px 0 12px; } .drawer footer .btn-block { gap:7px; } /* free-delivery progress */ .ship-progress { font-size:.8rem; } .ship-progress .sp-row { display:flex; align-items:center; gap:7px; color:var(--warn); font-weight:600; margin-bottom:8px; } .ship-progress .sp-row svg { width:16px; height:16px; flex:none; } .ship-progress.done .sp-row { color:var(--green-700); } .ship-progress .sp-track { height:7px; border-radius:var(--r-pill); background:rgba(20,58,34,.1); overflow:hidden; } .ship-progress .sp-fill { height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg, var(--gold-500), var(--gold-300)); transition:width .5s cubic-bezier(.2,.75,.3,1); } .ship-progress.done .sp-fill { background:linear-gradient(90deg, var(--green-600), var(--green-500,#3a7d4e)); } /* ---------- Utility ---------- */ .muted { color:var(--ink-soft); } .center { text-align:center; } .stack-lg > * + * { margin-top:40px; } .empty-state { text-align:center; padding:60px 20px; color:var(--ink-soft); } .empty-state .big { font-size:2.4rem; margin-bottom:10px; } .skeleton { background:linear-gradient(90deg,#eef1ef,#f7f8f7,#eef1ef); background-size:200% 100%; animation:sk 1.2s infinite; border-radius:var(--r-sm); } @keyframes sk { to { background-position:-200% 0; } } .icon-link { display:inline-grid; place-items:center; padding:6px; color:var(--ink-soft); border-radius:var(--r-sm); } .icon-link:hover { color:var(--sale); background:var(--bg-alt); } /* ============================================================ Icons, animation, glass chrome (added in refinement pass) ============================================================ */ /* --- shared icon-button bump keyframe --- */ @keyframes bump { 30%{ transform:scale(1.25); } 60%{ transform:scale(.9); } 100%{ transform:scale(1); } } .search button svg { width:18px; height:18px; } /* --- USP / trust / hero icon circles --- */ .usp .ic svg, .trust-band .ic svg { width:20px; height:20px; } .cat-tile .ic { width:46px; height:46px; margin:0 auto; border-radius:var(--r-pill); display:grid; place-items:center; background:var(--green-050); color:var(--green-700); transition:var(--ease); } .cat-tile .ic svg { width:22px; height:22px; } .cat-tile:hover .ic { background:var(--green-100); transform:translateY(-2px); } .hero .eyebrow { display:inline-flex; align-items:center; gap:7px; } /* --- buttons: icon + label alignment --- */ .btn { line-height:1; } .btn span { display:inline-block; } .btn.added { background:var(--green-600); color:#fff; } .btn.add svg { transition:transform var(--ease); } .btn.added svg { transform:scale(1.15); } /* --- countdown polish --- */ .countdown { align-items:center; } .countdown i { color:var(--green-700); font-weight:700; font-style:normal; } .countdown span { min-width:34px; text-align:center; box-shadow:var(--shadow-1); } /* --- drawer rows --- */ .drawer .cart-row { display:grid; grid-template-columns:56px 1fr auto; gap:12px; padding:14px 0; align-items:start; } .drawer .cart-row .thumb { width:56px; height:56px; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:#fff; } .drawer .cart-row-main { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; } .drawer .cart-row-main > * { max-width:100%; } .drawer .cart-row-main .qty { align-self:flex-start; margin-top:2px; } .drawer .cart-row-main b { font-size:.85rem; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .drawer .cart-row-main .muted { font-size:.78rem; } .drawer .cart-row-end { display:flex; flex-direction:column; align-items:flex-end; gap:8px; } .drawer .cart-row-end b { font-size:.9rem; white-space:nowrap; } .drawer .cart-row-end .icon-link { padding:4px; } .drawer .cart-row-end .icon-link svg { width:16px; height:16px; } /* --- scroll reveal --- */ [data-reveal] { opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); } [data-reveal].in { opacity:1; transform:none; } [data-reveal]:nth-child(2){ transition-delay:.04s; } [data-reveal]:nth-child(3){ transition-delay:.08s; } [data-reveal]:nth-child(4){ transition-delay:.12s; } [data-reveal]:nth-child(5){ transition-delay:.16s; } @media (prefers-reduced-motion: reduce){ [data-reveal] { opacity:1 !important; transform:none !important; transition:none; } * { scroll-behavior:auto !important; } } /* --- hero staggered entrance --- */ .hero .eyebrow, .hero h1, .hero p, .hero > .hero-inner > div > div, .hero-stats { animation:heroIn .6s both cubic-bezier(.2,.7,.3,1); } .hero h1 { animation-delay:.06s; } .hero p { animation-delay:.12s; } .hero .hero-inner > div > div:last-child { animation-delay:.18s; } .hero-stats { animation-delay:.24s; } .hero-media { animation:heroIn .7s .1s both cubic-bezier(.2,.7,.3,1); } @keyframes heroIn { from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){ .hero *, .hero-media { animation:none !important; } } /* --- pcard hover lift --- */ .pcard { will-change:transform; } .pcard:hover { transform:translateY(-4px); } .wish svg { width:16px; height:16px; } .wish.on { color:var(--sale); } .wish.on svg { fill:currentColor; } /* ============================================================ Floating chrome — edge cart tab · premium live chat · to-top (markup injected by salonix.js) ============================================================ */ .glass { background:rgba(255,255,255,.62); -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px); border:1px solid rgba(255,255,255,.55); } :root:not([data-theme="light"]) .glass { background:rgba(255,255,255,.62); } /* --- Edge cart tab: vertically centred, stuck to the right edge --- */ .float-cart { position:fixed; right:0; top:50%; z-index:54; transform:translateY(-50%) translateX(calc(100% + 12px)); display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px 12px 12px; border-radius:16px 0 0 16px; background:linear-gradient(150deg, rgba(42,107,64,.82), rgba(20,58,34,.82)); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border:1px solid rgba(255,255,255,.28); border-right:0; box-shadow:-10px 14px 44px rgba(20,58,34,.30); color:#fff; cursor:pointer; transition:transform .4s cubic-bezier(.2,.75,.3,1), box-shadow var(--ease); } .float-cart.show { transform:translateY(-50%) translateX(0); } .float-cart:hover { box-shadow:-14px 18px 54px rgba(20,58,34,.40); } .float-cart .fc-ic { position:relative; display:grid; place-items:center; width:34px; height:34px; } .float-cart .fc-ic svg { width:22px; height:22px; } .float-cart .fc-count { position:absolute; top:-6px; right:-8px; min-width:19px; height:19px; padding:0 4px; border-radius:var(--r-pill); background:var(--gold-400,#e6c86e); color:var(--green-900); font-size:.68rem; font-weight:800; display:grid; place-items:center; border:2px solid var(--green-900); } .float-cart .fc-total { font-size:.72rem; font-weight:700; letter-spacing:.02em; white-space:nowrap; } .float-cart.empty .fc-count { display:none; } .float-cart.empty .fc-total { opacity:.6; } @media (max-width:600px){ .float-cart { padding:11px 9px; border-radius:14px 0 0 14px; } .float-cart .fc-ic svg { width:20px; height:20px; } .float-cart .fc-total { font-size:.66rem; } } /* --- Back to top --- */ #toTop { position:fixed; right:20px; bottom:96px; z-index:55; width:42px; height:42px; border-radius:var(--r-pill); display:grid; place-items:center; background:rgba(20,58,34,.5); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.3); color:#fff; opacity:0; transform:translateY(20px) scale(.9); pointer-events:none; transition:var(--ease); } #toTop.show { opacity:1; transform:none; pointer-events:auto; } #toTop:hover { background:rgba(20,58,34,.75); } #toTop svg { width:19px; height:19px; } /* --- Premium live-chat widget --- */ .chat-widget { position:fixed; right:20px; bottom:20px; z-index:56; } .chat-fab { position:relative; width:60px; height:60px; border-radius:var(--r-pill); display:grid; place-items:center; color:#fff; cursor:pointer; background:radial-gradient(120% 120% at 30% 25%, #3a7d4e 0%, #1f4d2e 55%, #143a22 100%); box-shadow:0 16px 44px rgba(20,58,34,.42), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -6px 14px rgba(0,0,0,.25); transition:transform var(--ease), box-shadow var(--ease); } .chat-fab:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 22px 54px rgba(20,58,34,.5), inset 0 1px 0 rgba(255,255,255,.3); } .chat-fab:active { transform:scale(.97); } .chat-fab svg { width:26px; height:26px; position:relative; z-index:2; transition:transform var(--ease); } .chat-fab.active svg { transform:rotate(8deg) scale(.92); } .chat-fab .chat-fab-ring { position:absolute; inset:0; border-radius:var(--r-pill); border:2px solid var(--gold-500); opacity:0; animation:chatRing 2.8s ease-out infinite; } .chat-fab .chat-fab-dot { position:absolute; top:9px; right:9px; width:13px; height:13px; border-radius:var(--r-pill); background:#3ad07f; border:2.5px solid #fff; z-index:3; box-shadow:0 0 0 0 rgba(58,208,127,.6); animation:chatPulse 2.4s ease-out infinite; } @keyframes chatRing { 0%{ opacity:.6; transform:scale(1); } 100%{ opacity:0; transform:scale(1.75); } } @keyframes chatPulse { 0%{ box-shadow:0 0 0 0 rgba(58,208,127,.55); } 70%{ box-shadow:0 0 0 10px rgba(58,208,127,0); } 100%{ box-shadow:0 0 0 0 rgba(58,208,127,0); } } @media (prefers-reduced-motion: reduce){ .chat-fab-ring, .chat-fab-dot { animation:none; } } .chat-panel { position:absolute; right:0; bottom:74px; width:344px; max-width:calc(100vw - 32px); height:min(460px, calc(100vh - 130px)); display:flex; flex-direction:column; overflow:hidden; border-radius:20px; background:rgba(255,255,255,.78); -webkit-backdrop-filter:saturate(180%) blur(26px); backdrop-filter:saturate(180%) blur(26px); border:1px solid rgba(255,255,255,.6); box-shadow:0 28px 80px rgba(20,58,34,.30); transform-origin:bottom right; animation:chatIn .28s cubic-bezier(.2,.75,.3,1); } @keyframes chatIn { from{ opacity:0; transform:translateY(12px) scale(.96); } to{ opacity:1; transform:none; } } .chat-head { display:flex; align-items:center; gap:10px; padding:14px 14px 12px; background:linear-gradient(150deg, var(--green-700), var(--green-900)); color:#fff; } .chat-avatar { width:36px; height:36px; border-radius:var(--r-pill); display:grid; place-items:center; background:rgba(255,255,255,.16); } .chat-avatar svg { width:18px; height:18px; } .chat-id { flex:1; line-height:1.25; } .chat-id b { font-size:.9rem; display:block; } .chat-id em { font-style:normal; font-size:.72rem; color:#cfe6d6; display:flex; align-items:center; gap:6px; } .chat-online { width:8px; height:8px; border-radius:var(--r-pill); background:#3ad07f; box-shadow:0 0 0 3px rgba(58,208,127,.25); } .chat-close { color:#fff; opacity:.85; display:grid; place-items:center; padding:4px; } .chat-close:hover { opacity:1; } .chat-close svg { width:18px; height:18px; } .chat-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; } .chat-msg { max-width:80%; padding:9px 13px; border-radius:14px; font-size:.86rem; line-height:1.4; } .chat-msg.bot { align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:5px; } .chat-msg.me { align-self:flex-end; background:var(--green-700); color:#fff; border-bottom-right-radius:5px; } .chat-quick { display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 10px; } .chat-quick button { font-size:.78rem; padding:7px 12px; border-radius:var(--r-pill); border:1.5px solid var(--green-600); color:var(--green-700); background:rgba(255,255,255,.7); font-weight:600; } .chat-quick button:hover { background:var(--green-700); color:#fff; } .chat-input { display:flex; gap:8px; padding:12px; border-top:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.5); } .chat-input input { flex:1; border:1.5px solid var(--line); border-radius:var(--r-pill); padding:10px 15px; font:inherit; background:#fff; } .chat-input input:focus { outline:2px solid var(--green-100); border-color:var(--green-600); } .chat-input button { width:40px; height:40px; flex:none; border-radius:var(--r-pill); background:var(--green-700); color:#fff; display:grid; place-items:center; } .chat-input button:hover { background:var(--green-600); } .chat-input button svg { width:17px; height:17px; } @media (max-width:600px){ .chat-widget { right:14px; bottom:14px; } .chat-panel { width:calc(100vw - 28px); height:min(70vh, 460px); right:0; } } /* --- cart-badge bump on add --- */ [data-open-cart].bump svg, .icon-btn.bump svg { animation:bump .4s ease; } /* cart page row controls */ .cart-row-controls { display:flex; align-items:center; gap:12px; margin-top:8px; } .summary .freeship { display:flex; align-items:center; gap:6px; color:var(--warn); font-weight:500; } .summary .freeship:empty { display:none; } .coupon .btn { flex:none; } .empty-state .big svg { width:44px; height:44px; } /* ============================================================ Quantity stepper — clean pill ============================================================ */ .qty { display:inline-flex; align-items:center; gap:3px; padding:3px; background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r-pill); } .qty button { width:30px; height:30px; border-radius:var(--r-pill); display:grid; place-items:center; color:var(--green-700); background:#fff; box-shadow:var(--shadow-1); transition:background var(--ease), color var(--ease); } .qty button:hover { background:var(--green-700); color:#fff; } .qty button:active { transform:scale(.92); } .qty button svg { width:14px; height:14px; } .qty input { width:34px; text-align:center; border:0; outline:0; background:transparent; font:inherit; font-weight:700; font-size:.92rem; color:var(--ink); -moz-appearance:textfield; } .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; } .qty.qty-sm { padding:2px; gap:1px; } .qty.qty-sm button { width:24px; height:24px; box-shadow:none; } .qty.qty-sm button svg { width:11px; height:11px; } .qty.qty-sm input { width:24px; font-size:.8rem; font-weight:600; } /* card action area: compact stepper + add button, inline, equal height */ .card-buy { display:flex; align-items:stretch; gap:7px; margin-top:12px; --buy-h:38px; } .card-buy .qty { flex:none; height:var(--buy-h); padding:0 3px; gap:1px; } .card-buy .qty button { width:28px; height:28px; } .card-buy .qty input { width:26px; } .card-buy .btn { flex:1; min-width:0; height:var(--buy-h); padding:0 10px; gap:6px; font-size:.84rem; white-space:nowrap; } .card-buy .btn svg { width:15px; height:15px; } .card-buy .btn span { overflow:hidden; text-overflow:ellipsis; } .card-buy .btn.added svg { transform:scale(1.15); } /* on very narrow cards, stack so nothing gets cramped */ @media (max-width:400px){ .card-buy { flex-wrap:wrap; } .card-buy .btn { flex-basis:100%; } } /* ============================================================ App-shell layout — Chaldal-style: fixed top bar + fixed left rail, only the centre content column scrolls ============================================================ */ :root { --rail-w:240px; --util-h:36px; --chrome-h:112px; --bottomnav-h:0px; } .app-shell { background:var(--bg); } .app-shell .site-header .nav-bar { display:none; } /* fixed top chrome: util strip + header, both full-width */ .app-shell .util-bar { position:fixed; top:0; left:0; right:0; z-index:52; } .app-shell .site-header { position:fixed; top:var(--util-h); left:0; right:0; z-index:51; } .app-shell .site-header > .container, .app-shell .util-bar > .container, .app-shell .site-footer > .container { max-width:none; } /* fixed left category rail (desktop) */ .appwrap { display:block; } .app-shell .shell-rail { position:fixed; left:0; top:var(--chrome-h); bottom:0; width:var(--rail-w); z-index:40; border-right:1px solid var(--line); background:var(--card); } .rail-scroll { height:100%; overflow-y:auto; padding:14px 0 30px; } /* the scrolling content column sits to the right of the rail, below the chrome */ .app-shell .shell-main { min-width:0; margin-left:var(--rail-w); padding:calc(var(--chrome-h) + 14px) clamp(14px,2.4vw,32px) 56px; } .app-shell .site-footer { margin-left:var(--rail-w); } .rail-quick { display:flex; flex-direction:column; padding:0 8px 8px; } .rail-quick a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-sm); font-size:.86rem; font-weight:500; } .rail-quick a svg { width:16px; height:16px; color:var(--gold-600); } .rail-quick a:hover { background:var(--green-050); color:var(--green-700); } .rail-pro { display:flex; align-items:center; gap:9px; margin:4px 10px 10px; padding:10px 12px; border-radius:var(--r-sm); background:linear-gradient(120deg,var(--gold-100),var(--cream)); border:1px solid var(--gold-300); font-size:.8rem; font-weight:600; color:var(--gold-600); } .rail-pro svg { width:16px; height:16px; flex:none; } .rail-cats { display:flex; flex-direction:column; padding:0 8px; } .rail-cats a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-sm); font-size:.87rem; font-weight:500; color:var(--ink); position:relative; } .rail-cats a svg { width:17px; height:17px; color:var(--green-600); flex:none; } .rail-cats a span { flex:1; } .rail-cats a em { font-style:normal; font-size:.72rem; color:var(--ink-soft); } .rail-cats a:hover { background:var(--green-050); color:var(--green-700); } .rail-cats a.on { background:var(--green-050); color:var(--green-700); font-weight:700; } .rail-cats a.on::before { content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:3px; background:var(--green-700); } .rail-sep { height:1px; background:var(--line); margin:8px 12px; } .rail-scrim { position:fixed; inset:0; background:rgba(20,53,40,.45); opacity:0; pointer-events:none; transition:var(--ease); z-index:64; } .rail-scrim.open { opacity:1; pointer-events:auto; } .rail-scrim { position:fixed; inset:0; background:rgba(20,53,40,.45); opacity:0; pointer-events:none; transition:var(--ease); z-index:64; } .rail-scrim.open { opacity:1; pointer-events:auto; } /* ---- tablet: narrower rail ---- */ @media (max-width:1200px){ :root { --rail-w:216px; } } /* ---- mobile: rail becomes a drawer, app-style bottom nav ---- */ @media (max-width:1024px){ .app-shell .menu-toggle { display:grid; } .app-shell .shell-main { margin-left:0; padding-bottom:calc(var(--bottomnav-h,64px) + 20px); } .app-shell .site-footer { margin-left:0; margin-bottom:var(--bottomnav-h,64px); } .app-shell .shell-rail { top:0; height:100%; width:min(300px,86vw); z-index:65; transform:translateX(-100%); transition:transform .3s cubic-bezier(.2,.75,.3,1); border-right:0; box-shadow:12px 0 44px rgba(20,53,40,.22); } .app-shell .shell-rail.open { transform:none; } .rail-scroll { padding-top:16px; } .app-shell #floatCart, .app-shell #toTop { display:none; } } /* ---- app-style bottom navigation (mobile only) ---- */ .bottom-nav { display:none; } @media (max-width:1024px){ .app-shell { --bottomnav-h:60px; } .bottom-nav { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; height:calc(60px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:var(--card); border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(20,53,40,.10); } .bottom-nav a, .bottom-nav button { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:.66rem; font-weight:600; color:var(--ink-soft); position:relative; background:none; } .bottom-nav svg { width:21px; height:21px; } .bottom-nav .on { color:var(--green-700); } .bottom-nav .on::before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:26px; height:3px; border-radius:3px; background:var(--green-700); } .bottom-nav .bn-count { position:absolute; top:4px; right:calc(50% - 20px); min-width:16px; height:16px; padding:0 4px; border-radius:var(--r-pill); background:var(--gold-500); color:var(--green-900); font-size:.62rem; font-weight:800; display:grid; place-items:center; } .chat-widget { bottom:calc(var(--bottomnav-h,60px) + 14px); } } /* ============================================================ Quick-view modal (Chaldal-style) ============================================================ */ .qv-modal { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px; } .qv-scrim { position:absolute; inset:0; background:rgba(20,53,40,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); } .qv { position:relative; z-index:1; width:min(780px,100%); max-height:calc(100vh - 40px); overflow-y:auto; background:var(--card); border-radius:var(--r-lg); box-shadow:0 32px 90px rgba(20,53,40,.35); animation:chatIn .26s cubic-bezier(.2,.75,.3,1); } .qv-close { position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px; border-radius:var(--r-pill); background:var(--bg-alt); display:grid; place-items:center; color:var(--ink-soft); } .qv-close:hover { background:var(--green-050); color:var(--green-700); } .qv-close svg { width:18px; height:18px; } .qv-grid { display:grid; grid-template-columns:280px 1fr; gap:24px; padding:24px; } @media (max-width:640px){ .qv-grid { grid-template-columns:1fr; gap:16px; padding:18px; } } .qv-media { position:relative; aspect-ratio:1; background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; } .qv-img { width:100%; height:100%; object-fit:contain; padding:18px; } .qv-media .badge.sale { position:absolute; top:10px; left:10px; background:var(--sale); color:#fff; font-size:.72rem; font-weight:700; padding:3px 8px; border-radius:var(--r-pill); } .qv-info h3 { font-family:var(--font-display); font-size:clamp(1.15rem,2.4vw,1.5rem); color:var(--green-900); font-weight:600; margin:4px 0 6px; } .qv-sub { font-size:.82rem; color:var(--ink-soft); display:flex; align-items:center; gap:6px; margin-bottom:12px; } .qv-sub svg { width:13px; height:13px; } .qv-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0; } .qv-step { box-shadow:none; border:1.5px solid var(--green-700); } .qv-step button { color:var(--green-700); background:var(--white); height:42px; } .qv-step button:hover { background:var(--green-050); } .qv-step input { color:var(--green-900); } .qv-actions .btn { gap:7px; } .qv-desc { font-size:.86rem; color:var(--ink-soft); margin:10px 0; max-width:52ch; } .qv-more { display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:600; color:var(--gold-600); } .qv-more svg { width:14px; height:14px; } .qv-fbt { border-top:1px solid var(--line); padding:18px 24px; } .qv-fbt > b { display:flex; align-items:center; gap:7px; font-family:var(--font-display); color:var(--green-700); font-size:.95rem; margin-bottom:12px; } .qv-fbt > b svg { width:16px; height:16px; } .qv-fbt-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; } .qv-fbt-item { position:relative; border:1px solid var(--line); border-radius:var(--r-md); padding:10px; font-size:.8rem; } .qv-fbt-thumb { height:56px; display:grid; place-items:center; margin-bottom:6px; } .qv-fbt-thumb img { max-height:100%; object-fit:contain; } .qv-fbt-thumb svg { width:22px; height:22px; color:#b7c3bb; } .qv-fbt-item a { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; } .qv-fbt-item > span { display:block; color:var(--green-700); font-weight:700; margin-top:3px; } .qv-fbt-item .pc-add { position:absolute; right:8px; bottom:8px; } /* ---- app-shell extras ---- */ .app-shell .site-footer { margin-top:0; } .app-shell .shell-main > .section:first-child { padding-top:0; } .app-shell .hero { border-radius:var(--r-lg); } /* category listing — filter bar */ .list-title { font-family:var(--font-display); color:var(--green-900); font-size:clamp(1.2rem,2.4vw,1.7rem); font-weight:600; margin:2px 0 14px; } .filter-bar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); } .fb-toggle { display:none; align-items:center; gap:7px; font-weight:600; font-size:.86rem; padding:9px 14px; border:1.5px solid var(--line); border-radius:var(--r-pill); color:var(--green-700); } .fb-toggle svg { width:15px; height:15px; } .fb-panel { display:flex; flex-wrap:wrap; gap:8px 10px; flex:1; } .fb-group { border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card); font-size:.84rem; align-self:flex-start; } .fb-group summary { padding:8px 13px; font-weight:600; cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px; } .fb-group summary::after { content:"▾"; font-size:.7rem; color:var(--ink-soft); } .fb-group[open] summary::after { content:"▴"; } .fb-group .opts { padding:4px 13px 12px; display:flex; flex-direction:column; gap:7px; max-height:220px; overflow-y:auto; min-width:150px; } .fb-group .opts label { display:flex; gap:8px; align-items:center; color:var(--ink-soft); } .fb-right { display:flex; align-items:center; gap:14px; margin-inline-start:auto; } .fb-count { font-size:.82rem; color:var(--ink-soft); } .fb-count b { color:var(--ink); } .fb-sort { display:flex; align-items:center; gap:7px; font-size:.82rem; color:var(--ink-soft); } .fb-sort select { padding:8px 11px; border:1.5px solid var(--line); border-radius:var(--r-sm); font:inherit; background:var(--card); } @media (max-width:820px){ .fb-toggle { display:inline-flex; } .fb-panel { display:none; order:3; flex-basis:100%; flex-direction:column; } .filter-bar.open .fb-panel { display:flex; } .fb-group { width:100%; } .fb-right { margin-inline-start:0; } } /* header: location chip (shell) */ .loc-chip { display:inline-flex; align-items:center; gap:5px; font-size:.82rem; font-weight:600; color:var(--green-700); padding:7px 12px; border:1.5px solid var(--line); border-radius:var(--r-pill); white-space:nowrap; } .loc-chip svg { width:14px; height:14px; } @media (max-width:1024px){ .loc-chip { display:none; } } /* PDP inside shell — keep 3 columns comfortable */ .app-shell .pdp { grid-template-columns:minmax(0,0.95fr) minmax(0,1fr) minmax(260px,340px); } @media (max-width:1180px){ .app-shell .pdp { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); } .app-shell .pdp-side { grid-column:1 / -1; } } @media (max-width:720px){ .app-shell .pdp { grid-template-columns:1fr; } } .app-shell .header-actions { gap:10px; } .app-shell .icon-btn svg { width:22px; height:22px; }