:root{
  --navy:#123A63; --navy-dark:#0E3A5C; --sky:#ABD4EC; --sky-soft:#EAF4FB;
  --white:#fff; --choco:#78482A; --muted:#5C7E96; --muted-2:#436780; --line:#DCE9F4;
  --radius:18px; --shadow:0 18px 40px rgba(18,58,99,.12); --shadow-sm:0 6px 18px rgba(18,58,99,.08);
}
*{box-sizing:border-box}
body{font-family:'Tajawal',system-ui,sans-serif;color:var(--navy);background:var(--sky-soft);margin:0;line-height:1.7}
html[lang="en"] body{font-family:'Poppins','Tajawal',system-ui,sans-serif}
.display-font{font-family:'Marcellus',serif}
a{text-decoration:none}
img{max-width:100%}

/* ticker */
.ticker{background:var(--navy);color:#fff;font-size:.85rem;overflow:hidden;white-space:nowrap}
.ticker__track{display:inline-flex;gap:3rem;padding:.5rem 0;animation:ticker 24s linear infinite}
.ticker__track span::before{content:"•";margin-inline-end:1rem;color:var(--sky)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* header */
.site-header{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--navy);font-weight:800}
.brand__logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--navy),var(--muted-2));color:#fff;display:grid;place-items:center;font-family:'Marcellus',serif;font-size:1.2rem}
.brand__name{font-size:1.15rem;line-height:1.1}
.brand__name small{display:block;font-size:.68rem;color:var(--muted);font-weight:500}
.nav-link.brand-link{color:var(--navy);font-weight:600}
.nav-link.brand-link:hover{color:var(--choco)}
.lang-toggle{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:999px;padding:.3rem .8rem;font-weight:700;font-size:.85rem;cursor:pointer}
.cart-btn{position:relative;border:1px solid var(--navy);background:var(--navy);color:#fff;border-radius:999px;padding:.45rem 1rem;font-weight:700}
.cart-btn .badge{position:absolute;inset-block-start:-8px;inset-inline-end:-6px;background:var(--choco);color:#fff;border-radius:999px;font-size:.7rem}

/* buttons */
.btn-choco{background:var(--choco);border-color:var(--choco);color:#fff;font-weight:700}
.btn-choco:hover{background:#63381f;color:#fff}
.btn-navy{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.btn-navy:hover{background:var(--navy-dark);color:#fff}
.btn-outline-navy{border:1.5px solid var(--navy);color:var(--navy);font-weight:700}
.btn-outline-navy:hover{background:var(--navy);color:#fff}

/* hero */
.hero{padding:4rem 0 2rem}
.hero__kicker{display:inline-block;background:var(--sky);color:var(--navy);border-radius:999px;padding:.35rem 1rem;font-weight:700;font-size:.85rem}
.hero h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;margin:1rem 0;line-height:1.15}
.hero p.lead{color:var(--muted-2);font-size:1.1rem;max-width:34rem}
.hero__art{border-radius:28px;min-height:340px;background:linear-gradient(160deg,var(--navy),var(--muted-2) 55%,var(--choco));box-shadow:var(--shadow);display:grid;place-items:center;color:#fff;overflow:hidden}
.hero__art .cup{font-size:6rem}
.stat{text-align:center}
.stat b{font-family:'Marcellus',serif;font-size:1.9rem;color:var(--navy);display:block}
.stat span{color:var(--muted);font-size:.85rem}

/* sections */
.section{padding:3.5rem 0}
.section__eyebrow{color:var(--choco);font-weight:700;letter-spacing:.04em}
.section__title{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800}
.section__badge{width:34px;height:34px;border-radius:10px;background:var(--sky);color:var(--navy);display:inline-grid;place-items:center;font-weight:800}

.service-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;height:100%;box-shadow:var(--shadow-sm);transition:.2s}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.service-card .ic{width:52px;height:52px;border-radius:14px;background:var(--sky-soft);display:grid;place-items:center;font-size:1.5rem;margin-bottom:1rem}

.product-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;height:100%;box-shadow:var(--shadow-sm);transition:.2s;display:flex;flex-direction:column}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.product-card__media{aspect-ratio:4/3;background:linear-gradient(160deg,var(--sky),var(--sky-soft));display:grid;place-items:center;font-size:3rem;position:relative}
.product-card__media img{width:100%;height:100%;object-fit:cover}
.product-card__tag{position:absolute;inset-block-start:.7rem;inset-inline-start:.7rem;background:var(--navy);color:#fff;border-radius:999px;padding:.2rem .7rem;font-size:.72rem;font-weight:700}
.product-card__body{padding:1.1rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.product-card__body h3{font-size:1.05rem;font-weight:800;margin:0}
.product-card__desc{color:var(--muted);font-size:.85rem;flex:1}
.product-card__price{color:var(--choco);font-weight:800}

.offers{background:var(--navy);color:#fff;border-radius:28px}
.offers .section__title,.offers .section__eyebrow{color:#fff}
.offer-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:1.5rem;height:100%}
.offer-card .badge-offer{background:var(--sky);color:var(--navy);font-weight:800;border-radius:999px;padding:.25rem .8rem}
.offer-card .price{font-family:'Marcellus',serif;font-size:1.8rem}
.offer-card .was{text-decoration:line-through;color:rgba(255,255,255,.6);font-size:1rem;margin-inline-start:.4rem}

.feature-block{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow-sm);height:100%}
.feature-block .ic{font-size:2rem}
.value-pill{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;box-shadow:var(--shadow-sm)}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow-sm)}
.form-control,.form-select{border-radius:12px;border-color:var(--line);padding:.7rem .9rem}
.form-control:focus,.form-select:focus{border-color:var(--navy);box-shadow:0 0 0 .2rem rgba(18,58,99,.12)}

.site-footer{background:var(--navy);color:#cfe0f0;padding:3rem 0 1.5rem}
.site-footer a{color:#cfe0f0}
.site-footer a:hover{color:#fff}
.site-footer h5{color:#fff;font-weight:800}

/* chat widget */
.chat-fab{position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:1050;width:60px;height:60px;border-radius:50%;border:none;background:var(--choco);color:#fff;font-size:1.6rem;box-shadow:var(--shadow);cursor:pointer}
.chat-panel{position:fixed;inset-block-end:92px;inset-inline-end:22px;z-index:1050;width:340px;max-width:calc(100vw - 44px);height:460px;max-height:70vh;background:#fff;border-radius:20px;box-shadow:var(--shadow);display:none;flex-direction:column;overflow:hidden;border:1px solid var(--line)}
.chat-panel.open{display:flex}
.chat-panel__head{background:var(--navy);color:#fff;padding:1rem;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.chat-panel__body{flex:1;overflow-y:auto;padding:1rem;background:var(--sky-soft)}
.chat-panel__foot{padding:.6rem;border-top:1px solid var(--line);display:flex;gap:.4rem}
.chat-msg{max-width:80%;padding:.5rem .8rem;border-radius:14px;margin-bottom:.5rem;font-size:.9rem}
.chat-msg.customer{background:var(--navy);color:#fff;margin-inline-start:auto;border-end-end-radius:4px}
.chat-msg.admin{background:#fff;border:1px solid var(--line);margin-inline-end:auto;border-end-start-radius:4px}

/* admin */
.admin-wrap{display:flex;min-height:100vh}
.admin-sidebar{width:250px;background:var(--navy);color:#cfe0f0;padding:1.2rem;flex-shrink:0}
.admin-sidebar .brand__name,.admin-sidebar .brand{color:#fff}
.admin-sidebar a{display:flex;align-items:center;gap:.6rem;color:#cfe0f0;padding:.6rem .8rem;border-radius:10px;margin-bottom:.2rem;font-weight:600}
.admin-sidebar a:hover,.admin-sidebar a.active{background:rgba(255,255,255,.12);color:#fff}
.admin-main{flex:1;background:var(--sky-soft)}
.admin-topbar{background:#fff;border-bottom:1px solid var(--line);padding:.9rem 1.4rem;display:flex;justify-content:space-between;align-items:center}
.admin-content{padding:1.6rem}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;box-shadow:var(--shadow-sm)}
.stat-card b{font-size:1.8rem;font-family:'Marcellus',serif;color:var(--navy)}
.card-admin{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.table thead th{color:var(--muted-2);font-size:.85rem}
@media (max-width:768px){.admin-sidebar{width:64px;padding:1rem .5rem}.admin-sidebar .label,.admin-sidebar .brand__name{display:none}}