/* =================================================================== JUYUB — design system. Two directions via [data-dir="a"|"b"]. Bilingual: [data-lang="en"|"ar"], RTL handled on . =================================================================== */ /* ---------- Tokens ---------- */ :root{ --maroon:#540b14; --maroon-deep:#3a0810; --wine:#6e1422; --ink:#241c1a; --ink-soft:#5b504b; --ivory:#f6f1e7; --paper:#fbf8f2; --taupe:#cbbba9; --sand:#e9dfce; --line:rgba(36,28,26,.13); --line-strong:rgba(36,28,26,.26); --ok:#2f6b3f; --shadow:0 18px 50px -28px rgba(58,8,16,.45); --maxw:1280px; --gut:clamp(18px,4.5vw,64px); /* tweakable */ --accent:var(--maroon); } /* direction A — Maison (editorial luxury) */ [data-dir="a"]{ --font-display:'Cormorant Garamond',Georgia,serif; --font-body:'Hanken Grotesk',system-ui,sans-serif; --bg:var(--paper); --surface:#ffffff; --radius:3px; --radius-lg:4px; --disp-weight:600; --disp-tracking:.005em; --eyebrow-tr:.34em; --btn-tr:.22em; --hero-scale:1; } [data-dir="a"][data-lang="ar"]{ --font-display:'El Messiri',sans-serif; --font-body:'Tajawal',sans-serif; --disp-weight:600; --eyebrow-tr:.14em; --btn-tr:.06em; } /* direction B — Boutique (modern confident) */ [data-dir="b"]{ --font-display:'Archivo',system-ui,sans-serif; --font-body:'Hanken Grotesk',system-ui,sans-serif; --bg:#ffffff; --surface:#ffffff; --radius:13px; --radius-lg:22px; --disp-weight:800; --disp-tracking:-.02em; --eyebrow-tr:.2em; --btn-tr:.02em; } [data-dir="b"][data-lang="ar"]{ --font-display:'Cairo',sans-serif; --font-body:'IBM Plex Sans Arabic',sans-serif; --disp-weight:800; --disp-tracking:0; --eyebrow-tr:.08em; } /* ---------- Reset ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:hidden} body{ font-family:var(--font-body); background:var(--bg); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; width:100%; max-width:100%; position:relative; } img{display:block;max-width:100%} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} a{color:inherit;text-decoration:none} ul{list-style:none} :focus-visible{outline:2px solid var(--maroon);outline-offset:3px} .app{min-height:100vh;display:flex;flex-direction:column} main{flex:1} /* ---------- Type ---------- */ h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--disp-weight);line-height:1.04;letter-spacing:var(--disp-tracking);color:var(--ink)} .display{font-family:var(--font-display);font-weight:var(--disp-weight);letter-spacing:var(--disp-tracking);line-height:1.02} .h-hero{font-size:clamp(46px,9vw,116px)} .h1{font-size:clamp(34px,6vw,68px)} .h2{font-size:clamp(27px,3.6vw,46px)} .h3{font-size:clamp(21px,2.2vw,29px)} .eyebrow{ font-family:var(--font-body);font-weight:600; font-size:12px;letter-spacing:var(--eyebrow-tr);text-transform:uppercase; color:var(--maroon); } [data-lang="ar"] .eyebrow{text-transform:none;font-size:14px} .lede{font-size:clamp(16px,1.5vw,19px);color:var(--ink-soft);max-width:60ch} .muted{color:var(--ink-soft)} .serif-num{font-family:var(--font-display)} /* arabic line-height a touch looser */ [data-lang="ar"] body,[data-lang="ar"] .lede{line-height:1.85} [data-lang="ar"] h1,[data-lang="ar"] h2,[data-lang="ar"] h3{line-height:1.3} /* ---------- Layout ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)} .section{padding-block:clamp(56px,8vw,120px)} .section-sm{padding-block:clamp(40px,5vw,70px)} .center{text-align:center} .stack{display:flex;flex-direction:column} .row{display:flex;align-items:center} .between{justify-content:space-between} .gap-s{gap:10px}.gap-m{gap:18px}.gap-l{gap:32px} .divider{height:1px;background:var(--line);border:0} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--font-body);font-weight:600;font-size:14px; letter-spacing:var(--btn-tr);text-transform:uppercase; padding:15px 30px;border-radius:var(--radius); transition:.32s cubic-bezier(.4,0,.2,1);white-space:nowrap; } [data-lang="ar"] .btn{text-transform:none;font-size:15px} .btn-primary{background:var(--accent);color:var(--ivory)} .btn-primary:hover{background:var(--maroon-deep);transform:translateY(-2px)} .btn-outline{background:var(--bg);color:var(--maroon);box-shadow:inset 0 0 0 1.4px var(--maroon)} .btn-outline:hover{background:var(--maroon);color:#fff} .btn-ghost{padding-inline:0;color:var(--maroon);border-bottom:1.4px solid var(--maroon);border-radius:0;padding-bottom:3px} .btn-block{width:100%} .btn-lg{padding:18px 40px;font-size:15px} .btn-wa{background:#1f8f4e;color:#fff} .btn-wa:hover{background:#177a41;transform:translateY(-2px)} [data-dir="b"] .btn{font-weight:700} .btn[disabled]{opacity:.4;pointer-events:none} /* ---------- Header ---------- */ .hdr{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} [data-dir="b"] .hdr{background:var(--maroon);border-bottom:none;color:var(--ivory)} .hdr-inner{display:flex;align-items:center;justify-content:space-between;gap:24px; height:var(--hdr-h,76px);max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)} [data-dir="b"]{--hdr-h:72px} .brand{display:flex;align-items:center;gap:12px;flex-shrink:0} .brand img{height:38px;width:auto} .brand-word{font-family:var(--font-display);font-weight:var(--disp-weight);font-size:25px;letter-spacing:.16em;line-height:1} [data-dir="b"] .brand-word{letter-spacing:.02em;font-weight:800} .nav{display:flex;align-items:center;gap:clamp(14px,2vw,34px)} .nav a{font-size:13.5px;font-weight:600;letter-spacing:.04em;position:relative;padding:6px 0;color:inherit;opacity:.82;transition:.2s} [data-lang="ar"] .nav a{font-size:16px;letter-spacing:0} .nav a:hover,.nav a.active{opacity:1} .nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:currentColor} .hdr-actions{display:flex;align-items:center;gap:6px} .icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:inherit;transition:.2s;position:relative} .icon-btn:hover{background:color-mix(in srgb,currentColor 12%,transparent)} .icon-btn svg{width:21px;height:21px} .cart-count{position:absolute;top:3px;inset-inline-end:3px;min-width:18px;height:18px;padding:0 4px; background:var(--maroon);color:var(--ivory);border-radius:9px;font-size:11px;font-weight:700; display:grid;place-items:center;line-height:1} [data-dir="b"] .cart-count{background:var(--ivory);color:var(--maroon)} .lang-toggle{font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:.04em; padding:8px 13px;border-radius:999px;box-shadow:inset 0 0 0 1.3px color-mix(in srgb,currentColor 35%,transparent);transition:.2s} .lang-toggle:hover{background:color-mix(in srgb,currentColor 12%,transparent)} .burger{display:none} /* announcement */ .announce{background:var(--maroon-deep);color:var(--ivory);text-align:center;font-size:12.5px; letter-spacing:.12em;text-transform:uppercase;padding:9px 16px;font-weight:600} [data-lang="ar"] .announce{text-transform:none;letter-spacing:.02em;font-size:14px} [data-dir="b"] .announce{background:var(--ink)} /* ---------- Footer ---------- */ .ftr{background:var(--maroon);color:var(--ivory);position:relative;overflow:hidden;margin-top:auto} .ftr-pattern{position:absolute;inset:0;background-image:url(https://juyub.odoo.com/web/image/1086);background-size:cover; background-position:center;opacity:.07;mix-blend-mode:screen;pointer-events:none} /* DESKTOP layout — original 3-col grid */ .ftr-desk{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(48px,7vw,90px) var(--gut) 40px; display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(28px,5vw,70px)} .ftr-mob{display:none} .ftr-bottom-desk{position:relative;border-top:1px solid rgba(246,241,231,.18);padding:22px var(--gut); max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;opacity:.7} .ftr-bottom-mob{display:none} /* shared ftr-inner fallback */ .ftr-inner{position:relative} .ftr h4{color:var(--ivory);font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-family:var(--font-body);font-weight:700;margin-bottom:18px;opacity:.7} [data-lang="ar"] .ftr h4{text-transform:none;letter-spacing:.04em;font-size:16px} .ftr a{opacity:.82;font-size:14.5px;display:block;padding:5px 0;transition:.2s} .ftr a:hover{opacity:1;padding-inline-start:5px} .ftr-logo img{height:72px;margin-bottom:18px} .ftr-tag{font-family:var(--font-display);font-size:clamp(20px,2vw,26px);line-height:1.25;max-width:24ch;opacity:.95} .ftr-social{display:flex;gap:12px} .ftr-social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center; box-shadow:inset 0 0 0 1px rgba(246,241,231,.3);opacity:.85;color:var(--ivory);transition:.2s} .ftr-social a:hover{background:var(--ivory);color:var(--maroon);opacity:1} .ftr-social svg{width:18px;height:18px} .ftr-admin{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ivory);opacity:.6; padding:7px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(246,241,231,.28);transition:.2s} .ftr-admin:hover{opacity:1;background:rgba(246,241,231,.12)} .ftr-shoplinks.two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 24px} /* mobile-only elements — hidden by default */ .ftr-logo-block{display:none} .ftr-cards{display:none} .ftr-card{display:none} .ftr-wa-row{display:none} .ftr-bottom-row{display:none} .ftr-copy{display:none} .ftr-admin-icon{display:none} /* ---------- Product card ---------- */ .grid-products{display:grid;gap:clamp(14px,2vw,30px)} .shop-grid{grid-template-columns:repeat(3,1fr)} .home-grid{grid-template-columns:repeat(4,1fr)} .card{position:relative;cursor:pointer;display:flex;flex-direction:column} .card-media{position:relative;aspect-ratio:1/1;background:var(--surface);border-radius:var(--radius-lg); overflow:hidden;display:grid;place-items:center} [data-dir="a"] .card-media{box-shadow:inset 0 0 0 1px var(--line)} [data-dir="b"] .card-media{background:#f4efe7} .card-media img{width:84%;height:84%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1)} .card:hover .card-media img{transform:scale(1.05)} .card-tag{position:absolute;top:12px;inset-inline-start:12px;background:var(--ivory);color:var(--maroon); font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:999px;z-index:2} [data-lang="ar"] .card-tag{text-transform:none;letter-spacing:0;font-size:12px} .card-oos{position:absolute;inset:0;background:rgba(251,248,242,.62);display:grid;place-items:center;z-index:3} .card-oos span{background:var(--ink);color:var(--ivory);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:8px 16px;border-radius:2px;font-weight:600} [data-lang="ar"] .card-oos span{text-transform:none;letter-spacing:0} .card-fav{position:absolute;top:10px;inset-inline-end:10px;width:38px;height:38px;border-radius:50%; background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:2;opacity:0;transform:translateY(-4px);transition:.25s} .card:hover .card-fav{opacity:1;transform:none} .card-fav svg{width:18px;height:18px} .card-quick{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;opacity:0;transform:translateY(8px);transition:.3s} .card:hover .card-quick{opacity:1;transform:none} .card-body{padding:16px 4px 4px;display:flex;flex-direction:column;gap:5px} .card-cat{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:600} [data-lang="ar"] .card-cat{text-transform:none;letter-spacing:0;font-size:13px} .card-name{font-family:var(--font-display);font-weight:var(--disp-weight);font-size:clamp(18px,1.5vw,22px);line-height:1.12} .card-price{font-weight:700;font-size:16px;color:var(--ink);display:inline-flex;align-items:baseline;gap:9px} [data-dir="a"] .card-price{font-family:var(--font-display);font-size:21px} .price-was{font-weight:500;font-size:13.5px;color:var(--ink-soft);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ink-soft) 60%,transparent)} [data-dir="a"] .price-was{font-family:var(--font-body);font-size:14px} .card-tag.sale{background:var(--maroon);color:var(--ivory);letter-spacing:.04em} .card-swatches{display:flex;gap:6px;margin-top:3px} .sw{width:15px;height:15px;border-radius:50%;box-shadow:0 0 0 1px var(--line),inset 0 0 0 2px var(--surface)} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden} .hero-a{background:var(--paper);padding-block:clamp(40px,6vw,90px)} .hero-a .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center} .hero-copy{display:flex;flex-direction:column;gap:24px;align-items:flex-start;max-width:34ch} .hero-copy .h-hero{margin-block:2px} .hero-art{position:relative;aspect-ratio:4/5;border-radius:5px;overflow:hidden;background:radial-gradient(120% 90% at 70% 10%,#fff 0%,var(--sand) 100%)} .hero-art .kang{position:absolute;inset:0;background:url(https://juyub.odoo.com/web/image/1083) center/68% no-repeat;opacity:.5;mix-blend-mode:luminosity} .hero-art .prod{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:inherit} .hero-actions{display:flex;gap:14px;flex-wrap:wrap} /* hero B — full bleed maroon */ .hero-b{background:var(--maroon);color:var(--ivory);min-height:clamp(540px,82vh,760px);display:flex;align-items:center;position:relative} .hero-b .ftr-pattern{opacity:.09} .hero-b .wrap{position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(30px,5vw,64px);align-items:center;width:100%} .hero-b .h-hero{font-size:clamp(42px,6.4vw,88px);line-height:.98} .hero-b .hero-copy{max-width:none} .hero-b .eyebrow{color:var(--taupe)} .hero-b h1{color:var(--ivory)} .hero-b .lede{color:rgba(246,241,231,.82)} .hero-b .btn-outline,.band .btn-outline{box-shadow:inset 0 0 0 1.4px var(--ivory);color:var(--ivory);background:transparent} .hero-b .btn-outline:hover,.band .btn-outline:hover{background:var(--ivory);color:var(--maroon);transform:translateY(-2px)} .hero-b-art{position:relative;aspect-ratio:1/1;width:100%;max-width:430px;margin-inline:auto;border-radius:var(--radius-lg);overflow:hidden;background:radial-gradient(120% 100% at 50% 0%,#fff,#efe7da)} .hero-b-art img{position:absolute;inset:5%;width:90%;height:90%;object-fit:contain;filter:drop-shadow(0 24px 36px rgba(0,0,0,.25))} .hero-emblem{width:84px;height:84px;margin-bottom:6px} /* marquee strip */ .marquee{background:var(--ink);color:var(--ivory);overflow:hidden;white-space:nowrap;padding:13px 0} [data-dir="b"] .marquee{background:var(--sand);color:var(--maroon)} .marquee-track{display:inline-flex;gap:46px;animation:marq var(--marq-dur,26s) linear infinite;will-change:transform} .marquee span{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;display:inline-flex;gap:46px;align-items:center} [data-lang="ar"] .marquee span{text-transform:none;letter-spacing:.04em;font-size:15px} .marquee .dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5} @keyframes marq{to{transform:translateX(-50%)}} [dir="rtl"] .marquee-track{animation-direction:reverse} /* ---------- Section heading ---------- */ .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(26px,4vw,48px)} .sec-head .stack{gap:10px} /* ---------- Value props ---------- */ .values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px)} .value{display:flex;flex-direction:column;gap:12px;padding-block:8px} [data-dir="b"] .value{background:var(--paper);padding:30px;border-radius:var(--radius-lg)} .value-ic{width:46px;height:46px;color:var(--maroon)} .value-ic svg{width:100%;height:100%} .value-ic img{width:100%;height:100%;object-fit:contain} .trust img{width:20px;height:20px;object-fit:contain} .value h3{font-size:clamp(19px,1.7vw,23px)} /* ---------- Editorial / about ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center} .split-img{aspect-ratio:4/5;border-radius:5px;overflow:hidden;background:var(--sand);position:relative} .split-img img{width:100%;height:100%;object-fit:cover} .ph{position:relative;background: repeating-linear-gradient(135deg,var(--sand) 0 14px,#e2d6c2 14px 28px);display:grid;place-items:center} .ph::after{content:attr(data-label);position:absolute;font-family:ui-monospace,monospace;font-size:12px; letter-spacing:.1em;color:var(--maroon);background:var(--paper);padding:7px 12px;border-radius:3px;text-transform:uppercase} /* about quote band */ .band{background:var(--maroon);color:var(--ivory);position:relative;overflow:hidden} .band .ftr-pattern{opacity:.08} .band-inner{position:relative;text-align:center;max-width:min(760px,90%);margin:0 auto;padding:clamp(60px,9vw,130px) var(--gut)} .band-inner p{text-wrap:balance} .band .display{font-size:clamp(26px,3.6vw,44px);line-height:1.22} [data-lang="ar"] .band .display{line-height:1.5} .band .h2{color:var(--ivory)} .band-emblem{width:70px;height:70px;margin:0 auto 26px} /* ---------- Shop ---------- */ .shop-head{padding-block:clamp(30px,4vw,54px) clamp(20px,3vw,30px)} .shop-layout{display:grid;grid-template-columns:230px 1fr;gap:clamp(24px,4vw,56px);align-items:start} .filters{position:sticky;top:96px;display:flex;flex-direction:column;gap:26px} .filter-group h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-family:var(--font-body);font-weight:700;margin-bottom:13px;color:var(--ink-soft)} [data-lang="ar"] .filter-group h4{text-transform:none;letter-spacing:0;font-size:15px} .filter-list{display:flex;flex-direction:column;gap:3px} .filter-list button{text-align:start;padding:8px 12px;border-radius:var(--radius);font-size:14.5px;font-weight:500;color:var(--ink-soft);transition:.18s;display:flex;justify-content:space-between;gap:10px} .filter-list button:hover{background:color-mix(in srgb,var(--maroon) 7%,transparent);color:var(--ink)} .filter-list button.active{background:var(--maroon);color:var(--ivory)} .filter-list button.active .cnt{opacity:.7} .cnt{opacity:.5;font-size:13px} .shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap} .chip-row{display:flex;gap:8px;flex-wrap:wrap} .chip{font-size:13px;font-weight:600;padding:8px 16px;border-radius:999px;box-shadow:inset 0 0 0 1.3px var(--line-strong);transition:.2s} .chip:hover{box-shadow:inset 0 0 0 1.3px var(--ink)} .chip.active{background:var(--maroon);color:var(--ivory);box-shadow:none} .select{font-family:var(--font-body);font-size:14px;font-weight:600;padding:11px 16px;border-radius:var(--radius); background:var(--surface);box-shadow:inset 0 0 0 1.3px var(--line-strong);color:var(--ink)} .shop-toolbar .chip-row{display:none} .shop-toolbar .toolbar-count{font-size:13px;color:var(--ink-soft);font-weight:600} /* ---------- Product detail ---------- */ .pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,70px);align-items:start} .pdp-gallery{display:flex;flex-direction:column;gap:14px;position:sticky;top:96px} .pdp-main{aspect-ratio:1/1;background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;display:grid;place-items:center;position:relative} [data-dir="b"] .pdp-main{background:#f4efe7} [data-dir="a"] .pdp-main{box-shadow:inset 0 0 0 1px var(--line)} .pdp-main img{width:86%;height:86%;object-fit:contain} .pdp-thumbs{display:flex;gap:12px;flex-wrap:wrap} .pdp-thumb{width:78px;height:78px;border-radius:var(--radius);overflow:hidden;background:var(--surface); box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;cursor:pointer;transition:.2s} [data-dir="b"] .pdp-thumb{background:#f4efe7} .pdp-thumb.active{box-shadow:inset 0 0 0 2px var(--maroon)} .pdp-thumb img{width:80%;height:80%;object-fit:contain} .pdp-info{display:flex;flex-direction:column;gap:22px;padding-top:6px} .pdp-sku{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:600} .pdp-price{font-size:clamp(26px,3vw,38px);font-weight:700;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} [data-dir="a"] .pdp-price{font-family:var(--font-display)} .pdp-price .price-was{font-size:.6em;font-weight:500} .pdp-price .price-off{font-size:.45em;font-weight:700;background:var(--maroon);color:var(--ivory);padding:5px 11px;border-radius:999px;letter-spacing:.02em;font-family:var(--font-body)} .opt-label{font-size:13px;font-weight:700;letter-spacing:.04em;margin-bottom:10px;display:flex;gap:8px} .opt-label .val{color:var(--ink-soft);font-weight:500} .swatch-row{display:flex;gap:10px} .swatch{width:44px;height:44px;border-radius:50%;cursor:pointer;position:relative;box-shadow:0 0 0 1px var(--line),inset 0 0 0 3px var(--surface);transition:.2s} .swatch.active{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--maroon),inset 0 0 0 3px var(--surface)} .swatch.oos{opacity:.4} .swatch.oos::after{content:"";position:absolute;inset:46% 12% auto;height:1.5px;background:var(--ink);transform:rotate(-45deg)} .qty{display:inline-flex;align-items:center;box-shadow:inset 0 0 0 1.3px var(--line-strong);border-radius:var(--radius)} .qty button{width:46px;height:48px;font-size:19px;display:grid;place-items:center;color:var(--ink)} .qty span{min-width:40px;text-align:center;font-weight:700} .pdp-cta{display:flex;gap:12px;flex-wrap:wrap} .pdp-cta .btn{flex:1;min-width:170px} .specs{border-top:1px solid var(--line);padding-top:22px;display:flex;flex-direction:column} .spec-row{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px} .spec-row dt{color:var(--ink-soft);font-weight:600} .spec-row dd{text-align:end;font-weight:500} .trust-row{display:flex;gap:18px;flex-wrap:wrap;padding-top:6px} .trust{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--ink-soft)} .trust svg{width:20px;height:20px;color:var(--maroon)} /* ---------- Cart drawer ---------- */ .scrim{position:fixed;inset:0;background:rgba(36,12,16,.42);backdrop-filter:blur(2px);z-index:90;opacity:0;animation:fade .3s forwards} @keyframes fade{to{opacity:1}} .drawer{position:fixed;top:0;inset-inline-end:0;height:100%;width:min(440px,92vw);background:var(--bg);z-index:91; display:flex;flex-direction:column;box-shadow:var(--shadow);transform:translateX(100%);animation:slidein .38s cubic-bezier(.4,0,.2,1) forwards} [dir="rtl"] .drawer{transform:translateX(-100%)} @keyframes slidein{to{transform:translateX(0)}} .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line)} .drawer-body{flex:1;overflow-y:auto;padding:8px 24px} .drawer-foot{border-top:1px solid var(--line);padding:22px 24px;display:flex;flex-direction:column;gap:14px} .line-item{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)} .li-img{width:78px;height:78px;border-radius:var(--radius);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;flex-shrink:0} .li-img img{width:78%;height:78%;object-fit:contain} .li-body{flex:1;display:flex;flex-direction:column;gap:5px} .li-name{font-family:var(--font-display);font-weight:var(--disp-weight);font-size:17px;line-height:1.15} .li-meta{font-size:12.5px;color:var(--ink-soft)} .li-foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px} .qty-sm{display:inline-flex;align-items:center;box-shadow:inset 0 0 0 1.2px var(--line-strong);border-radius:var(--radius)} .qty-sm button{width:30px;height:30px;display:grid;place-items:center;font-size:15px} .qty-sm span{min-width:26px;text-align:center;font-weight:700;font-size:14px} .li-remove{font-size:12px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px} .li-price{font-weight:700} .cart-empty{text-align:center;padding:60px 20px;display:flex;flex-direction:column;align-items:center;gap:18px;color:var(--ink-soft)} .cart-empty img{width:120px;opacity:.5} .summary-row{display:flex;justify-content:space-between;font-size:14.5px} .summary-row.total{font-size:19px;font-weight:700} [data-dir="a"] .summary-row.total{font-family:var(--font-display);font-size:24px} .cod-note{display:flex;gap:10px;align-items:center;background:color-mix(in srgb,var(--ok) 12%,transparent); color:#1f5230;border-radius:var(--radius);padding:11px 14px;font-size:13px;font-weight:600} .cod-note svg{width:18px;height:18px;flex-shrink:0} /* ---------- Checkout ---------- */ .checkout{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,60px);align-items:start} .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px} .field label{font-size:13px;font-weight:700;letter-spacing:.02em} .field .req{color:var(--maroon)} .input{font-family:var(--font-body);font-size:15px;padding:13px 15px;border-radius:var(--radius); background:var(--surface);box-shadow:inset 0 0 0 1.3px var(--line-strong);color:var(--ink);width:100%;transition:.18s} .input:focus{outline:none;box-shadow:inset 0 0 0 1.6px var(--maroon)} .input.err{box-shadow:inset 0 0 0 1.6px #b3261e} .field .msg{font-size:12px;color:#b3261e;font-weight:600} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} .pay-opt{display:flex;gap:13px;align-items:flex-start;padding:16px;border-radius:var(--radius);box-shadow:inset 0 0 0 1.5px var(--maroon);background:color-mix(in srgb,var(--maroon) 5%,transparent)} .pay-opt .radio{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--maroon);display:grid;place-items:center;margin-top:2px;flex-shrink:0} .pay-opt .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--maroon)} .osummary{background:var(--surface);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow);position:sticky;top:96px} [data-dir="a"] .osummary{box-shadow:inset 0 0 0 1px var(--line)} .osummary .li-mini{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)} .osummary .li-mini img{width:54px;height:54px;object-fit:contain;background:var(--paper);border-radius:4px} /* confirmation */ .confirm{text-align:center;max-width:560px;margin:0 auto;padding-block:clamp(50px,8vw,100px);display:flex;flex-direction:column;align-items:center;gap:22px} .confirm-emblem{width:96px;height:96px} .confirm-card{background:var(--surface);border-radius:var(--radius-lg);padding:26px;width:100%;text-align:start;box-shadow:var(--shadow)} [data-dir="a"] .confirm-card{box-shadow:inset 0 0 0 1px var(--line)} /* ---------- FAQ ---------- */ .faq-wrap{max-width:780px;margin:0 auto} .acc{border-bottom:1px solid var(--line)} .acc-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 4px;text-align:start;font-family:var(--font-display);font-weight:var(--disp-weight);font-size:clamp(19px,2vw,26px)} .acc-ic{width:26px;height:26px;flex-shrink:0;color:var(--maroon);transition:.3s;position:relative} .acc-ic::before,.acc-ic::after{content:"";position:absolute;background:currentColor;border-radius:2px} .acc-ic::before{top:50%;left:3px;right:3px;height:2px;transform:translateY(-50%)} .acc-ic::after{left:50%;top:3px;bottom:3px;width:2px;transform:translateX(-50%);transition:.3s} .acc.open .acc-ic::after{transform:translateX(-50%) scaleY(0)} .acc-a{max-height:0;overflow:hidden;transition:max-height .4s ease;color:var(--ink-soft)} .acc.open .acc-a{max-height:300px} .acc-a p{padding:0 4px 26px;max-width:64ch;font-size:15.5px} /* ---------- Generic page header ---------- */ .page-hero{position:relative;background:var(--paper);padding-block:clamp(46px,6vw,86px);text-align:center;overflow:hidden;border-bottom:1px solid var(--line)} [data-dir="b"] .page-hero{background:var(--maroon);color:var(--ivory);border-bottom:none} [data-dir="b"] .page-hero .h1,[data-dir="b"] .page-hero h1{color:var(--ivory)} [data-dir="b"] .page-hero .lede{color:rgba(246,241,231,.8)} [data-dir="b"] .page-hero .eyebrow{color:var(--taupe)} .page-hero .wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px} .page-hero .lede{margin:0 auto;text-align:center} .crumbs{font-size:12.5px;color:var(--ink-soft);display:flex;gap:8px;align-items:center} .crumbs a:hover{color:var(--maroon)} /* shipping cards */ .ship-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .ship-card{display:flex;gap:16px;padding:24px;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow)} [data-dir="a"] .ship-card{box-shadow:inset 0 0 0 1px var(--line)} .ship-num{font-family:var(--font-display);font-weight:var(--disp-weight);font-size:34px;color:var(--maroon);line-height:1;flex-shrink:0} .ship-card p{font-size:15px} /* contact strip */ .contact-band{background:var(--ink);color:var(--ivory);border-radius:var(--radius-lg);padding:clamp(30px,5vw,56px); display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap} .contact-band h2{color:var(--ivory)} /* ---------- Direction switcher ---------- */ .dir-switch{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:80; display:flex;align-items:center;gap:4px;background:var(--ink);color:var(--ivory); padding:6px;border-radius:999px;box-shadow:0 14px 40px -12px rgba(0,0,0,.5)} .dir-switch .lab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding-inline:12px 6px;opacity:.7} .dir-switch button{font-size:12.5px;font-weight:700;padding:9px 17px;border-radius:999px;color:var(--ivory);opacity:.7;transition:.2s;white-space:nowrap} .dir-switch button.active{background:var(--ivory);color:var(--ink);opacity:1} [data-lang="ar"] .dir-switch .lab{letter-spacing:0;font-size:13px} /* toast */ .toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);z-index:95;background:var(--ink);color:var(--ivory); padding:13px 22px;border-radius:999px;font-size:14px;font-weight:600;box-shadow:var(--shadow); display:flex;align-items:center;gap:10px;animation:toastin .3s} .toast svg{width:18px;height:18px;color:#6fd28a} @keyframes toastin{from{opacity:0;transform:translate(-50%,12px)}} /* mobile drawer nav */ .mnav{position:fixed;inset:0;background:var(--bg);z-index:92;display:flex;flex-direction:column;padding:24px var(--gut);animation:fade .25s} .mnav a{font-family:var(--font-display);font-weight:var(--disp-weight);font-size:30px;padding:14px 0;border-bottom:1px solid var(--line)} /* ---------- Responsive ---------- */ @media(max-width:1080px){ .home-grid{grid-template-columns:repeat(3,1fr)} } @media(max-width:860px){ .nav,.lang-toggle.desk{display:none} .burger{display:grid} .shop-layout{grid-template-columns:1fr} .shop-toolbar .chip-row{display:flex} .filters{display:none} .mobile-filter-btn{display:inline-flex} .pdp{grid-template-columns:1fr} .pdp-gallery{position:static} .checkout{grid-template-columns:1fr} .hero-a .wrap,.hero-b .wrap,.split{grid-template-columns:1fr} .hero-b-art{max-width:440px} /* ftr-inner is now flex column — no grid override needed */ .values,.ship-grid{grid-template-columns:1fr} .shop-grid{grid-template-columns:repeat(2,1fr)} .home-grid{grid-template-columns:repeat(2,1fr)} .grid-products{gap:clamp(10px,2.5vw,18px)} .osummary{position:static} .pdp-gallery{position:static} .filters{position:static} } @media(max-width:520px){ .grid-2{grid-template-columns:1fr} .contact-band{flex-direction:column;align-items:flex-start} .dir-switch{bottom:12px} } /* ---------- Tweak overrides ---------- */ [data-cardbg="white"] .card-media,[data-cardbg="white"] .pdp-main,[data-cardbg="white"] .pdp-thumb,[data-cardbg="white"] .li-img{background:#ffffff} [data-cardbg="soft"] .card-media,[data-cardbg="soft"] .pdp-main,[data-cardbg="soft"] .pdp-thumb{background:#f4efe7} /* cursor affordance for click targets that have no href */ a,.nav a,.crumbs a,.ftr a,.acc-q,.swatch,.pdp-thumb,.sw,.card{cursor:pointer} /* ---------- Floating social rail ---------- */ .fsocial{position:fixed;inset-block-end:20px;inset-inline-end:20px;z-index:70;display:flex;flex-direction:column;align-items:center;gap:12px} .fsocial-stack{display:flex;flex-direction:column;gap:10px;align-items:center} .fsocial-btn{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff; box-shadow:0 10px 26px -10px rgba(0,0,0,.45);transition:transform .22s cubic-bezier(.34,1.56,.64,1),opacity .22s,background .2s} .fsocial-btn svg{width:25px;height:25px} .fsocial-btn:hover{transform:translateY(-3px) scale(1.05)} .fs-instagram{background:radial-gradient(circle at 30% 110%,#fec564 0%,#fd1d1d 45%,#833ab4 100%)} .fs-tiktok{background:#111} .fs-facebook{background:#1877f2} .fsocial-toggle{background:var(--maroon);width:46px;height:46px} .fsocial-toggle svg{width:22px;height:22px} .fsocial-wa{background:#25d366;width:60px;height:60px;position:relative} .fsocial-wa svg{width:33px;height:33px} .fsocial-ping{position:absolute;inset:0;border-radius:50%;background:#25d366;opacity:.55;z-index:-1;animation:fsping 2.4s cubic-bezier(0,0,.2,1) infinite} @keyframes fsping{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.7);opacity:0}} /* collapsed state: hide the secondary stack until toggled */ .fsocial .fsocial-stack{max-height:0;opacity:0;transform:translateY(14px) scale(.7);pointer-events:none;transition:.28s cubic-bezier(.34,1.4,.64,1)} .fsocial.open .fsocial-stack{max-height:280px;opacity:1;transform:none;pointer-events:auto} @media (prefers-reduced-motion:reduce){.fsocial-ping{animation:none;display:none}} @media(max-width:600px){ .fsocial{inset-block-end:16px;inset-inline-end:14px;gap:10px} .fsocial-btn{width:46px;height:46px}.fsocial-btn svg{width:23px;height:23px} .fsocial-wa{width:55px;height:55px}.fsocial-wa svg{width:30px;height:30px} .fsocial-toggle{width:42px;height:42px} } /* ---------- Login modal ---------- */ .modal-scrim{position:fixed;inset:0;background:rgba(36,12,16,.5);backdrop-filter:blur(3px);z-index:100;display:grid;place-items:center;padding:20px;animation:fade .25s} .modal{background:var(--bg);width:min(400px,94vw);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow);position:relative} .modal-emblem{width:60px;height:60px;margin:0 auto 14px;display:block} .modal h3{text-align:center;margin-bottom:6px} .modal .sub{text-align:center;color:var(--ink-soft);font-size:14px;margin-bottom:22px} .modal .field{margin-bottom:14px} .modal-close{position:absolute;top:14px;inset-inline-end:14px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center} .modal-close:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)} /* ---------- Admin ---------- */ .admin{min-height:100vh;background:var(--paper)} .admin-bar{position:sticky;top:0;z-index:40;background:var(--ink);color:var(--ivory);display:flex;align-items:center;gap:18px;padding:14px clamp(16px,4vw,40px);flex-wrap:wrap} .admin-bar .a-logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.04em} .admin-bar .a-logo img{width:30px;height:30px} .admin-tabs{display:flex;gap:4px;margin-inline-start:auto;flex-wrap:wrap} .admin-tabs button{padding:9px 16px;border-radius:999px;font-weight:600;font-size:14px;color:var(--ivory);opacity:.65;transition:.2s} .admin-tabs button.active{background:var(--ivory);color:var(--ink);opacity:1} .admin-bar .a-actions{display:flex;gap:8px} .admin-bar .a-btn{padding:9px 16px;border-radius:999px;font-weight:600;font-size:13.5px;box-shadow:inset 0 0 0 1.4px rgba(246,241,231,.4)} .admin-bar .a-btn:hover{background:rgba(246,241,231,.14)} .admin-body{max-width:1100px;margin:0 auto;padding:clamp(20px,4vw,40px)} .admin-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap} .adm-table{display:flex;flex-direction:column;gap:10px} .adm-row{display:grid;grid-template-columns:64px 1fr auto auto auto;gap:16px;align-items:center;background:var(--surface);border-radius:var(--radius-lg);padding:12px 16px;box-shadow:inset 0 0 0 1px var(--line)} .adm-row .a-thumb{width:64px;height:64px;border-radius:var(--radius);background:#f4efe7;display:grid;place-items:center;overflow:hidden} .adm-row .a-thumb img{width:84%;height:84%;object-fit:contain} .adm-row .a-name{font-weight:700;font-size:15.5px} .adm-row .a-meta{font-size:12.5px;color:var(--ink-soft)} .adm-row .a-price{font-weight:700} .a-pill{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;letter-spacing:.02em} .a-pill.in{background:color-mix(in srgb,var(--ok) 16%,transparent);color:#1f5230} .a-pill.out{background:color-mix(in srgb,#b3261e 14%,transparent);color:#b3261e} .a-iconbtn{width:38px;height:38px;border-radius:var(--radius);display:grid;place-items:center;box-shadow:inset 0 0 0 1.3px var(--line-strong)} .a-iconbtn:hover{background:color-mix(in srgb,var(--maroon) 8%,transparent)} .a-iconbtn svg{width:18px;height:18px} .a-iconbtn.danger:hover{background:color-mix(in srgb,#b3261e 12%,transparent);color:#b3261e} .adm-actions{display:flex;gap:8px} /* editor */ .adm-editor{background:var(--surface);border-radius:var(--radius-lg);padding:clamp(20px,3vw,32px);box-shadow:var(--shadow);max-width:780px;margin:0 auto} .adm-editor h3{margin-bottom:18px} .adm-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} .adm-sec{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)} .adm-sec h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-bottom:14px} .adm-variant{background:var(--paper);border-radius:var(--radius);padding:16px;margin-bottom:12px;position:relative} .adm-variant .v-remove{position:absolute;top:10px;inset-inline-end:10px;font-size:12px;color:#b3261e;font-weight:600} .adm-row-inline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap} .adm-foot{display:flex;gap:12px;margin-top:24px;justify-content:flex-end} .field-check{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-weight:600;font-size:14px;cursor:pointer} .field-check input{width:20px;height:20px;accent-color:var(--maroon)} .color-input{width:46px;height:42px;border-radius:var(--radius);border:1px solid var(--line-strong);padding:2px;background:var(--surface);cursor:pointer} .admin-empty{text-align:center;padding:60px;color:var(--ink-soft)} /* content editor sub-nav */ .content-nav{display:flex;flex-wrap:wrap;gap:6px;background:var(--surface);border-radius:999px;padding:6px;box-shadow:inset 0 0 0 1px var(--line);max-width:max-content} .content-nav button{padding:9px 17px;border-radius:999px;font-weight:600;font-size:14px;color:var(--ink-soft);transition:.18s} .content-nav button:hover{background:color-mix(in srgb,var(--maroon) 8%,transparent);color:var(--ink)} .content-nav button.active{background:var(--maroon);color:var(--ivory)} /* orders panel */ .ord-list{display:flex;flex-direction:column;gap:12px} .ord-card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;transition:box-shadow .2s} .ord-card.open{box-shadow:0 10px 30px -16px rgba(58,8,16,.4),inset 0 0 0 1px var(--line)} .ord-head{width:100%;display:flex;align-items:center;gap:16px;padding:14px 18px;text-align:start;background:none} .ord-head:hover{background:color-mix(in srgb,var(--maroon) 4%,transparent)} .ord-thumbs{display:flex;flex-shrink:0} .ord-thumb{width:48px;height:48px;border-radius:10px;background:#f4efe7;overflow:hidden;display:grid;place-items:center;box-shadow:0 0 0 2px var(--surface)} .ord-thumb:not(:first-child){margin-inline-start:-14px} .ord-thumb img{width:82%;height:82%;object-fit:contain} .ord-more{width:48px;height:48px;border-radius:10px;background:var(--sand);display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--maroon);margin-inline-start:-14px;box-shadow:0 0 0 2px var(--surface)} .ord-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .ord-line1{display:flex;align-items:center;gap:9px} .ord-line1 strong{font-size:15.5px;letter-spacing:.01em} .ord-line2{font-size:14px;color:var(--ink);font-weight:500} .ord-date{font-size:12.5px;color:var(--ink-soft)} .ord-right{display:flex;align-items:center;gap:12px;flex-shrink:0} .ord-right .a-price{font-size:16px} .ord-chev{transition:transform .25s;color:var(--ink-soft);transform:rotate(90deg)} .ord-chev.up{transform:rotate(-90deg);color:var(--maroon)} .ord-detail{padding:4px 18px 20px;border-top:1px solid var(--line)} .ord-items{display:flex;flex-direction:column;gap:2px;padding:8px 0} .ord-item{display:flex;align-items:center;gap:13px;padding:10px 0;border-bottom:1px solid var(--line)} .ord-item-img{width:50px;height:50px;border-radius:8px;background:#f4efe7;overflow:hidden;display:grid;place-items:center;flex-shrink:0} .ord-item-img img{width:82%;height:82%;object-fit:contain} .ord-item-info{flex:1;min-width:0} .ord-item-name{font-family:var(--font-display);font-weight:var(--disp-weight);font-size:16px;line-height:1.2} .ord-item-price{font-weight:700;font-size:14.5px} .ord-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;padding:18px 0;border-bottom:1px solid var(--line)} .ord-field{display:flex;flex-direction:column;gap:3px;min-width:0} .ord-k{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:700} [data-lang="ar"] .ord-k{text-transform:none;letter-spacing:0;font-size:13px} .ord-v{font-size:14.5px;font-weight:500;word-break:break-word} a.ord-v{color:var(--maroon)} .ord-totals{padding:16px 0;display:flex;flex-direction:column;gap:7px;max-width:340px;margin-inline-start:auto} .ord-actions{display:flex;gap:10px;flex-wrap:wrap;padding-top:6px} .ord-actions .btn{font-size:13px;padding:12px 18px} .ord-del{color:#b3261e;box-shadow:inset 0 0 0 1.4px color-mix(in srgb,#b3261e 40%,transparent)} .ord-del:hover{background:#b3261e;color:#fff} @media(max-width:560px){ .ord-grid{grid-template-columns:1fr} .ord-head{flex-wrap:wrap} .ord-totals{margin-inline-start:0;max-width:none} } /* categories manager */ .cat-chips{display:flex;flex-wrap:wrap;gap:8px} .cat-chip{display:inline-flex;align-items:center;gap:7px;background:var(--paper);border-radius:999px;padding:8px 8px 8px 15px;font-size:14px;font-weight:600;box-shadow:inset 0 0 0 1px var(--line)} [data-lang="ar"] .cat-chip{padding:8px 15px 8px 8px} .cat-chip button{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--maroon) 10%,transparent);color:var(--maroon)} .cat-chip button:hover{background:var(--maroon);color:var(--ivory)} /* shipping rates */ .ship-rates{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px} .ship-rate-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)} .ship-rate-row .g-name{font-size:14px;font-weight:500} .ship-rate-row .g-input{display:inline-flex;align-items:center;gap:7px} .ship-rate-row .g-input .input{width:84px;padding:8px 10px;text-align:center} .ship-rate-row .g-unit{font-size:12.5px;color:var(--ink-soft);font-weight:600} @media(max-width:560px){.ship-rates{grid-template-columns:1fr}} .img-preview{width:54px;height:54px;border-radius:var(--radius);background:#f4efe7;display:grid;place-items:center;overflow:hidden;flex-shrink:0} .img-preview img{width:84%;height:84%;object-fit:contain} @media(max-width:680px){ .adm-grid{grid-template-columns:1fr} .adm-row{grid-template-columns:54px 1fr auto;grid-template-areas:"t n a";gap:10px} .adm-row .a-thumb{grid-area:t}.adm-row .a-info{grid-area:n}.adm-row .adm-actions{grid-area:a} .adm-row .a-price,.adm-row .a-pill{display:none} } /* Lightbox open: just lock scroll */ body.lightbox-open { overflow: hidden !important; } /* ===== MOBILE IMPROVEMENTS ===== */ @media(max-width:860px){ /* Product page: specs don't overflow */ .pdp-info{min-width:0;overflow:hidden} dl.specs{width:100%} .spec-row{display:flex;flex-wrap:wrap;gap:4px} .spec-row dt{min-width:90px;flex-shrink:0} .spec-row dd{flex:1;min-width:0;text-align:right;word-break:break-word} /* Swatches don't overflow */ .swatch-row{flex-wrap:wrap;max-width:100%} .swatch{width:30px;height:30px} /* Product page description doesn't overflow */ .pdp-info p{word-break:break-word;overflow-wrap:break-word} /* Checkout: bigger inputs */ .checkout input,.checkout select,.checkout textarea{font-size:16px} /* Header: compact */ .hdr .wrap{padding:0 14px} /* Trust row: wrap */ .trust-row{flex-wrap:wrap;gap:8px} /* Card text: no overflow */ .card-body{overflow:hidden} .card-body h3{font-size:14px;white-space:normal;overflow-wrap:break-word} } /* ===== MOBILE RESPONSIVENESS — MAJOR IMPROVEMENTS ===== */ /* ---------- Featured Carousel sizing is controlled inline by JSX (pct) ---------- */ /* ---------- Header: mobile refinements ---------- */ @media(max-width:860px){ .hdr-inner{ height: var(--hdr-h, 62px); padding-inline: 14px; gap: 10px; } .brand img{ height: 32px; } .brand-word{ font-size: 20px; } .hdr-actions{ gap: 2px; } .icon-btn{ width: 38px; height: 38px; } .icon-btn svg{ width: 19px; height: 19px; } .lang-toggle.desk{ display:none; } /* announce bar: smaller */ .announce{ font-size: 11.5px; padding: 7px 12px; letter-spacing: .06em; } } /* ---------- Mobile nav drawer: bigger tap targets ---------- */ @media(max-width:860px){ .mnav{ padding: 20px 20px 40px; gap: 0; overflow-y: auto; } .mnav a{ font-size: 26px; padding: 13px 0; } } /* ---------- Hero A: mobile stack ---------- */ @media(max-width:860px){ .hero-a{ padding-block: clamp(28px,5vw,60px); } .hero-copy{ max-width: none; align-items: center; text-align: center; } .hero-actions{ justify-content: center; } .hero-art{ margin-top: 24px; } /* reverse: show art first on mobile */ .hero-a .wrap{ display: flex; flex-direction: column-reverse; gap: 20px; } } /* ---------- Hero B: mobile ---------- */ @media(max-width:860px){ .hero-b{ min-height: clamp(420px,65vh,600px); } .hero-b .wrap{ display: flex; flex-direction: column-reverse; gap: 16px; } .hero-b .hero-copy{ text-align: center; align-items: center; } .hero-b-art{ max-width: 260px; margin-inline: auto; } .hero-b .h-hero{ font-size: clamp(34px,8vw,56px); } } /* ---------- Shop layout: mobile chip categories scroll ---------- */ @media(max-width:860px){ /* horizontal scroll for category chips */ .chip-row{ flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; gap: 8px; padding-bottom: 4px; /* hide scrollbar */ scrollbar-width: none; -ms-overflow-style: none; } .chip-row::-webkit-scrollbar{ display: none; } .chip{ scroll-snap-align: start; flex-shrink: 0; font-size: 13px; padding: 9px 16px; white-space: nowrap; } /* toolbar: row on mobile — count + sort in one line, chips below */ .shop-toolbar{ flex-direction: column; align-items: stretch; gap: 8px; } /* top row: count left, sort right */ .shop-toolbar-top{ display: flex; align-items: center; justify-content: space-between; gap: 10px; } .select{ width: auto; min-width: 0; flex-shrink: 0; font-size: 14px; padding: 9px 34px 9px 12px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23241c1a' stroke-width='2'%3E%3Cpath d='m3 5 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; border-radius: 8px; max-width: 180px; } [dir="rtl"] .select{ background-position: left 10px center; padding-left: 34px; padding-right: 12px; } } /* ---------- Product grid: spacing ---------- */ @media(max-width:860px){ .shop-grid{ gap: 14px; } .card-name{ font-size: 15px; } .card-price{ font-size: 15px; } [data-dir="a"] .card-price{ font-size: 18px; } } @media(max-width:400px){ .shop-grid{ gap: 10px; } } /* ---------- Product detail page: mobile UX ---------- */ @media(max-width:860px){ /* Gallery: give main image more height */ .pdp-main{ border-radius: 12px; aspect-ratio: 1/1; } .pdp-thumbs{ display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; padding-bottom: 4px; } .pdp-thumbs::-webkit-scrollbar{ display:none; } .pdp-thumb{ flex-shrink: 0; width: 68px; height: 68px; } /* Sticky CTA bar at bottom on mobile */ .pdp-sticky-bar{ position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--bg); border-top: 1px solid var(--line); padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: center; box-shadow: 0 -8px 24px -8px rgba(58,8,16,.2); } .pdp-sticky-bar .btn{ flex: 1; font-size: 14px; padding: 14px 16px; } .pdp-sticky-bar .btn-wa{ flex: 0 0 52px; padding: 14px; } /* Add bottom padding to page so content clears sticky bar */ .pdp{ padding-bottom: 90px; } /* Price: bigger & clearer */ .pdp-price{ font-size: clamp(22px,5vw,30px); } /* Specs table: full width */ .spec-row{ gap: 8px; } .spec-row dt{ font-size: 13.5px; } .spec-row dd{ font-size: 13.5px; } /* Swatch size: easier tap */ .swatch{ width: 38px; height: 38px; } /* Qty control: bigger */ .qty button{ width: 50px; height: 52px; font-size: 20px; } .qty span{ min-width: 44px; font-size: 17px; } /* CTA buttons: full width on mobile */ .pdp-cta{ flex-direction: column; gap: 10px; } .pdp-cta .btn{ min-width: unset; width: 100%; } /* Trust row icons */ .trust{ font-size: 12.5px; } /* Description text */ .pdp-info > p{ font-size: 15px; line-height: 1.75; } /* ===== Overflow containment — keep everything inside the page ===== */ .pdp{ max-width: 100%; overflow-x: clip; } .pdp-gallery, .pdp-info{ min-width: 0; max-width: 100%; } /* Product title: wrap long words instead of overflowing */ .pdp-info h1{ overflow-wrap: break-word; word-break: break-word; max-width: 100%; } /* Breadcrumb: don't let long product name push width */ .crumbs{ flex-wrap: wrap; max-width: 100%; } .crumbs .muted{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; } /* Price row wraps */ .pdp-price{ flex-wrap: wrap; max-width: 100%; } /* Main image never exceeds width */ .pdp-main{ width: 100%; max-width: 100%; } /* Specs: contain long values */ .specs{ max-width: 100%; } .spec-row dd{ overflow-wrap: break-word; word-break: break-word; } /* WhatsApp order button full width, no overflow */ .pdp-info .btn-wa{ width: 100%; max-width: 100%; } /* Related products grid stays in bounds */ .section{ max-width: 100%; overflow-x: clip; } } /* ---------- Cart drawer: mobile full-height ---------- */ @media(max-width:480px){ .drawer{ width: 100vw; border-radius: 0; } .drawer-head{ padding: 18px 18px; } .drawer-body{ padding: 4px 18px; } .drawer-foot{ padding: 16px 18px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); } .line-item{ gap: 12px; } .li-img{ width: 68px; height: 68px; } .li-name{ font-size: 15px; } } /* ---------- Checkout: mobile ---------- */ @media(max-width:860px){ .checkout{ gap: 24px; } /* order summary: collapsible on mobile — show at top */ .osummary{ border-radius: 12px; padding: 20px; } /* Input font-size 16px to prevent iOS zoom */ .input{ font-size: 16px; } .checkout .btn-lg{ padding: 17px 24px; font-size: 15px; } } /* ---------- Footer: mobile only ≤860px ---------- */ @media(max-width:860px){ /* Hide desktop, show mobile */ .ftr-desk{ display:none; } .ftr-bottom-desk{ display:none; } .ftr-mob{ display:flex; flex-direction:column; align-items:center; gap:22px; padding:clamp(36px,6vw,56px) var(--gut) 28px; position:relative; z-index:1; } .ftr-bottom-mob{ display:flex; flex-direction:column; gap:10px; border-top:1px solid rgba(246,241,231,.18); padding:18px var(--gut) calc(22px + env(safe-area-inset-bottom)); max-width:var(--maxw); margin:0 auto; position:relative; z-index:1; } /* Logo block */ .ftr-logo-block{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; } .ftr-logo-img{ height:78px; width:auto; filter:drop-shadow(0 4px 14px rgba(0,0,0,.28)); } .ftr-tag{ font-size:clamp(14px,3.5vw,17px); max-width:30ch; text-align:center; opacity:.88; } /* Link cards */ .ftr-cards{ display:flex; gap:10px; width:100%; } .ftr-card{ display:flex; flex:1; flex-direction:column; gap:0; background:rgba(246,241,231,.07); border:1px solid rgba(246,241,231,.14); border-radius:12px; padding:16px 13px; backdrop-filter:blur(4px); } .ftr-card-head{ display:block; color:var(--ivory); font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-family:var(--font-body); font-weight:700; margin-bottom:10px; opacity:.6; } [data-lang="ar"] .ftr-card-head{ text-transform:none; letter-spacing:.04em; font-size:12px; } .ftr-card a{ font-size:14px; padding:5px 0; } /* WA button removed from mobile footer */ .ftr-wa-row{ display:none !important; } /* Bottom: social left + lock right */ .ftr-bottom-row{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:10px; } .ftr-social{ gap:9px; } .ftr-social a{ width:36px; height:36px; } .ftr-admin-icon{ display:grid; width:33px; height:33px; border-radius:50%; place-items:center; color:var(--ivory); opacity:.4; box-shadow:inset 0 0 0 1px rgba(246,241,231,.2); transition:.2s; flex-shrink:0; } .ftr-admin-icon:hover{ opacity:.85; background:rgba(246,241,231,.1); } .ftr-admin-icon svg{ width:14px; height:14px; } .ftr-copy{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11px; opacity:.45; color:var(--ivory); } .ftr-copy-sep{ opacity:.5; } .ftr-copy-link{ color:var(--ivory); text-decoration:underline; text-underline-offset:3px; opacity:.65; } .ftr-copy-link:hover{ opacity:1; } } @media(max-width:400px){ .ftr-cards{ gap:8px; } .ftr-card{ padding:13px 10px; } .ftr-card a{ font-size:13px; } } /* ---------- Section heading: mobile ---------- */ @media(max-width:680px){ .sec-head{ flex-direction: column; align-items: flex-start; gap: 12px; } .sec-head .btn-ghost{ align-self: flex-end; } } /* ---------- Values / features: mobile ---------- */ @media(max-width:860px){ .values{ gap: clamp(14px,3vw,24px); } [data-dir="b"] .value{ padding: 22px; } .value h3{ font-size: clamp(17px,3.5vw,21px); } } /* ---------- Page hero: mobile ---------- */ @media(max-width:680px){ .page-hero{ padding-block: clamp(32px,6vw,56px); } .page-hero .h1{ font-size: clamp(28px,7vw,40px); } } /* ---------- FAQ: mobile ---------- */ @media(max-width:680px){ .acc-q{ font-size: clamp(17px,4vw,22px); padding: 20px 4px; } .acc-a p{ font-size: 15px; padding-bottom: 20px; } } /* ---------- About split: mobile ---------- */ @media(max-width:860px){ .split{ gap: 24px; } .split-img{ aspect-ratio: 3/2; } } /* ---------- Shipping page cards: mobile ---------- */ @media(max-width:520px){ .ship-grid{ gap: 12px; } .ship-card{ padding: 18px; flex-direction: row; align-items: flex-start; } .ship-num{ font-size: 28px; } } /* ---------- Contact band: mobile ---------- */ @media(max-width:680px){ .contact-band{ padding: clamp(22px,5vw,36px); border-radius: var(--radius); text-align: center; justify-content: center; } .contact-band h2{ font-size: clamp(20px,5vw,28px); } } /* ---------- Band (about quote): mobile ---------- */ @media(max-width:680px){ .band .display{ font-size: clamp(20px,5vw,30px); } .band-emblem{ width: 56px; height: 56px; margin-bottom: 18px; } } /* ---------- Toast: above sticky bar ---------- */ @media(max-width:860px){ .toast{ bottom: 100px; font-size: 13px; padding: 11px 18px; } } /* ---------- Dir switch: hide on mobile to save space ---------- */ @media(max-width:480px){ .dir-switch{ display: none; } } /* ---------- Floating social: safe area ---------- */ @media(max-width:600px){ .fsocial{ inset-block-end: calc(16px + env(safe-area-inset-bottom)); inset-inline-end: 12px; } } /* ---------- Confirmation page: mobile ---------- */ @media(max-width:680px){ .confirm{ padding-block: clamp(32px,6vw,64px); gap: 16px; } .confirm-emblem{ width: 76px; height: 76px; } .confirm-card{ padding: 18px; } } /* ---------- Pagination: mobile ---------- */ @media(max-width:480px){ /* hide page number buttons, show only prev/next */ .page-nums{ display: none; } } /* ---------- Global mobile polish ---------- */ @media(max-width:860px){ /* slightly looser body text */ body{ line-height: 1.68; } /* section padding: tighter */ .section{ padding-block: clamp(40px,6vw,80px); } .section-sm{ padding-block: clamp(28px,4vw,50px); } /* wrap: tighter gutters */ :root{ --gut: clamp(14px,4vw,40px); } /* Smooth tap highlight */ a, button{ -webkit-tap-highlight-color: rgba(84,11,20,.12); } /* No hover states on touch */ .card:hover .card-quick{ opacity: 0; } .card:hover .card-fav{ opacity: 0; } } /* iPhone notch / dynamic island safe areas */ @supports(padding-top: env(safe-area-inset-top)){ .hdr{ padding-top: env(safe-area-inset-top); } .mnav{ padding-top: calc(20px + env(safe-area-inset-top)); } } /* ===== HOME GRID — MOBILE CARD FIX ===== */ /* Problem seen in screenshot: cards unequal height in 2-col grid */ @media(max-width:860px){ /* Grid: equal columns, consistent gap */ .home-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; /* align-items stretch (default) ensures equal height rows */ align-items: start; /* DON'T stretch — let aspect-ratio do the work */ } /* Card: full height of its grid cell */ .card{ height: 100%; border-radius: var(--radius-lg); } /* Card media: enforce square aspect-ratio, no flex funny business */ .card-media{ width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); } /* Badge: prevent overflow on small cards */ .card-tag{ font-size: 9.5px; padding: 4px 8px; letter-spacing: .06em; max-width: calc(100% - 16px); top: 8px; inset-inline-start: 8px; } [data-lang="ar"] .card-tag{ font-size: 10.5px; } /* Card body: compact but readable */ .card-body{ padding: 10px 2px 6px; gap: 3px; } /* Category label */ .card-cat{ font-size: 10px; letter-spacing: .08em; } /* Name: 2 lines max, good font size for 2-col */ .card-name{ font-size: clamp(13px, 3.8vw, 16px); line-height: 1.18; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Price */ .card-price{ font-size: 14px; gap: 6px; padding-top: 2px; } [data-dir="a"] .card-price{ font-size: 16px; } .price-was{ font-size: 12px; } /* Swatches: smaller dots */ .card-swatches{ gap: 5px; margin-top: 2px; } .sw{ width: 13px; height: 13px; } /* Section heading above grid */ .sec-head{ margin-bottom: clamp(16px,3vw,28px); } .sec-head .h2{ font-size: clamp(22px,5.5vw,32px); } } @media(max-width:400px){ .home-grid, .shop-grid{ gap: 8px; } .card-name{ font-size: clamp(12px,3.5vw,14px); } .card-price{ font-size: 13px; } .card-tag{ font-size: 9px; padding: 3px 7px; } } /* ===== SHOP CAROUSEL — MOBILE ONLY ===== */ /* Carousel frame: desktop uses -4px margin so card shadows aren't clipped. Mobile removes it to avoid horizontal overflow. */ .carousel-frame{ margin: 0 -4px; } .shop-carousel-mob{ display: none; } .shop-grid-desk{ display: grid; } .shop-pagination-desk{ display: flex; } @media(max-width:860px){ .carousel-frame{ margin: 0; } .shop-grid-desk{ display: none !important; } .shop-pagination-desk{ display: none !important; } .shop-carousel-mob{ display: block; margin-top: 4px; width: 100%; max-width: 100%; overflow: hidden; } /* Prevent any horizontal overflow from carousel/grid containers */ .shop-layout{ max-width: 100%; overflow-x: clip; } .shop-layout > div{ min-width: 0; max-width: 100%; } /* identical to Featured Picks — no card overrides */ } /* ============ JUYUB Business Tracker (جيوب) panel ============ */ .giup-panel{ max-width: 900px; margin: 0 auto; } /* Sub-navigation */ .giup-subnav{ display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .giup-subtab{ display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: .2s; } .giup-subtab:hover{ border-color: var(--maroon); color: var(--maroon); } .giup-subtab.active{ background: linear-gradient(135deg, #7A1F35, #A8324F); border-color: transparent; color: #fff; box-shadow: 0 6px 16px -6px rgba(122,31,53,.5); } .gst-icon{ font-size: 15px; } /* Period toggle */ .giup-period{ display: inline-flex; gap: 4px; padding: 4px; background: var(--surface); border-radius: 12px; margin-bottom: 18px; } .giup-period button{ padding: 7px 18px; border: none; background: transparent; border-radius: 9px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: .2s; } .giup-period button.active{ background: var(--maroon); color: #fff; box-shadow: 0 4px 12px -4px rgba(122,31,53,.45); } /* Stat cards */ .giup-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; } .g-stat{ background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 16px; text-align: center; } .g-stat-label{ font-size: 12px; color: var(--ink-soft); font-weight: 600; margin-bottom: 8px; } .g-stat-value{ font-size: clamp(18px, 2.5vw, 26px); font-weight: 800; font-family: var(--font-display); } /* Generic card */ .g-card{ background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin-bottom: 16px; } .g-card-title{ font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 14px; letter-spacing: .01em; } .g-empty{ text-align: center; padding: 24px; color: var(--ink-soft); font-size: 14px; } /* Forms */ .g-form{ display: flex; flex-direction: column; gap: 10px; } .g-form-row{ display: flex; gap: 10px; } .g-form-row > *{ flex: 1; min-width: 0; } .g-input{ width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-family: inherit; font-size: 15px; color: var(--ink); transition: .2s; } .g-input:focus{ outline: none; border-color: #A8324F; box-shadow: 0 0 0 3px rgba(168,50,79,.14); } .g-btn-primary{ padding: 13px 20px; border: none; border-radius: 10px; background: linear-gradient(135deg, #7A1F35, #A8324F); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: .25s; box-shadow: 0 8px 20px -8px rgba(122,31,53,.5); } .g-btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(122,31,53,.6); } /* List rows */ .g-list-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); } .g-list-row:last-child{ border-bottom: none; } .g-list-main{ min-width: 0; flex: 1; } .g-list-name{ font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 3px; } .g-list-sub{ font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; } .g-list-side{ display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .g-amount{ font-size: 15px; font-weight: 800; font-family: var(--font-display); white-space: nowrap; } .g-stock-pill{ font-size: 13px; font-weight: 700; white-space: nowrap; } .g-del{ width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(192,57,43,.25); background: rgba(192,57,43,.08); color: #c0392b; font-size: 14px; cursor: pointer; transition: .2s; display: grid; place-items: center; flex-shrink: 0; } .g-del:hover{ background: rgba(192,57,43,.18); } /* Stock rows (home) */ .g-stock-row{ display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); } .g-stock-row:last-child{ border-bottom: none; } .g-stock-name{ font-size: 14px; font-weight: 700; } .g-stock-qty{ font-size: 13px; font-weight: 700; } /* Reports */ .g-report-line{ display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 14px; } .g-report-divider{ height: 1px; background: var(--line); margin: 8px 0; } /* Mobile */ @media(max-width:860px){ .giup-stats{ grid-template-columns: 1fr; gap: 10px; } .g-stat{ display: flex; align-items: center; justify-content: space-between; text-align: start; padding: 14px 16px; } .g-stat-label{ margin-bottom: 0; } .giup-subtab{ font-size: 13px; padding: 8px 13px; } .g-form-row{ flex-direction: column; } } /* ============ JUYUB Biz — enhanced visuals ============ */ /* Stat cards: gradient accent + larger */ .giup-stats .g-stat{ position: relative; overflow: hidden; background: linear-gradient(145deg, #fff 0%, #FBF4F5 100%); border: 1px solid #EADBDB; box-shadow: 0 6px 20px -12px rgba(122,31,53,.25); border-radius: 18px; padding: 20px 18px; } .giup-stats .g-stat::before{ content:''; position:absolute; top:0; inset-inline-start:0; width: 100%; height: 3px; background: linear-gradient(90deg, #7A1F35, #A8324F); } .g-stat-label{ text-transform: uppercase; letter-spacing: .04em; font-size: 11px; } .g-stat-value{ font-size: clamp(20px, 2.6vw, 28px); } /* Product pick preview */ .g-pick-preview{ display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: #FBF4F5; border: 1px solid #EADBDB; } .g-pick-preview img{ width: 56px; height: 56px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid #EADBDB; flex-shrink: 0; } .g-pick-name{ font-size: 15px; font-weight: 700; color: var(--ink); } .g-pick-sub{ font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; } /* List item thumbnail */ .g-list-withimg{ display: flex; align-items: center; gap: 12px; } .g-thumb{ width: 48px; height: 48px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid #EADBDB; flex-shrink: 0; } /* Checkbox pills (ads) */ .g-check-label{ font-size: 13px; color: var(--ink-soft); font-weight: 600; margin-bottom: -2px; } .g-checks{ display: flex; flex-wrap: wrap; gap: 8px; } .g-check{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: .18s; } .g-check:hover{ border-color: #A8324F; } .g-check.on{ background: linear-gradient(135deg, #7A1F35, #A8324F); border-color: transparent; color: #fff; box-shadow: 0 6px 14px -6px rgba(122,31,53,.4); } .g-check-box{ width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: 11px; flex-shrink: 0; } .g-check.on .g-check-box{ background: rgba(255,255,255,.2); } /* Chart card a touch taller and framed */ .g-card svg{ margin-top: 4px; } /* Profit-per-product rank highlight */ .giup-panel .g-card-title{ font-size: 14px; } /* ============ Giup visual product picker ============ */ .g-pick-label{ font-size: 13px; color: var(--ink-soft); font-weight: 600; margin-bottom: -2px; } .g-pick-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; max-height: 360px; overflow-y: auto; padding: 2px; } .g-pick-card{ display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); cursor: pointer; transition: .18s; font-family: inherit; } .g-pick-card:hover{ border-color: #A8324F; transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(122,31,53,.3); } .g-pick-card.on{ border-color: #7A1F35; background: #FBF4F5; box-shadow: 0 8px 20px -8px rgba(122,31,53,.35); } .g-pick-img{ width: 100%; aspect-ratio: 1/1; border-radius: 10px; background: #fff; border: 1px solid #EADBDB; display: grid; place-items: center; overflow: hidden; } .g-pick-img img{ width: 88%; height: 88%; object-fit: contain; } .g-pick-img span{ font-size: 28px; } .g-pick-cap{ font-size: 12.5px; font-weight: 700; color: var(--ink); text-align: center; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .g-pick-price{ font-size: 12px; font-weight: 700; color: #A8324F; } /* Selected confirmation strip */ .g-pick-selected{ display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: linear-gradient(135deg, rgba(122,31,53,.06), rgba(168,50,79,.04)); border: 1px solid #EADBDB; } .g-pick-selected img{ width: 52px; height: 52px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid #EADBDB; flex-shrink: 0; } @media(max-width:860px){ .g-pick-grid{ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; max-height: 300px; } .g-pick-cap{ font-size: 11.5px; } } /* ============ Giup color quantities ============ */ .g-color-list{ display: flex; flex-direction: column; gap: 8px; } .g-color-row{ display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); transition: .18s; } .g-color-row.on{ border-color: #A8324F; background: #FBF4F5; } .g-color-dot{ width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); flex-shrink: 0; } .g-color-dot.sm{ width: 12px; height: 12px; display: inline-block; vertical-align: middle; } .g-color-name{ flex: 1; font-size: 14px; font-weight: 600; color: var(--ink); } .g-color-qty{ width: 80px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-family: inherit; font-size: 15px; text-align: center; color: var(--ink); } .g-color-qty:focus{ outline: none; border-color: #A8324F; box-shadow: 0 0 0 3px rgba(168,50,79,.14); } /* color tag next to product name in inventory/sales */ .g-color-tag{ display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 8px; padding: 2px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--ink-soft); } .g-total-hint{ font-size: 13px; color: var(--ink-soft); text-align: center; padding: 4px; background: #FBF4F5; border-radius: 8px; } .g-field{ display: flex; flex-direction: column; gap: 6px; } .g-field .g-pick-label{ margin: 0; } /* ============ Giup date field (Year / Month / Day) ============ */ .g-date-field{ display: flex; gap: 8px; } .g-date-field select{ cursor: pointer; } /* color line inside sales pick card */ .g-pick-color{ display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--ink-soft); } /* ============ Giup month picker ============ */ .giup-period-wrap{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .giup-period-wrap .giup-period{ margin-bottom: 0; } .giup-month-pick{ display: flex; gap: 8px; } .giup-month-pick .g-input{ width: auto; min-width: 90px; padding: 8px 12px; }