/* =========================================================
   Crystal Iraq Store — self-contained stylesheet.
   Deliberately independent from ../css/style.css so the store
   can be redesigned later without touching (or being touched
   by) the main site's styles.
   ========================================================= */
:root{
  --st-ink:        #16233F;
  --st-ink-soft:   #55617C;
  --st-ink-faint:  #96A0B5;
  --st-bg:         #FFFFFF;
  --st-bg-alt:     #F5F7FA;
  --st-line:       #E4E8EF;
  --st-primary:    #16233F;
  --st-accent:     #0EA5A8;
  --st-accent-600: #0B8688;
  --st-accent-soft:#E3F6F6;
  --st-danger:     #C4372B;
  --st-danger-bg:  #FBEAE8;
  --st-success:    #17864C;
  --st-success-bg: #E9F7EF;
  --st-radius-sm:  8px;
  --st-radius-md:  12px;
  --st-radius-lg:  18px;
  --st-shadow:     0 6px 20px rgba(22,35,63,.08);
  --st-container:  1180px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.store-body{
  margin:0; background:var(--st-bg); color:var(--st-ink);
  font-family:'Tajawal', sans-serif; direction:rtl; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.store-body img{ max-width:100%; display:block; }
.store-body a{ color:inherit; text-decoration:none; }
.store-body button{ font:inherit; cursor:pointer; }
.store-body input, .store-body select, .store-body textarea{ font:inherit; }
.store-body h1,h2,h3,h4{ margin:0; font-weight:800; }

.store-container{ max-width:var(--st-container); margin-inline:auto; padding-inline:20px; }
.store-section{ padding-block:48px; }

/* ---- Header ---- */
.store-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--st-line);
}
.store-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px; }
.store-brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px; padding:8px 16px 8px 10px; border-radius:999px; background:var(--st-bg-alt); border:1px solid transparent; transition:border-color .15s, background .15s; }
.store-brand:hover{ background:#fff; border-color:var(--st-line); }
.store-brand .mark{ width:28px; height:28px; border-radius:8px; overflow:hidden; flex:none; display:flex; align-items:center; justify-content:center; }
.store-brand .mark img, .store-brand .mark svg{ width:100%; height:100%; object-fit:contain; }
.store-back-link{ font-size:13.5px; font-weight:700; color:var(--st-ink-soft); display:flex; align-items:center; gap:6px; padding:9px 16px; border-radius:999px; border:1px solid var(--st-line); background:#fff; transition:all .15s; }
.store-back-link:hover{ color:var(--st-ink); border-color:var(--st-ink-faint); box-shadow:var(--st-shadow); }
.store-nav-actions{ display:flex; align-items:center; gap:12px; }
.store-cart-link{ position:relative; display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; background:var(--st-bg-alt); border:1px solid var(--st-line); font-weight:700; font-size:14px; }
.store-cart-link:hover{ border-color:var(--st-accent); }
.store-cart-badge{ background:var(--st-accent); color:#fff; font-size:11px; font-weight:800; min-width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 5px; }
.store-cart-link svg{ width:18px; height:18px; }

/* ---- Hero / page heading ---- */
.store-hero{ background:var(--st-bg-alt); padding-block:10px; border-bottom:1px solid var(--st-line); }
.store-hero h1{ font-size:16px; }
.store-hero p{ margin-top:3px; color:var(--st-ink-soft); font-size:12.5px; }
.store-breadcrumb{ display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--st-ink-faint); margin-bottom:8px; flex-wrap:wrap; }
.store-breadcrumb a:hover{ color:var(--st-ink); }

/* ---- Filter chips ---- */
.store-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; }
.store-chip{ padding:8px 16px; border-radius:999px; border:1px solid var(--st-line); background:#fff; font-size:13.5px; font-weight:700; color:var(--st-ink-soft); }
.store-chip.active, .store-chip:hover{ background:var(--st-primary); color:#fff; border-color:var(--st-primary); }

/* ---- Product grid / cards ---- */
.store-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:960px){ .store-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px){ .store-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } }

/* Collapses the cart/checkout two-column split (content + sidebar) to a
   single stacked column on mobile, regardless of the inline desktop ratio. */
@media (max-width:860px){ .store-split{ grid-template-columns:1fr !important; } }

.store-card{
  background:#fff; border:1px solid var(--st-line); border-radius:var(--st-radius-md); overflow:hidden;
  display:flex; flex-direction:column; transition:box-shadow .18s, transform .18s;
}
.store-card:hover{ box-shadow:var(--st-shadow); transform:translateY(-3px); }
.store-card-link{ display:flex; flex-direction:column; flex:1; }
.store-card-imgwrap{ aspect-ratio:1/1; background:var(--st-bg-alt); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.store-card-imgwrap img{ width:100%; height:100%; object-fit:cover; }
.store-img-ph{ width:40%; height:40%; color:var(--st-ink-faint); }
.store-img-ph svg{ width:100%; height:100%; }
.store-badge-oos{ position:absolute; top:10px; inset-inline-end:10px; background:var(--st-danger); color:#fff; font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; }
.store-card-body{ padding:14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.store-card-cat{ font-size:11.5px; color:var(--st-accent-600); font-weight:700; }
.store-card-name{ font-size:14.5px; font-weight:800; line-height:1.4; }
.store-card-price{ margin-top:auto; font-size:16px; font-weight:800; color:var(--st-primary); padding-top:6px; }
.store-card-addform{ display:flex; align-items:center; gap:8px; padding:0 14px 14px; }
.store-qty-stepper.sm{ display:flex; align-items:center; border:1px solid var(--st-line); border-radius:999px; overflow:hidden; flex:none; }
.store-qty-stepper.sm button{ width:28px; height:28px; background:var(--st-bg-alt); border:0; font-size:15px; font-weight:800; }
.store-qty-stepper.sm input{ width:34px; text-align:center; border:0; font-weight:800; font-size:13px; }
.store-card-addform .store-btn{ flex:1; }

/* ---- Buttons ---- */
.store-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--st-radius-sm); font-weight:800; font-size:14.5px;
  border:1px solid transparent; transition:all .15s; white-space:nowrap;
}
.store-btn-primary{ background:var(--st-accent); color:#fff; }
.store-btn-primary:hover{ background:var(--st-accent-600); }
.store-btn-primary[disabled]{ background:var(--st-ink-faint); cursor:not-allowed; }
.store-btn-outline{ background:#fff; color:var(--st-ink); border-color:var(--st-line); }
.store-btn-outline:hover{ border-color:var(--st-ink); }
.store-btn-block{ width:100%; }
.store-btn-sm{ padding:8px 14px; font-size:13px; }
.store-btn svg{ width:16px; height:16px; flex:none; }

/* ---- Product detail ---- */
.store-detail{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
@media (max-width:800px){ .store-detail{ grid-template-columns:1fr; } }
.store-detail-img{ aspect-ratio:1/1; background:var(--st-bg-alt); border-radius:var(--st-radius-lg); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.store-detail-img img{ width:100%; height:100%; object-fit:cover; }
.store-detail-img .store-img-ph{ width:30%; height:30%; }
.store-thumb-row{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.store-thumb{ width:56px; height:56px; border-radius:8px; overflow:hidden; border:2px solid transparent; padding:0; background:var(--st-bg-alt); }
.store-thumb img{ width:100%; height:100%; object-fit:cover; }
.store-thumb.active{ border-color:var(--st-accent); }
.store-detail-price{ font-size:26px; font-weight:800; color:var(--st-primary); margin:14px 0; }
.store-stock-line{ font-size:13.5px; font-weight:700; margin-bottom:18px; }
.store-stock-line.ok{ color:var(--st-success); }
.store-stock-line.low{ color:#B45309; }
.store-stock-line.out{ color:var(--st-danger); }
.store-qty-row{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.store-qty-stepper{ display:flex; align-items:center; border:1px solid var(--st-line); border-radius:999px; overflow:hidden; }
.store-qty-stepper button{ width:38px; height:38px; background:var(--st-bg-alt); border:0; font-size:18px; font-weight:800; }
.store-qty-stepper input{ width:48px; text-align:center; border:0; font-weight:800; font-size:15px; }

/* ---- Cart ---- */
.store-cart-table{ width:100%; border-collapse:collapse; }
.store-cart-table th{ text-align:start; font-size:12.5px; color:var(--st-ink-faint); text-transform:uppercase; padding:10px 8px; border-bottom:1px solid var(--st-line); }
.store-cart-table td{ padding:14px 8px; border-bottom:1px solid var(--st-line); vertical-align:middle; }
.store-cart-row-img{ width:56px; height:56px; border-radius:8px; overflow:hidden; background:var(--st-bg-alt); display:flex; align-items:center; justify-content:center; }
.store-cart-row-img img{ width:100%; height:100%; object-fit:cover; }
.store-cart-name{ font-weight:700; font-size:14.5px; }
.store-cart-remove{ color:var(--st-danger); font-size:13px; font-weight:700; background:none; border:0; }
.store-cart-summary{ background:var(--st-bg-alt); border-radius:var(--st-radius-md); padding:22px; }
.store-cart-summary-row{ display:flex; justify-content:space-between; font-size:14.5px; padding:8px 0; }
.store-cart-summary-row.total{ font-size:18px; font-weight:800; border-top:1px solid var(--st-line); margin-top:8px; padding-top:14px; }
.store-empty-state{ text-align:center; padding:60px 20px; color:var(--st-ink-soft); }
.store-empty-state svg{ width:56px; height:56px; color:var(--st-ink-faint); margin-bottom:16px; }

/* ---- Checkout form ---- */
.store-form-card{ background:#fff; border:1px solid var(--st-line); border-radius:var(--st-radius-lg); padding:28px; }
.store-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .store-form-grid{ grid-template-columns:1fr; } }
.store-field{ display:flex; flex-direction:column; gap:6px; }
.store-field.full{ grid-column:1/-1; }
.store-field label{ font-size:13.5px; font-weight:700; }
.store-field .req{ color:var(--st-danger); }
.store-field input, .store-field select, .store-field textarea{
  border:1px solid var(--st-line); border-radius:var(--st-radius-sm); padding:11px 13px; font-size:14.5px;
}
.store-field input:focus, .store-field select:focus, .store-field textarea:focus{ outline:none; border-color:var(--st-accent); box-shadow:0 0 0 3px var(--st-accent-soft); }
.store-field textarea{ min-height:90px; resize:vertical; }
.store-field .error-msg{ font-size:12.5px; color:var(--st-danger); display:none; }
.store-field.has-error input, .store-field.has-error select, .store-field.has-error textarea{ border-color:var(--st-danger); }
.store-field.has-error .error-msg{ display:block; }
.store-alert{ padding:13px 16px; border-radius:var(--st-radius-sm); font-size:13.5px; margin-bottom:18px; }
.store-alert.error{ background:var(--st-danger-bg); color:var(--st-danger); }
.store-alert.success{ background:var(--st-success-bg); color:var(--st-success); }

/* ---- Order success ---- */
.store-success-box{ text-align:center; padding:60px 24px; max-width:480px; margin-inline:auto; }
.store-success-icon{ width:70px; height:70px; border-radius:50%; background:var(--st-success-bg); color:var(--st-success); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.store-success-icon svg{ width:34px; height:34px; }
.store-order-number{ font-size:22px; font-weight:800; color:var(--st-primary); background:var(--st-bg-alt); padding:12px 20px; border-radius:var(--st-radius-sm); display:inline-block; margin:16px 0; letter-spacing:.03em; }

/* ---- Footer ---- */
.store-footer{ border-top:1px solid var(--st-line); padding-block:28px; margin-top:40px; text-align:center; }
.store-footer p{ font-size:13px; color:var(--st-ink-faint); }
.store-footer a{ color:var(--st-accent-600); font-weight:700; }

.store-badge{ display:inline-block; font-size:12px; font-weight:700; padding:4px 10px; border-radius:6px; background:var(--st-bg-alt); color:var(--st-ink-soft); }