/* TAQA STORE V277 — Responsive Craft hardening layer
   Scope: full-site responsive + Arabic RTL resilience.
   Strategy: intrinsic/fluid first, component containment next, structural media rules last.
   This layer intentionally preserves V276 visual identity and business/application logic. */

:root{
  --v277-page-gutter:clamp(12px,3.6vw,24px);
  --v277-page-gutter-wide:clamp(20px,3vw,40px);
  --v277-touch:44px;
  --v277-readable:72ch;
  --v277-safe-bottom:max(8px,env(safe-area-inset-bottom));
}

/* ---------- Foundation / full-site containment ---------- */
html{
  inline-size:100%;
  max-inline-size:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
html,body{
  max-inline-size:100%;
  overflow-x:clip;
}
@supports not (overflow:clip){
  html,body{overflow-x:hidden;}
}
body{
  min-inline-size:0;
  min-block-size:100vh;
  min-block-size:100svh;
}
*,*::before,*::after{box-sizing:border-box;}

:where(main,section,article,aside,header,footer,nav,form,fieldset,
  .container,.site-header,.taqa-v242-home,.v263-store-main,.v235-product-main,
  .v230-cart-main,.v244-cart-main,.v230-checkout-main,.checkout-page-v39,
  .ca-frame,.ca-main,.ca-view,.admin-app,.admin-main,.admin-content,
  .v260-builder-layout,.v260-builder-canvas,.v128-static-main){
  min-inline-size:0;
  max-inline-size:100%;
}

/* Dynamic content inside flex/grid tracks must be allowed to shrink. */
:where(.container,.v242-hero,.v242-section,.v242-section-head,.v242-command-links,
  .v242-featured-grid,.home204-category-grid,.home204-products-grid,
  .v263-intro-grid,.v263-toolbar,.v263-toolbar-actions,.v263-products-grid,
  .v235-product-stage,.v230-cart-layout,.v244-cart-steps,.cart-page,
  .checkout-grid,.checkout-grid-v39,.v230-checkout-layout,.form-grid,.form-grid-2,.form-grid-3,
  .ca-frame,.ca-main,.ca-stats,.ca-quick,.ca-card,.ca-order-card,
  .admin-app,.admin-main,.admin-content,.stats-grid,.v260-command-grid,.v260-builder-layout,
  .v260-two-col,.v260-review-grid,.v260-toggle-grid,.products-admin-grid,.customer-grid,.coupon-grid)>*{
  min-inline-size:0;
}

img,picture,video,canvas,iframe,embed,object{
  max-inline-size:100%;
}
img,video,canvas{block-size:auto;}
iframe,embed,object{inline-size:100%;}

/* Prevent long Arabic/English mixed content from widening cards or tracks. */
:where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,legend,summary,blockquote,
  .v242-hero-copy,.v242-section-copy,.v263-intro-copy,.v263-results-copy,
  .v263-product-title,.v263-product-subtitle,.home204-product-body,
  .cart-row-clean,.summary-card,.legal-page,.ca-card,.ca-order-card,
  .admin-card,.table-card,.v260-data-surface,.empty-state){
  min-inline-size:0;
  max-inline-size:100%;
  overflow-wrap:anywhere;
  word-break:normal;
}

/* ---------- Arabic RTL flow ---------- */
html[dir="rtl"] body{
  direction:rtl;
  text-align:start;
}
html[dir="rtl"] :where(main,section,article,aside,nav,form,fieldset,
  h1,h2,h3,h4,h5,h6,p,li,dt,dd,label,legend,summary,blockquote,th,td){
  text-align:start;
}
html[dir="rtl"] :where(input:not([type="email"]):not([type="tel"]):not([type="url"]):not([type="number"]),textarea,select){
  direction:rtl;
  text-align:start;
}
/* LTR data stays readable inside an RTL UI. */
html[dir="rtl"] :where(input[type="email"],input[type="tel"],input[type="url"],input[type="number"],
  [dir="ltr"],code,kbd,samp,.order-id,.transaction-id,.payment-id){
  direction:ltr;
  unicode-bidi:isolate;
}
html[dir="rtl"] :where(.legal-page,.v128-static-main,.ca-main,.admin-content) :where(p,li,dd){
  line-height:1.7;
}

/* ---------- Forms / touch / mobile keyboard safety ---------- */
:where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  max-inline-size:100%;
  min-inline-size:0;
  min-block-size:44px;
}
textarea{resize:vertical;}

/* The most common scrollable/dynamic data surfaces should contain their own overflow. */
:where(.responsive-table,.admin-table,.table-card,.v260-data-surface,.payment-tabs,.category-row,
  .v134-category-row,.v186-category-row,.v263-category-row){
  max-inline-size:100%;
}
:where(.responsive-table,.admin-table,.table-card,.v260-data-surface){
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}

/* Sticky/fixed UI: safe-area aware without changing the desktop geometry. */
:where(.mobile-bottom-nav,.v245-bottom-nav,.v130-bottom-nav,.ca-bottom,.mobile-bottom-bar){
  padding-bottom:max(var(--v277-safe-bottom),env(safe-area-inset-bottom));
}

/* Sheets and dialogs follow the visual viewport so keyboards/browser chrome do not trap actions. */
:where(.taqa-auth-modal-dialog,.auth-modal-card-v81,.admin-modal-card,.review-modal-card,
  .v134-filter-sheet,.v263-filter-sheet,.taqa-support-sheet){
  max-inline-size:min(100%,calc(100vw - (2 * var(--v277-page-gutter))));
  max-block-size:calc(100vh - 48px);
  max-block-size:calc(100dvh - max(24px,env(safe-area-inset-top)) - max(24px,env(safe-area-inset-bottom)));
}
:where(.taqa-auth-modal-dialog,.auth-modal-card-v81,.admin-modal-card,.review-modal-card,
  .v134-filter-sheet,.v263-filter-sheet,.taqa-support-sheet){
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* ---------- Component containment ---------- */
:where(.home204-product-card,.v263-product-card,.product-card){
  container-type:inline-size;
}
@container (max-width:190px){
  :where(.home204-product-body,.v263-card-body){padding-inline:9px;}
  :where(.home204-product-body h3,.v263-product-title){overflow-wrap:anywhere;}
}

/* ---------- Mobile structural rules ---------- */
@media (max-width:767px){
  :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
    font-size:max(16px,1rem)!important;
  }
  :where(button,[role="button"],input[type="button"],input[type="submit"],input[type="reset"],select,summary){
    min-block-size:var(--v277-touch);
  }

  /* Full-width shells keep breathing room without hard-coding a device width. */
  :where(.container,.v128-static-main,.v235-product-main,.v230-cart-main,.v244-cart-main,
    .v230-checkout-main,.checkout-page-v39,.ca-main,.admin-content){
    max-inline-size:100%!important;
  }

  /* Fluid action groups — wrap before they collide. */
  :where(.v242-hero-actions,.v242-command-links,.v263-toolbar,.v263-toolbar-actions,
    .cart-tools,.page-actions,.v260-table-toolbar,.filters-bar,.admin-modal-actions){
    flex-wrap:wrap;
    min-inline-size:0;
  }
  :where(.v242-hero-actions>*,.v263-toolbar-actions>*,.cart-tools>*,.page-actions>*,
    .v260-table-toolbar>*,.filters-bar>*){
    min-inline-size:0;
  }

  /* Checkout/cart/forms must not retain desktop multi-column tracks on narrow screens. */
  :where(.v230-cart-layout,.checkout-grid,.checkout-grid-v39,.v230-checkout-layout,
    .form-grid-2,.form-grid-3,.v260-two-col,.v260-review-grid,.v260-builder-layout){
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Product listing intentionally remains two columns on phone, but tracks are shrinkable. */
  body[data-page="products"] :where(.products-grid,.v134-products-grid,.v263-products-grid),
  body[data-page="home"] :where(.home204-products-grid,.v242-featured-grid){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    min-inline-size:0;
  }

  /* Account surfaces: compact two-up summaries, single-column forms/content. */
  body.customer-account-v130 :where(.ca-stats,.ca-quick){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.customer-account-v130 :where(.ca-form-grid,.ca-profile-grid,.ca-security-grid){
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Admin keeps functionality but avoids off-canvas width leakage. */
  body.taqa-admin-v260 :where(.admin-main,.admin-content,.admin-page-view,.table-card,.v260-data-surface){
    min-inline-size:0!important;
    max-inline-size:100%!important;
  }
  body.taqa-admin-v260 :where(.stats-grid,.v260-command-grid,.products-admin-grid,.customer-grid,.coupon-grid){
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Bottom/fixed controls clear notches and the home indicator in portrait/landscape. */
  :where(.v245-mobile-header,.mobile-bottom-nav,.v245-bottom-nav,.v130-bottom-nav,.ca-bottom,.mobile-bottom-bar){
    padding-inline-start:max(10px,env(safe-area-inset-left));
    padding-inline-end:max(10px,env(safe-area-inset-right));
  }

  /* Horizontal category rails stay contained inside the viewport. */
  :where(.category-row,.v134-category-row,.v186-category-row,.v263-category-row,.payment-tabs){
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  :where(.category-row,.v134-category-row,.v186-category-row,.v263-category-row,.payment-tabs)::-webkit-scrollbar{
    display:none;
  }

  /* While a virtual keyboard is active, fixed bottom navigation must not cover the focused field. */
  body:has(input:focus,textarea:focus,select:focus) :where(.mobile-bottom-nav,.v245-bottom-nav,.v130-bottom-nav,.ca-bottom,.mobile-bottom-bar){
    visibility:hidden;
    pointer-events:none;
  }
}

/* Small-phone stress range: preserve the 2-column store, but stack wider action rows. */
@media (max-width:359px){
  body[data-page="home"] .v242-hero-actions>*{
    flex:1 1 100%!important;
    inline-size:100%!important;
  }
  body[data-page="products"] .v263-toolbar-actions>*{
    flex:1 1 0!important;
  }
  :where(.v244-cart-steps,.v244-checkout-steps){
    gap:clamp(4px,1.5vw,8px)!important;
  }
}

/* Tablet: avoid cramped dashboard/commerce columns in portrait. */
@media (min-width:768px) and (max-width:1023px){
  :where(.checkout-grid,.checkout-grid-v39,.v230-checkout-layout,.v260-builder-layout){
    grid-template-columns:minmax(0,1fr)!important;
  }
  body[data-page="products"] :where(.products-grid,.v134-products-grid,.v263-products-grid){
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  body.taqa-admin-v260 :where(.stats-grid,.v260-command-grid){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Desktop/ultrawide: cap readable text while allowing the existing visual shell to breathe. */
@media (min-width:1024px){
  :where(.legal-page p,.legal-page li,.v128-static-main p,.v242-section-copy p,.v266-faq-answer p){
    max-inline-size:var(--v277-readable);
  }
  body.taqa-admin-v260 .admin-sidebar{
    max-block-size:calc(100svh - 24px);
    align-self:start;
  }
}

/* Landscape phones: the notch moves sideways and vertical space becomes scarce. */
@media (max-height:520px) and (orientation:landscape){
  :where(.taqa-auth-modal-dialog,.auth-modal-card-v81,.admin-modal-card,.review-modal-card,
    .v134-filter-sheet,.v263-filter-sheet,.taqa-support-sheet){
    max-block-size:calc(100dvh - 12px);
  }
  :where(.mobile-bottom-nav,.v245-bottom-nav,.v130-bottom-nav,.ca-bottom,.mobile-bottom-bar){
    padding-inline-start:max(8px,env(safe-area-inset-left));
    padding-inline-end:max(8px,env(safe-area-inset-right));
  }
}

/* Respect accessibility preferences; do not add movement to layout repairs. */
@media (prefers-reduced-motion:reduce){
  :where(.v263-filter-sheet,.taqa-auth-modal-dialog,.admin-modal-card,.review-modal-card){
    scroll-behavior:auto!important;
  }
}