/***************************************************************************************************/
/* Site Theme – Reversed layout (black background, white text)                                     */
/*                                                                                                 */
/* Plain CSS, NOT part of the Bud/Tailwind bundle – served directly by App\Theme\SiteTheme and     */
/* only loaded when the reversed layout is active. Colours come from the --st-* variables printed  */
/* inline from JYSK > Site Theme. !important is used where Tailwind utilities are set in markup.   */
/***************************************************************************************************/

body.site-theme-reversed {
  --st-surface-2: color-mix(in srgb, var(--st-surface) 85%, var(--st-text));
  background-color: var(--st-background);
  color: var(--st-text);
  color-scheme: dark;
}

/* Default border colour (Tailwind preflight sets #e5e7eb on everything). :where keeps it at zero
   specificity so explicit border utilities like border-primary still win. */
:where(body.site-theme-reversed) *,
:where(body.site-theme-reversed) ::before,
:where(body.site-theme-reversed) ::after {
  border-color: var(--st-border);
}

/* Icons without their own fill follow the text colour (logo and coloured icons keep theirs) */
body.site-theme-reversed svg:not([fill]) {
  fill: currentColor;
}

/***************************************************************************************************/
/* Tailwind utility remap                                                                          */
/***************************************************************************************************/

body.site-theme-reversed :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-light, .bg-slate-50) {
  background-color: var(--st-surface) !important;
}

body.site-theme-reversed :is(.bg-gray-200, .bg-gray-300) {
  background-color: var(--st-surface-2) !important;
}

body.site-theme-reversed :is(.hover\:bg-gray-100, .hover\:bg-gray-50, .hover\:bg-gray-light):hover {
  background-color: var(--st-surface-2) !important;
}

body.site-theme-reversed :is(.text-black, .text-gray-900, .text-gray-800, .text-gray-dark) {
  color: var(--st-text) !important;
}

body.site-theme-reversed :is(.text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400, .text-neutral-500) {
  color: var(--st-muted) !important;
}

body.site-theme-reversed :is(.text-primary, .hover\:text-primary:hover, .link-hover, .lost_password > a) {
  color: var(--st-accent) !important;
}

/* Links inside text content (WP editor, Elementor text widgets, notices, product descriptions).
   Navigation, product cards, buttons and footer menus are left alone on purpose. */
body.site-theme-reversed :is(
  #main p,
  #main td,
  #main dd,
  #main label,
  .entry-content,
  .content-page__main,
  .archive-content,
  .woocommerce-Tabs-panel,
  .woocommerce-product-details__short-description,
  .elementor-widget-text-editor,
  .elementor-widget-theme-post-content,
  .woocommerce-info,
  .woocommerce-form-coupon-toggle
) a:not(.button):not(.elementor-button):not(.wp-element-button):not(.page-numbers):not(.woocommerce-terms-and-conditions-link),
body.site-theme-reversed :is(a.link, a.underline, .hover\:text-primary:hover) {
  color: var(--st-accent) !important;
}

body.site-theme-reversed :is(
  .entry-content,
  .content-page__main,
  .elementor-widget-text-editor,
  .elementor-widget-theme-post-content
) a:not(.button):not(.elementor-button):not(.wp-element-button):hover {
  text-decoration: underline;
}

body.site-theme-reversed :is(.border-gray-200, .border-gray-300, .border-gray-400, .border-gray-500, .border-gray-medium) {
  border-color: var(--st-border) !important;
}

body.site-theme-reversed :is(.border-gray-800, .border-gray-900) {
  border-color: var(--st-text) !important;
}

/***************************************************************************************************/
/* Header                                                                                          */
/***************************************************************************************************/

body.site-theme-reversed .header-primary {
  background-color: var(--st-header-bg);
  color: var(--st-header-text);
}

body.site-theme-reversed .header-secondary {
  background-color: var(--st-nav-bg);
  color: var(--st-nav-text);
}

body.site-theme-reversed .header-secondary nav ul {
  color: var(--st-nav-text) !important;
}

body.site-theme-reversed #breadcrumbs {
  color: var(--st-muted);
}

/* FiboSearch */
body.site-theme-reversed #header .dgwt-wcas-search-wrapp .dgwt-wcas-search-form {
  background-color: transparent !important;
}

body.site-theme-reversed #header .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
  background-color: var(--st-input-bg) !important;
  border-color: var(--st-input-bg) !important;
  color: var(--st-header-text) !important;
  caret-color: var(--st-header-text);
}

body.site-theme-reversed #header .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus {
  border-color: var(--st-accent) !important;
}

body.site-theme-reversed #header .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder {
  color: var(--st-header-text) !important;
  opacity: 0.7;
}

body.site-theme-reversed #header .dgwt-wcas-search-submit,
body.site-theme-reversed #header .dgwt-wcas-ico-magnifier,
body.site-theme-reversed #header .dgwt-wcas-ico-magnifier path {
  color: var(--st-header-text) !important;
  fill: var(--st-header-text) !important;
}

/* Search results dropdown (FiboSearch renders it outside #header) */
body.site-theme-reversed .dgwt-wcas-suggestions-wrapp,
body.site-theme-reversed .dgwt-wcas-details-wrapp,
body.site-theme-reversed #recentlyViewedProductSearch {
  background-color: var(--st-surface) !important;
  color: var(--st-header-text);
}

body.site-theme-reversed :is(.dgwt-wcas-suggestions-wrapp, .dgwt-wcas-details-wrapp, #recentlyViewedProductSearch) :is(.dgwt-wcas-st, .dgwt-wcas-sp, .dgwt-wcas-sd, .dgwt-wcas-suggestion-nores, .dgwt-wcas-suggestion-headline .dgwt-wcas-st, .dgwt-wcas-st-title, a, span, div) {
  color: var(--st-header-text) !important;
}

body.site-theme-reversed .dgwt-wcas-suggestion-selected {
  background-color: var(--st-surface-2) !important;
}

body.site-theme-reversed .dgwt-wcas-st-more {
  color: var(--st-accent) !important;
}

body.site-theme-reversed #header .icon-count {
  background-color: var(--st-header-text);
  color: var(--st-header-bg);
}

/***************************************************************************************************/
/* Prices – client request: bright blue or white instead of red                                    */
/***************************************************************************************************/

body.site-theme-reversed :is(.product-card-price, .product-sumup .price, .price) :is(.woocommerce-Price-amount, ins, ins .woocommerce-Price-amount) {
  color: var(--st-price) !important;
}

body.site-theme-reversed .product-normal-price,
body.site-theme-reversed .product-normal-price .woocommerce-Price-amount,
body.site-theme-reversed .price del,
body.site-theme-reversed .price del .woocommerce-Price-amount {
  color: var(--st-muted) !important;
}

/***************************************************************************************************/
/* Product cards & product page                                                                    */
/***************************************************************************************************/

/* Product photos keep their light backdrop (images are shot on white) */
body.site-theme-reversed .product-card-header {
  background-color: #f5f5f5;
  color: #0d0d0d;
}

body.site-theme-reversed .product-card-header svg:not([fill]) {
  fill: #0d0d0d;
}

body.site-theme-reversed .product-card-body,
body.site-theme-reversed .product-card-body a {
  color: var(--st-text);
}

body.site-theme-reversed .quantity,
body.site-theme-reversed .delivery-selector-container label {
  background-color: var(--st-surface);
  border-color: var(--st-border);
  color: var(--st-text);
}

body.site-theme-reversed .quantity :is(input.qty, .button-minus, .button-plus) {
  background: transparent;
  color: var(--st-text);
}

body.site-theme-reversed .delivery-selector-container input:checked + label {
  border-color: var(--st-accent);
}

body.site-theme-reversed .delivery-selector-container .info-text-pdp-cc {
  color: var(--st-muted);
}

body.site-theme-reversed .delivery-selector-container .warning-label {
  color: #1a1a1a;
}

/***************************************************************************************************/
/* Buttons, forms, pagination                                                                      */
/***************************************************************************************************/

body.site-theme-reversed .button-secondary,
body.site-theme-reversed .coupon .button {
  background-color: transparent !important;
  border-color: var(--st-text) !important;
  color: var(--st-text) !important;
}

body.site-theme-reversed .button-secondary:hover,
body.site-theme-reversed .coupon .button:hover {
  background-color: var(--st-surface-2) !important;
}

body.site-theme-reversed :is(.woocommerce-Input, .input-text, select, textarea, .orderby, .select2-container--default .select2-selection--single) {
  background-color: var(--st-input-bg);
  border-color: var(--st-border);
  color: var(--st-text);
}

body.site-theme-reversed .select2-container--default .select2-selection--single .select2-selection__rendered,
body.site-theme-reversed .price-range-input input {
  color: var(--st-text) !important;
}

body.site-theme-reversed .select2-dropdown {
  background-color: var(--st-surface);
  color: var(--st-text);
}

body.site-theme-reversed .page-numbers.current,
body.site-theme-reversed :is(.page-numbers a, a.page-numbers):hover {
  background-color: var(--st-surface-2);
}

body.site-theme-reversed :is(.button-prev, .button-next, .archive-related-posts .swiper-button-prev, .archive-related-posts .swiper-button-next) {
  background-color: var(--st-surface) !important;
  color: var(--st-text);
  --swiper-navigation-color: var(--st-text);
}

body.site-theme-reversed .elementor-widget-loop-carousel .elementor-swiper-button {
  background-color: var(--st-surface) !important;
  border-color: var(--st-border) !important;
}

body.site-theme-reversed .elementor-widget-loop-carousel .elementor-swiper-button::before {
  color: var(--st-text) !important;
}

/* Notices keep their light tinted background, so keep dark text on them */
body.site-theme-reversed .woocommerce-message {
  color: #14532d;
}

body.site-theme-reversed mark {
  color: var(--st-text);
}

/***************************************************************************************************/
/* Homepage                                                                                        */
/***************************************************************************************************/

/* Category names sit on top of the photos – white text over a dark fade so they stay readable */
body.site-theme-reversed .homepage-category > a::after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 45%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

body.site-theme-reversed .homepage-category > a > span {
  color: var(--st-text);
  z-index: 2;
}

/***************************************************************************************************/
/* Footer                                                                                          */
/***************************************************************************************************/

body.site-theme-reversed #footer {
  background-color: var(--st-footer-bg);
  padding-top: 3rem;
}

body.site-theme-reversed #footer a {
  color: var(--st-text);
}

/* Klaviyo forces black text in its form – follow the theme instead */
body.site-theme-reversed .klaviyo-form div,
body.site-theme-reversed .klaviyo-form span {
  color: var(--st-text) !important;
}

/***************************************************************************************************/
/* Client tweaks (moved from Appearance > Customize > Additional CSS, 23/10/2026)                  */
/* Scoped to the reversed layout so they no longer affect the standard white site.                 */
/***************************************************************************************************/

/* Campaign bar – overrides the bar colour set on the JYSK options page */
body.site-theme-reversed .campaign-bar {
  background: var(--st-campaign-bg) !important;
}

/* Brand logos keep a white tile */
body.site-theme-reversed [data-swiper-type="brands"] .swiper-slide {
  background: #ffffff;
}

/* Product cards sit on the page background, also inside grey panels */
body.site-theme-reversed .product-card {
  background: var(--st-background);
}

body.site-theme-reversed table,
body.site-theme-reversed .woocommerce-info {
  color: var(--st-text);
}

/* Elementor container text (paragraphs and h3 headings) */
body.site-theme-reversed .e-con-inner p,
body.site-theme-reversed .e-con-boxed h3 {
  color: var(--st-text);
}

/* Form and filter labels use the accent colour */
body.site-theme-reversed label {
  color: var(--st-accent) !important;
}

/* …except the checkout terms box, which keeps its light yellow background */
body.site-theme-reversed .woocommerce-terms-and-conditions-wrapper label {
  color: #454545 !important;
}