/* Bebelune — faithful port of the Lovable/Tailwind design (src/styles.css + route markup). */
@font-face{font-family:Tajawal;font-weight:400;font-display:swap;src:url(fonts/tajawal-400.woff2) format("woff2")}
@font-face{font-family:Tajawal;font-weight:700;font-display:swap;src:url(fonts/tajawal-700.woff2) format("woff2")}
@font-face{font-family:Tajawal;font-weight:900;font-display:swap;src:url(fonts/tajawal-900.woff2) format("woff2")}
@font-face{font-family:Cairo;font-weight:900;font-display:swap;src:url(fonts/cairo-900.woff2) format("woff2")}

:root{
 --radius:1.25rem;
 --background:oklch(0.988 0.007 40);--foreground:oklch(0.36 0.05 355);--card:#fff;
 --primary:oklch(0.61 0.17 2);--primary-foreground:#fff;--secondary:oklch(0.92 0.035 2);
 --muted-foreground:oklch(0.52 0.04 355);--accent:oklch(0.88 0.04 75);
 --border:oklch(0.91 0.03 5);--input:oklch(0.89 0.03 5);--destructive:oklch(0.577 0.22 27);
 --gradient-soft:linear-gradient(180deg,oklch(0.95 0.03 2),oklch(0.988 0.007 40));
 --gradient-cta:linear-gradient(135deg,oklch(0.66 0.17 5),oklch(0.56 0.18 358));
 --shadow-soft:0 10px 40px -12px oklch(0.61 0.17 2/.25);--shadow-cta:0 12px 30px -8px oklch(0.61 0.17 2/.55);
}
.theme-ocean{
 --background:oklch(0.985 0.012 230);--foreground:oklch(0.32 0.06 250);--primary:oklch(0.58 0.13 245);
 --secondary:oklch(0.93 0.035 230);--muted-foreground:oklch(0.5 0.05 245);--border:oklch(0.9 0.03 230);
 --gradient-soft:linear-gradient(180deg,oklch(0.9 0.05 225),oklch(0.985 0.012 230));
 --gradient-cta:linear-gradient(135deg,oklch(0.64 0.12 230),oklch(0.52 0.14 255));
 --shadow-soft:0 10px 40px -12px oklch(0.58 0.13 245/.3);--shadow-cta:0 12px 30px -8px oklch(0.58 0.13 245/.5);
 background:var(--background);color:var(--foreground)}
body{background:var(--background);color:var(--foreground);font-family:Tajawal,Cairo,system-ui,sans-serif;-webkit-font-smoothing:antialiased;margin:0;line-height:1.6}
body.bb-ocean-page{background:oklch(0.985 0.012 230)}
h1,h2,h3{font-family:Cairo,Tajawal,sans-serif;margin:0;color:inherit}
img{max-width:100%;height:auto}
html{scroll-behavior:smooth}
.bb-page-title,.page-header{display:none}
.bb-wrap{overflow-x:hidden}
.bb-c{max-width:72rem;margin-inline:auto;padding-inline:1rem}
.bb-sec{padding:3.5rem 1rem;scroll-margin-top:5rem}
.bb-tint{background:color-mix(in oklab,var(--secondary) 40%,transparent)}
.bb-soft{background:var(--gradient-soft)}
.bb-center{text-align:center}
.bb-h2{font-size:1.875rem;font-weight:900;text-align:center;margin-bottom:2rem;line-height:1.2}
.bb-muted{color:var(--muted-foreground)}
.bb-grid{display:grid;gap:1rem}
.bb-card{background:var(--card);border-radius:1.5rem;box-shadow:var(--shadow-soft)}
.bb-mx{margin-inline:auto}

/* header / footer (SiteChrome) */
.bb-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);box-shadow:var(--shadow-soft);backdrop-filter:blur(8px)}
.bb-header .bb-c{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;padding-block:.75rem}
.bb-brand{display:flex;align-items:center;gap:.5rem;text-decoration:none}
.bb-brand img{width:2.5rem;height:2.5rem;border-radius:50%;background:#fff;object-fit:contain}
.bb-brand span{font:900 1.5rem Cairo,Tajawal,sans-serif;color:var(--primary)}
.bb-tools{display:flex;align-items:center;gap:.5rem;font-size:.875rem}
.bb-pill{display:flex;align-items:center;gap:.25rem;border-radius:999px;background:var(--secondary);padding:.5rem .75rem}
.bb-pill select{background:transparent;border:0;font:700 .875rem inherit;font-family:inherit;color:var(--foreground);cursor:pointer;max-width:11rem}
.bb-pill svg{width:1rem;height:1rem}
.bb-footer{background:var(--foreground);color:var(--background);padding:2.5rem 1rem}
.bb-footer .bb-c{display:grid;gap:1.5rem}
@media(min-width:640px){.bb-footer .bb-c{grid-template-columns:repeat(3,1fr)}}
.bb-footer .bb-flogo{display:flex;align-items:center;gap:.75rem}
.bb-footer .bb-flogo img{width:3.5rem;height:3.5rem;border-radius:50%;background:#fff;object-fit:contain}
.bb-footer .bb-flogo p{font:900 1.5rem Cairo,sans-serif;margin:0}
.bb-footer p{margin:.25rem 0;font-size:.875rem}
.bb-footer a{color:inherit;text-decoration:none}
.bb-footer .bb-op8{opacity:.8}.bb-footer .bb-op9{opacity:.9}.bb-footer .bb-op5{opacity:.5;font-size:.75rem;display:block;padding-top:1rem}

/* buttons / fields */
.btn-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--gradient-cta);color:var(--primary-foreground)!important;font-weight:800;border:0;border-radius:999px;padding:.95rem 1.75rem;box-shadow:var(--shadow-cta);transition:transform .2s,filter .2s;cursor:pointer;text-decoration:none;font-family:inherit;font-size:1rem}
.btn-cta:hover{transform:translateY(-2px);filter:brightness(1.05)}.btn-cta:disabled{opacity:.55;transform:none;cursor:not-allowed}
.btn-cta.bb-lg{font-size:1.125rem}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1.5px solid var(--primary);color:var(--primary)!important;font-weight:700;border-radius:999px;padding:.85rem 1.5rem;background:var(--card);transition:background .2s;text-decoration:none;cursor:pointer;font-family:inherit;font-size:1rem}
.btn-ghost:hover{background:var(--secondary)}
.field,.bb-form input,.bb-form select,.bb-form textarea{width:100%;box-sizing:border-box;border:1.5px solid var(--input);background:var(--card);border-radius:.9rem;padding:.8rem 1rem;font:inherit;font-size:1rem;outline:none;color:var(--foreground);transition:border-color .2s,box-shadow .2s}
.field:focus,.bb-form input:focus,.bb-form select:focus,.bb-form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px oklch(0.61 0.17 2/.12)}
.bb-badge{display:inline-block;border-radius:999px;background:var(--card);padding:.375rem 1rem;font-size:.875rem;font-weight:700;color:var(--primary);box-shadow:var(--shadow-soft)}
.fade-up{animation:fadeUp .7s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* home */
.bb-hero{padding:3.5rem 1rem;text-align:center}
.bb-hero h1{max-width:42rem;margin:0 auto;font-size:2.25rem;font-weight:900;line-height:1.2}
.bb-hero p{max-width:36rem;margin:1rem auto 0;font-size:1.125rem;color:var(--muted-foreground)}
.bb-hero .btn-cta{margin-top:1.5rem;font-size:1.125rem}
@media(min-width:640px){.bb-hero h1{font-size:3rem}}
.bb-pgrid{display:grid;gap:1.5rem}@media(min-width:640px){.bb-pgrid{grid-template-columns:1fr 1fr}}
.bb-pcard{display:block;overflow:hidden;border-radius:1.5rem;background:var(--card);box-shadow:var(--shadow-soft);color:inherit;text-decoration:none;transition:transform .2s}
.bb-pcard:hover{transform:translateY(-4px)}
.bb-pcard img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.bb-pcard .bb-noimg{aspect-ratio:1;background:var(--secondary);display:grid;place-items:center;color:var(--muted-foreground);font-weight:700;padding:1rem;text-align:center}
.bb-pbody{padding:1.25rem}
.bb-prow{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.bb-prow h3{font-size:1.25rem;font-weight:900}
.bb-tag{flex-shrink:0;border-radius:999px;padding:.25rem .75rem;font-size:.75rem;font-weight:700;background:var(--secondary)}
.bb-tag.on{background:var(--primary);color:#fff}
.bb-price{margin:.75rem 0 0;font-size:1.5rem;font-weight:900;color:var(--primary);direction:ltr;text-align:start}
.bb-price small{font-size:1rem;font-weight:400;color:var(--muted-foreground);direction:inherit}
.bb-pcard .btn-ghost{margin-top:1rem}
.bb-tiles{display:grid;gap:.75rem;max-width:56rem;margin:0 auto;text-align:center;font-weight:700}
@media(min-width:640px){.bb-tiles{grid-template-columns:repeat(3,1fr)}}
.bb-tile{display:flex;flex-direction:column;align-items:center;gap:.5rem;border-radius:1rem;background:var(--card);padding:1.25rem;box-shadow:var(--shadow-soft)}
.bb-tile svg{width:1.5rem;height:1.5rem;color:var(--primary)}

/* product pages */
.bb-ocean-hero{position:relative;overflow:hidden}
.bb-ocean-hero .bb-crumb{position:relative;max-width:72rem;margin:0 auto;padding:1rem 1rem 0;font-size:.875rem;color:var(--muted-foreground)}
.bb-ocean-hero .bb-crumb a{color:inherit}
.bb-split{position:relative;display:grid;gap:2rem;max-width:72rem;margin:0 auto;padding:2rem 1rem}
@media(min-width:1024px){.bb-split{grid-template-columns:1fr 1fr;align-items:center}}
.bb-split h1{margin-top:1rem;font-size:2.25rem;font-weight:900;line-height:1.2}@media(min-width:640px){.bb-split h1{font-size:3rem}}
.bb-split .bb-lead{margin-top:1rem;font-size:1.125rem;line-height:1.7;color:var(--muted-foreground)}
.bb-hero-img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:2.5rem;background:#fff;box-shadow:var(--shadow-soft)}
.sway{animation:sway 6s ease-in-out infinite;display:block}
@keyframes sway{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-1deg)}}
.bubble{position:absolute;bottom:-40px;border-radius:9999px;background:oklch(1 0 0/.55);box-shadow:inset 0 0 0 1px oklch(0.58 0.13 245/.25);animation:bubble-rise linear infinite;pointer-events:none}
@keyframes bubble-rise{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.7}100%{transform:translateY(-110vh) scale(1.1);opacity:0}}
.bb-wave{display:block;width:100%;height:3rem;color:var(--background);position:relative}
.bb-orderline{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.bb-big-price{margin:1.25rem 0 0;font-size:1.875rem;font-weight:900;color:var(--primary);direction:ltr;text-align:start}
.bb-safety{margin-top:1rem;display:flex;gap:.75rem;border:2px solid color-mix(in oklab,var(--primary) 40%,transparent);background:color-mix(in oklab,var(--secondary) 60%,transparent);border-radius:1rem;padding:1rem}
.bb-safety svg{flex-shrink:0;width:1.5rem;height:1.5rem;color:var(--primary)}
.bb-safety p{margin:0;font-size:.875rem;font-weight:700;line-height:1.7}
.bb-gal{max-width:48rem;margin:0 auto}
.bb-gal-main{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:1.5rem;background:#fff;box-shadow:var(--shadow-soft)}
.bb-gal-main.contain{object-fit:contain}
.bb-thumbs{margin-top:.75rem;display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}
.bb-thumbs.n8{grid-template-columns:repeat(4,1fr)}@media(min-width:640px){.bb-thumbs.n8{grid-template-columns:repeat(8,1fr)}}
.bb-thumbs button{padding:0;overflow:hidden;border-radius:.75rem;border:2px solid transparent;background:none;cursor:pointer;opacity:.8}
.bb-thumbs button.on{border-color:var(--primary);opacity:1}
.bb-thumbs img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.bb-4{display:grid;gap:1rem;max-width:72rem;margin:0 auto}@media(min-width:640px){.bb-4{grid-template-columns:1fr 1fr}}@media(min-width:1024px){.bb-4{grid-template-columns:repeat(4,1fr)}}
.bb-feat{overflow:hidden;border-radius:1.5rem;background:#fff;box-shadow:var(--shadow-soft)}
.bb-feat img,.bb-feat .bb-noimg{display:block;width:100%;aspect-ratio:1;object-fit:cover;transition:transform .5s}
.bb-feat:hover img{transform:scale(1.1)}.bb-feat>div:first-child{overflow:hidden}
.bb-feat .bb-noimg{background:var(--secondary);display:grid;place-items:center;font-size:3rem}
.bb-feat .bb-fb{padding:1.25rem}.bb-feat h3{font-size:1.125rem;font-weight:900}.bb-feat p{margin:.5rem 0 0;color:var(--muted-foreground)}
.bb-life{display:grid;gap:1rem;max-width:72rem;margin:0 auto}@media(min-width:640px){.bb-life{grid-template-columns:1fr 1fr}}@media(min-width:1024px){.bb-life{grid-template-columns:repeat(4,1fr)}}
.bb-life button{padding:0;border:0;overflow:hidden;border-radius:1.5rem;box-shadow:var(--shadow-soft);cursor:zoom-in}
.bb-life img{display:block;width:100%;aspect-ratio:1;object-fit:cover;transition:transform .5s}.bb-life img:hover{transform:scale(1.05)}
.bb-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.bb-tabs button{display:flex;align-items:center;gap:.5rem;min-height:3rem;border:0;border-radius:999px;padding:.5rem 1rem;font:700 1rem Tajawal,sans-serif;background:#fff;box-shadow:var(--shadow-soft);cursor:pointer;color:var(--foreground)}
.bb-tabs button.on{background:var(--primary);color:#fff}
.bb-pane{display:none;margin:2rem auto 0;max-width:64rem;align-items:center;gap:1.5rem;border-radius:2.5rem;background:rgba(255,255,255,.7);padding:1rem}
.bb-pane.on{display:grid;animation:fadeUp .7s ease both}@media(min-width:768px){.bb-pane.on{grid-template-columns:1fr 1fr}}
.bb-pane .bb-noimg{aspect-ratio:1;border-radius:1.5rem;background:var(--secondary);display:grid;place-items:center;font-size:5rem}
.bb-pane img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:1.5rem;box-shadow:var(--shadow-soft)}
.bb-pane h3{margin-top:.75rem;font-size:1.5rem;font-weight:900}.bb-pane p{margin:.75rem 0 0;font-size:1.125rem;color:var(--muted-foreground)}
.bb-emoji{font-size:3rem;line-height:1}
.bb-faq{max-width:48rem;margin:0 auto}.bb-faq h2{font-size:1.5rem;font-weight:900}
.bb-faq details{margin-top:.75rem;border-radius:1rem;background:#fff;padding:1.25rem;box-shadow:var(--shadow-soft)}
.bb-faq summary{cursor:pointer;list-style:none;font-weight:900;display:flex;justify-content:space-between;align-items:center}
.bb-faq summary::after{content:"⌄";color:var(--primary);transition:transform .2s}.bb-faq details[open] summary::after{transform:rotate(180deg)}
.bb-faq details p{margin:.75rem 0 0;color:var(--muted-foreground)}
.bb-ship{display:flex;gap:1rem;max-width:48rem;margin:0 auto;border-radius:1.5rem;background:#fff;padding:1.5rem;box-shadow:var(--shadow-soft)}
.bb-ship svg{flex-shrink:0;width:2rem;height:2rem;color:var(--primary)}.bb-ship h2{font-size:1.5rem;font-weight:900}.bb-ship p{margin:.5rem 0 0;color:var(--muted-foreground)}
.bb-final{text-align:center;padding:3.5rem 1rem}.bb-final h2{font-size:1.875rem;font-weight:900}.bb-final .btn-cta{margin-top:1.25rem}
.bb-final h2.sm{font-size:1.5rem;margin:3.5rem 0 1.5rem}
.bb-rel{display:flex;align-items:center;gap:1rem;max-width:28rem;margin:0 auto;border-radius:1.5rem;background:#fff;padding:.75rem;box-shadow:var(--shadow-soft);text-align:start;color:inherit;text-decoration:none}
.bb-rel img,.bb-rel .bb-noimg{width:6rem;height:6rem;border-radius:1rem;object-fit:cover;background:var(--secondary);flex-shrink:0}.bb-rel span{font-weight:900}
.bb-ask form{display:flex;gap:.5rem;max-width:48rem;margin:0 auto}.bb-ask form input{flex:1}
.bb-ask-ans{max-width:48rem;margin:1rem auto 0;display:none;border-radius:1.5rem;background:#fff;padding:1.25rem;box-shadow:var(--shadow-soft);line-height:1.7}.bb-ask-ans.on{display:block}
.bb-chips{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:.5rem}.bb-chips span{border-radius:999px;background:#fff;padding:.375rem .75rem;font-size:.875rem;font-weight:700}
.bb-b3{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:1.5rem;text-align:center;font-size:.8rem;font-weight:700}
.bb-b3>div{display:flex;flex-direction:column;align-items:center;gap:.25rem;border-radius:1rem;background:#fff;padding:.75rem .25rem}
.bb-b3 svg{width:1.25rem;height:1.25rem;color:var(--primary)}
.bb-cmp{display:grid;gap:1.5rem;align-items:center}@media(min-width:1024px){.bb-cmp{grid-template-columns:1fr 1fr}}
.bb-cmp .a,.bb-cmp .b{border-radius:1.5rem;background:#fff;padding:1.5rem;border:2px solid var(--border)}.bb-cmp .b{border-color:var(--primary);background:color-mix(in oklab,var(--secondary) 60%,transparent)}
.bb-cmp small{font-size:.875rem;font-weight:700;color:var(--muted-foreground);display:block}.bb-cmp .b small{color:var(--primary)}.bb-cmp strong{display:block;font-size:1.125rem;margin-top:.25rem}
.bb-bgrid{display:grid;gap:1rem}@media(min-width:640px){.bb-bgrid{grid-template-columns:1fr 1fr}}@media(min-width:1024px){.bb-bgrid{grid-template-columns:repeat(4,1fr)}}
.bb-bgrid>div{border-radius:1.5rem;background:#fff;padding:1.5rem;box-shadow:var(--shadow-soft)}.bb-bgrid h3{margin-top:1rem;font-size:1.125rem;font-weight:900}.bb-bgrid p{margin:.5rem 0 0;color:var(--muted-foreground)}
.bb-ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:1rem;background:var(--secondary);color:var(--primary);font-size:1.5rem}
.bb-pieces{display:grid;gap:.75rem;margin:0;padding:0;list-style:none}@media(min-width:640px){.bb-pieces{grid-template-columns:1fr 1fr}}
.bb-pieces li{border-radius:1rem;background:#fff;padding:1rem;box-shadow:var(--shadow-soft)}.bb-pieces b{display:block;color:var(--primary);font-weight:900}.bb-pieces span{font-size:.875rem;color:var(--muted-foreground)}
.bb-2{display:grid;gap:1.5rem}@media(min-width:1024px){.bb-2{grid-template-columns:1fr 1fr;align-items:center}}
.bb-dim3{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;text-align:center}.bb-dim3>div{border-radius:1rem;background:#fff;padding:1rem;box-shadow:var(--shadow-soft)}.bb-dim3 b{display:block;font-size:1.25rem;color:var(--primary);direction:ltr}
.bb-steps{margin:0 auto;max-width:48rem;padding:0;list-style:none;counter-reset:s;display:grid;gap:.75rem}
.bb-steps li{counter-increment:s;display:flex;gap:1rem;align-items:center;border-radius:1rem;background:#fff;padding:1rem;box-shadow:var(--shadow-soft)}
.bb-steps li::before{content:counter(s);flex-shrink:0;display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--gradient-cta);color:#fff;font-weight:900}
.bb-warn{margin:1.5rem auto 0;max-width:48rem;display:flex;gap:.75rem;border:2px solid color-mix(in oklab,var(--primary) 40%,transparent);background:color-mix(in oklab,var(--secondary) 60%,transparent);border-radius:1rem;padding:1rem;font-weight:700;font-size:.9rem}

/* sticky bar, drawer, zoom, inline checkout */
.bb-sticky{position:fixed;inset-inline:0;bottom:0;z-index:50;border-top:1px solid var(--border);background:rgba(255,255,255,.95);padding:.75rem 1rem max(.75rem,env(safe-area-inset-bottom));backdrop-filter:blur(8px)}
.bb-sticky[hidden]{display:none}
.bb-sticky .bb-c{max-width:48rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:0}
.bb-st-l{display:flex;min-width:0;align-items:center;gap:.5rem}.bb-st-l img{width:3rem;height:3rem;flex-shrink:0;border-radius:.75rem;object-fit:cover;box-shadow:var(--shadow-soft)}
.bb-st-l p{margin:0}.bb-st-l .n{font-size:.75rem;font-weight:700;color:var(--muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bb-st-l .p{font-size:1.125rem;font-weight:900;line-height:1.2;color:var(--primary);direction:ltr}
.bb-sticky .btn-cta{flex:1}@media(min-width:640px){.bb-sticky .btn-cta{flex:none;padding-inline:2.5rem}}
body.bb-has-sticky{padding-bottom:5rem}
.bb-ov{position:fixed;inset:0;z-index:70}.bb-ov[hidden]{display:none}
.bb-ov .bk{position:absolute;inset:0;background:color-mix(in oklab,var(--foreground) 50%,transparent);backdrop-filter:blur(4px);border:0}
.bb-ov .pn{position:absolute;inset-block:0;inset-inline-end:0;display:flex;flex-direction:column;width:100%;max-width:32rem;background:var(--background);box-shadow:var(--shadow-soft);animation:fadeUp .4s ease both}
.bb-ov .hd{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:1rem 1.25rem}.bb-ov .hd p{margin:0;font-size:1.125rem;font-weight:900}
.bb-ov .x{display:grid;place-items:center;width:2.5rem;height:2.5rem;border:0;border-radius:50%;background:var(--secondary);cursor:pointer;font-size:1.25rem;color:var(--foreground)}
.bb-ov .bd{flex:1;overflow-y:auto;padding:1rem}@media(min-width:640px){.bb-ov .bd{padding:1.5rem}}
.bb-zoom{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:color-mix(in oklab,var(--foreground) 80%,transparent);padding:1rem}.bb-zoom[hidden]{display:none}.bb-zoom img{max-height:100%;max-width:100%;border-radius:1rem}
.bb-co{background:var(--card);border-radius:1.5rem;box-shadow:var(--shadow-soft);padding:1.25rem}
.bb-form{display:grid;gap:.9rem}.bb-form label{display:grid;gap:.35rem;font-weight:700}
.bb-form small{color:var(--muted-foreground);font-weight:400}
.bb-hp{position:absolute!important;left:-9999px}
.bb-summary{background:#fff;border:1px solid var(--border);border-radius:1rem;padding:.75rem 1rem;display:grid;gap:.35rem}.bb-summary div{display:flex;justify-content:space-between}.bb-summary:empty{display:none}.bb-total{font-size:1.15rem;border-top:1px dashed var(--border);padding-top:.35rem}
.bb-msg{margin:0;color:var(--destructive);font-weight:700;min-height:1.2em}
.bb-lock{overflow:hidden}
.bb-success{max-width:35rem;margin:2rem auto;background:#fff;border-radius:1.5rem;padding:1.5rem;box-shadow:var(--shadow-soft)}.bb-success dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem}.bb-success dt{color:var(--muted-foreground)}.bb-success dd{margin:0;font-weight:700}
@media(prefers-reduced-motion:reduce){.bubble{display:none}.sway,.fade-up{animation:none}.bb-pane.on{animation:none}}

/* order form (GccCheckout) */
.bb-form{gap:1.5rem}
.bb-cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}@media(min-width:640px){.bb-cgrid{grid-template-columns:repeat(6,1fr)}}
.bb-cbtn{border:2px solid var(--border);background:var(--card);border-radius:1rem;padding:.65rem .5rem;font:700 .875rem Tajawal,sans-serif;color:var(--foreground);cursor:pointer;transition:border-color .2s}
.bb-cbtn small{display:block;font-size:.75rem;font-weight:400;color:var(--muted-foreground)}
.bb-cbtn.on{border-color:var(--primary);background:color-mix(in oklab,var(--secondary) 60%,transparent)}
.bb-fields{display:grid;gap:1rem;padding:1.25rem}@media(min-width:640px){.bb-fields{padding:1.75rem}}
.bb-phone{display:flex;gap:.5rem}.bb-dial{display:grid;place-items:center;flex-shrink:0;border-radius:.75rem;background:var(--secondary);padding:0 .75rem;font-weight:700}
.bb-phone input{flex:1;text-align:left}
.bb-aside{display:grid;gap:1rem;height:fit-content;padding:1.25rem}@media(min-width:640px){.bb-aside{padding:1.75rem}}
.bb-prodrow{display:flex;align-items:center;gap:1rem}.bb-prodrow img{width:5rem;height:5rem;border-radius:1rem;object-fit:cover}
.bb-qrow{display:flex;align-items:center;justify-content:space-between}
.bb-step{display:flex;align-items:center;gap:.75rem;border-radius:999px;background:var(--secondary);padding:.25rem}
.bb-step button{display:grid;place-items:center;width:2.25rem;height:2.25rem;border:0;border-radius:50%;background:var(--card);cursor:pointer;font-size:1.1rem;color:var(--foreground)}
.bb-step b{width:1.5rem;text-align:center;font-size:1.125rem;font-weight:900}
.bb-sumbox{border-radius:1rem;background:color-mix(in oklab,var(--secondary) 50%,transparent);padding:1rem;font-size:.875rem}
.bb-rows{display:grid;gap:.5rem}.bb-rows>div{display:flex;justify-content:space-between}
.bb-note.ok{margin:0;color:oklch(0.6 0.13 155);font-size:.875rem;font-weight:700}
.bb-co-inline{max-width:42rem;margin:0 auto}

.bb-strip{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.75rem}.bb-strip img{width:18rem;flex-shrink:0;scroll-snap-align:center;border-radius:1.5rem;box-shadow:var(--shadow-soft)}@media(min-width:640px){.bb-strip img{width:20rem}}
.bb-brand img,.bb-flogo img{display:block}