/* ==========================================================================
   earth2earth — Shop components
   Extends site.css (copied unchanged from the reference site). Uses only
   design-system tokens. Covers: two-row header, category tiles, sidebar,
   product cards, product detail, contact/order, legal pages.
   ========================================================================== */

.icon { width: 1em; height: 1em; flex: none; }

/* Without JS everything is visible (no scroll-reveal) */
.no-js .reveal { opacity: 1; transform: none; }

/* ---- Header: logo row + navigation row ---------------------------------- */
.shop-header .header-top { min-height: 80px; }
.shop-header .header-actions { gap: var(--space-5); }
.header-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--fw-black);
  color: var(--text-strong); font-size: var(--fs-sm); white-space: nowrap; }
.header-phone svg { width: 16px; height: 16px; color: var(--brand-olive); }
.header-phone:hover { color: var(--brand-brown-700); }

.shop-nav { border-top: 1px solid var(--border-subtle); background: var(--surface-card); }
.site-header .shop-nav .wrap { min-height: 0; display: flex; align-items: stretch; gap: var(--space-5);
  flex-wrap: wrap; }
.shop-nav a {
  font-weight: var(--fw-black); font-size: var(--fs-sm); letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-strong); position: relative; padding: 14px 0; white-space: nowrap;
}
.shop-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brand-lime);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out);
}
.shop-nav a:hover { color: var(--brand-brown); }
.shop-nav a:hover::after, .shop-nav a[aria-current="page"]::after { transform: scaleX(1); }
.shop-nav a.nav-sale { color: var(--status-danger); }
.shop-nav .nav-cta-mobile { display: none; }
.shop-nav a.btn--primary { color: var(--text-on-brand); padding: 11px 18px; }
.shop-nav a.btn--primary::after { display: none; }

.nav-toggle .i-close { display: none; }
.site-header.menu-open .nav-toggle .i-open { display: none; }
.site-header.menu-open .nav-toggle .i-close { display: block; }

@media (max-width: 1100px) {
  .site-header .shop-nav .wrap { gap: var(--space-4); }
  .shop-nav a { font-size: var(--fs-xs); }
  .header-phone { display: none; }
}
@media (max-width: 860px) {
  .shop-header .header-top { min-height: 68px; }
  .site-header .logo img { height: 38px; }
  /* JS on: collapsible menu */
  .js .shop-nav { display: none; }
  .js .site-header.menu-open .shop-nav { display: block; position: absolute; top: 100%; left: 0; right: 0;
    box-shadow: var(--shadow-md); border-bottom: 1px solid var(--border-subtle); max-height: calc(100vh - 68px); overflow-y: auto; }
  .site-header .shop-nav .wrap { flex-direction: column; gap: 0; padding-bottom: var(--space-5); }
  .shop-nav a { padding: 14px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-base); text-transform: none; letter-spacing: 0; }
  .shop-nav a::after { display: none; }
  .shop-nav a[aria-current="page"] { color: var(--brand-olive); }
  .shop-nav .nav-cta-mobile { display: inline-flex; margin-top: var(--space-5); border-bottom: 0; }
  /* JS off: nav always visible as a list, no toggle button */
  .no-js .nav-toggle { display: none; }
}

/* ---- Breadcrumb --------------------------------------------------------- */
.breadcrumb { margin-bottom: var(--space-6); font-size: var(--fs-sm); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); }
.breadcrumb li[aria-current] { color: var(--text-strong); font-weight: var(--fw-bold); }
.breadcrumb svg { width: 14px; height: 14px; color: var(--border-default); }

/* ---- Home: hero + category tiles ---------------------------------------- */
.shop-hero .hero-media { min-height: 440px; }
.shop-hero .hero-media picture { position: absolute; inset: 0; }
.shop-hero .hero-copy { padding-top: var(--space-8); padding-bottom: var(--space-8); }

.tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.cat-tile { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  overflow: hidden; display: flex; flex-direction: column; color: inherit; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.cat-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); color: inherit; }
.cat-tile .ct-media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface-sunken); }
.cat-tile .ct-media img, .cat-tile .ct-media .img-placeholder { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out); }
.cat-tile:hover .ct-media img { transform: scale(1.04); }
.cat-tile .ct-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.cat-tile h3 { font-size: var(--fs-h4); font-weight: var(--fw-black); line-height: var(--lh-snug); }
.cat-tile .ct-count { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--fw-black); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .04em; color: var(--brand-olive); }
.cat-tile .ct-count svg { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); }
.cat-tile:hover .ct-count svg { transform: translateX(4px); }
.cat-tile--sale h3 { color: var(--status-danger); }

.value-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.center-cta { text-align: center; margin-top: var(--space-7); }

/* ---- Shop layout: sidebar + content -------------------------------------- */
section.block.shop-block { padding-top: var(--space-6); }
.shop-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-7); align-items: start; }

.shop-sidebar { position: sticky; top: 140px; background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-xs); }
.shop-sidebar .sb-title { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-black); color: var(--text-strong); margin-bottom: var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 2px solid var(--brand-lime); }
.shop-sidebar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.shop-sidebar a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-body); font-size: var(--fs-base); line-height: var(--lh-snug); }
.shop-sidebar a:hover { background: var(--green-50); color: var(--text-strong); }
.shop-sidebar a[aria-current="page"] { background: var(--green-50); color: var(--text-strong); font-weight: var(--fw-black);
  box-shadow: inset 3px 0 0 var(--brand-lime); }
.shop-sidebar .sb-all a { font-weight: var(--fw-bold); color: var(--text-strong); }
.shop-sidebar .sb-count { font-size: var(--fs-xs); color: var(--text-muted); background: var(--surface-sunken);
  border-radius: var(--radius-pill); padding: 2px 8px; font-weight: var(--fw-bold); }

.shop-head { margin-bottom: var(--space-6); }
.shop-head h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); line-height: var(--lh-tight); }
.shop-head .sh-meta { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.shop-head .sh-intro { margin: var(--space-3) 0 0; font-size: var(--fs-lg); font-weight: var(--fw-light); max-width: 46em; }
.empty-note { color: var(--text-muted); }

.product-group { margin-bottom: var(--space-8); scroll-margin-top: 150px; }
.product-group:last-child { margin-bottom: 0; }
.pg-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.pg-head h2 { font-size: var(--fs-h3); font-weight: var(--fw-black); }
.pg-head a { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-black); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .04em; }
.pg-head a svg { width: 15px; height: 15px; }

/* ---- Product card -------------------------------------------------------- */
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-card { position: relative; background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; color: inherit;
  box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
.product-card .pc-media { position: relative; aspect-ratio: 1 / 1; background: #fff; display: grid; place-items: center;
  border-bottom: 1px solid var(--border-subtle); }
.product-card .pc-media picture { display: contents; }
.product-card .pc-media img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-4); }
.product-card .pc-body { padding: var(--space-4) var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card .pc-label { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--brand-olive);
  text-transform: uppercase; letter-spacing: var(--ls-wide); }
.product-card h3 { font-size: var(--fs-base); font-weight: var(--fw-black); line-height: var(--lh-snug); color: var(--text-strong); }
.product-card .pc-meta { font-size: var(--fs-xs); color: var(--text-muted); }
.product-card .pc-price { margin-top: auto; padding-top: var(--space-2); color: var(--text-price); font-size: var(--fs-sm); }
.product-card .pc-price strong { font-size: var(--fs-lg); font-weight: var(--fw-black); }
.product-card .pc-piece { font-size: var(--fs-sm); color: var(--text-muted); }

.sale-badge { position: absolute; top: 12px; left: 12px; background: var(--status-danger); color: #fff;
  font-weight: var(--fw-black); font-size: var(--fs-sm); padding: 4px 10px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm); }
.sale-badge--lg { top: 18px; left: 18px; font-size: var(--fs-lg); padding: 8px 16px; }

.img-placeholder { display: grid; place-items: center; width: 100%; height: 100%; min-height: 160px;
  background: var(--surface-sunken); color: var(--border-default); }
.img-placeholder svg { width: 48px; height: 48px; }

/* ---- Product detail ----------------------------------------------------- */
.product-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: start; }
.pd-media { position: relative; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; box-shadow: var(--shadow-sm); }
.pd-media picture { display: contents; }
.pd-media img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-6); }
.pd-info { display: flex; flex-direction: column; gap: var(--space-4); }
.pd-info h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); line-height: var(--lh-tight); }
.pd-number { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }

.price-block { background: var(--surface-card); border: 1px solid var(--border-subtle); border-left: 4px solid var(--brand-lime);
  border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: 4px; }
.price-block .pb-box { color: var(--text-price); font-size: var(--fs-lg); }
.price-block .pb-box strong { font-size: var(--fs-h2); font-weight: var(--fw-black); }
.price-block .pb-piece { font-size: var(--fs-lg); color: var(--text-strong); font-weight: var(--fw-bold); }
.pb-note { margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.pb-sale { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: var(--status-danger-bg);
  color: var(--status-danger); font-weight: var(--fw-black); font-size: var(--fs-sm); padding: 4px 12px;
  border-radius: var(--radius-pill); margin-bottom: var(--space-2); }

.pd-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.pd-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-sm); }
.pd-facts li { display: flex; gap: 10px; align-items: center; }
.pd-facts svg { width: 18px; height: 18px; color: var(--brand-olive); }
.pd-description { border-top: 1px solid var(--border-subtle); padding-top: var(--space-5); }
.pd-description h2 { font-size: var(--fs-h4); font-weight: var(--fw-black); margin-bottom: var(--space-3); }
.pd-description p { margin: 0 0 var(--space-3); }

.related { margin-top: var(--space-8); }

/* ---- Contact / order ---------------------------------------------------- */
.rules-h { text-transform: uppercase; letter-spacing: var(--ls-eyebrow); font-weight: var(--fw-black);
  font-size: var(--fs-h3); color: var(--text-strong); white-space: nowrap; }
.contact-card .cc-text { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--brand-olive); }
.order-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-6); align-items: stretch; }
.order-card, .shipping-card { text-align: left; }
.order-card h2, .shipping-card h2 { font-size: var(--fs-h3); font-weight: var(--fw-black); line-height: var(--lh-snug); }
.order-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.order-steps li { display: flex; gap: var(--space-4); align-items: flex-start; }
.order-steps .ps-num { width: 38px; height: 38px; font-size: var(--fs-base); margin: 0; flex: none; }
.order-steps strong { color: var(--text-strong); font-weight: var(--fw-black); }
.order-steps p { margin: 2px 0 0; }
.order-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); }
.shipping-card .checklist li { font-size: var(--fs-base); }
.shipping-card .checklist li svg { width: 22px; height: 22px; }

/* ---- Legal + 404 --------------------------------------------------------- */
.legal { max-width: 820px; }
.legal h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); margin-bottom: var(--space-6); }
.legal h2 { font-size: var(--fs-h3); font-weight: var(--fw-black); margin: var(--space-7) 0 var(--space-3); }
.legal h3 { font-size: var(--fs-h4); font-weight: var(--fw-black); margin: var(--space-5) 0 var(--space-2); }
.legal p, .legal li { overflow-wrap: anywhere; }
.not-found { text-align: center; max-width: 720px; display: flex; flex-direction: column; gap: var(--space-4); align-items: center; }
.not-found h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); }
.nf-links { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

.footer-shipping li { font-size: var(--fs-sm); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .product-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .shop-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  /* Sidebar becomes a horizontal, scrollable row of chips */
  .shop-sidebar { position: static; padding: 0; border: 0; box-shadow: none; background: transparent; }
  .shop-sidebar .sb-title { display: none; }
  .shop-sidebar ul { flex-direction: row; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-2);
    scrollbar-width: thin; }
  .shop-sidebar a { white-space: nowrap; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 8px 14px; }
  .shop-sidebar a[aria-current="page"] { box-shadow: none; border-color: var(--brand-lime); }
  .product-detail { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .pd-media { max-width: 560px; width: 100%; }
  .order-grid { grid-template-columns: minmax(0, 1fr); }
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-grid--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .product-grid, .product-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .product-card .pc-body { padding: var(--space-3); }
  .shop-head h1, .pd-info h1, .legal h1 { font-size: var(--fs-h2); }
  .shop-hero .hero-media { min-height: 260px; }
  .rules-h { font-size: var(--fs-h4); white-space: normal; }
}
@media (max-width: 420px) {
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .cat-tile .ct-body { padding: var(--space-3); }
  .cat-tile h3 { font-size: var(--fs-base); }
  .pd-actions .btn { width: 100%; }
}