*{box-sizing:border-box;margin:0;padding:0}:root{--green:#f5a400;--green2:#ffbd32;--deep:#0c2035;--cream:#f7f8fa;--text:#10243a;--muted:#667587;--card:#fff;--line:#e2e7ec;--shadow:0 14px 35px rgba(12,32,53,.08);--radius:14px}html{scroll-behavior:smooth}body{font-family:"DM Sans",sans-serif;background:var(--cream);color:var(--text);line-height:1.5}a{text-decoration:none;color:inherit}button,input,select{font:inherit}button{cursor:pointer;border:0;background:none;color:inherit}.container{width:min(1180px,calc(100% - 40px));margin:auto}.announcement{height:35px;background:var(--deep);color:#eaf6ec;display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px}.announcement .material-symbols-rounded{font-size:17px;color:#9ee16f}.announcement button{position:absolute;right:18px;color:#b6c7ba;font-size:20px}.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav{height:78px;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:10px;min-width:185px}.brand-mark{width:42px;height:42px;border-radius:13px;background:var(--green);display:grid;place-items:center;color:white}.brand-mark .material-symbols-rounded{font-size:25px}.brand strong{display:block;font:800 19px "Plus Jakarta Sans"}.brand small{display:block;font-size:9px;letter-spacing:3px;color:var(--muted);margin-top:-2px}.search{height:44px;flex:1;max-width:430px;border:1px solid var(--line);border-radius:14px;background:var(--cream);display:flex;align-items:center;padding:0 12px;gap:9px}.search .material-symbols-rounded{color:var(--green)}.search input{border:0;outline:0;background:transparent;width:100%;color:var(--text);font-size:12px}.search kbd{font-size:10px;color:var(--muted);border:1px solid var(--line);padding:2px 5px;border-radius:5px}.nav nav{display:flex;gap:22px;margin-left:auto;font-size:13px;font-weight:700}.nav nav a{color:var(--muted)}.nav nav a:hover,.nav nav a.active{color:var(--green)}.nav-actions{display:flex;gap:7px}.icon-btn{width:42px;height:42px;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center;background:var(--card);position:relative}.icon-btn:hover{border-color:var(--green);color:var(--green)}.menu-btn{display:none}.mobile-nav{display:none} .hero{min-height:640px;position:relative;overflow:hidden;background:#e9eee1}.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(239,243,232,.98) 0%,rgba(239,243,232,.93) 40%,rgba(239,243,232,.2) 77%),url("https://images.unsplash.com/photo-1583258292688-d0213dc5a3a8?auto=format&fit=crop&w=1800&q=88") center/cover}.hero-content{position:relative;min-height:640px;display:flex;align-items:center}.hero-copy{width:620px;padding:55px 0}.eyebrow,.section-kicker{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--green);display:inline-flex;align-items:center;gap:6px}.eyebrow{background:#e0f0d9;border-radius:50px;padding:8px 12px}.hero h1{font:800 clamp(43px,5.7vw,70px)/1.04 "Plus Jakarta Sans";letter-spacing:-3px;margin:19px 0}.hero h1 span{color:var(--green)}.hero p{font-size:16px;color:#556158;max-width:540px}.hero-actions{display:flex;gap:10px;margin:27px 0 18px}.btn{min-height:46px;border-radius:13px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:12px;transition:.2s}.btn-primary{background:var(--green);color:#fff;box-shadow:0 10px 25px rgba(25,122,58,.22)}.btn-primary:hover{transform:translateY(-2px);background:#12652e}.btn-light,.btn-outline{background:#fff;border:1px solid var(--line)}.btn-outline:hover,.btn-light:hover{border-color:var(--green);color:var(--green)}.delivery-strip{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.8);border:1px solid rgba(200,215,200,.8);padding:10px 13px;border-radius:12px}.delivery-strip .material-symbols-rounded{color:var(--green)}.delivery-strip b,.delivery-strip small{display:block}.delivery-strip b{font-size:11px}.delivery-strip small{font-size:9px;color:var(--muted)}.hero-product-stack{position:absolute;right:5%;width:400px;height:430px}.sack{position:absolute;right:70px;top:70px;width:205px;height:260px;border-radius:35% 35% 18% 18%;background:linear-gradient(145deg,#d6bd8c,#ad8750);display:grid;place-items:center;font-size:95px;transform:rotate(5deg);box-shadow:20px 25px 40px rgba(53,45,25,.18)}.sack span{position:absolute;bottom:32px;background:#f5ead2;color:#765428;font:800 13px "Plus Jakarta Sans";padding:6px 15px}.sack.small{right:230px;top:170px;width:125px;height:160px;font-size:60px;transform:rotate(-9deg);z-index:2}.sack.small span{font-size:9px;bottom:18px}.float-card{position:absolute;right:0;top:22px;background:#fff;padding:12px 16px;border-radius:13px;box-shadow:var(--shadow);font-size:9px;color:var(--muted);z-index:3}.float-card b{display:block;color:var(--green);font-size:17px}.hero-stamp{position:absolute;right:10px;bottom:48px;background:#dced72;width:115px;height:115px;border-radius:50%;display:grid;place-items:center;text-align:center;transform:rotate(10deg);font-size:9px;line-height:1.05}.hero-stamp b{font-size:14px} .section{padding:82px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px}.section-head.center{text-align:center;display:block}.section-head h2{font:800 30px "Plus Jakarta Sans";letter-spacing:-1.2px;margin-top:5px}.section-head.center p{font-size:13px;color:var(--muted);margin-top:7px}.section-head h2 em{font-style:normal;color:var(--green)}.text-link{font-size:12px;color:var(--green);font-weight:800;display:flex;gap:5px;align-items:center}.text-link .material-symbols-rounded{font-size:16px}.choice{padding-top:30px}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.choice-card{min-height:255px;border-radius:25px;padding:32px;display:flex;gap:22px;align-items:center;border:1px solid var(--line);transition:.2s}.choice-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.choice-card.retail{background:#edf6e9}.choice-card.wholesale{background:#eee9d8}.choice-icon{width:84px;height:84px;border-radius:22px;background:#fff;display:grid;place-items:center;font-size:43px;flex:none}.choice-card span{font-size:9px;letter-spacing:2px;font-weight:800;color:var(--green)}.choice-card h3{font:800 26px "Plus Jakarta Sans";margin:4px 0}.choice-card p{font-size:12px;color:#68736b;max-width:420px}.choice-card b{display:flex;align-items:center;gap:4px;color:var(--green);font-size:11px;margin-top:17px}.choice-card b .material-symbols-rounded{font-size:16px}.category-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}.category-grid a{background:var(--card);border:1px solid var(--line);border-radius:17px;padding:15px 8px;text-align:center;min-height:145px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;transition:.2s}.category-grid a:hover{transform:translateY(-3px);border-color:#acd4b1;box-shadow:var(--shadow)}.category-grid a>div{width:64px;height:64px;border-radius:50%;background:#f0f4e9;display:grid;place-items:center;font-size:34px}.category-grid b{font-size:10px}.category-grid small{font-size:8px;color:var(--muted)}.brands{padding-top:0}.brand-row{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);border-radius:18px;background:var(--card);overflow:hidden}.brand-row a{padding:25px 8px;text-align:center;font:800 11px "Plus Jakarta Sans";color:#6d786f;border-right:1px solid var(--line)}.brand-row a:last-child{border:0}.brand-row a:hover{color:var(--green);background:#f1f7ed}.top-selling{padding-top:0}.mini-products{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.mini-product{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:10px;display:flex;gap:12px;align-items:center}.mini-product img{width:85px;height:85px;object-fit:cover;border-radius:12px;background:#f2f4ed}.mini-product small{font-size:8px;color:var(--muted)}.mini-product h3{font-size:12px;margin:2px 0}.mini-product strong{font-size:14px}.delivery{padding-top:0}.delivery-card{background:#173a23;color:#fff;border-radius:24px;padding:30px 35px;display:flex;align-items:center;gap:20px}.delivery-icon{width:58px;height:58px;border-radius:16px;background:#a8df70;color:#173a23;display:grid;place-items:center;flex:none}.delivery-card h2{font:800 23px "Plus Jakarta Sans";margin:4px 0}.delivery-card p{font-size:12px;color:#c2d4c7}.delivery-card .btn{margin-left:auto}.visit-card{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:25px;background:#173a23;color:#fff}.visit-card>div{padding:50px}.visit-card h2{font:800 30px "Plus Jakarta Sans";margin:8px 0 13px}.visit-card h2 em{color:#a7df73;font-style:normal}.visit-card p{font-size:12px;color:#bfd0c3}.address{display:flex;gap:10px;margin:22px 0;font-size:11px;color:#bfd0c3}.address .material-symbols-rounded{color:#a7df73}.visit-card iframe{width:100%;height:100%;min-height:360px;border:0}.footer{background:#0b160e;color:#c8d2ca;padding-top:50px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.3fr 1.2fr;gap:35px;padding-bottom:40px}.footer-brand{color:#fff}.footer p,.footer a,.footer span{font-size:10px;color:#89978c;display:block;margin:8px 0}.footer h4{font-size:11px;color:#fff}.footer-bottom{border-top:1px solid #203025;padding:16px 0;font-size:9px;color:#718077} .store-head{background:#e9f1e4;padding:58px 0 40px}.store-head h1{font:800 40px "Plus Jakarta Sans";margin:5px 0}.store-head p{color:var(--muted);font-size:13px}.mode-switch{display:flex;background:#d9e5d5;border-radius:11px;padding:4px;width:max-content;margin-top:18px}.mode-btn{padding:9px 20px;border-radius:8px;font-size:11px;font-weight:800}.mode-btn.active{background:var(--green);color:#fff}.store-main{padding-top:45px}.store-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.toolbar-actions{display:flex;gap:8px}.toolbar-actions select{border:1px solid var(--line);background:var(--card);border-radius:9px;padding:9px;font-size:10px;color:var(--text)}.result-count{font-size:12px;color:var(--muted)}.shop-layout{display:grid;grid-template-columns:210px 1fr;gap:28px}.sidebar{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;height:max-content;position:sticky;top:100px}.sidebar h3{font:800 12px "Plus Jakarta Sans";margin-bottom:12px}.sidebar button{display:block;width:100%;text-align:left;padding:8px;border-radius:7px;font-size:10px;color:var(--muted)}.sidebar button:hover,.sidebar button.active{background:#eef6ea;color:var(--green);font-weight:800}.sidebar hr{border:0;border-top:1px solid var(--line);margin:18px 0}.section-mini{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}.section-mini h2{font:800 21px "Plus Jakarta Sans"}.section-mini span{font-size:10px;color:var(--muted)}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.product-card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.2s}.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.product-image{height:175px;background:#f1f3eb;position:relative;display:grid;place-items:center}.product-image img{width:100%;height:100%;object-fit:cover}.discount{position:absolute;top:9px;left:9px;background:#e1f1c9;color:#347020;padding:5px 7px;border-radius:6px;font-size:8px;font-weight:800;z-index:2}.product-body{padding:13px}.product-body small{font-size:8px;color:var(--muted)}.product-body h3{font-size:12px;margin:3px 0}.product-bottom{display:flex;align-items:end;justify-content:space-between;margin-top:11px}.price strong{font-size:15px}.price del{font-size:9px;color:#9aa29b;margin-left:3px}.add{height:32px;padding:0 10px;background:#edf6e9;color:var(--green);border-radius:8px;font-size:9px;font-weight:800}.add:hover{background:var(--green);color:#fff}.wholesale-note{font-size:8px;color:#936b1b;background:#fff5d7;padding:5px 7px;border-radius:6px;margin-top:6px}.delivery-note{font-size:9px;color:var(--muted);margin:-4px 0 12px}.cart-panel{position:fixed;z-index:100;top:0;right:-430px;width:min(430px,100%);height:100dvh;background:var(--card);box-shadow:-20px 0 60px rgba(0,0,0,.18);display:flex;flex-direction:column;transition:.3s}.cart-panel.open{right:0}.cart-head{padding:22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.cart-head h3{font:800 18px "Plus Jakarta Sans"}.cart-items{flex:1;overflow:auto;padding:15px}.cart-empty{text-align:center;color:var(--muted);padding:70px 20px}.cart-item{display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line);padding:11px 0}.cart-thumb{width:55px;height:55px;border-radius:10px;overflow:hidden}.cart-thumb img{width:100%;height:100%;object-fit:cover}.cart-item h4{font-size:10px}.cart-item small{font-size:8px;color:var(--muted)}.qty{margin-left:auto;display:flex;gap:6px;align-items:center}.qty button{width:24px;height:24px;border:1px solid var(--line);border-radius:6px}.cart-footer{padding:18px;border-top:1px solid var(--line)}.cart-footer>div:first-child{display:flex;justify-content:space-between;margin-bottom:10px}.cart-footer strong{font-size:17px}.full{width:100%}.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:90;opacity:0;pointer-events:none;transition:.2s}.overlay.show{opacity:1;pointer-events:auto}.toast{position:fixed;z-index:200;bottom:22px;left:50%;transform:translate(-50%,30px);opacity:0;background:#15251a;color:#fff;padding:10px 15px;border-radius:9px;font-size:10px;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)} .admin-main{padding:55px 0}.login-card{width:min(430px,100%);margin:40px auto;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow)}.login-card h1,.admin-head h1{font:800 30px "Plus Jakarta Sans";margin:5px 0}.login-card p,.admin-head p{font-size:11px;color:var(--muted);margin-bottom:20px}.login-card label,.product-form label{display:block;font-size:10px;font-weight:800;margin:13px 0}.login-card input,.product-form input,.product-form select,.table-search input{width:100%;margin-top:6px;padding:11px;border:1px solid var(--line);border-radius:9px;outline:0;background:var(--cream);color:var(--text);font-size:11px}.login-card small{display:block;color:var(--muted);font-size:8px;margin-top:12px;text-align:center}.admin-title{font:800 14px "Plus Jakarta Sans";margin-left:auto}.admin-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.admin-head>div:last-child{display:flex;gap:8px}.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}.admin-stats div{background:var(--card);border:1px solid var(--line);padding:18px;border-radius:14px}.admin-stats span{font-size:9px;color:var(--muted)}.admin-stats strong{display:block;font:800 23px "Plus Jakarta Sans";margin-top:5px}.admin-table-wrap{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}.table-search{display:flex;align-items:center;gap:8px;padding:13px;border-bottom:1px solid var(--line)}.table-search input{margin:0;border:0;background:transparent}.admin-table{width:100%;border-collapse:collapse}.admin-table th,.admin-table td{text-align:left;padding:12px;border-bottom:1px solid var(--line);font-size:9px}.admin-table th{font-size:8px;color:var(--muted);text-transform:uppercase}.admin-thumb{width:42px;height:42px;object-fit:cover;border-radius:7px}.table-actions{display:flex;gap:5px}.small-action{padding:7px;border:1px solid var(--line);border-radius:7px}.small-action.delete{color:#b13a2c}.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:none;place-items:center;padding:15px}.modal.show{display:grid}.modal-box{width:min(600px,100%);max-height:92vh;overflow:auto;background:var(--card);border-radius:20px;padding:22px}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h2{font:800 19px "Plus Jakarta Sans"}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.image-preview{width:100%;height:100px;border:1px dashed var(--line);border-radius:10px;display:grid;place-items:center;overflow:hidden;color:var(--muted);font-size:9px}.image-preview img{width:100%;height:100%;object-fit:contain}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px} @media(max-width:1050px){.nav nav{display:none}.menu-btn{display:grid}.category-grid{grid-template-columns:repeat(4,1fr)}.brand-row{grid-template-columns:repeat(4,1fr)}.mini-products{grid-template-columns:repeat(2,1fr)}.hero-product-stack{right:-40px;opacity:.9}.product-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:760px){.container{width:calc(100% - 28px)}.nav{height:68px;gap:9px}.brand{min-width:auto}.brand strong{font-size:15px}.brand-mark{width:37px;height:37px}.search{position:absolute;top:78px;left:14px;right:14px;max-width:none}.header{height:68px}.hero{margin-top:51px;min-height:680px}.hero-content{min-height:680px;align-items:end}.hero-bg{background:linear-gradient(90deg,rgba(239,243,232,.98) 0%,rgba(239,243,232,.9) 55%,rgba(239,243,232,.3) 100%),url("https://images.unsplash.com/photo-1583258292688-d0213dc5a3a8?auto=format&fit=crop&w=1200&q=88") center/cover}.hero-copy{padding:45px 0}.hero h1{font-size:43px}.hero p{font-size:13px}.hero-product-stack{display:none}.choice-grid,.visit-card{grid-template-columns:1fr}.choice-card{padding:25px}.category-grid{grid-template-columns:repeat(4,1fr);gap:7px}.category-grid a{min-height:125px}.category-grid a>div{width:52px;height:52px;font-size:27px}.category-grid b{font-size:8px}.brand-row{grid-template-columns:repeat(2,1fr)}.brand-row a{border-bottom:1px solid var(--line)}.delivery-card{padding:24px;flex-wrap:wrap}.delivery-card .btn{margin-left:0}.shop-layout{grid-template-columns:1fr}.sidebar{position:static}.store-toolbar{display:block}.toolbar-actions{margin-top:12px;overflow:auto}.product-grid{grid-template-columns:repeat(2,1fr)}.product-image{height:145px}.admin-stats{grid-template-columns:1fr 1fr}.admin-head{display:block}.admin-head>div:last-child{margin-top:15px}.admin-table-wrap{overflow:auto}.admin-table{min-width:700px}.form-row{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}} @media(max-width:420px){.nav-actions .icon-btn:first-child{display:none}.hero h1{font-size:38px}.category-grid{grid-template-columns:repeat(4,1fr)}.product-grid{gap:8px}.product-image{height:125px}.mini-products{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}} .stock-overlay{position:absolute;inset:0;background:rgba(18,27,20,.62);color:#fff;display:grid;place-items:center;font:800 13px "Plus Jakarta Sans";letter-spacing:1px}.product-card.out-stock .product-image img{filter:grayscale(.7)}.add.disabled{background:#eceeeb;color:#929a94;cursor:not-allowed}.status-select{padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);font-size:9px;font-weight:800;color:var(--green)}.status-select.out-of-stock{color:#a36d17;background:#fff7df}.status-select.hidden{color:#9a3c32;background:#fff0ee}.admin-tabs{display:flex;gap:5px;margin:0 0 15px;border-bottom:1px solid var(--line)}.admin-tab{padding:11px 17px;font-size:11px;font-weight:800;color:var(--muted);border-bottom:2px solid transparent}.admin-tab.active{color:var(--green);border-color:var(--green)}.category-manager{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}.category-manager-head{padding:20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px}.category-manager-head h2{font:800 18px "Plus Jakarta Sans"}.category-manager-head p{font-size:10px;color:var(--muted);margin-top:4px}.category-list{padding:8px 20px}.category-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line)}.category-row:last-child{border-bottom:0}.cat-info{display:flex;align-items:center;gap:11px}.cat-symbol{width:38px;height:38px;border-radius:10px;background:#eef6e9;display:grid;place-items:center}.cat-info b,.cat-info small{display:block}.cat-info b{font-size:11px}.cat-info small{font-size:8px;color:var(--muted);margin-top:2px}.protected-tag{font-size:8px;color:var(--green);background:#eef6e9;padding:6px 8px;border-radius:7px} /* ===== Sree Devi Storefront V4: Navy + Orange Ecommerce Theme ===== */ body{background:#fff;color:var(--text)} .announcement{background:#0c2035;color:#fff;height:34px;font-size:10px} .announcement .material-symbols-rounded{color:#ffb629} .header{background:#fff;border-bottom:1px solid #e3e7eb} .brand-mark{background:#f5a400;color:#0c2035;border-radius:8px} .brand strong{color:#10243a}.brand small{color:#d58c00} .search{background:#fff;border-color:#d7dee6;border-radius:28px;height:42px;max-width:520px} .search .material-symbols-rounded{color:#10243a} .search:focus-within{border-color:#f5a400;box-shadow:0 0 0 3px rgba(245,164,0,.12)} .nav nav a{color:#1a3048}.nav nav a:hover,.nav nav a.active{color:#e79a00} .icon-btn{border-color:#dce3e9;background:#fff} .icon-btn:hover{border-color:#f5a400;color:#e79a00} .btn-primary{background:#f5a400;color:#0c2035;box-shadow:0 8px 20px rgba(245,164,0,.2)} .btn-primary:hover{background:#e49a00;color:#0c2035} .btn-light{background:#fff;color:#10243a;border-color:#fff} .btn-outline:hover,.btn-light:hover{border-color:#f5a400;color:#e79a00} .section-kicker,.eyebrow,.text-link{color:#e79a00} .eyebrow{background:#fff0cf} .hero{min-height:610px;background:#1a2938} .hero-bg{background:linear-gradient(90deg,rgba(7,24,39,.95) 0%,rgba(10,29,46,.82) 39%,rgba(10,29,46,.18) 77%),url("https://images.unsplash.com/photo-1601598851547-4302969d7b1c?auto=format&fit=crop&w=1800&q=88") center/cover} .hero h1{color:#fff}.hero h1 span{color:#ffb629}.hero p{color:#e1e7ec} .hero-product-stack{display:none} .delivery-strip{background:#fff;color:#10243a;border-color:#fff}.delivery-strip .material-symbols-rounded{color:#f5a400} .choice-card.retail{background:#fff7e5;border-color:#f4dfad}.choice-card.wholesale{background:#eef3f8;border-color:#d8e2ec} .choice-card span,.choice-card b{color:#e79a00} .choice-icon{border:1px solid #e7e9e6} .category-grid a>div{background:#f4f6f8} .category-grid a:hover{border-color:#f1c35e} .brand-row a:hover{color:#e79a00;background:#fff8e8} .delivery-card{background:#0c2035} .delivery-icon{background:#f5a400;color:#0c2035} .visit-card{background:#0c2035} .footer{background:#091a2b} .store-head{background:#eef3f7} .mode-switch{background:#dce5ec} .mode-btn.active{background:#f5a400;color:#0c2035} .add{background:#fff2d1;color:#9a6900}.add:hover{background:#f5a400;color:#0c2035} .discount{background:#fff0cf;color:#9a6900} .wholesale-note{background:#fff5dc;color:#8d6414} .store-toolbar select{background:#fff} .category-grid,.brand-row,.product-card,.mini-product{box-shadow:none} .stock-overlay{background:rgba(12,32,53,.72)} .admin-page .header{background:#fff} .admin-stats div,.admin-table-wrap,.category-manager,.login-card,.modal-box{box-shadow:0 10px 30px rgba(12,32,53,.06)} .admin-tabs .admin-tab.active{color:#d88f00;border-color:#f5a400} .status-select{color:#9a6900} .service-strip{margin-top:-1px;background:#fff;border-bottom:1px solid #e8edf1;position:relative;z-index:2} .service-grid{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:0 0 14px 14px} .service-grid>div{padding:17px 20px;border-right:1px solid #edf0f2} .service-grid>div:last-child{border:0} .service-grid b,.service-grid small{display:block} .service-grid b{font-size:12px;color:#10243a} .service-grid small{font-size:9px;color:#687789;margin-top:3px} @media(max-width:760px){.service-grid{grid-template-columns:1fr 1fr}.service-grid>div{border-bottom:1px solid #edf0f2}.announcement{height:auto;min-height:34px;flex-wrap:wrap;padding:6px 30px 6px 10px;justify-content:flex-start}.announcement span:nth-child(2),.announcement span:nth-child(3){display:none}} /* ===== Screenshot-matched homepage ===== */ .reference-home{background:#fff;color:#10243a} .reference-home a{text-decoration:none} .topbar{height:31px;background:#0b1f31;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 5%;font-size:9px} .topbar-left,.topbar-right{display:flex;align-items:center;gap:28px}.topbar a{color:#fff} .ref-header{background:#fff;position:relative;z-index:10;box-shadow:0 2px 10px rgba(10,25,40,.06)} .ref-main{height:88px;padding:0 4.4%;display:flex;align-items:center;gap:34px} .ref-logo{display:flex;align-items:center;gap:15px;min-width:420px}.ref-logo img{width:250px;height:74px;object-fit:contain}.ref-logo>span{font-size:13px;line-height:1.1;color:#203247;border-left:1px solid #dce2e7;padding-left:16px} .ref-search{height:43px;flex:1;display:flex;align-items:center;border:1px solid #d8dfe6;border-radius:24px;overflow:hidden;max-width:650px}.ref-search>.material-symbols-rounded{margin-left:17px;font-size:21px}.ref-search input{border:0;outline:0;flex:1;padding:0 12px;font-size:12px;color:#24364a}.ref-search button{height:100%;width:98px;background:#ffb82e;color:#0b1f31;font-weight:800;font-size:11px} .ref-account{display:flex;align-items:center;gap:18px}.ref-account a{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;color:#10243a;font-size:9px;min-width:52px}.ref-account .material-symbols-rounded{font-size:25px}.ref-account b{position:absolute;top:-2px;right:8px;background:#e51d2a;color:#fff;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:8px} .ref-nav{height:47px;border-top:1px solid #edf0f2;display:flex;justify-content:center;align-items:stretch}.ref-nav>a{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 31px;font-size:11px;font-weight:700;color:#15283b;border-right:1px solid #e8edf1}.ref-nav>a:first-child{border-left:1px solid #e8edf1}.ref-nav>a.active{background:#ffb82e}.ref-nav .material-symbols-rounded{font-size:18px}.ref-nav .arrow{font-size:16px;margin-left:1px} .ref-hero{height:327px;position:relative;overflow:hidden;background:#17212a}.hero-photo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,16,25,.55) 0%,rgba(6,16,25,.3) 35%,rgba(6,16,25,0) 55%),url("assets/site/hero-visual.jpg") right center/cover no-repeat}.hero-copy-ref{position:absolute;left:5.2%;top:31px;color:#fff}.hero-copy-ref h1{font:800 38px/1.08 "Plus Jakarta Sans";letter-spacing:-1.3px;margin:0}.hero-copy-ref h1 span{color:#ffb82e}.hero-copy-ref p{font-size:16px;line-height:1.35;margin:10px 0 17px}.ref-hero-buttons{display:flex;gap:18px}.ref-hero-btn{height:64px;width:233px;border-radius:11px;display:flex;align-items:center;gap:12px;padding:0 16px;color:#fff}.ref-hero-btn .material-symbols-rounded:first-child{font-size:27px}.ref-hero-btn .material-symbols-rounded:last-child{margin-left:auto}.ref-hero-btn b,.ref-hero-btn small{display:block}.ref-hero-btn b{font-size:13px}.ref-hero-btn small{font-size:10px;margin-top:2px}.ref-hero-btn.orange{background:#ffb82e;color:#0b1f31}.ref-hero-btn.dark{background:rgba(7,17,26,.68);border:1px solid #fff}.delivery-card-ref{position:absolute;right:2.7%;top:21px;background:rgba(255,255,255,.95);border-radius:17px;padding:18px 22px;display:flex;gap:15px;align-items:flex-start;box-shadow:0 7px 22px rgba(0,0,0,.12);min-width:282px}.delivery-card-ref>.material-symbols-rounded{font-size:43px;color:#f39c00}.delivery-card-ref b,.delivery-card-ref small,.delivery-card-ref span,.delivery-card-ref strong{display:block}.delivery-card-ref b{font-size:18px}.delivery-card-ref small{font-size:11px}.delivery-card-ref span{font-size:11px;margin-top:8px}.delivery-card-ref strong{font-size:18px} .trust-strip{height:67px;margin:0 4.3%;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;box-shadow:0 5px 18px rgba(0,0,0,.05);border-radius:0 0 12px 12px}.trust-strip>div{display:flex;align-items:center;gap:13px;padding:0 35px;border-right:1px solid #edf0f2}.trust-strip>div:last-child{border:0}.trust-strip .material-symbols-rounded{font-size:28px;color:#f39c00}.trust-strip b,.trust-strip small{display:block}.trust-strip b{font-size:12px}.trust-strip small{font-size:10px;color:#56697b;margin-top:2px} .ref-section{padding:18px 2.25% 0}.ref-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.ref-section-head h2{font:800 19px "Plus Jakarta Sans";margin:0}.ref-section-head a{font-size:10px;color:#12283c;display:flex;align-items:center;gap:6px}.ref-section-head a .material-symbols-rounded{font-size:17px} .category-ref-grid{display:grid;grid-template-columns:repeat(11,1fr);gap:9px}.category-ref-grid a{height:129px;border-radius:10px;overflow:hidden;background:#f7f7f7}.category-ref-grid img{width:100%;height:100%;object-fit:cover;display:block}.brands-ref{padding-top:21px}.brand-ref-grid{display:grid;grid-template-columns:repeat(13,1fr);gap:9px}.brand-ref-grid a{height:59px;border:1px solid #e2e7eb;border-radius:8px;display:grid;place-items:center;background:#fff;overflow:hidden}.brand-ref-grid img{width:100%;height:100%;object-fit:cover} .ref-products{margin-top:22px;padding:13px 2.25% 24px;background:#fff4dc}.product-ref-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:13px}.product-ref-grid a{background:#fff;border-radius:10px;overflow:hidden;position:relative;border:1px solid #f2eee4}.product-ref-grid img{width:100%;height:116px;object-fit:cover;display:block}.product-ref-grid div{padding:8px 10px 12px}.product-ref-grid b,.product-ref-grid small,.product-ref-grid strong{display:block}.product-ref-grid b{font-size:10px}.product-ref-grid small{font-size:8px;color:#72808d;margin:2px 0}.product-ref-grid strong{font-size:14px;color:#0d2438} .ref-delivery{margin:22px 2.25%;background:#0b2033;color:#fff;border-radius:13px;padding:17px 25px;display:flex;align-items:center;gap:20px}.ref-delivery>div{display:flex;align-items:center;gap:13px}.ref-delivery .material-symbols-rounded{color:#ffb82e;font-size:34px}.ref-delivery b,.ref-delivery small{display:block}.ref-delivery b{font-size:14px}.ref-delivery small{font-size:10px;color:#c8d3dd}.ref-delivery>strong{margin-left:auto;color:#ffb82e}.ref-orange-btn{background:#ffb82e;color:#0b2033;padding:12px 18px;border-radius:8px;font-size:10px;font-weight:800} .ref-about{margin:25px 2.25%;padding:30px;border:1px solid #e5e9ed;border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:30px}.ref-about h2{font:800 24px "Plus Jakarta Sans";margin:5px 0}.ref-about p{font-size:11px;color:#657586;max-width:760px}.ref-footer{background:#0b1f31;color:#d5dde4;padding:35px 5%;display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:35px}.ref-footer img{width:190px;height:58px;object-fit:contain;background:#fff;border-radius:5px}.ref-footer h4{font-size:11px;color:#ffb82e;margin-bottom:10px}.ref-footer a,.ref-footer p{font-size:10px;color:#afbdc9;display:block;margin:7px 0} @media(max-width:1100px){.ref-logo{min-width:300px}.ref-logo img{width:190px}.ref-nav>a{padding:0 15px}.category-ref-grid{grid-template-columns:repeat(6,1fr)}.brand-ref-grid{grid-template-columns:repeat(7,1fr)}.product-ref-grid{grid-template-columns:repeat(4,1fr)}.trust-strip{height:auto}.trust-strip>div{padding:13px 18px} /* tablet-width fix: the delivery card and the hero heading/buttons were both fixed-width and absolutely positioned, so between 761-1100px the card sat on top of the headline instead of beside it. */ .ref-nav{flex-wrap:nowrap;overflow:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch} .ref-nav>a{flex:none} .hero-copy-ref{width:min(620px,56%)} .delivery-card-ref{right:3%;min-width:0;width:29%;padding:14px 16px} .delivery-card-ref b{font-size:15px}.delivery-card-ref strong{font-size:16px} } @media(max-width:760px){.topbar{height:auto;padding:7px 12px}.topbar-left span:not(:first-child),.topbar-right{display:none}.ref-main{height:auto;padding:10px 14px;display:grid;grid-template-columns:1fr auto;gap:9px}.ref-logo{min-width:0}.ref-logo img{width:190px;height:58px}.ref-logo>span{display:none}.ref-search{grid-column:1/-1;max-width:none;order:3}.ref-account{gap:4px}.ref-account a{min-width:39px}.ref-nav{overflow:auto;justify-content:flex-start}.ref-nav>a{min-width:max-content;padding:0 16px}.ref-hero{height:470px}.hero-photo{background:linear-gradient(90deg,rgba(6,16,25,.95) 0%,rgba(6,16,25,.82) 55%,rgba(6,16,25,.25) 100%),url("assets/site/hero-visual.jpg") 78% center/cover}.hero-copy-ref{left:20px;top:35px}.hero-copy-ref h1{font-size:33px}.hero-copy-ref p{font-size:13px}.ref-hero-buttons{flex-direction:column;gap:9px}.ref-hero-btn{width:220px;height:57px}.delivery-card-ref{right:12px;top:auto;bottom:13px;min-width:0;width:calc(100% - 24px);padding:11px 14px}.delivery-card-ref>.material-symbols-rounded{font-size:33px}.delivery-card-ref b{font-size:15px}.trust-strip{margin:0;grid-template-columns:1fr 1fr;border-radius:0}.trust-strip>div{padding:12px 12px}.trust-strip .material-symbols-rounded{font-size:22px}.trust-strip b{font-size:10px}.trust-strip small{font-size:8px}.ref-section{padding:18px 12px 0}.category-ref-grid{grid-template-columns:repeat(4,1fr);gap:6px}.category-ref-grid a{height:105px}.brand-ref-grid{grid-template-columns:repeat(4,1fr)}.product-ref-grid{grid-template-columns:repeat(2,1fr)}.ref-products{padding-left:12px;padding-right:12px}.ref-delivery{margin:18px 12px;flex-wrap:wrap}.ref-delivery>strong{margin-left:0}.ref-about{margin:18px 12px;display:block}.ref-about .ref-orange-btn{display:inline-block;margin-top:15px}.ref-footer{grid-template-columns:1fr 1fr;padding:25px 18px}} /* ---------- Spotlight interaction (inspired by the supplied GlowCard) ---------- */ .spotlight-card{ --spotlight-x:50%; --spotlight-y:50%; --spotlight-hue:30; --spotlight-alpha:0; --spotlight-border-alpha:0; position:relative; isolation:isolate; transform:translate3d(0,0,0); transition:transform .35s cubic-bezier(.2,.75,.25,1),box-shadow .35s ease,border-color .35s ease; will-change:transform; } .spotlight-card::before{ content:""; position:absolute; inset:-2px; z-index:2; border-radius:inherit; padding:2px; background:radial-gradient(180px 180px at var(--spotlight-x) var(--spotlight-y),hsla(var(--spotlight-hue),100%,60%,var(--spotlight-border-alpha)),transparent 72%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .spotlight-card::after{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; background:radial-gradient(190px 190px at var(--spotlight-x) var(--spotlight-y),hsla(var(--spotlight-hue),100%,68%,var(--spotlight-alpha)),transparent 72%); pointer-events:none; transition:opacity .2s ease; } .spotlight-inner{ position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); } .spotlight-card > img, .spotlight-card > div{position:relative;z-index:1} .spotlight-card:hover{ transform:translateY(-5px) scale(1.018); box-shadow:0 18px 38px rgba(12,32,53,.12),0 0 28px hsla(var(--spotlight-hue),100%,58%,.10); } .spotlight-card:hover::before{--spotlight-border-alpha:.95} .spotlight-card:hover::after{--spotlight-alpha:.12} .category-ref-grid .spotlight-card{border:1px solid rgba(226,231,236,.85)} .category-ref-grid .spotlight-card img{transition:transform .55s cubic-bezier(.2,.75,.25,1),filter .35s ease} .category-ref-grid .spotlight-card:hover img{transform:scale(1.045);filter:saturate(1.05)} .brand-ref-grid .spotlight-card{border:1px solid #e2e7eb} .brand-ref-grid .spotlight-card img{transition:transform .45s cubic-bezier(.2,.75,.25,1)} .brand-ref-grid .spotlight-card:hover img{transform:scale(1.045)} .product-ref-grid .spotlight-card{border:1px solid #f2eee4} .product-ref-grid .spotlight-card img{transition:transform .55s cubic-bezier(.2,.75,.25,1),filter .35s ease} .product-ref-grid .spotlight-card:hover img{transform:scale(1.035);filter:saturate(1.04)} /* Soft entrance motion, staggered like a premium product gallery */ @keyframes spotlight-enter{ from{opacity:0;transform:translateY(14px) scale(.985)} to{opacity:1;transform:translateY(0) scale(1)} } .category-ref-grid .spotlight-card, .brand-ref-grid .spotlight-card, .product-ref-grid .spotlight-card{animation:spotlight-enter .65s cubic-bezier(.2,.75,.25,1) both} .category-ref-grid .spotlight-card:nth-child(2),.brand-ref-grid .spotlight-card:nth-child(2),.product-ref-grid .spotlight-card:nth-child(2){animation-delay:.04s} .category-ref-grid .spotlight-card:nth-child(3),.brand-ref-grid .spotlight-card:nth-child(3),.product-ref-grid .spotlight-card:nth-child(3){animation-delay:.08s} .category-ref-grid .spotlight-card:nth-child(4),.brand-ref-grid .spotlight-card:nth-child(4),.product-ref-grid .spotlight-card:nth-child(4){animation-delay:.12s} .category-ref-grid .spotlight-card:nth-child(5),.brand-ref-grid .spotlight-card:nth-child(5),.product-ref-grid .spotlight-card:nth-child(5){animation-delay:.16s} .category-ref-grid .spotlight-card:nth-child(6),.brand-ref-grid .spotlight-card:nth-child(6),.product-ref-grid .spotlight-card:nth-child(6){animation-delay:.20s} .category-ref-grid .spotlight-card:nth-child(7),.brand-ref-grid .spotlight-card:nth-child(7),.product-ref-grid .spotlight-card:nth-child(7){animation-delay:.24s} .category-ref-grid .spotlight-card:nth-child(8),.brand-ref-grid .spotlight-card:nth-child(8),.product-ref-grid .spotlight-card:nth-child(8){animation-delay:.28s} .category-ref-grid .spotlight-card:nth-child(9),.brand-ref-grid .spotlight-card:nth-child(9),.product-ref-grid .spotlight-card:nth-child(9){animation-delay:.32s} .category-ref-grid .spotlight-card:nth-child(10),.brand-ref-grid .spotlight-card:nth-child(10),.product-ref-grid .spotlight-card:nth-child(10){animation-delay:.36s} .category-ref-grid .spotlight-card:nth-child(11),.brand-ref-grid .spotlight-card:nth-child(11),.product-ref-grid .spotlight-card:nth-child(11){animation-delay:.40s} .category-ref-grid .spotlight-card:nth-child(12),.brand-ref-grid .spotlight-card:nth-child(12),.product-ref-grid .spotlight-card:nth-child(12){animation-delay:.44s} .category-ref-grid .spotlight-card:nth-child(13),.brand-ref-grid .spotlight-card:nth-child(13),.product-ref-grid .spotlight-card:nth-child(13){animation-delay:.48s} @media (prefers-reduced-motion:reduce){ .spotlight-card,.category-ref-grid .spotlight-card,.brand-ref-grid .spotlight-card,.product-ref-grid .spotlight-card{animation:none!important;transition:none!important} .spotlight-card:hover{transform:none} } /* ---- v6: category tree, chips, brand list, admin extras ---- */ .crumbs{font-size:11px;color:var(--muted);margin-bottom:14px}.crumbs a,.crumbs button{color:var(--green);font-weight:800;cursor:pointer}.crumbs span{margin:0 6px} .chip-row{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:thin}.chip-row:empty{display:none}.chip-row button{flex:none;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:11px;font-weight:700;color:var(--text)}.chip-row button.active,.chip-row button:hover{background:var(--green);color:#fff;border-color:var(--green)}.chip-row.sub button{font-size:10px;padding:6px 12px;background:#eef6ea;color:var(--green)}.chip-row.sub button.active{background:var(--green);color:#fff}.chip-row small{opacity:.7;margin-left:4px} .sidebar .cat-btn{display:flex;justify-content:space-between;align-items:center;font-weight:700}.sidebar .cat-btn em{font-style:normal;font-size:9px;opacity:.6}.sidebar .subs{margin:2px 0 8px 10px;border-left:2px solid var(--line);padding-left:6px}.sidebar .subs button{font-size:10px}.sidebar .subs h5{font:800 9px "Plus Jakarta Sans";color:var(--muted);text-transform:uppercase;margin:8px 8px 2px;letter-spacing:.5px}.brand-list{max-height:300px;overflow:auto}.brand-list button{display:flex!important;justify-content:space-between}.brand-list em{font-style:normal;opacity:.6;font-size:9px} .more-btn{display:block;margin:24px auto 0} .sub-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.sub-chip{display:inline-flex;align-items:center;gap:4px;background:#eef6e9;color:var(--green);border-radius:999px;padding:5px 6px 5px 11px;font-size:9px;font-weight:800}.sub-chip small{font-weight:600;opacity:.7}.sub-chip button{border:0;background:transparent;cursor:pointer;font-size:11px;padding:0 3px;color:inherit}.sub-chip button.x{color:#b13a2c}.category-row{align-items:flex-start;gap:14px}.cat-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.admin-filters{display:flex;gap:8px;padding:0 13px 13px;flex-wrap:wrap}.admin-filters select{border:1px solid var(--line);background:var(--card);border-radius:9px;padding:8px;font-size:10px;color:var(--text)}.form-hint{font-size:9px;color:var(--muted);font-weight:500} .qty-select{width:100%;margin-top:8px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);font-size:11px;font-weight:700}.qty-select:disabled{opacity:.5} .owner-enter{margin-top:18px}.unit-hint{font-size:9px;color:var(--muted);font-weight:500} /* v7.1 fix: big square product images were overflowing the card and covering the name + quantity picker */ .product-image{overflow:hidden;display:block} .product-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff} .product-body{position:relative;z-index:1;background:var(--card)} .discount,.stock-overlay{z-index:2} /* ---- v8: cart items, bump, checkout, orders ---- */ .cart-item{align-items:flex-start}.ci-main{flex:1;min-width:0}.ci-main h4{font-size:11px}.ci-size{margin-top:7px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);font-size:10px;font-weight:700} .ci-side{display:flex;flex-direction:column;align-items:flex-end;gap:7px}.ci-side strong{font-size:12px}.ci-remove{font-size:11px;color:#b13a2c;padding:2px 4px}.cart-item .qty{margin-left:0} @keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}.icon-btn.bump{animation:bump .35s} .cart-note{font-size:9px;color:var(--muted);margin:-4px 0 12px} .co-wrap{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start;padding:40px 0 70px}.co-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:16px}.co-card h2{font:800 15px "Plus Jakarta Sans";margin-bottom:14px;display:flex;align-items:center;gap:8px}.co-card h2 i{font-style:normal;background:var(--green);color:#fff;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px} .co-card label{display:block;font-size:10px;font-weight:800;margin:10px 0}.co-card input:not([type=radio]),.co-card select,.co-card textarea{width:100%;margin-top:6px;padding:11px;border:1px solid var(--line);border-radius:9px;background:var(--cream);color:var(--text);font:500 12px "DM Sans",sans-serif}.co-card textarea{min-height:70px;resize:vertical} .co-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.opt-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.opt{display:flex!important;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:13px;cursor:pointer;margin:0!important;font-size:11px!important}.opt input{margin:0!important;width:auto!important}.opt small{display:block;font-weight:500;color:var(--muted);font-size:9px;margin-top:2px}.opt:has(input:checked){border-color:#f5a400;background:#fff8e6} .co-note{font-size:10px;color:var(--muted);background:var(--cream);border-radius:9px;padding:10px;margin-top:10px;line-height:1.5} .co-summary{position:sticky;top:100px}.sum-item{display:flex;gap:10px;justify-content:space-between;font-size:11px;padding:8px 0;border-bottom:1px solid var(--line)}.sum-item small{display:block;color:var(--muted);font-size:9px;margin-top:2px}.sum-row{display:flex;justify-content:space-between;font-size:12px;margin-top:10px}.sum-row.total{font:800 16px "Plus Jakarta Sans";border-top:1px solid var(--line);padding-top:12px}.co-empty{text-align:center;padding:90px 20px;color:var(--muted)} .co-success{max-width:560px;margin:60px auto;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:36px}.co-success .tick{width:64px;height:64px;border-radius:50%;background:#e1f1c9;color:#347020;display:grid;place-items:center;font-size:32px;margin:0 auto 14px}.co-success h1{font:800 24px "Plus Jakarta Sans"}.co-success .oid{display:inline-block;background:var(--cream);border-radius:9px;padding:7px 14px;font-weight:800;margin:12px 0}.co-success p{font-size:12px;color:var(--muted);line-height:1.6}.co-success .btns{display:flex;gap:8px;justify-content:center;margin-top:20px;flex-wrap:wrap} .tab-badge{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 5px;margin-left:6px;border-radius:99px;background:#e5484d;color:#fff;font-size:9px;font-weight:800}.tab-badge:empty{display:none} .order-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:14px;border-bottom:1px solid var(--line)}.order-tabs button{padding:7px 13px;border:1px solid var(--line);border-radius:99px;font-size:10px;font-weight:800;color:var(--muted)}.order-tabs button.active{background:var(--green);border-color:var(--green);color:#fff}.order-tabs small{margin-left:5px;opacity:.75}.order-tools{margin-left:auto;display:flex;gap:6px} .order-list{padding:14px;display:grid;gap:12px}.order-card{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--card)}.order-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.order-top b{font-size:13px}.order-top small{color:var(--muted);font-size:9px;margin-left:8px} .badge{padding:5px 9px;border-radius:99px;font-size:9px;font-weight:800;background:#eef6e9;color:#347020}.badge.new{background:#ffe9d1;color:#a35a00}.badge.scheduled{background:#e5eeff;color:#2b55b5}.badge.cancelled{background:#fff0ee;color:#9a3c32}.badge.pay-pending{background:#fff7df;color:#a36d17} .order-grid{display:grid;grid-template-columns:1.1fr 1.4fr;gap:16px;margin-top:12px;font-size:10px;line-height:1.6}.order-grid h5{font:800 9px "Plus Jakarta Sans";text-transform:uppercase;color:var(--muted);margin-bottom:4px;letter-spacing:.4px}.order-items div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed var(--line);padding:3px 0}.order-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.order-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.order-foot strong{font-size:14px}.order-actions{display:flex;gap:6px}.order-empty{text-align:center;color:var(--muted);padding:50px 10px;font-size:11px} @media(max-width:860px){.co-wrap{grid-template-columns:1fr}.co-summary{position:static}.order-grid{grid-template-columns:1fr}.co-row{grid-template-columns:1fr}} /* ===================================================================== v9: Readability + comfortable spacing pass The site used a very small, dense type scale (8-13px) almost everywhere, and tight gaps in list-style components like the cart. This block raises body/meta text to a comfortable reading size, opens up spacing in the cart, product cards, nav and forms, and makes touch targets bigger on mobile. Written as an override layer (like the v4/v6/v7/v8 passes above) so nothing earlier has to be hunted down and edited by hand. ===================================================================== */ body{font-size:15px;line-height:1.6} /* ---------- Header / nav / search ---------- */ .brand strong{font-size:20px} .brand small{font-size:10px;letter-spacing:2.4px} .search input{font-size:14px} .search kbd{font-size:11px;padding:3px 6px} .nav nav{font-size:14px;gap:26px} .announcement{font-size:12px;height:38px} .delivery-strip b{font-size:13px}.delivery-strip small{font-size:11px} /* ---------- Buttons ---------- */ .btn{font-size:13.5px;min-height:48px;padding:0 22px} .add{font-size:12px;height:36px;padding:0 13px} .text-link{font-size:13px} /* ---------- Hero ---------- */ .hero p{font-size:16.5px} .eyebrow,.section-kicker{font-size:11px} /* ---------- Section heads ---------- */ .section-head h2{font-size:32px} .section-head.center p{font-size:14px} .section-mini h2{font-size:22px} .section-mini span{font-size:12px} /* ---------- Category / brand tiles (home) ---------- */ .category-grid b{font-size:12px} .category-grid small{font-size:10px} .brand-row a{font-size:12px;padding:22px 8px} .category-ref-grid a,.brand-ref-grid a{position:relative} /* ---------- Product cards ---------- */ .product-body h3{font-size:14px;line-height:1.35;margin:5px 0} .product-body small{font-size:11.5px} .price strong{font-size:17px} .price del{font-size:11px} .discount{font-size:10px;padding:6px 8px} .wholesale-note{font-size:10px;padding:6px 8px} .mini-product h3{font-size:14px} .mini-product strong{font-size:16px} .mini-product small{font-size:10px} .qty-select{font-size:13px;padding:10px} /* ---------- Store toolbar / sidebar ---------- */ .result-count{font-size:13px} .sidebar button{font-size:12px;padding:10px 8px} .sidebar h3{font-size:13px} .crumbs{font-size:12.5px} .chip-row button{font-size:12.5px;padding:9px 16px} /* ---------- Cart drawer: bigger thumbnail, clearer rows, roomier controls ---------- */ .cart-head h3{font-size:19px} .cart-panel{width:min(440px,100%)} .cart-items{padding:18px 20px} .cart-item{gap:14px;padding:18px 0} .cart-thumb{width:68px;height:68px;border-radius:12px;flex:none;background:#f4f6f8} .ci-main h4{font-size:14px;line-height:1.3;margin-bottom:4px} .ci-main small{font-size:12px} .ci-size{margin-top:10px;font-size:12.5px;padding:8px 9px} .ci-side{gap:10px;padding-left:4px} .ci-side strong{font-size:14.5px} .ci-remove{font-size:14px;padding:4px 6px} .qty{gap:8px} .qty button{width:30px;height:30px;font-size:15px} .qty b{font-size:13.5px;min-width:14px;text-align:center;display:inline-block} .cart-footer{padding:20px} .cart-footer strong{font-size:19px} .delivery-note{font-size:12px} .cart-empty{font-size:13px} /* ---------- Admin tables & forms ---------- */ .admin-table th,.admin-table td{font-size:11.5px;padding:14px 12px} .admin-stats span{font-size:10.5px} .admin-stats strong{font-size:25px} .login-card label,.product-form label{font-size:11.5px} .login-card input,.product-form input,.product-form select,.table-search input{font-size:13px;padding:12px} .status-select{font-size:10.5px;padding:8px 9px} /* ---------- Checkout / orders ---------- */ .co-card label{font-size:11.5px} .co-card input:not([type=radio]),.co-card select,.co-card textarea{font-size:13.5px;padding:12px} .opt{font-size:12.5px!important} .sum-item{font-size:12.5px} .sum-row.total{font-size:18px} /* ---------- Footer ---------- */ .footer p,.footer a,.footer span{font-size:11.5px} .footer h4{font-size:12.5px} /* ---------- Mobile: bigger tap targets, more breathing room ---------- */ @media(max-width:760px){ body{font-size:14.5px} .icon-btn{width:46px;height:46px} .search{height:48px} .search input{font-size:15px} .btn{min-height:50px} .cart-panel{width:100%} .cart-items{padding:14px 16px} .cart-item{gap:12px;padding:16px 0} .cart-thumb{width:60px;height:60px} .ci-main h4{font-size:13.5px} .qty button{width:34px;height:34px} .product-grid{gap:12px} .product-body{padding:14px} .product-body h3{font-size:13.5px} .price strong{font-size:16px} .add{height:38px;padding:0 14px} .category-grid a>div{width:58px;height:58px;font-size:30px} .category-grid b{font-size:11px} .co-card{padding:18px} } /* ---------- Mobile bug fix: nav row was wrapping to 2 lines and overlapping the hero below it instead of scrolling sideways ---------- */ @media(max-width:760px){ .ref-nav{flex-wrap:nowrap;-webkit-overflow-scrolling:touch} .ref-nav>a{flex:none;font-size:12.5px} .ref-hero-btn small{font-size:10.5px} .ref-hero-btn b{font-size:13.5px} /* the hero text block and the "Free Door Delivery" card are both absolutely positioned, and the fixed 470px hero height wasn't tall enough for the text — the delivery card sat 30px into the buttons. Give the hero more room and drop the card further down. */ .ref-hero{height:640px} .delivery-card-ref{top:auto;bottom:16px} } @media(max-width:420px){ .ref-hero{height:680px} } /* ===================================================================== v10: two alignment bugs 1) .ci-size (the pack-size dropdown in each cart row) was an inline