/* ============== ZERO-WHITE “OUTLINE TINT” ==============
   Scope: only inside .product-donation-area (your snippet)
   Goal: no white/black fills anywhere, soft tinted outlines,
         always-readable text, 30px bottom space.
   Variants: add .tint-mint / .tint-coral / .tint-azure to .product-donation-area
   ====================================================== */

.product-donation-area{
  /* Base (Lilac/Aqua) — change by using a variant class below */
  --accent:#7c4dff;          /* main tint */
  --accent-2:#00d4ff;        /* secondary tint for gradients */
  --ink:#1f2740;             /* readable text (not black) */
  --muted:#6c7aa6;           /* helper text */
  --tint:rgba(124,77,255,.12);        /* base surface tint (not transparent) */
  --tint-strong:rgba(124,77,255,.18); /* focus surface tint */

  margin-bottom:30px !important; /* requested global spacing for this block */
}

/* Kill any forced white coming from the platform (replace with tint) */
.product-donation-area *[style*="background:#fff"],
.product-donation-area *[style*="background: #fff"],
.product-donation-area *[style*="background-color:#fff"],
.product-donation-area *[style*="background-color: #fff"],
.product-donation-area *[style*="rgb(255, 255, 255)"],
.product-donation-area *[style*="#ffffff"]{
  background-color:var(--tint) !important;
}
.product-donation-area *[style*="color:#fff"],
.product-donation-area *[style*="color: #fff"]{
  color:var(--ink) !important;
}

/* Labels */
.product-donation-area .s-product-options-option-label b{color:var(--ink)!important;}
.product-donation-area .s-product-options-option-label small{color:var(--muted)!important;}

/* Inputs (no white bg ever; tinted, outlined) */
.product-donation-area input.s-form-control,
.product-donation-area textarea.s-form-control,
.product-donation-area select.s-form-control{
  background-color:var(--tint) !important;       /* faint tint instead of white */
  color:var(--ink) !important;
  border-radius:14px !important;
  border:1.5px solid rgba(124,77,255,.45) !important;
  box-shadow:0 0 0 0 rgba(0,0,0,0) !important;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.product-donation-area input.s-form-control::placeholder,
.product-donation-area textarea.s-form-control::placeholder{
  color:rgba(124,77,255,.75) !important; /* tinted placeholder (not white/black) */
  opacity:1;
}
/* Focus */
.product-donation-area input.s-form-control:focus,
.product-donation-area textarea.s-form-control:focus,
.product-donation-area select.s-form-control:focus{
  outline:none!important;
  background-color:var(--tint-strong) !important;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 4px rgba(124,77,255,.18) !important;
}
/* Autofill (remove white autofill paint) */
.product-donation-area input.s-form-control:-webkit-autofill{
  -webkit-text-fill-color:var(--ink)!important;
  -webkit-box-shadow:0 0 0 999px var(--tint) inset !important;
}

/* Multiple-options grid => “chips” (outlined pills, tinted when checked) */
.product-donation-area .s-product-options-grid-mode{ gap:.5rem; }
.product-donation-area .s-product-options-grid-mode label{
  position:relative; display:inline-block;
}
.product-donation-area .s-product-options-grid-mode label input{
  position:absolute; inset:0; opacity:0; pointer-events:none;
}
.product-donation-area .s-product-options-grid-mode .s-product-options-grid-mode-span{
  background-color:var(--tint) !important;  /* subtle tint, never white */
  color:var(--ink); border-radius:999px; padding:.5rem .85rem;
  border:1.5px dashed rgba(124,77,255,.55);
  transition:transform .15s ease, border-color .2s ease, background-color .2s ease;
}
.product-donation-area .s-product-options-grid-mode label:hover .s-product-options-grid-mode-span{
  transform:translateY(-1px); border-color:var(--accent);
}
.product-donation-area .s-product-options-grid-mode label:focus-within .s-product-options-grid-mode-span{
  box-shadow:0 0 0 4px rgba(124,77,255,.18);
}
.product-donation-area .s-product-options-grid-mode label input:checked + .s-product-options-grid-mode-span{
  background-image:linear-gradient(90deg, rgba(124,77,255,.18), rgba(0,212,255,.18)) !important;
  border-style:solid; border-color:var(--accent);
}

/* ====== OPTIONAL COLOR VARIANTS (pick ONE on .product-donation-area) ====== */
/* Mint */
.product-donation-area.tint-mint{
  --accent:#00c4a7; --accent-2:#52e5c9;
  --ink:#1b2e2b; --muted:#557a74;
  --tint:rgba(0,196,167,.12); --tint-strong:rgba(0,196,167,.18);
}
/* Coral */
.product-donation-area.tint-coral{
  --accent:#ff6b6b; --accent-2:#ff9f6e;
  --ink:#3b2222; --muted:#8b5b58;
  --tint:rgba(255,107,107,.12); --tint-strong:rgba(255,107,107,.18);
}
/* Azure */
.product-donation-area.tint-azure{
  --accent:#4aa8ff; --accent-2:#7d7cff;
  --ink:#19243a; --muted:#5a6e96;
  --tint:rgba(74,168,255,.12); --tint-strong:rgba(74,168,255,.18);
}






  



























































































/* Move Common Questions section up */
#common_questions-8 {
  margin-top: -25px !important;
}


/* Move Testimonials section up */
section.s-block.speed-testimonials{
  margin-top: -25px !important;
}





/* Remove spacing between category items */
.grid.grid-cols-\[var\(--data-num-mob\)\].lg\:grid-cols-\[var\(--data-num\)\] {
  gap: 0 !important;
}

/* Remove gaps in the grid */
.grid.grid-cols-\[var\(--data-num-mob\)\].lg\:grid-cols-\[var\(--data-num\)\] {
  gap: 0 !important;
}

/* Force each item to fully fill its column */
.grid.grid-cols-\[var\(--data-num-mob\)\].lg\:grid-cols-\[var\(--data-num\)\] .itme-categories {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Make the link + image stretch too */
.itme-cat-entry,
.itme-categories-image,
.itme-categories-image > div {
  width: 100% !important;
  height: 100% !important;
}



/* ================================
   Testimonial Heading Styling
================================ */
.flex.items-center.flex-col.gap-3.relative h2 {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 800;
  text-align: center;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #4B1D96, #35B5B8, #0EA5A6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
  animation: fadeInDown 1s ease-out forwards;
}

/* Decorative lines with animation */
.flex.items-center.flex-col.gap-3.relative > div::before,
.flex.items-center.flex-col.gap-3.relative > div::after {
  content: '';
  position: absolute;
  top: 50%;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, #4B1D96, #35B5B8, #0EA5A6);
  transform: translateY(-50%);
  animation: expandLine 1.2s ease forwards;
}

.flex.items-center.flex-col.gap-3.relative > div::before {
  right: 55%;
  animation-delay: .3s;
}

.flex.items-center.flex-col.gap-3.relative > div::after {
  left: 55%;
  animation-delay: .3s;
}

/* Middle dot pulse */
.flex.items-center.flex-col.gap-3.relative .w-8.h-8 span {
  animation: pulseDot 2s infinite ease-in-out;
  border-color: #35B5B8 !important;
}

/* ================================
   Animations
================================ */
@keyframes fadeInDown {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes expandLine {
  from { width: 0; opacity: 0; }
  to { width: 60%; opacity: 1; }
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: .6; }
}










/* Hide product buttons (wishlist, etc.) globally */
.product_buttons {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}





/* =========================
   Product Filter — Glass Style
========================= */

#product-filter,
select.form-input.proudct-sorting {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 13rem !important;       /* !w-52 */
  padding: 0.6rem 2.5rem 0.6rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: right;             /* RTL first */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

/* Hover & focus */
#product-filter:hover,
#product-filter:focus {
  border-color: #35B5B8;
  background: rgba(53, 181, 184, 0.15);
  box-shadow: 0 0 12px rgba(53,181,184,0.4);
  outline: none;
}

/* Options */
#product-filter option {
  color: #222;
  font-weight: 500;
  background: #fff;
}

/* Custom arrow */
#product-filter {
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: left 0.75rem center;
  background-size: 1rem;
}

/* LTR support */
html[dir="ltr"] #product-filter {
  text-align: left;
  background-position: right 0.75rem center;
}
















/* ==============================
   Titles (Elfaleh / Saji style)
============================== */

.elfaleh_titles {
  position: relative;
  text-align: center;
  margin: 1.5rem 0; /* my-6 */
}

@media (min-width: 768px) {
  .elfaleh_titles {
    margin: 2.5rem 0; /* md:my-10 */
  }
}

/* Decorative gradient bar above the title */
.elfaleh_titles::before {
  content: "";
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: 5rem;
  height: 4px;
  border-radius: 9999px;
  background: linear-gradient(
    90deg,
    #4B1D96,
    #35B5B8,
    #0EA5A6
  );
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.saji_titles {
  margin-bottom: 1rem; /* mb-4 */
}

.saji_titles h1 {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .5px;
  background: linear-gradient(
    90deg,
    #4B1D96,
    #35B5B8,
    #0EA5A6
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,.08);
}

@media (min-width: 768px) {
  .saji_titles h1 {
    font-size: 2rem;
  }
}




/* 
=====================================================
   0) TOKENS & UTILITIES
   - 2 brand colors only
   - No fills anywhere; we use gradient rings + chips/buttons
===================================================== */
:root{
  --brand-1: #483088;                     /* purple */
  --brand-2: #00a98f;                     /* teal   */
  --grad: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  --r: 14px;                              /* main radius */
  --r-sm: 10px;                           /* small radius */
  --ink: #ffffff;                         /* white text */
}

/* WHITE TEXT on key surfaces we’re styling */
body.product-single,
.container.page-container,
nav.breadcrumbs,
.page-header .breadcrumbs,
.s-products-list-wrapper,
custom-salla-product-card,
.product-block{
  color: var(--ink) !important;
}

/* Gradient ring (border only, no fill) */
._ring-grad{
  border: 1px solid transparent !important;
  border-radius: var(--r) !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
}

/* Small radius ring */
._ring-grad-sm{ border-radius: var(--r-sm) !important; }

/* Filled gradient CHIPS & BUTTONS (for emphasis) */
._chip-grad{
  display:inline-flex; align-items:center; gap:.42rem;
  padding:.38rem .72rem; border-radius:999px;
  color:#fff !important; background: var(--grad) !important; border:0 !important;
  white-space:nowrap;
}
._btn-grad{
  border-radius: var(--r) !important; color:#fff !important;
  background: var(--grad) !important; border: 1px solid transparent !important;
  transition: transform .15s ease, filter .15s ease;
  background-size: 200% 200%;
}
._btn-grad:hover{ transform: translateY(-1px); filter: saturate(1.06); }

/* Hairline gradient divider (no fill blocks) */
._hr-grad{ height:2px; border:0; background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); border-radius:2px; }

/* Accessible focus without fills */
:focus-visible{
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-2) 55%, transparent);
  border-radius: .6rem;
}


/* Links hover: subtle underline with teal */
a:hover{ text-decoration: underline; text-decoration-color: var(--brand-2); text-underline-offset: 2px; }

/* =====================================================
   1) HEADER (GLOBAL)
   - Keep your approved look; just ensure stickiness + colors
===================================================== */
#header{
  position: sticky; top: 0; z-index: 1000;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2)) !important;
  color:#fff !important; border:0 !important; border-radius:0 !important;
}
#header .header-components,
#header .header_menu{ background: transparent !important; }
#header, #header a, #header .icon, #header .sicon{ color:#fff !important; fill:#fff !important; }
#header .main-menu > li{ position:relative; }
#header .main-menu > li:hover::after{ content:""; position:absolute; inset-inline:0; bottom:0; height:3px; background:#fff; }

/* Keep same look when framework adds sticky class */
.is-sticky #header{
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2)) !important;
}

/* =====================================================
   2) BREADCRUMBS (GLOBAL)
   - Transparent bar with gradient hairline only
===================================================== */
nav.breadcrumbs,
.page-header .breadcrumbs{
  background: transparent !important; border: none !important;
  padding: .9rem 1.25rem !important; text-align: center; position: relative;
}
nav.breadcrumbs::after,
.page-header .breadcrumbs::after{
  content:""; position:absolute; inset-inline: clamp(12px,4vw,24px); bottom:0;
  height:2px; border-radius:2px; background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
}
nav.breadcrumbs ol,
.page-header .breadcrumbs ol{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.5rem .75rem;
}
nav.breadcrumbs a, nav.breadcrumbs strong,
.page-header .breadcrumbs a, .page-header .breadcrumbs strong{ color:#fff !important; font-weight:600; }
nav.breadcrumbs i, .page-header .breadcrumbs i{ color:#fff !important; opacity:.9; }

/* =====================================================
   3) CATEGORY (SECTION)
   - Category pills/filters use chips, no panel fills
===================================================== */
.category-header,
.filters-bar,
.s-category-tags,
.s-filters{
  background: transparent !important; border: none !important;
}
.s-category-tags a,
.s-filters .tag,
.s-filters .chip{
  /* generic tags on category pages become gradient chips */
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.32rem .62rem; border-radius:999px;
  color:#fff !important; background: var(--grad) !important; border:0 !important;
}

/* =====================================================
   4) PRODUCT GRID (LISTING)
   - Transparent cards with gradient rings + white text
===================================================== */
.s-products-list-wrapper{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px !important;
}
@media (max-width: 420px){
  .s-products-list-wrapper{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px !important; }
}

/* Works for Salla’s default block and custom element */
.s-products-list-wrapper .product-block,
.s-products-list-wrapper custom-salla-product-card.product-entry{
  /* no fill panels */
  background: transparent !important;
  border-radius: var(--r) !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
  color:#fff !important;
  overflow: hidden;
}

/* Ensure inner wraps don’t inject fills */
custom-salla-product-card .content-wrap,
.s-products-list-wrapper .product-block .content{ /* generic */
  background: transparent !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
}

/* Grid typography */
.s-products-list-wrapper .product-entry__title,
.s-products-list-wrapper .text-info,
.s-products-list-wrapper .price-wrapper,
.s-products-list-wrapper strong,
.s-products-list-wrapper .sicon-sar{
  color:#fff !important;
}

/* Grid buttons = filled gradient */
.s-products-list-wrapper .s-button-element{
  border-radius:12px !important; color:#fff !important;
  background: var(--grad) !important; border: 1px solid transparent !important;
}

























/* =====================================================
   5) PRODUCT PAGE (SINGLE)
   - No fills; frames & blocks get gradient ring
   - Chips for price/status; buttons are filled gradient
===================================================== */

/* Kill any white sections/panels and replace with ring */
body.product-single .bg-white,
body.product-single .shadow-sm,
#single-product-form > div > .p-4.bg-white,
#single-product-form .product-options-static > .flex.border.bg-white,
body.product-single .my-4.relative.shadow-sm,
body.product-single .s-comments-item-inner .s-comments-flex-1{
  @supports (background: paint(worklet)){
    /* nothing special; just feature gate to avoid surprises */
  }
  background: transparent !important;
  color:#fff !important;
  border: 1px solid transparent !important;
  border-radius: var(--r) !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
}

/* Title & text */
body.product-single h1,
body.product-single h2,
body.product-single h3,
body.product-single .total-price-single{ color:#fff !important; }
body.product-single p,
body.product-single label,
body.product-single li,
body.product-single small,
body.product-single .s-comments-item-timestamp{ color:#fff !important; opacity:.92; }

/* Gallery/media frames */
body.product-single .product-gallery,
body.product-single .product-media,
body.product-single .swiper,
body.product-single .swiper-container{
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--r) !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
}
body.product-single .product-gallery img,
body.product-single .product-media img{ background: transparent !important; }

/* Thumbnails */
body.product-single .product-thumbs .swiper-slide{
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-sm) !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
}
body.product-single .product-thumbs .swiper-slide-thumb-active{
  outline: 2px solid var(--brand-2) !important;
}

/* Price + badges → chips */
body.product-single .price-wrapper,
body.product-single .total-price-single,
body.product-single .s-product-status,
body.product-single .s-product-card-brand,
body.product-single .s-product-card-category{
  background: var(--grad) !important; color:#fff !important;
  border: 0 !important; border-radius: 999px;
  padding: .42rem .72rem;
}

/* Quantity */
#single-product-form .s-quantity-input-container{
  background: transparent !important; border-radius: var(--r) !important; overflow:hidden;
  border: 1px solid transparent !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
}
#single-product-form .s-quantity-input-button{ background: transparent !important; color:#fff !important; }
#single-product-form .s-quantity-input-input{ background: transparent !important; color:#fff !important; font-weight:800; text-align:center; }

/* Options (chips/buttons) */
#single-product-form .product-option .s-option,
#single-product-form .product-option .s-option-item{
  background: transparent !important; color:#fff !important;
  border: 1px solid transparent !important; border-radius: var(--r-sm) !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
  transition: transform .15s ease;
}
#single-product-form .product-option .s-option:hover{ transform: translateY(-1px); }
#single-product-form .product-option .s-option.is-active{
  outline: 2px solid var(--brand-2) !important; color:#fff !important;
}

/* Primary CTA */
body.product-single .s-button-element.s-button-primary.s-button-solid{
  background: var(--grad) !important; color:#fff !important;
  border: 1px solid transparent !important; border-radius: var(--r) !important;
}
body.product-single .s-button-element.s-button-primary.s-button-solid:hover{
  transform: translateY(-1px); filter: saturate(1.06);
}

/* Tabs/Accordion */
body.product-single .tabs,
body.product-single .s-tabs,
body.product-single .accordion,
body.product-single .tab-content{
  background: transparent !important; border: 1px solid transparent !important; border-radius: var(--r) !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
}
body.product-single .s-tabs .tab{ color:#fff !important; opacity:.9; }
body.product-single .s-tabs .tab.is-active{ color:#fff !important; outline:2px solid var(--brand-2) !important; }









/* =====================================================
   6) CART (PAGE)
   - Items & summary: transparent with gradient rings
   - Value chips & CTAs use filled gradient
===================================================== */

/* Keep container transparent */
body.cart-page .container.page-container,
.container.page-container{ background: transparent !important; }

/* Item card */
.page-container .cart-item{
  background: transparent !important; color:#fff !important;
  border: 1px solid transparent !important; border-radius: var(--r) !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
}

/* Item thumbnail */
.page-container .cart-item img{
  background: transparent !important; border-radius: 10px !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
}

/* Titles & value chips */
.page-container .cart-item h3 a{ color:#fff !important; font-weight:700; }
.page-container .cart-item .item-price,
.page-container .cart-item .item-total{
  background: var(--grad) !important; color:#fff !important;
  border: 0 !important; border-radius: 999px; padding: .32rem .62rem;
}

/* Quantity */
.page-container .s-quantity-input-container{
  background: transparent !important; border-radius: 12px !important; overflow:hidden;
  border: 1px solid transparent !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
}
.page-container .s-quantity-input-button{ background: transparent !important; color:#fff !important; }
.page-container .s-quantity-input-input{ background: transparent !important; color:#fff !important; font-weight:800; }

/* Remove button with gradient outline */
.page-container .btn--delete .s-button-element{
  background: transparent !important; color:#ff6b6b !important; border-radius: 10px !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    linear-gradient(135deg, #ff6b6b, #c0392b) border-box !important;
}

/* Sidebar summary (right column) */
.page-container .w-full.lg\\:w-96 .bg-white.border{
  background: transparent !important; color:#fff !important;
  border: 1px solid transparent !important; border-radius: var(--r) !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
}
.page-container .w-full.lg\\:w-96 h4{ color:#fff !important; }
.page-container .w-full.lg\\:w-96 .text-gray-500,
.page-container .w-full.lg\\:w-96 .text-gray-400{ color:#fff !important; opacity:.9; }


/* Checkout button */
.page-container .w-full.lg\\:w-96 .s-button-element.s-button-primary.s-button-solid{
  background: var(--grad) !important; color:#fff !important;
  border: 1px solid transparent !important; border-radius: var(--r) !important;
}
.page-container .w-full.lg\\:w-96 .s-button-element.s-button-primary.s-button-solid:hover{
  transform: translateY(-1px); filter: saturate(1.06);
}

/* Widgets (if visible) */
#free-shipping, #cart-gifting{
  background: transparent !important; color:#fff !important;
  border: 1px solid transparent !important; border-radius: var(--r) !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
}
#free-shipping .bg-primary{ background: var(--brand-2) !important; }

/* 



/* Installment widget: force purple text/icons only */
.installment-wrap,
.installment-wrap *,
.installment-wrap a,
.installment-wrap i,
.installment-wrap svg,
.installment-wrap [class*="styles__"],
.installment-wrap [id*="Promo"]{
  color: #483088 !important;
  fill:  #483088 !important;   /* for SVG icons */
  stroke:#483088 !important;   /* for outlined SVGs */
}




/* CART — Checkout button (brand gradient, rounded, white) */
.cart-submit-wrap .s-button-element.s-button-solid.s-button-primary{
  /* local brand vars so it works anywhere */
  --c1: #483088;           /* purple */
  --c2: #00a98f;           /* teal   */
  --grad: linear-gradient(135deg, var(--c1), var(--c2));
  --r: 14px;

  position: relative;
  overflow: hidden;
  background: var(--grad) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: var(--r) !important;
  min-height: 46px;
  padding-inline: 1.1rem;
  line-height: 1;
  background-size: 200% 200%;
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
  box-shadow: 0 12px 28px rgba(0,169,143,.28);
}
.cart-submit-wrap .s-button-element.s-button-solid.s-button-primary:hover{
  transform: translateY(-1px);
  filter: saturate(1.06);
  box-shadow: 0 16px 34px rgba(0,169,143,.34);
}
.cart-submit-wrap .s-button-element.s-button-solid.s-button-primary:active{
  transform: translateY(0) scale(.99);
}
.cart-submit-wrap .s-button-element.s-button-solid.s-button-primary:focus-visible{
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(0,169,143,.55), 0 12px 28px rgba(0,169,143,.28);
}

/* optional: subtle diagonal sheen */
@media (prefers-reduced-motion: no-preference){
  .cart-submit-wrap .s-button-element.s-button-solid.s-button-primary::before{
    content:"";
    position:absolute; inset:-150% -20% auto -20%;
    height:300%; transform: rotate(15deg);
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.18), rgba(255,255,255,0));
    animation: checkoutSheen 3.6s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes checkoutSheen{
    0%{ transform: translateX(-60%) rotate(15deg) }
    60%{ transform: translateX(60%)  rotate(15deg) }
    100%{ transform: translateX(60%)  rotate(15deg) }
  }
}

/* disabled state (if theme adds it) */
.cart-submit-wrap .s-button-element.s-button-primary[disabled],
.cart-submit-wrap .s-button-element.s-button-primary.is-disabled{
  cursor: not-allowed; opacity: .65; filter: grayscale(.06);
}

/* keep text/spinner white if present */
.cart-submit-wrap .s-button-text{ color:#fff !important; }
.cart-submit-wrap .s-button-loader{ border-color:#fff #fff transparent transparent !important; }




/* ================================
   CART — Right Sidebar (no white bg)
   Brand: #483088 / #00a98f
================================== */
:root{
  --brand-1: #483088;
  --brand-2: #00a98f;
  --grad: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  --r: 14px;
  --ink: #fff;
}

/* Scope: the sticky right column in your snippet */
.container.page-container .sticky.top-24[class*="lg:w-96"] > .bg-white.border{
  /* remove white card */
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid transparent !important;
  border-radius: var(--r) !important;
  /* gradient ring */
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
  box-shadow: none !important;
}

/* Headings + labels */
.container.page-container .sticky.top-24[class*="lg:w-96"] h4{ 
  color: var(--ink) !important; font-weight: 800;
}
.container.page-container .sticky.top-24[class*="lg:w-96"] .text-gray-500,
.container.page-container .sticky.top-24[class*="lg:w-96"] .text-gray-400{
  color: var(--ink) !important; opacity: .9;
}

/* Numbers as subtle brand chips */
.container.page-container .sticky.top-24[class*="lg:w-96"] > .bg-white.border b{
  display:inline-flex; align-items:center; gap:.35rem;
  padding: .28rem .6rem; border-radius: 999px;
  background: var(--grad) !important; color:#fff !important; border:0 !important;
}

/* Checkout button — brand gradient */
.container.page-container .sticky.top-24[class*="lg:w-96"] .cart-submit-wrap .s-button-element{
  --c1: var(--brand-1); --c2: var(--brand-2);
  background: linear-gradient(135deg, var(--c1), var(--c2)) !important;
  color:#fff !important; border:1px solid transparent !important;
  border-radius: var(--r) !important; min-height: 46px;
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
  box-shadow: 0 12px 28px rgba(0,169,143,.28);
}
.container.page-container .sticky.top-24[class*="lg:w-96"] .cart-submit-wrap .s-button-element:hover{
  transform: translateY(-1px); filter: saturate(1.06);
  box-shadow: 0 16px 34px rgba(0,169,143,.34);
}

/* ===== Free Shipping widget (no white bg) ===== */
#free-shipping{
  background: transparent !important; color: var(--ink) !important;
  border: 1px solid transparent !important; border-radius: var(--r) !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
}

/* Icon pill with gradient ring */
#free-shipping .rounded-icon{
  background: transparent !important; color:#fff !important;
  border: 1px solid transparent !important; border-radius: 999px !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
  display:inline-flex; align-items:center; justify-content:center;
  width: 38px; height: 38px;
}

/* Progress track + fill */
#free-shipping-bar{
  background: rgba(255,255,255,.14) !important; border-radius: 999px !important;
  border: 1px solid transparent !important;
}
#free-shipping-bar > div{
  background: var(--grad) !important; border-radius: 999px !important;
}
#free-shipping-bar i{ color:#fff !important; }

/* ===== Gifting widget (no white bg) ===== */
#cart-gifting{
  background: transparent !important; color: var(--ink) !important;
  border: 1px solid transparent !important; border-radius: var(--r) !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
  box-shadow: none !important;
}

/* List tile frame */
#cart-gifting .s-list-tile-item{
  background: transparent !important; border-radius: var(--r) !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
  color:#fff !important;
}

/* Gifting action button → gradient */
#cart-gifting .s-gifting-widget-action .s-button-element{
  background: var(--grad) !important; color:#fff !important;
  border-radius: var(--r) !important; border:1px solid transparent !important;
}

/* Keep any icon/text inside widgets white */
#free-shipping *, #cart-gifting *{ color:#fff !important; fill:#fff !important; }







=====================================================
   7) RESPONSIVE TWEAKS
===================================================== */
@media (max-width: 768px){
  :root{ --r: 12px; --r-sm: 8px; }
  nav.breadcrumbs::after, .page-header .breadcrumbs::after{
    inset-inline: 12px;
  }
}
/* =====================================================
   FOOTER — Dragon v2 (organized + creative strokes)
   Palette: #483088 (purple) / #00a98f (teal)
===================================================== */

/* =====================================================
   Dragon v2 — Sharp Edge Backgrounds + Creative Borders
   Reuses your tokens + motion from the footer
===================================================== */

/* 0) TOKENS */
:root{
  --brand-1: #483088;
  --brand-2: #00a98f;
  --ink: #ffffff;
  --ink-muted: rgba(255,255,255,.85);

  --r: 14px;
  --r-sm: 10px;

  --grad: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  --grad90: linear-gradient(90deg, var(--brand-1), var(--brand-2));

  /* wave (svg) solids */
  --footer-bg: #3a2a7c;
  --footer-bg-dark: #2b205f;
}

/* 1) MOTION — tiny, tasteful (disabled for reduced motion) */
@keyframes gradShiftX { 
  0%{ background-position: 0% 50% } 
  100%{ background-position: 200% 50% } 
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* 2) CONTAINER (deep brand gradient + soft radial glows) */
.store-footer{
  position: relative;
  color: var(--ink) !important;
  background:
    radial-gradient(900px 360px at 85% -15%, color-mix(in oklab, var(--brand-2) 28%, transparent), transparent 60%),
    radial-gradient(900px 360px at 0% 0%,   color-mix(in oklab, var(--brand-1) 28%, transparent), transparent 60%),
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand-1) 88%, black 12%),
      color-mix(in oklab, var(--brand-2) 88%, black 12%)
    );
  overflow: hidden;
}

/* 3) WAVE above footer (keep inked to footer body) */
section .rotate-180 svg,
section .rotate-180 path{ fill: var(--footer-bg) !important; }

/* 4) TYPOGRAPHY defaults — keep icons/logos neutral */
.store-footer :where(p, span, a, strong, small, h1, h2, h3, h4, h5, h6){
  color: var(--ink) !important;
}
.store-footer :where(svg, i){ 
  color: inherit !important;          /* no forced white on icons */
  fill:  inherit !important;
  stroke: inherit !important;
}

/* 5) FOOTER LOGO polish */
.footer-logo{
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)) brightness(1.04);
}

/* 6) CONTACT CHIPS — gradient ring with gentle animated stroke */
.user-contacts .links-contact{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  color: var(--ink) !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease, background-position .6s ease;
  background-size: 200% 200%, 200% 200%;
  animation: gradShiftX 12s linear infinite;           /* animated border */
}
.user-contacts .links-contact:hover{
  transform: translateY(-1px);
  filter: saturate(1.06);
  box-shadow: 0 10px 24px color-mix(in oklab, var(--brand-2) 26%, transparent);
}
/* keep icons natural inside chips */
.user-contacts .links-contact i{ color: inherit !important; }

/* 7) PAYMENT BADGES — clean white micro-cards (logos stay true) */
.payment-methods .itme-method{
  background-color: #fff !important;      /* white tile so logos are readable */
  background-size: contain !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  width: 56px !important; height: 40px !important;
  transition: transform .15s ease, box-shadow .2s ease;
}
.payment-methods .itme-method:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(0,0,0,.24);
}

/* 8) USER MENU LINKS — gradient outline pills (icons untouched) */
.footer-user-menu .s-user-menu-inline li a{
  display: inline-flex; align-items: center; gap:.55rem;
  padding: .4rem .7rem;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ink) !important; text-decoration: none !important;
  background:
    linear-gradient(transparent,transparent) padding-box,
    var(--grad) border-box !important;
  transition: transform .15s ease, filter .15s ease, background-position .6s ease;
  background-size: 200% 200%, 200% 200%;
  animation: gradShiftX 16s linear infinite;
}
.footer-user-menu .s-user-menu-inline li a:hover{ transform: translateY(-1px); filter: saturate(1.06); }
/* icon colors inherit (no force) */
.footer-user-menu .s-user-menu-inline li a i,
.footer-user-menu .s-user-menu-inline li a svg{ color: inherit !important; fill: inherit !important; }

/* 9) INTERNAL DIVIDER — animated gradient hairline */
.store-footer .after\:content-\[\'\'\]\:\:after{
  border-top: 0 !important;
  height: 2px; top: 0;
  background: var(--grad90);
  background-size: 200% 100%;
  animation: gradShiftX 10s linear infinite;
  opacity: .95;
}

/* 10) FOOTER BOTTOM — transparent with animated top stroke */
.footer-bottom{ background: transparent !important; position: relative; }
.footer-bottom::before{
  content:""; position:absolute; inset-inline:0; top:0; height:2px;
  background: var(--grad90);
  background-size: 200% 100%;
  animation: gradShiftX 12s linear infinite;
  opacity:.95;
}
.footer-bottom .made_perfection p{ color: var(--ink-muted) !important; }
.footer-bottom .made_perfection a{
  color: var(--ink) !important;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--brand-2);
}

/* 11) OPTIONAL: force-white-icons mode (opt-in)
   Add class 'footer--force-white-icons' to .store-footer to enable. */
.store-footer.footer--force-white-icons :where(svg, i){
  color:#fff !important; fill:#fff !important; stroke:#fff !important;
}

/* 12) RESPONSIVE */
@media (max-width: 768px){
  .store-footer{ padding-top: 1rem; }
  .payment-methods .itme-method{ width: 50px !important; height: 36px !important; }
}




/* Footer developer credit link */
.footer-dev-link{
  color: #00a98f !important;                 /* teal brand */
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}
.footer-dev-link:hover{ opacity:.9; }










/* ===== Dragon Footer v3 — Plush-rounded + textured (CSS-only) =====
   Drop this AFTER Tailwind and your old footer rules so it wins.
   - Bigger rounded top corners
   - New textured gradient background (no heavy images)
   - No forced white fills on SVG icons
*/

/* tiny gradient motion for accent lines */
@keyframes gradShiftX {
  0% { background-position: 0% 50% }
  100% { background-position: 200% 50% }
}

/* 1) SUPER ROUNDED TOP + SHADOW LIP */
footer.store-footer{
  --topR: clamp(28px, 7vw, 56px);
  border-top-left-radius: var(--topR) !important;
  border-top-right-radius: var(--topR) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  overflow: hidden !important;
  position: relative;
  isolation: isolate; /* keep pseudo-layers under content */
  box-shadow:
    0 -22px 44px rgba(0,0,0,.24) inset,       /* soft inner lip */
    0 -1px 0 rgba(255,255,255,.06) inset;     /* hairline shine */
}

/* animated brand line hugging the curve */
footer.store-footer::after{
  content:"";
  position:absolute; left:12px; right:12px; top:0;
  height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  background-size: 200% 100%;
  animation: gradShiftX 12s linear infinite;
  opacity:.95;
  z-index: 2;
}

/* 2) TEXTURED BACKGROUND (no images, layered gradients) */
footer.store-footer{
  /* base gradient + vignette glows */
  background:
    radial-gradient(1100px 520px at 100% -35%, color-mix(in oklab, var(--brand-2) 26%, transparent), transparent 60%),
    radial-gradient(1100px 520px at 0% -35%,   color-mix(in oklab, var(--brand-1) 26%, transparent), transparent 60%),
    linear-gradient(135deg,
      color-mix(in oklab, var(--brand-1) 86%, black 14%),
      color-mix(in oklab, var(--brand-2) 86%, black 14%)
    );
  /* soft hatch + speckle texture overlays */
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, rgba(0,0,0,.02) 2px 6px),
    radial-gradient(1px 1px at 18px 22px, rgba(255,255,255,.06) 1px, transparent 1.6px),
    radial-gradient(1px 1px at 82px 120px, rgba(0,0,0,.18) 1px, transparent 1.6px),
    radial-gradient(1000px 420px at 50% 120%, rgba(0,0,0,.25), transparent 65%);
  background-blend-mode: overlay, soft-light, soft-light, normal, normal;
  background-size:
    auto,
    140px 140px,
    180px 160px,
    auto;
}

/* put all inner content above textures */
footer.store-footer > *{ position: relative; z-index: 3; }

/* 3) DO NOT FORCE WHITE ICON FILLS (let them keep their native look) */
footer.store-footer :where(svg, i){
  color: inherit !important;
  fill: initial !important;     /* cancel any previous white fills */
  stroke: initial !important;   /* no forced stroke color */
  filter: none !important;
}

/* 4) CONTACT CHIPS — glassy ghost pills (different from v2) */
.user-contacts .links-contact{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.55rem .9rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,.02));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 8px 18px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.06) inset,
    0 -1px 0 rgba(0,0,0,.18) inset;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.user-contacts .links-contact:hover{
  transform: translateY(-2px);
  filter: saturate(1.05);
  box-shadow:
    0 14px 26px rgba(0,0,0,.32),
    0 1px 0 rgba(255,255,255,.12) inset,
    0 -1px 0 rgba(0,0,0,.22) inset;
}

/* 5) USER MENU LINKS — soft ghost buttons with accent ring on hover */
.footer-user-menu .s-user-menu-inline li a{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.45rem .85rem; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.15);
  background: linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.015));
  text-decoration: none !important;
  transition: box-shadow .2s ease, transform .15s ease, border-color .2s ease;
}
.footer-user-menu .s-user-menu-inline li a:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--brand-2) 60%, white 40%);
  box-shadow: 0 10px 22px rgba(0,0,0,.28), 0 0 0 2px color-mix(in oklab, var(--brand-2) 26%, transparent) inset;
}


/* 7) INTERNAL DASHED DIVIDER — softened to match rounding */
footer.store-footer [class*="after\\:content-\\[\\'\\'\\]"]::after{
  left: 14px !important; right: 14px !important; top: 0 !important;
  border-top-left-radius: 999px !important;
  border-top-right-radius: 999px !important;
  border-top-style: dotted !important;
  opacity: .35 !important;
}

/* 8) MOBILE TWEAKS */
@media (max-width: 768px){
  footer.store-footer{ --topR: 26px; }
  .user-contacts .links-contact{ padding:.5rem .8rem !important; }
  .payment-methods .itme-method{ width: 54px !important; height: 38px !important; }
}






/* === Payment badges — smaller, single-line on phone & desktop === */

/* Keep them on ONE line (wrap disabled) and center them */
.store-footer .payment-methods{
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  column-gap: 1px !important;
  row-gap: 0 !important;

  /* If a very small screen, allow subtle horizontal scroll (no scrollbar UI) */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.store-footer .payment-methods::-webkit-scrollbar{ display:none; }

/* Responsive, smaller tiles (overrides any inline height) */
.store-footer .payment-methods .itme-method{
  flex: 0 0 auto !important;
  width:  clamp(32px, 8vw, 48px) !important;
  height: clamp(22px, 5.2vw, 34px) !important;

  border-radius: 8px !important;
  padding: 1px !important;
  background-color: #fff !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 90% !important; /* logo fits a bit tighter */
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.16) !important;
  transition: transform .15s ease, box-shadow .2s ease;
}
.store-footer .payment-methods .itme-method:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(0,0,0,.24);
}

/* Optional: tighten side margins injected by utility classes */
.store-footer .payment-methods .itme-method.ltr\:ml-2,
.store-footer .payment-methods .itme-method.rtl\:ml-2{ margin-inline-start: 4px !important; }
















/* Make ONLY text inside this block white */
.product-donation-area label,
.product-donation-area b,
.product-donation-area small,
.product-donation-area strong,
.product-donation-area p,
.product-donation-area .s-product-options-grid-mode-span,
.product-donation-area .s-product-options-option-content,
.product-donation-area .s-product-options-option-label,
.product-donation-area .s-product-options-option-label *,
.product-donation-area .s-product-options-text *,
.product-donation-area .s-product-options-textarea * {
  color:#fff !important;
}

/* Form fields: typed text (no bg/border changes) */
.product-donation-area input.s-form-control,
.product-donation-area textarea.s-form-control,
.product-donation-area select.s-form-control {
  color:#fff !important;
  caret-color:#fff !important;
}

/* Placeholders (keep only the font white) */
.product-donation-area input.s-form-control::placeholder,
.product-donation-area textarea.s-form-control::placeholder {
  color:#fff !important;
  opacity:1;
}

/* Autofill text (Chrome/Safari) */
.product-donation-area input.s-form-control:-webkit-autofill {
  -webkit-text-fill-color:#fff !important;
}