/*=========================================================
DIVINE HEALTHCARE — SHOP STYLESHEET
This file intentionally does NOT define its own colour or font
system. It reuses the variables and component classes already
defined in the main site's style.css (--primary, --secondary,
--light, --border, --radius, --radius-lg, --shadow, --shadow-hover,
--transition, .btn, .btn-primary, .section, .container, .page-banner,
.section-subtitle, .notice-banner, .icon-circle, .service-card ...)
so every shop page looks like the rest of the site automatically.
This file only adds the handful of components the shop needs that
the main site does not already have: product cards, cart rows,
quantity steppers, the checkout/admin forms and the admin tables.
=========================================================*/

/*=========================================================
SHOP WRAPPER
Gives the shop content the same max-width/padding rhythm as
every other page's .section .container, without needing every
shop block individually wrapped.
=========================================================*/
.shop-page-content{
  max-width:var(--container,1280px);
  margin:0 auto;
  padding:50px 15px 90px;
}
.shop-page-content > .page-banner{
  margin:-50px -15px 50px;
  border-radius:0;
}
@media(max-width:768px){
  .shop-page-content{ padding:34px 15px 60px; }
  .shop-page-content > .page-banner{ margin:-34px -15px 34px; }
}

/*=========================================================
BREADCRUMB
=========================================================*/
.shop-crumb{ font-size:13.5px; color:var(--gray); margin-bottom:22px; }
.shop-crumb a{ color:var(--primary); font-weight:600; }
.shop-crumb a:hover{ opacity:.8; }

/*=========================================================
SECTION HEAD (title + search, matches .category-header rhythm)
=========================================================*/
.shop-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:18px; margin-bottom:28px;
}
.shop-head h1{ font-size:34px; margin-bottom:4px; }
.shop-head p{ margin-bottom:0; color:var(--gray); }
.shop-search{ display:flex; gap:10px; min-width:260px; }
.shop-search input{ flex:1; }

/*=========================================================
PRODUCT GRID + CARD
Built on the same visual language as .service-card (white card,
var(--radius), var(--shadow), lift-on-hover) but with a contain-fit
image area suited to product photography on a plain background.
=========================================================*/
.shop-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:24px; }

.shop-card{
  background:var(--white,#fff);
  border-radius:var(--radius,16px);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:var(--transition);
  display:flex; flex-direction:column; height:100%;
  border:1px solid var(--border);
}
.shop-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-hover); }

.shop-card-img{
  display:flex; align-items:center; justify-content:center;
  height:190px; background:var(--light,#F8FBF9);
  font-size:64px; color:var(--secondary);
  overflow:hidden;
}
.shop-card-img img{ width:100%; height:100%; object-fit:contain; object-position:center; }

.shop-card-body{ padding:22px; display:flex; flex-direction:column; flex:1; text-align:left; }
.shop-card-body h3{ font-size:18px; margin-bottom:8px; }
.shop-card-body h3 a{ color:#173326; }
.shop-card-body h3 a:hover{ color:var(--primary); }
.shop-card-body p{ font-size:14px; margin-bottom:14px; flex:1; }

.shop-price{ font-size:21px; font-weight:800; color:var(--primary); margin-bottom:14px; }
.shop-price del{ font-size:13px; color:var(--gray); font-weight:400; margin-left:8px; }
.shop-out{ font-size:13.5px; font-weight:700; color:#a5821f; }

/*=========================================================
PRODUCT DETAIL PAGE
=========================================================*/
.shop-detail{ display:grid; grid-template-columns:.9fr 1.1fr; gap:46px; align-items:start; }
.shop-detail-photo{
  background:var(--white,#fff); border:1px solid var(--border); border-radius:var(--radius-lg,24px);
  box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;
  height:430px; overflow:hidden; font-size:90px; color:var(--secondary);
}
.shop-detail-photo img{ width:100%; height:100%; max-height:520px; object-fit:contain; object-position:center; }
.shop-detail h5{ color:var(--secondary); font-weight:600; margin-bottom:10px; font-size:15px; }
@media(min-width:901px){ .shop-detail-photo{ position:sticky; top:110px; } }
@media(max-width:900px){ .shop-detail{ grid-template-columns:1fr; gap:28px; } .shop-detail-photo{ height:320px; } }

/*=========================================================
PRODUCT DETAIL — price / pack / stock
=========================================================*/
.shop-price-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.shop-price-row .shop-price{ margin-bottom:0; }
.shop-discount-pill{
  background:#fde8e4; color:#8e3326; font-size:13px; font-weight:800;
  padding:5px 12px; border-radius:30px;
}
.shop-pack-pill{
  display:inline-flex; background:var(--light); color:#173326; font-weight:600; font-size:13.5px;
  padding:8px 16px; border-radius:30px; margin-bottom:14px;
}
.shop-stock{ font-size:14px; font-weight:700; margin:0 0 18px; }
.shop-stock.ok{ color:var(--primary); }
.shop-stock.low{ color:#a5281c; }
.shop-lead{ font-size:16.5px; color:var(--text); margin-bottom:18px; }

/*=========================================================
PRODUCT DETAIL — parsed rich content
(section headings / spec grid / feature list / directions /
precautions, produced by shop_render_rich() in shop.php)
=========================================================*/
.shop-section-title{
  font-size:19px; margin:30px 0 14px; padding-bottom:10px;
  border-bottom:2px solid var(--light); color:#173326;
}
.shop-section-title:first-child{ margin-top:0; }

.shop-spec-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:4px 20px;
  background:var(--light); border-radius:14px; padding:16px 20px; margin:0 0 20px;
}
.shop-spec{
  display:flex; justify-content:space-between; gap:10px; font-size:14px;
  padding:8px 0; border-bottom:1px dashed var(--border);
}
.shop-spec:last-child{ border-bottom:none; }
.shop-spec span{ color:var(--gray); font-weight:600; }
.shop-spec b{ color:#173326; text-align:right; }

.shop-feature-list{ list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:12px; }
.shop-feature-list li{
  display:flex; gap:12px; align-items:flex-start; background:#fff;
  border:1px solid var(--border); border-radius:14px; padding:14px 16px;
}
.shop-feature-list li svg{ color:var(--primary); flex:0 0 20px; margin-top:2px; }
.shop-feature-list li b{ display:block; color:#173326; margin-bottom:3px; font-size:15px; }
.shop-feature-list li span{ display:block; color:var(--gray); font-size:14px; line-height:1.6; }

.shop-directions{
  background:var(--light); border-left:4px solid var(--primary); border-radius:10px;
  padding:16px 20px; margin:0 0 20px; color:var(--text); font-size:15px; line-height:1.7;
}
.notice-banner.shop-precaution{ margin:0 0 20px; }

/*=========================================================
QUANTITY STEPPER
=========================================================*/
.shop-qty{ display:inline-flex; align-items:center; border:1.5px solid var(--border); border-radius:12px; overflow:hidden; }
.shop-qty button{
  width:42px; height:46px; background:var(--light); border:none; font-size:19px; font-weight:700;
  color:var(--primary); cursor:pointer; transition:.2s;
}
.shop-qty button:hover{ background:#e3f2e8; }
.shop-qty input{
  width:58px; height:46px; text-align:center; border:none; padding:0;
  border-left:1.5px solid var(--border); border-right:1.5px solid var(--border);
  font-size:15px; font-weight:700; color:#173326;
}
.shop-qty input:focus{ outline:none; }

/*=========================================================
FORMS (checkout / admin / cart qty) — reuses the same visual
treatment as the site's lead-capture popup fields for consistency.
=========================================================*/
.shop-field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.shop-field label{ font-weight:700; font-size:13.5px; color:#173326; }
.shop-field input,
.shop-field textarea,
.shop-field select{
  width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:12px;
  font-size:15px; font-family:inherit; background:#fbfcfb; transition:.2s;
}
.shop-field input:focus,
.shop-field textarea:focus,
.shop-field select:focus{ outline:none; border-color:var(--primary); background:#fff; }
.shop-field textarea{ resize:vertical; min-height:80px; }
.shop-field.checkbox{ flex-direction:row; align-items:center; gap:10px; }
.shop-field.checkbox input{ width:auto; }

.shop-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; }
.shop-form-grid .wide{ grid-column:1/-1; }
@media(max-width:650px){ .shop-form-grid{ grid-template-columns:1fr; } }

.shop-panel{
  background:var(--white,#fff); border:1px solid var(--border); border-radius:var(--radius-lg,24px);
  box-shadow:var(--shadow); padding:30px;
}
.shop-panel + .shop-panel{ margin-top:24px; }
.shop-panel h2{ font-size:24px; margin-bottom:22px; }
.shop-panel.center{ text-align:center; }
.shop-panel.narrow{ max-width:440px; margin:40px auto; }

/*=========================================================
CART
=========================================================*/
.shop-cart-row{
  display:grid; grid-template-columns:80px 1fr auto auto; gap:16px; align-items:center;
  padding:18px 0; border-bottom:1px solid var(--border);
}
.shop-cart-row:last-child{ border-bottom:none; }
.shop-cart-photo{
  width:80px; height:80px; border-radius:12px; background:var(--light); overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:var(--secondary); font-size:28px;
}
.shop-cart-photo img{ width:100%; height:100%; object-fit:contain; }
.shop-cart-info b{ display:block; color:#173326; margin-bottom:3px; }
.shop-cart-info p{ margin:0 0 8px; color:var(--gray); font-size:14px; }
.shop-cart-info label{ font-size:12.5px; font-weight:600; color:var(--gray); }
.shop-cart-info input{ width:72px; padding:6px 8px; margin-left:6px; }
.shop-cart-remove{ color:#a5281c; font-weight:700; font-size:13.5px; }
.shop-cart-remove:hover{ text-decoration:underline; }

.shop-summary{ max-width:420px; margin-left:auto; margin-top:24px; }
.shop-summary-row{ display:flex; justify-content:space-between; font-size:15px; margin-bottom:10px; color:var(--text); }
.shop-summary-total{ font-size:24px; font-weight:800; color:#173326; margin:16px 0 20px; }
.shop-summary-total span{ color:var(--primary); }

/*=========================================================
RESPONSIVE — SHOP PAGES
Prevents the cart row (and other shop blocks) from forcing the
page wider than the viewport on phones.
=========================================================*/
@media(max-width:650px){

  .shop-page-content{ overflow-x:hidden; }

  .shop-panel{ padding:20px; }

  .shop-head{ flex-direction:column; align-items:flex-start; }
  .shop-search{ width:100%; }

  /* Cart row: stop using the 4-column grid (it has no room for
     "auto auto" once the screen narrows, which is what was
     pushing Remove past the edge). Wrap onto two lines instead:
     photo + info on the first line, price + Remove on the next. */
  .shop-cart-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 14px;
    padding:16px 0;
  }
  .shop-cart-photo{ flex:0 0 64px; width:64px; height:64px; }
  .shop-cart-info{ flex:1 1 180px; min-width:0; }
  .shop-cart-info b{ overflow-wrap:anywhere; }
  .shop-cart-row > b{ font-size:15px; }
  .shop-cart-remove{ margin-left:auto; }

  .shop-cart-info input{ width:60px; }
}

@media(max-width:420px){
  .shop-cart-photo{ flex-basis:54px; width:54px; height:54px; }
}

/*=========================================================
SUCCESS PAGE
=========================================================*/
.shop-success{ text-align:center; max-width:620px; margin:40px auto; }
.shop-success .icon-circle{ width:72px; height:72px; }
.shop-success .icon-circle svg{ width:32px; height:32px; }
.shop-success h1{ margin-bottom:12px; }

/*=========================================================
ADMIN TABLE
=========================================================*/
.shop-table-wrap{ overflow-x:auto; }
.shop-table{ border-collapse:collapse; width:100%; font-size:13.5px; }
.shop-table th, .shop-table td{
  text-align:left; vertical-align:top; padding:12px; border-bottom:1px solid var(--border); min-width:100px;
}
.shop-table th{ background:var(--light); color:var(--primary); font-weight:700; }
.shop-table td small{ color:var(--gray); }
.shop-table td a{ color:var(--primary); text-decoration:underline; }
.shop-table td form{ min-width:150px; display:flex; gap:8px; align-items:center; }
.shop-admin-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; flex-wrap:wrap; gap:12px; }
.shop-admin-head a{ color:var(--primary); font-weight:700; }

/*=========================================================
MISC
=========================================================*/
.shop-error{ background:#fde8e4; color:#8e3326; border-radius:12px; padding:13px 18px; margin-bottom:20px; font-size:14.5px; }
.shop-notice{ background:#eef4f2; color:#1b4a37; border-radius:12px; padding:13px 18px; margin-bottom:20px; font-size:14.5px; }