/* ==========================================================================
   Wahat Al Wadi — shared styles for Wholesale / About / Shipping & Returns /
   Contact / Privacy / Terms / 404. Loaded alongside style.css + shop.css
   (which already own header/footer/buttons/forms). Flex-only, Elementor-safe.
   ========================================================================== */

/* ---- generic page hero (About / Shipping / Contact / policies / 404) ---- */
.page-hero{background:var(--cream);padding:64px 40px 56px;text-align:center;}
.page-hero .eyebrow{margin-bottom:18px;}
.page-hero h1{font-size:38px;font-weight:800;color:var(--dark);}
.page-hero p{font-size:16px;color:var(--text-muted);max-width:620px;margin:14px auto 0;line-height:1.6;}

.content-section{padding:72px 40px;}
.content-section.tint{background:var(--cream);}
.content-section .section-head{max-width:640px;}

/* ---- who we supply cards ---- */
.supply-card{
  flex:0 1 calc(25% - 22px);min-width:180px;text-align:center;padding:28px 20px;
  border:1px solid var(--border);border-radius:8px;background:#FFFFFF;
  transition:transform .2s ease,box-shadow .2s ease;
}
.supply-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(35,32,28,0.08);}
.supply-card .ic{
  width:52px;height:52px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
}
.supply-card h3{font-size:14.5px;font-weight:700;color:var(--ink);}

/* ---- About: who we are / what we supply rows ---- */
.about-row{align-items:center;gap:56px;}
.about-row .about-copy{flex:1 1 420px;}
.about-row .about-copy h2{font-size:26px;font-weight:800;color:var(--dark);margin-bottom:16px;}
.about-row .about-copy p{font-size:15.5px;line-height:1.75;color:var(--text-muted-2);margin-bottom:14px;}
.about-row .about-list{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:18px;}
.about-row .about-list span{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);font-weight:500;}
.about-row .about-list svg{flex-shrink:0;}

.commitment-card{
  flex:0 1 calc(25% - 24px);min-width:200px;text-align:center;padding:8px 12px;
}
.commitment-card .ic{
  width:56px;height:56px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.commitment-card h3{font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.commitment-card p{font-size:13.5px;color:var(--text-muted);line-height:1.55;}

/* ---- Contact page ---- */
.contact-layout{gap:48px;align-items:flex-start;}
.contact-info-col{flex:0 0 340px;min-width:260px;}
.contact-form-col{flex:1 1 420px;min-width:280px;}
.contact-method{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--border);}
.contact-method:last-child{border-bottom:none;}
.contact-method .ic{
  width:42px;height:42px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.contact-method h3{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.contact-method p,.contact-method a{font-size:14px;color:var(--text-muted-2);line-height:1.6;display:block;}
.contact-method a:hover{color:var(--accent);}
.contact-wa-banner{
  background:var(--dark);border-radius:8px;padding:28px 26px;margin-top:24px;text-align:center;
}
.contact-wa-banner p{color:#C7C1B5;font-size:13.5px;margin-bottom:16px;}
.contact-wa-banner h3{color:#FFFFFF;font-size:17px;font-weight:800;margin-bottom:8px;}

.form-note{font-size:12.5px;color:var(--text-soft);margin-top:10px;line-height:1.5;}
.form-success{
  display:none;background:var(--cream);border:1px solid #E3D9C6;border-radius:6px;padding:16px 18px;
  font-size:13.5px;color:var(--ink);margin-top:16px;
}
.form-success.is-visible{display:block;}

/* ---- Wholesale supply / benefit reuse widths ---- */
.wholesale-hero-page{padding:0;}
.wholesale-copy h1{font-family:'Manrope',sans-serif;font-size:30px;font-weight:800;color:#FFFFFF;margin:14px 0 18px;line-height:1.2;}
.enquiry-section{padding:72px 40px;background:var(--cream);}
.enquiry-layout{gap:48px;align-items:flex-start;}
.enquiry-form-col{flex:1 1 520px;min-width:280px;}
.enquiry-side-col{flex:0 0 320px;min-width:260px;}
.enquiry-side-col .cart-summary h3{margin-bottom:10px;}
.enquiry-side-col ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--text-muted-2);line-height:1.9;}

/* ---- Policy pages (Privacy / Terms) ---- */
.policy-content{max-width:760px;margin:0 auto;}
.policy-content h2{font-size:19px;font-weight:800;color:var(--dark);margin:36px 0 12px;}
.policy-content h2:first-child{margin-top:0;}
.policy-content p{font-size:14.5px;line-height:1.75;color:var(--text-muted-2);margin-bottom:14px;}
.policy-content ul{margin:0 0 14px;padding-left:20px;}
.policy-content li{font-size:14.5px;line-height:1.75;color:var(--text-muted-2);margin-bottom:6px;}
.policy-note{
  background:var(--cream);border:1px dashed #E3D9C6;border-radius:6px;padding:14px 16px;font-size:13px;
  color:var(--text-muted);margin-bottom:28px;
}
.policy-updated{font-size:12.5px;color:var(--text-soft);margin-bottom:36px;}

/* ---- 404 ---- */
.error-page{text-align:center;padding:100px 24px 120px;max-width:560px;margin:0 auto;}
.error-page .code{font-family:'Manrope',sans-serif;font-size:80px;font-weight:800;color:var(--accent);line-height:1;margin-bottom:8px;}
.error-page h1{font-size:26px;font-weight:800;color:var(--dark);margin-bottom:12px;}
.error-page p{font-size:15px;color:var(--text-muted);line-height:1.6;margin-bottom:30px;}
.error-page .btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.error-search{position:relative;max-width:420px;margin:0 auto 30px;}
.error-search input{
  width:100%;padding:13px 44px 13px 16px;border:1.5px solid #E3D9C6;border-radius:6px;font-family:'Work Sans',sans-serif;
  font-size:14px;color:var(--ink);
}
.error-search svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#A69B87;}

/* ---- My Account tabs ---- */
.account-shell{gap:0;align-items:flex-start;max-width:920px;margin:0 auto;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.account-tabs{flex:0 0 220px;background:var(--cream);border-right:1px solid var(--border);padding:12px;}
.account-tab-btn{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 14px;border-radius:6px;border:none;
  background:none;font-family:'Work Sans',sans-serif;font-size:14px;font-weight:500;color:var(--text-muted-2);cursor:pointer;
}
.account-tab-btn:hover{background:#FFFFFF;}
.account-tab-btn.is-active{background:#FFFFFF;color:var(--accent);font-weight:700;box-shadow:0 1px 4px rgba(35,32,28,0.08);}
.account-panels{flex:1 1 0;padding:36px 32px;min-width:0;}
.account-panel{display:none;}
.account-panel.is-active{display:block;}
.account-panel h2{font-size:19px;font-weight:800;color:var(--dark);margin-bottom:8px;}
.account-panel .sub{font-size:13.5px;color:var(--text-soft);margin-bottom:24px;}
.account-preview-note{
  background:var(--cream);border:1px dashed #E3D9C6;border-radius:6px;padding:12px 16px;font-size:12.5px;color:var(--text-muted);margin-bottom:22px;
}

/* ==========================================================================
   RESPONSIVE — 1920 / 1440 / 1024 / 768 / 430 / 390
   ========================================================================== */
@media (max-width:1100px){
  .page-hero,.content-section,.enquiry-section{padding-left:24px;padding-right:24px;}
}

@media (max-width:900px){
  .supply-card{flex:0 1 calc(33.333% - 22px);}
  .commitment-card{flex:0 1 calc(50% - 24px);}
  .contact-layout{flex-direction:column;}
  .contact-info-col{flex:1 1 auto;max-width:100%;}
  .enquiry-layout{flex-direction:column;}
  .enquiry-side-col{max-width:100%;}
  .about-row{flex-direction:column;gap:28px;}
  .account-shell{flex-direction:column;}
  .account-tabs{flex-direction:row;overflow-x:auto;width:100%;border-right:none;border-bottom:1px solid var(--border);gap:4px;}
  .account-tab-btn{white-space:nowrap;width:auto;}
}

@media (max-width:560px){
  .page-hero h1{font-size:28px;}
  .supply-card{flex:0 1 calc(50% - 12px);}
  .commitment-card{flex:0 1 100%;}
  .error-page .code{font-size:60px;}
  .account-panels{padding:24px 20px;}
}