/** Shopify CDN: Minification failed

Line 226:18 Unexpected "{"
Line 226:27 Expected ":"
Line 254:14 Unexpected "{"
Line 254:23 Expected ":"
Line 260:14 Unexpected "{"
Line 260:23 Expected ":"

**/
/* Custom Brand Filter Logic - Added for hiding brand filters on brand pages
   When a user is already on a brand's collection page (e.g., /collections/calvin-klein),
   the brand filter for that specific brand will be hidden from all filter interfaces
   including desktop, mobile, and mobile brand filter modal. This prevents redundant
   filtering options and improves user experience.
   
   Implementation files modified:
   - snippets/facets.liquid (desktop and mobile facets)
   - snippets/mobile-filter-modal.liquid (mobile filter modal)
   - snippets/mobile-brand-filter-modal.liquid (mobile brand filter modal)
*/

    @font-face {
  /* Remove Rubik font-face, use Oswald and Heebo from Google Fonts */
    }
    .ct-custom-container {
        max-width: 1390px;
        margin: 0 auto;
    }
    .custom-container {
      max-width: 1040px;
        margin: 0 auto;
    }
    .ut-custom-container {
        max-width: 1280px;
        margin: 0 auto;
    }
    .custom-container-cta{
        max-width: 120rem;
        margin: 0 auto;
    }
    .custom-container-full-width {
      max-width: 100%;
        margin: 0 auto;
    }
    .custom-row {
      display: flex;
        flex-wrap: wrap;
    }
    .custom-vertical-center { 
        align-items: center;
    }
    .custom-horizontal-center {
      justify-content: center;
    }
    .custom-col-gap {
      padding-left: 15px;
        padding-right: 15px;
    }
    /* Grid */
    .custom-col-1 {
      flex: 0 0 8.33%;
        max-width: 8.33%;
    }
    .custom-col-2 {
      flex: 0 0 16.67%;
        max-width: 16.67%;
    }
    .custom-col-3 {
      flex: 0 0 25%;
        max-width: 25%;
    }
    .custom-col-4 {
      flex: 0 0 33.33%;
        max-width: 33.33%;
    }
    .custom-col-5 {
      flex: 0 0 41.66666667%;
        max-width: 41.66666667%;
    }
    .custom-col-6 {
      flex: 0 0 50%;
        max-width: 50%;
    }
    .custom-col-7 {
      flex: 0 0 58.33333333%;
        max-width: 58.33333333%;
    }
    .custom-col-8 {
      flex: 0 0 66.66%;
        max-width: 66.66%;
    }
    .custom-col-9 {
      flex: 0 0 75%;
        max-width: 75%;
    }
    .custom-col-10 {
      flex: 0 0 83.33333333%;
        max-width: 83.33333333%;
    }
    .custom-col-11 {
      flex: 0 0 91.66666667%;
        max-width: 91.66666667%;
    }
    .custom-col-12 {
      flex: 0 0 100%;
        max-width: 100%;
    }
    .custom-col-five {
        flex: 0 0 20%;
        max-width: 20%;
    }
    .custom-col-flex {
        flex: 0 0 40%;
        max-width: 40%;
        padding-right: 15px;
        padding-left: 15px;
    }
    .custom-col-right {
      flex: 0 0 60%;
      max-width: 60%;
      padding-left: 15px;
      padding-right: 15px;
    }

    /* Rich Text Override */

    .rich-text-template--14402054422630__1661957048ab9ecb1a {
        background: rgb(126,135,109);
        background: linear-gradient(120deg, rgba(126,135,109,1) 50%, rgba(2,0,36,1) 50%, rgba(136,144,121,1) 50%);
    }
    .rich-text-template--14402054422630__1661957048ab9ecb1a .text-small {
        font: 400 18px/1.7 "Rubik", Helvetica, Arial, sans-serif;
        color: #fff;
    }

    .rich-text-template--14388894466150__1661957048ab9ecb1a {
        background: rgb(126,135,109);
        background: linear-gradient(120deg, rgba(126,135,109,1) 50%, rgba(2,0,36,1) 50%, rgba(136,144,121,1) 50%);
    }
    .rich-text-template--14388894466150__1661957048ab9ecb1a .text-small {
        font: 400 18px/1.7 "Rubik", Helvetica, Arial, sans-serif;
        color: #fff;
    }

    .rich-text-template--14402056650854__16625738880b77790f {
        background: rgb(126,135,109);
        background: linear-gradient(120deg, rgba(126,135,109,1) 50%, rgba(2,0,36,1) 50%, rgba(136,144,121,1) 50%);
    }
    .rich-text-template--14402056650854__16625738880b77790f .text-small {
        font: 400 18px/1.7 "Rubik", Helvetica, Arial, sans-serif;
        color: #fff;
    }
    .rich-text-template--14403764125798__1662642842e63e7a08{
        background: rgb(126,135,109);
        background: linear-gradient(120deg, rgba(126,135,109,1) 50%, rgba(2,0,36,1) 50%, rgba(136,144,121,1) 50%);
    }
    .rich-text-template--14403764125798__1662642842e63e7a08 .mm-wordhead{
        font: 400 /1.7 "Rubik", Helvetica, Arial, sans-serif;
        color: #fff;
    }
    .rich-text-template--14403764125798__1662642842e63e7a08 .rich-text__text{
      color: #fff;
    }
    .rich-text-template--14403764125798__1662642842e63e7a08 .rich-text__wrapper-{
      justify-content: center;
        margin: 0 auto;
        max-width: 100%;
    }
    .rich-text-template--14404964286566__166267664344ce1bec .rich-text__blocks {
      max-width: 100% !important;
    }

    /* Repair */
    .section-template--14382306033766__16619928085b627a32-padding .media--adapt .multicolumn-card__image {
        width: 80%!important;
    }

    /* Home Mobile */
    @media (max-width: 570px) {
        #shopify-section-template--14382305935462__1662135278b87b899e .slideshow__text-wrapper,
        #shopify-section-template--14382305935462__16621368952e4de6d7 .slideshow__text-wrapper {
            display: none;
        }
    }
    /* Brands Mobile */
    @media (max-width: 570px) {
        #shopify-section-template--14386431492198__1662450689a1dcef56 .grid--1-col-tablet-down .grid__item {
            width: 50%;
        }
        #shopify-section-template--14386431492198__1662450689a1dcef56 .grid {
            column-gap: initial;
            align-items: center;
        }
        #shopify-section-template--14386431492198__1662450689a1dcef56 .media--transparent {
            padding-bottom: initial!important;
        }
        #shopify-section-template--14386431492198__1662450689a1dcef56 .multicolumn-template--14386431492198__1662450689a1dcef56 .multicolumn-card__image {
            width: 80%!important;
            position: relative!important;
        }
    }

    /* CTA MISSION Mobile 570px */
    @media (max-width: 570px) {
      .cta-mission-template--14388894466150__16625508228781b0ad .custom-col-flex,
      .cta-mission-template--14388894466150__16625508228781b0ad .custom-col-right{
      flex: 0 0 100% !important;
        max-width: 100% !important;
      }
      .cta-mission-template--14388894466150__16625508228781b0ad .cta-image img,
      .cta-mission-template--14388894466150__16625508228781b0ad .cta-right img{
      max-width: 100% !important;
        width: 100% !important;
      }
      .cta-mission-template--14388894466150__16625508228781b0ad .cta-image img{
        margin-left: 0 !important;
      }
      .cta-mission-template--14388894466150__16625508228781b0ad .cta-image{
        margin-right: 0 !important;
      }
      .cta-mission-template--14388894466150__16625508228781b0ad .cta-right img{
        margin-top: 15px !important;
      }
    }
    .cta-mission-{{ section.id }} .cta-right img{
      max-width: 100%;
      width: 100%;
    }

    /* Product Images */
    .for-prod-img img {
      width: 80%!important;
      left: 12%!important;
    }

    /* FIND US IMAGE Mobile 570px */
    #Slider-template--14388894466150__16620132321e7c8da4 .multicolumn-card__image  {
        width: 80%;
        display: block;
        margin: 0 auto;
        position: relative;
    }
    #Slider-template--14388894466150__16620132321e7c8da4 .media--transparent {
      padding-bottom: 0!important;
    }
    @media (max-width: 570px) {
      #Slider-template--14388894466150__16620132321e7c8da4 .multicolumn-card__image{
        width: 60%!important;
      }
    }

    /* Services And Pricing */
    .pricing-{{ section.id }} .pricing-container{
      background-color: #F3F3F3;
        padding: 30px 30px;
        margin-bottom: 30px;
        margin-top: 30px;
    }
    .pricing-{{ section.id }} .pricing-orderlist ol{
      list-style-position: inside;
    }

    /* Services And Pricing Mobile 570px */
    @media (max-width: 570px){
      .pricing-template--14402056650854__cta-pricing .custom-col-4{
        flex: 0 0 100%;
        max-width: 100%;
      }
      .pricing-template--14402056650854__cta-pricing .pricing-image img{
        margin: 0 auto;
        max-width: 100% !important;
        display: block;
        width: 50% !important;
      }
      .pricing-template--14402056650854__cta-pricing .custom-col-8{
        flex: 0 0 100% !important;
        max-width: 100% !important;
      }
    }

    /* Card Badge */
    .card__badge .badge,
    .product .price .badge {
      background-color: #ff505e;
      border: none;
    }

    /* Drawer */
    .cart__payment__icons .list-payment__item {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .cart__payment__icons .list-payment__item img {
      display: block;
      margin: 20px auto 0;
    }

    /* Shipping And Returns */
    .rich-text-template--14404964286566__166267664344ce1bec{
      background: rgb(126,135,109);
      background: linear-gradient(120deg, rgba(126,135,109,1) 50%, rgba(2,0,36,1) 50%, rgba(136,144,121,1) 50%);
    }
    .rich-text-template--14404964286566__166267664344ce1bec .mm-wordhead,
    .rich-text-template--14404964286566__166267664344ce1bec .rich-text__text{
      color: #fff;
    }
    .rich-text-template--14403764125798__1662642842e63e7a08 .rich-text__blocks {
      max-width: 100%;
    }
    @media screen and (min-width: 990px) {
      .rich-text-template--14402056650854__16625738880b77790f .rich-text__blocks {
        max-width: 100% !important;
      }
    }

    /* Get Quote */
    @media (max-width: 1440px) {
      #shopify-section-template--14382306033766__16620075470da1c21d .contact-wrapper {
        background-position: 45vw 100%!important;
      }
    }

    /* ==============================
      Filter UI (Facets) – custom tweaks
      Scope: collection/search filters UI
      Safe overrides on top of component-facets.css
      ============================== */

    /* General spacing and headings */
    .facets .facets__summary {
      font-weight: 500;
      color: rgb(var(--color-foreground));
    }

    .facets__disclosure-vertical {
      margin-bottom: 0.75rem;
    }

    /* Popup/panel surface styling */
    .facets__display,
    .facets__display-vertical {
      border-radius: 10px;
      border-color: rgba(var(--color-foreground), 0.15);
      box-shadow: 0 6px 18px rgba(var(--color-shadow), 0.06);
    }

    .facets__header,
    .facets__header-vertical {
      background: rgb(var(--color-background));
    }

    /* Caret rotation on open */
    .facets__summary .icon-caret {
      transition: transform var(--duration-default) ease;
      width: 12px;
      height: 8px;
      margin-left: auto;
      flex-shrink: 0;
    }

    details[open] > .facets__summary .icon-caret {
      transform: rotate(180deg);
    }

    /* Ensure summary displays as flex to position caret */
    .facets__summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    /* Checkbox row density and hover */
    .facet-checkbox {
      padding: 0.8rem 2rem 0.8rem 0;
    }

    .facet-checkbox:hover {
      color: rgb(var(--color-foreground));
    }

    .facet-checkbox > svg rect {
      stroke: rgba(var(--color-foreground), 0.55);
    }

    /* Checked state visibility */
    .facet-checkbox > input[type='checkbox']:checked ~ .icon-checkmark {
      color: rgb(var(--color-foreground));
    }

    /* Active filter pills */
    .active-facets__button-inner.button.button--tertiary {
      border-color: rgba(var(--color-foreground), 0.25);
      background: rgba(var(--color-foreground), 0.04);
    }

    /* Price inputs */
    .facets__price .field__input {
      border-radius: 8px;
    }

    /* Sort select refinement */
    .facet-filters__summary,
    .facet-filters__sort.select__select {
      border-radius: 6px;
      font-weight: 600;
    }

    @media (max-width: 749px) {
      /* Tighter mobile spacing */
      .facets__disclosure-vertical {
        margin-bottom: 0.5rem;
      }
      .facets__display-vertical {
        box-shadow: none;
      }
    }

    /* ==============================
      Filter UI – gray box per filter
      Adds a subtle gray box to each filter group.
      ============================== */

    /* Make each filter trigger (summary) look like a card */
    .facets .facets__summary {
      background:#D9D9D9;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 26px;     
    }

    .facets .facets__summary:hover {
      border-color: rgba(var(--color-foreground), 0.2);
    }

    /* Vertical filter content in a matching gray box */
    .facets__display-vertical {
      background:#D9D9D9;
    }

    /* Inner padding for vertical content */
    .facets-wrap-vertical {
      padding: 0.5rem 1.2rem 1.2rem;
    }

    /* Price header inside vertical to blend with gray box */
    .facets__header-vertical {
      background: transparent;
      border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
    }

    /* Inline sort card placed before Brand filter (horizontal layout) */
    .facets__sort-inline {
      background:#D9D9D9;
      padding: 0.8rem 0.5rem;
      margin-right: 2.5rem;
      margin-bottom: 1.5rem;
    }

    .facets__sort-inline .facet-filters__label {
      margin-right: 2rem;

    }

    /* Sort dropdown arrow styling */
    .facets__sort-inline .select,
    .facet-filters__field .select {
      position: relative;
    }

    .facets__sort-inline .select::after,
    .facet-filters__field .select::after {
      content: '';
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid currentColor;
      pointer-events: none;
    }

    /* Active facets pills: dark background, no radius, bolder text */
    .active-facets__button.active-facets__button--light .active-facets__button-inner {
      background-color: #2C2C2C;
      border-radius: 0;
      font-weight: 400;
      color: #ffffff;
      padding: 0.8rem 0.7rem;

    }

    /* Make the “X” icon in active filter pills larger */
    .active-facets__button .icon-close-small {
      width: 20px;
      height: 20px;
    }

    /* Mobile inline horizontal filters */
    @media screen and (max-width: 749px) {
      /* Hide the old drawer entry button when inline scroller is present */
      .mobile-inline-facets + menu-drawer .mobile-facets__open-wrapper { display: none; }

      .mobile-inline-facets {
        position: sticky;
        top: 0;
        z-index: 5;
        background: var(--color-background, #fff);
        border-bottom: 1px solid rgba(0,0,0,0.08);
      }
      .mobile-inline-facets__form {
        padding: 0.6rem 1rem;
      }
      .mobile-inline-facets__scroller {
        display: flex;
        gap: 0.6rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.4rem;
        scroll-snap-type: x proximity;
      }
      .mobile-inline-facet {
        flex: 0 0 auto;
        min-width: max-content;
        background: #D9D9D9;
        scroll-snap-align: start;
      }
      .mobile-inline-facet[open] { background: #f0f0f0; }
      .mobile-inline-facet__summary {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.6rem 0.8rem;
        cursor: pointer;
        font-size: 1.5rem;
        font-weight: 600;
        color: #2c2c2c;
      }
      .mobile-inline-facet__panel {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        max-height: 65vh;
        overflow: auto;
        background: #fff;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        box-shadow: 0 -8px 24px rgba(0,0,0,0.16);
        padding: 1rem 1rem 2rem;
      }
      .mobile-inline-facet:not([open]) .mobile-inline-facet__panel { display: none; }

      /* Reuse facet checkbox visuals */
      .mobile-inline-facet .facet-checkbox { padding: 0.6rem 0; }

      /* Inline sort block appears after the scroller */
      .mobile-inline-sort { padding: 0.4rem 0.25rem 0.2rem; }
      .mobile-inline-sort .sort-radio-group { display: flex; gap: 1rem; overflow-x: auto; padding: 0.3rem 0.5rem 0.6rem; }
      .mobile-inline-sort .sort-radio { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; background: #f5f5f5; border-radius: 999px; white-space: nowrap; }
      .mobile-inline-sort input[type="radio"] { width: 16px; height: 16px; }
      .mobile-inline-sort .sort-radio input:checked + span { font-weight: 700; }
    }

    /* Mobile Sort & Filter Buttons */
    .mobile-sort-filter-buttons {
      display: flex;
      gap: 1rem;
      padding: 1rem;

      position: sticky;
      top: 0;
      z-index: 10;
    }

    .mobile-sort-btn,
    .mobile-filter-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.8rem 1rem;
      border: 1px solid #D9D9D9;
      background: #D9D9D9;
      color: #333;
      font-size: 1.4rem;
      font-weight: 500;
      border-radius: 4px;
      transition: all 0.2s ease;
      cursor: pointer;
    }

    .mobile-sort-btn:hover,
    .mobile-filter-btn:hover {
      background: #c9c9c9;
      border-color: #c9c9c9;
    }

    .mobile-sort-btn .icon,
    .mobile-filter-btn .icon {
      width: 18px;
      height: 18px;
    }

    /* Mobile Sort Modal */
    .mobile-sort-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1000;
    }

    .mobile-sort-modal.active {
      display: block;
    }

    .mobile-sort-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .mobile-sort-modal.active .mobile-sort-overlay {
      opacity: 1;
    }

    .mobile-sort-content {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }

    .mobile-sort-modal.active .mobile-sort-content {
      transform: translateX(0);
    }

    .mobile-sort-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 2rem 1.5rem 1.5rem;
      border-bottom: 1px solid #eee;
      margin-bottom: 0;
      background: #fff;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .mobile-sort-header h3 {
      margin: 0;
      font-size: 1.8rem;
      font-weight: 600;
      color: #333;
    }

    .mobile-sort-close {
      background: none;
      border: none;
      font-size: 2.4rem;
      color: #666;
      cursor: pointer;
      padding: 0;
      width: 3rem;
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mobile-sort-options {
      padding: 1.5rem 1.5rem 2rem;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .sort-option-list {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .sort-option {
      padding: 1.2rem 0;
      border-bottom: 1px solid #f0f0f0;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .sort-option:last-child {
      border-bottom: none;
    }

    .sort-option:hover {
      background: #f9f9f9;
      margin: 0 -1.5rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }

    .sort-option.active {
      background: #f0f8ff;
      margin: 0 -1.5rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }

    .sort-option input[type="radio"] {
      display: none;
    }

    .sort-option label {
      display: block;
      font-size: 1.6rem;
      color: #333;
      cursor: pointer;
      margin: 0;
      position: relative;
      padding-left: 3rem;
    }

    .sort-option label:before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      border: 2px solid #ddd;
      border-radius: 50%;
      background: #fff;
    }

    .sort-option.active label:before {
      border-color: #333;
      background: #333;
    }

    .sort-option.active label:after {
      content: '';
      position: absolute;
      left: 6px;
      top: 50%;
      transform: translateY(-50%);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #fff;
    }



    .mobile-facets__sort-radio {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .mobile-facets__label--sort svg {
      margin-right: 1rem;
      flex-shrink: 0;
    }

    .mobile-facets__sort-check {
      position: absolute;
      left: 0.4rem;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .mobile-facets__sort-radio:checked + .mobile-facets__highlight + svg + .mobile-facets__sort-check {
      opacity: 1;
    }

    .mobile-facets__label--sort:hover {
      background-color: rgba(0, 0, 0, 0.04);
      margin: 0 -1.5rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }

    /* Mobile Filter Header Controls */
    .mobile-facets__header {
      position: relative;
    }

    .mobile-facets__header-controls {
      position: absolute;
      top: 50%;
      right: 1.5rem;
      transform: translateY(-50%);
      display: flex;
      gap: 1rem;
      align-items: center;
    }

    .mobile-facets__back-btn,
    .mobile-facets__close-btn {
      background: none;
      border: none;
      padding: 0.5rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background-color 0.2s ease;
    }

    .mobile-facets__back-btn:hover,
    .mobile-facets__close-btn:hover {
      background-color: rgba(0, 0, 0, 0.1);
    }

    .mobile-facets__back-btn svg,
    .mobile-facets__close-btn svg {
      width: 20px;
      height: 20px;
      color: #333;
    }

    .mobile-facets__close-btn svg {
      width: 18px;
      height: 18px;
    }

    /* Hide default close button when custom controls are present */
    .mobile-facets__wrapper .mobile-facets__close {
      display: none;
    }

    /* Submenu back button styling */
    .mobile-facets__close-button {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 1rem 1.5rem;
      background: #f8f8f8;
      border-bottom: 1px solid #eee;
      margin: -1rem -1.5rem 1rem;
      font-weight: 600;
      color: #333;
    }

    .mobile-facets__close-button svg {
      width: 16px;
      height: 16px;
      transform: rotate(180deg);
    }

    /* ===== MOBILE SORT MODAL ===== */

    /* Hide all original Shopify sort dropdowns */
    .facet-filters__sort,
    select[name="sort_by"],
    #SortBy {
      display: none !important;
    }

    /* Mobile Sort Trigger Button */
    .mobile-sort-trigger {
      display: none;
      padding: 1rem 1.5rem;
      background: white;
      border-bottom: 1px solid #e0e0e0;
    }

    @media (max-width: 749px) {
      .mobile-sort-trigger {
        display: block;
      }
    }

    .mobile-sort-trigger__button {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      background: #f8f8f8;
      border: 1px solid #ddd;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.875rem;
      color: #333;
      width: 100%;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .mobile-sort-trigger__button:hover {
      background: #f0f0f0;
      border-color: #ccc;
    }

    .mobile-sort-trigger__button svg {
      color: #666;
    }

  /* Modal Wrapper */
  .mobile-sort__wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: white;
    z-index: 1000;
    display: none;
  }

  /* Desktop mode - 250x250 square popup */
  @media (min-width: 749px) {
    .mobile-sort__wrapper {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 250px;
      height: 505px;
      background: white;
      border: 1px solid black;
      z-index: 1000;
      display: none;
    }
    
    .mobile-sort__main {
      height: 500px !important;
    }
    
    .mobile-sort__header {
      padding: 0.75rem 1rem;
    }
    
    .mobile-sort__heading {
      font-size: 1rem;
    }
    
    .mobile-sort__options {
      margin-top: 0;
      padding: 0;
    }
    
    .mobile-sort__label {
      padding: 0.75rem 1rem;
    }
    
    .mobile-sort__text {
      font-size: 14px;
    }
  }

  .mobile-sort__wrapper[open] {
    display: block;
  }  .mobile-sort__main {
      height: 100vh;
      display: flex;
      flex-direction: column;
      background: white;
    }

    /* Desktop mode - 250x250 square popup */
    @media (min-width: 749px) {
      .mobile-sort__wrapper {
        position: fixed;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 250px;
        height: 505px;
        background: white;
        z-index: 1000;
        display: none;
      }
      
      .mobile-sort__main {
        height: 500px !important;
      }
      
      .mobile-sort__header {
        padding: 0.75rem 1rem;
      }
      
      .mobile-sort__heading {
        font-size: 1rem;
      }
      
      .mobile-sort__options {
        margin-top: 0;
        padding: 0;
      }
      
      .mobile-sort__label {
        padding: 0.75rem 1rem;
      }
      
      .mobile-sort__text {
        font-size: 14px;
      }
    }

    .mobile-sort__inner {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .mobile-sort__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.5rem;
      background: white;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .mobile-sort__header-inner {
      flex: 1;
    }

    .mobile-sort__heading {
      margin: 0;
      font-size: 1.25rem;
      font-weight: 600;
      color: #333;
      text-align: center;
    }

    .mobile-sort__header-controls {
      display: flex;
      align-items: center;
    }

    .mobile-sort__close-btn {
      background: none;
      border: none;
      padding: 0.5rem;
      cursor: pointer;
      color: #666;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mobile-sort__close-btn:hover {
      color: #333;
    }

    .mobile-sort__close-btn svg {
      width: 20px;
      height: 20px;
    }

    .mobile-sort__content {
      flex: 1;
      padding: 0;
      overflow-y: auto;
    }

    .mobile-sort__options {
      padding: 0;
      margin-top: 40px;
    }

    .mobile-sort__item:last-child {
      border-bottom: none;
    }

    .mobile-sort__label {
      display: flex;
      align-items: center;
      padding: 1.25rem 1.5rem;
      cursor: pointer;
      position: relative;
      transition: background-color 0.2s ease;
    }

    .mobile-sort__label:hover {
      background-color: #f8f8f8;
    }

    .mobile-sort__radio {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .mobile-sort__highlight {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: transparent;
      transition: background-color 0.2s ease;
    }

    .mobile-sort__label svg {
      margin-right: 1rem;
      color: #ccc;
      transition: color 0.2s ease;
    }

    .mobile-sort__check {
      position: absolute;
      left: 0.75rem;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .mobile-sort__radio:checked + .mobile-sort__highlight + svg {
      color: #007bff;
    }

    .mobile-sort__radio:checked + .mobile-sort__highlight + svg + .mobile-sort__check {
      opacity: 1;
      color:rgb(0, 0, 0);
      margin-left: 13px;
      margin-bottom: 1px;
    }

    .mobile-sort__text {
      font-size: 16px;
      color: #333;
      font-weight: 400;
    }

    .mobile-sort__radio:checked ~ .mobile-sort__text {
      font-weight: 500;
      color:rgb(0, 0, 0);
    }

    /* Open button trigger */
    .mobile-sort__open-wrapper {
      display: none;
    }

    @media (max-width: 749px) {
      .mobile-sort__open-wrapper {
        display: block;
      }
    }

    .mobile-sort__open {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1rem;
      background: #f8f8f8;
      border: 1px solid #ddd;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.875rem;
      color: #333;
    }

    .mobile-sort__open:hover {
      background: #f0f0f0;
    }

    .mobile-sort__close--no-js {
      display: none;
    }

    /* Product Title Truncation - Limit to ~10 characters with ellipsis */
    .card__heading a,
    .product__title h2,
    .cart-item__name {
      display: block;
      max-width: 27ch;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Specific targeting for product cards */
    .card-product .card__heading a,
    .card-product-grid .card__heading a {
      max-width: 27ch;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* For mobile responsiveness - you can adjust these as needed */
@media screen and (max-width: 749px) {
  .card__heading a,
  .full-unstyled-link {
    display: -webkit-box;            /* required for clamp */
    -webkit-box-orient: vertical;    /* vertical flow */
-webkit-line-clamp: 2 !important;

    overflow: hidden;                /* cut off extra */
    text-overflow: ellipsis;         /* show … */
    white-space: normal;             /* allow wrapping */
    
    line-height: 1.4em;              /* consistent spacing */
max-height: calc(1.4em * 2) !important;
    word-break: break-word;          /* break long words if needed */
  }
}


a.btn.btn-primary {
  color: white;
  background-color: #2C2C2C;
  text-decoration: none;
  border-radius: 0;
  padding: 10px;
  min-width: 150px; /* set minimum width */
  text-align: center;
  display: inline-block;
        width: 520px;

}

@media screen and (max-width: 749px) {
    a.btn.btn-primary {
        width: 100% !important;
        min-width: 120px !important;
        padding: 12px !important;
        margin-left: 0 !important;
        font-size: 16px !important;
    }
}