/* ============================================================================
   aaryans-pdp-plugins.css  ·  v2.0  ·  2026-07-23
   v2.0: MOBILE STICKY BAR hard-sale fix — on a discounted product the sticky price group
         (struck price + "–X %" badge + final price) was cramped into ~141px, so "299 Kč"
         broke between the number and "Kč" (2 lines). Forced nowrap on the price tokens +
         sized the price group to its content → the final price stays on one line.
   v1.9: the vzor/velikost gaps were mostly the plugin widget's own margin:10px 0 — zero it. Now
         title→vzor and vzor→velikost are a tight ~10px each (was 22 / 32). Reclaims vertical space above the fold.
   v1.8: squashed the H1's native 40px bottom margin, scoped via :has(+ .aa-variant-box).
   v1.6: THE GREY was the selected vzor photo's checkmark overlay (.item-type-img::before) dimming the
         chosen thumbnail — not the size chip. Overlay hidden; blue ring signals selection. (See §3 photos.)
   Styles three Shoptet plugins + native bits on the PRODUCT DETAIL page.
   Pair with aaryans-pdp-plugins.js (moves the Propojení widgets above the price).

   Propojení produktů is styled through the plugin's OWN classes (no fighting):
     .c-product-interconnection-detail-params            widget (block)
       .__type                                           label (block, on top)
       .__products.is-type--numbers|photos|colors        options row; TYPE is a class here
         numbers → a.is-current > span.item-type-numbers "140x200…"     (size text chip)
         photos  → a.is-current > span.item-type-img (bg-image) + span.item-label   (pattern thumbnail)
         colors  → a.is-current > span.item-type-bg + span.item-label               (colour circle)
   Set the TYPE per connection in the Webotvůrci admin (Barvy / Obrázky / Velikosti / Seznam) — this CSS
   handles numbers, photos and colors. API režim stays OFF; vzor thumbnails/colours come from the admin.

   v1.5: vzor switched to Obrázky (photos) → thumbnail styling added. Selected size chip = white + 2px
   brand-blue border + brand text (NO grey tint). Tighter section margins.
   Cross-sell (v1.3), stars (v1.2), mobile sticky centered (v1.4) unchanged.
   GRACEFUL ABSENCE: every rule scoped to a plugin class. UPLOAD: /user/documents/upload/CSSkodyCLAUDE/ (+ ?v=).
   ============================================================================ */

/* ---------- 1) UPSELL / CROSS-SELL ---------- */
.p-price-cart-group .up-product-wrapper{grid-column:1 / -1 !important;width:100% !important;margin-top:14px !important}
.up-container.up-type-product_cross{border:1px solid #D8E6EF;border-radius:12px;padding:14px 16px;background:#fff}
.up-container .up-products-header{font-size:15px !important;font-weight:700 !important;color:#0076A0 !important;margin:0 0 10px !important;text-align:left !important;border:none !important;padding:0 !important}
.up-container .up-products-header::before,.up-container .up-products-header::after{display:none !important}
.up-container ul.up-products{list-style:none !important;margin:0 !important;padding:0 !important;display:flex !important;flex-direction:column !important;gap:10px !important}
.up-container li.up-product{display:grid !important;grid-template-columns:1fr auto !important;align-items:center !important;gap:10px 12px !important;padding:12px !important;border:1px solid #E7EEF3 !important;border-radius:10px !important;margin:0 !important}
.up-container .up-product-information{grid-column:1 !important;display:flex !important;align-items:center !important;gap:12px !important;min-width:0 !important}
.up-container .up-image{flex:0 0 auto !important;margin:0 !important}
.up-container .up-image img{width:56px !important;height:56px !important;object-fit:cover !important;border-radius:8px !important;display:block !important}
.up-container .up-product-details{display:flex !important;flex-direction:column !important;gap:2px !important;min-width:0 !important}
.up-container .up-product-name a{color:#2E2D2C !important;text-decoration:none !important;font-weight:600 !important;font-size:13.5px !important;line-height:1.3 !important}
.up-container .up-in-stock-label{font-size:12px !important;color:#1E8E3E !important;font-weight:700 !important}
.up-container .up-price{font-size:15px !important;font-weight:700 !important;color:#2E2D2C !important}
.up-container .up-product-add-to-cart{grid-column:2 !important;justify-self:end !important;background:#0076A0 !important;border:none !important;border-radius:8px !important;padding:10px 20px !important;cursor:pointer !important;white-space:nowrap !important;color:#fff !important;font-weight:700 !important;font-size:14px !important}
.up-container .up-product-add-to-cart *{background:transparent !important;color:#fff !important;border:none !important;box-shadow:none !important;text-decoration:none !important;font-weight:700 !important}
.up-container .up-product-add-to-cart:hover{filter:brightness(1.08) !important}
.up-container .up-product-variants{grid-column:1 / -1 !important;justify-self:start !important;width:auto !important}
.up-container .up-product-variants:not(:has(select)){display:none !important}
.up-container select.up-variants{width:auto !important;min-width:210px !important;max-width:100% !important;padding:9px 12px !important;border:1.5px solid #D8E6EF !important;border-radius:8px !important;font-size:13px !important;background:#fff !important;color:#2E2D2C !important}
.up-container .up-quantity{display:none !important}

/* ---------- 2) PRODUCT STARS ALIGNMENT (native) ---------- */
.p-detail-top-bar{gap:0 !important}
.p-detail-top-bar .flags{display:none !important}
.p-detail-top-bar .stars-wrapper{margin-left:0 !important;padding-left:0 !important}

/* ---------- 3) PROPOJENÍ PRODUKTŮ (vzor / velikost) ---------- */
/* The H1 carries a 40px bottom margin (for the native H1→price gap). Our variant box lands right after
   the title, so squash that margin ONLY when the box follows — products without variants keep normal spacing. */
.p-detail-inner-header:has(+ .aa-variant-box) h1{margin-bottom:10px !important}
.aa-variant-box{display:flex !important;flex-direction:column !important;gap:10px !important;margin:0 0 12px !important}
/* the plugin's widget ships with margin:10px 0 — that was the real gap; zero it so the box gap alone controls spacing */
.aa-variant-box .c-product-interconnection-detail-params{display:block !important;margin:0 !important}
.aa-variant-box .c-product-interconnection-detail-params__type{display:block !important;text-align:left !important;font-size:12px !important;font-weight:700 !important;color:#2E2D2C !important;text-transform:uppercase !important;letter-spacing:.4px !important;margin:0 0 4px !important}
.aa-variant-box .c-product-interconnection-detail-params__products{display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:8px !important;justify-content:flex-start !important;margin:0 !important;padding:0 !important}
.aa-variant-box .c-product-interconnection-detail-params__products a{text-decoration:none !important;margin:0 !important}

/* size chips (.is-type--numbers) — selected = white + brand border, no grey */
.aa-variant-box .is-type--numbers a{border:1.5px solid #D8E6EF !important;border-radius:8px !important;padding:8px 14px !important;background:#fff !important}
.aa-variant-box .is-type--numbers a.is-current{border:2px solid #0076A0 !important;background:#fff !important}
.aa-variant-box .is-type--numbers .item-type-numbers{background:transparent !important;background-color:transparent !important;color:#2E2D2C !important;font-size:13px !important;font-weight:600 !important;padding:0 !important;margin:0 !important;box-shadow:none !important;border:none !important}
.aa-variant-box .is-type--numbers a.is-current .item-type-numbers{color:#0076A0 !important;font-weight:700 !important}

/* pattern thumbnails (.is-type--photos) — image is a background-image on .item-type-img */
.aa-variant-box .is-type--photos a{display:inline-flex !important;flex-direction:column !important;align-items:center !important;gap:0 !important;padding:2px !important;border:2px solid transparent !important;border-radius:10px !important;background:none !important}
.aa-variant-box .is-type--photos a.is-current{border-color:#0076A0 !important}
.aa-variant-box .is-type--photos .item-label{display:none !important}
.aa-variant-box .is-type--photos .item-type-img{width:46px !important;height:46px !important;border-radius:8px !important;background-size:cover !important;background-position:center !important;display:block !important;box-shadow:0 0 0 1px rgba(0,0,0,.1) !important}
.aa-variant-box .is-type--photos .item-type-img img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important}
/* THE GREY: the plugin marks the selected photo with a checkmark overlay via .item-type-img::before
   (a 24×24 SVG scaled to inset:0), which washes the chosen thumbnail out grey. Kill it — the brand-blue
   ring already shows selection — and belt-and-suspenders reset any opacity/filter. */
.aa-variant-box .is-type--photos .item-type-img::before{display:none !important}
.aa-variant-box .is-type--photos a.is-current .item-type-img{opacity:1 !important;filter:none !important}

/* colour circles (.is-type--colors) — kept for any connection still using Barvy; colour from admin */
.aa-variant-box .is-type--colors a{display:inline-flex !important;padding:3px !important;border:2px solid transparent !important;border-radius:50% !important;background:none !important}
.aa-variant-box .is-type--colors a.is-current{border-color:#0076A0 !important}
.aa-variant-box .is-type--colors .item-label{display:none !important}
.aa-variant-box .is-type--colors .item-type-bg{width:30px !important;height:30px !important;border-radius:50% !important;box-shadow:0 0 0 1px rgba(0,0,0,.1) !important}

/* ---------- 4) MOBILE STICKY BAR (price + Do košíku, centered) ---------- */
@media(max-width:768px){
  .add-to-cart-sticky .add-to-cart-sticky__inner > span{display:none !important}   /* product name */
  .add-to-cart-sticky .dm-coupon-div{display:none !important}                       /* sale pill */
  .add-to-cart-sticky .add-to-cart-sticky__inner{justify-content:center !important}
  .add-to-cart-sticky .p-price-cart-group{flex-direction:row !important;align-items:center !important;justify-content:center !important;gap:12px !important;width:auto !important;flex:0 1 auto !important}
  /* HARD-SALE: keep the final price on ONE line — the struck price + "–X %" badge + final price
     crammed into ~141px broke "299 Kč" between the number and "Kč". Size the group to content and
     forbid a break inside any price token. */
  .add-to-cart-sticky .p-final-price-wrapper{flex-wrap:nowrap !important;align-items:center !important;gap:7px !important;flex:0 0 auto !important;width:auto !important}
  .add-to-cart-sticky .price-final,.add-to-cart-sticky .price-final .price-final-holder,.add-to-cart-sticky .price-standard,.add-to-cart-sticky .price-standard > span{white-space:nowrap !important}
}