/*
 * store.css — Kahnke Retail Ecom (public storefront)
 * Builds on css/kahnke-ui.css tokens (--k-green, --k-amber, Inter/Playfair).
 * One cohesive, fully-responsive system for every storefront page + modal.
 */

* { box-sizing: border-box; }
body { margin:0; font-family:var(--k-font,'Inter',sans-serif); background:#f6f8f3; color:var(--k-dark,#252C30); }
a { color:inherit; text-decoration:none; }

/* ── Top promo bar ─────────────────────────────────────── */
.store-topbar { background:var(--k-green-dark,#5a7a2e); color:#fff; font-size:12.5px; text-align:center; padding:8px 16px; letter-spacing:.3px; }

/* ── Header ────────────────────────────────────────────── */
.store-header { background:#fff; border-bottom:1px solid var(--k-border,#e3e6ea); position:sticky; top:0; z-index:50; box-shadow:0 1px 0 rgba(0,0,0,.02); }
.store-header-inner { max-width:1240px; margin:0 auto; display:flex; align-items:center; gap:22px; padding:15px 22px; }
.store-brand { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.store-brand .logo { width:46px; height:46px; border-radius:13px; background:linear-gradient(135deg,var(--k-green,#88B44E),var(--k-green-dark,#5a7a2e)); color:#fff; display:grid; place-items:center; font-size:21px; box-shadow:0 4px 12px rgba(136,180,78,.35); }
.store-brand .name { font-family:var(--k-font-head,'Playfair Display',serif); font-weight:700; font-size:22px; line-height:1; color:var(--k-dark); }
.store-brand .name small { display:block; font-family:var(--k-font); font-weight:600; font-size:10px; color:var(--k-muted); letter-spacing:1.4px; margin-top:4px; }

.store-search { flex:1; position:relative; max-width:620px; }
.store-search input { width:100%; border:1.5px solid var(--k-border2,#d0d4da); border-radius:30px; padding:11px 18px 11px 44px; font-size:14.5px; font-family:var(--k-font); outline:none; transition:border-color .15s, box-shadow .15s; background:#fff; }
.store-search input:focus { border-color:var(--k-green); box-shadow:0 0 0 3px rgba(136,180,78,.16); }
.store-search .s-icon { position:absolute; left:17px; top:50%; transform:translateY(-50%); color:var(--k-muted); }

.store-actions { display:flex; align-items:center; gap:18px; flex-shrink:0; }
.store-cart-btn { position:relative; display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--k-dark); padding:8px 14px; border-radius:30px; transition:background .15s; }
.store-cart-btn:hover { background:var(--k-green-light,#f0f7e4); }
.store-cart-btn i { font-size:18px; }
.cart-badge { position:absolute; top:-2px; right:-2px; min-width:19px; height:19px; background:var(--k-amber,#C4700F); color:#fff; border-radius:11px; font-size:11px; font-weight:700; display:grid; place-items:center; padding:0 5px; border:2px solid #fff; }

/* ── Category strip ────────────────────────────────────── */
.store-catbar { background:#fff; border-bottom:1px solid var(--k-border); }
.store-catbar-inner { max-width:1240px; margin:0 auto; padding:0 22px; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; }
.store-catbar-inner::-webkit-scrollbar { display:none; }
.store-catbar a { padding:13px 15px; font-size:13.5px; font-weight:600; color:var(--k-mid); white-space:nowrap; border-bottom:3px solid transparent; transition:.15s; }
.store-catbar a:hover { color:var(--k-green-dark); }
.store-catbar a.active { color:var(--k-green-dark); border-bottom-color:var(--k-green); }

/* ── Page shell ────────────────────────────────────────── */
.store-main { max-width:1240px; margin:0 auto; padding:28px 22px 64px; }
.store-page-title { font-family:var(--k-font-head); font-size:27px; font-weight:700; margin:0 0 5px; }
.store-page-sub { color:var(--k-muted); font-size:14.5px; margin:0 0 24px; }
.back-link { display:inline-flex; align-items:center; gap:7px; color:var(--k-muted); font-size:14px; margin-bottom:18px; }
.back-link:hover { color:var(--k-green-dark); }

/* ── Buttons ───────────────────────────────────────────── */
.btn-green, .btn-amber, .btn-outline { border:none; border-radius:10px; padding:12px 22px; font-family:var(--k-font); font-weight:600; font-size:14.5px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:.15s; text-decoration:none; line-height:1.2; }
.btn-green { background:var(--k-green); color:#fff; }
.btn-green:hover { background:var(--k-green-dark); transform:translateY(-1px); }
.btn-amber { background:var(--k-amber); color:#fff; box-shadow:0 3px 10px rgba(196,112,15,.22); }
.btn-amber:hover { background:var(--k-amber-dark); transform:translateY(-1px); box-shadow:0 5px 16px rgba(196,112,15,.28); }
.btn-outline { background:#fff; color:var(--k-dark); border:1.5px solid var(--k-border2); }
.btn-outline:hover { border-color:var(--k-green); color:var(--k-green-dark); }
.btn-block { width:100%; }
.btn-sm { padding:8px 14px; font-size:13px; }
.btn-green:disabled, .btn-amber:disabled { opacity:.55; cursor:not-allowed; transform:none; }

/* ── Product grid + cards ──────────────────────────────── */
#product_list, .product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:22px; }
.product-wrapper { background:#fff; border:1px solid var(--k-border); border-radius:16px; overflow:hidden; cursor:pointer; transition:transform .18s, box-shadow .18s, border-color .18s; display:flex; flex-direction:column; }
.product-wrapper:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(37,44,48,.10); border-color:var(--k-green); }
.product-wrapper .img { aspect-ratio:1/1; background:var(--k-surf,#f1f3f5); overflow:hidden; }
.product-wrapper .img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.product-wrapper:hover .img img { transform:scale(1.05); }
.product-wrapper .info { padding:15px 16px 17px; display:flex; flex-direction:column; flex:1; gap:3px; }
.product-wrapper .info h1 { font-family:var(--k-font,'Inter',sans-serif); font-size:15.5px; font-weight:600; margin:0; line-height:1.3; letter-spacing:-.1px; }
.product-wrapper .info p { font-size:12.5px; color:var(--k-muted); font-style:italic; margin:0; }
.product-wrapper .card-price { font-weight:700; font-size:17px; color:var(--k-green-dark); margin-top:auto; padding-top:9px; }
.product-wrapper.out-of-stock-card { opacity:.72; filter:grayscale(25%); }
.stock-badge { font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; display:inline-block; letter-spacing:.3px; }
.stock-badge.in { background:var(--k-green-light,#f0f7e4); color:var(--k-green-dark); }
.stock-badge.out { background:var(--k-red-light,#fff0f0); color:var(--k-red,#dc3545); }
.no-results { grid-column:1/-1; text-align:center; padding:64px 0; color:var(--k-muted); }

/* ── Filters + list head ───────────────────────────────── */
.store-filters { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; align-items:center; }
.store-filters select { border:1.5px solid var(--k-border2); border-radius:10px; padding:10px 14px; font-family:var(--k-font); font-size:14px; background:#fff; min-width:190px; }
.store-filters .count { margin-left:auto; color:var(--k-muted); font-size:13.5px; }
.list-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.svc-pill { display:inline-flex; align-items:center; margin-left:9px; background:rgba(255,255,255,.22); padding:3px 11px; border-radius:20px; font-size:11.5px; font-weight:700; }

/* ── Footer ────────────────────────────────────────────── */
.store-footer { background:var(--k-dark,#252C30); color:#cdd3cd; margin-top:54px; }
.store-footer-inner { max-width:1240px; margin:0 auto; padding:36px 22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; font-size:13.5px; }
.store-footer a:hover { color:#fff; }

/* ════════════════════════════════════════════════════════
   BOOK TREE SERVICE modal — matches kahnke-ui modal language
   ════════════════════════════════════════════════════════ */
.k2-overlay { position:fixed; inset:0; background:rgba(37,44,48,.55); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:200; padding:18px; opacity:0; transition:opacity .18s; }
.k2-overlay.show { display:flex; opacity:1; }
.k2-modal { background:#fff; width:100%; max-width:470px; border-radius:18px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.28); transform:scale(.96); transition:transform .2s; }
.k2-overlay.show .k2-modal { transform:scale(1); }
.k2-head { display:flex; align-items:center; gap:13px; padding:20px 22px; border-bottom:1px solid var(--k-border); }
.k2-icon { width:44px; height:44px; border-radius:12px; background:var(--k-green-light,#f0f7e4); color:var(--k-green-dark); display:grid; place-items:center; font-size:19px; flex-shrink:0; }
.k2-title { font-family:var(--k-font-head); font-weight:700; font-size:18px; color:var(--k-dark); }
.k2-sub { font-size:12.5px; color:var(--k-muted); margin-top:2px; }
.k2-x { margin-left:auto; background:none; border:none; color:var(--k-muted); font-size:26px; line-height:1; cursor:pointer; align-self:flex-start; }
.k2-x:hover { color:var(--k-dark); }
.k2-body { padding:22px; }
.k2-label { display:block; font-weight:600; font-size:14px; margin-bottom:12px; color:var(--k-dark); }
.k2-label small { color:var(--k-muted); font-weight:400; }
.svc-opts { display:flex; flex-direction:column; gap:11px; }
.svc-opt { display:flex; align-items:center; gap:13px; border:1.5px solid var(--k-border2); border-radius:12px; padding:14px 16px; cursor:pointer; transition:.15s; }
.svc-opt:hover { border-color:var(--k-green); background:var(--k-green-xlt,#f7faf2); }
.svc-opt input { width:18px; height:18px; accent-color:var(--k-green); flex-shrink:0; }
.svc-opt span { display:flex; flex-direction:column; gap:2px; }
.svc-opt strong { font-size:14.5px; }
.svc-opt small { color:var(--k-muted); font-size:12.5px; }
.svc-size-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--k-border); }
.svc-size-row:last-of-type { border-bottom:none; }
.svc-size-row span { font-size:14px; font-weight:500; }
.svc-size-row input { width:76px; border:1.5px solid var(--k-border2); border-radius:8px; padding:9px; font-family:var(--k-font); text-align:center; font-size:14px; }
.k2-note { font-size:12.5px; color:var(--k-muted); margin-top:14px; display:flex; gap:8px; align-items:flex-start; line-height:1.5; }
.k2-note i { color:var(--k-green); margin-top:1px; }
.k2-foot { display:flex; align-items:center; gap:10px; padding:16px 22px; border-top:1px solid var(--k-border); background:var(--k-off,#f8f9fa); }

/* Toast */
.k2-toast { position:fixed; top:88px; left:50%; transform:translateX(-50%) translateY(-18px); background:var(--k-dark,#252C30); color:#fff; padding:13px 24px; border-radius:30px; font-size:14px; font-weight:500; opacity:0; pointer-events:none; transition:.25s; z-index:99999; box-shadow:0 10px 34px rgba(0,0,0,.28); max-width:92vw; text-align:center; }
.k2-toast.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }

/* ════════════════════════════════════════════════════════
   CART
   ════════════════════════════════════════════════════════ */
.cart-layout { display:grid; grid-template-columns:1fr 350px; gap:28px; align-items:start; }
.cart-lines { display:flex; flex-direction:column; gap:13px; }
.cart-line { display:grid; grid-template-columns:1fr auto auto auto; gap:18px; align-items:center; background:#fff; border:1px solid var(--k-border); border-radius:14px; padding:16px 20px; transition:box-shadow .15s; }
.cart-line:hover { box-shadow:0 4px 14px rgba(37,44,48,.06); }
.cl-name { font-weight:600; font-size:15.5px; }
.cl-size, .cl-price { font-size:12.5px; color:var(--k-muted); margin-top:3px; }
.cl-total { font-weight:700; font-size:15.5px; min-width:78px; text-align:right; }
.cl-del { background:none; border:none; color:var(--k-muted); cursor:pointer; font-size:15px; padding:7px; border-radius:8px; transition:.15s; }
.cl-del:hover { color:var(--k-red,#dc3545); background:var(--k-red-light,#fff0f0); }
.qty-stepper { display:flex; align-items:center; border:1.5px solid var(--k-border2); border-radius:10px; overflow:hidden; }
.qty-stepper button { width:36px; height:38px; border:none; background:var(--k-off,#f8f9fa); font-size:18px; cursor:pointer; color:var(--k-dark); transition:.12s; }
.qty-stepper button:hover { background:var(--k-green); color:#fff; }
.qty-stepper input { width:46px; height:38px; border:none; text-align:center; font-family:var(--k-font); font-size:14px; font-weight:600; background:#fff; }

.svc-box { background:#fff; border:1px solid var(--k-border); border-left:4px solid var(--k-amber); border-radius:14px; padding:16px 20px; margin-top:14px; }
.svc-box-hd { font-weight:700; font-size:14px; display:flex; align-items:center; gap:9px; margin-bottom:11px; color:var(--k-amber-dark,#8f4d08); }
.svc-line { display:flex; align-items:center; gap:12px; padding:8px 0; font-size:13.5px; border-top:1px dashed var(--k-border); }
.svc-line:first-of-type { border-top:none; }
.svc-line .nm { flex:1; }
.svc-line .qy { color:var(--k-muted); }
.svc-line .amt { font-weight:600; }
.svc-box-ft { margin-top:10px; font-size:12.5px; }
.svc-box-ft a { color:var(--k-amber-dark,#8f4d08); font-weight:600; }

.summary, .checkout-summary { background:#fff; border:1px solid var(--k-border); border-radius:16px; padding:24px; position:sticky; top:92px; box-shadow:0 4px 18px rgba(37,44,48,.05); }
.summary h3, .checkout-summary h3 { font-family:var(--k-font-head); font-size:19px; margin:0 0 16px; }
.summary-row { display:flex; justify-content:space-between; font-size:14px; padding:8px 0; color:var(--k-mid); }
.summary-row.total { border-top:2px solid var(--k-border); margin-top:8px; padding-top:14px; font-size:19px; font-weight:700; color:var(--k-dark); }

.empty { text-align:center; padding:72px 20px; color:var(--k-muted); }
.empty i { font-size:48px; opacity:.3; margin-bottom:16px; }
.empty p { margin:0 0 20px; font-size:16px; }

/* ════════════════════════════════════════════════════════
   CHECKOUT
   ════════════════════════════════════════════════════════ */
.checkout-layout { display:grid; grid-template-columns:1fr 370px; gap:28px; align-items:start; }
.checkout-form { display:flex; flex-direction:column; gap:18px; }
.co-card { background:#fff; border:1px solid var(--k-border); border-radius:16px; padding:24px 26px; }
.co-card h3 { font-family:var(--k-font-head); font-size:18px; margin:0 0 18px; display:flex; align-items:center; gap:10px; }
.co-card h3 i { color:var(--k-green); }
.co-note { font-size:13px; color:var(--k-muted); margin:0 0 16px; display:flex; gap:8px; align-items:flex-start; line-height:1.5; }
.co-note1 { font-size:13px; color:var(--k-muted); margin:0 0 16px; display:flex; gap:8px; align-items:flex-start; line-height:1.5; }
.co-note i { color:var(--k-green); margin-top:1px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.fg { display:flex; flex-direction:column; }
.fg.full { grid-column:1/-1; }
.fg label { font-size:11px; font-weight:600; margin-bottom:7px; color:var(--k-muted); text-transform:uppercase; letter-spacing:.5px; }
.fg label span { color:var(--k-red,#dc3545); }
.fg label small { color:var(--k-muted); font-weight:400; text-transform:none; letter-spacing:0; }
.fg input { border:1.5px solid var(--k-border2); border-radius:9px; padding:11px 13px; font-family:var(--k-font); font-size:14.5px; outline:none; transition:.15s; background:#fff; }
.fg input:focus { border-color:var(--k-green); box-shadow:0 0 0 3px rgba(136,180,78,.14); }
.fg .err { color:var(--k-red,#dc3545); font-size:12px; margin-top:5px; min-height:1px; }
.sign-wrap { position:relative; }
.sign-wrap canvas { width:100%; height:160px; border:1.5px dashed var(--k-border2); border-radius:12px; background:var(--k-green-xlt,#f7faf2); touch-action:none; cursor:crosshair; display:block; }
.sign-wrap .btn-sm { position:absolute; top:12px; right:12px; }
.card-element { border:1.5px solid var(--k-border2); border-radius:10px; padding:14px; background:#fff; }
.card-errors { color:var(--k-red,#dc3545); font-size:13px; margin-top:8px; min-height:1px; }

.cs-items { border-bottom:1px solid var(--k-border); padding-bottom:14px; margin-bottom:14px; }
.cs-row { display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:6px 0; }
.cs-row .nm { flex:1; }
.cs-row .nm small { color:var(--k-muted); }
.cs-row.svc .nm { color:var(--k-amber-dark,#8f4d08); }
.cs-sep { font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--k-amber-dark,#8f4d08); margin:12px 0 5px; }
.co-secure { text-align:center; font-size:12px; color:var(--k-muted); margin-top:14px; display:flex; align-items:center; justify-content:center; gap:7px; }

.co-loader { position:fixed; inset:0; background:rgba(255,255,255,.72); display:none; align-items:center; justify-content:center; z-index:400; }
.co-loader .spin { width:46px; height:46px; border:4px solid var(--k-border2); border-top-color:var(--k-green); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ════════════════════════════════════════════════════════
   ORDER CONFIRMATION
   ════════════════════════════════════════════════════════ */
.confirm { max-width:560px; margin:34px auto; text-align:center; }
.confirm-ico { font-size:66px; color:var(--k-green); margin-bottom:16px; animation:pop .4s ease; }
@keyframes pop { from{transform:scale(.6);opacity:0} to{transform:none;opacity:1} }
.confirm h1 { font-family:var(--k-font-head); font-size:29px; margin:0 0 8px; }
.confirm-sub { color:var(--k-muted); margin:0 0 6px; }
.confirm-inv { font-size:31px; font-weight:700; color:var(--k-amber-dark,#8f4d08); font-family:var(--k-font-head); margin-bottom:24px; }
.confirm-box { background:#fff; border:1px solid var(--k-border); border-radius:14px; padding:22px 26px; text-align:left; margin-bottom:24px; box-shadow:0 4px 16px rgba(37,44,48,.05); }
.cb-row { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--k-border); font-size:14px; }
.cb-row:last-child { border-bottom:none; }
.cb-row span:first-child { color:var(--k-muted); }
.cb-row span:last-child { font-weight:600; text-align:right; }
.confirm-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:18px; }
.confirm-note { font-size:13px; color:var(--k-muted); line-height:1.6; }

/* ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .cart-layout, .checkout-layout { grid-template-columns:1fr; }
  .summary, .checkout-summary { position:static; }
}
@media (max-width: 760px) {
  .store-header-inner { flex-wrap:wrap; gap:14px; }
  .store-search { order:3; max-width:none; flex-basis:100%; }
  .store-main { padding:22px 16px 52px; }
}
@media (max-width: 600px) {
  .store-page-title { font-size:23px; }
  .form-grid { grid-template-columns:1fr; }
  .cart-line { grid-template-columns:1fr auto; grid-template-areas:"info del" "stepper total"; row-gap:14px; column-gap:14px; }
  .cl-info { grid-area:info; } .cl-del { grid-area:del; justify-self:end; align-self:start; }
  .qty-stepper { grid-area:stepper; } .cl-total { grid-area:total; align-self:center; }
  .list-head { flex-direction:column; }
  .k2-foot { flex-wrap:wrap; }
  .k2-foot .btn-green, .k2-foot .btn-outline { flex:1; }
  .confirm-actions .btn-amber, .confirm-actions .btn-outline { width:100%; }
  .co-card { padding:20px 18px; }
}

/* ════════════════════════════════════════════════════════
   PRODUCT DETAIL (3-card layout + View Details modal)
   ════════════════════════════════════════════════════════ */
.crumb { font-size:13px; color:var(--k-muted); margin-bottom:14px; display:flex; align-items:center; gap:9px; }
.crumb a { color:var(--k-amber-dark,#8f4d08); font-weight:600; }
.crumb a:hover { text-decoration:underline; }
.crumb i { font-size:10px; color:var(--k-muted); }
.pd-title { text-align:center; font-family:var(--k-font-head); font-size:28px; font-weight:700; margin:0 0 28px; }
.pd-grid { display:grid; grid-template-columns:0.95fr 1.05fr 0.9fr; gap:24px; align-items:start; }
.pd-card { background:#fff; border:1px solid var(--k-border); border-radius:16px; }
.pd-imgcard { padding:18px; }
.pd-img { position:relative; border-radius:12px; overflow:hidden; aspect-ratio:1/1; cursor:pointer; background:var(--k-surf); }
.pd-img img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.pd-img:hover img { transform:scale(1.05); }
.pd-view { position:absolute; left:50%; bottom:16px; transform:translateX(-50%); background:rgba(37,44,48,.82); color:#fff; border:none; border-radius:30px; padding:9px 18px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; gap:7px; align-items:center; backdrop-filter:blur(2px); transition:background .15s; }
.pd-view:hover { background:var(--k-dark); }
.pd-info { padding:28px; }
.pd-name { font-family:var(--k-font-head); font-size:25px; font-weight:700; line-height:1.2; }
.pd-bot { color:var(--k-muted); font-style:italic; margin:5px 0 12px; }
.pd-size-line { font-size:14px; color:var(--k-mid); margin-bottom:18px; }
.pd-label { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--k-muted); margin:0 0 7px; }
.pd-select { width:100%; padding:12px 14px; border:1.5px solid var(--k-border2); border-radius:10px; font-family:var(--k-font); font-size:14.5px; background:#fff; }
.pd-select:focus { outline:none; border-color:var(--k-green); box-shadow:0 0 0 3px rgba(136,180,78,.14); }
.pd-pricebox { background:var(--k-green-xlt,#f7faf2); border:1px solid var(--k-green-light,#f0f7e4); border-radius:12px; padding:18px; margin:18px 0; }
.pd-pb-row { display:flex; gap:40px; margin-bottom:14px; }
.pd-pb-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--k-muted); font-weight:600; display:block; margin-bottom:4px; }
.pd-price { font-size:24px; font-weight:700; color:var(--k-amber); }
.pd-stock { font-size:20px; font-weight:700; color:var(--k-dark); }
.pd-qty { display:flex; align-items:center; gap:12px; }
.pd-qty label { font-size:14px; color:var(--k-mid); }
.pd-qty input { width:88px; padding:9px 12px; border:1.5px solid var(--k-border2); border-radius:9px; font-size:15px; font-family:var(--k-font); }
#validation_message { color:var(--k-red); font-size:13px; margin-top:8px; }
.pd-actions { display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.pd-cart { padding:24px; }
.pd-cart-hd { font-family:var(--k-font-head); font-size:17px; font-weight:700; margin-bottom:14px; }
.pd-cart-wrap { overflow-x:auto; }
#cart_table { width:100%; border-collapse:collapse; font-size:13.5px; }
#cart_table th { text-align:left; font-size:11px; color:var(--k-muted); text-transform:uppercase; letter-spacing:.5px; padding:9px 8px; border-bottom:2px solid var(--k-border); }
#cart_table td { padding:12px 8px; border-bottom:1px solid var(--k-border); }
#cart_table .c-center { text-align:center; } #cart_table .c-right { text-align:right; }
.tbl-del-btn { background:var(--k-red-light); color:var(--k-red); border:none; width:34px; height:34px; border-radius:8px; cursor:pointer; }
.tbl-del-btn:hover { background:#fdd; }
.pd-modal { max-width:660px; }
.pd-modal-grid { display:grid; grid-template-columns:210px 1fr; gap:22px; align-items:start; }
.pd-modal-grid img { width:100%; border-radius:12px; aspect-ratio:1/1; object-fit:cover; }
.pd-modal-desc { font-size:14px; color:var(--k-mid); line-height:1.65; margin-bottom:14px; }
.pd-facts { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.pd-facts li { display:flex; justify-content:space-between; gap:12px; font-size:13.5px; border-bottom:1px dashed var(--k-border); padding-bottom:7px; }
.pd-facts span { color:var(--k-muted); }

/* ════════════════════════════════════════════════════════
   CART (table + service selector + summary)
   ════════════════════════════════════════════════════════ */
.cart-grid { display:grid; grid-template-columns:1fr 340px; gap:26px; align-items:start; }
.cart-card { background:#fff; border:1px solid var(--k-border); border-radius:16px; overflow:hidden; }
.cart-card-hd { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--k-border); }
.cc-title { font-family:var(--k-font-head); font-size:18px; font-weight:700; display:flex; align-items:center; gap:9px; }
.cc-title i { color:var(--k-green); }
.cc-count { font-size:13px; color:var(--k-muted); }
.cart-table-wrap { overflow-x:auto; }
.cart-table { width:100%; border-collapse:collapse; }
.cart-table thead th { text-align:left; font-size:11px; color:var(--k-muted); text-transform:uppercase; letter-spacing:.5px; padding:12px 16px; background:var(--k-off,#f8f9fa); border-bottom:1px solid var(--k-border); white-space:nowrap; }
.cart-table thead th.c-center { text-align:center; } .cart-table thead th.c-right { text-align:right; }
.cart-table tbody td { padding:14px 16px; border-bottom:1px solid var(--k-border); font-size:14px; vertical-align:middle; }
.cart-table .c-name { font-weight:600; }
.cart-table .c-center { text-align:center; } .cart-table .c-right { text-align:right; }
.cart-table .svc-tr td { background:var(--k-amber-light,#fff5e8); }
.cart-table .svc-tr .c-name { color:var(--k-amber-dark,#8f4d08); font-weight:600; }
.cart-table tfoot .lbl { font-weight:600; }
.cart-table tfoot .ct-sub td { padding:11px 16px; font-size:13.5px; color:var(--k-mid); }
.cart-table tfoot .ct-total td { padding:14px 16px; font-size:15.5px; font-weight:700; color:var(--k-amber-dark,#8f4d08); border-top:2px solid var(--k-border); }
.cart-table tfoot .ct-tax td { padding:11px 16px; font-size:13.5px; }
.cart-table tfoot .lite { color:var(--k-muted); font-weight:500; }
.row-del { background:none; border:none; color:var(--k-muted); cursor:pointer; padding:7px; border-radius:8px; transition:.15s; }
.row-del:hover { color:var(--k-red); background:var(--k-red-light); }

.svc-select { padding:20px 22px; border-top:1px solid var(--k-border); }
.svc-select-hd { font-weight:700; font-size:14.5px; display:flex; align-items:center; gap:9px; margin-bottom:13px; }
.svc-select-hd i { color:var(--k-dark); }
.svc-pills { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.svc-chip { border:1.5px solid var(--k-border2); background:#fff; border-radius:30px; padding:10px 17px; font-size:13.5px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px; color:var(--k-mid); transition:.15s; }
.svc-chip:hover { border-color:var(--k-green); color:var(--k-green-dark); }
.svc-chip.on { background:var(--k-green-light,#f0f7e4); border-color:var(--k-green); color:var(--k-green-dark); }
.svc-chip i { font-size:14px; }
.svc-det { font-size:12.5px; color:var(--k-amber-dark,#8f4d08); font-weight:600; cursor:pointer; }
.svc-det:hover { text-decoration:underline; }
.svc-hint { font-size:12.5px; color:var(--k-muted); margin:13px 0 0; display:flex; gap:8px; align-items:flex-start; line-height:1.5; }
.svc-hint i { color:var(--k-green); margin-top:1px; }

.cart-actions { display:flex; gap:10px; justify-content:flex-end; padding:16px 22px; border-top:1px solid var(--k-border); flex-wrap:wrap; }
.btn-danger-soft { background:var(--k-red-light); color:var(--k-red); border:none; border-radius:10px; padding:11px 18px; font-weight:600; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.btn-danger-soft:hover { background:#fdd; }

.summary-svcnote { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--k-green-dark); background:var(--k-green-light,#f0f7e4); border-radius:9px; padding:10px 12px; margin:10px 0; }
.svc-line-sum { color:var(--k-amber-dark,#8f4d08); }
.summary-fine { font-size:11.5px; color:var(--k-muted); margin:8px 0 14px; }
.det-rate { width:100%; border-collapse:collapse; font-size:13.5px; }
.det-rate th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--k-muted); padding:8px 6px; border-bottom:1px solid var(--k-border); }
.det-rate th:last-child { text-align:right; }
.det-rate td { padding:10px 6px; border-bottom:1px solid var(--k-border); }
.det-rate td:last-child { text-align:right; font-weight:600; }

/* ════════════════════════════════════════════════════════
   RESPONSIVE — product detail + cart table
   ════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .pd-grid { grid-template-columns:1fr 1fr; }
  .pd-cart { grid-column:1/-1; }
}
@media (max-width: 760px) {
  .pd-grid { grid-template-columns:1fr; }
  .pd-modal-grid { grid-template-columns:1fr; }
  .pd-modal-grid img { max-width:220px; margin:0 auto; }
}
@media (max-width: 640px) {
  .pd-title { font-size:23px; }
  /* stacked cart table */
  .cart-table thead { display:none; }
  .cart-table, .cart-table tbody, .cart-table tfoot, .cart-table tr, .cart-table td { display:block; width:100%; }
  .cart-table tbody tr { border:1px solid var(--k-border); border-radius:12px; margin:12px; padding:4px 0; }
  .cart-table tbody td { border:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 16px; text-align:right; }
  .cart-table tbody td::before { content:attr(data-label); font-weight:600; color:var(--k-muted); font-size:11px; text-transform:uppercase; letter-spacing:.4px; }
  .cart-table tbody td[data-label=""]::before { content:""; }
  .cart-table tbody .c-name { text-align:left; }
  .cart-table .svc-tr .c-hide { display:none; }
  .cart-table tfoot tr { display:flex; justify-content:space-between; padding:4px 16px; }
  .cart-table tfoot td { display:block; border:none; padding:7px 0; }
  .cart-table tfoot td:last-child:empty { display:none; }
  .cart-table tfoot .ct-total td { border-top:none; }
  .pd-pb-row { gap:28px; }
  .cart-actions { justify-content:stretch; }
  .cart-actions .btn-danger-soft, .cart-actions .btn-outline { flex:1; justify-content:center; }
}