@import url(https://fonts.googleapis.com/css2?family=Sora:wght@100;200;300;400;500;600;700;800&amp;display=swap);

:root {
 /* Font families */

  --font-heading: Sora, sans-serif;
  --font-body: Sora, sans-serif;

  /* Heading weights */
  --weight-h1: 800;
  --weight-h2: 700;
  --weight-h3: 600;
  --weight-h4: 500;

  /* Base radius scale */
  --radius-none: 0;
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* Component-level defaults */
  --radius-control: var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-modal: var(--radius-xl);

  --nav-link-color: #0B0B0B;
  --nav-link-hover-color: #0C0;
  --nav-link-active-color: #00C;

--card-header-font-size:20px;
--card-header-line-height:48px;

/* Featured Product Text */
--text: #181818;
--btn-text: #fff;
--btn-text-inv:#181818;
--bg: #ffffff;
}

/* User */
.content-wrapper            { background-color: transparent;  }

html body h1, html body h2, html body h3, html body h4, html body h5, html body h6{
  font-family: var(--font-heading) !important;
  letter-spacing: -0.02em; /* modern apparel look */
}

html body{
  font-family: var(--font-body) !important;
  color: #181818;
}

.font-heading {   font-family: var(--font-heading); }

h1 { font-weight: var(--weight-h1); }
h2 { font-weight: var(--weight-h2); }
h3 { font-weight: var(--weight-h3); }
h4 { font-weight: var(--weight-h4); }

/*Admin*/
.user-content-wrapper { background-color: transparent;  }
._css_adminheader { font-size:24px; font-weight:300; } 
._css_moduleToggleSwitch {    display: inline-flex; /* aligns checkbox and label vertically */  align-items: center; /* vertically centers input and label */   
       padding-top: 0px;    /* your desired top padding */
       padding-bottom: 2px; /* your desired bottom padding */
}
._css_moduleToggleSwitch label {  padding-left:2px;  padding-right:3px;  padding-top: 9px;   /* space between checkbox and label */ }
 ._css_storeToggle { top: -7px !important; position:relative !important;} 

 /* Admin: Vertical admin menu hyperlinks */
.leftbar-item { padding-left:15px;   } 
.leftbar-item-group { padding-left:15px;  }   
.leftbar-item-top { padding-left:15px; }

/*Login Buttons*/
._css_LoginButton, ._css_btnGoogle, ._css_btnFacebook  { border-radius: var(--radius-md,10px ) !important;}

/*All */
body {    font-size: 0.9rem;   /* Smaller base font */  }
.img-fluid {   margin: 0 auto; }
.rounded {border-radius: var(--radius-md ) !important ;}
.card{ border:none; padding:10px 10px 10px 10px; background:transparent; box-shadow:none;}
.card-title{ font-family: var(--font-heading);  font-weight: var(--weight-h4); font-size: var(--card-header-font-size); line-height: var(--card-header-line-height) ; }
.card-body { padding: 0rem 0rem 1.25rem 0rem; }
.card.a:link,.card.a:visited{text-decoration:none;}

/*Navbar Adjustments */
/*@media (min-width: 992px) {     .navbarbrandvisibility {  visibility: hidden;  width: 0px; height:0px; } } */ /*Not Visible when less than 992px */

.navbar-last-item { padding-right:0em !important;  }
.navbarbrandvisibility { padding-top:0px;}
.logo-h-inline{  display: inline-block; margin: 0; vertical-align: middle; font-weight:800;}

.navbar-nav .nav-link {  color: var(--nav-link-color) !important; }
.navbar-nav .nav-link:hover {  color: var(--nav-link-hover-color) !important; }
.navbar-toggler-icon{ display: inline-block;width: 1.5em;height: 1.5em;vertical-align: middle;content: &quot;&quot;;background: no-repeat center center;background-size: 100% 100%;color:#CC0000;}


/* For needed buttons to display  wide in mobile */
@media (max-width: 767px)   { .adjust100mobile { width:100%; }}

body:not(.sidebar-collapse) .nav-link {
  font-size: .85rem; !important
  padding-left: .5rem; !important
  padding-right: .5rem; !important
}

.hero {
  position: relative !important;
  overflow: hidden !important;
  min-height: 80vh !important; /* set as needed */
}

/* background video */
.hero__video{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
}

/* overlay */
.hero__overlay{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.35) !important; /* tweak 0.35–0.65 */
  z-index: 1 !important;
  pointer-events: none !important;
}

/* content above */
.hero__content{
  position: relative !important;
  z-index: 2 !important;
  color: #fff !important;
}

/* Featured Product Hero */
.featured_hero{
  margin: 0;
}

/* This is the key: it becomes the &quot;clipping mask&quot; with radius */
.featured_hero__media{
  position: relative;
  display: block;

  /* Responsive sizing: it will shrink with the img */
  width: 100%;

  border-radius: var(--radius-md);
  overflow: hidden;          /* prevents text/frame spilling outside the rounded image */
  isolation: isolate;        /* keeps z-index layering clean */
}

/* The CMS image itself */
.featured_hero__img{
  display: block;
  width: 100%;
  height: auto;              /* respects img-fluid sizing */
  border-radius: var(--radius-md); /* ensures the image corners are rounded too */
  transform: scale(1);
  transition: transform 900ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

/* Zoom on hover (only the image scales) */
.featured_hero__media:hover .featured_hero__img{
  transform: scale(1.06);
}

/* Soft vignette overlay (clipped by the media wrapper) */
/*.featured_hero__shade{
  position: absolute;
  inset: 0;
  background: radial-gradient(
    900px 520px at 20% 30%,
    rgba(0,0,0,0.06),
    rgba(0,0,0,0.62)
  );
  z-index: 1;
  pointer-events: none;
}*/

/* Content is absolutely positioned INSIDE the media box */
.featured_hero__content{
  position: absolute;
  inset: 0;
  z-index: 2;

  /* keep everything inside edges */
  padding: clamp(12px, 3.5vw, 26px);

  display: grid;
  align-items: end;          /* frame near bottom */
  justify-items: start;      /* left aligned */
}

/* Frame scales down and wraps instead of pushing outside */
.featured_hero__frame{
  max-width: min(520px, 100%);  /* never exceed the image width */
  box-sizing: border-box;

  padding: clamp(12px, 2.6vw, 22px);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--frame-bg-1), var(--frame-bg-2));
  border: 1px solid var(--frame-border);
  box-shadow: 0 18px 55px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}

.featured_hero__frame h4{
  margin: 0;
  font-size: clamp(1.1rem, 2.2vw, 1.8rem); /* sized to avoid overflow on smaller images */
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.featured_hero__frame p{
  margin: 10px 0 0;
  font-size: clamp(0.92rem, 1.3vw, 1.05rem);
  line-height: 1.45;
  opacity: 0.95;
}

@media (prefers-reduced-motion: reduce){
  .featured_hero__img,
  a.ftrbtn{
    transition: none;
  }
}

.featured_hero__content{
  color: var(--text) !important;
}

.featured_hero__content_top{
  position: absolute;
  inset: 0;
  z-index: 2;

  display: grid;
  align-content: start;                 /* top */
  justify-items: end;                   /* right */

  padding-top: clamp(14px, 3vw, 28px);
  padding-right: clamp(16px, 4vw, 36px);
  padding-left: clamp(12px, 3vw, 26px); /* optional: keeps it safe on narrow screens */
}

/* If you want the frame pinned top-left instead, switch align-items:
.featured_hero__content{ align-items: start; }
*/

/* Anchor button */
a.ftrbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;

  padding: 10px 14px;
  border-radius: 12px;
  background: var(--btn-bg);
  color: var(--btn-text);
  text-decoration: none;
  font-weight: 650;

  border: 1px solid var(--btn-text);
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
    width: fit-content;

   border-style: solid;
   border-width: 1px;
}

/* INVERT / FLIP */
a.ftrbtn:hover{
  background: var(--btn-text);  /* solid */
  /* color: transparent;            text disappears */
  border-color: var(--btn-text);
  color:var(--btn-text-inv);
}

a.ftrbtn:active{
  transform: translateY(0);
}


/* Category button */
a.catbtn{
  display: inline-flex;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-text-inv);
  text-decoration: none;
  border: 1px solid var(--btn-text-inv);
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
    width: fit-content;
   border-style: solid;
   border-width: 1px;
   align-items: center;
    justify-content: center;
}

/* INVERT / FLIP */
a.catbtn:hover{
  background: var(--btn-text-inv);  /* solid */
  /* color: transparent;            text disappears */
  border-color: var(--btn-text-inv);
  color: var(--btn-text);
}

a.catbtn:active{
  transform: translateY(0);
}

/* ECommerce - Product Display */
._css_productShortDescLabel {   font-weight: 600 !important; font-size: 2rem !important; }
._css_ProductType1CreatorTypeLabel { font-weight:300 !important;  }
._css_ProductType1CreatorName { font-weight:300  !important; }

._css_ProductType1ProvidedByLabel { font-weight:500  !important;  }
._css_ProductType1ProvidedBy { font-weight:300  !important; }
._css_productType1StockStatus { font-weight:300  !important}

._css_sellerProductCodeLabel { font-weight:500  !important;  }
._css_sellerProductCode { font-weight:300  !important; }

._css_productType1PriceLabel{ font-weight:500  !important; color: var(--btn-text-inv); }
._css_productType1Price {  font-size:16px; font-weight:300  !important; color: var(--btn-text-inv); }

/* Theme variables (yours are fine) */
._css_ProductOptionToggleGroup {
  --opt-border: #181818;
  --opt-bg: #ffffff;
  --opt-text: #181818;

  --opt-hover-bg: #181818;
  --opt-hover-border: #181818;
  --opt-hover-text: #ffffff;

  --opt-active-bg: linear-gradient(135deg, #2563eb, #38bdf8);
  --opt-active-border: #2563eb;
  --opt-active-text: #ffffff;

  --opt-active-hover-bg: linear-gradient(135deg, #1d4ed8, #0ea5e9);
}


/* Base (unselected) */
._css_ProductOptionToggleGroup ._css_ProductOptionToggleBtn {
  border: 1.5px solid var(--opt-border, rgba(0,0,0,0.25));
  background: var(--opt-bg, transparent);
  color: var(--opt-text, #222);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 120ms ease;
    font-weight: 300;
}


._css_ProductOptionToggleGroup ._css_ProductOptionToggleBtn:hover {
  background: var(--opt-hover-bg, rgba(0,123,255,0.08));
  border-color: var(--opt-hover-border, rgba(0,123,255,0.6));
  color: var(--opt-hover-text, #0d6efd);
}


/* Active (selected) */
._css_ProductOptionToggleGroup ._css_ProductOptionToggleBtn.active {
  background: var(--opt-active-bg, #0d6efd);
  border-color: var(--opt-active-border, #0d6efd);
  color: var(--opt-active-text, #fff);
  box-shadow: 0 0 0 3px rgba(13,110,253,0.25);
}

._css_ProductOptionToggleGroup ._css_ProductOptionToggleBtn.active:hover {
  background: var(--opt-active-hover-bg, #0b5ed7) !important;
  border-color: var(--opt-active-hover-border, #0b5ed7) !important;
  color: var(--opt-active-hover-text, #fff) !important;
}

/* Ensure inner text inherits */
._css_ProductOptionToggleBtn span {
  color: inherit;
}


/* Optional: hide the radio visually (keeps it accessible) */
._css_ProductOptionToggleGroup label._css_ProductOptionToggleBtn &gt; input[type=&quot;radio&quot;]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

._css_productImage {  border-radius: var(--radius-md); }

/* =========================================================
   SHARED BUTTON BEHAVIOUR (harmonised)
   ========================================================= */
._css_ProductBtnSubscribe,
._css_ProductBtnAddToCart,
._css_ProductBtnBuyNow {
  border: none;
  color: #ffffff;
  font-weight: 600;

  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);

  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    background 220ms ease;
}

._css_ProductBtnSubscribe:hover:not(:disabled),
._css_ProductBtnAddToCart:hover:not(:disabled),
._css_ProductBtnBuyNow:hover:not(:disabled) {
  transform: translateY(-1px);
}

._css_ProductBtnSubscribe:active:not(:disabled),
._css_ProductBtnAddToCart:active:not(:disabled),
._css_ProductBtnBuyNow:active:not(:disabled) {
  transform: translateY(0);
}

._css_ProductBtnSubscribe:disabled,
._css_ProductBtnAddToCart:disabled,
._css_ProductBtnBuyNow:disabled,
._css_ProductBtnSubscribe[disabled],
._css_ProductBtnAddToCart[disabled],
._css_ProductBtnBuyNow[disabled] {
  background: linear-gradient(135deg, #9ca3af, #d1d5db);
  color: #f8fafc;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.9;
}

/* =========================================================
   SUBSCRIBE – Confident / Long-term
   ========================================================= */
._css_ProductBtnSubscribe {
  background: linear-gradient(135deg, #2563eb, #38bdf8);
}

._css_ProductBtnSubscribe:hover:not(:disabled) {
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
}

._css_ProductBtnSubscribe:active:not(:disabled) {
  background: linear-gradient(135deg, #1e40af, #0284c7);
}

/* =========================================================
   ADD TO CART – Calm / Reassuring
   ========================================================= */
._css_ProductBtnAddToCart {
  background: linear-gradient(135deg, #047857, #34d399);
}

._css_ProductBtnAddToCart:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669, #6ee7b7);
}

._css_ProductBtnAddToCart:active:not(:disabled) {
  background: linear-gradient(135deg, #065f46, #10b981);
}

/* =========================================================
   BUY NOW – Energetic / Impulse
   ========================================================= */
._css_ProductBtnBuyNow {
  background: linear-gradient(135deg, #ff7a18, #ffb347);
}

._css_ProductBtnBuyNow:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff8c2a, #ffd08a);
}

._css_ProductBtnBuyNow:active:not(:disabled) {
  background: linear-gradient(135deg, #e5670a, #ff9f1c);
}

/* =========================================================
   CART CHECKOUT BUTTON – Trust / Conversion
   ========================================================= */
._css_CartDisplayCheckoutButton {
  background: linear-gradient(135deg, #1e40af, #0891b2);
  border: none;
  color: #ffffff;
  font-weight: 700;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  box-shadow:
    0 8px 20px rgba(30, 64, 175, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);

  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    background 220ms ease;
}

/* Lock icon – optical alignment tweak */
._css_CartDisplayCheckoutButton ._css_CheckoutLock {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: 1.05em;
  transform: translateY(-0.5px);
}

/* Text alignment */
._css_CartDisplayCheckoutButton ._css_CheckoutText {
  line-height: 1;
}

/* Hover */
._css_CartDisplayCheckoutButton:hover:not(:disabled) {
  background: linear-gradient(135deg, #1e3a8a, #0e7490);
  transform: translateY(-1px);

  box-shadow:
    0 12px 28px rgba(30, 58, 138, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Active / pressed */
._css_CartDisplayCheckoutButton:active:not(:disabled) {
  background: linear-gradient(135deg, #172554, #155e75);
  transform: translateY(0);

  box-shadow:
    0 5px 14px rgba(23, 37, 84, 0.4),
    inset 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Mobile emphasis – slightly larger, thumb-friendly */
@media (max-width: 576px) {
  ._css_CartDisplayCheckoutButton {
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 1.05rem;
    border-radius: 14px;
  }
}

/* Disabled (store closed) */
._css_CartDisplayCheckoutButton:disabled,
._css_CartDisplayCheckoutButton[disabled] {
  background: linear-gradient(135deg, #9ca3af, #d1d5db);
  color: #f8fafc;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.9;
  transform: none;
}

/* Hide lock when disabled */
._css_CartDisplayCheckoutButton:disabled ._css_CheckoutLock,
._css_CartDisplayCheckoutButton[disabled] ._css_CheckoutLock {
  display: none;
}


/*._css_productType1EstimatedDispatchLabel {} */
/* ._css_productType1EstimatedDispatch {} */
   .StockDisplay {font-size:14px !important; color:#00CC00 ;}
   ._css_CartDisplay_Header {font-size:24px; font-weight:300 !important;}
   ._css_CartDisplay_ItemName { color:var(--text); font-weight:600; }
   ._css_CartDisplay_IsFreeDelivery {font-size:14px; }
   ._css_CartDisplay_ItemAddons { padding-top:5px; } 
   ._css_CartDisplay_PriceName    { font-size: 14px;  }
   ._css_CartDisplay_Price                 {font-size: 14px; }
   ._css_CartDisplay_Discount { background: #00CC00; color:#FFFFFF }
    ._css_CartDisplay_ShippingHeader { font-size: 14px;  color:#333333 ;}
   ._css_CartDisplay_Shipping { font-size: 14px;  color:#333333 ; font-weight:500;  }
   ._css_CartDisplayAddOne {background: var(--bg); color: var(--text);}
   ._css_CartDisplayRemoveOne {background: var(--bg); color: var(--text)}
   ._css_CartDisplayTrash {background: var(--bg); color: var(--text) !important;}
   ._css_CartDisplay_ApplyVoucher { }
   . _css_CartDisplay_ResetVoucher { }
   ._css_CartDisplay_TotalItemsHeader { font-size: 14px;   color:#333333 ;  }
   ._css_CartDisplay_TotalItems { font-size: 14px;   color:#333333 ; }
   ._css_CartDisplay_SubStats { font-size: 14px;   color:#333333 ;}
   ._css_CartDisplay_SubStatsAmount {font-size: 14x;   color:#333333 ;}
   ._css_CartDisplay_SubStatsTotal {font-size: 14px; color:#333333 ; font-weight:500;}
   ._css_CartDisplay_SubStatsTotalAmount {font-size: 14px; color:#333333 ; font-weight:500; }
   ._css_CartDisplay_DispatchDateHeader { font-size: 14px;  color:#333333 ; }
   ._css_CartDisplay_DispatchDate {  font-size: 14px; color:#0000FF; font-weight:500; }
   ._css_CartDisplayCheckoutButton { border:0px; }
   ._css_CompleteButton {}
   ._css_CheckoutAgreement {}
   ._css_CartDisplay_DeliveryDiscountAmount {font-size: 14px;   color:#00CC00;}
   ._css_CartDisplay_VoucherDiscountAmount {font-size: 14px;   color:#00CC00;}



/* =========================================================
   COMPLETE PURCHASE – Final Step / Maximum Confidence
   ========================================================= */
._css_CompleteButton {
  background: linear-gradient(135deg, #0f172a, #1e40af);
  border: none;
  color: #ffffff;
  font-weight: 800;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);

  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    background 220ms ease;
}

/* Lock icon – optical alignment (if present) */
._css_CompleteButton ._css_CheckoutLock {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: 1.05em;
  transform: translateY(-0.5px);
}

/* Text alignment */
._css_CompleteButton ._css_CheckoutText {
  line-height: 1;
}

/* Hover – deliberate but reassuring */
._css_CompleteButton:hover:not(:disabled) {
  background: linear-gradient(135deg, #020617, #1d4ed8);
  transform: translateY(-1px);

  box-shadow:
    0 14px 34px rgba(2, 6, 23, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Active / pressed – commitment feedback */
._css_CompleteButton:active:not(:disabled) {
  background: linear-gradient(135deg, #020617, #1e3a8a);
  transform: translateY(0);

  box-shadow:
    0 6px 16px rgba(2, 6, 23, 0.5),
    inset 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Mobile emphasis – final CTA, thumb-friendly */
@media (max-width: 576px) {
  ._css_CompleteButton {
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 1.1rem;
    border-radius: 16px;
  }
}

/* Disabled – payment not ready / validation failed */
._css_CompleteButton:disabled,
._css_CompleteButton[disabled] {
  background: linear-gradient(135deg, #9ca3af, #d1d5db);
  color: #f8fafc;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.9;
  transform: none;
}

/* Hide lock when disabled (if lock is used) */
._css_CompleteButton:disabled ._css_CheckoutLock,
._css_CompleteButton[disabled] ._css_CheckoutLock {
  display: none;
}

/* =========================================================
   ADD TO CART – Category Page (Lowest Price / No Options)
   ========================================================= */
._css_productcategorybutton_lowestprice {
  background: linear-gradient(135deg, #047857, #34d399);
  border: none;
  color: #ffffff;
  font-weight: 700;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 14px;
  font-size: 0.95rem;
  line-height: 1;
  border-radius: 12px;

  box-shadow:
    0 6px 16px rgba(4, 120, 87, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);

  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    background 220ms ease;
}

/* Hover – inviting lift */
._css_productcategorybutton_lowestprice:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669, #6ee7b7);
  transform: translateY(-1px);

  box-shadow:
    0 10px 24px rgba(5, 150, 105, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Active / pressed */
._css_productcategorybutton_lowestprice:active:not(:disabled) {
  background: linear-gradient(135deg, #065f46, #10b981);
  transform: translateY(0);

  box-shadow:
    0 4px 12px rgba(6, 95, 70, 0.35),
    inset 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Disabled */
._css_productcategorybutton_lowestprice:disabled,
._css_productcategorybutton_lowestprice[disabled] {
  background: linear-gradient(135deg, #9ca3af, #d1d5db);
  color: #f8fafc;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.9;
}


/* =========================================================
   OPTIONS / ALL PRICES BUTTON – Secondary / Informational
   (Product category card)
   ========================================================= */
._css_productcategorybutton_allprices {
  background: linear-gradient(135deg, #f3f4f6, #ffffff);
  border: 1px solid rgba(0,0,0,0.15);
  color: #1f2937;
  font-weight: 600;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 8px 12px;
  font-size: 0.9rem;
  line-height: 1;
  border-radius: var(--radius-md);

  box-shadow: none;
 
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 120ms ease;
}

/* Hover – gentle emphasis */
._css_productcategorybutton_allprices:hover:not(:disabled) {
  background: linear-gradient(135deg, #e5e7eb, #f9fafb);
  border-color: #9ca3af;
  color: #111827;
  transform: translateY(-0.5px);
}

/* Active / pressed */
._css_productcategorybutton_allprices:active:not(:disabled) {
  background: linear-gradient(135deg, #e5e7eb, #e5e7eb);
  transform: translateY(0);
}

/* Disabled */
._css_productcategorybutton_allprices:disabled,
._css_productcategorybutton_allprices[disabled] {
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  color: #9ca3af;
  border-color: rgba(0,0,0,0.08);
  cursor: not-allowed;
  opacity: 0.85;
}


._css_CardDeliveryAddress{
  background-color: #ffffff;
  border: 1px solid rgba(0,0,0,0.125) !important;
  border-radius: var(--radius-lg);
  /* padding: 1rem; */
  /* box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); */
}
._css_CardDeliveryAddressBody { background-color: #ffffff; }

._css_CardDeliveryAddressItemHeader   {  font-size:10px !important; padding:0rem !important; background:transparent; } 
._css_CardDeliveryAddressItemBody {  font-size:12px !important;  padding-left: 2rem !important;background:transparent;} 

._css_CardBillingAddress{
  background-color: #ffffff;
  border: 1px solid rgba(0,0,0,0.125) !important;
  border-radius: var(--radius-lg);
}
._css_CardBillingAddressBody { background-color: #ffffff; }

._css_CardBillingAddressItemHeader   {  font-size:10px !important; padding:0rem !important; background:transparent; } 
._css_CardBillingAddressItemBody {  font-size:12px !important;  padding-left: 2rem !important;background:transparent;} 


._css_CardPayment{
  background-color: #ffffff;
  border: 1px solid rgba(0,0,0,0.125) !important;
  border-radius: var(--radius-lg);
}
._css_CardPaymentHeaderBody { background-color: #ffffff; }

._css_CardPaymentItemHeader   {  font-size:10px !important; padding:0rem !important; background:transparent; } 
._css_CardPaymentItemBody {  font-size:12px !important;  padding-left: 2rem !important;background:transparent;} 

/* =========================================================
   ADD ADDRESS – Compact / Secondary (Card Header)
   ========================================================= */
._css_btnCheckoutAddAddress {
  background: linear-gradient(135deg, #e5e7eb, #f9fafb);
  border: 1px solid rgba(0,0,0,0.15);
  color: #1f2937;
  font-weight: 600;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 6px 10px;
  font-size: 0.85rem;
  line-height: 1;
  border-radius: 8px;

  box-shadow: none;

  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 120ms ease;
}

/* Hover – gentle emphasis */
._css_btnCheckoutAddAddress:hover:not(:disabled) {
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  border-color: #60a5fa;
  color: #1d4ed8;
  transform: translateY(-0.5px);
}

/* Active / pressed */
._css_btnCheckoutAddAddress:active:not(:disabled) {
  background: linear-gradient(135deg, #bfdbfe, #dbeafe);
  transform: translateY(0);
}

/* Disabled */
._css_btnCheckoutAddAddress:disabled,
._css_btnCheckoutAddAddress[disabled] {
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  color: #9ca3af;
  border-color: rgba(0,0,0,0.08);
  cursor: not-allowed;
  opacity: 0.85;
}

._css_ProductCategoryImage { border-radius:var(--radius-lg); padding-bottom:1rem; }
._css_productCategoryItemName  { color: var(--text); font-weight:500; }
._css_productcategory_card { background-color: #ffffff; border: 1px solid rgba(0,0,0,0.125) !important; border-radius: var(--radius-lg);}
._css_productcategory_cardfooter { background:transparent; }

._css_productsearchdropdown { margin} 
/* Mobile tweaks */
@media (max-width: 576px) {   html {     font-size: 0.9rem;   } } 
@media (max-width: 576px) { ._css_productShortDescLabel {  font-size: 1.5rem !important;    } }

/* sm only */
@media (min-width: 576px) and (max-width: 767.98px) {   ._css_searchRow {     margin-left: -30px;     margin-right: -30px;   } }
._css_productsearchdropdown .dropdown-item:hover {   background-color: #f1f5f9 !important;   /* light neutral */   color: inherit; }

/* Ensure flex items are allowed to shrink (critical in flex rows) */
._css_productsearchdropdown .dropdown-item .flex-grow-1 {   min-width: 0; }

/* Short desc: 1 line */
._css_SearchBoxProductShortDesc{   display: -webkit-box;   -webkit-box-orient: vertical;   -webkit-line-clamp: 1;  overflow: hidden;   text-overflow: ellipsis; }

/* Medium desc: 2 lines */
._css_SearchBoxProductMediumDesc{ font-size:10px;   display: -webkit-box;   -webkit-box-orient: vertical;   -webkit-line-clamp: 2;   overflow: hidden; }

._css_SearchBoxPrice { display: none ; }