/*
 * File: components.css
 * Purpose: Styles for the cart drawer, size picker, admin panel and shared messages.
 * Taken unchanged from siteold.css (the September stylesheet these components were built with);
 * site.css (October rewrite) does not contain them. Only rules missing from site.css are included.
 */

:root {
  --ivory: #f8f7f4;
  --line: #e5e3de;
  --taupe: #b7a58a;
  --danger: #8b3e3e;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --container: 1320px;
}

.cart-btn { position: relative; }

.cart-count { position: absolute; right: 2px; top: 1px; min-width: 16px; height: 16px; padding-inline: 3px; border-radius: 999px; display: grid; place-items: center; background: var(--ink); color: white; font-size: 9px; }

.admin-trigger { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--ink); padding: 10px 14px; background: transparent; }

.eyebrow { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; }

.button.light { background: white; color: var(--ink); border-color: white; }

.button.ghost { background: transparent; color: var(--ink); }

.colors-manager {
      grid-column: 1 / -1;
      margin-top: 14px;
      padding: 14px;
      border: 1px solid var(--line);
      background: var(--paper);
    }

.colors-manager h4 {
      margin: 0 0 10px;
    }

.color-admin-row {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }

.color-admin-row img {
      width: 42px;
      height: 42px;
      object-fit: cover;
      border-radius: 4px;
    }

.empty-state, .error-state { grid-column: 1 / -1; padding: 70px 20px; text-align: center; color: var(--muted); border: 1px solid var(--line); background: var(--paper); }

.error-state { color: var(--danger); }

.admin-panel { background: var(--paper); border-bottom: 1px solid var(--line); }

.admin-inner { padding: 34px 0; }

.admin-title { font-family: var(--serif); font-size: 34px; font-weight: 400; margin-bottom: 22px; }

.admin-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.field { display: grid; gap: 7px; }

.field.full { grid-column: 1 / -1; }

.field label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line); background: var(--ivory); padding: 12px 13px; outline: 0; border-radius: 0; }

.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); }

.admin-form-actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }

.admin-message { margin-bottom: 18px; padding: 12px 14px; font-size: 12px; border: 1px solid var(--line); }

.admin-message.success { color: #345d42; background: #f2f7f2; }

.admin-message.error { color: var(--danger); background: #fbf3f3; }

.admin-card-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }

.small-btn { flex: 1; min-height: 38px; border: 1px solid var(--line); background: var(--paper); text-transform: uppercase; letter-spacing: .1em; font-size: 9px; }

.small-btn.danger { color: var(--danger); }

.color-palette {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin: 12px 0 14px;
    }

.palette-color {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid rgba(20,20,20,.25);
      cursor: pointer;
      padding: 0;
      position: relative;
      box-shadow: 0 0 0 2px #fff inset;
    }

.palette-color:hover {
      transform: scale(1.08);
    }

.palette-color.selected {
      outline: 2px solid var(--ink);
      outline-offset: 3px;
    }

.palette-color[title="White"] {
      border-color: #999;
    }

.custom-color-row {
      display: grid;
      grid-template-columns: auto 170px 1fr;
      gap: 8px;
      align-items: center;
      margin-bottom: 12px;
    }

.custom-color-label {
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
      white-space: nowrap;
    }

.selected-color-preview {
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 34px;
      font-size: 11px;
      color: var(--muted);
    }

.selected-color-dot {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1px solid rgba(20,20,20,.25);
      display: inline-block;
    }

@media (max-width: 700px) {
      .custom-color-row {
        grid-template-columns: 1fr;
      }
    }

.size-system-buttons {display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}

.size-system-btn,.size-option-btn {border:1px solid #ccc;background:#fff;padding:10px 16px;border-radius:6px;cursor:pointer}

.size-system-btn.active,.size-option-btn.active {border-color:#111;background:#111;color:#fff}

.size-options {display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px}

.size-option-btn {min-width:52px}

.size-option-btn:hover,.size-system-btn:hover {border-color:#111}

.selected-size-label {margin:12px 0 16px;font-weight:600}

.sizes-manager {grid-column:1/-1;margin-top:8px;padding:18px;border:1px solid #ddd6ce;border-radius:14px;background:#faf8f5}

.sizes-manager h4 {margin:0 0 12px}

.size-scale-editor {padding:14px;margin-bottom:12px;border:1px solid #e4ded7;border-radius:12px;background:#fff}

.size-scale-head {display:grid;grid-template-columns:minmax(140px,1fr) minmax(120px,180px) auto;gap:10px;align-items:center;margin-bottom:10px}

.size-row {display:grid;grid-template-columns:minmax(90px,1fr) 110px 100px auto;gap:8px;align-items:center;margin-top:8px}

.size-row input,.size-row select,.size-scale-head input,.size-scale-head select {width:100%;box-sizing:border-box}

.size-choice {border:1px solid #cfc7be;background:#fff;border-radius:999px;padding:7px 12px;cursor:pointer}

.size-choice.active {font-weight:700}

.size-choice:disabled {opacity:.42;cursor:not-allowed;text-decoration:line-through}

.size-scale-buttons,.size-value-buttons {display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}

.size-selection-note {margin-top:8px;font-size:13px;opacity:.72}

.size-modal-backdrop {position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.42)}

.size-modal-backdrop.open {display:flex}

.size-modal {width:min(520px,100%);max-height:85vh;overflow:auto;padding:22px;border-radius:18px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.2)}

.size-modal-head {display:flex;justify-content:space-between;gap:12px;align-items:center}

.size-modal-close {border:0;background:transparent;font-size:26px;cursor:pointer}

@media(max-width:700px) {.size-scale-head,.size-row{grid-template-columns:1fr}}

.size-modal-overlay {
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(0,0,0,.55) !important;
  z-index:999999 !important;
  padding:20px !important;
  box-sizing:border-box !important;
}

.size-modal {
  position:relative !important;
  display:block !important;
  width:min(520px, calc(100vw - 40px)) !important;
  max-height:calc(100vh - 40px) !important;
  overflow-y:auto !important;
  background:#fff !important;
  border-radius:16px !important;
  padding:24px !important;
  box-sizing:border-box !important;
  box-shadow:0 20px 60px rgba(0,0,0,.3) !important;
  z-index:1000000 !important;
}

.size-modal-close {
  position:absolute !important;
  top:10px !important;
  right:12px !important;
  border:0 !important;
  background:transparent !important;
  font-size:28px !important;
  line-height:1 !important;
  cursor:pointer !important;
}

.size-modal-product {
  margin-bottom:18px !important;
  opacity:.7 !important;
}

.size-system-buttons,
.size-options {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin:12px 0 18px !important;
}

.size-system-btn,
.size-option-btn {
  border:1px solid #ccc !important;
  background:#fff !important;
  border-radius:8px !important;
  padding:10px 14px !important;
  cursor:pointer !important;
}

.size-system-btn.active,
.size-option-btn.active {
  border-color:#111 !important;
  background:#111 !important;
  color:#fff !important;
}

.selected-size-label {
  margin:15px 0 !important;
  font-weight:600 !important;
}

.cart-drawer-overlay {
  position:fixed !important;
  inset:0 !important;
  background:rgba(0,0,0,.45) !important;
  z-index:999998 !important;
  display:flex !important;
  justify-content:flex-end !important;
}

.cart-drawer {
  width:min(460px,100vw) !important;
  height:100vh !important;
  background:#fff !important;
  display:flex !important;
  flex-direction:column !important;
  box-shadow:-10px 0 40px rgba(0,0,0,.18) !important;
  overflow:hidden !important;
}

.cart-drawer-head {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:22px !important;
  border-bottom:1px solid #eee !important;
}

.cart-drawer-head h3 {
  margin:0 !important;
}

.cart-drawer-close {
  border:0 !important;
  background:none !important;
  font-size:28px !important;
  cursor:pointer !important;
}

.cart-drawer-body {
  flex:1 !important;
  overflow-y:auto !important;
  padding:18px !important;
}

.cart-empty {
  text-align:center !important;
  padding:60px 20px !important;
  opacity:.65 !important;
}

.cart-item {
  display:grid !important;
  grid-template-columns:82px 1fr auto !important;
  gap:14px !important;
  padding:16px 0 !important;
  border-bottom:1px solid #eee !important;
}

.cart-item-image {
  width:82px !important;
  height:105px !important;
  object-fit:cover !important;
  border-radius:8px !important;
  background:#f5f5f5 !important;
}

.cart-item-name {
  font-weight:600 !important;
  margin-bottom:6px !important;
}

.cart-item-meta {
  font-size:13px !important;
  opacity:.7 !important;
  margin-bottom:8px !important;
}

.cart-item-price {
  font-size:14px !important;
  margin-bottom:10px !important;
}

.cart-qty {
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

.cart-qty button {
  width:30px !important;
  height:30px !important;
  border:1px solid #ddd !important;
  background:#fff !important;
  border-radius:6px !important;
  cursor:pointer !important;
}

.cart-remove {
  border:0 !important;
  background:none !important;
  padding:0 !important;
  margin-top:8px !important;
  font-size:12px !important;
  text-decoration:underline !important;
  cursor:pointer !important;
  opacity:.65 !important;
}

.cart-item-total {
  font-weight:600 !important;
  white-space:nowrap !important;
}

.cart-drawer-footer {
  border-top:1px solid #eee !important;
  padding:20px !important;
}

.cart-total-row {
  display:flex !important;
  justify-content:space-between !important;
  font-size:18px !important;
  font-weight:600 !important;
  margin-bottom:16px !important;
}

.cart-checkout-btn {
  width:100% !important;
}

.size-system-collapsed button {
  cursor: pointer;
}

.size-system-collapsed button:first-child {
  border: 0;
  background: transparent;
}

/* ---------- Color swatches on product cards (js/storefront.js) ---------- */
.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.color-swatch {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 0 2px #fff;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}

.color-swatch:hover {
    transform: scale(1.08);
}

.color-swatch.active {
    border-color: var(--ink, #171717);
    box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px var(--ink, #171717);
}

.color-swatch:focus-visible {
    outline: 2px solid var(--ink, #171717);
    outline-offset: 2px;
}

.product-color-name {
    margin-top: 6px;
    min-height: 1.2em;
    font-size: 12px;
    color: var(--muted, #77736d);
}

/* ---------- Information pages (terms.html, privacy.html, returns.html, shipping.html) ---------- */
body.info-page { background: var(--ivory, #f8f7f4); min-height: 100vh; display: flex; flex-direction: column; }
.info-header { background: #fff; border-bottom: 1px solid var(--line, #e7e5e0); }
.info-header-inner { max-width: 1100px; margin: 0 auto; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.info-brand { font-family: var(--serif, Georgia, serif); font-size: 24px; font-weight: 600; color: var(--ink, #171717); text-decoration: none; }
.info-back { font-size: 14px; color: var(--ink, #171717); }
.info-main { flex: 1; width: 100%; max-width: 760px; box-sizing: border-box; margin: 48px auto 64px; padding: 0 24px; }
.info-main h1 { font-family: var(--serif, Georgia, serif); font-weight: 400; font-size: 40px; margin: 0 0 6px; }
.info-updated { font-size: 13px; color: var(--muted, #77736d); margin-bottom: 28px; }
.info-body { font-size: 16px; line-height: 1.7; color: var(--ink, #171717); overflow-wrap: anywhere; }
.info-body h2 { font-size: 20px; margin: 32px 0 10px; }
.info-body p { margin: 0 0 16px; }
.info-body ul { margin: 0 0 16px; padding-left: 22px; }
.info-body li { margin-bottom: 6px; }
.info-muted { color: var(--muted, #77736d); }
.info-footer { border-top: 1px solid var(--line, #e7e5e0); background: #fff; padding: 24px; text-align: center; font-size: 13px; color: var(--muted, #77736d); }
.info-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-bottom: 10px; }
.info-footer a { color: var(--ink, #171717); }
@media (max-width: 600px) { .info-main { margin-top: 28px; } .info-main h1 { font-size: 30px; } }

/* ---------- Checkout: terms acceptance ---------- */
.checkout-terms { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.checkout-terms input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--ink, #171717); }
.checkout-terms a { color: var(--ink, #171717); text-decoration: underline; }

/* ---------- Product page (/p/..., backend/templates/product.html + js/product.js) ---------- */
body.product-page { background: var(--ivory, #f8f7f4); min-height: 100vh; display: flex; flex-direction: column; }
.pdp { flex: 1; width: 100%; max-width: 1200px; box-sizing: border-box; margin: 0 auto; padding: 28px 32px 64px; }
.pdp-crumbs { font-size: 13px; color: var(--muted, #77736d); margin-bottom: 20px; overflow-wrap: anywhere; }
.pdp-crumbs a { color: var(--ink, #171717); }
.pdp-crumbs span { margin: 0 4px; }
.pdp-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.pdp-main-image { background: #eee; aspect-ratio: 4 / 5; overflow: hidden; }
.pdp-main-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pdp-thumb { width: 72px; height: 90px; padding: 0; border: 1px solid var(--line, #e7e5e0); background: #eee; cursor: pointer; overflow: hidden; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb.active { outline: 2px solid var(--ink, #171717); outline-offset: 1px; }
.pdp-title { font-family: var(--serif, Georgia, serif); font-weight: 400; font-size: 38px; line-height: 1.15; margin: 0 0 10px; overflow-wrap: anywhere; }
.pdp-price { font-size: 22px; font-weight: 600; margin-bottom: 24px; }
.pdp-option { margin-bottom: 20px; }
.pdp-option-label { font-size: 14px; margin-bottom: 8px; color: var(--ink, #171717); }
.pdp-option .color-swatches { margin-top: 0; }
.pdp-message { min-height: 1.2em; font-size: 14px; margin-bottom: 10px; }
.pdp-message.error { color: #a93226; }
.pdp-add { width: 100%; max-width: 420px; }
.pdp-description { margin-top: 28px; font-size: 15px; line-height: 1.7; color: var(--ink, #171717); overflow-wrap: anywhere; }
.pdp-description p { margin: 0 0 14px; }
.pdp-links { list-style: none; padding: 0; margin: 20px 0 0; display: flex; gap: 18px; font-size: 13px; }
.pdp-links a { color: var(--ink, #171717); }
@media (max-width: 860px) {
  .pdp { padding: 18px 16px 48px; }
  .pdp-grid { grid-template-columns: 1fr; gap: 24px; }
  .pdp-title { font-size: 28px; }
  .pdp-add { max-width: none; }
}

/* product card links (js/storefront.js) */
.product-card-link { display: block; color: inherit; text-decoration: none; }
.product-card-title a { color: inherit; text-decoration: none; }
.product-card-title a:hover { text-decoration: underline; }

/* ---------- Phones (about 5-7 inch): product grid on 2 columns ---------- */
@media (max-width: 600px) {
    .products-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 10px;
    }
    .products-catalog-grid .product-card-details { padding: 10px 10px 12px; }
    .products-catalog-grid .product-card-title { font-size: 13px; margin-bottom: 6px; line-height: 1.35; overflow-wrap: anywhere; }
    .products-catalog-grid .product-card-meta { padding-top: 8px; margin-bottom: 10px; }
    .products-catalog-grid .product-card-price { font-size: 14px; }
    .products-catalog-grid .product-card-actions .button { padding: 10px 4px; font-size: 11px; letter-spacing: 0.03em; }
    .products-catalog-grid .color-swatches { gap: 8px; margin-top: 8px; }
    .products-catalog-grid .color-swatch { width: 26px; height: 26px; }
}

/* ---------- Categories (js/categories.js): row above the products + menu from the header ---------- */
.category-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: -20px 0 24px;
    padding: 2px 0 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.category-bar::-webkit-scrollbar { display: none; }
.category-chip {
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 1px solid var(--border, #e7e5e0);
    border-radius: 999px;
    background: #fff;
    color: var(--ink, #171717);
    font: inherit;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}
.category-chip:hover { border-color: var(--ink, #171717); }
.category-chip.active { background: var(--ink, #171717); border-color: var(--ink, #171717); color: #fff; }

.category-menu {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    width: min(360px, calc(100% - 32px));
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--border, #e7e5e0);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14);
}
.category-menu[hidden] { display: none; }
.category-menu-title {
    padding: 8px 12px 6px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #77736d;
}
.category-menu-item {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ink, #171717);
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}
.category-menu-item:hover, .category-menu-item:focus-visible { background: #f4f2ee; outline: none; }
.category-menu-item.active { font-weight: 600; }
.category-menu-count { font-size: 12px; color: #77736d; }
.category-menu-empty { padding: 8px 12px 12px; font-size: 13px; color: #77736d; }
.pdp-crumbs a { color: inherit; }

@media (max-width: 600px) {
    .category-bar { margin: -24px 0 16px; }
    .category-chip { padding: 7px 14px; }
}

/* ---------- Tablet / desktop: as many columns as fit, cards keep their size (min 280px) ---------- */
@media (min-width: 601px) {
    .products-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 40px 24px; }
    .products-catalog-grid .product-card-title { overflow-wrap: anywhere; }
}
/* Wide screens: the page (header, hero text, products, footer) uses up to 1680px instead of 1200px,
   so 5 cards fit side by side at full size */
@media (min-width: 1400px) {
    .header-container,
    .main-showroom,
    .footer-grid,
    .hero-viewport .hero-content-wrapper { width: min(calc(100% - 64px), 1680px); }
}

/* ---------- Product names in the grid: one line ("..."); the full name is on the product page ---------- */
.products-catalog-grid .product-card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
}
.products-catalog-grid .product-card-title a { display: inline; }

/* ---------- Card spacing (all screens): price right under the name, colors right under the price,
   only the button stays aligned at the bottom of the card ---------- */
.products-catalog-grid .product-card-title { margin-bottom: 6px; }
.products-catalog-grid .product-card-meta { margin-top: 0; padding-top: 6px; margin-bottom: 0; }
.products-catalog-grid .color-swatches { margin-top: 8px; }
.products-catalog-grid .product-color-name { margin-top: 2px; }
.products-catalog-grid .product-card-actions { margin-top: auto; padding-top: 12px; }