/* GilasArt Production Responsive Contract
   Purpose: normalize the existing production UI without changing application logic.
   This file is intentionally loaded after the legacy/global styles so the final
   responsive rules are deterministic across desktop, tablet and mobile. */
:root{
  --font-family-base:"Vazirmatn";
  --content-max:1240px;
  --page-gutter:clamp(12px,2.4vw,32px);
  --section-gap:clamp(28px,5vw,72px);
  --control-min-height:44px;
}

html{
  font-family:var(--font-family-base)!important;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
}
body,#app{
  font-family:var(--font-family-base)!important;
  min-width:0;
  max-width:100%;
  overflow-x:clip;
}
body,button,input,select,textarea,option{
  font-family:var(--font-family-base)!important;
}
h1,h2,h3,h4,h5,h6,p,a,li,small,strong,label,summary,th,td{
  font-family:var(--font-family-base)!important;
}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas{max-width:100%}
img{height:auto}
iframe{max-width:100%;border:0}
button,input,select,textarea{max-width:100%;min-width:0}
button,input,select{min-height:var(--control-min-height)}
textarea{min-height:110px}
:where(.wrap,.container,.page,.section,.hero,.toolbar,.footer){
  min-width:0;
}
.wrap{
  width:min(calc(100% - (2 * var(--page-gutter))),var(--content-max));
  margin-inline:auto;
}
.page,.section{min-width:0}
:where(.hero,.product,.product-detail,.product-layout,.checkout-layout,.cart-layout){
  min-width:0;
}
:where(.hero > *, .product > *, .product-detail > *, .product-layout > *,
.checkout-layout > *, .cart-layout > *){min-width:0}
:where(.hero h1,.page h1,.section h2){overflow-wrap:anywhere}
:where(.price,.product-price,.total-price){overflow-wrap:anywhere;word-break:normal}
:where(.btn,.iconbtn,button,[role="button"]){
  touch-action:manipulation;
  white-space:normal;
}
:where(.btn,.iconbtn){min-height:44px}
:where(input,select,textarea){font-size:16px}
:where(input[type="checkbox"],input[type="radio"]){
  min-height:auto;
  width:20px;
  height:20px;
  accent-color:var(--ui-gold,var(--gold));
}
:where(.modal,.modalbox,[role="dialog"]){min-width:0}
:where(.modalbox,[role="dialog"]){max-width:100%;max-height:calc(100dvh - 32px);overflow:auto}
:where(.table-scroll,.table-wrap,.orders-table-wrap,.reports-table-wrap){
  max-width:100%;
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
}
:where(table){max-width:100%}
:where(.admin-layout,.admin-layout main,.admin-page,.dashboard){min-width:0;max-width:100%}
:where(.admin-layout .panel,.admin-layout .card,.admin-layout .form,.admin-layout .chart-box){
  min-width:0;
}
.admin-layout{
  overflow-x:clip;
}
.admin-layout .admin-page,.admin-layout .dashboard{
  width:min(100%,1500px);
  margin-inline:auto;
}
.admin-layout .admin-table{width:max-content;min-width:680px;max-width:none}
.admin-layout .table-scroll,.admin-layout .table-wrap{max-width:100%}

/* Desktop: stable reading width and balanced gallery grids. */
@media (min-width:1024px){
  .hero{grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:clamp(24px,3vw,42px)}
  .product{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,42px)}
  .admin-layout .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .admin-layout .admin-page,.admin-layout .dashboard{padding-inline:clamp(22px,2.5vw,36px)}
}

/* Tablet: dedicated composition, not merely a shrunken desktop. */
@media (min-width:768px) and (max-width:1023px){
  .wrap{width:min(calc(100% - 32px),1100px)}
  .nav{min-height:68px;gap:8px}
  .links{gap:2px}
  .links a{padding-inline:8px}
  .hero{grid-template-columns:minmax(0,1fr);padding-block:52px 34px}
  .hero-card{min-height:280px}
  .product{grid-template-columns:minmax(0,1fr);gap:24px}
  .product .visual{min-height:clamp(360px,55vw,520px)}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .toolbar{align-items:stretch}
  .search{min-width:0;flex:1 1 280px}
  .sectionhead{gap:16px;flex-wrap:wrap}
  .admin-layout .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-layout .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-layout .orders-layout{grid-template-columns:1fr}
  .admin-layout .settings-section-grid{grid-template-columns:1fr}
}

/* Mobile: edge-safe, touch-first layout. */
@media (max-width:767px){
  .wrap{width:min(calc(100% - 22px),var(--content-max))}
  .nav{min-height:64px;height:auto;padding-block:8px}
  .brand{font-size:clamp(18px,5vw,21px);min-width:0}
  .hero{grid-template-columns:1fr;padding-block:36px 28px;gap:20px}
  .hero h1{font-size:clamp(32px,11vw,52px);line-height:1.18}
  .hero p{font-size:16px}
  .hero-card{min-height:220px;padding:20px;border-radius:20px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card,.product-card,.product-item{min-width:0}
  .cardbody{padding:12px}
  .card h3,.product-card h3,.product-item h3{font-size:15px;line-height:1.65;overflow-wrap:anywhere}
  .product{grid-template-columns:1fr;gap:18px}
  .product .visual{min-height:0;aspect-ratio:1/1}
  .panel{padding:18px;border-radius:18px}
  .section{padding-block:24px 48px}
  .page{padding-block:28px 52px}
  .sectionhead{align-items:flex-start;flex-direction:column;gap:10px}
  .toolbar{display:grid;grid-template-columns:1fr;gap:9px}
  .search{min-width:0;width:100%}
  .btn,.iconbtn{width:auto;max-width:100%}
  .form-grid{grid-template-columns:1fr}
  .modal{padding:12px}
  .modalbox{width:min(100%,520px);padding:18px;border-radius:18px}
  .cartline{align-items:flex-start;flex-wrap:wrap}
  .cartline .grow{min-width:calc(100% - 14px)}
  .footer{padding-block:24px}
  .admin-layout .admin-page,.admin-layout .dashboard{padding:16px 12px 24px}
  .admin-layout .cards{grid-template-columns:1fr}
  .admin-layout .admin-header{padding-inline:12px}
  .admin-layout .admin-table{font-size:13px}
  .admin-layout .form-grid{grid-template-columns:1fr}
  .admin-layout .orders-layout{grid-template-columns:1fr}
  .admin-layout .stats-grid{grid-template-columns:1fr}
  .admin-layout .settings-section-grid{grid-template-columns:1fr}
  .admin-layout .reviews-toolbar{grid-template-columns:1fr}
}

/* Very narrow devices: prevent card/grid compression and clipped controls. */
@media (max-width:359px){
  .wrap{width:calc(100% - 16px)}
  .grid,.product-grid{grid-template-columns:1fr}
  .brand{font-size:17px}
  .hero h1{font-size:30px}
  .panel{padding:14px}
  .btn,.iconbtn{min-width:0}
}

/* Wide desktop: never let the gallery become excessively stretched. */
@media (min-width:1600px){
  :where(.wrap,.container){max-width:1320px}
  .grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .product-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* RTL-safe spacing helpers for the existing DOM. */
:where(.toolbar,.sectionhead,.admin-title,.panel-head,.sectionhead,.message-meta){
  margin-inline:0;
}
:where(.admin-layout .admin-table th,.admin-layout .admin-table td){
  text-align:start;
}
:where([dir="rtl"] .admin-layout .admin-table th,[dir="rtl"] .admin-layout .admin-table td){
  text-align:right;
}

/* Keep icon-font glyphs from inheriting the text contract when Font Awesome is present. */
:where(.fa,.fas,.far,.fal,.fab,[class^="fa-"],[class*=" fa-"]){
  font-family:"Font Awesome 6 Free","Font Awesome 6 Brands"!important;
}


/* =========================================================
   Shop Desktop Gallery — Production UI pass
   UI/CSS only. No data, API, router or product logic changes.
   ========================================================= */
.shop-page{
  --shop-content-max:1280px;
  --shop-grid-gap:24px;
}
.shop-page .shop-page-masthead,
.shop-page .shop-control-shell,
.shop-page .gallery-workspace{
  width:min(100%,var(--shop-content-max));
  margin-inline:auto;
}
.shop-page .shop-page-masthead{
  padding-inline:0;
  margin-bottom:clamp(20px,2.2vw,30px);
}
.shop-page .shop-page-masthead .page-masthead-copy{
  max-width:760px;
}
.shop-page .shop-page-masthead h1{
  margin-block:8px 10px;
  font-size:clamp(32px,3.1vw,48px);
  line-height:1.22;
  letter-spacing:-.02em;
}
.shop-page .shop-page-masthead p{
  max-width:720px;
  margin:0;
  font-size:15px;
  line-height:1.95;
}
.shop-page .shop-control-shell{
  margin-bottom:clamp(26px,3vw,38px);
}
.shop-page .shop-control-bar{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));
  gap:10px;
  align-items:stretch;
}
.shop-page .shop-control-item{
  min-width:0;
}
.shop-page .shop-control-trigger{
  min-height:58px;
  padding:10px 14px;
  border-radius:14px;
}
.shop-page .shop-control-trigger-main{
  min-width:0;
  gap:8px;
}
.shop-page .shop-control-trigger-main>span:last-child{
  min-width:0;
}
.shop-page .shop-control-trigger-hint{
  max-width:42%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.shop-page .shop-control-panel{
  border-radius:16px;
  margin-top:8px;
}
.shop-page .shop-active-filters{
  margin-top:10px;
}
.shop-page .gallery-workspace{
  min-width:0;
}
.shop-page .gallery-results{
  min-width:0;
}
.shop-page .results-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:1px solid color-mix(in srgb,var(--ui-line) 70%,transparent);
}
.shop-page .results-head h2{
  margin:4px 0 0;
  font-size:clamp(21px,1.7vw,27px);
  line-height:1.35;
}
.shop-page .results-count{
  flex:0 0 auto;
  font-size:13px;
  color:var(--ui-muted);
  white-space:nowrap;
}

/* The Shop gallery is always exactly three columns on desktop. */
@media (min-width:1024px){
  .shop-page .product-stream{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:1fr;
    align-items:stretch;
    column-gap:var(--shop-grid-gap);
    row-gap:var(--shop-grid-gap);
  }
  .shop-page .product-stream>.product-showcase,
  .shop-page .product-stream>.product-card{
    min-width:0;
    width:100%;
    height:100%;
  }
  .shop-page .product-showcase,
  .shop-page .product-card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--ui-line);
    border-radius:20px;
    background:linear-gradient(145deg,var(--ui-surface),var(--ui-surface-2));
    box-shadow:var(--ui-shadow-soft);
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  }
  .shop-page .product-showcase:hover,
  .shop-page .product-card:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--ui-gold) 22%,var(--ui-line));
    box-shadow:0 12px 30px color-mix(in srgb,#000 9%,transparent);
  }
  .shop-page .product-showcase:focus-within,
  .shop-page .product-card:focus-within{
    border-color:color-mix(in srgb,var(--ui-gold) 55%,var(--ui-line));
    box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-gold) 12%,transparent);
  }
  .shop-page .product-card-media{
    flex:0 0 auto;
    width:100%;
    aspect-ratio:1/1;
    padding:10px;
    overflow:hidden;
  }
  .shop-page .product-art-frame{
    width:100%;
    height:100%;
    overflow:hidden;
    border-radius:14px;
    background:var(--ui-surface-2);
  }
  .shop-page .product-art-frame img{
    width:100%;
    height:100%;
    object-fit:contain!important;
    padding:8px;
    transition:transform .25s ease;
  }
  .shop-page .product-showcase:hover .product-art-frame img{
    transform:scale(1.012);
  }
  .shop-page .product-card-body{
    display:flex;
    flex:1 1 auto;
    min-width:0;
    flex-direction:column;
    padding:17px 18px 18px;
  }
  .shop-page .product-title-wrap{
    min-width:0;
  }
  .shop-page .product-card-heading h3{
    min-height:3.05em;
    margin:0;
    font-family:"Vazirmatn"!important;
    font-size:clamp(17px,1.18vw,19px)!important;
    font-weight:700;
    line-height:1.52;
    letter-spacing:0;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .shop-page .product-card-kicker,
  .shop-page .product-sku{
    font-family:"Vazirmatn"!important;
  }
  .shop-page .product-sku{
    margin-top:6px;
    min-height:1.5em;
    font-size:11px!important;
    line-height:1.5;
    color:var(--ui-muted);
  }
  .shop-page .product-card-price{
    margin-top:auto;
    padding-top:13px;
    font-family:"Vazirmatn"!important;
    font-size:clamp(17px,1.25vw,19px)!important;
    font-weight:800;
    line-height:1.5;
    color:var(--ui-gold-strong)!important;
  }
  .shop-page .product-price-label{
    font-size:11px!important;
    font-weight:600;
  }
  .shop-page .product-showcase .btn{
    min-height:44px;
    margin-top:13px;
    border-radius:11px;
    font-family:"Vazirmatn"!important;
    font-size:13px;
    font-weight:700;
  }
  .shop-page .product-social-proof{
    margin-top:8px;
    min-height:20px;
    font-size:11px;
    line-height:1.5;
  }
}

/* 1024–1199px: keep three columns, but tighten the gallery rhythm. */
@media (min-width:1024px) and (max-width:1199px){
  .shop-page{--shop-grid-gap:18px}
  .shop-page .shop-control-bar{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .shop-page .shop-control-trigger-hint{display:none}
}

/* 1200px+: centered luxury-gallery composition. */
@media (min-width:1200px){
  .shop-page .shop-control-bar{
    grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  }
}

/* Preserve a deliberate tablet composition. */
@media (min-width:768px) and (max-width:1023px){
  .shop-page .shop-control-bar{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .shop-page .product-stream{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
  }
  .shop-page .product-card-heading h3{
    font-size:17px!important;
  }
}

/* Mobile remains touch-first and never inherits desktop card dimensions. */
@media (max-width:767px){
  .shop-page .shop-page-masthead h1{
    font-size:clamp(28px,9vw,38px);
  }
  .shop-page .results-head{
    align-items:flex-start;
    margin-bottom:14px;
  }
  .shop-page .product-stream{
    align-items:stretch;
  }
  .shop-page .product-showcase,
  .shop-page .product-card{
    min-width:0;
    height:100%;
  }
}
@media (prefers-reduced-motion:reduce){
  .shop-page .product-showcase,
  .shop-page .product-card,
  .shop-page .product-art-frame img{
    transition:none;
  }
}