@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&family=Bodoni+Moda:ital,opsz,wght@1,6..96,400;1,6..96,500&display=swap');

/* ALFA skin for theme Cleek -- draft 970861960. Generated 2026-08-14.
   Documented source: X:/Claude/Alfa/theme/cleek/alfa-cleek.css
   Do NOT paste into the live Raed version 1317728598. */

:root {
  --a-ink-900: #08080A;
  --a-ink-800: #0E0E11;
  --a-ink-700: #15151A;
  --a-ink-600: #1D1D23;
  --a-gold-100: #F0E2BE;
  --a-gold-300: #E4CD97;
  --a-gold-500: #C6A96B;
  --a-gold-700: #A88544;
  --a-plus:   #9FB4C4;
  --a-gold:   #C9A227;
  --a-strong: #3C7A5A;
  --a-text:  #F4F2EE;
  --a-muted: #A5A29B;
  --a-faint: #8C8A83;
  --a-line:   rgba(230, 210, 160, .13);
  --a-line-2: rgba(230, 210, 160, .22);
  --a-was:    #8A6A6A;
  --a-s-2: 8px;  --a-s-3: 12px; --a-s-4: 16px; --a-s-5: 24px;
  --a-s-6: 32px; --a-s-7: 48px; --a-s-8: 64px; --a-s-9: 96px;
  --a-r-sm: 3px; --a-r-md: 6px; --a-r-lg: 10px;
  --a-shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.35);
  --a-shadow-md: 0 2px 4px rgba(0,0,0,.55), 0 12px 32px rgba(0,0,0,.45);
  --a-lit:        inset 0 1px 0 rgba(240,226,190,.10);
  --a-lit-strong: inset 0 1px 0 rgba(240,226,190,.20);
  --a-surface: linear-gradient(180deg, var(--a-ink-700) 0%, var(--a-ink-800) 100%);
  --a-fast: 160ms; --a-base: 240ms; --a-slow: 320ms;
  --a-ease: cubic-bezier(.22,.61,.36,1);
  --a-lift: -2px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --a-fast: 1ms; --a-base: 1ms; --a-slow: 1ms; --a-lift: 0px; }
}

body.theme-click,
body.theme-click input,
body.theme-click textarea,
body.theme-click select,
body.theme-click button {
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif !important;
}

body.theme-click h1,
body.theme-click h2,
body.theme-click h3,
body.theme-click h4,
body.theme-click .s-block__title h2 {
  font-family: 'Readex Pro', system-ui, sans-serif !important;
  font-weight: 400;
  letter-spacing: -.01em;
}

body.theme-click,
body.theme-click.color-mode-light,
body.theme-click.color-mode-dark {
  background-color: var(--a-ink-900) !important;
  color: var(--a-text) !important;
}

body.theme-click main.store-main,
body.theme-click .store-main,
body.theme-click section,
body.theme-click .s-block {
  background-color: transparent !important;
}

body.theme-click { overflow-x: clip; }

body.theme-click header,
body.theme-click .main-nav-container {
  background: var(--a-ink-800) !important;
  border-bottom: 1px solid var(--a-line);
  box-shadow: var(--a-lit);
}

body.theme-click .header-container { padding-block: var(--a-s-3); }

body.theme-click .search-bar input,
body.theme-click salla-search input {
  background: var(--a-ink-700) !important;
  color: var(--a-text) !important;
  border: 1px solid var(--a-line) !important;
  border-radius: var(--a-r-md) !important;
  transition: border-color var(--a-fast) var(--a-ease), box-shadow var(--a-fast) var(--a-ease);
}
body.theme-click .search-bar input::placeholder,
body.theme-click salla-search input::placeholder { color: var(--a-faint) !important; }
body.theme-click .search-bar input:hover { border-color: var(--a-line-2) !important; }
body.theme-click .search-bar input:focus,
body.theme-click salla-search input:focus {
  border-color: var(--a-gold-500) !important;
  box-shadow: 0 0 0 3px rgba(198,169,107,.14) !important;
  outline: none !important;
}

body.theme-click .header-btns-list a,
body.theme-click .header-btns-list button,
body.theme-click .mburger {
  color: var(--a-text) !important;
  transition: color var(--a-fast) var(--a-ease), transform var(--a-fast) var(--a-ease);
}
body.theme-click .header-btns-list a:hover,
body.theme-click .header-btns-list button:hover,
body.theme-click .mburger:hover {
  color: var(--a-gold-300) !important;
  transform: translateY(var(--a-lift));
}

body.theme-click .s-block__title {
  border-bottom: 1px solid var(--a-line);
  padding-bottom: var(--a-s-4);
  margin-bottom: var(--a-s-6);
  position: relative;
}
body.theme-click .s-block__title::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -1px;
  width: 56px;
  height: 1px;
  background: var(--a-gold-500);
}
body.theme-click .s-block__title-right h2 {
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--a-text) !important;
}
body.theme-click .s-block { padding-block: var(--a-s-8); }

body.theme-click .btn--primary,
body.theme-click .s-button-primary,
body.theme-click salla-add-product-button button {
  background: var(--a-gold-500) !important;
  color: #0B0B0C !important;
  border: 1px solid transparent !important;
  border-radius: var(--a-r-md) !important;
  font-family: 'Readex Pro', sans-serif !important;
  font-weight: 500 !important;
  transition: background var(--a-fast) var(--a-ease), transform var(--a-fast) var(--a-ease);
}
body.theme-click .btn--primary:hover,
body.theme-click .s-button-primary:hover,
body.theme-click salla-add-product-button button:hover {
  background: var(--a-gold-300) !important;
  transform: translateY(var(--a-lift));
}
body.theme-click .btn--primary:active,
body.theme-click salla-add-product-button button:active { transform: translateY(0); }

body.theme-click a { transition: color var(--a-fast) var(--a-ease); }
body.theme-click a:hover { color: var(--a-gold-300); }

body.theme-click .s-price-current,
body.theme-click .price,
body.theme-click [class*="price"]:not([class*="before"]):not([class*="old"]) {
  color: var(--a-gold-300) !important;
  font-family: 'Readex Pro', sans-serif !important;
}
body.theme-click .s-price-before,
body.theme-click [class*="old-price"],
body.theme-click [class*="price-before"] {
  color: var(--a-was) !important;
  text-decoration: line-through;
}

body.theme-click footer,
body.theme-click .store-footer {
  background: var(--a-ink-800) !important;
  border-top: 1px solid var(--a-line);
  color: var(--a-muted) !important;
}
body.theme-click footer h3,
body.theme-click footer h4,
body.theme-click .store-footer h3,
body.theme-click .store-footer h4 {
  color: var(--a-text) !important;
  font-size: 14px;
  letter-spacing: .02em;
}
body.theme-click footer a { color: var(--a-muted) !important; }
body.theme-click footer a:hover { color: var(--a-gold-300) !important; }

body.theme-click salla-payments img,
body.theme-click .payment-methods img {
  background: rgba(255,255,255,.92);
  border-radius: var(--a-r-sm);
  padding: 3px 5px;
}

body.theme-click input:not([type="checkbox"]):not([type="radio"]),
body.theme-click textarea,
body.theme-click select {
  background-color: var(--a-ink-700) !important;
  color: var(--a-text) !important;
  border-color: var(--a-line) !important;
}
body.theme-click input::placeholder,
body.theme-click textarea::placeholder { color: var(--a-faint) !important; }

body.theme-click header { position: relative; }
body.theme-click header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--a-gold-500) 50%, transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  animation: alfa-wipe var(--a-slow) var(--a-ease) 120ms forwards;
}
@keyframes alfa-wipe { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  body.theme-click header::after { animation: none; transform: scaleX(1); }
}

/* 11. THE COMPOSED SECTIONS -- the promo strip, the hero above the shelf and the
   bundle deal below it. No !important here: these classes are ours end to end,
   so nothing collides with a Tailwind utility and there is nothing to out-specify. */

.alfa-bar {
  position: relative; z-index: 60;
  background: linear-gradient(90deg, #131019, #1A1520, #131019);
  border-bottom: 1px solid var(--a-line-2);
  display: flex; align-items: center; justify-content: center;
  padding: .55rem 2.75rem; font-size: .8rem; text-align: center;
}
.alfa-bar__link {
  display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  justify-content: center; color: var(--a-text); text-decoration: none;
}
.alfa-bar__chip {
  color: var(--a-gold-300); border: 1px solid var(--a-line-2);
  border-radius: var(--a-r-sm); padding: .08rem .5rem;
  font-family: 'Readex Pro', sans-serif; font-size: .68rem; white-space: nowrap;
}
.alfa-bar__text { color: var(--a-muted); }
.alfa-bar__now { color: var(--a-gold-300); font-family: 'Readex Pro', sans-serif; font-weight: 600; }
.alfa-bar__was { color: var(--a-was); text-decoration: line-through; font-size: .74rem; }
.alfa-bar__cta { color: var(--a-gold-300); border-bottom: 1px solid var(--a-line-2); white-space: nowrap; }
.alfa-bar__x {
  position: absolute; inset-inline-start: .5rem; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; color: var(--a-faint);
  font-size: 1rem; line-height: 1; transition: color var(--a-fast) var(--a-ease);
}
.alfa-bar__x:hover { color: var(--a-gold-300); }

.alfa-eyebrow {
  display: block; font-family: 'Readex Pro', sans-serif; font-size: .68rem;
  letter-spacing: .16em; color: var(--a-gold-500); margin-bottom: var(--a-s-3);
}

.alfa-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Readex Pro', sans-serif; font-size: .88rem; font-weight: 500;
  padding: .8rem 1.6rem; border-radius: var(--a-r-md); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background var(--a-fast) var(--a-ease), border-color var(--a-fast) var(--a-ease),
              color var(--a-fast) var(--a-ease), transform var(--a-fast) var(--a-ease);
}
.alfa-btn--gold { background: var(--a-gold-500); color: #0B0B0C; }
.alfa-btn--gold:hover { background: var(--a-gold-300); transform: translateY(var(--a-lift)); }
.alfa-btn--ghost { background: transparent; color: var(--a-text); border-color: var(--a-line-2); }
.alfa-btn--ghost:hover { border-color: var(--a-gold-500); color: var(--a-gold-300); transform: translateY(var(--a-lift)); }
.alfa-btn:active { transform: translateY(0); }

.alfa-hero {
  position: relative; overflow: hidden; padding: var(--a-s-9) 0 var(--a-s-8);
  background: radial-gradient(120% 90% at 50% 0%, #141319 0%, var(--a-ink-900) 62%);
}
.alfa-hero__wrap {
  max-width: 1180px; margin: 0 auto; padding: 0 var(--a-s-5);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--a-s-8); align-items: center;
}
.alfa-hero__title {
  font-family: 'Readex Pro', sans-serif; font-weight: 300;
  font-size: clamp(28px, 4.2vw, 46px); line-height: 1.22;
  letter-spacing: -.01em; margin: 0 0 var(--a-s-4);
}
.alfa-hero__em { font-family: 'Bodoni Moda', Georgia, serif; font-style: italic; color: var(--a-gold-300); }
.alfa-hero__body { color: var(--a-muted); max-width: 40ch; line-height: 1.85; margin-bottom: var(--a-s-6); }
.alfa-hero__cta { display: flex; gap: var(--a-s-3); flex-wrap: wrap; }
.alfa-hero__trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--a-s-3); }
.alfa-hero__fig {
  margin: 0; border-radius: var(--a-r-md); overflow: hidden; background: var(--a-ink-800);
  box-shadow: var(--a-shadow-md), var(--a-lit);
  transition: transform var(--a-slow) var(--a-ease);
}
.alfa-hero__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alfa-hero__fig:nth-child(2) { transform: translateY(-16px); }
.alfa-hero__fig:hover { transform: translateY(-22px); }
.alfa-hero__fig:nth-child(2):hover { transform: translateY(-30px); }

.alfa-shelf__sub { color: var(--a-faint); font-size: .84rem; margin-top: .35rem; }

.alfa-deal { padding: 0 0 var(--a-s-9); }
.alfa-deal__wrap {
  max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: .8fr 1.2fr;
  background: var(--a-surface); border: 1px solid var(--a-line-2);
  border-radius: var(--a-r-lg); box-shadow: var(--a-shadow-md), var(--a-lit-strong);
  overflow: hidden;
}
.alfa-deal__fig {
  background: var(--a-ink-900); display: flex; align-items: center;
  justify-content: center; padding: var(--a-s-6);
}
.alfa-deal__fig img { max-width: 100%; height: auto; display: block; }
.alfa-deal__body { padding: var(--a-s-8) var(--a-s-7); }
.alfa-deal__title {
  font-family: 'Readex Pro', sans-serif; font-weight: 400;
  font-size: clamp(22px, 3vw, 30px); margin: 0 0 var(--a-s-3);
}
.alfa-deal__text { color: var(--a-muted); max-width: 46ch; line-height: 1.85; }
.alfa-deal__math {
  display: flex; gap: var(--a-s-6); margin: var(--a-s-5) 0 var(--a-s-6);
  padding: var(--a-s-4) 0; border-block: 1px solid var(--a-line);
}
.alfa-deal__cell { flex: 1; }
.alfa-deal__math dt { color: var(--a-faint); font-size: .74rem; margin-bottom: .15rem; }
.alfa-deal__math dd { margin: 0; }
.alfa-deal__num { font-family: 'Readex Pro', sans-serif; font-size: 1.35rem; }
.alfa-deal__math dd small { font-size: .74rem; color: var(--a-muted); margin-inline-start: .25rem; }
.alfa-deal__math dd.is-hi .alfa-deal__num { color: var(--a-gold-300); }

@media (max-width: 900px) {
  .alfa-hero { padding: var(--a-s-7) 0 var(--a-s-6); }
  .alfa-hero__wrap, .alfa-deal__wrap { grid-template-columns: 1fr; gap: var(--a-s-6); }
  .alfa-deal__body { padding: var(--a-s-6) var(--a-s-5); }
  .alfa-deal__math { gap: var(--a-s-4); }
  .alfa-hero__fig:nth-child(2) { transform: none; }
}

/* 12. CURRENCY

   Salla ships the Saudi Riyal mark as an icon-font glyph, <i class="sicon-sar">
   in the sallaicons family, already printed beside every theme price. Reusing it
   is the only correct answer: the letters "r.s" are not the currency mark, a
   Unicode codepoint for it depends on fonts the customer may not have, and
   hand-drawing an official symbol risks shipping a wrong version of it.

   SIDE: Salla renders "449 <i>" and the mark lands LEFT of the digits. Mine
   landed RIGHT, because the icon carries no text and its glyph arrives from
   ::before as a bidi-NEUTRAL character, so it attaches to the end of the
   left-to-right digit run instead of to the Arabic paragraph. Inheriting
   direction was the mistake. The order is stated outright below so it cannot
   drift, and it is verified with getComputedStyle plus a measured comparison
   against a real card price -- not by eye, and not by trusting that a save
   reported success. */

.alfa-sar,
body.theme-click .sicon-sar {
  font-family: 'sallaicons' !important;
  font-size: .82em;
  line-height: 1;
  font-style: normal;
}

body.theme-click .alfa-deal__math dd,
body.theme-click .alfa-price-pair {
  display: inline-flex !important;
  flex-direction: row-reverse !important;
  direction: ltr !important;
  align-items: baseline !important;
  gap: .26em !important;
  margin: 0 !important;
}

body.theme-click .alfa-deal__math dd .alfa-sar,
body.theme-click .alfa-price-pair .alfa-sar { margin-inline-start: 0 !important; }

.alfa-deal__math dd .alfa-sar { color: var(--a-muted); }
.alfa-deal__math dd.is-hi .alfa-sar { color: var(--a-gold-300); }
.alfa-bar__link .alfa-sar { color: var(--a-gold-300); margin-inline-start: .26em; }
.alfa-btn .alfa-sar { margin-inline-start: .26em; }

/* Keep a number and its mark from being split by the surrounding Arabic. */
.alfa-bar__link, .alfa-btn { unicode-bidi: isolate; }

/* Latin digits. The Arabic-Indic form came from the theme's own arabic_numbers
   setting, switched off at the source; this only pins the shape for anything the
   browser might localise on its own. */
body.theme-click,
body.theme-click .alfa-deal__num,
body.theme-click .alfa-bar__now,
body.theme-click [class*="price"] {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1;
}

/* ==========================================================================
   13. THE PRODUCT CARD -- written against the REAL tree, read out of the draft:

     div.s-products-list-wrapper.s-products-list-vertical-cards
       custom-salla-product-card.product-entry.product-entry--vertical
         div.product-entry__image  >  a.product-popup-trigger > img.lazy
                                   >  salla-button.btn--wishlist > i.sicon-heart
         div.content-wrap
           div.product-entry__content
             div.text-info      > a.product-entry__title
             div.price-wrapper  > div.product-entry__price
                                    > span.sale-price    > i.sicon-sar
                                    > span.regular-price > i.sicon-sar
             div.add-to-cart-conatiner > salla-add-product-button.btn--add-to-cart

   The photographs are shot on black, so the well is ink and the card body sits
   one step lighter. That inverts the usual e-commerce card -- normally the image
   is bright and the chrome is dark -- and it is the whole reason these bottles
   read as objects rather than as cut-outs.
   ========================================================================== */

body.theme-click custom-salla-product-card.product-entry {
  background: var(--a-surface) !important;
  border: 1px solid var(--a-line) !important;
  border-radius: var(--a-r-lg) !important;
  overflow: hidden;
  box-shadow: var(--a-lit);
  transition: transform var(--a-base) var(--a-ease),
              border-color var(--a-base) var(--a-ease),
              box-shadow var(--a-base) var(--a-ease);
}

body.theme-click custom-salla-product-card.product-entry:hover {
  transform: translateY(var(--a-lift));
  border-color: var(--a-line-2) !important;
  box-shadow: var(--a-shadow-md), var(--a-lit-strong);
}

/* The image well. Ink, so a black-background photograph has nothing to fight. */
body.theme-click .product-entry__image {
  background: var(--a-ink-900) !important;
  border-bottom: 1px solid var(--a-line);
  overflow: hidden;
}

body.theme-click .product-entry__image img {
  transition: transform var(--a-slow) var(--a-ease);
}
body.theme-click custom-salla-product-card:hover .product-entry__image img {
  transform: scale(1.03);
}

body.theme-click .content-wrap { padding: var(--a-s-4) var(--a-s-4) var(--a-s-5); }

body.theme-click .product-entry__title {
  font-family: 'Readex Pro', sans-serif !important;
  font-size: .92rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--a-text) !important;
  transition: color var(--a-fast) var(--a-ease);
}
body.theme-click .product-entry__title:hover { color: var(--a-gold-300) !important; }

/* Price: the sale figure is the loud one, the original is struck and quiet.
   Both carry the riyal mark on the LEFT, which is Salla's own arrangement --
   these rules only colour and size it, they do not move it. */
body.theme-click .product-entry__price { gap: .6rem; }

body.theme-click .sale-price {
  font-family: 'Readex Pro', sans-serif !important;
  font-size: 1.06rem !important;
  font-weight: 500 !important;
  color: var(--a-gold-300) !important;
}

body.theme-click .regular-price {
  color: var(--a-was) !important;
  text-decoration: line-through;
  font-size: .82rem !important;
}

body.theme-click .sale-price .sicon-sar,
body.theme-click .regular-price .sicon-sar { color: inherit !important; }

/* The wishlist heart ships bright red, which is the only saturated colour on the
   page and it lands on top of the product. Made a quiet gold outline instead. */
body.theme-click .btn--wishlist {
  background: rgba(11, 11, 12, .55) !important;
  border: 1px solid var(--a-line) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(4px);
  transition: border-color var(--a-fast) var(--a-ease),
              background var(--a-fast) var(--a-ease);
}
body.theme-click .btn--wishlist i,
body.theme-click .btn--wishlist .sicon-heart { color: var(--a-muted) !important; }
body.theme-click .btn--wishlist:hover { border-color: var(--a-gold-500) !important; }
body.theme-click .btn--wishlist:hover i { color: var(--a-gold-300) !important; }

/* Add to cart: one gold action per card, matching the hero and the deal. */
body.theme-click .btn--add-to-cart button,
body.theme-click salla-add-product-button.btn--add-to-cart button {
  background: var(--a-gold-500) !important;
  color: #0B0B0C !important;
  border: 1px solid transparent !important;
  border-radius: var(--a-r-md) !important;
  font-family: 'Readex Pro', sans-serif !important;
  font-weight: 500 !important;
  width: 100%;
  transition: background var(--a-fast) var(--a-ease),
              transform var(--a-fast) var(--a-ease);
}
body.theme-click .btn--add-to-cart button:hover {
  background: var(--a-gold-300) !important;
  transform: translateY(var(--a-lift));
}
body.theme-click .btn--add-to-cart button:active { transform: translateY(0); }
body.theme-click .add-to-cart-conatiner { color: var(--a-muted) !important; }

/* The grid: four across on desktop, two on a phone, with air between them. */
body.theme-click .s-products-list-wrapper { gap: var(--a-s-5) !important; }

/* ==========================================================================
   14. THE TOP-NAV CHIPS

   Cleek paints a "highlighted" menu item on saturated red. It is the only
   saturated colour anywhere on the page and it lands directly under the
   wordmark, so it reads as an error state rather than as an invitation. The
   chips are re-cut in the same material as everything else: ink, a hairline,
   and gold only on hover.

   Selector grounded in the measured tree:
     div.hero-area > .cats-list-wrap > salla-menu.cats-list
       > .s-menu-topnav-list > a.s-menu-topnav-item.topnav-link-item
   ========================================================================== */

body.theme-click .s-menu-topnav-item,
body.theme-click .cats-list a[class*="topnav-link"] {
  background: var(--a-ink-700) !important;
  background-image: none !important;
  color: var(--a-text) !important;
  border: 1px solid var(--a-line) !important;
  border-radius: var(--a-r-sm) !important;
  box-shadow: var(--a-lit);
  transition: border-color var(--a-fast) var(--a-ease),
              color var(--a-fast) var(--a-ease),
              transform var(--a-fast) var(--a-ease);
}

body.theme-click .s-menu-topnav-item:hover,
body.theme-click .cats-list a[class*="topnav-link"]:hover {
  border-color: var(--a-gold-500) !important;
  color: var(--a-gold-300) !important;
  transform: translateY(var(--a-lift));
}

body.theme-click .hero-area { background: transparent !important; }

/* ==========================================================================
   15. THE PRODUCT PAGE

   Measured: div.product-info is a flex row, 1320 x 1531, holding the gallery
   (647 x 800) beside the details. With the default stretch the details column
   grows to the gallery's height, which pushed the quantity stepper and the buy
   button roughly 700px below the description and left a void where the decision
   is supposed to happen. Starting both columns at the top puts the price, the
   description and the action within one glance of each other.
   ========================================================================== */

body.theme-click .product-info {
  align-items: flex-start !important;
  gap: var(--a-s-7);
}

/* The gallery is a black photograph on a dark page, so it gets the same well
   treatment as the cards: ink, a hairline, and a lifted centre so the bottle
   separates from the panel instead of dissolving into it. */
body.theme-click .details-slider-wrapper,
body.theme-click .details-slider {
  background: radial-gradient(72% 62% at 50% 45%, #17171D 0%, var(--a-ink-900) 74%) !important;
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-lg);
  overflow: hidden;
}

body.theme-click .product-details .breadcrumbs,
body.theme-click .breadcrumbs a { color: var(--a-faint) !important; }
body.theme-click .breadcrumbs a:hover { color: var(--a-gold-300) !important; }

/* Quantity stepper: a control, not a form field. */
body.theme-click .quantity-input,
body.theme-click [class*="quantity"] input {
  background: var(--a-ink-700) !important;
  color: var(--a-text) !important;
  border-color: var(--a-line) !important;
}

/* The details table (model number, etc.) reads as data, so it gets rules rather
   than a box. */
body.theme-click .product-details table,
body.theme-click .product-details tr {
  border-color: var(--a-line) !important;
  color: var(--a-muted) !important;
}

/* On a phone the buy action must never be more than a thumb away. */
@media (max-width: 900px) {
  body.theme-click .product-info { gap: var(--a-s-5); }
  body.theme-click .product-form .btn--add-to-cart,
  body.theme-click .product-details salla-add-product-button { width: 100%; }
}

/* ==========================================================================
   16. THE CART

   Written against the measured tree of /cart on this draft, not from memory:

     div.container.page-container.cart-page
       salla-breadcrumb > ol.s-breadcrumb-wrapper > li.s-breadcrumb-item
       div.main-content
         form > section.cart-item
           a > img                                  the thumbnail
           h3 > a                                   the title
           span.item-price          > i.sicon-sar   unit price
           span.item-regular-price  > i.sicon-sar   struck original, hidden today
           salla-quantity-input > div.s-quantity-input-container
           p.text-primary > span.item-total > i.sicon-sar
           span > salla-button.btn--delete > button
       div.sticky.top-24
         div.border > salla-cart-coupons > .s-cart-coupons-wrapper
         salla-cart-summary-card.s-cart-summary-card
           .s-cart-summary-card-sheet   header + .s-cart-summary-card-line
           .s-cart-summary-card-bar     the grand total
           .s-cart-summary-card-action > button    checkout
     empty:  div.no-content-placeholder > i.sicon-shopping-bag.icon + p + a.btn

   Three things this page does that the rest of the skin already refused
   elsewhere. The delete control ships on rgb(248,113,113) -- the only
   saturated colour left on the store, sitting on top of the product. The line
   total prints in rgb(174,216,224), a pale blue left over from the theme's
   own primary, so the one number the customer is checking is the one colour
   that belongs to nothing. And the coupon "apply" button is painted the same
   gold as checkout, which offers two equally loud actions in a column 430px
   wide. Gold stays on checkout alone; apply is re-cut as an outline.

   LOADING. salla-cart-summary-card is server-rendered EMPTY and stays 0x0
   until it hydrates -- measured here at over 20 seconds, and it only resolved
   after the page was scrolled. So for the first seconds the sidebar has no
   totals and no checkout button at all, and the coupon card hangs over a
   void. :empty holds the card's own measured height so nothing jumps when the
   real one arrives, and Salla's skeleton classes get the same material. The
   pulse is opacity only, and it stops under prefers-reduced-motion.
   ========================================================================== */

body.theme-click .cart-page { padding-block: var(--a-s-6) var(--a-s-8); }

body.theme-click .cart-page .s-breadcrumb-item,
body.theme-click .cart-page .s-breadcrumb-item a { color: var(--a-faint) !important; font-size: .8rem; }
body.theme-click .cart-page .s-breadcrumb-item a:hover { color: var(--a-gold-300) !important; }
body.theme-click .cart-page .s-breadcrumb-arrow { opacity: .55; }

/* --- the line item ------------------------------------------------------ */

body.theme-click section.cart-item {
  background: var(--a-surface) !important;
  border: 1px solid var(--a-line) !important;
  border-radius: var(--a-r-lg) !important;
  box-shadow: var(--a-lit);
  transition: border-color var(--a-base) var(--a-ease),
              box-shadow var(--a-base) var(--a-ease);
}
body.theme-click section.cart-item:hover {
  border-color: var(--a-line-2) !important;
  box-shadow: var(--a-shadow-sm), var(--a-lit-strong);
}

/* The bottle is photographed on black. The theme frames it in rgb(243,244,246)
   with a light grey rule, which prints a bright rectangle around a dark
   picture on a dark page. Same ink well the product cards use. */
body.theme-click section.cart-item img {
  background: var(--a-ink-900) !important;
  border: 1px solid var(--a-line) !important;
  border-radius: var(--a-r-md) !important;
  transition: transform var(--a-slow) var(--a-ease);
}
body.theme-click section.cart-item a:hover img { transform: scale(1.04); }

body.theme-click section.cart-item h3 { opacity: 1 !important; margin: 0; }
body.theme-click section.cart-item h3 a {
  font-family: 'Readex Pro', sans-serif !important;
  font-size: .95rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--a-text) !important;
}
body.theme-click section.cart-item h3 a:hover { color: var(--a-gold-300) !important; }

body.theme-click .cart-page .item-price {
  color: var(--a-gold-300) !important;
  font-family: 'Readex Pro', sans-serif !important;
  font-size: .9rem !important;
  opacity: 1 !important;
}
body.theme-click .cart-page .item-regular-price:not(.hidden) {
  color: var(--a-was) !important;
  text-decoration: line-through;
  font-size: .8rem !important;
  opacity: 1 !important;
}

/* The row carries mb-8 to clear a donation block this store never renders, so
   every line item ends in 32px of empty card. That block is not :empty -- it
   holds whitespace -- so the margin is cut to a real gap rather than to nil,
   which stays correct if the block ever fills. */
body.theme-click section.cart-item salla-conditional-fields > div:first-child {
  margin-bottom: var(--a-s-3) !important;
}

/* Label quiet, figure loud -- the reverse of the pale blue it replaces. */
body.theme-click section.cart-item p.text-primary {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  color: var(--a-muted) !important;
  font-size: .84rem !important;
  font-weight: 400 !important;
}
body.theme-click section.cart-item p.text-primary .item-total {
  color: var(--a-gold-300) !important;
  font-family: 'Readex Pro', sans-serif !important;
  font-size: 1.02rem !important;
  font-weight: 500 !important;
}

/* Remove: destructive, so it must not be gold, and it must not be the theme's
   red either. Muted rose on hover, which is the only warm the palette owns.
   The circle stays 30px for the eye; ::after opens the hit area to 44px. */
body.theme-click .cart-page .btn--delete button {
  position: relative;
  width: 30px !important;
  height: 30px !important;
  background: rgba(11, 11, 12, .55) !important;
  border: 1px solid var(--a-line) !important;
  border-radius: 999px !important;
  color: var(--a-muted) !important;
  backdrop-filter: blur(4px);
  transition: border-color var(--a-fast) var(--a-ease),
              color var(--a-fast) var(--a-ease),
              background var(--a-fast) var(--a-ease);
}
body.theme-click .cart-page .btn--delete button::after {
  content: "";
  position: absolute;
  inset: -7px;
}
body.theme-click .cart-page .btn--delete button i { color: inherit !important; }
body.theme-click .cart-page .btn--delete button:hover {
  background: rgba(138, 106, 106, .12) !important;
  border-color: var(--a-was) !important;
  color: var(--a-was) !important;
}
body.theme-click .cart-page .btn--delete button:focus-visible {
  outline: 2px solid var(--a-gold-500);
  outline-offset: 2px;
}

/* --- the quantity stepper ----------------------------------------------- */

body.theme-click .cart-page .s-quantity-input-container {
  background: var(--a-ink-900) !important;
  border: 1px solid var(--a-line) !important;
  border-radius: var(--a-r-md) !important;
  overflow: hidden;
  transition: border-color var(--a-fast) var(--a-ease);
}
body.theme-click .cart-page .s-quantity-input-container:hover { border-color: var(--a-line-2) !important; }

body.theme-click .cart-page .s-quantity-input-input {
  background: transparent !important;
  color: var(--a-text) !important;
  font-family: 'Readex Pro', sans-serif !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
body.theme-click .cart-page .s-quantity-input-button {
  background: transparent !important;
  color: var(--a-muted) !important;
  transition: color var(--a-fast) var(--a-ease),
              background var(--a-fast) var(--a-ease);
}
body.theme-click .cart-page .s-quantity-input-button:hover {
  background: rgba(198, 169, 107, .08) !important;
  color: var(--a-gold-300) !important;
}
body.theme-click .cart-page .s-quantity-input-button:focus-visible {
  outline: 2px solid var(--a-gold-500);
  outline-offset: -2px;
}
body.theme-click .cart-page .s-quantity-input-button:disabled {
  color: var(--a-faint) !important;
  opacity: .45;
  cursor: not-allowed;
}

/* --- the coupon card ---------------------------------------------------- */
/* :not(.hidden) keeps div#free-shipping, which carries the same .border and is
   switched off today, from being handed a surface it would then show. */

body.theme-click .cart-page .sticky > div.border:not(.hidden) {
  background: var(--a-surface) !important;
  border: 1px solid var(--a-line) !important;
  border-radius: var(--a-r-lg) !important;
  box-shadow: var(--a-lit);
}
/* The coupon widget rules itself off top and bottom in cold white, inside a
   card that is already framed in the warm hairline. Two of the three lines are
   redundant and none of them are in the palette. */
body.theme-click .cart-page .s-cart-coupons-wrapper {
  border-top: 0 !important;
  border-bottom: 0 !important;
  padding-block: 0 !important;
}
body.theme-click .cart-page .s-cart-coupons-coupon-label {
  display: block;
  margin-bottom: var(--a-s-2);
  color: var(--a-muted) !important;
  font-size: .82rem !important;
}
body.theme-click .cart-page #coupon-input {
  background: var(--a-ink-900) !important;
  border: 1px solid var(--a-line) !important;
  border-start-start-radius: var(--a-r-md) !important;
  border-end-start-radius: var(--a-r-md) !important;
  border-start-end-radius: 0 !important;
  border-end-end-radius: 0 !important;
  font-size: .86rem !important;
  transition: border-color var(--a-fast) var(--a-ease),
              box-shadow var(--a-fast) var(--a-ease);
}
body.theme-click .cart-page #coupon-input:hover { border-color: var(--a-line-2) !important; }
body.theme-click .cart-page #coupon-input:focus {
  border-color: var(--a-gold-500) !important;
  box-shadow: 0 0 0 3px rgba(198, 169, 107, .14) !important;
  outline: none !important;
}
body.theme-click .cart-page button.s-cart-coupons-coupon-button-apply {
  margin-inline-start: -1px;
  background: transparent !important;
  color: var(--a-text) !important;
  border: 1px solid var(--a-line-2) !important;
  border-start-end-radius: var(--a-r-md) !important;
  border-end-end-radius: var(--a-r-md) !important;
  border-start-start-radius: 0 !important;
  border-end-start-radius: 0 !important;
  font-family: 'Readex Pro', sans-serif !important;
  font-weight: 500 !important;
  transition: color var(--a-fast) var(--a-ease),
              border-color var(--a-fast) var(--a-ease),
              background var(--a-fast) var(--a-ease);
}
body.theme-click .cart-page button.s-cart-coupons-coupon-button-apply:hover {
  background: rgba(198, 169, 107, .08) !important;
  border-color: var(--a-gold-500) !important;
  color: var(--a-gold-300) !important;
}
body.theme-click .cart-page button.s-cart-coupons-coupon-button-apply:focus-visible {
  outline: 2px solid var(--a-gold-500);
  outline-offset: 2px;
}

/* --- the summary card --------------------------------------------------- */

body.theme-click salla-cart-summary-card.s-cart-summary-card {
  position: relative;
  overflow: hidden;
  padding: var(--a-s-5) var(--a-s-5) var(--a-s-4) !important;
  background: var(--a-surface) !important;
  border: 1px solid var(--a-line-2) !important;
  border-radius: var(--a-r-lg) !important;
  box-shadow: var(--a-shadow-md), var(--a-lit-strong) !important;
}

/* The one flourish on this page, and it is the same mark the site header
   already draws: a gold hairline across the panel where the decision is made. */
body.theme-click salla-cart-summary-card.s-cart-summary-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--a-gold-500) 50%, transparent 100%);
}

/* Salla paints the sheet rgb(14,15,15) and its header another near-black, both
   opaque, over the panel's own gradient -- three blacks stacked, and the seam
   between them reads as a band across the top of the card. */
body.theme-click .s-cart-summary-card-sheet-wrap,
body.theme-click .s-cart-summary-card-sheet,
body.theme-click .s-cart-summary-card-sheet-header { background: transparent !important; }

body.theme-click .s-cart-summary-card-sheet-header {
  margin-bottom: var(--a-s-3);
  padding-bottom: var(--a-s-3);
  border-bottom: 1px solid var(--a-line);
}
body.theme-click .s-cart-summary-card-sheet-title {
  font-family: 'Readex Pro', sans-serif !important;
  font-size: .86rem !important;
  font-weight: 400 !important;
  letter-spacing: .06em;
  color: var(--a-muted) !important;
}
body.theme-click .s-cart-summary-card-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--a-muted) !important;
  font-size: .86rem !important;
}
body.theme-click .s-cart-summary-card-line b {
  color: var(--a-text) !important;
  font-family: 'Readex Pro', sans-serif !important;
  font-weight: 400 !important;
}

body.theme-click .s-cart-summary-card-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--a-s-3) !important;
  padding-top: var(--a-s-3) !important;
  background: transparent !important;
  border-top: 1px solid var(--a-line);
}
body.theme-click .s-cart-summary-card-bar-label-main {
  display: flex;
  align-items: baseline;
  gap: .45rem;
}
body.theme-click .s-cart-summary-card-bar-label-text {
  color: var(--a-text) !important;
  font-family: 'Readex Pro', sans-serif !important;
  font-size: .95rem !important;
}
body.theme-click .s-cart-summary-card-bar-count {
  color: var(--a-faint) !important;
  font-size: .72rem !important;
}
body.theme-click .s-cart-summary-card-bar-total {
  color: var(--a-gold-300) !important;
  font-family: 'Readex Pro', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 500 !important;
}

body.theme-click .s-cart-summary-card-action button {
  width: 100% !important;
  min-height: 48px !important;
  background: var(--a-gold-500) !important;
  color: #0B0B0C !important;
  border: 1px solid transparent !important;
  border-radius: var(--a-r-md) !important;
  font-family: 'Readex Pro', sans-serif !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  transition: background var(--a-fast) var(--a-ease),
              transform var(--a-fast) var(--a-ease);
}
body.theme-click .s-cart-summary-card-action button:hover {
  background: var(--a-gold-300) !important;
  transform: translateY(var(--a-lift));
}
body.theme-click .s-cart-summary-card-action button:active { transform: translateY(0); }
body.theme-click .s-cart-summary-card-action button:focus-visible {
  outline: 2px solid var(--a-gold-100);
  outline-offset: 2px;
}
body.theme-click .s-cart-summary-card-action button:disabled {
  background: var(--a-ink-600) !important;
  color: var(--a-faint) !important;
  transform: none;
  cursor: not-allowed;
}

/* --- currency ----------------------------------------------------------- */
/* Same arrangement section 12 fixed for the shelf. Each cell holds the digits
   as a text node followed by <i class="sicon-sar">, and the glyph is bidi
   neutral, so the order is stated outright instead of inherited: direction ltr
   with the row reversed puts the mark left of the figure and keeps it there.
   .item-regular-price is excluded while it carries .hidden -- an !important
   display would have switched a deliberately hidden price back on. */

body.theme-click .cart-page .item-price,
body.theme-click .cart-page .item-regular-price:not(.hidden),
body.theme-click .cart-page .item-total,
body.theme-click .s-cart-summary-card-line b,
body.theme-click .s-cart-summary-card-bar-total {
  display: inline-flex !important;
  flex-direction: row-reverse !important;
  direction: ltr !important;
  align-items: baseline !important;
  gap: .26em !important;
}

body.theme-click .cart-page .item-price .sicon-sar,
body.theme-click .cart-page .item-total .sicon-sar,
body.theme-click .s-cart-summary-card-line .sicon-sar,
body.theme-click .s-cart-summary-card-bar-total .sicon-sar { color: inherit !important; }

/* --- loading ------------------------------------------------------------ */

/* Salla hides every custom element it has not upgraded yet with a blanket
   visibility:hidden across a 2883-character selector list. Reserving the height
   was therefore not enough -- the placeholder held the space and painted
   nothing, which is the same hole it was meant to prevent. */
/* Desktop only, and deliberately so. The resolved card was measured here at
   430 x 243 in the sidebar, so the placeholder can match it exactly. Below the
   sidebar breakpoint the component resolves to a different variant -- the
   class it lands on is s-cart-summary-card--desktop -- and it never hydrated
   inside the editor preview, so its mobile footprint was never measured.
   Reserving a guessed height there would invent the very gap this prevents. */
@media (min-width: 1024px) {
  body.theme-click salla-cart-summary-card:empty {
    visibility: visible !important;
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 243px;
    background: var(--a-surface);
    border: 1px solid var(--a-line-2);
    border-radius: var(--a-r-lg);
    box-shadow: var(--a-shadow-md), var(--a-lit-strong);
    animation: alfa-cart-wait 1600ms var(--a-ease) infinite;
  }

  /* The placeholder wears the panel's own gold edge, so the arrival of the real
     card changes nothing except the words inside it. :empty counts child nodes,
     not pseudo-elements, so drawing this does not stop the rule matching. */
  body.theme-click salla-cart-summary-card:empty::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--a-gold-500) 50%, transparent 100%);
  }
}
body.theme-click .cart-page .s-skeleton-item,
body.theme-click .cart-page .s-basket-gap-skeleton,
body.theme-click .cart-page [class*="skeleton"] {
  background: var(--a-ink-600) !important;
  background-image: none !important;
  border-radius: var(--a-r-sm) !important;
  animation: alfa-cart-wait 1600ms var(--a-ease) infinite;
}
/* The floor has to stay high: an ink panel on an ink page at .45 reads as a
   hole in the layout rather than as something arriving. */
@keyframes alfa-cart-wait {
  0%, 100% { opacity: .68; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.theme-click salla-cart-summary-card:empty,
  body.theme-click .cart-page .s-skeleton-item,
  body.theme-click .cart-page .s-basket-gap-skeleton,
  body.theme-click .cart-page [class*="skeleton"] { animation: none; opacity: 1; }
}

/* --- the empty cart ----------------------------------------------------- */

body.theme-click .cart-page .no-content-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--a-s-4);
  padding: var(--a-s-9) var(--a-s-5);
  text-align: center;
  background: var(--a-surface);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-lg);
  box-shadow: var(--a-lit);
}
body.theme-click .cart-page .no-content-placeholder .icon {
  color: var(--a-gold-700) !important;
  opacity: .42;
  font-size: 72px !important;
  line-height: 1;
}
body.theme-click .cart-page .no-content-placeholder p {
  margin: 0 !important;
  color: var(--a-muted) !important;
  font-family: 'Readex Pro', sans-serif !important;
  font-size: 1.05rem !important;
}
body.theme-click .cart-page .no-content-placeholder .btn--outline-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: var(--a-s-5) !important;
  background: transparent !important;
  color: var(--a-text) !important;
  border: 1px solid var(--a-line-2) !important;
  border-radius: var(--a-r-md) !important;
  font-family: 'Readex Pro', sans-serif !important;
  font-weight: 500 !important;
  transition: border-color var(--a-fast) var(--a-ease),
              color var(--a-fast) var(--a-ease),
              transform var(--a-fast) var(--a-ease);
}
body.theme-click .cart-page .no-content-placeholder .btn--outline-primary:hover {
  border-color: var(--a-gold-500) !important;
  color: var(--a-gold-300) !important;
  transform: translateY(var(--a-lift));
}
body.theme-click .cart-page .no-content-placeholder .btn--outline-primary:active { transform: translateY(0); }

/* --- narrow ------------------------------------------------------------- */

@media (max-width: 1024px) {
  body.theme-click .cart-page .sticky { position: static !important; }
}
@media (max-width: 640px) {
  body.theme-click .cart-page { padding-block: var(--a-s-4) var(--a-s-6); }
  body.theme-click section.cart-item { padding: var(--a-s-4) !important; }
  body.theme-click section.cart-item img { width: 72px !important; height: 72px !important; }
  body.theme-click .s-cart-summary-card-bar-total { font-size: 1.15rem !important; }
  body.theme-click .cart-page .no-content-placeholder { padding: var(--a-s-7) var(--a-s-4); }
  body.theme-click .cart-page .no-content-placeholder .icon { font-size: 56px !important; }
}

/* ==========================================================================
   17. AUDIT FIXES 2026-08-15

   Appended, never edited in place: the nine defects an independent audit
   returned against sections 1-16. Every token change is an override here, so
   deleting this block restores the previous state exactly.

   Measured on the draft (version 970861960, theme Cleek 5541564) before the
   rule was written:

     .s-cart-summary-count        background rgb(248,113,113)   18x18
     --a-was                      #8A6A6A on #08080A = 4.15:1   (gate 4.5)
     .s-quick-buy-apple-pay       width 536.8 of 559.2 = 96%    left short 22.4px
     .product-donation-area       800x0, still a flex child     ~32px of dead card
     .s-quantity-input-button     44x38                         (floor is 44x44)
     salla-payments img           rgba(255,255,255,.92)         L .831 vs gold L .414
     .free-ribbon                 rgb(220,38,38), hidden today
   ========================================================================== */

/* --- 1. the header count ------------------------------------------------- */
/* The one saturated red left on the store, and it shipped on every page: the
   cart badge kept the theme's rgb(248,113,113) while the wishlist heart and
   the delete control were both re-cut away from it. A count is not an alarm.
   Ink plate, gold hairline, gold figure -- the same jewel the rest of the
   skin uses for small marks, and it does not spend the page's one gold
   button. rgb(228,205,151) on rgb(21,21,26) measures 11.68:1 at 10px. */

body.theme-click .s-cart-summary-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  background: var(--a-ink-700) !important;
  border: 1px solid var(--a-gold-700);
  border-radius: 999px;
  color: var(--a-gold-300) !important;
  font-family: 'Readex Pro', sans-serif;
  font-size: .62rem;
  font-weight: 500;
  line-height: 1;
}

/* --- 2. the struck price ------------------------------------------------- */
/* #8A6A6A measured 4.15:1 on the page ink and 3.77:1 on the card, under the
   4.5 floor. #9A7676 is the smallest lift that clears it on all three
   surfaces the strike is ever drawn on -- 4.98:1 on #08080A, 4.80:1 on
   #0E0E11, 4.53:1 on #15151A -- and it keeps the muted warm rose.
   Overridden on body so every rule that reads the token gets the new value. */

body.theme-click { --a-was: #9A7676; }

/* --- 3. the summary card on narrow --------------------------------------- */
/* Below the sidebar breakpoint the card's heading and subtotal row are not
   rendered, but section 16 still ruled the grand-total bar off from them:
   the most valuable card on the site opened with a void and a hairline that
   separated nothing. Keyed on the line itself rather than on a width, so the
   moment the component does render a line the card goes back to the framed
   layout on its own -- and a collapsed-but-present sheet still counts as
   present, which keeps a toggle-able variant untouched. */

body.theme-click .s-cart-summary-card-sheet-wrap:not(:has(.s-cart-summary-card-line)) {
  display: none !important;
}
body.theme-click salla-cart-summary-card:not(:has(.s-cart-summary-card-line)) .s-cart-summary-card-bar {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* --- 4. express checkout alignment --------------------------------------- */
/* salla-quick-buy draws the express button at 96% of the row, so its right
   edge lands on the buy row and its left edge falls 22.4px short of it --
   a stagger under the two buttons that matter most. Width only; the button's
   own fill and mark are Apple's and are not ours to redraw. */

body.theme-click .s-quick-buy-apple-pay { width: 100% !important; }

/* --- 5. the rest of the dead line item ----------------------------------- */
/* Section 16 cut the row's mb-8 to 12px and left 32px of empty card below it.
   The remainder is the donation block: 800x0, holding only whitespace, but
   still a flex child of salla-conditional-fields, so it takes the column gap
   and it keeps the row above it from being :last-child. Removed from the
   layout only while it is genuinely childless, and the row's own gap goes
   with it -- both rules stop applying the moment the block fills. */

body.theme-click section.cart-item .product-donation-area:not(:has(> *)) {
  display: none !important;
}
body.theme-click section.cart-item salla-conditional-fields:not(:has(.product-donation-area > *)) > div:first-child {
  margin-bottom: 0 !important;
}

/* --- 6. total to checkout ------------------------------------------------ */
/* The action block ships 16px of lead-in on the sidebar and 8px on narrow,
   which puts the tightest spacing on the page at the point of decision.
   One value, stated once, so both widths measure the same. */

body.theme-click .s-cart-summary-card-action {
  padding-top: var(--a-s-4) !important;
}

/* --- 7. the stepper's touch target --------------------------------------- */
/* 44x38 against a 44px floor in both axes. The container is 40px tall and
   grows with its children, so raising the three cells is enough; the input
   comes with them or the row reads ragged. */

body.theme-click .s-quantity-input-button,
body.theme-click .s-quantity-input-input {
  min-height: 44px !important;
}

/* --- 8. the payment marks ------------------------------------------------ */
/* At .92 the plates were the brightest thing on the cart -- brighter than the
   gold checkout, which inverts the page on a squint test. .62 puts the plate
   at luminance .356, below the gold's .414, and the marks stay readable
   because they are dark artwork on a light plate either way. */

body.theme-click salla-payments img,
body.theme-click .payment-methods img {
  background: rgba(255, 255, 255, .62) !important;
  opacity: .82;
}

/* --- 9. the free-product flag -------------------------------------------- */
/* Hidden today, and the first free product would have put rgb(220,38,38) on
   top of a product photograph. Neutralised where it stands; nothing built
   around it. rgb(8,8,10) on rgb(168,133,68) measures 5.82:1. */

body.theme-click .free-ribbon {
  background: var(--a-gold-700) !important;
  color: var(--a-ink-900) !important;
  box-shadow: none !important;
}

/* --- 17b. two corrections measured after the first deploy ---------------- */
/* 4 again. The express button is not narrowed by width -- Salla caps it with
   max-width: 96%, so the width rule alone measured no change at all: 536.8 of
   559.2 before and after. The cap is the thing that has to go. */

body.theme-click .s-quick-buy-apple-pay { max-width: 100% !important; }

/* 7 again. Raising the three cells to the 44px floor overflowed a container
   Salla fixes at 40px, and section 16 clips that container with overflow
   hidden on the cart -- so the taller control was being cut by 4px exactly
   where its focus ring is drawn. The container has to grow with its children
   instead, which is what the 44px floor needed in the first place. */

body.theme-click .s-quantity-input-container {
  height: auto !important;
  min-height: 46px;
}

/* --- 17c. fix 3 again, after measuring at 390 ---------------------------- */
/* The first condition was wrong and the measurement says so. At 390 the card
   resolves to s-cart-summary-card--mobile and the heading and the subtotal
   ARE in the tree -- inside a sheet wrapper collapsed to 0px, which is why
   the audit read them as absent. :has(.s-cart-summary-card-line) was
   therefore always true and the rule above never fired once. The real state
   is the wrapper's own open flag. Measured at 390: 24px of card padding,
   then 12px and a 1px rule drawn against nothing, 37px from the card's top
   edge to the grand total. With the sheet closed the total is simply the
   first thing in the card, and the hairline comes back the moment it opens. */

body.theme-click salla-cart-summary-card:not(:has(.s-cart-summary-card-sheet-wrap--open)) .s-cart-summary-card-bar {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* ==========================================================================
   18. CART SUMMARY PIN FIX

   Appended, never edited in place. Salla pins the summary card to the bottom
   of the screen on small viewports, out of its own component sheet:

     @media (max-width: 1023px) { .s-cart-summary-card {
       position: fixed; inset-inline: 0; bottom: 0; z-index: 1; } }

   Section 16 overrode that with a rule carrying higher specificity and NO
   media query, so it applied at every width. Only position and overflow were
   clobbered -- bottom, inset-inline and z-index went on applying -- and the
   card fell back into flow as a direct child of body, landing after the
   footer instead of on top of it.

   Measured on the draft at 390x730 before this block, and identical at 440
   because the override carried no width condition:

     footer.store-footer          686..1393
     salla-cart-summary-card      1393..1544    position relative
     document                     1594 tall

   The gold checkout button sat 663px past the fold, reachable only by
   scrolling the whole footer first. Scoping the two clobbered declarations
   to desktop hands the small viewports back to Salla.

   position: relative is in section 16 only so the ::before gold hairline has
   a positioned ancestor. A fixed element is a containing block for
   absolutely positioned descendants as well, so the hairline is unaffected.
   Padding, background, border, shadow and every other declaration on that
   rule go on applying at all widths.

   The one addition is the radius. Pinned, the card spans inset-inline 0 and
   sits flush on the bottom edge, so 10px corners would float against the
   screen edges instead of reading as a bar. Flattened to 0 -- full bleed,
   with the top border and the gold hairline still doing the separating.
   ========================================================================== */

@media (max-width: 1023px) {
  body.theme-click salla-cart-summary-card.s-cart-summary-card {
    position: fixed;
    overflow: visible;
    border-radius: 0 !important;
  }
}

/* ==========================================================================
   19. THE WORDMARK -- sizing and breathing room

   From mio's independent audit of the new transparent mark, all three numbers
   measured rather than judged:

   1. At a 40px box the hero mark left only 23.0px of dense, readable band, a
      lower-quartile stroke of 0.99px, and 30% of strokes at a single pixel. It
      reads, but it reads thin and unconfident on a 1x desktop panel. The stroke
      stops looking thin at about 56px. Floor is 48px; never below 44px.

   2. The hierarchy was inverted: footer 70px against hero 40px, 1.75x in favour
      of the sign-off. The hero is the brand moment; it may never be smaller
      than the footer.

   3. The old logo carried 16.8% of horizontal safe area baked into its file.
      The transparent one carries 1.9% -- effectively none, because the ink now
      fills 96.4% of the frame. The clearance has to be re-added outside the
      image or the mark will touch whatever sits beside it. Half the mark's
      height on each side is the classic wordmark rule.

   WARNING FOR THE HEADER, when the store-level gate finally opens: do NOT swap
   the file at the same box height. The script itself draws 66% larger at equal
   height (the old file was mostly padding), and it loses its margin at the same
   moment. Set the height and the padding together, in one change.
   ========================================================================== */

body.theme-click .hero-area img {
  height: 56px !important;
  width: auto !important;
  padding-inline: 28px;          /* half the mark height, each side */
  box-sizing: content-box;
}

body.theme-click .footer-logo img {
  height: 48px !important;
  width: auto !important;
  padding-inline: 24px;
  box-sizing: content-box;
}

@media (max-width: 900px) {
  body.theme-click .hero-area img { height: 48px !important; padding-inline: 24px; }
  body.theme-click .footer-logo img { height: 44px !important; padding-inline: 22px; }
}

/* 19b. The hero mark would not grow, and the reason was not specificity.

   The theme writes an INLINE style on that image:
     max-width: 120px; max-height: 40px; height: auto; width: auto; object-fit: contain;
   A max-height always beats a height, whatever the importance of the height --
   so `height: 56px !important` was being obeyed and then clamped. The cap has
   to be raised, not out-shouted. Measured, not guessed: at 56px the mark draws
   88.8px wide (aspect 1.585), which is why max-width goes to 140 rather than
   staying at the theme's 120 and clipping it a second time.

   The two ancestors are locked to height 40px with overflow visible, so they are
   released to auto as well; otherwise the row keeps its old height and the
   taller mark simply overhangs it. */

body.theme-click .hero-area img {
  max-height: 56px !important;
  max-width: 140px !important;
}

body.theme-click .hero-area a.inline-block,
body.theme-click .hero-area a.inline-block > * {
  height: auto !important;
}

@media (max-width: 900px) {
  body.theme-click .hero-area img {
    max-height: 48px !important;
    max-width: 120px !important;
  }
}

/* ==========================================================================
   20. GROUND A -- parchment bone (2026-09-12)
   (numbered 20: the editor already carries a section 19 "THE WORDMARK"
    that the disk mirror lacked; read from the editor 2026-09-12 23:2x)

   Appended after 19, never edited in place; delete this one block to return
   the draft to the dark ground exactly. Owner's words: "not black", and he
   chose candidate A of theme/cleek/candidates/. Ground only: no new copy, no
   new glyphs, no JavaScript.

   THE IDEA. The label is a black plate on a white sticker (labels/tokens.json)
   and all four product photographs are shot on black (corners (1,1,1) and
   (10,10,11), measured 2026-09-12). So the page turns bone and every
   photograph keeps living inside a BLACK PLATE, --a-plate, that matches the
   photo's own background. The plate is the identity element; the ground is
   what changed.

   HOW IT IS BUILT. Section 1 re-points the tokens (declared on :root AND on
   body.theme-click so it also beats section 17's body-level --a-was).
   Everything in sections 1-18 that reads a token follows automatically.
   Sections 2-8 re-declare, with the same selectors and the same !important
   discipline, only the rules that either (a) bake a dark colour, (b) use a
   gold stop as a line or outline, which fails 3:1 on bone, or (c) paint a
   photograph well, which must become the plate.

   THE GOLD ROLE. #C6A96B is unchanged and stays the only signal: the button
   FILL (ink on gold 8.70:1) and every plate line. On the bone it cannot
   carry text (1.71:1), so the "lit gold" role that the skin expresses as
   --a-gold-300 -- prices, hover text, the hero italic -- is re-pointed here
   to the deep stop #6B5322 (5.50:1 on the ground, 6.30:1 on a card). The
   four rules that used --a-gold-300 as a hover FILL are re-pinned below to
   the light stop kept in --a-gold-hover, so a hovered button still gets
   lighter, never darker.

   MEASURED (ground_math.py 2026-09-12; confirmed on the real draft with
   sections/probe19.py, see sections/19A-measures.json):
     text  #1C1712  13.45 on ground / 15.40 on card
     muted #574E42   6.17 / 7.06        faint #655C4F  4.97 / 5.69
     was   #7E4F4F   5.09 (hue 0, sat .23 -- rose, not red)
     price #6B5322   5.50 / 6.30        rules #8A6B34  3.75 / 4.29
     button ink #0B0B0C on #C6A96B 8.70; button edge #6B5322 on ground 5.50
     wordmark gold on the plate 10.62 (on bone it would be 1.98 -- hence tile)
   ========================================================================== */

/* --- 1. tokens ---------------------------------------------------------- */

:root,
body.theme-click {
  --a-ink-900: #E9DFCB;
  --a-ink-800: #F1E9D8;
  --a-ink-700: #F5EEDF;
  --a-ink-600: #DFD3BB;

  --a-plate: #08080A;
  --a-plate-hi: #141319;
  --a-plate-bg: radial-gradient(72% 62% at 50% 45%, #141319 0%, #08080A 74%);
  --a-plate-lit: inset 0 1px 0 rgba(240, 226, 190, .16);
  --a-on-plate: #E4CD97;

  --a-gold-100: #F0E2BE;
  --a-gold-300: #6B5322;
  --a-gold-hover: #E4CD97;
  --a-gold-500: #C6A96B;
  --a-gold-700: #A88544;
  --a-gold-800: #8A6B34;
  --a-gold-900: #6B5322;

  --a-signal-text: #6B5322;
  --a-signal-line: #8A6B34;
  --a-btn-ink: #0B0B0C;
  --a-btn-edge: #6B5322;

  --a-plus:   #6C6D71;
  --a-gold:   #C6A96B;
  --a-strong: #456440;

  --a-text:  #1C1712;
  --a-muted: #574E42;
  --a-faint: #655C4F;
  --a-line:   rgba(40, 28, 10, .16);
  --a-line-2: rgba(40, 28, 10, .28);
  --a-was:    #7E4F4F;

  --a-shadow-sm: 0 1px 2px rgba(60, 40, 10, .10), 0 4px 12px rgba(60, 40, 10, .08);
  --a-shadow-md: 0 2px 4px rgba(60, 40, 10, .12), 0 12px 32px rgba(60, 40, 10, .12);
  --a-lit:        inset 0 1px 0 rgba(255, 255, 255, .55);
  --a-lit-strong: inset 0 1px 0 rgba(255, 255, 255, .85);
  --a-surface: linear-gradient(180deg, var(--a-ink-700) 0%, var(--a-ink-800) 100%);
  --a-hero-bg: radial-gradient(120% 90% at 50% 0%, #F6F0E3 0%, #E9DFCB 62%);
  --a-bar-bg:  linear-gradient(90deg, #EEE6D4, #F4EDDD, #EEE6D4);
}

/* --- 2. the baked darks -------------------------------------------------- */

.alfa-bar { background: var(--a-bar-bg); }
.alfa-hero { background: var(--a-hero-bg); }

/* --- 3. photograph wells become the plate --------------------------------- */

body.theme-click .product-entry__image { background: var(--a-plate) !important; }
.alfa-hero__fig { background: var(--a-plate); box-shadow: var(--a-shadow-md), var(--a-plate-lit); }
.alfa-deal__fig { background: var(--a-plate); }
body.theme-click .details-slider-wrapper,
body.theme-click .details-slider {
  background: var(--a-plate-bg) !important;
  background-color: var(--a-plate) !important;
}
body.theme-click section.cart-item img { background: var(--a-plate) !important; }

/* --- 4. the wordmark tile ------------------------------------------------- */
/* The gold wordmark measures 1.98:1 on bone and 10.62:1 on the plate; the
   tile is the label itself, a black plate on a light sticker. Home renders
   header.has-no-logo, so on the home page nothing changes here. */

body.theme-click a.navbar-brand,
body.theme-click a.footer-logo,
body.theme-click .hero-area > .flex > a.inline-block.flex-shrink-0 {
  display: inline-flex;
  align-items: center;
  background: var(--a-plate);
  border-radius: var(--a-r-sm);
  padding: var(--a-s-1) var(--a-s-3);
  box-shadow: var(--a-plate-lit);
}

/* --- 5. gold used as a fill: hover stays LIGHTER, and gets an edge -------- */

body.theme-click .btn--primary,
body.theme-click .s-button-primary,
body.theme-click salla-add-product-button button,
body.theme-click .btn--add-to-cart button,
body.theme-click salla-add-product-button.btn--add-to-cart button {
  border-color: var(--a-btn-edge) !important;
}
body.theme-click .btn--primary:hover,
body.theme-click .s-button-primary:hover,
body.theme-click salla-add-product-button button:hover,
body.theme-click .btn--add-to-cart button:hover {
  background: var(--a-gold-hover) !important;
}
.alfa-btn--gold { border-color: var(--a-btn-edge); }
.alfa-btn--gold:hover { background: var(--a-gold-hover); }
body.theme-click .s-cart-summary-card-action button:hover { background: var(--a-gold-hover) !important; }

/* --- 6. gold used as a line, outline or ring: the 3:1 stop ---------------- */

body.theme-click header::after,
body.theme-click salla-cart-summary-card.s-cart-summary-card::before {
  background: linear-gradient(90deg, transparent 0%, var(--a-signal-line) 50%, transparent 100%);
}
@media (max-width: 1023px) {
  body.theme-click salla-cart-summary-card:empty::before {
    background: linear-gradient(90deg, transparent 0%, var(--a-signal-line) 50%, transparent 100%);
  }
}
body.theme-click .s-block__title::after { background: var(--a-signal-line); }
body.theme-click .search-bar input:focus,
body.theme-click salla-search input:focus,
body.theme-click .cart-page #coupon-input:focus { border-color: var(--a-signal-line) !important; }
body.theme-click .btn--wishlist:hover,
body.theme-click .s-menu-topnav-item:hover,
body.theme-click .cats-list a[class*="topnav-link"]:hover,
body.theme-click .cart-page button.s-cart-coupons-coupon-button-apply:hover,
body.theme-click .cart-page .no-content-placeholder .btn--outline-primary:hover { border-color: var(--a-signal-line) !important; }
.alfa-btn--ghost:hover { border-color: var(--a-signal-line); }
body.theme-click .cart-page .btn--delete button:focus-visible,
body.theme-click .cart-page .s-quantity-input-button:focus-visible,
body.theme-click .cart-page button.s-cart-coupons-coupon-button-apply:focus-visible { outline-color: var(--a-signal-line); }
.alfa-eyebrow { color: var(--a-signal-text); }

/* --- 7. controls that sat as dark glass on a dark card -------------------- */
/* The wishlist heart stays glass because it sits on the plate; its icon is
   re-lit so it reads on black. The cart delete control sits on a bone card,
   so it becomes a bone well. */

body.theme-click .btn--wishlist i,
body.theme-click .btn--wishlist .sicon-heart { color: var(--a-on-plate) !important; }
body.theme-click .cart-page .btn--delete button {
  background: var(--a-ink-600) !important;
  color: var(--a-muted) !important;
}

/* --- 8. section 17 leftovers that assumed a dark ground ------------------- */

body.theme-click .cart-page .no-content-placeholder .icon { color: var(--a-gold-800) !important; }
body.theme-click .s-cart-summary-count { border-color: var(--a-gold-800); }
body.theme-click .free-ribbon { color: var(--a-btn-ink) !important; }

/* --- 9. Cleek's own darks the dark skin never had to touch ---------------- */
/* Found by sweeping every text node and every opaque box on the real draft
   with this block injected (sections/sweep19.py, 2026-09-12). Each of these
   is painted rgb(14,15,15) or rgb(29,31,31) by the theme itself and matched
   the old ground by accident. */

body.theme-click .cats-list .root-level > a,
body.theme-click .cats-list a.collapsible-title,
body.theme-click .cats-list a.offers-link {
  background: var(--a-ink-700) !important;
  color: var(--a-text) !important;
  border: 1px solid var(--a-line) !important;
  border-radius: var(--a-r-sm) !important;
  box-shadow: var(--a-lit);
}
body.theme-click .cats-list .root-level > a:hover,
body.theme-click .cats-list a.collapsible-title:hover,
body.theme-click .cats-list a.offers-link:hover {
  border-color: var(--a-signal-line) !important;
  color: var(--a-signal-text) !important;
}
body.theme-click .cats-list .root-level > a span,
body.theme-click .cats-list a.collapsible-title span,
body.theme-click .cats-list a.offers-link span { color: inherit !important; }
/* The chip scroller fades its edges into the theme's rgb(29,31,31); on bone
   the fade must be bone. */
body.theme-click .cats-list-wrap-inner::before { background-image: linear-gradient(to left, #F1E9D8, rgba(241, 233, 216, 0)) !important; }
body.theme-click .cats-list-wrap-inner::after  { background-image: linear-gradient(to right, #F1E9D8, rgba(241, 233, 216, 0)) !important; }
body.theme-click .cats-list-wrap::before { background-image: linear-gradient(to left, #F1E9D8, rgba(241, 233, 216, 0)) !important; }
body.theme-click .cats-list-wrap::after  { background-image: linear-gradient(to right, #F1E9D8, rgba(241, 233, 216, 0)) !important; }
body.theme-click .s-slider-nav-arrow {
  background: var(--a-ink-700) !important;
  color: var(--a-text) !important;
  border: 1px solid var(--a-line) !important;
}
body.theme-click .store-footer__inner { background: var(--a-ink-800) !important; }
body.theme-click .store-footer__info-bar { background: var(--a-ink-700) !important; border-top: 1px solid var(--a-line); }
body.theme-click .store-footer__info-bar .text-gray-600,
body.theme-click .store-footer__info-bar p,
body.theme-click .store-footer__info-bar a { color: var(--a-muted) !important; }
body.theme-click .store-footer__info-bar h4 { color: var(--a-text) !important; }
body.theme-click .side-panel,
body.theme-click .side-panel .inner,
body.theme-click .side-panel .inner.bg-inherit {
  background: var(--a-ink-800) !important;
  color: var(--a-text) !important;
}
/* The off-canvas menu repeats the nav in white, with the offers link in the
   theme's rgb(248,113,113) -- the last saturated red on the store. */
body.theme-click .side-panel .main-menu a,
body.theme-click .side-panel .main-menu a span { color: var(--a-text) !important; }
body.theme-click .side-panel .main-menu a.offers-link,
body.theme-click .side-panel .main-menu a.offers-link span { color: var(--a-signal-text) !important; }
body.theme-click .s-cart-summary-card-line span { color: inherit !important; }

/* end 20 */

/* ==========================================================================
   21. GROUND A -- FIXES after mio (2026-09-12)

   Appended after 20, never edited in place; delete this one block to return
   to the state mio audited. Five items only, all raised by mio's audit
   (sections/AUDIT-MIO-ground-A-2026-09-12.md) and Razan's external read.
   Everything inherited from Cleek (button clipping, the fold, Apple Pay, the
   empty-cart opacity, faux italic, tracking) is out of scope by the owner's
   "white only" and is NOT touched here.

   1. PRICE EMPHASIS. Section 20 re-pointed --a-gold-300 to #6B5322, which
      made the sale price WEAKER than body text (5.50 vs 13.45), and the skin's
      broad rule  [class*="price"]:not([class*="before"]):not([class*="old"])
      (specificity 0,4,1, section 1) was catching span.regular-price on the
      shelf card, so the struck price printed in the same colour as the sale
      price (mio: sale 199=(107,83,34) struck 300=(107,83,34)). On the
      product page the struck price is .before-price and escaped that rule.
      Fix: sale price = --a-text at weight 600 on every surface, struck price
      = --a-was on every surface (selectors at >= 0,4,1 so they win the tie
      by order), and the "apart" figure in the bundle table = --a-faint so
      524 no longer outweighs 449. Gold stays for the brand only.

   2. FOOTER TILE. a.footer-logo is a flex child of a column that stretches
      it to the column width, so the plate ran 424px (366 on the phone) with
      the mark at one end. width: fit-content; the start-edge alignment is
      unchanged.

   3. CHIP FADE. The scroller's edge fade was pinned to #F1E9D8 (ink-800) but
      the row sits on the page itself (.hero-area and .store-content are
      transparent; measured chain 2026-09-12), so the fade must resolve to
      --a-ink-900.

   4. HOVER DIRECTION. On a light ground a hover that LIGHTENS the gold fill
      (#E4CD97, 1.18:1 on bone) dissolves the button. Hover darkens instead:
      --a-gold-hover -> #A88544 (gold-700); button ink #0B0B0C on it 5.82:1
      (section 17 measured the same pair for the free ribbon).

   5. THE LAST SATURATED RED. Cleek paints the side-panel close control,
      button.close-menu.sicon-cancel, on rgb(239,68,68) at 40x40 (measured
      with the panel open, 2026-09-12). Re-cut in the system's material at
      44x44. Its glyph drew as an empty square NOT because the icon font
      failed to load (document.fonts.check('20px sallaicons') = true) but
      because section 1 forces IBM Plex Sans Arabic on every <button>, and the
      ::before that carries the private-use glyph inherits it. The glyph is
      handed back its font here, for this button only; the same defect class
      exists on any other button that carries a sicon-* class and is left for
      a later section. The wishlist outline-color Razan read as #EF4444 now
      computes as --a-text with outline-style none; :focus-visible is pinned
      to the gold ring regardless, and proven by a keyboard focus.
   ========================================================================== */

/* --- 1. price emphasis ---------------------------------------------------- */

body.theme-click [class*="price"]:not([class*="before"]):not([class*="old"]):not([class*="regular"]),
body.theme-click .product-entry .price-wrapper .sale-price,
body.theme-click .product-details h2.sale-price,
body.theme-click .cart-page .item-price,
body.theme-click .s-cart-summary-card-bar-total,
body.theme-click .s-cart-summary-card-line b {
  color: var(--a-text) !important;
  font-weight: 600 !important;
}
.alfa-bar__now,
body.theme-click .alfa-bar__now { color: var(--a-text); font-weight: 600; }
body.theme-click .alfa-deal__math dd.is-hi,
body.theme-click .alfa-deal__math dd.is-hi .alfa-deal__num,
body.theme-click .alfa-deal__math dd.is-hi .alfa-sar { color: var(--a-text); font-weight: 600; }
body.theme-click .alfa-deal__math dd:not(.is-hi),
body.theme-click .alfa-deal__math dd:not(.is-hi) .alfa-deal__num,
body.theme-click .alfa-deal__math dd:not(.is-hi) .alfa-sar { color: var(--a-faint); font-weight: 400; }

body.theme-click .product-entry .price-wrapper .regular-price,
body.theme-click [class*="price"].regular-price,
body.theme-click [class*="price"][class*="before"],
body.theme-click .cart-page .item-regular-price:not(.hidden),
.alfa-bar__was,
body.theme-click .alfa-bar__was {
  color: var(--a-was) !important;
  font-weight: 400 !important;
  text-decoration: line-through;
}

/* --- 2. footer tile ------------------------------------------------------- */

body.theme-click a.footer-logo {
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
}

/* --- 3. chip fade --------------------------------------------------------- */

body.theme-click .cats-list-wrap-inner::before,
body.theme-click .cats-list-wrap::before { background-image: linear-gradient(to left, var(--a-ink-900), rgba(233, 223, 203, 0)) !important; }
body.theme-click .cats-list-wrap-inner::after,
body.theme-click .cats-list-wrap::after  { background-image: linear-gradient(to right, var(--a-ink-900), rgba(233, 223, 203, 0)) !important; }

/* --- 4. hover darkens ----------------------------------------------------- */

:root,
body.theme-click { --a-gold-hover: #A88544; }

/* --- 5. the last saturated red -------------------------------------------- */

body.theme-click .side-panel button.close-menu {
  background: var(--a-ink-700) !important;
  background-image: none !important;
  color: var(--a-text) !important;
  border: 1px solid var(--a-line) !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px;
  box-shadow: var(--a-lit);
}
body.theme-click .side-panel button.close-menu::before {
  font-family: 'sallaicons' !important;
  color: var(--a-text) !important;
}
body.theme-click .side-panel button.close-menu:hover { border-color: var(--a-signal-line) !important; color: var(--a-signal-text) !important; }
body.theme-click .btn--wishlist:focus-visible,
body.theme-click .btn--wishlist button:focus-visible,
body.theme-click .side-panel button.close-menu:focus-visible {
  outline: 2px solid var(--a-signal-line) !important;
  outline-offset: 2px !important;
}

/* end 21 */

/* ==========================================================================
   22. WELLS BECOME THE GROUND -- candidate, NOT pushed (2026-09-13)

   Why: the four product photographs are being reshot on a light travertine
   surface (promo/shoot-2026-09-12/out/deliver/, gate 17/17). Section 20 put
   every photograph inside a BLACK plate because the OLD photographs were
   shot on black (corners (1,1,1) and (10,10,11)). A light photograph inside
   a black plate reads as a framed hole, so the wells are re-pointed to the
   ground. The wordmark tile (section 20 part 4) is untouched: the mark is
   gold on the plate (10.62:1) and stays a plate.

   Scope: only the five well selectors of section 20 part 3. No aspect-ratio
   change, no object-fit change, no new copy. The card well stays landscape
   with contain (52 px of ground beside a 4:5 photo at 1440, 21 px at 390);
   closing that gap is a separate decision (slots.json "theme_change_needed").

   Injected in preview only via Playwright add_style_tag after the
   970861960.css link; delete this one block to return to section 21.
   ========================================================================== */

/* --- 1. wells: ground, not plate ------------------------------------------ */

body.theme-click .product-entry__image {
  background: var(--a-ink-700) !important;
  box-shadow: none;
}
.alfa-hero__fig {
  background: transparent;
  box-shadow: var(--a-shadow-md);
}
.alfa-deal__fig { background: transparent; }
body.theme-click .details-slider-wrapper,
body.theme-click .details-slider {
  background: transparent !important;
  background-color: transparent !important;
}
/* Cleek veils the gallery container in rgba(0,0,0,.2): invisible on the
   plate (8 -> 6), a grey-brown box on bone (233 -> 186; measured on the
   draft 2026-09-13). The veil IS the gallery well, so it goes too. */
body.theme-click .details-slider .swiper.s-slider-container { background: transparent !important; }
body.theme-click section.cart-item img { background: transparent !important; }

/* end 22 */

/* ==========================================================================
   23. NATIONAL DAY -- campaign band, nav chip, /offers, cart thumb (2026-09-13)

   Appended after 22, never edited in place; delete this one block to remove
   every National-Day style at once (the JS-02 block in the JS document builds
   the markup; without this block it renders unstyled, without JS-02 this block
   matches nothing). Owner's words: a new "National Day offers" slot, prices
   369 / 169 / 139 / 119 (read live, never written here), free delivery over
   200, and the campaign bottles must look DIFFERENT from the normal ones and
   sit prominently at the top of the home page.

   THE IDEA. One campaign band directly under the header: deep green velvet
   (#0B4A2E, the ground of the four National-Day photographs) under a 1px gold
   line, gold titles, bone-gold text, four dark wells carrying the campaign
   photographs, and Salla's own add-to-cart button in the store's one gold.
   It is a documented TEMPORARY campaign exception: the green lives on the
   band's own custom properties (--nd-*), never on :root, so tokens.css and
   sections 20-22 are untouched and the rest of the page stays bone.

   MEASURED (WCAG 2.x relative luminance, 2026-09-13):
     band #0B4A2E vs bone ground #E9DFCB        7.81  (non-text >= 3)
     well #093D26 = 18% black over the band
     title  #C6A96B  4.57 on band / 5.44 on well   (text >= 4.5)
     eyebrow/hover #E4CD97  6.63 / 7.90
     text   #F0E2BE  8.03 / 9.56
     struck #CDBFA0  5.68 / 6.77  (rose-free; a bone shade, not a red)
     gold line / gold button fill vs band 4.57 (non-text >= 3)
     button ink #0B0B0C on #C6A96B 8.70 (unchanged from the skin)
   Type: Readex Pro for titles, prices and buttons, IBM Plex Sans Arabic for
   body; no letter-spacing on Arabic; every touch target >= 44 px; motion is
   transform/opacity only, one entrance, zeroed under reduced motion.
   ========================================================================== */

/* --- 1. the band ----------------------------------------------------------- */

/* Cleek's Tailwind preflight already makes every box border-box; stated here
   so the 44px floors below mean the whole box wherever this block is read. */
.alfa-nd, .alfa-nd *, .alfa-nd *::before, .alfa-nd *::after,
.alfa-nd-offers, .alfa-nd-offers * { box-sizing: border-box; }

.alfa-nd {
  --nd-bg: #0B4A2E;
  --nd-well: #093D26;
  --nd-gold: #C6A96B;
  --nd-gold-lit: #E4CD97;
  --nd-text: #F0E2BE;
  --nd-was: #CDBFA0;
  --nd-line: rgba(198, 169, 107, .38);
  position: relative;
  z-index: 1;
  background:
    radial-gradient(70% 90% at 88% 0%, rgba(198, 169, 107, .16) 0%, rgba(198, 169, 107, 0) 62%),
    var(--nd-bg);
  color: var(--nd-text);
  border-top: 1px solid var(--nd-gold);
  padding: var(--a-s-7) 0;
  overflow-x: clip;
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}
/* Section 1 flattens every <section> to transparent (!important, 0,1,2); the
   band is the one section that carries its own ground (0,2,2, later). */
body.theme-click section.alfa-nd { background-color: var(--nd-bg) !important; }

/* Section 21 paints every [class*="price"] in --a-text at 600 (0,5,1 with
   !important) -- on the green it would print the price in ink. Same
   specificity, later in the document, so these win by order. */
body.theme-click .alfa-nd .alfa-nd__price .alfa-price-pair.alfa-nd__now,
body.theme-click .alfa-nd .alfa-nd__ship .alfa-price-pair.alfa-price-pair,
body.theme-click .alfa-nd .alfa-nd__price .alfa-price-pair.alfa-nd__now .alfa-sar { color: var(--nd-text) !important; }
body.theme-click .alfa-nd .alfa-nd__was .alfa-price-pair.alfa-price-pair,
body.theme-click .alfa-nd .alfa-nd__was .alfa-price-pair.alfa-price-pair .alfa-sar { color: var(--nd-was) !important; font-weight: 400 !important; }
body.theme-click .alfa-nd .alfa-nd__ship .alfa-price-pair.alfa-price-pair { font-weight: 500 !important; }
/* the bar's struck pair inherits the same collision: keep it rose and light */
body.theme-click .alfa-bar__was .alfa-price-pair.alfa-price-pair.alfa-price-pair,
body.theme-click .alfa-bar__was .alfa-price-pair.alfa-price-pair .alfa-sar { color: var(--a-was) !important; font-weight: 400 !important; }
body.theme-click .alfa-bar__was { white-space: nowrap; }

.alfa-nd__wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--a-s-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  grid-template-areas: "copy hero" "grid hero";
  gap: var(--a-s-6) var(--a-s-8);
  align-items: start;
}

/* --- 2. copy ---------------------------------------------------------------- */

.alfa-nd__copy { grid-area: copy; max-width: 62ch; }

.alfa-nd__eyebrow {
  display: block;
  font-family: 'Readex Pro', system-ui, sans-serif;
  font-size: 13px;
  color: var(--nd-gold-lit);
  margin-bottom: var(--a-s-2);
}

.alfa-nd__title {
  font-family: 'Readex Pro', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.25;
  color: var(--nd-gold);
  margin: 0 0 var(--a-s-3);
}

.alfa-nd__body {
  color: var(--nd-text);
  font-size: 15px;
  line-height: 1.75;
  max-width: 46ch;
  margin: 0 0 var(--a-s-4);
}

.alfa-nd__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-s-3); }

.alfa-nd__ship {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--a-s-4);
  border: 1px solid var(--nd-line);
  border-radius: 999px;
  color: var(--nd-text);
  font-size: 13px;
  white-space: nowrap;
  margin: 0;
}
.alfa-nd__ship-in { display: inline; }
.alfa-nd__ship .alfa-price-pair { white-space: nowrap; font-family: 'Readex Pro', system-ui, sans-serif; font-weight: 500; margin-inline: .1em; }

.alfa-btn.alfa-nd__all {
  min-height: 44px;
  white-space: nowrap;
  color: var(--nd-text);
  background: transparent;
  border-color: var(--nd-gold);
  font-size: 13px;
}
.alfa-btn.alfa-nd__all:hover {
  color: var(--nd-gold-lit);
  border-color: var(--nd-gold-lit);
  background: rgba(198, 169, 107, .12);
  transform: translateY(var(--a-lift));
}
.alfa-btn.alfa-nd__all:focus-visible { outline: 2px solid var(--nd-gold); outline-offset: 2px; }

/* --- 3. the hero figure: the campaign bundle as the one signature moment ---- */

.alfa-nd__hero {
  grid-area: hero;
  align-self: stretch;
  margin: 0;
  min-height: 420px;
  border-radius: var(--a-r-lg);
  overflow: hidden;
  background: var(--nd-well);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .28), 0 24px 48px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(240, 226, 190, .18);
  animation: alfa-nd-rise var(--a-slow) var(--a-ease) both;
}
.alfa-nd__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes alfa-nd-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- 4. the four offer cards ------------------------------------------------ */

.alfa-nd__grid {
  grid-area: grid;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--a-s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.alfa-nd__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--nd-well);
  border-top: 2px solid var(--nd-gold);
  border-radius: var(--a-r-lg);
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25), 0 12px 32px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(240, 226, 190, .14);
  transition: transform var(--a-base) var(--a-ease), box-shadow var(--a-base) var(--a-ease);
}
.alfa-nd__card:hover {
  transform: translateY(var(--a-lift));
  box-shadow: 0 4px 8px rgba(0, 0, 0, .28), 0 18px 40px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(240, 226, 190, .22);
}

.alfa-nd__well {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--nd-well);
}
.alfa-nd__well img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alfa-nd__well:focus-visible { outline: 2px solid var(--nd-gold); outline-offset: -2px; }

.alfa-nd__badge {
  position: absolute;
  inset-block-start: var(--a-s-3);
  inset-inline-start: var(--a-s-3);
  font-family: 'Readex Pro', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--nd-text);
  background: rgba(9, 61, 38, .86);
  border: 1px solid var(--nd-gold);
  border-radius: var(--a-r-sm);
  padding: .38rem .6rem;
  white-space: nowrap;
}

.alfa-nd__body-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--a-s-2);
  padding: var(--a-s-4) var(--a-s-4) var(--a-s-5);
  flex: 1 1 auto;
}

.alfa-nd__info {
  display: flex;
  flex-direction: column;
  gap: var(--a-s-2);
  min-height: 44px;
  color: var(--nd-text);
  text-decoration: none;
}
.alfa-nd__info:focus-visible { outline: 2px solid var(--nd-gold); outline-offset: 2px; }
.alfa-nd__name {
  display: block;
  font-family: 'Readex Pro', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--nd-text);
  transition: color var(--a-fast) var(--a-ease);
}
.alfa-nd__info:hover .alfa-nd__name { color: var(--nd-gold-lit); }

.alfa-nd__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a-s-3); min-height: 1.6em; }
.alfa-nd__price:empty { display: none; }

.alfa-nd__now {
  font-family: 'Readex Pro', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--nd-text);
  white-space: nowrap;
}
.alfa-nd__now .alfa-sar { color: var(--nd-text); }

.alfa-nd__was {
  color: var(--nd-was);
  font-size: 12px;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
}
.alfa-nd__was .alfa-price-pair { text-decoration: line-through; }
.alfa-nd__was .alfa-sar { color: var(--nd-was); }

/* Salla's own button, re-cut in the store's one gold and lifted to 44 px. */
.alfa-nd__add { display: block; margin-top: var(--a-s-2); width: 100%; }
body.theme-click .alfa-nd__add button,
body.theme-click .alfa-nd__add .s-button-btn {
  width: 100% !important;
  min-height: 44px !important;
  background: var(--a-gold-500) !important;
  color: var(--a-btn-ink) !important;
  border: 1px solid transparent !important;
  border-radius: var(--a-r-md) !important;
  font-family: 'Readex Pro', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background var(--a-fast) var(--a-ease), transform var(--a-fast) var(--a-ease);
}
body.theme-click .alfa-nd__add button:hover,
body.theme-click .alfa-nd__add .s-button-btn:hover { background: var(--a-gold-hover) !important; transform: translateY(var(--a-lift)); }
body.theme-click .alfa-nd__add button:active { transform: translateY(0); }
body.theme-click .alfa-nd__add button:focus-visible { outline: 2px solid var(--nd-gold-lit) !important; outline-offset: 2px !important; }
body.theme-click .alfa-nd__add button[disabled],
body.theme-click .alfa-nd__add button[aria-disabled="true"] { opacity: .55; }
/* the same button when the web component is not defined: a plain link */
.alfa-btn.alfa-nd__add--link { width: 100%; min-height: 44px; margin-top: var(--a-s-2); }

/* --- 5. the nav chip and the side-panel entry -------------------------------- */

.alfa-nd-chip { white-space: nowrap; }
.alfa-nd-chip::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0B4A2E;
  box-shadow: 0 0 0 2px #C6A96B;
  margin-inline-end: .5em;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
body.theme-click .side-panel .main-menu a.alfa-nd-chip,
body.theme-click .side-panel .main-menu a.alfa-nd-chip span { color: var(--a-signal-text) !important; }

/* --- 6. /offers: the heading block and the swapped campaign wells ---------- */

.alfa-nd-offers {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--a-s-6) var(--a-s-5) var(--a-s-4);
}
.alfa-nd-offers__eyebrow {
  display: block;
  font-family: 'Readex Pro', system-ui, sans-serif;
  font-size: 13px;
  color: var(--a-signal-text);
  margin-bottom: var(--a-s-2);
}
.alfa-nd-offers__title {
  font-family: 'Readex Pro', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.25;
  color: var(--a-text);
  margin: 0 0 var(--a-s-3);
}
.alfa-nd-offers__ship {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--a-s-4);
  border: 1px solid var(--a-line-2);
  border-radius: 999px;
  color: var(--a-muted);
  font-size: 13px;
  white-space: nowrap;
  margin: 0;
}
.alfa-nd-offers__ship .alfa-price-pair { font-family: 'Readex Pro', system-ui, sans-serif; font-weight: 500; color: var(--a-text); margin-inline: .1em; }

/* A campaign photograph is green velvet; its well turns the same green so the
   contain bars beside the 4:5 photo dissolve instead of reading as a hole. */
body.theme-click .alfa-nd-swap .product-entry__image { background: #093D26 !important; }
body.theme-click .alfa-nd-swap .product-entry__image img { object-fit: contain; }

/* --- 7. the cart thumbnail: contain, so the cap and the base survive -------- */
/* slots.json (2026-09-13): cover kept the middle 67% of the photo at 1440 and
   80% at 390. Width-scoped on both sides because it is a Salla cart component
   (DESIGN-CONTRACT section 4, the 2026-08-15 regression). */

@media (min-width: 1024px) {
  body.theme-click section.cart-item img,
  body.theme-click .cart-page a.relative.overflow-hidden.shrink-0 > img { object-fit: contain !important; }
}
@media (max-width: 1023px) {
  body.theme-click section.cart-item img,
  body.theme-click .cart-page a.relative.overflow-hidden.shrink-0 > img { object-fit: contain !important; }
}

/* --- 8. responsive ------------------------------------------------------------ */

@media (max-width: 900px) {
  .alfa-nd { padding: var(--a-s-5) 0 var(--a-s-6); }
  .alfa-nd__wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "grid";
    gap: var(--a-s-5);
  }
  /* the bundle card is first in the grid and carries the same photograph, so
     the separate hero figure would show it twice and cost the fold */
  .alfa-nd__hero { display: none; }
  .alfa-nd__copy { max-width: none; }
  .alfa-nd__title { font-size: clamp(22px, 6.2vw, 28px); }
  .alfa-nd__body { font-size: 13px; margin-bottom: var(--a-s-3); }
  .alfa-nd__meta { gap: var(--a-s-2); }
  .alfa-nd__ship { padding: 0 var(--a-s-3); font-size: 12px; }
  .alfa-nd__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-s-3); }
  .alfa-nd__body-wrap { padding: var(--a-s-3) var(--a-s-3) var(--a-s-4); }
  .alfa-nd__name { font-size: 13px; }
  .alfa-nd__now { font-size: 15px; }
  .alfa-nd-offers { padding: var(--a-s-5) var(--a-s-5) var(--a-s-3); }
}

@media (max-width: 400px) {
  .alfa-nd__badge { inset-block-start: var(--a-s-2); inset-inline-start: var(--a-s-2); }
}

@media (prefers-reduced-motion: reduce) {
  .alfa-nd__hero { animation: none; }
  .alfa-nd__card, .alfa-btn.alfa-nd__all, .alfa-nd__name, .alfa-nd__info,
  body.theme-click .alfa-nd__add button { transition: none; }
  .alfa-nd__card:hover, .alfa-btn.alfa-nd__all:hover,
  body.theme-click .alfa-nd__add button:hover { transform: none; }
}

/* --- 9. fixes measured on the real draft (2026-09-13, late) ----------------- */
/* On the draft at 1440 the card body is 113px wide (hero column 440 + gaps),
   so "369 [sar]  badal 720 [sar]" (current + struck) on one flex line wrapped for some cards and
   not others, and the wrapped card's button sat 24px lower (coordinator's
   read of nd-mock-home-1440.png). The price is now a two-line block on every
   card -- current price, then the struck price -- and the add button is
   pushed to the bottom of a stretched grid cell, so the four button tops are
   equal by construction whatever the text does. */
.alfa-nd__price {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 2px;
  min-height: 0;
}
.alfa-nd__info { flex: 0 0 auto; }
.alfa-nd__add-host { margin-top: auto; padding-top: var(--a-s-2); }
.alfa-nd__add { margin-top: 0; }
.alfa-btn.alfa-nd__add--link { margin-top: 0; }

/* The phone fold, measured on the draft at 390x730 (probe_fold, 2026-09-13):
   preview bar 52 (preview mode only) + promo strip 84 (three lines) + header
   86 = 222 before the band; the first add button landed at 753-797, i.e.
   701-745 on the live store -- 15px under the fold. Reclaimed: the strip's
   campaign clause is hidden on phones (the band under it carries the
   occasion), the price block and the eyebrow lose their inherited 1.75
   leading, and the band's top padding and row gap shrink by 4px each. */
.alfa-nd__eyebrow { line-height: 1.4; }
.alfa-nd__now, .alfa-nd__was { line-height: 1.3; }
.alfa-bar__t1, .alfa-bar__sep, .alfa-bar__t2 { white-space: normal; }
@media (max-width: 480px) {
  .alfa-bar__t1, .alfa-bar__sep { display: none; }
  .alfa-nd { padding-top: var(--a-s-4); }
  .alfa-nd__wrap { row-gap: var(--a-s-5); }
  .alfa-nd__body { margin-bottom: var(--a-s-3); }
  /* second pass, measured on the draft: 693-737 in preview mode (52px preview
     bar) -> 20px more so the button clears 730 even with that bar */
  .alfa-nd__body-wrap { padding-top: var(--a-s-2); gap: 4px; }
  .alfa-nd__info { gap: 4px; }
  .alfa-nd__add-host { padding-top: 4px; }
}

/* Salla's button text span ellipsises inside its own padding: on the draft at
   1440 the 113px card body printed the label cut short (nd-home-1440.png).
   Tighter inline padding and no clipping on the label. */
body.theme-click .alfa-nd__add button,
body.theme-click .alfa-nd__add .s-button-btn { padding-inline: var(--a-s-2) !important; }
body.theme-click .alfa-nd__add .s-button-text,
body.theme-click .alfa-nd__add button > span { overflow: visible !important; text-overflow: clip !important; white-space: nowrap; }

/* end 23 */