/* ============ PAGE-LOCAL OVERRIDES (produs.html) ============ */

    /* --- Stronger, clearly-visible review stars (theme gold resolves to green) --- */
    .pdp-stars, .pr-score-stars, .pr-review-stars { color: #E1A208; }
    .pr-review-stars, .pr-score-stars { text-shadow: 0 0 0.5px rgba(120,80,0,0.35); }

    /* --- Gallery: arrows + drag on main image --- */
    .pdp-main-img { position: relative; }
    .pdp-main-img img { user-select: none; -webkit-user-drag: none; touch-action: pan-y; }
    .gal-arrow {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 42px; height: 42px; border-radius: 50%; border: none;
      background: rgba(255,255,255,0.92); color: var(--ink);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.18);
      z-index: 3; transition: background 0.2s, color 0.2s, transform 0.15s;
    }
    .gal-arrow:hover { background: #fff; color: var(--green-deep); }
    .gal-arrow:active { transform: translateY(-50%) scale(0.94); }
    .gal-prev { left: 0.75rem; }
    .gal-next { right: 0.75rem; }

    /* --- Specs table --- */
    .pdp-specs { margin-top: 1.9rem; }
    .pdp-specs-title { font-size: 1.15rem; font-weight: 800; color: var(--ink); margin-bottom: 0.9rem; }
    .specs-table {
      width: 100%; border-collapse: collapse; background: #fff;
      border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-md); overflow: hidden;
    }
    .specs-table th, .specs-table td {
      text-align: left; padding: 0.72rem 1rem; font-size: 0.9rem;
      border-bottom: 1px solid rgba(0,0,0,0.06); vertical-align: top;
    }
    .specs-table tr:last-child th, .specs-table tr:last-child td { border-bottom: none; }
    .specs-table th { color: var(--ink-muted); font-weight: 600; width: 45%; background: var(--cream); }
    .specs-table td { color: var(--ink); font-weight: 700; }

    /* --- Add-a-review form --- */
    .pr-form-wrap {
      background: #fff; border: 1px solid rgba(0,0,0,0.06);
      border-radius: var(--radius-lg); padding: 1.75rem; margin-top: 2rem;
    }
    .pr-form-title { font-size: 1.25rem; font-weight: 800; color: var(--ink); margin-bottom: 1.25rem; }
    .pr-form { display: flex; flex-direction: column; gap: 1.1rem; max-width: 640px; }
    .pr-field { display: flex; flex-direction: column; gap: 0.4rem; }
    .pr-field > label { font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
    .pr-field input[type="text"], .pr-field textarea {
      font-family: inherit; font-size: 0.95rem; color: var(--ink); background: var(--cream);
      border: 1.5px solid rgba(0,0,0,0.1); border-radius: 10px; padding: 0.7rem 0.9rem;
      outline: none; transition: border-color 0.2s, box-shadow 0.2s;
    }
    .pr-field input[type="text"]:focus, .pr-field textarea:focus {
      border-color: var(--green-deep); box-shadow: 0 0 0 3px rgba(68,130,67,0.14); background: #fff;
    }
    .pr-field textarea { resize: vertical; min-height: 96px; }
    .pr-rate { display: inline-flex; gap: 0.1rem; }
    .pr-rate-star {
      background: none; border: none; font-size: 1.9rem; line-height: 1;
      color: var(--cream-dark); cursor: pointer; padding: 0 0.08rem;
      transition: color 0.12s, transform 0.12s;
    }
    .pr-rate-star:hover { transform: scale(1.12); }
    .pr-rate-star.on { color: #E1A208; }
    .pr-form .btn-primary { align-self: flex-start; }

    /* --- Similar products: horizontal slider --- */
    .sim-slider { position: relative; margin-top: 2rem; }
    .sim-slider .sim-track {
      display: flex; gap: 1.5rem; overflow-x: auto; scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch; scrollbar-width: none;
      padding: 0.5rem 0.25rem 1rem; cursor: grab;
    }
    .sim-slider .sim-track::-webkit-scrollbar { display: none; }
    .sim-slider .sim-track.dragging { cursor: grabbing; scroll-behavior: auto; }
    .sim-slider .sim-track .prod-card { flex: 0 0 clamp(220px, 30%, 290px); }
    .sim-arrow {
      position: absolute; top: 42%; transform: translateY(-50%);
      width: 44px; height: 44px; border-radius: 50%;
      border: 1px solid rgba(0,0,0,0.1); background: #fff; color: var(--green-deep);
      display: flex; align-items: center; justify-content: center; cursor: pointer;
      box-shadow: 0 6px 18px rgba(0,0,0,0.12); z-index: 4;
      transition: background 0.2s, color 0.2s, transform 0.15s;
    }
    .sim-arrow:hover { background: var(--green-deep); color: #fff; }
    .sim-arrow:active { transform: translateY(-50%) scale(0.94); }
    .sim-prev { left: -6px; }
    .sim-next { right: -6px; }

    /* --- Favorite button: label wrapper (for icon-only on mobile) --- */
    .fav-btn { }

    /* --- Main image cross-fade (model / gallery swaps) --- */
    #pdpMain { transition: opacity 0.25s ease; }
    #pdpMain.is-fading { opacity: 0; }

    /* --- Model / specimen selector (each olive tree is a unique photo) --- */
    .model-opts { display: flex; gap: 0.6rem; flex-wrap: wrap; }
    .model-opt {
      width: 68px; height: 86px; padding: 0; border-radius: 12px; overflow: hidden;
      border: 2px solid rgba(0,0,0,0.12); background: var(--cream-dark);
      cursor: pointer; transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
    }
    .model-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .model-opt:hover { transform: translateY(-2px); border-color: rgba(68,130,67,0.5); }
    .model-opt.active { border-color: var(--green-deep); box-shadow: 0 0 0 2px rgba(68,130,67,0.22); }
    .model-meta { margin-top: 0.65rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.9rem; }
    .model-name { font-size: 0.92rem; font-weight: 700; color: var(--ink-soft); }
    .model-height { font-size: 0.92rem; font-weight: 600; color: var(--ink-muted); }
    .model-height b { color: var(--ink); font-weight: 800; }
    .pdp-sku { margin-top: 0.3rem; font-size: 0.82rem; font-weight: 600; color: var(--ink-muted); letter-spacing: 0.01em; }
    .pdp-sku span { color: var(--ink-soft); font-weight: 700; }
    @media (max-width: 380px) {
      .model-opt { width: 58px; height: 74px; }
    }

    /* --- Height variations (simple products): text pills instead of image thumbs --- */
    .size-opts { gap: 0.55rem; }
    .model-opt.size-opt {
      width: auto; height: auto; min-width: 90px; padding: 0.55rem 0.95rem; border-radius: 12px;
      background: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 0.12rem; overflow: visible;
    }
    .model-opt.size-opt .size-h { font-size: 0.98rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
    .model-opt.size-opt .size-p { font-size: 0.82rem; font-weight: 600; color: var(--green-deep); }

    /* #19 – on mobile, variable products drop the thumbnail strip; specimen selector + arrows remain */
    @media (max-width: 640px) {
      .pdp.is-variable .pdp-thumbs { display: none !important; }
    }

    /* --- Short teaser description in the info column --- */
    .pdp-short-desc {
      font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft);
      margin: 0.35rem 0 1.4rem;
    }

    /* --- Full-width tabbed detail block (below the product) --- */
    /* trim the global section 7rem top/bottom padding + zero the horizontal
       padding so the sides line up with the similar-products section (.psec) */
    .pdp-detail { margin-top: 0.5rem; padding: 1.5rem 0 1rem; }
    .pr-reviews { padding: 1.5rem 0 4rem; }
    .pdp-tabs {
      display: flex; gap: 0.4rem; flex-wrap: wrap;
      border-bottom: 2px solid rgba(0,0,0,0.08); margin-bottom: 1rem;
    }
    .tab-btn {
      font-family: inherit; font-size: 1rem; font-weight: 700; color: var(--ink-muted);
      background: none; border: none; cursor: pointer;
      padding: 0.7rem 0.9rem; margin-bottom: -2px;
      border-bottom: 2px solid transparent;
      transition: color 0.2s, border-color 0.2s;
    }
    .tab-btn:hover { color: var(--ink); }
    .tab-btn.active { color: var(--green-deep); border-bottom-color: var(--green-deep); }
    .pdp-panel { display: none; }
    .pdp-panel.active { display: block; }
    .pdp-panel .pdp-desc { max-width: none; margin-top: 0; }
    .pdp-panel .pdp-desc p:last-child { margin-bottom: 0; }
    .pdp-panel .pdp-specs { margin-top: 0; }
    @media (max-width: 380px) {
      .tab-btn { font-size: 0.92rem; padding: 0.6rem 0.7rem; }
    }

    /* --- Reviews: 2-col layout (sticky form left, reviews right) --- */
    .pr-layout {
      display: grid; grid-template-columns: minmax(300px, 360px) 1fr;
      gap: 2rem; align-items: start; margin-top: 2rem;
    }
    .pr-form-col {
      grid-column: 1; grid-row: 1; position: sticky;
      top: calc(var(--dl-head-total) + 1.5rem);
    }
    .pr-form-col .pr-form-wrap { margin-top: 0; }
    .pr-form-col .pr-form { max-width: 100%; }
    .pr-reviews-col { grid-column: 2; grid-row: 1; min-width: 0; }
    @media (max-width: 820px) {
      .pr-layout { grid-template-columns: 1fr; gap: 1.5rem; }
      .pr-form-col { grid-column: 1; grid-row: auto; position: static; top: auto; order: 2; }
      .pr-reviews-col { grid-column: 1; grid-row: auto; order: 1; }
    }

    /* ============ MOBILE ============ */
    @media (max-width: 640px) {
      /* horizontal-overflow safety without creating a scroll container
         (clip, unlike hidden, does not force the other axis to auto) */
      main.page { overflow-x: clip; }
      .page-wrap { padding-left: 1.1rem; padding-right: 1.1rem; }
      .pdp-desc, .pdp-specs, .pr-form-wrap, .specs-table { max-width: 100%; }

      /* mobile: specimen picker sits directly under the gallery, so the photos
         and the picker are both visible at once (easier to choose) */
      .pdp-info { display: flex; flex-direction: column; }
      .pdp-info .variant-group { order: 1; margin-top: 0; }
      .pdp-info h1 { order: 2; }
      .pdp-info .pdp-latin { order: 3; }
      .pdp-info .pdp-stars { order: 4; }
      .pdp-info .pdp-price { order: 5; }
      .pdp-info .pdp-sku { order: 6; }
      .pdp-info .pdp-attrs { order: 7; }
      .pdp-info .pdp-short-desc { order: 8; }
      .pdp-info .pdp-buy { order: 9; }
      .pdp-info .pdp-stock { order: 10; }

      /* tighter spacing above & below the description on mobile */
      .pdp { padding-bottom: 0.5rem; }             /* was 4rem dead space under the product */
      .pdp-detail { margin-top: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; }
      .pdp-tabs { margin-bottom: 0.6rem; }
      .pr-reviews { padding-top: 0.5rem; }

      /* attrs → 2 columns (shared rule collapses to 1 at <=900px) */
      .pdp-attrs { grid-template-columns: 1fr 1fr; gap: 0.55rem; }
      .pdp-attr { padding: 0.55rem 0.6rem; font-size: 0.8rem; gap: 0.35rem; }

      /* buy row on a single line */
      .pdp-buy { flex-wrap: nowrap; gap: 0.5rem; align-items: stretch; }
      .pdp-buy .qty { flex: 0 0 auto; }
      .pdp-buy .qty button { width: 34px; height: 44px; font-size: 1.05rem; }
      .pdp-buy .qty input { width: 30px; height: 44px; }
      .pdp-buy .btn-primary {
        flex: 1 1 auto; justify-content: center; white-space: nowrap;
        padding: 0.6rem 0.7rem; font-size: 0.82rem;
      }
      .pdp-buy .btn-primary .btn-icon { display: none; }
      /* Favorite → icon only */
      .fav-btn {
        flex: 0 0 auto; padding: 0.6rem 0.7rem !important;
        gap: 0 !important; font-size: 0 !important;
      }
      .fav-btn .fav-label { display: none; }
      .fav-btn svg { flex-shrink: 0; }

      /* keep slider arrows inside the viewport */
      .sim-prev { left: 2px; }
      .sim-next { right: 2px; }
      .sim-slider .sim-track .prod-card { flex: 0 0 68%; }
    }

    /* ============ NARROW MOBILE (down to 320px) ============ */
    @media (max-width: 380px) {
      .page-wrap { padding-left: 0.85rem; padding-right: 0.85rem; }

      /* gallery + thumbnails shrink to fit the viewport (4 fixed 78px thumbs would overflow) */
      .pdp-gallery { max-width: 100%; }
      .pdp-thumbs { gap: 0.5rem; }
      .pdp-thumb { flex: 1 1 0; min-width: 0; width: auto; height: auto; aspect-ratio: 1 / 1; }

      /* buy row stays on one line, tighter */
      .pdp-buy { gap: 0.35rem; }
      .pdp-buy .qty button { width: 27px; height: 42px; font-size: 0.95rem; }
      .pdp-buy .qty input { width: 20px; height: 42px; }
      .pdp-buy .btn-primary { min-width: 0; padding: 0.55rem 0.4rem; font-size: 0.72rem; }
      .fav-btn { padding: 0.55rem 0.55rem !important; }

      /* swatches may wrap if needed */
      .swatches { flex-wrap: wrap; row-gap: 0.5rem; }

      /* specs table readable + no overflow */
      .specs-table th, .specs-table td { padding: 0.55rem 0.6rem; font-size: 0.82rem; }
      .specs-table th { width: 42%; }

      /* headings + form scale down */
      .pdp-detail-title { font-size: 1.28rem; }
      .pr-form-wrap { padding: 1.25rem; }
      .pr-form-title { font-size: 1.12rem; }
      .pr-rate-star { font-size: 1.7rem; }

      /* similar-products cards fill more of a small screen */
      .sim-slider .sim-track .prod-card { flex: 0 0 80%; }
    }