/* ============================================================ DubaiTime — Master Design System (Black & White · Elite) One source of truth for every page. ============================================================ */ :root{ --ink:#0b0b0c; /* near-black */ --ink-2:#161618; --ink-3:#1f1f22; --paper:#ffffff; --mist:#f6f6f7; /* cool light section bg */ --line:#e6e6e8; --line-2:#26262a; /* on dark */ /* Ratings. product.php declared this in its own :root, so the stars were gold on a product page and plain black everywhere else. One value here, every page picks it up. --gold-off is the unearned star: it has to read as "empty" while still showing the scale, or a 4-star review looks identical to a 5-star one with a star missing. */ --gold:#e3a008; --gold-off:#dcdce1; /* Body copy was #6b6b70 on white — about 4.9:1, which passes the letter of WCAG AA and still reads as washed out on a bright phone in daylight. These are darker across the board; --grey-2 in particular was being used for real sentences, not just hints. */ --grey:#1c1c20; --grey-2:#38383f; --grey-3:#68686f; /* Light-toned counterparts for text sitting on dark sections (footer, heritage, news, hero). The --grey* trio above is tuned for readability on white/--mist backgrounds; using it on --ink made copy on dark sections nearly invisible. These three keep dark sections legible. */ --grey-on-dark:rgba(255,255,255,.82); --grey-on-dark-2:rgba(255,255,255,.62); --grey-on-dark-3:rgba(255,255,255,.42); /* Bodoni and Jost were the wrong call: Bodoni's hairlines and Jost's light geometric strokes both go faint on a white page, which is exactly the complaint. Libre Baskerville and Manrope carry real weight at small sizes and are still nothing like the Playfair + Inter default. */ --display:'Inter', sans-serif; --body:'Inter', sans-serif; --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --shadow:0 30px 60px -34px rgba(0,0,0,.4); --nav-h:96px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;width:100%} body{ font-family:var(--body);color:var(--ink);background:var(--paper); -webkit-font-smoothing:antialiased;line-height:1.7;overflow-x:clip; font-size:1.01rem;font-weight:500; } .serif,h1,h2,h3,h4,h5,h6{font-family:var(--display);font-weight:700;letter-spacing:-.01em} /* Anything set in --grey is real prose, not decoration, so it gets the same weight as body copy rather than being left to fade out. */ p,li,td,dd,label,.sub,.tax,.hint{font-weight:500} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit} ::selection{background:var(--ink);color:#fff} .wrap{max-width:1320px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)} .serif{font-family:var(--display)} .eyebrow{font-size:.86rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:var(--ink);display:inline-flex;align-items:center;gap:.7rem} .eyebrow::before{content:none} .eyebrow.center{justify-content:center} .eyebrow.no-dash::before{display:none} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:.7rem;font-size:.75rem;font-weight:600; letter-spacing:.16em;text-transform:uppercase;padding:1.05rem 2rem;border:1px solid transparent; cursor:pointer;transition:.35s var(--ease);white-space:nowrap;background:none} .btn i{transition:transform .35s var(--ease)} .btn:hover i{transform:translateX(4px)} .btn-solid{background:var(--ink);color:#fff} .btn-solid:hover{background:transparent;color:var(--ink);border-color:var(--ink)} .btn-solid.on-dark{background:#fff;color:var(--ink)} .btn-solid.on-dark:hover{background:transparent;color:#fff;border-color:#fff} .btn-ghost{border-color:rgba(0,0,0,.25);color:var(--ink)} .btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .btn-ghost.on-dark{border-color:rgba(255,255,255,.35);color:#fff} .btn-ghost.on-dark:hover{background:#fff;color:var(--ink);border-color:#fff} .btn-sm{padding:.7rem 1.3rem;font-size:.68rem} /* ---------- Preloader ---------- */ /* Preloader switched off: it delayed first paint by roughly a second on every visit for no benefit, and that is measured as a real cost by search engines. Left in the stylesheet rather than ripped out so it can be turned back on. */ #pre{display:none!important} #pre.enabled{position:fixed;inset:0;z-index:9999;background:var(--ink);display:grid;place-items:center; transition:opacity .7s var(--ease),visibility .7s} #pre.done{opacity:0;visibility:hidden} #pre .mark{font-family:var(--display);color:#fff;font-size:clamp(1.6rem,5vw,2.6rem); letter-spacing:.02em;position:relative;overflow:hidden;padding-bottom:8px} #pre .mark span{display:inline-block;transform:translateY(110%);animation:rise .9s var(--ease) forwards} #pre .mark span:nth-child(2){animation-delay:.06s} #pre .bar{position:absolute;left:0;bottom:0;height:1px;width:0;background:#fff;animation:load 1.4s var(--ease) .25s forwards} @keyframes rise{to{transform:translateY(0)}} @keyframes load{to{width:100%}} /* ---------- Announcement (static 3-up perk bar) ---------- Black, matching the header below it, so the two read as one solid block instead of a green stripe sitting on top of a black nav. All copy is white — the sub-line keeps a touch of transparency so the heading still leads, but it is white, not grey. */ .perks{background:#000;color:#fff;border-bottom:1px solid rgba(255,255,255,.10)} .perks-row{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:.7rem 0} .perk{text-align:center;padding:0 1rem;position:relative} .perk+.perk::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); height:26px;width:1px;background:rgba(255,255,255,.18)} .perk b{display:block;font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:#fff} .perk span{display:block;font-size:.66rem;color:rgba(255,255,255,.88);margin-top:.15rem;letter-spacing:.02em} .perk-stars .stars{display:flex;justify-content:center;gap:.15rem;color:#f5c04a;font-size:.78rem;margin-bottom:.1rem} /* Phone: three stacked lines pushed the logo below the fold, so the bar becomes one rotating line instead. Same three messages, one at a time, no extra height. The two transitions are deliberately not symmetrical. With both at the same duration the outgoing and incoming messages cross over while both are half visible, and since they sit on top of each other the result is two lines of text smeared together — caught in a phone screenshot at 390px. The incoming one now waits for the outgoing to finish before it starts, so there is a brief empty beat instead of an overlap. */ @media(max-width:780px){ .perks{overflow:hidden} .perks-row{grid-template-columns:1fr;padding:0;height:44px;position:relative} .perk+.perk::before{display:none} .perk{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center; opacity:0;transform:translateY(6px); transition:opacity .26s var(--ease),transform .26s var(--ease)} .perk.is-on{opacity:1;transform:translateY(0); transition:opacity .3s var(--ease) .28s,transform .34s var(--ease) .28s} .perk b{font-size:.63rem;letter-spacing:.09em} .perk span{font-size:.58rem} .perk-stars .stars{font-size:.7rem;margin-bottom:.05rem} } /* ---------- Header ---------- */ header{position:sticky;top:0;z-index:900;background:var(--ink); border-bottom:1px solid var(--line-2);transition:box-shadow .4s} header.scrolled{box-shadow:0 10px 40px -30px rgba(0,0,0,.6)} .nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:2rem} .brand{display:flex;align-items:center;gap:.7rem;line-height:1} .brand img{height:42px;width:auto} .brand .txt{font-family:var(--display);font-size:1.4rem;font-weight:700;color:#fff} .brand .txt small{display:block;font-family:var(--body);font-size:.5rem;letter-spacing:.42em; font-weight:600;color:var(--grey-on-dark-3);margin-top:3px;text-transform:uppercase} .menu{display:flex;gap:2rem;list-style:none} .menu a{font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--grey-on-dark);position:relative;padding:.4rem 0} .menu a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:#fff; transition:width .35s var(--ease)} .menu a:hover,.menu a.active{color:#fff} .menu a:hover::after,.menu a.active::after{width:100%} /* ---------- Mega menu (hover dropdown on Men / Women) ---------- */ .menu li.has-mega{position:static} .mega{position:absolute;left:0;right:0;top:100%;background:var(--ink); border-bottom:1px solid var(--line-2);box-shadow:0 30px 60px -30px rgba(0,0,0,.7); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s; z-index:850} .menu li.has-mega:hover .mega{opacity:1;visibility:visible;transform:translateY(0); transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s} .mega .in{max-width:1280px;margin:0 auto;padding:2.2rem 2rem 2.4rem; display:grid;grid-template-columns:1.2fr 1.4fr auto;gap:2.4rem} .mega h6{font-family:var(--body);font-size:.66rem;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--grey-on-dark-3);margin:0 0 1rem} .mega-cats{display:flex;flex-direction:column;gap:.15rem} .mega-cats a{display:flex;align-items:center;gap:.85rem;padding:.55rem .4rem;border-radius:8px; color:var(--grey-on-dark);font-size:.86rem;font-weight:600;transition:background .25s,color .25s,padding-left .25s} .mega-cats a i{font-size:1.05rem;width:22px;text-align:center;color:var(--grey-on-dark-3);transition:color .25s} .mega-cats a:hover{background:rgba(255,255,255,.06);color:#fff;padding-left:.7rem} .mega-cats a:hover i{color:#fff} .mega-brands{display:grid;grid-template-columns:1fr 1fr;gap:.15rem .5rem} .mega-brands a{padding:.55rem .4rem;border-radius:8px;color:var(--grey-on-dark-2); font-size:.82rem;font-weight:600;letter-spacing:.02em;transition:background .25s,color .25s} .mega-brands a:hover{background:rgba(255,255,255,.06);color:#fff} .mega-brands a small{display:block;color:var(--grey-on-dark-3);font-weight:500;font-size:.7rem;margin-top:1px} .mega-feat{width:220px;position:relative;border-radius:12px;overflow:hidden} .mega-feat img{width:100%;height:100%;object-fit:cover;display:block} .mega-feat .cap{position:absolute;left:0;right:0;bottom:0;padding:1rem; background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);color:#fff} .mega-feat .cap b{display:block;font-family:var(--display);font-size:1.02rem} .mega-feat .cap span{font-size:.68rem;color:var(--grey-on-dark-2);text-transform:uppercase;letter-spacing:.08em} @media(max-width:1080px){.mega{display:none}} .nav-icons{display:flex;gap:1.35rem;align-items:center;font-size:1.05rem} .nav-icons a,.nav-icons button{color:#fff;background:none;border:0;cursor:pointer; position:relative;line-height:1;padding:0} .badge{position:absolute;top:-8px;right:-9px;background:#fff;color:var(--ink);font-family:var(--body); font-size:.55rem;font-weight:700;min-width:15px;height:15px;border-radius:9px;display:grid; place-items:center;padding:0 3px} .burger{display:none;font-size:1.3rem} /* ---------- Mobile drawer ---------- */ .drawer{position:fixed;inset:0 0 0 auto;width:min(86vw,350px);background:#fff;z-index:950; transform:translateX(100%);transition:transform .5s var(--ease);padding:1.6rem;display:flex; flex-direction:column;box-shadow:-20px 0 60px -30px rgba(0,0,0,.5);overflow-y:auto} .drawer.open{transform:translateX(0)} .drawer .dh{display:flex;justify-content:space-between;align-items:center} .drawer .x{font-size:1.5rem;background:none;border:0;cursor:pointer} .drawer .sale-tag{margin-top:1.4rem;font-size:.68rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--gold,#b2843a);padding-bottom:.9rem;border-bottom:1px solid var(--line)} .drawer ul{list-style:none;margin-top:1.4rem;display:flex;flex-direction:column} .drawer a{display:block;padding:.9rem 0;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase; border-bottom:1px solid var(--line);font-weight:500} .drawer li.has-shots a{display:flex;align-items:center;justify-content:space-between;gap:.8rem; border-bottom:0;padding-bottom:.5rem} .drawer li.has-shots{border-bottom:1px solid var(--line);padding-bottom:.5rem} .drawer .mini-shots{display:flex;gap:.4rem;padding-bottom:.9rem} .drawer .mini-shots a{border-bottom:0;padding:0;flex:none} .drawer .mini-shots img{width:44px;height:44px;object-fit:cover;background:var(--mist);border:1px solid var(--line)} .drawer .signin{padding:1rem 0;font-size:.85rem;text-transform:none;letter-spacing:normal;font-weight:500;color:var(--grey)} .scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);z-index:940; opacity:0;visibility:hidden;transition:.4s} .scrim.on{opacity:1;visibility:visible} /* ---------- Search overlay ---------- */ .search-ov{position:fixed;inset:0;z-index:960;background:rgba(11,11,12,.97);display:grid; place-items:start center;padding-top:14vh;opacity:0;visibility:hidden;transition:.4s var(--ease)} .search-ov.open{opacity:1;visibility:visible} .search-ov .box{width:min(90vw,680px)} .search-ov input{width:100%;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.3); color:#fff;font-family:var(--display);font-size:clamp(1.4rem,4vw,2.4rem);padding:.6rem 0;outline:none} .search-ov input::placeholder{color:var(--grey)} .search-ov .hint{color:var(--grey-2);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-top:1.2rem} .search-ov .x{position:absolute;top:2rem;right:2rem;color:#fff;background:none;border:0;font-size:1.6rem;cursor:pointer} .search-results{margin-top:2rem;display:grid;gap:.4rem;max-height:44vh;overflow:auto} .search-results a{display:flex;gap:1rem;align-items:center;padding:.7rem;color:#fff; border:1px solid transparent;transition:.25s} .search-results a:hover{background:rgba(255,255,255,.06);border-color:var(--line-2)} .search-results img{width:48px;height:48px;object-fit:cover} .search-results .t{font-size:.85rem;font-weight:500} .search-results .p{font-size:.72rem;color:var(--grey-2)} /* ---------- Section shell ---------- */ .pad{padding:clamp(2rem,4vw,3rem) 0} .pad-sm{padding:clamp(1.2rem,2.4vw,1.8rem) 0} .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem; flex-wrap:wrap;margin-bottom:1.3rem} .sec-head.center{flex-direction:column;align-items:center;text-align:center} .sec-head h2{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.12;letter-spacing:-.01em} .sec-head h2 em{font-style:italic;color:var(--grey)} .sec-head p{color:var(--grey-2);max-width:48ch;margin-top:.5rem;font-size:.95rem} .link-more{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; display:inline-flex;gap:.6rem;align-items:center;padding-bottom:.35rem;border-bottom:1px solid var(--ink)} .link-more i{transition:transform .35s var(--ease)} .link-more:hover i{transform:translateX(5px)} /* ---------- Product card ---------- Restyled after flagship watch-brand sites (Rolex/Omega/Tudor pattern): no boxed border, the photo breathes with generous surrounding space, copy is centered and quiet, and the only strong color is the price. */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.8rem,3vw,3rem)} .grid.g3{grid-template-columns:repeat(3,1fr)} .card{background:var(--paper);border:0;position:relative; display:flex;flex-direction:column;text-align:center; transition:transform .5s var(--ease)} .card:hover{border-color:transparent;transform:translateY(-4px);box-shadow:none} .card .media{position:relative;overflow:hidden;background:var(--mist)} .card .shot{position:relative;aspect-ratio:1/1.08;overflow:hidden;background:var(--mist);display:block} /* padding 2.2rem se 1rem. Wo purani qeemat un tasveeron ke liye thi jin ka apna pas-manzar safed aur kushada tha. Ab zyadatar tasveerein dastane par ya box mein khinchi hui hain, jahan ghari pehle se frame ke beech mein hoti hai — us par itni padding lagane ka matlab tha ghari ko dobara chhota karna. */ .card .shot img{width:100%;height:100%;object-fit:contain;padding:1rem; transition:opacity .6s var(--ease),transform 1.2s var(--ease)} .card .shot img.alt{position:absolute;inset:0;opacity:0} .card:hover .shot img.main{opacity:0} .card:hover .shot img.alt{opacity:1;transform:scale(1.03)} .tag{display:none} .tag-new{position:absolute;top:0;left:0;background:var(--ink);color:#fff;font-size:.6rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase;padding:.4rem .7rem;z-index:2} .wish{position:absolute;top:.9rem;right:.9rem;width:34px;height:34px;background:transparent; border:0;display:grid;place-items:center;z-index:2;opacity:0;transform:translateY(-4px); transition:.35s var(--ease);cursor:pointer;font-size:1rem;color:var(--ink)} .card:hover .wish{opacity:1;transform:translateY(0)} .wish:hover{color:#b2334a} .wish.on{color:#b2334a;opacity:1;transform:none} .quick{position:static;background:none;color:var(--ink);text-align:center; font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:.9rem 0 0; z-index:3;transform:none;transition:.3s var(--ease);cursor:pointer;border:0;width:100%; border-top:1px solid var(--line);margin-top:.9rem} .quick:hover{color:var(--grey)} /* ---------- card par WhatsApp ka button ---------- Card ka button pehle saada text tha jo tasveer ke neeche ek patli lakeer ke saath baith'ta tha. Ab ye WhatsApp par le jata hai, aur us ka hara rang jaan boojh kar rakha gaya hai: log is hare ko bina parhe pehchante hain. Poora sabz block nahi banaya — ek qatar mein aath cards hon to aath hare dabbe tasveeron se tawajjo cheen lete hain, aur ghari bechne wali site par tawajjo ghari par honi chahiye. Is liye sirf harf aur nishan hare hain, aur hover par poora button bhar jata hai. */ /* .wa-buy ke rang yahan se hata diye (26 Aug 2026). Card ka button ab "Add to Bag" hai, WhatsApp nahi — aur woh apne .quick / .sbuy rangon par chalta hai. Class kahin baqi nahi rahi, is liye ye rules bhi nahi. */ @media (hover:none){ .quick{padding:.85rem 0 0} .wish{opacity:1;transform:none;background:rgba(255,255,255,.85);border-radius:50%;top:.7rem;right:.7rem} } .info{padding:1.5rem 1rem 0;display:flex;flex-direction:column;flex:1;align-items:center} .info .cat{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grey-2)} .info .name{font-family:var(--display);font-size:1rem;margin:.6rem 0 .6rem;line-height:1.3; font-weight:600;display:block;color:var(--ink);max-width:26ch} .info .price{display:flex;align-items:baseline;justify-content:center;gap:.6rem;font-size:1.02rem;font-weight:700;letter-spacing:.02em} .info .price .was{color:var(--grey-3);text-decoration:line-through;font-weight:400;font-size:.8rem} .info .rule{display:none} .info .foot{margin-top:.7rem;display:flex;justify-content:center;gap:1.1rem;align-items:center;font-size:.62rem; letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2)} .dot{width:5px;height:5px;border-radius:50%;background:var(--ink);display:inline-block;margin-right:.4rem} .dot.warn{background:#8a6d1f}.dot.out{background:#b23} /* ---------- Footer ---------- */ footer{background:#000;color:#fff;padding:4.5rem 0 2rem;border-top:1px solid var(--line-2)} .f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:2.5rem} .f-brand .brand .txt,.f-brand .brand{color:#fff} .f-brand img{height:46px;margin-bottom:1rem} .f-brand-mark{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem} .f-brand-mark img{height:38px;margin-bottom:0} .f-brand-mark .txt{font-family:var(--display);font-size:1.3rem;font-weight:700;color:#fff;line-height:1} .f-brand-mark .txt small{display:block;font-family:var(--body);font-size:.48rem;letter-spacing:.4em; font-weight:600;color:var(--grey-on-dark-3);margin-top:4px;text-transform:uppercase} .f-brand p{font-size:.85rem;margin-bottom:1.2rem;max-width:34ch;line-height:1.7;color:#fff} .f-social{display:flex;gap:1rem;font-size:1.05rem} .f-social a{width:38px;height:38px;border:1px solid var(--line-2);display:grid;place-items:center; color:#fff;transition:.3s} .f-social a:hover{background:#fff;color:var(--ink);border-color:#fff} footer h6{color:#fff;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase; margin-bottom:1.3rem;font-weight:600} .f-links{list-style:none;display:flex;flex-direction:column;gap:.75rem} .f-links a{color:#fff} .f-links a{font-size:.85rem;transition:.25s;width:fit-content} .f-links a:hover{color:#fff;padding-left:.5rem} .f-contact{list-style:none;color:#fff} .f-contact li{font-size:.85rem;display:flex;gap:.7rem;margin-bottom:.9rem;line-height:1.5} .f-contact i{color:#fff;margin-top:2px} .f-bottom{border-top:1px solid var(--line-2);margin-top:3.2rem;padding-top:1.8rem;display:flex; justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.72rem;letter-spacing:.05em} /* ---------- WhatsApp FAB ---------- */ /* WhatsApp ka apna hara — #25D366, wohi jo un ki app aur logo par hai. Pehle ye kaala tha, site ke baqi rang ke saath. Kaala rakhna dekhne mein zyada sanjeeda lagta hai, magar us ka nuqsan asal mein bara hai: log is hare ko bina parhe pehchante hain. Kaale gol button par safed nishan dekh kar ruk kar sochna parta hai ke ye kya hai — aur ruk kar sochne wala aksar dabata nahi. Ab site par sab se ahem button wohi hai jis se saara kaam hota hai, is liye us par pehchan sanjeedgi se zyada qeemti hai. Saya bhi hare rang ka rakha hai (kaale ki jagah), taake button safed pas-manzar par tairta hua lage aur kinare sakht na lagein. */ .wa{position:fixed;right:22px;bottom:22px;width:54px;height:54px;background:#25D366;color:#fff; border-radius:50%;display:grid;place-items:center;font-size:1.5rem;z-index:800; box-shadow:0 14px 34px -12px rgba(18,140,74,.65);transition:transform .35s var(--ease),background .25s} .wa:hover{transform:scale(1.08) rotate(6deg);background:#1eb958} /* ---------- Cart drawer ---------- */ .cart-drawer{position:fixed;inset:0 0 0 auto;width:min(92vw,420px);background:#fff;z-index:970; transform:translateX(100%);transition:transform .5s var(--ease);display:flex;flex-direction:column; box-shadow:-20px 0 60px -30px rgba(0,0,0,.5)} .cart-drawer.open{transform:translateX(0)} .cart-drawer .ch{display:flex;justify-content:space-between;align-items:center;padding:1.4rem 1.6rem; border-bottom:1px solid var(--line)} .cart-drawer .ch h4{font-family:var(--display);font-size:1.2rem;font-weight:600} .cart-drawer .ch button{background:none;border:0;font-size:1.4rem;cursor:pointer} .cart-body{flex:1;overflow:auto;padding:1rem 1.6rem} .cart-line{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)} .cart-line img{width:70px;height:70px;object-fit:cover;background:var(--mist);flex:0 0 auto} .cart-line .cl-t{font-family:var(--display);font-size:.92rem;font-weight:600;line-height:1.3} .cart-line .cl-p{font-size:.82rem;color:var(--grey);margin-top:.25rem} .cart-line .qty{display:inline-flex;align-items:center;border:1px solid var(--line);margin-top:.5rem} .cart-line .qty button{width:26px;height:26px;border:0;background:none;cursor:pointer;font-size:.9rem} .cart-line .qty span{width:30px;text-align:center;font-size:.82rem} .cart-line .rm{margin-left:auto;background:none;border:0;color:var(--grey-2);cursor:pointer;font-size:.9rem;align-self:flex-start} .cart-line .rm:hover{color:var(--ink)} .cart-foot{border-top:1px solid var(--line);padding:1.4rem 1.6rem} .cart-foot .row{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:.6rem} .cart-foot .total{font-family:var(--display);font-size:1.3rem;font-weight:700;margin:1rem 0} .cart-empty{text-align:center;padding:3rem 1rem;color:var(--grey)} .cart-empty i{font-size:2.4rem;color:var(--grey-3);display:block;margin-bottom:1rem} /* ---------- Toast ---------- */ .toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,120%);background:var(--ink); color:#fff;padding:.9rem 1.6rem;font-size:.8rem;letter-spacing:.06em;z-index:990; transition:transform .45s var(--ease);display:flex;gap:.6rem;align-items:center} .toast.show{transform:translate(-50%,0)} .toast i{color:#fff} /* ---------- Reveal ---------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .reveal.in{opacity:1;transform:none} [data-delay="1"]{transition-delay:.08s}[data-delay="2"]{transition-delay:.16s} [data-delay="3"]{transition-delay:.24s}[data-delay="4"]{transition-delay:.32s} /* ---------- Page hero (inner pages) ---------- */ .page-hero{background:var(--ink);color:#fff;padding:clamp(1.8rem,3.4vw,2.6rem) 0 clamp(1.6rem,3vw,2.2rem); position:relative;overflow:hidden} .page-hero .crumb{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2); display:flex;gap:.6rem;margin-bottom:1.4rem} .page-hero .crumb a:hover{color:#fff} .page-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(1.55rem,3vw,2.25rem);line-height:1.12} /* Some pages carry their own .page-hero rules in a