/* ============================================================
   AB FITNESS BOUTIQUE — LUXURY DARK/BEIGE THEME OVERRIDE
   For: Salla > Design > Customize > Additional CSS
   Style: Dark premium background, beige/champagne accents,
          minimal, feminine-not-girly, no bright colors.
   ============================================================
   HOW TO EDIT:
   - All colors are defined once as CSS variables in section 1.
     Change a value there and it updates everywhere.
   - Sections are labeled with banner comments below.
   - !important is used deliberately because Salla theme CSS
     loads after custom CSS in some contexts and has high
     specificity of its own.
   ============================================================ */


/* ============================================================
   1) VARIABLES — brand palette (edit values here only)
   ============================================================ */
:root{
  --ab-bg:            #232319;                 /* main dark background            */
  --ab-bg-soft:       #262620;                 /* slightly lifted dark surface     */
  --ab-card-bg:       #2b2b22;                 /* card / panel background          */
  --ab-card-bg-hover: #303027;                 /* card hover background            */
  --ab-beige:         #e8dcc0;                 /* light beige — titles/icons       */
  --ab-beige-bright:  #f2e9d3;                 /* brighter beige — prices/emphasis */
  --ab-beige-muted:   #c8b98d;                 /* muted beige — descriptions       */
  --ab-border:        rgba(232, 220, 192, 0.35);/* soft beige border               */
  --ab-border-strong: rgba(232, 220, 192, 0.6); /* stronger border on hover        */
  --ab-overlay:        rgba(232, 220, 192, 0.10);/* subtle hover fill              */
  --ab-overlay-strong: rgba(232, 220, 192, 0.16);
  --ab-shadow:        0 10px 30px rgba(0,0,0,0.35);
  --ab-shadow-hover:  0 16px 40px rgba(0,0,0,0.45);
  --ab-radius-lg:     18px;
  --ab-radius-md:     12px;
  --ab-radius-sm:     8px;
  --ab-space-xs:      6px;
  --ab-space-sm:      12px;
  --ab-space-md:      20px;
  --ab-space-lg:      32px;
  --ab-space-xl:      48px;

  /* Force-override Salla's own theme variables where the
     theme reads color from CSS custom properties instead of
     hardcoded values. Harmless if unused by your theme. */
  --color-primary: var(--ab-beige) !important;
  --main-color: var(--ab-beige) !important;
  --special-color: var(--ab-beige) !important;
  --btn-color: var(--ab-beige) !important;
  --icon-color: var(--ab-beige) !important;
  --border-color: var(--ab-border) !important;
}


/* ============================================================
   2) GLOBAL BACKGROUND & BASE TYPOGRAPHY
   ============================================================ */
html, body{
  background: var(--ab-bg) !important;
  color: var(--ab-beige-muted) !important;
}

/* Every generic wrapper / layout block Salla uses, forced dark.
   Broad net on purpose — catches theme-specific wrapper classes
   without needing their exact names. */
body,
main,
.page,
.content,
#app,
.s-layout,
.s-layout-content,
.s-layout-page,
.s-block,
.s-block-content,
.s-container,
.container,
.container-fluid,
section,
.section,
.wrapper,
.inner-wrapper,
[class*="wrapper"],
[class*="-layout"],
[class*="s-block"]{
  background-color: transparent !important;
}

/* Kill any lingering pure-white panels/sections/grids.
   Covers multiple ways a white inline style can be written
   (with/without space, hex/named/rgb) since pasted rich-text
   content (e.g. copied from Word) rarely uses just one format. */
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: #FFF"],
[style*="background-color:#FFF"],
[style*="background-color: #ffffff"],
[style*="background-color:#ffffff"],
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background-color: rgb(255"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background: white"],
[style*="background:white"],
.bg-white,
.white-bg{
  background-color: var(--ab-bg) !important;
  background: var(--ab-bg) !important;
}

/* Product/page descriptions are usually pasted rich text (from the
   dashboard editor, sometimes copied from Word/Docs) and can carry
   their own inline background-color on individual lines/spans —
   this is very likely why one line of a description shows a white
   highlight box while the rest doesn't. Rather than guessing every
   possible white color format, we strip ANY inline background found
   inside description/content text specifically. */
.description [style*="background"],
[class*="description"] [style*="background"],
[class*="content"] [style*="background"],
[class*="product-card"] [style*="background"]{
  background-color: transparent !important;
  background: transparent !important;
}

/* Typography hierarchy */
h1, h2, h3, h4, h5, h6,
.s-block-header-title,
.s-block-title,
.page-title,
.product-title,
[class*="title"]{
  color: var(--ab-beige) !important;
  font-weight: 600 !important;
  /* No letter-spacing here on purpose: Arabic letters must stay
     connected (cursive joining) — any positive tracking value
     breaks that and makes the text look disconnected/garbled. */
  letter-spacing: normal !important;
}

p, span, li, label,
.description,
.s-product-card-description,
[class*="description"],
[class*="subtitle"]{
  color: var(--ab-beige-muted) !important;
  line-height: 1.7;
}

a{
  color: var(--ab-beige) !important;
  text-decoration: none !important;
  transition: color .25s ease, opacity .25s ease;
}
a:hover{
  color: var(--ab-beige-bright) !important;
  opacity: .9;
}

/* Prices — brighter beige, slightly heavier weight for emphasis.
   We target the price element AND every descendant inside it
   (Salla often wraps the number in a <bdi> or extra <span> for
   number-direction handling, and those inner tags can carry their
   own color that overrides simple inheritance). */
.price, .price *,
.sale-price, .sale-price *,
.s-product-card-price, .s-product-card-price *,
.s-product-price, .s-product-price *,
[class*="price"], [class*="price"] *{
  color: var(--ab-beige-bright) !important;
  font-weight: 700 !important;
}
/* The Saudi Riyal currency symbol is usually an inline svg icon next
   to the number — it often ships with its own dark fill by default,
   so `color` alone won't recolor it. Force fill/stroke explicitly
   wherever it appears next to a price, not just in the header. */
.price svg, [class*="price"] svg,
[class*="currency"] svg, [class*="riyal"] svg, [class*="sar"] svg{
  fill: var(--ab-beige-bright) !important;
  stroke: var(--ab-beige-bright) !important;
}
/* Struck-through "old price" stays muted so the current price wins visually */
del, .old-price, [class*="price-before"]{
  color: var(--ab-beige-muted) !important;
  opacity: .7;
}


/* ============================================================
   3) HEADER
   ============================================================ */
salla-header,
.s-header,
.s-header-main,
.s-header-mobile,
.s-header-desktop,
header,
header.site-header,
.site-header{
  background: var(--ab-bg) !important;
  border-bottom: 1px solid var(--ab-border) !important;
  box-shadow: none !important;
}

/* Catch-all: force every bit of text/icon inside the header to beige,
   no matter what specific class Salla gives it (mini-cart total,
   currency previews, etc.). This is broad on purpose because the
   header total price kept rendering black under narrower selectors.
   Note: this is safely overridden where needed — e.g. the cart-count
   badge rule (section 6) is more specific and still forces dark text
   on its beige circle for contrast. */
header *,
salla-header *,
.s-header *,
[class*="header"] *{
  color: var(--ab-beige) !important;
}
header svg, salla-header svg, .s-header svg, [class*="header"] svg{
  fill: var(--ab-beige) !important;
  stroke: var(--ab-beige) !important;
}

/* Top utility row (currency / cart / account) and main nav row */
.s-header-top,
.s-header-bottom,
.s-header-icons,
.s-header-actions,
.s-header-menu,
.s-header-nav,
nav.s-header-links,
[class*="header"] nav{
  background: transparent !important;
  border-color: var(--ab-border) !important;
}

/* Nav / menu links */
.s-header-links a,
.s-header-menu a,
nav a,
[class*="header"] nav a{
  color: var(--ab-beige) !important;
}
.s-header-links a:hover,
.s-header-menu a:hover,
nav a:hover{
  color: var(--ab-beige-bright) !important;
}

/* Defensive override: any leftover teal/mint/green/blue banner
   sometimes injected by Salla's default UI (e.g. editor labels,
   default badges, "new" tags, or an empty header-menu placeholder
   shown before real menu items are added). Covers it whether it's
   nested inside the header OR sitting right after it as a sibling. */
[class*="header"] [class*="list"],
[class*="header"] [class*="menu-list"],
header + *,
salla-header + *,
.s-header + *,
.site-header + *,
.s-header-menu,
.header-menu,
.s-navigation,
.categories-menu,
.s-block-menu,
nav.menu,
.taxonomies,
.s-header-taxonomies-links,
[style*="background-color: #1abc9c"],
[style*="background: #1abc9c"],
[style*="background-color:#1abc9c"],
[style*="background:#1abc9c"],
[style*="background-color: rgb(26, 188, 156)"],
[style*="background-color: turquoise"]{
  background: var(--ab-bg) !important;
  color: var(--ab-beige) !important;
  border-color: var(--ab-border) !important;
}
header + * a,
salla-header + * a,
.s-header + * a,
.site-header + * a{
  color: var(--ab-beige) !important;
}

/* Logo container — the white square frame is almost always a CSS
   background on the logo's wrapper link/div (Salla adds this so
   logos stay visible on any header color) rather than baked into
   the image file, so we can safely override it here. */
.s-header-logo,
.s-logo,
a[class*="logo"],
div[class*="logo"],
[class*="header"] [class*="logo"]{
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--ab-border) !important;
  border-radius: var(--ab-radius-sm) !important;
}
[class*="logo"] img{
  background: transparent !important;
}


/* ============================================================
   4) SEARCH BAR
   ============================================================ */
salla-search-input,
.s-header-search,
.s-header-search-input,
.search-form,
.search-input,
form[class*="search"]{
  background: transparent !important;
}

salla-search-input input,
.s-header-search input,
.search-form input,
.search-input input,
input[type="search"],
input[name="search"],
form[class*="search"] input,
input.form-control{
  background: transparent !important;
  border: 1px solid var(--ab-border) !important;
  border-radius: 999px !important;
  color: var(--ab-beige) !important;
  padding: 10px 44px !important;
  box-shadow: none !important;
}
/* Placeholder text in beige-muted, not the default dark/gray */
salla-search-input input::placeholder,
.search-form input::placeholder,
.search-input input::placeholder,
input[type="search"]::placeholder,
input.form-control::placeholder{
  color: var(--ab-beige-muted) !important;
  opacity: .8 !important;
}
/* Focus state — soft beige glow instead of default blue outline */
input[type="search"]:focus,
input.form-control:focus,
.search-form input:focus{
  border-color: var(--ab-border-strong) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--ab-overlay) !important;
}
/* Search button / icon inside the field */
.search-form button,
.s-header-search button,
button[class*="search"]{
  background: transparent !important;
  color: var(--ab-beige) !important;
  border: none !important;
}


/* ============================================================
   5) ICONS (cart, wishlist, user, search, menu, socials)
   ============================================================ */
i[class*="sicon-"],
i[class*="icon-"],
.sicon{
  color: var(--ab-beige) !important;
}

/* CONTRAST FIX: icons that sit inside a solid beige circle (e.g. a
   "how it works" / process-steps section with icon-in-circle blocks)
   need a DARK icon color, not beige — otherwise the icon is beige on
   a beige circle and disappears completely. This is very likely why
   those step icons aren't showing. Broad guesses at common Salla
   builder class names for this kind of icon-box/feature block; if
   none of these match your exact markup, inspect one of the circles
   (right-click → "فحص العنصر" / Inspect) and send me the icon's
   actual class name for a guaranteed fix. */
[class*="icon-box"] i, [class*="icon-box"] svg,
[class*="icon-circle"] i, [class*="icon-circle"] svg,
[class*="feature-icon"] i, [class*="feature-icon"] svg,
[class*="step-icon"] i, [class*="step-icon"] svg,
[class*="process-icon"] i, [class*="process-icon"] svg,
[class*="s-block-icon"] i, [class*="s-block-icon"] svg{
  color: var(--ab-bg) !important;
  fill: var(--ab-bg) !important;
  stroke: var(--ab-bg) !important;
}

/* Scoped on purpose: only recolor svg icons that live inside clearly
   functional areas (header, cart, wishlist, search, user, buttons).
   Recoloring every svg site-wide risks breaking multi-part icons,
   illustrations, or the logo that rely on their own fill values. */
[class*="header"] svg,
[class*="cart"] svg,
[class*="wishlist"] svg,
[class*="favorite"] svg,
[class*="search"] svg,
[class*="user"] svg,
[class*="account"] svg,
.btn svg,
a.btn svg{
  fill: var(--ab-beige) !important;
  stroke: var(--ab-beige) !important;
}
/* Some Salla svg icons use currentColor on the wrapper rather than fill */
.s-header-icon-a,
.s-header-icon,
[class*="header"] [class*="icon"]{
  color: var(--ab-beige) !important;
}

/* Icon buttons (cart / wishlist / account) get a soft round frame
   to match the "beige-outlined" premium look from your reference */
.s-header-icon-a,
a.s-header-icon,
button.s-header-icon,
[class*="header-icon"]{
  border: 1px solid var(--ab-border) !important;
  border-radius: 50% !important;
  width: 40px;
  height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, border-color .25s ease;
}
.s-header-icon-a:hover,
a.s-header-icon:hover,
button.s-header-icon:hover{
  background: var(--ab-overlay) !important;
  border-color: var(--ab-border-strong) !important;
}

/* User avatar — kill the default white square canvas behind the
   placeholder icon (Salla's default "no photo" avatar container),
   and clip everything to a circle so no white corners peek out. */
.s-header-user,
a[class*="account"],
div[class*="account"],
[class*="header"] [class*="user"],
[class*="header"] [class*="avatar"],
[class*="header"] [class*="profile"]{
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}
.s-header-user img,
[class*="account"] img,
[class*="user"] img,
[class*="avatar"] img,
[class*="profile"] img{
  background: transparent !important;
  border: 1px solid var(--ab-border) !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}


/* ============================================================
   6) CART COUNT BADGE
   ============================================================ */
.cart-count,
.s-header-cart-count,
[class*="cart"] [class*="count"],
[class*="badge"]{
  background: var(--ab-beige) !important;
  color: var(--ab-bg) !important;               /* dark text on beige badge */
  border: none !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
  min-width: 18px;
  height: 18px;
  font-size: 11px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}


/* ============================================================
   7) BUTTONS
   ============================================================ */
/* IMPORTANT: we deliberately do NOT select the bare <button> tag or a
   generic "icon" class fragment here. Salla pages contain many small
   functional buttons (mobile menu close, quantity steppers, compare/
   wishlist toggles, swiper arrows) that are not meant to look like
   pill CTAs — styling every <button> forces borders/padding onto them
   and can turn invisible or minimal utility controls into odd empty
   boxes/circles. We only style buttons that are clearly primary
   call-to-action elements, matched by known/likely Salla classes. */
.btn,
a.btn,
.s-button,
.s-add-product-to-cart-button,
.add-to-cart,
.btn-add-cart,
[class*="add-to-cart"],
[class*="add-cart"],
button[class*="checkout"],
a[class*="checkout"],
input[class*="checkout"],
button[class*="complete-order"],
a[class*="complete-order"],
button[class*="place-order"],
a[class*="place-order"],
input[type="submit"]{
  background: transparent !important;
  color: var(--ab-beige) !important;
  border: 1px solid var(--ab-border) !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  /* Same reason as titles: no tracking, so Arabic button labels
     (e.g. "إضافة للسلة") keep their letters properly joined. */
  letter-spacing: normal !important;
  box-shadow: none !important;
  transition: background .25s ease, border-color .25s ease, transform .2s ease;
}
.btn:hover,
a.btn:hover,
.s-button:hover,
.s-add-product-to-cart-button:hover,
.add-to-cart:hover,
.btn-add-cart:hover,
[class*="add-to-cart"]:hover,
[class*="add-cart"]:hover,
button[class*="checkout"]:hover,
a[class*="checkout"]:hover,
button[class*="complete-order"]:hover,
a[class*="complete-order"]:hover,
button[class*="place-order"]:hover,
a[class*="place-order"]:hover{
  background: var(--ab-overlay-strong) !important;
  border-color: var(--ab-border-strong) !important;
  color: var(--ab-beige-bright) !important;
  transform: translateY(-1px);
}
.btn:active{
  transform: translateY(0);
}

/* Icon-only buttons (wishlist heart, compare, etc.) — recolor only,
   do NOT force width/height/padding. Their native size in your theme
   is left alone so nothing that was intentionally small or hidden
   suddenly becomes a large empty shape. */
.wishlist-btn,
.compare-btn,
[class*="wishlist"] button,
[class*="favorite"] button{
  background: transparent !important;
  color: var(--ab-beige) !important;
  border-color: var(--ab-border) !important;
}

/* Primary / filled buttons some themes use — flatten to the same
   transparent-beige family so nothing reads as a bright default color */
.btn-primary,
.btn-success,
.btn-info,
[class*="btn-primary"]{
  background: transparent !important;
  color: var(--ab-beige) !important;
  border: 1px solid var(--ab-border) !important;
}


/* ============================================================
   8) PRODUCT CARDS
   ============================================================ */
salla-product-card,
.product-card,
.s-product-card,
.s-product-card-entry,
.product-entry,
.product-item,
[class*="product-card"]{
  background: var(--ab-card-bg) !important;
  border: 1px solid var(--ab-border) !important;
  border-radius: var(--ab-radius-lg) !important;
  box-shadow: var(--ab-shadow) !important;
  padding: var(--ab-space-md) !important;
  overflow: hidden;
  /* Only takes effect if the card is already flex/grid (it is, in
     this layout) — adds breathing room between the text column and
     the image so the title/price don't crowd right up against it. */
  gap: var(--ab-space-lg) !important;
  transition: transform .3s ease, box-shadow .3s ease,
              border-color .3s ease, background-color .3s ease;
}
salla-product-card:hover,
.product-card:hover,
.s-product-card:hover,
.product-entry:hover,
.product-item:hover,
[class*="product-card"]:hover{
  background: var(--ab-card-bg-hover) !important;
  border-color: var(--ab-border-strong) !important;
  box-shadow: var(--ab-shadow-hover) !important;
  transform: translateY(-4px);
}

/* CRITICAL: undo the card look on any wrapper NESTED inside a card.
   Salla's component naming often repeats a fragment like
   "product-card" across multiple nesting levels (e.g. an outer
   entry wrapper and an inner content/body/footer wrapper). Without
   this reset, every one of those inner wrappers gets its own
   background/border/shadow too — producing the "boxes inside boxes"
   look. This keeps exactly ONE visible border per card. */
[class*="product-card"] [class*="product-card"],
[class*="product-card"] .card,
[class*="product-card"] [class*="-body"],
[class*="product-card"] [class*="-footer"],
[class*="product-card"] [class*="-content"]{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Product image frame inside the card */
.product-card img,
.s-product-card img,
.product-entry img,
[class*="product-card"] img{
  border-radius: var(--ab-radius-md) !important;
}

/* Consistent internal spacing between image / title / description / actions */
.product-card > *,
.s-product-card > *,
[class*="product-card"] > *{
  margin-block-end: var(--ab-space-sm);
}
.product-card > *:last-child,
.s-product-card > *:last-child{
  margin-block-end: 0;
}

/* Product grid — generous, even gutters instead of cramped defaults */
.products-grid,
.s-products-grid,
.s-product-grid,
[class*="products-grid"]{
  gap: var(--ab-space-lg) !important;
}


/* ============================================================
   9) MISC SECTIONS — footer, banners, modals, forms
   ============================================================ */
footer,
.s-footer,
[class*="footer"]{
  background: var(--ab-bg) !important;
  border-top: 1px solid var(--ab-border) !important;
  color: var(--ab-beige-muted) !important;
}
footer a, .s-footer a{
  color: var(--ab-beige) !important;
}

/* Modals / drawers / popups / toasts (cart drawer, quick view,
   login, and the "added to cart" confirmation popup) */
.modal,
.s-modal,
[class*="modal"],
[class*="drawer"],
[class*="popup"],
[class*="notification"],
[class*="toast"],
dialog{
  background: var(--ab-bg-soft) !important;
  border: 1px solid var(--ab-border) !important;
  color: var(--ab-beige-muted) !important;
  box-shadow: var(--ab-shadow) !important;
}
/* Text/icons/buttons inside these popups need the same treatment as
   the rest of the site — a popup being a separate component often
   means it ships with its own unstyled defaults (white bg, black
   close icon, green success accents) that our other rules never
   reached because they don't share the same class names. */
[class*="modal"] *,
[class*="drawer"] *,
[class*="popup"] *,
[class*="notification"] *,
[class*="toast"] *{
  color: var(--ab-beige) !important;
}
[class*="modal"] button,
[class*="drawer"] button,
[class*="popup"] button,
[class*="notification"] button,
[class*="toast"] button,
[class*="modal"] a.btn,
[class*="popup"] a.btn{
  background: transparent !important;
  color: var(--ab-beige) !important;
  border: 1px solid var(--ab-border) !important;
  border-radius: 999px !important;
}
/* Close ("X") button — recolor instead of leaving it a plain
   black square, and make it round to match the rest of the site */
[class*="modal"] [class*="close"],
[class*="popup"] [class*="close"],
[class*="notification"] [class*="close"]{
  background: var(--ab-bg) !important;
  color: var(--ab-beige) !important;
  border: 1px solid var(--ab-border) !important;
  border-radius: 50% !important;
}
/* Progress bar (e.g. the "added to cart" auto-dismiss timer) and any
   success checkmark/icon — neutralize the bright green to match the
   "no bright colors" rule */
[class*="modal"] [class*="progress"],
[class*="popup"] [class*="progress"],
[class*="notification"] [class*="progress"],
[class*="toast"] [class*="progress"]{
  background: var(--ab-border) !important;
}
[class*="modal"] [class*="progress"] > *,
[class*="popup"] [class*="progress"] > *,
[class*="notification"] [class*="progress"] > *,
[class*="toast"] [class*="progress"] > *{
  background: var(--ab-beige) !important;
}
[class*="modal"] [class*="success"],
[class*="popup"] [class*="success"],
[class*="notification"] [class*="success"],
[class*="modal"] .bg-success,
[class*="popup"] .bg-success{
  background: var(--ab-beige) !important;
  color: var(--ab-bg) !important;
}
[class*="modal"] svg,
[class*="popup"] svg,
[class*="notification"] svg,
[class*="toast"] svg{
  fill: var(--ab-beige) !important;
  stroke: var(--ab-beige) !important;
}

/* Generic form fields site-wide (checkout, login, filters) */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
  background: transparent !important;
  border: 1px solid var(--ab-border) !important;
  border-radius: var(--ab-radius-sm) !important;
  color: var(--ab-beige) !important;
}
input:focus, select:focus, textarea:focus{
  border-color: var(--ab-border-strong) !important;
  box-shadow: 0 0 0 3px var(--ab-overlay) !important;
  outline: none !important;
}

/* Native <select> dropdown OPTIONS LIST (product variant pickers,
   filters, etc.) — the closed box above is already themed, but the
   open options popup uses the browser's own default white background
   and blue selected-row highlight by default.
   NOTE / HONEST LIMITATION: option-list styling support varies by
   browser. Firefox generally respects this fully. Chrome/Edge on
   Windows partially respect background/text color but the
   selected-row highlight color is drawn by the operating system and
   often cannot be fully overridden by CSS — that's a platform
   limitation, not something fixable purely in "Additional CSS". A
   pixel-perfect match on every browser would require replacing the
   native <select> with a custom JS-built dropdown. */
select option{
  background: var(--ab-bg) !important;
  background-color: var(--ab-bg) !important;
  color: var(--ab-beige) !important;
}
select option:checked,
select option:hover,
select option:focus{
  background: var(--ab-beige) !important;
  background-color: var(--ab-beige) !important;
  color: var(--ab-bg) !important;
}

/* Dividers / soft separators between blocks */
hr, .divider{
  border-color: var(--ab-border) !important;
}


/* ============================================================
   10) REMOVE DEFAULT SALLA TURQUOISE / GREEN / BLUE ACCENTS
   ============================================================ */
.text-primary,
.text-success,
.text-info,
.bg-primary,
.bg-success,
.bg-info,
.badge-success,
.badge-primary,
.alert-success,
.alert-info,
[class*="teal"],
[class*="turquoise"]{
  color: var(--ab-beige) !important;
  background-color: transparent !important;
  border-color: var(--ab-border) !important;
}

/* Any raw inline hex/rgb Salla sometimes injects for its default
   brand teal — neutralized to the beige system. Extend this list
   if you spot another shade after publishing. */
[style*="#1abc9c"], [style*="#16a085"],
[style*="#20c997"], [style*="#0dcaf0"],
[style*="#0d6efd"], [style*="#2ecc71"]{
  color: var(--ab-beige) !important;
  background-color: transparent !important;
  border-color: var(--ab-border) !important;
}

/* Rating stars, sale tags, "new" badges — keep beige, not yellow/green */
.rating, .stars, [class*="rating"],
.sale-tag, .new-tag, [class*="tag"]{
  color: var(--ab-beige) !important;
  border-color: var(--ab-border) !important;
  background: transparent !important;
}


/* ============================================================
   11) SPACING & LAYOUT POLISH
   ============================================================ */
.s-block, section{
  padding-block: var(--ab-space-xl) !important;
}
.s-block-header, .section-header{
  margin-block-end: var(--ab-space-lg) !important;
}
.container, .s-container{
  padding-inline: var(--ab-space-md) !important;
}


/* ============================================================
   12) MOBILE RESPONSIVENESS
   ============================================================ */
@media (max-width: 992px){
  .s-block, section{
    padding-block: var(--ab-space-lg) !important;
  }
  .product-card, .s-product-card, [class*="product-card"]{
    padding: var(--ab-space-sm) !important;
    border-radius: var(--ab-radius-md) !important;
  }
}

@media (max-width: 768px){
  .s-header-top, .s-header-bottom{
    flex-wrap: wrap !important;
    gap: var(--ab-space-sm) !important;
  }
  salla-search-input, .s-header-search, .search-form{
    width: 100% !important;
    order: 3;
  }
  h1, .page-title{ font-size: 1.4rem !important; }
  h2, .s-block-header-title{ font-size: 1.2rem !important; }
  .products-grid, .s-products-grid, [class*="products-grid"]{
    gap: var(--ab-space-sm) !important;
  }
}

@media (max-width: 480px){
  .container, .s-container{
    padding-inline: var(--ab-space-sm) !important;
  }
  .btn, a.btn{
    width: 100%;
    justify-content: center;
  }
  .product-card, .s-product-card, [class*="product-card"]{
    border-radius: var(--ab-radius-sm) !important;
  }
}

/* ============================================================
   13) COMMERCIAL REGISTRATION / WATHQ VERIFICATION BADGE
   ------------------------------------------------------------
   This is Salla/Wathq's official government verification badge,
   NOT a themeable UI element. We deliberately do not touch its
   colors here — its fixed green/white government styling is what
   makes it recognizable as an authentic trust seal. If it renders
   inside an iframe (common for this widget), no site CSS can
   reach its internal styling at all — that's a browser security
   boundary, not something fixable from here.
   We only adjust spacing/size so it sits more calmly on the page. */
[class*="wathq"],
[class*="commercial-register"],
[class*="cr-badge"],
[class*="trade-register"],
[id*="wathq"]{
  margin-block-start: var(--ab-space-lg) !important;
  transform: scale(0.9);
  transform-origin: center;
}

/* Stray modal/drawer close buttons that sometimes render detached
   from their parent container (positioning bug in some Salla cart
   flows) — neutralize the bright red and align with the palette.
   If it's floating in the wrong place entirely, this at least stops
   it from looking like an alarming red error button. */
[class*="close"],
[class*="modal"] [class*="close"],
button[class*="close"],
.btn-close{
  background: var(--ab-bg-soft) !important;
  color: var(--ab-beige) !important;
  border: 1px solid var(--ab-border) !important;
}
[style*="background-color: #f"],
[style*="background: #f"],
[class*="bg-red"],
[class*="bg-danger"]{
  background-color: var(--ab-bg-soft) !important;
}

/* Cart line-item remove/delete button — style consistently instead
   of leaving it as an unstyled/blank circle. */
[class*="cart-item"] [class*="remove"],
[class*="cart-item"] [class*="delete"],
[class*="remove-from-cart"],
[class*="delete-item"],
[class*="cart"] button[class*="remove"],
[class*="cart"] button[class*="delete"]{
  background: transparent !important;
  color: var(--ab-beige) !important;
  border: 1px solid var(--ab-border) !important;
  border-radius: 50% !important;
  width: 28px;
  height: 28px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
[class*="cart-item"] [class*="remove"] svg,
[class*="cart-item"] [class*="delete"] svg,
[class*="remove-from-cart"] svg,
[class*="delete-item"] svg{
  fill: var(--ab-beige) !important;
  stroke: var(--ab-beige) !important;
  width: 14px;
  height: 14px;
}

/* ============================================================
   END OF FILE
   ============================================================ */