:root{--ink:#755332;--muted:#8a7359;--gold:#ad7d32;--gold-text:#755332;--cream:#f8f5ef;--paper:#fffdf8}
html{overflow-x:hidden}
body{background:var(--paper);color:var(--ink);overflow-x:hidden}
.overlay,.size-modal,.age-modal,.cart-drawer,.image-lightbox{overscroll-behavior:contain}
[hidden]{display:none!important}
a,button{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:3px solid #755332;outline-offset:4px}
.royal-header{
  position:relative!important;
  height:174px;
  max-width:1440px;
  margin:auto;
  padding:18px 4%;
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  direction:rtl!important;
  border:0;
  background:transparent;
}
.royal-header .brand{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%, -50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:175px;
  height:165px;
  margin:0!important;
  flex-shrink:0;
  z-index:3!important;
}
.royal-header .brand:before{
  content:"";
  position:absolute;
  inset:-8px;
  background:radial-gradient(circle, rgba(255,250,238,0.75) 0%, rgba(255,244,220,0.38) 46%, transparent 72%);
  border-radius:50%;
  filter:blur(8px);
  pointer-events:none;
  z-index:-1;
}
.royal-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:contrast(1.08) drop-shadow(0 4px 12px rgba(45,22,5,0.28)) drop-shadow(0 1px 2px rgba(35,15,2,0.38));
}
.logo-sheen-mask{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
  overflow:hidden;
  -webkit-mask-image:url('assets/royal-logo.webp');
  -webkit-mask-size:contain;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-image:url('assets/royal-logo.webp');
  mask-size:contain;
  mask-position:center;
  mask-repeat:no-repeat;
}
.logo-sheen-mask:after{
  content:"";
  position:absolute;
  inset:-10%;
  background:linear-gradient(
    115deg,
    transparent 0%,
    transparent 32%,
    rgba(255,255,255,0.2) 43%,
    rgba(255,255,255,0.8) 50%,
    rgba(255,248,220,0.65) 54%,
    rgba(255,255,255,0.2) 60%,
    transparent 70%,
    transparent 100%
  );
  transform:translateX(140%);
  animation: logoSheenSlow 7s linear infinite !important;
  animation-duration: 7s !important;
}
@keyframes logoSheenSlow{
  0% { transform: translateX(140%); }
  58% { transform: translateX(-140%); }
  100% { transform: translateX(-140%); }
}
.royal-header .header-route.royal-plaque-btn{
  margin:0;
  text-decoration:none;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important;border-radius:0!important;
  cursor:pointer;
  transition:transform 0.25s ease, filter 0.25s ease!important;
  z-index:2;
  filter:drop-shadow(0 4px 10px rgba(50,25,5,0.35));
}
.royal-header .header-route.royal-plaque-btn:hover{
  transform:translateY(-2px) scale(1.02)!important;
  filter:drop-shadow(0 6px 18px rgba(212,167,85,0.6))!important;
}
.royal-header .header-route.royal-plaque-btn:active{transform:translateY(0) scale(0.98)!important}

.royal-plaque-bg,
.royal-plaque-img{
  display:block;
  height:48px;
  max-height:48px;
  width:auto;
  object-fit:contain;
  pointer-events:none;
}

.royal-plaque-text{
  position:absolute;
  right:16%;
  left:27%;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:"Cairo",sans-serif;
  font-weight:800;
  font-size:13.5px;
  color:#3b1e06;
  text-shadow:0 1px 0 rgba(255,243,210,0.85);
  white-space:nowrap;
  pointer-events:none;
  letter-spacing:-0.2px;
}
.royal-plaque-btn[aria-label="الرئيسية"] .royal-plaque-text{
  font-size:15px;
  font-weight:800;
  letter-spacing:0;
}

.royal-header .header-spacer{
  width:64px;
  min-width:64px;
  height:1px;
  visibility:hidden;
  pointer-events:none;
  flex-shrink:0;
}

/* Royal Crest Shopping Cart Buttons - Exact Royal Crest Medallion (Top Cart & Floating Cart) */
.royal-crest-btn{
  background:transparent!important;
  border:0!important;
  padding:0!important;
  margin:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease!important;
}

.royal-header #cartOpen.royal-crest-btn{
  grid-column:3;grid-row:1;justify-self:end;margin:0;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 4px 12px rgba(50,25,5,0.35));
}
.royal-header #cartOpen.royal-crest-btn:hover{
  transform:translateY(-2px) scale(1.04)!important;
  filter:drop-shadow(0 6px 20px rgba(212,167,85,0.65))!important;
}
.royal-header #cartOpen.royal-crest-btn:active{transform:translateY(0) scale(0.97)!important}

.royal-header #cartOpen .royal-crest-img{
  height:64px;
  max-height:64px;
  width:auto;
  display:block;
  object-fit:contain;
  pointer-events:none;
}

.royal-crest-wrap{
  position:relative;
  display:inline-block;
  line-height:0;
}

.royal-crest-badge{
  position:absolute!important;
  top:-3px!important;
  right:2px!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  min-width:20px!important;
  height:20px!important;
  padding:0 5px!important;
  box-sizing:border-box!important;
  background:radial-gradient(circle at 35% 35%, #ff4b4b 0%, #c41c1c 45%, #7a0c0c 85%, #3d0505 100%)!important;
  border:1.5px solid #ffe8b3!important;
  border-radius:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fffdf8!important;
  font-family:"Cairo",sans-serif!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1!important;
  box-shadow:0 2px 6px rgba(0,0,0,0.45), inset 0 1px 1px rgba(255,255,255,0.7)!important;
  pointer-events:none!important;
  z-index:5!important;
  transition:transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease!important;
}

.royal-crest-badge.is-empty,
.royal-crest-badge[data-count="0"]{
  display:none!important;
  transform:scale(0)!important;
  opacity:0!important;
  pointer-events:none!important;
}

.gold-button,.add-button{
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  transition:transform 0.25s ease, filter 0.25s ease;
}

.royal-ornament{display:block;width:100%;max-width:240px;height:auto;margin:6px auto 12px;filter:drop-shadow(0 1px 1px rgba(173,125,50,0.2))}
.section-ornament{margin:22px auto 10px}
.catalog-divider{margin:6px auto 16px}
.brand-slogan{font:700 26px/1.5 "Cairo",sans-serif;color:var(--ink);text-align:center;margin:4px auto 14px;padding:0 16px;letter-spacing:0.2px;text-shadow:0 1px 1px rgba(173,125,50,0.12)}
.brand-slogan:before,.brand-slogan:after{display:none!important}
.catalog-page .brand-slogan{font-size:20px;font-weight:600;margin-bottom:6px}

/* Hero Discover CTA - Centered under Slogan with Option A: Royal Gold Sheen */
.hero-cta-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:4px auto 26px;
  position:relative;
  z-index:5;
}
.hero-discover-btn{
  margin:0;
  text-decoration:none;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  box-shadow:none!important;
  cursor:pointer;
  filter:drop-shadow(0 6px 16px rgba(50,25,5,0.32));
  transition:transform 0.25s ease, filter 0.25s ease!important;
}
.hero-discover-btn:hover{
  transform:translateY(-2px) scale(1.03)!important;
  filter:drop-shadow(0 8px 22px rgba(212,167,85,0.65))!important;
}
.hero-discover-btn:active{
  transform:translateY(1px) scale(0.98)!important;
  filter:drop-shadow(0 3px 8px rgba(45,22,5,0.35))!important;
}
.hero-discover-btn .royal-plaque-bg{
  display:block;
  height:56px;
  max-height:56px;
  width:auto;
  pointer-events:none;
}
.hero-discover-content{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-left:38px;
  padding-right:20px;
  box-sizing:border-box;
  z-index:2;
  pointer-events:none;
  direction:rtl;
}
.hero-discover-text{
  font-family:"Cairo",sans-serif;
  font-size:14px;
  font-weight:800;
  color:#3b1e06;
  text-shadow:0 1px 0 rgba(255,243,210,0.85);
  white-space:nowrap;
  letter-spacing:-0.2px;
}

/* Sheen Layer precisely masked to the plaque shape */
.hero-sheen-mask{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  overflow:hidden;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  clip-path:polygon(18px 0%, calc(100% - 18px) 0%, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0% 50%)!important;
  -webkit-clip-path:polygon(18px 0%, calc(100% - 18px) 0%, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0% 50%)!important;
}
.hero-sheen-mask::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    110deg,
    transparent 0%,
    transparent 32%,
    rgba(255,255,255,0.25) 43%,
    rgba(255,255,255,0.85) 50%,
    rgba(255,245,210,0.7) 54%,
    rgba(255,255,255,0.25) 60%,
    transparent 70%,
    transparent 100%
  );
  transform:translateX(140%);
  animation: royalSheenSlow 6s linear infinite !important;
  animation-duration: 6s !important;
}
@keyframes royalSheenSlow{
  0% { transform: translateX(140%); }
  58% { transform: translateX(-140%); }
  100% { transform: translateX(-140%); }
}
.catalog-page .section-heading h2{font-size:28px;font-weight:700;margin:4px 0 6px}
.section{max-width:1360px;margin:auto;padding:20px 30px}
.collections{padding-top:0;padding-bottom:25px}
.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.royal-frame{position:relative;background:transparent!important;border:0!important;box-shadow:none!important}
.royal-frame:after{content:"";position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;transform:none;background:url('assets/royal-frame.webp') center/100% 100% no-repeat;pointer-events:none;z-index:2}
.category-card{display:flex;flex-direction:column;justify-content:flex-end;height:auto;aspect-ratio:2/3.5;padding:0 12% 5.5%;overflow:visible;text-align:center;border-radius:0;color:var(--ink)}
.category-photo{position:absolute;top:14%;left:10%;width:80%;height:69%;object-fit:cover;object-position:center;border-radius:46% 46% 0 0/15% 15% 0 0}
.category-content{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;background:#fcf8f0;width:100%;padding:10px 0 0;gap:8px}
.category-content strong{font-size:25px;line-height:1.4}
.category-btn-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  margin-top:4px;
  cursor:pointer;
  transition:transform 0.25s ease, filter 0.25s ease;
  filter:drop-shadow(0 4px 10px rgba(35,18,5,0.4));
}
.category-btn-img{
  display:block;
  width:180px;
  max-width:100%;
  height:auto;
  object-fit:contain;
  pointer-events:none;
}
.category-btn-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Cairo",sans-serif;
  font-weight:700;
  font-size:14.5px;
  color:#ffebd2;
  text-shadow:0 1.5px 3px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.6);
  letter-spacing:0.2px;
  pointer-events:none;
}
.category-card:hover .category-btn-wrap{
  transform:translateY(-2px) scale(1.03);
  filter:drop-shadow(0 6px 18px rgba(212,167,85,0.6));
}
.category-btn-wrap:active{transform:translateY(0) scale(0.98)}

.category-content .gold-button{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
  padding:2.5px!important;
  background:linear-gradient(135deg, #fff9e6 0%, #fbdc8e 20%, #d6a13d 50%, #96641e 75%, #502e09 100%)!important;
  clip-path:polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  filter:drop-shadow(0 4px 14px rgba(30,15,5,0.45));
  cursor:pointer;
  width:auto;min-width:150px;max-width:85%;
  min-height:38px;height:38px;
  margin:2px auto 0;box-sizing:border-box;
  transition:transform 0.25s ease, filter 0.25s ease!important;
}
.category-content .gold-button:hover,
.category-card:hover .category-content .gold-button{
  transform:translateY(-2px)!important;
  filter:drop-shadow(0 6px 20px rgba(212,167,85,0.6))!important;
}
.category-content .gold-button:active{transform:translateY(0)!important}
.category-content .gold-button .gold-button-inner{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:100%;padding:6px 22px;
  background:linear-gradient(180deg, #2b1507 0%, #1a0c03 55%, #0f0501 100%)!important;
  clip-path:polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  box-shadow:inset 0 0 0 1px #d4a755, inset 0 1px 2px rgba(255,240,200,0.4), inset 0 -2px 4px rgba(0,0,0,0.8)!important;
}
.category-content .gold-button .gold-button-text{
  font-family:"Cairo",sans-serif;font-weight:700;font-size:14px;
  color:#fae6b8!important;letter-spacing:0.3px;
  text-shadow:0 1px 2px rgba(0,0,0,0.9), 0 0 10px rgba(250,228,170,0.35)!important;
  white-space:nowrap;
}
.category-card:hover{transform:translateY(-3px)}
.section-heading{justify-content:center;text-align:center;margin-bottom:20px}
.section-heading h2{font-size:32px;color:var(--ink)}
.product-heading .eyebrow,.product-heading #allProducts{display:none}
.home-page .products-toolbar{display:none}
.home-page .products-grid{display:flex;direction:ltr;overflow-x:auto;gap:16px;scrollbar-width:thin;padding:10px 4px 20px;scroll-behavior:auto;overscroll-behavior-x:contain}
.home-page .product-card{direction:rtl;flex:0 0 210px;padding:48px 23px 20px}
.home-page .product-image{height:190px}
.home-page .product-info{padding-top:8px}
.home-page .product-title{font-size:14px}
.home-page .product-meta,.home-page .size-wrapper,.home-page .product-badge{display:none}
.featured-controls{display:flex;gap:10px;align-items:center;justify-content:center;direction:ltr}
.featured-controls button{background:transparent;border:1px solid #d6b67e;border-radius:20px;color:var(--ink);padding:7px 14px;cursor:pointer}
.catalog-page .featured-controls{display:none}
.catalog-page .products-section{padding-top:0}
.catalog-page .products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,335px));justify-content:center;gap:24px}
.product-card{padding:90px 34px 25px;align-self:stretch;display:flex;flex-direction:column;overflow:visible}
.product-image{height:290px;aspect-ratio:auto;width:100%;padding:0;display:flex;justify-content:center;align-items:center;background:transparent;border-radius:48% 48% 0 0/22% 22% 0 0;overflow:hidden;position:relative}
.product-thumb{width:100%;height:100%;object-fit:contain;position:static;transition:opacity .4s, transform .35s cubic-bezier(0.2, 0.8, 0.2, 1);border-radius:48% 48% 0 0/22% 22% 0 0;cursor:zoom-in}
.product-card:hover .product-thumb{transform:scale(1.03)}
.product-info{padding:12px 0 0;position:relative;z-index:3;display:flex;flex-direction:column;align-items:stretch;flex:1;background:#fcf9f2;text-align:center}
.product-title{font-size:17px;line-height:1.7;margin:0;color:var(--ink)}
.product-meta{font-size:11px;color:var(--muted);line-height:1.4;margin:1px 0}
.product-price{font-size:19px;justify-content:center;color:var(--ink);margin:6px 0}
.product-badge{display:none!important}

.product-info .add-button,
.home-page .add-button{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:5px 14px!important;
  background:linear-gradient(180deg, #fffcf2 0%, #fae6b2 20%, #eec86c 50%, #c89532 80%, #9e6d1b 100%)!important;
  border:1.5px solid #fae3aa!important;
  border-radius:20px!important;
  box-shadow:0 4px 12px rgba(60,35,10,0.25), inset 0 1px 1px rgba(255,255,255,0.9), inset 0 -1.5px 2px rgba(100,55,10,0.45)!important;
  cursor:pointer;
  width:auto;min-width:125px;max-width:150px;
  min-height:38px;height:38px;
  margin:auto auto 2px!important;
  box-sizing:border-box;
  transition:transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease!important;
}
.product-info .add-button:hover,
.home-page .add-button:hover{
  transform:translateY(-2px) scale(1.02)!important;
  box-shadow:0 6px 18px rgba(180,130,50,0.45), inset 0 1px 1px rgba(255,255,255,0.95)!important;
}
.product-info .add-button:active,
.home-page .add-button:active{transform:translateY(0) scale(0.98)!important}

.btn-pouch-img{
  width:20px;
  height:22px;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(40,15,5,0.45));
  flex-shrink:0;
  pointer-events:none;
}

.product-info .add-button-text,
.home-page .add-button-text{
  font-family:"Cairo",sans-serif;font-weight:800;font-size:13px;
  color:#2b1708!important;text-shadow:0 1px 0 rgba(255,255,255,0.7)!important;
  white-space:nowrap;
}
.royal-pouch-icon{vertical-align:middle;display:inline-block;flex-shrink:0;filter:drop-shadow(0 1px 1px rgba(40,20,5,0.4))}
.btn-cart-icon svg{vertical-align:middle;display:inline-block}

.size-wrapper{margin:8px 0}.size-picker{width:100%;border-color:#c3a16b;color:var(--ink);background:transparent;min-width:0}
.products-toolbar{border:0;padding:10px 0 18px;gap:12px;flex-wrap:wrap;background:transparent}
.category-tabs{gap:8px;flex-wrap:wrap}
.cat-tab{border:1px solid #c8a671;border-radius:24px;padding:9px 22px;color:var(--ink)}
.cat-tab.active{background:var(--gold);color:#fffaf0}
.toolbar-controls{flex-wrap:wrap;gap:10px}.search-box{max-width:280px}
.search-icon{font-size:14px}
.load-more{margin:30px auto;display:flex;background:transparent;color:var(--ink);min-width:190px}

/* Royal Crest Floating Cart Button - Strictly anchored to bottom-left with exact medallion */
#floatingCart.floating-cart.royal-crest-btn{
  position:fixed!important;
  left:24px!important;
  bottom:24px!important;
  right:auto!important;
  top:auto!important;
  width:auto!important;
  height:auto!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  z-index:9999!important;
  filter:drop-shadow(0 6px 16px rgba(40,20,5,0.45))!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(16px) scale(0.92)!important;
  transition:opacity 0.28s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.28s, filter 0.25s ease!important;
}
#floatingCart.floating-cart.royal-crest-btn.is-visible{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(0) scale(1)!important;
}
#floatingCart.floating-cart.royal-crest-btn.is-visible:hover{
  transform:translateY(-4px) scale(1.06)!important;
  filter:drop-shadow(0 10px 26px rgba(212,167,85,0.7))!important;
}
#floatingCart.floating-cart.royal-crest-btn.is-visible:active{transform:translateY(0) scale(0.97)!important}

/* Hide floating cart completely whenever cart drawer, overlay, or any modal is open */
body:has(.cart-drawer.show) #floatingCart,
body:has(.overlay.show) #floatingCart,
body:has(.size-modal.show) #floatingCart,
body:has(.image-lightbox.show) #floatingCart,
.cart-drawer.show ~ #floatingCart,
.overlay.show ~ #floatingCart,
.size-modal.show ~ #floatingCart {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(20px) scale(0.9) !important;
}

/* Ensure overlay and cart drawer always sit above any floating buttons */
.overlay {
  z-index: 10000 !important;
}
.cart-drawer {
  z-index: 10001 !important;
}
.size-modal,.age-modal {
  z-index: 10002 !important;
}
.size-modal,.age-modal {
  z-index: 10002 !important;
}

#floatingCart .royal-crest-img{
  height:86px;
  width:auto;
  display:block;
  object-fit:contain;
  pointer-events:none;
}

#floatingCart .royal-crest-badge{
  font-size:12px!important;
  border-width:1.8px!important;
  top:2px!important;
  right:0px!important;
  min-width:22px!important;
  height:22px!important;
}
footer{background:transparent;border-top:1px solid var(--line);padding:28px 7% 85px;color:var(--ink);justify-content:center;gap:20px}
footer a{font-family:'Playfair Display',serif;color:var(--gold);text-decoration:none}






.products-section{background:transparent}
.product-badge{order:0}
@supports not (aspect-ratio:2/3){.category-card{height:650px}.product-image{padding:0}.product-image img{position:static}.home-page .product-image{height:190px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.option-heading{font-size:15px;text-align:right;margin:14px 0 5px}
.size-modal{border:1px solid #ceb17c;border-radius:16px;background:#fffdf8;max-height:90vh;padding:20px 18px 14px;z-index:102}
.size-modal .eyebrow,.size-modal .modal-sub{display:none!important}
.size-modal .size-options{max-height:none!important;overflow:visible!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px}
.size-modal h2{font-size:20px;margin:2px 0 4px}
.size-product-name{padding:3px 12px;margin:3px auto 6px;font-size:12px;width:fit-content;border-radius:12px;background:#f5eedf;color:#6b5331}
.size-modal .option-heading{font-size:13px;text-align:right;margin:6px 0 4px}
.size-modal .size-choice{min-height:35px!important;padding:4px 2px!important;font-size:clamp(10px,2.8vw,12px)!important;line-height:1.2;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:6px}
#confirmSelection{width:100%;margin:8px 0 4px}.size-choice.selected{background:#ad7d32;color:#fffdf8}
#selectionMessage{font-size:13px;color:#915333;margin:8px 0}
#shopNotice{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:120;background:#755332;color:#fffdf8;border-radius:20px;padding:8px 20px;pointer-events:none}
#shopNotice:empty{display:none}
.cart-thumb{object-fit:contain;width:62px;height:76px}
.zoom-hint{display:none!important}
.sheet-status{text-align:center}
@media(max-width:850px){
  .royal-header{height:156px;padding:16px 20px}
  .royal-header .brand{width:145px;height:140px;position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%, -50%)!important;margin:0!important}
  .royal-header .header-route.royal-plaque-btn{margin:0}
  .royal-header .header-spacer{width:54px;min-width:54px}
  .royal-plaque-bg,
  .royal-plaque-img{height:40px;max-height:40px}
  .royal-plaque-text{right:16%;left:27%;font-size:11.5px;letter-spacing:-0.2px}
  .royal-plaque-btn[aria-label="الرئيسية"] .royal-plaque-text{font-size:13px}
  .royal-header #cartOpen.royal-crest-btn{margin:0}
  .royal-header #cartOpen .royal-crest-img{height:54px;max-height:54px}
  .brand-slogan{font-size:23px;margin:4px auto 14px}.catalog-page .brand-slogan{font-size:18px}.royal-ornament{max-width:220px}
  .hero-cta-wrap{margin:4px auto 22px}
  .hero-discover-btn .royal-plaque-bg{height:50px;max-height:50px}
  .hero-discover-content{padding-left:34px;padding-right:18px}
  .hero-discover-text{font-size:13px}
  .section{padding:15px}.category-grid{gap:8px}.category-card{aspect-ratio:2/3.4;padding:0 12% 6%}
  .category-content strong{font-size:19px}
  .category-btn-img{width:160px}
  .category-btn-text{font-size:13.5px}
  .category-content .gold-button{padding:2px!important;min-height:35px;height:35px;max-width:85%;border-radius:0!important}
  .category-content .gold-button .gold-button-inner{padding:5px 14px}
  .category-content .gold-button .gold-button-text{font-size:13px}
  .catalog-page .products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .product-card{padding-top:78px}.product-image{height:240px}
}
@media(max-width:540px){
  .royal-header{
    height:142px;
    padding:8px 16px!important;
    display:flex!important;
    justify-content:space-between!important;
    align-items:center!important;
    direction:rtl!important;
  }
  .royal-header .brand{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%, -50%)!important;
    width:132px;
    height:125px;
    margin:0!important;
    flex-shrink:0;
    z-index:3!important;
  }
  .royal-header .header-route.royal-plaque-btn{
    margin:0;
    flex-shrink:0;
  }
  .royal-header .header-spacer{
    width:50px;
    min-width:50px;
  }
  .royal-plaque-bg,
  .royal-plaque-img{
    height:36px;
    max-height:36px;
    width:auto;
  }
  .royal-plaque-text{
    right:16%;
    left:27%;
    font-size:10px;
    letter-spacing:-0.2px;
  }
  .royal-plaque-btn[aria-label="الرئيسية"] .royal-plaque-text{
    font-size:11.5px;
  }
  .royal-header #cartOpen.royal-crest-btn{
    margin:0;
    flex-shrink:0;
  }
  .royal-header #cartOpen .royal-crest-img{
    height:50px;
    max-height:50px;
    width:auto;
  }
  .royal-header #cartOpen .royal-crest-badge{
    font-size:10px!important;
    min-width:18px!important;
    height:18px!important;
    border-width:1.2px!important;
    top:-2px!important;
    right:2px!important;
  }
  .brand-slogan{font-size:20px;line-height:1.5;margin:3px auto 10px;padding:0 12px}.catalog-page .brand-slogan{font-size:16px;margin-bottom:4px}.catalog-page .section-heading h2{font-size:24px}.royal-ornament{max-width:190px;margin:4px auto 10px}.section-ornament{margin:18px auto 10px}.catalog-divider{margin:3px auto 14px}
  .hero-cta-wrap{margin:3px auto 18px}
  .hero-discover-btn .royal-plaque-bg{height:46px;max-height:46px}
  .hero-discover-content{padding-left:32px;padding-right:16px}
  .hero-discover-text{font-size:12px}
  .category-grid{grid-template-columns:1fr;max-width:350px;margin:auto;gap:18px}.category-card{aspect-ratio:2/3.3;padding:0 12% 5.5%;height:auto}
  .category-content strong{font-size:20px}
  .category-btn-img{width:148px}
  .category-btn-text{font-size:13px}
  .category-photo{height:69%}
  .section-heading h2{font-size:26px}.catalog-page .section-heading{margin-bottom:12px}
  .product-card{padding:54px 22px 20px}.product-image{height:155px}.product-title{font-size:12px}.product-meta{display:block;font-size:11px;color:var(--muted);line-height:1.4;margin:1px 0}.product-price{font-size:15px}
  .product-info .add-button,
  .home-page .add-button{padding:4px 10px!important;min-height:33px;height:33px;width:auto;max-width:130px;min-width:105px;margin:auto auto 2px!important}
  .btn-pouch-img{width:17px;height:19px}
  .product-info .add-button-text,
  .home-page .add-button-text{font-size:11.5px}
  .size-picker{font-size:11px;padding:7px 4px}
  

  .home-page .product-card{flex-basis:190px;padding:48px 22px 20px}.home-page .product-image{height:170px}
  .cat-tab{font-size:12px;padding:8px 15px}.toolbar-controls{width:100%;justify-content:center}.category-tabs{justify-content:center;width:100%}.search-box{width:100%;max-width:none}
  .size-modal{top:50%;bottom:auto;left:50%;width:calc(100% - 24px);max-height:92vh;transform:translate(-50%,-50%);border-radius:16px;padding:16px 14px 12px}
  .size-modal.show{transform:translate(-50%,-50%)}.size-modal .size-options{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-height:none!important;overflow:visible!important;gap:5px}
  #floatingCart.floating-cart.royal-crest-btn{left:16px!important;bottom:18px!important;right:auto!important;top:auto!important}
  #floatingCart .royal-crest-img{height:72px}
  #floatingCart .royal-crest-badge{
    font-size:11px!important;
    border-width:1.5px!important;
    top:2px!important;
    right:0px!important;
    min-width:20px!important;
    height:20px!important;
  }
}
@media(prefers-reduced-motion:reduce){.shine,.royal-logo{animation:none}.category-card,.product-thumb,.gold-button{transition:none}}

.image-error{position:absolute;inset:35% 10% auto;text-align:center;font-size:12px}

.size-modal h2{margin:2px 0 4px;font-size:19px}.size-modal .eyebrow,.size-modal .modal-sub{display:none!important}.size-product-name{padding:3px 12px;margin:3px auto 6px;font-size:12px}.size-modal .size-options{max-height:none!important;overflow:visible!important}.size-modal-note{display:block;margin:4px 0 0;font-size:10.5px}.size-modal .close-button{top:10px;left:10px}
@media(max-width:540px){.size-modal{padding:16px 12px 12px}.size-modal h2{font-size:18px}.size-modal .size-options{max-height:none!important;overflow:visible!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px}.size-modal .option-heading{margin:6px 0 4px;font-size:12px}.size-modal .size-choice{min-height:34px!important;padding:4px 2px!important;font-size:11px!important}}

.cart-drawer{visibility:hidden;pointer-events:none}.cart-drawer.show{visibility:visible;pointer-events:auto}

/* Calm animations and exact royal proportions */
.shine{animation:none!important}
.royal-logo{animation-duration:8s}
.category-card{aspect-ratio:2/3.1;padding:0 12% 5.5%}
.category-photo{top:19%;left:9%;width:82%;height:61%;object-fit:contain;border-radius:0;background:#f8f2e7}
.category-content{padding-top:8px;gap:7px;background:#fcf8f0}
.catalog-page .product-card{max-width:340px;width:100%;margin:0 auto;padding:42px 22px 18px}
.catalog-page .product-image{
  height:350px;
  width:100%;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  position:relative!important;
}
.catalog-page .product-image::after{
  content:"";
  position:absolute;
  bottom:0;
  left:18%;
  right:18%;
  height:10px;
  background:radial-gradient(ellipse at center, rgba(50, 32, 14, 0.22) 0%, rgba(70, 44, 20, 0.08) 55%, transparent 75%);
  pointer-events:none;
  border-radius:50%;
  z-index:1;
}
.product-image{border-radius:48% 48% 0 0/22% 22% 0 0;overflow:hidden;background:transparent}
.product-image img,.product-thumb{border-radius:48% 48% 0 0/22% 22% 0 0;padding:0;object-fit:contain!important;object-position:center bottom!important}
.product-info{background:transparent;padding-top:4px!important;gap:2px}
.product-badge{display:none!important}
.product-price{margin:3px 0;line-height:1.6;white-space:normal}
.product-info .size-wrapper{display:none}

.home-page .product-card{flex-basis:230px;padding:46px 20px 18px}
.home-page .product-image{height:225px;display:flex!important;align-items:flex-end!important;justify-content:center!important;position:relative!important}
.home-page .product-image::after{
  content:"";
  position:absolute;
  bottom:0;
  left:18%;
  right:18%;
  height:9px;
  background:radial-gradient(ellipse at center, rgba(50, 32, 14, 0.20) 0%, rgba(70, 44, 20, 0.06) 55%, transparent 75%);
  pointer-events:none;
  border-radius:50%;
  z-index:1;
}
.home-page .products-grid{overflow-anchor:none}
@media(max-width:850px){.category-card{aspect-ratio:2/3.4;padding:0 12% 5.5%}.catalog-page .product-card{padding:36px 16px 16px}.catalog-page .product-image{height:290px}}
@media(max-width:540px){
 .category-card{aspect-ratio:2/3.1;padding:0 12% 5.5%}.category-photo{top:19%;height:61%}
 .catalog-page .products-grid{gap:8px}.catalog-page .product-card{padding:22px 10px 10px}
 .catalog-page .product-image{height:auto!important;aspect-ratio:3/4!important;width:100%!important;display:flex!important;align-items:flex-end!important;justify-content:center!important}
 .catalog-page .product-image img,.catalog-page .product-thumb{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important}
 .product-info{gap:1px;padding-top:3px}
 .product-title{font-size:12px;line-height:1.3}.product-badge{display:none!important}
 .product-meta{display:block;font-size:10px;color:var(--muted);line-height:1.2;margin:1px 0}
 .product-price{font-size:14px;margin:2px 0}
 .home-page .product-card{flex-basis:185px;padding:26px 10px 12px}.home-page .product-image{height:auto!important;aspect-ratio:3/4!important;width:100%!important;display:flex!important;align-items:flex-end!important;justify-content:center!important}
 .catalog-page .products-toolbar{padding-bottom:8px}.catalog-page .products-grid{margin-top:0}
}

.category-photo{top:14%;height:66%;object-fit:cover;object-position:center 55%;border-radius:46% 46% 0 0/15% 15% 0 0}

/* Fill the opening behind the ornamental arch, including its apex. */
.category-photo{top:10%;height:70%;left:9%;width:82%;border-radius:50% 50% 0 0/20% 20% 0 0}
.category-content,.product-info,.product-title,.product-meta,.product-price,.product-badge{background:transparent!important;box-shadow:none!important}
.category-content,.product-info{border:0!important}
.home-page .products-grid{scroll-behavior:auto!important}

/* ========================================================
   Royal Add to Cart Animation
   ======================================================== */
.royal-add-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 280px;
  height: 48px;
  background: linear-gradient(135deg, #fff7df 0%, #fad88a 25%, #d19a3b 50%, #875718 80%, #56330c 100%) !important;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  filter: drop-shadow(0 5px 14px rgba(60, 35, 10, 0.35)) !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  overflow: visible !important;
  user-select: none;
  padding: 2.5px !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  margin: 12px auto 6px !important;
  transition: transform 0.25s ease, filter 0.25s ease !important;
}
.royal-add-btn:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 7px 18px rgba(180, 130, 50, 0.5)) !important;
}
.royal-add-btn:active {
  transform: scale(0.98);
}

.royal-add-btn .btn-pill {
  position: absolute;
  inset: 2.5px;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  border-radius: 0 !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fffcf2 0%, #fae6b2 20%, #eec86c 50%, #c89532 80%, #9e6d1b 100%) !important;
  border: 0 !important;
  box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.95), inset 0 -2px 3px rgba(100, 55, 10, 0.5) !important;
}

.checkout {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  padding: 2.5px !important;
  background: linear-gradient(135deg, #fff7df 0%, #fad88a 25%, #d19a3b 50%, #875718 80%, #56330c 100%) !important;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px) !important;
  filter: drop-shadow(0 5px 14px rgba(60, 35, 10, 0.35)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
  height: 48px !important;
  cursor: pointer !important;
  transition: transform 0.25s ease, filter 0.25s ease !important;
}
.checkout:hover {
  transform: translateY(-2px) !important;
  filter: drop-shadow(0 7px 18px rgba(180, 130, 50, 0.5)) !important;
}
.checkout:active {
  transform: translateY(0) !important;
}
.checkout .checkout-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 8px 20px;
  background: linear-gradient(180deg, #fffcf2 0%, #fae6b2 20%, #eec86c 50%, #c89532 80%, #9e6d1b 100%);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.95), inset 0 -2px 3px rgba(100, 55, 10, 0.5);
  font-family: "Cairo", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #2b1708;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.royal-add-btn .btn-cart-track {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  right: 22px;
  top: 50%;
  margin-top: -16px;
  transition: transform 0.2s, opacity 0.2s;
}
.royal-add-btn .cart-svg {
  width: 26px;
  height: 26px;
  stroke: #2e1a0b;
  fill: none;
  overflow: visible;
}

.royal-add-btn .bag-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.royal-add-btn .btn-bag-drop {
  position: absolute;
  width: 20px;
  height: 24px;
  top: -20px;
  left: 50%;
  margin-left: -10px;
  pointer-events: none;
  opacity: 0;
  z-index: 10;
}

.royal-add-btn .btn-bag-ride {
  position: absolute;
  width: 20px;
  height: 24px;
  top: -4px;
  left: 50%;
  margin-left: -9px;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}

.royal-add-btn .btn-label-text,
.royal-add-btn .btn-label-added {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: opacity 0.25s, transform 0.25s;
}
.royal-add-btn .btn-label-text {
  right: 60px;
  opacity: 1;
  transform: scale(1);
  font-size: 15px;
  font-weight: 800;
  color: #2b1708 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.royal-add-btn .btn-label-added {
  opacity: 0;
  transform: scale(0.8);
  font-size: 15px;
  font-weight: 800;
  color: #2b1708 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  left: 0;
  right: 0;
  margin: auto;
}

.royal-add-btn[data-state="adding"] {
  pointer-events: none;
}
.royal-add-btn[data-state="adding"] .btn-label-text {
  opacity: 0;
  transform: scale(0.7);
}
.royal-add-btn[data-state="adding"] .btn-cart-track {
  animation: royal-cart-glide 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.royal-add-btn[data-state="adding"] .btn-bag-drop {
  animation: royal-bag-drop 2.2s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}
.royal-add-btn[data-state="adding"] .btn-bag-ride {
  animation: royal-bag-ride 2.2s ease forwards;
}
.royal-add-btn[data-state="adding"] .cart-svg {
  animation: royal-cart-impact 2.2s ease forwards;
}

.royal-add-btn[data-state="added"] .btn-label-text {
  opacity: 0;
  transform: scale(0.7);
}
.royal-add-btn[data-state="added"] .btn-label-added {
  opacity: 1;
  transform: scale(1);
}
.royal-add-btn[data-state="added"] .btn-cart-track {
  opacity: 0;
}

@keyframes royal-cart-glide {
  0% { transform: translateX(0); }
  18%, 50% { transform: translateX(-102px); }
  54% { transform: translateX(-102px); }
  76% { transform: translateX(-310px); animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.4); }
  76.1% { transform: translateX(100px); }
  94%, 100% { transform: translateX(0); }
}

@keyframes royal-bag-drop {
  0%, 18% { opacity: 0; transform: translateY(-15px) scale(0.7); }
  26% { opacity: 1; transform: translateY(-2px) scale(1); }
  46% { opacity: 1; transform: translateY(33px) scale(1); }
  48% { opacity: 0; transform: translateY(33px) scale(1); }
  100% { opacity: 0; transform: translateY(-20px); }
}

@keyframes royal-bag-ride {
  0%, 47% { opacity: 0; transform: scale(0.9); }
  48% { opacity: 1; transform: scale(1); }
  76% { opacity: 1; }
  76.1%, 100% { opacity: 0; }
}

@keyframes royal-cart-impact {
  0%, 42% { transform: scale(1) translateY(0); }
  46% { transform: scale(1.15, 0.85) translateY(3px); }
  51% { transform: scale(0.95, 1.05) translateY(-2px); }
  56%, 100% { transform: scale(1) translateY(0); }
}

.cart-bump {
  animation: royal-cart-pop 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes royal-cart-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.45); filter: drop-shadow(0 0 8px #fae5b2); }
  100% { transform: scale(1); }
}

.cart-glow {
  animation: royal-cart-glow 0.8s ease-out !important;
}
@keyframes royal-cart-glow {
  0% { box-shadow: 0 0 0 0 rgba(250, 226, 168, 0.95), 0 8px 24px rgba(70, 38, 8, 0.45); }
  50% { box-shadow: 0 0 0 18px rgba(250, 226, 168, 0), 0 8px 24px rgba(70, 38, 8, 0.45); }
  100% { box-shadow: 0 0 0 0 rgba(250, 226, 168, 0), 0 8px 24px rgba(70, 38, 8, 0.45); }
}


/* =========================================================================
   Royal Video Entrance Screen (Shahrazad Intro Portal - Cinematic Edition)
   ========================================================================= */
html.intro-active,
html.intro-active body {
  overflow: hidden !important;
  height: 100% !important;
  touch-action: none;
}

html.intro-seen .royal-intro-overlay {
  display: none !important;
}

.royal-intro-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 999999;
  background: #060402;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s;
  visibility: visible;
}

.royal-intro-overlay.fade-out {
  opacity: 0;
  transform: scale(1.06);
  visibility: hidden;
  pointer-events: none;
}

.royal-intro-video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0c0805;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Intro Video: Full edge-to-edge native cover on all screens */
.royal-intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

@media (min-width: 768px) {
  .royal-intro-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center;
  }
}

@media (max-width: 767px) {
  .royal-intro-video {
    object-position: center;
  }
}

.royal-intro-video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05) 0%,
    transparent 45%,
    rgba(14, 10, 6, 0.2) 75%,
    rgba(14, 10, 6, 0.65) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.royal-intro-content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Compact, delicate luxury pill button */
.royal-intro-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto !important;
  max-width: fit-content !important;
  padding: 8px 24px !important;
  border-radius: 999px;
  border: 1.2px solid rgba(255, 248, 220, 0.9);
  background: linear-gradient(135deg, #dfbc4b 0%, #fff4c6 40%, #d4af37 70%, #9e6f1a 100%);
  color: #241708;
  font-family: "Cairo", sans-serif;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
  animation: royalIntroPulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

@keyframes royalIntroPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(223, 188, 75, 0.75), 0 4px 18px rgba(212, 175, 55, 0.45);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(223, 188, 75, 0), 0 6px 26px rgba(255, 225, 120, 0.8);
    transform: scale(1.035);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(223, 188, 75, 0), 0 4px 18px rgba(212, 175, 55, 0.45);
    transform: scale(1);
  }
}

.royal-intro-btn:hover {
  animation: none;
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 8px 28px rgba(212, 175, 55, 0.75), 0 3px 10px rgba(0, 0, 0, 0.45);
}

.royal-intro-btn:active {
  animation: none;
  transform: translateY(1px) scale(0.97);
}

.royal-intro-btn-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.7) 50%,
    transparent 100%
  );
  transform: translateX(-150%);
  animation: introBtnShimmer 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes introBtnShimmer {
  0% { transform: translateX(-150%); }
  50%, 100% { transform: translateX(150%); }
}

.royal-intro-btn-text {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

@media (max-width: 540px) {
  .royal-intro-content {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .royal-intro-btn {
    font-size: 12px !important;
    padding: 7px 18px !important;
    border-width: 1px;
  }
}

/* ==========================================================================
   Royal Clean Lightbox (معاينة الصورة الملكية بتصميم فاخر وأنيق)
   ========================================================================== */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(14, 10, 7, 0.88) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  overscroll-behavior: contain;
}

.image-lightbox.show {
  opacity: 1 !important;
  visibility: visible !important;
}

.lightbox-stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fdfaf5 !important; /* بيج ملكي ناعم ودافئ */
  border: 1.5px solid var(--border-gold, #c99a49);
  border-radius: 20px;
  padding: 24px 20px 18px;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(201, 154, 73, 0.35);
  animation: royalModalPop .25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-sizing: border-box;
}

@keyframes royalModalPop {
  0% { transform: scale(0.92) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* زر إغلاق اللايت بوكس: واضح وبارز في الركن بتباين عالي */
.lightbox-close {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 50;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #2a1e14;
  border: 1.5px solid var(--border-gold, #c99a49);
  color: #fae5b2;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transition: background .2s, transform .2s, color .2s;
  padding: 0;
}

.lightbox-close:hover {
  background: var(--gold, #ad7d32);
  color: #ffffff;
  transform: scale(1.1);
}

/* حاوية الصورة الملكية وتوسيطها التام */
.lightbox-image-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  max-height: min(62vh, 480px);
  position: relative;
}

.image-lightbox img,
#lightboxImage {
  display: block;
  max-width: 100%;
  max-height: min(62vh, 480px);
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 22px rgba(45, 30, 15, 0.18));
  transition: opacity .2s ease;
}

/* ==========================================================================
   Color Variants & Multi-Color Storefront Styles
   ========================================================================== */

/* Reserve title height for symmetry across colored and regular cards */
.product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  line-height: 1.3;
}

/* Color slides stacked inside .product-image */
.product-image .color-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 48% 48% 0 0 / 22% 22% 0 0 !important;
  pointer-events: auto;
}

/* Modal color preview arch container */
@media (prefers-reduced-motion: reduce) {
  .product-image .color-slide { transition: none; }
}

.modal-color-preview-wrap {
  width: 100%;
  max-width: 180px;
  height: min(22vh, 180px);
  margin: 6px auto 8px;
  position: relative;
  border-radius: 48% 48% 0 0 / 22% 22% 0 0;
  overflow: hidden;
  background: transparent;
  cursor: zoom-in;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-color-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  transition: opacity 0.3s ease;
}

.modal-zoom-hint {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(30, 24, 18, 0.7);
  color: var(--gold-light, #fae5b2);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  pointer-events: none;
}

/* Modal color selector section */
.modal-color-section {
  margin: 4px 0 8px;
  text-align: center;
}

.color-label {
  font-size: 12px;
  color: var(--ink, #755332);
  margin-bottom: 6px;
  font-weight: 600;
}

.color-label strong {
  color: var(--gold, #ad7d32);
  font-weight: 700;
}

.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  max-height: 115px;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
}

.color-swatch-btn {
  width: 48px;
  height: 48px;
  min-width: 44px;
  min-height: 44px;
  padding: 2px;
  border-radius: 8px;
  border: 1.5px solid var(--border-gold, #c99a49);
  background: #fffdf8;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.color-swatch-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.color-swatch-btn.is-selected,
.color-swatch-btn[aria-checked="true"] {
  border: 2.5px solid var(--gold, #ad7d32);
  box-shadow: 0 0 0 2px rgba(173, 125, 50, 0.35);
  transform: scale(1.08);
}

.color-swatch-btn:focus-visible {
  outline: 2px solid var(--gold, #ad7d32);
  outline-offset: 2px;
}

/* Modal price display */
.modal-price-wrap {
  margin: 8px 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-heading, #38281b);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.modal-price-wrap .old-price {
  font-size: 13px;
  color: var(--muted, #8a7359);
  text-decoration: line-through;
  font-weight: 400;
}

/* Lightbox Gallery Navigation & Swatches */
.lightbox-nav {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #2a1e14;
  border: 1.5px solid var(--border-gold, #c99a49);
  color: #fae5b2;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 40;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: background 0.2s, transform 0.2s, color 0.2s;
  user-select: none;
  padding: 0;
}

.lightbox-prev {
  right: -22px;
}

.lightbox-next {
  left: -22px;
}

.lightbox-nav:hover {
  background: var(--gold, #ad7d32);
  color: #ffffff;
  transform: translateY(-50%) scale(1.1);
}

.lightbox-bottom {
  margin-top: 14px;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  width: 100%;
  max-width: 100%;
}

.lightbox-color-name {
  font-family: 'Cairo', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-heading, #38281b);
  letter-spacing: 0.3px;
  text-align: center;
}

.lightbox-swatches-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  overflow-x: auto;
  max-width: 100%;
  padding: 4px 6px;
  scrollbar-width: thin;
  touch-action: pan-x;
}

.lightbox-thumb-btn,
.lightbox-swatch {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 10px;
  border: 2px solid #e2d5c3;
  background: #ffffff;
  padding: 2px;
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.lightbox-thumb-btn img,
.lightbox-swatch img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.lightbox-thumb-btn.is-selected,
.lightbox-swatch.is-selected {
  border-color: var(--gold, #ad7d32);
  box-shadow: 0 0 0 2.5px rgba(173, 125, 50, 0.45);
  transform: scale(1.1);
}

/* Mobile responsive adjustments */
@media (max-width: 540px) {
  .lightbox-stage {
    max-width: 94vw;
    padding: 22px 14px 14px;
  }
  .lightbox-close {
    top: 8px;
    left: 8px;
    width: 34px;
    height: 34px;
    font-size: 20px;
  }
  .lightbox-prev {
    right: 6px;
    width: 38px;
    height: 38px;
    font-size: 22px;
  }
  .lightbox-next {
    left: 6px;
    width: 38px;
    height: 38px;
    font-size: 22px;
  }
  .lightbox-thumb-btn,
  .lightbox-swatch {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
  .color-swatch-btn {
    width: 46px;
    height: 46px;
    min-width: 44px;
    min-height: 44px;
  }
  .modal-color-preview-wrap {
    height: min(20vh, 160px);
  }
}

/* Keep panel back gestures in the page, without browser horizontal overscroll. */
html.panel-navigation-open,html.panel-navigation-open body{overscroll-behavior-x:none}

/* Contact shadows are rendered with the model; a second fixed shadow makes it float. */
.home-page .product-image::after,.catalog-page .product-image::after{content:none!important}

/* Optional product copy appears only inside its details popup. */
.size-product-description{margin:10px 0 12px;padding:0 4px;color:var(--gold-text,#755332);font:400 13px/1.9 Cairo,sans-serif;text-align:right;white-space:pre-line;overflow-wrap:anywhere}
.size-product-description[hidden]{display:none!important}

/* Keep the ornamental header crests transparent over the palace artwork. */
.royal-header .royal-crest-btn{
  position:relative;
  z-index:4;
  flex-shrink:0;
  text-decoration:none;
}
.royal-header .royal-crest-wrap{
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.royal-header .royal-crest-wrap::before{
  content:none;
}
.royal-header .royal-crest-btn .royal-crest-img,
.royal-header #cartOpen .royal-crest-img{
  display:block;
  height:88px;
  max-height:88px;
  width:auto;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 2px 2px rgba(50,25,5,.3));
}
.royal-header .header-route.royal-crest-btn:hover{
  transform:translateY(-2px) scale(1.04);
}
.royal-header .header-route.royal-crest-btn:active{
  transform:scale(.97);
}
@media(max-width:850px){
  .royal-header .royal-crest-btn .royal-crest-img,
  .royal-header #cartOpen .royal-crest-img{height:76px;max-height:76px}
}
@media(max-width:540px){
  .royal-header .royal-crest-btn .royal-crest-img,
  .royal-header #cartOpen .royal-crest-img{height:68px;max-height:68px}
}