/* Shared chrome for the pages added with the direct store (success + policies).
   The original pages carry their own inline <style>; this file deliberately does
   not touch them, it just stops the new pages from each copying that CSS. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green:      #2EAA43;
  --green-dark: #0D5C1A;
  --green-mid:  #1A7A2E;
  --green-light:#E8F5EC;
  --green-pale: #F3FAF5;
  --text:       #1A2E1F;
  --text-muted: #5A7060;
  --white:      #FFFFFF;
  --border:     #D4E8D8;
  --shadow:     rgba(13,92,26,0.10);
}

body {
  font-family: 'Open Sans', sans-serif;
  color: var(--text);
  background: var(--green-pale);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ── header ── */
header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 8px var(--shadow);
}
.header-inner {
  max-width: 1180px; margin: 0 auto; padding: 12px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-badge { width: 46px; height: 35px; flex: none; }
.logo-text {
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.45rem;
  color: var(--green-dark); letter-spacing: -0.5px;
}
/* The cart button sits next to the links; without this the nav is not a flex
   container and the button wraps onto its own line under them. */
.header-inner nav { display: flex; align-items: center; gap: 18px; }
nav a {
  font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 0.9rem;
  color: var(--text); text-decoration: none;
}
nav a:hover { color: var(--green-dark); }
.btn-amazon {
  background: var(--green-dark); color: var(--white) !important;
  padding: 8px 16px; border-radius: 8px; font-weight: 600;
}
.btn-amazon:hover { background: var(--green-mid); }

/* ── page body ── */
.page-wrap { max-width: 820px; margin: 0 auto; padding: 44px 22px 72px; }

h1 {
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 2rem;
  color: var(--green-dark); line-height: 1.2; margin-bottom: 10px;
}
h2 {
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1.15rem;
  color: var(--green-dark); margin: 30px 0 10px;
}
h3 {
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1rem;
  margin: 20px 0 6px;
}
.subtitle { color: var(--text-muted); font-size: 1rem; margin-bottom: 6px; }
.updated { color: var(--text-muted); font-size: .84rem; margin-bottom: 26px; }

.panel {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 14px; padding: 26px 28px; box-shadow: 0 2px 12px var(--shadow);
}
.panel + .panel { margin-top: 18px; }

p { margin-bottom: 12px; }
ul, ol { margin: 0 0 14px 22px; }
li { margin-bottom: 6px; }
a { color: var(--green-dark); }
strong { font-weight: 600; }

table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: .93rem; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
th { background: var(--green-light); font-family: 'Nunito', sans-serif; font-weight: 800; }
.table-scroll { overflow-x: auto; }

.callout {
  background: var(--green-light); border-left: 4px solid var(--green);
  border-radius: 8px; padding: 14px 16px; margin: 6px 0 18px;
}
.callout p:last-child { margin-bottom: 0; }

.btn {
  display: inline-block; background: var(--green-dark); color: var(--white);
  font-family: 'Nunito', sans-serif; font-weight: 800; text-decoration: none;
  padding: 12px 24px; border-radius: 10px; border: none; cursor: pointer;
  font-size: .95rem;
}
.btn:hover { background: var(--green-mid); }
.btn-ghost { background: transparent; color: var(--green-dark); border: 2px solid var(--border); }
.btn-ghost:hover { background: var(--green-light); }

.ref {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: var(--green-light); border: 1px dashed var(--green);
  border-radius: 8px; padding: 10px 14px; display: inline-block;
  font-size: 1rem; color: var(--green-dark); font-weight: 600;
}

/* ── footer ── */
footer {
  background: var(--green-dark); color: rgba(255,255,255,.86);
  padding: 30px 22px; margin-top: 40px;
}
.footer-inner { max-width: 1180px; margin: 0 auto; text-align: center; }
.footer-links {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  justify-content: center; margin-bottom: 14px;
}
.footer-links a { color: rgba(255,255,255,.9); text-decoration: none; font-size: .9rem; }
.footer-links a:hover { color: var(--white); text-decoration: underline; }
.copyright { font-size: .8rem; color: rgba(255,255,255,.6); }

@media (max-width: 560px) {
  h1 { font-size: 1.6rem; }
  .panel { padding: 20px 18px; }
  .header-inner { padding: 10px 16px; }
  nav a:not(.btn-amazon) { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   Shop chrome: category tabs, product grid, footer identity.

   Sizing notes, since the first attempt got this wrong: the shop uses a
   1180px container (the same width as the header) rather than the 820px
   reading width used by the policy pages, and product tiles sit on white
   with no inner padding. Amazon listing photos already carry their own
   generous margins, so adding a tinted panel and padding around them made
   the products float in oversized empty squares.
   ───────────────────────────────────────────────────────────────── */

/* ── Category tabs ── */
.cat-bar { border-top: 1px solid var(--border); background: var(--white); }
.cat-bar-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 22px;
  display: flex; gap: 2px; flex-wrap: wrap;
}
.cat-bar a {
  font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: .855rem;
  color: var(--text-muted); text-decoration: none;
  padding: 13px 14px 11px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.cat-bar a:hover { color: var(--green-dark); }
.cat-bar a[aria-current="page"] {
  color: var(--green-dark); border-bottom-color: var(--green-dark);
}

/* ── Shop layout ── */
.shop-wrap { max-width: 1180px; margin: 0 auto; padding: 34px 22px 72px; }

.crumbs { font-size: .8rem; color: var(--text-muted); margin-bottom: 16px; }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--green-dark); text-decoration: underline; }

.shop-head { max-width: 660px; margin-bottom: 38px; }
.shop-head h1 { font-size: 1.72rem; margin-bottom: 9px; }
.shop-head p { color: var(--text-muted); font-size: .95rem; margin-bottom: 0; }
.shop-meta {
  margin-top: 15px; display: flex; gap: 8px 20px; flex-wrap: wrap;
  font-size: .8rem; color: var(--text-muted);
}
.shop-meta strong { color: var(--text); font-weight: 600; }

/* ── Size sections ── */
.size-section { margin-bottom: 44px; }
.size-section:last-child { margin-bottom: 0; }
.size-head {
  display: flex; align-items: baseline; gap: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 9px; margin-bottom: 20px;
}
.size-head h2 {
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .96rem;
  color: var(--text); margin: 0;
}
.size-head .size-count {
  font-size: .78rem; color: var(--text-muted); font-weight: 400;
  margin-left: auto; white-space: nowrap;
}

/* ── Product grid ── */
.shop-grid {
  display: grid; gap: 24px 20px;
  grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
}

.p-card {
  background: var(--white);
  border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
}
.p-card:hover {
  border-color: #B4D9BE;
  box-shadow: 0 4px 16px rgba(13, 92, 26, .08);
}

.p-card-img {
  display: block; aspect-ratio: 1;
  background: var(--white);
  border-bottom: 1px solid #EFF5F1;
  overflow: hidden;
}
.p-card-img img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transition: transform .3s ease;
}
.p-card:hover .p-card-img img { transform: scale(1.035); }

.p-card-body {
  padding: 13px 14px 14px;
  display: flex; flex-direction: column; gap: 4px; flex: 1;
}
.p-card-title {
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .95rem;
  line-height: 1.35; color: var(--text); text-decoration: none;
}
.p-card-title:hover { color: var(--green-dark); }
.p-card-dims { font-size: .78rem; color: var(--text-muted); line-height: 1.45; }

.p-card-foot {
  margin-top: auto; padding-top: 12px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
}
.p-card-price {
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.02rem;
  color: var(--text);
}
.p-card-unit { font-size: .72rem; color: var(--text-muted); font-weight: 400; display: block; }

/* Quiet by default, brand green on hover: an outline button keeps the grid
   calm when 22 of them are on screen at once. */
.atc-btn {
  background: var(--white); color: var(--green-dark);
  border: 1.5px solid var(--border);
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .78rem;
  padding: 7px 14px; border-radius: 7px; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.atc-btn:hover { background: var(--green-dark); border-color: var(--green-dark); color: var(--white); }
.atc-btn:disabled {
  background: #F4F7F5; color: #9AAF9F; border-color: #E4ECE6; cursor: not-allowed;
}

/* ── Footer identity ── */
.footer-identity {
  border-top: 1px solid rgba(255,255,255,.18);
  padding-top: 16px; margin-top: 4px;
  font-size: .82rem; line-height: 1.6; color: rgba(255,255,255,.78);
}
.footer-identity p { margin-bottom: 2px; }
.footer-identity a { color: rgba(255,255,255,.9); }
.footer-note { margin-top: 8px !important; color: rgba(255,255,255,.6); }

@media (max-width: 720px) {
  .shop-wrap { padding: 24px 16px 56px; }
  .shop-head h1 { font-size: 1.42rem; }
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(154px, 1fr)); gap: 16px 12px; }
  .p-card-title { font-size: .875rem; }
  .p-card-body { padding: 11px 11px 12px; }
  .p-card-foot { padding-top: 9px; }
  .atc-btn { padding: 6px 10px; font-size: .74rem; }
  .cat-bar-inner { padding: 0 12px; }
  .cat-bar a { font-size: .8rem; padding: 11px 10px 9px; }
}

.p-card-sku {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .69rem; color: #8A9E90; letter-spacing: .01em;
}

/* ─────────────────────────────────────────────────────────────────
   Product detail pages (/p/*.html).

   These are generated as static HTML, unlike the old product.html which
   assembled everything from products.js in the browser. A price crawler
   that does not execute JavaScript saw an empty page there, which meant
   Amazon's Competitor Monitoring Tool could not read a price or match the
   page to an ASIN.
   ───────────────────────────────────────────────────────────────── */

.pdp-wrap { max-width: 1180px; margin: 0 auto; padding: 28px 22px 72px; }

.pdp-grid {
  display: grid; gap: 40px;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
}

/* media column */
.pdp-media { position: sticky; top: 86px; }
.pdp-hero-wrap {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; aspect-ratio: 1;
}
.pdp-hero { width: 100%; height: 100%; object-fit: contain; display: block; }
.pdp-thumbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  gap: 8px; margin-top: 10px;
}
.pdp-thumb {
  aspect-ratio: 1; background: var(--white); padding: 0;
  border: 2px solid var(--border); border-radius: 9px;
  overflow: hidden; cursor: pointer;
  transition: border-color .15s;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pdp-thumb:hover { border-color: var(--green); }
.pdp-thumb[aria-current="true"] { border-color: var(--green-dark); }

/* info column */
.pdp-variant {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.pdp-info h1 {
  font-size: 1.42rem; line-height: 1.3; color: var(--text); margin-bottom: 12px;
}
.pdp-highlight { color: var(--text-muted); font-size: .93rem; margin-bottom: 20px; }

.pdp-price-row {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 16px 0; border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); margin-bottom: 20px;
}
.pdp-price {
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.85rem;
  color: var(--text); line-height: 1;
}
.pdp-unit { font-size: .85rem; color: var(--text-muted); }
.pdp-stock { font-size: .82rem; color: var(--green-dark); font-weight: 600; }

.pdp-buy { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pdp-atc {
  background: var(--green-dark); color: var(--white); border: none;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1rem;
  padding: 14px 34px; border-radius: 10px; cursor: pointer;
  transition: background .15s;
}
.pdp-atc:hover { background: var(--green-mid); }
.pdp-atc:disabled { background: #C8D6CC; cursor: not-allowed; }
.pdp-amazon {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 14px 24px; text-decoration: none;
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .92rem;
  color: var(--green-dark); background: var(--white);
}
.pdp-amazon:hover { background: var(--green-light); }
.pdp-ship-note { font-size: .8rem; color: var(--text-muted); margin-bottom: 22px; }

/* specification table -- also where the identifiers live */
.pdp-specs { width: 100%; border-collapse: collapse; font-size: .875rem; }
.pdp-specs th, .pdp-specs td {
  text-align: left; padding: 9px 2px; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.pdp-specs th { width: 40%; font-weight: 600; color: var(--text-muted); font-family: 'Open Sans', sans-serif; background: none; }
.pdp-specs td { color: var(--text); }
.pdp-specs .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; }

.pdp-section { margin-top: 34px; }
.pdp-section h2 { font-size: 1.02rem; margin-bottom: 12px; }

@media (max-width: 860px) {
  .pdp-grid { grid-template-columns: 1fr; gap: 26px; }
  .pdp-media { position: static; }
  .pdp-wrap { padding: 20px 16px 56px; }
  .pdp-info h1 { font-size: 1.2rem; }
  .pdp-price { font-size: 1.55rem; }
  .pdp-atc { flex: 1; padding: 14px 20px; }
}