/* STN Warsha — CSS that cannot travel through Breakdance's stylesheet importer.
   The design system itself (site.css) is pushed with insert-stylesheet; this file only adds:
   1) accessibility: honour the phone's "reduce motion" setting
   2) hover-only effects limited to devices that can hover
   3) the colour map that turns APF colour choices into circles (free APF has no colour swatches) */

/* 1) Reduce motion: stop marquee, floating shapes, Breakdance entrance animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .mq-track, .float, .float-slow { animation: none !important; transform: none !important; }
  [data-entrance], .bde-animate, .breakdance [class*="animate"] { opacity: 1 !important; transform: none !important; }
}

/* 2) Hover effects only where a pointer can hover (no sticky hover on phones) */
@media (hover: none) {
  .ctile:hover, .prow ul.products li.product:hover, .cat-link:hover { transform: none; box-shadow: none; }
  .gal-item:hover .gal-img { transform: none; }
}

/* 3) Swatch colour map. APF option values are the colour names chosen from the template's fixed list.
   Exact APF markup is confirmed at build (preview-element); the selector targets the radio's value. */
.wapf-swatches label { --c: var(--line, #ddd); }
.wapf-swatches label:has(input[value="أزرق ملكي"]), .wapf-swatches label:has(input[value="royal-blue"]) { --c: #1F4FD8; }
.wapf-swatches label:has(input[value="أبيض"]), .wapf-swatches label:has(input[value="white"]) { --c: #FFFFFF; }
.wapf-swatches label:has(input[value="أسود"]), .wapf-swatches label:has(input[value="black"]) { --c: #1B1B1B; }
.wapf-swatches label:has(input[value="أحمر"]), .wapf-swatches label:has(input[value="red"]) { --c: #D33A2C; }
.wapf-swatches label:has(input[value="أصفر"]), .wapf-swatches label:has(input[value="yellow"]) { --c: #F5C518; }
.wapf-swatches label:has(input[value="أخضر"]), .wapf-swatches label:has(input[value="green"]) { --c: #3BAA5C; }
.wapf-swatches label:has(input[value="وردي"]), .wapf-swatches label:has(input[value="pink"]) { --c: #F29BBF; }
.wapf-swatches label:has(input[value="ذهبي"]), .wapf-swatches label:has(input[value="gold"]) { --c: #C9A227; }

/* ---------- storefront UI driven by assets/js/warsha-ui.js ---------- */
/* phone menu drawer (the header's category nav, opened from the inline-start side) */
.stn-backdrop { position: fixed; inset: 0; z-index: 999; background: color-mix(in srgb, var(--ink, #22303F) 45%, transparent); opacity: 0; visibility: hidden; transition: opacity .26s ease-out, visibility .26s; }
html.stn-menu-open .stn-backdrop { opacity: 1; visibility: visible; }
@media (max-width: 1023px) {
  html.stn-menu-open .hdr-nav-wrap { display: block; position: fixed; inset-block: var(--wp-admin--admin-bar--height, 0px) 0; inset-inline-start: 0; z-index: 1000; width: min(84vw, 320px); padding: 24px; overflow-y: auto; background: var(--paper, #fff); box-shadow: var(--shadow); animation: stn-drawer-in .26s ease-out; }
  html.stn-menu-open .hdr-nav-wrap .hdr-nav { flex-direction: column; gap: 4px; overflow: visible; }
  html.stn-menu-open .hdr-nav-wrap .hdr-nav-link { display: flex; align-items: center; min-height: 48px; padding-inline: 12px; border-radius: 12px; font-size: 16px; font-weight: 800; }
  html.stn-menu-open .hdr-nav-wrap .hdr-nav-link:hover { background: var(--tint); }
  html.stn-menu-open { overflow: hidden; }
  /* the header's backdrop-filter would make it the drawer's containing block; lift it over the backdrop */
  html.stn-menu-open .hdr { backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 1001; }
}
@keyframes stn-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
/* LTR stores (English): the drawer sits on the left, so it slides in from the left. */
@keyframes stn-drawer-in-ltr { from { transform: translateX(-100%); } to { transform: none; } }
html:not([dir="rtl"]).stn-menu-open .hdr-nav-wrap { animation-name: stn-drawer-in-ltr; }

/* Mini cart: the Breakdance element is set to slide in from the left (inline-end in Arabic).
   In LTR stores, move it to the right, next to the cart icon, and slide it in from there. */
html:not([dir="rtl"]) .hdr-cart .bde-mini-cart-offcanvas-body { left: auto !important; right: 0 !important; }
html:not([dir="rtl"]) .hdr-cart .bde-mini-cart-offcanvas:not(.bde-mini-cart-offcanvas--active) .bde-mini-cart-offcanvas-body { --cart-translate-3d: 100%, 0, 0 !important; }

/* Checkout: governorate and city side by side (the Breakdance rule left them pinned to the last grid column). */
.checkout-page #billing_state_field, .checkout-page #shipping_state_field { grid-column: auto / span 1 !important; order: 4; }
.checkout-page #billing_city_field, .checkout-page #shipping_city_field { grid-column: auto / span 1 !important; order: 5; }
@media (max-width: 479px) {
  .checkout-page #billing_state_field, .checkout-page #shipping_state_field,
  .checkout-page #billing_city_field, .checkout-page #shipping_city_field { grid-column: 1 / -1 !important; }
}

/* Mini cart "continue shopping" link (Breakdance ships it unstyled). */
.hdr-cart .bde-mini-cart-continue-link { display: block; padding: 12px 24px 20px; text-align: center; font-size: 14px; font-weight: 600; color: var(--muted, #6b6760); text-decoration: underline; text-underline-offset: 3px; background: var(--paper, #fff); }
.hdr-cart .bde-mini-cart-continue-link:hover { color: var(--brand, #2B2A27); }

/* product tabs: without JS every panel shows; with JS only the chosen one */
.js-tabs .ptab-panel { display: none; }
.js-tabs .ptab-panel.is-on { display: block; }
.tabbar .tabbar-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; color: var(--ink); font-weight: 800; font-size: 14px; text-decoration: none; cursor: pointer; }
.tabbar .tabbar-btn[aria-selected="true"] { background: var(--brand); color: var(--on-brand); }

@media (prefers-reduced-motion: reduce) {
  html.stn-menu-open .hdr-nav-wrap { animation: none; }
}