/* Pâtisserie: pistachio and raspberry, pastry-box scallops, every treat served on a plate. */
:root{
  --bg:#F5F6EE; --surface:#FFFFFF; --surface-2:#E9EEDB; --ink:#3B2218; --muted:#7A6457; --line:#DFE5CD;
  --accent:#C8245B; --on-accent:#fff; --accent-2:#6F8A2E; --ok:#13795B;
  --display:"Gloock",Georgia,serif; --body:"Nunito Sans",system-ui,sans-serif;
  --radius:22px; --radius-lg:32px; --shadow:0 26px 54px -30px rgba(59,34,24,.55);
}
[dir=rtl]{--display:"Reem Kufi","Geeza Pro",Tahoma,serif;--body:"Tajawal","Geeza Pro",Tahoma,sans-serif}
.logo-name{font-size:29px}
.kicker{color:var(--accent-2)}

/* scalloped edges, like the paper lace of a pastry box */
.badges,.foot{position:relative}
.badges{overflow:visible}
.badges::before,.foot::before{content:"";position:absolute;left:0;right:0;top:-13px;height:14px;background:radial-gradient(circle at 12px 14px,var(--ink) 11px,transparent 11.5px) 0 0/24px 14px repeat-x}
.badges::after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:14px;background:radial-gradient(circle at 12px 0,var(--ink) 11px,transparent 11.5px) 0 0/24px 14px repeat-x;z-index:1}
.badges .mq-row .ic{color:#F0B8CB}

/* hero */
.hero{background:radial-gradient(50% 60% at 90% 10%,#F8DDE6 0,transparent 70%)}
.hero-in{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(44px,6vw,84px)}
.hero-visual{position:relative;padding-bottom:40px}
.hero-photo{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:5/4.3;box-shadow:var(--shadow)}
.plate{aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 46%,#fff 0 56%,var(--surface-2) 56.5% 100%);box-shadow:var(--shadow),0 0 0 10px #fff}
.hero-visual .plate{position:absolute;width:38%;bottom:0;inset-inline-start:-6%;animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px) rotate(2deg)}}
.tag{position:absolute;background:var(--surface);border-radius:999px;padding:11px 18px;font-weight:800;font-size:14px;box-shadow:var(--shadow);max-width:62%}
.tag.t1{top:7%;inset-inline-start:-5%;transform:rotate(-4deg)}
.tag.t2{bottom:16%;inset-inline-end:-3%;transform:rotate(3deg);background:var(--accent);color:var(--on-accent)}

.pic{border-radius:var(--radius)}
.chip[aria-pressed=true]{background:var(--accent)}
.add{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}
.add:hover{background:var(--accent);color:var(--on-accent)}
.cart-btn{background:var(--accent)}
.cart-btn [data-count]{background:var(--ink)}
.badge.alt{background:var(--accent-2);color:#fff}

.about{background:var(--surface)}
.about-photo{border-radius:50% 50% var(--radius-lg) var(--radius-lg)/38% 38% var(--radius-lg) var(--radius-lg)}
.float-stat{border-radius:999px;padding:16px 26px;text-align:center}
.steps-in li{border-radius:var(--radius-lg);background:var(--surface-2);box-shadow:none}
.steps-in b{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font-size:22px}
.quote{border-radius:var(--radius-lg)}
.quote blockquote::before{content:"“";display:block;font-family:var(--display);font-size:60px;line-height:.6;color:var(--accent);margin-bottom:8px}
.gal figure{border-radius:var(--radius-lg)}
.cta-in{background:var(--accent)}
.cta-in::before{background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%)}
.foot{margin-top:14px}

@media (max-width:760px){
  .hero-in{grid-template-columns:1fr;gap:32px}
  .hero-visual{padding-bottom:30px}
  .hero-visual .plate{width:40%;inset-inline-start:-2%}
  .tag{font-size:12px;padding:8px 12px}
  .tag.t1{inset-inline-start:2%}.tag.t2{inset-inline-end:2%}
}