/* ========================================================================== GLOBAL STORE — Universal Dropshipping Storefront Design System Light + Dark mode via [data-theme] on ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap'); :root{ --accent:#ff5a1f; --accent-dark:#e6480f; --accent-light:#ffe4d6; --blue:#2563eb; --blue-light:#e8effe; --green:#16a34a; --gold:#f5a524; --radius:14px; --radius-sm:9px; --radius-lg:22px; --font-head:"Poppins","Segoe UI",sans-serif; --font-body:"Inter","Segoe UI",sans-serif; --ease:cubic-bezier(.16,.8,.28,1); --shadow-sm:0 2px 10px rgba(20,20,30,.06); --shadow-md:0 12px 30px rgba(20,20,30,.10); --shadow-lg:0 24px 60px rgba(20,20,30,.16); } html[data-theme="light"]{ --bg:#ffffff; --bg-alt:#f6f7fb; --bg-card:#ffffff; --ink:#12131a; --ink-dim:#565a6e; --ink-faint:#8a8ea3; --line:#e7e8f0; --glass:rgba(255,255,255,0.7); --header-bg:rgba(255,255,255,0.85); } html[data-theme="dark"]{ --bg:#0b0d12; --bg-alt:#12141c; --bg-card:#161923; --ink:#f3f4f8; --ink-dim:#b7bacb; --ink-faint:#7d8095; --line:rgba(255,255,255,0.08); --glass:rgba(22,25,35,0.7); --header-bg:rgba(11,13,18,0.85); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.5; transition: background .3s var(--ease), color .3s var(--ease); } a{ text-decoration:none; color:inherit; } img{ max-width:100%; display:block; } ul{ list-style:none; margin:0; padding:0; } button{ font-family:inherit; cursor:pointer; } .container{ max-width:1320px; margin:0 auto; padding:0 24px; } .section{ padding:64px 0; } .section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:28px; gap:16px; flex-wrap:wrap; } .section-head h2{ font-family:var(--font-head); font-size:1.6rem; font-weight:700; margin:0; } .section-head .sub{ color:var(--ink-faint); font-size:.92rem; margin-top:4px; } .view-all{ font-weight:600; font-size:.9rem; color:var(--accent); white-space:nowrap; } .eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); margin-bottom:8px; display:block; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:var(--radius-sm); font-weight:600; font-size:.92rem; border:1px solid transparent; transition: all .2s var(--ease); } .btn-accent{ background:var(--accent); color:#fff; box-shadow:0 10px 24px rgba(255,90,31,.28); } .btn-accent:hover{ background:var(--accent-dark); transform:translateY(-1px); } .btn-dark{ background:var(--ink); color:var(--bg); } .btn-dark:hover{ opacity:.88; } .btn-outline{ background:transparent; border-color:var(--line); color:var(--ink); } .btn-outline:hover{ border-color:var(--accent); color:var(--accent); } .btn-sm{ padding:8px 14px; font-size:.82rem; } .btn-block{ width:100%; } .btn-icon{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; background:var(--bg-card); color:var(--ink); transition:all .2s ease; } .btn-icon:hover{ border-color:var(--accent); color:var(--accent); } /* ---------- Header ---------- */ .topbar{ background:var(--ink); color:var(--bg); font-size:.78rem; } .topbar .container{ display:flex; justify-content:space-between; align-items:center; padding:7px 24px; flex-wrap:wrap; gap:6px; } .topbar a{ opacity:.85; } .topbar a:hover{ opacity:1; } .topbar-links{ display:flex; gap:18px; } .site-header{ position:sticky; top:0; z-index:1000; background:var(--header-bg); backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--line); } .header-row{ display:flex; align-items:center; gap:24px; padding:16px 24px; max-width:1320px; margin:0 auto; } .logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:800; font-size:1.35rem; flex-shrink:0; } .logo .mark{ width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,var(--accent),var(--gold)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.2rem; } .search-bar{ flex:1; display:flex; max-width:640px; position:relative; } .search-bar select{ border:1px solid var(--line); border-right:none; background:var(--bg-alt); color:var(--ink-dim); font-size:.82rem; padding:0 12px; border-radius:var(--radius-sm) 0 0 var(--radius-sm); } .search-bar input{ flex:1; border:1px solid var(--line); border-left:none; border-right:none; padding:12px 16px; font-size:.92rem; background:var(--bg-card); color:var(--ink); } .search-bar input:focus{ outline:none; } .search-bar button{ border:1px solid var(--line); border-left:none; background:var(--accent); color:#fff; padding:0 20px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; } .header-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; } .header-icon-btn{ position:relative; display:flex; flex-direction:column; align-items:center; font-size:.68rem; color:var(--ink-dim); gap:2px; } .header-icon-btn svg{ width:22px; height:22px; color:var(--ink); } .badge-count{ position:absolute; top:-6px; right:-8px; background:var(--accent); color:#fff; font-size:.62rem; font-weight:700; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .theme-toggle{ width:44px; height:26px; border-radius:20px; background:var(--bg-alt); border:1px solid var(--line); position:relative; flex-shrink:0; } .theme-toggle .knob{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--accent); transition: transform .25s var(--ease); display:flex; align-items:center; justify-content:center; font-size:.6rem; } html[data-theme="dark"] .theme-toggle .knob{ transform:translateX(18px); } /* ---------- Nav / Mega menu ---------- */ .main-nav{ border-top:1px solid var(--line); } .nav-row{ display:flex; align-items:center; gap:26px; padding:11px 24px; max-width:1320px; margin:0 auto; font-size:.88rem; font-weight:600; } .nav-row > li{ position:relative; } .all-cats{ display:flex; align-items:center; gap:8px; background:var(--ink); color:var(--bg); padding:9px 16px; border-radius:var(--radius-sm); } .nav-row a{ color:var(--ink-dim); } .nav-row a:hover{ color:var(--accent); } .mega{ position:absolute; top:calc(100% + 14px); left:0; width:640px; max-width:80vw; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:26px; display:none; grid-template-columns:repeat(3,1fr); gap:20px; z-index:200; } .has-mega:hover .mega{ display:grid; } .mega h5{ font-size:.76rem; text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); margin:0 0 10px; } .mega ul li{ margin-bottom:8px; } .mega ul a{ font-weight:500; font-size:.88rem; } /* ---------- Hero ---------- */ .hero{ position:relative; overflow:hidden; border-radius:0 0 32px 32px; background:linear-gradient(120deg, var(--ink) 0%, #2a1508 100%); padding:70px 0; margin-bottom:8px; } html[data-theme="light"] .hero{ background:linear-gradient(120deg,#161a2c 0%, #3b1d0d 100%); } .hero::before{ content:""; position:absolute; inset:0; background: radial-gradient(40% 50% at 85% 10%, rgba(255,90,31,.35), transparent 70%), radial-gradient(30% 40% at 10% 90%, rgba(37,99,235,.28), transparent 70%); } .hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; } .hero-badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; padding:7px 15px; border-radius:999px; font-size:.76rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-bottom:20px; } .hero h1{ font-family:var(--font-head); color:#fff; font-size:clamp(2rem,4vw,3.2rem); font-weight:800; line-height:1.1; margin:0 0 18px; } .hero p{ color:rgba(255,255,255,.78); font-size:1.08rem; max-width:520px; margin:0 0 30px; } .hero-btns{ display:flex; gap:14px; flex-wrap:wrap; } .hero-visual{ position:relative; } .hero-visual .card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg); padding:20px; backdrop-filter:blur(16px); } .hero-visual img{ border-radius:var(--radius); width:100%; } .hero-chip{ position:absolute; background:rgba(10,10,14,.85); border:1px solid rgba(255,255,255,.14); color:#fff; padding:10px 14px; border-radius:12px; font-size:.78rem; font-weight:700; display:flex; align-items:center; gap:8px; box-shadow:var(--shadow-lg); } /* ---------- Trust badges strip ---------- */ .trust-strip{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; padding:22px 0; border-bottom:1px solid var(--line); } .trust-strip .item{ display:flex; align-items:center; gap:10px; font-size:.82rem; color:var(--ink-dim); flex:1 1 180px; } .trust-strip .item svg{ color:var(--accent); flex-shrink:0; } /* ---------- Category grid ---------- */ .cat-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; } .cat-card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 14px; text-align:center; transition:all .25s var(--ease); } .cat-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--accent); } .cat-card .ic{ width:50px; height:50px; margin:0 auto 12px; border-radius:14px; background:var(--accent-light); color:var(--accent-dark); display:flex; align-items:center; justify-content:center; font-size:1.5rem; } html[data-theme="dark"] .cat-card .ic{ background:rgba(255,90,31,.16); color:#ff8a56; } .cat-card span{ font-size:.84rem; font-weight:600; } /* ---------- Product rail / grid ---------- */ .rail{ display:flex; gap:20px; overflow-x:auto; padding:4px 4px 16px; scroll-snap-type:x mandatory; scrollbar-width:none; } .rail::-webkit-scrollbar{ display:none; } .rail .p-card{ flex:0 0 236px; scroll-snap-align:start; } .grid-products{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .p-card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:all .25s var(--ease); position:relative; } .p-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); } .p-thumb{ position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:var(--bg-alt); font-size:2.6rem; overflow:hidden; } .p-thumb .wish{ position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%; background:var(--bg-card); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:.9rem; color:var(--ink-dim); transition:all .2s ease; } .p-thumb .wish:hover, .p-thumb .wish.active{ color:var(--accent); border-color:var(--accent); } .p-badge{ position:absolute; top:10px; left:10px; background:var(--accent); color:#fff; font-size:.66rem; font-weight:700; padding:4px 9px; border-radius:999px; text-transform:uppercase; } .p-badge.new{ background:var(--blue); } .p-body{ padding:14px 16px 18px; } .p-cat{ font-size:.72rem; color:var(--ink-faint); margin-bottom:4px; } .p-title{ font-size:.92rem; font-weight:600; margin:0 0 8px; line-height:1.35; min-height:2.5em; } .p-rating{ display:flex; align-items:center; gap:5px; font-size:.76rem; color:var(--ink-faint); margin-bottom:8px; } .p-rating .stars{ color:var(--gold); letter-spacing:1px; } .p-price-row{ display:flex; align-items:baseline; gap:8px; margin-bottom:12px; } .p-price{ font-size:1.08rem; font-weight:700; } .p-price-old{ font-size:.82rem; color:var(--ink-faint); text-decoration:line-through; } .p-add{ width:100%; padding:9px; border-radius:var(--radius-sm); background:var(--ink); color:var(--bg); font-weight:600; font-size:.82rem; border:none; transition:all .2s ease; } .p-add:hover{ background:var(--accent); } .rail-controls{ display:flex; gap:8px; } /* ---------- Flash deals countdown ---------- */ .deals-band{ background:linear-gradient(120deg, var(--accent), var(--gold)); border-radius:var(--radius-lg); padding:26px 30px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:28px; color:#fff; } .deals-band h3{ font-family:var(--font-head); font-size:1.3rem; margin:0 0 4px; } .countdown{ display:flex; gap:8px; } .countdown .box{ background:rgba(255,255,255,.2); border-radius:8px; padding:8px 12px; text-align:center; min-width:52px; } .countdown .box b{ display:block; font-size:1.2rem; } .countdown .box span{ font-size:.62rem; text-transform:uppercase; opacity:.85; } /* ---------- Brands strip ---------- */ .brand-strip{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px; } .brand-chip{ flex:1 1 140px; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; text-align:center; font-weight:700; color:var(--ink-dim); } /* ---------- Reviews ---------- */ .review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .review-card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; } .review-card .stars{ color:var(--gold); margin-bottom:10px; letter-spacing:2px; } .review-card p{ font-size:.92rem; color:var(--ink-dim); margin:0 0 16px; } .review-who{ display:flex; align-items:center; gap:10px; } .review-who .av{ width:36px; height:36px; border-radius:50%; background:var(--accent-light); color:var(--accent-dark); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.86rem; } .review-who b{ display:block; font-size:.86rem; } .review-who span{ font-size:.74rem; color:var(--ink-faint); } /* ---------- Newsletter ---------- */ .newsletter{ background:var(--ink); color:var(--bg); border-radius:var(--radius-lg); padding:44px; text-align:center; } .newsletter h3{ font-family:var(--font-head); font-size:1.5rem; margin:0 0 10px; } .newsletter p{ opacity:.75; margin:0 0 22px; } .newsletter-form{ display:flex; max-width:440px; margin:0 auto; gap:10px; } .newsletter-form input{ flex:1; padding:12px 16px; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; } .newsletter-form input::placeholder{ color:rgba(255,255,255,.5); } /* ---------- FAQ ---------- */ .faq{ max-width:820px; margin:0 auto; } .faq-item{ border-bottom:1px solid var(--line); } .faq-q{ display:flex; justify-content:space-between; align-items:center; padding:18px 4px; cursor:pointer; font-weight:600; } .faq-q .plus{ flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; transition:transform .3s ease; } .faq-item.open .plus{ transform:rotate(45deg); } .faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); } .faq-a p{ padding:0 4px 18px; margin:0; color:var(--ink-dim); font-size:.92rem; } /* ---------- Footer ---------- */ .site-footer{ background:var(--bg-alt); border-top:1px solid var(--line); padding-top:56px; } .footer-top{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:28px; padding-bottom:36px; } .footer-top h4{ font-size:.86rem; margin:0 0 14px; } .footer-top ul li{ margin-bottom:9px; } .footer-top ul a{ font-size:.86rem; color:var(--ink-dim); } .footer-top ul a:hover{ color:var(--accent); } .footer-top p{ color:var(--ink-faint); font-size:.86rem; } .footer-social{ display:flex; gap:10px; margin-top:16px; } .footer-social a{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; } .payment-icons{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; } .payment-icons span{ border:1px solid var(--line); border-radius:6px; padding:5px 9px; font-size:.7rem; font-weight:700; color:var(--ink-faint); } .footer-bottom{ border-top:1px solid var(--line); padding:18px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.8rem; color:var(--ink-faint); } /* ---------- Breadcrumbs ---------- */ .breadcrumbs{ font-size:.82rem; color:var(--ink-faint); padding:18px 0; } .breadcrumbs a{ color:var(--ink-dim); } .breadcrumbs a:hover{ color:var(--accent); } /* ---------- Category page layout ---------- */ .cat-layout{ display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:start; } .filters{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; position:sticky; top:150px; } .filters h4{ font-size:.86rem; margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--line); } .filter-group{ margin-bottom:22px; } .filter-group label{ display:flex; align-items:center; gap:9px; font-size:.86rem; color:var(--ink-dim); margin-bottom:9px; cursor:pointer; } .filter-group input[type="checkbox"]{ accent-color:var(--accent); width:15px; height:15px; } .filter-group input[type="range"]{ width:100%; accent-color:var(--accent); } .price-range-val{ display:flex; justify-content:space-between; font-size:.78rem; color:var(--ink-faint); margin-top:6px; } .cat-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:10px; } .cat-toolbar select{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:9px 12px; background:var(--bg-card); color:var(--ink); font-size:.86rem; } .pagination{ display:flex; justify-content:center; gap:8px; margin-top:36px; } .pagination a{ width:38px; height:38px; border-radius:var(--radius-sm); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:.86rem; font-weight:600; } .pagination a.active{ background:var(--accent); color:#fff; border-color:var(--accent); } /* ---------- Product page ---------- */ .product-layout{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; } .gallery-main{ aspect-ratio:1/1; background:var(--bg-alt); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; font-size:6rem; margin-bottom:14px; border:1px solid var(--line); overflow:hidden; } .gallery-thumbs{ display:flex; gap:10px; } .gallery-thumbs .thumb{ width:70px; height:70px; border-radius:var(--radius-sm); border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:1.6rem; background:var(--bg-alt); cursor:pointer; } .gallery-thumbs .thumb.active{ border-color:var(--accent); } .product-info .brand-line{ font-size:.84rem; color:var(--ink-faint); margin-bottom:6px; } .product-info h1{ font-family:var(--font-head); font-size:1.7rem; margin:0 0 10px; } .product-info .price-row{ display:flex; align-items:baseline; gap:12px; margin:14px 0; } .product-info .price{ font-size:1.9rem; font-weight:800; color:var(--accent); } .product-info .price-old{ font-size:1.1rem; color:var(--ink-faint); text-decoration:line-through; } .save-badge{ background:var(--accent-light); color:var(--accent-dark); font-size:.76rem; font-weight:700; padding:3px 9px; border-radius:999px; } .variant-group{ margin-bottom:20px; } .variant-group h5{ font-size:.84rem; margin:0 0 10px; } .swatches{ display:flex; gap:10px; } .swatch{ width:34px; height:34px; border-radius:50%; border:2px solid var(--line); cursor:pointer; } .swatch.active{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-light); } .size-opt{ padding:9px 16px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:.84rem; font-weight:600; cursor:pointer; } .size-opt.active{ border-color:var(--accent); color:var(--accent); background:var(--accent-light); } .qty-stepper{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius-sm); } .qty-stepper button{ width:38px; height:40px; background:none; border:none; font-size:1rem; color:var(--ink); } .qty-stepper input{ width:44px; text-align:center; border:none; background:none; color:var(--ink); font-weight:600; } .buy-row{ display:flex; gap:14px; margin:22px 0; align-items:center; flex-wrap:wrap; } .info-tick{ display:flex; align-items:center; gap:10px; font-size:.86rem; color:var(--ink-dim); margin-bottom:10px; } .info-tick svg{ color:var(--green); flex-shrink:0; } .tabs{ display:flex; gap:26px; border-bottom:1px solid var(--line); margin:50px 0 24px; } .tab-btn{ padding:12px 2px; font-weight:600; color:var(--ink-faint); border-bottom:2px solid transparent; background:none; border-top:none; border-left:none; border-right:none; } .tab-btn.active{ color:var(--ink); border-color:var(--accent); } .tab-panel{ display:none; } .tab-panel.active{ display:block; } /* ---------- Cart page ---------- */ .cart-layout{ display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:start; } .cart-item{ display:grid; grid-template-columns:80px 1fr auto auto; gap:16px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); } .cart-item .thumb{ width:80px; height:80px; border-radius:var(--radius-sm); background:var(--bg-alt); display:flex; align-items:center; justify-content:center; font-size:2rem; } .cart-item h4{ margin:0 0 6px; font-size:.94rem; } .cart-item .meta{ font-size:.78rem; color:var(--ink-faint); } .cart-item .remove{ font-size:.78rem; color:var(--accent); margin-top:6px; background:none; border:none; padding:0; } .summary-card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:26px; position:sticky; top:150px; } .summary-row{ display:flex; justify-content:space-between; font-size:.9rem; margin-bottom:12px; color:var(--ink-dim); } .summary-row.total{ font-weight:700; color:var(--ink); font-size:1.1rem; border-top:1px solid var(--line); padding-top:14px; margin-top:14px; } .coupon-row{ display:flex; gap:8px; margin:18px 0; } .coupon-row input{ flex:1; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); color:var(--ink); } /* ---------- Checkout ---------- */ .checkout-layout{ display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:start; } .form-card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; margin-bottom:22px; } .form-card h3{ font-size:1.05rem; margin:0 0 18px; } .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .form-grid .full{ grid-column:1 / -1; } .form-grid label{ font-size:.8rem; color:var(--ink-dim); margin-bottom:6px; display:block; } .form-grid input, .form-grid select{ width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); color:var(--ink); font-size:.9rem; } .pay-method{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; margin-bottom:10px; cursor:pointer; } .pay-method.active{ border-color:var(--accent); background:var(--accent-light); } .demo-note{ background:var(--blue-light); color:#1d4ed8; border-radius:var(--radius-sm); padding:12px 16px; font-size:.84rem; margin-bottom:20px; } html[data-theme="dark"] .demo-note{ background:rgba(37,99,235,.15); color:#8fb2ff; } /* ---------- Motion ---------- */ .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in{ opacity:1; transform:none; } /* ---------- Responsive ---------- */ @media (max-width:1080px){ .cat-grid{ grid-template-columns:repeat(4,1fr); } .grid-products{ grid-template-columns:repeat(3,1fr); } .review-grid{ grid-template-columns:repeat(2,1fr); } .footer-top{ grid-template-columns:1fr 1fr; } } @media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; } .product-layout, .cat-layout, .cart-layout, .checkout-layout{ grid-template-columns:1fr; } .filters{ position:static; } .search-bar{ order:3; max-width:none; width:100%; } .header-row{ flex-wrap:wrap; } } @media (max-width:640px){ .cat-grid{ grid-template-columns:repeat(3,1fr); } .grid-products{ grid-template-columns:repeat(2,1fr); } .review-grid{ grid-template-columns:1fr; } .footer-top{ grid-template-columns:1fr 1fr; } .form-grid{ grid-template-columns:1fr; } }