/* Responsive refinements shared by Arabic and English. */
html{scroll-padding-top:calc(var(--header-height,120px) + 16px)}
body{overflow-wrap:break-word}
header>*,.hero>*,.about>*,.branches>*,.section-heading>*,.product-grid>*,.occasion-grid>*{min-width:0}
img{max-width:100%}
.hero{max-width:1680px;margin-inline:auto;grid-template-columns:repeat(2,minmax(0,1fr))}
.section{padding-inline:max(6%,calc((100% - 1320px)/2));scroll-margin-top:0}
.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.occasion-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.hero-buttons{flex-wrap:wrap;gap:16px 24px}
.button,.filters button,header button,#navigation a,.product-card>a{min-height:44px}
#navigation a,.product-card>a{display:inline-flex;align-items:center}
.actions button{min-width:44px}
.slideshow-dots button{min-height:44px;width:28px}
.slideshow-toggle{min-height:44px}
.image-caption strong{font-size:clamp(20px,2.2vw,28px);line-height:1.45}
.occasion-cta .button{flex-shrink:0}
.ribbon{gap:clamp(12px,5vw,80px);flex-wrap:wrap}
summary{min-height:44px;line-height:1.65}
footer{flex-wrap:wrap}
footer>a{min-height:44px;display:inline-flex;align-items:center}
@media(min-width:901px) and (max-width:1200px){
  header{flex-wrap:wrap}
  #navigation{order:4;flex-basis:100%;justify-content:center}
  .hero-copy{padding:52px 9% 36px}
  h1{font-size:clamp(38px,4.2vw,52px)}
  .about,.branches{gap:40px}
  .occasion-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:12px 6%}
  header .brand{grid-column:1;grid-row:1}
  header .brand strong{font-size:clamp(15px,2.5vw,20px)}
  header .brand img{width:32px;height:42px}
  #menu{display:inline-flex;align-items:center;justify-content:center;gap:9px;grid-column:2;grid-row:1;appearance:none;-webkit-appearance:none;color:var(--brown);-webkit-text-fill-color:var(--brown);border:1px solid #af803e70;border-radius:8px;background:#eee5d7;padding:10px 13px;font-size:13px;font-weight:600;line-height:1.4;touch-action:manipulation}
  #menu::before{content:'';display:block;width:18px;height:14px;flex-shrink:0;background:linear-gradient(currentColor,currentColor) top/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) bottom/100% 2px no-repeat}
  #menu[aria-expanded=true]{background:#e8dcc8;border-color:var(--gold)}
  #menu[aria-expanded=true]::before{height:18px;background:linear-gradient(45deg,transparent 45%,currentColor 46%,currentColor 54%,transparent 55%),linear-gradient(-45deg,transparent 45%,currentColor 46%,currentColor 54%,transparent 55%)}
  header .actions{grid-column:1/-1;grid-row:2;margin:0;justify-content:space-between;gap:16px}
  header .actions .button{padding:10px 20px;font-size:13px}
  #navigation{display:none;grid-column:1/-1;grid-row:3;width:100%;max-height:50svh;overflow-y:auto;padding:8px 0;gap:4px 12px}
  #navigation.open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  #navigation a{font-size:14px;white-space:normal;border-bottom:1px solid #30261f16;padding:8px}
  #navigation a+a::before{content:none}
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-copy{padding:44px 7% 30px}
  h1{font-size:clamp(34px,6.5vw,56px);letter-spacing:-1px}
  .hero-copy p{max-width:650px;font-size:16px}
  .hero-visual,html[dir=ltr] .hero-visual{height:clamp(340px,60vw,500px);min-height:0;margin:0 6% 28px}
  .signature{margin-top:32px}
  .section{padding-block:64px}
  .about,.branches{grid-template-columns:minmax(0,1fr);gap:24px}
  .about p,.branches p{max-width:680px}
  .section-heading{align-items:start;gap:24px}
  .section-heading p{max-width:260px}
  .product-grid,.occasion-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .occasion-cta{flex-wrap:wrap}
  .hero-visual .image-caption{bottom:126px}
}
@media(max-width:600px){
  .section{padding-block:48px}
  h2{font-size:clamp(28px,7.5vw,38px);letter-spacing:-1px}
  .hero-copy{padding-top:32px}
  .hero-visual,html[dir=ltr] .hero-visual{height:380px}
  .eyebrow{font-size:10px;letter-spacing:1.4px;line-height:1.8;margin-bottom:16px}
  .hero-buttons{align-items:center;gap:12px 20px}
  .hero-buttons .button{padding:13px 18px}
  .hero-buttons .text-link{display:inline-flex;align-items:center;min-height:44px}
  .hero-visual .image-caption{inset-inline:20px;bottom:174px}
  .slideshow-controls{inset-inline:16px;bottom:16px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;justify-items:start}
  .slideshow-dots{display:grid;grid-template-columns:repeat(5,44px);gap:0}
  .slideshow-dots button{width:44px;height:44px}
  .slideshow-toggle{padding:10px 16px}
  .section-heading{display:block}
  .section-heading p{max-width:none}
  .product-grid,.occasion-grid{gap:28px 16px}
  .product-card h3,.occasions h3{font-size:17px;line-height:1.5}
  .product-card p,.occasions article p{font-size:13px}
  .product-card>a{font-size:13px}
  .filters{gap:8px}
  .filters button{font-size:12px;line-height:1.5;padding:10px 12px;max-width:100%}
  .ribbon{padding:18px 6%;column-gap:12px;font-size:10px;letter-spacing:1px}
  .ribbon i:last-of-type{display:none}
  .ribbon span:last-child{flex-basis:100%;text-align:center}
  .lead{font-size:20px}
  footer{justify-content:center;text-align:center;padding:24px 6%;gap:12px 24px}
  .contact .button{max-width:100%;font-size:13px;padding-inline:16px}
}
@media(max-width:360px){
  .product-grid,.occasion-grid{grid-template-columns:minmax(0,1fr)}
  .hero-copy h1{font-size:32px}
  .signature{font-size:9px;letter-spacing:1.6px}
}
@media(hover:none){.product-card:hover img,.occasions article:hover img{transform:none}}