/** Shopify CDN: Minification failed

Line 174:0 Expected "}" to go with "{"

**/
/* ==========================================================================
   Giorgio — product page corrections from the client's review video.

   Loaded after custom-CSS.css (see layout/theme.liquid) so it can win at equal
   specificity without raising it. It lives apart from that file on purpose:
   custom-CSS.css is edited directly on the server by other people, so anything
   written into it is in the path of the next such edit.
   ========================================================================== */

/* ---- Price: medium weight down to normal -------------------------------
   "The price is really kind of medium bold. If we could take that down to just
   normal — we don't need to decrease the font size, but just take it off bold
   or semi-bold. It's a little too much in their face."  [2:11]

   custom-CSS.css sets font-weight: 500 on this exact selector. Matching it
   character for character (0,3,1) and loading later is the whole mechanism —
   no !important, so the theme editor and any later rule still outrank this. */
.custom-main-product span.price-item.price-item--regular {
  font-weight: 400;
  /* The mockups set the price in the ink colour (#2B2523, "softer" in the
     client's words), never in pure black. */
  color: #2b2523;
}

/* ---- Reviews: the star shape --------------------------------------------
   "See how these stars are nice and perfect and crisp? I'd like them to look
   like that in the reviews everywhere."  [2:00]

   The mockups draw their stars as the text glyph ★ — a sharp-pointed star, set
   in raspberry at 14px (.stars in the product-page HTML files). Klaviyo draws
   its own: an SVG whose path has rounded joins, 20px, which is what reads as
   soft and oversized next to 13px text.

   The colour already matches (#CE0F69), so only the shape and the size differ.

   SHAPE. Path data normally cannot be reached from CSS — but `d` is a real CSS
   property for <path> in SVG 2, supported in every current browser, so the
   rounded outline is simply overwritten with a sharp five-pointed one.

   That detail matters more than it looks: swapping the glyph in with ::before
   would have been the obvious approach and would have thrown away the partial
   star. Klaviyo fills each star through a <linearGradient> whose stop sits at
   the exact fraction (a 4.7 average renders the fifth star at 58%), and that
   gradient keeps painting through whatever outline the path describes. So the
   rating stays honest: 4.7 does not round down to 4.5.

   Verified on a 4.7-rated product: sharp points, fifth star still 58% filled.

   Site-wide, not product pages only — the badge appears on cards and in the
   review list too, and the client asked for all of them to match.

   If Klaviyo ever changes its markup these rules stop matching and the stars
   fall back to Klaviyo's own. Nothing breaks. */
.kl_reviews__stars_badge svg path,
.klaviyo-star-rating-widget svg path {
  d: path(
    'M10 0.65 L12.13 7.07 L18.89 7.11 L13.44 11.12 L15.5 17.56 L10 13.62 L4.5 17.56 L6.56 11.12 L1.11 7.11 L7.87 7.07 Z'
  );
}

/* SIZE. Klaviyo writes width/height into a style attribute on each <svg>, and
   an inline style can only be answered with !important — this is not reaching
   for a hammer, it is the one mechanism available. */
.kl_reviews__stars_badge svg,
.klaviyo-star-rating-widget svg {
  width: var(--gio-star-size, 14px) !important;
  height: var(--gio-star-size, 14px) !important;
}

/* The glyph version carries 1px of letter-spacing; inline-block SVGs need it
   spelled out. */
.kl_reviews__stars_badge svg + svg,
.klaviyo-star-rating-widget svg + svg {
  margin-left: 1px;
}

/* ==========================================================================
   The "+" that opens an accordion row.

   The theme writes it as a bare <i>, whose only job in HTML is "this text is
   set apart" -- and the browser's default way of setting text apart is
   italics. So the plus was leaning, alone on a page where nothing else does.
   Corrected here rather than by changing the tag, because the markup is shared
   with main-product.liquid and every product template that renders it.

   22px against the row's 16px is the mockup's own figure (.acc-row span), not
   a guess -- the marker is meant to read as a control, not as punctuation.
   ========================================================================== */
.custom-main-product .product__accordion summary > i {
  font-style: normal;
  font-size: 22px;
  line-height: 1;
}

/* Collapsible rows on a phone: titles and their content read left-aligned. */
@media screen and (max-width: 749px) {
  html body .product__accordion summary,
  html body .product__accordion summary h2,
  html body .product__accordion .summary__title {
    justify-content: space-between !important;
    text-align: left !important;
  }
  html body .product__accordion .accordion__title {
    margin-right: auto !important;
    text-align: left !important;
  }
  html body .product__accordion .accordion__content,
  html body .product__accordion .accordion__content * {
    text-align: left !important;
  }
}

/* Price: Cormorant Infant, upright, with an italic packaging label */
.custom-main-product span.price-item.price-item--regular {
  font-family: 'Cormorant Infant', 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  color: #2B2523 !important;
}
.custom-main-product span.price-item.price-item--regular::after {
  font-family: 'Cormorant Infant', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: #5A524F;
  margin-left: 10px;
    text-transform: none;

}
body:has(input[type="radio"][value="The Dozen"]) .custom-main-product span.price-item.price-item--regular::after { content: 'the Dozen'; }
body:has(input[type="radio"][value="The Dozen"]:checked) .custom-main-product span.price-item.price-item--regular::after { content: 'the Dozen'; }
body:has(input[type="radio"][value="Gift Box"]:checked) .custom-main-product span.price-item.price-item--regular::after { content: 'the Gift Box'; }
body:has(input[type="radio"][value="Biscotti Jar"]:checked) .custom-main-product span.price-item.price-item--regular::after { content: 'the Signature Jar'; }
@media screen and (max-width: 749px) {
  .custom-main-product span.price-item.price-item--regular { font-size: 26px !important; }
  .custom-main-product span.price-item.price-item--regular::after { font-size: 17px; }
}

/* Stop the $25.00 flash: the currency app's price stays invisible until the no-cents script has cleaned it */
.custom-main-product .price-item .money:not(.gio-cents-donor),
.custom-main-product .price-item .conversion-bear-money:not(.gio-cents-donor),
.custom-main-product .price-item .seal-money:not(.gio-cents-donor) {
  color: transparent !important;
}

/* Packaging label waits for the cleaned price, so it never slides */
.custom-main-product span.price-item.price-item--regular:has(.money:not(.gio-cents-donor), .seal-money:not(.gio-cents-donor), .conversion-bear-money:not(.gio-cents-donor))::after {
  visibility: hidden;
}

/* Packaging label in a fixed spot: the price gets a fixed-width slot (biscotti/cookie pages only) */
body:has(input[type="radio"][value="The Dozen"]) .custom-main-product span.price-item.price-item--regular {
  display: inline-grid !important;
  grid-template-columns: 52px auto;
  align-items: baseline;
  white-space: nowrap;
}
body:has(input[type="radio"][value="The Dozen"]) .custom-main-product span.price-item.price-item--regular::after {
  margin-left: 0;
}
@media screen and (max-width: 749px) {
  body:has(input[type="radio"][value="The Dozen"]) .custom-main-product span.price-item.price-item--regular {
    grid-template-columns: 48px auto;
  }