/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 18:20 Expected identifier but found whitespace
Line 19:49 Unexpected "("
Line 48:1 Expected identifier but found "%"
Line 50:0 Unexpected "{"
Line 50:1 Expected identifier but found "%"
Line 151:0 Unexpected "{"
Line 151:1 Expected identifier but found "%"
Line 152:0 Unexpected "{"
... and 4767 more hidden warnings

**/
{% comment %}
  Collection Main Grid Premium
  Two-column layout: Filters left + Products right
  With simplified image banners after X products (per collection via metafields)
  
  BANNERS: Per collection via metafields
  - Top banner (before all products)
  - Auto-inserted after every 8 products (8, 16, 24, 32, etc.)
  - Auto alternate: Left/Right positioning (no position metafield needed)
  Banner spans 1 column (1 product width) - Layout: 3 products + 1 banner
  
  TOP BANNER metafields (3 total):
  - custom.grid_banner_top_enable (Boolean)
  - custom.grid_banner_top_image (File/Image)
  - custom.grid_banner_top_link (URL) - Optional link for banner
  
  For each banner (1-8), create these metafields (3 per banner):
  - custom.grid_banner_1_enable (Boolean)
  - custom.grid_banner_1_image (File/Image)
  - custom.grid_banner_1_link (URL) - Optional link for banner
  
  NO POSITION METAFIELD NEEDED - Banners auto-insert after 8, 16, 24, 32, 40, 48, 56, 64 products
  Auto alternate: Banner 1 = Left, Banner 2 = Right, Banner 3 = Left, etc.
  
  Repeat for banner_2 through banner_8 (same 3 metafields each)
  
  TOTAL METAFIELDS NEEDED:
  - Top banner: 3 metafields (enable, image, link)
  - Banners 1-8: 24 metafields (8 banners × 3 metafields each)
  - Grand Total: 27 metafields
  
  Fallback: If no metafields, uses Theme Editor blocks
{% endcomment %}

{%- liquid
  assign section_id = section.id
  assign products_per_row = section.settings.products_per_row | default: 4
  assign mobile_columns = section.settings.mobile_columns | default: 2
  assign card_gap = section.settings.card_gap | default: 15
  assign card_radius = section.settings.card_radius | default: 0
  assign show_vendor = section.settings.show_vendor
  assign show_rating = section.settings.show_rating
  assign show_quick_add = section.settings.show_quick_add
  assign sticky_sidebar = section.settings.sticky_sidebar
  assign banner_height_desktop = section.settings.banner_height_desktop | default: 300
  assign banner_height_mobile = section.settings.banner_height_mobile | default: 320
  assign banner_zoom_animation = section.settings.banner_zoom_animation
  assign products_per_page = settings.cmgp_products_per_page | default: section.settings.products_per_page | default: 24
  assign load_more_text = section.settings.load_more_text | default: 'Load More'
  assign load_more_bg_color = section.settings.load_more_bg_color | default: '#1a1a1a'
  assign load_more_text_color = section.settings.load_more_text_color | default: '#ffffff'
  assign load_more_border_color = section.settings.load_more_border_color | default: '#1a1a1a'
  assign load_more_hover_bg_color = section.settings.load_more_hover_bg_color | default: '#ffffff'
  assign load_more_hover_text_color = section.settings.load_more_hover_text_color | default: '#1a1a1a'
  assign load_more_button_padding = section.settings.load_more_button_padding | default: 16
  assign load_more_button_font_size = section.settings.load_more_button_font_size | default: 14
  assign load_more_button_min_width = section.settings.load_more_button_min_width | default: 200
  assign container_max_width = section.settings.container_max_width | default: 1500
  assign container_padding = section.settings.container_padding | default: 30
  assign full_width_layout = section.settings.full_width_layout
  assign filters_to_hide_str_raw = section.settings.filters_to_hide | strip
  if filters_to_hide_str_raw == blank or filters_to_hide_str_raw == 'None'
    assign filters_to_hide_str = ''
  else
    assign filters_to_hide_str = filters_to_hide_str_raw
  endif
  assign filters_to_show_str_raw = section.settings.filters_to_show | strip
  if filters_to_show_str_raw == blank or filters_to_show_str_raw == 'None'
    assign filters_to_show_str = ''
  else
    assign filters_to_show_str = filters_to_show_str_raw
  endif
  assign show_category_filter = section.settings.show_category_filter
  assign filter_drawer_desktop = section.settings.filter_drawer_desktop
  assign mobile_sort_filter_font_size = section.settings.mobile_sort_filter_font_size | default: 12
  assign mobile_sort_filter_padding_v = section.settings.mobile_sort_filter_padding_v | default: 10
  assign mobile_sort_filter_padding_h = section.settings.mobile_sort_filter_padding_h | default: 10
  assign mobile_sort_filter_bar_padding_h = section.settings.mobile_sort_filter_bar_padding_h | default: 12
  assign show_sale_badge = section.settings.show_sale_badge
  assign show_sold_out_badge = section.settings.show_sold_out_badge
  
  assign collection_products = collection.products
  assign total_products = collection_products.size
  assign initial_products = products_per_page
  assign use_source_coll = false
  assign coll_handle_lower = collection.handle | downcase
  assign is_metal_collection = false
  assign color_filter_handle = ''
  assign metal_patterns = 'yellow-gold,white-gold,rose-gold,vermeil' | split: ','
  assign silver_pattern = 'silver'
  if coll_handle_lower contains silver_pattern
    assign is_metal_collection = true
    assign color_filter_handle = 'silver'
  else
    for mp in metal_patterns
      if coll_handle_lower contains mp
        assign is_metal_collection = true
        assign color_filter_handle = mp
        break
      endif
    endfor
  endif
  assign use_metal_filter = is_metal_collection
  if is_metal_collection
    if collection.products.size > 0
      assign collection_products = collection.products
      assign total_products = 9999
    else
      assign metal_source_handle = section.settings.metal_source_collection | default: 'all-jewelry' | strip
      if metal_source_handle == blank
        assign metal_source_handle = 'all-jewelry'
      endif
      assign source_coll = collections[metal_source_handle]
      if source_coll == blank
        assign source_coll = collections.all
      endif
      if source_coll == blank
        assign source_coll = collections['all-products']
      endif
      if source_coll == blank
        assign source_coll = collections['all-jewelry']
      endif
      if source_coll != blank
        assign collection_products = source_coll.products
        assign total_products = 9999
        assign use_source_coll = true
        assign use_metal_filter = true
      endif
    endif
  endif
  if is_metal_collection and collection_products.size > 0
    assign initial_products = collection_products.size
  endif
-%}

{%- assign show_category_carousel = section.settings.show_category_carousel -%}
{%- assign hide_carousel_items_without_image = section.settings.hide_carousel_items_without_image -%}
{%- assign category_carousel_param = section.settings.category_carousel_filter_param | default: 'filter.p.product_type' -%}
{%- assign category_carousel_blocks = section.blocks | where: 'type', 'category_carousel_item' -%}
{%- comment -%} Only show carousel categories that have products in THIS collection {%- endcomment -%}
{%- assign allowed_carousel_fvals = '' -%}
{%- for f in collection.filters -%}
  {%- if f.param_name == category_carousel_param -%}
    {%- for v in f.values -%}
      {%- assign vh = v.value | handleize -%}
      {%- assign allowed_carousel_fvals = allowed_carousel_fvals | append: '|' | append: vh | append: '|' -%}
    {%- endfor -%}
    {%- break -%}
  {%- endif -%}
{%- endfor -%}
{%- comment -%} Types: collection products se. Tags: collection.filters se (sari collection) - storefront filtering ON honi chahiye {%- endcomment -%}
{%- assign types_in_collection_handles = '' -%}
{%- assign tags_in_collection_handles = '' -%}
{%- assign _tag_param = section.settings.category_carousel_tag_param | default: 'filter.p.tag' -%}
{%- for f in collection.filters -%}
  {%- if f.param_name == _tag_param -%}
    {%- for v in f.values -%}
      {%- assign vh = v.value | handleize -%}
      {%- if vh != blank -%}
        {%- assign vh_check = '|' | append: vh | append: '|' -%}
        {%- unless tags_in_collection_handles contains vh_check -%}
          {%- assign tags_in_collection_handles = tags_in_collection_handles | append: vh_check -%}
        {%- endunless -%}
      {%- endif -%}
    {%- endfor -%}
    {%- break -%}
  {%- endif -%}
{%- endfor -%}
{%- comment -%} Agar filters me tag nahi mila (storefront filtering off) to products se fallback {%- endcomment -%}
{%- if tags_in_collection_handles == blank -%}
  {%- for p in collection_products -%}
    {%- for t in p.tags -%}
      {%- assign th = t | handleize -%}
      {%- if th != blank -%}
        {%- assign th_check = '|' | append: th | append: '|' -%}
        {%- unless tags_in_collection_handles contains th_check -%}
          {%- assign tags_in_collection_handles = tags_in_collection_handles | append: th_check -%}
        {%- endunless -%}
      {%- endif -%}
    {%- endfor -%}
  {%- endfor -%}
{%- endif -%}
{%- for p in collection_products -%}
  {%- assign ph = p.metafields.custom.type | default: p.type | handleize -%}
  {%- if ph != blank -%}
    {%- assign ph_check = '|' | append: ph | append: '|' -%}
    {%- unless types_in_collection_handles contains ph_check -%}
      {%- assign types_in_collection_handles = types_in_collection_handles | append: ph_check -%}
    {%- endunless -%}
  {%- endif -%}
{%- endfor -%}
{%- assign carousel_max_show = 24 -%}
{%- assign carousel_visible_count = 0 -%}
{%- assign type_param = section.settings.category_carousel_filter_param | default: 'filter.p.product_type' -%}
{%- comment -%} Carousel: Rings = Shop By Type (7). Sub-collections (Rings + Pendants, Earrings, Bracelets) = sirf 6 filters. Shop By Stone = same 6. {%- endcomment -%}
{%- assign ring_coll_handles_str = '|engagement-rings|wedding-bands|promise-rings|fashion-rings|stackable-rings|mens-rings|ring-enhancers|' -%}
{%- assign stone_coll_handles_str = '|diamond-rings|lab-grown-diamonds|lab-grown-diamond|lab-grown|gemstone-rings|gemstone|birthstone-rings|birthstones|multi-stone-rings|multi-stone|' -%}
{%- comment -%} All Jewelry ke neeche: Pendants, Earrings, Bracelets - in par bhi sirf wahi 6 filters {%- endcomment -%}
{%- assign jewelry_sub_handles_str = '|pendants|earrings|bracelets|' -%}
{%- assign sub_coll_filters_allowlist = 'engagement-rings, wedding-rings, wedding-bands, pendants, earrings, bracelets' -%}
{%- assign coll_handle_down = collection.handle | downcase -%}
{%- assign coll_handle_check = '|' | append: coll_handle_down | append: '|' -%}
{%- assign carousel_allowlist_raw = '' -%}
{%- comment -%} 1) Per-collection metafield: custom.carousel_filter_handles = comma-separated handles (e.g. engagement-rings, wedding-bands). Overrides section setting for this collection. {%- endcomment -%}
{%- assign carousel_metafield = collection.metafields.custom.carousel_filter_handles.value | default: collection.metafields.custom.carousel_filter_handles -%}
{%- if carousel_metafield != blank -%}
  {%- assign carousel_allowlist_raw = carousel_metafield | strip -%}
{%- endif -%}
{%- comment -%} Men's Jewelry: template blocks ko direct show karo, metafield allowlist se restrict na ho {%- endcomment -%}
{%- if coll_handle_down contains 'mens-jewelry' or coll_handle_down contains 'mens-jewellery' -%}
  {%- assign carousel_allowlist_raw = '' -%}
{%- endif -%}
{%- comment -%} 1.5) Earrings template: agar is section me carousel_tag_filters_earrings set ho aur collection earrings ho to wahi use karo - kisi b product me in me se tag ho to carousel me dikhe {%- endcomment -%}
{%- if carousel_allowlist_raw == blank -%}
  {%- assign earrings_tag_setting = section.settings.carousel_tag_filters_earrings | strip -%}
  {%- assign is_earrings_coll = false -%}
  {%- if coll_handle_down == 'earrings' or coll_handle_down == 'earring' -%}
    {%- assign is_earrings_coll = true -%}
  {%- elsif coll_handle_down contains 'earring' -%}
    {%- assign is_earrings_coll = true -%}
  {%- endif -%}
  {%- if is_earrings_coll and earrings_tag_setting != blank -%}
    {%- assign carousel_allowlist_raw = earrings_tag_setting -%}
  {%- endif -%}
{%- endif -%}
{%- comment -%} 2) Theme Editor: carousel_allowlist_collection_wise - format: rings: handle1, handle2 | pendants: handle1 {%- endcomment -%}
{%- if carousel_allowlist_raw == blank -%}
  {%- assign coll_wise_str = section.settings.carousel_allowlist_collection_wise | strip -%}
  {%- if coll_wise_str != blank -%}
    {%- assign coll_wise_parts = coll_wise_str | split: '|' -%}
    {%- assign carousel_allowlist_matched = false -%}
    {%- for part in coll_wise_parts -%}
      {%- assign part_trim = part | strip -%}
      {%- if part_trim contains ':' -%}
        {%- assign part_split = part_trim | split: ':' -%}
        {%- assign coll_h = part_split[0] | strip | handleize -%}
        {%- assign handles_part = part_split[1] | strip -%}
        {%- if coll_h != blank and handles_part != blank -%}
          {%- if coll_h == coll_handle_down -%}
            {%- assign carousel_allowlist_raw = handles_part -%}
            {%- assign carousel_allowlist_matched = true -%}
            {%- break -%}
          {%- endif -%}
        {%- endif -%}
      {%- endif -%}
    {%- endfor -%}
    {%- comment -%} Exact match na ho to contains se try: e.g. handle shop-necklaces par necklaces allowlist use karo {%- endcomment -%}
    {%- if carousel_allowlist_matched == false and carousel_allowlist_raw == blank -%}
      {%- for part in coll_wise_parts -%}
        {%- assign part_trim = part | strip -%}
        {%- if part_trim contains ':' -%}
          {%- assign part_split = part_trim | split: ':' -%}
          {%- assign coll_h = part_split[0] | strip | handleize -%}
          {%- assign handles_part = part_split[1] | strip -%}
          {%- if coll_h != blank and handles_part != blank -%}
            {%- if coll_handle_down contains coll_h or coll_h contains coll_handle_down -%}
              {%- assign carousel_allowlist_raw = handles_part -%}
              {%- break -%}
            {%- endif -%}
          {%- endif -%}
        {%- endif -%}
      {%- endfor -%}
    {%- endif -%}
  {%- endif -%}
{%- endif -%}
{%- comment -%} 3) Fallback: hardcoded allowlist by collection handle {%- endcomment -%}
{%- if carousel_allowlist_raw == blank -%}
{%- assign is_main_rings = false -%}
{%- assign rings_handles_check = '|rings|all-rings|shop-rings|rings-shop|' -%}
{%- if rings_handles_check contains coll_handle_check or collection.handle == 'rings' -%}
  {%- assign is_main_rings = true -%}
{%- endif -%}
{%- if is_main_rings -%}
  {%- comment -%} Main Rings (Shop By Type): Engagement Rings, Wedding Bands, Promise Rings, Fashion Rings, Stackable Rings, Men's Rings, Ring Enhancers {%- endcomment -%}
  {%- assign carousel_allowlist_raw = 'engagement-rings, engagement-ring, wedding-rings, wedding-rings, wedding-bands, wedding-band, promise-rings, promise-ring, fashion-rings, fashion-ring, stackable, stackable-rings, stackable-ring, mens-rings, mens-ring, men-s-rings, men-s-ring, ring-enhancers, ring-enhancer' -%}
{%- elsif coll_handle_down == 'earrings' or coll_handle_down == 'earring' or coll_handle_down contains 'earring' -%}
  {%- comment -%} Earrings: pehle check - sirf tag carousel (studs, hoops, dangling, statement, fashion). jewelry_sub se mat match karo. {%- endcomment -%}
  {%- assign carousel_allowlist_raw = 'studs, hoops, dangling, statement, fashion' -%}
{%- elsif coll_handle_down == 'necklaces' or coll_handle_down == 'necklace' or coll_handle_down contains 'necklace' -%}
  {%- comment -%} Necklaces: sirf tag carousel - pendants, medallion, personalised, tennis, bezel, heart, high-jewelry {%- endcomment -%}
  {%- assign carousel_allowlist_raw = 'pendants, medallion, personalised, personalized, tennis, bezel, heart, high-jewelry' -%}
{%- elsif ring_coll_handles_str contains coll_handle_check -%}
  {%- comment -%} Rings ki sub-collections: sirf yehi 6 - Engagement Rings, Wedding Rings, Wedding Bands, Pendants, Earrings, Bracelets. Is ke elawa kuch nahi. {%- endcomment -%}
  {%- assign carousel_allowlist_raw = sub_coll_filters_allowlist -%}
{%- elsif stone_coll_handles_str contains coll_handle_check -%}
  {%- comment -%} Shop By Stone collections: sirf wahi 6 filters {%- endcomment -%}
  {%- assign carousel_allowlist_raw = sub_coll_filters_allowlist -%}
{%- elsif jewelry_sub_handles_str contains coll_handle_check -%}
  {%- comment -%} Pendants, Earrings, Bracelets (agar upar match na hua): 6 filters {%- endcomment -%}
  {%- assign carousel_allowlist_raw = sub_coll_filters_allowlist -%}
{%- else -%}
  {%- comment -%} Baqi collections (Novello, Chains, etc.): allowlist blank = jitne bhi blocks ke products hon sab filters dikhao {%- endcomment -%}
  {%- assign carousel_allowlist_raw = '' -%}
{%- endif -%}
{%- endif -%}
{%- assign carousel_allowlist_handles = '' -%}
{%- if carousel_allowlist_raw != blank -%}
  {%- assign carousel_allowlist_arr = carousel_allowlist_raw | split: ',' -%}
  {%- for item in carousel_allowlist_arr -%}
    {%- assign item_clean = item | strip | handleize -%}
    {%- if item_clean != blank -%}
      {%- assign item_check = '|' | append: item_clean | append: '|' -%}
      {%- unless carousel_allowlist_handles contains item_check -%}
        {%- if carousel_allowlist_handles == '' -%}
          {%- assign carousel_allowlist_handles = item_check -%}
        {%- else -%}
          {%- assign carousel_allowlist_handles = carousel_allowlist_handles | append: '|' | append: item_clean | append: '|' -%}
        {%- endif -%}
      {%- endunless -%}
    {%- endif -%}
  {%- endfor -%}
{%- endif -%}
{%- comment -%} Earrings template: section setting se allowlist - koi b product me tag ho to carousel me dikhe, bina block ke {%- endcomment -%}
{%- assign earrings_tag_allowlist_handles = '' -%}
{%- assign _earrings_setting = section.settings.carousel_tag_filters_earrings | strip -%}
{%- assign _is_earrings_coll = false -%}
{%- if coll_handle_down == 'earrings' or coll_handle_down == 'earring' or coll_handle_down contains 'earring' -%}
  {%- assign _is_earrings_coll = true -%}
{%- endif -%}
{%- if _is_earrings_coll and _earrings_setting != blank -%}
  {%- assign _earrings_arr = _earrings_setting | split: ',' -%}
  {%- for _eitem in _earrings_arr -%}
    {%- assign _eclean = _eitem | strip | handleize -%}
    {%- if _eclean != blank -%}
      {%- assign _echeck = '|' | append: _eclean | append: '|' -%}
      {%- unless earrings_tag_allowlist_handles contains _echeck -%}
        {%- if earrings_tag_allowlist_handles == '' -%}
          {%- assign earrings_tag_allowlist_handles = _echeck -%}
        {%- else -%}
          {%- assign earrings_tag_allowlist_handles = earrings_tag_allowlist_handles | append: '|' | append: _eclean | append: '|' -%}
        {%- endif -%}
      {%- endunless -%}
    {%- endif -%}
  {%- endfor -%}
{%- endif -%}
{%- comment -%} Per-handle winner: jis handle ke liye tag vs type dono ho, jis ke zyada products hon woh carousel me (sirf allowlist set hone par) {%- endcomment -%}
{%- assign carousel_handle_winner_str = '' -%}
{%- if carousel_allowlist_raw != blank and carousel_allowlist_arr.size > 0 -%}
  {%- assign seen_handles_str = '' -%}
  {%- for item in carousel_allowlist_arr -%}
    {%- assign item_clean = item | strip | handleize -%}
    {%- if item_clean == blank -%}{%- continue -%}{%- endif -%}
    {%- assign seen_check = '|' | append: item_clean | append: '|' -%}
    {%- if seen_handles_str contains seen_check -%}{%- continue -%}{%- endif -%}
    {%- assign seen_handles_str = seen_handles_str | append: seen_check -%}
    {%- assign count_type = 0 -%}
    {%- assign count_tag = 0 -%}
    {%- for p in collection_products -%}
      {%- assign ptype_h = p.metafields.custom.type | default: p.type | handleize -%}
      {%- assign type_ok = false -%}
      {%- if ptype_h == item_clean or ptype_h != blank and item_clean != blank and ptype_h contains item_clean or item_clean contains ptype_h -%}
        {%- assign type_ok = true -%}
      {%- endif -%}
      {%- if type_ok -%}{%- assign count_type = count_type | plus: 1 -%}{%- endif -%}
      {%- for t in p.tags -%}
        {%- assign th = t | handleize -%}
        {%- if th == item_clean or th != blank and item_clean != blank and th contains item_clean or item_clean contains th -%}
          {%- assign count_tag = count_tag | plus: 1 -%}
          {%- break -%}
        {%- endif -%}
      {%- endfor -%}
    {%- endfor -%}
    {%- assign winner_type = 'product_type' -%}
    {%- if count_tag > count_type -%}
      {%- assign winner_type = 'tag' -%}
    {%- endif -%}
    {%- comment -%} Sirf tab winner add karo jab is handle ke liye koi product ho {%- endcomment -%}
    {%- if count_type > 0 or count_tag > 0 -%}
      {%- assign carousel_handle_winner_str = carousel_handle_winner_str | append: '|' | append: item_clean | append: ':' | append: winner_type -%}
    {%- endif -%}
  {%- endfor -%}
  {%- if carousel_handle_winner_str != '' -%}
    {%- assign carousel_handle_winner_str = carousel_handle_winner_str | append: '|' -%}
  {%- endif -%}
{%- endif -%}
{%- assign active_vendor = nil -%}
{%- assign vendor_param = 'filter.p.vendor' -%}
{%- for f in collection.filters -%}
  {%- if f.param_name == vendor_param -%}
    {%- for v in f.values -%}
      {%- if v.active -%}
        {%- assign active_vendor = v.value -%}
        {%- break -%}
      {%- endif -%}
    {%- endfor -%}
    {%- break -%}
  {%- endif -%}
{%- endfor -%}
{%- comment -%} Active color for carousel (White Gold, Yellow Gold, etc.) - filter images should match collection color {%- endcomment -%}
{%- assign carousel_active_color_str = '' -%}
{%- assign carousel_coll_handle = collection.handle | downcase -%}
{%- if carousel_coll_handle contains 'white-gold' or carousel_coll_handle contains 'whitegold' -%}
  {%- assign carousel_active_color_str = 'White Gold' -%}
{%- elsif carousel_coll_handle contains 'yellow-gold' or carousel_coll_handle contains 'yellowgold' -%}
  {%- assign carousel_active_color_str = 'Yellow Gold' -%}
{%- elsif carousel_coll_handle contains 'rose-gold' or carousel_coll_handle contains 'rosegold' -%}
  {%- assign carousel_active_color_str = 'Rose Gold' -%}
{%- elsif carousel_coll_handle contains 'silver' -%}
  {%- assign carousel_active_color_str = 'Silver' -%}
{%- elsif carousel_coll_handle contains 'vermeil' -%}
  {%- assign carousel_active_color_str = 'Vermeil' -%}
{%- endif -%}
{%- for f in collection.filters -%}
  {%- assign cflab = f.label | strip -%}
  {%- assign cf_is_color = false -%}
  {%- assign cflabs = 'Color,Colour,Metal,Metal Color' | split: ',' -%}
  {%- for cfl in cflabs -%}
    {%- assign cfl_s = cfl | strip -%}
    {%- if cflab == cfl_s -%}
      {%- assign cf_is_color = true -%}
      {%- break -%}
    {%- endif -%}
  {%- endfor -%}
  {%- if cf_is_color and f.type == 'list' -%}
    {%- for fv in f.values -%}
      {%- if fv.active -%}
        {%- if carousel_active_color_str == '' -%}
          {%- assign carousel_active_color_str = fv.value -%}
        {%- else -%}
          {%- assign carousel_active_color_str = carousel_active_color_str | append: '^^^' | append: fv.value -%}
        {%- endif -%}
      {%- endif -%}
    {%- endfor -%}
    {%- break -%}
  {%- endif -%}
{%- endfor -%}

{%- comment -%} Fallback: single-vendor collection (e.g. /collections/novello-rings) - use first product's vendor {%- endcomment -%}
{%- if active_vendor == nil and collection_products.size > 0 -%}
  {%- assign first_vendor = collection_products.first.vendor -%}
  {%- assign vendor_count = 0 -%}
  {%- for p in collection_products -%}
    {%- if p.vendor != first_vendor -%}{%- assign vendor_count = 1 -%}{%- break -%}{%- endif -%}
  {%- endfor -%}
  {%- if vendor_count == 0 and first_vendor != blank -%}
    {%- assign active_vendor = first_vendor -%}
  {%- endif -%}
{%- endif -%}
{%- assign tag_param = section.settings.category_carousel_tag_param | default: 'filter.p.tag' -%}
{%- for block in category_carousel_blocks -%}
  {%- assign bfval = block.settings.filter_value | default: block.settings.title | strip | handleize -%}
  {%- assign bfilter_type = block.settings.filter_type | default: 'product_type' -%}
  {%- if coll_handle_down contains 'engagement-rings' -%}
    {%- assign bfilter_type = 'tag' -%}
  {%- endif -%}
  {%- if coll_handle_down contains 'mens-jewelry' or coll_handle_down contains 'mens-jewellery' -%}
    {%- assign bfilter_type = 'tag' -%}
  {%- endif -%}
  {%- if carousel_allowlist_raw != blank -%}
    {%- assign bfilter_type = 'tag' -%}
  {%- endif -%}
  {%- if carousel_visible_count >= carousel_max_show -%}
    {%- break -%}
  {%- endif -%}
  {%- assign block_has_products = false -%}
  {%- for p in collection_products -%}
    {%- assign p_has_color = true -%}
    {%- if is_metal_collection and color_filter_handle != blank -%}
      {%- assign p_has_color = false -%}
      {%- assign color_opt_idx = nil -%}
      {%- for opt in p.options_with_values -%}
        {%- assign oln = opt.name | downcase -%}
        {%- if oln == 'color' or oln == 'colour' or oln == 'metal' or oln == 'metal color' or oln == 'finish' or oln == 'material' -%}
          {%- assign color_opt_idx = forloop.index0 -%}
          {%- break -%}
        {%- endif -%}
      {%- endfor -%}
                {%- if color_opt_idx != nil -%}
                  {%- assign silver_alt = 'sterling' -%}
                  {%- for v in p.variants -%}
                    {%- assign vh = v.options[color_opt_idx] | handleize -%}
                    {%- if vh contains color_filter_handle -%}
                      {%- assign p_has_color = true -%}
                      {%- break -%}
                    {%- endif -%}
                    {%- if color_filter_handle == 'silver' and vh contains silver_alt -%}
                      {%- assign p_has_color = true -%}
                      {%- break -%}
                    {%- endif -%}
                  {%- endfor -%}
                {%- endif -%}
                {%- if p_has_color == false and color_filter_handle == 'silver' -%}
                  {%- assign prod_mat = p.metafields.custom.material | default: p.metafields.custom.jewelry_material | default: p.metafields.custom.metal | downcase -%}
                  {%- assign prod_type = p.type | downcase -%}
                  {%- assign prod_tags = p.tags | join: ' ' | downcase -%}
                  {%- if prod_mat contains 'silver' or prod_mat contains 'sterling' or prod_type contains 'silver' or prod_tags contains 'silver' or prod_tags contains 'sterling' -%}
                    {%- assign p_has_color = true -%}
                  {%- endif -%}
                {%- endif -%}
    {%- endif -%}
    {%- unless p_has_color -%}{%- continue -%}{%- endunless -%}
    {%- comment -%} Allowlist (necklaces/pendants) par sirf tag use karo, product_type bilkul mat use karo {%- endcomment -%}
    {%- if bfilter_type == 'product_type' and carousel_allowlist_raw == blank -%}
      {%- assign ptype_h = p.metafields.custom.type | default: p.type | handleize -%}
      {%- if ptype_h == bfval -%}
        {%- assign block_has_products = true -%}
        {%- break -%}
      {%- elsif ptype_h != blank and bfval != blank -%}
        {%- if ptype_h contains bfval or bfval contains ptype_h -%}
          {%- assign block_has_products = true -%}
          {%- break -%}
        {%- endif -%}
      {%- endif -%}
    {%- elsif bfilter_type == 'tag' -%}
      {%- for t in p.tags -%}
        {%- assign th = t | handleize -%}
        {%- if th == bfval or th contains bfval or bfval contains th -%}
          {%- assign block_has_products = true -%}
          {%- break -%}
        {%- endif -%}
      {%- endfor -%}
      {%- if block_has_products -%}{%- break -%}{%- endif -%}
    {%- endif -%}
  {%- endfor -%}
  {%- comment -%} Tag block: agar collection.filters (ya products) me ye tag hai to bhi show karo - her hal me compulsory {%- endcomment -%}
  {%- if bfilter_type == 'tag' and block_has_products == false and tags_in_collection_handles != blank -%}
    {%- assign bfval_check_tag = '|' | append: bfval | append: '|' -%}
    {%- if tags_in_collection_handles contains bfval_check_tag -%}
      {%- assign block_has_products = true -%}
    {%- endif -%}
    {%- assign tag_contains_ok = bfval | size -%}
    {%- if block_has_products == false and tag_contains_ok > 0 -%}
      {%- assign tag_handles_split = tags_in_collection_handles | split: '|' -%}
      {%- for ths in tag_handles_split -%}
        {%- assign ths_clean = ths | strip -%}
        {%- if ths_clean != blank and bfval == ths_clean or bfval contains ths_clean or ths_clean contains bfval -%}
          {%- assign block_has_products = true -%}
          {%- break -%}
        {%- endif -%}
      {%- endfor -%}
    {%- endif -%}
  {%- endif -%}
  {%- assign bfval_check = '|' | append: bfval | append: '|' -%}
  {%- assign is_in_allowlist = false -%}
  {%- assign is_winner_for_handle = false -%}
  {%- if carousel_allowlist_handles == blank -%}
    {%- comment -%} Allowlist na ho to saare blocks jo products rakhte hon carousel me {%- endcomment -%}
    {%- assign is_in_allowlist = true -%}
    {%- assign is_winner_for_handle = true -%}
  {%- else -%}
    {%- if carousel_allowlist_handles contains bfval_check -%}
      {%- assign is_in_allowlist = true -%}
      {%- comment -%} Allowlist set hone par: block ke products hon to dikhao, winner logic na lagao (tag vs type dono se show) {%- endcomment -%}
      {%- assign is_winner_for_handle = true -%}
    {%- else -%}
      {%- assign allow_arr = carousel_allowlist_handles | split: '|' -%}
      {%- for ah in allow_arr -%}
        {%- assign ah_clean = ah | strip -%}
        {%- if ah_clean == blank -%}{%- continue -%}{%- endif -%}
        {%- if bfval == ah_clean or bfval contains ah_clean or ah_clean contains bfval -%}
          {%- assign is_in_allowlist = true -%}
          {%- assign is_winner_for_handle = true -%}
          {%- break -%}
        {%- endif -%}
      {%- endfor -%}
    {%- endif -%}
  {%- endif -%}
  {%- comment -%} Tag block: collection me ye tag kisi product par ho to carousel me zaroor dikhao - allowlist ki parwah mat karo {%- endcomment -%}
  {%- if bfilter_type == 'tag' and block_has_products -%}
    {%- assign is_in_allowlist = true -%}
    {%- assign is_winner_for_handle = true -%}
  {%- endif -%}
  {%- comment -%} Necklaces/Pendants template: allowlist me jo tag blocks hon unhe hamesha dikhao - filters/products count pe mat jao {%- endcomment -%}
  {%- if bfilter_type == 'tag' and carousel_allowlist_raw != blank and is_in_allowlist -%}
    {%- assign block_has_products = true -%}
  {%- endif -%}
  {%- comment -%} Earrings: section setting me jo tags hon un ke blocks hamesha dikhao - koi product check nahi {%- endcomment -%}
  {%- if earrings_tag_allowlist_handles != blank and bfilter_type == 'tag' -%}
    {%- if earrings_tag_allowlist_handles contains bfval_check -%}
      {%- assign block_has_products = true -%}
      {%- assign is_in_allowlist = true -%}
      {%- assign is_winner_for_handle = true -%}
    {%- else -%}
      {%- assign _earr = earrings_tag_allowlist_handles | split: '|' -%}
      {%- for _ea in _earr -%}
        {%- assign _eac = _ea | strip -%}
        {%- if _eac != blank and bfval == _eac or bfval contains _eac or _eac contains bfval -%}
          {%- assign block_has_products = true -%}
          {%- assign is_in_allowlist = true -%}
          {%- assign is_winner_for_handle = true -%}
          {%- break -%}
        {%- endif -%}
      {%- endfor -%}
    {%- endif -%}
  {%- endif -%}
  {%- if block_has_products and is_in_allowlist and is_winner_for_handle -%}
    {%- assign carousel_visible_count = carousel_visible_count | plus: 1 -%}
  {%- endif -%}
{%- endfor -%}
{%- assign dynamic_tag_filter = nil -%}
{%- for f in collection.filters -%}
  {%- if f.param_name == tag_param -%}
    {%- assign dynamic_tag_filter = f -%}
    {%- break -%}
  {%- endif -%}
{%- endfor -%}
{%- assign use_dynamic_tag_carousel = false -%}
{%- if section.settings.carousel_dynamic_tags and dynamic_tag_filter != nil and dynamic_tag_filter.values.size > 0 -%}
  {%- assign use_dynamic_tag_carousel = true -%}
{%- endif -%}
{%- comment -%} Carousel images should come from full collection, not current filtered subset {%- endcomment -%}
{%- assign carousel_image_products = collection_products -%}
{%- assign raw_coll_for_images = collections[collection.handle] -%}
{%- if raw_coll_for_images != blank and raw_coll_for_images.products.size > 0 -%}
  {%- assign carousel_image_products = raw_coll_for_images.products -%}
{%- endif -%}
{%- assign show_carousel_any = false -%}
{%- if show_category_carousel -%}
  {%- if use_dynamic_tag_carousel or carousel_visible_count > 0 or category_carousel_blocks.size > 0 -%}
    {%- assign show_carousel_any = true -%}
  {%- endif -%}
{%- endif -%}

<div class="collection-main-grid-premium{% if full_width_layout %} cmgp-full-width{% endif %}{% if filter_drawer_desktop %} cmgp-filter-drawer-desktop{% endif %}" id="cmgp-{{ section_id }}" data-section-id="{{ section_id }}" data-collection-handle="{{ collection.handle }}" data-category-carousel-param="{{ category_carousel_param }}">
  <div class="cmgp-container" style="{% unless full_width_layout %}max-width: {{ container_max_width }}px;{% endunless %} padding-left: {{ container_padding }}px; padding-right: {{ container_padding }}px;">
    {%- if show_carousel_any -%}
    <div class="cmgp-category-carousel" id="cmgp-carousel-{{ section_id }}">
      <button type="button" class="cmgp-carousel-btn cmgp-carousel-prev" aria-label="Previous"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg></button>
      <div class="cmgp-carousel-track-wrap">
        <div class="cmgp-carousel-track">
          {%- if use_dynamic_tag_carousel -%}
            {%- for filter_value in dynamic_tag_filter.values -%}
              {%- if filter_value.count > 0 -%}
                {%- assign dv_val = filter_value.value | handleize -%}
                {%- assign dv_label = filter_value.label | default: filter_value.value -%}
                {%- assign dv_active = filter_value.active -%}
                {%- assign dyn_img = nil -%}
                {%- for p in collection_products -%}
                  {%- assign p_has_tag = false -%}
                  {%- for t in p.tags -%}
                    {%- assign th = t | handleize -%}
                    {%- assign fv_handle = filter_value.value | handleize -%}
                    {%- if th == fv_handle or th != blank and fv_handle != blank and th contains fv_handle or fv_handle contains th -%}
                      {%- assign p_has_tag = true -%}
                      {%- break -%}
                    {%- endif -%}
                  {%- endfor -%}
                  {%- if p_has_tag and p.featured_image != blank -%}
                    {%- assign dyn_img = p.featured_image -%}
                    {%- break -%}
                  {%- endif -%}
                {%- endfor -%}
                <button type="button" class="cmgp-carousel-item{% if dv_active %} active{% endif %}" data-filter-value="{{ dv_val }}" data-filter-param="{{ tag_param }}">
                  <span class="cmgp-carousel-item__img">
                    {%- if dyn_img != blank -%}
                      {{ dyn_img | image_url: width: 200 | image_tag: loading: 'lazy', alt: dv_label, class: 'cmgp-carousel-item__image' }}
                    {%- else -%}
                      <span class="cmgp-carousel-item__placeholder">{{ dv_label | slice: 0 }}</span>
                    {%- endif -%}
                  </span>
                  <span class="cmgp-carousel-item__title">{{ dv_label }}</span>
                </button>
              {%- endif -%}
            {%- endfor -%}
          {%- else -%}
          {%- assign carousel_shown = 0 -%}
          {%- assign used_product_ids_str = '' -%}
          {%- assign used_image_ids_str = '' -%}
          {%- for block in category_carousel_blocks -%}
            {%- if carousel_shown >= carousel_max_show -%}
              {%- break -%}
            {%- endif -%}
            {%- assign fval = block.settings.filter_value | default: block.settings.title | strip | handleize -%}
            {%- assign fval_check = '|' | append: fval | append: '|' -%}
            {%- assign block_filter_type = block.settings.filter_type | default: 'product_type' -%}
            {%- if coll_handle_down contains 'engagement-rings' -%}
              {%- assign block_filter_type = 'tag' -%}
            {%- endif -%}
            {%- if coll_handle_down contains 'mens-jewelry' or coll_handle_down contains 'mens-jewellery' -%}
              {%- assign block_filter_type = 'tag' -%}
            {%- endif -%}
            {%- if carousel_allowlist_raw != blank -%}
              {%- assign block_filter_type = 'tag' -%}
            {%- endif -%}
            {%- assign show_in_collection = false -%}
            {%- assign block_product_count = 0 -%}
            {%- for p in collection_products -%}
              {%- assign p_has_color_render = true -%}
              {%- if is_metal_collection and color_filter_handle != blank -%}
                {%- assign p_has_color_render = false -%}
                {%- assign color_opt_idx_r = nil -%}
                {%- for opt in p.options_with_values -%}
                  {%- assign oln = opt.name | downcase -%}
                  {%- if oln == 'color' or oln == 'colour' or oln == 'metal' or oln == 'metal color' or oln == 'finish' or oln == 'material' -%}
                    {%- assign color_opt_idx_r = forloop.index0 -%}
                    {%- break -%}
                  {%- endif -%}
                {%- endfor -%}
                {%- if color_opt_idx_r != nil -%}
                  {%- assign silver_alt_r = 'sterling' -%}
                  {%- for v in p.variants -%}
                    {%- assign vh_r = v.options[color_opt_idx_r] | handleize -%}
                    {%- if vh_r contains color_filter_handle -%}
                      {%- assign p_has_color_render = true -%}
                      {%- break -%}
                    {%- endif -%}
                    {%- if color_filter_handle == 'silver' and vh_r contains silver_alt_r -%}
                      {%- assign p_has_color_render = true -%}
                      {%- break -%}
                    {%- endif -%}
                  {%- endfor -%}
                {%- endif -%}
                {%- if p_has_color_render == false and color_filter_handle == 'silver' -%}
                  {%- assign prod_mat_r = p.metafields.custom.material | default: p.metafields.custom.jewelry_material | default: p.metafields.custom.metal | downcase -%}
                  {%- assign prod_type_r = p.type | downcase -%}
                  {%- assign prod_tags_r = p.tags | join: ' ' | downcase -%}
                  {%- if prod_mat_r contains 'silver' or prod_mat_r contains 'sterling' or prod_type_r contains 'silver' or prod_tags_r contains 'silver' or prod_tags_r contains 'sterling' -%}
                    {%- assign p_has_color_render = true -%}
                  {%- endif -%}
                {%- endif -%}
              {%- endif -%}
              {%- unless p_has_color_render -%}{%- continue -%}{%- endunless -%}
              {%- comment -%} Allowlist set ho to sirf tag se count karo, product_type na use karo {%- endcomment -%}
              {%- if block_filter_type == 'product_type' and carousel_allowlist_raw == blank -%}
                {%- assign ptype_h = p.metafields.custom.type | default: p.type | handleize -%}
                {%- assign type_matches = false -%}
                {%- if ptype_h == fval -%}
                  {%- assign type_matches = true -%}
                {%- elsif ptype_h != blank and fval != blank -%}
                  {%- if ptype_h contains fval or fval contains ptype_h -%}
                    {%- assign type_matches = true -%}
                  {%- endif -%}
                {%- endif -%}
                {%- if type_matches -%}
                  {%- assign block_product_count = block_product_count | plus: 1 -%}
                {%- endif -%}
              {%- elsif block_filter_type == 'tag' -%}
                {%- for t in p.tags -%}
                  {%- assign th = t | handleize -%}
                  {%- assign tag_matches = false -%}
                  {%- if th == fval -%}
                    {%- assign tag_matches = true -%}
                  {%- elsif th != blank and fval != blank -%}
                    {%- if th contains fval or fval contains th -%}
                      {%- assign tag_matches = true -%}
                    {%- endif -%}
                  {%- endif -%}
                  {%- if tag_matches -%}
                    {%- assign block_product_count = block_product_count | plus: 1 -%}
                    {%- break -%}
                  {%- endif -%}
                {%- endfor -%}
              {%- endif -%}
            {%- endfor -%}
            {%- if block_product_count > 0 -%}
              {%- assign show_in_collection = true -%}
            {%- endif -%}
            {%- comment -%} Tag: pehle page me na ho to bhi dikhao agar Storefront Product tag filter me is tag ka count > 0 ho (poori collection ka count) {%- endcomment -%}
            {%- if block_filter_type == 'tag' and show_in_collection == false and dynamic_tag_filter != nil -%}
              {%- for fv in dynamic_tag_filter.values -%}
                {%- if fv.count > 0 -%}
                  {%- assign fv_h = fv.value | handleize -%}
                  {%- if fv_h == fval or fval != blank and fv_h != blank and fv_h contains fval or fval contains fv_h -%}
                    {%- assign show_in_collection = true -%}
                    {%- assign block_product_count = fv.count -%}
                    {%- break -%}
                  {%- endif -%}
                {%- endif -%}
              {%- endfor -%}
            {%- endif -%}
            {%- comment -%} Tag filter: sirf tab dikhao jab is collection me is tag ke products hon; bina product ke filter kabhi mat dikhao {%- endcomment -%}
            {%- comment -%} Sirf is collection me products hone par hi carousel item dikhao - doosri collection / filters fallback nahi {%- endcomment -%}
            {%- assign show_this_carousel_block = false -%}
            {%- if show_in_collection -%}
              {%- assign fval_in_allowlist = false -%}
              {%- assign fval_is_winner = false -%}
              {%- if earrings_tag_allowlist_handles != blank -%}
                {%- if earrings_tag_allowlist_handles contains fval_check -%}
                  {%- assign fval_in_allowlist = true -%}
                  {%- assign fval_is_winner = true -%}
                {%- else -%}
                  {%- assign _earr2 = earrings_tag_allowlist_handles | split: '|' -%}
                  {%- for _e2 in _earr2 -%}
                    {%- assign _e2c = _e2 | strip -%}
                    {%- if _e2c != blank and fval == _e2c or fval contains _e2c or _e2c contains fval -%}
                      {%- assign fval_in_allowlist = true -%}
                      {%- assign fval_is_winner = true -%}
                      {%- break -%}
                    {%- endif -%}
                  {%- endfor -%}
                {%- endif -%}
              {%- endif -%}
              {%- if carousel_allowlist_handles == blank and fval_in_allowlist == false -%}
                {%- assign fval_in_allowlist = true -%}
                {%- assign fval_is_winner = true -%}
              {%- elsif carousel_allowlist_handles != blank and fval_in_allowlist == false -%}
                {%- comment -%} Allowlist set ho to sirf allowlist + products check; tag vs type winner mat use karo {%- endcomment -%}
                {%- if carousel_allowlist_handles contains fval_check -%}
                  {%- assign fval_in_allowlist = true -%}
                  {%- assign fval_is_winner = true -%}
                {%- else -%}
                  {%- assign fval_allow_arr = carousel_allowlist_handles | split: '|' -%}
                  {%- for fah in fval_allow_arr -%}
                    {%- assign fah_clean = fah | strip -%}
                    {%- if fah_clean == blank -%}{%- continue -%}{%- endif -%}
                    {%- if fval == fah_clean or fval contains fah_clean or fah_clean contains fval -%}
                      {%- assign fval_in_allowlist = true -%}
                      {%- assign fval_is_winner = true -%}
                      {%- break -%}
                    {%- endif -%}
                  {%- endfor -%}
                {%- endif -%}
              {%- endif -%}
              {%- if fval_in_allowlist and fval_is_winner -%}
                {%- assign show_this_carousel_block = true -%}
                {%- assign carousel_shown = carousel_shown | plus: 1 -%}
              {%- endif -%}
              {%- comment -%} Tag: collection me ye tag ho to zaroor dikhao - allowlist ki parwah mat karo {%- endcomment -%}
              {%- if block_filter_type == 'tag' and show_in_collection -%}
                {%- assign _was_shown = show_this_carousel_block -%}
                {%- assign show_this_carousel_block = true -%}
                {%- if _was_shown == false -%}
                  {%- assign carousel_shown = carousel_shown | plus: 1 -%}
                {%- endif -%}
              {%- endif -%}
            {%- endif -%}
            {%- comment -%} 0 products wala carousel item kabhi mat dikhao {%- endcomment -%}
            {%- if block_product_count == 0 -%}
              {%- assign show_this_carousel_block = false -%}
            {%- endif -%}
            {%- if show_this_carousel_block -%}
            {%- comment -%} Tag block: hamesha filter.p.tag use karo, product_type bilkul mat use karo {%- endcomment -%}
            {%- if block_filter_type == 'tag' or carousel_allowlist_raw != blank -%}
              {%- assign block_param = tag_param -%}
            {%- else -%}
              {%- assign block_param = type_param -%}
            {%- endif -%}
            {%- assign is_active = false -%}
            {%- for f in collection.filters -%}
              {%- if f.param_name == block_param -%}
                {%- for v in f.values -%}
                  {%- assign v_handle = v.value | handleize -%}
                  {%- if v.active -%}
                    {%- if v.value == fval or v.value == block.settings.filter_value -%}
                      {%- assign is_active = true -%}
                      {%- break -%}
                    {%- endif -%}
                    {%- if v_handle == fval -%}
                      {%- assign is_active = true -%}
                      {%- break -%}
                    {%- endif -%}
                  {%- endif -%}
                {%- endfor -%}
                {%- break -%}
              {%- endif -%}
            {%- endfor -%}
            {%- comment -%} Carousel image: prefer collection product image (color-matched), block.settings.image only as fallback {%- endcomment -%}
            {%- assign carousel_box_image = nil -%}
            {%- if active_vendor != nil and active_vendor != blank -%}
              {%- assign active_vendor_handle = active_vendor | handleize -%}
              {%- assign manual_brand_img = nil -%}
              {%- for i in (1..5) -%}
                {%- assign bname_key = 'brand_' | append: i | append: '_name' -%}
                {%- assign bimg_key = 'brand_' | append: i | append: '_image' -%}
                {%- assign bname = block.settings[bname_key] | strip -%}
                {%- assign bimg = block.settings[bimg_key] -%}
                {%- if bname != blank and bimg != blank -%}
                  {%- assign bname_handle = bname | handleize -%}
                  {%- if bname_handle == active_vendor_handle or bname == active_vendor -%}
                    {%- assign manual_brand_img = bimg -%}
                    {%- break -%}
                  {%- endif -%}
                {%- endif -%}
              {%- endfor -%}
              {%- assign use_manual_brand = false -%}
              {%- if manual_brand_img != nil -%}
                {%- assign manual_img_id_check = '|' | append: manual_brand_img.id | append: '|' -%}
                {%- unless used_image_ids_str contains manual_img_id_check -%}
                  {%- assign use_manual_brand = true -%}
                {%- endunless -%}
              {%- endif -%}
              {%- comment -%} Prefer collection product image over manual brand image {%- endcomment -%}
                {%- assign brand_product_for_image = nil -%}
                {%- assign brand_product_color_img = nil -%}
                {%- for p in carousel_image_products -%}
                  {%- assign pid_check = '|' | append: p.id | append: '|' -%}
                  {%- if used_product_ids_str contains pid_check -%}{%- continue -%}{%- endif -%}
                  {%- if p.vendor != active_vendor -%}{%- continue -%}{%- endif -%}
                  {%- assign p_img = p.featured_image -%}
                  {%- if carousel_active_color_str != blank -%}
                    {%- assign carousel_color_variant = nil -%}
                    {%- for opt in p.options_with_values -%}
                      {%- assign oln = opt.name | downcase -%}
                      {%- if oln == 'color' or oln == 'colour' or oln == 'metal' or oln == 'metal color' or oln == 'finish' or oln == 'material' -%}
                        {%- assign co_idx = forloop.index0 -%}
                        {%- assign active_colors = carousel_active_color_str | split: '^^^' -%}
                        {%- for v in p.variants -%}
                          {%- assign vopt = v.options[co_idx] | handleize -%}
                          {%- assign silver_alt = 'sterling' -%}
                          {%- assign v_match = false -%}
                          {%- for ac in active_colors -%}
                            {%- assign ach = ac | handleize -%}
                            {%- if vopt contains ach -%}
                              {%- assign v_match = true -%}
                              {%- break -%}
                            {%- elsif ach == 'silver' and vopt contains silver_alt -%}
                              {%- assign v_match = true -%}
                              {%- break -%}
                            {%- endif -%}
                          {%- endfor -%}
                          {%- if v_match -%}
                            {%- if v.featured_media != blank or v.image != blank -%}
                              {%- assign carousel_color_variant = v -%}
                              {%- break -%}
                            {%- endif -%}
                          {%- endif -%}
                        {%- endfor -%}
                        {%- if carousel_color_variant != nil -%}
                          {%- if carousel_color_variant.featured_media != blank -%}
                            {%- assign p_img = carousel_color_variant.featured_media -%}
                          {%- elsif carousel_color_variant.image != blank -%}
                            {%- assign p_img = carousel_color_variant.image -%}
                          {%- endif -%}
                        {%- else -%}
                          {%- comment -%} No matching color variant: keep product featured image as fallback {%- endcomment -%}
                        {%- endif -%}
                        {%- break -%}
                      {%- endif -%}
                    {%- endfor -%}
                  {%- endif -%}
                  {%- if p_img == blank -%}{%- continue -%}{%- endif -%}
                  {%- assign img_id_check = '|' | append: p_img.id | append: '|' -%}
                  {%- if used_image_ids_str contains img_id_check -%}{%- continue -%}{%- endif -%}
                  {%- assign p_match = false -%}
                  {%- if block_filter_type == 'product_type' -%}
                    {%- assign ptype_h = p.metafields.custom.type | default: p.type | handleize -%}
                    {%- if ptype_h == fval -%}{%- assign p_match = true -%}{%- endif -%}
                  {%- elsif block_filter_type == 'tag' -%}
                    {%- for t in p.tags -%}
                      {%- assign th = t | handleize -%}
                      {%- if th == fval or th != blank and fval != blank and th contains fval or fval contains th -%}
                        {%- assign p_match = true -%}
                        {%- break -%}
                      {%- endif -%}
                    {%- endfor -%}
                  {%- endif -%}
                  {%- if p_match -%}
                    {%- assign brand_product_for_image = p -%}
                    {%- assign brand_product_color_img = p_img -%}
                    {%- break -%}
                  {%- endif -%}
                {%- endfor -%}
                {%- if brand_product_for_image != nil and brand_product_color_img != nil -%}
                  {%- assign carousel_box_image = brand_product_color_img -%}
                  {%- assign used_product_ids_str = used_product_ids_str | append: '|' | append: brand_product_for_image.id | append: '|' -%}
                  {%- assign used_image_ids_str = used_image_ids_str | append: '|' | append: brand_product_color_img.id | append: '|' -%}
                {%- elsif use_manual_brand -%}
                  {%- assign carousel_box_image = manual_brand_img -%}
                  {%- assign used_image_ids_str = used_image_ids_str | append: '|' | append: manual_brand_img.id | append: '|' -%}
                {%- endif -%}
            {%- else -%}
              {%- comment -%} No brand: prefer collection product image (color-matched), block image only as fallback {%- endcomment -%}
              {%- assign force_placeholder = false -%}
              {%- if carousel_box_image == blank -%}
                {%- assign fallback_product = nil -%}
                {%- assign fallback_product_img = nil -%}
                {%- for p in carousel_image_products -%}
                  {%- assign pid_check = '|' | append: p.id | append: '|' -%}
                  {%- if used_product_ids_str contains pid_check -%}{%- continue -%}{%- endif -%}
                  {%- assign p_img = p.featured_image -%}
                  {%- if carousel_active_color_str != blank -%}
                    {%- assign carousel_color_variant = nil -%}
                    {%- for opt in p.options_with_values -%}
                      {%- assign oln = opt.name | downcase -%}
                      {%- if oln == 'color' or oln == 'colour' or oln == 'metal' or oln == 'metal color' or oln == 'finish' or oln == 'material' -%}
                        {%- assign co_idx = forloop.index0 -%}
                        {%- assign active_colors = carousel_active_color_str | split: '^^^' -%}
                        {%- for v in p.variants -%}
                          {%- assign vopt = v.options[co_idx] | handleize -%}
                          {%- assign silver_alt = 'sterling' -%}
                          {%- assign v_match = false -%}
                          {%- for ac in active_colors -%}
                            {%- assign ach = ac | handleize -%}
                            {%- if vopt contains ach -%}
                              {%- assign v_match = true -%}
                              {%- break -%}
                            {%- elsif ach == 'silver' and vopt contains silver_alt -%}
                              {%- assign v_match = true -%}
                              {%- break -%}
                            {%- endif -%}
                          {%- endfor -%}
                          {%- if v_match -%}
                            {%- if v.featured_media != blank -%}
                              {%- assign carousel_color_variant = v -%}
                              {%- break -%}
                            {%- elsif v.image != blank -%}
                              {%- assign carousel_color_variant = v -%}
                              {%- break -%}
                            {%- endif -%}
                          {%- endif -%}
                        {%- endfor -%}
                        {%- if carousel_color_variant != nil -%}
                          {%- if carousel_color_variant.featured_media != blank -%}
                            {%- assign p_img = carousel_color_variant.featured_media -%}
                          {%- elsif carousel_color_variant.image != blank -%}
                            {%- assign p_img = carousel_color_variant.image -%}
                          {%- endif -%}
                        {%- else -%}
                          {%- comment -%} No matching color variant: keep product featured image as fallback {%- endcomment -%}
                        {%- endif -%}
                        {%- break -%}
                      {%- endif -%}
                    {%- endfor -%}
                  {%- endif -%}
                  {%- if p_img == blank -%}{%- continue -%}{%- endif -%}
                  {%- assign img_id_check = '|' | append: p_img.id | append: '|' -%}
                  {%- if used_image_ids_str contains img_id_check -%}{%- continue -%}{%- endif -%}
                  {%- assign p_match = false -%}
                  {%- if block_filter_type == 'product_type' -%}
                    {%- assign ptype_h = p.metafields.custom.type | default: p.type | handleize -%}
                    {%- if ptype_h == fval -%}{%- assign p_match = true -%}{%- endif -%}
                  {%- elsif block_filter_type == 'tag' -%}
                    {%- for t in p.tags -%}
                      {%- assign th = t | handleize -%}
                      {%- if th == fval or th != blank and fval != blank and th contains fval or fval contains th -%}
                        {%- assign p_match = true -%}
                        {%- break -%}
                      {%- endif -%}
                    {%- endfor -%}
                  {%- endif -%}
                  {%- if p_match -%}
                    {%- assign fallback_product = p -%}
                    {%- assign fallback_product_img = p_img -%}
                    {%- break -%}
                  {%- endif -%}
                {%- endfor -%}
                {%- if fallback_product != nil and fallback_product_img != nil -%}
                  {%- assign carousel_box_image = fallback_product_img -%}
                  {%- assign used_product_ids_str = used_product_ids_str | append: '|' | append: fallback_product.id | append: '|' -%}
                  {%- assign used_image_ids_str = used_image_ids_str | append: '|' | append: fallback_product_img.id | append: '|' -%}
                {%- endif -%}
              {%- endif -%}
              {%- if carousel_box_image != blank -%}
                {%- assign used_image_ids_str = used_image_ids_str | append: '|' | append: carousel_box_image.id | append: '|' -%}
              {%- endif -%}
            {%- endif -%}
            {%- comment -%} Option: jis carousel filter ki image na ho wo top par show na ho {%- endcomment -%}
            {%- assign item_has_any_image = false -%}
            {%- if carousel_box_image != blank or block.settings.image != blank -%}
              {%- assign item_has_any_image = true -%}
            {%- endif -%}
            {%- comment -%} Tag carousel (earrings/necklaces): image na ho to bhi dikhao - tag laga ho to filter show hona chahiye {%- endcomment -%}
            {%- assign skip_hide_no_image = false -%}
            {%- if block_filter_type == 'tag' -%}
              {%- assign skip_hide_no_image = true -%}
            {%- endif -%}
            {%- if hide_carousel_items_without_image and item_has_any_image == false and skip_hide_no_image == false -%}
              {%- assign show_this_carousel_block = false -%}
            {%- endif -%}
            {%- if show_this_carousel_block -%}
            <button type="button" class="cmgp-carousel-item{% if is_active %} active{% endif %}" data-filter-value="{{ fval | escape }}" data-filter-param="{{ block_param }}" data-block-id="{{ block.id }}" {{ block.shopify_attributes }}>
              <span class="cmgp-carousel-item__img">
                {%- if carousel_box_image != blank -%}
                  {{ carousel_box_image | image_url: width: 200 | image_tag: loading: 'lazy', alt: block.settings.title, class: 'cmgp-carousel-item__image' }}
                {%- elsif block.settings.image != blank and force_placeholder != true -%}
                  {{ block.settings.image | image_url: width: 200 | image_tag: loading: 'lazy', alt: block.settings.title, class: 'cmgp-carousel-item__image' }}
                {%- else -%}
                  <span class="cmgp-carousel-item__placeholder">{{ block.settings.title | slice: 0 }}</span>
                {%- endif -%}
              </span>
              <span class="cmgp-carousel-item__title">{{ block.settings.title | default: block.settings.filter_value | capitalize }}</span>
            </button>
            {%- assign carousel_shown = carousel_shown | plus: 1 -%}
            {%- assign carousel_any_rendered = true -%}
            {%- endif -%}
          {%- endif -%}
          {%- endfor -%}
          {%- endif -%}
        </div>
      </div>
      <button type="button" class="cmgp-carousel-btn cmgp-carousel-next" aria-label="Next"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg></button>
    </div>
    {%- endif -%}
    <div class="cmgp-layout">
      
      <!-- Sidebar (Filters) - hidden on desktop when filter drawer is used -->
      <aside class="cmgp-sidebar{% if sticky_sidebar %} cmgp-sidebar-sticky{% endif %}{% if filter_drawer_desktop %} cmgp-sidebar-drawer-only{% endif %}" id="cmgp-sidebar-{{ section_id }}">
        <div class="cmgp-sidebar-content">
          <form method="get" action="{{ collection.url }}" id="cmgp-filter-form-{{ section_id }}" class="cmgp-filter-form">
            <input type="hidden" name="sort_by" value="{{ collection.sort_by | default: 'manual' }}">
            <h2 class="cmgp-sidebar-title">FILTER</h2>
            <div class="cmgp-filters">
            {%- if collection.filters.size > 0 -%}
              {%- for filter in collection.filters -%}
                {%- if is_rings_collection_sidebar and filter.param_name == type_param or is_rings_collection_sidebar and filter.param_name == tag_param -%}
                  {%- continue -%}
                {%- endif -%}
                {%- assign filter_label_clean = filter.label | strip -%}
                {%- assign filter_hidden = false -%}
                {%- if filters_to_hide_str != blank -%}
                  {%- assign hidden_arr = filters_to_hide_str | split: ',' -%}
                  {%- for h in hidden_arr -%}
                    {%- assign h_clean = h | strip -%}
                    {%- if filter_label_clean == h_clean -%}
                      {%- assign filter_hidden = true -%}
                      {%- break -%}
                    {%- endif -%}
                  {%- endfor -%}
                {%- endif -%}
                {%- assign filter_in_show_list = true -%}
                {%- if filters_to_show_str != blank -%}
                  {%- assign filter_in_show_list = false -%}
                  {%- assign show_arr = filters_to_show_str | split: ',' -%}
                  {%- for s in show_arr -%}
                    {%- assign s_clean = s | strip -%}
                    {%- if filter_label_clean == s_clean -%}
                      {%- assign filter_in_show_list = true -%}
                      {%- break -%}
                    {%- endif -%}
                  {%- endfor -%}
                {%- endif -%}
                {%- unless filter_hidden -%}
                {%- if filter_in_show_list -%}
                {%- assign sidebar_filter_has_visible = false -%}
                {%- capture sidebar_filter_group_content -%}
                <div class="cmgp-filter-group{% if forloop.first %} active{% endif %}">
                  <h3 class="cmgp-filter-title">{{ filter.label }}</h3>
                  <div class="cmgp-filter-content">
                    {%- case filter.type -%}
                      {%- when 'list' -%}
                        {%- comment -%} Color/Colour/Metal: only variant colors that exist in this collection {%- endcomment -%}
                        {%- assign is_color_filter = false -%}
                        {%- assign color_filter_labels = 'Color,Colour,Metal,Metal Color' | split: ',' -%}
                        {%- for cf in color_filter_labels -%}
                          {%- assign cf_clean = cf | strip -%}
                          {%- if filter_label_clean == cf_clean -%}
                            {%- assign is_color_filter = true -%}
                            {%- break -%}
                          {%- endif -%}
                        {%- endfor -%}
                        {%- if is_color_filter -%}
                          {%- comment -%} Normalize to: Yellow Gold, White Gold, Rose Gold, Vermeil, Silver (no 14K/18K) {%- endcomment -%}
                          {%- assign color_display_order = 'Yellow Gold,White Gold,Rose Gold,Vermeil,Silver' | split: ',' -%}
                          {%- assign unique_norm = '' -%}
                          {%- for product in collection_products -%}
                            {%- assign color_opt = nil -%}
                            {%- for option in product.options_with_values -%}
                              {%- assign oname = option.name | downcase -%}
                              {%- if oname == 'color' or oname == 'colour' or oname == 'metal' or oname == 'metal color' -%}
                                {%- assign color_opt = option -%}
                                {%- break -%}
                              {%- endif -%}
                            {%- endfor -%}
                            {%- if color_opt -%}
                              {%- for v in color_opt.values -%}
                                {%- assign raw_lower = v | downcase -%}
                                {%- assign norm = '' -%}
                                {%- if raw_lower contains 'vermeil' -%}{%- assign norm = 'Vermeil' -%}
                                {%- elsif raw_lower contains 'silver' or raw_lower contains '925' -%}{%- assign norm = 'Silver' -%}
                                {%- elsif raw_lower contains 'rose' -%}{%- assign norm = 'Rose Gold' -%}
                                {%- elsif raw_lower contains 'white' -%}{%- assign norm = 'White Gold' -%}
                                {%- elsif raw_lower contains 'yellow' -%}{%- assign norm = 'Yellow Gold' -%}
                                {%- endif -%}
                                {%- if norm != '' -%}
                                  {%- assign norm_in = false -%}
                                  {%- assign uarr = unique_norm | split: '^^^' -%}
                                  {%- for nn in uarr -%}{%- if nn == norm -%}{%- assign norm_in = true -%}{%- break -%}{%- endif -%}{%- endfor -%}
                                  {%- unless norm_in -%}
                                    {%- if unique_norm == '' -%}{%- assign unique_norm = norm -%}
                                    {%- else -%}{%- assign unique_norm = unique_norm | append: '^^^' | append: norm -%}
                                    {%- endif -%}
                                  {%- endunless -%}
                                {%- endif -%}
                              {%- endfor -%}
                            {%- endif -%}
                          {%- endfor -%}
                          {%- for norm_label in color_display_order -%}
                            {%- assign norm_in_list = false -%}
                            {%- assign uarr = unique_norm | split: '^^^' -%}
                            {%- for nn in uarr -%}{%- if nn == norm_label -%}{%- assign norm_in_list = true -%}{%- break -%}{%- endif -%}{%- endfor -%}
                            {%- unless norm_in_list -%}{%- continue -%}{%- endunless -%}
                            {%- assign handles_str = '' -%}
                            {%- assign norm_count = 0 -%}
                            {%- for product in collection_products -%}
                              {%- assign color_opt = nil -%}
                              {%- for option in product.options_with_values -%}
                                {%- assign oname = option.name | downcase -%}
                                {%- if oname == 'color' or oname == 'colour' or oname == 'metal' or oname == 'metal color' -%}
                                  {%- assign color_opt = option -%}
                                  {%- break -%}
                                {%- endif -%}
                              {%- endfor -%}
                              {%- if color_opt -%}
                                {%- assign product_has_norm = false -%}
                                {%- for v in color_opt.values -%}
                                  {%- assign raw_lower = v | downcase -%}
                                  {%- assign n = '' -%}
                                  {%- if raw_lower contains 'vermeil' -%}{%- assign n = 'Vermeil' -%}
                                  {%- elsif raw_lower contains 'silver' or raw_lower contains '925' -%}{%- assign n = 'Silver' -%}
                                  {%- elsif raw_lower contains 'rose' -%}{%- assign n = 'Rose Gold' -%}
                                  {%- elsif raw_lower contains 'white' -%}{%- assign n = 'White Gold' -%}
                                  {%- elsif raw_lower contains 'yellow' -%}{%- assign n = 'Yellow Gold' -%}
                                  {%- endif -%}
                                  {%- if n == norm_label -%}
                                    {%- assign product_has_norm = true -%}
                                    {%- assign h = v | handleize -%}
                                    {%- assign h_in = false -%}
                                    {%- assign harr = handles_str | split: ',,,' -%}
                                    {%- for hh in harr -%}{%- if hh == h -%}{%- assign h_in = true -%}{%- break -%}{%- endif -%}{%- endfor -%}
                                    {%- unless h_in -%}
                                      {%- if handles_str == '' -%}{%- assign handles_str = h -%}
                                      {%- else -%}{%- assign handles_str = handles_str | append: ',,,' | append: h -%}
                                      {%- endif -%}
                                    {%- endunless -%}
                                  {%- endif -%}
                                {%- endfor -%}
                                {%- if product_has_norm -%}{%- assign norm_count = norm_count | plus: 1 -%}{%- endif -%}
                              {%- endif -%}
                            {%- endfor -%}
                            {%- assign norm_active = false -%}
                            {%- assign harr = handles_str | split: ',,,' -%}
                            {%- for hh in harr -%}
                              {%- for fv in filter.values -%}
                                {%- if fv.value == hh and fv.active -%}{%- assign norm_active = true -%}{%- break -%}{%- endif -%}
                              {%- endfor -%}
                              {%- if norm_active -%}{%- break -%}{%- endif -%}
                            {%- endfor -%}
                            {%- if norm_count > 0 -%}
                            {%- assign sidebar_filter_has_visible = true -%}
                            <label class="cmgp-filter-item">
                              <input type="checkbox" class="cmgp-color-group-checkbox" data-param-name="{{ filter.param_name }}" data-variant-values="{{ handles_str }}" name="" value="" {% if norm_active %}checked{% endif %}>
                              <span>{{ norm_label }} ({{ norm_count }})</span>
                            </label>
                            {%- endif -%}
                          {%- endfor -%}
                        {%- else -%}
                          {%- for filter_value in filter.values -%}
                            {%- if filter_value.count > 0 -%}
                            {%- assign sidebar_filter_has_visible = true -%}
                            <label class="cmgp-filter-item">
                              <input type="checkbox" name="{{ filter.param_name }}" value="{{ filter_value.value }}" {% if filter_value.active %}checked{% endif %}>
                              <span>{{ filter_value.label }} ({{ filter_value.count }})</span>
                            </label>
                            {%- endif -%}
                          {%- endfor -%}
                        {%- endif -%}
                      {%- when 'price_range' -%}
                        {%- assign sidebar_filter_has_visible = true -%}
                        {%- comment -%} Shopify filter.range_max is in cents; show page max = actual collection max (like Eternate) {%- endcomment -%}
                        {%- assign price_max_raw = filter.range_max -%}
                        {%- if price_max_raw != nil and price_max_raw != 0 -%}
                          {%- assign price_max_dollars = price_max_raw | divided_by: 100 -%}
                        {%- else -%}
                          {%- assign price_max_dollars = 0 -%}
                          {%- for product in collection_products -%}
                            {%- assign p_dollars = product.price | divided_by: 100 -%}
                            {%- if p_dollars > price_max_dollars -%}{%- assign price_max_dollars = p_dollars -%}{%- endif -%}
                          {%- endfor -%}
                          {%- if price_max_dollars == 0 -%}{%- assign price_max_dollars = 10000 -%}{%- endif -%}
                        {%- endif -%}
                        {%- assign price_min_val = filter.min_value.value | money_without_currency | remove: ',' | default: 0 -%}
                        {%- assign price_max_val = filter.max_value.value | money_without_currency | remove: ',' | default: price_max_dollars -%}
                        <div class="cmgp-price-range" data-price-max="{{ price_max_dollars }}" data-section-id="{{ section_id }}">
                          <div class="cmgp-price-range-slider-wrap">
                            <span class="cmgp-price-range-fill" aria-hidden="true"></span>
                            <input type="range" class="cmgp-price-slider cmgp-price-slider-min" id="price-slider-min-{{ section_id }}" min="0" max="{{ price_max_dollars }}" value="{{ price_min_val }}" step="1" aria-label="Min price">
                            <input type="range" class="cmgp-price-slider cmgp-price-slider-max" id="price-slider-max-{{ section_id }}" min="0" max="{{ price_max_dollars }}" value="{{ price_max_val }}" step="1" aria-label="Max price">
                          </div>
                          <div class="cmgp-price-range-inputs">
                            <span class="cmgp-price-prefix">$</span>
                            <input type="number" id="price-min-{{ section_id }}" name="{{ filter.min_value.param_name }}" placeholder="0" value="{% if filter.min_value.value %}{{ filter.min_value.value | money_without_currency | remove: ',' }}{% else %}0{% endif %}" min="0" step="1">
                            <span class="cmgp-price-dash">-</span>
                            <span class="cmgp-price-prefix">$</span>
                            <input type="number" id="price-max-{{ section_id }}" name="{{ filter.max_value.param_name }}" placeholder="{{ price_max_dollars }}" value="{% if filter.max_value.value %}{{ filter.max_value.value | money_without_currency | remove: ',' }}{% else %}{{ price_max_dollars }}{% endif %}" min="0" step="1">
                          </div>
                          <button type="submit" class="cmgp-price-apply">Apply</button>
                        </div>
                    {%- endcase -%}
                  </div>
                </div>
                {%- endcapture -%}
                {%- if sidebar_filter_has_visible -%}{{ sidebar_filter_group_content }}{%- endif -%}
                {%- endif -%}
                {%- endunless -%}
              {%- endfor -%}
            {%- endif -%}
            
            {%- if show_category_filter -%}
            {%- assign is_rings_collection_sidebar = false -%}
            {%- assign rings_check_sidebar = '|rings|all-rings|shop-rings|rings-shop|' -%}
            {%- if rings_check_sidebar contains coll_handle_check or ring_coll_handles_str contains coll_handle_check -%}
              {%- assign is_rings_collection_sidebar = true -%}
            {%- endif -%}
            {%- assign sidebar_shop_by_type_handles = 'engagement-rings,wedding-bands,promise-rings,fashion-rings,stackable-rings,mens-rings,ring-enhancers' -%}
            {%- assign unique_product_types = '' -%}
            {%- unless is_rings_collection_sidebar -%}
            {%- for product in collection_products -%}
              {%- if product.type != blank -%}
                {%- assign type_exists = false -%}
                {%- if unique_product_types == blank -%}
                  {%- assign unique_product_types = product.type -%}
                {%- else -%}
                  {%- assign types_array = unique_product_types | split: '|||' -%}
                  {%- for existing_type in types_array -%}
                    {%- if existing_type == product.type -%}
                      {%- assign type_exists = true -%}
                      {%- break -%}
                    {%- endif -%}
                  {%- endfor -%}
                  {%- unless type_exists -%}
                    {%- assign unique_product_types = unique_product_types | append: '|||' | append: product.type -%}
                  {%- endunless -%}
                {%- endif -%}
              {%- endif -%}
            {%- endfor -%}
            {%- endunless -%}
            
            {%- if is_rings_collection_sidebar -%}
              {%- comment -%} Rings: Shop By Type - sirf 7 filters, tag ya type jis ke zyada products hon {%- endcomment -%}
              {%- assign sidebar_type_param = type_param -%}
              {%- assign sidebar_tag_param = tag_param -%}
              {%- assign shop_by_type_list = sidebar_shop_by_type_handles | split: ',' -%}
              {%- assign has_any_shop_by_type = false -%}
              {%- for sh in shop_by_type_list -%}
                {%- assign sh_handle = sh | strip -%}
                {%- if sh_handle == blank -%}{%- continue -%}{%- endif -%}
                {%- assign count_type = 0 -%}
                {%- assign count_tag = 0 -%}
                {%- for p in collection_products -%}
                  {%- assign ptype_h = p.metafields.custom.type | default: p.type | handleize -%}
                  {%- assign type_ok = false -%}
                  {%- if ptype_h == sh_handle or ptype_h != blank and sh_handle != blank and ptype_h contains sh_handle or sh_handle contains ptype_h -%}
                    {%- assign type_ok = true -%}
                  {%- endif -%}
                  {%- if type_ok -%}{%- assign count_type = count_type | plus: 1 -%}{%- endif -%}
                  {%- for t in p.tags -%}
                    {%- assign th = t | handleize -%}
                    {%- if th == sh_handle or th != blank and sh_handle != blank and th contains sh_handle or sh_handle contains th -%}
                      {%- assign count_tag = count_tag | plus: 1 -%}
                      {%- break -%}
                    {%- endif -%}
                  {%- endfor -%}
                {%- endfor -%}
                {%- if count_type > 0 or count_tag > 0 -%}
                  {%- assign has_any_shop_by_type = true -%}
                {%- endif -%}
              {%- endfor -%}
            {%- endif -%}
            
            {%- if is_rings_collection_sidebar and has_any_shop_by_type -%}
              <div class="cmgp-filter-group">
                <h3 class="cmgp-filter-title">Shop By Type</h3>
                <div class="cmgp-filter-content">
                  {%- assign shop_by_type_labels = "engagement-rings:Engagement Rings|wedding-bands:Wedding Bands|promise-rings:Promise Rings|fashion-rings:Fashion Rings|stackable-rings:Stackable Rings|mens-rings:Men's Rings|ring-enhancers:Ring Enhancers" | split: '|' -%}
                  {%- for sh in shop_by_type_list -%}
                    {%- assign sh_handle = sh | strip -%}
                    {%- if sh_handle == blank -%}{%- continue -%}{%- endif -%}
                    {%- assign count_type = 0 -%}
                    {%- assign count_tag = 0 -%}
                    {%- assign count_any = 0 -%}
                    {%- for p in collection_products -%}
                      {%- assign ptype_h = p.metafields.custom.type | default: p.type | handleize -%}
                      {%- assign type_ok = false -%}
                      {%- if ptype_h == sh_handle or ptype_h != blank and sh_handle != blank and ptype_h contains sh_handle or sh_handle contains ptype_h -%}
                        {%- assign type_ok = true -%}
                      {%- endif -%}
                      {%- if type_ok -%}{%- assign count_type = count_type | plus: 1 -%}{%- endif -%}
                      {%- assign tag_ok = false -%}
                      {%- for t in p.tags -%}
                        {%- assign th = t | handleize -%}
                        {%- if th == sh_handle or th != blank and sh_handle != blank and th contains sh_handle or sh_handle contains th -%}
                          {%- assign tag_ok = true -%}
                          {%- break -%}
                        {%- endif -%}
                      {%- endfor -%}
                      {%- if tag_ok -%}{%- assign count_tag = count_tag | plus: 1 -%}{%- endif -%}
                      {%- if type_ok or tag_ok -%}
                        {%- assign count_any = count_any | plus: 1 -%}
                      {%- endif -%}
                    {%- endfor -%}
                    {%- assign total_count = count_any -%}
                    {%- if total_count > 0 -%}
                      {%- assign use_type_param = true -%}
                      {%- if count_tag > count_type -%}
                        {%- assign use_type_param = false -%}
                      {%- endif -%}
                      {%- assign param_name = sidebar_type_param -%}
                      {%- if use_type_param == false -%}
                        {%- assign param_name = sidebar_tag_param -%}
                      {%- endif -%}
                      {%- assign label_display = sh_handle | replace: '-', ' ' | split: ' ' | first | capitalize -%}
                      {%- for lbl in shop_by_type_labels -%}
                        {%- assign lbl_parts = lbl | split: ':' -%}
                        {%- if lbl_parts[0] == sh_handle and lbl_parts[1] != blank -%}
                          {%- assign label_display = lbl_parts[1] -%}
                          {%- break -%}
                        {%- endif -%}
                      {%- endfor -%}
                      {%- assign is_checked = false -%}
                      {%- for f in collection.filters -%}
                        {%- if f.param_name == param_name -%}
                          {%- for v in f.values -%}
                            {%- if v.active -%}
                              {%- assign vh = v.value | handleize -%}
                              {%- if vh == sh_handle or vh contains sh_handle or sh_handle contains vh -%}
                                {%- assign is_checked = true -%}
                                {%- break -%}
                              {%- endif -%}
                            {%- endif -%}
                          {%- endfor -%}
                          {%- break -%}
                        {%- endif -%}
                      {%- endfor -%}
                      <label class="cmgp-filter-item">
                        <input type="checkbox" name="{{ param_name }}" value="{{ sh_handle }}" data-product-type="{{ sh_handle }}"{% if is_checked %} checked{% endif %}>
                        <span>{{ label_display }} ({{ total_count }})</span>
                      </label>
                    {%- endif -%}
                  {%- endfor -%}
                </div>
              </div>
            {%- elsif unique_product_types != blank -%}
              <div class="cmgp-filter-group">
                <h3 class="cmgp-filter-title">Category</h3>
                <div class="cmgp-filter-content">
                  {%- assign types_list = unique_product_types | split: '|||' -%}
                  {%- for product_type in types_list -%}
                    {%- assign type_count = 0 -%}
                    {%- for product in collection_products -%}
                      {%- if product.type == product_type -%}
                        {%- assign type_count = type_count | plus: 1 -%}
                      {%- endif -%}
                    {%- endfor -%}
                    <label class="cmgp-filter-item">
                      <input type="checkbox" name="filter.p.product_type" value="{{ product_type | handleize }}" data-product-type="{{ product_type }}">
                      <span>{{ product_type }} ({{ type_count }})</span>
                    </label>
                  {%- endfor -%}
                </div>
              </div>
            {%- endif -%}
            {%- endif -%}
            
            {%- assign has_sidebar_filters = false -%}
            {%- if collection.filters.size > 0 -%}
              {%- assign has_sidebar_filters = true -%}
            {%- endif -%}
            {%- if unique_product_types != blank or is_rings_collection_sidebar and has_any_shop_by_type -%}
              {%- assign has_sidebar_filters = true -%}
            {%- endif -%}
            {%- if has_sidebar_filters == false -%}
              <p class="cmgp-no-filters">No filters available.</p>
            {%- endif -%}
            </div>
          </form>
        </div>
      </aside>
      
      <!-- Main Content (replaceable via Section Rendering for carousel filter) -->
      <main class="cmgp-main">
        <div id="cmgp-replaceable-content-{{ section_id }}" class="cmgp-replaceable-content">
        {%- if section.settings.show_sort_by == false -%}
          {%- assign show_sort_by = false -%}
        {%- else -%}
          {%- assign show_sort_by = true -%}
        {%- endif -%}
        {%- if section.settings.show_filter_button == false -%}
          {%- assign show_filter_button = false -%}
        {%- else -%}
          {%- assign show_filter_button = true -%}
        {%- endif -%}
        {%- if show_sort_by or show_filter_button -%}
        <div class="cmgp-sort-wrapper{% if section.settings.show_brilliant_earth_filters %} cmgp-sort-wrapper--brilliant{% endif %}">
          <div class="cmgp-sort-inner">
            {%- assign active_count = 0 -%}
            {%- for f in collection.filters -%}
              {%- for v in f.values -%}{%- if v.active -%}{%- assign active_count = active_count | plus: 1 -%}{%- endif -%}{%- endfor -%}
              {%- if f.type == 'price_range' -%}{%- if f.min_value.value != blank or f.max_value.value != blank -%}{%- assign active_count = active_count | plus: 1 -%}{%- endif -%}{%- endif -%}
            {%- endfor -%}
            {%- if section.settings.show_brilliant_earth_filters -%}
              {%- if show_sort_by -%}
              <div class="cmgp-sort-block cmgp-sort-block--sort">
                <label class="cmgp-sort-label" for="cmgp-sort-{{ section_id }}">SORT</label>
                <div class="cmgp-sort-select-wrap">
                  <select class="cmgp-sort-select" id="cmgp-sort-{{ section_id }}">
                    <option value="{{ collection.url }}?sort_by=manual" {% if collection.sort_by == 'manual' %}selected{% endif %}>Featured</option>
                  <option value="{{ collection.url }}?sort_by=best-selling" {% if collection.sort_by == 'best-selling' %}selected{% endif %}>Best Selling</option>
                  <option value="{{ collection.url }}?sort_by=title-ascending" {% if collection.sort_by == 'title-ascending' %}selected{% endif %}>Alphabetically, A-Z</option>
                  <option value="{{ collection.url }}?sort_by=title-descending" {% if collection.sort_by == 'title-descending' %}selected{% endif %}>Alphabetically, Z-A</option>
                  <option value="{{ collection.url }}?sort_by=price-ascending" {% if collection.sort_by == 'price-ascending' %}selected{% endif %}>Price, Low to High</option>
                  <option value="{{ collection.url }}?sort_by=price-descending" {% if collection.sort_by == 'price-descending' %}selected{% endif %}>Price, High to Low</option>
                  <option value="{{ collection.url }}?sort_by=created-ascending" {% if collection.sort_by == 'created-ascending' %}selected{% endif %}>Date, Old to New</option>
                  <option value="{{ collection.url }}?sort_by=created-descending" {% if collection.sort_by == 'created-descending' %}selected{% endif %}>Date, New to Old</option>
                </select>
                <span class="cmgp-sort-select-mask" aria-hidden="true"></span>
              </div>
              </div>
              {%- endif -%}
              {%- if show_sort_by and show_filter_button -%}<span class="cmgp-sort-filter-divider" aria-hidden="true"></span>{%- endif -%}
              {%- if show_filter_button -%}<button type="button" class="cmgp-filter-open-btn cmgp-sort-block" id="cmgp-filter-open-{{ section_id }}" aria-label="Open filters">{%- if active_count > 0 -%}FILTER ({{ active_count }}){%- else -%}FILTER{%- endif -%}</button>{%- endif -%}
            {%- endif -%}
            {%- unless section.settings.show_brilliant_earth_filters -%}
            {%- if show_filter_button and show_sort_by -%}<span class="cmgp-sort-divider" aria-hidden="true"></span>{%- endif -%}
            {%- if show_filter_button -%}<button type="button" class="cmgp-filter-open-btn" id="cmgp-filter-open-{{ section_id }}" aria-label="Open filters">{%- if active_count > 0 -%}FILTER ({{ active_count }}){%- else -%}FILTER{%- endif -%}</button>{%- endif -%}
            {%- if show_sort_by -%}<select class="cmgp-sort-select" id="cmgp-sort-{{ section_id }}">
              <option value="{{ collection.url }}?sort_by=manual" {% if collection.sort_by == 'manual' %}selected{% endif %}>Featured</option>
              <option value="{{ collection.url }}?sort_by=best-selling" {% if collection.sort_by == 'best-selling' %}selected{% endif %}>Best Selling</option>
              <option value="{{ collection.url }}?sort_by=title-ascending" {% if collection.sort_by == 'title-ascending' %}selected{% endif %}>Alphabetically, A-Z</option>
              <option value="{{ collection.url }}?sort_by=title-descending" {% if collection.sort_by == 'title-descending' %}selected{% endif %}>Alphabetically, Z-A</option>
              <option value="{{ collection.url }}?sort_by=price-ascending" {% if collection.sort_by == 'price-ascending' %}selected{% endif %}>Price, Low to High</option>
              <option value="{{ collection.url }}?sort_by=price-descending" {% if collection.sort_by == 'price-descending' %}selected{% endif %}>Price, High to Low</option>
              <option value="{{ collection.url }}?sort_by=created-descending" {% if collection.sort_by == 'created-descending' %}selected{% endif %}>Date, New to Old</option>
              <option value="{{ collection.url }}?sort_by=created-ascending" {% if collection.sort_by == 'created-ascending' %}selected{% endif %}>Date, Old to New</option>
            </select>{%- endif -%}
            {%- endunless -%}
          </div>
        </div>
        {%- endif -%}

        {%- if section.settings.show_brilliant_earth_filters -%}
        {%- comment -%} Active filter pills - Brilliant Earth style (Yellow Gold X, Lab Diamond X, Reset All) - Rings only {%- endcomment -%}
        {%- assign has_active_filters = false -%}
        {%- for f in collection.filters -%}
          {%- for v in f.values -%}{%- if v.active -%}{%- assign has_active_filters = true -%}{%- break -%}{%- endif -%}{%- endfor -%}
          {%- if f.min_value.value != blank or f.max_value.value != blank -%}{%- assign has_active_filters = true -%}{%- endif -%}
        {%- endfor -%}
        {%- if has_active_filters -%}
        <div class="cmgp-active-pills" id="cmgp-active-pills-{{ section_id }}">
          {%- for filter in collection.filters -%}
            {%- for value in filter.values -%}
              {%- if value.active -%}
                <a href="{{ value.url_to_remove }}" class="cmgp-pill" aria-label="Remove {{ value.label }}">{{ value.label }} ×</a>
              {%- endif -%}
            {%- endfor -%}
            {%- if filter.type == 'price_range' -%}
              {%- if filter.min_value.value != blank or filter.max_value.value != blank -%}
                <a href="{{ filter.url_to_remove }}" class="cmgp-pill" aria-label="Remove price filter">Price ×</a>
              {%- endif -%}
            {%- endif -%}
          {%- endfor -%}
          <a href="{{ collection.url }}?sort_by={{ collection.sort_by | default: 'manual' }}" class="cmgp-pill cmgp-pill--reset">Reset All ×</a>
        </div>
        {%- endif -%}
        {%- endif -%}
        
        <!-- Products Grid -->
        {%- if use_source_coll -%}
          {%- assign grid_products = collection_products -%}
          {%- assign grid_total_products = total_products -%}
        {%- endif -%}
        {%- paginate collection.products by products_per_page -%}
        {%- if use_source_coll == false -%}
          {%- assign grid_products = collection.products -%}
          {%- assign grid_total_products = collection.products_count -%}
        {%- endif -%}
        {%- comment -%} Banners sirf collection pe (bina filter) - jab filter laga ho to sirf products, banners hide {%- endcomment -%}
        {%- assign filters_applied = false -%}
        {%- for f in collection.filters -%}
          {%- for v in f.values -%}{%- if v.active -%}{%- assign filters_applied = true -%}{%- break -%}{%- endif -%}{%- endfor -%}
          {%- if f.min_value.value != blank or f.max_value.value != blank -%}{%- assign filters_applied = true -%}{%- endif -%}
        {%- endfor -%}
        <div class="cmgp-grid" id="cmgp-grid-{{ section_id }}" data-products-per-page="{{ products_per_page }}" data-total-products="{{ grid_total_products }}" data-section-id="{{ section_id }}" data-use-ajax-load-more="{% if use_source_coll %}false{% else %}true{% endif %}" data-next-page-url="{% if use_source_coll %}{% else %}{% if paginate.next %}{{ paginate.next.url }}{% endif %}{% endif %}" data-has-next="{% if use_source_coll %}false{% else %}{% if paginate.next %}true{% else %}false{% endif %}{% endif %}">
          
          <!-- Top Banner (Before Products) - Left Side -->
          {%- assign top_banner_enable_key = 'grid_banner_top_enable' -%}
          {%- assign top_banner_image_key = 'grid_banner_top_image' -%}
          {%- assign top_banner_link_key = 'grid_banner_top_link' -%}
          
          {%- assign top_banner_enable = collection.metafields.custom[top_banner_enable_key] -%}
          {%- assign top_banner_image = collection.metafields.custom[top_banner_image_key] -%}
          {%- assign top_banner_link = collection.metafields.custom[top_banner_link_key] -%}
          
          {%- comment -%} Initialize variables {%- endcomment -%}
          {%- assign product_index = 0 -%}
          {%- assign displayed_count = 0 -%}
          {%- assign products_after_banner = 0 -%}
          {%- assign products_between_banners = 0 -%}
          {%- assign banner_number = 0 -%}
          {%- assign banner_side = 'left' -%}
          {%- assign showing_products_after_banner = false -%}
          {%- assign top_banner_shown = false -%}
          
          {%- comment -%} Check and show top banner (left) at start {%- endcomment -%}
          {%- assign top_banner_enable_check = false -%}
          {%- if top_banner_enable == true or top_banner_enable == 'True' or top_banner_enable == 'true' or top_banner_enable == 1 or top_banner_enable == '1' -%}
            {%- assign top_banner_enable_check = true -%}
          {%- endif -%}
          
          {%- comment -%} Debug: Check metafield values {%- endcomment -%}
          {%- comment -%} Enable: {{ top_banner_enable }} | Image: {{ top_banner_image }} | Check: {{ top_banner_enable_check }} {%- endcomment -%}
          
          {%- if top_banner_enable_check == true and top_banner_image != blank -%}
            {%- comment -%} Top banner: sirf collection pe bina filter + products >= 8 {%- endcomment -%}
            {%- if filters_applied == false and grid_total_products >= 8 -%}
            <div class="cmgp-banner cmgp-banner-span-1 cmgp-banner-top" data-banner-type="top" data-min-products="8">
              {%- if top_banner_link != blank -%}
                <a href="{{ top_banner_link }}" class="cmgp-banner-link">
              {%- endif -%}
              <div class="cmgp-banner-inner{% if banner_zoom_animation %} cmgp-banner-zoom{% endif %}">
                {{
                  top_banner_image
                  | image_url: width: 1600
                  | image_tag:
                    loading: 'lazy',
                    widths: '600,800,1000,1200,1600',
                    class: 'cmgp-banner-image',
                    alt: 'Top Banner'
                }}
              </div>
              {%- if top_banner_link != blank -%}
                </a>
              {%- endif -%}
            </div>
            {%- assign top_banner_shown = true -%}
            {%- assign showing_products_after_banner = true -%}
            {%- assign products_after_banner = 0 -%}
            {%- assign products_between_banners = 0 -%}
            {%- endif -%}
          {%- endif -%}
          
          {%- comment -%} Active color filter values (for pre-selecting variant image + swatch per product) {%- endcomment -%}
          {%- assign active_color_handles_str = '' -%}
          {%- assign coll_handle_lower = collection.handle | downcase -%}
          {%- if coll_handle_lower contains 'white-gold' or coll_handle_lower contains 'whitegold' -%}
            {%- assign active_color_handles_str = 'White Gold' -%}
          {%- elsif coll_handle_lower contains 'yellow-gold' or coll_handle_lower contains 'yellowgold' -%}
            {%- assign active_color_handles_str = 'Yellow Gold' -%}
          {%- elsif coll_handle_lower contains 'rose-gold' or coll_handle_lower contains 'rosegold' -%}
            {%- assign active_color_handles_str = 'Rose Gold' -%}
          {%- elsif coll_handle_lower contains 'silver' -%}
            {%- assign active_color_handles_str = 'Silver' -%}
          {%- elsif coll_handle_lower contains 'vermeil' -%}
            {%- assign active_color_handles_str = 'Vermeil' -%}
          {%- endif -%}
          {%- for f in collection.filters -%}
            {%- assign flab = f.label | strip -%}
            {%- assign f_is_color = false -%}
            {%- assign color_flabs = 'Color,Colour,Metal,Metal Color' | split: ',' -%}
            {%- for cfl in color_flabs -%}
              {%- assign cfl_clean = cfl | strip -%}
              {%- if flab == cfl_clean -%}
                {%- assign f_is_color = true -%}
                {%- break -%}
              {%- endif -%}
            {%- endfor -%}
            {%- if f_is_color and f.type == 'list' -%}
              {%- for fv in f.values -%}
                {%- if fv.active -%}
                  {%- if active_color_handles_str == '' -%}
                    {%- assign active_color_handles_str = fv.value -%}
                  {%- else -%}
                    {%- assign active_color_handles_str = active_color_handles_str | append: '^^^' | append: fv.value -%}
                  {%- endif -%}
                {%- endif -%}
              {%- endfor -%}
              {%- break -%}
            {%- endif -%}
          {%- endfor -%}
          
          {%- if grid_total_products == 0 -%}
            <div class="cmgp-empty-state">
              <p class="cmgp-empty-state__message">There are no products in this collection yet.</p>
            </div>
          {%- else -%}
          {%- for product in grid_products -%}
            {%- assign show_this_product = true -%}
            {%- if use_metal_filter and color_filter_handle != '' -%}
              {%- assign show_this_product = false -%}
              {%- assign color_opt_for_filter = nil -%}
              {%- assign color_opt_idx = 0 -%}
              {%- for opt in product.options_with_values -%}
                {%- assign oln = opt.name | downcase -%}
                {%- if oln == 'color' or oln == 'colour' or oln == 'metal' or oln == 'metal color' or oln == 'finish' or oln == 'material' -%}
                  {%- assign color_opt_for_filter = opt -%}
                  {%- assign color_opt_idx = forloop.index0 -%}
                  {%- break -%}
                {%- endif -%}
              {%- endfor -%}
              {%- if color_opt_for_filter -%}
                {%- assign silver_alt = 'sterling' -%}
                {%- for v in product.variants -%}
                  {%- assign vh = v.options[color_opt_idx] | handleize -%}
                  {%- assign v_match_filter = false -%}
                  {%- if vh contains color_filter_handle -%}
                    {%- assign v_match_filter = true -%}
                  {%- elsif color_filter_handle == 'silver' and vh contains silver_alt -%}
                    {%- assign v_match_filter = true -%}
                  {%- endif -%}
                  {%- if v_match_filter -%}
                    {%- assign show_this_product = true -%}
                    {%- break -%}
                  {%- endif -%}
                {%- endfor -%}
              {%- endif -%}
              {%- comment -%} Fallback: Jewelry material metafield, product type, tags (Silver can be in metafield not variant) {%- endcomment -%}
              {%- if show_this_product == false and color_filter_handle == 'silver' -%}
                {%- assign prod_mat = product.metafields.custom.material | default: product.metafields.custom.jewelry_material | default: product.metafields.custom.metal | downcase -%}
                {%- assign prod_type = product.type | downcase -%}
                {%- assign prod_tags = product.tags | join: ' ' | downcase -%}
                {%- if prod_mat contains 'silver' or prod_mat contains 'sterling' or prod_type contains 'silver' or prod_tags contains 'silver' or prod_tags contains 'sterling' -%}
                  {%- assign show_this_product = true -%}
                {%- endif -%}
              {%- endif -%}
            {%- endif -%}
            {%- if show_this_product -%}
            {%- assign product_index = product_index | plus: 1 -%}
            
            {%- assign default_variant_for_card = nil -%}
            {%- if active_color_handles_str != '' -%}
              {%- comment -%} Color collection / filter active: show variant matching that color {%- endcomment -%}
              {%- assign color_opt_card = nil -%}
              {%- assign color_opt_index = 0 -%}
              {%- for opt in product.options_with_values -%}
                {%- assign oln = opt.name | downcase -%}
                {%- if oln == 'color' or oln == 'colour' or oln == 'metal' or oln == 'metal color' -%}
                  {%- assign color_opt_card = opt -%}
                  {%- assign color_opt_index = forloop.index0 -%}
                  {%- break -%}
                {%- endif -%}
              {%- endfor -%}
              {%- if color_opt_card -%}
                {%- assign active_arr = active_color_handles_str | split: '^^^' -%}
                {%- for v in product.variants -%}
                  {%- assign v_opt_val = v.options[color_opt_index] | handleize -%}
                  {%- assign v_match = false -%}
                  {%- for ah in active_arr -%}
                    {%- assign ah_handle = ah | handleize -%}
                    {%- if v_opt_val == ah or v_opt_val == ah_handle or v_opt_val contains ah_handle -%}
                      {%- assign v_match = true -%}
                      {%- break -%}
                    {%- endif -%}
                  {%- endfor -%}
                  {%- if v_match -%}
                    {%- assign default_variant_for_card = v -%}
                    {%- break -%}
                  {%- endif -%}
                {%- endfor -%}
              {%- endif -%}
            {%- else -%}
              {%- comment -%} No color filter: is product ke jitne bhi colors (with image) hon utne me divide - 2 color ho to 50-50, 3 ho to equal third, taake koi kam zyada na dikhe {%- endcomment -%}
              {%- assign color_opt_card = nil -%}
              {%- assign color_opt_index = 0 -%}
              {%- for opt in product.options_with_values -%}
                {%- assign oln = opt.name | downcase -%}
                {%- if oln == 'color' or oln == 'colour' or oln == 'metal' or oln == 'metal color' or oln == 'finish' or oln == 'material' -%}
                  {%- assign color_opt_card = opt -%}
                  {%- assign color_opt_index = forloop.index0 -%}
                  {%- break -%}
                {%- endif -%}
              {%- endfor -%}
              {%- if color_opt_card and product.variants.size > 0 -%}
                {%- assign seen_norm = '' -%}
                {%- assign variant_ids_str = '' -%}
                {%- for v in product.variants -%}
                  {%- if v.featured_media == blank and v.image == blank -%}{%- continue -%}{%- endif -%}
                  {%- assign v_opt_val = v.options[color_opt_index] | handleize -%}
                  {%- assign norm = v_opt_val -%}
                  {%- if v_opt_val contains 'yellow' -%}{%- assign norm = 'yellow-gold' -%}
                  {%- elsif v_opt_val contains 'white' or v_opt_val contains 'rhodium' or v_opt_val contains 'platinum' -%}{%- assign norm = 'white-gold' -%}
                  {%- elsif v_opt_val contains 'rose' or v_opt_val contains 'pink' -%}{%- assign norm = 'rose-gold' -%}
                  {%- elsif v_opt_val contains 'silver' or v_opt_val contains 'sterling' -%}{%- assign norm = 'silver' -%}
                  {%- elsif v_opt_val contains 'vermeil' -%}{%- assign norm = 'vermeil' -%}
                  {%- endif -%}
                  {%- assign norm_check = '|' | append: norm | append: '|' -%}
                  {%- unless seen_norm contains norm_check -%}
                    {%- assign seen_norm = seen_norm | append: norm_check -%}
                    {%- if variant_ids_str != '' -%}{%- assign variant_ids_str = variant_ids_str | append: ',' -%}{%- endif -%}
                    {%- assign variant_ids_str = variant_ids_str | append: v.id -%}
                  {%- endunless -%}
                {%- endfor -%}
                {%- assign ids_arr = variant_ids_str | split: ',' -%}
                {%- assign num_colors = ids_arr.size -%}
                {%- if num_colors > 0 -%}
                  {%- assign pick_index = product_index | minus: 1 | modulo: num_colors -%}
                  {%- assign selected_id_str = ids_arr[pick_index] -%}
                  {%- assign selected_id = selected_id_str | plus: 0 -%}
                  {%- for v in product.variants -%}
                    {%- if v.id == selected_id -%}
                      {%- assign default_variant_for_card = v -%}
                      {%- break -%}
                    {%- endif -%}
                  {%- endfor -%}
                {%- endif -%}
              {%- endif -%}
            {%- endif -%}
            
            {%- comment -%} Har 8 products ke baad EK banner: pehla left, dosra right (alternate) {%- endcomment -%}
            {%- if showing_products_after_banner == false -%}
              {%- if products_between_banners >= 8 -%}
                {%- assign banner_number = banner_number | plus: 1 -%}
                {%- assign banner_image_key = 'grid_banner_' | append: banner_number | append: '_image' -%}
                {%- assign banner_enable_key = 'grid_banner_' | append: banner_number | append: '_enable' -%}
                {%- assign banner_link_key = 'grid_banner_' | append: banner_number | append: '_link' -%}
                {%- assign banner_image = collection.metafields.custom[banner_image_key] -%}
                {%- assign banner_enable = collection.metafields.custom[banner_enable_key] -%}
                {%- assign banner_link = collection.metafields.custom[banner_link_key] -%}
                {%- assign banner_is_enabled = false -%}
                {%- if banner_enable == true or banner_enable == 'True' or banner_enable == 'true' or banner_enable == 1 or banner_enable == '1' -%}
                  {%- assign banner_is_enabled = true -%}
                {%- elsif banner_enable == blank and banner_image != blank -%}
                  {%- assign banner_is_enabled = true -%}
                {%- endif -%}
                {%- comment -%} Grid banner N: sirf collection pe bina filter + products >= N*8 {%- endcomment -%}
                {%- assign min_products_for_this_banner = 8 | times: banner_number -%}
                {%- if banner_is_enabled == true and banner_image != blank and filters_applied == false and grid_total_products >= min_products_for_this_banner -%}
                  {%- assign banner_should_hide = false -%}
                  {%- if product_index > initial_products -%}
                    {%- assign banner_should_hide = true -%}
                  {%- endif -%}
                  <div class="cmgp-banner cmgp-banner-span-1 cmgp-banner-{{ banner_side }}" data-banner-type="grid" data-min-products="{{ min_products_for_this_banner }}"{% if banner_should_hide %} style="display: none;"{% endif %}>
                    {%- if banner_link != blank -%}
                      <a href="{{ banner_link }}" class="cmgp-banner-link">
                    {%- endif -%}
                    <div class="cmgp-banner-inner{% if banner_zoom_animation %} cmgp-banner-zoom{% endif %}">
                      {{
                        banner_image
                        | image_url: width: 1600
                        | image_tag:
                          loading: 'lazy',
                          widths: '600,800,1000,1200,1600',
                          class: 'cmgp-banner-image',
                          alt: 'Collection banner'
                      }}
                    </div>
                    {%- if banner_link != blank -%}
                      </a>
                    {%- endif -%}
                  </div>
                  {%- assign showing_products_after_banner = true -%}
                  {%- assign products_after_banner = 0 -%}
                  {%- assign products_between_banners = 0 -%}
                  {%- if banner_side == 'left' -%}
                    {%- assign banner_side = 'right' -%}
                  {%- else -%}
                    {%- assign banner_side = 'left' -%}
                  {%- endif -%}
                {%- else -%}
                  {%- assign banner_number = banner_number | minus: 1 -%}
                  {%- assign showing_products_after_banner = true -%}
                  {%- assign products_after_banner = 0 -%}
                  {%- assign products_between_banners = 0 -%}
                {%- endif -%}
              {%- else -%}
                {%- assign products_between_banners = products_between_banners | plus: 1 -%}
              {%- endif -%}
            {%- endif -%}
            
            {%- comment -%} Show product - data-product-type, data-product-tags, data-price for client-side filters. Tag filter sirf tag se match; personalised/personalized dono allow. {%- endcomment -%}
            {%- assign product_type_handle = product.metafields.custom.type | default: product.type | handleize -%}
            {%- assign product_tags_handles = '' -%}
            {%- for t in product.tags -%}
              {%- assign th = t | handleize -%}
              {%- if th != blank -%}
                {%- if product_tags_handles != blank -%}{%- assign product_tags_handles = product_tags_handles | append: ',' -%}{%- endif -%}
                {%- assign product_tags_handles = product_tags_handles | append: th -%}
                {%- comment -%} Personalised/Personalized: dono spellings se filter match ho jaye {%- endcomment -%}
                {%- if th == 'personalized' -%}
                  {%- assign product_tags_handles = product_tags_handles | append: ',personalised' -%}
                {%- elsif th == 'personalised' -%}
                  {%- assign product_tags_handles = product_tags_handles | append: ',personalized' -%}
                {%- endif -%}
              {%- endif -%}
            {%- endfor -%}
            {%- if product_index > initial_products -%}
              {%- assign displayed_count = displayed_count | plus: 1 -%}
              <div class="cmgp-product-item" data-product-index="{{ product_index }}" data-product-type="{{ product_type_handle }}" data-product-tags="{{ product_tags_handles }}" data-price="{{ product.price }}" style="display: none;">
            {%- else -%}
              <div class="cmgp-product-item" data-product-index="{{ product_index }}" data-product-type="{{ product_type_handle }}" data-product-tags="{{ product_tags_handles }}" data-price="{{ product.price }}">
            {%- endif -%}
            
            <!-- Product Card -->
            <div class="cmgp-product-card">
              {%- comment -%} Wishlist Button {%- endcomment -%}
              <button class="cmgp-wishlist-btn" type="button" data-product-id="{{ product.id }}" aria-label="Add to wishlist">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                </svg>
              </button>
              
              {%- assign product_link_url = product.url -%}
              {%- if default_variant_for_card -%}
                {%- assign product_link_url = product.url | append: '?variant=' | append: default_variant_for_card.id -%}
              {%- endif -%}
              <a href="{{ product_link_url }}" class="cmgp-product-link">
                <div class="cmgp-product-image-wrapper">
                  {%- assign primary_img = product.featured_image -%}
                  {%- if default_variant_for_card -%}
                    {%- if default_variant_for_card.featured_media -%}
                      {%- assign primary_img = default_variant_for_card.featured_media -%}
                    {%- elsif default_variant_for_card.image -%}
                      {%- assign primary_img = default_variant_for_card.image -%}
                    {%- endif -%}
                  {%- endif -%}
                  {%- if primary_img -%}
                    {%- comment -%} Primary Image (filtered color variant when color filter active) {%- endcomment -%}
                    {%- assign primary_class = 'cmgp-product-image cmgp-image-primary' -%}
                    {%- if product.images.size > 1 -%}
                      {%- assign primary_class = 'cmgp-product-image cmgp-image-primary has-secondary' -%}
                    {%- endif -%}
                    {{
                      primary_img
                      | image_url: width: 600
                      | image_tag:
                        loading: 'lazy',
                        widths: '300,400,500,600',
                        class: primary_class
                    }}
                    
                    {%- comment -%} Secondary/Hover Image {%- endcomment -%}
                    {%- if product.images.size > 1 -%}
                      {{
                        product.images[1]
                        | image_url: width: 600
                        | image_tag:
                          loading: 'lazy',
                          widths: '300,400,500,600',
                          class: 'cmgp-product-image cmgp-image-secondary'
                      }}
                    {%- endif -%}
                  {%- else -%}
                    <div class="cmgp-product-placeholder">
                      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <rect x="3" y="3" width="18" height="18" rx="2"/>
                      </svg>
                    </div>
                  {%- endif -%}
                  
                  {%- comment -%} Product Badges Container (dashboard: show/hide per badge type) {%- endcomment -%}
                  <div class="cmgp-product-badges">
                    {%- if product.available == false and show_sold_out_badge -%}
                      <span class="cmgp-product-badge cmgp-badge-soldout">Sold Out</span>
                    {%- elsif product.available -%}
                      {%- if product.compare_at_price > product.price and show_sale_badge -%}
                        {%- assign discount_percent = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round -%}
                        <span class="cmgp-product-badge cmgp-badge-sale">{{ discount_percent }}% OFF</span>
                      {%- elsif section.settings.show_new_badge -%}
                        {%- assign product_published_at = product.published_at | date: '%s' | plus: 0 -%}
                        {%- assign now = 'now' | date: '%s' | plus: 0 -%}
                        {%- assign thirty_days_ago = now | minus: 2592000 -%}
                        {%- if product_published_at > thirty_days_ago -%}
                          <span class="cmgp-product-badge cmgp-badge-new">New</span>
                        {%- endif -%}
                      {%- endif -%}
                    {%- endif -%}
                  </div>
                  
                  {%- if show_quick_add -%}
                    <button class="cmgp-quick-add" type="button" data-product-id="{{ product.id }}">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
                        <line x1="3" y1="6" x2="21" y2="6"/>
                        <path d="M16 10a4 4 0 0 1-8 0"/>
                      </svg>
                      Quick Add
                    </button>
                  {%- endif -%}
                </div>
                
                <div class="cmgp-product-info">
                  {%- if show_vendor and product.vendor != blank -%}
                    <p class="cmgp-product-vendor">{{ product.vendor }}</p>
                  {%- endif -%}
                  
                  <h3 class="cmgp-product-title">{{ product.title }}</h3>
                  
                  {%- comment -%} Variant Swatches (Color/Metal options) {%- endcomment -%}
                  {%- assign color_option = nil -%}
                  {%- for option in product.options_with_values -%}
                    {%- assign option_name_lower = option.name | downcase -%}
                    {%- if option_name_lower == 'color' or option_name_lower == 'colour' or option_name_lower == 'metal' or option_name_lower == 'metal color' -%}
                      {%- assign color_option = option -%}
                      {%- break -%}
                    {%- endif -%}
                  {%- endfor -%}
                  
                  {%- if color_option and section.settings.show_variant_swatches -%}
                    <div class="cmgp-variant-swatches" data-product-id="{{ product.id }}">
                      {%- for value in color_option.values limit: 5 -%}
                        {%- assign swatch_color = value | downcase | handleize -%}
                        {%- assign swatch_style = 'background: #888;' -%}
                        {%- assign variant_image_url = '' -%}
                        {%- assign variant_id = '' -%}
                        
                        {%- comment -%} Find variant with this color value and get its image {%- endcomment -%}
                        {%- assign option_index = 0 -%}
                        {%- for option in product.options_with_values -%}
                          {%- if option.name == color_option.name -%}
                            {%- assign option_index = forloop.index0 -%}
                            {%- break -%}
                          {%- endif -%}
                        {%- endfor -%}
                        
                        {%- for variant in product.variants -%}
                          {%- if variant.options[option_index] == value -%}
                            {%- if variant.featured_media -%}
                              {%- assign variant_image_url = variant.featured_media | image_url: width: 600 -%}
                            {%- elsif variant.image -%}
                              {%- assign variant_image_url = variant.image | image_url: width: 600 -%}
                            {%- endif -%}
                            {%- assign variant_id = variant.id -%}
                            {%- break -%}
                          {%- endif -%}
                        {%- endfor -%}
                        
                        {%- comment -%} Fallback: If no variant image, use product's second image if available {%- endcomment -%}
                        {%- if variant_image_url == blank and product.images.size > 1 -%}
                          {%- assign variant_image_url = product.images[1] | image_url: width: 600 -%}
                        {%- endif -%}
                        
                        {%- comment -%} Yellow Gold variants {%- endcomment -%}
                        {%- if swatch_color contains 'yellow' or swatch_color == 'gold' or swatch_color contains 'yellow-gold' or swatch_color contains '10k-gold' or swatch_color contains '14k-gold' or swatch_color contains '18k-gold' -%}
                          {%- assign swatch_style = 'background: linear-gradient(145deg, #d4af37 0%, #f5d67a 40%, #d4af37 100%); border-color: #c9a227;' -%}
                        
                        {%- comment -%} White Gold / Silver / Platinum variants {%- endcomment -%}
                        {%- elsif swatch_color contains 'stainless' or swatch_color == 'steel' -%}
                          {%- assign swatch_style = 'background: linear-gradient(145deg, #8a8a8a 0%, #c8c8c8 40%, #6a6a6a 100%); border-color: #5a5a5a;' -%}
                        {%- elsif swatch_color contains 'white' or swatch_color contains 'silver' or swatch_color contains 'platinum' or swatch_color contains 'rhodium' -%}
                          {%- assign swatch_style = 'background: linear-gradient(145deg, #e8e8e8 0%, #ffffff 40%, #c0c0c0 100%); border-color: #aaa;' -%}
                        
                        {%- comment -%} Rose Gold variants {%- endcomment -%}
                        {%- elsif swatch_color contains 'rose' or swatch_color contains 'pink' -%}
                          {%- assign swatch_style = 'background: linear-gradient(145deg, #b76e79 0%, #f0c8c8 40%, #b76e79 100%); border-color: #a25d68;' -%}
                        
                        {%- comment -%} Two-Tone variants {%- endcomment -%}
                        {%- elsif swatch_color contains 'two-tone' or swatch_color contains '2-tone' or swatch_color contains 'tri-tone' or swatch_color contains '3-tone' -%}
                          {%- assign swatch_style = 'background: linear-gradient(135deg, #d4af37 0%, #d4af37 50%, #e8e8e8 50%, #e8e8e8 100%); border-color: #bbb;' -%}
                        
                        {%- comment -%} Black / Gunmetal variants {%- endcomment -%}
                        {%- elsif swatch_color contains 'black' or swatch_color contains 'gunmetal' or swatch_color contains 'titanium' -%}
                          {%- assign swatch_style = 'background: linear-gradient(145deg, #333 0%, #555 40%, #222 100%); border-color: #111;' -%}
                        
                        {%- comment -%} Copper / Bronze variants {%- endcomment -%}
                        {%- elsif swatch_color contains 'copper' or swatch_color contains 'bronze' -%}
                          {%- assign swatch_style = 'background: linear-gradient(145deg, #b87333 0%, #da9150 40%, #b87333 100%); border-color: #a66428;' -%}
                        
                        {%- comment -%} Vermeil variants {%- endcomment -%}
                        {%- elsif swatch_color contains 'vermeil' -%}
                          {%- assign swatch_style = 'background: linear-gradient(145deg, #cfb53b 0%, #ffe66d 40%, #cfb53b 100%); border-color: #bfa32f;' -%}
                        
                        {%- comment -%} Default fallback {%- endcomment -%}
                        {%- else -%}
                          {%- assign swatch_style = 'background: linear-gradient(145deg, #d4af37 0%, #f5d67a 40%, #d4af37 100%); border-color: #c9a227;' -%}
                        {%- endif -%}
                        
                        {%- assign swatch_is_active = false -%}
                        {%- if default_variant_for_card and variant_id == default_variant_for_card.id -%}
                          {%- assign swatch_is_active = true -%}
                        {%- endif -%}
                        <span class="cmgp-swatch{% if swatch_is_active %} cmgp-swatch-active{% endif %}" 
                          data-swatch="{{ swatch_color }}" 
                          data-variant-id="{{ variant_id }}"
                          data-variant-image="{% if variant_image_url != blank %}{{ variant_image_url }}{% endif %}"
                          data-product-url="{{ product.url }}"
                          data-product-id="{{ product.id }}"
                          title="{{ value }}"
                          style="{{ swatch_style }}">
                        </span>
                      {%- endfor -%}
                      {%- if color_option.values.size > 5 -%}
                        <span class="cmgp-swatch-more">+{{ color_option.values.size | minus: 5 }}</span>
                      {%- endif -%}
                    </div>
                  {%- endif -%}
                  
                  {%- if show_rating -%}
                    <div class="cmgp-product-rating">
                      <div class="cmgp-rating-stars">
                        {%- for i in (1..5) -%}
                          <svg width="14" height="14" viewBox="0 0 24 24" fill="#d4af37" stroke="#d4af37" stroke-width="1">
                            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
                          </svg>
                        {%- endfor -%}
                      </div>
                    </div>
                  {%- endif -%}
                  
                  <div class="cmgp-product-price">
                    <span class="cmgp-price-current">{{ product.price | money }}</span>
                    {%- if product.compare_at_price > product.price -%}
                      <span class="cmgp-price-compare">{{ product.compare_at_price | money }}</span>
                    {%- endif -%}
                  </div>
                </div>
              </a>
            </div>
            </div>
            
            {%- comment -%} Track products after banner {%- endcomment -%}
            {%- if showing_products_after_banner == true -%}
              {%- assign products_after_banner = products_after_banner | plus: 1 -%}
              {%- if products_after_banner >= 4 -%}
                {%- assign showing_products_after_banner = false -%}
                {%- assign products_after_banner = 0 -%}
                {%- comment -%} Don't reset products_between_banners here, let it continue counting {%- endcomment -%}
              {%- endif -%}
            {%- endif -%}
            
            {%- comment -%} Always increment products_between_banners when not showing products after banner {%- endcomment -%}
            {%- if showing_products_after_banner == false -%}
              {%- assign products_between_banners = products_between_banners | plus: 1 -%}
            {%- endif -%}
            {%- endif -%}
          {%- endfor -%}
          {%- endif -%}
        </div>
        
        <!-- Load More Button -->
        {%- if use_source_coll -%}
          {%- if grid_total_products > products_per_page -%}
          <div class="cmgp-load-more-wrapper">
            <button class="cmgp-load-more-btn" id="cmgp-load-more-{{ section_id }}" data-section-id="{{ section_id }}" data-original-text="{{ load_more_text | escape }}">
              {{ load_more_text }}
            </button>
          </div>
          {%- endif -%}
        {%- else -%}
          {%- if paginate.next -%}
          <div class="cmgp-load-more-wrapper">
            <button class="cmgp-load-more-btn" id="cmgp-load-more-{{ section_id }}" data-section-id="{{ section_id }}" data-original-text="{{ load_more_text | escape }}">
              {{ load_more_text }}
            </button>
          </div>
          {%- endif -%}
        {%- endif -%}
        {%- endpaginate -%}
        </div>
      </main>
    </div>
  </div>
  
  <!-- Mobile Filter Button -->
  <button class="cmgp-filter-toggle" id="cmgp-filter-toggle-{{ section_id }}" aria-label="Toggle Filters">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <line x1="4" y1="6" x2="20" y2="6"/>
      <line x1="4" y1="12" x2="20" y2="12"/>
      <line x1="4" y1="18" x2="20" y2="18"/>
    </svg>
    Filters
  </button>
  
  <!-- Filter overlay: left-side drawer (click to open) -->
  <div class="cmgp-filter-overlay cmgp-filter-drawer-right" id="cmgp-filter-overlay-{{ section_id }}">
    <div class="cmgp-filter-overlay-backdrop" id="cmgp-filter-backdrop-{{ section_id }}" aria-hidden="true"></div>
    <div class="cmgp-filter-overlay-content">
      <button class="cmgp-filter-close" id="cmgp-filter-close-{{ section_id }}" aria-label="Close filters">×</button>
      <div class="cmgp-sidebar-content">
        <h2 class="cmgp-sidebar-title">FILTERS</h2>
        <div class="cmgp-filters">
          {%- if is_rings_collection_sidebar and has_any_shop_by_type -%}
            <div class="cmgp-filter-group active">
              <h3 class="cmgp-filter-title">Shop By Type</h3>
              <div class="cmgp-filter-content">
                {%- assign sidebar_type_param_o = type_param -%}
                {%- assign sidebar_tag_param_o = tag_param -%}
                {%- assign shop_by_type_labels_o = "engagement-rings:Engagement Rings|wedding-bands:Wedding Bands|promise-rings:Promise Rings|fashion-rings:Fashion Rings|stackable-rings:Stackable Rings|mens-rings:Men's Rings|ring-enhancers:Ring Enhancers" | split: '|' -%}
                {%- for sh in shop_by_type_list -%}
                  {%- assign sh_handle_o = sh | strip -%}
                  {%- if sh_handle_o == blank -%}{%- continue -%}{%- endif -%}
                  {%- assign count_type_o = 0 -%}
                  {%- assign count_tag_o = 0 -%}
                  {%- assign count_any_o = 0 -%}
                  {%- for p in collection_products -%}
                    {%- assign ptype_ho = p.metafields.custom.type | default: p.type | handleize -%}
                    {%- assign type_ok_o = false -%}
                    {%- if ptype_ho == sh_handle_o or ptype_ho != blank and sh_handle_o != blank and ptype_ho contains sh_handle_o or sh_handle_o contains ptype_ho -%}
                      {%- assign type_ok_o = true -%}
                    {%- endif -%}
                    {%- if type_ok_o -%}{%- assign count_type_o = count_type_o | plus: 1 -%}{%- endif -%}
                    {%- assign tag_ok_o = false -%}
                    {%- for t in p.tags -%}
                      {%- assign th_o = t | handleize -%}
                      {%- if th_o == sh_handle_o or th_o != blank and sh_handle_o != blank and th_o contains sh_handle_o or sh_handle_o contains th_o -%}
                        {%- assign tag_ok_o = true -%}
                        {%- break -%}
                      {%- endif -%}
                    {%- endfor -%}
                    {%- if tag_ok_o -%}{%- assign count_tag_o = count_tag_o | plus: 1 -%}{%- endif -%}
                    {%- if type_ok_o or tag_ok_o -%}
                      {%- assign count_any_o = count_any_o | plus: 1 -%}
                    {%- endif -%}
                  {%- endfor -%}
                  {%- assign total_count_o = count_any_o -%}
                  {%- if total_count_o > 0 -%}
                    {%- assign use_type_param_o = true -%}
                    {%- if count_tag_o > count_type_o -%}
                      {%- assign use_type_param_o = false -%}
                    {%- endif -%}
                    {%- assign param_name_o = sidebar_type_param_o -%}
                    {%- if use_type_param_o == false -%}
                      {%- assign param_name_o = sidebar_tag_param_o -%}
                    {%- endif -%}
                    {%- assign label_display_o = sh_handle_o | replace: '-', ' ' -%}
                    {%- for lbl_o in shop_by_type_labels_o -%}
                      {%- assign lbl_parts_o = lbl_o | split: ':' -%}
                      {%- if lbl_parts_o[0] == sh_handle_o and lbl_parts_o[1] != blank -%}
                        {%- assign label_display_o = lbl_parts_o[1] -%}
                        {%- break -%}
                      {%- endif -%}
                    {%- endfor -%}
                    {%- assign is_checked_o = false -%}
                    {%- for f in collection.filters -%}
                      {%- if f.param_name == param_name_o -%}
                        {%- for v in f.values -%}
                          {%- if v.active -%}
                            {%- assign vh_o = v.value | handleize -%}
                            {%- if vh_o == sh_handle_o or vh_o contains sh_handle_o or sh_handle_o contains vh_o -%}
                              {%- assign is_checked_o = true -%}
                              {%- break -%}
                            {%- endif -%}
                          {%- endif -%}
                        {%- endfor -%}
                        {%- break -%}
                      {%- endif -%}
                    {%- endfor -%}
                    <label class="cmgp-filter-item">
                      <input type="checkbox" name="{{ param_name_o }}" value="{{ sh_handle_o }}"{% if is_checked_o %} checked{% endif %}>
                      <span>{{ label_display_o }} ({{ total_count_o }})</span>
                    </label>
                  {%- endif -%}
                {%- endfor -%}
              </div>
            </div>
          {%- endif -%}
          {%- if collection.filters.size > 0 -%}
            {%- for filter in collection.filters -%}
              {%- if is_rings_collection_sidebar and filter.param_name == type_param or is_rings_collection_sidebar and filter.param_name == tag_param -%}
                {%- continue -%}
              {%- endif -%}
              {%- assign overlay_filter_label_clean = filter.label | strip -%}
              {%- assign overlay_filter_hidden = false -%}
              {%- if filters_to_hide_str != blank -%}
                {%- assign hidden_arr_o = filters_to_hide_str | split: ',' -%}
                {%- for h in hidden_arr_o -%}
                  {%- assign ho_clean = h | strip -%}
                  {%- if overlay_filter_label_clean == ho_clean -%}
                    {%- assign overlay_filter_hidden = true -%}
                    {%- break -%}
                  {%- endif -%}
                {%- endfor -%}
              {%- endif -%}
              {%- assign overlay_filter_in_show_list = true -%}
              {%- if filters_to_show_str != blank -%}
                {%- assign overlay_filter_in_show_list = false -%}
                {%- assign show_arr_o = filters_to_show_str | split: ',' -%}
                {%- for so in show_arr_o -%}
                  {%- assign so_clean = so | strip -%}
                  {%- if overlay_filter_label_clean == so_clean -%}
                    {%- assign overlay_filter_in_show_list = true -%}
                    {%- break -%}
                  {%- endif -%}
                {%- endfor -%}
              {%- endif -%}
              {%- unless overlay_filter_hidden -%}
              {%- if overlay_filter_in_show_list -%}
              {%- assign overlay_filter_has_visible = false -%}
              {%- capture overlay_filter_group_content -%}
              <div class="cmgp-filter-group{% if forloop.first %} active{% endif %}">
                <h3 class="cmgp-filter-title">{{ filter.label }}</h3>
                <div class="cmgp-filter-content">
                  {%- case filter.type -%}
                    {%- when 'list' -%}
                      {%- assign overlay_is_color_filter = false -%}
                      {%- assign overlay_cf_labels = 'Color,Colour,Metal,Metal Color' | split: ',' -%}
                      {%- for cf in overlay_cf_labels -%}
                        {%- assign o_cf_clean = cf | strip -%}
                        {%- if overlay_filter_label_clean == o_cf_clean -%}
                          {%- assign overlay_is_color_filter = true -%}
                          {%- break -%}
                        {%- endif -%}
                      {%- endfor -%}
                      {%- if overlay_is_color_filter -%}
                        {%- assign overlay_color_order = 'Yellow Gold,White Gold,Rose Gold,Vermeil,Silver' | split: ',' -%}
                        {%- assign overlay_unique_norm = '' -%}
                        {%- for product in collection_products -%}
                          {%- assign o_color_opt = nil -%}
                          {%- for option in product.options_with_values -%}
                            {%- assign ooname = option.name | downcase -%}
                            {%- if ooname == 'color' or ooname == 'colour' or ooname == 'metal' or ooname == 'metal color' -%}
                              {%- assign o_color_opt = option -%}
                              {%- break -%}
                            {%- endif -%}
                          {%- endfor -%}
                          {%- if o_color_opt -%}
                            {%- for v in o_color_opt.values -%}
                              {%- assign oraw = v | downcase -%}
                              {%- assign onorm = '' -%}
                              {%- if oraw contains 'vermeil' -%}{%- assign onorm = 'Vermeil' -%}
                              {%- elsif oraw contains 'silver' or oraw contains '925' -%}{%- assign onorm = 'Silver' -%}
                              {%- elsif oraw contains 'rose' -%}{%- assign onorm = 'Rose Gold' -%}
                              {%- elsif oraw contains 'white' -%}{%- assign onorm = 'White Gold' -%}
                              {%- elsif oraw contains 'yellow' -%}{%- assign onorm = 'Yellow Gold' -%}
                              {%- endif -%}
                              {%- if onorm != '' -%}
                                {%- assign onorm_in = false -%}
                                {%- assign oarr = overlay_unique_norm | split: '^^^' -%}
                                {%- for onn in oarr -%}{%- if onn == onorm -%}{%- assign onorm_in = true -%}{%- break -%}{%- endif -%}{%- endfor -%}
                                {%- unless onorm_in -%}
                                  {%- if overlay_unique_norm == '' -%}{%- assign overlay_unique_norm = onorm -%}
                                  {%- else -%}{%- assign overlay_unique_norm = overlay_unique_norm | append: '^^^' | append: onorm -%}
                                  {%- endif -%}
                                {%- endunless -%}
                              {%- endif -%}
                            {%- endfor -%}
                          {%- endif -%}
                        {%- endfor -%}
                        {%- for onorm_label in overlay_color_order -%}
                          {%- assign onorm_in_list = false -%}
                          {%- assign oarr = overlay_unique_norm | split: '^^^' -%}
                          {%- for onn in oarr -%}{%- if onn == onorm_label -%}{%- assign onorm_in_list = true -%}{%- break -%}{%- endif -%}{%- endfor -%}
                          {%- unless onorm_in_list -%}{%- continue -%}{%- endunless -%}
                          {%- assign overlay_handles_str = '' -%}
                          {%- assign onorm_count = 0 -%}
                          {%- for product in collection_products -%}
                            {%- assign o_color_opt = nil -%}
                            {%- for option in product.options_with_values -%}
                              {%- assign ooname = option.name | downcase -%}
                              {%- if ooname == 'color' or ooname == 'colour' or ooname == 'metal' or ooname == 'metal color' -%}
                                {%- assign o_color_opt = option -%}
                                {%- break -%}
                              {%- endif -%}
                            {%- endfor -%}
                            {%- if o_color_opt -%}
                              {%- assign o_product_has = false -%}
                              {%- for v in o_color_opt.values -%}
                                {%- assign oraw = v | downcase -%}
                                {%- assign on = '' -%}
                                {%- if oraw contains 'vermeil' -%}{%- assign on = 'Vermeil' -%}
                                {%- elsif oraw contains 'silver' or oraw contains '925' -%}{%- assign on = 'Silver' -%}
                                {%- elsif oraw contains 'rose' -%}{%- assign on = 'Rose Gold' -%}
                                {%- elsif oraw contains 'white' -%}{%- assign on = 'White Gold' -%}
                                {%- elsif oraw contains 'yellow' -%}{%- assign on = 'Yellow Gold' -%}
                                {%- endif -%}
                                {%- if on == onorm_label -%}
                                  {%- assign o_product_has = true -%}
                                  {%- assign oh = v | handleize -%}
                                  {%- assign oh_in = false -%}
                                  {%- assign oharr = overlay_handles_str | split: ',,,' -%}
                                  {%- for ohh in oharr -%}{%- if ohh == oh -%}{%- assign oh_in = true -%}{%- break -%}{%- endif -%}{%- endfor -%}
                                  {%- unless oh_in -%}
                                    {%- if overlay_handles_str == '' -%}{%- assign overlay_handles_str = oh -%}
                                    {%- else -%}{%- assign overlay_handles_str = overlay_handles_str | append: ',,,' | append: oh -%}
                                    {%- endif -%}
                                  {%- endunless -%}
                                {%- endif -%}
                              {%- endfor -%}
                              {%- if o_product_has -%}{%- assign onorm_count = onorm_count | plus: 1 -%}{%- endif -%}
                            {%- endif -%}
                          {%- endfor -%}
                          {%- assign onorm_active = false -%}
                          {%- assign oharr = overlay_handles_str | split: ',,,' -%}
                          {%- for ohh in oharr -%}
                            {%- for fv in filter.values -%}
                              {%- if fv.value == ohh and fv.active -%}{%- assign onorm_active = true -%}{%- break -%}{%- endif -%}
                            {%- endfor -%}
                            {%- if onorm_active -%}{%- break -%}{%- endif -%}
                          {%- endfor -%}
                          {%- if onorm_count > 0 -%}
                          {%- assign overlay_filter_has_visible = true -%}
                          <label class="cmgp-filter-item">
                            <input type="checkbox" class="cmgp-color-group-checkbox" data-param-name="{{ filter.param_name }}" data-variant-values="{{ overlay_handles_str }}" name="" value="" {% if onorm_active %}checked{% endif %}>
                            <span>{{ onorm_label }} ({{ onorm_count }})</span>
                          </label>
                          {%- endif -%}
                        {%- endfor -%}
                        {%- else -%}
                        {%- for filter_value in filter.values -%}
                          {%- if filter_value.count > 0 -%}
                          {%- assign overlay_filter_has_visible = true -%}
                          <label class="cmgp-filter-item">
                            <input type="checkbox" name="{{ filter.param_name }}" value="{{ filter_value.value }}" {% if filter_value.active %}checked{% endif %}>
                            <span>{{ filter_value.label }} ({{ filter_value.count }})</span>
                          </label>
                          {%- endif -%}
                        {%- endfor -%}
                      {%- endif -%}
                    {%- when 'price_range' -%}
                      {%- assign overlay_filter_has_visible = true -%}
                      {%- comment -%} Same as sidebar: range_max in cents -> dollars; fallback from collection products {%- endcomment -%}
                      {%- assign o_price_max_raw = filter.range_max -%}
                      {%- if o_price_max_raw != nil and o_price_max_raw != 0 -%}
                        {%- assign o_price_max_dollars = o_price_max_raw | divided_by: 100 -%}
                      {%- else -%}
                        {%- assign o_price_max_dollars = 0 -%}
                        {%- for product in collection_products -%}
                          {%- assign op_dollars = product.price | divided_by: 100 -%}
                          {%- if op_dollars > o_price_max_dollars -%}{%- assign o_price_max_dollars = op_dollars -%}{%- endif -%}
                        {%- endfor -%}
                        {%- if o_price_max_dollars == 0 -%}{%- assign o_price_max_dollars = 10000 -%}{%- endif -%}
                      {%- endif -%}
                      {%- assign o_price_min_val = filter.min_value.value | money_without_currency | remove: ',' | default: 0 -%}
                      {%- assign o_price_max_val = filter.max_value.value | money_without_currency | remove: ',' | default: o_price_max_dollars -%}
                      <div class="cmgp-price-range cmgp-price-range-overlay" data-price-max="{{ o_price_max_dollars }}" data-section-id="{{ section_id }}">
                        <div class="cmgp-price-range-slider-wrap">
                          <span class="cmgp-price-range-fill" aria-hidden="true"></span>
                          <input type="range" class="cmgp-price-slider cmgp-price-slider-min" id="price-slider-min-overlay-{{ section_id }}" min="0" max="{{ o_price_max_dollars }}" value="{{ o_price_min_val }}" step="1" aria-label="Min price">
                          <input type="range" class="cmgp-price-slider cmgp-price-slider-max" id="price-slider-max-overlay-{{ section_id }}" min="0" max="{{ o_price_max_dollars }}" value="{{ o_price_max_val }}" step="1" aria-label="Max price">
                        </div>
                        <div class="cmgp-price-range-inputs">
                          <span class="cmgp-price-prefix">$</span>
                          <input type="number" id="price-min-overlay-{{ section_id }}" name="{{ filter.min_value.param_name }}" placeholder="0" value="{% if filter.min_value.value %}{{ filter.min_value.value | money_without_currency | remove: ',' }}{% else %}0{% endif %}" min="0" step="1">
                          <span class="cmgp-price-dash">-</span>
                          <span class="cmgp-price-prefix">$</span>
                          <input type="number" id="price-max-overlay-{{ section_id }}" name="{{ filter.max_value.param_name }}" placeholder="{{ o_price_max_dollars }}" value="{% if filter.max_value.value %}{{ filter.max_value.value | money_without_currency | remove: ',' }}{% else %}{{ o_price_max_dollars }}{% endif %}" min="0" step="1">
                        </div>
                      </div>
                  {%- endcase -%}
                </div>
              </div>
              {%- endcapture -%}
              {%- if overlay_filter_has_visible -%}{{ overlay_filter_group_content }}{%- endif -%}
              {%- endif -%}
              {%- endunless -%}
            {%- endfor -%}
          {%- else -%}
            {%- unless is_rings_collection_sidebar and has_any_shop_by_type -%}
              <p class="cmgp-no-filters">No filters available.</p>
            {%- endunless -%}
          {%- endif -%}
        </div>
        <div class="cmgp-overlay-apply-wrap">
          <button type="button" class="cmgp-overlay-apply-btn" id="cmgp-overlay-apply-{{ section_id }}">SEE RESULTS</button>
        </div>
      </div>
    </div>
  </div>
</div>

{% style %}
  .collection-main-grid-premium {
    padding: 32px 0 56px;
    background: linear-gradient(180deg, #ffffff 0%, #fdfcfa 50%, #f9f7f4 100%);
    position: relative;
  }
  
  /* Subtle luxury pattern overlay */
  .collection-main-grid-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 20% 80%, rgba(201, 160, 80, 0.03) 0%, transparent 50%),
                      radial-gradient(circle at 80% 20%, rgba(201, 160, 80, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }
  
  .cmgp-container {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0 auto;
  }
  
  .cmgp-full-width .cmgp-container {
    max-width: none !important;
  }

  /* Category carousel (Eternate-style) - buttons carousel ke saath left/right */
  .cmgp-category-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 28px;
    padding: 16px 0;
    overflow: hidden;
  }
  .cmgp-carousel-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    z-index: 2;
  }
  .cmgp-carousel-btn:hover {
    border-color: rgba(201, 160, 80, 0.5);
    background: rgba(201, 160, 80, 0.06);
    color: #8b6914;
  }
  .cmgp-carousel-prev,
  .cmgp-carousel-next {
    display: flex;
    flex-shrink: 0;
  }
  .cmgp-carousel-prev.cmgp-carousel-btn--hidden,
  .cmgp-carousel-next.cmgp-carousel-btn--hidden {
    visibility: hidden;
    pointer-events: none;
  }
  .cmgp-carousel-track-wrap {
    flex: 1 1 auto;
    max-width: min(100%, 1526px);
    min-width: 320px;
    overflow: hidden;
    display: flex;
    position: relative;
  }
  .cmgp-carousel-track-wrap.cmgp-carousel-track-wrap--centered {
    justify-content: center;
  }
  .cmgp-carousel-track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    justify-content: flex-start;
    scroll-behavior: smooth;
    padding: 4px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .cmgp-carousel-track-wrap--centered .cmgp-carousel-track {
    width: max-content;
    max-width: 100%;
  }
  .cmgp-carousel-track::-webkit-scrollbar {
    display: none;
  }
  .cmgp-carousel-item {
    flex-shrink: 0;
    width: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 14px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.25s, background 0.25s;
    text-align: center;
    font: inherit;
    color: #1a1a1a;
  }
  .cmgp-carousel-item:hover {
    border-color: rgba(201, 160, 80, 0.4);
    background: rgba(201, 160, 80, 0.04);
  }
  .cmgp-carousel-item.active {
    border-color: #c9a050;
    background: rgba(201, 160, 80, 0.08);
  }
  .cmgp-carousel-item__img {
    width: 145px;
    height: 145px;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cmgp-carousel-item__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cmgp-carousel-item__placeholder {
    font-size: 36px;
    font-weight: 600;
    color: #ccc;
  }
  .cmgp-carousel-item__title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
  }
  /* Loading state when carousel filter is applied */
  .cmgp-replaceable-content.cmgp-loading {
    position: relative;
    min-height: 280px;
  }
  .cmgp-replaceable-content.cmgp-loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 80px;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    border: 3px solid rgba(201, 160, 80, 0.2);
    border-top-color: #c9a050;
    border-radius: 50%;
    animation: cmgp-spin 0.8s linear infinite;
  }
  @keyframes cmgp-spin {
    to { transform: rotate(360deg); }
  }
  
  .cmgp-layout {
    display: flex;
    gap: 90px;
    align-items: flex-start;
  }
  
  /* Sidebar - Luxury Gold Jewelry Filter Layout */
  .cmgp-sidebar {
    width: 300px;
    flex-shrink: 0;
    padding: 0;
    padding-right: 45px;
    position: relative;
    z-index: 10;
  }
  
  .cmgp-sidebar-sticky {
    position: sticky;
    top: 100px;
  }
  
  .cmgp-sidebar-content {
    padding-right: 0;
  }

  .cmgp-filter-form {
    margin: 0;
    padding: 0;
    display: block;
  }
  
  .cmgp-sidebar-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 24px;
    color: #1a1a1a;
    padding: 0 0 18px 0;
    border-bottom: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .cmgp-sidebar-title::before {
    content: '';
    width: 6px;
    height: 34px;
    background: linear-gradient(180deg, #c9a050 0%, #d4af37 50%, #c9a050 100%);
    border-radius: 3px;
  }
  
  .cmgp-sidebar-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #c9a050 0%, rgba(201, 160, 80, 0.3) 50%, transparent 100%);
  }
  
  .cmgp-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .cmgp-filter-group {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(201, 160, 80, 0.06);
    border: 1px solid rgba(201, 160, 80, 0.1);
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .cmgp-filter-group:hover {
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(201, 160, 80, 0.08);
    border-color: rgba(201, 160, 80, 0.2);
  }
  
  .cmgp-filter-group.active {
    border-color: rgba(201, 160, 80, 0.25);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(201, 160, 80, 0.1);
  }
  
  .cmgp-filter-title {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    padding: 18px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    user-select: none;
    flex-shrink: 0;
    min-height: 56px;
    box-sizing: border-box;
    background: transparent;
  }
  
  .cmgp-filter-title:hover {
    color: #8b6914;
    background: rgba(253, 252, 250, 0.6);
  }
  
  .cmgp-filter-title::after {
    content: '+';
    font-size: 20px;
    font-weight: 300;
    color: #c9a050;
    transition: transform 0.4s ease, color 0.3s ease;
    flex-shrink: 0;
    margin-left: 12px;
    line-height: 1;
  }
  
  .cmgp-filter-group.active .cmgp-filter-title::after {
    content: '−';
    transform: none;
    color: #8b6914;
  }
  
  .cmgp-filter-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), padding 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 20px 0 20px !important;
    margin: 0;
  }
  
  .cmgp-filter-group.active .cmgp-filter-content {
    max-height: 400px;
    padding: 0 20px 20px 20px !important;
    overflow-y: auto;
  
    border-top: 1px solid rgba(201, 160, 80, 0.08);
  }
  
  /* Premium scrollbar for filter content */
  .cmgp-filter-content::-webkit-scrollbar {
    width: 16px;
  }
  
  .cmgp-filter-content::-webkit-scrollbar-track {
    background: rgba(201, 160, 80, 0.05);
    border-radius: 3px;
  }
  
  .cmgp-filter-content::-webkit-scrollbar-thumb {
    background: rgba(201, 160, 80, 0.25);
    border-radius: 3px;
  }
  
  .cmgp-filter-content::-webkit-scrollbar-thumb:hover {
    background: rgba(201, 160, 80, 0.4);
  }
  
  .cmgp-filter-item {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    padding: 12px 0;
    padding-left: 4px;
    transition: all 0.25s ease;
    user-select: none;
    border-radius: 8px;
    margin: 0 -4px;
    padding-left: 4px;
  }
  
  .cmgp-filter-item:hover {
    color: #8b6914;
    background: rgba(253, 252, 250, 0.8);
  }
  
  .cmgp-filter-item input[type="checkbox"]:checked + span {
    color: #1a1a1a;
    font-weight: 600;
  }
  
  .cmgp-filter-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    cursor: pointer;
    accent-color: #c9a050;
    border-radius: 4px;
    flex-shrink: 0;
  }
  
  .cmgp-no-filters {
    font-size: 14px;
    font-weight: 500;
    color: #666;
    padding: 24px 20px;
    text-align: center;
  }
  
  .cmgp-price-range {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 0 0 0;
  }

  /* Price slider: premium track + fill + thumbs (all aligned) */
  .cmgp-price-range-slider-wrap {
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
  }
  .cmgp-price-range-slider-wrap::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -3px;
    height: 6px;
    background: #e8e6e3;
    border-radius: 3px;
    pointer-events: none;
  }
  .cmgp-price-range-fill {
    position: absolute;
    left: var(--fill-left, 0);
    top: 50%;
    margin-top: -3px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #8b7355 0%, #6d5a45 100%);
    pointer-events: none;
    z-index: 1;
    width: var(--fill-width, 100%);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  }
  .cmgp-price-range-slider-wrap input[type="range"] {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 28px;
    margin: 0;
    padding: 0;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
  }
  .cmgp-price-range-slider-wrap input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #8b7355;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }
  .cmgp-price-range-slider-wrap input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 3px 10px rgba(139,115,85,0.35);
  }
  .cmgp-price-range-slider-wrap input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #8b7355;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    cursor: pointer;
    z-index: 2;
    margin-top: 0;
    transition: box-shadow 0.2s ease;
  }
  .cmgp-price-range-slider-wrap input[type="range"]::-moz-range-thumb:hover {
    box-shadow: 0 3px 10px rgba(139,115,85,0.35);
  }
  .cmgp-price-range-slider-wrap input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
    border-radius: 3px;
  }
  .cmgp-price-range-slider-wrap input[type="range"]::-moz-range-track {
    height: 6px;
    background: transparent;
    border-radius: 3px;
  }

  /* $ min - $ max inputs row */
  .cmgp-price-range-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .cmgp-price-range-inputs .cmgp-price-prefix {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
  }
  .cmgp-price-range-inputs .cmgp-price-dash {
    font-size: 14px;
    font-weight: 500;
    color: #666;
    margin: 0 2px;
  }
  .cmgp-price-range-inputs input[type="number"] {
    width: 80px;
    padding: 10px 12px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    background: #fff;
    text-align: right;
  }
  
  .cmgp-price-range input[type="number"] {
    padding: 14px 18px;
    border: 1px solid rgba(201, 160, 80, 0.2);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    background: #fdfcfa;
    transition: all 0.3s ease;
  }
  
  .cmgp-price-range input:focus {
    outline: none;
    border-color: #c9a050;
    box-shadow: 0 0 0 3px rgba(201, 160, 80, 0.12);
    background: #fff;
  }
  
  .cmgp-price-range input::placeholder {
    color: #999;
  }
  
  .cmgp-price-range span:not(.cmgp-price-prefix):not(.cmgp-price-dash) {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-align: center;
    letter-spacing: 1px;
  }
  
  .cmgp-price-range .cmgp-price-apply {
    padding: 14px 28px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.35s ease;
    margin-top: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
  
  .cmgp-price-range .cmgp-price-apply:hover {
    background: linear-gradient(135deg, #c9a050 0%, #b8923a 100%);
    box-shadow: 0 4px 20px rgba(201, 160, 80, 0.35);
    transform: translateY(-1px);
  }
  
  /* Main Content */
  .cmgp-main {
    flex: 1;
    min-width: 0;
  }
  
  .cmgp-sort-wrapper {
    margin-bottom: 25px;
    width: 100%;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: stretch;
  }
  .cmgp-sort-wrapper--brilliant .cmgp-sort-inner {
    display: inline-flex;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
  }
  .cmgp-sort-wrapper--brilliant .cmgp-sort-block {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    border-right: none;
  }
  .cmgp-sort-wrapper--brilliant .cmgp-sort-filter-divider {
    width: 1px;
    min-width: 1px;
    align-self: stretch;
    background: #d3d3d3;
    flex-shrink: 0;
  }
  .cmgp-sort-wrapper--brilliant .cmgp-filter-open-btn {
    border-right: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .cmgp-sort-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
    border: none;
    background: transparent;
  }
  .cmgp-sort-wrapper--brilliant .cmgp-sort-inner {
    width: auto;
  }

  .cmgp-filter-open-btn--left {
    margin-right: 0;
  }

  .cmgp-results-count {
    font-size: 13px;
    color: #666;
    margin-right: auto;
  }

  .cmgp-sort-label {
    font-size: 13px;
    color: #666;
    margin-right: 0.5rem;
  }
  .cmgp-sort-wrapper--brilliant .cmgp-sort-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #333;
    margin-right: 8px;
    text-transform: uppercase;
  }
  .cmgp-sort-wrapper--brilliant .cmgp-sort-select-wrap {
    position: relative;
    display: inline-block;
    min-width: 240px;
  }
  .cmgp-sort-wrapper--brilliant .cmgp-sort-select-mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 24px;
    bottom: 0;
    background: #fff;
    pointer-events: none;
  }
  .cmgp-sort-wrapper--brilliant .cmgp-sort-select {
    color: transparent;
    -webkit-text-fill-color: transparent;
    min-width: 240px;
    width: 100%;
    padding: 10px 24px 10px 12px;
    border: none;
    font-size: 14px;
  }
  .cmgp-sort-wrapper--brilliant .cmgp-sort-select option {
    color: #333;
    text-transform: uppercase;
    padding: 10px 14px;
    font-size: 14px;
  }

  .cmgp-sort-divider {
    display: none;
    width: 2px;
    min-width: 2px;
    align-self: stretch;
    background: #e0e0e0;
    margin: 0;
    flex-shrink: 0;
  }

  .cmgp-filter-drawer-desktop .cmgp-sort-divider {
    display: block;
  }

  .cmgp-filter-open-btn {
    display: none;
    padding: 14px 18px;
    border: none;
    border-right: 2px solid #e0e0e0;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: color 0.2s ease, background 0.2s ease;
  }

  .cmgp-filter-open-btn:hover {
    color: #8b6914;
    background: rgba(201, 160, 80, 0.06);
  }

  .cmgp-sidebar-drawer-only {
    display: none !important;
  }

  .cmgp-filter-drawer-desktop .cmgp-filter-open-btn {
    display: inline-flex;
    align-items: center;
  }
  
  .cmgp-sort-select {
    padding: 14px 35px 14px 15px;
    border: none;
    border-left: 2px solid #e0e0e0;
    border-right: 2px solid #e0e0e0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    border-radius: 0;
    min-width: 180px;
    transition: color 0.2s ease;
  }

  .cmgp-filter-drawer-desktop .cmgp-sort-select {
    border-right: none;
  }
  
  .cmgp-sort-select:hover,
  .cmgp-sort-select:focus {
    color: #8b6914;
    outline: none;
  }

  /* Active filter pills - Brilliant Earth style */
  .cmgp-active-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0 20px;
  }

  .cmgp-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    background: #f0f0f0;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .cmgp-pill:hover {
    background: #e5e5e5;
    color: #1a1a1a;
  }

  .cmgp-pill--reset {
    font-weight: 600;
    color: #8b6914;
  }

  .cmgp-pill--reset:hover {
    background: rgba(201, 160, 80, 0.15);
    color: #6d5210;
  }
  
  /* Grid - products stretch to match banner height in same row */
  .cmgp-grid {
    display: grid;
    grid-template-columns: repeat({{ products_per_row }}, 1fr);
    grid-auto-rows: auto;
    grid-auto-flow: row dense;
    gap: {{ card_gap }}px;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    align-items: stretch;
  }
  
  /* Banner - 1 product height (ak product k section k baraber) */
  .cmgp-banner {
    grid-row: span 1;
    grid-column: span 1;
    position: relative;
    overflow: hidden;
    border-radius: {{ card_radius }}px;
    min-height: 0;
    align-self: stretch;
  }
  
  /* Banner = 1 product width (3 products + 1 banner layout) */
  .cmgp-banner-span-1 {
    grid-column: span 1;
  }
  
  .cmgp-banner-left {
    grid-column: 1 / 2;
    grid-row: auto / span 1;
  }
  
  .cmgp-banner-right {
    grid-column: {{ products_per_row }} / {{ products_per_row | plus: 1 }};
    grid-row: auto / span 1;
  }
  
  /* Last visible banner apni natural position par hi (left/right alternate), force left mat karo */
  
  /* Top banner: 4th position = 3 products + 1 banner */
  .cmgp-banner-top {
    grid-column: {{ products_per_row }} / {{ products_per_row | plus: 1 }};
    grid-row: 1 / 2;
  }
  
  .cmgp-banner-link {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  .cmgp-banner-inner {
    width: 100%;
    height: 100%;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .cmgp-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
    display: block;
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
  }
  
  .cmgp-banner-zoom .cmgp-banner-image {
    transition: transform 0.4s ease;
  }
  
  .cmgp-banner-zoom:hover .cmgp-banner-image {
    transform: scale(1.05);
  }
  
  /* Product Card - Premium Jewelry Style (stretches to match banner in same row) */
  .cmgp-product-item {
    display: flex;
    flex-direction: column;
    min-height: 0;
    align-self: stretch;
  }
  
  .cmgp-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border-radius: {{ card_radius }}px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    min-height: 0;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.04);
  }
  
  .cmgp-product-card:hover {
    border-color: rgba(201, 160, 80, 0.2);
  }
  
  /* Wishlist Button - Elegant Jewelry Style (hidden on collection grid per client request) */
  .cmgp-wishlist-btn {
    display: none !important;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(201, 160, 80, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    opacity: 0;
    transform: translateY(-5px);
  }
  
  .cmgp-product-card:hover .cmgp-wishlist-btn {
    opacity: 1;
    transform: translateY(0);
  }
  
  .cmgp-wishlist-btn:hover {
    background: linear-gradient(135deg, #c9a050 0%, #dbb968 100%);
    transform: scale(1.12);
    box-shadow: 0 6px 20px rgba(201, 160, 80, 0.35);
    border-color: transparent;
  }
  
  .cmgp-wishlist-btn:hover svg {
    fill: #ffffff;
    stroke: #ffffff;
  }
  
  .cmgp-wishlist-btn svg {
    transition: all 0.3s ease;
    color: #888;
  }
  
  .cmgp-wishlist-btn.active {
    background: linear-gradient(135deg, #c9a050 0%, #dbb968 100%);
    border-color: transparent;
    opacity: 1;
    transform: translateY(0);
  }
  
  .cmgp-wishlist-btn.active svg {
    fill: #ffffff;
    stroke: #ffffff;
  }
  
  .cmgp-product-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    text-decoration: none;
    color: inherit;
  }
  
  .cmgp-product-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: {{ section.settings.image_aspect_ratio | default: 115 }}%;
    overflow: hidden;
    background: {{ section.settings.image_bg_color | default: '#f8f6f3' }};
  }
  
  /* Hover overlay removed – user request */
  
  .cmgp-product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 0;
  }
  
  /* Primary/Secondary Image Swap on Hover */
  .cmgp-image-primary {
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  .cmgp-image-secondary {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  /* Show secondary image on product card hover */
  .cmgp-product-card:hover .cmgp-image-primary.has-secondary {
    opacity: 0;
    z-index: 1;
    transform: scale(1);
  }
  
  .cmgp-product-card:hover .cmgp-image-secondary {
    opacity: 1;
    transform: scale(1.02);
    z-index: 2;
  }
  
  /* Single image - zoom on hover */
  .cmgp-product-card:hover .cmgp-image-primary:not(.has-secondary) {
    opacity: 1;
    transform: scale(1.05);
  }
  
  /* Badges - Premium Jewelry Style */
  .cmgp-product-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .cmgp-product-badge {
    padding: 4px 10px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border-radius: 2px;
    display: inline-block;
  }
  
  .cmgp-badge-sale {
    background: linear-gradient(135deg, #8b0000 0%, #cc0000 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(139, 0, 0, 0.3);
  }
  
  .cmgp-badge-soldout {
    background: linear-gradient(135deg, #555555 0%, #888888 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(85, 85, 85, 0.3);
  }
  
  .cmgp-badge-new {
    background: linear-gradient(135deg, #c9a050 0%, #dbb968 100%);
    color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(201, 160, 80, 0.3);
  }
  
  .cmgp-badge-bestseller {
    background: linear-gradient(135deg, #1a1a1a 0%, #333333 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  
  .cmgp-badge-limited {
    background: linear-gradient(135deg, #4a0080 0%, #7c2bbd 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(74, 0, 128, 0.3);
  }
  
  .cmgp-product-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ddd;
  }
  
  .cmgp-quick-add {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    padding: 8px 18px;
    background: rgba(26, 26, 26, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }
  
  .cmgp-quick-add:hover {
    background: linear-gradient(135deg, #c9a050 0%, #8b6914 100%);
    color: #fff;
    transform: translateX(-50%) translateY(0) scale(1.05);
  }
  
  .cmgp-product-card:hover .cmgp-quick-add {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  
  .cmgp-product-info {
    padding: 12px 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    text-align: center;
    background: #ffffff;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    min-height: 0;
  }
  
  .cmgp-product-vendor {
    font-size: 9px;
    color: #a0a0a0;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
    font-weight: 500;
  }
  
  /* Variant Swatches - Premium Jewelry Style */
  .cmgp-variant-swatches {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 4px 0;
  }
  
  .cmgp-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;
    pointer-events: auto;
  }
  
  .cmgp-swatch::after {
    content: '';
    position: absolute;
    top: -4px;
    left: px;
    right: px;
    bottom: -4px;
    border-radius: 50%;
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
  }
  
  .cmgp-swatch:hover {
    transform: scale(1.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  }
  
  .cmgp-swatch:hover::after {
    border-color: #c9a050;
  }
  
  .cmgp-swatch-active,
  .cmgp-swatch.cmgp-swatch-active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c9a050;
  }
  
  .cmgp-swatch-active::after {
    border-color: #c9a050;
  }
  
  .cmgp-swatch-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 9px;
    font-weight: 600;
    color: #888;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    background: #fafafa;
    transition: all 0.2s ease;
  }
  
  .cmgp-swatch-more:hover {
    background: #f0f0f0;
    color: #666;
  }
  
  /* Rating Stars - Premium Gold Style */
  .cmgp-product-rating {
    margin: 4px 0;
    padding: 2px 0;
  }
  
  .cmgp-rating-stars {
    display: flex;
    justify-content: center;
    gap: 3px;
  }
  
  .cmgp-rating-stars svg {
    filter: drop-shadow(0 1px 2px rgba(212, 175, 55, 0.3));
    transition: transform 0.2s ease;
  }
  
  .cmgp-product-card:hover .cmgp-rating-stars svg {
    animation: starPulse 0.6s ease-in-out;
  }
  
  @keyframes starPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
  }
  
  .cmgp-rating-stars svg:nth-child(1) { animation-delay: 0s; }
  .cmgp-rating-stars svg:nth-child(2) { animation-delay: 0.05s; }
  .cmgp-rating-stars svg:nth-child(3) { animation-delay: 0.1s; }
  .cmgp-rating-stars svg:nth-child(4) { animation-delay: 0.15s; }
  .cmgp-rating-stars svg:nth-child(5) { animation-delay: 0.2s; }
  
  .cmgp-product-title {
    font-size: 15px;
    font-weight: 500;
    color: #2a2a2a;
    margin: 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 34px;
    transition: color 0.3s ease;
    font-family: inherit;
    letter-spacing: 0.2px;
  }
  
  .cmgp-product-card:hover .cmgp-product-title {
    color: #8b6914;
  }
  
  .cmgp-product-price {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-top: auto;
    padding-top: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    letter-spacing: 0.3px;
  }
  
  .cmgp-price-current {
    color: #1a1a1a;
    font-weight: 700;
  }
  
  .cmgp-price-compare {
    text-decoration: line-through;
    color: #b0b0b0;
    font-size: 15px;
    font-weight: 400;
  }
  
  /* Load More - Premium Style */
  .cmgp-load-more-wrapper {
    text-align: center;
    margin-top: 60px;
    position: relative;
  }
  
  /* Decorative lines */
  .cmgp-load-more-wrapper::before,
  .cmgp-load-more-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 160, 80, 0.4), transparent);
  }
  
  .cmgp-load-more-wrapper::before {
    right: calc(50% + 130px);
  }
  
  .cmgp-load-more-wrapper::after {
    left: calc(50% + 130px);
  }
  
  .cmgp-load-more-btn {
    padding: {{ load_more_button_padding }}px 50px;
    background: {{ load_more_bg_color }};
    color: {{ load_more_text_color }};
    border: 2px solid {{ load_more_border_color }};
    font-size: {{ load_more_button_font_size }}px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 0;
    min-width: {{ load_more_button_min_width }}px;
    position: relative;
    overflow: hidden;
  }
  
  .cmgp-load-more-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.6s ease;
  }
  
  .cmgp-load-more-btn:hover::before {
    left: 100%;
  }
  
  .cmgp-load-more-btn:hover {
    background: linear-gradient(135deg, #c9a050 0%, #8b6914 100%);
    color: #ffffff;
    border-color: #c9a050;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(201, 160, 80, 0.35);
  }
  
  .cmgp-load-more-btn:active {
    transform: translateY(-1px);
  }
  
  /* Mobile Filter Toggle - Luxury Style */
  .cmgp-filter-toggle {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 16px 28px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(201, 160, 80, 0.1);
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
  }
  
  .cmgp-filter-toggle:hover {
    background: linear-gradient(135deg, #c9a050 0%, #b8923a 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(201, 160, 80, 0.4);
  }
  
  .cmgp-filter-toggle svg {
    transition: transform 0.3s ease;
  }
  
  .cmgp-filter-toggle:hover svg {
    transform: rotate(90deg);
  }
  
  .cmgp-filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: opacity 1.6s ease 0.05s, visibility 1.6s ease 0.05s;
    pointer-events: none;
  }
  
  .cmgp-filter-overlay.active {
    visibility: visible;
    opacity: 1;
    transition: opacity 1.7s ease, visibility 1.7s ease;
    pointer-events: auto;
  }
  
  .cmgp-filter-overlay-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 1.8s ease;
    z-index: 1;
  }
  
  .cmgp-filter-overlay.active .cmgp-filter-overlay-backdrop {
    opacity: 1;
  }
  
  .cmgp-filter-drawer-right .cmgp-filter-overlay-content {
    z-index: 2;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 320px !important;
    max-width: 92vw;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 24px 20px 50px;
    transition: transform 2.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.2s ease, visibility 1.2s ease !important;
    border-radius: 0;
    background: linear-gradient(180deg, #fdfcfa 0%, #fff 15%);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    border: none;
    border-left: 1px solid rgba(201, 160, 80, 0.12);
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(110%, 0, 0) !important;
  }
  
  .cmgp-filter-overlay.active .cmgp-filter-overlay-content {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0) !important;
  }
  
  .cmgp-filter-overlay.closing {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .cmgp-filter-overlay.closing .cmgp-filter-overlay-content {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(110%, 0, 0) !important;
  }
  
  .cmgp-filter-overlay .cmgp-sidebar-title {
    margin-bottom: 20px;
    font-size: 14px;
    letter-spacing: 3px;
  }
  
  .cmgp-filter-overlay .cmgp-filter-title {
    font-size: 11px;
    letter-spacing: 1.5px;
    padding: 14px 16px;
    min-height: 48px;
  }
  
  .cmgp-filter-overlay .cmgp-filter-item {
    font-size: 12px;
    padding: 10px 0 10px 2px;
  }
  
  .cmgp-filter-overlay .cmgp-filter-item span {
    font-size: 12px;
  }
  
  .cmgp-filter-overlay .cmgp-filters {
    padding-bottom: 24px;
  }
  
  .cmgp-filter-overlay .cmgp-filter-group {
    margin-bottom: 0;
  }
  
  .cmgp-filter-overlay .cmgp-price-range input[type="number"] {
    font-size: 12px;
    padding: 10px 12px;
  }

  .cmgp-filter-overlay .cmgp-price-range .cmgp-price-prefix,
  .cmgp-filter-overlay .cmgp-price-range .cmgp-price-dash {
    font-size: 12px;
  }
  
  .cmgp-filter-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(253, 252, 250, 0.9);
    border: 1px solid rgba(201, 160, 80, 0.15);
    border-radius: 50%;
    font-size: 24px;
    color: #1a1a1a;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
  }
  
  .cmgp-filter-close:hover {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
  }

  .cmgp-overlay-apply-wrap {
    padding: 20px 24px 24px;
    border-top: 1px solid rgba(201, 160, 80, 0.1);
    margin-top: 8px;
  }

  .cmgp-overlay-apply-btn {
    width: 100%;
    padding: 16px 28px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.35s ease;
  }

  .cmgp-overlay-apply-btn:hover {
    background: linear-gradient(135deg, #c9a050 0%, #8b6914 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(201, 160, 80, 0.35);
  }

  /* Responsive - all devices */
  @media (max-width: 1024px) {
    .cmgp-layout {
      flex-direction: column;
      gap: 30px;
    }
    
    .cmgp-sidebar {
      width: 100%;
      display: none;
    }
    
    .cmgp-filter-open-btn {
      display: inline-flex !important;
    }
    
    .cmgp-filter-toggle {
      display: none !important;
    }
    
    .cmgp-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
    
    .cmgp-banner {
      grid-column: span 3;
      grid-row: span 1;
    }
    
    .cmgp-banner-left,
    .cmgp-banner-right,
    .cmgp-banner-top {
      grid-column: 1 / 4;
    }
    
    .cmgp-banner-inner {
      height: {{ banner_height_mobile }}px;
      padding-top: 0;
    }
    
    .cmgp-carousel-item {
      width: 130px;
      padding: 12px 8px;
    }
    .cmgp-carousel-item__img {
      width: 80px;
      height: 80px;
    }
    .cmgp-carousel-item__title {
      font-size: 12px;
    }

    /* Sort + Filter: one row, equal width (tablet/mobile — sidebar hidden) */
    #cmgp-{{ section_id }}.collection-main-grid-premium .cmgp-sort-wrapper--brilliant {
      justify-content: stretch;
      flex-wrap: nowrap;
      padding-left: {{ mobile_sort_filter_bar_padding_h }}px;
      padding-right: {{ mobile_sort_filter_bar_padding_h }}px;
    }
    #cmgp-{{ section_id }}.collection-main-grid-premium .cmgp-sort-wrapper--brilliant .cmgp-sort-inner {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: stretch;
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }
    #cmgp-{{ section_id }}.collection-main-grid-premium .cmgp-sort-wrapper--brilliant .cmgp-sort-block--sort {
      flex: 1 1 50%;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: {{ mobile_sort_filter_padding_v }}px {{ mobile_sort_filter_padding_h }}px;
      box-sizing: border-box;
    }
    #cmgp-{{ section_id }}.collection-main-grid-premium .cmgp-sort-wrapper--brilliant .cmgp-sort-filter-divider {
      align-self: stretch;
      flex-shrink: 0;
    }
    #cmgp-{{ section_id }}.collection-main-grid-premium .cmgp-sort-wrapper--brilliant .cmgp-filter-open-btn.cmgp-sort-block {
      flex: 1 1 50%;
      min-width: 0;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      padding: {{ mobile_sort_filter_padding_v }}px {{ mobile_sort_filter_padding_h }}px;
      font-size: {{ mobile_sort_filter_font_size }}px;
      font-weight: 600;
      letter-spacing: 0.06em;
      box-sizing: border-box;
      line-height: 1.2;
    }
    #cmgp-{{ section_id }}.collection-main-grid-premium .cmgp-sort-wrapper--brilliant .cmgp-sort-label {
      font-size: {{ mobile_sort_filter_font_size }}px;
      margin-right: 4px;
      white-space: nowrap;
    }
    #cmgp-{{ section_id }}.collection-main-grid-premium .cmgp-sort-wrapper--brilliant .cmgp-sort-select-wrap {
      min-width: 0 !important;
      flex: 1 1 auto;
      max-width: 100%;
    }
    #cmgp-{{ section_id }}.collection-main-grid-premium .cmgp-sort-wrapper--brilliant .cmgp-sort-select {
      min-width: 0 !important;
      width: 100% !important;
      max-width: 100%;
      font-size: {{ mobile_sort_filter_font_size }}px;
      padding: 6px 22px 6px 6px;
    }
    #cmgp-{{ section_id }}.collection-main-grid-premium .cmgp-sort-wrapper--brilliant .cmgp-sort-select-mask {
      right: 16px;
    }
    #cmgp-{{ section_id }}.collection-main-grid-premium .cmgp-sort-wrapper:not(.cmgp-sort-wrapper--brilliant) {
      flex-wrap: nowrap;
      justify-content: stretch;
      padding-left: {{ mobile_sort_filter_bar_padding_h }}px;
      padding-right: {{ mobile_sort_filter_bar_padding_h }}px;
    }
    #cmgp-{{ section_id }}.collection-main-grid-premium .cmgp-sort-wrapper:not(.cmgp-sort-wrapper--brilliant) .cmgp-sort-inner {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: stretch;
      width: 100%;
      min-width: 0;
    }
    #cmgp-{{ section_id }}.collection-main-grid-premium .cmgp-sort-wrapper:not(.cmgp-sort-wrapper--brilliant) .cmgp-filter-open-btn {
      flex: 1 1 50%;
      min-width: 0;
      justify-content: center;
      padding: {{ mobile_sort_filter_padding_v }}px {{ mobile_sort_filter_padding_h }}px;
      font-size: {{ mobile_sort_filter_font_size }}px;
      border-right: 1px solid #e0e0e0;
      box-sizing: border-box;
    }
    #cmgp-{{ section_id }}.collection-main-grid-premium .cmgp-sort-wrapper:not(.cmgp-sort-wrapper--brilliant) .cmgp-sort-select {
      flex: 1 1 50%;
      min-width: 0 !important;
      width: auto !important;
      max-width: none;
      font-size: {{ mobile_sort_filter_font_size }}px;
      padding: {{ mobile_sort_filter_padding_v }}px {{ mobile_sort_filter_padding_h }}px;
      border-left: none;
      text-align: center;
      box-sizing: border-box;
    }
  }
  
  @media (max-width: 768px) {
    .collection-main-grid-premium {
      padding: 20px 0 36px;
    }
    
    .cmgp-container {
      padding: 0 15px;
    }
    
    .cmgp-grid {
      grid-template-columns: repeat({{ mobile_columns }}, 1fr);
      gap: 15px;
    }
    
    .cmgp-banner {
      grid-column: span {{ mobile_columns }};
    }
    
    .cmgp-banner-left,
    .cmgp-banner-right,
    .cmgp-banner-top {
      grid-column: 1 / {{ mobile_columns | plus: 1 }};
    }

    .cmgp-carousel-item {
      width: 100px;
      padding: 10px 6px;
      min-width: 90px;
    }
    .cmgp-carousel-item__img {
      width: 56px;
      height: 56px;
    }
    .cmgp-carousel-item__title {
      font-size: 11px;
    }
    
    .cmgp-sort-select {
      min-width: 140px;
      padding: 12px 30px 12px 12px;
      font-size: 13px;
    }
    .cmgp-sort-wrapper--brilliant .cmgp-sort-select-wrap {
      min-width: 200px;
    }
    .cmgp-sort-wrapper--brilliant .cmgp-sort-select {
      min-width: 200px;
      font-size: 13px;
    }
  }
  
  @media (max-width: 480px) {
    .collection-main-grid-premium {
      padding: 16px 0 28px;
    }
    
    .cmgp-container {
      padding: 0 12px;
    }
    
    .cmgp-grid {
      grid-template-columns: repeat({{ mobile_columns }}, 1fr);
      gap: 12px;
    }
    
    .cmgp-banner {
      grid-column: span {{ mobile_columns }};
    }
    
    .cmgp-banner-left,
    .cmgp-banner-right,
    .cmgp-banner-top {
      grid-column: 1 / {{ mobile_columns | plus: 1 }};
    }

    .cmgp-carousel-item {
      width: 88px;
      min-width: 80px;
      padding: 8px 5px;
    }
    .cmgp-carousel-item__img {
      width: 50px;
      height: 50px;
    }
    .cmgp-carousel-item__title {
      font-size: 10px;
    }
    
    #cmgp-{{ section_id }}.collection-main-grid-premium .cmgp-sort-wrapper {
      flex-wrap: nowrap;
      gap: 0;
      padding-top: 12px;
      padding-bottom: 12px;
      padding-left: {{ mobile_sort_filter_bar_padding_h }}px;
      padding-right: {{ mobile_sort_filter_bar_padding_h }}px;
    }

    .cmgp-sort-select {
      min-width: 120px;
      font-size: 12px;
    }
    .cmgp-sort-wrapper--brilliant .cmgp-sort-select-wrap {
      min-width: 180px;
    }
    .cmgp-sort-wrapper--brilliant .cmgp-sort-select {
      min-width: 180px;
      font-size: 13px;
    }

    /* Keep single-row sort/filter on small phones (override above min-widths) */
    #cmgp-{{ section_id }}.collection-main-grid-premium .cmgp-sort-wrapper--brilliant .cmgp-sort-select-wrap,
    #cmgp-{{ section_id }}.collection-main-grid-premium .cmgp-sort-wrapper--brilliant .cmgp-sort-select {
      min-width: 0 !important;
    }
  }
{% endstyle %}

<script>
  (function() {
    const sectionId = '{{ section_id }}';
    const wrapper = document.getElementById('cmgp-' + sectionId);
    const grid = document.getElementById('cmgp-grid-' + sectionId);
    const loadMoreBtn = document.getElementById('cmgp-load-more-' + sectionId);
    const filterToggle = document.getElementById('cmgp-filter-toggle-' + sectionId);
    const filterOverlay = document.getElementById('cmgp-filter-overlay-' + sectionId);
    const filterClose = document.getElementById('cmgp-filter-close-' + sectionId);
    const sortSelect = document.getElementById('cmgp-sort-' + sectionId);

    /* Category carousel: default first category + click = related products (no reload) */
    const carousel = document.getElementById('cmgp-carousel-' + sectionId);
    const replaceable = document.getElementById('cmgp-replaceable-content-' + sectionId);
    if (carousel && wrapper && replaceable) {
      const track = carousel.querySelector('.cmgp-carousel-track');
      const prevBtn = carousel.querySelector('.cmgp-carousel-prev');
      const nextBtn = carousel.querySelector('.cmgp-carousel-next');
      const items = carousel.querySelectorAll('.cmgp-carousel-item');
      var norm = function(v) { return (v || '').replace(/\+/g, ' ').toLowerCase().replace(/\s+/g, '-'); };

      function applyCarouselFilter(filterValue, param, updateHistory) {
        if (!filterValue || !param) return;
        var url = new URL(window.location.href);
        var filterNorm = norm(filterValue);
        var current = url.searchParams.getAll(param);
        var isActive = current.some(function(v) { return norm(v) === filterNorm; });

        /* Carousel: one filter at a time. Remove all carousel params then set only one if activating. */
        var carouselParams = ['filter.p.product_type', 'filter.p.tag', 'filter.p.m.custom.type'];
        carouselParams.forEach(function(p) { url.searchParams.delete(p); });

        if (isActive) {
          /* Clicked active filter again = show all (no carousel filter). */
          if (grid) grid.dataset.lastClickedFilters = '';
        } else {
          /* Activate only this filter - single value only. */
          url.searchParams.set(param, filterValue);
          if (grid) grid.dataset.lastClickedFilters = param + '::' + filterNorm;
        }

        url.searchParams.delete('sections');
        url.searchParams.delete('section_id');
        var qs = url.searchParams.toString();
        var go = url.pathname + (qs ? '?' + qs : '');
        fetch(go, { headers: { 'Accept': 'text/html', 'X-Requested-With': 'XMLHttpRequest' } })
          .then(function(r) { return r.text(); })
          .then(function(html) {
            var parser = new DOMParser();
            var doc = parser.parseFromString(html, 'text/html');
            var nextReplaceable = doc.getElementById('cmgp-replaceable-content-' + sectionId);
            if (!nextReplaceable) {
              window.location.href = go;
              return;
            }
            replaceable.innerHTML = nextReplaceable.innerHTML;
            if (updateHistory) {
              window.history.pushState({}, '', go);
            }
            updateCarouselActiveState();
            if (typeof autoLoadAllPagesIfFiltered === 'function') autoLoadAllPagesIfFiltered();
            if (typeof markWishlistActive === 'function') markWishlistActive();
          })
          .catch(function() {
            window.location.href = go;
          });
      }

      function updateCarouselActiveState() {
        var q = new URLSearchParams(window.location.search);
        carousel.querySelectorAll('.cmgp-carousel-item').forEach(function(b) {
          var bparam = b.dataset.filterParam || 'filter.p.product_type';
          var bval = b.dataset.filterValue;
          var active = q.getAll(bparam).some(function(v) { return norm(v) === norm(bval); });
          b.classList.toggle('active', !!active);
        });
      }

      function ensureCarouselImagesFromAllPages() {
        var collHandle = (wrapper && wrapper.dataset && wrapper.dataset.collectionHandle) ? wrapper.dataset.collectionHandle : '';
        if (!collHandle) return;
        var missing = Array.from(carousel.querySelectorAll('.cmgp-carousel-item')).filter(function(btn) {
          return !btn.querySelector('.cmgp-carousel-item__image');
        });
        if (!missing.length) return;

        var pending = {};
        missing.forEach(function(btn) {
          var key = (btn.dataset.filterParam || 'filter.p.tag') + '::' + norm(btn.dataset.filterValue || '');
          if (key && key.indexOf('::') !== -1) pending[key] = btn;
        });
        var pendingKeys = function() { return Object.keys(pending); };
        if (!pendingKeys().length) return;

        var maxPages = 10; // 2500 products max scan
        function productMatches(product, filterParam, filterValueNorm) {
          if (!product || !filterValueNorm) return false;
          if (filterParam === 'filter.p.tag' || (filterParam.indexOf('filter.p.') === 0 && filterParam.indexOf('.tag') !== -1)) {
            var tags = String(product.tags || '').split(',').map(function(t) { return norm(t.trim()); }).filter(Boolean);
            return tags.some(function(t) { return t === filterValueNorm || t.indexOf(filterValueNorm) !== -1 || filterValueNorm.indexOf(t) !== -1; });
          }
          var ptype = norm(product.product_type || product.type || '');
          return ptype === filterValueNorm || ptype.indexOf(filterValueNorm) !== -1 || filterValueNorm.indexOf(ptype) !== -1;
        }

        function applyImage(btn, src) {
          if (!btn || !src) return;
          var imgWrap = btn.querySelector('.cmgp-carousel-item__img');
          if (!imgWrap) return;
          imgWrap.innerHTML = '';
          var img = document.createElement('img');
          img.className = 'cmgp-carousel-item__image';
          img.loading = 'lazy';
          img.alt = (btn.querySelector('.cmgp-carousel-item__title') || {}).textContent || '';
          img.src = src;
          imgWrap.appendChild(img);
        }

        function hideUnmatchedPending() {
          pendingKeys().forEach(function(key) {
            var btn = pending[key];
            if (!btn) return;
            btn.style.display = 'none';
          });
          if (typeof updateCarouselButtons === 'function') updateCarouselButtons();
        }

        function scanPage(page) {
          var url = '/collections/' + encodeURIComponent(collHandle) + '/products.json?limit=250&page=' + page;
          return fetch(url, { headers: { 'Accept': 'application/json' } })
            .then(function(r) { return r.ok ? r.json() : null; })
            .then(function(data) {
              var products = (data && data.products) ? data.products : [];
              if (!products.length) {
                hideUnmatchedPending();
                return false;
              }

              pendingKeys().forEach(function(key) {
                var parts = key.split('::');
                var p = parts[0];
                var v = parts[1];
                var btn = pending[key];
                if (!btn) return;
                for (var i = 0; i < products.length; i++) {
                  var pr = products[i];
                  if (!productMatches(pr, p, v)) continue;
                  var imgSrc = '';
                  if (pr.image && pr.image.src) imgSrc = pr.image.src;
                  else if (pr.images && pr.images.length && pr.images[0].src) imgSrc = pr.images[0].src;
                  if (!imgSrc) continue;
                  applyImage(btn, imgSrc);
                  delete pending[key];
                  break;
                }
              });

              if (!pendingKeys().length) return true;
              if (products.length < 250) {
                hideUnmatchedPending();
                return true;
              }
              if (page >= maxPages) {
                hideUnmatchedPending();
                return true;
              }
              return scanPage(page + 1);
            })
            .catch(function() {
              hideUnmatchedPending();
              return true;
            });
        }

        scanPage(1);
      }

      var trackWrap = carousel ? carousel.querySelector('.cmgp-carousel-track-wrap') : null;
      function updateCarouselButtons() {
        if (!track) return;
        var canScroll = track.scrollWidth > track.clientWidth;
        var itemCount = items.length;
        var shouldCenter = itemCount <= 8 && !canScroll;
        if (trackWrap) trackWrap.classList.toggle('cmgp-carousel-track-wrap--centered', shouldCenter);
        if (prevBtn && nextBtn) {
          prevBtn.classList.toggle('cmgp-carousel-btn--hidden', !canScroll || track.scrollLeft <= 0);
          nextBtn.classList.toggle('cmgp-carousel-btn--hidden', !canScroll || track.scrollLeft >= track.scrollWidth - track.clientWidth - 2);
        }
      }
      if (track) {
        track.addEventListener('scroll', updateCarouselButtons);
        new ResizeObserver(updateCarouselButtons).observe(track);
      }
      if (track && prevBtn) prevBtn.addEventListener('click', function() { track.scrollBy({ left: -193, behavior: 'smooth' }); });
      if (track && nextBtn) nextBtn.addEventListener('click', function() { track.scrollBy({ left: 193, behavior: 'smooth' }); });
      updateCarouselButtons();
      ensureCarouselImagesFromAllPages();

      items.forEach(function(btn) {
        btn.addEventListener('click', function() {
          var p = this.dataset.filterParam || 'filter.p.product_type';
          var v = this.dataset.filterValue;
          applyCarouselFilter(v, p, true);
        });
      });
      window.addEventListener('popstate', function() {
        updateCarouselActiveState();
        if (typeof autoLoadAllPagesIfFiltered === 'function') autoLoadAllPagesIfFiltered();
      });
    }
    
    if (!grid) return;
    
    const productsPerPage = parseInt(grid.dataset.productsPerPage) || 24;
    const totalProducts = parseInt(grid.dataset.totalProducts) || 0;
    
    /* Hide banners after last visible product; also hide banners when visible product count is less than banner's data-min-products (layout sahi rahe kam products par). */
    function hideBannersAfterLastVisibleProduct(gridEl, afterLastMatchingIndex) {
      if (!gridEl || !gridEl.children) return;
      var visibleCount = 0;
      var lastVisibleIndex = -1;
      for (var i = 0; i < gridEl.children.length; i++) {
        var el = gridEl.children[i];
        if (el.classList && el.classList.contains('cmgp-product-item') && el.style.display !== 'none') {
          visibleCount++;
          lastVisibleIndex = i;
        }
      }
      if (typeof afterLastMatchingIndex === 'number' && afterLastMatchingIndex >= 0) {
        lastVisibleIndex = afterLastMatchingIndex;
      }
      var minProductsNum = function(v) { return parseInt(v, 10) || 0; };
      var lastVisibleBannerIndex = -1;
      for (var j = 0; j < gridEl.children.length; j++) {
        var child = gridEl.children[j];
        if (child.classList && child.classList.contains('cmgp-banner')) {
          var minProducts = minProductsNum(child.getAttribute('data-min-products'));
          var hideByCount = (minProducts > 0 && visibleCount < minProducts);
          var hideByPosition = (lastVisibleIndex >= 0 && j > lastVisibleIndex);
          var hide = hideByCount || hideByPosition;
          child.style.display = hide ? 'none' : 'block';
          child.classList.remove('cmgp-banner-last');
          if (!hide) lastVisibleBannerIndex = j;
        }
      }
      if (lastVisibleBannerIndex >= 0 && gridEl.children[lastVisibleBannerIndex]) {
        gridEl.children[lastVisibleBannerIndex].classList.add('cmgp-banner-last');
      }
    }
    
    /* Carousel filter: one filter at a time. Product must match the active filter; others hidden. */
    var normFilter = function(v) { return (v || '').replace(/\+/g, ' ').toLowerCase().replace(/\s+/g, '-'); };
    function applyClientSideTypeFilter() {
      var gridEl = document.getElementById('cmgp-grid-' + sectionId);
      if (!gridEl) return;
      var q = new URLSearchParams(wrapper.ownerDocument.location.search);
      var norm = normFilter;
      var typeFilters = [];
      var tagFilters = [];
      q.forEach(function(val, key) {
        if (key === 'filter.p.tag' || (key.indexOf('filter.p.') === 0 && key.indexOf('.tag') !== -1)) {
          tagFilters.push(norm(val));
        } else if (key === 'filter.p.product_type' || (key.indexOf('filter.p.') === 0 && (key.indexOf('product_type') !== -1 || key.indexOf('custom.type') !== -1))) {
          typeFilters.push(norm(val));
        }
      });
      var hasCarouselFilters = typeFilters.length > 0 || tagFilters.length > 0;
      var items = gridEl.querySelectorAll('.cmgp-product-item');
      var banners = gridEl.querySelectorAll('.cmgp-banner');
      var visibleCount = 0;
      items.forEach(function(el) {
        var type = norm(el.dataset.productType || '');
        var tagsStr = el.dataset.productTags || '';
        var tags = tagsStr ? tagsStr.split(',').map(function(t) { return norm(t.trim()); }).filter(Boolean) : [];
        var matchType = typeFilters.length === 0 || typeFilters.indexOf(type) !== -1;
        var matchTag = tagFilters.length === 0 || tagFilters.some(function(tf) { return tags.indexOf(tf) !== -1; });
        /* Tag filter: sirf tag se match, product type ka koi wasta nahi. Type filter alag hai. */
        var match = !hasCarouselFilters || (tagFilters.length > 0 ? matchTag : (typeFilters.length > 0 ? matchType : true));
        if (match) {
          el.style.display = 'flex';
          el.style.order = '0';
          visibleCount++;
        } else {
          el.style.display = 'none';
          el.style.order = '1';
        }
      });
      banners.forEach(function(b) { b.style.order = '0'; b.style.display = 'block'; });
      if (hasCarouselFilters && visibleCount <= 8 && visibleCount > 0) {
        banners.forEach(function(b) { b.style.order = '1'; });
      }
      var lastMatchingIdx = -1;
      if (hasCarouselFilters && visibleCount > 0) {
        for (var idx = 0; idx < gridEl.children.length; idx++) {
          var c = gridEl.children[idx];
          if (c.classList && c.classList.contains('cmgp-product-item') && c.style.display !== 'none')
            lastMatchingIdx = idx;
        }
      }
      hideBannersAfterLastVisibleProduct(gridEl, lastMatchingIdx >= 0 ? lastMatchingIdx : undefined);
      var carouselEl = document.getElementById('cmgp-carousel-' + sectionId);
      if (carouselEl) {
        carouselEl.querySelectorAll('.cmgp-carousel-item').forEach(function(btn) { btn.style.display = ''; });
      }
    }
    applyClientSideTypeFilter();

    function hasCarouselFilterInUrl() {
      var q = new URLSearchParams(window.location.search);
      return !!(q.getAll('filter.p.tag').length || q.getAll('filter.p.product_type').length || q.getAll('filter.p.m.custom.type').length);
    }

    function autoLoadAllPagesIfFiltered() {
      const gridEl = document.getElementById('cmgp-grid-' + sectionId);
      if (!gridEl) return Promise.resolve();
      const useAjaxLoadMore = gridEl.dataset.useAjaxLoadMore === 'true';
      if (!useAjaxLoadMore || !hasCarouselFilterInUrl()) return Promise.resolve();

      function fetchNext() {
        const nextPageUrl = gridEl.dataset.nextPageUrl;
        if (!nextPageUrl || gridEl.dataset.hasNext !== 'true') {
          return Promise.resolve();
        }
        return fetch(nextPageUrl, { headers: { 'Accept': 'text/html', 'X-Requested-With': 'XMLHttpRequest' } })
          .then(function(r) { return r.text(); })
          .then(function(html) {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            const responseGrid = doc.getElementById('cmgp-grid-' + sectionId);
            if (responseGrid) {
              while (responseGrid.firstChild) {
                gridEl.appendChild(responseGrid.firstChild);
              }
              gridEl.dataset.nextPageUrl = responseGrid.dataset.nextPageUrl || '';
              gridEl.dataset.hasNext = responseGrid.dataset.hasNext || 'false';
              gridEl.dataset.totalProducts = responseGrid.dataset.totalProducts || gridEl.dataset.totalProducts;
            } else {
              gridEl.dataset.hasNext = 'false';
              gridEl.dataset.nextPageUrl = '';
            }
          })
          .then(fetchNext)
          .catch(function() {
            gridEl.dataset.hasNext = 'false';
            gridEl.dataset.nextPageUrl = '';
          });
      }

      return fetchNext().then(function() {
        const loadBtn = document.getElementById('cmgp-load-more-' + sectionId);
        if (loadBtn) {
          var w = loadBtn.closest('.cmgp-load-more-wrapper');
          if (w) w.style.display = 'none';
        }
        hideBannersAfterLastVisibleProduct(gridEl);
        if (typeof applyClientSideTypeFilter === 'function') applyClientSideTypeFilter();
        if (typeof markWishlistActive === 'function') markWishlistActive();
      });
    }

    autoLoadAllPagesIfFiltered();
    
    // Load More (event delegation so it works after carousel filter replaces content)
    wrapper.addEventListener('click', function(e) {
      const loadMoreBtnClicked = e.target.closest('#cmgp-load-more-' + sectionId);
      if (!loadMoreBtnClicked) return;
      const gridEl = document.getElementById('cmgp-grid-' + sectionId);
      if (!gridEl) return;
      const useAjaxLoadMore = gridEl.dataset.useAjaxLoadMore === 'true';
      const sectionIdFromBtn = loadMoreBtnClicked.dataset.sectionId;

      if (useAjaxLoadMore) {
        const nextPageUrl = gridEl.dataset.nextPageUrl;
        if (!nextPageUrl) {
          loadMoreBtnClicked.closest('.cmgp-load-more-wrapper').style.display = 'none';
          return;
        }
        loadMoreBtnClicked.disabled = true;
        loadMoreBtnClicked.textContent = 'Loading...';
        fetch(nextPageUrl, { headers: { 'Accept': 'text/html', 'X-Requested-With': 'XMLHttpRequest' } })
          .then(function(r) { return r.text(); })
          .then(function(html) {
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            const responseGrid = doc.getElementById('cmgp-grid-' + sectionIdFromBtn);
            if (responseGrid) {
              while (responseGrid.firstChild) {
                gridEl.appendChild(responseGrid.firstChild);
              }
              gridEl.dataset.nextPageUrl = responseGrid.dataset.nextPageUrl || '';
              gridEl.dataset.hasNext = responseGrid.dataset.hasNext || 'false';
              gridEl.dataset.totalProducts = responseGrid.dataset.totalProducts || gridEl.dataset.totalProducts;
            }
            if (gridEl.dataset.hasNext !== 'true') {
              var w = loadMoreBtnClicked.closest('.cmgp-load-more-wrapper');
              if (w) w.style.display = 'none';
            }
            hideBannersAfterLastVisibleProduct(gridEl);
            if (typeof applyClientSideTypeFilter === 'function') applyClientSideTypeFilter();
            if (typeof markWishlistActive === 'function') markWishlistActive();
            gridEl.dispatchEvent(new CustomEvent('cmgp-content-replaced', { bubbles: true }));
          })
          .catch(function() {
            loadMoreBtnClicked.disabled = false;
            loadMoreBtnClicked.textContent = loadMoreBtnClicked.getAttribute('data-original-text') || 'Load More';
          })
          .then(function() {
            loadMoreBtnClicked.disabled = false;
            loadMoreBtnClicked.textContent = loadMoreBtnClicked.getAttribute('data-original-text') || 'Load More';
          });
        return;
      }

      const productsPerPageEl = parseInt(gridEl.dataset.productsPerPage) || 24;
      const hiddenProducts = Array.from(gridEl.querySelectorAll('.cmgp-product-item[style*="display: none"]'));
      const hiddenBanners = Array.from(gridEl.querySelectorAll('.cmgp-banner[style*="display: none"]'));
      const nextBatch = hiddenProducts.slice(0, productsPerPageEl);
      const nextBanners = hiddenBanners.slice(0, 2);

      nextBatch.forEach(function(item) {
        item.style.display = 'flex';
      });
      nextBanners.forEach(function(banner) {
        banner.style.display = 'block';
      });
      hideBannersAfterLastVisibleProduct(gridEl);
      if (hiddenProducts.length <= productsPerPageEl) {
        loadMoreBtnClicked.closest('.cmgp-load-more-wrapper').style.display = 'none';
      }
    });
    
    // Wishlist Button Toggle (event delegation so it works after carousel filter replaces content)
    wrapper.addEventListener('click', function(e) {
      const btn = e.target.closest('.cmgp-wishlist-btn');
      if (!btn) return;
      e.preventDefault();
      e.stopPropagation();
      btn.classList.toggle('active');
      const productId = btn.dataset.productId;
      let wishlist = JSON.parse(localStorage.getItem('cmgp_wishlist') || '[]');
      if (btn.classList.contains('active')) {
        if (!wishlist.includes(productId)) wishlist.push(productId);
      } else {
        wishlist = wishlist.filter(function(id) { return id !== productId; });
      }
      localStorage.setItem('cmgp_wishlist', JSON.stringify(wishlist));
    });
    function markWishlistActive() {
      document.querySelectorAll('#cmgp-{{ section_id }} .cmgp-wishlist-btn').forEach(function(btn) {
        const productId = btn.dataset.productId;
        if (productId && JSON.parse(localStorage.getItem('cmgp_wishlist') || '[]').indexOf(productId) !== -1) {
          btn.classList.add('active');
        }
      });
    }
    markWishlistActive();
    wrapper.addEventListener('cmgp-content-replaced', markWishlistActive);
    
    // Filter Dropdown Toggle (sidebar + overlay - dono par accordion)
    const filterGroups = document.querySelectorAll('#cmgp-{{ section_id }} .cmgp-filter-group');
    filterGroups.forEach(function(group) {
      const title = group.querySelector('.cmgp-filter-title');
      if (title) {
        title.addEventListener('click', function() {
          group.classList.toggle('active');
        });
      }
    });
    
    // Sidebar filter form: submit so Shopify applies filters (price + checkboxes) correctly
    const filterForm = document.getElementById('cmgp-filter-form-{{ section_id }}');
    if (filterForm) {
      // Before submit: normalize price; inject hidden inputs for color group checkboxes (multiple variant values per group)
      filterForm.addEventListener('submit', function() {
        const minIn = document.getElementById('price-min-{{ section_id }}');
        const maxIn = document.getElementById('price-max-{{ section_id }}');
        [minIn, maxIn].forEach(function(inp) {
          if (!inp) return;
          if (!inp.dataset.paramName) inp.dataset.paramName = inp.getAttribute('name');
          var v = normalizePriceForFilter(inp.value);
          inp.value = v;
          if (v) inp.setAttribute('name', inp.dataset.paramName);
          else inp.removeAttribute('name');
        });
        filterForm.querySelectorAll('.cmgp-color-group-input').forEach(function(el) { el.remove(); });
        filterForm.querySelectorAll('.cmgp-color-group-checkbox:checked').forEach(function(cb) {
          var paramName = cb.getAttribute('data-param-name');
          var valuesStr = cb.getAttribute('data-variant-values') || '';
          if (!paramName || !valuesStr) return;
          valuesStr.split(',,,').forEach(function(val) {
            if (!val) return;
            var hid = document.createElement('input');
            hid.type = 'hidden';
            hid.name = paramName;
            hid.value = val.trim();
            hid.className = 'cmgp-color-group-input';
            filterForm.appendChild(hid);
          });
        });
      });
      // Checkbox change: submit form so only selected filters (and price range) apply
      const filterCheckboxes = document.querySelectorAll('#cmgp-sidebar-{{ section_id }} input[type="checkbox"]');
      filterCheckboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
          filterForm.submit();
        });
      });
    }
    
    // Apply price filter to grid (show/hide by data-price in cents) + update URL
    function applyPriceFilter(sectionId, minDollars, maxDollars) {
      const grid = document.getElementById('cmgp-grid-' + sectionId);
      if (!grid) return;
      const minCents = Math.round(parseFloat(minDollars) * 100) || 0;
      const maxCents = Math.round(parseFloat(maxDollars) * 100) || 999999999;
      grid.querySelectorAll('.cmgp-product-item').forEach(function(item) {
        const price = parseInt(item.dataset.price, 10) || 0;
        item.style.display = (price >= minCents && price <= maxCents) ? '' : 'none';
      });
      hideBannersAfterLastVisibleProduct(grid);
    }
    function updatePriceFill(container) {
      if (!container) return;
      const wrap = container.querySelector('.cmgp-price-range-slider-wrap');
      const fill = wrap && wrap.querySelector('.cmgp-price-range-fill');
      const sliderMin = container.querySelector('.cmgp-price-slider-min');
      const sliderMax = container.querySelector('.cmgp-price-slider-max');
      if (!fill || !sliderMin || !sliderMax) return;
      const maxCap = parseFloat(container.dataset.priceMax) || 10000;
      var minVal = parseFloat(sliderMin.value) || 0;
      var maxVal = parseFloat(sliderMax.value) || maxCap;
      if (minVal > maxVal) maxVal = minVal;
      var left = maxCap > 0 ? (minVal / maxCap) * 100 : 0;
      var width = maxCap > 0 ? ((maxVal - minVal) / maxCap) * 100 : 100;
      fill.style.setProperty('--fill-left', left + '%');
      fill.style.setProperty('--fill-width', width + '%');
    }
    function applyPriceFilterFromContainer(container) {
      if (!container) return;
      const sectionId = container.dataset.sectionId;
      const inputs = container.querySelectorAll('.cmgp-price-range-inputs input[type="number"]');
      const numMin = inputs[0];
      const numMax = inputs[1];
      if (!sectionId || !numMin || !numMax) return;
      var minD = parseFloat(numMin.value) || 0;
      var maxD = parseFloat(numMax.value) || 100000;
      if (minD > maxD) maxD = minD;
      applyPriceFilter(sectionId, minD, maxD);
      var urlSel = container.closest('.cmgp-filter-overlay') ? '#cmgp-filter-overlay-' + sectionId + ' .cmgp-filter-overlay-content' : '#cmgp-sidebar-' + sectionId;
      var url = buildFilterUrl(sectionId, urlSel);
      if (url && window.history && window.history.pushState) {
        try { window.history.pushState({}, '', url); } catch (e) {}
      }
    }
    function onPriceChange(container) {
      updatePriceFill(container);
      applyPriceFilterFromContainer(container);
    }
    // Price range: sync sliders with inputs + fill bar + auto price filter
    function initPriceRangeSync(container) {
      if (!container) return;
      const wrap = container.querySelector('.cmgp-price-range-slider-wrap');
      const sliderMin = container.querySelector('.cmgp-price-slider-min');
      const sliderMax = container.querySelector('.cmgp-price-slider-max');
      const inputs = container.querySelectorAll('.cmgp-price-range-inputs input[type="number"]');
      const numMin = inputs[0];
      const numMax = inputs[1];
      if (!sliderMin || !sliderMax || !numMin || !numMax) return;
      const maxCap = parseInt(container.dataset.priceMax, 10) || 100000;
      function toNum(v) { var n = parseFloat(String(v).replace(/[^0-9.]/g, '')); return isNaN(n) ? 0 : Math.max(0, Math.min(maxCap, n)); }
      function syncMinToInput() {
        var v = toNum(sliderMin.value);
        numMin.value = Math.round(v);
        if (v > toNum(numMax.value)) { numMax.value = Math.round(v); sliderMax.value = v; }
        onPriceChange(container);
      }
      function syncMaxToInput() {
        var v = toNum(sliderMax.value);
        numMax.value = Math.round(v);
        if (v < toNum(numMin.value)) { numMin.value = Math.round(v); sliderMin.value = v; }
        onPriceChange(container);
      }
      function syncInputMinToSlider() {
        var v = toNum(numMin.value);
        sliderMin.value = v;
        if (v > toNum(numMax.value)) { numMax.value = Math.round(v); sliderMax.value = v; }
        onPriceChange(container);
      }
      function syncInputMaxToSlider() {
        var v = toNum(numMax.value);
        sliderMax.value = v;
        if (v < toNum(numMin.value)) { numMin.value = Math.round(v); sliderMin.value = v; }
        onPriceChange(container);
      }
      sliderMin.addEventListener('input', syncMinToInput);
      sliderMax.addEventListener('input', syncMaxToInput);
      numMin.addEventListener('input', syncInputMinToSlider);
      numMin.addEventListener('change', syncInputMinToSlider);
      numMax.addEventListener('input', syncInputMaxToSlider);
      numMax.addEventListener('change', syncInputMaxToSlider);
      updatePriceFill(container);
    }
    const sidebarPriceRange = document.querySelector('#cmgp-sidebar-' + sectionId + ' .cmgp-price-range');
    const overlayPriceRange = document.querySelector('#cmgp-filter-overlay-' + sectionId + ' .cmgp-price-range');
    initPriceRangeSync(sidebarPriceRange);
    initPriceRangeSync(overlayPriceRange);
    (function() {
      var q = window.location.search || '';
      var hasPriceFilter = q.indexOf('filter.v.price') !== -1 || q.indexOf('filter%2Ev%2Eprice') !== -1;
      if (hasPriceFilter) {
        applyPriceFilterFromContainer(sidebarPriceRange || overlayPriceRange);
      }
    })();
    
    // Filter open (desktop button + mobile toggle) + Overlay Apply
    const filterOpenBtn = document.getElementById('cmgp-filter-open-' + sectionId);
    const filterBackdrop = document.getElementById('cmgp-filter-backdrop-' + sectionId);
    const overlayApplyBtn = document.getElementById('cmgp-overlay-apply-' + sectionId);
    if (filterOverlay) {
      function openFilterDrawer() {
        var scrollY = window.scrollY || window.pageYOffset;
        filterOverlay.classList.add('active');
        var scrollbarWidth = (window.innerWidth - document.documentElement.clientWidth) || 0;
        if (scrollbarWidth > 0) {
          document.body.style.setProperty('padding-right', scrollbarWidth + 'px', 'important');
        }
        document.documentElement.style.overflow = 'hidden';
        document.body.style.overflow = 'hidden';
        filterOverlay.dataset.scrollY = scrollY;
      }
      function closeFilterDrawer() {
        filterOverlay.classList.add('closing');
        filterOverlay.classList.remove('active');
        document.body.style.removeProperty('padding-right');
        document.documentElement.style.overflow = '';
        document.body.style.overflow = '';
        setTimeout(function() {
          filterOverlay.classList.remove('closing');
          filterOverlay.dataset.scrollY = '';
        }, 350);
      }
      if (filterOpenBtn) {
        filterOpenBtn.addEventListener('click', openFilterDrawer);
      }
      if (filterToggle) {
        filterToggle.addEventListener('click', openFilterDrawer);
      }
      if (filterClose) {
        filterClose.addEventListener('click', closeFilterDrawer);
      }
      if (filterBackdrop) {
        filterBackdrop.addEventListener('click', closeFilterDrawer);
      }
      if (overlayApplyBtn) {
        overlayApplyBtn.addEventListener('click', function() {
          applyFiltersFromOverlay(sectionId);
        });
      }
      filterOverlay.addEventListener('click', function(e) {
        if (e.target === filterOverlay) {
          closeFilterDrawer();
        }
      });
    }
    
    // Variant Swatch Hover - Change Product Image
    const variantSwatches = document.querySelectorAll('#cmgp-grid-{{ section_id }} .cmgp-swatch');
    
    // Store original images on page load first
    document.querySelectorAll('#cmgp-grid-{{ section_id }} .cmgp-product-card').forEach(function(card) {
      const primaryImage = card.querySelector('.cmgp-image-primary');
      if (primaryImage && !card.dataset.originalImage) {
        card.dataset.originalImage = primaryImage.src;
        card.dataset.originalSrcset = primaryImage.srcset || '';
      }
    });
    
    variantSwatches.forEach(function(swatch) {
      const variantImageUrl = swatch.dataset.variantImage;
      const variantId = swatch.dataset.variantId;
      const productUrl = swatch.dataset.productUrl;
      const productCard = swatch.closest('.cmgp-product-card');
      
      if (!productCard) return;
      
      const primaryImage = productCard.querySelector('.cmgp-image-primary');
      const secondaryImage = productCard.querySelector('.cmgp-image-secondary');
      const productLink = productCard.querySelector('.cmgp-product-link');
      
      // Check if we have variant image URL
      if (!variantImageUrl || variantImageUrl.trim() === '' || !primaryImage) {
        // If no variant image, skip this swatch
        return;
      }
      
      // Hover: Change image immediately
      swatch.addEventListener('mouseenter', function(e) {
        e.stopPropagation();
        
        if (primaryImage && variantImageUrl && variantImageUrl.trim() !== '') {
          // Store original image on first hover
          if (!productCard.dataset.originalImage) {
            productCard.dataset.originalImage = primaryImage.src;
            productCard.dataset.originalSrcset = primaryImage.srcset || '';
          }
          
          // Change image immediately
          primaryImage.src = variantImageUrl;
          primaryImage.srcset = '';
          primaryImage.style.opacity = '1';
          primaryImage.style.display = 'block';
          primaryImage.classList.add('has-secondary');
          
          // Hide secondary image if it exists (we're showing variant image instead)
          if (secondaryImage) {
            secondaryImage.style.opacity = '0';
            secondaryImage.style.pointerEvents = 'none';
            secondaryImage.style.zIndex = '0';
          }
          
          // Make sure primary is on top
          primaryImage.style.zIndex = '3';
        }
      });
      
      // Mouse leave: Restore original image
      swatch.addEventListener('mouseleave', function(e) {
        e.stopPropagation();
        
        if (primaryImage && productCard.dataset.originalImage) {
          primaryImage.src = productCard.dataset.originalImage;
          if (productCard.dataset.originalSrcset) {
            primaryImage.srcset = productCard.dataset.originalSrcset;
          }
          primaryImage.style.opacity = '';
          primaryImage.style.display = '';
          primaryImage.style.zIndex = '';
          
          // Show secondary image again if it exists (for normal hover)
          if (secondaryImage) {
            secondaryImage.style.opacity = '';
            secondaryImage.style.pointerEvents = '';
            secondaryImage.style.zIndex = '';
          }
        }
      });
      
      // Click: Update product URL with variant parameter
      swatch.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        if (productLink && variantId) {
          const url = new URL(productUrl, window.location.origin);
          url.searchParams.set('variant', variantId);
          window.location.href = url.toString();
        } else if (productLink) {
          window.location.href = productUrl;
        }
      });
      
      // Make swatch cursor pointer
      swatch.style.cursor = 'pointer';
    });
    
    // Sort
    if (sortSelect) {
      sortSelect.addEventListener('change', function() {
        window.location.href = this.value;
      });
    }
  })();
  
  // Normalize price for Shopify URL: shop expects "5" or "20.40" (decimal dot, no thousands comma)
  function normalizePriceForFilter(val) {
    if (!val || typeof val !== 'string') return '';
    var s = val.trim().replace(/\s/g, '');
    if (!s) return '';
    // If comma used as decimal (e.g. 20,40) replace with dot
    if (/^\d+,\d*$/.test(s) || /^\d*,\d+$/.test(s)) {
      s = s.replace(',', '.');
    }
    // Remove thousands separators (commas)
    s = s.replace(/,/g, '');
    var num = parseFloat(s);
    if (isNaN(num) || num < 0) return '';
    return String(num);
  }

  // Apply Price Filter (uses actual param names from Shopify inputs; preserves other filters)
  function applyPriceFilter(sectionId) {
    const minInput = document.getElementById('price-min-' + sectionId);
    const maxInput = document.getElementById('price-max-' + sectionId);
    if (!minInput || !maxInput) return;
    const minValue = normalizePriceForFilter(minInput.value);
    const maxValue = normalizePriceForFilter(maxInput.value);
    const minParamName = minInput.getAttribute('name');
    const maxParamName = maxInput.getAttribute('name');
    if (!minParamName || !maxParamName) return;

    const url = new URL(window.location.href);
    if (minValue) {
      url.searchParams.set(minParamName, minValue);
    } else {
      url.searchParams.delete(minParamName);
    }
    if (maxValue) {
      url.searchParams.set(maxParamName, maxValue);
    } else {
      url.searchParams.delete(maxParamName);
    }
    window.location.href = url.toString();
  }

  // Build filter URL from a container (sidebar or overlay): checkboxes + price inputs
  function buildFilterUrl(sectionId, containerSelector) {
    const container = document.querySelector(containerSelector);
    if (!container) return null;
    const url = new URL(window.location.href);

    // Remove existing filter params (collect keys first to avoid iteration issues)
    const keysToDelete = [];
    url.searchParams.forEach(function(value, key) {
      if (key.startsWith('filter.')) keysToDelete.push(key);
    });
    keysToDelete.forEach(function(key) { url.searchParams.delete(key); });

    // Add checked checkboxes (list + category filters)
    const checkboxes = container.querySelectorAll('input[type="checkbox"]:checked');
    checkboxes.forEach(function(checkbox) {
      if (checkbox.classList.contains('cmgp-color-group-checkbox')) return;
      const name = checkbox.getAttribute('name');
      const value = checkbox.value;
      if (name && value) {
        url.searchParams.append(name, value);
      }
    });
    // Color group: one checkbox = multiple variant values (e.g. Yellow Gold -> 14k-yellow-gold, 18k-yellow-gold)
    container.querySelectorAll('.cmgp-color-group-checkbox:checked').forEach(function(cb) {
      const paramName = cb.getAttribute('data-param-name');
      const valuesStr = cb.getAttribute('data-variant-values') || '';
      if (!paramName || !valuesStr) return;
      valuesStr.split(',,,').forEach(function(val) {
        if (val) url.searchParams.append(paramName, val.trim());
      });
    });

    // Add price filter if inputs exist and have values (normalized for Shopify: e.g. "100" or "100.50")
    const minInput = container.querySelector('input[id="price-min-' + sectionId + '"], input[id^="price-min-overlay-"]');
    const maxInput = container.querySelector('input[id="price-max-' + sectionId + '"], input[id^="price-max-overlay-"]');
    if (minInput) {
      const minParam = minInput.getAttribute('name');
      const minVal = normalizePriceForFilter(minInput.value);
      if (minParam) {
        if (minVal) url.searchParams.set(minParam, minVal);
        else url.searchParams.delete(minParam);
      }
    }
    if (maxInput) {
      const maxParam = maxInput.getAttribute('name');
      const maxVal = normalizePriceForFilter(maxInput.value);
      if (maxParam) {
        if (maxVal) url.searchParams.set(maxParam, maxVal);
        else url.searchParams.delete(maxParam);
      }
    }

    return url.toString();
  }

  // Apply Filters (sidebar: checkboxes + price; preserves price when checkbox changes)
  function applyFilters(sectionId) {
    const url = buildFilterUrl(sectionId, '#cmgp-sidebar-' + sectionId);
    if (url) window.location.href = url;
  }

  // Apply filters from mobile overlay and close overlay
  function applyFiltersFromOverlay(sectionId) {
    const url = buildFilterUrl(sectionId, '#cmgp-filter-overlay-' + sectionId + ' .cmgp-filter-overlay-content');
    if (url) {
      window.location.href = url;
    } else {
      const overlay = document.getElementById('cmgp-filter-overlay-' + sectionId);
      if (overlay) {
        var scrollY = parseInt(overlay.dataset.scrollY || '0', 10);
        overlay.style.setProperty('display', 'none', 'important');
        overlay.classList.add('closing');
        document.body.style.removeProperty('padding-right');
        document.documentElement.style.overflow = '';
        document.body.style.overflow = '';
        setTimeout(function() {
          overlay.style.removeProperty('display');
          overlay.classList.remove('active', 'closing');
          overlay.dataset.scrollY = '';
          if (scrollY) requestAnimationFrame(function() { window.scrollTo(0, scrollY); });
        }, 0);
      }
    }
  }
</script>

{% schema %}
{
  "name": "Collection Grid Premium",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_brilliant_earth_filters",
      "label": "Brilliant Earth style filters (Rings)",
      "info": "Shows Results count, Sort By label, and removable filter pills. Enable for Rings template only.",
      "default": false
    },
    {
      "type": "header",
      "content": "Sort & Filter Visibility"
    },
    {
      "type": "checkbox",
      "id": "show_sort_by",
      "label": "Show Sort By dropdown",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_filter_button",
      "label": "Show Filter button",
      "info": "When hidden, filter drawer cannot be opened.",
      "default": true
    },
    {
      "type": "header",
      "content": "Sort & Filter bar (tablet & mobile)"
    },
    {
      "type": "paragraph",
      "content": "Applies at 1024px width and below (when the mobile filter bar is active). Sort and Filter stay on one row with equal width. Wider desktop layout is unchanged."
    },
    {
      "type": "range",
      "id": "mobile_sort_filter_font_size",
      "label": "Font size (Sort label + Filter + select)",
      "min": 10,
      "max": 16,
      "step": 1,
      "default": 12,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "mobile_sort_filter_padding_v",
      "label": "Padding top/bottom (inside each half)",
      "min": 6,
      "max": 20,
      "step": 2,
      "default": 10,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "mobile_sort_filter_padding_h",
      "label": "Padding left/right (inside each half)",
      "min": 6,
      "max": 20,
      "step": 2,
      "default": 10,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "mobile_sort_filter_bar_padding_h",
      "label": "Bar padding (screen left/right edges)",
      "min": 0,
      "max": 24,
      "step": 2,
      "default": 12,
      "unit": "px"
    },
    {
      "type": "header",
      "content": "Category carousel (Eternate-style)"
    },
    {
      "type": "checkbox",
      "id": "show_category_carousel",
      "label": "Show category carousel above products",
      "info": "Carousel shows only if this is ON and you add at least one 'Category (carousel)' block below.",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "hide_carousel_items_without_image",
      "label": "Hide carousel filters that don't have an image",
      "info": "When ON, only carousel items with a product or block image show at the top. Items without any image are hidden.",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "carousel_dynamic_tags",
      "label": "Carousel: Show all tags from collection (dynamic)",
      "info": "When ON, carousel items are built from tags on products (or from Storefront Tag filter). Blocks are ignored. Important: For tag filters to show products when clicked, enable Storefront filtering for this collection (Customize > Collection page > Filters) and add 'Product tag'. Otherwise filtered results may be empty.",
      "default": false
    },
    {
      "type": "text",
      "id": "category_carousel_filter_param",
      "label": "Product Type filter param",
      "info": "Use filter.p.product_type for Product type.",
      "default": "filter.p.product_type"
    },
    {
      "type": "text",
      "id": "category_carousel_tag_param",
      "label": "Tag filter param",
      "info": "Use filter.p.tag. Tag filters match product tags only (not type). Enable Storefront filtering: Customize theme > Collection page > Filters > Add filter > Product tag.",
      "default": "filter.p.tag"
    },
    {
      "type": "paragraph",
      "content": "Carousel filters (collection-wise): Use the textarea below OR set per collection: add metafield custom.carousel_filter_handles (Single line text) on a collection; value = comma-separated handles, e.g. engagement-rings, wedding-bands, promise-rings. Metafield overrides the textarea for that collection."
    },
    {
      "type": "textarea",
      "id": "carousel_allowlist_collection_wise",
      "label": "Carousel filters – collection-wise (sirf yahi dikhenge)",
      "info": "Har collection ke liye carousel me sirf yehi filters dikhenge. Format: collection_handle: handle1, handle2 | doosri: handle1. Example: rings: engagement-rings, wedding-bands, promise-rings | pendants: pendants. Agar kisi handle ke liye Tag aur Product Type dono blocks hon aur same name ho, to jis ke is collection me zyada products hon woh carousel me aayega. Jis collection ka line nahi hoga us par carousel me saare blocks (jo products rakhte hon) dikhenge."
    },
    {
      "type": "text",
      "id": "carousel_tag_filters_earrings",
      "label": "Earrings: Tag carousel filters (comma-separated)",
      "info": "Sirf Earrings template ke liye. Agar set hai aur collection Earrings hai to carousel me sirf yehi tags dikhenge. Kisi b product me in me se koi tag ho to woh filter carousel me show hoga. Example: studs, hoops, dangling, statement, fashion"
    },
    {
      "type": "text",
      "id": "carousel_categories_allowlist",
      "label": "Carousel (Rings) – purana setting (fallback)",
      "info": "Agar collection-wise upar kuch na ho to Rings ke liye yeh use hoga. Comma-separated handles. Blank = Rings par default list."
    },
    {
      "type": "header",
      "content": "Grid Settings"
    },
    {
      "type": "range",
      "id": "products_per_row",
      "label": "Products Per Row (Desktop)",
      "min": 2,
      "max": 6,
      "step": 1,
      "default": 4
    },
    {
      "type": "range",
      "id": "mobile_columns",
      "label": "Mobile Columns",
      "min": 1,
      "max": 3,
      "step": 1,
      "default": 2
    },
    {
      "type": "range",
      "id": "card_gap",
      "label": "Card Gap (px)",
      "min": 10,
      "max": 50,
      "step": 5,
      "default": 15
    },
    {
      "type": "range",
      "id": "card_radius",
      "label": "Card Border Radius (px)",
      "min": 0,
      "max": 30,
      "step": 2,
      "default": 0
    },
    {
      "type": "header",
      "content": "Filter Settings"
    },
    {
      "type": "text",
      "id": "filters_to_show",
      "label": "Filters to show (allowlist)",
      "info": "Comma-separated labels, e.g. Price, Color, Material. Leave blank to show all filters (then use 'Filter labels to hide' if needed)."
    },
    {
      "type": "text",
      "id": "filters_to_hide",
      "label": "Filter labels to hide",
      "info": "Comma-separated. e.g. Availability. Used when 'Filters to show' is blank. Leave both blank to show all."
    },
    {
      "type": "checkbox",
      "id": "show_category_filter",
      "label": "Show Category / Product Type filter",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "filter_drawer_desktop",
      "label": "Filter as drawer (open on click, left side)",
      "info": "When on: sidebar is hidden; FILTER button opens a left-side drawer. When off: filters stay in left sidebar on desktop.",
      "default": true
    },
    {
      "type": "header",
      "content": "Product Card Settings"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": "Show Vendor",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "label": "Show Rating Stars",
      "default": true
    },
    {
      "type": "header",
      "content": "Product Badges"
    },
    {
      "type": "checkbox",
      "id": "show_sale_badge",
      "label": "Show Sale badge (e.g. 75% OFF)",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_sold_out_badge",
      "label": "Show Sold Out badge",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_new_badge",
      "label": "Show 'NEW' Badge (products added in last 30 days)",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_quick_add",
      "label": "Show Quick Add Button",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_variant_swatches",
      "label": "Show Variant Swatches",
      "info": "Shows color/metal variant options on cards",
      "default": true
    },
    {
      "type": "header",
      "content": "Product Image Settings"
    },
    {
      "type": "range",
      "id": "image_aspect_ratio",
      "label": "Image Aspect Ratio (%)",
      "info": "100 = square, 150 = tall portrait (matches banner), 80 = landscape",
      "min": 80,
      "max": 170,
      "step": 5,
      "default": 115
    },
    {
      "type": "select",
      "id": "image_fit",
      "label": "Image Fit",
      "options": [
        {
          "value": "contain",
          "label": "Contain (show full product)"
        },
        {
          "value": "cover",
          "label": "Cover (fill frame)"
        }
      ],
      "default": "cover"
    },
    {
      "type": "color",
      "id": "image_bg_color",
      "label": "Image Background Color",
      "default": "#f8f6f3"
    },
    {
      "type": "header",
      "content": "Color / Metal Collections"
    },
    {
      "type": "paragraph",
      "content": "Create collections with these names: Yellow Gold Rings, White Gold Rings, Rose Gold Rings, Silver Rings, Vermeil Rings. Handles (e.g. yellow-gold-rings, silver-rings) are auto-detected. Manually add products to each collection; the theme will filter by Color/Metal variant and show only matching products."
    },
    {
      "type": "text",
      "id": "metal_source_collection",
      "label": "Source collection (empty metal pages only)",
      "info": "Used only when a metal collection has no products. Leave blank or set e.g. 'all-jewelry' to pull from that collection and filter by variant.",
      "default": "all-jewelry"
    },
    {
      "type": "header",
      "content": "Sidebar Settings"
    },
    {
      "type": "checkbox",
      "id": "sticky_sidebar",
      "label": "Sticky Sidebar",
      "default": true
    },
    {
      "type": "header",
      "content": "Banner Settings"
    },
    {
      "type": "range",
      "id": "banner_height_desktop",
      "label": "Banner Height Desktop (px)",
      "min": 200,
      "max": 600,
      "step": 20,
      "default": 300
    },
    {
      "type": "range",
      "id": "banner_height_mobile",
      "label": "Banner Height Mobile (px)",
      "min": 200,
      "max": 550,
      "step": 10,
      "default": 320
    },
    {
      "type": "checkbox",
      "id": "banner_zoom_animation",
      "label": "Banner Hover Zoom Animation",
      "default": true
    },
    {
      "type": "header",
      "content": "Load More Settings"
    },
    {
      "type": "range",
      "id": "products_per_page",
      "label": "Products Per Page",
      "min": 8,
      "max": 60,
      "step": 1,
      "default": 24
    },
    {
      "type": "text",
      "id": "load_more_text",
      "label": "Load More Button Text",
      "default": "Load More"
    },
    {
      "type": "color",
      "id": "load_more_bg_color",
      "label": "Load More Background Color",
      "default": "#1a1a1a"
    },
    {
      "type": "color",
      "id": "load_more_text_color",
      "label": "Load More Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "load_more_border_color",
      "label": "Load More Border Color",
      "default": "#1a1a1a"
    },
    {
      "type": "color",
      "id": "load_more_hover_bg_color",
      "label": "Load More Hover Background Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "load_more_hover_text_color",
      "label": "Load More Hover Text Color",
      "default": "#1a1a1a"
    },
    {
      "type": "range",
      "id": "load_more_button_padding",
      "label": "Load More Button Padding (px)",
      "min": 10,
      "max": 30,
      "step": 2,
      "default": 16
    },
    {
      "type": "range",
      "id": "load_more_button_font_size",
      "label": "Load More Button Font Size (px)",
      "min": 12,
      "max": 20,
      "step": 1,
      "default": 14
    },
    {
      "type": "range",
      "id": "load_more_button_min_width",
      "label": "Load More Button Min Width (px)",
      "min": 150,
      "max": 400,
      "step": 10,
      "default": 200
    },
    {
      "type": "header",
      "content": "Container Settings"
    },
    {
      "type": "checkbox",
      "id": "full_width_layout",
      "label": "Full Width Layout",
      "info": "Expand layout to full screen width",
      "default": false
    },
    {
      "type": "range",
      "id": "container_max_width",
      "label": "Container Max Width (px)",
      "info": "Applies when Full Width is disabled",
      "min": 1000,
      "max": 1700,
      "step": 50,
      "default": 1500
    },
    {
      "type": "range",
      "id": "container_padding",
      "label": "Container Side Padding (px)",
      "min": 15,
      "max": 60,
      "step": 5,
      "default": 30
    }
  ],
  "blocks": [
    {
      "type": "category_carousel_item",
      "name": "Category (carousel)",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Stud Earrings"
        },
        {
          "type": "select",
          "id": "filter_type",
          "label": "Filter source",
          "options": [
            { "value": "product_type", "label": "Product Type" },
            { "value": "tag", "label": "Tag" }
          ],
          "default": "product_type",
          "info": "Product Type = engagement-rings, wedding-bands (Rings). Tag = Pendants, Medallion, Personalised, Tennis, Bezel, Heart, High Jewelry (Necklaces/Bracelets/Chains). Filter sirf isi source se match karega."
        },
        {
          "type": "text",
          "id": "filter_value",
          "label": "Filter value",
          "info": "Product Type: engagement-rings, wedding-bands. Tag: medallion, personalised, tennis, bezel, heart, high-jewelry (handle form). Blank = title (handleized). Filter sirf tag/type se; doosra ignore."
        },
        {
          "type": "header",
          "content": "Brand-specific images (optional)"
        },
        {
          "type": "paragraph",
          "content": "When a brand is selected, use these images instead of the default. Match by brand name (e.g. Novello, Ovani, Diani)."
        },
        {
          "type": "text",
          "id": "brand_1_name",
          "label": "Brand 1 name"
        },
        {
          "type": "image_picker",
          "id": "brand_1_image",
          "label": "Brand 1 image"
        },
        {
          "type": "text",
          "id": "brand_2_name",
          "label": "Brand 2 name"
        },
        {
          "type": "image_picker",
          "id": "brand_2_image",
          "label": "Brand 2 image"
        },
        {
          "type": "text",
          "id": "brand_3_name",
          "label": "Brand 3 name"
        },
        {
          "type": "image_picker",
          "id": "brand_3_image",
          "label": "Brand 3 image"
        },
        {
          "type": "text",
          "id": "brand_4_name",
          "label": "Brand 4 name"
        },
        {
          "type": "image_picker",
          "id": "brand_4_image",
          "label": "Brand 4 image"
        },
        {
          "type": "text",
          "id": "brand_5_name",
          "label": "Brand 5 name"
        },
        {
          "type": "image_picker",
          "id": "brand_5_image",
          "label": "Brand 5 image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Collection Grid Premium"
    }
  ]
}
{% endschema %}