/** Shopify CDN: Minification failed

Line 75:11 Unexpected "769px-and-up"
Line 83:63 Unterminated string token

**/
/* ============================================================
   Reference In Time — 19 Sep 2026 patches
   Loaded last by sections/rit-fixes.liquid, after rit-fixes.css
   and rit-extras.css. Kept in its own file so the 18 Aug fixes
   and the 19 Aug extras stay intact and separately revertable.

   1) Price restored on product cards inside carousels
   2) Globo "Show" (products per page) control no longer clips
      its own value
   ============================================================ */

/* ------------------------------------------------------------
   1) PRICE ON CARDS INSIDE CAROUSELS

   Theme settings -> Custom CSS (config/settings_data.json ->
   platform_customizations.custom_css) carries this rule:

       .flickity-slider .product--grid_add,
       .flickity-slider .price--listing { display: none; }

   Flickity wraps every cell in .flickity-slider, so the second
   half of that selector hides the price on EVERY card in EVERY
   Flickity carousel — the homepage "New Arrivals" rail included.
   Product grids that are NOT carousels are untouched, which is
   why they still show a price: "Have you seen these" on the
   product page, Related products, and any featured collection
   with the carousel switch off all render a plain CSS grid. Same
   card snippet (snippets/product-listing.liquid -> product-price-
   listing.liquid), different container.

   The selectors below are three classes deep, so they beat the
   two-class rule above on specificity whatever the load order —
   no !important needed. `display: block` matches the restore
   value rit-extras.css already uses on this same element.

   Only .price--listing itself is restored. Which of its children
   shows (regular vs sale vs unit) stays with the theme's own
   rules, so a sale price still renders as a sale price.

   The quick-add half of the original rule is deliberately left
   alone — hiding Add to cart inside a slider looks intentional.

   ROOT CAUSE: the cleaner fix is to delete ".flickity-slider
   .price--listing" from that Custom CSS rule in the theme editor.
   This block is harmless once that is done.
------------------------------------------------------------- */
.featured__collection-carousel .flickity-slider .price--listing,
.flickity__section .flickity-slider .price--listing,
.js-carousel .flickity-slider .price--listing,
.product-loop .flickity-slider .price--listing {
  display: block;
}

/* ------------------------------------------------------------
   2) GLOBO "SHOW" (PRODUCTS PER PAGE) CONTROL CLIPS ITS VALUE

   Globo renders the per-page control as
   <div class="sort-by limit-by"><label>Show</label>
   <select id="setLimit">…</select></div>, with the caret drawn as
   an absolutely positioned .sort-by:before glyph over the right
   edge of the box.

   assets/globo-custom.css then does two things that combine badly:

     .sort-by { padding: 0 10px; }            /* 10px each side  */
     #setLimit { min-width: unset; }          /* drops Globo's
                                                 own minimum      */

   and the 769px-and-up min-width of 220px is scoped to
   .sort-by:not(.limit-by), so the Show box gets no floor at all.
   The select collapses until the caret sits on top of its own
   value and a two-digit setting reads as one digit — "24" as "2".

   Below: a right gutter on the box for the caret to live in, and
   a floor on the select wide enough for two digits at any theme
   font size. Both selectors are (2,2,0), which outranks
   globo-custom.css's (1,3,0) #setLimit rule, so no !important.
   Nothing here touches the Sort by control beside it.
------------------------------------------------------------- */
#gf-controls-container .sort-by.limit-by,
#gf-tree .sort-by.limit-by,
#gf-grid .sort-by.limit-by {
  padding-right: 26px;
}

#gf-controls-container .sort-by.limit-by #setLimit,
#gf-tree .sort-by.limit-by #setLimit,
#gf-grid .sort-by.limit-by #setLimit {
  min-width: 2.75em;
  width: auto;
  max-width: none;
  padding-right: 2px;
  text-overflow: clip;
  overflow: visible;
}

/* ------------------------------------------------------------
   3) PRODUCT CAROUSEL ARROWS — SLIGHTLY LARGER  (Johnny, 19 Sep)

   Flickity draws its own prev/next buttons and sizes them in its
   own stylesheet; section-featured-collection.css only moves them
   (right/left: -10px desktop, -5px on phones). Rather than hard-
   code a pixel size — which would silently SHRINK them if the
   theme's base is already above Flickity's 44px default — this
   scales whatever size they currently are.

   Flickity centres the buttons with transform: translateY(-50%),
   so that has to be repeated here or they jump to the top of the
   rail. Scaling from the centre adds ~4px each side at 44px, which
   stays clear of the rail edge; rit-fixes.css §1 clips horizontal
   overflow, so this cannot introduce a sideways scroll on phones.

   TO TUNE: change the scale factor. 1.0 is the theme default.
   Once someone measures the real base size in a browser this can
   become an explicit width/height instead.
------------------------------------------------------------- */
.featured__collection-carousel .flickity-prev-next-button,
.flickity__section .flickity-prev-next-button {
  transform: translateY(-50%) scale(1.18);
}

/* ------------------------------------------------------------
   4) PRODUCT CARD PRICE — BOLD, SLIGHTLY LARGER  (Johnny, 19 Sep)

   Theme settings -> Custom CSS sets the card price to 12px while
   the title above it is 14px bold:

       .product-info .price-item    { font-size: 12px; }
       .product-info .product-title { font-size: 14px; font-weight: bold; }

   so the price read as the smaller, lighter of the two. 14px/700
   puts them on equal footing.

   The struck-through compare-at price is deliberately left at
   normal weight — two bold figures side by side fight each other,
   and the one that matters is the one being charged.

   SCOPE: every product card, not only the carousel. The same
   snippet draws the card everywhere (product-listing.liquid, and
   Globo's own card template on collection and search pages), so
   scoping this to carousels would leave the price at 12px on the
   collection grid and 14px on the homepage. To make it carousel-
   only, prefix both selectors with `.featured__collection-carousel `.

   (0,3,0) beats the (0,2,0) Custom CSS rule whatever the load
   order, so no !important.
------------------------------------------------------------- */
.product-info .price--listing .price-item {
  font-size: 14px;
  font-weight: 700;
}
.product-info .price--listing s.price-item {
  font-weight: 400;
}
