/*
 * Storefront stylesheet. Mirrors the reference design (Tailwind v4 + shadcn):
 * base reset, design tokens, the custom components, and only the utilities the
 * storefront markup uses — with the same values Tailwind generates.
 */

/* ---------- Reset (Tailwind preflight) ---------- */
*,::after,::before,::backdrop{box-sizing:border-box;margin:0;padding:0;border:0 solid}
html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
small{font-size:80%}
ol,ul,menu{list-style:none}
img,svg,video,canvas,iframe{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}
button,input,select,optgroup,textarea{font:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}
::placeholder{opacity:1;color:color-mix(in oklab,currentcolor 50%,transparent)}
textarea{resize:vertical}
button,input:where([type=button],[type=reset],[type=submit]){appearance:button}
button,[role=button]{cursor:pointer}
button:disabled{cursor:default}
::-webkit-search-decoration{appearance:none}
[hidden]:where(:not([hidden=until-found])){display:none!important}

/* ---------- Design tokens ---------- */
:root{--primary:#14213d;--primary-foreground:#fff;--radius:.75rem;--background:#fbf8f3;--foreground:#14213d;--card:#fff;--card-foreground:#14213d;--muted-foreground:#77726b;--border:#e7e1d9;--input:#e0d8ce;--ring:#e76f51}
*{border-color:var(--border);outline-color:color-mix(in oklab,var(--ring) 50%,transparent)}
body{background-color:var(--background);color:var(--foreground);font-family:Cairo,"IBM Plex Sans Arabic",sans-serif;overflow-x:hidden}

/* ---------- Layout container (component + utility layers combined) ---------- */
.container{width:100%;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
@media (min-width:40rem){.container{max-width:40rem;padding-left:1.5rem;padding-right:1.5rem}}
@media (min-width:48rem){.container{max-width:48rem}}
@media (min-width:64rem){.container{max-width:64rem;padding-left:2rem;padding-right:2rem}}
@media (min-width:80rem){.container{max-width:80rem}}
@media (min-width:96rem){.container{max-width:96rem}}
.flex{min-height:0;min-width:0}

/* ---------- Design components (from the reference stylesheet) ---------- */
.brand-mark{display:flex;align-items:center;justify-content:center;height:40px;width:40px;border-radius:14px 14px 14px 5px;background:#e76f51;color:#fff;box-shadow:5px 5px 0 #f4a261}
.nav-link{position:relative;transition:color .2s}
.nav-link:hover{color:#e76f51}
.nav-link::after{content:"";position:absolute;inset-inline-start:0;bottom:-8px;height:2px;width:0;border-radius:999px;background:#e76f51;transition:width .2s}
.nav-link:hover::after{width:24px}
.cart-badge{display:flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#e76f51;color:#fff;font-size:10px}
.hero-section{position:relative;background:radial-gradient(circle at 85% 20%,rgba(244,162,97,.14),transparent 22%),radial-gradient(circle at 10% 30%,rgba(42,157,143,.07),transparent 24%),#fbf8f3}
.hero-section::before{content:"";position:absolute;inset:0;opacity:.35;background-image:radial-gradient(#dcd2c4 .7px,transparent .7px);background-size:18px 18px;mask-image:linear-gradient(90deg,black,transparent 78%)}
.eyebrow{display:inline-flex;align-items:center;gap:7px;color:#e76f51;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.eyebrow::before{content:"";height:7px;width:7px;border-radius:999px;background:#f4a261}
.hero-visual{perspective:1200px}
.hero-sun{position:absolute;right:16%;top:3%;height:350px;width:350px;border-radius:50%;background:#f4a261;opacity:.22;filter:blur(1px)}
.hero-sun::after{content:"";position:absolute;inset:26px;border:1px dashed rgba(20,33,61,.23);border-radius:50%}
.hero-book{position:absolute;height:340px;width:235px;border-radius:5px 15px 15px 5px;box-shadow:16px 22px 35px rgba(20,33,61,.22);transform-style:preserve-3d}
.hero-book-back{right:19%;top:7%;transform:rotate(9deg) translateZ(-20px);opacity:.9}
.hero-book-front{right:38%;top:18%;transform:rotate(-9deg) translateZ(30px)}
.hero-doodle{position:absolute;bottom:4%;right:5%;display:flex;height:72px;width:72px;align-items:center;justify-content:center;border:2px solid #14213d;border-radius:50%;color:#14213d;font-family:serif;font-size:40px;transform:rotate(15deg)}
.book-cover{position:relative;isolation:isolate;height:235px;overflow:hidden;border-radius:5px 13px 13px 5px;background:#14213d;box-shadow:inset 7px 0 0 rgba(0,0,0,.12);transition:transform .25s}
.book-cover-large{height:100%}
.book-cover-grid{position:absolute;inset:0;opacity:.2;background:linear-gradient(135deg,transparent 0,transparent 35%,rgba(255,255,255,.6) 35%,rgba(255,255,255,.6) 36%,transparent 36%,transparent 60%,rgba(255,255,255,.35) 60%,rgba(255,255,255,.35) 61%,transparent 61%)}
.book-cover-coral{background:linear-gradient(145deg,#b9383e,#e76f51)}
.book-cover-teal{background:linear-gradient(145deg,#1c6d72,#2a9d8f)}
.book-cover-navy{background:linear-gradient(145deg,#14213d,#31578f)}
.stage-card{display:block;min-height:180px;border:1px solid #e7e1d9;border-radius:24px;background:#fff;padding:24px;box-shadow:0 10px 25px rgba(20,33,61,.04);transition:transform .2s,box-shadow .2s,border-color .2s}
.stage-card:hover,.stage-card-active{transform:translateY(-4px);border-color:#f1b09d;box-shadow:0 18px 30px rgba(20,33,61,.08)}
.stage-icon{display:flex;height:48px;width:48px;align-items:center;justify-content:center;border-radius:16px}
.stage-icon.coral{background:#fff0e6;color:#e76f51}
.stage-icon.teal{background:#e6f4f0;color:#2a9d8f}
.stage-icon.navy{background:#edf1fa;color:#31578f}
.stage-card:hover .stage-arrow{color:#e76f51;translate:-.25rem 0}
[dir=ltr] .stage-card:hover .stage-arrow{translate:.25rem 0}
.book-card{transition:transform .25s,box-shadow .25s}
.book-card:hover{transform:translateY(-5px);box-shadow:0 20px 35px rgba(20,33,61,.1)}
.book-card:hover .book-cover{transform:rotate(-1deg) scale(1.015)}
.process-card{min-height:230px;position:relative;border-radius:22px;background:#fff;padding:23px;box-shadow:0 8px 22px rgba(20,33,61,.04)}
.process-number{position:absolute;inset-inline-end:20px;top:18px;color:#e7e1d9;font-size:26px;font-weight:800}
.floating-note{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;border-radius:999px;background:#fff;padding:11px 16px;color:#14213d;font-size:12px;font-weight:800;box-shadow:0 12px 24px rgba(20,33,61,.13)}
.note-one{left:1%;top:16%}
.note-two{bottom:13%;left:2%}
@media (max-width:640px){
  .hero-section .container{min-height:760px}
  .hero-visual{margin-top:-10px;transform:scale(.82);transform-origin:center top}
  .hero-book-front{right:29%}
  .hero-book-back{right:8%}
  .floating-note{transform:scale(.9)}
}
@media (prefers-reduced-motion:no-preference){
  .hero-book-front{animation:floatBook 5s ease-in-out infinite}
  .hero-book-back{animation:floatBookBack 6s ease-in-out infinite}
}
@keyframes floatBook{0%,100%{transform:rotate(-9deg) translateY(0) translateZ(30px)}50%{transform:rotate(-7deg) translateY(-8px) translateZ(30px)}}
@keyframes floatBookBack{0%,100%{transform:rotate(9deg) translateY(0) translateZ(-20px)}50%{transform:rotate(11deg) translateY(-6px) translateZ(-20px)}}

/* ---------- shadcn/ui primitives used by the design ---------- */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap;flex-shrink:0;outline:none;transition:all .15s cubic-bezier(.4,0,.2,1)}
.ui-btn svg{pointer-events:none;flex-shrink:0}
.ui-btn:disabled{pointer-events:none;opacity:.5}
.ui-btn:focus-visible,.ui-input:focus-visible,.ui-textarea:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}
.ui-label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;line-height:1;font-weight:500;user-select:none}
.ui-input,.ui-textarea{width:100%;min-width:0;border:1px solid var(--input);border-radius:calc(var(--radius) - 2px);background:transparent;padding:.25rem .75rem;font-size:1rem;box-shadow:0 1px 2px 0 rgb(0 0 0/.05);outline:none;transition:color .15s,box-shadow .15s}
.ui-input{height:2.25rem}
.ui-textarea{display:flex;field-sizing:content;min-height:4rem;padding-block:.5rem}
.ui-input::placeholder,.ui-textarea::placeholder{color:var(--muted-foreground)}
@media (min-width:48rem){.ui-input,.ui-textarea{font-size:.875rem}}

/* ---------- Utilities (Tailwind values) ---------- */
.pointer-events-none{pointer-events:none}
.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}
.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.top-0{top:0}.top-1\/2{top:50%}.top-4{top:1rem}.top-5{top:1.25rem}
.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}
.mx-auto{margin-inline:auto}
.-mt-5{margin-top:-1.25rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-9{margin-top:2.25rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-5{margin-bottom:1.25rem}.mb-10{margin-bottom:2.5rem}
.line-clamp-2,.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}
.line-clamp-2{-webkit-line-clamp:2}.line-clamp-3{-webkit-line-clamp:3}
.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}
.size-4{width:1rem;height:1rem}
.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-9{height:2.25rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-13{height:3.25rem}.h-20{height:5rem}.h-24{height:6rem}.h-48{height:12rem}
.h-\[18px\]{height:18px}.h-\[76px\]{height:76px}.h-\[390px\]{height:390px}.h-full{height:100%}
.min-h-16{min-height:4rem}.min-h-\[110px\]{min-height:110px}.min-h-\[2\.75rem\]{min-height:2.75rem}.min-h-\[3\.25rem\]{min-height:3.25rem}.min-h-\[360px\]{min-height:360px}.min-h-\[590px\]{min-height:590px}.min-h-screen{min-height:100vh}
.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-9{width:2.25rem}.w-16{width:4rem}.w-20{width:5rem}
.w-\[18px\]{width:18px}.w-\[72px\]{width:72px}.w-full{width:100%}
.max-w-xs{max-width:20rem}.max-w-sm{max-width:24rem}.max-w-md{max-width:28rem}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-\[520px\]{max-width:520px}
.min-w-0{min-width:0}.min-w-\[18px\]{min-width:18px}
.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}
.-translate-y-1\/2{translate:0 -50%}
.scale-90{scale:.9}
.origin-start{transform-origin:100% center}
[dir=ltr] .origin-start{transform-origin:0 center}
.scroll-mt-28{scroll-margin-top:7rem}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}
.space-y-2>:not(:last-child){margin-bottom:.5rem}.space-y-3>:not(:last-child){margin-bottom:.75rem}.space-y-4>:not(:last-child){margin-bottom:1rem}
.avatar-stack{display:flex}
.avatar-stack>:not(:first-child){margin-inline-start:-.5rem}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}
.rounded-xs{border-radius:.125rem}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-xl{border-radius:calc(var(--radius) + 4px)}.rounded-2xl{border-radius:1rem}
.rounded-\[5px_13px_13px_5px\]{border-radius:5px 13px 13px 5px}.rounded-\[26px\]{border-radius:26px}.rounded-\[28px\]{border-radius:28px}.rounded-full{border-radius:9999px}
.border{border-width:1px;border-style:solid}.border-0{border-width:0}.border-2{border-width:2px;border-style:solid}
.border-y{border-block-width:1px;border-block-style:solid}.border-t{border-top-width:1px;border-top-style:solid}.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-\[\#2a9d8f\]{border-color:#2a9d8f}.border-\[\#ded6cb\]{border-color:#ded6cb}.border-\[\#e4ddd4\]{border-color:#e4ddd4}.border-\[\#e5ded5\]{border-color:#e5ded5}.border-\[\#e7e1d9\]{border-color:#e7e1d9}
.border-\[\#e7e1d9\]\/80{border-color:rgb(231 225 217/.8)}.border-\[\#ebe6e0\]{border-color:#ebe6e0}.border-\[\#eee6dd\]{border-color:#eee6dd}.border-\[\#fbf8f3\]{border-color:#fbf8f3}.border-white\/15{border-color:rgb(255 255 255/.15)}
.bg-\[\#14213d\]{background-color:#14213d}.bg-\[\#17233f\]{background-color:#17233f}.bg-\[\#e76f51\]{background-color:#e76f51}.bg-\[\#e7f5f2\]{background-color:#e7f5f2}.bg-\[\#f4a261\]{background-color:#f4a261}
.bg-\[\#f5e9df\]{background-color:#f5e9df}.bg-\[\#f5eee6\]{background-color:#f5eee6}.bg-\[\#f7f5f2\]{background-color:#f7f5f2}.bg-\[\#f9eded\]{background-color:#f9eded}.bg-\[\#fbf8f3\]{background-color:#fbf8f3}
.bg-\[\#fbf8f3\]\/90{background-color:rgb(251 248 243/.9)}.bg-black\/50{background-color:rgb(0 0 0/.5)}.bg-transparent{background-color:transparent}.bg-white{background-color:#fff}
.bg-white\/10{background-color:rgb(255 255 255/.1)}.bg-white\/15{background-color:rgb(255 255 255/.15)}.bg-white\/90{background-color:rgb(255 255 255/.9)}
.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-12{padding:3rem}
.px-2{padding-inline:.5rem}.px-2\.5{padding-inline:.625rem}.px-3{padding-inline:.75rem}.px-4{padding-inline:1rem}.px-6{padding-inline:1.5rem}.px-7{padding-inline:1.75rem}
.py-1{padding-block:.25rem}.py-2{padding-block:.5rem}.py-6{padding-block:1.5rem}.py-8{padding-block:2rem}.py-20{padding-block:5rem}.py-24{padding-block:6rem}
.pt-5{padding-top:1.25rem}.pb-0{padding-bottom:0}
.text-center{text-align:center}.text-left{text-align:left}.text-start{text-align:start}
.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-\[7px\]{font-size:7px}.text-\[8px\]{font-size:8px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[clamp\(2\.6rem\,6vw\,5\.5rem\)\]{font-size:clamp(2.6rem,6vw,5.5rem)}
.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.leading-7{line-height:1.75rem}.leading-8{line-height:2rem}.leading-9{line-height:2.25rem}.leading-\[1\.12\]{line-height:1.12}.leading-none{line-height:1}.leading-tight{line-height:1.25}
.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}
.tracking-tight{letter-spacing:-.025em}.tracking-\[-0\.055em\]{letter-spacing:-.055em}.tracking-\[0\.18em\]{letter-spacing:.18em}.tracking-\[0\.2em\]{letter-spacing:.2em}
.uppercase{text-transform:uppercase}.whitespace-nowrap{white-space:nowrap}
.text-\[\#14213d\]{color:#14213d}.text-\[\#17233f\]{color:#17233f}.text-\[\#247c73\]{color:#247c73}.text-\[\#2a9d8f\]{color:#2a9d8f}.text-\[\#5d6270\]{color:#5d6270}.text-\[\#6f7481\]{color:#6f7481}
.text-\[\#77726b\]{color:#77726b}.text-\[\#8b877f\]{color:#8b877f}.text-\[\#9a958e\]{color:#9a958e}.text-\[\#a4a09a\]{color:#a4a09a}.text-\[\#aa5353\]{color:#aa5353}.text-\[\#aaa\]{color:#aaa}
.text-\[\#b3aca2\]{color:#b3aca2}.text-\[\#e76f51\]{color:#e76f51}.text-\[\#f4a261\]{color:#f4a261}.text-white{color:#fff}
.text-white\/60{color:rgb(255 255 255/.6)}.text-white\/65{color:rgb(255 255 255/.65)}.text-white\/80{color:rgb(255 255 255/.8)}
.placeholder\:text-white\/35::placeholder{color:rgb(255 255 255/.35)}
.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.opacity-85{opacity:.85}
.shadow-sm{box-shadow:0 1px 3px 0 rgb(0 0 0/.1),0 1px 2px -1px rgb(0 0 0/.1)}
.shadow-lg{box-shadow:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1)}
.shadow-xl.shadow-\[\#14213d\]\/10{box-shadow:0 20px 25px -5px rgb(20 33 61/.1),0 8px 10px -6px rgb(20 33 61/.1)}
.shadow-inner{box-shadow:inset 0 2px 4px 0 rgb(0 0 0/.05)}
.shadow-\[0_12px_24px_rgba\(231\,111\,81\,0\.25\)\]{box-shadow:0 12px 24px rgba(231,111,81,.25)}
.shadow-\[0_12px_30px_rgba\(20\,33\,61\,0\.06\)\]{box-shadow:0 12px 30px rgba(20,33,61,.06)}
.backdrop-blur{backdrop-filter:blur(8px)}.backdrop-blur-xl{backdrop-filter:blur(24px)}
.transition{transition-property:color,background-color,border-color,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.hover\:-translate-y-0\.5:hover{translate:0 -.125rem}
.hover\:shadow-md:hover{box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1)}
.hover\:bg-\[\#20345e\]:hover{background-color:#20345e}.hover\:bg-\[\#26385f\]:hover{background-color:#26385f}.hover\:bg-\[\#d55e40\]:hover{background-color:#d55e40}
.hover\:bg-\[\#e7f5f2\]:hover{background-color:#e7f5f2}.hover\:bg-\[\#f5e9df\]:hover{background-color:#f5e9df}.hover\:bg-\[\#f5eee6\]:hover{background-color:#f5eee6}.hover\:bg-\[\#f6b47e\]:hover{background-color:#f6b47e}
.hover\:text-\[\#e76f51\]:hover{color:#e76f51}.hover\:opacity-100:hover{opacity:1}
@media (min-width:40rem){
  .sm\:inline{display:inline}.sm\:flex-row{flex-direction:row}.sm\:w-56{width:14rem}.sm\:max-w-\[460px\]{max-width:460px}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:col-span-2{grid-column:span 2/span 2}
}
@media (min-width:48rem){
  .md\:flex{display:flex}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:items-end{align-items:flex-end}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:64rem){
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:col-span-4{grid-column:span 4/span 4}
  .lg\:grid-cols-\[1\.02fr_0\.98fr\]{grid-template-columns:1.02fr .98fr}.lg\:grid-cols-\[0\.8fr_1\.2fr\]{grid-template-columns:.8fr 1.2fr}
  .lg\:grid-cols-\[1fr_0\.85fr\]{grid-template-columns:1fr .85fr}.lg\:grid-cols-\[\.85fr_1\.15fr\]{grid-template-columns:.85fr 1.15fr}
  .lg\:items-center{align-items:center}.lg\:py-24{padding-block:6rem}.lg\:h-\[460px\]{height:460px}
}

/* ---------- Direction helpers ---------- */
[dir=ltr] .rtl-flip-x{transform:scaleX(-1)}
.book-badge{inset-inline-start:1.25rem}
.search-icon{inset-inline-start:.75rem}
.search-input{padding-inline-start:2.5rem}
[dir=rtl] input[dir=ltr].text-start-page{text-align:right}
.accent-coral{accent-color:#e76f51}

/* ---------- Cart sheet (Radix Sheet behaviour) ---------- */
.sheet-overlay{opacity:0;transition:opacity .3s ease}
.sheet-overlay.is-open{opacity:1}
.sheet-panel{transition:transform .5s cubic-bezier(.4,0,.2,1)}
[dir=rtl] .sheet-panel{left:0;transform:translateX(-100%)}
[dir=ltr] .sheet-panel{right:0;transform:translateX(100%)}
.sheet-panel.is-open{transform:none}
.sheet-header{padding-inline-end:4rem}
.sheet-close{top:1.5rem;inset-inline-end:1.25rem;width:2.25rem;height:2.25rem;border:1px solid #e5ded5;background:#fff}
.sheet-close:hover{background:#f5eee6;color:#14213d}
.method-card{border-color:#e7e1d9;background:#fff;color:#77726b}
.method-card[data-method=delivery].is-active{border-color:#e76f51;background:#fff0e6;color:#c85738}
.method-card[data-method=pickup].is-active{border-color:#2a9d8f;background:#e7f5f2;color:#247c73}
.method-card:disabled{opacity:.5;cursor:not-allowed}
.qty-disabled,button[disabled].rounded-full.p-1{opacity:.4;cursor:not-allowed}
#deliveryMap{z-index:0}
.leaflet-container{font-family:inherit}

/* ---------- Flash messages ---------- */
.toast{position:fixed;top:16px;inset-inline:16px;z-index:70;max-width:560px;margin:0 auto;padding:12px 16px;border-radius:14px;font-size:14px;font-weight:700;box-shadow:0 12px 30px rgba(20,33,61,.15);animation:toastOut .4s ease 6s forwards}
.toast-success{background:#eef8f7;color:#1f6b63;border:1px solid #bfe3de}
.toast-error{background:#fff0ec;color:#a8432b;border:1px solid #f3cfc4}
@keyframes toastOut{to{opacity:0;visibility:hidden;transform:translateY(-10px)}}

/* Buttons that contain an icon use tighter padding (shadcn has-[>svg]:px-3) */
.ui-btn:has(>svg){padding-inline:.75rem}
.ms-1{margin-inline-start:.25rem}.ms-2{margin-inline-start:.5rem}.me-1{margin-inline-end:.25rem}
.ui-btn svg:not([class*=size-]){width:1rem;height:1rem}

/* Add-to-cart toasts: top right, green for success */
#notifyStack{position:fixed;top:1rem;right:1rem;z-index:80;display:flex;flex-direction:column;gap:.5rem;width:min(356px,calc(100vw - 2rem));pointer-events:none}
.notify{display:flex;align-items:center;gap:.625rem;padding:.875rem 1rem;border-radius:.75rem;border:1px solid;font-size:.875rem;font-weight:700;line-height:1.4;box-shadow:0 8px 24px rgba(20,33,61,.12);pointer-events:auto;animation:notifyIn .3s cubic-bezier(.21,1.02,.73,1)}
.notify-success{background:#ecfdf3;border-color:#bffcd9;color:#008a2e}
.notify-error{background:#fff0f0;border-color:#ffe0e1;color:#e60000}
.notify-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999px;background:currentColor}
.notify-icon svg{color:#fff}
.notify-text{min-width:0}
.notify.is-leaving{opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .3s}
@keyframes notifyIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.book-grid{transition:opacity .2s}
.book-grid.is-loading{opacity:.45;pointer-events:none}