/* ==========================================================================
   Wahat Al Wadi — Shop, Product, Cart, Checkout & Account styles.
   Ported verbatim from the approved reference implementation (css/shop.css).
   ========================================================================== */

/* ---- breadcrumb ---- */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--text-soft);margin-bottom:18px;}
.breadcrumb a{color:var(--text-soft);transition:color .15s ease;}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb .sep{color:#D8D0C2;}
.breadcrumb .current{color:var(--ink);font-weight:600;}

/* ---- shop hero ---- */
.shop-hero{background:var(--cream);padding:56px 40px 40px;}
.shop-hero h1{font-size:38px;font-weight:800;color:var(--dark);}
.shop-hero .lede{font-size:16px;color:var(--text-muted);margin:10px 0 0;max-width:620px;}

.shop-search{position:relative;max-width:560px;margin-top:28px;}
.shop-search input{
  width:100%;padding:15px 48px 15px 18px;border:1.5px solid #E3D9C6;border-radius:6px;
  font-family:'Work Sans',sans-serif;font-size:14.5px;color:var(--ink);background:#FFFFFF;
  transition:border-color .15s ease;
}
.shop-search input:focus{outline:none;border-color:var(--accent);}
.shop-search svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:#A69B87;}

/* ---- toolbar ---- */
.shop-toolbar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding:22px 0;border-bottom:1px solid var(--border);margin-bottom:28px;
}
.shop-count{font-size:13.5px;color:var(--text-muted);}
.shop-count strong{color:var(--ink);}
.shop-toolbar-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}

.select-wrap{position:relative;display:inline-flex;align-items:center;}
.select-wrap select{
  appearance:none;-webkit-appearance:none;padding:10px 36px 10px 14px;border:1.5px solid var(--border);
  border-radius:6px;font-family:'Work Sans',sans-serif;font-size:13.5px;color:var(--ink);background:#FFFFFF;cursor:pointer;
}
.select-wrap svg{position:absolute;right:12px;pointer-events:none;color:#8A8377;}

.mobile-filter-btn{
  display:none;align-items:center;gap:8px;padding:10px 18px;border:1.5px solid var(--border);border-radius:6px;
  font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;background:#FFFFFF;
}

/* ---- layout: sidebar + grid ---- */
.shop-layout{align-items:flex-start;gap:36px;}
.shop-filters{flex:0 0 240px;position:sticky;top:88px;}
.shop-filters h3{font-size:13px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink);margin-bottom:16px;}
.filter-list{display:flex;flex-direction:column;gap:2px;}
.filter-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:6px;
  font-size:14px;color:var(--text-muted-2);cursor:pointer;background:none;border:none;text-align:left;width:100%;
  font-family:'Work Sans',sans-serif;transition:background .15s ease,color .15s ease;
}
.filter-item:hover{background:var(--cream);color:var(--ink);}
.filter-item.is-active{background:var(--accent);color:#FFFFFF;font-weight:600;}
.filter-item .count{font-size:12px;color:inherit;opacity:0.7;}

.shop-results{flex:1 1 0%;min-width:0;}
.shop-grid{gap:22px;}

/* ---- empty state ---- */
.shop-empty{width:100%;text-align:center;padding:64px 20px;color:var(--text-muted);}
.shop-empty h3{font-size:19px;color:var(--ink);margin-bottom:8px;}
.shop-empty button{margin-top:18px;}

/* ---- product placeholder image ---- */
.prod-img-placeholder{
  height:180px;background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;border-bottom:1px solid var(--border);position:relative;overflow:hidden;
}
.prod-img-placeholder img{width:32px;height:32px;border-radius:50%;opacity:0.30;object-fit:cover;transition:transform .3s ease;}
.prod-img-placeholder span{font-size:10.5px;letter-spacing:0.05em;color:#B7AA92;text-transform:uppercase;font-weight:600;}
.prod-card:hover .prod-img-placeholder img{transform:scale(1.08);}
.prod-media{display:block;position:relative;}
.prod-media img.prod-photo{height:180px;width:100%;object-fit:cover;display:block;}
.prod-badge{
  position:absolute;top:10px;left:10px;background:var(--secondary);color:#FFFFFF;font-size:10.5px;font-weight:700;
  letter-spacing:0.04em;text-transform:uppercase;padding:4px 9px;border-radius:4px;
}

/* ---- product card refinements (base card rules live in style.css) ---- */
.prod-pack{display:block;font-size:12.5px;color:var(--text-muted);margin:-4px 0 10px;}
.prod-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.prod-foot .btn{flex:1 1 auto;transition:background .15s ease,color .15s ease,border-color .15s ease;}
.prod-card:hover .prod-foot .btn-outline{background:var(--accent);color:#FFFFFF;border-color:var(--accent);}
.prod-wa{
  width:38px;height:38px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:#25D366;transition:background .15s ease,transform .15s ease;
}
.prod-wa:hover{background:#25D366;color:#FFFFFF;transform:scale(1.06);}

/* ---- pagination ---- */
.pagination{justify-content:center;align-items:center;gap:8px;margin-top:44px;}
.page-btn{
  min-width:38px;height:38px;padding:0 10px;border-radius:6px;border:1.5px solid var(--border);background:#FFFFFF;
  font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.page-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.page-btn.is-active{background:var(--accent);border-color:var(--accent);color:#FFFFFF;}
.page-btn:disabled{opacity:0.4;cursor:not-allowed;}
.page-btn[href]{text-decoration:none;}

/* ---- mobile filter drawer ---- */
.filter-drawer-overlay{
  position:fixed;inset:0;background:rgba(30,27,23,0.45);z-index:150;opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.filter-drawer-overlay.is-open{opacity:1;pointer-events:auto;}
.filter-drawer{
  position:fixed;top:0;left:0;bottom:0;width:82%;max-width:320px;background:#FFFFFF;z-index:151;
  transform:translateX(-100%);transition:transform .25s ease;padding:22px 22px 24px;overflow-y:auto;
}
.filter-drawer.is-open{transform:translateX(0);}
.filter-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.filter-drawer-head h3{font-size:15px;font-weight:800;color:var(--dark);}
.filter-drawer-close{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);background:var(--cream);border:none;}

/* ==========================================================================
   PRODUCT DETAIL PAGE
   ========================================================================== */
.pd-section{padding:44px 40px 90px;}
.pd-layout{gap:56px;align-items:flex-start;}
.pd-media{flex:1 1 440px;max-width:480px;}
.pd-media .prod-img-placeholder{height:400px;border-radius:8px;border:1px solid var(--border);border-bottom:1px solid var(--border);}
.pd-media .prod-img-placeholder img{width:52px;height:52px;}
.pd-media img.prod-photo{width:100%;height:400px;object-fit:cover;border-radius:8px;border:1px solid var(--border);display:block;}

.pd-info{flex:1 1 420px;max-width:560px;}
.pd-category{font-size:12.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);}
.pd-category a{color:inherit;}
.pd-name{font-size:30px;font-weight:800;color:var(--dark);margin:12px 0 4px;line-height:1.2;}
.pd-arabic{font-size:15px;color:var(--text-soft);direction:rtl;text-align:left;margin-bottom:14px;display:block;}
.pd-pack-row{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-muted-2);background:var(--cream);border-radius:999px;padding:7px 14px;margin-bottom:6px;}
.pd-price{font-family:'Manrope',sans-serif;font-size:22px;font-weight:800;color:var(--accent);letter-spacing:0.01em;margin:14px 0 4px;}
.pd-price-note{font-size:14px;color:var(--text-muted);background:#FBF7F1;border:1px dashed #E3D9C6;border-radius:6px;padding:12px 16px;margin:18px 0;}
.pd-cart-msg{font-size:13px;font-weight:600;color:var(--accent-hover, #DA6C08);margin:2px 0 14px;min-height:1.2em;}

.qty-stepper{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:6px;overflow:hidden;}
.qty-stepper button{width:40px;height:44px;background:#FFFFFF;border:none;font-size:18px;color:var(--ink);cursor:pointer;}
.qty-stepper button:hover{background:var(--cream);color:var(--accent);}
.qty-stepper input{width:50px;height:44px;border:none;border-left:1.5px solid var(--border);border-right:1.5px solid var(--border);
  text-align:center;font-size:15px;font-family:'Work Sans',sans-serif;color:var(--ink);}
.qty-row{display:flex;align-items:center;gap:16px;margin:22px 0;}
.qty-row label{font-size:13px;font-weight:600;color:var(--ink);}

.pd-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px;}
.pd-cta-row .btn{flex:1 1 auto;}
.pd-cta-note{font-size:12.5px;color:var(--text-soft);margin-top:4px;}

.pd-desc{font-size:15px;line-height:1.75;color:var(--text-muted-2);margin:28px 0;max-width:520px;}

.pd-specs{border-top:1px solid var(--border);padding-top:20px;margin-top:20px;}
.pd-specs dl{display:flex;flex-wrap:wrap;gap:12px 32px;margin:0;}
.pd-specs .spec{flex:0 0 auto;min-width:140px;}
.pd-specs dt{font-size:11.5px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-soft);margin-bottom:3px;}
.pd-specs dd{font-size:14.5px;font-weight:600;color:var(--ink);margin:0;}

.related-section{padding:0 40px 90px;}
.related-section .section-head{text-align:left;margin:0 0 28px;max-width:none;}
.related-section h2{font-size:24px;}

.pd-not-found{text-align:center;padding:100px 24px;}
.pd-not-found h1{font-size:26px;color:var(--dark);margin-bottom:12px;}
.pd-not-found p{color:var(--text-muted);margin-bottom:24px;}

/* ==========================================================================
   CART
   ========================================================================== */
.cart-empty{text-align:center;padding:90px 24px;max-width:480px;margin:0 auto;}
.cart-empty .ic{width:64px;height:64px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;}
.cart-empty h1{font-size:26px;font-weight:800;color:var(--dark);margin-bottom:10px;}
.cart-empty p{font-size:14.5px;color:var(--text-muted);line-height:1.6;margin-bottom:28px;}
.cart-empty .btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

.cart-table{width:100%;}
.cart-row{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--border);}
.cart-row .cart-thumb{width:64px;height:64px;border-radius:6px;flex-shrink:0;}
.cart-row .cart-thumb span{display:none;}
.cart-row .cart-thumb img.prod-photo{width:64px;height:64px;object-fit:cover;border-radius:6px;display:block;}
.cart-row .cart-name{font-size:14.5px;font-weight:700;color:var(--ink);}
.cart-row .cart-name a{color:inherit;}
.cart-row .cart-name a:hover{color:var(--accent);}
.cart-row .cart-meta{font-size:12.5px;color:var(--text-soft);margin:2px 0 6px;}
.cart-row .cart-remove{font-size:12.5px;color:var(--accent);cursor:pointer;background:none;border:none;padding:0;}
.cart-summary{border:1px solid var(--border);border-radius:8px;padding:24px;}
.cart-summary-row{display:flex;justify-content:space-between;font-size:14px;color:var(--text-muted-2);padding:8px 0;}

/* ==========================================================================
   CHECKOUT
   ========================================================================== */
.checkout-layout{align-items:flex-start;gap:40px;}
.checkout-form{flex:1 1 560px;min-width:280px;}
.checkout-summary{flex:0 0 360px;min-width:280px;}
.checkout-section{margin-bottom:32px;}
.checkout-section h2{font-size:15px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink);margin-bottom:16px;}
.form-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.form-group{flex:1 1 200px;min-width:160px;display:flex;flex-direction:column;gap:6px;}
.form-group label{font-size:12.5px;font-weight:600;color:var(--text-muted-2);}
.form-group input,.form-group select,.form-group textarea{
  padding:12px 14px;border:1.5px solid var(--border);border-radius:6px;font-family:'Work Sans',sans-serif;
  font-size:14px;color:var(--ink);background:#FFFFFF;width:100%;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--accent);}
.form-group textarea{resize:vertical;min-height:80px;}

.payment-option{
  display:flex;align-items:flex-start;gap:12px;border:1.5px solid var(--border);border-radius:8px;padding:14px 16px;margin-bottom:10px;
}
.payment-option input[type="radio"]{margin-top:3px;accent-color:var(--accent);}
.payment-option.is-selected{border-color:var(--accent);background:var(--cream);}
.payment-option .po-title{font-size:14px;font-weight:700;color:var(--ink);}
.payment-option .po-sub{font-size:12.5px;color:var(--text-soft);margin-top:2px;}
.payment-option.is-disabled{opacity:0.55;}
.payment-option.is-disabled input{cursor:not-allowed;}

.order-summary-mini{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;max-height:320px;overflow-y:auto;}
.osm-row{display:flex;gap:12px;align-items:center;}
.osm-row .osm-thumb{width:44px;height:44px;border-radius:6px;flex-shrink:0;}
.osm-row .osm-name{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3;}
.osm-row .osm-qty{font-size:12px;color:var(--text-soft);}

.checkout-empty{text-align:center;padding:80px 24px;}

/* ==========================================================================
   ACCOUNT PLACEHOLDER
   ========================================================================== */
.account-card{max-width:480px;margin:0 auto;text-align:center;padding:90px 24px;}
.account-card .ic{width:64px;height:64px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;}
.account-card h1{font-size:26px;font-weight:800;color:var(--dark);margin-bottom:10px;}
.account-card p{font-size:14.5px;color:var(--text-muted);line-height:1.6;margin-bottom:28px;}
.account-card .btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ==========================================================================
   RESPONSIVE — 1920 / 1440 / 1024 / 768 / 430 / 390
   ========================================================================== */
@media (max-width:1300px){
  .prod-card,.related-section .prod-card{flex:0 1 calc(33.333% - 22px);}
}

@media (max-width:1100px){
  .shop-hero,.pd-section,.related-section{padding-left:24px;padding-right:24px;}
}

@media (max-width:900px){
  .shop-filters{display:none;}
  .mobile-filter-btn{display:inline-flex;}
  .prod-card,.related-section .prod-card{flex:0 1 calc(50% - 22px);}
  .pd-layout{flex-direction:column;}
  .pd-media,.pd-info{max-width:100%;}
}

@media (max-width:560px){
  .shop-hero h1{font-size:29px;}
  .shop-toolbar{flex-direction:column;align-items:flex-start;}
  .shop-toolbar-right{width:100%;justify-content:space-between;}
  .prod-card,.related-section .prod-card{flex:0 1 calc(50% - 12px);}
  .shop-grid{gap:12px;}
  .prod-body{padding:12px;}
  .prod-name{font-size:13.5px;}
  .prod-foot{flex-direction:column;align-items:stretch;}
  .prod-foot .prod-wa{align-self:center;}
  .pd-cta-row{flex-direction:column;}
  .pd-specs dl{gap:12px 20px;}
}

@media (max-width:420px){
  .prod-card,.related-section .prod-card{flex:0 1 100%;}
}