/* Product detail page — additive stylesheet, loaded alongside style.css.
   Does not redefine or override any homepage/shop selector. */

.pdp-wrap{display:grid;grid-template-columns:1fr 1fr 280px;gap:32px;margin:14px 0 20px;align-items:start}

/* gallery */
.pdp-gallery{display:flex;gap:16px;position:sticky;top:100px}
/* .pdp-gallery's height is set inline by the "match gallery height" script
   in @section('js') below, to whichever of the info column / trust sidebar
   is naturally tallest for THIS product — a pure-CSS grid-stretch approach
   couldn't do this reliably, because .pdp-thumbs' own stacked-thumbnail
   content (which varies per product, by photo count) kept feeding back into
   the row's auto height instead of just filling whatever height the row
   already settled on. With that inline height in place, this default flex
   stretch (cross-axis) makes thumbs/main-img both fill it exactly. */
.pdp-thumbs{display:flex;flex-direction:column;align-items:center;gap:10px;width:76px;flex-shrink:0}
.pdp-thumb-scroll{width:100%;height:22px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--muted);cursor:pointer;font-size:9px;transition:all .15s;flex-shrink:0}
.pdp-thumb-scroll:hover{background:var(--bg);color:var(--ink)}
/* flex:1;min-height:0 is the standard pattern for a scrollable flex child
   that must shrink to whatever space its flex-column parent actually has,
   instead of forcing the parent to grow to fit all of its own content. */
.pdp-thumb-list{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;max-height:340px;overflow-y:auto;width:100%}
.pdp-thumb{width:100%;aspect-ratio:1/1;border:2px solid var(--line);border-radius:10px;cursor:pointer;background:linear-gradient(135deg,#f7f7f9,#eef0f3);overflow:hidden;flex-shrink:0;transition:border-color .15s}
.pdp-thumb.active{border-color:var(--orange)}
.pdp-thumb svg{width:70%;height:70%}
/* padding + object-fit:contain (and the svg sizing rule below) was built for the
   theme's small decorative SVG icon placeholder, floating centered in a mostly-
   empty box. A real catalog photo already carries its own built-in whitespace
   margin, so contain (which always shows the whole image, gaps and all, never
   cropping) stacked that on top and left the product looking tiny. cover instead
   fills the box completely but crops non-square photos — not acceptable for real
   product images (must never cut anything off), so this keeps object-fit:contain
   (real product images, JS-set, use this — see the img tags) but drops the forced
   aspect-ratio:1/1 for a plain height instead, so a non-square photo doesn't get
   letterboxed inside a square that doesn't match its own shape. */
/* No fixed height — fills .pdp-gallery's real height (see the comment on
   .pdp-gallery above). min-height is only a floor for the moment before the
   JS has run (or on a JS-disabled visit). */
.pdp-main-img{flex:1;min-height:220px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(135deg,#f7f7f9,#eef0f3);overflow:hidden}
.pdp-main-img svg{width:100%;height:100%;max-width:320px;max-height:320px}

/* info panel */
.pdp-info{padding-top:2px;min-width:0}
/* Moved out of .pdp-info to sit full-width above the gallery/info/trust grid
   (was nested above the <h1> inside the middle column before). */
.pdp-tags-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:10px;margin:16px 0 0}
.pdp-tags{display:flex;flex-wrap:wrap;gap:8px}
.pdp-tag{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:12px;color:var(--muted);font-weight:600}
.pdp-tag strong{color:var(--ink);font-weight:700}
.pdp-info h1{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.3px;margin-bottom:12px}

.pdp-icon-row{display:flex;gap:10px;flex-shrink:0}
.pdp-icon-row button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.pdp-icon-row button:hover{border-color:var(--orange);color:var(--orange)}
.pdp-icon-row svg{width:16px;height:16px}

.pdp-coupons{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:20px;min-width:0}
.pdp-coupons-label{font-weight:700;font-size:12.5px;color:var(--ink);margin-bottom:10px}
.pdp-coupon-list{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding-bottom:2px}
.pdp-coupon{background:#fff;border:1px dashed var(--line);border-radius:6px;padding:6px 10px;font-size:11.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0}
.pdp-coupon strong{color:var(--orange);font-weight:800}
.pdp-coupon small{color:var(--muted)}

.pdp-price-row{display:flex;align-items:flex-start;gap:28px;flex-wrap:wrap;margin-bottom:18px}
.pdp-price-col,.pdp-variant-col{display:flex;flex-direction:column;gap:8px}
.pdp-price-line{display:flex;align-items:baseline;gap:8px}
.pdp-price{font-size:24px;font-weight:800;color:var(--ink);font-family:'Poppins',sans-serif}
.pdp-was{font-size:14px;color:#b9b9c2;text-decoration:line-through}
.pdp-tax-badge{align-self:flex-start;background:#e7f9ee;color:#12b76a;font-weight:700;font-size:11px;padding:4px 10px;border-radius:20px;white-space:nowrap}
.pdp-variant-inline{display:inline-flex;align-items:center;gap:8px}
.pdp-variant-label{font-weight:700;font-size:13.5px;color:var(--ink);white-space:nowrap}
.pdp-variant-select{appearance:none;-webkit-appearance:none;background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238b8b96" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 12px center/14px;border:1px solid var(--line);border-radius:8px;height:38px;padding:0 32px 0 12px;font-size:12.5px;color:var(--muted);font-family:'Inter',sans-serif;cursor:pointer;min-width:130px}
.pdp-variant-select:focus{outline:none;border-color:var(--orange)}

.pdp-stock{align-self:flex-start;display:inline-block;background:#e7f9ee;color:#12b76a;font-weight:700;font-size:12.5px;padding:6px 14px;border-radius:6px;white-space:nowrap}

.pdp-buy-row{display:flex;gap:12px;margin-bottom:14px}
.pdp-qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex-shrink:0}
.pdp-qty button{width:40px;height:50px;background:#fff;border:none;font-size:18px;cursor:pointer;color:var(--ink);transition:background .15s}
.pdp-qty button:hover{background:var(--bg)}
.pdp-qty span{width:38px;text-align:center;font-weight:700;font-size:14px}
.pdp-addcart{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;background:var(--orange);color:#fff;border:none;border-radius:8px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;font-size:13px;cursor:pointer;transition:background .15s}
.pdp-addcart:hover{background:var(--orange-dark)}
.pdp-addcart svg{width:17px;height:17px}
.pdp-addcart.added-to-cart{background:#12b76a;cursor:default}
.pdp-addcart.added-to-cart:hover{background:#12b76a}
.pdp-buynow{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;background:var(--ink);color:#fff;border:none;border-radius:8px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;font-size:13px;cursor:pointer;margin-bottom:18px;transition:background .15s}
.pdp-buynow:hover{background:#000}
.pdp-buynow svg{width:17px;height:17px}

.pdp-fit-banner{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--orange-light);border:1px dashed var(--orange);border-radius:10px;padding:12px 16px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .15s}
.pdp-fit-banner:hover{background:#cfd9ed}
.pdp-fit-cta{display:flex;align-items:center;gap:6px;color:var(--orange);font-weight:700}
.pdp-fit-plus{width:18px;height:18px;border-radius:50%;background:var(--orange);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1}
.pdp-fit-icon{display:inline-flex;align-items:center;justify-content:center}
/* Real fitment mismatch — the selected car doesn't match this product's real
   car_model list (see the @php block above), not just a decorative variant. */
.pdp-fit-banner.pdp-fit-nofit{background:#fdecea;border-color:var(--red)}
.pdp-fit-banner.pdp-fit-nofit .pdp-fit-cta{color:var(--red)}
.pdp-fit-warning-text{font-size:11.5px;color:var(--red);margin-top:6px}

/* Real saved-car picker modal (#customModal) — same centered-modal pattern as
   the header's #carPanel, in this theme's own visual language. */
.creckk-car-modal{position:fixed;inset:0;z-index:970;background:rgba(20,20,28,.45);align-items:center;justify-content:center}
.creckk-car-modal-content{background:#fff;border-radius:var(--radius);width:420px;max-width:calc(100vw - 40px);max-height:80vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.creckk-car-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink)}
.creckk-car-modal-close{background:none;border:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:0}
.creckk-car-modal-list{padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.creckk-car-option{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s}
.creckk-car-option:hover{background:var(--bg)}
.creckk-car-option:has(input:checked){border-color:var(--orange);background:var(--orange-light)}
.creckk-car-option input{accent-color:var(--orange);width:16px;height:16px;flex-shrink:0}
.creckk-car-option img{width:44px;height:44px;border-radius:8px;object-fit:contain;background:var(--bg);flex-shrink:0}
.creckk-car-option strong{display:block;font-size:13px;color:var(--ink)}
.creckk-car-option small{font-size:11.5px;color:var(--muted)}
.creckk-car-empty{padding:20px;text-align:center;font-size:13px;color:var(--muted)}
.creckk-car-empty a{color:var(--orange);font-weight:700}

/* right-side trust panel */
.pdp-trust-side{display:flex;flex-direction:column;gap:14px}
.pdp-trust-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px}
.pdp-trust-note{font-size:11.5px;color:var(--muted);margin-top:10px}
.pdp-trust-note a{color:var(--orange);font-weight:600}
.pdp-trust-origin,.pdp-trust-warranty-row{display:flex;align-items:center;gap:8px}
.pdp-trust-origin svg,.pdp-trust-warranty-row svg{width:16px;height:16px;color:var(--orange);flex-shrink:0}
.pdp-trust-origin strong,.pdp-trust-warranty-row strong{display:inline;font-size:12.5px;color:var(--ink)}
.pdp-trust-origin span,.pdp-trust-warranty-row span{font-size:12px;color:var(--muted);display:inline}
.pdp-trust-origin strong::after{content:": "}
.pdp-trust-warranty-row strong::after{content:" \00b7 "}

/* trust badges — reuses .service/.svc-ic from style.css */
.pdp-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px auto}
/* Real per-product service availability (Doorstep Installation/Delivery/COD/
   Warranty/Replace/Return) — same .service/.svc-ic card look, 6 across instead
   of 3, with a real Available/Not Available status line per item. */
.pdp-availability{grid-template-columns:repeat(3,1fr)}
.pdp-availability .service{flex-direction:column;text-align:center;gap:8px;padding:16px 10px}
/* .service small{color:var(--muted)} in style.css has higher specificity
   (.service + small element) than a single class would, so these need the
   same shape to actually win the cascade. */
.service small.pdp-avail-yes{color:#12b76a;font-weight:700}
.service small.pdp-avail-no{color:var(--muted);font-weight:700}

/* Laptop only (.pdp-wrap is still the 3-column 280px-sidebar layout at this
   width — see the max-width:1240px override below) — the availability grid
   now lives inside .pdp-trust-side, so it needs a narrow-column layout
   instead of the 6-across row it uses everywhere else. */
@media(min-width:1241px){
  .pdp-trust-side .pdp-availability{grid-template-columns:repeat(3,1fr);gap:6px;margin:0}
  .pdp-trust-side .pdp-availability .service{padding:10px 4px;gap:6px}
  .pdp-trust-side .pdp-availability .svc-ic{width:32px;height:32px}
  .pdp-trust-side .pdp-availability .svc-ic svg{width:15px;height:15px}
  .pdp-trust-side .pdp-availability .service strong{font-size:10px;line-height:1.25}
  .pdp-trust-side .pdp-availability .service small{font-size:9px}
}

/* "Other Sellers" — real more-from-this-vendor row, horizontal scroll + arrows
   (same .section-head/.arrows/.arrow pattern used for Trending products). */
.pdp-sellers-section{margin-top:26px}
.pdp-sellers-head{display:flex;align-items:center;gap:12px}
.pdp-sellers-head svg{width:22px;height:22px;color:var(--orange);flex-shrink:0}
.pdp-sellers-head h2{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.pdp-sellers-sub{font-size:12.5px;color:var(--muted)}
.pdp-sellers-row{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:4px}
.pdp-seller-card{flex:0 0 160px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;display:flex;flex-direction:column;gap:2px;color:inherit;transition:border-color .15s,box-shadow .15s}
.pdp-seller-card:hover{border-color:var(--orange);box-shadow:var(--shadow)}
.pdp-seller-label{font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.pdp-seller-name{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pdp-seller-price{font-size:14px;font-weight:800;color:var(--ink);font-family:'Poppins',sans-serif;margin-top:2px}
.pdp-seller-product{font-size:10.5px;color:var(--muted);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:760px){
  .pdp-sellers-section{margin-top:20px}
  .pdp-sellers-head h2{font-size:16px}
  .pdp-seller-card{flex-basis:170px;padding:12px}
}

/* description / specs / reviews tabs */
.pdp-tabs-section{margin:32px auto}
.pdp-tab-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;margin-top:20px;color:var(--body);font-size:14px;line-height:1.9}
.pdp-tab-panel p{margin-bottom:14px}
.pdp-tab-panel p:last-child{margin-bottom:0}
.pdp-tab-panel[hidden]{display:none}
.pdp-spec-table{width:100%;border-collapse:collapse}
.pdp-spec-table tr{border-bottom:1px solid var(--line)}
.pdp-spec-table tr:last-child{border-bottom:none}
.pdp-spec-table td{padding:12px 0;font-size:13.5px}
.pdp-spec-table td:first-child{color:var(--muted);width:200px}
.pdp-spec-table td:last-child{color:var(--ink);font-weight:600}

.pdp-review{padding:16px 0;border-bottom:1px solid var(--line)}
.pdp-review:last-child{border-bottom:none;padding-bottom:0}
.pdp-review:first-child{padding-top:0}
.pdp-review-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.pdp-review-head strong{color:var(--ink);font-size:13.5px}
.pdp-review-stars{color:var(--gold);font-size:13px;letter-spacing:1px}
.pdp-review p{color:var(--body);font-size:13.5px;line-height:1.7;margin:0}

@media(max-width:1240px){
  .pdp-wrap{grid-template-columns:1fr 1fr}
  .pdp-trust-side{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
  .pdp-trust-side .pdp-trust-card{flex:1}
  /* Below the laptop breakpoint, the trust cards go back to a horizontal row
     (see .pdp-trust-side above) — the availability grid isn't a trust card,
     so it drops onto its own full-width line underneath them instead of
     squeezing into that row, same position it held before it moved inside
     .pdp-trust-side. */
  .pdp-trust-side .pdp-availability{flex:0 0 100%;width:100%}
}

@media(max-width:980px){
  .pdp-wrap{grid-template-columns:1fr;margin-top:20px}
  .pdp-gallery{position:static}
  .pdp-trust-side{flex-direction:column}
  .pdp-trust{grid-template-columns:1fr 1fr}
  .pdp-availability{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:760px){
  .pdp-wrap{gap:20px}
  .pdp-gallery{gap:8px}
  .pdp-thumbs{width:52px;gap:6px}
  .pdp-thumb-list{gap:6px;max-height:220px}
  .pdp-thumb{border-radius:8px}
  .pdp-main-img{height:260px;min-height:0}
  .pdp-info h1{font-size:19px}
  /* .pdp-tags defaults to flex-wrap:wrap (desktop can afford Category/Brand
     stacking if it ever ran out of room) — on a narrow phone that wrap was
     firing every time, stacking the two tags into two lines instead of one row
     next to the icons, and taking up much more vertical space than intended. */
  .pdp-tags-row{margin:14px 0 0;gap:6px}
  .pdp-tags{flex-wrap:nowrap;gap:6px;min-width:0}
  .pdp-tag{font-size:9px;padding:3px 8px;white-space:nowrap;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}
  .pdp-icon-row{gap:6px;flex-shrink:0}
  .pdp-icon-row button{width:26px;height:26px}
  .pdp-icon-row svg{width:13px;height:13px}
  .pdp-coupon-list{gap:6px}
  .pdp-coupon{font-size:10.5px;padding:5px 8px}
  .pdp-price{font-size:20px}
  /* merge the 2 trust cards into one compact block: Warranty + Ships from
     side by side, same row */
  .pdp-trust-side{gap:0;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
  .pdp-trust-card{border:none;border-radius:0;padding:10px 14px}
  .pdp-trust-card:first-child{border-right:1px solid var(--line)}
  .pdp-trust-note{font-size:10px;margin-top:6px}
  .pdp-trust-origin,.pdp-trust-warranty-row{gap:8px}
  .pdp-trust-origin svg,.pdp-trust-warranty-row svg{width:16px;height:16px}
  .pdp-trust-origin strong,.pdp-trust-warranty-row strong{font-size:11px}
  .pdp-trust-origin span,.pdp-trust-warranty-row span{font-size:10.5px}
  /* .pdp-availability is a 3rd child dropped into the same 2-column grid as
     the Warranty/Ships-from cards above — without this it only gets auto-
     placed into one of those two 1fr columns (half width) instead of its
     own full-width row underneath them. */
  .pdp-trust-side .pdp-availability{grid-column:1/-1;border-top:1px solid var(--line);padding:10px 14px}
  .pdp-trust{grid-template-columns:repeat(3,1fr);gap:8px;margin:16px auto}
  .pdp-tabs-section{margin:20px auto}
  .pdp-tab-panel{margin-top:14px}
  .pdp-trust .service{padding:10px 4px}
  .pdp-trust .svc-ic{width:32px;height:32px}
  .pdp-trust .svc-ic svg{width:15px;height:15px}
  .pdp-trust .service strong{font-size:10px}
  .pdp-trust .service small{font-size:8.5px;line-height:1.25}
  /* All 6 fit in one row, no scroll. The earlier "overlap" bug wasn't really
     about column count — grid items default to min-width:auto, so a label
     that couldn't wrap small enough was forcing its cell wider than its 1/6
     share and spilling text into the next card. min-width:0 + explicit
     wrapping here fixes the actual cause, so 6-across is legible on its own. */
  .pdp-availability{grid-template-columns:repeat(6,1fr);gap:4px}
  .pdp-availability.pdp-trust{gap:4px}
  .pdp-availability .service{padding:8px 3px;gap:4px;min-width:0}
  .pdp-availability .svc-ic{width:26px;height:26px}
  .pdp-availability .svc-ic svg{width:13px;height:13px}
  .pdp-availability .service strong{font-size:7.8px;line-height:1.2;font-weight:700;overflow-wrap:break-word;word-break:break-word;hyphens:auto}
  .pdp-availability .pdp-avail-txt{display:none}
  .pdp-availability .service small{font-size:12px}
  .pdp-tab-panel{padding:18px}
  .pdp-spec-table td:first-child{width:130px}
  /* Same reasoning as the hero banner's arrows on mobile (see home.blade.php) —
     swipe/touch-scroll replaces the click arrows, no room for both. */
  .pdp-sellers-section .arrows{display:none}
}