/* =================================================================== Enza Trade — design system. Two directions via [data-dir="a"|"b"]. Bilingual: [data-lang="en"|"ar"], RTL handled on . =================================================================== */ /* ---------- Tokens ---------- */ :root{ --maroon:#ed1e26; --maroon-deep:#3a0810; --wine:#f11f2a; --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} html,body{overflow-x:hidden;max-width:100%} body{ font-family:var(--font-body); background:var(--bg); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } 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:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.4px var(--ink)} .btn-outline:hover{background:var(--ink);color:var(--ivory)} .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://enza-trade-co.odoo.com/web/image/1086);background-size:cover; background-position:center;opacity:.07;mix-blend-mode:screen;pointer-events:none} .ftr-inner{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 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:46px;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-bottom{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-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} .ftr-social a:hover{background:var(--ivory);color:var(--maroon);opacity:1;padding:0} .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} /* ---------- 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;align-items:center} .card-swatches button.sw{padding:0;border:none;background:none;display:block;outline:none} .sw{width:15px;height:15px;border-radius:50%;box-shadow:0 0 0 1px var(--line),inset 0 0 0 2px var(--surface);cursor:pointer;transition:transform .15s, box-shadow .15s} .sw:hover, .sw.active{box-shadow:0 0 0 1.5px var(--maroon),inset 0 0 0 2px var(--surface);transform:scale(1.18)} /* ---------- 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://enza-trade-co.odoo.com/web/image/1083) center/68% no-repeat;opacity:.5;mix-blend-mode:luminosity} .hero-art .prod{position:absolute;inset:0;background-size:88%;background-position:center;background-repeat:no-repeat;filter:drop-shadow(0 30px 40px rgba(58,8,16,.22))} .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{box-shadow:inset 0 0 0 1.4px var(--ivory);color:var(--ivory)} .hero-b .btn-outline:hover{background:var(--ivory);color:var(--maroon)} .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 minmax(0,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;width:100%;max-width:100%} .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} .checkout-form-card { background: var(--surface); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow); border: 1px solid var(--line); } [data-dir="a"] .checkout-form-card { box-shadow: inset 0 0 0 1px var(--line); border: none; } .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px} .field label{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink)} .field .req{color:var(--maroon)} .input{font-family:var(--font-body);font-size:15px;padding:13px 16px;border-radius:var(--radius); background:var(--surface);border:1.5px solid var(--line-strong);color:var(--ink);width:100%;transition:border-color .2s, box-shadow .2s;box-shadow:none} .input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3.5px color-mix(in srgb,var(--accent) 15%,transparent)} .input.err{border-color:#b3261e;box-shadow:0 0 0 3.5px rgba(179,38,30,0.15)} select.input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b504b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; padding-right: 44px !important; } [dir="rtl"] select.input { background-position: left 16px center; padding-left: 44px !important; padding-right: 16px !important; } .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:14px;align-items:flex-start;padding:20px;border-radius:var(--radius);border:1.5px solid var(--accent);background:color-mix(in srgb,var(--accent) 4%,transparent)} .pay-opt .radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--accent);display:grid;place-items:center;margin-top:2px;flex-shrink:0;background:none;box-shadow:none} .pay-opt .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)} .osummary{background:var(--surface);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow);border:1px solid var(--line);position:sticky;top:96px} [data-dir="a"] .osummary{box-shadow:inset 0 0 0 1px var(--line);border:none} .osummary .li-mini{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)} .osummary .li-mini img, .confirm-card .li-mini img{width:54px;height:54px;object-fit:contain;background:var(--paper);border-radius:6px;border:1px solid var(--line)} /* 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)} .sw-more{font-size:10.5px;font-weight:700;color:var(--ink-soft);margin-inline-start:2px;user-select:none} /* ---------- 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:minmax(0,1fr)} .shop-toolbar .chip-row{ display:flex; flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; margin-bottom:-8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; width:100%; max-width:100%; min-width:0; } .shop-toolbar .chip-row::-webkit-scrollbar{display:none} .chip{flex-shrink:0} .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{grid-template-columns:1fr 1fr} .values,.ship-grid{grid-template-columns:1fr} .shop-grid{grid-template-columns:repeat(2,1fr)} .home-grid{grid-template-columns:repeat(2,1fr)} .osummary{position:static;margin-top:24px} .pdp-gallery{position:static} .filters{position:static} .card-fav{opacity:1;transform:none;top:8px;inset-inline-end:8px;width:32px;height:32px} .card-fav svg{width:15px;height:15px} .card-quick{opacity:1;transform:none;left:auto;right:12px;bottom:12px;width:36px;height:36px;z-index:5} .card-quick .btn{width:36px;height:36px;border-radius:50%;padding:0;display:grid;place-items:center;justify-content:center} .card-quick .quick-add-text{display:none} .card-quick .quick-add-icon{display:block !important} } @media(max-width:560px){ .shop-grid,.home-grid{grid-template-columns:1fr;gap:36px} .card-name{font-size:20px} .card-body{gap:8px} .card-swatches{margin-top:6px} } @media(max-width:520px){ .grid-2{grid-template-columns:1fr} .ftr-inner{grid-template-columns:1fr} .contact-band{flex-direction:column;align-items:flex-start} .dir-switch{bottom:12px} .brand-word{font-size:19px;letter-spacing:.01em} .brand{gap:8px} } /* ---------- 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} } /* ========================================================================== AMAZON-STYLE PDP 3-COLUMN LAYOUT & MOBILE RESPONSIVE ========================================================================== */ .pdp-layout { display: grid; grid-template-columns: 1fr 1fr 0.8fr; gap: 32px; align-items: start; margin-top: 24px; } .pdp-gallery-col { display: flex; gap: 16px; position: sticky; top: 96px; } .pdp-thumbs-vertical { display: flex; flex-direction: column; gap: 10px; width: 68px; flex-shrink: 0; } .pdp-thumb-v { width: 68px; height: 68px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; padding: 4px; transition: 0.2s; outline: none; } .pdp-thumb-v:hover, .pdp-thumb-v.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .pdp-thumb-v img { width: 100%; height: 100%; object-fit: contain; } .pdp-main-image-container { flex: 1; aspect-ratio: 1/1; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; display: grid; place-items: center; position: relative; border: 1px solid var(--line); } [data-cardbg="white"] .pdp-main-image-container, [data-cardbg="white"] .pdp-thumb-v { background: #ffffff; } [data-cardbg="soft"] .pdp-main-image-container, [data-cardbg="soft"] .pdp-thumb-v { background: #f4efe7; } .pdp-main-image { width: 90%; height: 90%; object-fit: contain; } .pdp-info-col { display: flex; flex-direction: column; } .pdp-brand-cat { font-size: 13px; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 6px; letter-spacing: 0.05em; } .pdp-title { font-size: clamp(24px, 2.5vw, 32px); font-weight: 800; color: var(--ink); line-height: 1.2; margin: 0 0 8px 0; } .pdp-tagline-text { font-size: 15px; color: var(--ink-soft); font-style: italic; margin: 0; } .pdp-price-section { display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; } .pdp-current-price { font-size: 32px; font-weight: 800; color: var(--accent); } .pdp-discount-badge-row { display: flex; align-items: center; gap: 8px; } .pdp-was-price { font-size: 16px; text-decoration: line-through; color: var(--ink-soft); } .pdp-discount-percent { background: var(--accent); color: var(--ivory); font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 99px; } .pdp-description { font-size: 15px; color: var(--ink-soft); line-height: 1.6; margin: 0; } .pdp-swatches-section { display: flex; flex-direction: column; gap: 10px; } .swatch-row-pdp { display: flex; gap: 10px; flex-wrap: wrap; } .swatch-pdp { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: 0.2s; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); outline: none; } .swatch-pdp.active { border-color: var(--accent); transform: scale(1.15); box-shadow: 0 0 0 1px var(--accent); } .swatch-pdp.oos { opacity: 0.4; position: relative; } .swatch-pdp.oos::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; background: #999; transform: rotate(-45deg); } .pdp-specs-title { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 12px 0; } .pdp-specs-table { width: 100%; border-collapse: collapse; margin-top: 8px; } .pdp-specs-table tr { border-bottom: 1px solid var(--line); } .pdp-specs-table tr:last-child { border-bottom: none; } .pdp-specs-table td { padding: 10px 0; font-size: 14.5px; } .pdp-specs-table td.spec-label { width: 35%; color: var(--ink-soft); font-weight: 600; } .pdp-specs-table td.spec-val { color: var(--ink); font-weight: 500; } .pdp-buybox-col { display: flex; flex-direction: column; } .pdp-buybox-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.02); position: sticky; top: 96px; } [data-cardbg="white"] .pdp-buybox-card { background: #ffffff; } [data-cardbg="soft"] .pdp-buybox-card { background: #f4efe7; } .buybox-price { font-size: 28px; font-weight: 800; color: var(--ink); } .buybox-delivery { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); } .buybox-delivery svg { color: var(--accent); } .buybox-stock { margin: 4px 0; } .stock-badge { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 4px; display: inline-block; } .stock-badge.in { background: #e6f6ec; color: #1f8f4e; } .stock-badge.out { background: #fdf2f2; color: #de350b; } .buybox-qty-section { display: flex; align-items: center; justify-content: space-between; font-size: 14.5px; color: var(--ink-soft); font-weight: 600; } .qty-selector-buybox { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; } .qty-selector-buybox button { width: 32px; height: 32px; display: grid; place-items: center; background: none; border: none; cursor: pointer; color: var(--ink-soft); transition: 0.2s; padding: 0; } .qty-selector-buybox button:hover { background: var(--surface); color: var(--ink); } .qty-selector-buybox button svg { width: 14px; height: 14px; } .qty-value { width: 36px; text-align: center; font-weight: 700; color: var(--ink); } .buybox-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } .btn-buybox { height: 48px; border-radius: 8px; font-size: 14.5px; font-weight: 700; text-transform: none; width: 100%; } .buybox-trust-list { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 8px; } .buybox-trust-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-soft); font-weight: 600; } .buybox-trust-item svg { width: 18px; height: 18px; color: var(--accent); } .pdp-related-section { margin-top: 60px; } /* ========================================== RESPONSIVENESS AND TABLET/MOBILE BREAKPOINTS ========================================== */ @media(max-width: 1024px) { .pdp-layout { grid-template-columns: 1.1fr 0.9fr; gap: 24px; } .pdp-buybox-col { grid-column: 1 / -1; } .pdp-buybox-card { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; } .pdp-buybox-card > * { flex: 1; min-width: 200px; } .buybox-actions { flex-direction: row; width: 100%; grid-column: 1 / -1; } .buybox-actions > * { flex: 1; } } @media(max-width: 768px) { .pdp-layout { grid-template-columns: 1fr; gap: 24px; } .pdp-gallery-col { flex-direction: column-reverse; position: static; } .pdp-thumbs-vertical { flex-direction: row; width: 100%; overflow-x: auto; padding-bottom: 8px; margin-top: 4px; } .pdp-thumb-v { flex-shrink: 0; } .pdp-buybox-card { flex-direction: column; align-items: stretch; } .pdp-buybox-card > * { flex: none; min-width: 0; } .buybox-actions { flex-direction: column; } /* Fix category chip rail margin */ .shop-toolbar { flex-direction: column; align-items: stretch; gap: 12px; } .shop-toolbar .chip-row { margin: 0; order: 2; } .shop-toolbar select { width: 100%; order: 3; } .toolbar-count { order: 1; } }