/* Tweaks on collection pages and in product grids (docs/spec-speed-tweaks.md §2.8, §2.9). */

/* ---------- Read more in a long collection description (ReadMore.php) ----------
   The rest waits with hidden="until-found": the browser's find in page still finds and opens it. A theme reset such as
   [hidden]{display:none} would stop that, so the browser's own way of hiding it (no rendering, no height) is restored
   wherever the browser has it; elsewhere it is simply hidden. */
.term-description.sdg-more .sdg-more__rest[hidden]{display:none}
@supports (content-visibility:hidden){.term-description.sdg-more .sdg-more__rest[hidden=until-found]{display:block !important;content-visibility:hidden}}
.term-description.sdg-more .sdg-more__bar{margin:2px 0 18px}
/* closed: the button right under the first paragraph (the theme gives paragraphs 28 px below) */
.term-description.sdg-more :has(+ .sdg-more__rest[hidden]){margin-bottom:4px}
.term-description.sdg-more .sdg-more__btn,.term-description.sdg-more .sdg-more__btn:hover,.term-description.sdg-more .sdg-more__btn:focus,.term-description.sdg-more .sdg-more__btn:active{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:7px;min-height:44px;cursor:pointer;font:600 16px/1.3 Montserrat,sans-serif;color:#191919;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;-webkit-tap-highlight-color:transparent}
.term-description.sdg-more .sdg-more__btn:hover{color:#e32c2b}
.term-description.sdg-more .sdg-more__btn:focus-visible{outline:2px solid #e32c2b;outline-offset:3px;border-radius:3px}
.term-description.sdg-more .sdg-more__btn svg{flex:0 0 14px;width:14px;height:14px;fill:currentColor;transition:transform .2s ease}
.term-description.sdg-more .sdg-more__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.term-description.sdg-more .sdg-more__btn svg{transition:none}}

/* ---------- Product cards that line up (Module.php, tweak 9) ----------
   Grid rows already give every card in a row the same height. Each name takes the same number of lines (longer ones
   end with "…"), so the prices start on one line; Fit's "M fits Rocky" badge sits at the bottom of the card (after the
   stars, which Astra orders 2 in its inline CSS), so the badges line up whether a card has stars or not. The numbers come from the settings as custom properties (and the
   phone name size as one rule printed with them). */
body.sdg-even-cards:not(.ast-woocommerce-shop-page-list-view):not(.ast-woocommerce-shop-page-list-style) ul.products li.product{display:flex;flex-direction:column}
body.sdg-even-cards:not(.ast-woocommerce-shop-page-list-view):not(.ast-woocommerce-shop-page-list-style) ul.products li.product .astra-shop-summary-wrap{display:flex;flex-direction:column;flex:1 1 auto}
body.sdg-even-cards ul.products li.product .woocommerce-loop-product__title{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:var(--sdg-card-lines,2);line-clamp:var(--sdg-card-lines,2);overflow:hidden;line-height:1.3!important;min-height:calc(var(--sdg-card-lines,2) * 1.3em)} /* important: the related products carousel sets display:flow-root and line-height:normal, and a third line showed through the price */
body.sdg-even-cards ul.products li.product .sdg-fit-badge{order:10;margin-top:auto;align-self:flex-start}
body.sdg-even-cards ul.products li.product .sdg-card-actions{order:10;margin-top:auto;align-self:flex-start}
body.sdg-even-cards ul.products li.product.desktop-align-center .sdg-card-actions{align-self:center;justify-content:center}
body.sdg-even-cards ul.products li.product .sdg-card-actions .sdg-fit-badge{order:0;margin:0;align-self:center}
body.sdg-even-cards ul.products li.product.desktop-align-center .sdg-fit-badge{align-self:center}
body.sdg-even-cards ul.products li.product .price{margin-bottom:8px}
@media (max-width:544px){
  body.sdg-even-cards ul.products li.product .astra-shop-summary-wrap{padding-left:4px;padding-right:4px}
  body.sdg-even-cards ul.products li.product .woocommerce-loop-product__title{-webkit-line-clamp:var(--sdg-card-lines-phone,3);line-clamp:var(--sdg-card-lines-phone,3);min-height:calc(var(--sdg-card-lines-phone,3) * 1.3em)}
}

/* ---------- Photos and colours on product cards (Cards.php, cards.js) ----------
   The photo becomes a strip that snaps photo by photo: a finger swipes it, the mouse drags it, the arrows (computers,
   on hover or keyboard focus) move it; dots under the photo. The colour row under the price is a small circle per colour
   (Fit's beige ring marks the one shown); its height is kept when a product has no colours, so the cards stay even. */
ul.products li.product .astra-shop-thumbnail-wrap{position:relative}
.sdg-card-track{display:flex;width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border-radius:inherit}
.sdg-card-track::-webkit-scrollbar{display:none}
.sdg-card-track > img.sdg-card-slide{flex:0 0 100%;width:100%;height:100%;max-width:none;object-fit:cover;scroll-snap-align:start;scroll-snap-stop:always;-webkit-user-drag:none;user-select:none}
.sdg-card-dots{position:absolute;left:0;right:0;bottom:10px;z-index:2;display:flex;justify-content:center;gap:5px;pointer-events:none}
.sdg-card-dots i{width:6px;height:6px;border-radius:50%;background:rgba(25,25,25,.28);box-shadow:0 0 0 1px rgba(255,255,255,.7);transition:background-color .2s,transform .2s}
.sdg-card-dots i.is-on{background:#191919;transform:scale(1.15)}
ul.products li.product .sdg-card-arrow,ul.products li.product .sdg-card-arrow:hover,ul.products li.product .sdg-card-arrow:focus{all:unset;box-sizing:border-box;position:absolute;top:50%;z-index:3;display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:rgba(255,255,255,.94);color:#191919;box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer;opacity:0;transition:opacity .18s,background-color .15s;-webkit-tap-highlight-color:transparent}
ul.products li.product .sdg-card-arrow svg{fill:currentColor}
ul.products li.product .sdg-card-arrow.is-prev{left:10px}
ul.products li.product .sdg-card-arrow.is-next{right:10px}
ul.products li.product .sdg-card-arrow:disabled{display:none}
@media (hover:hover) and (pointer:fine){
  ul.products li.product:hover .sdg-card-arrow{opacity:1}
  ul.products li.product .sdg-card-arrow:hover{background:#191919;color:#fff}
}
ul.products li.product .sdg-card-arrow:focus-visible{opacity:1;outline:2px solid #e32c2b;outline-offset:2px}
@media (hover:none),(pointer:coarse){ul.products li.product .sdg-card-arrow,ul.products li.product .sdg-card-arrow:hover,ul.products li.product .sdg-card-arrow:focus{display:none}}

.sdg-card-colors{display:flex;flex-wrap:wrap;align-items:center;gap:2px;min-height:26px;margin:0 0 6px}
ul.products li.product.desktop-align-center .sdg-card-colors{justify-content:center}
ul.products li.product .sdg-card-color,ul.products li.product .sdg-card-color:hover,ul.products li.product .sdg-card-color:focus,ul.products li.product .sdg-card-color:active{all:unset;box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;cursor:pointer;-webkit-tap-highlight-color:transparent}
ul.products li.product .sdg-card-color::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--c,#fff);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);transition:box-shadow .15s}
ul.products li.product .sdg-card-color.is-plain::before{background:#f1f1f1}
ul.products li.product .sdg-card-color:hover::before{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 2px #fff,0 0 0 3px #a48878}
ul.products li.product .sdg-card-color[aria-pressed="true"]::before{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 2px #fff,0 0 0 3.5px #191919}
ul.products li.product .sdg-card-color:focus-visible{outline:2px solid #e32c2b;outline-offset:0;border-radius:50%}
/* Fit's badge asked for a colour before it adds: the circles call for a tap */
ul.products li.product .sdg-card-colors.is-asking .sdg-card-color::before{animation:sdg-card-ask .7s ease-in-out infinite alternate}
@keyframes sdg-card-ask{from{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 2px #fff,0 0 0 2.5px #a48878}to{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 2px #fff,0 0 0 4.5px #a48878}}
@media (prefers-reduced-motion:reduce){ul.products li.product .sdg-card-colors.is-asking .sdg-card-color::before{animation:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 2px #fff,0 0 0 3.5px #a48878}}
.sdg-card-colors__more{margin-left:3px;font:500 12px/1 Montserrat,sans-serif;color:#6d6d6d}
@media (prefers-reduced-motion:reduce){.sdg-card-dots i,ul.products li.product .sdg-card-arrow{transition:none!important}}

/* Stars on product cards (Tweaks → Stars on product cards; David, 14 Oct 2026: "nepáči sa mi dizajn hviezdičiek"):
   one crisp star shape as a mask instead of the theme's star font (yellow stars over dark outline stars that never
   lined up), ink by default, the empty part light grey, the average and the number of reviews next to them. The
   markup stays WooCommerce's (role="img", "Rated 4.80 out of 5"), so Google and screen readers read the same. */
:root{--sdg-star-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 24'%3E%3Cpath d='M12 1.6l3.2 6.6 7.2 1-5.2 5.1 1.2 7.2L12 18.1l-6.4 3.4 1.2-7.2L1.6 9.2l7.2-1z'/%3E%3C/svg%3E")}
body.sdg-stars ul.products li.product .star-rating{position:relative;display:inline-block;float:none;width:79px;height:14px;margin:0!important;overflow:hidden;font-family:inherit!important;font-size:0!important;line-height:0;letter-spacing:0;color:var(--sdg-star,#191919);vertical-align:middle}
body.sdg-stars ul.products li.product .star-rating::before{content:""!important;position:absolute;top:0;left:0;width:100%;height:100%;float:none;color:transparent;background:#d9d9d9;-webkit-mask:var(--sdg-star-mask) 0 0/15.75px 14px repeat-x;mask:var(--sdg-star-mask) 0 0/15.75px 14px repeat-x;opacity:1}
body.sdg-stars ul.products li.product .star-rating span{position:absolute;top:0;left:0;height:100%;padding:0!important;overflow:hidden;float:none;font-size:0}
body.sdg-stars ul.products li.product .star-rating span::before{content:""!important;position:absolute;top:0;left:0;width:79px;height:100%;color:transparent;background:var(--sdg-star,#191919);-webkit-mask:var(--sdg-star-mask) 0 0/15.75px 14px repeat-x;mask:var(--sdg-star-mask) 0 0/15.75px 14px repeat-x}
body.sdg-stars ul.products li.product .review-rating{justify-content:center;gap:7px;margin:2px 0 12px} /* room above Fit's badge, which sits at the bottom of the card */
body.sdg-stars ul.products li.product.align-left .review-rating,body.sdg-stars ul.products li.product.desktop-align-left .review-rating{justify-content:flex-start}
body.sdg-stars .sdg-stars-n{font-size:12.5px;font-weight:700;line-height:1;color:#191919;white-space:nowrap}
body.sdg-stars .sdg-stars-n span{font-weight:500;color:#6b6b6b} /* 5.0 : 1 on the page's #f8f8f8 (was 3.05) */
/* the full-width line the collection template (Elementor Divider after the description) draws above the products
   (David, 17 Oct 2026: "čiara pod read more … nech tam nie je") */
body.sdg-no-desc-line .elementor-widget-woocommerce-archive-description + .elementor-widget-divider{display:none!important}