/* ==================================================
   ABRYN DIGITAL - COMPLETE CUSTOM CSS
   Black / Gold / White
   ================================================== */

/* 01 - BRAND COLORS */

:root {
  --ab-bg: #0B0B0D;
  --ab-surface: #171719;
  --ab-surface-2: #202023;
  --ab-header: #151517;
  --ab-gold: #D6A84F;
  --ab-gold-light: #E8BF6A;
  --ab-white: #FFFFFF;
  --ab-text: #F5F5F5;
  --ab-muted: #B8B8BE;
  --ab-border: rgba(214,168,79,.65);

  --color-primary: #D6A84F;
  --color-primary-dark: #B88B38;
  --color-primary-light: #E8BF6A;
  --color-primary-reverse: #111111;
}

/* 02 - GLOBAL FOUNDATION */

html {
  background: var(--ab-bg);
}

body {
  background: var(--ab-bg) !important;
  color: var(--ab-text);
}

main#main-content {
  background: var(--ab-bg) !important;
}

::selection {
  background: var(--ab-gold);
  color: #111111;
}

a {
  transition: color .2s ease;
}

a:hover {
  color: var(--ab-gold);
}

/* 03 - HEADER */

#mainnav,
#main-nav-container,
.store-header {
  background: var(--ab-header) !important;
  border-bottom: 1px solid
    rgba(214,168,79,.18) !important;
}

.top-navbar {
  background: #1D2020 !important;
}

#mainnav a,
.top-navbar a {
  color: var(--ab-text);
}

#mainnav a:hover,
.top-navbar a:hover {
  color: var(--ab-gold) !important;
}

/* 04 - NAVIGATION AND SEARCH */

#mainnav nav a {
  transition: color .2s ease;
}

#mainnav nav a:hover {
  color: var(--ab-gold) !important;
}

salla-search {
  --color-primary: var(--ab-gold);
}

/* 05 - HOME PAGE */

body:has(.s-block) main#main-content {
  background: var(--ab-bg) !important;
}

.s-block {
  background-color: transparent;
}

.s-block__title,
.s-block__title h2,
.s-block__title h3 {
  color: var(--ab-white) !important;
}

/* 06 - CATEGORY TILES */

.s-block--categories__item {
  background: var(--ab-surface) !important;
  border: 1px solid var(--ab-border);
  border-radius: 12px;
  transition: transform .25s ease,
              border-color .25s ease;
}

.s-block--categories__item:hover {
  transform: translateY(-3px);
  border-color: var(--ab-gold-light);
}

.s-block--categories__item h3,
.s-block--categories__item p {
  color: var(--ab-white) !important;
}

/* 07 - PRODUCT CARDS */

.s-product-card-entry {
  background: var(--ab-surface) !important;
  border: 1px solid var(--ab-border) !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition: transform .25s ease,
              border-color .25s ease;
}

.s-product-card-entry:hover {
  transform: translateY(-3px);
  border-color: var(--ab-gold-light) !important;
}

.s-product-card-entry__title,
.s-product-card-entry__title a {
  color: var(--ab-white) !important;
}

.s-product-card-entry__title a:hover {
  color: var(--ab-gold) !important;
}

.s-product-card-entry__price {
  color: var(--ab-gold) !important;
}

.s-product-card-entry__content {
  background: var(--ab-surface) !important;
}

.s-product-card-entry__image img {
  object-fit: cover;
}

/* 08 - PRODUCT CARD BUTTONS */

.s-product-card-entry .s-button-element {
  border-radius: 9px !important;
}

.s-product-card-entry
.s-button-element:not([disabled]) {
  background: var(--ab-gold) !important;
  color: #111111 !important;
  border-color: var(--ab-gold) !important;
}

.s-product-card-entry
.s-button-element:not([disabled]):hover {
  background: var(--ab-gold-light) !important;
}

.s-product-card-entry
.s-button-element[disabled] {
  background: var(--ab-gold) !important;
  color: #111111 !important;
  opacity: .85;
}

/* 09 - CATEGORY / PRODUCT LIST PAGE */

body:has(#product-filter) main#main-content {
  background: var(--ab-bg) !important;
}

body:has(#product-filter)
[data-testid="store-home-title"] {
  color: var(--ab-white) !important;
}

#product-filter {
  background: var(--ab-surface);
  color: var(--ab-white);
  border: 1px solid var(--ab-border);
  border-radius: 8px;
}

#product-filter option {
  background: var(--ab-surface);
  color: var(--ab-white);
}

/* 10 - PRODUCT PAGE */

body:has([data-testid="store-product-title"]) {
  background: var(--ab-bg) !important;
}

body:has([data-testid="store-product-title"])
main#main-content {
  background: var(--ab-bg) !important;
}

body:has([data-testid="store-product-title"])
.container--product-details {
  background: var(--ab-bg) !important;
}

/* 11 - PRODUCT TITLE */

[data-testid="store-product-title"] {
  color: var(--ab-white) !important;
  font-weight: 700;
}

/* 12 - PRODUCT PRICE */

[data-testid="store-product-price"],
[data-testid="store-product-price"] * {
  color: var(--ab-gold) !important;
}

/* 13 - PRODUCT DESCRIPTION */

[data-testid="store-product-description"],
[data-testid="store-product-description"] p,
[data-testid="store-product-description"] li {
  color: var(--ab-muted) !important;
  line-height: 1.9;
}

[data-testid="store-product-description"] h2,
[data-testid="store-product-description"] h3,
[data-testid="store-product-description"] h4 {
  color: var(--ab-gold) !important;
  font-weight: 700;
}

[data-testid="store-product-description"] a {
  color: var(--ab-gold) !important;
}

#btn-show-more {
  color: var(--ab-gold) !important;
}

/* 14 - PURCHASE BOX */

form.product-form > section.bg-white {
  background: var(--ab-surface) !important;
  border-left: 1px solid var(--ab-gold) !important;
  border-right: 1px solid var(--ab-gold) !important;
}

form.product-form >
section.bg-white:not(.sticky-product-bar) {
  border-top: 1px solid var(--ab-gold) !important;
  border-radius: 12px 12px 0 0 !important;
}

form.product-form >
section.bg-white .form-label {
  color: var(--ab-white) !important;
}

form.product-form >
section.bg-white .total-price,
form.product-form >
section.bg-white .total-price i {
  color: var(--ab-gold) !important;
}

/* 15 - STICKY PURCHASE BAR */

form.product-form >
section.sticky-product-bar {
  background: var(--ab-surface) !important;
  border-bottom: 1px solid var(--ab-gold) !important;
  border-radius: 0 0 12px 12px !important;
}

form.product-form
.sticky-product-bar
.s-button-element {
  background: var(--ab-gold) !important;
  color: #111111 !important;
  border: 1px solid var(--ab-gold) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}

form.product-form
.sticky-product-bar
.s-button-element:hover {
  background: var(--ab-gold-light) !important;
  border-color: var(--ab-gold-light) !important;
}

/* 16 - LOYALTY AND REWARDS */

body:has([data-testid="store-product-title"])
salla-loyalty,
body:has([data-testid="store-product-title"])
salla-loyalty-banner,
body:has([data-testid="store-product-title"])
.loyalty-points,
body:has([data-testid="store-product-title"])
.loyalty-program,
body:has([data-testid="store-product-title"])
.product-loyalty {
  background: var(--ab-surface) !important;
  border: 1px solid var(--ab-border) !important;
  border-radius: 12px !important;
  color: var(--ab-white) !important;
}

body:has([data-testid="store-product-title"])
salla-loyalty::part(container),
body:has([data-testid="store-product-title"])
salla-loyalty-banner::part(container) {
  background: var(--ab-surface) !important;
  color: var(--ab-white) !important;
  border-color: var(--ab-border) !important;
}

body:has([data-testid="store-product-title"])
salla-loyalty::part(icon),
body:has([data-testid="store-product-title"])
salla-loyalty-banner::part(icon) {
  color: var(--ab-gold) !important;
}

body:has([data-testid="store-product-title"])
:is(.loyalty-points,
    .loyalty-program,
    .product-loyalty)
:is(p, span, strong, a) {
  color: var(--ab-white) !important;
}

/* 17 - PRODUCT GALLERY */

body:has([data-testid="store-product-title"])
.product-gallery img {
  border-radius: 10px;
}

/* 18 - FEATURE BOXES */

.s-block--features__item {
  background: var(--ab-surface) !important;
  border: 1px solid var(--ab-border);
  border-radius: 12px;
}

.s-block--features__item h3,
.s-block--features__item h4 {
  color: var(--ab-white) !important;
}

.s-block--features__item p {
  color: var(--ab-muted) !important;
}

/* 19 - FOOTER */

.store-footer {
  background: #1D2020 !important;
  color: var(--ab-white) !important;
  border-top: 1px solid
    rgba(214,168,79,.2) !important;
}

.store-footer h3,
.store-footer h4 {
  color: var(--ab-white) !important;
}

.store-footer a {
  color: var(--ab-muted);
}

.store-footer a:hover {
  color: var(--ab-gold) !important;
}

/* 20 - GENERAL BUTTONS */

button,
.s-button-element {
  transition: background .2s ease,
              border-color .2s ease,
              color .2s ease;
}

/* 21 - INPUT FOCUS */

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--ab-gold);
  outline-offset: 2px;
}

/* 22 - MOBILE */

@media (max-width: 767px) {

  #mainnav {
    background: var(--ab-header) !important;
  }

  .s-product-card-entry {
    border-radius: 11px !important;
  }

  [data-testid="store-product-title"] {
    line-height: 1.6;
  }

  [data-testid="store-product-description"] {
    line-height: 1.9;
  }

  form.product-form
  .sticky-product-bar
  .s-button-element {
    min-height: 46px;
  }

  .s-block--features__item {
    border-radius: 10px;
  }
}

/* 23 - REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

  .s-product-card-entry,
  .s-block--categories__item,
  button,
  .s-button-element {
    transition: none !important;
  }

}

/* ==========================================
   ABRYN DIGITAL - CASHBACK BANNER
   Premium Black & Gold
   ========================================== */

/* Cashback banner background */
.s-cashback-banner-container {
    background: #171719 !important;
    background-image: none !important;
    border: 1px solid #D6A84F !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
}

/* Cashback text */
.s-cashback-banner-container p,
.s-cashback-banner-label {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

/* Cashback amount */
.s-cashback-banner-value {
    color: #D6A84F !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* Cashback icon */
.s-cashback-banner-icon {
    background: #D6A84F !important;
    background-image: none !important;
    color: #111111 !important;
    border-radius: 50% !important;
}

/* Icon contents */
.s-cashback-banner-icon svg,
.s-cashback-banner-icon svg * {
    color: #111111 !important;
    fill: currentColor !important;
}

/* ==================================================
   24 - PRODUCT PAGE BACKGROUND & LAYOUT
   ================================================== */

body.product-single,
body.product-single #app,
body.product-single #main-content {
  background-color: var(--ab-bg) !important;
}

body.product-single .container--product-details {
  background: transparent !important;
}

/* Keep the reviews region visually consistent. */
body.product-single salla-comments,
body.product-single .s-comments,
body.product-single .s-comments-product {
  background-color: var(--ab-bg) !important;
  color: var(--ab-white) !important;
}

body.product-single .s-comments h2,
body.product-single .s-comments h3,
body.product-single .s-comments p {
  color: var(--ab-white) !important;
}

/* Hide only wrappers that are genuinely empty. */
body.product-single .s-before-reviews:empty,
body.product-single .s-before-related:empty,
body.product-single .s-after-related:empty {
  display: none !important;
}

/* ==================================================
   25 - MOBILE PRODUCT PAGE SPACING
   ================================================== */

@media (max-width: 767px) {
  body.product-single #main-content {
    row-gap: 0 !important;
    padding-bottom: 16px !important;
  }

  body.product-single .container--product-details {
    height: auto !important;
    min-height: 0 !important;
  }

  /* The theme's sticky info columns can leave a blank area
     on mobile. Disable column stickiness, not the buy bar. */
  body.product-single .container--product-details .main-content,
  body.product-single .container--product-details .sidebar {
    position: static !important;
    top: auto !important;
  }

  body.product-single .container--product-details .main-content {
    overflow: visible !important;
  }

  /* Remove spacing from unused extension slots. */
  body.product-single #main-content > .s-before-reviews,
  body.product-single #main-content > .s-before-related,
  body.product-single #main-content > .s-after-related {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Do not hide product form, stock notification or sticky buy bar. */
  body.product-single .sticky-product-bar {
    z-index: 30;
  }
}