/* ============================================================
   Pickup Express — Theme C: Clean White + Vibrant Orange / Navy
   Shared stylesheet for index.html and product.html
   ============================================================ */
:root{
  --bg:#f7f8fa;
  --surface:#ffffff;
  --field:#f5f7fa;
  --border:#e5e8ed;
  --text:#141a22;
  --muted:#66707f;
  --faint:#c3c9d1;
  --brand:#17263f;
  --brand-soft:#b9c4d6;
  --on-brand:#ffffff;
  --logo-accent:#f5a344;
  --accent:#e97b13;
  --accent-ink:#c4640a;
  --accent-soft:#fdeeda;
  --price:#b12704;
  --success:#17803d;
  --success-bg:#e6f5eb;
  --success-border:#bfe4cc;
  --success-deep:#11602e;
  --warn-bg:#fff8e6;
  --warn-border:#f2dd9a;
  --warn-ink:#7a5d00;
  --danger:#b12704;
  --danger-bg:#fdecea;
  --danger-border:#f5c6c0;
  --shadow:0 1px 2px rgba(20,26,34,.06), 0 3px 10px rgba(20,26,34,.05);
  --shadow-hover:0 4px 16px rgba(20,26,34,.12);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{display:block;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============ HEADER / FOOTER ============ */
header{position:sticky;top:0;z-index:20;background:var(--brand);color:var(--on-brand);}
.nav-wrap{
  max-width:1120px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;padding:12px 24px;
}
.logo{font-weight:800;font-size:18px;letter-spacing:.2px;}
.logo span{color:var(--logo-accent);}
nav{display:flex;align-items:center;}
nav a{
  margin-left:24px;font-size:13.5px;font-weight:500;color:var(--brand-soft);
  padding:4px 0;border-bottom:2px solid transparent;transition:color .15s;
}
nav a:hover{color:var(--on-brand);}
nav a.active{color:var(--on-brand);border-bottom-color:var(--logo-accent);}

footer{background:var(--brand);color:var(--brand-soft);padding:26px 24px;text-align:center;font-size:12.5px;margin-top:24px;}
footer .fname{color:var(--on-brand);font-weight:800;font-size:14px;}
footer a{color:var(--logo-accent);font-weight:600;}

/* ============ SECTION SHELL ============ */
section{max-width:1120px;margin:0 auto;padding:44px 24px;}
.section-tag{color:var(--accent-ink);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;}
h2{font-size:22px;margin:4px 0 6px;letter-spacing:-.01em;}
.section-sub{color:var(--muted);font-size:13.5px;max-width:560px;margin:0 0 4px;line-height:1.55;}

/* ============ HERO ============ */
.hero{border-bottom:1px solid var(--border);background:var(--surface);}
.hero-inner{max-width:820px;margin:0 auto;padding:38px 24px 32px;text-align:center;}
.hero-kicker{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent-soft);color:var(--accent-ink);
  font-size:12px;font-weight:700;letter-spacing:.04em;
  padding:5px 12px;border-radius:20px;margin-bottom:14px;
}
.hero h1{font-size:33px;line-height:1.16;margin:0 auto 12px;letter-spacing:-.015em;max-width:680px;}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero p{color:var(--muted);font-size:15px;line-height:1.6;max-width:600px;margin:0 auto;}
.hero-buttons{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.btn-primary{
  background:var(--accent);color:#fff;padding:11px 22px;border-radius:8px;
  font-weight:700;font-size:14px;display:inline-block;box-shadow:var(--shadow);
  transition:filter .15s;border:none;cursor:pointer;
}
.btn-primary:hover{filter:brightness(1.06);}
.btn-secondary{
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  padding:11px 22px;border-radius:8px;font-weight:600;font-size:14px;display:inline-block;
}
.hero-points{
  display:flex;gap:0;margin-top:22px;flex-wrap:wrap;justify-content:center;
  border-top:1px solid var(--border);padding-top:16px;
}
.hero-points div{
  font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;
  padding:0 18px;border-right:1px solid var(--border);
}
.hero-points div:last-child{border-right:none;}
.hero-points b{color:var(--success);font-size:13px;}

/* ============ FILTER BAR ============ */
.filter-bar{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;
  box-shadow:var(--shadow);
}
.search-input{
  flex:1 1 220px;display:flex;align-items:center;gap:8px;
  border:1px solid var(--border);border-radius:8px;padding:0 12px;background:var(--field);
}
.search-input input{
  border:none;background:transparent;outline:none;padding:9px 0;
  font-size:13.5px;color:var(--text);width:100%;
}
.search-input input::placeholder{color:var(--muted);}
.filter-select{
  border:1px solid var(--border);border-radius:8px;padding:8px 10px;
  background:var(--field);color:var(--text);font-size:12.5px;
  max-width:230px;cursor:pointer;
}
.filter-count{font-size:12.5px;color:var(--muted);margin-left:auto;white-space:nowrap;}
.btn-clear{
  border:1px solid var(--border);background:var(--surface);border-radius:8px;
  padding:8px 12px;font-size:12.5px;color:var(--muted);cursor:pointer;
}
.btn-clear:hover{color:var(--text);}

/* ============ PRODUCT GRID ============ */
.product-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:16px;margin-top:20px;
}
.product-card{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);transition:box-shadow .15s, transform .15s;
  display:flex;flex-direction:column;
}
.product-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);}
.product-photo{
  height:158px;background:var(--field);
  display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:12.5px;
  border-bottom:1px solid var(--border);position:relative;overflow:hidden;
}
.product-photo img{width:100%;height:100%;object-fit:cover;}
.photo-save{
  position:absolute;top:8px;left:8px;background:var(--success);color:#fff;
  font-size:11px;font-weight:800;padding:3px 8px;border-radius:6px;letter-spacing:.02em;
  box-shadow:0 1px 4px rgba(0,0,0,.18);z-index:1;
}
.product-body{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1;}
.product-body h3{margin:0 0 4px;font-size:14px;line-height:1.35;font-weight:700;}
.price-row{display:flex;align-items:baseline;gap:7px;margin:4px 0 6px;}
.price-new{font-size:18px;font-weight:800;color:var(--price);}
.price-compare{font-size:12.5px;color:var(--faint);text-decoration:line-through;}
.variant-row{display:flex;align-items:center;gap:8px;margin:1px 0 7px;flex-wrap:wrap;min-height:18px;}
.variant-label{font-size:11px;color:var(--muted);}
.swatch-group{display:flex;gap:5px;}
.swatch{
  width:15px;height:15px;border-radius:50%;border:1px solid var(--border);
  display:inline-block;padding:0;background-clip:padding-box;
}
.swatch.ring{box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--accent);}
.size-pill{font-size:10.5px;border:1px solid var(--border);border-radius:5px;padding:2px 7px;color:var(--muted);}
.size-pill.active{border-color:var(--accent);color:var(--accent-ink);font-weight:700;background:var(--accent-soft);}
.product-body p.desc{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0 0 10px;flex:1;}
.btn-outline{
  border:1px solid var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:7px;
  font-size:12.5px;font-weight:700;display:block;text-align:center;transition:background .15s;
}
.btn-outline:hover{background:var(--accent-soft);}
.empty-state{
  grid-column:1/-1;text-align:center;color:var(--muted);font-size:13.5px;
  padding:40px 20px;background:var(--surface);border:1px dashed var(--border);border-radius:12px;
}

.as-is-note{
  background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:10px;
  padding:12px 16px;margin-top:22px;font-size:13px;color:var(--warn-ink);line-height:1.6;
}

/* ============ WHY US / HOW IT WORKS ============ */
.trust-band{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.trust-band section{padding:36px 24px;}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;}
.value-card{
  background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:16px 18px;
  display:flex;gap:12px;align-items:flex-start;
}
.value-card .icon{
  font-size:17px;flex-shrink:0;background:var(--accent-soft);
  width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
}
.value-card h3{font-size:14px;margin:1px 0 4px;}
.value-card p{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0;}

.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:18px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);
}
.step{padding:18px 18px 16px;border-right:1px solid var(--border);position:relative;}
.step:last-child{border-right:none;}
.step .num{
  width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;margin-bottom:9px;
}
.step h3{font-size:13.5px;margin:0 0 4px;}
.step p{font-size:12px;color:var(--muted);margin:0;line-height:1.5;}

.warehouse-strip{
  background:var(--brand);color:var(--on-brand);border-radius:12px;padding:18px 22px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:22px;
}
.warehouse-strip h3{margin:0 0 3px;font-size:14px;}
.warehouse-strip p{margin:0;font-size:12.5px;color:var(--brand-soft);}

/* ============ PRODUCT DETAIL ============ */
main{max-width:1120px;margin:0 auto;padding:22px 24px 64px;}
.breadcrumb{font-size:12.5px;color:var(--muted);margin-bottom:16px;}
.breadcrumb a{color:var(--accent-ink);font-weight:600;}
.product-top{display:grid;grid-template-columns:1fr .92fr;gap:36px;align-items:start;}

.gallery-main{
  border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);height:360px;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);position:relative;
}
.gallery-main img{width:100%;height:100%;object-fit:cover;}
.gallery-save{
  position:absolute;top:12px;left:12px;background:var(--success);color:#fff;
  font-size:12px;font-weight:800;padding:4px 10px;border-radius:7px;box-shadow:0 1px 4px rgba(0,0,0,.18);z-index:1;
}
.gallery-thumbs{display:flex;gap:9px;margin-top:10px;flex-wrap:wrap;}
.thumb{
  width:60px;height:60px;border-radius:8px;border:2px solid var(--border);overflow:hidden;
  cursor:pointer;background:var(--surface);padding:0;
}
.thumb.active{border-color:var(--accent);}
.thumb img{width:100%;height:100%;object-fit:cover;}

.block-title{font-size:15px;font-weight:800;margin:26px 0 10px;}
.about-content{font-size:13.5px;color:var(--muted);line-height:1.65;}
.about-content p{margin:0 0 10px;}
.about-content strong{color:var(--text);}
.spec-table{width:100%;border-collapse:collapse;margin-top:4px;}
.spec-table td{padding:7px 0;border-bottom:1px solid var(--border);font-size:13px;vertical-align:top;}
.spec-table td:first-child{color:var(--muted);width:150px;}
.spec-table td:last-child{color:var(--text);font-weight:600;}

/* buy box */
.stock-tag{
  display:inline-block;background:var(--success-bg);color:var(--success-deep);
  font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:6px;margin-bottom:9px;
  border:1px solid var(--success-border);
}
h1.product-title{font-size:23px;margin:0 0 8px;line-height:1.25;letter-spacing:-.01em;}
.price-block{display:flex;align-items:baseline;gap:9px;margin-bottom:14px;flex-wrap:wrap;}
.price-now{font-size:26px;font-weight:800;color:var(--price);}
.price-was{font-size:15px;color:var(--faint);text-decoration:line-through;}
.save-tag{background:var(--success-bg);color:var(--success-deep);font-size:12px;font-weight:800;padding:3px 9px;border-radius:6px;}
.ref-group{
  display:inline-flex;align-items:baseline;gap:7px;
  padding:3px 10px;border:1px dashed var(--border);border-radius:8px;background:var(--field);
}
.ref-group .price-was{font-size:14px;}
.ref-group a{
  font-size:11.5px;font-weight:700;color:var(--accent-ink);letter-spacing:.04em;
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;
}
.ref-group a:hover{text-decoration-style:solid;}

.option-block{margin-bottom:14px;}
.option-block .label{font-size:12.5px;font-weight:700;margin-bottom:7px;}
.option-block .label .sel{font-weight:400;color:var(--muted);}
.product-top .swatch-group{display:flex;gap:9px;}
.product-top .swatch{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);cursor:pointer;}
.product-top .swatch.ring{box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--accent);}
.size-row{display:flex;gap:9px;flex-wrap:wrap;}
.size-btn{
  font-size:12.5px;border:1px solid var(--border);border-radius:7px;padding:7px 13px;
  color:var(--text);background:var(--surface);cursor:pointer;
}
.size-btn.active{border-color:var(--accent);color:var(--accent-ink);font-weight:700;background:var(--accent-soft);}

/* ============ FORMS ============ */
.form-card{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px;
  box-shadow:var(--shadow);margin-top:14px;
}
.form-card.secondary{background:var(--field);}
.form-head{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.form-head .fh-title{font-size:14.5px;font-weight:800;}
.form-sub{font-size:12px;color:var(--muted);margin:0 0 12px;line-height:1.5;}
.form-row{margin-bottom:11px;}
.form-row label{display:block;font-size:12px;font-weight:700;margin-bottom:4px;color:var(--text);}
.form-row input,.form-row select,.form-row textarea{
  width:100%;border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-size:13px;
  color:var(--text);background:var(--field);font-family:inherit;
}
.form-card.secondary .form-row input,
.form-card.secondary .form-row select,
.form-card.secondary .form-row textarea{background:var(--surface);}
.form-row textarea{resize:vertical;min-height:60px;}
.form-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.slot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.slot{
  border:1px solid var(--border);border-radius:7px;padding:7px 2px;text-align:center;
  font-size:12px;color:var(--muted);background:var(--field);cursor:pointer;
}
.form-card.secondary .slot{background:var(--surface);}
.slot.selected{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);font-weight:700;}
.slot:disabled{color:var(--faint);text-decoration:line-through;background:var(--bg);cursor:not-allowed;}
.hint{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.5;}
.form-card .btn-primary{padding:12px 24px;border-radius:9px;font-weight:800;font-size:14.5px;display:block;width:100%;}
.btn-ask{
  background:var(--brand);color:var(--on-brand);padding:11px 24px;border-radius:9px;font-weight:700;font-size:13.5px;
  display:block;text-align:center;width:100%;border:none;cursor:pointer;
}
.btn-ask:hover{filter:brightness(1.15);}
button[disabled]{opacity:.6;cursor:progress;}
.confirm-box{
  margin-top:12px;background:var(--success-bg);border:1px solid var(--success-border);
  border-radius:10px;padding:12px 14px;font-size:12.5px;color:var(--success-deep);line-height:1.6;
}
.error-box{
  margin-top:12px;background:var(--danger-bg);border:1px solid var(--danger-border);
  border-radius:10px;padding:11px 14px;font-size:12.5px;color:var(--danger);line-height:1.6;
}
.code-pill{
  display:inline-block;background:var(--success-deep);color:#fff;font-weight:700;
  letter-spacing:1px;padding:3px 10px;border-radius:6px;margin-top:3px;font-size:12px;
}
.footnote{font-size:11px;color:var(--muted);margin-top:8px;text-align:center;line-height:1.5;}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.warehouse-mini{
  margin-top:14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:12px 15px;font-size:12.5px;color:var(--muted);line-height:1.6;box-shadow:var(--shadow);
}
.warehouse-mini strong{color:var(--text);}
.detail-as-is{margin-top:16px;font-size:12.5px;}

/* ============ RELATED ============ */
.related-title{font-size:17px;margin:44px 0 14px;}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.related-card{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);transition:box-shadow .15s, transform .15s;display:block;
}
.related-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);}
.related-photo{
  height:110px;background:var(--field);border-bottom:1px solid var(--border);overflow:hidden;
}
.related-photo img{width:100%;height:100%;object-fit:cover;}
.related-card .rb{padding:11px 13px 13px;}
.related-card h3{font-size:13px;margin:0 0 4px;font-weight:600;}
.related-card .rp{font-size:14px;font-weight:800;color:var(--price);}

/* ============ LOADING / 404 ============ */
.page-msg{
  max-width:640px;margin:60px auto;text-align:center;color:var(--muted);font-size:14px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:36px 24px;
}
.page-msg h2{color:var(--text);}

@media(max-width:820px){
  .value-grid,.product-top{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .step:nth-child(2n){border-right:none;}
  .step{border-bottom:1px solid var(--border);}
  .form-cols{grid-template-columns:1fr;}
  .related-grid{grid-template-columns:repeat(2,1fr);}
  nav a{margin-left:14px;}
  .hero h1{font-size:27px;}
  .filter-count{margin-left:0;}
  .filter-select{max-width:none;flex:1 1 140px;}
}