@import "./font/DM_Mono/stylesheet.css";
@import "./font/DM_SansSyne/stylesheet.css";
@import "./font/DM_Serif_Display/stylesheet.css";
@import "./font/SF_Mono/style.css";
@import url("./font/IBM_Plex_Sans_Arabic/stylesheet.css");

/* html {
  font-size: 10px;
} */

body{
  font-family: 'DM Sans 18pt', 'fontello', monospace;;
}

h1 {
  font-family: DM Serif Display;
}
.vita--num {
  font-family: DM Mono, 'fontello';
}
/* links */
a:hover {
  text-decoration: none;
  transition: all 0.5s ease-in-out;
}
.vita--breadcrumb{
    
font-family: 'DM Sans 18pt';
}
/* for Body */
.body-b1{
  font-size: 72px;
  font-style: normal;
  font-weight: 400;
  line-height: 80px; /* 111.111% */
  letter-spacing: -0.72px;
}
.body-b2{
  font-size: 56px;
  font-style: normal;
  font-weight: 400;
  line-height: 72px; /* 128.571% */
  letter-spacing: -0.56px;
}
.body-b3{
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 64px; /* 133.333% */
  letter-spacing: -0.4px;
}
.body-b4{
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 48px; /* 120% */
  letter-spacing: -0.32px;
}
.body-b5{
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 48px; /* 150% */
  letter-spacing: -0.24px;
}
.body-b6{
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 133.333% */
  letter-spacing: -0.16px;
}
.body-b7{
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
letter-spacing: -0.08px;
}
.body-b8{
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 133.333% */
  letter-spacing: -0.04px;
}
.body-b9{
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}
.body-b10{
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  letter-spacing: 0.08px;
}
.body-b11{
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
  letter-spacing: 0.04px;
}
/* gap */
.gap-1 {
    gap: 1rem
}
.gap-2 {
    gap: 2rem
}
.gap-3 {
    gap: 3rem
}
.gap-4 {
    gap: 4rem
}
.gap-5 {
    gap: 5rem
}
.gap-6 {
    gap: 6rem
}
.gap-7 {
    gap: 7rem
}
.gap-8 {
    gap: 8rem
}
.gap-9 {
    gap: 9rem
}
.gap-10 {
    gap: 10rem
}
.gap-11 {
    gap: 11rem
}
.gap-12 {
    gap: 12rem
}
.gap-13 {
    gap: 13rem
}
.gap-14 {
    gap: 14rem
}
header{
 padding: 30px 90px;
}
 .btn-list, .btn-grid{
     display: flex;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    justify-content: center;
    align-items: center;
 }
 .btn-list.active, .btn-grid.active{
     border: 0.5px solid var(--black-opacities-quinary, rgba(20, 20, 20, 0.17));
     background: var(--gradient-test, radial-gradient(89.15% 141.42% at 100% 0%, rgba(20, 20, 20, 0.00) 50%, rgba(20, 20, 20, 0.04) 100%));
 }
/* pop up style */
#popupContainer ,#popupCart{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.popup-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}
.close-button {
  display: inline-flex;
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  cursor: pointer;
}
.header .region_lang{
  display: flex;
  align-items: center;
  width: 100%;
  background: #03283E;
}

/* label */
.vita--label {
    width: 5.3rem;
    border-radius: 3.2rem;
    text-align: center;
    padding: 0.5rem 0;
}

/* inputs */
input.form-control {
  border: none;
  background: transparent;
  text-align: center;
}
.input-group-prepend{
    color: var(--navy-opacities-primary, rgba(5, 66, 104, 0.83));
    font-family: 'DM Sans 18pt';
    text-align: left;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 35px;
    border: 0.5px solid var(--black-opacities-quinary, rgba(20, 20, 20, 0.17));
    background: var(--gradientx-transparent, linear-gradient(to bottom right, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) bottom right / 50% 50% no-repeat, linear-gradient(to bottom left, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) bottom left / 50% 50% no-repeat, linear-gradient(to top left, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) top left / 50% 50% no-repeat, linear-gradient(to top right, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) top right / 50% 50% no-repeat);
    height: 60px !important;
    padding: 16px;
}
.input-group-prepend span{
    display:inline-flex;
}
/* upload--file */
.upload--file--wrapper {
  border: 1px solid rgba(20, 20, 20, 0.04);
  position: relative;

}
.main-title {
    position:relative;
}
.main-title a{
    position: absolute;
    left: 0;
    top: 0;
    display:inline-flex;
    justify-content:Center;
    align-items:Center;
}
.quick--order--page .upload--file{
    width:50rem;
    margin:0 auto;
}
.upload--file input {
  width: 90%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
input:focus, .form-control:focus {
  border-color: transparent !important;
  box-shadow: none !important;
}
/* buttons */
button {
  background: transparent;
  border: none;
  width: 100%;
  padding: 0.8rem;
  color: #fff;
}

.btn-product{
  border: 1px solid #054268;
}
.btn-secondary{
  width: 232px;
  height: 48px;
  padding: 12px 8px 12px 24px;
}

.border-black {
  border: 0.5px solid  rgba(20, 20, 20, 0.17);
}

.owl-carousel .owl-item img {
  width: auto;
}

.flex-direction-column {
  flex-direction: column;
}
.page-title{ 
  font-family: DM Serif Display; 
  background: var(--gradientx-black, radial-gradient(174.86% 141.42% at 100% 0%, #141414 0.03%, #A1A1A1 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pages-padding-top,
.pages-padding-bottom{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.print-order {
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.print-order span{
    margin-right:10px;
}
.form-group label{
  display: flex;
  height: 38px;
  padding: 5px 10px 0px 0px;
  align-items: center;
  gap: 8px;
  color: var(--black-500, #141414);
  font-family: 'DM Sans';
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 142.857% */
  letter-spacing: 0.08px;
  margin: 0;
}
.form-group select{
    -webkit-appearance: none;
}
.form-group input,
.form-group select{
  color: var(--navy-opacities-primary, rgba(5, 66, 104, 0.83));
  font-family: 'DM Sans';
  text-align: left;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 35px;
  border: 0.5px solid var(--black-opacities-quinary, rgba(20, 20, 20, 0.17));
  background: var(--gradientx-transparent, linear-gradient(to bottom right, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) bottom right / 50% 50% no-repeat, linear-gradient(to bottom left, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) bottom left / 50% 50% no-repeat, linear-gradient(to top left, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) top left / 50% 50% no-repeat, linear-gradient(to top right, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) top right / 50% 50% no-repeat);
  height: 60px !important;
  padding: 16px;
}
input.form-control{
    color: var(--navy-opacities-primary, rgba(5, 66, 104, 0.83));
  font-family: 'DM Sans 18pt';
  text-align: left;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 35px;
}
.form-group textarea{
  border: 0.5px solid var(--black-opacities-quinary, rgba(20, 20, 20, 0.17));
  background: var(--gradientx-transparent, linear-gradient(to bottom right, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) bottom right / 50% 50% no-repeat, linear-gradient(to bottom left, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) bottom left / 50% 50% no-repeat, linear-gradient(to top left, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) top left / 50% 50% no-repeat, linear-gradient(to top right, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) top right / 50% 50% no-repeat);
  display: flex;
  padding: 16px 16px 16px 13px;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  align-self: stretch;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  color: var(--navy-opacities-primary, rgba(5, 66, 104, 0.83));
  width:100%;
}
.form-group {
  padding: 0 !important;
  margin-bottom: 0rem;
}
.form-row .form-group:nth-child(2) {
  padding-left: 1rem !important;
}
.form-group input::placeholder,.form-group select::placeholder,input::placeholder{
  color: var(--navy-opacities-primary, rgba(5, 66, 104, 0.83));
  font-size: 16px;
  font-weight: 500;
}
.titlepage{
  font-family: DM Sans;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3rem; /* 120% */
  letter-spacing: -0.02rem;
  background: var(--gradient-primary, radial-gradient(174.86% 141.42% at 100.00% -0.00%, #054268 0.03%, #8DC6E8 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contactus .btn-secondary{
  color: var(--white-absolute, #FFF);
  text-shadow: -1px 1px 4px rgba(0, 0, 0, 0.32);
  font-family: 'DM Sans 18pt';
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5rem; /* 150% */
  justify-content:center; 
  text-decoration:none;
  display: flex;
  padding: 1rem 2rem;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
  background:  radial-gradient(174.86% 141.42% at 100.00% -0.00%, #054268 0.03%, #8DC6E8 100%);
  width: 100%;
  margin-top: 3rem;
}

.modal-xl {
  max-width: calc(100% - 1.5rem);
}

@media (min-width: 768px) {
  .modal-xl {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .modal-xl {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1080px;
  }
}

/* nav-tabs */
.nav-tabs {
  border: 0;
  border-bottom: 4px solid rgba(20, 20, 20, 0.04);
}

.nav-tabs .nav-item .nav-link:hover ,.nav-tabs .nav-link:hover {
  transition: all 0.5s ease-in-out;
}
.nav-tabs .nav-item .nav-link , .nav-tabs .nav-link {
  font-family: 'DM Sans 18pt';
  border: 0;
  border-bottom: 4px solid transparent;
  color:#054268;
}
.nav-tabs .nav-item .nav-link:hover , .nav-tabs .nav-link:hover {
  border: 0;
  border-bottom: 4px solid var(--navy-500, #054268);
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  border: 0;
  border-bottom: 4px solid var(--navy-500, #054268);
}


/* checkbox */
.form-check-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.form-check-label{
  position: relative;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: -1px;
  left: -31px;
  height: 1.25rem;
  width: 1.25rem;
  background-color: #fff;
  border: 2px solid #000;
}

/* When the checkbox is checked, add a blue background */
input:checked ~ .checkmark {
  border: none;
  background: var(--gradientx-lightblue, radial-gradient(174.86% 141.42% at 100.00% -0.00%, #8DC6E8 0.03%, #D1E8F6 100%));}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
input:checked ~ .checkmark:after {
  display: block;
}
/* Style the checkmark/indicator */
.checkmark:after {
  left: 9px;
  top: 5px;
  width: 7px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.product-set-details-page .product-set-item{
  border: 0.5px solid var(--black-opacities-quinary, rgba(20, 20, 20, 0.17));
  height:90%;
}
.product-sets-page button {
  width: 20%;
  border: none;
}

.quick--order--page .item {
  border: 1px solid var(--black-opacities-quaternary, rgba(20, 20, 20, 0.33));
  min-height: 13rem;
}

.quick--order--page .item a {
  color: #8DC6E8;
}

@media (min-width:864px) and (max-width:1024px){
    
  .form-group input, .form-group select { 
    height: 40px !important;
    padding: 7px;
  }
  .product-sets-page button {
    width: auto;
  }
    .product-sets-page.product-set-details-page button {
    width: auto;
  }
  .form-group input::placeholder,.form-group select::placeholder{
    font-size: 13px;
  }
  .contactus .btn-secondary{
    margin-top: 1rem;
  }
  .form-row .form-group:nth-child(2) {
   /* padding-left: 0 !important;*/
  }
  .modal-content .form-row .form-group:nth-child(2),
  .edit-branch .form-row .form-group:nth-child(2),
  .Organization  .form-row .form-group:nth-child(2){ 
    padding-left: 20px !important;
  }
  .updated_order{
    flex-wrap:wrap;
    justify-content:center;
}
  } 
  @media (max-width: 864px){
      .quick--order--page .upload--file {
    width: 100%;
      }
    .d-flex.price-flex {
    flex-wrap: wrap;
    }
}
  @media (max-width: 767px){
      .product-set-details-page .product-name .price {
   
    justify-content: flex-start !important;   
}
      .quick--order--page .upload--file {
    width: 100%;
      }
       .main-title a { 
    top: -25px;
    }
         .d-flex.price-flex {
    flex-wrap: wrap;
    }
    .vita--quantity span img{
        width:25px;
    }
    .product-options .form-check {
    max-width: 45%;
}
  .form-row .form-group:nth-child(2) {
    padding-left: 0rem !important;
  }
  .vita--quantity  span{
    width:15%;
}
.vita--quantity input {
    width:70%;
}
   .form-group input, .form-group select{
        padding:10px;
    }
  .product-sets-page button {
    width: 100%;
  }
  .single-order .reorder .btn-reord {
    width: 80%;
  }
  .region .modal-content {
    width: 100%;
    padding: 1rem;
  }
  .titlepage {
    font-size: 2rem;
  }
  .form-group input, .form-group select{
    height: 45px !important;
  }
}
.table_out::-webkit-scrollbar {
  width: 0px;
}

/*New Styles*/
.main-title .footer-box-link a{
    position: relative;
}
/* #street_2{display:none;} */
.product-item .product-discount{min-height:1.4rem;}

.product--content .green-500, .product-item .positive-text, #block-shipping{display:none;}

.register-modal-lg .modal-content,
.register-modal .modal-content {
  width: 100%;
  margin: 0 auto;
}
.alert.stock{padding:0 !important;}
.alert.stock a{
  padding:0 !important;
  font-size: 1.4rem;
  font-weight: bold;
}

/* Hide STC Pay and Mada on all desktop devices (min-width: 1024px) */
@media (min-width: 1024px) {
  /* Hide STC Pay */
  .payment-method:has(input[value="HyperPay_stc"]) {
      display: none !important;
  }

  /* Hide Mada */
  .payment-method:has(input[value="HyperPay_Mada"]) {
    /* display: none !important; */
  }
}

/* Show Apple Pay only on macOS Safari */
@media (min-width: 1024px) {
  /* Check for WebKit-based browsers (Safari) */
  @supports (-webkit-appearance: none) {
      /* Show Apple Pay on Safari */
      .payment-method:has(input[value="HyperPay_ApplePay"]) {
          display: block !important;
      }
  }

  /* Hide Apple Pay on non-Safari browsers */
  .payment-method:has(input[value="HyperPay_ApplePay"]) {
      display: none !important;
  }
}
.form-address-edit .field.street .field .label{position: initial !important;width:100%;overflow: visible !important;}
.title.heading-h6 {
  font-family: 'DM Sans';
}

.add-to-cart-btn .tocart{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1rem 2rem !important;
  gap: 10px;
}

.add-to-cart-btn .tocart span{
  text-align: left;
  flex: 1;
}
.products-grid .product-item .add-to-cart-btn{width:100%}
.products-grid .product-item .btn-secondary{padding:0;}
.catalog-product-view .add-to-cart-btn .tocart span{margin: 0; flex:none;}
.header .content {display:none}
.minicart-items-wrapper {
    max-height: 320px;
    overflow-y: auto;
}
.block-minicart {
    max-height: calc(100vh - 120px);
}

.minicart-vita .product-item-name{
  font-size:small;
}
.minicart-vita .update-cart-item{
  background-color:#0B486C;
  width:80px;
}
.minicart-vita .item.product.product-item {
    width: auto !important;
}
#btn-minicart-close{
  left:0;
}
#product-updatecart-button{
  width:-webkit-fill-available;
}

/* ==========================================================
   Mobile Header Layout — Responsive
   Breakpoint: ≤ 767px
   Structure: [☰ Trigger] | [LOGO – centered] | [🛒 Minicart]

   Technique: CSS Grid with 3 columns (1fr | auto | 1fr).
   The trigger is now a SEPARATE sibling element (mobile-trigger-container),
   so logo centering and trigger positioning are fully independent.

   RTL-ready: In stylesheet-ar.css override grid-column assignments.
   ========================================================== */

/* ── Desktop: hide the mobile trigger container ── */
.header .bottom .mobile-trigger-container {
    display: none;
}

@media (max-width: 767px) {

    /* ── 1. Container → 3-column grid ──
       Col 1 (1fr) : trigger  — left
       Col 2 (auto): logo     — truly centered (equal 1fr on both sides)
       Col 3 (1fr) : minicart — right                                    */
    .header .bottom .container.dis-flex {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        padding: 8px 16px;
        width: 100%;
        box-sizing: border-box;
        min-height: 56px;
    }

    /* ── 2. Hide desktop-only columns ── */
    .header .bottom .col-lg-5.col-md-5.d-sm-block.d-none {
        display: none !important;
    }

    /* ── 3. Trigger → col 1, far left ──
       RTL: override with grid-column:3; justify-self:end; */
    .header .bottom .mobile-trigger-container {
        display: flex;
        grid-column: 1;
        align-items: center;
        justify-self: start;
    }

    /* ── 4. Logo → col 2, truly centered ── */
    .header .bottom .logo.col-lg-2 {
        grid-column: 2;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        float: none !important;
        padding: 0;
    }

    /* ── 5. Minicart → col 3, far right ──
       RTL: override with grid-column:1; justify-self:start; */
    .header .bottom .minicart-vita {
        grid-column: 3;
        display: flex !important;
        align-items: center;
        justify-self: end;
    }

    /* Override Magento _minicart.less margin-top:10px on mobile */
    .header .bottom .minicart-vita .minicart-wrapper {
        margin-top: 0;
    }

    /* ── 6. Fix image sizes — override Magento resets (max-width:100%; height:auto) ──
       Without explicit dimensions, images shrink to fit their small auto-sized containers. */

    /* Logo image: keep its original 80×40 from the phtml attributes */
    .header .bottom .logo a.vita-store-logo img {
        width: 60px !important;
        height: 40px !important;
        max-width: none !important;
    }

    /* Trigger icon (Frame.svg): explicit size */
    .header .bottom .mobile-trigger-container .menu-trigger img {
        width: 32px !important;
        height: 32px !important;
        max-width: none !important;
    }

}
/* ── End Mobile Header Layout ── */

/* ==========================================================
   Product Card Image — Consistent Height Fix
   Breakpoint: ≤ 767px

   Problem: *product-list.css overrides .product-item .image
   with height:auto on mobile, causing height mismatch between
   cards with real product images vs placeholder images.

   Fix: restore the desktop fixed height (11rem) on mobile too,
   and use object-fit:contain so every image (any size/ratio)
   fits proportionally inside the same-height container.
   ========================================================== */
@media (max-width: 767px) {

    /* Restore fixed height — overrides product-list.css height:auto */
    .product-item .image {
        height: 11rem !important;
        overflow: hidden;
    }

    /* Scale image to fit container proportionally — no crop, no stretch */
    .product-item .image img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: center;
    }

}
/* ── End Product Card Image Fix ── */

/* ==========================================================
   Category Page: 2 products per row on mobile
   Breakpoint: ≤ 575px  (Bootstrap xs — where col-12 = 100%)

   Root cause of overflow: product.css sets
       .product-item { width: 264px !important; }
   which overflows a 50% column (~210px). We override to 100%.

   Layout model:
   [page padding 8px][col 5px][card][col 5px][gap 8px][col 5px][card][col 5px][page padding 8px]
   ========================================================== */
@media (max-width: 575px) {

    /* ── 1. Row: remove Bootstrap negative margins, add outer spacing ── */
    .products-grid.row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* ── 2. Each column → 50% with small gutter ── */
    .products-grid .col-md-6.col-sm-4.col-lg-4.col-xl-4.col-12 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        box-sizing: border-box;
    }

    /* ── 3. Product item: override fixed 264px → fluid 100% ──
       product.css:111 sets width:264px !important — we override here */
    .products-grid .product-item {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
        box-sizing: border-box;
    }

    /* ── 4. Product name: 2-line clamp ── */
    .products-grid .product-name .name {
        font-size: 0.72rem !important;
        line-height: 1.3rem !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ── 5. Price area: prevent overflow ── */
    .products-grid .product-item .price-box {
        max-width: 100%;
        overflow: hidden;
    }
    .products-grid .product-item .price-box .price {
        font-size: 0.95rem !important;
    }

    /* ── 6. Old (strikethrough) price: hide on very small cards ──
       Saves space and prevents horizontal overflow */
    .products-grid .product-item .old-price {
        display: none !important;
    }

    /* ── 7. Base Price row: smaller ── */
    .products-grid .product-item .product-discount {
        font-size: 0.62rem !important;
        line-height: 1.2 !important;
    }

    /* ── 8. Fix: .content has padding-left:10px (stylesheet.css:3168) which shifts
       ALL children right — including the cart button.
       Solution: remove padding from .content, apply it only to text children.
       The cart button (last child) gets no padding → naturally full width. ── */
    .products-grid .product-item .content {
        padding-left: 0 !important;
    }
    /* Re-apply left breathing room to text elements only */
    .products-grid .product-item .content .product-name,
    .products-grid .product-item .content .price,
    .products-grid .product-item .content .product-discount {
        padding-left: 8px;
    }

    /* ── 9. Cart button wrapper: full width, no overflow ── */
    .products-grid .product-item .cart.btn-product {
        width: 100% !important;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        align-self: stretch !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 0 8px 8px; /* match card's border-radius at bottom corners */
    }

    /* ── 9. Form inside cart button: full width ── */
    .products-grid .product-item .cart.btn-product form {
        width: 100% !important;
        overflow: hidden;
    }

    /* ── 10. Add-to-cart flex container: no gap overflow ── */
    .products-grid .product-item .add-to-cart-container {
        width: 100%;
        gap: 2px !important;
        overflow: hidden;
        justify-content: center;
    }

    /* ── 11. Add-to-cart button: full width, compact text ── */
    .products-grid .product-item .add-to-cart-btn {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
    .products-grid .product-item .add-to-cart-btn button {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        justify-content: center;
        padding: 0 4px !important;
    }
    .products-grid .product-item .add-to-cart-btn .primary-text.add {
        font-size: 0.65rem !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Cart icon inside button */
    .products-grid .product-item .add-to-cart-btn .icon img {
        width: 16px !important;
        height: 16px !important;
    }

}
/* ── End Category 2-column Grid ── */

/* ==========================================================
   Product Card — Subtle Shadow & Hover Effect
   Applies on ALL screen sizes (mobile + desktop) for consistency.

   Two-layer shadow technique:
     Layer 1: close, sharp, low-opacity  → defines the edge
     Layer 2: wide, soft, very low-opacity → gives depth/lift

   Performance: box-shadow is GPU-composited — zero layout cost.
   Transition only fires on hover, never on scroll.
   ========================================================== */

.products-grid .product-item {
    border-radius: 8px;
    box-shadow:
        0 1px 4px  rgba(0, 0, 0, 0.07),   /* close edge shadow */
        0 2px 12px rgba(0, 0, 0, 0.05);   /* wide ambient shadow */
    transition: box-shadow 0.25s ease;
}

.products-grid .product-item:hover {
    box-shadow:
        0 2px 8px  rgba(0, 0, 0, 0.10),
        0 6px 20px rgba(0, 0, 0, 0.08);
}
/* ── End Product Card Shadow ── */

/* Shop By filter panel padding — mobile only (panel is fixed overlay on ≤767px) */
@media (max-width: 767px) {
    #narrow-by-list.filter-options {
        padding: 15px;
    }
}