/**
 * Caracal Sports - Custom Styles
 * Additional styles for WooCommerce templates
 * 
 * @package HelloElementorChildCaracal
 * @version 1.0.0
 */

/* ==========================================================================
   GLOBAL GUARANTEE - PREVENT HORIZONTAL SCROLL
   ========================================================================== */
   html, body {
    overflow-x: hidden;
  }
  
  /* ==========================================================================
     HEADER CART COUNT BADGE (circle over cart icon)
     ========================================================================== */
     
     
          .caracal-tabby-badge .caracal-tabby-icon,
     .caracal-tabby-badge img {
         display: block;
         width: 80px;
         height: auto;
     }
  .caracal-cart-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .caracal-header-cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 50%;
    background: #EB0000;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .caracal-cart-count-badge {
    display: block;
    min-width: 1ch;
  }
  .caracal-cart-trigger .caracal-header-cart-count[aria-hidden="true"]:empty,
  .caracal-header-cart-count .caracal-cart-count-badge:empty {
    display: none;
  }
  
     
     /* ======================================================================
        FONTS (Local)
        NOTE: your .ttf files are inside /assets/css/ so relative paths work.
        ====================================================================== */
     
     @font-face {
         font-family: "AktivGrotesk_Trial_Lt";
         src: url("./AktivGrotesk_Trial_Lt.ttf") format("truetype");
         font-weight: 300;
         font-style: normal;
         font-display: swap;
     }
     
     @font-face {
         font-family: "AktivGrotesk_Trial_Md";
         src: url("./AktivGrotesk_Trial_Md.ttf") format("truetype");
         font-weight: 600;
         font-style: normal;
         font-display: swap;
     }
     
     @font-face {
         font-family: "AktivGrotesk_Trial_BlkIt";
         src: url("./AktivGrotesk_Trial_BlkIt.ttf") format("truetype");
         font-weight: 900;
         font-style: italic;
         font-display: swap;
     }
     
     /* ======================================================================
        THEME VARS
        ====================================================================== */
     :root {
         --skew: -20deg;
         --black: #000;
         --text: #111;
         --muted: #8c8c8c;
         --line: rgba(0, 0, 0, .15);
         --tile: #f6f6f6;
     
         --font-regular: "AktivGrotesk_Trial_Lt", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
         --font-medium: "AktivGrotesk_Trial_Md", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
         --font-boldit: "AktivGrotesk_Trial_BlkIt", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
     }

     /* Safari requires font-weight + font-style to match @font-face descriptors exactly.
        Apply these globally to any element using --font-boldit so the font loads correctly. */
     .c-title,
     .caracal-product-loop-title, .caracal-loop-title,
     .caracal-complete-set-title, .caracal-pab-title,
     .caracal-section-title {
         font-weight: 900;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
     }
     
     :root {
         --skew-angle: -20deg;
         /* ✅ add this */
         --skew: -20deg;
         /* keep if you want */
     }
     
     
     /* Single product content: 90% width, max 1440px from 1500px viewport */
     .caracal-single-product-wrap {
         width: 90%;
         margin-left: auto;
         margin-right: auto;
     }
     
     
     
     @media (max-width: 550px) {
         .caracal-single-product-wrap {
             width: 95% !important;
         }
     }

     @media (min-width: 1500px) {
         .caracal-single-product-wrap {
             max-width: 1840px;
         }
     }
     
     /* Remove underline from Woo price (bdi + amount) */
.caracal-product-price .woocommerce-Price-amount,
.caracal-product-price,
.cys-price .woocommerce-Price-amount,
.cys-price .woocommerce-Price-amount bdi{
  text-decoration: none !important;
}



/* Remove underline from the whole carousel product link (and all its children) */
.caracal-people-also-buy-section a.caracal-product-link,
.caracal-people-also-buy-section a.caracal-product-link *,
.caracal-people-also-buy-section a.caracal-product-link:hover,
.caracal-people-also-buy-section a.caracal-product-link:hover * {
  text-decoration: none !important;
}


.caracal-people-also-buy-section a.caracal-product-link,
.caracal-people-also-buy-section a.caracal-product-link *,
.caracal-people-also-buy-section a.caracal-product-link,
.caracal-people-also-buy-section a.caracal-product-link * {
  text-decoration: none !important;
}

/* Specifically remove underline from Woo price text */
/*.caracal-people-also-buy-section .woocommerce-Price-amount,*/
/*.caracal-people-also-buy-section .woocommerce-Price-amount bdi {*/
/*  text-decoration: none !important;*/
/*}*/


/* PEOPLE ALSO BUY — remove underline in normal + hover + visited */
.caracal-people-also-buy-section a.caracal-product-link,
.caracal-people-also-buy-section a.caracal-product-link:link,
.caracal-people-also-buy-section a.caracal-product-link:visited,
.caracal-people-also-buy-section a.caracal-product-link:active,
.caracal-people-also-buy-section a.caracal-product-link:hover {
  text-decoration: none !important;
}

/* Extra safety: if underline is applied to inner elements */
.caracal-people-also-buy-section a.caracal-product-link * {
  text-decoration: none !important;
}


/* Remove underline from Woo price everywhere (including customize modal) */
/*.woocommerce-Price-amount,*/
/*.woocommerce-Price-amount .amount,{*/
/*  text-decoration: none !important;*/
/*}*/


/* Breadcrumb text + links black */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb *{
  color: #000 !important;
}

/* If your theme uses this class too */
nav.woocommerce-breadcrumb a{
  color: #000 !important;
}

/* Optional: separator ( / ) also black */
.woocommerce-breadcrumb .delimiter{
  color: #000 !important;
}

 /* Apply the same style to images inside gallery items */
.caracal-gallery-item img,
.caracal-gallery-item .caracal-gallery-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  display: block;
  object-fit: contain; /* same as your screenshot */
  background-color: #fff; /* if you want the white bg like screenshot */
  transition: transform 0.3s ease;
}


     /* Breadcrumb: same margin/width as single product content on this page */
     .single-product .woocommerce-breadcrumb {
         width: 90%;
         max-width: 1840px;
         margin-left: auto;
         margin-right: auto;
     }

     /* Elementor template (e.g. id 4201): full width, no margin constraint */
     .caracal-single-product-wrap .caracal-full-width-block {
         width: 105vw;
         position: relative;
         left: 50%;
         right: 50%;
         margin-left: -50vw;
         margin-right: -50vw;
     }

     .caracal-product-container {
         display: grid;
         grid-template-columns: 1fr 1.2fr;
         gap: 60px;
         max-width: 1800px;
         /*margin: 0 auto;*/
         padding: 40px 0%;
     }
     
     /* Product Info (Left) */
     .caracal-product-info {
         display: flex;
         flex-direction: column;
     }
     
     .caracal-product-header {
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
     }
     
     .caracal-product-title {
         margin-top: 0;
         font-family: var(--font-boldit);
         font-size: 40px;
         text-transform: uppercase;
         line-height: 0.9;
         margin-bottom: 20px;
         letter-spacing: -0.5px;
         max-width: 70%;
     }
     
    
     .caracal-product-price {
         text-align: right;
     }
     
     .cys-price{
       text-align: left;  
       font-size: 18px;
     }
     
     .caracal-current-price {
         color: var(--caracal-discount);
         font-size: 25px;
         font-family: var(--font-medium);
         display: block;
     }
     
     .caracal-old-price {
         color: var(--caracal-muted);
         font-size: 22px;
         text-decoration: line-through;
         font-weight: 400;
     }
     
     .caracal-section-label {
         font-size: 13px;
         font-weight: 600;
         display: block;
         /*text-transform: full-width;*/
         font-family: var(--font-medium);
         margin-bottom: 15px;
     }
     
     .caracal-section-label span {
         font-weight: 400;
         color: var(--caracal-muted);
         text-transform: none;
     }
     
     /* Color Selection */
     .caracal-color-selection {
         margin-bottom: 15px;
     }
     
     .caracal-color-options {
         display: flex;
         gap: 15px;
         flex-wrap: wrap;
         max-width: 500px;
     }
     
     .caracal-color-box {
         width: 80px;
         min-width: 80px;
         height: 100px;
         cursor: pointer;
         overflow: hidden;
         transition: all 0.2s;
     }
     
     .caracal-color-box.active {
         border: 1px solid var(--caracal-black);
         box-shadow: 0 0 0 1px var(--caracal-black);
     }
     
     .caracal-color-box img {
         width: 100%;
         object-fit: cover;
     }
     
     /* Size Selection */
     .caracal-size-selection {
         margin-bottom: 30px;
     }
     
     .caracal-size-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 20px;
     }
     
     .caracal-size-guide {
         font-size: 13px;
         font-weight: 700;
         text-decoration: underline;
         display: flex;
         align-items: center;
         gap: 8px;
         cursor: pointer;
     }
     
     .caracal-size-grid {
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
         max-width: 500px;
     }
     
      @media (max-width: 768px) {
            .caracal-section-label {
         font-size: 15px;
         
     }
     
          .caracal-size-grid {
       
         max-width: 95%;
     }
      }
     
     .caracal-size-grid .caracal-skew-btn {
         min-width: 80px;
     }

     /* Search modal - old price (del) grey */
  .caracal-search-modal .caracal-search-product-price del,
  .caracal-search-modal .caracal-search-product-price del .amount,
  .caracal-search-modal .caracal-search-product-price del bdi,
  .caracal-search-modal .caracal-search-product-price del .woocommerce-Price-currencySymbol {
    color: #9a9a9a !important;
    opacity: 1 !important;
  }
  
  
  
     
     .caracal-skew-btn {
         background: var(--caracal-white);
         border: 1px solid var(--caracal-stroke-40);
         padding: 14px;
         transform: skewX(var(--skew-angle));
         cursor: pointer;
         transition: all 0.2s;
         display: flex;
         justify-content: center;
         align-items: center;
         text-transform: uppercase;
     }
     
     .caracal-skew-btn:hover {
         color:  var(--caracal-white);
         background-color: var(--caracal-black);
     }
     
     .caracal-skew-btn.active {
         background: var(--caracal-black);
         color: var(--caracal-white);
         border-color: var(--caracal-black);
     }
     
     .caracal-skew-btn span {
         transform: skewX(calc(var(--skew-angle) * -1));
         font-weight: 700;
         font-size: 14px;
     }
     
     /* Quantity */
     .caracal-quantity-selection {
         margin-bottom: 30px;
     }
     
     .caracal-qty-controls {
         display: flex;
         gap: 8px;
         align-items: center;
     }
     
     .caracal-qty-btn {
         background: var(--caracal-black);
         color: var(--caracal-white);
         width: 75px;
         height: 50px;
         border: none;
         transform: skewX(var(--skew-angle));
         cursor: pointer;
         font-size: 20px;
         display: flex;
         justify-content: center;
         align-items: center;
         transition: background 0.2s;
     }
     
     .caracal-qty-btn:hover {
         background: #404040;
     }
     
     .caracal-qty-input {
         width: 90px;
         height: 47px;
         border: 1.5px solid var(--caracal-black);
         transform: skewX(var(--skew-angle));
         display: flex;
         align-items: center;
         justify-content: center;
     }
     
     .caracal-qty-input input {
         transform: skewX(calc(var(--skew-angle) * -1));
         border: none;
         width: 100%;
         height: 100%;
         text-align: center;
         font-weight: 700;
         font-size: 16px;
         outline: none;
         background: transparent;
         appearance: textfield;
         -moz-appearance: textfield;
     }
     
     .caracal-qty-input input::-webkit-outer-spin-button,
     .caracal-qty-input input::-webkit-inner-spin-button {
         -webkit-appearance: none;
         margin: 0;
     }
     
     /* Action Buttons */
     .caracal-action-buttons {
         display: flex;
         gap: 10px;
         margin-bottom: 25px;
     }
     
     .caracal-add-to-cart {
         flex: 1.6;
         background: #000000 !important;
         background-color: #000000 !important;
         color: var(--caracal-white) !important;
         padding: 14px 20px;
         border: none;
         transform: skewX(var(--skew-angle));
         font-weight: 800;
         cursor: pointer;
         font-size: 14px;
         transition: background 0.2s;
     }
     
     /* Override WooCommerce button.alt purple background - Comprehensive selectors */
     .woocommerce button.button.alt.caracal-add-to-cart,
     .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.caracal-add-to-cart,
     button.caracal-add-to-cart.button.alt,
     .woocommerce .variations_button .caracal-add-to-cart,
     .woocommerce .woocommerce-variation-add-to-cart .caracal-add-to-cart,
     .woocommerce .single_variation_wrap .caracal-add-to-cart,
     .woocommerce div.product form.cart .caracal-add-to-cart,
     .woocommerce div.product form.variations_form .caracal-add-to-cart,
     .woocommerce div.product form.variations_form .variations_button .caracal-add-to-cart,
     .woocommerce div.product form.variations_form .woocommerce-variation-add-to-cart .caracal-add-to-cart,
     .woocommerce div.product form.cart button.caracal-add-to-cart,
     .woocommerce div.product form.variations_form button.caracal-add-to-cart,
     .woocommerce div.product .caracal-action-buttons .caracal-add-to-cart,
     .woocommerce div.product .caracal-action-buttons button.caracal-add-to-cart,
     .woocommerce div.product .caracal-action-buttons .single_add_to_cart_button,
     .woocommerce div.product form.cart .button.alt,
     .woocommerce div.product form.cart .single_add_to_cart_button,
     .woocommerce div.product form.variations_form .button.alt,
     .woocommerce div.product form.variations_form .single_add_to_cart_button {
         background: #000000 !important;
         background-color: #000000 !important;
         color: #ffffff !important;
         border-color: #000000 !important;
         border-radius: 0px;
             padding-top: 13px;
         padding-bottom: 13px;
     }
     
     /* Override WooCommerce product form button purple background */
     .woocommerce div.product form.cart .button,
     .woocommerce div.product form.cart .caracal-add-to-cart,
     .woocommerce div.product form.variations_form .button,
     .woocommerce div.product form.variations_form .caracal-add-to-cart {
         background-color: #000000 !important;
         background: #000000 !important;
         color: #ffffff !important;
         border-color: #000000 !important;
         border: 1.5px solid black;
     
     }
     
     
     .woocommerce div.product form.cart .caracal-add-to-cart:hover{
    background-color: #fff !important;
    color: #000 !important;
  }
     
     
     
     
     
     .caracal-add-to-cart:hover {
         background: #404040 !important;
         background-color: #404040 !important;
     }
     
     .caracal-add-to-cart span {
         transform: skewX(calc(var(--skew-angle) * -1));
         display: inline-block;
     }
     
     .caracal-customize-btn {
         flex: 1;
         background: var(--caracal-white);
         color: var(--caracal-black);
         border: 1.5px solid var(--caracal-black);
         padding: 14px 20px;
         transform: skewX(var(--skew-angle));
         font-weight: 600;
         cursor: pointer;
         font-size: 14px;
         position: relative;
     }
     
     /*.caracal-customize-btn::after {*/
     /*    content: '';*/
     /*    position: absolute;*/
     /*    top: -2px;*/
     /*    right: -2px;*/
     /*    width: 15px;*/
     /*    height: 15px;*/
     /*    background: var(--caracal-black);*/
     /*    border-radius: 50%;*/
     /*    transform: skewX(calc(var(--skew-angle) * -1));*/
     /*}*/
     
     /*.caracal-customize-btn span {*/
     /*    transform: skewX(calc(var(--skew-angle) * -1));*/
     /*    display: inline-block;*/
     /*}*/
     
     .caracal-action-buttons {
         overflow: visible;
         /* ✅ make sure the ball isn't clipped */
     }
     
     .caracal-customize-btn {
         flex: 1;
         background: #fff;
         color: #000;
         border: 1.5px solid #000;
         padding: 14px 20px;
         transform: skewX(var(--skew-angle));
         font-weight: 600;
         cursor: pointer;
         font-size: 14px;
         position: relative;
         overflow: visible;
         /* ✅ allow circle to go outside */
     }
     
    /* default: hide dot */
  .caracal-customize-btn::after{
    content:"";
    position:absolute;
    width:15px;height:15px;
    border-radius:50%;
    top:-7.5px;
    right:18px;
    background:#000;
    transform: skewX(calc(var(--skew-angle) * -1));
    z-index:2;
    opacity:0;
    visibility:hidden;
  }
  
  /* show dot only when customization is selected */
  .caracal-customize-btn.has-custom::after{
    opacity:1;
    visibility:visible;
  }
  
     
     
     .caracal-customize-btn>span {
         transform: skewX(calc(var(--skew-angle) * -1));
         display: inline-block;
         position: relative;
         z-index: 2;
         /* keep text above */
     }
     
     
     .caracal-price-extra {
         font-weight: 400;
         color: var(--caracal-muted);
         font-size: 13px;
         margin-left: 2px;
     }
     
     /* Tabby Info */
     .caracal-tabby-info {

margin-top: -40px;
         display: flex;
         justify-content: space-between;
         margin-bottom: 50px;
     }
     
     .caracal-product-info .woocommerce div.product form.cart{
             margin-bottom: -2em;
     }
     
     .caracal-tabby-text {
         font-size: 14px;
         line-height: 1.5;
         color: #333;
     }
     
     .caracal-tabby-learn {
         color: var(--caracal-black);
         font-weight: 700;
         text-decoration: underline;
     }

     /* Tabby promo snippet Learn more link */
     .styles__tabbyPromoSnippetLink--fc364,
     [class*="styles__tabbyPromoSnippetLink--"],
     #tabbyPromo a {
         color: #000 !important;
     }
     
     .caracal-tabby-badge {
        
         color: var(--caracal-black);
      
         font-weight: 800;
         border-radius: 6px;
         font-size: 18px;
         letter-spacing: -0.5px;
         font-family: var(--font-boldit);
     }
     
     /* Accordions */
     .caracal-accordion-item {
         border-top: 1.5px solid var(--caracal-black);
     }
     
     .caracal-accordion-item:last-child {
         border-bottom: 1.5px solid var(--caracal-black);
     }
     
     .caracal-accordion-header {
         padding: 10px 0;
         display: flex;
         justify-content: space-between;
         align-items: center;
         cursor: pointer;
         font-family: var(--font-medium);
         text-transform: uppercase;
         font-size: 17px;
         letter-spacing: 0.5px;
         transition: opacity 0.2s ease;
         user-select: none;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
     }
     

     .caracal-accordion-header:focus {
         outline: 2px solid var(--caracal-black);
         outline-offset: 2px;
     }
     
     .caracal-accordion-header:focus:not(:focus-visible) {
         outline: none;
     }
     
    .caracal-accordion-icon {
        flex-shrink: 0;
        margin-left: 15px;
        transition: transform 0.3s ease;
    }
    
    /* ACCORDION ICON – + when collapsed, − when expanded */
    .caracal-accordion-icon::after {
        content: '+';
        font-size: 24px;
        display: inline-block;
    }
    
    .caracal-accordion-item.active .caracal-accordion-icon::after {
        content: '−';
    }
     
     
     .caracal-accordion-content {
         max-height: 0;
         overflow: hidden;
         padding-bottom: 0;
         font-size: 14px;
         line-height: 1.6;
         transition: max-height 0.4s ease, padding-bottom 0.4s ease;
     }
     
     .caracal-accordion-item.active .caracal-accordion-content {
         max-height: 5000px;
         /* Large enough for most content */
         padding-bottom: 25px;
     }
     
     /* Description content styling */
     .caracal-accordion-content .caracal-short-description {
         margin-bottom: 20px;
     }
     
     .caracal-accordion-content .caracal-short-description:last-child {
         margin-bottom: 0;
     }
     
     .caracal-accordion-content .caracal-full-description {
         margin-top: 0px;
     }
     
     .caracal-accordion-content .caracal-short-description+.caracal-full-description {
         margin-top: 20px;
     }
     
     /* Ensure content supports HTML formatting */
     .caracal-accordion-content p {
         margin-bottom: 15px;
     }
     
     .caracal-accordion-content p:last-child {
         margin-bottom: 10px;
     }
     
     .caracal-accordion-content img {
         max-width: 100%;
         height: auto;
         margin: 15px 0;
     }
     
     .caracal-accordion-content ul,
     .caracal-accordion-content ol {
         margin: 0px 0;
         padding-left: 0px;
     }
     
     .caracal-accordion-content li {
         margin-bottom: -4px;
     }
     
     .caracal-full-description li{
         margin-top: 14px;
     }
     
     /* Care & Washing Instructions Styling */
     .caracal-care-instructions {
         list-style: none;
         padding: 0;
         margin: 0;
     }
     
     .caracal-care-instructions li {
         list-style: none;
     }
     
     .caracal-care-item {
         display: flex;
         align-items: flex-start;
         gap: 9px;
         margin-bottom: 20px;
         padding-bottom: 20px;
     }
     
     .caracal-care-item:last-child {
         margin-bottom: 0;
         padding-bottom: 0;
         border-bottom: none;
     }
     
     .caracal-care-icon {
         flex-shrink: 0;
         width: 20px;
         height: 20px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--caracal-black, #000);
     }
     
     .caracal-care-icon img {
         width: 100%;
         height: 100%;
         object-fit: contain;
         display: block;
     }
     
     .caracal-care-icon svg {
         width: 100%;
         height: 100%;
         stroke: currentColor;
     }
     
     .caracal-care-text {
         flex: 1;
         display: flex;
         flex-direction: column;
         gap: 4px;
     }
     
     .caracal-care-text strong {
         font-weight: 600;
         font-size: 14px;
         font-family: var(--font-medium);
         color: var(--caracal-black, #000);
         line-height: 1.4;
     }
     
     .caracal-care-text span {
         font-size: 13px;
         color: rgba(0, 0, 0, 0.7);
         line-height: 1.5;
         padding-left: 0;
     }
     
     /* No Reviews Message */
     .caracal-no-reviews {
         font-size: 14px;
         color: rgba(0, 0, 0, 0.7);
         line-height: 1.6;
         margin: 0;
         padding: 10px 0;
     }
     
     /* Product Features/USPs List */
     .caracal-product-features {
         list-style: none;
         padding: 0;
         margin: 20px 0 0 0;
     }
     
     .caracal-feature-item {
         display: flex;
         align-items: center;
         gap: 10px;
         margin-bottom: 12px;
         font-size: 14px;
         line-height: 1.5;
     }
     
     .caracal-feature-item:last-child {
         margin-bottom: 0;
     }
     
     .caracal-feature-icon {
         flex-shrink: 0;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         width: 16px;
         height: 16px;
     }
     
     .caracal-feature-icon img {
         width: 100%;
         height: 100%;
         object-fit: contain;
         display: block;
     }
     
     .caracal-feature-text {
         color: var(--caracal-black, #000);
         font-size: 14px;
     }
     
     /* ==========================================================================
        PRODUCT GALLERY
        ========================================================================== */
     
     .caracal-gallery-container {
         position: relative;
         display: flex;
         flex-direction: column;
         gap: 15px;
     }
     
     .caracal-main-gallery-slider {
         position: relative;
         display: flex;
         scroll-snap-type: x mandatory;
         scrollbar-width: none;
     }
     
     .caracal-main-gallery-slider::-webkit-scrollbar {
         display: none;
     }
     
     .caracal-main-image {
         position: relative;
         width: 100%;
         flex: 0 0 100%;
         scroll-snap-align: start;
         background: #F8F8F8;
     }
     
     .caracal-main-image img {
         width: 100%;
         display: block;
     }
     
     .caracal-sale-badge {
         position: absolute;
         top: 0;
         right: 0;
         background: var(--caracal-black);
         color: white;
         padding: 12px 30px;
         font-size: 12px;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 1.5px;
         z-index: 10;
         font-family: var(--font-boldit);
     }
     
     /* Mobile Sale Badge */
     @media (max-width: 768px) {
         .caracal-sale-badge {
             padding: 10px 20px;
             font-size: 11px;
         }
     }
     
     /* Simplified Main Image Wrapper */
     .caracal-main-image-wrapper {
         position: relative;
         width: 100%;
         background: #F8F8F8;
     }
     
     .caracal-main-image-wrapper img,
     .caracal-variation-image {
         width: 100%;
         height: auto;
         display: block;
         transition: opacity 0.3s ease;
     }
     
     /* Gallery Images Grid 
        Pattern: 2 small side-by-side → 1 full width → repeat */
     .caracal-gallery-grid {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 10px;
         margin-top: 10px;
     }
     
     .caracal-gallery-item {
         background: #F8F8F8;
         overflow: hidden;
     }
     
     .caracal-gallery-image {
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
         transition: transform 0.3s ease;
     }
     
     .caracal-gallery-item:hover .caracal-gallery-image {
         transform: scale(1.02);
     }
     
     /* Pattern: Every 3rd image (3rd, 6th, 9th...) spans full width */
     .caracal-gallery-item:nth-child(3n) {
         grid-column: span 2;
     }
     
     /* First two images - smaller height */
     .caracal-gallery-item:nth-child(3n+1),
     .caracal-gallery-item:nth-child(3n+2) {
         aspect-ratio: 1 / 1;
     }
     
     /* Full width images - larger */
     .caracal-gallery-item:nth-child(3n) {
         aspect-ratio: 2 / 1.2;
     }
     
     /* Mobile: Hide grid, show slider */
     @media (max-width: 768px) {
         .caracal-gallery-grid {
             display: none; /* Hide grid on mobile */
         }
     }
     
     /* Mobile Gallery Slider */
     .caracal-gallery-slider-mobile {
         display: none; /* Hidden on desktop */
         position: relative;
         margin-top: 10px;
         overflow: hidden;
     }
     
     .caracal-gallery-slider-track {
         display: flex;
         transition: transform 0.5s ease-in-out;
         will-change: transform;
     }
     
     .caracal-gallery-slide {
         flex: 0 0 100%;
         width: 100%;
         overflow: hidden;
     }
     
     .caracal-gallery-slide-wrapper {
         /*width: 100%;*/
         /*background: #f2f4f5;*/
         display: flex;
         align-items: center;
         justify-content: center;
         aspect-ratio: 4 / 3;
         padding: 10px;
     }
     
     .caracal-gallery-slide-image {
         width: 100%;
         height: 100%;
         display: block;
         object-fit: contain;
     }
     /* Tilt the thumbnail boxes like your skew buttons */
  .caracal-color-box{
    transform: skewX(var(--skew-angle));
    overflow: hidden;            /* keep clean edges */
  }
  
  /* Counter-skew the image so it looks normal (not slanted) */
  .caracal-color-box img{
    transform: skewX(calc(var(--skew-angle) * -1)) scale(1.01);
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  
  /* Optional: match the “button” border feel */
  .caracal-color-box{
    border: 1px solid rgba(0,0,0,.15);
    transition: border-color .2s, box-shadow .2s;
  }
  .caracal-color-box.active{
    border-color: #000;
    box-shadow: 0 0 0 1px #000;
  }
  
     
     .caracal-gallery-slider-dots {
         display: flex;
         justify-content: center;
         gap: 8px;
         margin-top: 15px;
         padding: 0;
     }
     
     .caracal-slider-dot {
         width: 8px;
         height: 8px;
         border-radius: 50%;
         border: none;
         background: rgba(0, 0, 0, 0.3);
         cursor: pointer;
         padding: 0;
         transition: background 0.3s ease;
     }
     
     .caracal-slider-dot.active {
         background: var(--caracal-black);
     }
     
     .caracal-slider-dot:hover {
         background: rgba(0, 0, 0, 0.5);
     }
     
     /* Mobile: one slider only – hide static main image, show slider (main + gallery in one row) */
     @media (max-width: 768px) {
         .caracal-main-image-wrapper {
             display: none;
         }
         .caracal-gallery-slider-mobile {
             display: block;
             margin-top: 0;
         }
     }
     
     /* ==========================================================================
        COMPLETE YOUR SET & PEOPLE ALSO BUY SECTIONS
        ========================================================================== */
     
     .caracal-complete-set-section,
     .caracal-people-also-buy-section {
         margin: 60px 0;
         padding: 0;
     }
     
     .caracal-people-also-buy-section {
         padding-top: 60px;
         margin-top: 40px;
     }
     
     .caracal-section-title {
         font-family: var(--font-medium);
         font-size: 20px;
         text-transform: uppercase;
         letter-spacing: 1px;
         margin-bottom: 30px;
         color: var(--caracal-black);
     }
     
    .caracal-product-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        align-items: stretch;
    }
    
    /* Hide 4th product on desktop for "People Also Buy" (show only 3) */
    .caracal-people-also-buy-section .caracal-product-card:nth-child(4) {
        display: none;
    }
    
    .caracal-product-card {
        background: #fff;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    
    .caracal-product-link {
        display: flex;
        flex-direction: column;
        flex: 1;
        text-decoration: none;
        color: inherit;
        transition: opacity 0.3s ease;
    }
    
    .caracal-product-link:hover {
        opacity: 0.8;
    }
    
    .caracal-product-image-wrapper {
        width: 100%;
        background: #fff;
        margin-bottom: 15px;
        overflow: hidden;
        /*aspect-ratio: 3 / 4;*/
        flex-shrink: 0;
    }
    
    .caracal-product-image-wrapper img {
        width: 100%;
        height: 100%;
        display: block;
        /*object-fit: contain;*/
    }
    
    .caracal-product-name {
        font-size: 16px;
        font-weight: 400;
        margin: 0 0 8px 0;
        color: var(--caracal-black);
        line-height: 1.4;
        text-transform: capitalize;
        /*flex: 1 1 auto;*/
    }
    
    .caracal-product-price {
        font-size: 25px;
        font-family: var(--font-medium);
        color: var(--caracal-black);
    }
    
    .caracal-product-price .woocommerce-Price-amount {
        font-weight: 600;
    }
    
    /* People Also Buy: all prices black (override sale/ins/del colors) */
    .caracal-people-also-buy-section .caracal-product-price,
    .caracal-people-also-buy-section .caracal-product-price .amount,
    .caracal-people-also-buy-section .caracal-product-price ins,
    .caracal-people-also-buy-section .caracal-product-price del,
    .caracal-people-also-buy-section .caracal-product-price bdi {
        color: var(--caracal-black) !important;
    }
     
     /* Mobile Styles */
     @media (max-width: 768px) {
         .caracal-complete-set-section,
         .caracal-people-also-buy-section {
             margin: 40px 0;
         }
         
         .caracal-people-also-buy-section {
             padding-top: 40px;
             margin-top: 30px;
         }
         
         .caracal-section-title {
             font-size: 18px;
             margin-bottom: 20px;
             text-align: center;
         }
         
         .caracal-product-grid {
             grid-template-columns: repeat(2, 1fr);
             gap: 15px;
         }
         
         /* Show 4th product on mobile for "People Also Buy" */
         .caracal-people-also-buy-section .caracal-product-card:nth-child(4) {
             display: block;
         }
         
         .caracal-product-name {
             font-size: 14px;
         }
         
         .caracal-product-price {
             font-size: 14px;
         }
     }
     
     .caracal-gallery-dots {
         display: none;
         justify-content: center;
         gap: 8px;
         margin-top: -25px;
         position: relative;
         z-index: 5;
     }
     
     .caracal-dot {
         width: 8px;
         height: 8px;
         background: rgba(0, 0, 0, 0.2);
         border-radius: 50%;
         cursor: pointer;
     }
     
     .caracal-dot.active {
         background: var(--caracal-black);
     }
     
     .caracal-detail-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 15px;
     }
     
     .caracal-detail-image {
         background: #F8F8F8;
     }
     
     .caracal-detail-image img {
         width: 100%;
         display: block;
     }
     
     .caracal-desktop-only {
         display: block;
     }
     
     .caracal-mobile-only {
         display: none;
     }
     
     /* OVERLAY */
     /* Overlay: visibility/opacity only (no display toggle) to fix open/close height glitch */
     .caracal-size-modal-overlay {
         position: fixed;
         inset: 0;
         background: rgba(0, 0, 0, .4);
         backdrop-filter: blur(8px);
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 9999;
         visibility: hidden;
         opacity: 0;
         pointer-events: none;
         transition: opacity 0.3s ease, visibility 0.3s ease;
     }
     
     .caracal-size-modal-overlay.active {
         visibility: visible;
         opacity: 1;
         pointer-events: auto;
     }
     
     /* DESKTOP MODAL – desktop height unchanged (max-height only) */
     .caracal-size-modal-content {
         background: #fff;
         width: 85%;
         max-width: 900px;
         max-height: 85vh;
         position: relative;
         box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
     }
     
     
     @media (max-width: 1000px) {
         .woocommerce div.product form.cart .button,
     .woocommerce div.product form.cart .caracal-add-to-cart,
     .woocommerce div.product form.variations_form .button,
     .woocommerce div.product form.variations_form .caracal-add-to-cart {
        
         padding-top: 13px;
         padding-bottom: 13px;
     
     }
     }
     
     /* DESKTOP CLOSE TAB */
     /* SIZE MODAL CLOSE TAB – NO SKEW, POLYGON ONLY */
     .caracal-size-modal-close {
         position: absolute;
         left: -77px;
         /* pulls tab outside modal */
     
         width: 66px;
         height: 38px;
     
         background: #fff;
         border: none;
         cursor: pointer;
     
         font-size: 16px;
         line-height: 1;
         font-weight: 400;
         color: #000;
     
         display: flex;
         align-items: center;
         justify-content: center;
     
         /* angled edge */
         clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
     
         box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
         z-index: 10001;
     }
     
     /* CONTENT */
     .caracal-size-modal-scroll {
         padding: 40px;
         overflow-y: scroll;
     }
     
     .caracal-size-table-title {
         font-family: var(--font-boldit);
         font-style: italic;
         font-size: 32px;
         text-transform: uppercase;
         text-align: center;
         margin-bottom: 30px;
     }
     
     /* TABLE */
     .caracal-size-table-wrapper {
         display: flex;
         flex-direction: column;
         gap: 30px;
     }
     
     .caracal-size-table {
         width: 100%;
         border-collapse: collapse;
     }
     
     .caracal-size-table th {
         text-align: left;
         font-size: 12px;
         text-transform: uppercase;
         padding: 12px 10px;
         border-bottom: 1px solid #ddd;
     }
     
     .caracal-size-table td {
         padding: 10px;
         font-size: 14px;
     }
     
     /* MOBILE HEADER */
     .caracal-size-mobile-header {
         display: none;
     }
     
     /* MOBILE */
     @media (max-width: 768px) {
     
         .caracal-size-modal-overlay {
             align-items: flex-start;
         }
     
         .caracal-size-modal-content {
             width: 100%;
             height: 100vh;
             max-height: 100vh;
         }
     
         /* HIDE SKEW CLOSE */
         .caracal-size-modal-close {
             display: none;
         }
     
         /* MOBILE HEADER */
         .caracal-size-mobile-header {
             display: none;
         }
     }
     
     /* ==========================================================================
        CUSTOMIZATION DRAWER
        ========================================================================== */
     
     :root {
         --drawerW: min(620px, 100vw);
         --xTabGap: 14px;
     }
     
     .caracal-modal-overlay {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.06);
         z-index: 1000;
         display: none;
         opacity: 0;
         transition: opacity 0.3s ease;
         max-width: 100vw;
     }
     
     .caracal-modal-overlay,
     .caracal-modal-overlay * {
         max-width: 100vw;
     }
     
     .caracal-modal-overlay.active {
         display: block;
         opacity: 1;
     }
     
     .caracal-modal-overlay.active .c-card {
         transform: translateX(0);
     }
     
     /* Delete Modal - needs flex for centering */
     .caracal-delete-modal.active {
         display: flex !important;
         align-items: center;
         justify-content: center;
         opacity: 1;
     }
     
     /* Close tab for RIGHT drawer: sits just OUTSIDE drawer edge */
     .c-x-tab--drawer {
         display: none;
         position: fixed;
         top: 14px;
         right: calc(var(--drawerW) + var(--xTabGap));
         z-index: 100000;
     }
     
     .caracal-modal-overlay.active .c-x-tab--drawer {
         display: block;
     }
     
     /* When drawer is full width (mobile), keep it visible */
     @media (max-width: 620px) {
         .c-x-tab--drawer {
             right: 14px;
         }
     
         .caracal-modal-overlay.active .c-x-tab--drawer {
             display: block;
         }
     }
     
     /* IMPORTANT: hide drawer X when size modal is open */
     body.size-open .c-x-tab--drawer {
         display: none !important;
     }
     
     /* Shared angled close tab */
     .c-x-tab {
            position: absolute;
    top: 14px;
    width: 71px;
    height: 46px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    clip-path: polygon(19% 0, 100% 0, 100% 100%, 0 100%);
    padding-left: 13px;
     }
     
     /* CUSTOMIZE DRAWER */
     .c-card {
         position: fixed;
         top: 0;
         right: 0;
         height: 100vh;
         width: min(620px, 100%);
         background: #fff;
         border-left: 1px solid rgba(0, 0, 0, .10);
         box-shadow: -30px 0 90px rgba(0, 0, 0, .18);
         display: flex;
         flex-direction: column;
         overflow: hidden;
         z-index: 1001;
         transform: translateX(100%);
         transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
     }
     
     .c-scroll {
         flex: 1;
         overflow-y: auto;
         padding: 38px 34px 18px;
         -webkit-overflow-scrolling: touch;
     }
     
     .c-footer {
         padding: 14px 34px 24px;
         background: #fff;
         border-top: 1px solid rgba(0, 0, 0, .10);
     }
     
     .c-apply {
         margin: 0;
         width: 100%;
         height: 54px;
         border: 0;
         background: #000;
         cursor: pointer;
         transform: skewX(var(--skew-angle));
         display: flex;
         text-transform: capitalize;
         align-items: center;
         justify-content: center;
     }
     
     .c-apply span {
         transform: skewX(calc(var(--skew-angle) * -1));
         color: #fff;
         font-family: var(--font-medium);
         font-size: 12px;
     }
     
     .c-header{
          margin-bottom: 18px;
     }
     
     .c-title {
         font-family: var(--font-boldit);
         font-style: italic;
         text-transform: uppercase;
         font-size: 30px;
        
         color: #000;
         font-weight: 900;
     }
     
     .c-sec {
         padding: 14px 0;
  
         margin-right: 20px;
     }
     
     .c-row {
         display: flex;
         align-items: center;
         gap: 12px;
         cursor: pointer;
     }
     
     .c-row label {
         cursor: pointer;
         display: flex;
         align-items: center;
         gap: 12px;
         width: 100%;
     }
     
     .c-check {
         position: absolute;
         opacity: 0;
         pointer-events: none;
     }
     
     .c-box {
         width: 15px;
         height: 15px;
         border: 1px solid #111;
         display: inline-flex;
         align-items: center;
         justify-content: center;
     }
     
     .c-check:checked+.c-box {
         background: #000;
         border-color: #000;
     }
     
     .c-check:checked+.c-box::after {
         content: "✓";
         color: #fff;
         font-size: 14px;
         transform: translateY(-1px);
     }
     
     .c-h {
         font-family: var(--font-medium);
         text-transform: uppercase;
         font-size: 15px;
         color: #000;
  
     }
     
     .c-h em {
         font-style: normal;
         font-family: var(--font-regular);
         color: #9a9a9a;
         margin-left: 6px;
     }
     
     .c-fields {
         margin-left: 34px;
         margin-top: 20px;
         display: none;
     }
     
     .c-sec[data-sec] .c-check:checked~.c-fields {
         display: block;
     }
     
     .c-sub {
         color: #9a9a9a;
         font-size: 13px;
         margin-top: 8px;
         line-height: 1.5;
     }
     
     .c-input {
         transform: skewX(var(--skew-angle));
         background: #f5f5f5;
         height: 40px;
         display: flex;
         align-items: center;
         padding: 0 16px;
     }
     
     .c-input input {
         width: 100%;
         border: 0;
         background: transparent;
         outline: none;
         font-size: 12px;
         transform: skewX(calc(var(--skew-angle) * -1));
         font-family: var(--font-medium);
         color: #111;
         padding: 0;
     }
     
     .c-input input:focus {
         outline: none;
     }
     
     .c-input input::placeholder {
         color: #9a9a9a;
         font-family: var(--font-regular);
     }
     
     .c-2 {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 18px;
     }
     
     .c-size-link {
         margin-top: 14px;
         border: 0;
         background: transparent;
         display: inline-flex;
         align-items: center;
         gap: 5px;
         cursor: pointer;
         font-family: var(--font-medium);
         font-size: 11px;
         text-decoration: underline;
         text-underline-offset: 4px;
     }
     
     .c-ruler {
         width: 15px;
         height: 15px;
         object-fit: contain;
     }
     
     /* WhatsApp */
     .c-wa {
         margin-top: 18px;
         height: 50px;
         width: min(560px, 100%);
         transform: skewX(var(--skew-angle));
         border: 1.5px solid rgba(0, 0, 0, .65);
         display: flex;
         align-items: center;
         justify-content: center;
         text-decoration: none;
         color: #111;
         gap: 10px;
     }
     
     .c-wa-ic,
     .c-wa-txt {
         transform: skewX(calc(var(--skew-angle) * -1));
         display: inline-block;
     }
     
     .c-wa-ic {
         width: 16px;
         height: 16px;
     }
     
     /* Instagram icon (black) in customize modal */
     .c-ig-ic {
         color: #000;
         display: inline-flex;
         align-items: center;
         justify-content: center;
     }
     .c-ig-ic svg {
         width: 16px;
         height: 16px;
         display: block;
     }
     
     /* Split row: row height = content (left). Image fills that height in right column. */
     .c-split {
         display: grid;
         grid-template-columns: 1fr 230px;
         gap: 26px;
         align-items: stretch;
     }
     
     @media (max-width: 900px) {
         .c-split {
             grid-template-columns: 1fr;
         }
     }
     
     /* Customize modal – mobile: put preview image at bottom; use name2 and logo2 */
     @media (max-width: 768px) {
         #customizeModal .c-sec.c-split .c-right .c-img-desktop {
             display: none !important;
         }
         #customizeModal .c-sec.c-split .c-right .c-img-mobile {
             display: block !important;
         }
         #customizeModal .c-sec.c-split {
             display: flex;
             flex-direction: column;
             gap: 20px;
         }
         #customizeModal .c-sec.c-split .c-left {
             order: 1;
         }
         #customizeModal .c-sec.c-split .c-right {
             order: 2;
             position: relative;
             min-height: 175px;
             width: 92%;
             margin-left: auto;
             margin-right: 3px;
         }
         #customizeModal .c-sec.c-split .c-right .c-img {
             position: relative;
            
             height: auto;
             min-height: 175px;
             object-fit: contain;
         }
     }
     /* Desktop: show desktop images, hide mobile images in customize modal */
     @media (min-width: 769px) {
         #customizeModal .c-sec.c-split .c-right .c-img-mobile {
             display: none !important;
         }
         #customizeModal .c-sec.c-split .c-right .c-img-desktop {
             display: block !important;
         }
     }
     
     /* Right column gets row height from stretch; image taken out of flow so row height = left content only */
     .c-split .c-right {
         position: relative;
         min-height: 0;
     }
     
     .c-split .c-right .c-img {
         position: absolute;
         inset: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
     }
     
     /* Club logo preview: show full logo (contain) so it is not cropped */
     .c-split .c-right #clubPreview.c-img,
     #clubPreview.c-img {
         object-fit: contain;
         object-position: center;
     }
     
     /* Fallback for non-split .c-img if used elsewhere */
     .c-img {
         width: 100%;
         max-width: 100%;
         object-fit: contain;
         display: block;
     }
     
     /* CUSTOM DROPDOWN */
     .c-dd {
         position: relative;
         width: min(560px, 100%);
     }
     
     .c-dd-btn {
         width: 100%;
         height: 46px;
         transform: skewX(var(--skew-angle));
         background: #f5f5f5;
         border: 1px solid #f5f5f5;
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 0 16px;
         cursor: pointer;
         font-family: var(--font-medium);
         font-size: 12px;
         color: #9a9a9a;
     }
     
     .c-dd-btn:hover {
         background: #eeeeee;
     }
     
     .c-dd-btn span {
         transform: skewX(calc(var(--skew-angle) * -1));
     }
     
     .c-dd-caret {
         transform: skewX(calc(var(--skew-angle) * -1));
         color: #9a9a9a;
         font-size: 14px;
         line-height: 1;
     }
     
     .c-dd-menu {
         position: absolute;
         left: 0;
         right: 0;
         top: 52px;
         background: #fff;
         box-shadow: 0 20px 50px rgba(0, 0, 0, .14);
         max-height: 260px;
         overflow: auto;
         padding: 8px 0;
         display: none;
         z-index: 5;
     }
     
     .c-dd.is-open .c-dd-menu {
         display: block;
     }
     
     .c-dd-item {
         width: 100%;
         border: 0;
         background: #fff;
         display: flex;
         align-items: center;
         gap: 14px;
         padding: 14px 16px;
         cursor: pointer;
         text-align: left;
         font-family: var(--font-medium);
         font-size: 10px;
     }
     
     .c-dd-item img {
         width: 34px;
         height: 34px;
         object-fit: contain;
     }
     
     .c-dd-item.is-active {
         background: #f6f6f6;
     }
     
     .c-dd-item:hover {
         background: #f2f2f2;
     }
     
     .c-dd-menu::-webkit-scrollbar {
         width: 10px;
     }
     
     .c-dd-menu::-webkit-scrollbar-thumb {
         background: #111;
         border-radius: 10px;
     }
     
     .c-dd-menu::-webkit-scrollbar-track {
         background: #eee;
     }
     
     /* Mobile styles */
     @media (max-width: 900px) {
     
         /* Hide outside close tab on mobile */
         .c-x-tab--drawer {
             display: none !important;
         }
     
         /* Even when active, hide on mobile */
         .caracal-modal-overlay.active .c-x-tab--drawer {
             display: none !important;
         }
     
         .c-card {
             width: 100vw;
             height: 100dvh;
             right: 0;
             top: 0;
             border-left: 0;
             box-shadow: none;
             transform: translateX(100%);
         }
     
         .caracal-modal-overlay.active .c-card {
             transform: translateX(0);
         }
     
         .c-title {
             font-size: 20px;
             margin: 18px 0 12px;
         }
     
         .c-scroll {
             padding: 16px 16px 120px;
         }
     
         .c-footer {
             position: fixed;
             bottom: 0;
             left: 0;
             right: 0;
             padding: 12px 16px 18px;
             border-top: 1px solid rgba(0, 0, 0, .1);
             background: #fff;
             z-index: 10;
         }
     
         .c-2 {
             grid-template-columns: 1fr;
         }
     
         .c-sec {
             margin-left: 0;
             margin-right: 0;
         }
     }
     
     /* ==========================================================================
        RESPONSIVE - PRODUCT PAGE
        ========================================================================== */
     
       @media (max-width: 1100px) {
             .caracal-product-header {
             order: 1;
             flex-direction: column;
             margin-top: 20px;
         }
     
       }
       
       .caracal-product-size-chart{
           padding: 0 30px 10px ;
       }
     
     @media (max-width: 1000px) {
         .caracal-product-container {
             grid-template-columns: 1fr;
             gap: 20px;
             padding: 0;
             /*margin-right: 20px;*/
             
         }
     
         .caracal-product-info {
             display: contents;
         }
     
       
         .caracal-product-title {
             font-size: 28px;
             max-width: 100%;
             margin-bottom: 5px;
             line-height: 30px;;
         }
     
         .caracal-product-price {
             text-align: left;
             font-size: 20px;
         }
        
     
         .caracal-current-price {
             font-size: 24px;
             color: var(--caracal-black);
         }
     
         .caracal-old-price {
             display: none;
         }
     
         .caracal-gallery-container {
             order: 2;
             overflow: hidden;
             position: relative;
             padding: 0;
             margin-bottom: 30px;
         }
     
         .caracal-gallery-dots {
             display: flex;
         }
     
         .caracal-detail-grid,
         .caracal-desktop-only {
             display: none;
         }
     
         .caracal-mobile-only {
             display: table;
         }
     
         .caracal-color-selection,
         .caracal-size-selection,
         .caracal-quantity-selection,
         .caracal-tabby-info,
         .caracal-accordions,
         .variations_form,
         form.cart {
             order: 3;
             padding: 0 10px;
         }
         
         
        .caracal-tabby-info{
            gap: 40px;
        margin-top: -50px;

        }
         
      .variations_form, form.cart {
          padding: 0 0px;
      }   
     
     .caracal-accordions{
         margin-bottom: 40px;;
     }
         /* Ensure forms use flexbox for proper internal ordering */
         .variations_form,
         form.cart {
             display: flex;
             flex-direction: column;
         }
     
         /* Ensure quantity appears before buttons in both forms */
         .variations_form .caracal-quantity-selection,
         form.cart .caracal-quantity-selection,
         .woocommerce-variation-add-to-cart .caracal-quantity-selection {
             order: 1;
         }
     
         /* Mobile Accordion Styles */
         .caracal-accordion-header {
             padding: 10px 0;
             font-size: 15px;
         }
     
         .caracal-accordion-icon::after {
             font-size: 22px;
         }
     
         .caracal-accordion-content {
             font-size: 13px;
         }
     
         .caracal-accordion-item.active .caracal-accordion-content {
             padding-bottom: 20px;
         }
     
         /* Mobile Care Instructions */
         .caracal-care-item {
             gap: 12px;
             margin-bottom: 18px;
             padding-bottom: 18px;
         }
     
         .caracal-care-icon {
             width: 28px;
             height: 28px;
         }
     
         .caracal-care-text {
             gap: 6px;
         }
     
         .caracal-care-text strong {
             font-size: 13px;
         }
     
         .caracal-care-text span {
             font-size: 12px;
         }
     
         .caracal-size-grid .caracal-skew-btn {
             min-width: 64px;
         }
     
         .innerwrapperSearch {
             margin: 0 auto;
             padding: 0 40px;
             box-sizing: border-box;
         }
     
         .caracal-action-buttons,
         form.cart .caracal-action-buttons,
         .variations_form .caracal-action-buttons,
         .woocommerce-variation-add-to-cart .caracal-action-buttons {
             order: 10;
             flex-direction: column;
             gap: 15px;
             padding: 0 20px;
             margin-right: 5px;
         }
     
         .caracal-add-to-cart {
             order: 2;
         }
     
         .caracal-customize-btn {
             order: 1;
         }
     
         .caracal-size-modal-content {
             width: 80%;
             /*max-height: 90vh;*/
             border-radius: 0px;
         }
     
         .caracal-size-modal-overlay.active {
             display: flex;
             justify-content: center;
             align-items: center;
         }
     
         .caracal-size-modal-scroll {
             padding: 32px 24px 36px;
         }
     
         .caracal-size-modal-close {
             left: -65px;
             width: 60px;
             height: 40px;
         }
     
         .caracal-size-table th {
             font-size: 13px;
             padding: 10px 5px;
         }
     
         .caracal-size-table td {
             font-size: 14px;
             padding: 10px 5px;
         }
     
         .caracal-size-table-title {
             font-size: 26px;
             text-align: left;
             margin-bottom: 28px;
             letter-spacing: 0.06em;
             padding-left: 0;
             margin-left: 30px;
         }
     }
     
     .c-close-inside{
         display: none;
     }
     
     @media (max-width: 900px) {
        .c-close-inside{
         display: block;
     } 
     .caracal-product-size-chart{
         padding: 0 20px 20px;
     }
     .caracal-size-table tbody td{
            font-size: 11px;
     }
     .caracal-size-modal-content {
             width: 100%;
            
         }
     }
     
     /* ==========================================================================
        CART PAGE STYLES (from cart.html)
        ========================================================================== */
     
     /* Hide WooCommerce default cart table */
     .woocommerce-cart .shop_table,
     .woocommerce-cart table.cart,
     body.woocommerce-cart .shop_table,
     body.woocommerce-cart table.cart,
     .woocommerce-cart-form .shop_table {
         display: none !important;
     }
     
     /* Ensure form doesn't interfere with layout */
     .woocommerce-cart-form {
         display: block !important;
         width: 100% !important;
     }
     
     /* Override WooCommerce default cart styles */
     .woocommerce-cart .wrap,
     .woocommerce-page .wrap,
     body.woocommerce-cart .wrap,
     body.woocommerce-cart main.wrap {
         width: min(1320px, 92%) !important;
         margin: 0 auto !important;
         padding: 26px 0 70px !important;
         box-sizing: border-box !important;
     }
     
     .wrap {
         width: min(1320px, 92%);
         margin: 0 auto;
         padding: 26px 0 70px;
     }
     
     /* Page layout */
     .woocommerce-cart .grid,
     .woocommerce-cart-form .grid,
     body.woocommerce-cart .grid,
     body.woocommerce-cart section.grid,
     .grid {
         display: grid !important;
         grid-template-columns: 1fr 420px !important;
         gap: 48px !important;
         align-items: start !important;
         width: 100% !important;
     }
     
     /* Titles */
     .page-title {
         font-family: var(--font-boldit);
         font-weight: 900;
         font-style: italic;
         text-transform: uppercase;
         letter-spacing: -1px;
         font-size: clamp(42px, 5vw, 72px);
         margin-bottom: 22px;
     }
     
     @media (max-width: 680px) {
         .page-title {
             text-align: center;
         }
     }
     
     .section-title {
         font-family: var(--font-boldit);
         font-weight: 900;
         font-style: italic;
         text-transform: uppercase;
         letter-spacing: -1px;
         font-size: clamp(34px, 4.2vw, 64px);
         margin-bottom: 18px;
         text-align: left;
     }
     
     /* Cart list */
     .woocommerce-cart .cart,
     .woocommerce-cart-form .cart,
     body.woocommerce-cart .cart,
     body.woocommerce-cart section.cart,
     .cart {
         padding-top: 6px !important;
         display: block !important;
     }
     
     .woocommerce-cart .cart-row,
     .woocommerce-cart-form .cart-row,
     .woocommerce-cart-form__cart-item.cart-row,
     body.woocommerce-cart .cart-row,
     body.woocommerce-cart article.cart-row,
     .cart-row {
         display: grid !important;
         grid-template-columns: 284px 1fr 180px !important;
         gap: 26px !important;
         padding: 18px 0 !important;
         border: none !important;
         background: transparent !important;
         margin: 0 !important;
         width: 100% !important;
         box-sizing: border-box !important;
     }
     
     /* Cart image container */
     .woocommerce-cart .cart-img,
     body.woocommerce-cart .cart-img {
         width: 100%;
         height: 360px;
         min-height: 320px;
         background: var(--caracal-gray-light);
         display: flex;
         align-items: center;
         justify-content: center;
         overflow: hidden;
     }
     
     /* Cart image itself */
     .woocommerce-cart .cart-img img,
     body.woocommerce-cart .cart-img img {
         width: 100%;
         height: 100%;
         object-fit: cover;
     }
     
     .cart-mid {
         padding-top: 6px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
     }
     
     .item-name {
         font-family: var(--font-boldit);
         font-size: 14px;
         font-weight: 900;
         font-style: italic;
         text-transform: uppercase;
         margin-bottom: 8px;
     }
     
     .item-name a {
         color: var(--caracal-black);
         text-decoration: none;
     }
     
     .item-meta {
         font-size: 12px;
         font-family: var(--font-regular);
         line-height: 1.55;
         color: #000;
         opacity: .85;
     }
     
     .item-meta .muted {
         color: var(--caracal-muted);
     }
     
     .addons {
         margin-top: 8px;
         font-size: 11px;
         line-height: 1.55;
         color: var(--caracal-muted);
     }
     
     .cart-right {
         text-align: right;
         padding-top: 12px;
         font-size: 12px;
     }
     
     .price {
         font-family: var(--font-medium);
         font-size: 12px;
         margin-bottom: 10px;
     }
     
     .price .red {
         color: var(--caracal-discount);
     }
     
     .price .old {
         color: var(--caracal-muted);
         text-decoration: line-through;
         margin-left: 6px;
     }
     
     .remove {
         display: inline-block;
         margin-top: 12px;
         font-size: 11px;
         text-decoration: none;
         color: #000;
         opacity: .8;
     }
     
     
     
     .caracal-full-description > p:first-child{
  margin-top: 0 !important;
}

     
     /* Quantity controls */
     .woocommerce-cart .qty,
     body.woocommerce-cart .qty,
     .qty {
         display: flex !important;
         justify-content: flex-start !important;
         align-items: center !important;
         gap: 6px !important;
     }
     
     .woocommerce-cart .qty-chip,
     body.woocommerce-cart .qty-chip,
     .qty-chip {
         height: 34px !important;
         min-width: 40px !important;
         transform: skewX(var(--skew-angle)) !important;
         padding: 0 18px !important;
         display: flex !important;
         align-items: center !important;
         justify-content: center !important;
     }
     
     .qty-chip>span {
         transform: skewX(calc(var(--skew-angle) * -1));
         font-family: var(--font-medium);
         font-size: 13px;
         line-height: 1;
     }
     
     .qty-chip.black {
         background: #000;
         color: #fff;
         cursor: pointer;
     }
     
     .qty-chip.black:active {
         opacity: .85;
     }
     
     .qty-chip.white {
         background: #fff;
         color: #000;
         border: 2px solid #000 !important;
         cursor: default;
     }
     
     .qty-chip.white span,
     .qty-chip.white .qty-value {
         transform: skewX(calc(var(--skew-angle) * -1));
         display: inline-block;
         font-size: 14px;
         line-height: 1;
     }
     
     .qty-value {
         display: inline-block;
         min-width: 18px;
         text-align: center;
     }
     
     /* mobile */
     @media (max-width: 980px) {
         .qty-chip {
             height: 40px;
             min-width: 92px;
             padding: 0 14px;
         }
     
         .qty-chip>span {
             font-size: 16px;
         }
     }
     
     /* Summary */
     .woocommerce-cart .summary,
     body.woocommerce-cart .summary,
     .summary {
         position: sticky !important;
         top: 18px !important;
         padding-top: 6px !important;
     }
     
     /* PROMO (FULL WIDTH + TILTED INPUT) */
     .woocommerce-cart .promo,
     body.woocommerce-cart .promo,
     .promo {
         width: 100% !important;
         display: flex !important;
         gap: 14px !important;
         align-items: center !important;
         margin-bottom: 10px !important;
     }
     
     .woocommerce-cart .promo-input,
     body.woocommerce-cart .promo-input,
     .promo-input {
         flex: 1 !important;
         height: 48px !important;
         transform: skewX(var(--skew-angle)) !important;
         background: #f7f7f7 !important;
         overflow: hidden !important;
     }
     
     .woocommerce-cart .promo-input input,
     body.woocommerce-cart .promo-input input,
     .promo-input input {
         width: 100% !important;
         height: 100% !important;
         border: none !important;
         outline: none !important;
         background: transparent !important;
         padding: 0 18px !important;
         font-size: 16px !important;
         font-weight: 500 !important;
         color: #777 !important;
         transform: skewX(calc(var(--skew-angle) * -1)) !important;
     }
     
     /* Apply button */
     .woocommerce-cart .apply-btn,
     body.woocommerce-cart .apply-btn,
     .apply-btn {
         height: 48px !important;
         width: 120px !important;
         transform: skewX(var(--skew-angle)) !important;
         border: 2px solid rgba(0, 0, 0, .85) !important;
         background: #fff !important;
         cursor: pointer !important;
     }
     
     .woocommerce-cart .apply-btn span,
     body.woocommerce-cart .apply-btn span,
     .apply-btn span {
         display: inline-block !important;
         transform: skewX(calc(var(--skew-angle) * -1)) !important;
         font-size: 13px !important;
         font-weight: 900 !important;
         font-family: var(--font-boldit) !important;
         font-style: italic !important;
         text-transform: uppercase !important;
     }
     
     .promo-error {
         font-size: 12px;
         color: var(--caracal-discount);
         margin: 8px 0 18px;
         line-height: 1.2;
     }
     
     /* Mobile */
     @media (max-width: 980px) {
         .promo {
             gap: 10px;
         }
     
         .section-title {
             text-align: center;
         }
     
         .promo-input,
         .apply-btn {
             height: 44px;
         }
     
         .apply-btn {
             width: 120px;
         }
     
         .promo-input input {
             font-size: 14px;
             padding: 0 14px;
         }
     
         .apply-btn span {
             font-size: 16px;
         }
     
         .promo-error {
             font-size: 11px;
         }
     }
     
     .woocommerce-cart .sum-block,
     body.woocommerce-cart .sum-block,
     .sum-block {
         padding-top: 14px !important;
         margin-top: 6px !important;
     }
     
     .woocommerce-cart .sum-row,
     body.woocommerce-cart .sum-row,
     .sum-row {
         display: grid !important;
         grid-template-columns: 1fr auto !important;
         gap: 1px !important;
         padding: 5px 0 !important;
         font-size: 11px !important;
     }
     
     .woocommerce-cart .sum-main,
     body.woocommerce-cart .sum-main,
     .sum-main {
         text-transform: uppercase !important;
         letter-spacing: .2px !important;
         font-family: var(--font-regular) !important;
         font-size: 12px !important;
     }
     
     .sum-sub {
         margin-top: 6px;
         text-transform: uppercase;
         letter-spacing: .15px;
         font-size: 10px;
         font-family: var(--font-regular);
         color: var(--caracal-muted);
     }
     
     .sum-muted {
         color: var(--caracal-muted);
         margin-left: 6px;
     }
     
     .woocommerce-cart .sum-right,
     body.woocommerce-cart .sum-right,
     .sum-right {
         text-align: right !important;
         white-space: nowrap !important;
         font-weight: 900 !important;
         font-family: var(--font-boldit) !important;
         font-style: italic !important;
     }
     
     .discount {
         color: var(--caracal-discount);
     }
     
     .inner-divider {
         height: 2px;
         background: rgba(0, 0, 0, .1);
         margin: 14px 0 8px;
     }
     
     .woocommerce-cart .checkout {
         margin-top: 16px !important;
         width: 100% !important;
         transform: skewX(var(--skew-angle)) !important;
         border: none !important;
         height: 44px !important;
         background: #000 !important;
         color: #fff !important;
         cursor: pointer !important;
         font-weight: 900 !important;
         font-family: var(--font-boldit) !important;
         font-style: italic !important;
         text-transform: uppercase !important;
         font-size: 12px !important;
     }
     

     
     .tabby {
         margin-top: 10px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         gap: 10px;
         font-size: 10px;
         color: #000;
         opacity: .85;
     }
     
     .tabby a {
         color: #000;
         text-decoration: underline;
         font-weight: 600;
     }
     
     .tabby-badge {
         background: #30E3AC;
         color: #000;
         font-weight: 900;
         font-family: var(--font-boldit);
         font-style: italic;
         padding: 4px 10px;
         border-radius: 6px;
         font-size: 14px;
         letter-spacing: -0.3px;
     }
     
     /* YOU MIGHT ALSO NEED (FULL WIDTH) */
     .woocommerce-cart .need.full-width,
     body.woocommerce-cart .need.full-width,
     .need.full-width {
         width: 100% !important;
         margin-top: 36px !important;
         clear: both !important;
         display: block !important;
     }
     
     .woocommerce-cart .need-title,
     body.woocommerce-cart .need-title,
     .need-title {
         font-size: 12px !important;
         text-transform: uppercase !important;
         letter-spacing: .25px !important;
         font-weight: 900 !important;
         font-family: var(--font-boldit) !important;
         font-style: italic !important;
         margin: 18px 0 14px !important;
     }
     
     .woocommerce-cart .need-grid,
     body.woocommerce-cart .need-grid,
     .need-grid {
         display: grid !important;
         grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
         gap: 26px !important;
     }
     
     .need-card .need-img {
         background: var(--caracal-gray-light);
         width: 100%;
         aspect-ratio: 1 / 1;
         overflow: hidden;
     }
     
     .need-card img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
     }
     
     .need-card a {
         text-decoration: none;
         color: inherit;
     }
     
     .need-name {
         margin-top: 10px;
         font-size: 11px;
     }
     
     .need-price {
         margin-top: 6px;
         font-size: 11px;
         font-weight: 900;
         font-family: var(--font-boldit);
         font-style: italic;
         text-decoration: underline;
         text-underline-offset: 3px;
     }
     
     /* Mobile */
     @media (max-width: 980px) {
         .grid {
             grid-template-columns: 1fr;
             gap: 26px;
         }
     
         .summary {
             position: static;
         }
     
         .woocommerce-cart .cart-row,
         .woocommerce-cart-form .cart-row,
         body.woocommerce-cart .cart-row,
         .cart-row {
             grid-template-columns: 90px 1fr;
             grid-template-areas:
                 "img mid"
                 "img right";
             gap: 14px;
         }
     
         .woocommerce-cart .cart-img,
         body.woocommerce-cart .cart-img,
         .cart-img {
             width: 90px;
             aspect-ratio: 284 / 368;
             min-height: 117px;
             grid-area: img;
         }
     
         .cart-mid {
             grid-area: mid;
         }
     
         .cart-right {
             grid-area: right;
             text-align: left;
             padding-top: 0;
         }
     
     
         /* promo smaller on mobile */
         .promo {
             gap: 10px;
         }
     
         .promo-input {
             height: 44px;
         }
     
         .promo-input input {
             font-size: 18px;
             padding: 0 16px;
         }
     
         .apply-btn {
             height: 44px;
             width: 120px;
             border-width: 2px;
         }
     
         .apply-btn span {
             font-size: 18px;
         }
     
         .promo-error {
             font-size: 14px;
             margin: 6px 0 14px;
         }
     
         .need-grid {
             grid-template-columns: repeat(2, minmax(0, 1fr));
             gap: 18px;
         }
     }
     
     /* ==========================================================================
        SEARCH MODAL
        ========================================================================== */
     
     
     .caracal-search-modal {
         align-items: flex-start !important;
         /* 🔥 stop vertical centering */
         justify-content: flex-start !important;
         padding-top: 0 !important;
     }
     
     /* container should start immediately */
     .caracal-search-modal-container {
         margin-top: 0 !important;
     }
     
     /* tighten header spacing */
     .caracal-search-header {
         padding-top: 14px !important;
     }
     
     
     
     
     
     /*.caracal-search-modal {*/
     /*    position: fixed !important;*/
     /*    top: 0 !important;*/
     /*    left: 0 !important;*/
     /*    width: 100% !important;*/
     /*    height: 100% !important;*/
     /*    z-index: 999999 !important;*/
     /*    opacity: 0;*/
     /*    visibility: hidden;*/
     /*    display: none;*/
     /*    transition: opacity var(--transition-medium), visibility var(--transition-medium);*/
     /*    align-items: center;*/
     /*    justify-content: center;*/
     /*    padding: 20px;*/
     /*    margin: 0 !important;*/
     /*    pointer-events: none;*/
     /*}*/
     
     .caracal-search-modal.is-open {
         opacity: 1;
         visibility: visible;
         display: flex !important;
         pointer-events: auto;
     }
     
     .caracal-search-modal-overlay {
         position: absolute !important;
         top: 0 !important;
         left: 0 !important;
         width: 100% !important;
         height: 100% !important;
         background: rgba(0, 0, 0, 0.5);
         cursor: pointer;
         z-index: 1;
     }
     
     /*.caracal-search-modal-container {*/
     /*    position: relative !important;*/
     /*    width: 100%;*/
     /*    max-width: 1920px;*/
     /*    max-height: 840px;*/
     /*    margin: 0 auto;*/
     /*    margin-right: 40px;*/
     /*    background: var(--caracal-white);*/
     /*    display: flex;*/
     /*    flex-direction: column;*/
     /*    overflow: hidden;*/
     /*    z-index: 10;*/
     /*    top: auto !important;*/
     /*    left: auto !important;*/
     /*    right: auto !important;*/
     /*    bottom: auto !important;*/
     /*}*/
     
     /* Search Header */
     .caracal-search-header {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 20px 5%;
         border-bottom: 1px solid var(--caracal-stroke-20);
         background: var(--caracal-white);
         z-index: 10;
     }
     
     .caracal-search-logo {
         flex-shrink: 0;
     }
     
     .caracal-search-logo img {
         height: 30px;
         width: auto;
     }
     
     .caracal-search-input-wrapper {
         flex: 1;
         max-width: 600px;
         margin: 0 40px;
         position: relative;
     }
     
     .caracal-search-input-inner {
         transform: skewX(var(--skew-angle));
         border: none;
         background: #F9F9F9;
         transition: background var(--transition-fast);
         position: relative;
     }
     
     
     .caracal-search-input {
         width: 100%;
         padding: 12px 45px 12px 20px;
         border: none;
         border-radius: 0;
         font-size: 16px;
         font-family: var(--font-regular);
         background: transparent;
         outline: none;
         /*transform: skewX(calc(var(--skew-angle) * -1));*/
     }
     
     .caracal-search-input::placeholder {
         transform: skewX(calc(var(--skew-angle) * -1));
         display: inline-block;
     }
     
     .caracal-search-icon {
         position: absolute;
         right: 15px;
         top: 50%;
         transform: translateY(-50%) skewX(calc(var(--skew-angle) * -1));
         color: var(--caracal-muted);
         pointer-events: none;
     }
     
     .caracal-search-close {
         background: var(--caracal-black);
         border: 1px solid var(--caracal-black);
         font-size: 16px;
         font-family: var(--font-regular);
         color: var(--caracal-white);
         cursor: pointer;
         padding: 12px 30px;
         transition: background var(--transition-fast), border-color var(--transition-fast);
         flex-shrink: 0;
         transform: skewX(var(--skew-angle));
         position: relative;
         overflow: hidden;
     }
     
     .caracal-search-close span {
         display: inline-block;
         transform: skewX(calc(var(--skew-angle) * -1));
     }
     
     .caracal-search-close:hover {
         background: #404040;
         border-color: #404040;
     }
     
     /* Search Content */
     .caracal-search-content {
         flex: 1;
         padding: 40px 0;
         width: 100%;
         max-width: 1920px;
         margin: 0 auto;
     }
     
     .caracal-search-section-title {
         font-family: var(--font-regular);
         font-size: 17px;
         margin-bottom: 20px;
         color: #b0b0b0;
         padding: 0 5%;
         width: 100%;
         max-width: 1920px;
         margin-left: auto;
         margin-right: auto;
     }
     
     .caracal-search-results-count {
         font-family: var(--font-regular);
         font-size: 16px;
         font-weight: normal;
         color: var(--caracal-muted);
         text-transform: none;
         margin-left: 10px;
     }
     
     /* Products Grid */
     
     .caracal-search-product-item {
         display: flex;
         flex-direction: column;
     }
     
     .caracal-search-product-link {
         text-decoration: none;
         color: inherit;
         display: flex;
         flex-direction: column;
         transition: transform var(--transition-fast);
     }
     
     .caracal-search-product-link:hover {
         transform: translateY(-2px);
     }
     
     .caracal-search-product-image {
         width: 100%;
         aspect-ratio: 1;
         overflow: hidden;
         margin-bottom: 15px;
     }
     
     .caracal-search-product-image img {
         width: 100%;
         height: 100%;
         object-fit: contain;
     }
     
     .caracal-search-product-info {
         display: flex;
         flex-direction: column;
         gap: 8px;
     }
     
     .caracal-search-product-name {
         font-family: var(--font-medium);
         font-size: 16px;
         color: var(--caracal-black);
         margin: 0;
         line-height: 1.3;
     }
     
     .caracal-search-product-price {
         font-family: var(--font-medium);
         font-size: 16px;
         color: var(--caracal-black);
         border-bottom: 1.3px solid var(--caracal-black);
         width: fit-content;
         padding-bottom: 6px;
         margin-top: 4px;
     }
     
     .caracal-search-product-price .woocommerce-Price-amount {
         font-weight: 600;
     }
     
     /* Loading & No Results */
     .caracal-search-loading,
     .caracal-search-no-results {
         text-align: center;
         padding: 60px 20px;
         color: var(--caracal-muted);
         font-family: var(--font-regular);
         font-size: 16px;
     }
     
     /* Responsive */
     @media (max-width: 1024px) {}
     
     @media (max-width: 768px) {
     
         .caracal-search-modal-container {
             max-height: 90vh;
             height: auto;
         }
     
         .caracal-search-header {
             padding: 15px 4%;
             flex-wrap: nowrap;
             gap: 15px;
         }
     
         .caracal-search-logo {
             display: none;
         }
     
         .caracal-search-input-wrapper {
             flex: 1;
             margin: 0;
             max-width: 100%;
         }
     
         .caracal-search-close {
             margin-left: auto;
             padding: 10px 20px;
             flex-shrink: 0;
         }
     
         .caracal-search-content {
                     padding: 30px 0 70px !important;
         }
     
     
     
         .caracal-search-section-title {
                  font-size: 14px;
        margin-bottom: 20px;
        text-align: center;
        padding: 0px !important;
         }
     }
     
     @media (max-width: 480px) {
     
     
         .caracal-search-product-name {
             font-size: 14px;
         }
     
         .caracal-search-product-price {
             font-size: 14px;
         }
     
         .caracal-search-section-title {
             padding: 0 16px;
         }
     }
     
     
     /* ==============================
        SIZE GUIDE TABLE – GRID FIX
     ============================== */
     .caracal-size-table {
         width: 100%;
         border-collapse: collapse;
     }
     
     .caracal-size-table th,
     .caracal-size-table td {
         padding: 14px 12px;
         font-size: 14px;
         text-align: center;
         border-bottom: 1px solid rgba(0, 0, 0, .1);
     }
     
     .caracal-size-table th {
         font-size: 12px;
         font-weight: 600;
         text-transform: uppercase;
     }
     
     .caracal-size-table td:first-child,
     .caracal-size-table th:first-child {
         font-weight: 600;
         text-align: left;
     }
     
     .caracal-size-table-scroll {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
     }
     
     @media (max-width: 768px) {
         .caracal-size-table {
             min-width: 95%;
         }
     }
     
     
     /* Header cells */
     .caracal-size-table th {
         padding: 14px 10px;
         font-size: 12px;
         text-transform: uppercase;
         font-weight: 600;
         text-align: center;
         border-bottom: 1px solid #ddd;
         white-space: nowrap;
     }
     
     /* Body cells */
     .caracal-size-table td {
         padding: 12px 10px;
         font-size: 14px;
         text-align: center;
         white-space: nowrap;
     }
     
     /* First column (Size) slightly bolder */
     .caracal-size-table td:first-child,
     .caracal-size-table th:first-child {
         font-weight: 600;
     }
     
     /* Row spacing */
     .caracal-size-table tbody tr:not(:last-child) {
         border-bottom: 1px solid rgba(0, 0, 0, 0.08);
     }
     
     /* Smooth horizontal scroll */
     .caracal-size-table-scroll {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
     }
     
     /* MOBILE TWEAK */
     @media (max-width: 768px) {
         .caracal-size-table {
             min-width: 95%;
         }
     
         .caracal-size-table th {
             font-size: 11px;
             padding: 10px 6px;
         }
     
         .caracal-size-table td {
             font-size: 13px;
             padding: 10px 6px;
         }
     }
     
     .caracal-size-modal-overlay.active {
         display: flex;
         align-items: center;
         justify-content: center;
     }
     
     .caracal-size-modal-content {
         margin: 0 auto;
     }
     
     /* =====================================================
        CUSTOMIZE MODAL – DARK + BLUR BACKDROP
     ===================================================== */
     
     .caracal-modal-overlay {
         background: rgba(0, 0, 0, 0.55);
         /* dark overlay */
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);
     }
     
     /* Smooth fade-in */
     .caracal-modal-overlay {
         transition: opacity 0.3s ease, background 0.3s ease;
     }
     
     /* Ensure drawer stays sharp */
     .caracal-modal-overlay .c-card {
         backdrop-filter: none;
         -webkit-backdrop-filter: none;
     }
     
     .c-sec.c-split {
         display: grid;
         grid-template-columns: 1fr 140px;
         gap: 44px;
         align-items: stretch;
     }
     
     .c-sec.c-split .c-right {
         position: relative;
         min-height: 0;
     }
     
     .c-sec.c-split .c-right .c-img {
         position: absolute;
         inset: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
     }
     
     /* Club logo preview: show full logo (contain) so it is not cropped */
     .c-sec.c-split .c-right #clubPreview.c-img,
     #clubPreview.c-img {
         object-fit: contain;
         object-position: center;
     }
     
     .c-img {
         max-width: 100%;
         height: auto;
         display: block;
     }
     
     /* Mobile: slightly stronger dark */
     @media (max-width: 768px) {
         .caracal-modal-overlay {
             background: rgba(0, 0, 0, 0.65);
             backdrop-filter: blur(12px);
             -webkit-backdrop-filter: blur(12px);
     
         }
     
         .innerwrapperSearch {
             padding: 0;
         }
     
         .caracal-search-modal-container {
             margin-right: 20px;
         }
     }
     
     /* =========================================
        SEARCH MODAL – 2 ITEMS ON TABLET & MOBILE
        ========================================= */
     
     /* Tablet (≤1024px) → 2 items */
     @media (max-width: 1024px) {}
     
     
     
     /* Very small phones (≤420px) → optional fallback to 1 */
     @media (max-width: 420px) {
         .caracal-search-products-grid {
             grid-template-columns: 1fr !important;
         }
     }
     
     
     .caracal-search-modal {
         position: fixed;
         inset: 0;
         display: none;
         /* 🔒 hidden by default */
         align-items: flex-start;
         justify-content: flex-start;
         padding: 0;
         margin: 0;
         z-index: 999999;
     }
     
     /* Open state */
     .caracal-search-modal.is-open {
         display: flex !important;
     }
     
     
     
     
     /* =====================================================
        SEARCH MODAL – HARD RESET & TOP FIX
     ===================================================== */
     
     .caracal-search-modal {
         position: fixed !important;
         inset: 0 !important;
         display: none !important;
         /* Hidden by default */
         align-items: flex-start !important;
         /* ⬅️ key fix */
         justify-content: flex-start !important;
         padding: 0 !important;
         margin: 0 !important;
         z-index: 999999 !important;
     }
     
     /* Overlay must not affect layout */
     .caracal-search-modal-overlay {
         position: absolute !important;
         inset: 0 !important;
         background: rgba(0, 0, 0, 0.45) !important;
         z-index: 1 !important;
     }
     
     /* Container MUST be relative and start at top */
     .caracal-search-modal-container {
         position: relative !important;
         width: 100% !important;
         max-width: none !important;
         margin: 0 !important;
         background: #fff !important;
         z-index: 2 !important;
     }
     
     /* Content should flow naturally */
     .caracal-search-content {
          padding: 30px 0 70px !important;
         max-height: none !important;
     }
     
     /* =====================================================
        CUSTOM SALE BADGE - VISIBILITY CONTROL
        ===================================================== */
     
     /* Hide badge by default - will be shown via JavaScript for sale products only */
     .custom-sale-badge {
         display: none !important;
         visibility: hidden !important;
         opacity: 0 !important;
     }
     
     /* Show badge when product has 'has-sale' class (added by JavaScript) */
     .has-sale .custom-sale-badge {
         display: block !important;
         visibility: visible !important;
         opacity: 1 !important;
     }
     
     
     
     /* SALE BADGE */
     .custom-sale-badge {
         position: absolute;
         top: 15px;
     
         background: #000;
         color: #fff;
     
         font-family: var(--font-boldit);
         font-weight: 900;
         font-style: italic;
         letter-spacing: 1.2px;
     
         font-size: 12px;
         padding: 14px 34px 14px 28px;
     
         text-transform: uppercase;
     
         /* 🔥 angled edge */
         clip-path: polygon(0% 0, 100% 0, 80% 98%, 0 100%);
     
         z-index: 10;
     }
     
     @media (max-width: 1000px) {
         .custom-sale-badge {
             top: 15px;
         }
     }
     
     @media (max-width: 768px) {
         .custom-sale-badge {
             font-size: 15px;
             padding: 10px 24px 10px 20px;
         }
     }
     
     
     /* =========================================
        SEARCH MODAL – RESPONSIVE GRID FIX
     ========================================= */
     
     /* Tablet & below → 2 columns */
     @media (max-width: 554px) {
         .caracal-search-products-grid {
             grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
         }
     }
     
     /* Small phones → 1 column */
     @media (max-width: 420px) {
         .caracal-search-products-grid {
             grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
         }
     }
     
     
     
     
     
     /* OVERLAY */
     .caracal-size-modal-overlay {
       position: fixed;
       inset: 0;
       background: rgba(0,0,0,.45);
       backdrop-filter: blur(5px);
       z-index: 9999;
       display: flex;
       visibility: hidden;
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.3s ease, visibility 0.3s ease;
     }
     .caracal-size-modal-overlay.active {
       visibility: visible;
       opacity: 1;
       pointer-events: auto;
     }
     
     /* CARD */
     .caracal-size-modal-card {
       background: #fff;
       width: 880px;
       margin: 100px auto;
       padding: 50px 60px;
       position: relative;
       box-shadow: 0 30px 80px rgba(0,0,0,.3);
     }
     
     /* DESKTOP TITLE */
     .caracal-size-title {
       text-align: center;
       font-size: 28px;
       font-weight: 800;
       margin-bottom: 36px;
     }
     
     /* DESKTOP TABLE */
     .caracal-size-table {
       width: 100%;
       border-collapse: collapse;
     }
     .caracal-size-table th {
       color: #999;
       font-size: 13px;
       padding-bottom: 14px;
     }
     .caracal-size-table td {
       padding: 10px 0;
       font-size: 15px;
     }
     
     /* ANGLED CLOSE TAB */
     .caracal-size-close-tab {
       position: absolute;
       top: 140px;
       left: calc(50% - 440px - 42px);
       width: 48px;
       height: 36px;
       background: #fff;
       border: none;
       cursor: pointer;
       transform: skew(-20deg);
       box-shadow: 0 10px 25px rgba(0,0,0,.25);
     }
     .caracal-size-close-tab::before {
       content: '✕';
       display: block;
       transform: skew(20deg);
     }
     
     /* MOBILE HEADER */
     .caracal-size-mobile-header {
       display: none;
     }
     
     /* MOBILE GRID */
     .size-grid {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       gap: 10px 0;
     }
     .size-grid.head {
       font-weight: 600;
       color: #999;
       margin-bottom: 10px;
     }
     
     /* RESPONSIVE */
     @media (max-width: 768px) {
       .caracal-size-modal-card {
         width: 100%;
         height: 100dvh;
         margin: 0;
         padding: 0;
       }
     
       .caracal-size-title,
       .caracal-size-desktop,
       .caracal-size-close-tab {
         display: none;
       }
     
       .caracal-size-mobile-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 16px;
         border-bottom: 1px solid #eee;
       }
     
       .caracal-size-mobile-body {
         padding: 20px;
         overflow-y: auto;
       }
     }
     
     
     
     /* DEFAULT */
     .size-mobile { display: none; }
     .size-desktop { display: block;padding:40px; padding-top:0; }
     
     /* MOBILE */
     @media (max-width: 768px) {
       .size-desktop { display: none; }
       .size-mobile { display: block;text-align:center;margin-right:15px; }
     
       .size-grid {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         gap: 12px;
         font-size: 14px;
       }
     
       .size-grid.head {
         font-weight: 600;
         opacity: .6;
         margin-bottom: 8px;
       }
     
       .size-section {
         margin-bottom: 24px;
       }
  
       /* Reduce top padding so header aligns cleanly */
       .caracal-size-modal-content {
         padding-top: 0;
       }
     }
     
     /* Smooth accordion slide */
  .caracal-accordion-content{
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height 320ms ease, opacity 240ms ease, transform 240ms ease;
    will-change: max-height, opacity, transform;
  }
  
  /* When open */
  .caracal-accordion-item.active .caracal-accordion-content{
    opacity: 1;
    transform: translateY(0);
  }
  
  
  
  
  
  
  
  
  /*top search animation*/
  
  
  
  
  /* optional overlay fade */
  #caracalSearchModal {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }
  
  #caracalSearchModal.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 400ms ease, visibility 0s;
  }
  
  #caracalSearchModal .caracal-search-modal-overlay {
    opacity: 0;
    transition: opacity 400ms ease;
  }
  
  #caracalSearchModal.is-open .caracal-search-modal-overlay {
    opacity: 1;
  }
  /* SEARCH MODAL – height slide (works with your JS) */
  #caracalSearchModal{
    position: fixed !important;
    inset: 0 !important;
    display: none;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 999999 !important;
  }
  
  #caracalSearchModal.is-open{
    display: flex !important;
  }
  
  #caracalSearchModal .caracal-search-modal-overlay{
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
  }
  
  #caracalSearchModal .caracal-search-modal-container{
    position: relative !important;
    z-index: 2 !important;
  
    width: 100% !important;
    margin: 0 !important;
  
    overflow: hidden;                 /* required */
    height: 0;                        /* start collapsed */
    transition: height 350ms ease;    /* 🔥 this is what you were missing */
  }
  
  
  
  
  /* =====================================================
     SALE BADGE – DESKTOP + MOBILE (FULL FIX)
     - Hides WooCommerce default "SALE" badge
     - Shows your custom badge on ALL sizes using Woo's .sale class
     - Ensures badge positions correctly by forcing a relative parent
     ===================================================== */
  
  /* 1) Hide WooCommerce default sale badge */
  .woocommerce span.onsale,
  .woocommerce .onsale {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* 2) Make sure the badge has a proper positioning context */
  .caracal-main-image,
  .caracal-main-image-wrapper,
  .caracal-gallery-container,
  .woocommerce-product-gallery,
  .woocommerce-product-gallery__wrapper {
    position: relative !important;
  }
  
  /* 3) Custom badge base style (hidden by default) */
  .custom-sale-badge {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  
    position: absolute !important;
    top: 15px !important;
    left: 0px !important; /* ✅ change to right:15px if you want on right */
  
    background: #000 !important;
    color: #fff !important;
  
    font-family: var(--font-boldit);
    font-weight: 900;
    font-style: italic;
    letter-spacing: 1.2px;
  
    font-size: 12px;
    padding: 14px 34px 14px 28px;
    text-transform: uppercase;
  
    /* angled edge */
    clip-path: polygon(0% 0, 100% 0, 80% 98%, 0 100%);
  
    pointer-events: none !important;
  }
  
  /* 4) Show badge when product is on sale (works on desktop + mobile) */
  .single-product .product.sale .custom-sale-badge,
  li.product.sale .custom-sale-badge,
  .woocommerce ul.products li.product.sale .custom-sale-badge {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* 5) Responsive tweak */
  @media (max-width: 768px) {
    .custom-sale-badge {
      font-size: 15px !important;
      padding: 10px 24px 10px 20px !important;
      top: 12px !important;
      left: 0px !important;
    }
  }
  
  /* ==========================================================================
     PRODUCT LOOP HOVER (Shop / Category) – image swap + size overlay
     Name and price display below image (Elementor structure preserved)
     ========================================================================== */
  .caracal-loop-product-media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    flex-shrink: 0;
  }
  /* Product name and price below image – match layout (name, then price with sale styling) */
  ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product .price,
  .elementor-post__title,
  .elementor-post__price,
  .elementor-loop-item .elementor-post__title,
  .elementor-loop-item .elementor-post__price,
  [class*="elementor-post"] .elementor-post__title,
  [class*="elementor-post"] .elementor-post__price {
    display: block !important;
    visibility: visible !important;
  }
  /* Name: black, below image, no overlap */
  ul.products li.product .woocommerce-loop-product__title,
  .elementor-post__title,
  .elementor-loop-item .elementor-post__title,
  [class*="elementor-post"] .elementor-post__title {
    color: #000 !important;
    font-weight: 600;
    margin: 0 0 0.35em 0 !important;
    padding-top: 0.5em;
    line-height: 1.2;
  }
  /* Price: current price bold/underlined, original grey strikethrough */
  ul.products li.product .price,
  .elementor-post__price,
  .elementor-loop-item .elementor-post__price,
  [class*="elementor-post"] .elementor-post__price {
    color: #000 !important;
    margin: 0 !important;
    font-weight: 600;
  }
  ul.products li.product .price ins,
  .elementor-post__price ins,
  .elementor-loop-item .elementor-post__price ins,
  [class*="elementor-post"] .elementor-post__price ins {
    text-decoration: underline;
    font-weight: 700;
  }
  ul.products li.product .price del,
  .elementor-post__price del,
  .elementor-loop-item .elementor-post__price del,
  [class*="elementor-post"] .elementor-post__price del {
    color: #9c9c9c !important;
    font-weight: 400;
    margin-right: 0.25em;
  }
  @media (max-width: 768px) {
    .caracal-loop-product-media .caracal-loop-img,
    .caracal-loop-product-media img {
      width: 100% !important;
      /*object-fit: cover !important;*/
      object-position: center center;
    }
  }
  .caracal-loop-product-media .caracal-loop-img {
    width: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 320ms ease, transform 420ms ease;
    will-change: opacity, transform;
  }
  /* Front image flows normally to set container height */
  .caracal-loop-product-media .caracal-loop-img--front {
    position: relative;
    height: auto;
    opacity: 1;
    transform: scale(1);
  }
  /* Back image overlays on hover */
  .caracal-loop-product-media .caracal-loop-img--back {
    position: absolute;
    inset: 0;
    height: 100%;
    opacity: 0;
    transform: scale(1.02);
  }
  
  .caracal-loop-product-media:hover .caracal-loop-img--front {
  opacity: 1;
}

.caracal-loop-product-media:hover .caracal-loop-img--back {
  opacity: 0;
}

.caracal-loop-product-media.hover-image-ready:hover .caracal-loop-img--front {
  opacity: 0;
}

.caracal-loop-product-media.hover-image-ready:hover .caracal-loop-img--back {
  opacity: 1;
  transform: scale(1);
}
  
  
  
  .caracal-loop-product-media .caracal-loop-sale-badge {
       display: flex;
    position: absolute;
    top: 17px;
    left: 0;
    width: 120px;
    height: 52px;
    background: #000;
    color: #fff;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-transform: uppercase;
    clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
    z-index: 5;
    pointer-events: none;
    padding-right: 15px;
    font-family: var(--font-medium);
    font-weight: 900;
    /* font-style: italic;medium);
    font-weight: 900;
    /*font-style: italic;*/
  }
  .caracal-loop-product-media .caracal-loop-sizes {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    padding: 0 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 220ms ease, transform 220ms ease;
    pointer-events: none;
    z-index: 4;
  }
  .caracal-loop-product-media:hover .caracal-loop-sizes {
    opacity: 1;
    transform: translateY(0);
  }
  .caracal-loop-product-media .caracal-loop-size-btn {
    pointer-events: auto;
    border: 0;
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    font-size: 15px;
    text-transform: uppercase;
    padding: 12px 10px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transform: skewX(-16deg);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    transition: background-color 200ms ease, color 200ms ease;
  }
  .caracal-loop-product-media .caracal-loop-size-btn span {
    display: inline-block;
    transform: skewX(16deg);
    white-space: nowrap !important;
  }
  .caracal-loop-product-media .caracal-loop-size-btn:hover {
    background: #000;
    color: #fff;
  }
  @media (max-width: 520px) {
    .caracal-loop-product-media .caracal-loop-sizes {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      bottom: 16px;
      padding: 0 14px;
      gap: 10px;
    }
   
  }
  
    @media (max-width: 920px) 
    {
    .caracal-loop-product-media .caracal-loop-sale-badge {
             width: 60px;
        height: 27px;
        font-size: 10px;
    
    }
  }

  /* Mobile: force no hover effect inside excluded containers (same data-ids as JS) */
  @media (max-width: 1024px) {
    [data-id="15ede0ac"] .caracal-loop-product-media:hover .caracal-loop-img--front,
    [data-id="108926aa"] .caracal-loop-product-media:hover .caracal-loop-img--front,
    [data-id="22934919"] .caracal-loop-product-media:hover .caracal-loop-img--front,
    [data-id="4a3ed7bb"] .caracal-loop-product-media:hover .caracal-loop-img--front,
    [data-id="add3968"] .caracal-loop-product-media:hover .caracal-loop-img--front,
    [data-id="0ad40bf"] .caracal-loop-product-media:hover .caracal-loop-img--front,
    [data-id="b178cd4"] .caracal-loop-product-media:hover .caracal-loop-img--front,
    [data-id="976362f"] .caracal-loop-product-media:hover .caracal-loop-img--front,
    [data-id="d7703bb"] .caracal-loop-product-media:hover .caracal-loop-img--front,
        [data-id="69b2870a"] .caracal-loop-product-media:hover .caracal-loop-img--front,
        [data-id="89ba949"] .caracal-loop-product-media:hover .caracal-loop-img--front,
        [data-id="24130e3"] .caracal-loop-product-media:hover .caracal-loop-img--front,
        [data-id="e4bdbc0"] .caracal-loop-product-media:hover .caracal-loop-img--front,
        [data-id="2d34a9f"] .caracal-loop-product-media:hover .caracal-loop-img--front {
      opacity: 1 !important;
    }
    [data-id="15ede0ac"] .caracal-loop-product-media:hover .caracal-loop-img--back,
    [data-id="108926aa"] .caracal-loop-product-media:hover .caracal-loop-img--back,
    [data-id="22934919"] .caracal-loop-product-media:hover .caracal-loop-img--back,
    [data-id="4a3ed7bb"] .caracal-loop-product-media:hover .caracal-loop-img--back,
    [data-id="add3968"] .caracal-loop-product-media:hover .caracal-loop-img--back,
    [data-id="0ad40bf"] .caracal-loop-product-media:hover .caracal-loop-img--back,
    [data-id="b178cd4"] .caracal-loop-product-media:hover .caracal-loop-img--back,
    [data-id="976362f"] .caracal-loop-product-media:hover .caracal-loop-img--back,
    [data-id="d7703bb"] .caracal-loop-product-media:hover .caracal-loop-img--back,
        [data-id="69b2870a"] .caracal-loop-product-media:hover .caracal-loop-img--back,
        [data-id="89ba949"] .caracal-loop-product-media:hover .caracal-loop-img--back,
        [data-id="24130e3"] .caracal-loop-product-media:hover .caracal-loop-img--back,
        [data-id="e4bdbc0"] .caracal-loop-product-media:hover .caracal-loop-img--back,
        [data-id="2d34a9f"] .caracal-loop-product-media:hover .caracal-loop-img--back {
      opacity: 0 !important;
    }
    [data-id="15ede0ac"] .caracal-loop-product-media:hover .caracal-loop-sizes,
    [data-id="108926aa"] .caracal-loop-product-media:hover .caracal-loop-sizes,
    [data-id="22934919"] .caracal-loop-product-media:hover .caracal-loop-sizes,
    [data-id="4a3ed7bb"] .caracal-loop-product-media:hover .caracal-loop-sizes,
    [data-id="add3968"] .caracal-loop-product-media:hover .caracal-loop-sizes,
    [data-id="0ad40bf"] .caracal-loop-product-media:hover .caracal-loop-sizes,
    [data-id="b178cd4"] .caracal-loop-product-media:hover .caracal-loop-sizes,
    [data-id="976362f"] .caracal-loop-product-media:hover .caracal-loop-sizes,
    [data-id="d7703bb"] .caracal-loop-product-media:hover .caracal-loop-sizes,
        [data-id="69b2870a"] .caracal-loop-product-media:hover .caracal-loop-sizes,
        [data-id="89ba949"] .caracal-loop-product-media:hover .caracal-loop-sizes,
        [data-id="24130e3"] .caracal-loop-product-media:hover .caracal-loop-sizes,
        [data-id="e4bdbc0"] .caracal-loop-product-media:hover .caracal-loop-sizes,
        [data-id="2d34a9f"] .caracal-loop-product-media:hover .caracal-loop-sizes {
      opacity: 0 !important;
      transform: translateY(10px) !important;
      pointer-events: none !important;
    }
    
    
    .caracal-loop-product-media .caracal-loop-size-btn {
    font-size: 11px;
  }
  }
  
  
  
  
  
  
  
  .caracal-modal-overlay{
    display: block;              /* keep it rendered */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0.5s linear 0s;
  }
  
  .caracal-modal-overlay.active{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.5s ease, visibility 0s;
  }
  
  /* drawer animation */
  .c-card{
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .caracal-modal-overlay.active .c-card{
    transform: translateX(0);
  }
  
  /* ✅ 40px gap at top to reveal banner behind */
  #caracalSearchModal{
    padding-top: 40px !important;
    box-sizing: border-box;
  }
  
  
  /* Highest precedence (more specific + important everywhere) */
  body .whiteblack,
  body button.whiteblack,
  body a.whiteblack,
  body input.whiteblack,
  body .whiteblack:visited,
  body .whiteblack:focus,
  body .whiteblack:active{
    background-color: #fff !important;
    color: #000 !important;
    transition: background-color 300ms ease, color 300ms ease !important;
  }
  
  body .whiteblack:hover{
    background-color: #000 !important;
    color: #fff !important;
  }
  
  /* inverse */
  body .blackwhite,
  body button.blackwhite,
  body a.blackwhite,
  body input.blackwhite,
  body .blackwhite:visited,
  body .blackwhite:focus,
  body .blackwhite:active{
    background-color: #000 !important;
    color: #fff !important;
    transition: background-color 300ms ease, color 300ms ease !important;
  }
  
  body .blackwhite:hover{
    background-color: #fff !important;
    color: #000 !important;
  }
  
  
  
  
  
  /* FIX: force hover for blackwhite on Woo add-to-cart */
  .woocommerce div.product form.cart button.single_add_to_cart_button.blackwhite:hover,
  .woocommerce div.product form.cart .single_add_to_cart_button.blackwhite:hover,
  .woocommerce div.product form.cart .button.blackwhite:hover,
  .woocommerce div.product form.cart .caracal-add-to-cart.blackwhite:hover,
  body button.blackwhite:hover,
  body a.blackwhite:hover {
    background-color: #fff !important;
    color: #000 !important;
    border: 1.5px solid black !important;
    border-color: #000 !important;
      box-sizing: border-box !important;
  
  }
  
  
  
  
  
  @media (max-width: 800px) {
    .caracal-loop-product-media .caracal-loop-sizes {
      display: none !important;
    }
  }
  
  
  
  
  
  
  
  
  
     /* Single product price: current (red, bold) then original (grey, strikethrough) */
     .single-product .caracal-product-header .caracal-product-price,
     div.caracal-product-info .caracal-product-price#caracal-price-display {
         display: flex !important;
         flex-wrap: wrap;
         align-items: baseline;
         justify-content: flex-end;
         gap: 8px;
     }
     .single-product .caracal-product-price .price,
     div.caracal-product-info .caracal-product-price#caracal-price-display .price {
         display: flex !important;
         flex-wrap: wrap;
         align-items: baseline;
         gap: 8px;
         margin: 0;
     }
     .single-product .caracal-product-price ins,
     div.caracal-product-info .caracal-product-price#caracal-price-display ins {
         text-decoration: none !important;
         color: #e60000 !important;
         font-weight: 700 !important;
         font-size: inherit;
     }
     .single-product .caracal-product-price ins .woocommerce-Price-amount,
     div.caracal-product-info .caracal-product-price#caracal-price-display ins .woocommerce-Price-amount {
         color: #e60000 !important;
         font-weight: 700 !important;
     }
     .single-product .caracal-product-price del,
     div.caracal-product-info .caracal-product-price#caracal-price-display del {
         color: #9c9c9c !important;
         font-weight: 400 !important;
         font-size: 0.85em;
     }
     .single-product .caracal-product-price del .woocommerce-Price-amount,
     div.caracal-product-info .caracal-product-price#caracal-price-display del .woocommerce-Price-amount {
         color: #9c9c9c !important;
         text-decoration: line-through !important;
     }
     .single-product .caracal-product-price del .woocommerce-Price-amount bdi,
     .single-product .caracal-product-price del .woocommerce-Price-currencySymbol,
     div.caracal-product-info .caracal-product-price#caracal-price-display del .woocommerce-Price-amount bdi,
     div.caracal-product-info .caracal-product-price#caracal-price-display del .woocommerce-Price-currencySymbol {
         color: #9c9c9c !important;
     }
     /* Show current price first, then original (WooCommerce outputs del then ins) */
     .single-product .caracal-product-price ins,
     .single-product .caracal-product-price .price ins { order: 1; }
     .single-product .caracal-product-price del,
     .single-product .caracal-product-price .price del { order: 2; }
     div.caracal-product-info .caracal-product-price#caracal-price-display ins,
     div.caracal-product-info .caracal-product-price#caracal-price-display .price ins { order: 1; }
     div.caracal-product-info .caracal-product-price#caracal-price-display del,
     div.caracal-product-info .caracal-product-price#caracal-price-display .price del { order: 2; }
     .woocommerce-Price-amount bdi .woocommerce-Price-currencySymbol
{
         display: none;
     }
     
     
     
     
     
     
     
     
/*     body .caracal-people-also-buy-section .woocommerce-Price-amount bdi,*/
/*body .caracal-people-also-buy-section .woocommerce-Price-amount,*/
/*body .caracal-people-also-buy-section bdi,*/
/*body .caracal-people-also-buy-section a,*/
/*body .caracal-people-also-buy-section a *{*/
/*  text-decoration: none !important;*/
/*}*/


/* COMPLETE YOUR SET — force remove underline from price */
/*.woocommerce-page .caracal-complete-set-section .woocommerce-Price-amount,*/
/*.woocommerce-page .caracal-complete-set-section .woocommerce-Price-amount bdi,*/
/*.woocommerce-page .caracal-complete-set-section .woocommerce-Price-amount .amount,*/
/*.woocommerce-page .caracal-complete-set-section .woocommerce-Price-amount .amount bdi,*/
/*.woocommerce-page .caracal-complete-set-section .price,*/
/*.woocommerce-page .caracal-complete-set-section .price * {*/
/*  text-decoration: none !important;*/
/*}*/
     
  
  
  
  
  
/*body .caracal-people-also-buy-section .woocommerce-Price-amount,*/
/*body .caracal-people-also-buy-section .woocommerce-Price-amount bdi,*/
/*body .caracal-people-also-buy-section .woocommerce-Price-amount .amount,*/
/*body .caracal-people-also-buy-section .woocommerce-Price-amount .amount bdi,*/
/*body .caracal-people-also-buy-section .price,*/
/*body .caracal-people-also-buy-section .price *,*/
/*body .caracal-people-also-buy-section a,*/
/*body .caracal-people-also-buy-section a *{*/
/*  text-decoration: none !important;*/
  /*border-bottom: 0 !important;*/
/*  box-shadow: none !important;*/
/*}*/

/*.woocommerce-page .caracal-complete-set-section .woocommerce-Price-amount,*/
/*.woocommerce-page .caracal-complete-set-section .woocommerce-Price-amount bdi,*/
/*.woocommerce-page .caracal-complete-set-section .woocommerce-Price-amount .amount,*/
/*.woocommerce-page .caracal-complete-set-section .woocommerce-Price-amount .amount bdi,*/
/*.woocommerce-page .caracal-complete-set-section .price,*/
/*.woocommerce-page .caracal-complete-set-section .price *{*/
/*  text-decoration: none !important;*/
/*  border-bottom: 0 !important;*/
/*  box-shadow: none !important;*/
/*}*/
/*.caracal-search-product-price .woocommerce-Price-amount,*/
/*.caracal-search-product-price .woocommerce-Price-amount bdi,*/
/*.caracal-search-product-price .woocommerce-Price-amount .amount,*/
/*.caracal-search-product-price .woocommerce-Price-amount .amount bdi,*/
/*.caracal-search-product-price bdi {*/
/*  border-bottom: 0 !important;*/
/*  text-decoration: none !important;*/
/*  box-shadow: none !important;*/
/*}*/





/* remove the underline border from Woo price bdi everywhere */
/*.woocommerce-Price-amount bdi,*/
/*body .woocommerce-Price-amount bdi,*/
/*.woocommerce-page .woocommerce-Price-amount bdi{*/
/*  border-bottom: 0 !important;*/
/*}*/







.caracal-product-title{
  font-family: var(--font-boldit) !important;

}








/* Remove the underline/border-bottom coming from WooCommerce price markup inside your "c-h" (checkbox header) */
.c-h .woocommerce-Price-amount bdi,
.c-h .woocommerce-Price-amount,
.c-h .woocommerce-Price-currencySymbol {
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* If the underline is applied globally to ANY bdi, this kills it inside the whole checkbox block */
.c-row .woocommerce-Price-amount bdi,
.c-row .woocommerce-Price-amount,
.c-row bdi {
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}







/* 1) grey tile behind every slide image */
.caracal-gallery-slide-wrapper{
  background: #f2f2f2 !important;  /* your grey */
  isolation: isolate;              /* makes blend reliable */
}

/* 2) blend the actual image */
.caracal-gallery-slide-wrapper img.caracal-gallery-slide-image{
  mix-blend-mode: multiply;
  background: transparent !important;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;             /* keep as you already have */
}




.caracal-gallery-item{
  background: #f2f2f2 !important;
  isolation: isolate;
}

.caracal-gallery-item img,
.caracal-gallery-item .caracal-gallery-image{
  mix-blend-mode: multiply;
  background: transparent !important;
}





.caracal-product-price.cys-price > span:nth-of-type(3),
.caracal-product-price.cys-price > span:nth-of-type(2){
  display: none !important;
}



















/* =========================================
   CARACAL CHECKOUT — CLEAN UPDATED VERSION
   ========================================= */

/* ---------- kill theme tilt on checkout text ---------- */
.woocommerce-checkout label,
.woocommerce-checkout p,
.woocommerce-checkout span,
.woocommerce-checkout strong,
.woocommerce-checkout em,
.woocommerce-checkout input,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-checkout button,
.woocommerce-checkout .select2-selection__rendered,
.woocommerce-checkout .payment_box,
.woocommerce-checkout .wc_payment_method label,
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text,
.woocommerce-checkout .shop_table,
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td,
.woocommerce-checkout .form-row,
.woocommerce-checkout .form-row *,
.woocommerce-checkout .woocommerce-input-wrapper,
.woocommerce-checkout .woocommerce-input-wrapper::before,
.woocommerce-checkout .woocommerce-input-wrapper::after,
.woocommerce-checkout .select2-container,
.woocommerce-checkout .select2-container *,
.woocommerce-checkout .wc_payment_method,
.woocommerce-checkout .wc_payment_method *,
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-privacy-policy-text * {
  transform: none !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ---------- labels ---------- */
.woocommerce-checkout label {
  color: #626975 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* ---------- spacing ---------- */
.woocommerce-checkout .form-row {
  margin-bottom: 16px !important;
}

/* ---------- text fields ---------- */
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea {
  background: #f3f3f3 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #6a717c !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  height: 52px !important;
  min-height: 52px !important;
  line-height: 52px !important;
  padding: 0 30px !important;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%) !important;
  transform: none !important;
}

.woocommerce-checkout textarea {
  min-height: 110px !important;
  height: auto !important;
  line-height: 1.5 !important;
  padding: 14px 18px !important;
  resize: vertical !important;
}

/* ---------- placeholders ---------- */
.woocommerce-checkout input::placeholder,
.woocommerce-checkout textarea::placeholder {
  color: #9aa1ab !important;
  font-style: normal !important;
  opacity: 1 !important;
}

/* ---------- native select ---------- */
.woocommerce-checkout select {
  background: #f3f3f3 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #6a717c !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  height: 52px !important;
  min-height: 52px !important;
  line-height: 52px !important;
  padding: 0 30px !important;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%) !important;
  transform: none !important;
}

/* ---------- Select2 country/state ---------- */
.woocommerce-checkout .select2-container--default .select2-selection--single {
  background: #f3f3f3 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 52px !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 30px !important;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%) !important;
  transform: none !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #6a717c !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 52px !important;
  padding-left: 0 !important;
  padding-right: 30px !important;
  transform: none !important;
  text-transform: none !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 52px !important;
  right: 12px !important;
  top: 0 !important;
  transform: none !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #767d88 transparent transparent transparent !important;
  border-width: 6px 5px 0 5px !important;
  transform: none !important;
}

/* ---------- focus ---------- */
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout .select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--open .select2-selection--single {
  outline: none !important;
  box-shadow: inset 0 0 0 1px #d8d8d8 !important;
  background: #efefef !important;
}

/* ---------- payment methods layout ---------- */
.woocommerce-checkout .wc_payment_methods .wc_payment_method {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.woocommerce-checkout .wc_payment_methods .wc_payment_method > input[type="radio"] {
  margin: 0 !important;
  flex: 0 0 auto !important;
  position: static !important;
  top: auto !important;
  vertical-align: middle !important;
    accent-color: #000000; /* change to your color */

}

.woocommerce-checkout .wc_payment_methods .wc_payment_method > label {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  font-style: normal !important;
  transform: none !important;
  vertical-align: middle !important;
}

.woocommerce-checkout .wc_payment_method label img,
.woocommerce-checkout .wc_payment_method label .payment_method_icons {
  vertical-align: middle !important;
}

/* ---------- order/payment text straight ---------- */
.woocommerce-checkout .wc_payment_method label,
.woocommerce-checkout .payment_box p,
.woocommerce-checkout .woocommerce-privacy-policy-text p,
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text,
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
  font-style: normal !important;
  transform: none !important;
}

/* ---------- place order button ---------- */
ç #place_order {
  width: 100% !important;
  min-height: 52px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 16px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%) !important;
  transform: none !important;
}

.woocommerce-checkout #place_order:hover {
  filter: brightness(0.97) !important;
}

.payment_box payment_method_cod . payment_box payment_method_cod{
      clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%) !important;

}


.elementor-widget-woocommerce-checkout-page .woocommerce #customer_details .col-1, .elementor-widget-woocommerce-checkout-page .woocommerce .e-checkout__order_review, .elementor-widget-woocommerce-checkout-page .woocommerce .e-coupon-box, .elementor-widget-woocommerce-checkout-page .woocommerce .e-woocommerce-login-section, .elementor-widget-woocommerce-checkout-page .woocommerce .shipping_address, .elementor-widget-woocommerce-checkout-page .woocommerce .woocommerce-additional-fields, .elementor-widget-woocommerce-checkout-page .woocommerce .woocommerce-checkout #payment {
   border-width: 0px !important;
    padding: 20px !important;
}


/* keep order notes textarea completely normal */
.woocommerce-checkout textarea#order_comments,
.woocommerce-checkout #order_comments,
.woocommerce-checkout .form-row.notes textarea,
.woocommerce-checkout .woocommerce-additional-fields textarea {
  transform: none !important;
  clip-path: none !important;
  skew: none !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  background: #f3f3f3 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 120px !important;
  height: auto !important;
  line-height: 1.5 !important;
  padding: 14px 18px !important;
  resize: vertical !important;
}

.elementor-13 .elementor-element.elementor-element-fe8c9be .elementor-heading-title {
  text-align: center !important;
  width: 100% !important;
  margin-bottom: 50px;
}

.elementor-widget-woocommerce-checkout-page a{
    color: #444444 !important;
}


 @media (max-width: 900px) {

    .woocommerce-checkout .site-main{
     padding:0;
    }
    .elementor-13 .elementor-element.elementor-element-fe8c9be .elementor-heading-title {
      margin-bottom: 0px;
    }

}


.caracal-size-table caption {
  display: none !important;
}

/* SIZE MODAL: only chart area scrolls */
#sizeModal.caracal-size-modal-overlay{
  overflow: hidden !important;
}

#sizeModal .caracal-size-modal-content{
  display: flex !important;
  flex-direction: column !important;
  max-height: 88vh !important;
  height: 65vh !important;
}

#sizeModal .caracal-size-table-title{
  flex: 0 0 auto !important;
}

#sizeModal .caracal-product-size-chart{
  flex: 1 1 auto !important;
  min-height: 0 !important;          /* very important */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: none !important;       /* remove old conflicting heights */
  height: auto !important;
  padding-bottom: 12px !important;
  -webkit-overflow-scrolling: touch;
}

#sizeModal .caracal-size-note{
  flex: 0 0 auto !important;
}

@media (max-width: 768px){
  #sizeModal .caracal-size-modal-content{
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  #sizeModal .caracal-product-size-chart{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}



.caracal-loop-product-media{
    display: flex !important;
justify-content:center !important;
}

.caracal-loop-product-media .caracal-loop-img--back {
  display: block !important;
  margin: 0 auto !important;
}

/* place order button */
#place_order {
  width: 100% !important;
  min-height: 52px !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  background: #000 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 16px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%) !important;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}

#place_order:hover {
  background: #3d3d3d !important;

}
/* payment method box */
.woocommerce-checkout #payment div.payment_box,
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment .payment_methods .payment_box {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%) !important;
  overflow: hidden !important;
}
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment .payment_methods .payment_box p{
margin-bottom: 12.33px !important;
margin-left: 12.33px !important;
}

/* order review table headings / totals */
.woocommerce-checkout-review-order-table thead tr th,
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr th,
 .elementor-widget-woocommerce-checkout-page .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr td {
  font-size: 13px !important;
}

/* coupon text */
 .elementor-widget-woocommerce-checkout-page .woocommerce-checkout.e-coupon-box .e-checkout-secondary-title,
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout .e-coupon-box .e-woocommerce-coupon-nudge,
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout .e-coupon-box .e-show-coupon-form {
  font-size: 14px !important;
}

/* underline coupon link */
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout .e-coupon-box .e-show-coupon-form {
  text-decoration: underline !important;
}

/* border for coupon box */
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout .e-coupon-box {
  border: 1px dashed #d1d1d1 !important;
}
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout .e-apply-coupon,
.woocommerce-form-login__submit,
.woocommerce-button.button.e-apply-coupon {
  font-size: 13px !important;
  line-height: 20px !important;
}
.elementor-widget-woocommerce-checkout-page .e-checkout__container {
  column-gap: 24px !important;
  grid-column-gap: 104px !important;
}
.elementor-widget-woocommerce-checkout-page .woocommerce-checkout .woocommerce-form__label-for-checkbox span,
#ship-to-different-address span {
  font-family: "Aktiv Grotesk", sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
}

.elementor-widget-woocommerce-checkout-page .woocommerce .e-checkout__order_review {
  background: #f8f8f8 !important;
}

.elementor-widget-woocommerce-checkout-page .woocommerce .e-coupon-box {
  background: #f8f8f8 !important;
}


.elementor-widget-woocommerce-checkout-page .woocommerce .e-checkout__order_review-2 {
  background: #f8f8f8 !important;
}

.woocommerce form .form-row input[type="checkbox"],
.woocommerce #terms {
  accent-color: #000 !important;
  margin-top: 8px !important;
}


.e-woo-select2-wrapper .select2-results__option {
  color: #000 !important;
  padding: 15px !important;
}

.e-woo-select2-wrapper .select2-results__option--highlighted[aria-selected],
.e-woo-select2-wrapper .select2-results__option--highlighted[data-selected] {
  background: #000 !important;
  color: #fff !important;
}

.elementor-widget-woocommerce-checkout-page .woocommerce #customer_details .col-1,
.elementor-widget-woocommerce-checkout-page .woocommerce .e-checkout__order_review,
.elementor-widget-woocommerce-checkout-page .woocommerce .e-coupon-box,
.elementor-widget-woocommerce-checkout-page .woocommerce .e-woocommerce-login-section,
.elementor-widget-woocommerce-checkout-page .woocommerce .shipping_address,
.elementor-widget-woocommerce-checkout-page .woocommerce .woocommerce-additional-fields,
.elementor-widget-woocommerce-checkout-page .e-checkout__order_review-2 #payment {
  padding: 20px !important;
}

.payment_box.payment_method_stripe fieldset {
  border: none !important;
  padding-left: 0 !important;
  display: flex !important;
  font-size: 13px !important;
}


.payment_box.payment_method_stripe .woocommerce-SavedPaymentMethods-saveNew {
  display: flex !important;
  align-items: flex-start !important;
}

.elementor-widget-woocommerce-checkout-page .woocommerce #customer_details .col-2 .woocommerce-additional-fields,
.elementor-widget-woocommerce-checkout-page .woocommerce #customer_details .col-2 .woocommerce-additional-fields__field-wrapper,
.elementor-widget-woocommerce-checkout-page .woocommerce #customer_details .col-2 .woocommerce-additional-fields h3 {
  padding: 0 !important;
  margin: 0 !important;
}
.elementor-widget-woocommerce-checkout-page form.checkout .e-checkout__column-start #customer_details .col-1 {
  padding: 0 !important;
  padding-top: 30px !important;
}

.elementor-widget-woocommerce-checkout-page form.checkout .e-checkout__column-start #customer_details .col-2 #ship-to-different-address {
  padding-left: 0 !important;
}

.elementor-widget-woocommerce-checkout-page form.checkout .e-checkout__order_review-2 #payment {
  padding-left: 0 !important;
}

.AccordionItem.p-AccordionItem.p-AccordionItem--selected.AccordionItem--selected {
  border: none !important;
  width: 100% !important;
}


.p-PaymentElement .p-AccordionItem::before,
.p-PaymentElement .p-AccordionItem::after,
.p-PaymentElement .p-AccordionButton::before,
.p-PaymentElement .p-AccordionButton::after,
.p-PaymentElement .p-AccordionPanel::before,
.p-PaymentElement .p-AccordionPanel::after {
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
  content: none !important;
}


.woocommerce ul#shipping_method li input,
.woocommerce input[type="radio"] {
  accent-color: #000 !important;
}


.woocommerce ul#shipping_method li {
  display: flex !important;
  align-items: center !important;
}

.woocommerce ul#shipping_method li label {
  margin-top: 12px !important;
}



.elementor-widget-woocommerce-checkout-page form.checkout .e-checkout__column-start #customer_details .col-1 {
  margin-bottom: 0 !important;
}

.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name .wc-item-meta,
.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name dl.variation,
.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name p,
.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name .wc-item-meta p,
.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name .wc-item-meta:last-child,
.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name dl.variation:last-child,
.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name p:last-child {
  margin: 0 !important;
      margin-top: 6px !important;
    margin-bottom: 6px !important;
}

.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name .wc-item-meta li,
.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name dl.variation dt,
.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name dl.variation dd {
  margin: 0 !important;
}

.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name .caracal-checkout-customizations {
    margin-top: 8px;
}

.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name .caracal-checkout-customizations-heading {
    font-weight: 700;
    margin-bottom: 6px;
}

.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name .caracal-checkout-customization-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 4px;
}

.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name .caracal-checkout-customization-label {
    flex: 1 1 auto;
}

.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name .caracal-checkout-customization-price {
    flex: 0 0 auto;
    white-space: nowrap;
}

.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name .caracal-checkout-customization-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name .caracal-checkout-customization-total-label {
    margin-top: 8px;
}

.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name .caracal-checkout-customization-total-row--header {
    margin-top: 0;
    margin-bottom: 8px;
}

.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name .caracal-checkout-customization-total-row .caracal-checkout-customizations-heading {
    margin-bottom: 0;
}

.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name .caracal-checkout-customization-total-row .caracal-checkout-customizations-heading,
.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name .caracal-checkout-customization-total-row .caracal-checkout-customization-price {
    font-weight: 700;
}

.elementor-widget-woocommerce-checkout-page .woocommerce td.product-total .caracal-checkout-customization-subtotal {
    margin-top: 8px;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name .caracal-checkout-quantity-label {
        font-weight: 600;
}

.elementor-widget-woocommerce-checkout-page .woocommerce td.product-name .caracal-checkout-quantity-line {
        margin-top: 6px;
}

.elementor-widget-woocommerce-checkout-page form.checkout .p-PaymentAccordionButtonText,
.p-PaymentAccordionButtonText * {
  color: #000 !important;
}



.payment_box.payment_method_stripe .wc-stripe-upe-element.StripeElement,
.payment_box.payment_method_stripe #wc-stripe-upe-form {
  width: 100% !important;
}


.payment_box.payment_method_stripe,
.payment_box.payment_method_stripe #wc-stripe-upe-form,
.payment_box.payment_method_stripe .wc-stripe-upe-element,
.payment_box.payment_method_stripe .StripeElement {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.e-coupon-box .e-woocommerce-coupon-nudge.e-checkout-secondary-title {
  margin-top: 0 !important;
}



.single-product .single_variation_wrap .woocommerce-variation-availability,
.single-product .single_variation_wrap .woocommerce-variation-availability .stock,
.single-product .single_variation_wrap .stock.in-stock {
  display: none !important;
}




/*.woocommerce-checkout-review-order-table .woocommerce-shipping-totals .woocommerce-shipping-methods label {*/
/*  font-size: 0 !important;*/
/*}*/

.woocommerce-checkout-review-order-table .woocommerce-shipping-totals .woocommerce-shipping-methods label .woocommerce-Price-amount,
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals .woocommerce-shipping-methods label .woocommerce-Price-amount *,
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals .woocommerce-shipping-methods label .amount,
.woocommerce-checkout-review-order-table .woocommerce-shipping-totals .woocommerce-shipping-methods label .amount * {
  font-size: 14px !important;
  color: black !important;
}

/* Checkout AJAX loader: replace WooCommerce's opaque white overlay. */
.woocommerce-checkout .blockUI.blockOverlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  background: rgba(255, 255, 255, 0.28) !important;
  opacity: 1 !important;
  cursor: wait !important;
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

.woocommerce-checkout .blockUI.blockOverlay::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 42px !important;
  height: 42px !important;
  margin: -21px 0 0 -21px !important;
  border: 4px solid rgba(0, 0, 0, 0.18) !important;
  border-top-color: #000 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: caracal-checkout-spin 0.75s linear infinite !important;
}

@keyframes caracal-checkout-spin {
  to {
    transform: rotate(360deg);
  }
}