/** Shopify CDN: Minification failed

Line 31:72 Unexpected "{"
Line 31:73 Expected identifier but found "%"
Line 34:10 Expected identifier but found whitespace
Line 35:2 Unexpected "-"
Line 35:25 Expected ":"
Line 35:49 Unexpected "("
Line 36:25 Expected ":"
Line 36:94 Unexpected "("
Line 37:31 Expected ":"
Line 37:64 Expected identifier but found whitespace
... and 810 more hidden warnings

**/
/* === Beleaev thematic card badges (caviar-tile style) 2026-07-09 === */
.card__inner:has(> .card__theme-badges){position:relative;}
.card__theme-badges{position:absolute!important;top:var(--image-padding,0px)!important;left:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:auto!important;height:auto!important;max-width:calc(100% - 12px);z-index:6;pointer-events:none;display:block;margin:0;}
.card__tbadge{box-sizing:border-box;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-heading-family,"Cormorant Garamond",serif);font-weight:700;font-size:15px;line-height:1;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:#1a1206;border:1px solid #a37f2a;border-radius:999px;padding:8px 17px 8px 14px;background:linear-gradient(180deg,#f4dd93 0%,#d3ac57 45%,#c9a961 100%);text-shadow:none;box-shadow:0 3px 12px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,248,224,.40);}
.card__tbadge-ico{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:#1a1206;flex:0 0 auto;}
.card__tbadge-ico svg{width:100%;height:100%;display:block;fill:currentColor;}
.card__tbadge-txt{font-weight:700;-webkit-text-stroke:0.35px #1a1206;text-stroke:0.35px #1a1206;paint-order:stroke fill;}
.card__theme-badges--wholesale{top:auto!important;right:auto!important;bottom:calc(var(--image-padding,0px) + 9px)!important;left:calc(var(--image-padding,0px) + 9px)!important;transform:none!important;max-width:none!important;z-index:7;}
.card__tbadge--wholesale{width:112px;height:52px;min-height:0;padding:4px 5px 4px 5px;gap:0;flex-direction:row;justify-content:flex-start;align-items:center;white-space:normal;color:#11100d;border:2px solid #11100d;border-left:12px solid #c91f2d;border-radius:2px;background:#fffef8;box-shadow:0 3px 10px rgba(0,0,0,.52),inset 0 0 0 2px rgba(201,169,97,.32);font-family:var(--font-body-family,"Nunito Sans",sans-serif);letter-spacing:0;text-shadow:none;text-transform:none;}
.card__tbadge--wholesale .card__tbadge-ico{display:none;}
.card__tbadge--wholesale .card__tbadge-txt{display:grid;gap:1px;text-align:left;line-height:.96;-webkit-text-stroke:0;text-stroke:0;}
.card__tbadge--wholesale .card__tbadge-line{display:block;white-space:nowrap;}
.card__tbadge--wholesale .card__tbadge-line:first-child{font-size:12px;font-weight:900;letter-spacing:.06em;}
.card__tbadge--wholesale .card__tbadge-line:last-child{font-size:15px;font-weight:900;letter-spacing:0;}
/* === Wholesale Price Match PDP media badge === */
.product-media-container:has(> .pdp-wholesale-badge){position:relative;}{% comment %} BELEAEV_MEANINGFUL_IMAGE_ALT_AHREFS_2026_08_30
  Renders a product card

  Accepts:
  - card_product: {Object} Product Liquid object (optional)
  - card_variant: {Object} Variant Liquid object used for a size-specific card link and price (optional)
  - media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
  - image_shape: {String} Image mask to apply to the product image card. Values are "arch", "blob", "chevronleft", "chevronright", "diamond", "parallelogram", and "round". (optional)
  - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
  - show_vendor: {Boolean} Show the product vendor. Default: false
  - show_rating: {Boolean} Show the product rating. Default: false
  - extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
  - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
  - show_quick_add: {Boolean} Show the quick add button.
  - section_id: {String} The ID of the section that contains this card.
  - horizontal_class: {Boolean} Add a card--horizontal class if set to true. Default: false (optional)
  - horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)
  - placeholder_image: {String} The placeholder image to use when no product exists. Default: 'product-apparel-2' (optional)

  Usage:
  {% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{%- liquid
  assign beleaev_card_url = card_product.url
  if card_variant != blank
    assign beleaev_card_url = card_product.url | append: '?variant=' | append: card_variant.id
  endif
-%}

{%- comment -%} BELEAEV PERF: component-rating.css loaded once in head {%- endcomment -%}
{%- comment -%} BELEAEV PERF: component-volume-pricing.css loaded once in head {%- endcomment -%}

{% comment %} Beleaev: tagline override + card typography (BOT Tanya test theme) {% endcomment %}

{%- comment -%} Discover-prod mobile subtitle visibility (22.05.2026 Ã¢â‚¬â€ fix for 9.2px) {%- endcomment -%}

{%- comment -%} BELEAEV_CARD_CSS_DEDUP_AHREFS_2026_08_30: custom card CSS moved to component-card.css and emitted once. {%- endcomment -%}

{%- if card_product and card_product != empty -%}
  {%- liquid
    assign ratio = 1
    if card_product.featured_media and media_aspect_ratio == 'portrait'
      assign ratio = 0.8
    elsif card_product.featured_media and media_aspect_ratio == 'adapt'
      assign ratio = card_product.featured_media.aspect_ratio
    endif
    if ratio == 0 or ratio == null
      assign ratio = 1
    endif

    assign beleaev_tagline = ''
    case card_product.handle
      when 'royal-baerii-caviar'
        assign beleaev_tagline = 'Refined, balanced and effortlessly elegant'
      when 'almaz-diamond-caviar'
        assign beleaev_tagline = 'The Diamond of the Sturgeon World'
      when 'beluga-xxl-special-reserve'
        assign beleaev_tagline = 'The grandest expression of Beluga: extra-large pearls<br>and exceptional refinement'
      when 'royal-beluga-caviar'
        assign beleaev_tagline = 'The Pinnacle of Luxury Sturgeon Caviar'
      when 'golden-oscietra-special-reserve'
        assign beleaev_tagline = 'The most prestigious expression of Oscietra'
      when 'royal-oscietra-caviar'
        assign beleaev_tagline = 'The connoisseur’s classic'
      when 'royal-imperial-caviar'
        assign beleaev_tagline = 'Opulent, creamy and impeccably balanced'
      when 'wild-salmon-roe'
        assign beleaev_tagline = 'Bright orange pearls, a joyful burst of Pacific brine'
      when 'wagyu-chuck-denver-steak-bms-6-7-frozen-300g'
        assign beleaev_tagline = 'Marbled Wagyu. Pure tenderness.'
      when 'chilean-king-crab-clusters-cooked-frozen-500g'
        assign beleaev_tagline = 'Wild king crab. Sweet & succulent.'
      when 'rock-lobster-tail-frozen-220g'
        assign beleaev_tagline = 'Wild rock lobster. Delicate, firm.'
      when 'lafitte-duck-foie-gras-terrine-450g'
        assign beleaev_tagline = 'Gascon foie gras. Silky and rich.'
      when 'snails-prepared-in-shells-frozen-x-24'
        assign beleaev_tagline = 'Burgundy snails in herb butter.'
      when 'tsar-nikolai-prime-smoked-salmon-fillet-frozen-600g'
        assign beleaev_tagline = 'Cold-smoked salmon. Clean & buttery.'
      when 'autumn-black-truffle-tuber-uncinatum-fresh'
        assign beleaev_tagline = 'Burgundy truffle. Earthy & aromatic.'
      when 'xl-lobster-tail-claw-raw-frozen-150-170g'
        assign beleaev_tagline = 'XL lobster cut. Sweet & succulent.'
    endcase
    if beleaev_tagline == blank
      assign beleaev_tagline = card_product.metafields.custom.product_title_line
    endif

    assign beleaev_title = card_product.title | escape
    assign beleaev_title = beleaev_title | replace: ' Special Reserve', '<br>Special Reserve'
    assign beleaev_title = beleaev_title | replace: ' SPECIAL RESERVE', '<br>SPECIAL RESERVE'
    assign beleaev_title = beleaev_title | replace: 'Royal Baeri Caviar', 'Royal Baeri<br>Caviar'
    assign beleaev_title = beleaev_title | replace: 'ROYAL BAERI CAVIAR', 'ROYAL BAERI<br>CAVIAR'
  -%}
  <div
    class="card-wrapper product-card-wrapper underline-links-hover"
    data-blv-summer-card
    data-blv-summer-handle="{{ card_product.handle | escape }}"
    data-blv-summer-variants="{%- for variant in card_product.variants -%}{{ variant.id }}:{{ variant.price }}{%- unless forloop.last -%},{%- endunless -%}{%- endfor -%}"
  >
    <div
      class="
        card card--{{ settings.card_style }}
        {% if card_product.featured_media %} card--media{% else %} card--text{% endif %}
        {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
        {% if image_shape and image_shape != 'default' %} card--shape{% endif %}
        {% if extend_height %} card--extend-height{% endif %}
        {% if card_product.featured_media == nil and settings.card_style == 'card' %} ratio{% endif %}
        {% if horizontal_class %} card--horizontal{% endif %}
      "
      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
    >
      <div
        class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if card_product.featured_media or settings.card_style == 'standard' %} ratio{% endif %}"
        style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
      >
        {% render 'beleaev-card-badges', card_product: card_product %}
        {%- if card_product.featured_media -%}
          <div class="card__media{% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}">
            <div class="media media--transparent media--hover-effect">
              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
              <img
                srcset="
                  {%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
                  {{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
                "
                src="{{ card_product.featured_media | image_url: width: 533 }}"
                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                alt="{{ card_product.featured_media.alt | default: card_product.title | escape }}"
                class="motion-reduce"
                {% unless lazy_load == false %}
                  loading="lazy"
                {% endunless %}
                width="{{ card_product.featured_media.width }}"
                height="{{ card_product.featured_media.height }}"
              >
              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

              {%- if card_product.media[1] != null and show_secondary_image -%}
                <img
                  srcset="
                    {%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
                    {%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
                    {%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
                    {%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
                    {%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
                    {%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
                    {{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w
                  "
                  src="{{ card_product.media[1] | image_url: width: 533 }}"
                  sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                  alt="{{ card_product.media[1].alt | default: card_product.title | escape }}"
                  class="motion-reduce"
                  loading="lazy"
                  width="{{ card_product.media[1].width }}"
                  height="{{ card_product.media[1].height }}"
                >
              {%- endif -%}
            </div>
          </div>
        {%- endif -%}
        <div class="card__content">
          <div class="card__information">
            <h3
              class="card__heading"
              {% if card_product.featured_media == null and settings.card_style == 'standard' %}
                id="title-{{ section_id }}-{{ card_product.id }}"
              {% endif %}
            >
              <a
                href="{{ beleaev_card_url }}"
                id="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }}"
                class="full-unstyled-link"
                aria-labelledby="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }} NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
              >
                {{ card_product.title | escape }}
              </a>
            </h3>
            <div class="jdgm-widget jdgm-preview-badge" data-id="{{ card_product.id }}" data-template="manual-installation" data-product-title="{{ card_product.title | escape }}" data-product-url="{{ beleaev_card_url }}">{{ card_product.metafields.judgeme.badge }}</div>
          </div>
          <div class="card__badge {{ settings.badge_position }}">
            {%- if card_product.available == false -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
              >
                {{- 'products.product.sold_out' | t -}}
              </span>
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
              >
                {{- 'products.product.on_sale' | t -}}
              </span>
            {%- endif -%}
          </div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3
            class="card__heading{% if card_product.featured_media or settings.card_style == 'standard' %} h5{% endif %}"
            {% if card_product.featured_media or settings.card_style == 'card' %}
              id="title-{{ section_id }}-{{ card_product.id }}"
            {% endif %}
          >
            <a
              href="{{ beleaev_card_url }}"
              id="CardLink-{{ section_id }}-{{ card_product.id }}"
              class="full-unstyled-link"
              aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}"
            >
              {{ beleaev_title }}
            </a>
          </h3>
          <div class="jdgm-widget jdgm-preview-badge" data-id="{{ card_product.id }}" data-template="manual-installation" data-product-title="{{ card_product.title | escape }}" data-product-url="{{ beleaev_card_url }}">{{ card_product.metafields.judgeme.badge }}</div>
          {%- if beleaev_tagline != blank -%}
            <p class="card__subtitle">{{ beleaev_tagline }}</p>
          {%- endif -%}
          <div class="card-information">
            {%- if show_vendor -%}
              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
              <div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
            {%- endif -%}

            

    <div class="AirReviews-Widget AirReviews-Widget--Stars" style="margin-top:0.7rem" data-review-avg="{{ card_product.metafields.air_reviews_product.review_avg }}" data-review-count="{{ card_product.metafields.air_reviews_product.review_count }}"></div>

<span class="caption-large light">{{ block.settings.description | escape }}</span>

            {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
              {% liquid
                assign rating_decimal = 0
                assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
                if decimal >= 0.3 and decimal <= 0.7
                  assign rating_decimal = 0.5
                elsif decimal > 0.7
                  assign rating_decimal = 1
                endif
              %}
              <div
                class="rating"
                role="img"
                aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: card_product.metafields.reviews.rating.value, rating_max: card_product.metafields.reviews.rating.value.scale_max }}"
              >
                <span
                  aria-hidden="true"
                  class="rating-star"
                  style="--rating: {{ card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"
                ></span>
              </div>
              <p class="rating-text caption">
                <span aria-hidden="true">
                  {{- card_product.metafields.reviews.rating.value }} /
                  {{ card_product.metafields.reviews.rating.value.scale_max -}}
                </span>
              </p>
              <p class="rating-count caption">
                <span aria-hidden="true">({{ card_product.metafields.reviews.rating_count }})</span>
                <span class="visually-hidden">
                  {{- card_product.metafields.reviews.rating_count }}
                  {{ 'accessibility.total_reviews' | t -}}
                </span>
              </p>
            {%- endif -%}

            {%- if card_product.quantity_price_breaks_configured? -%}
              <div class="card__information-volume-pricing-note">
                <span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
              </div>
            {%- endif -%}

  <p class="beleaev-card-long-text" style="font-size:12px;">{{ card_product.metafields.custom.product_card_line }}</p>

          <div class="beleaev-price-row">
        {%- if show_quick_add -%}
          <div class="quick-add no-js-hidden">
            {%- liquid
              assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id
              assign qty_rules = false
              if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
                assign qty_rules = true
              endif
            -%}
            {%- if card_product.variants.size > 1 or qty_rules -%}
              <modal-opener data-modal="#QuickAdd-{{ card_product.id }}">
                <button
                  id="{{ product_form_id }}-submit"
                  type="submit"
                  name="add"
                  class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add animate-arrow{% endif %}"
                  aria-haspopup="dialog"
                  aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
                  data-product-url="{{ beleaev_card_url }}"
                >
                  {{ 'products.product.choose_options' | t }}
                  {%- if horizontal_quick_add -%}
                    <span class="icon-wrap">{% render 'icon-arrow' %}</span>
                  {%- endif -%}
                  {%- render 'loading-spinner' -%}
                </button>
              </modal-opener>
              <quick-add-modal id="QuickAdd-{{ card_product.id }}" class="quick-add-modal">
                <div
                  role="dialog"
                  aria-label="{{ 'products.product.choose_product_options' | t: product_name: card_product.title | escape }}"
                  aria-modal="true"
                  class="quick-add-modal__content global-settings-popup"
                  tabindex="-1"
                >
                  <button
                    id="ModalClose-{{ card_product.id }}"
                    type="button"
                    class="quick-add-modal__toggle"
                    aria-label="{{ 'accessibility.close' | t }}"
                  >
                    {% render 'icon-close' %}
                  </button>
                  <div id="QuickAddInfo-{{ card_product.id }}" class="quick-add-modal__content-info"></div>
                </div>
              </quick-add-modal>
            {%- else -%}
              <product-form data-section-id="{{ section.id }}">
                {%- form 'product',
                  card_product,
                  id: product_form_id,
                  class: 'form',
                  novalidate: 'novalidate',
                  data-type: 'add-to-cart-form'
                -%}
                  <input
                    type="hidden"
                    name="id"
                    value="{{ card_product.selected_or_first_available_variant.id }}"
                    class="product-variant-id"
                    {% if card_product.selected_or_first_available_variant.available == false %}
                      disabled
                    {% endif %}
                  >
                  <button
                    id="{{ product_form_id }}-submit"
                    type="submit"
                    name="add"
                    class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add{% endif %}"
                    aria-haspopup="dialog"
                    aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
                    aria-live="polite"
                    data-sold-out-message="true"
                    {% if card_product.selected_or_first_available_variant.available == false %}
                      disabled
                    {% endif %}
                  >
                    <span>
                      {%- if card_product.selected_or_first_available_variant.available -%}
                        {{ 'products.product.add_to_cart' | t }}
                      {%- else -%}
                        {{ 'products.product.sold_out' | t }}
                      {%- endif -%}
                    </span>
                    <span class="sold-out-message hidden">
                      {{ 'products.product.sold_out' | t }}
                    </span>
                    {%- if horizontal_quick_add -%}
                      <span class="icon-wrap">{% render 'icon-plus' %}</span>
                    {%- endif -%}
                    {%- render 'loading-spinner' -%}
                  </button>
                {%- endform -%}
              </product-form>
            {%- endif -%}
          </div>
        {%- endif -%}
          {% render 'price',
            product: card_product,
            target_variant: card_variant,
            price_class: '',
            show_compare_at_price: true
          %}
          </div>
          </div>
        </div>
        <div class="card__badge {{ settings.badge_position }}">
          {%- if card_product.available == false -%}
            <span
              id="Badge-{{ section_id }}-{{ card_product.id }}"
              class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
            >
              {{- 'products.product.sold_out' | t -}}
            </span>
          {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
            <span
              id="Badge-{{ section_id }}-{{ card_product.id }}"
              class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
            >
              {{- 'products.product.on_sale' | t -}}
            </span>
          {%- endif -%}
        </div>
      </div>
    </div>
  </div>
{%- else -%}
  {%- liquid
    assign ratio = 1
    if media_aspect_ratio == 'portrait'
      assign ratio = 0.8
    endif
  -%}
  <div class="card-wrapper product-card-wrapper underline-links-hover">
    <div
      class="
        card card--{{ settings.card_style }}
        {% if extend_height %} card--extend-height{% endif %}
        {% if image_shape and image_shape != 'default' %} card--shape{% endif %}
        {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
      "
      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
    >
      <div
        class="card__inner{% if settings.card_style == 'standard' %} color-{{ settings.card_color_scheme }} gradient{% endif %} ratio"
      >
        <div
          class="card__media {% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}"
        >
          <div
            class="media media--transparent"
          >
            {%- if placeholder_image -%}
              {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
            {%- else -%}
              {{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
          </div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading card__heading--placeholder{% if settings.card_style == 'standard' %} h5{% endif %}">
            <a role="link" aria-disabled="true" class="full-unstyled-link">
              {{ 'onboarding.product_title' | t }}
            </a>
          </h3>
          <div class="card-information">
            {%- if show_vendor -%}
              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</s{% comment %} BELEAEV_MEANINGFUL_IMAGE_ALT_AHREFS_2026_08_30
  Renders a product card

  Accepts:
  - card_product: {Object} Product Liquid object (optional)
  - card_variant: {Object} Variant Liquid object used for a size-specific card link and price (optional)
  - media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
  - image_shape: {String} Image mask to apply to the product image card. Values are "arch", "blob", "chevronleft", "chevronright", "diamond", "parallelogram", and "round". (optional)
  - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
  - show_vendor: {Boolean} Show the product vendor. Default: false
  - show_rating: {Boolean} Show the product rating. Default: false
  - extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
  - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
  - show_quick_add: {Boolean} Show the quick add button.
  - section_id: {String} The ID of the section that contains this card.
  - horizontal_class: {Boolean} Add a card--horizontal class if set to true. Default: false (optional)
  - horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)
  - placeholder_image: {String} The placeholder image to use when no product exists. Default: 'product-apparel-2' (optional)

  Usage:
  {% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{%- liquid
  assign beleaev_card_url = card_product.url
  if card_variant != blank
    assign beleaev_card_url = card_product.url | append: '?variant=' | append: card_variant.id
  endif
-%}

{%- comment -%} BELEAEV PERF: component-rating.css loaded once in head {%- endcomment -%}
{%- comment -%} BELEAEV PERF: component-volume-pricing.css loaded once in head {%- endcomment -%}

{% comment %} Beleaev: tagline override + card typography (BOT Tanya test theme) {% endcomment %}

{%- comment -%} Discover-prod mobile subtitle visibility (22.05.2026 Ã¢â‚¬â€ fix for 9.2px) {%- endcomment -%}

{%- comment -%} BELEAEV_CARD_CSS_DEDUP_AHREFS_2026_08_30: custom card CSS moved to component-card.css and emitted once. {%- endcomment -%}

{%- if card_product and card_product != empty -%}
  {%- liquid
    assign ratio = 1
    if card_product.featured_media and media_aspect_ratio == 'portrait'
      assign ratio = 0.8
    elsif card_product.featured_media and media_aspect_ratio == 'adapt'
      assign ratio = card_product.featured_media.aspect_ratio
    endif
    if ratio == 0 or ratio == null
      assign ratio = 1
    endif

    assign beleaev_tagline = ''
    case card_product.handle
      when 'royal-baerii-caviar'
        assign beleaev_tagline = 'Refined, balanced and effortlessly elegant'
      when 'almaz-diamond-caviar'
        assign beleaev_tagline = 'The Diamond of the Sturgeon World'
      when 'beluga-xxl-special-reserve'
        assign beleaev_tagline = 'The grandest expression of Beluga: extra-large pearls<br>and exceptional refinement'
      when 'royal-beluga-caviar'
        assign beleaev_tagline = 'The Pinnacle of Luxury Sturgeon Caviar'
      when 'golden-oscietra-special-reserve'
        assign beleaev_tagline = 'The most prestigious expression of Oscietra'
      when 'royal-oscietra-caviar'
        assign beleaev_tagline = 'The connoisseur’s classic'
      when 'royal-imperial-caviar'
        assign beleaev_tagline = 'Opulent, creamy and impeccably balanced'
      when 'wild-salmon-roe'
        assign beleaev_tagline = 'Bright orange pearls, a joyful burst of Pacific brine'
      when 'wagyu-chuck-denver-steak-bms-6-7-frozen-300g'
        assign beleaev_tagline = 'Marbled Wagyu. Pure tenderness.'
      when 'chilean-king-crab-clusters-cooked-frozen-500g'
        assign beleaev_tagline = 'Wild king crab. Sweet & succulent.'
      when 'rock-lobster-tail-frozen-220g'
        assign beleaev_tagline = 'Wild rock lobster. Delicate, firm.'
      when 'lafitte-duck-foie-gras-terrine-450g'
        assign beleaev_tagline = 'Gascon foie gras. Silky and rich.'
      when 'snails-prepared-in-shells-frozen-x-24'
        assign beleaev_tagline = 'Burgundy snails in herb butter.'
      when 'tsar-nikolai-prime-smoked-salmon-fillet-frozen-600g'
        assign beleaev_tagline = 'Cold-smoked salmon. Clean & buttery.'
      when 'autumn-black-truffle-tuber-uncinatum-fresh'
        assign beleaev_tagline = 'Burgundy truffle. Earthy & aromatic.'
      when 'xl-lobster-tail-claw-raw-frozen-150-170g'
        assign beleaev_tagline = 'XL lobster cut. Sweet & succulent.'
    endcase
    if beleaev_tagline == blank
      assign beleaev_tagline = card_product.metafields.custom.product_title_line
    endif

    assign beleaev_title = card_product.title | escape
    assign beleaev_title = beleaev_title | replace: ' Special Reserve', '<br>Special Reserve'
    assign beleaev_title = beleaev_title | replace: ' SPECIAL RESERVE', '<br>SPECIAL RESERVE'
    assign beleaev_title = beleaev_title | replace: 'Royal Baeri Caviar', 'Royal Baeri<br>Caviar'
    assign beleaev_title = beleaev_title | replace: 'ROYAL BAERI CAVIAR', 'ROYAL BAERI<br>CAVIAR'
  -%}
  <div
    class="card-wrapper product-card-wrapper underline-links-hover"
    data-blv-summer-card
    data-blv-summer-handle="{{ card_product.handle | escape }}"
    data-blv-summer-variants="{%- for variant in card_product.variants -%}{{ variant.id }}:{{ variant.price }}{%- unless forloop.last -%},{%- endunless -%}{%- endfor -%}"
  >
    <div
      class="
        card card--{{ settings.card_style }}
        {% if card_product.featured_media %} card--media{% else %} card--text{% endif %}
        {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
        {% if image_shape and image_shape != 'default' %} card--shape{% endif %}
        {% if extend_height %} card--extend-height{% endif %}
        {% if card_product.featured_media == nil and settings.card_style == 'card' %} ratio{% endif %}
        {% if horizontal_class %} card--horizontal{% endif %}
      "
      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
    >
      <div
        class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if card_product.featured_media or settings.card_style == 'standard' %} ratio{% endif %}"
        style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
      >
        {% render 'beleaev-card-badges', card_product: card_product %}
        {%- if card_product.featured_media -%}
          <div class="card__media{% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}">
            <div class="media media--transparent media--hover-effect">
              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
              <img
                srcset="
                  {%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
                  {%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
                  {{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
                "
                src="{{ card_product.featured_media | image_url: width: 533 }}"
                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                alt="{{ card_product.featured_media.alt | default: card_product.title | escape }}"
                class="motion-reduce"
                {% unless lazy_load == false %}
                  loading="lazy"
                {% endunless %}
                width="{{ card_product.featured_media.width }}"
                height="{{ card_product.featured_media.height }}"
              >
              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

              {%- if card_product.media[1] != null and show_secondary_image -%}
                <img
                  srcset="
                    {%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
                    {%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
                    {%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
                    {%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
                    {%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
                    {%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
                    {{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w
                  "
                  src="{{ card_product.media[1] | image_url: width: 533 }}"
                  sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                  alt="{{ card_product.media[1].alt | default: card_product.title | escape }}"
                  class="motion-reduce"
                  loading="lazy"
                  width="{{ card_product.media[1].width }}"
                  height="{{ card_product.media[1].height }}"
                >
              {%- endif -%}
            </div>
          </div>
        {%- endif -%}
        <div class="card__content">
          <div class="card__information">
            <h3
              class="card__heading"
              {% if card_product.featured_media == null and settings.card_style == 'standard' %}
                id="title-{{ section_id }}-{{ card_product.id }}"
              {% endif %}
            >
              <a
                href="{{ beleaev_card_url }}"
                id="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }}"
                class="full-unstyled-link"
                aria-labelledby="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }} NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
              >
                {{ card_product.title | escape }}
              </a>
            </h3>
            <div class="jdgm-widget jdgm-preview-badge" data-id="{{ card_product.id }}" data-template="manual-installation" data-product-title="{{ card_product.title | escape }}" data-product-url="{{ beleaev_card_url }}">{{ card_product.metafields.judgeme.badge }}</div>
          </div>
          <div class="card__badge {{ settings.badge_position }}">
            {%- if card_product.available == false -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
              >
                {{- 'products.product.sold_out' | t -}}
              </span>
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
              >
                {{- 'products.product.on_sale' | t -}}
              </span>
            {%- endif -%}
          </div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3
            class="card__heading{% if card_product.featured_media or settings.card_style == 'standard' %} h5{% endif %}"
            {% if card_product.featured_media or settings.card_style == 'card' %}
              id="title-{{ section_id }}-{{ card_product.id }}"
            {% endif %}
          >
            <a
              href="{{ beleaev_card_url }}"
              id="CardLink-{{ section_id }}-{{ card_product.id }}"
              class="full-unstyled-link"
              aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}"
            >
              {{ beleaev_title }}
            </a>
          </h3>
          <div class="jdgm-widget jdgm-preview-badge" data-id="{{ card_product.id }}" data-template="manual-installation" data-product-title="{{ card_product.title | escape }}" data-product-url="{{ beleaev_card_url }}">{{ card_product.metafields.judgeme.badge }}</div>
          {%- if beleaev_tagline != blank -%}
            <p class="card__subtitle">{{ beleaev_tagline }}</p>
          {%- endif -%}
          <div class="card-information">
            {%- if show_vendor -%}
              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
              <div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
            {%- endif -%}

            

    <div class="AirReviews-Widget AirReviews-Widget--Stars" style="margin-top:0.7rem" data-review-avg="{{ card_product.metafields.air_reviews_product.review_avg }}" data-review-count="{{ card_product.metafields.air_reviews_product.review_count }}"></div>

<span class="caption-large light">{{ block.settings.description | escape }}</span>

            {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
              {% liquid
                assign rating_decimal = 0
                assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
                if decimal >= 0.3 and decimal <= 0.7
                  assign rating_decimal = 0.5
                elsif decimal > 0.7
                  assign rating_decimal = 1
                endif
              %}
              <div
                class="rating"
                role="img"
                aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: card_product.metafields.reviews.rating.value, rating_max: card_product.metafields.reviews.rating.value.scale_max }}"
              >
                <span
                  aria-hidden="true"
                  class="rating-star"
                  style="--rating: {{ card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"
                ></span>
              </div>
              <p class="rating-text caption">
                <span aria-hidden="true">
                  {{- card_product.metafields.reviews.rating.value }} /
                  {{ card_product.metafields.reviews.rating.value.scale_max -}}
                </span>
              </p>
              <p class="rating-count caption">
                <span aria-hidden="true">({{ card_product.metafields.reviews.rating_count }})</span>
                <span class="visually-hidden">
                  {{- card_product.metafields.reviews.rating_count }}
                  {{ 'accessibility.total_reviews' | t -}}
                </span>
              </p>
            {%- endif -%}

            {%- if card_product.quantity_price_breaks_configured? -%}
              <div class="card__information-volume-pricing-note">
                <span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
              </div>
            {%- endif -%}

  <p class="beleaev-card-long-text" style="font-size:12px;">{{ card_product.metafields.custom.product_card_line }}</p>

          <div class="beleaev-price-row">
        {%- if show_quick_add -%}
          <div class="quick-add no-js-hidden">
            {%- liquid
              assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id
              assign qty_rules = false
              if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
                assign qty_rules = true
              endif
            -%}
            {%- if card_product.variants.size > 1 or qty_rules -%}
              <modal-opener data-modal="#QuickAdd-{{ card_product.id }}">
                <button
                  id="{{ product_form_id }}-submit"
                  type="submit"
                  name="add"
                  class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add animate-arrow{% endif %}"
                  aria-haspopup="dialog"
                  aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
                  data-product-url="{{ beleaev_card_url }}"
                >
                  {{ 'products.product.choose_options' | t }}
                  {%- if horizontal_quick_add -%}
                    <span class="icon-wrap">{% render 'icon-arrow' %}</span>
                  {%- endif -%}
                  {%- render 'loading-spinner' -%}
                </button>
              </modal-opener>
              <quick-add-modal id="QuickAdd-{{ card_product.id }}" class="quick-add-modal">
                <div
                  role="dialog"
                  aria-label="{{ 'products.product.choose_product_options' | t: product_name: card_product.title | escape }}"
                  aria-modal="true"
                  class="quick-add-modal__content global-settings-popup"
                  tabindex="-1"
                >
                  <button
                    id="ModalClose-{{ card_product.id }}"
                    type="button"
                    class="quick-add-modal__toggle"
                    aria-label="{{ 'accessibility.close' | t }}"
                  >
                    {% render 'icon-close' %}
                  </button>
                  <div id="QuickAddInfo-{{ card_product.id }}" class="quick-add-modal__content-info"></div>
                </div>
              </quick-add-modal>
            {%- else -%}
              <product-form data-section-id="{{ section.id }}">
                {%- form 'product',
                  card_product,
                  id: product_form_id,
                  class: 'form',
                  novalidate: 'novalidate',
                  data-type: 'add-to-cart-form'
                -%}
                  <input
                    type="hidden"
                    name="id"
                    value="{{ card_product.selected_or_first_available_variant.id }}"
                    class="product-variant-id"
                    {% if card_product.selected_or_first_available_variant.available == false %}
                      disabled
                    {% endif %}
                  >
                  <button
                    id="{{ product_form_id }}-submit"
                    type="submit"
                    name="add"
                    class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add{% endif %}"
                    aria-haspopup="dialog"
                    aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
                    aria-live="polite"
                    data-sold-out-message="true"
                    {% if card_product.selected_or_first_available_variant.available == false %}
                      disabled
                    {% endif %}
                  >
                    <span>
                      {%- if card_product.selected_or_first_available_variant.available -%}
                        {{ 'products.product.add_to_cart' | t }}
                      {%- else -%}
                        {{ 'products.product.sold_out' | t }}
                      {%- endif -%}
                    </span>
                    <span class="sold-out-message hidden">
                      {{ 'products.product.sold_out' | t }}
                    </span>
                    {%- if horizontal_quick_add -%}
                      <span class="icon-wrap">{% render 'icon-plus' %}</span>
                    {%- endif -%}
                    {%- render 'loading-spinner' -%}
                  </button>
                {%- endform -%}
              </product-form>
            {%- endif -%}
          </div>
        {%- endif -%}
          {% render 'price',
            product: card_product,
            target_variant: card_variant,
            price_class: '',
            show_compare_at_price: true
          %}
          </div>
          </div>
        </div>
        <div class="card__badge {{ settings.badge_position }}">
          {%- if card_product.available == false -%}
            <span
              id="Badge-{{ section_id }}-{{ card_product.id }}"
              class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
            >
              {{- 'products.product.sold_out' | t -}}
            </span>
          {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
            <span
              id="Badge-{{ section_id }}-{{ card_product.id }}"
              class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
            >
              {{- 'products.product.on_sale' | t -}}
            </span>
          {%- endif -%}
        </div>
      </div>
    </div>
  </div>
{%- else -%}
  {%- liquid
    assign ratio = 1
    if media_aspect_ratio == 'portrait'
      assign ratio = 0.8
    endif
  -%}
  <div class="card-wrapper product-card-wrapper underline-links-hover">
    <div
      class="
        card card--{{ settings.card_style }}
        {% if extend_height %} card--extend-height{% endif %}
        {% if image_shape and image_shape != 'default' %} card--shape{% endif %}
        {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
      "
      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
    >
      <div
        class="card__inner{% if settings.card_style == 'standard' %} color-{{ settings.card_color_scheme }} gradient{% endif %} ratio"
      >
        <div
          class="card__media {% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}"
        >
          <div
            class="media media--transparent"
          >
            {%- if placeholder_image -%}
              {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
            {%- else -%}
              {{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
          </div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading card__heading--placeholder{% if settings.card_style == 'standard' %} h5{% endif %}">
            <a role="link" aria-disabled="true" class="full-unstyled-link">
              {{ 'onboarding.product_title' | t }}
            </a>
          </h3>
          <div class="card-information">
            {%- if show_vendor -%}
              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
              <div class="caption-with-letter-spacing light">{{ 'products.product.vendor' | t }}</div>
            {%- endif -%}
            {% render 'price', show_compare_at_price: true %}
         
          </div>
        </div>
      </div>
    </div>
  </div>
{%- endif -%}




pan>
              <div class="caption-with-letter-spacing light">{{ 'products.product.vendor' | t }}</div>
            {%- endif -%}
            {% render 'price', show_compare_at_price: true %}
         
          </div>
        </div>
      </div>
    </div>
  </div>
{%- endif -%}





.pdp-wholesale-badge{position:absolute!important;z-index:5;left:12px;bottom:12px;pointer-events:none;}
.pdp-wholesale-badge__label{box-sizing:border-box;width:112px;height:52px;padding:4px 5px;display:grid;align-content:center;gap:1px;color:#11100d;border:2px solid #11100d;border-left:12px solid #c91f2d;border-radius:2px;background:#fffef8;box-shadow:0 3px 10px rgba(0,0,0,.52),inset 0 0 0 2px rgba(201,169,97,.32);font-family:var(--font-body-family,"Nunito Sans",sans-serif);line-height:.96;text-align:left;transform:scale(1.12);transform-origin:left bottom;}
.pdp-wholesale-badge__line{display:block;white-space:nowrap;}
.pdp-wholesale-badge__line:first-child{font-size:12px;font-weight:900;letter-spacing:.06em;}
.pdp-wholesale-badge__line:last-child{font-size:15px;font-weight:900;letter-spacing:0;}
@media (max-width:749px){.card__tbadge-txt{-webkit-text-stroke:0.2px #1a1206;text-stroke:0.2px #1a1206;}.pdp-wholesale-badge{left:7px;bottom:7px;}.pdp-wholesale-badge__label{width:82px;height:30px;padding:2px 3px;border-width:2px;border-left-width:6px;gap:0;}.pdp-wholesale-badge__line:first-child{font-size:8px;letter-spacing:0;}.pdp-wholesale-badge__line:last-child{font-size:10.5px;letter-spacing:0;}}
@media (max-width:749px){.card__theme-badges{max-width:calc(100% - 16px);}.card__tbadge{font-size:11px;padding:4px 10px 4px 8px;gap:4px;letter-spacing:.05em;}.card__tbadge-ico{width:14px;height:14px;}.card__theme-badges--wholesale{bottom:calc(var(--image-padding,0px) + 5px)!important;left:calc(var(--image-padding,0px) + 5px)!important;}.card__tbadge--wholesale{width:76px;height:30px;padding:2px 3px;gap:0;border-width:2px;border-left-width:6px;transform:scale(.765);transform-origin:left bottom;}.card__tbadge--wholesale .card__tbadge-ico{display:none;}.card__tbadge--wholesale .card__tbadge-txt{gap:0;}.card__tbadge--wholesale .card__tbadge-line:first-child{font-size:8px;letter-spacing:0;}.card__tbadge--wholesale .card__tbadge-line:last-child{font-size:10.5px;letter-spacing:0;}}
/* === end card badges === */
/* === BELEAEV: Appstle subscription widget tweaks (22.06) === */
/* 1) "Subscription detail" tooltip -> inline accordion (no overlay over ATC) */
#appstle_subscription_widget0 .appstle_tooltip{position:static !important;transform:none !important;top:auto !important;bottom:auto !important;left:auto !important;right:auto !important;max-height:0 !important;padding:0 !important;overflow:hidden !important;opacity:1 !important;visibility:visible !important;z-index:auto !important;pointer-events:auto !important;transition:none !important;}
#appstle_subscription_widget0 [data-appstle-icon].appstle-tooltip-show + .appstle_tooltip{max-height:500px !important;}
/* 2) Remove duplicate "Loyalty Details / Save 25% off..." block above Subscription detail */
#appstle_subscription_widget0 .appstleLoyaltyTable{display:none !important;}
/* === END BELEAEV Appstle subscription widget tweaks === */
select[name="sort_by"] option{background-color:#0a0a0a;color:#f5f1e8;}
/* === BELEAEV FONT SWAP (Cormorant Garamond + Nunito Sans) Ã¢â‚¬â€ LIVE 02.06.2026 === */
:root{--font-heading-family:'Cormorant Garamond', Georgia, serif !important;}
:root{--font-body-family:'Nunito Sans', system-ui, -apple-system, sans-serif !important;}
h1,h2,h3,.h1,.h2,.h3,.header__heading,.title,.banner__heading,.rich-text__heading,.image-with-text__heading{font-family:'Cormorant Garamond', Georgia, serif !important;font-weight:600 !important;}
/* === END FONT SWAP === */

/* ============================================================
   BELEAEV Ã¢â‚¬â€ Mini-sets price size (match caviar/tasting-set: 30px desktop, 24px mobile)
   (added 2026-05-27) Targets default Dawn .price__container .price-item which is
   ONLY visible on mini-sets template; caviar/tasting-set/pdp-clean hide it via
   their own CSS and use custom .beleaev-total / .beleaev-price-bottom blocks.
   ============================================================ */
body .product .price__container .price-item,
body .product .price__container .price-item--regular,
body .product .price__container .price-item--last,
body .product .price__container .price-item--sale {
  font-size: 30px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}
@media (max-width: 600px) {
  body .product .price__container .price-item,
  body .product .price__container .price-item--regular,
  body .product .price__container .price-item--last {
    font-size: 24px !important;
  }
}

/* ============================================================
   BELEAEV - /pages/events-experiences: clear mega-menu overlap on first rich_text section
   (added 2026-05-22) Mega-menu fixed nav strip sits y=61..107 (z-index 50,
   rgba(0,0,0,0.95) bg). First section on this page is rich_text_UHxTCB
   with "EVENTS & EXPERIENCES" heading at y=61 - top half ÃÂºÃÂ»ÃÂ¸ÃÂ¿ÃÂ°ÃÂµÃ‘â€š ÃÂ¼ÃÂµÃÂ³ÃÂ°ÃÂ¼ÃÂµÃÂ½Ã‘Å½.
   ÃÂ¢ÃÂ¾ÃÂ¹ ÃÂ¶ÃÂµ ÃÂ»ÃÂ¾ÃÂ³ÃÂ¸ÃÂºÃÂµ ÃÂºÃÂ°ÃÂº intro-text ÃÂ½ÃÂ° caviar entry (yesterday's fix).
   ============================================================ */
#MainContent > .shopify-section[id*="rich_text_UHxTCB"] {
  margin-top: 50px !important;
}
/* === MOBILE subtitle visibility 22.05 === */
@media (max-width: 767px) {
  .product-card-wrapper .card__subtitle,
  .card-wrapper .card__subtitle {
    font-size: 13px !important;
    opacity: 0.95 !important;
    margin: 4px 0 6px !important;
    line-height: 1.3 !important;
    padding: 0 8px !important;
    display: block !important;
    color: inherit !important;
  }
  /* Reviews row - keep on 1 line like home page */
  .product-card-wrapper .jdgm-prev-badge,
  .product-card-wrapper .AirReviews-Widget {
    white-space: nowrap !important;
  }
}
/* === end mobile subtitle === */

/* === HIDE long product card text on mobile 22.05 === */
@media (max-width: 767px) {
  .beleaev-card-long-text { display: none !important; }
}
/* === end hide long === */

/* ============================================================
   BELEAEV - Gold border on Cook with Caviar banner (matches newsletter button border)
   (added 2026-05-21)
   ============================================================ */
.caviar-banner {
  margin-top: 24px !important;
  margin-bottom: 48px !important;
}
@media (max-width: 749px) {
  .caviar-banner {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
}
/** Shopify CDN: Minification failed

Line 3024:0 Unexpected "}"
Line 4341:1 Expected "}" to go with "{"

**/
/* ============================================================
   BELEAEV - Mobile: shrink mega-menu strip
   (added 2026-05-21) section.mega-menu is desktop dropdown wrapper
   with opaque rgba(0,0,0,0.95) background and 46px height.
   On mobile it is empty (no dropdowns Ã¢â‚¬â€ hamburger drawer used)
   so it shows as a black strip between header and bento. Halve to ~23px.
   ============================================================ */
@media (max-width: 749px) {
  section.mega-menu {
    height: 23px !important;
    min-height: 23px !important;
    overflow: hidden !important;
  }
}
/* ============================================================
   BELEAEV - Sticky header always on top: isolate MainContent
   (added 2026-05-21) #MainContent is an isolated stacking context;
   any z-index inside (bento cards, badges, hover tiles) is contained
   so the sticky header always wins. Header lives outside MainContent
   at root level with z-index:3 (mega-menu z-index:50) and is unaffected.
   ============================================================ */
#MainContent {
  isolation: isolate;
}
/* ============================================================
   BELEAEV - Bento section: contain z-index in isolated stacking context
   (added 2026-05-21) Active card has z-index:4, hover z-index:5;
   header sticky has z-index:3. Without isolation, bento cards paint
   ABOVE the sticky header when scrolled. Wrap bento in an isolated
   stacking context so its internal z-index never escapes.
   ============================================================ */
.shopify-section[id*="caviar-bento"],
.shopify-section.beleaev-bento-mix-section {
  position: relative !important;
  z-index: 0 !important;
  isolation: isolate !important;
}
/* ============================================================
   BELEAEV - Caviar entry: clear mega-menu overlap on intro-text
   (added 2026-05-21) Mega-menu fixed nav strip sits y=61..107
   z-index 50 with near-opaque black background, clipping the top
   of intro-text when no bento sits above it. When bento ships
   (Step 3), intro is no longer :first-of-type and rule auto-disables.
   ============================================================ */
#MainContent > .shopify-section[id*="intro-text"]:first-of-type {
  margin-top: 50px !important;
}

/* ============================================================
   BELEAEV - clear mega-menu overlap on main-collection-banner
   (added 2026-05-25) Same issue as intro-text but for collection
   pages whose first section is the H1 banner (e.g. /collections/
   all-caviar-gourmet, /collections/all-products). Desktop-only:
   mobile mega-menu lives in hamburger and does not overlap.
   ============================================================ */
@media (min-width: 750px) {
  #MainContent > .shopify-section[id*="__banner"]:first-of-type {
    margin-top: 50px !important;
  }
}
/* ============================================================
   BELEAEV ÃƒÆ’Ã‚Â¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚Â¬ÃƒÂ¢Ã¢â€šÂ¬Ã‚Â Custom Brand Style Overrides
   Draft theme: Copy of Original (192873169273)
   Scope: section heading alignment + Fresh Delivery (Variant 3)
   ============================================================ */

/* ---------- 1. Section headings: centred, unified, serif ---------- */

/* Featured Collection: "Our Collection" */
.collection__title,
.collection__title.title-wrapper {
  text-align: center !important;
  justify-content: center !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.collection__title h2.title,
.collection__title .title {
  width: 100%;
  text-align: center !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: auto;
  margin-right: auto;
}

/* All standard section-heading wrappers (Dawn .title) */
.title-wrapper .title,
.title-wrapper-with-link .title,
.title-wrapper-with-link__heading,
h2.section-heading,
.shopify-section h1.title,
.shopify-section h2.title,
.shopify-section .title-wrapper {
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Unified heading size across homepage sections (desktop) */
@media (min-width: 750px) {
  .shopify-section .title-wrapper .title,
  .shopify-section h2.section-heading,
  .collection__title h2.title {
    font-size: clamp(28px, 3vw, 46px);
    line-height: 1.15;
  }
}

/* Mobile: centre + breathing room */
@media (max-width: 749px) {
  .collection__title,
  .title-wrapper {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    text-align: center;
  }
  .collection__title h2.title,
  .shopify-section .title-wrapper .title,
  .shopify-section h2.section-heading {
    font-size: clamp(22px, 6vw, 30px);
    text-align: center;
    width: 100%;
  }
}

/* ---------- 1b. Homepage section headings ÃƒÆ’Ã‚Â¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚Â¬ÃƒÂ¢Ã¢â€šÂ¬Ã‚Â unified brand typography ----------
   Covers: Featured Collection, Img-Video banner, Caviar-left (Star Chef),
   Icon carousel, Real/Collect reviews, Rich text blocks, Image banner,
   Image with text, Newsletter */
.banner-title,
.caviar-left__heading,
.icon-carousel__heading,
.real-reviews__heading,
.collect-reviews__heading,
.real-reviews-section .reviews-header h2,
.reviews-header h2,
.newsletter-text h2,
.rich-text__heading,
.banner__heading,
.image-with-text__heading {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
}

/* Unified section heading size on desktop (all homepage h2 section titles) */
@media (min-width: 750px) {
  .banner-title,
  .caviar-left__heading,
  .icon-carousel__heading,
  .real-reviews__heading,
  .collect-reviews__heading,
  .real-reviews-section .reviews-header h2,
  .reviews-header h2,
  .newsletter-text h2,
  .rich-text__heading,
  .banner__heading,
  .image-with-text__heading,
  .collection__title h2.title {
    font-size: clamp(30px, 2.8vw, 42px) !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 749px) {
  .banner-title,
  .caviar-left__heading,
  .icon-carousel__heading,
  .real-reviews__heading,
  .collect-reviews__heading,
  .reviews-header h2,
  .newsletter-text h2,
  .rich-text__heading,
  .banner__heading,
  .image-with-text__heading {
    font-size: clamp(22px, 5.5vw, 30px) !important;
    line-height: 1.4 !important;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ---------- 2. Variant 3: Fresh Delivery / Icon-with-text (product page) ----------
   Transparent background, champagne border, centred, serif heading  */

.product__info-container .icon-with-text,
.product .icon-with-text,
.custom-shipping-info-white,
.custom-shipping-info {
  background: transparent !important;
  border: 1px solid #b6a47a !important;
  border-radius: 2px !important;
  padding: 18px 20px !important;
  margin: 16px 0 !important;
  text-align: center !important;
  box-shadow: none !important;
}

.product__info-container .icon-with-text__item,
.product .icon-with-text__item {
  text-align: center;
  justify-content: center;
}

.product__info-container .icon-with-text__text,
.product .icon-with-text__text,
.custom-shipping-info-white,
.custom-shipping-info-white *,
.custom-shipping-info,
.custom-shipping-info * {
  font-family: 'Nunito Sans', system-ui, -apple-system, sans-serif;
  color: #ffffff;
  letter-spacing: 0.03em;
}

.product__info-container .icon-with-text__item-wrapper--heading,
.product .icon-with-text__item-wrapper--heading,
.custom-shipping-info-white .shipping-heading,
.custom-shipping-info-white .shipping-title,
.custom-shipping-info .shipping-heading,
.custom-shipping-info .shipping-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 400;
  color: #ffffff !important;
}

/* Force white text on all inner labels (override theme's black defaults) */
.custom-shipping-info-white .shipping-title,
.custom-shipping-info-white .shipping-subtitle,
.custom-shipping-info-white .shipping-content,
.custom-shipping-info-white .shipping-content *,
.custom-shipping-info .shipping-title,
.custom-shipping-info .shipping-subtitle,
.custom-shipping-info .shipping-content,
.custom-shipping-info .shipping-content * {
  color: #ffffff !important;
}

/* Force white SVG icon (theme ships fill="#000") */
.custom-shipping-info-white .shipping-icon svg,
.custom-shipping-info-white .shipping-icon svg path,
.custom-shipping-info-white .shipping-icon svg *,
.custom-shipping-info .shipping-icon svg,
.custom-shipping-info .shipping-icon svg path,
.custom-shipping-info .shipping-icon svg * {
  fill: #ffffff !important;
  stroke: transparent !important;
}

/* Shipping icon centred */
.custom-shipping-info-white .shipping-icon,
.custom-shipping-info .shipping-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

/* ---------- 3. Product page: compact Qty + ADD TO CART inline ----------
   Layout: [qty] [ADD TO CART] in one row; Buy with Shop stacks below.
   DOM restructuring handled by beleaev-custom.js. */

/* Hide unit price block ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â ONLY on caviar / tasting-set PDPs where the
   variant labels (or the custom Beleaev-total block) already carry the
   price. On gourmet/accessories templates this is the ONLY price element,
   so it must stay visible. (2026-05-04: scoped after gourmet PDPs lost
   their price.) */
body.template-product-caviar .product__info-container > [id^="price-template"],
body.template-product-caviar .product__info-container > .no-js-hidden#price-template,
body.template-product-caviar .product__info-container > div.no-js-hidden[id*="price-template"],
body.template-product-tasting-set .product__info-container > [id^="price-template"],
body.template-product-tasting-set .product__info-container > .no-js-hidden#price-template,
body.template-product-tasting-set .product__info-container > div.no-js-hidden[id*="price-template"] {
  display: none !important;
}

/* Hide "Quantity" text label for clean compact widget */
.product__info-container .product-form__quantity .quantity__label,
.product__info-container .product-form__quantity > .form__label {
  display: none !important;
}

/* product-form__buttons becomes a grid: [qty-input | ADD TO CART] row 1,
   Buy with Shop + More payment options span below. Wrapper class added by beleaev-custom.js. */
.beleaev-buttons-row {
  display: grid !important;
  grid-template-columns: 130px 1fr !important;
  gap: 12px !important;
  align-items: stretch;
  width: 100% !important;
  max-width: none !important;
}

/* quantity-input custom element: row 1, col 1 */
.beleaev-buttons-row > quantity-input,
.beleaev-buttons-row > .quantity {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  display: flex !important;
  width: 130px !important;
  max-width: 130px !important;
  min-width: 130px !important;
  margin: 0 !important;
}

/* Inner - / input / + */
.beleaev-buttons-row > quantity-input .quantity__input,
.beleaev-buttons-row > .quantity .quantity__input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  text-align: center;
}

.beleaev-buttons-row > quantity-input .quantity__button,
.beleaev-buttons-row > .quantity .quantity__button {
  flex: 0 0 auto !important;
  min-width: 36px !important;
  width: 36px !important;
}

/* ADD TO CART: row 1, col 2 ÃƒÆ’Ã‚Â¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚Â¬ÃƒÂ¢Ã¢â€šÂ¬Ã‚Â pill shape matching Buy with Shop */
.beleaev-buttons-row > .product-form__submit.button--primary {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  width: 100% !important;
  margin: 0 !important;
  min-width: 0;
  border-radius: 999px !important;
  min-height: 52px;
  padding: 14px 24px !important;
  letter-spacing: 0.08em;
}

/* Buy with Shop + More payment options: full width below */
.beleaev-buttons-row > .shopify-payment-button {
  grid-column: 1 / -1;
  grid-row: 2 / 3;
  margin-top: 6px !important;
}

.beleaev-buttons-row > small,
.beleaev-buttons-row > noscript,
.beleaev-buttons-row > .product-form__cart-error,
.beleaev-buttons-row > .product-form__submit:not(.button--primary) {
  grid-column: 1 / -1;
}

/* Collapse now-empty quantity-top wrapper */
.beleaev-qty-top-empty {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.beleaev-qty-top-empty .quantity__label,
.beleaev-qty-top-empty > label.quantity__label {
  display: none !important;
}

/* Match Buy with Shop container width (495px) ÃƒÆ’Ã‚Â¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚Â¬ÃƒÂ¢Ã¢â€šÂ¬Ã‚Â same right edge as Buy with Shop */
.product__info-container .product-form__quantity-top,
.product__info-container .price-per-item__container,
.product__info-container .price-per-item__container > product-form,
.product__info-container .price-per-item__container > product-form > form {
  max-width: 495px !important;
  width: 495px !important;
}

/* Tablet (601-989px): tighter qty, smaller button padding */
@media (max-width: 989px) and (min-width: 750px) {
  .beleaev-buttons-row {
    grid-template-columns: 110px 1fr !important;
    gap: 10px !important;
  }
  .beleaev-buttons-row > quantity-input,
  .beleaev-buttons-row > .quantity {
    width: 110px !important;
    max-width: 110px !important;
    min-width: 110px !important;
  }
  .beleaev-buttons-row > .product-form__submit.button--primary {
    padding: 12px 16px !important;
    letter-spacing: 0.04em;
    font-size: 14px;
  }
}

/* Mobile (<=749px): stack qty above ADD TO CART */
@media (max-width: 749px) {
  .beleaev-buttons-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .beleaev-buttons-row > quantity-input,
  .beleaev-buttons-row > .quantity,
  .beleaev-buttons-row > .product-form__submit.button--primary {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .beleaev-buttons-row > quantity-input,
  .beleaev-buttons-row > .quantity {
    justify-self: start;
    max-width: 160px !important;
  }
  .beleaev-buttons-row > .product-form__submit.button--primary {
    padding: 14px 20px !important;
    font-size: 15px;
    min-height: 50px;
  }
  /* Match the Buy with Shop container too */
  .product__info-container .product-form__quantity-top,
  .product__info-container .price-per-item__container,
  .product__info-container .price-per-item__container > product-form,
  .product__info-container .price-per-item__container > product-form > form {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Force ADD TO CART text colour visible (black on white pill) ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â defends against theme overrides */
.beleaev-buttons-row > .product-form__submit.button--primary {
  color: #0a0a0a !important;
  background: #fff !important;
  border: 1px solid #0a0a0a !important;
  white-space: nowrap;
}
.beleaev-buttons-row > .product-form__submit.button--primary:hover,
.beleaev-buttons-row > .product-form__submit.button--primary:focus-visible {
  background: #0a0a0a !important;
  color: #fff !important;
}

/* ---------- 5. Collection cards: Petrossian-style price + bag icon ---------- */

.card-wrapper .card__content,
.grid__item .card__content {
  position: relative;
}

.card-wrapper .price__from,
.grid__item .price__from {
  display: inline-block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.55);
  margin-right: 6px;
  vertical-align: middle;
}

.card-wrapper .price__amount,
.grid__item .price__amount {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  color: #f5f1e8;
  letter-spacing: -0.01em;
  vertical-align: middle;
}

.card-wrapper .price,
.grid__item .price {
  margin-top: 8px !important;
  padding-right: 56px !important;
  text-align: left !important;
}
.card-wrapper .price-item,
.grid__item .price-item {
  font-size: 0;
  line-height: 1.2;
}

.card-wrapper .quick-add,
.grid__item .quick-add {
  position: absolute;
  bottom: 8px;
  right: 0;
  width: 44px;
  height: 44px;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2;
}

/* Inline bag styles moved to end of file for higher cascade priority */

.card-wrapper .quick-add__submit,
.grid__item .quick-add__submit {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(201, 169, 97, 0.55) !important;
  background: transparent !important;
  color: #C9A961 !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  overflow: visible;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.card-wrapper .quick-add__submit > *,
.grid__item .quick-add__submit > * {
  visibility: hidden !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.card-wrapper .quick-add__submit::before,
.grid__item .quick-add__submit::before {
  content: '';
  display: inline-block;
  width: 19px;
  height: 19px;
  background-color: #C9A961;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'><path d='M5.2 8h13.6l-1.15 11.2a2 2 0 0 1-1.99 1.8H8.34a2 2 0 0 1-1.99-1.8L5.2 8z'/><path d='M9 8V6.4a3 3 0 0 1 6 0V8'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'><path d='M5.2 8h13.6l-1.15 11.2a2 2 0 0 1-1.99 1.8H8.34a2 2 0 0 1-1.99-1.8L5.2 8z'/><path d='M9 8V6.4a3 3 0 0 1 6 0V8'/></svg>") no-repeat center / contain;
  visibility: visible !important;
  position: relative !important;
  z-index: 2;
}

/* ---- Idle diamond shimmer: gold light sweeps across button every 5.5s ---- */
.card-wrapper .quick-add__submit::after,
.grid__item .quick-add__submit::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 224, 145, 0.55) 48%,
    rgba(255, 240, 200, 0.85) 52%,
    rgba(255, 224, 145, 0.55) 56%,
    transparent 66%
  );
  background-size: 250% 100%;
  background-position: -120% 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: beleaev-shimmer 5.5s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes beleaev-shimmer {
  0%, 78%, 100% { background-position: -120% 0; opacity: 0; }
  82%           { opacity: 0.95; }
  92%           { background-position: 120% 0;  opacity: 0.6; }
  98%           { background-position: 160% 0;  opacity: 0; }
}

/* Idle border breathing ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â subtle pulse so the icon feels alive, not static */
.card-wrapper .quick-add__submit,
.grid__item .quick-add__submit {
  animation: beleaev-border-breath 4.2s ease-in-out infinite;
}

@keyframes beleaev-border-breath {
  0%, 100% { border-color: rgba(201, 169, 97, 0.45) !important; }
  50%      { border-color: rgba(201, 169, 97, 0.85) !important; }
}

/* Disable idle animations on hover ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â hover state takes over */
.card-wrapper .quick-add__submit:hover,
.grid__item .quick-add__submit:hover,
.card-wrapper .quick-add__submit:focus-visible,
.grid__item .quick-add__submit:focus-visible {
  animation: none !important;
}
.card-wrapper .quick-add__submit:hover::after,
.grid__item .quick-add__submit:hover::after,
.card-wrapper .quick-add__submit:focus-visible::after,
.grid__item .quick-add__submit:focus-visible::after {
  animation: none !important;
  opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .card-wrapper .quick-add__submit,
  .grid__item .quick-add__submit,
  .card-wrapper .quick-add__submit::after,
  .grid__item .quick-add__submit::after {
    animation: none !important;
  }
}

/* ---- Luxury hover: gold halo + smooth scale + bag micro-bounce, NO rotation ---- */
.card-wrapper .quick-add__submit,
.grid__item .quick-add__submit {
  transition:
    background 420ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card-wrapper .quick-add__submit::before,
.grid__item .quick-add__submit::before {
  transition: background-color 420ms cubic-bezier(0.16, 1, 0.3, 1), transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.card-wrapper .quick-add__submit:hover,
.grid__item .quick-add__submit:hover,
.card-wrapper .quick-add__submit:focus-visible,
.grid__item .quick-add__submit:focus-visible {
  background: #C9A961 !important;
  border-color: #C9A961 !important;
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow:
    0 0 0 6px rgba(201, 169, 97, 0.10),
    0 10px 24px rgba(201, 169, 97, 0.32) !important;
  outline: none;
}
.card-wrapper .quick-add__submit:hover::before,
.grid__item .quick-add__submit:hover::before,
.card-wrapper .quick-add__submit:focus-visible::before,
.grid__item .quick-add__submit:focus-visible::before {
  background-color: #0a0a0a;
  animation: beleaev-bag-pop 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes beleaev-bag-pop {
  0%   { transform: translateY(0)   scale(1);    }
  45%  { transform: translateY(-2px) scale(1.08); }
  100% { transform: translateY(0)   scale(1);    }
}

/* Active press: small inward feel */
.card-wrapper .quick-add__submit:active,
.grid__item .quick-add__submit:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow:
    0 0 0 3px rgba(201, 169, 97, 0.18),
    0 2px 8px rgba(201, 169, 97, 0.28) !important;
  transition-duration: 140ms !important;
}

/* ---- Spinner: HIDDEN by default. Shown only during actual cart submit. ---- */
.card-wrapper .quick-add .loading__spinner,
.grid__item .quick-add .loading__spinner,
.card-wrapper .quick-add__submit .loading__spinner,
.grid__item .quick-add__submit .loading__spinner {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* When Shopify adds .loading on form submit ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â fade in spinner, hide bag */
.card-wrapper .quick-add.loading .loading__spinner,
.grid__item .quick-add.loading .loading__spinner,
.card-wrapper .quick-add__submit[aria-busy="true"] .loading__spinner,
.grid__item .quick-add__submit[aria-busy="true"] .loading__spinner {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  place-items: center !important;
  transition: opacity 220ms ease;
}
.card-wrapper .quick-add.loading .quick-add__submit::before,
.grid__item .quick-add.loading .quick-add__submit::before,
.card-wrapper .quick-add__submit[aria-busy="true"]::before,
.grid__item .quick-add__submit[aria-busy="true"]::before {
  opacity: 0 !important;
}

/* Reduced motion: keep transitions but disable bounce */
@media (prefers-reduced-motion: reduce) {
  .card-wrapper .quick-add__submit:hover::before,
  .grid__item .quick-add__submit:hover::before {
    animation: none !important;
  }
  .card-wrapper .quick-add__submit:hover,
  .grid__item .quick-add__submit:hover {
    transform: translateY(-1px) !important;
  }
}

/* ---- Mobile: centre title + price + bag, stack vertically ---- */
@media (max-width: 749px) {
  /* Centre title and information block */
  .card-wrapper .card__information,
  .grid__item .card__information,
  .card-wrapper .card-information,
  .grid__item .card-information {
    text-align: center !important;
    align-items: center !important;
  }
  .card-wrapper .card__heading,
  .grid__item .card__heading,
  .card-wrapper .card__heading > a,
  .grid__item .card__heading > a {
    text-align: center !important;
    justify-content: center !important;
    display: block;
  }
  /* Centre price block */
  .card-wrapper .price,
  .grid__item .price {
    text-align: center !important;
    padding-right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .card-wrapper .price__regular,
  .grid__item .price__regular {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  /* Bag icon: inline beside price (not BELOW it) ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â overridden by .beleaev-price-row above */
  .card-wrapper .beleaev-price-row,
  .grid__item .beleaev-price-row {
    justify-content: center !important;
    gap: 10px !important;
  }
  .beleaev-price-row .quick-add,
  .beleaev-price-row .quick-add__submit {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
  }
  .beleaev-price-row .quick-add__submit::before {
    width: 15px !important;
    height: 15px !important;
  }
  /* Legacy fallback for cards that didn't get .beleaev-price-row yet */
  .card-wrapper .quick-add:not(.beleaev-price-row .quick-add),
  .grid__item .quick-add:not(.beleaev-price-row .quick-add) {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    margin: 12px auto 0 !important;
    display: flex !important;
    justify-content: center !important;
  }
}

@media (max-width: 540px) {
  .card-wrapper .price__amount,
  .grid__item .price__amount {
    font-size: 16px;
  }
  .beleaev-price-row .quick-add,
  .beleaev-price-row .quick-add__submit {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
  }
  .beleaev-price-row .quick-add__submit::before {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ---------- 4. "Select Size:" variant picker ÃƒÆ’Ã‚Â¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚Â¬ÃƒÂ¢Ã¢â€šÂ¬Ã‚Â remove outer frame ---------- */
.product__info-container fieldset.product-form_input,
.product__info-container fieldset.product-form__input,
.product__info-container fieldset.product-form__input--pill {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 16px 0 !important;
}

.product__info-container fieldset.product-form_input > legend.form__label,
.product__info-container fieldset.product-form__input > legend.form__label,
.product__info-container fieldset.product-form__input--pill > legend.form__label {
  padding: 0 !important;
  margin: 0 0 8px 0 !important;
  background: transparent !important;
}

/* ============================================================
   INLINE BAG BESIDE PRICE ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â placed at end for highest priority
   Wraps .price + .quick-add into .beleaev-price-row via JS.
   ============================================================ */

.card-wrapper .beleaev-price-row,
.grid__item .beleaev-price-row,
.card .beleaev-price-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 8px !important;
  width: 100% !important;
}

.card-wrapper .beleaev-price-row .price,
.grid__item .beleaev-price-row .price,
.card .beleaev-price-row .price {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
}

.card-wrapper .beleaev-price-row .quick-add,
.grid__item .beleaev-price-row .quick-add,
.card .beleaev-price-row .quick-add {
  position: relative !important;
  bottom: auto !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.card-wrapper .beleaev-price-row .quick-add__submit,
.grid__item .beleaev-price-row .quick-add__submit,
.card .beleaev-price-row .quick-add__submit {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
}

.card-wrapper .beleaev-price-row .quick-add__submit::before,
.grid__item .beleaev-price-row .quick-add__submit::before,
.card .beleaev-price-row .quick-add__submit::before {
  width: 16px !important;
  height: 16px !important;
}

/* Mobile (ÃƒÂ¢Ã¢â‚¬Â°Ã‚Â¤749px): centre the row, smaller bag */
@media (max-width: 749px) {
  .card-wrapper .beleaev-price-row,
  .grid__item .beleaev-price-row,
  .card .beleaev-price-row {
    justify-content: center !important;
    gap: 10px !important;
  }
  .card-wrapper .beleaev-price-row .quick-add,
  .grid__item .beleaev-price-row .quick-add,
  .card .beleaev-price-row .quick-add,
  .card-wrapper .beleaev-price-row .quick-add__submit,
  .grid__item .beleaev-price-row .quick-add__submit,
  .card .beleaev-price-row .quick-add__submit {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
  }
  .card-wrapper .beleaev-price-row .quick-add__submit::before,
  .grid__item .beleaev-price-row .quick-add__submit::before,
  .card .beleaev-price-row .quick-add__submit::before {
    width: 15px !important;
    height: 15px !important;
  }
}

/* Mobile small (ÃƒÂ¢Ã¢â‚¬Â°Ã‚Â¤540px) */
@media (max-width: 540px) {
  .card-wrapper .beleaev-price-row .quick-add,
  .grid__item .beleaev-price-row .quick-add,
  .card .beleaev-price-row .quick-add,
  .card-wrapper .beleaev-price-row .quick-add__submit,
  .grid__item .beleaev-price-row .quick-add__submit,
  .card .beleaev-price-row .quick-add__submit {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }
  .card-wrapper .beleaev-price-row .quick-add__submit::before,
  .grid__item .beleaev-price-row .quick-add__submit::before,
  .card .beleaev-price-row .quick-add__submit::before {
    width: 14px !important;
    height: 14px !important;
  }
}

/* Reset old padding-right (now no longer needed since bag is inline) */
.card-wrapper .beleaev-price-row ~ * .price,
.beleaev-price-row .price {
  padding-right: 0 !important;
}

/* ============================================================
   PRODUCT BADGES ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â top-left curator pills
   Imperial=Top Seller (gold), Beluga=Sommelier's Choice (cream),
   Baeri=Beginner's Pick (cream), Oscietra=Best Value (gold)
   ============================================================ */

.beleaev-badge {
  position: absolute;
  top: var(--image-padding, 0px);
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 12px);
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 17px 8px 14px;
  border-radius: 999px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(20,18,14,0.92) 0%, rgba(10,10,10,0.92) 100%) !important;
  border: 1px solid rgba(201, 169, 97, 0.55) !important;
  color: #C9A961 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 0 0 1px rgba(201, 169, 97, 0.08) inset,
    0 4px 14px rgba(0, 0, 0, 0.35),
    0 0 22px rgba(201, 169, 97, 0.10);
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle gold sheen on top edge ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â luxury feel */
.beleaev-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(201, 169, 97, 0.14) 0%,
    rgba(201, 169, 97, 0) 55%);
}

.beleaev-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 4px rgba(201, 169, 97, 0.4));
}

.beleaev-badge__icon svg {
  width: 100%;
  height: 100%;
}

.beleaev-badge__text {
  display: inline-block;
  position: relative;
  z-index: 1;
}

/* All tones unified to gold luxury */
.beleaev-badge--gold,
.beleaev-badge--cream {
  color: #C9A961 !important;
  border-color: rgba(201, 169, 97, 0.55) !important;
}

/* Hover: gold border lights up + tiny lift (preserve translateX(-50%) centering) */
.card-wrapper:hover .beleaev-badge,
.grid__item:hover .beleaev-badge {
  transform: translate(-50%, calc(-50% - 1px)) !important;
  border-color: rgba(201, 169, 97, 0.85) !important;
  box-shadow:
    0 0 0 1px rgba(201, 169, 97, 0.14) inset,
    0 6px 18px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(201, 169, 97, 0.20);
}

/* Mobile (ÃƒÂ¢Ã¢â‚¬Â°Ã‚Â¤749px) ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â keep centered, just shrink */
@media (max-width: 749px) {
  .beleaev-badge {
    top: var(--image-padding, 0px) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    padding: 4px 10px 4px 8px !important;
    font-size: 11px !important;
    gap: 4px !important;
    letter-spacing: 0.05em !important;
  }
  .card-wrapper:hover .beleaev-badge,
  .grid__item:hover .beleaev-badge {
    transform: translate(-50%, calc(-50% - 1px)) !important;
  }
  .beleaev-badge__icon {
    width: 14px !important;
    height: 14px !important;
  }
}

/* Mobile small (<=540px) */
@media (max-width: 540px) {
  .beleaev-badge {
    font-size: 11px;
    padding: 4px 10px 4px 8px;
    letter-spacing: 0.05em;
  }
  .beleaev-badge__icon {
    width: 14px;
    height: 14px;
  }
}

/* ============================================================
   BRITISH QUALITY CONTROL ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â compact + UK flag
   ============================================================ */

.beleaev-bqc-section {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
.beleaev-bqc-section .image-with-text__content {
  padding-block: 24px !important;
}
.beleaev-bqc-section .image-with-text__heading {
  font-size: clamp(22px, 2.4vw, 32px) !important;
  line-height: 1.4 !important;
  margin-bottom: 14px !important;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.beleaev-bqc-section .image-with-text__text,
.beleaev-bqc-section .image-with-text__text * {
  font-size: 14px !important;
  line-height: 1.55 !important;
}
.beleaev-bqc-section .image-with-text__text {
  margin: 0 !important;
}

/* UK flag inline emblem in heading */
.beleaev-uk-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 22px;
  flex-shrink: 0;
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.beleaev-uk-flag svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 749px) {
  .beleaev-bqc-section {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }
  .beleaev-bqc-section .image-with-text__content {
    padding-block: 18px !important;
  }
  .beleaev-bqc-section .image-with-text__heading {
    font-size: 22px !important;
    gap: 10px !important;
    justify-content: center !important;
  }
  .beleaev-bqc-section .image-with-text__text,
  .beleaev-bqc-section .image-with-text__text * {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }
  .beleaev-uk-flag {
    width: 30px;
    height: 19px;
  }
}

/* ============================================================
   AMBASSADORS BUTTON ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â centred on mobile
   ============================================================ */
.caviar-left__content {
  text-align: left;
}
.ambdr-btn {
  display: inline-block;
}

@media (max-width: 749px) {
  .caviar-left__content {
    text-align: center !important;
  }
  .ambdr-btn {
    display: inline-block !important;
    margin: 16px auto 0 !important;
  }
}

/* ============================================================
   SOMMELIER BANNER (home) ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â mobile: WhatsApp under Call me back
   ============================================================ */
@media (max-width: 540px) {
  .sommelier-banner__actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .sommelier-banner__cta {
    width: 100% !important;
    min-width: 140px !important;
    text-align: center !important;
  }
  .sommelier-banner__whatsapp {
    margin: 0 auto !important;
  }
}

/* ============================================================
   SEO: visually-hidden H1 (crawlable + accessible)
   ============================================================ */
.beleaev-seo-h1.visually-hidden,
h1.beleaev-seo-h1 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================
   PAYMENT ICONS ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â compact row in cart drawer + cart page footer
   ============================================================ */
.beleaev-pay-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 14px 0 6px 0;
  padding: 10px 12px;
  border-top: 1px solid rgba(245, 241, 232, 0.08);
}

.beleaev-pay-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 22px;
  flex-shrink: 0;
  filter: saturate(0.95);
  opacity: 0.92;
  transition: opacity 200ms ease, transform 200ms ease;
}

.beleaev-pay-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 3px;
}

.beleaev-pay-icon:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.beleaev-pay-row--page {
  border-top: 0;
  margin: 24px 0 8px;
}

@media (max-width: 540px) {
  .beleaev-pay-row {
    gap: 5px;
    padding: 8px 6px;
  }
  .beleaev-pay-icon {
    width: 30px;
    height: 20px;
  }
}

/* ============================================================
   STICKY MOBILE ATC ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â bottom-fixed bar on PDP, mobile only
   ============================================================ */
.beleaev-sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: none; /* shown via .beleaev-sticky-atc--show */
  align-items: center;
  gap: 12px;
  padding: 10px 14px env(safe-area-inset-bottom) 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
  background: linear-gradient(180deg, rgba(10,10,10,0.96) 0%, rgba(10,10,10,1) 100%);
  border-top: 1px solid rgba(201, 169, 97, 0.4);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 749px) {
  .beleaev-sticky-atc {
    display: flex;
  }
  .beleaev-sticky-atc.beleaev-sticky-atc--show {
    transform: translateY(0);
  }
}

.beleaev-sticky-atc__info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.beleaev-sticky-atc__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #f5f1e8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.beleaev-sticky-atc__price {
  font-size: 13px;
  font-weight: 700;
  color: #C9A961;
  letter-spacing: 0.02em;
}

.beleaev-sticky-atc__btn {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: #C9A961;
  color: #0a0a0a;
  padding: 12px 22px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
  min-height: 44px;
}

.beleaev-sticky-atc__btn:hover,
.beleaev-sticky-atc__btn:focus-visible {
  background: #b8965a;
  transform: translateY(-1px);
  outline: none;
}

.beleaev-sticky-atc__btn:active {
  transform: translateY(0);
}

/* Body padding when sticky bar shown on mobile (so footer not covered) */
@media (max-width: 749px) {
  body:has(.beleaev-sticky-atc--show) {
    padding-bottom: 72px;
  }
}

/* ============================================================
   BELEAEV ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â Visible H1 marquee on homepage (CRO blocker C)
   Continuous horizontal scroll, dark+gold luxury vibe.
   4 copies of the phrase for seamless loop on wide screens.
   ============================================================ */

h1.beleaev-h1 {
  margin: 0;
  padding: 6px 0 5px;
  background: linear-gradient(
    180deg,
    #b89546 0%,
    #c9a961 30%,
    #d6b878 50%,
    #c9a961 70%,
    #b89546 100%
  );
  color: #0a0a0a;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: clamp(11px, 1.1vw, 14px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  position: relative;
  z-index: 5;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

/* Marquee lives INSIDE <sticky-header> now ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â no body padding, no top override.
   Dark body bg as a safety net for rubber-band overscroll. */
html, body {
  background-color: #0a0a0a;
}

/* Force <sticky-header> to behave as block container, kill any inline gap
   between marquee H1 and the header that follows it. */
sticky-header {
  display: block;
}
sticky-header > h1.beleaev-h1 {
  display: block !important;
  margin: 0 !important;
  padding: 6px 0 5px !important;
}
/* Kill margin-only gap. DO NOT touch padding ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â .header needs its 20px top
   padding to keep logo and menu rows separated. */
sticky-header > h1.beleaev-h1 + * {
  margin-top: 0 !important;
}

/* The site's mega-menu is position:fixed; top:70px (hardcoded for original
   thin marquee). With our taller marquee + adjusted .header padding the logo
   lands under that y=70 and gets covered by the menu. Push the menu down. */
section.mega-menu {
  top: 102px !important;
}

/* Tighten gap between marquee and logo (was 20px, now ~6px = ~halved). */
sticky-header > .shopify-section > .header,
sticky-header > .header {
  padding-top: 6px !important;
}
sticky-header > h1.beleaev-h1 + .header,
sticky-header > h1.beleaev-h1 + header {
  border-top: 0 !important;
}

/* ============================================================
   Star Chef Ambassadors (.caviar-left) ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â 2x bigger than 3x-shrink
   = 1.5x reduction from original. Theme inlines <style>, override with !important.
   Hotel partners shown as stylised logo tiles (no real brand assets needed).
   ============================================================ */
.caviar-left {
  padding: 72px 48px 42px !important;
}
/* Wrap section in black so body bg doesn't show through margins */
.shopify-section:has(.caviar-left),
.shopify-section:has(.real-reviews-section),
.shopify-section:has(.beleaev-follow) {
  background: #000;
}
@media (max-width: 749px) {
  .caviar-left {
    padding-top: 16px !important;
    padding-bottom: 28px !important;
  }
}
.caviar-left__inner {
  gap: 48px !important;
  align-items: center !important;
}
.caviar-left__image img {
  width: 100% !important;
  max-width: 400px !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
  border-radius: 20px !important;
}
.caviar-left__heading {
  font-size: clamp(22px, 2.4vw, 32px) !important;
  margin: 0 0 14px !important;
  line-height: 1.15 !important;
}
.caviar-left__richtext,
.caviar-left__richtext p {
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 0 14px !important;
}
.caviar-left .ambdr-btn {
  font-size: 16px !important;
  padding: 16px 32px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  display: block !important;
  width: fit-content !important;
  margin: 14px auto 0 !important;
  text-align: center !important;
  background: transparent !important;
  color: #f5f1e8 !important;
  border: 1.2px solid #c9a961 !important;
  border-radius: 0 !important;
  font-weight: 500 !important;
}
.caviar-left .ambdr-btn:hover {
  background: #c9a961 !important;
  color: #0a0a0a !important;
}

@media (max-width: 749px) {
  .caviar-left {
    padding: 20px 18px !important;
  }
  .caviar-left__inner {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .caviar-left__image img {
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 5 / 3 !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
  .caviar-left__heading {
    font-size: 20px !important;
    text-align: center !important;
  }
  .caviar-left__richtext,
  .caviar-left__richtext p {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  .caviar-left__content {
    max-width: 100% !important;
  }
  .caviar-left .ambdr-btn,
  .newsletter-button {
    font-size: 11px !important;
    padding: 10px 14px !important;
    letter-spacing: 0.1em !important;
    white-space: nowrap !important;
  }
  .newsletter-input {
    font-size: 11px !important;
    padding: 10px 12px !important;
    min-width: 0 !important;
  }
  .newsletter-form {
    width: 100% !important;
    max-width: 320px !important;
    margin: 16px auto 0 !important;
  }
  .newsletter-container {
    padding: 0 16px !important;
  }
}

/* ============================================================
   MOBILE COMPACT ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â collect_reviews "Real Reviews Carousel"
   Section is theme-owned, aggressive cut of dead bottom space.
   ============================================================ */
.shopify-section[id*="collect_reviews"] {
  padding: 0 !important;
  margin: 0 !important;
  background: #0a0a0a;
}
.shopify-section[id*="collect_reviews"] > section,
.shopify-section[id*="collect_reviews"] > div {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  min-height: 0 !important;
}
.shopify-section[id*="collect_reviews"] [class*="real-reviews"] {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}

@media (max-width: 749px) {
  .shopify-section[id*="collect_reviews"],
  .shopify-section[id*="collect_reviews"] > *,
  .shopify-section[id*="collect_reviews"] [class*="real-reviews"],
  .shopify-section[id*="collect_reviews"] [class*="reviews-section"],
  .shopify-section[id*="collect_reviews"] [class*="carousel"],
  .shopify-section[id*="collect_reviews"] [class*="slide"] {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  /* Heading: single-line if possible, smaller, centred */
  .shopify-section[id*="collect_reviews"] h1,
  .shopify-section[id*="collect_reviews"] h2,
  .shopify-section[id*="collect_reviews"] h3,
  .shopify-section[id*="collect_reviews"] [class*="title"],
  .shopify-section[id*="collect_reviews"] [class*="heading"] {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    letter-spacing: 0.04em !important;
    white-space: normal !important;
  }
  /* Star rating row + arrows: compact */
  .shopify-section[id*="collect_reviews"] [class*="rating"],
  .shopify-section[id*="collect_reviews"] [class*="stars"] {
    font-size: 14px !important;
    margin: 4px 0 !important;
  }
  /* Review card: tight padding */
  .shopify-section[id*="collect_reviews"] [class*="card"],
  .shopify-section[id*="collect_reviews"] [class*="review"] {
    padding: 8px !important;
    margin: 4px 0 !important;
    gap: 8px !important;
  }
  /* Product thumbnail in review: smaller */
  .shopify-section[id*="collect_reviews"] img {
    max-width: 80px !important;
    max-height: 80px !important;
  }
  /* Review body text */
  .shopify-section[id*="collect_reviews"] p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 4px 0 !important;
  }
  /* Swiper wrapper / pagination dots ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â kill bottom whitespace */
  .shopify-section[id*="collect_reviews"] .swiper-wrapper,
  .shopify-section[id*="collect_reviews"] .swiper-container,
  .shopify-section[id*="collect_reviews"] [class*="pagination"] {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  /* ONE review per slide on mobile (was showing ~1.5 ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â slide width was %-based) */
  .shopify-section[id*="collect_reviews"] .swiper-slide,
  .shopify-section[id*="collect_reviews"] [class*="slide"]:not([class*="slider"]) {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    flex-shrink: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
    scroll-snap-align: start !important;
  }
  /* Hide overflow leak from neighbour slide */
  .shopify-section[id*="collect_reviews"] .swiper-container,
  .shopify-section[id*="collect_reviews"] .swiper-wrapper {
    overflow: hidden !important;
  }
}

/* Hide hardcoded "Free delivery on orders over Ãƒâ€šÃ‚Â£200" promo line in header.liquid.
   Replaced by the marquee H1 strip at the very top of the page. */
.vip,
header .vip,
.header .vip {
  display: none !important;
}

/* ============================================================
   BELEAEV ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â Trust Bar (luxury heraldic medallions)
   Wax-seal style emblems with double gold ring + uppercase typography.
   Layout: 6 desktop, 3x2 tablet, 2x3 mobile.
   ============================================================ */
.beleaev-trust-bar {
  margin: 36px 0 44px;
  padding: 18px 24px 16px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 169, 97, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, #0a0a0a 0%, #0d0d0d 100%);
  border-top: 1px solid rgba(201, 169, 97, 0.22);
  border-bottom: 1px solid rgba(201, 169, 97, 0.22);
  color: #f5f1e8;
  position: relative;
}

.beleaev-trust-bar__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  max-width: 760px;
  margin: 0 auto 8px;
}

.beleaev-trust-bar__rule {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(201, 169, 97, 0.6) 50%, transparent 100%);
  max-width: 180px;
}

.beleaev-trust-bar__heading {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.04em;
  color: #C9A961;
  white-space: nowrap;
  text-align: center;
}

.beleaev-trust-bar__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.beleaev-trust-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2px 6px;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.beleaev-trust-bar__item:hover {
  transform: translateY(-3px);
}

.beleaev-trust-bar__seal {
  width: 78px;
  height: 78px;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  filter: drop-shadow(0 2px 8px rgba(201, 169, 97, 0.18));
  transition: filter 320ms ease, transform 320ms ease;
}

.beleaev-trust-bar__item:hover .beleaev-trust-bar__seal {
  filter: drop-shadow(0 4px 14px rgba(201, 169, 97, 0.35));
  transform: rotate(-2deg);
}

.beleaev-trust-bar__title {
  margin: 0 0 6px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: #f5f1e8;
  text-transform: uppercase;
  line-height: 1.3;
}

.beleaev-trust-bar__proof {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.42;
  color: rgba(245, 241, 232, 0.55);
  letter-spacing: 0.015em;
  max-width: 180px;
}

@media (max-width: 1100px) {
  .beleaev-trust-bar__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 18px;
  }
}

@media (max-width: 640px) {
  .beleaev-trust-bar {
    margin: 14px 0;
    padding: 14px 12px 12px;
  }
  .beleaev-trust-bar__head {
    gap: 10px;
    margin-bottom: 6px;
  }
  .beleaev-trust-bar__heading {
    font-size: 12px;
    letter-spacing: 0.03em;
    white-space: normal;
  }
  .beleaev-trust-bar__rule {
    max-width: 60px;
  }
  .beleaev-trust-bar__grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 18px;
    padding: 4px 12px 12px;
    margin: 0 -12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .beleaev-trust-bar__grid::-webkit-scrollbar { display: none; }
  .beleaev-trust-bar__item {
    flex: 0 0 130px;
    padding: 4px 2px;
    scroll-snap-align: start;
  }
  .beleaev-trust-bar__seal {
    width: 50px;
    height: 50px;
    margin-bottom: 7px;
  }
  .beleaev-trust-bar__seal svg {
    width: 46px;
    height: 46px;
  }
  .beleaev-trust-bar__title {
    margin-bottom: 3px;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    line-height: 1.2;
  }
  .beleaev-trust-bar__proof {
    font-size: 10px;
    line-height: 1.3;
    max-width: 150px;
  }
}

.beleaev-h1__track {
  position: relative;
  display: block;
  width: 100%;
  min-height: 30px;
}

.beleaev-h1__item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #0a0a0a;
  white-space: nowrap;
  opacity: 0;
  animation: beleaev-fade var(--bb-cycle, 12s) infinite;
  text-align: center;
}
.beleaev-h1__item::after { content: none; }

@keyframes beleaev-fade {
  0%, 1%   { opacity: 0; transform: translate(-50%, -40%); }
  4%, 30%  { opacity: 1; transform: translate(-50%, -50%); }
  33%, 100%{ opacity: 0; transform: translate(-50%, -60%); }
}

/* Pause on hover ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â luxury affordance */
h1.beleaev-h1:hover .beleaev-h1__item,
h1.beleaev-h1:focus-within .beleaev-h1__item {
  animation-play-state: paused;
}

@media (max-width: 749px) {
  h1.beleaev-h1 {
    padding: 5px 0 4px;
    font-size: 10px;
    letter-spacing: 0.01em;
  }
  .beleaev-h1__track {
    animation-duration: 30s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .beleaev-h1__track {
    animation: none;
    transform: none;
    justify-content: center;
    width: 100%;
  }
  .beleaev-h1__item:not(:first-child) {
    display: none;
  }
}

/* ============================================================
   BELEAEV ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â Per-serving price on PDP (CRO blocker E)
   Sits under the main GBP price, anchors value perception.
   ============================================================ */
.beleaev-per-serving {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 8px 0 14px;
  padding: 8px 12px;
  background: rgba(201, 169, 97, 0.08);
  border-left: 2px solid #C9A961;
  border-radius: 2px;
  font-family: inherit;
}

.beleaev-per-serving__amount {
  font-size: 18px;
  font-weight: 700;
  color: #C9A961;
  letter-spacing: 0.01em;
}

.beleaev-per-serving__label {
  font-size: 12px;
  font-weight: 400;
  color: rgba(245, 241, 232, 0.78);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.beleaev-per-serving__hint {
  font-size: 11px;
  color: rgba(245, 241, 232, 0.55);
  margin-left: auto;
  cursor: help;
  font-style: italic;
}

@media (max-width: 749px) {
  .beleaev-per-serving {
    padding: 6px 10px;
  }
  .beleaev-per-serving__amount {
    font-size: 16px;
  }
  .beleaev-per-serving__hint {
    width: 100%;
    margin-left: 0;
    margin-top: 2px;
  }
}

/* ============================================================
   BELEAEV ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â Unify section width below Beyond the Pearl.
   Align with vertical label "GOURMET GROCERY" (X=32) ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â same left
   edge as bento __inner padding, NOT bento product cards.
   ============================================================ */
/* Trusted Customers + Star Chef Ambassadors:
   match Recipe Book width ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â max 1700, centered, padding 52 (desktop). */
.real-reviews-section,
.caviar-left__inner {
  max-width: 1700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 52px !important;
  padding-right: 52px !important;
  box-sizing: border-box !important;
}
@media (max-width: 990px) {
  .real-reviews-section,
  .caviar-left__inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ============================================================
   BELEAEV ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â Newsletter SUBSCRIBE button ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â gold outline
   (matches .beleaev-split__cta and .ambdr-btn style).
   ============================================================ */
.newsletter-button {
  background: transparent !important;
  color: #f5f1e8 !important;
  border: 1.2px solid #c9a961 !important;
  border-radius: 0 4px 4px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 16px 32px !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}
.newsletter-button:hover {
  background: #c9a961 !important;
  color: #0a0a0a !important;
}

/* ============================================================
   BELEAEV ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â Mobile: section headings (GOURMET GROCERY, TRUSTED BY
   OUR CUSTOMERS) ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â centred and large to match Recipe Book label.
   Specificity 0,3,0+ to beat existing collect_reviews mobile rules.
   ============================================================ */
@media (max-width: 990px) {
  /* GOURMET GROCERY (bento label on mobile) */
  .beleaev-bento .beleaev-bento__label,
  .beleaev-bento__layout .beleaev-bento__label {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
  }
  .beleaev-bento .beleaev-bento__label span,
  .beleaev-bento .beleaev-bento__label {
    font-size: clamp(26px, 7vw, 32px) !important;
    line-height: 1.1 !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
  }

  /* TRUSTED BY OUR CUSTOMERS (reviews header on mobile) */
  .shopify-section[id*="collect_reviews"] .real-reviews-section .reviews-header,
  .real-reviews-section .reviews-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
  }
  .shopify-section[id*="collect_reviews"] .real-reviews-section .reviews-header h2,
  .real-reviews-section .reviews-header h2 {
    font-size: clamp(26px, 7vw, 32px) !important;
    line-height: 1.1 !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Trusted section padding 16 (matches Recipe Book) */
  .shopify-section[id*="collect_reviews"] .real-reviews-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Review-card body ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â slightly tighter on mobile.
     Spec 0,4,0 to beat [id*="collect_reviews"] p / [class*="title"] rules. */
  .shopify-section[id*="collect_reviews"] .real-reviews-section .review-card .review-text,
  .shopify-section[id*="collect_reviews"] .real-reviews-section .review-card p {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }
  .shopify-section[id*="collect_reviews"] .real-reviews-section .review-card .product-name {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
  .shopify-section[id*="collect_reviews"] .real-reviews-section .review-card .date {
    font-size: 11px !important;
  }
  .shopify-section[id*="collect_reviews"] .real-reviews-section .review-card .review-title {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* Halve vertical gap between header (ÃƒÂ¢Ã‹Å“Ã¢â‚¬Â¦ 250 Reviews) and cards.
     Spec 0,4,0 to beat existing [id*="collect_reviews"] [class*="review"] rule. */
  .real-reviews-section .reviews-header {
    margin-bottom: 4px !important;
    padding-bottom: 0 !important;
    gap: 4px !important;
  }
  .shopify-section[id*="collect_reviews"] .real-reviews-section .reviews-summary {
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .shopify-section[id*="collect_reviews"] .real-reviews-section .reviews-divider,
  .shopify-section[id*="collect_reviews"] .real-reviews-section .reviews-carousel,
  .shopify-section[id*="collect_reviews"] .real-reviews-section .reviews-carousel-wrapper {
    margin: 0 !important;
    padding: 0 !important;
  }
  .shopify-section[id*="collect_reviews"] .real-reviews-section .review-card {
    margin: 0 !important;
  }
  .real-reviews-section .reviews-header + * {
    margin-top: 0 !important;
  }

  /* Hard-collapse vertical whitespace inside reviews-header on mobile.
     Spec 0,4,0 to override [id*="collect_reviews"] global rules. */
  .shopify-section[id*="collect_reviews"] .real-reviews-section .reviews-header {
    margin: 0 0 4px !important;
    padding: 0 !important;
    gap: 4px !important;
  }
  .shopify-section[id*="collect_reviews"] .real-reviews-section .reviews-header h2 {
    margin: 0 !important;
    padding: 0 !important;
  }
  .shopify-section[id*="collect_reviews"] .real-reviews-section .stars,
  .shopify-section[id*="collect_reviews"] .real-reviews-section .review-count,
  .shopify-section[id*="collect_reviews"] .real-reviews-section .nav-buttons {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  .shopify-section[id*="collect_reviews"] .real-reviews-section .review-card {
    padding-top: 0 !important;
    padding-bottom: 4px !important;
    margin: 0 !important;
  }
}

/* Trusted Customers ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â tone down meta typography (all viewports).
   Keep golden review-title large.
   Spec 0,4,0 to beat [id*="collect_reviews"] global rules. */
.shopify-section[id*="collect_reviews"] .real-reviews-section .review-card .date {
  font-size: 11px !important;
  line-height: 1.4 !important;
  opacity: 0.75;
}
.shopify-section[id*="collect_reviews"] .real-reviews-section .review-card .product-name {
  font-size: 11px !important;
  line-height: 1.35 !important;
}
.shopify-section[id*="collect_reviews"] .real-reviews-section .review-card .review-text,
.shopify-section[id*="collect_reviews"] .real-reviews-section .review-card p {
  font-size: 11px !important;
  line-height: 1.45 !important;
}
.shopify-section[id*="collect_reviews"] .real-reviews-section .review-card .stars {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* ============================================================
   BELEAEV ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â Bento card alignment.
   Stretch cards to equal height; pin price-block to the bottom
   so prices line up across cards regardless of subtitle length.
   ============================================================ */
.beleaev-bento .beleaev-bento__grid > * {
  display: flex;
  flex-direction: column;
}
/* Sold out / badge ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â absolute, anchored to bottom-right of media area
   (above card__content so it doesn't overlap the title) */
.beleaev-bento .card__content .card__badge,
.beleaev-bento .card__badge {
  position: absolute !important;
  top: auto !important;
  bottom: 100% !important;
  right: 12px !important;
  margin-bottom: 12px !important;
  z-index: 4 !important;
  pointer-events: none;
}

/* Force square media so titles align across cards (Lafitte fix) */
.beleaev-bento .product-card-wrapper .card__media,
.beleaev-bento .card-wrapper .card__media {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  overflow: hidden !important;
}
.beleaev-bento .product-card-wrapper .card__media img,
.beleaev-bento .card-wrapper .card__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.beleaev-bento .card-wrapper,
.beleaev-bento .product-card-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.beleaev-bento .card,
.beleaev-bento .card__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.beleaev-bento .card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.beleaev-bento .card__information {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.beleaev-bento .card-information {
  margin-top: auto;
}

/* ============================================================
   BELEAEV ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â wide-page wrapper for entry-collection sections
   Matches recipe-book / product-grid (1700px max-width, 52px padding).
   Applied via Liquid in sections/related-products.liquid only when product is blank.
   ============================================================ */
.beleaev-wide {
  max-width: 1700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 52px !important;
  padding-right: 52px !important;
  box-sizing: border-box;
}
@media (max-width: 749px) {
  .beleaev-wide {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* ============================================================
   BELEAEV ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â Caviar entry: intro-text alignment + style
   Match left edge of intro-text to Filter label below (1700px + 52px padding)
   Dawn wraps rich-text in .page-width (1200px) which centres the block;
   override at .page-width level so wrapper actually expands to 1700.
   ============================================================ */
[id*="intro-text"] .page-width {
  max-width: 1700px !important;
  padding-left: 52px !important;
  padding-right: 52px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
[id*="intro-text"] .rich-text__wrapper {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  align-items: flex-start !important;
  text-align: left !important;
}
[id*="intro-text"] .rich-text__blocks {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}
[id*="intro-text"] .rich-text__text,
[id*="intro-text"] .rich-text__text p {
  color: #ffffff !important;
  opacity: 1 !important;
  text-align: left !important;
  font-size: 20px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.01em !important;
}
@media (max-width: 749px) {
  [id*="intro-text"] .page-width {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  [id*="intro-text"] .rich-text__text,
  [id*="intro-text"] .rich-text__text p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  /* Tighten the gap between bento strip and intro on mobile.
     Higher-specificity selectors are required because the section's inline
     <style> block is loaded after this stylesheet and would otherwise win. */
  section.beleaev-bento-mix-section .beleaev-bento-mix,
  .shopify-section .beleaev-bento-mix {
    padding-bottom: 8px !important;
  }
  .shopify-section[id*="intro-text"] [class*="section-"][class*="-padding"],
  .shopify-section[id*="intro-text"] .rich-text {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}

/* ============================================================
   BELEAEV ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â Caviar entry: constrain mini-sets slider width
   When enable_desktop_slider:true, Dawn removes .page-width from
   slider-component to allow full-width scroll. Reapply constraint.
   ============================================================ */
/* Width treatment for featured-signature (CAVIAR SETS) so it aligns
   with featured-mini and recipe-book on Caviar entry.
   Featured-collection without desktop slider wraps grid in .page-width-desktop
   (Dawn-default 1200/80). Title-row uses .page-width. Override both. */
[id*="featured-signature"] .page-width,
[id*="featured-signature"] .page-width-desktop,
[id*="featured-signature"] slider-component {
  max-width: 1700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (min-width: 990px) {
  [id*="featured-signature"] .page-width,
  [id*="featured-signature"] .page-width-desktop,
  [id*="featured-signature"] slider-component {
    padding-left: 52px !important;
    padding-right: 52px !important;
  }
  /* Match inner grid-item widths to featured-mini so cards line up by right edge */
  [id*="featured-signature"] .grid--3-col-desktop {
    gap: 12px !important;
  }
  [id*="featured-signature"] .grid--3-col-desktop .grid__item,
  [id*="featured-signature"] .slider--desktop.grid--3-col-desktop .grid__item {
    width: calc((100% - 24px) / 3) !important;
    flex-shrink: 0;
  }
}

[id*="featured-mini"] .slider-component-desktop,
[id*="featured-mini"] slider-component {
  max-width: 1700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
@media (min-width: 990px) {
  [id*="featured-mini"] .slider-component-desktop,
  [id*="featured-mini"] slider-component {
    padding-left: 52px !important;
    padding-right: 52px !important;
  }
}

/* ============================================================
   BELEAEV ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â Caviar entry: align product-grid width to recipe-book
   Multiple selector strategies for maximum compatibility
   ============================================================ */
body.template-caviar-entry .collection.page-width,
body.template-caviar-entry .page-width,
body.template-collection .collection.page-width,
[id*="product-grid"] .collection,
[id*="product-grid"] .page-width,
[id*="product_grid"] .page-width,
[id*="product-grid"] .product-grid-container > .page-width {
  max-width: 1700px !important;
}
#product-grid {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}
@media (min-width: 990px) {
  body.template-caviar-entry .collection.page-width,
  body.template-caviar-entry .page-width,
  [id*="product-grid"] .collection.page-width,
  [id*="product-grid"] .page-width {
    padding-left: 52px !important;
    padding-right: 52px !important;
  }
  /* Force the inner product-grid (ul) to span full container width */
  [id*="product-grid"] .collection .product-grid,
  [id*="product-grid"] ul.product-grid,
  [id*="product-grid"] .product-grid {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Fix Dawn's broken width formula for .grid--4-col-desktop .grid__item
     Dawn ships `calc(25% - spacing * 3 / 1)` ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â should be `* 3 / 4`. */
  .grid--4-col-desktop > .grid__item,
  body .grid--4-col-desktop .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing, 1rem) * 3 / 4) !important;
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing, 1rem) * 3 / 4) !important;
  }
}

/* ============================================================
   BELEAEV ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â Recipe Book (Petrossian-style)
   Vertical label + horizontal carousel of cards.
   Each card: square photo + body card (title, intro, meta, Read more)
   ============================================================ */
.beleaev-recipes {
  display: block;
  /* Align with bento; +20px each side to slightly narrow the block (~5mm) */
  padding: 0 52px;
  max-width: 1700px;
  margin: 0 auto;
}
/* Match vertical spacing to Trust Bar ÃƒÂ¢Ã¢â‚¬Â Ã¢â‚¬â„¢ Split Feature gap (44px) */
.shopify-section[id*="recipe_book"] {
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}
@media (max-width: 749px) {
  .shopify-section[id*="recipe_book"] {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }
}
.beleaev-recipes__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 36px;
}
.beleaev-recipes__label-dots {
  display: none;
}
.beleaev-recipes__label-text {
  writing-mode: horizontal-tb;
  transform: none;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: normal;
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 500;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.05;
}
.beleaev-recipes__carousel {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
.beleaev-recipes__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(440px, 38vw, 700px);
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  /* peek: right edge bleeds beyond viewport visually */
}
.beleaev-recipes__track::-webkit-scrollbar { display: none; }

.beleaev-recipes__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  background: transparent;
  align-items: stretch;
  min-width: 0;
  aspect-ratio: 2 / 1;
}
.beleaev-recipes__img-wrap {
  position: relative;
  overflow: hidden;
  background: #141210;
  width: 100%;
  height: 100%;
  min-width: 0;
}
.beleaev-recipes__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.beleaev-recipes__card:hover .beleaev-recipes__img {
  transform: scale(1.04);
}
.beleaev-recipes__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(201, 169, 97, 0.45);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-style: italic;
}
.beleaev-recipes__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(201, 169, 97, 0.10);
  border-left: 0;
  padding: 18px 22px;
  min-width: 0;
  overflow: hidden;
}
.beleaev-recipes__title {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: clamp(17px, 1.25vw, 21px);
  font-weight: 600;
  color: #f5f1e8;
  margin: 0 0 12px;
  line-height: 1.2;
  letter-spacing: 0.005em;
}
.beleaev-recipes__desc {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(245, 241, 232, 0.72);
  margin: 0 0 14px;
  letter-spacing: 0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.beleaev-recipes__meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 14px;
  padding: 9px 0;
  border-top: 1px solid rgba(201, 169, 97, 0.18);
  border-bottom: 1px solid rgba(201, 169, 97, 0.18);
}
.beleaev-recipes__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #C9A961;
  letter-spacing: 0.06em;
}
.beleaev-recipes__meta-item svg {
  flex: 0 0 auto;
  opacity: 0.85;
}
.beleaev-recipes__meta-sep {
  width: 1px;
  height: 12px;
  background: rgba(201, 169, 97, 0.25);
}
.beleaev-recipes__read {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f5f1e8;
  border-bottom: 1px solid #C9A961;
  padding-bottom: 3px;
  align-self: flex-start;
  font-weight: 500;
  transition: color 200ms ease;
}
.beleaev-recipes__card:hover .beleaev-recipes__read {
  color: #C9A961;
}

.beleaev-recipes__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 14px;
}
.beleaev-recipes__arrow {
  background: transparent;
  border: 1px solid rgba(201, 169, 97, 0.55);
  color: #C9A961;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
  padding: 0;
}
.beleaev-recipes__arrow:hover {
  background: #C9A961;
  color: #0a0a0a;
  border-color: #C9A961;
}
.beleaev-recipes__dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.beleaev-recipes__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(201, 169, 97, 0.30);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.beleaev-recipes__dot.is-active {
  background: #C9A961;
  transform: scale(1.25);
}

@media (max-width: 990px) {
  .beleaev-recipes {
    padding: 0 0 0 16px;
  }
  .beleaev-recipes__label {
    margin-bottom: 24px;
  }
  .beleaev-recipes__label-text { font-size: 28px; }
  .beleaev-recipes__track {
    grid-auto-columns: clamp(220px, 64vw, 290px);
    gap: 12px;
  }
  .beleaev-recipes__card {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
  }
  .beleaev-recipes__img-wrap {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    flex: 0 0 auto;
  }
  .beleaev-recipes__body {
    border: 0;
    background: transparent;
    padding: 14px 2px 4px;
  }
  .beleaev-recipes__title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.2;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .beleaev-recipes__desc {
    display: none;
  }
  .beleaev-recipes__meta-row {
    border-top: 0;
    border-bottom: 0;
    padding: 4px 0 0;
    margin-bottom: 0;
    gap: 4px 10px;
    justify-content: space-between;
  }
  .beleaev-recipes__meta-item {
    font-size: 11px;
    gap: 6px;
  }
  .beleaev-recipes__meta-item svg {
    width: 13px;
    height: 13px;
  }
  .beleaev-recipes__meta-sep {
    display: none;
  }
  .beleaev-recipes__read {
    display: none;
  }
  .beleaev-recipes__nav {
    display: none;
  }
}

@media (max-width: 540px) {
  .beleaev-recipes__card {
    grid-template-columns: 0.85fr 1fr;
  }
  .beleaev-recipes__title { font-size: 16px; margin-bottom: 8px; }
  .beleaev-recipes__desc {
    font-size: 11.5px;
    -webkit-line-clamp: 3;
    margin-bottom: 12px;
  }
  .beleaev-recipes__meta-row { padding: 8px 0; margin-bottom: 12px; gap: 4px 8px; }
  .beleaev-recipes__meta-item { font-size: 10.5px; }
}

/* ============================================================
   BELEAEV ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â Split Feature (Petrossian-style 3-col)
   Photo / center copy + 2 CTAs / Photo
   ============================================================ */
.beleaev-split {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  align-items: stretch;
  background: #0a0a0a;
  color: #f5f1e8;
  border-top: 1px solid rgba(201, 169, 97, 0.18);
  border-bottom: 1px solid rgba(201, 169, 97, 0.18);
  overflow: hidden;
}
.beleaev-split__photo {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  aspect-ratio: 15 / 8;
}
.beleaev-split__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.beleaev-split__img--mobile { display: none; }
@media (max-width: 990px) {
  .beleaev-split__photo--left { display: none; }
  .beleaev-split__photo--right .beleaev-split__img--desktop { display: none; }
  .beleaev-split__photo--right .beleaev-split__img--mobile { display: block; }
}
.beleaev-split__photo:hover .beleaev-split__img { transform: scale(1.04); }
.beleaev-split__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 360px;
  color: rgba(201, 169, 97, 0.45);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-style: italic;
  text-align: center;
  padding: 24px;
}
.beleaev-split__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 24px;
  gap: 0;
}
.beleaev-split__eyebrow {
  margin: 0 0 6px;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: clamp(18px, 1.72vw, 22px);
  font-weight: 400;
  font-style: italic;
  color: #f5f1e8;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.beleaev-split__heading {
  margin: 0 0 8px;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: clamp(29px, 3.43vw, 45px);
  font-weight: 400;
  color: #C9A961;
  letter-spacing: 0.005em;
  line-height: 1.05;
}
.beleaev-split__dots {
  display: inline-flex;
  gap: 5px;
  margin: 0 0 8px;
}
.beleaev-split__dots span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #C9A961;
  opacity: 0.7;
}
.beleaev-split__subtitle {
  margin: 0 0 14px;
  font-size: 15.5px;
  font-weight: 400;
  color: rgba(245, 241, 232, 0.78);
  letter-spacing: 0.02em;
  max-width: 360px;
  line-height: 1.45;
}
.beleaev-split__ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.beleaev-split__cta {
  display: inline-block;
  padding: 10px 20px;
  border: 1.2px solid #C9A961;
  background: transparent;
  color: #f5f1e8;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
  min-width: 110px;
  text-align: center;
}
.beleaev-split__cta:hover,
.beleaev-split__cta:focus-visible {
  background: #C9A961;
  color: #0a0a0a;
  transform: translateY(-1px);
  outline: none;
}

@media (max-width: 990px) {
  .beleaev-split {
    grid-template-columns: 1fr;
  }
  .beleaev-split__photo--right {
    order: 3;
  }
  .beleaev-split__center {
    order: 2;
    padding: 20px 16px;
  }
  .beleaev-split__heading {
    font-size: clamp(22px, 6vw, 28px);
  }
}

@media (max-width: 540px) {
  .beleaev-split__center {
    padding: 16px 14px;
  }
  .beleaev-split__eyebrow { font-size: 14px; margin-bottom: 4px; }
  .beleaev-split__heading { font-size: 26px; margin-bottom: 6px; }
  .beleaev-split__subtitle { font-size: 13px; margin-bottom: 10px; }
  .beleaev-split__cta {
    padding: 8px 14px;
    font-size: 11px;
    min-width: 95px;
  }
}

/* ============================================================
   BELEAEV ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â Instagram Feed (horizontal carousel with snap-scroll)
   Show 4 tiles desktop, 2.3 tiles mobile, snap to each post
   ============================================================ */
.beleaev-ig {
  margin: 0;
  padding: 36px 0 32px;
  background: #0a0a0a;
  color: #f5f1e8;
  border-top: 1px solid rgba(201, 169, 97, 0.18);
  border-bottom: 1px solid rgba(201, 169, 97, 0.18);
  position: relative;
}
.beleaev-ig__head {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 22px;
  max-width: 760px;
  margin: 0 auto 4px;
  padding: 0 24px;
}
.beleaev-ig__rule {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.6), transparent);
  max-width: 180px;
}
.beleaev-ig__heading {
  margin: 0 !important;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
  font-size: clamp(18px, 2vw, 26px) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: #C9A961 !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap;
  text-align: center;
}
.beleaev-ig__handle {
  margin: 0 0 22px !important;
  text-align: center !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
}
.beleaev-ig__handle a {
  color: rgba(245, 241, 232, 0.62) !important;
  text-decoration: none !important;
  transition: color 200ms ease;
}
.beleaev-ig__handle a:hover { color: #C9A961 !important; }

.beleaev-ig__grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px;
  padding: 0 24px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,169,97,0.4) transparent;
}
.beleaev-ig__grid::-webkit-scrollbar {
  height: 6px;
}
.beleaev-ig__grid::-webkit-scrollbar-track {
  background: transparent;
}
.beleaev-ig__grid::-webkit-scrollbar-thumb {
  background: rgba(201,169,97,0.4);
  border-radius: 3px;
}

.beleaev-ig__tile {
  flex: 0 0 calc((100% - 24px - 36px) / 4) !important;
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(201, 169, 97, 0.06);
  border: 1px solid rgba(201, 169, 97, 0.18);
  text-decoration: none !important;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), border-color 320ms ease;
  scroll-snap-align: start;
}
.beleaev-ig__tile:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 169, 97, 0.6);
}
.beleaev-ig__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.beleaev-ig__tile:hover .beleaev-ig__img { transform: scale(1.06); }
.beleaev-ig__placeholder {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(201, 169, 97, 0.45) !important;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-style: italic;
}
.beleaev-ig__overlay {
  position: absolute !important;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0);
  color: #C9A961;
  opacity: 0;
  transition: opacity 280ms ease, background 280ms ease;
  pointer-events: none;
}
.beleaev-ig__tile:hover .beleaev-ig__overlay {
  opacity: 1;
  background: rgba(10, 10, 10, 0.45);
}
.beleaev-ig__cta-wrap {
  text-align: center !important;
  margin-top: 22px;
  padding: 0 24px;
}
.beleaev-ig__cta {
  display: inline-block !important;
  padding: 11px 24px !important;
  border: 1.5px solid #C9A961 !important;
  background: transparent !important;
  color: #C9A961 !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.beleaev-ig__cta:hover {
  background: #C9A961 !important;
  color: #0a0a0a !important;
  transform: translateY(-1px);
}

@media (max-width: 990px) {
  .beleaev-ig__tile {
    flex: 0 0 calc((100% - 24px - 24px) / 3) !important;
  }
}
@media (max-width: 640px) {
  .beleaev-ig {
    padding: 24px 0 22px;
  }
  .beleaev-ig__head { gap: 10px; padding: 0 16px; }
  .beleaev-ig__heading { font-size: 16px !important; }
  .beleaev-ig__rule { max-width: 60px; }
  .beleaev-ig__handle { margin-bottom: 14px !important; font-size: 11px !important; }
  .beleaev-ig__grid {
    padding: 0 16px 8px;
    gap: 8px;
  }
  .beleaev-ig__tile {
    flex: 0 0 calc((100% - 16px - 28px) / 2.3) !important;
  }
  .beleaev-ig__cta-wrap {
    margin-top: 16px;
    padding: 0 16px;
  }
  .beleaev-ig__cta {
    font-size: 10px !important;
    padding: 9px 18px !important;
  }
}


/* === Beleaev PDP Sommelier Bubble (WhatsApp) === */
.beleaev-sommelier-bubble {
  position: fixed;
  right: 20px;
  bottom: 88px; /* above sticky-atc-bar on mobile */
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #ffffff !important;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0,0,0,0.25);
  text-decoration: none !important;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.2;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.beleaev-sommelier-bubble:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45), 0 4px 10px rgba(0,0,0,0.3);
}
.beleaev-bubble-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  flex-shrink: 0;
}
.beleaev-bubble-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.beleaev-bubble-name {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
}
.beleaev-bubble-sub {
  font-size: 10.5px;
  opacity: 0.9;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .beleaev-sommelier-bubble {
    right: 14px;
    bottom: 92px;
    padding: 9px 14px 9px 10px;
  }
  .beleaev-bubble-name { font-size: 13px; }
  .beleaev-bubble-sub { font-size: 9.5px; }
}
@media (max-width: 380px) {
  .beleaev-bubble-text { display: none; }
  .beleaev-sommelier-bubble {
    padding: 12px;
    border-radius: 50%;
  }
  .beleaev-bubble-icon { width: 28px; height: 28px; }
}

/* Product card subtitle (tagline) ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â normal style for readability test.
   Higher specificity to beat Dawn base.css. */
.card-wrapper p.card__subtitle,
.card__information p.card__subtitle,
.card__content p.card__subtitle,
.product-card-wrapper p.card__subtitle,
p.card__subtitle {
  font-style: normal !important;
}

/* Mobile: tighten gap between product photo and title in bento (Gourmet Grocery, etc.) */
@media (max-width: 749px) {
  .beleaev-bento .product-card-wrapper .card__content,
  .beleaev-bento .card-wrapper .card__content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .beleaev-bento .product-card-wrapper .card-information,
  .beleaev-bento .card-wrapper .card-information {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  /* Mobile: do not flex-stretch card columns ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â keep content tight */
  .beleaev-bento .beleaev-bento__grid > *,
  .beleaev-bento .card-wrapper,
  .beleaev-bento .product-card-wrapper,
  .beleaev-bento .card,
  .beleaev-bento .card__inner,
  .beleaev-bento .card__content,
  .beleaev-bento .card__information {
    flex: 0 0 auto !important;
  }
  /* Cut padding/margin between media and title (gap ~59 ÃƒÂ¢Ã¢â‚¬Â Ã¢â‚¬â„¢ ~30) */
  .beleaev-bento .product-card-wrapper .card__information,
  .beleaev-bento .card-wrapper .card__information {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .shopify-section .beleaev-bento .product-card-wrapper .card__heading,
  .shopify-section .beleaev-bento .card-wrapper .card__heading,
  .shopify-section .beleaev-bento .product-card-wrapper .card__heading.h5,
  .shopify-section .beleaev-bento .card-wrapper .card__heading.h5 {
    margin-top: 0 !important;
    margin-bottom: 0.2rem !important;
    min-height: 4.5em !important;
  }
  /* Cut subtitle ÃƒÂ¢Ã¢â‚¬Â Ã¢â‚¬â„¢ price gap in half (19 ÃƒÂ¢Ã¢â‚¬Â Ã¢â‚¬â„¢ ~10) */
  .shopify-section .beleaev-bento .product-card-wrapper .card__subtitle,
  .shopify-section .beleaev-bento .card-wrapper .card__subtitle {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    min-height: 2.8em !important;
  }
  .beleaev-bento .product-card-wrapper .beleaev-price-row,
  .beleaev-bento .card-wrapper .beleaev-price-row {
    margin-top: 4px !important;
  }
}

/* Mobile: reduce collection title ÃƒÂ¢Ã¢â‚¬Â Ã¢â‚¬â„¢ slider gap by ~40% total */
@media (max-width: 749px) {
  .collection__title {
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
  }
  .collection__title h1,
  .collection__title h2,
  .collection__title .title {
    margin-bottom: 6px !important;
  }
  .collection .slider-buttons {
    margin-top: 6px !important;
  }
}

/* ============================================================
   FINAL OVERRIDE ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â mobile button sizes for ambdr + newsletter.
   Placed at end of file to win against earlier non-media rules
   that share the same specificity.
   ============================================================ */
@media (max-width: 768px) {
  .caviar-left .ambdr-btn,
  .newsletter-button {
    font-size: 11px !important;
    padding: 10px 14px !important;
    letter-spacing: 0.1em !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
  }
  .newsletter-input {
    font-size: 11px !important;
    padding: 10px 12px !important;
    min-width: 0 !important;
  }
  .newsletter-form {
    width: 100% !important;
    max-width: 320px !important;
    margin: 16px auto 0 !important;
    display: flex !important;
  }
  .newsletter-container {
    padding: 0 16px !important;
  }
}


/* ============================================================
   BELEAEV ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â MOBILE-ONLY spacing tweaks (30.04.2026, Tatyana)
   #1: gap between Trusted Reviews and Star Chef section
       desktop unchanged; mobile: -15% (40px -> 34px)
   #2: gap between hotel-partner marquee logos and the
       "STAR CHEF AMBASSADORS" heading: mobile -20% (24px -> 19px)
   Placed at end of file to win against earlier rules.
   ============================================================ */
@media (max-width: 749px) {
  .caviar-left {
    padding-top: 8px !important;
    padding-bottom: 16px !important;
  }
  .caviar-left__inner {
    gap: 10px !important;
  }
  .caviar-left__image img {
    aspect-ratio: 5 / 3 !important;
    max-width: 360px !important;
  }
  .ambassadors-marquee {
    margin-bottom: 8px !important;
    padding: 4px 0 !important;
  }
  .ambassadors-marquee__logo {
    height: 50px !important;
  }
  .caviar-left__heading {
    font-size: 22px !important;
    line-height: 1.1 !important;
    margin-bottom: 8px !important;
  }
  .caviar-left__richtext,
  .caviar-left__richtext p {
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin: 0 0 10px !important;
  }
  .caviar-left .ambdr-btn,
  .newsletter-button {
    padding: 8px 14px !important;
    font-size: 11px !important;
  }
}

/* ---------- PDP gold subtitle bold (2026-05-04) ---------- */
/* Element: <p class="title-line">{{ product.metafields.custom.product_title_line }}</p>
   Higher specificity (body p.title-line) to beat any competing rule. */
body p.title-line,
body .product__info-container .title-line,
body .product .title-line,
quick-add-modal p.title-line {
  font-weight: 700 !important;
}

/* ---------- Quick Add modal: keep ONE primary CTA (2026-05-04) ---------- */
/* Hides Shop Pay express checkout + "More payment options" inside Quick Add
   modal so users see only the ADD TO CART button. PDP keeps both buttons. */
quick-add-modal .shopify-payment-button,
quick-add-modal [data-shopify="payment-button"] {
  display: none !important;
}

/* ---------- OUT OF STOCK auto-badge (2026-05-04) ----------
   Shopify automatically applies .price--sold-out class to product cards when
   inventory hits zero (assumes "Continue selling when out of stock" is OFF).
   We surface that with a visible badge. When stock is replenished Shopify
   removes the class and the badge disappears automatically. No manual work.
   :has() support: all evergreen browsers. */
.card-wrapper:has(.price--sold-out),
product-card:has(.price--sold-out) {
  position: relative;
}
.card-wrapper:has(.price--sold-out)::before,
product-card:has(.price--sold-out)::before {
  content: "OUT OF STOCK";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  background: rgba(0, 0, 0, 0.82);
  color: #d4af37;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 2px;
  pointer-events: none;
  font-family: inherit;
  line-height: 1.2;
}
/* (2026-05-04) Image dimming on OOS cards removed at founder's request ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â
   "ÃƒÂÃ‚Â¿Ãƒâ€˜Ã¢â€šÂ¬ÃƒÂÃ‚Â¾ÃƒÂÃ‚Â´Ãƒâ€˜Ã†â€™ÃƒÂÃ‚ÂºÃƒâ€˜Ã¢â‚¬Å¡Ãƒâ€˜Ã¢â‚¬Â¹ Ãƒâ€˜Ã‚ÂÃƒâ€˜Ã¢â‚¬Å¡ÃƒÂÃ‚Â°ÃƒÂÃ‚Â»ÃƒÂÃ‚Â¸ ÃƒÂÃ‚Â¿Ãƒâ€˜Ã¢â€šÂ¬ÃƒÂÃ‚Â¾ÃƒÂÃ‚Â·Ãƒâ€˜Ã¢â€šÂ¬ÃƒÂÃ‚Â°Ãƒâ€˜Ã¢â‚¬Â¡ÃƒÂÃ‚Â½Ãƒâ€˜Ã¢â‚¬Â¹ÃƒÂÃ‚Âµ". The OUT OF STOCK badge is enough indication. */
/* Optionally hide quick-add (cart icon) on sold-out cards ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â there's nothing
   to add. Theme already disables the button; we hide it to avoid visual noise. */
.card-wrapper:has(.price--sold-out) .quick-add,
product-card:has(.price--sold-out) .quick-add {
  visibility: hidden !important;
}
@media (max-width: 749px) {
  .card-wrapper:has(.price--sold-out)::before,
  product-card:has(.price--sold-out)::before {
    font-size: 9px;
    padding: 5px 8px;
    letter-spacing: 1.4px;
    top: 8px;
    left: 8px;
  }
}

/* ============================================================
   CART DRAWER ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â CONTRAST FIX V3 (added 2026-05-08, replaces V1+V2)
   Issue: custom .upsell-* / .cart-item__name / .drawer__heading /
   th had hardcoded color: rgb(26,26,26) on the dark cart-drawer
   color-scheme, making text unreadable when drawer opens.
   Fix: scoped foreground color overrides + explicit black for
   the white ADD button so its <span> stays visible.
   ============================================================ */

/* WHITE TEXT ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â readable on the drawer's dark color-scheme.
   Uses --color-foreground variable so the rule auto-adapts
   if the scheme is ever switched to a light palette. */
cart-drawer .drawer__heading,
cart-drawer .drawer__header,
cart-drawer .drawer__header *:not(.upsell-add-btn):not(.upsell-add-btn *),
cart-drawer .cart-item__name,
cart-drawer .cart-item__details,
cart-drawer .cart-item__details *,
cart-drawer .totals,
cart-drawer .totals *,
cart-drawer .tax-note,
cart-drawer .price,
cart-drawer .price *,
cart-drawer th,
cart-drawer thead,
cart-drawer .caption-with-letter-spacing,
cart-drawer h1,
cart-drawer h2,
cart-drawer h3,
cart-drawer h4,
cart-drawer h5,
cart-drawer h6,
cart-drawer p,
cart-drawer label,
cart-drawer dt,
cart-drawer dd,
cart-drawer .upsell-title,
cart-drawer .also-like,
cart-drawer h2.also-like,
cart-drawer .upsell-price,
cart-drawer .upsell-info2,
cart-drawer .upsell-info2 *,
cart-drawer input[type="text"],
cart-drawer input[type="number"],
cart-drawer .quantity__input {
  color: rgb(var(--color-foreground)) !important;
}

/* BLACK TEXT ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â for the white-background ADD button so its
   <span>ADD</span> stays visible. Specificity is intentionally
   high (4 :not()s = 4 class units) so it wins against any
   broad upsell-area override that might come later. */
cart-drawer .upsell-add-btn:not(#x):not(#y):not(.x):not(.y),
cart-drawer .upsell-add-btn:not(#x):not(#y):not(.x):not(.y) span,
cart-drawer .upsell-add-btn:not(#x):not(#y):not(.x):not(.y) * {
  color: rgb(0, 0, 0) !important;
}


/* ============================================================
   SEARCH-LABEL CONTRAST FIX (added 2026-05-08)
   Issue: .field__label was hardcoded to rgb(26,26,26) which is
   invisible on dark color schemes (search modal placeholder, etc).
   Fix: bind to active scheme via --color-foreground variable so it
   stays readable on both dark and light contexts.
   ============================================================ */
.field__label.field__label.field__label,
.field__label.field__label.field__label * {
  color: rgb(var(--color-foreground)) !important;
}

/* ============================================================
   Beleaev curator badge inside QUICK-ADD modal (fix 2026-06-04)
   Issue: the JS-injected .beleaev-badge ("Best Value" / "Gold
   Prestige" etc.) is force-coloured to #1a1a1a by jdgm-dark.css
   ([class*="..."] * { color:#1a1a1a !important }), so on the dark
   badge it renders as an EMPTY gold pill inside the quick-add modal.
   Fix: re-assert the brand gold (#C9A961) on the badge + its text +
   the currentColor icon, so it looks IDENTICAL to the grid card.
   Scope = quick-add-modal (tag): grid cards / PDP / cart untouched.
   ============================================================ */
quick-add-modal .beleaev-badge,
quick-add-modal .beleaev-badge *,
quick-add-modal .beleaev-badge__text,
quick-add-modal .beleaev-badge__icon,
quick-add-modal .beleaev-badge__icon svg {
  color: #C9A961 !important;
}
quick-add-modal .beleaev-badge__icon svg {
  fill: currentColor !important;
}

/* ============================================================
   PDP / QUICK-VIEW READABILITY FIX (added 2026-05-11)
   Issue: inline <style> blocks in product templates set dim text:
     .beleaev-hook       (description paragraph) -> #e4e4e4 + weight 300 + italic
     .product-specs-web  (Species/Grains/Color/Origin block) -> #eaeaea
   On the dark Beleaev color scheme this looks unreadable.
   Fix: bump to full-opacity cream, normal weight, drop italic on
   the lead paragraph so the brand description reads cleanly.
   Italic kept on inline emphasis where used (em/i tags inside).
   ============================================================ */

.beleaev-hook,
quick-add-modal .beleaev-hook,
.product__info-container .beleaev-hook {
  color: #f5f1e8 !important;
  font-weight: 400 !important;
  font-style: normal !important;
  opacity: 1 !important;
}

.product-specs-web,
.product-specs-web *,
quick-add-modal .product-specs-web,
quick-add-modal .product-specs-web *,
.product__info-container .product-specs-web,
.product__info-container .product-specs-web * {
  color: #f5f1e8 !important;
  opacity: 1 !important;
}

/* Subtitle line ("THE MOST PRESTIGIOUS EXPRESSION OF ...") ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â keep
   uppercase / letter-spacing but ensure brand-gold full opacity. */
body p.title-line,
quick-add-modal p.title-line,
.product__info-container .title-line {
  color: #C9A961 !important;
  opacity: 1 !important;
}
/* ---- Round 2 (2026-05-11): trust-row + stronger subtitle specificity ---- */

/* .beleaev-trust-row (SUSTAINABLE | NO-KILL | 24H FRESH | CONCIERGE | CITES) ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â
   inline color #bdbdbd is too dim on dark bg. Bump to cream, keep green checks. */
.beleaev-trust-row,
.beleaev-trust-row span,
quick-add-modal .beleaev-trust-row,
quick-add-modal .beleaev-trust-row span,
.product__info-container .beleaev-trust-row,
.product__info-container .beleaev-trust-row span {
  color: #f5f1e8 !important;
  opacity: 1 !important;
}

/* Subtitle .title-line ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â stronger specificity + brand gold. */
.product__info-container .product__title p.title-line,
.product__info-container .product__title + p.title-line,
.product__title p.title-line,
quick-add-modal .product__title p.title-line,
quick-add-modal p.title-line,
body p.title-line {
  color: #C9A961 !important;
  opacity: 1 !important;
}
/* ---- Round 3 (2026-05-11): variant table selected cell + upsell names + accordion summaries ---- */

/* #1: variant table ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â selected cell. The custom inline CSS uses .variant-title which
   does not exist in the rendered HTML (it ships .variant-weight + .variant-persons).
   Force all text inside the :checked label to white. */
.variant-input:checked + .variant-label,
.variant-input:checked + .variant-label *,
.variant-input:checked + .variant-label .variant-weight,
.variant-input:checked + .variant-label .variant-persons,
.variant-input:checked + .variant-label .variant-price,
.variant-input:checked + .variant-label .last-work,
.variant-input:checked + .variant-label .last-work * {
  color: #ffffff !important;
}

/* #2: upsell items outside cart-drawer (PDP "You may also like" block).
   Existing cart-drawer fix doesn't reach them. */
.custom-upsell-container2 .also-like,
.custom-upsell-container2 .upsell-title,
.custom-upsell-container2 .upsell-title a,
.custom-upsell-container2 .upsell-title *,
.custom-upsell-container2 .upsell-price,
.custom-upsell-container2 .upsell-info2,
.custom-upsell-container2 .upsell-info2 *,
quick-add-modal .also-like,
quick-add-modal .upsell-title,
quick-add-modal .upsell-title a,
quick-add-modal .upsell-price {
  color: #f5f1e8 !important;
  opacity: 1 !important;
}

/* #3: PDP accordions (Flavour Profile / Perfect Pairings / Description) ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â
   summary title + body, force readable cream on dark bg. */
.product__accordion summary,
.product__accordion summary *,
.product__accordion .summary__title,
.product__accordion .summary__title *,
.product__accordion .accordion__title,
.product__accordion h2.accordion__title,
.product__accordion .accordion__content,
.product__accordion .accordion__content *,
quick-add-modal .product__accordion summary,
quick-add-modal .product__accordion summary *,
quick-add-modal .product__accordion .accordion__content,
quick-add-modal .product__accordion .accordion__content * {
  color: #f5f1e8 !important;
  opacity: 1 !important;
}
/* ---- Round 4 (2026-05-11): product title H1/H2, TOTAL label+value, Shipping caption, trust-row escalated ---- */

/* #1: Product title (Golden Oscietra Special Reserve) ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â H1 / H2 / .h1 link */
.product__info-container .product__title h1,
.product__info-container .product__title h2,
.product__info-container .product__title .h1,
.product__info-container .product__title a,
.product__info-container .product__title a h2,
quick-add-modal .product__title h1,
quick-add-modal .product__title h2,
quick-add-modal .product__title .h1,
quick-add-modal .product__title a,
quick-add-modal .product__title a h2 {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Title-line subtitle ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â escalate to win over inline .product__title .title-line { color:#90826B !important } */
.product__info-container .product__title p.title-line,
.product__info-container .product__title .title-line,
quick-add-modal .product__info-container .product__title .title-line,
quick-add-modal .product__title p.title-line,
quick-add-modal .product__title .title-line,
body .product__info-container .product__title .title-line,
body quick-add-modal .product__title .title-line {
  color: #C9A961 !important;
  opacity: 1 !important;
}

/* #2: TOTAL block ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â value bright white, "Total" label brand gold */
.beleaev-total,
.beleaev-total span,
.beleaev-total [data-beleaev-total],
quick-add-modal .beleaev-total,
quick-add-modal .beleaev-total span,
.product__info-container .beleaev-total,
.product__info-container .beleaev-total span {
  color: #ffffff !important;
  opacity: 1 !important;
}
.beleaev-total .lbl,
.product__info-container .beleaev-total .lbl,
quick-add-modal .beleaev-total .lbl {
  color: #C9A961 !important;
}

/* #3: Shipping caption .product__tax + link inside it */
.product__tax,
.product__tax *,
.product__tax a,
quick-add-modal .product__tax,
quick-add-modal .product__tax *,
.product__info-container .product__tax,
.product__info-container .product__tax * {
  color: #f5f1e8 !important;
  opacity: 1 !important;
}

/* Trust row ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â escalate specificity, also style ::before green check */
body .beleaev-trust-row,
body .beleaev-trust-row span,
body quick-add-modal .beleaev-trust-row,
body quick-add-modal .beleaev-trust-row span,
body .product__info-container .beleaev-trust-row,
body .product__info-container .beleaev-trust-row span {
  color: #f5f1e8 !important;
  opacity: 1 !important;
}
.beleaev-trust-row span::before,
quick-add-modal .beleaev-trust-row span::before {
  color: #22C55E !important;
}
/* ---- Round 5 (2026-05-11): PDP buttons fallback (JS-independent) ----
   Issue: existing button styling scoped to .beleaev-buttons-row, a class
   added by beleaev-custom.js at runtime. If JS hasn't run yet (or fails),
   buttons fall back to Dawn defaults ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â sometimes invisible text/icons.
   Fix: scope same readability to the natural HTML wrapper .product-form__buttons
   so buttons read even before JS wires .beleaev-buttons-row. ---- */

/* Add to cart ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â black text on white pill (matches existing intended design) */
.product-form__buttons .product-form__submit.button--primary,
.product__info-container .product-form__submit.button--primary,
quick-add-modal .product-form__submit.button--primary {
  color: #0a0a0a !important;
  background: #ffffff !important;
  border: 1px solid #0a0a0a !important;
}
.product-form__buttons .product-form__submit.button--primary:hover,
.product__info-container .product-form__submit.button--primary:hover,
quick-add-modal .product-form__submit.button--primary:hover,
.product-form__buttons .product-form__submit.button--primary:focus-visible,
.product__info-container .product-form__submit.button--primary:focus-visible,
quick-add-modal .product-form__submit.button--primary:focus-visible {
  background: #0a0a0a !important;
  color: #ffffff !important;
}
.product-form__buttons .product-form__submit.button--primary span,
.product__info-container .product-form__submit.button--primary span,
quick-add-modal .product-form__submit.button--primary span {
  color: inherit !important;
}

/* Quantity widget: white text + white SVG icons on dark/transparent bg */
.product__info-container quantity-input,
.product__info-container .quantity,
.product__info-container .quantity__input,
.product__info-container .quantity__button,
quick-add-modal quantity-input,
quick-add-modal .quantity,
quick-add-modal .quantity__input,
quick-add-modal .quantity__button {
  color: #ffffff !important;
}
.product__info-container .quantity__button svg,
.product__info-container .quantity__button svg path,
quick-add-modal .quantity__button svg,
quick-add-modal .quantity__button svg path {
  fill: currentColor !important;
}
/* ---- Round 6 (2026-05-11): quick-view modal buttons (extreme specificity, JS-independent) ----
   The modal injects PDP innerHTML into [id^="QuickAddInfo-"] and copies the
   source section's color-scheme class. Add-to-cart, qty, and any submit
   button inside must read regardless of which scheme is active. ---- */

quick-add-modal [id^="QuickAddInfo-"] .product-form__submit.button--primary,
quick-add-modal[open] [id^="QuickAddInfo-"] .product-form__submit.button--primary,
body quick-add-modal .product-form__submit.button--primary {
  color: #0a0a0a !important;
  background: #ffffff !important;
  border: 1px solid #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
}
quick-add-modal [id^="QuickAddInfo-"] .product-form__submit.button--primary > span,
quick-add-modal [id^="QuickAddInfo-"] .product-form__submit.button--primary span,
quick-add-modal[open] [id^="QuickAddInfo-"] .product-form__submit.button--primary span {
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
  visibility: visible !important;
  opacity: 1 !important;
}
quick-add-modal [id^="QuickAddInfo-"] .product-form__submit.button--primary:hover,
quick-add-modal [id^="QuickAddInfo-"] .product-form__submit.button--primary:focus-visible {
  background: #0a0a0a !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
quick-add-modal [id^="QuickAddInfo-"] .product-form__submit.button--primary:hover span,
quick-add-modal [id^="QuickAddInfo-"] .product-form__submit.button--primary:focus-visible span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Qty widget in modal */
quick-add-modal [id^="QuickAddInfo-"] .quantity__button,
quick-add-modal [id^="QuickAddInfo-"] .quantity__input,
quick-add-modal [id^="QuickAddInfo-"] quantity-input,
quick-add-modal [id^="QuickAddInfo-"] quantity-input * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  visibility: visible !important;
  opacity: 1 !important;
}
quick-add-modal [id^="QuickAddInfo-"] .quantity__button svg,
quick-add-modal [id^="QuickAddInfo-"] .quantity__button svg *,
quick-add-modal [id^="QuickAddInfo-"] .quantity__button svg path {
  fill: currentColor !important;
  color: #ffffff !important;
}
/* ---- Round 7 (2026-05-11): quick-view modal ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â direct class chain + svg fill ---- */

/* Add to cart */
.quick-add-modal__content-info .product-form__submit.button--primary,
.quick-add-modal__content .product-form__submit.button--primary,
.quick-add-modal__content button.product-form__submit,
.quick-add-modal__content button.button.button--primary,
.quick-add-modal__content .product-form__buttons button {
  background-color: #ffffff !important;
  color: #0a0a0a !important;
  border: 1px solid #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
}
.quick-add-modal__content-info .product-form__submit *,
.quick-add-modal__content .product-form__submit *,
.quick-add-modal__content .product-form__submit > span,
.quick-add-modal__content button.button--primary span {
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hover state */
.quick-add-modal__content .product-form__submit.button--primary:hover,
.quick-add-modal__content .product-form__submit.button--primary:focus-visible {
  background-color: #0a0a0a !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.quick-add-modal__content .product-form__submit.button--primary:hover *,
.quick-add-modal__content .product-form__submit.button--primary:focus-visible * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Quantity widget ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â transparent bg, white text + SVG */
.quick-add-modal__content quantity-input,
.quick-add-modal__content .quantity,
.quick-add-modal__content .quantity__input,
.quick-add-modal__content .quantity__button {
  background-color: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.quick-add-modal__content .quantity__button svg,
.quick-add-modal__content .quantity__button svg *,
.quick-add-modal__content .quantity__button svg path {
  fill: #ffffff !important;
  stroke: transparent !important;
  color: #ffffff !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* ---- Round 8 (2026-05-11): nuclear quick-view buttons - reset hidden-text tricks ---- */

/* Add to cart ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â reset text hide tricks AND force visible bg/color */
quick-add-modal .product-form__submit,
quick-add-modal button.product-form__submit,
quick-add-modal .product-form__buttons > button,
quick-add-modal [class*="product-form__submit"]:not(.hidden),
quick-add-modal button.button.button--primary {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
  border: 1px solid #0a0a0a !important;
  font-size: 14px !important;
  text-indent: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  min-height: 50px !important;
}

quick-add-modal .product-form__submit > span,
quick-add-modal .product-form__submit span:not(.visually-hidden):not(.loading__spinner):not(.loading__spinner *),
quick-add-modal button.button--primary > span,
quick-add-modal button.button--primary span:not(.visually-hidden):not(.loading__spinner):not(.loading__spinner *) {
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
  visibility: visible !important;
  display: inline !important;
  opacity: 1 !important;
  font-size: inherit !important;
  text-indent: 0 !important;
  text-shadow: none !important;
}

/* loading spinner stays hidden */
quick-add-modal .loading__spinner.hidden,
quick-add-modal .product-form__submit .loading__spinner {
  display: none !important;
}

/* Qty widget */
quick-add-modal quantity-input,
quick-add-modal .quantity,
quick-add-modal .quantity > * {
  background-color: transparent !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
quick-add-modal .quantity__input,
quick-add-modal .quantity__button {
  background-color: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 14px !important;
  text-indent: 0 !important;
  opacity: 1 !important;
  filter: none !important;
}
quick-add-modal .quantity__button svg,
quick-add-modal .quantity__button svg * {
  fill: #ffffff !important;
  stroke: transparent !important;
  color: #ffffff !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 1rem !important;
  height: 1rem !important;
  display: inline-block !important;
}
/* ---- Round 9 (2026-05-11): defeat Dawn's color: Window on aria-disabled ----
   section-main-product.css ships:
     .product-form__submit[aria-disabled='true'] { color: Window; }
   "Window" is the OS window-color keyword, usually rendering near-white. On a
   white button this hides the label. Force explicit color regardless of
   aria/disabled state. ---- */

quick-add-modal .product-form__submit,
quick-add-modal .product-form__submit[aria-disabled='true'],
quick-add-modal .product-form__submit[aria-disabled='false'],
quick-add-modal .product-form__submit[disabled],
quick-add-modal .product-form__submit:disabled,
.quick-add-modal__content .product-form__submit,
.quick-add-modal__content .product-form__submit[aria-disabled='true'],
.quick-add-modal__content .product-form__submit[disabled],
.product__info-container .product-form__submit[aria-disabled='true'],
.product__info-container .product-form__submit[disabled] {
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
}

quick-add-modal .product-form__submit[aria-disabled='true'] > span,
quick-add-modal .product-form__submit[disabled] > span,
.quick-add-modal__content .product-form__submit[aria-disabled='true'] > span,
.quick-add-modal__content .product-form__submit[disabled] > span,
quick-add-modal .product-form__submit[aria-disabled='true'] span,
quick-add-modal .product-form__submit[disabled] span {
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
}

/* Same defensive logic for qty buttons */
quick-add-modal .quantity__button[disabled],
quick-add-modal .quantity__button.disabled,
.quick-add-modal__content .quantity__button[disabled],
.quick-add-modal__content .quantity__button.disabled {
  color: #ffffff !important;
  opacity: 1 !important;
}
quick-add-modal .quantity__button[disabled] svg,
quick-add-modal .quantity__button.disabled svg {
  fill: #ffffff !important;
  opacity: 1 !important;
}
/* ---- Round 10 (2026-05-11): qty widget unified transparent in modal ----
   Issue after Round 8: minus/plus buttons rendered white-bg (probably Dawn
   default scheme button color leaking into .quantity__button) while the
   middle input stays dark. White SVG on white bg = invisible squares.
   Fix: force whole qty widget bg transparent, all children inherit white. ---- */

quick-add-modal quantity-input,
quick-add-modal .quantity,
quick-add-modal .quantity__input,
quick-add-modal .quantity__button,
quick-add-modal .quantity__button.no-js-hidden,
.quick-add-modal__content quantity-input,
.quick-add-modal__content .quantity,
.quick-add-modal__content .quantity__input,
.quick-add-modal__content .quantity__button {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Ensure the widget has a visible thin border to look like a real qty stepper */
quick-add-modal .quantity,
.quick-add-modal__content .quantity {
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
}

quick-add-modal .quantity__button svg,
quick-add-modal .quantity__button svg path,
quick-add-modal .quantity__button svg *,
.quick-add-modal__content .quantity__button svg,
.quick-add-modal__content .quantity__button svg path,
.quick-add-modal__content .quantity__button svg * {
  fill: #ffffff !important;
  stroke: transparent !important;
  color: #ffffff !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* ---- Round 11 (2026-05-11): cart-drawer qty buttons + trash icon ----
   Same root cause as quick-view: Dawn defaults / inline rules leave qty
   buttons + remove icon either invisible or white-on-white in cart drawer.
   Apply identical transparent-widget + white-svg strategy, scoped to
   <cart-drawer>. ---- */

cart-drawer quantity-input,
cart-drawer .quantity,
cart-drawer .quantity__input,
cart-drawer .quantity__button,
cart-drawer .cart-item__quantity-wrapper quantity-input,
cart-drawer .cart-item__quantity-wrapper .quantity {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

cart-drawer .quantity {
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
}

cart-drawer .quantity__button svg,
cart-drawer .quantity__button svg path,
cart-drawer .quantity__button svg * {
  fill: #ffffff !important;
  stroke: transparent !important;
  color: #ffffff !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 1rem !important;
  height: 1rem !important;
}

/* Trash / remove icon */
cart-drawer cart-remove-button,
cart-drawer cart-remove-button .button,
cart-drawer cart-remove-button a,
cart-drawer .cart-remove-button,
cart-drawer cart-items cart-remove-button {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
}

cart-drawer cart-remove-button svg,
cart-drawer cart-remove-button svg path,
cart-drawer cart-remove-button svg *,
cart-drawer .cart-remove-button svg,
cart-drawer .cart-remove-button svg path,
cart-drawer .cart-remove-button svg * {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Defensive: aria-disabled in cart context too */
cart-drawer .product-form__submit[aria-disabled='true'],
cart-drawer .product-form__submit[disabled],
cart-drawer .quantity__button[disabled],
cart-drawer .quantity__button.disabled {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* ============================================
   QUICK-VIEW: Judge.me stars on dark background
   (added 2026-05-11 ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â stars + "X reviews" hidden
   on dark sections inside <quick-add-modal>)
   ============================================ */
quick-add-modal .jdgm-prev-badge {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
quick-add-modal .jdgm-prev-badge__stars,
quick-add-modal .jdgm-prev-badge__stars *,
quick-add-modal .jdgm-star,
quick-add-modal .jdgm--on,
quick-add-modal .jdgm--half {
  color: #C9A961 !important;
  -webkit-text-fill-color: #C9A961 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
quick-add-modal .jdgm--off {
  color: rgba(255, 255, 255, 0.35) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.35) !important;
}
/* Review count text ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â WHITE to match PDP. Covers classic .jdgm-prev-badge__text,
   new builds where it's a text-node directly inside .jdgm-prev-badge, links,
   pseudo-elements, and any wrapper that isn't a star. */
quick-add-modal .jdgm-prev-badge,
quick-add-modal .jdgm-prev-badge::before,
quick-add-modal .jdgm-prev-badge::after,
quick-add-modal .jdgm-prev-badge__text,
quick-add-modal .jm-prev-badge__text,
quick-add-modal .jdgm-prev-badge a,
quick-add-modal .jdgm-prev-badge a *,
quick-add-modal .jdgm-prev-badge *:not(.jdgm-prev-badge__stars):not(.jdgm-star):not(.jdgm--on):not(.jdgm--off):not(.jdgm--half) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* ============================================
   Judge.me review widget ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â scroll anchor offset
   (added 2026-05-14 ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â fixes star-badge click
   under product title scrolling to slightly
   above review widget on mobile, because
   sticky header overlaps the anchor target)
   ============================================ */
.jdgm-rev-widg,
.jdgm-review-widget,
#judgeme_product_reviews,
.jdgm-widget[data-widget-name="review_widget"],
[data-from-snippet="review_widget"] {
  scroll-margin-top: 80px;
}

/* ============================================
   Judge.me preview_badge in product cards ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â centered
   (added 2026-05-14 ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â stars + "N reviews" under
   product title in collection cards align centered
   instead of left-default)
   ============================================ */
.card-wrapper .jdgm-widget.jdgm-preview-badge,
.product-card-wrapper .jdgm-widget.jdgm-preview-badge,
.card__information .jdgm-widget.jdgm-preview-badge {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  margin: 0.25rem 0 !important;
}
.card-wrapper .jdgm-widget.jdgm-preview-badge .jdgm-prev-badge,
.product-card-wrapper .jdgm-widget.jdgm-preview-badge .jdgm-prev-badge {
  display: inline-block !important;
  text-align: center !important;
}

/* ============================================
   Judge.me preview_badge in cards ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â smaller "N reviews" text
   (added 2026-05-14 ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â review-count text under stars in
   product cards reduced to ~13px for compact look)
   ============================================ */
.card-wrapper .jdgm-widget.jdgm-preview-badge .jdgm-prev-badge__text,
.product-card-wrapper .jdgm-widget.jdgm-preview-badge .jdgm-prev-badge__text,
.card__information .jdgm-widget.jdgm-preview-badge .jdgm-prev-badge__text,
.card-wrapper .jdgm-widget.jdgm-preview-badge .jdgm-prev-badge a {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* ============================================
   Judge.me preview_badge in cards ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â smaller stars
   (added 2026-05-14 ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â stars under product title in
   collection cards trimmed to 14px for tighter look)
   ============================================ */
.card-wrapper .jdgm-widget.jdgm-preview-badge .jdgm-prev-badge__stars,
.card-wrapper .jdgm-widget.jdgm-preview-badge .jdgm-star,
.product-card-wrapper .jdgm-widget.jdgm-preview-badge .jdgm-prev-badge__stars,
.product-card-wrapper .jdgm-widget.jdgm-preview-badge .jdgm-star,
.card__information .jdgm-widget.jdgm-preview-badge .jdgm-star {
  font-size: 14px !important;
}

/* ============================================
   Judge.me preview_badge in cards ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â mobile overrides
   (added 2026-05-14 ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â on phones (< 750px) stars and
   review-count text shrink one extra step: stars 12px,
   text 11px. Tanya: ÃƒÂÃ‚Â½ÃƒÂÃ‚Â° ÃƒÂÃ‚Â´ÃƒÂÃ‚ÂµÃƒâ€˜Ã‚ÂÃƒÂÃ‚ÂºÃƒâ€˜Ã¢â‚¬Å¡ÃƒÂÃ‚Â¾ÃƒÂÃ‚Â¿ÃƒÂÃ‚Âµ 14/13px ÃƒÂÃ…Â¾ÃƒÂÃ…Â¡, ÃƒÂÃ‚Â½ÃƒÂÃ‚Â° ÃƒÂÃ‚Â¼ÃƒÂÃ‚Â¾ÃƒÂÃ‚Â±
   ÃƒÂÃ‚ÂºÃƒâ€˜Ã¢â€šÂ¬Ãƒâ€˜Ã†â€™ÃƒÂÃ‚Â¿ÃƒÂÃ‚Â½ÃƒÂÃ‚Â¾ÃƒÂÃ‚Â²ÃƒÂÃ‚Â°Ãƒâ€˜Ã¢â‚¬Å¡ÃƒÂÃ‚Â¾)
   ============================================ */
@media (max-width: 749px) {
  .card-wrapper .jdgm-widget.jdgm-preview-badge .jdgm-prev-badge__stars,
  .card-wrapper .jdgm-widget.jdgm-preview-badge .jdgm-star,
  .product-card-wrapper .jdgm-widget.jdgm-preview-badge .jdgm-prev-badge__stars,
  .product-card-wrapper .jdgm-widget.jdgm-preview-badge .jdgm-star,
  .card__information .jdgm-widget.jdgm-preview-badge .jdgm-star {
    font-size: 12px !important;
  }
  .card-wrapper .jdgm-widget.jdgm-preview-badge .jdgm-prev-badge__text,
  .product-card-wrapper .jdgm-widget.jdgm-preview-badge .jdgm-prev-badge__text,
  .card__information .jdgm-widget.jdgm-preview-badge .jdgm-prev-badge__text,
  .card-wrapper .jdgm-widget.jdgm-preview-badge .jdgm-prev-badge a,
  .product-card-wrapper .jdgm-widget.jdgm-preview-badge .jdgm-prev-badge a {
    font-size: 11px !important;
  }
}


/* ============================================
   SEARCH MODAL: light text on dark palette
   (added 2026-05-15 ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â input text + label + 
   predictive-search results were unreadable
   inside <details-modal class="header__search">)
   ============================================ */

/* Input field ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â typed text + cursor */
.search-modal .search__input,
.search-modal .field__input {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
}

/* Floating label / placeholder "Search" */
.search-modal .field__label,
.search-modal .search__input::placeholder,
.search-modal .field__input::placeholder {
  color: rgba(255, 255, 255, 0.65) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.65) !important;
}

/* Predictive search results ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â product titles, links, headings, status */
.search-modal .predictive-search__item,
.search-modal .predictive-search__item *,
.search-modal .predictive-search__list-item,
.search-modal .predictive-search__list-item *,
.search-modal .predictive-search__heading,
.search-modal .predictive-search-status,
.search-modal .predictive-search h2,
.search-modal .predictive-search h3,
.search-modal .predictive-search p,
.search-modal .predictive-search a,
.search-modal .predictive-search a * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Restore brand gold for prices inside results */
.search-modal .predictive-search .price,
.search-modal .predictive-search .price *,
.search-modal .predictive-search .price-item {
  color: #C9A961 !important;
  -webkit-text-fill-color: #C9A961 !important;
}

/* ============================================
   SEARCH PAGE (template-search): match dark
   palette. White background of Dawn input was
   making typed text white-on-white. Transparent
   bg + thin border + white text fixes it.
   (added 2026-05-15)
   ============================================ */

/* Input wrapper + input ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â transparent background, light border */
.template-search .field {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 4px !important;
}
.template-search .field__input,
.template-search .search__input {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
}

/* Floating label / placeholder */
.template-search .field__label,
.template-search .search__input::placeholder,
.template-search .field__input::placeholder {
  color: rgba(255, 255, 255, 0.65) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.65) !important;
}

/* Reset/search buttons inside the field ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â keep icons visible */
.template-search .field__button,
.template-search .field__button svg,
.template-search .field__button svg path {
  color: #ffffff !important;
  fill: currentColor !important;
  opacity: 1 !important;
}

/* Predictive suggestions appearing under the page input */
.template-search .predictive-search__item,
.template-search .predictive-search__item *,
.template-search .predictive-search__list-item,
.template-search .predictive-search__list-item *,
.template-search .predictive-search__heading,
.template-search .predictive-search h2,
.template-search .predictive-search h3,
.template-search .predictive-search p,
.template-search .predictive-search a,
.template-search .predictive-search a * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.template-search .predictive-search .price,
.template-search .predictive-search .price *,
.template-search .predictive-search .price-item {
  color: #C9A961 !important;
  -webkit-text-fill-color: #C9A961 !important;
}

/* ============================================
   SEARCH RESULTS: hide llms.txt / llms-full.txt
   pages from customer-facing search. They are
   AI-discoverability pages (llmstxt.org standard)
   and remain accessible via /llms.txt redirect
   for AI agents ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â but no point showing empty
   technical placeholders to luxury shoppers.
   (added 2026-05-15)
   ============================================ */
.template-search li.grid__item:has(a[href*="/pages/llms"]),
.template-search .grid__item:has(a[href*="/pages/llms"]),
.template-search .article-card-wrapper:has(a[href*="/pages/llms"]) {
  display: none !important;
}

/* ============================================
   SEARCH PAGE predictive dropdown ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â dark bg so
   the white text added earlier becomes readable.
   (added 2026-05-15)
   ============================================ */
.template-search .predictive-search,
.template-search .predictive-search--search-template {
  background: #0a0a0a !important;
  background-color: #0a0a0a !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.template-search .predictive-search__heading,
.template-search .predictive-search h2,
.template-search .predictive-search h3 {
  color: rgba(255, 255, 255, 0.55) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.55) !important;
}
.template-search .predictive-search__list-item:hover,
.template-search .predictive-search__list-item[aria-selected="true"] {
  background-color: rgba(201, 169, 97, 0.12) !important;
}

/* CAVIAR SETS ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â gap above heading (from Anna sommelier) and below heading (to cards) */
[id*="__featured-signature"] .collection__title {
  margin-top: 34px !important;
  margin-bottom: 24px !important;
  padding-bottom: 0 !important;
}
[id*="__featured-signature"] .collection__title h1,
[id*="__featured-signature"] .collection__title h2,
[id*="__featured-signature"] .collection__title .title {
  margin-bottom: 0 !important;
}
@media (max-width: 749px) {
  [id*="__featured-signature"] .collection__title {
    margin-top: 20px !important;
    margin-bottom: 16px !important;
  }
}

/* Recipe carousel nav (arrows + dots) ÃƒÂ¢Ã¢â€šÂ¬Ã¢â‚¬Â mobile sizing
   Returned visible on mobile (was display:none); shrunk arrows and tightened gap. */
@media (max-width: 749px) {
  .beleaev-recipes__carousel {
    gap: 11px !important;
  }
  .beleaev-recipes__nav {
    gap: 10px;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .beleaev-recipes__track {
    padding-bottom: 0 !important;
  }
  .beleaev-recipes__arrow {
    width: 26px;
    height: 26px;
  }
  .beleaev-recipes__arrow svg {
    width: 11px;
    height: 11px;
  }
  .beleaev-recipes__dot {
    width: 6px;
    height: 6px;
  }
}

/* Mobile-only tighter gaps on Caviar entry page
   Applies to all entry templates (selectors are template-suffix-aware where possible) */
/* Mobile: halve the gap between slider nav (1/2 + arrows) and product cards
   inside featured-mini and featured-signature on Caviar entry. */
@media (max-width: 749px) {
  [id*="__featured-mini"] .slider-buttons,
  [id*="__featured-signature"] .slider-buttons {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  [id*="__featured-mini"] .slider-counter,
  [id*="__featured-signature"] .slider-counter {
    margin: 0 !important;
    padding: 0 !important;
  }
  [id*="__featured-mini"] slider-component,
  [id*="__featured-signature"] slider-component {
    margin-top: 4px !important;
  }
  [id*="__featured-mini"] .collection-list-wrapper,
  [id*="__featured-signature"] .collection-list-wrapper,
  [id*="__featured-mini"] .collection,
  [id*="__featured-signature"] .collection {
    padding-top: 0 !important;
  }
}

/* Mobile: shrink pagination (1 2 3 >) at the bottom of product-grid pages */
@media (max-width: 749px) {
  .pagination__list {
    gap: 4px !important;
  }
  .pagination__item {
    font-size: 13px !important;
    padding: 6px 8px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    line-height: 1 !important;
  }
  .pagination__item--current {
    font-size: 13px !important;
  }
  .pagination__item svg,
  .pagination__item .icon {
    width: 9px !important;
    height: 9px !important;
  }
}

/* Mobile: hide the intro-text section above the product grid on all entry pages
   (Caviar/Oscietra/Beluga/Special Reserve/Signature/Mini Sets). Desktop keeps it. */
@media (max-width: 749px) {
  [id$="__intro-text"] {
    display: none !important;
  }
}

/* Mobile: kill the empty title-wrapper above Mini Sets (heading is just a space)
   and collapse vertical breathing between Caviar Sets bottom (slider nav) and Mini Sets top. */
@media (max-width: 749px) {
  [id*="__featured-mini"] .title-wrapper {
    display: none !important;
  }
  [id*="__featured-signature"] .slider-component,
  [id*="__featured-signature"] .slider-buttons {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  [id*="__featured-signature"] .collection,
  [id*="__featured-mini"] .collection {
    padding-top: 0 !important;
    padding-bottom: 4px !important;
  }
}
/* ============================================================
   BELEAEV - PageFly zombie wrapper hide (2026-05-25)
   PBarNextFrameWrapper is injected by PageFly app on every page,
   even though PageFly is not used (0 pages/products/collections).
   Causes visual layout jump on F5 reload. Display:none removes the
   wrapper from layout flow entirely.
   Rollback: restore from C:\Users\samsg\Desktop\CLAUDE\Header-jump-CLS-fix-25.05\_BACKUP\beleaev-custom.css.LIVE_20260525_1914.bak
   ============================================================ */
#PBarNextFrameWrapper {
  display: none !important;
}

/* === BELEAEV-QUICK-ADD-FIX-V4-2026-05-29 START ===
   Quick-add modal contrast fix v4 Ã¢â‚¬â€ targeting ACTUAL rendered classes.

   Discovered via real custom_liquid blocks in templates:
   1. mini-sets (product.json): description rendered as
      <div class="beleaev-hook"><p>...</p></div>
      inline color: #e4e4e4 (grey-ish)
   2. truffles (product.pdp-clean.json): description rendered as
      <p class="beleaev-short-preview">...</p>
      inline color: #eaeaea (light grey)
   3. mini-sets price: Dawn <div class="price"><span class="price-item--regular">Ã‚Â£XX.XX</span></div>
   4. truffles price: <span class="beleaev-price-bottom__value">Ã‚Â£XX.XX</span>
   5. variant pills (both Dawn templates): <fieldset class="js product-form__input product-form__input--pill">
      with <input type="radio"> + <label>

   Higher specificity via DOUBLE class selectors + `body` prefix to beat
   .global-settings-popup defaults inside modal.

   SAFE for caviar.json Ã¢â‚¬â€ those use .variant-input/.variant-label
   (NOT --pill, NOT .beleaev-hook in modal context).

   Unique marker: grep `BELEAEV-QUICK-ADD-FIX-V4-2026-05-29`
   ============================================================ */

/* Description text Ã¢â‚¬â€ mini-sets (.beleaev-hook) and truffles (.beleaev-short-preview) */
body quick-add-modal .quick-add-modal__content .beleaev-hook,
body quick-add-modal .quick-add-modal__content .beleaev-hook p,
body quick-add-modal .quick-add-modal__content .beleaev-short-wrap,
body quick-add-modal .quick-add-modal__content .beleaev-short-wrap p,
body quick-add-modal .quick-add-modal__content .beleaev-short-preview {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Price Ã¢â‚¬â€ Dawn (.price-item--regular/--last) AND Beleaev custom (.beleaev-price-bottom__value) */
body quick-add-modal .quick-add-modal__content .price .price-item--regular,
body quick-add-modal .quick-add-modal__content .price .price-item--last,
body quick-add-modal .quick-add-modal__content .price__container .price-item--regular,
body quick-add-modal .quick-add-modal__content .price__container .price-item--last,
body quick-add-modal .quick-add-modal__content .price__regular .price-item,
body quick-add-modal .quick-add-modal__content .beleaev-price-bottom,
body quick-add-modal .quick-add-modal__content .beleaev-price-bottom__value {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* "Select Size:" legend */
body quick-add-modal .quick-add-modal__content fieldset.product-form__input > legend,
body quick-add-modal .quick-add-modal__content fieldset.product-form__input > legend.form__label,
body quick-add-modal .quick-add-modal__content fieldset.product-form__input.product-form__input--pill > legend,
body quick-add-modal .quick-add-modal__content fieldset.product-form__input.product-form__input--pill > legend.form__label {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Variant pills Ã¢â‚¬â€ Dawn HTML pattern (NOT caviar custom table) */
body quick-add-modal .quick-add-modal__content fieldset.product-form__input.product-form__input--pill input[type="radio"] + label {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
body quick-add-modal .quick-add-modal__content fieldset.product-form__input.product-form__input--pill input[type="radio"]:checked + label {
  background: rgba(201, 169, 97, 0.15) !important;
  border-color: #C9A961 !important;
  color: #ffffff !important;
}
body quick-add-modal .quick-add-modal__content fieldset.product-form__input.product-form__input--pill input[type="radio"] + label .price-item,
body quick-add-modal .quick-add-modal__content fieldset.product-form__input.product-form__input--pill input[type="radio"] + label strong,
body quick-add-modal .quick-add-modal__content fieldset.product-form__input.product-form__input--pill input[type="radio"] + label b {
  color: #ffffff !important;
}

/* Shipping note / tax note */
body quick-add-modal .quick-add-modal__content .tax-note,
body quick-add-modal .quick-add-modal__content .shipping-policy {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Read more link Ã¢â‚¬â€ keep gold (mini-set uses .beleaev-hook-readmore, truffle uses .beleaev-read-more) */
body quick-add-modal .quick-add-modal__content .beleaev-hook-readmore,
body quick-add-modal .quick-add-modal__content .beleaev-read-more {
  color: #ffffff !important;
}
body quick-add-modal .quick-add-modal__content .beleaev-hook-readmore:hover,
body quick-add-modal .quick-add-modal__content .beleaev-read-more:hover {
  color: #C9A961 !important;
}
/* === BELEAEV-QUICK-ADD-FIX-V4-2026-05-29 END === */




/* === BELEAEV-FORCE-QUICK-ADD-OOS-2026-05-29 START ===
   Force quick-add bag icon visible on sold-out cards too.
   Dawn card-product.liquid renders <div class="quick-add"> for ALL
   products (line 636: `if show_quick_add` Ã¢â‚¬â€ no availability gate),
   but something visually hides it for OOS products (theme JS or
   layout shift after sold_out badge).

   Force visible via CSS Ã¢â‚¬â€ works because DOM element exists.
   beleaev-custom.js `inlineBagWithPrice` wraps price+quick-add into
   .beleaev-price-row; if quick-add was display:none it stayed in DOM,
   just hidden Ã¢â‚¬â€ this rule re-shows it.

   Unique marker for safe removal: grep `BELEAEV-FORCE-QUICK-ADD-OOS-2026-05-29`
   ============================================================ */
.card-wrapper .quick-add,
.card-wrapper .quick-add.no-js-hidden,
.product-card-wrapper .quick-add,
.grid__item .quick-add,
.beleaev-price-row .quick-add {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.card-wrapper .quick-add .quick-add__submit,
.product-card-wrapper .quick-add .quick-add__submit,
.grid__item .quick-add .quick-add__submit,
.beleaev-price-row .quick-add .quick-add__submit {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* If quick-add modal opener (multi-variant cards) is wrapped in <modal-opener> */
.card-wrapper .quick-add modal-opener,
.product-card-wrapper .quick-add modal-opener,
.beleaev-price-row .quick-add modal-opener {
  display: inline-flex !important;
}
/* === BELEAEV-FORCE-QUICK-ADD-OOS-2026-05-29 END === */


/* === BELEAEV-QUICK-ADD-FIX-V5-2026-05-29 START ===
   Quick-add modal contrast Ã¢â‚¬â€ v5 supplement on top of v4.
   Discovered after v4 deploy:
   - .product-specs (custom_liquid_eVdaeH) renders Species/Grains/
     Color/Origin with inline `color: #eaeaea` Ã¢â‚¬â€ VALUES are grey,
     only <strong> labels are white. Need force ALL white in modal.
   - Mini-sets price rendered via Dawn .price block with class
     `.price__container .price-item--regular` or `.price__regular
     .price-item--regular`. Inline custom_liquid_L7mDYR sets
     font-size 30px but not color Ã¢â‚¬â€ Dawn default color (rgba grey
     inside .global-settings-popup) wins.

   Unique marker: BELEAEV-QUICK-ADD-FIX-V5-2026-05-29
   ============================================================ */

/* Specs values (Species/Grains/Color of roe/Origin) Ã¢â‚¬â€ force white */
body quick-add-modal .quick-add-modal__content .product-specs,
body quick-add-modal .quick-add-modal__content .product-specs p,
body quick-add-modal .quick-add-modal__content .product-specs strong,
body quick-add-modal .quick-add-modal__content .product-specs span {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Dawn .price block Ã¢â‚¬â€ multiple class chains for any nesting */
body quick-add-modal .quick-add-modal__content .price,
body quick-add-modal .quick-add-modal__content .price *,
body quick-add-modal .quick-add-modal__content .price__regular,
body quick-add-modal .quick-add-modal__content .price__regular .price-item,
body quick-add-modal .quick-add-modal__content .price__regular .price-item--regular,
body quick-add-modal .quick-add-modal__content .price__regular .price-item--last,
body quick-add-modal .quick-add-modal__content .price__sale .price-item,
body quick-add-modal .quick-add-modal__content .price__sale .price-item--regular,
body quick-add-modal .quick-add-modal__content .price__sale .price-item--last,
body quick-add-modal .quick-add-modal__content .price__container .price-item,
body quick-add-modal .quick-add-modal__content .price__container .price-item--regular,
body quick-add-modal .quick-add-modal__content .price__container .price-item--last,
body quick-add-modal .quick-add-modal__content .price--large,
body quick-add-modal .quick-add-modal__content .price--large .price-item,
body quick-add-modal .quick-add-modal__content .price--large .price-item--regular,
body quick-add-modal .quick-add-modal__content .price--large .price-item--last {
  color: #ffffff !important;
  opacity: 1 !important;
}
/* Exclude price text inside variant pill labels Ã¢â‚¬â€ those handled by v4 (already white) */

/* === BELEAEV-QUICK-ADD-FIX-V5-2026-05-29 END === */


/* === BELEAEV-HIDE-PER-SERVING-2026-05-29 START ===
   Hide per-serving widget globally.
   Was previously hidden only on caviar PDP (via #ProductInfo scoped
   rule in custom_liquid_beleaev_total) and on mini-set PDP (via
   custom_liquid_L7mDYR). NOT hidden on:
   - quick-add modal (different section ID, scoped rules don't match)
   - pdp-clean PDP and modal (no hide rule at all)
   This global rule hides it everywhere Ã¢â‚¬â€ Tatyana confirmed removed.
   Unique marker for safe removal: BELEAEV-HIDE-PER-SERVING-2026-05-29
   ============================================================ */
.beleaev-per-serving,
[class*="per-serving"],
[class*="PER-SERVING"],
[class*="PerServing"] {
  display: none !important;
}
/* === BELEAEV-HIDE-PER-SERVING-2026-05-29 END === */

/* === BELEAEV TEXT-CTA UNIFY (safe, scoped) Ã¢â‚¬â€ 02.06.2026 === */
.rich-text__buttons .button,
.beleaev-split__cta,
a.gfa-content__button {
  background-color: transparent !important;
  border: 1px solid #C9A961 !important;
  color: #f5f1e9 !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-weight: 600 !important;
}
.rich-text__buttons .button:hover,
.beleaev-split__cta:hover,
a.gfa-content__button:hover {
  background-color: #C9A961 !important;
  color: #0a0a0a !important;
}
/* === END TEXT-CTA UNIFY === */
/* === View all (bento) Ã¢â‚¬â€ Ã‘â‚¬ÃÂ°ÃÂ¼ÃÂºÃÂ° ÃÂ² ÃÂ·ÃÂ¾ÃÂ»ÃÂ¾Ã‘â€šÃÂ¾ + uppercase, ÃÂ²Ã‘â€¹Ã‘ÂÃÂ¾ÃÂºÃÂ°Ã‘Â Ã‘ÂÃÂ¿ÃÂµÃ‘â€ ÃÂ¸Ã‘â€žÃÂ¸Ã‘â€¡ÃÂ½ÃÂ¾Ã‘ÂÃ‘â€šÃ‘Å’ === */
.beleaev-bento__viewall a.button.button--secondary,
.beleaev-bento__viewall a.button.button--secondary:link {
  border: 1px solid #C9A961 !important;
  color: #f5f1e9 !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-weight: 600 !important;
  padding: 13px 30px !important;
  font-size: 14px !important;
}
.beleaev-bento__viewall a.button.button--secondary:hover {
  background-color: #C9A961 !important; color: #0a0a0a !important;
}
/* === END === */
/* === View all ÃÂ¿ÃÂ¾ÃÂ´ ÃÂ¸ÃÂºÃ‘â‚¬ÃÂ¾ÃÂ¹ (home Ã‚Â«MOST SAVOUREDÃ‚Â» featured collection) Ã¢â€ â€™ ÃÂºÃÂ°ÃÂº ÃÂ¿ÃÂ¾ÃÂ´ ÃÂ³Ã‘Æ’Ã‘â‚¬ÃÂ¼ÃÂµ Ã¢â‚¬â€ 02.06.2026 === */
[id*="__featured_collection_TL6Apb"] .collection__view-all a.link,
[id*="__featured_collection_TL6Apb"] .collection__view-all a.link:link {
  display: inline-block !important;
  background-color: transparent !important;
  border: 1px solid #C9A961 !important;
  color: #f5f1e9 !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-weight: 600 !important;
  font-family: var(--font-body-family) !important;
  padding: 13px 30px !important;
  font-size: 14px !important;
}
[id*="__featured_collection_TL6Apb"] .collection__view-all a.link:hover {
  background-color: #C9A961 !important;
  color: #0a0a0a !important;
}
/* === END caviar view-all === */
/* === BELEAEV TEXT-CTA Ã¢â‚¬â€ ÃÂºÃÂ¾ÃÂ¼ÃÂ¿ÃÂ°ÃÂºÃ‘â€šÃÂ½ÃÂµÃÂµ ÃÂ² ÃÅ“ÃÅ¾Ãâ€˜ (Ã‘â€šÃÂ¾ÃÂ»Ã‘Å’ÃÂºÃÂ¾ Ã‘â€šÃÂµÃÂºÃ‘ÂÃ‘â€šÃÂ¾ÃÂ²Ã‘â€¹ÃÂµ CTA, ÃÂºÃÂ¾Ã‘â‚¬ÃÂ·ÃÂ¸ÃÂ½ÃÂºÃÂ¸/ATC/sticky ÃÂÃâ€¢ ÃÂ²Ã‘â€¦ÃÂ¾ÃÂ´Ã‘ÂÃ‘â€š) Ã¢â‚¬â€ 02.06.2026 === */
@media (max-width: 749px) {
  .rich-text__buttons .button,
  .beleaev-split__cta,
  a.gfa-content__button,
  .beleaev-bento__viewall a.button.button--secondary,
  .beleaev-bento__viewall a.button.button--secondary:link,
  [id*="__featured_collection_TL6Apb"] .collection__view-all a.link,
  [id*="__featured_collection_TL6Apb"] .collection__view-all a.link:link {
    font-size: 12px !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    padding: 9px 20px !important;
    min-height: 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }
}
/* === END mob text-cta size === */
/* === Ã‚Â«4 FACETSÃ‚Â» heading Ã¢â‚¬â€ Ã‘â€ ÃÂ¸Ã‘â€žÃ‘â‚¬ÃÂ° 4: lining-figures + ÃÂ»Ã‘â€˜ÃÂ³ÃÂºÃÂ¸ÃÂ¹ ÃÂ°ÃÂºÃ‘â€ ÃÂµÃÂ½Ã‘â€š, Ã‘â€¡Ã‘â€šÃÂ¾ÃÂ±Ã‘â€¹ Ã‘ÂÃÂµÃÂ»ÃÂ° ÃÂ¿ÃÂ¾ ÃÂ²Ã‘â€¹Ã‘ÂÃÂ¾Ã‘â€šÃÂµ ÃÂ·ÃÂ°ÃÂ³ÃÂ»ÃÂ°ÃÂ²ÃÂ½Ã‘â€¹Ã‘â€¦ Ã¢â‚¬â€ 02.06.2026 === */
.desktop-mobile-text-section strong {
  font-weight: inherit !important;
  font-size: 1.18em !important;
  font-variant-numeric: lining-nums !important;
  font-feature-settings: "lnum" 1 !important;
  line-height: 1 !important;
  vertical-align: baseline !important;
}
/* === Lining-figures in PRODUCT TITLES (Cormorant => old-style nums by default) - 04.06.2026 === */
.card__heading,
.card__heading a,
.card-wrapper .card__heading,
.grid__item .card__heading,
.product-card-wrapper .card__heading,
.product__info-container .product__title,
.product__info-container .product__title h1,
.product__info-container .product__title h2,
.product__info-container .product__title .h1,
.product__info-container .product__title a,
.product__title h1,
.product__title h2,
quick-add-modal .product__title,
quick-add-modal .product__title h1,
quick-add-modal .product__title h2,
.upsell-title,
.upsell-title a,
cart-drawer .upsell-title,
cart-drawer .upsell-title a,
.custom-upsell-container2 .upsell-title,
.custom-upsell-container2 .upsell-title a,
quick-add-modal .upsell-title,
quick-add-modal .upsell-title a,
.beleaev-trust-bar__proof,
.shipping-title,
.product-count__text,
.product-count__text span,
[id*="bst-subheading"],
.followtext,
.followtext span,
.shopify-policy__container,
.shopify-policy__title,
.shopify-policy__body,
.rte h1,
.rte h2,
.rte h3,
.rte h4,
.rte h5,
.rte h6 {
  font-variant-numeric: lining-nums !important;
  font-feature-settings: "lnum" 1 !important;
}
/* === END product-title lining === */
/* === GLOBAL: lining-figures на ВСЕ заголовки (Cormorant by default = old-style цифры) - 11.06.2026 === */
h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5 {
  font-variant-numeric: lining-nums !important;
  font-feature-settings: "lnum" 1 !important;
}
/* === END global heading lining === */
/* === Legal/policy & content-page subheadings — крупнее (h4/h5/h6 читались мелко) - 11.06.2026 === */
.shopify-policy__body h4,
[class*="__main-padding"] .rte h4 {
  font-size: calc(var(--font-heading-scale) * 1.75rem) !important;
  line-height: 1.3 !important;
}
.shopify-policy__body h5,
[class*="__main-padding"] .rte h5 {
  font-size: calc(var(--font-heading-scale) * 1.45rem) !important;
  line-height: 1.3 !important;
}
.shopify-policy__body h6,
[class*="__main-padding"] .rte h6 {
  font-size: calc(var(--font-heading-scale) * 1.25rem) !important;
  line-height: 1.3 !important;
}
/* === END legal subheading size === */
/* === END 4-facets === */
/* === Upsell/cart recommendation title — bigger on DESKTOP only (was 14px, Cormorant reads small) - 04.06.2026 === */
@media (min-width: 750px) {
  cart-drawer .upsell-title,
  cart-drawer .upsell-title a,
  .custom-upsell-container2 .upsell-title,
  .custom-upsell-container2 .upsell-title a,
  quick-add-modal .upsell-title,
  quick-add-modal .upsell-title a {
    font-size: 20px !important;
    line-height: 1.35 !important;
  }
}
/* === END upsell-title desktop size === */
/* === Homepage GOURMET bento card titles -> white (как у икры); scope ТОЛЬКО beleaev_bento_gourmet, beats var(--bb-text) gold - 04.06.2026 === */
[id*="beleaev_bento_gourmet"] .beleaev-bento .product-card-wrapper .card__heading,
[id*="beleaev_bento_gourmet"] .beleaev-bento .product-card-wrapper .card__heading.h5,
[id*="beleaev_bento_gourmet"] .beleaev-bento .product-card-wrapper h3.card__heading,
[id*="beleaev_bento_gourmet"] .beleaev-bento .product-card-wrapper .card__heading a,
[id*="beleaev_bento_gourmet"] .beleaev-bento .product-card-wrapper .full-unstyled-link {
  color: #ffffff !important;
}
/* === END gourmet bento white titles === */
/* === iOS anti-zoom: form inputs >= 16px on mobile so Safari does not zoom on focus - 19.06.2026 (#5 audit) === */
@media (max-width: 768px) {
  .newsletter-input,
  input[type="text"]:not(.quantity__input),
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="number"]:not(.quantity__input),
  input[type="password"],
  input[type="url"],
  input[type="date"],
  textarea {
    font-size: 16px !important;
  }
}
/* === END iOS anti-zoom === */
/* === Beleaev announcement strip: white plashka, slim, centered, no arrows, sticky (19.06) === */
/* strip pinned at top; header (always-sticky) pushed below it to avoid overlap/clipping brand */
.announcement-bar-section { position: sticky !important; top: 0 !important; z-index: 1000 !important; }
.section-header.shopify-section-header-sticky { top: 33px !important; }
/* hide slider arrows */
.announcement-bar .slider-button { display: none !important; }
/* message: white plashka, dark contrast text, vertically centered, slim, Nunito */
.announcement-bar { align-items: center !important; }
.announcement-bar__message {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  color: #000000 !important;
  font-family: var(--font-body-family) !important;
  font-size: 12px !important;
  letter-spacing: 0.3px !important;
}
.announcement-bar__message span { color: #000000 !important; }
@media (max-width: 749px) {
  .section-header.shopify-section-header-sticky { top: 25px !important; }
  .announcement-bar__message { min-height: 24px !important; font-size: 10px !important; letter-spacing: 0.2px !important; }
}
/* === END announcement strip === */
/* === announcement strip: bullet at end of line 1, break on mobile + air (19.06) === */
.announcement-bar .abr { display: none; }
@media (max-width: 749px) {
  .announcement-bar .abr { display: inline; }
  .announcement-bar__message { min-height: 34px !important; padding-top: 6px !important; padding-bottom: 6px !important; }
}
/* === END announcement strip mobile === */


/* === BELEAEV 30.06 GOURMET-FIT: 2 карточки гурме всегда влезают на моб (minmax не даёт 1fr вылезать за экран) === */
@media (max-width: 749px) {
  .beleaev-bento__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .beleaev-bento__grid .card-wrapper { min-width: 0 !important; max-width: 100% !important; }
}
/* === END GOURMET-FIT === */

/* === beleaev-hampers-2col-mobile (force 2 per row on mobile collection grids; covers grid+flex) === */
@media (max-width: 749px){#product-grid.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}#product-grid.product-grid>li,#product-grid.product-grid>.grid__item{width:calc(50% - var(--grid-mobile-horizontal-spacing,14px)/2 - 2px)!important;max-width:calc(50% - var(--grid-mobile-horizontal-spacing,14px)/2 - 2px)!important;flex:0 0 calc(50% - var(--grid-mobile-horizontal-spacing,14px)/2 - 2px)!important;min-width:0!important;}}

/* === beleaev-accordion-content-color 03.07 (match Caviar: solid cream, not dimmed grey) === */
html body .product__accordion .accordion__content,
html body .product__accordion .accordion__content p,
html body .product__accordion .accordion__content li,
html body .product__accordion .accordion__content span,
html body .product__accordion .accordion__content a,
html body .product__accordion .accordion__content strong { color: rgb(245, 241, 232) !important; }


/* === Beleaev: gold radio circle on Subscribe & Save (always highlighted) — 06.07.2026 === */
.appstle_sub_widget .appstle_subscription_wrapper_option:has(.appstle_subscription_radio_wrapper) .appstle_circle{border-color:#C9A961 !important;}
.appstle_sub_widget .appstle_subscription_wrapper_option:has(.appstle_subscription_radio_wrapper) .appstle_dot{background:#C9A961 !important;}

/* === Beleaev: caviar visible ATC is Dawn .button--secondary — match .button--primary / gourmet: white PILL + weight 400 (colour + radius + weight only; button function/JS untouched) — 06.07.2026 === */
.beleaev-buttons-row > .product-form__submit.button--secondary,
.product-form__buttons .product-form__submit.button--secondary,
.product__info-container .product-form__submit.button--secondary {
  color:#0a0a0a !important; background:#ffffff !important; border:1px solid #0a0a0a !important;
  border-radius:999px !important; font-weight:400 !important;
}
.beleaev-buttons-row > .product-form__submit.button--secondary:hover,
.beleaev-buttons-row > .product-form__submit.button--secondary:focus-visible,
.product-form__buttons .product-form__submit.button--secondary:hover,
.product-form__buttons .product-form__submit.button--secondary:focus-visible,
.product__info-container .product-form__submit.button--secondary:hover,
.product__info-container .product-form__submit.button--secondary:focus-visible {
  background:#0a0a0a !important; color:#ffffff !important;
}
.beleaev-buttons-row > .product-form__submit.button--secondary span,
.product-form__buttons .product-form__submit.button--secondary span,
.product__info-container .product-form__submit.button--secondary span { color:inherit !important; }

/* === Beleaev: caviar buy-buttons (.beleaev-row-wired) MOBILE v4 — [-1+] + ADD TO CART on ONE row AND label on ONE line (compact padding/font + nowrap; doubled class beats inline flex:1 1 180px), qty number visible — 06.07.2026 === */
@media (max-width: 749px){
  .product-form__buttons.beleaev-row-wired.beleaev-row-wired > .product-form__submit{ flex:1 1 0 !important; min-width:0 !important; padding-left:12px !important; padding-right:12px !important; font-size:14px !important; letter-spacing:0.06em !important; white-space:nowrap !important; }
  .product-form__buttons.beleaev-row-wired.beleaev-row-wired > quantity-input.quantity{ flex:0 0 auto !important; width:auto !important; max-width:none !important; }
  .product-form__buttons.beleaev-row-wired.beleaev-row-wired quantity-input.quantity .quantity__input{ width:2.5rem !important; min-width:2.5rem !important; opacity:1 !important; text-align:center !important; }
}

/* === Beleaev: NON-caviar buy-buttons (.beleaev-buttons-row: gourmet/tasting/sets) MOBILE — [-1+] + ADD TO CART on ONE row + label ONE line (grid->flex, compact qty + compact ATC nowrap) — 06.07.2026 === */
@media (max-width: 749px){
  .product-form__buttons.beleaev-buttons-row{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:10px !important; grid-template-columns:none !important; }
  .product-form__buttons.beleaev-buttons-row > quantity-input,
  .product-form__buttons.beleaev-buttons-row > .quantity{ flex:0 0 auto !important; width:auto !important; max-width:120px !important; }
  .product-form__buttons.beleaev-buttons-row quantity-input .quantity__input,
  .product-form__buttons.beleaev-buttons-row .quantity .quantity__input{ width:2.5rem !important; min-width:2.5rem !important; text-align:center !important; }
  .product-form__buttons.beleaev-buttons-row > .product-form__submit{ flex:1 1 0 !important; min-width:0 !important; padding-left:12px !important; padding-right:12px !important; font-size:14px !important; letter-spacing:0.06em !important; white-space:nowrap !important; }
  .product-form__buttons.beleaev-buttons-row > .shopify-payment-button,
  .product-form__buttons.beleaev-buttons-row > shopify-accelerated-checkout,
  .product-form__buttons.beleaev-buttons-row > more-payment-options-link{ flex:1 1 100% !important; width:100% !important; }
}

/* === Beleaev: cart-drawer quantity MOBILE fix — input was clipped to ~10px (percentage container widths) -> looked like ":" instead of number; restore usable width — 06.07.2026 === */
@media (max-width: 749px){
  cart-drawer .cart-quantity, cart-drawer .draw-quantity{ width:auto !important; min-width:0 !important; }
  cart-drawer .cart-quantity .quantity__input, cart-drawer .draw-quantity .quantity__input, cart-drawer .quantity__input{ width:2.5rem !important; min-width:2.5rem !important; padding:0 2px !important; }
}
/* Gift card denominations as pills */
.gift-denoms .variant-list { display: flex; flex-wrap: wrap; gap: 10px; border: 0; }
.gift-denoms .variant-list li { list-style: none; margin: 0; }
.gift-denoms .variant-label {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 28px; border: 1px solid #cfcfcf; border-radius: 999px;
  background: #fff; cursor: pointer;
}
.gift-denoms .variant-input:checked + .variant-label { border: 2px solid #111; }
.gift-denoms .variant-weight { font-size: 16px; font-weight: 600; }
.gift-denoms .variant-persons,
.gift-denoms .variant-subtitle,
.gift-denoms .variant-separator,
.gift-denoms .variant-price { display: none; }
.gift-denoms .last-work { flex-direction: row; }
/* Gift card denominations — remove leftover white strip + cell borders */
.gift-denoms .variant-list {
  width: fit-content;
  max-width: 100%;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.gift-denoms .variant-list li {
  border: 0;
}
/* SAVE badge → gold pill + "on subscription" */
.beleaev-sub-line > span:last-child,
.beleaev-price-row span.product-option {
  background:#C9A961 !important; color:#1A1208 !important;
  border:none !important; border-radius:999px !important;
  padding:6px 14px !important; font-weight:800 !important;
  letter-spacing:.3px !important; display:inline-block !important;
  line-height:1 !important; white-space:nowrap !important;
}
.beleaev-sub-line > span:last-child::after,
.beleaev-price-row span.product-option::after { content:" on subscription"; }
@media (max-width: 749px) {
  .beleaev-sub-line,
  .beleaev-price-bottom {
    margin-bottom: 18px !important;
    row-gap: 8px !important;
  }
}
/* Fix: remove the empty gold pill in the cart */
.beleaev-price-row span.product-option {
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-weight: inherit !important;
  letter-spacing: normal !important;
  white-space: normal !important;
}
.beleaev-price-row span.product-option::after {
  content: "" !important;
}
/* Appstle Subscriptions portal contrast/hover fix — 2026-07-21 */
.appstle-customer-portal .as-view-more-products { background-color: #4f46e5 !important; color: #ffffff !important; }
.appstle-customer-portal .as-view-more-products:hover { background-color: #4338ca !important; color: #ffffff !important; }
.appstle-customer-portal .as-button--cancelsub:hover { background-color: #dc2626 !important; color: #ffffff !important; }
.appstle-customer-portal .as-text-gray-500 { color: #9ca3af !important; }
.comment-form .field__label.field__label.field__label,
.comment-form .field__label.field__label.field__label *,
.comment-form .field__input.field__input.field__input::placeholder {
  color: #1a1a1a !important;
}
/* Beleaev legal policy width alignment 2026-07-27 */
.shopify-policy__container{max-width:76.6rem!important}

/* Beleaev mobile announcement fixed geometry 2026-08-11 */
@media screen and (max-width: 749px) {
  .announcement-bar-section {
    position: sticky !important;
    top: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    overflow: visible !important;
  }

  .announcement-bar {
    height: 34px !important;
    min-height: 34px !important;
    align-items: center !important;
  }

  .announcement-bar__message {
    min-height: 34px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    box-sizing: border-box !important;
  }

  .section-header.shopify-section-header-sticky {
    top: 34px !important;
  }
}


/* BELEAEV Japan labels */
.card__japan-origin-overlay,
.pdp-japan-badge{
  position:absolute!important;
  z-index:5!important;
  top:auto!important;
  right:auto!important;
  bottom:2.5%!important;
  left:2.5%!important;
  width:14%!important;
  height:auto!important;
  max-width:14%!important;
  min-width:0!important;
  overflow:visible!important;
  pointer-events:none!important;
  display:block!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  border-radius:0!important;
}
.card__japan-origin-overlay>img,
.pdp-japan-badge>img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  object-fit:contain!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.product-media-container:has(> .pdp-japan-badge){
  position:relative!important;
}
/* END BELEAEV Japan labels */

/* Japan mark: native cover uses its embedded sign first; the matching overlay appears only on the hover image. */
.card__japan-origin-overlay--hover-only {
  opacity: 0;
  pointer-events: none;
  transition: none !important;
}
.card-wrapper:hover .card__japan-origin-overlay--hover-only,
.card-wrapper:focus-within .card__japan-origin-overlay--hover-only {
  opacity: 1;
}
