/* Sumisu Knives — redesign layer (loaded AFTER style.css). Additive, scoped.
   Visual reference: /designs/. No global reset, no markup changes. */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  --sk-ink:#0d0d0d; --sk-ink2:#171717; --sk-ink3:#252525;
  --sk-gold:#c8a96e; --sk-gold2:#e2c898;
  --sk-cta:#b87935; --sk-cta2:#e6b76f;
  --sk-japan:#A90000; --sk-japan-soft:rgba(169,0,0,.16);
  --sk-warm:#f7f3ee; --sk-cream:#ede5d8; --sk-muted:#9a8c7e;
  --sk-light:#f0ebe3; --sk-white:#ffffff;
  --sk-transition:all .35s cubic-bezier(.4,0,.2,1);
  --sk-serif:"Cormorant Garamond",serif;
  --sk-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ============================================================
   2. TYPOGRAPHY — clean sans body, refined serif headings
   ============================================================ */
body{ font-family:var(--sk-sans); }
h1,h2,h3,h4{ font-family:var(--sk-serif); font-weight:400; line-height:1.14; }

/* ============================================================
   3. FOOTER — premium dark (design: dark ink, gold accents)
   Scoped to the footer landmark so nothing else is affected.
   ============================================================ */
footer[role="contentinfo"]{
  background:var(--sk-ink);
  color:rgba(240,235,227,.72);
}
footer[role="contentinfo"] a{
  color:rgba(240,235,227,.72);
  transition:var(--sk-transition);
}
footer[role="contentinfo"] a:hover{ color:var(--sk-gold2); }

/* Headings + option titles -> refined serif in gold */
footer[role="contentinfo"] h2,
footer[role="contentinfo"] h3,
footer[role="contentinfo"] h4,
footer[role="contentinfo"] .footer-option-title{
  font-family:var(--sk-serif);
  color:var(--sk-gold2);
}

/* Newsletter block: was light #f1f1f1 -> warm dark */
footer[role="contentinfo"] .footer-newsletter{
  background:var(--sk-ink2) !important;
  color:rgba(240,235,227,.82) !important;
}
footer[role="contentinfo"] .footer-newsletter .footer-newsletter-title{
  color:var(--sk-gold2) !important;
  font-family:var(--sk-serif) !important;
}
footer[role="contentinfo"] .footer-newsletter-desc{ color:rgba(240,235,227,.7) !important; }

/* Override hardcoded greyish-blue company text */
footer[role="contentinfo"] .footer-company{ color:rgba(240,235,227,.6) !important; }

/* Newsletter input field -> dark, gold border */
footer[role="contentinfo"] input[type="email"],
footer[role="contentinfo"] input.wpcf7-form-control.wpcf7-text{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(200,169,110,.28);
  color:#fff;
}
footer[role="contentinfo"] input::placeholder{ color:rgba(240,235,227,.45); }

/* Subtle gold divider above legal/bottom row */
footer[role="contentinfo"] .third-footer-row{
  border-top:1px solid rgba(200,169,110,.16);
}
/* ============================================================
   4. HEADER — premium dark (design: dark bar + gold accents)
   Topbar is already dark; this darkens the white .header-main
   and fixes contrast for logo, menu, icons and the mobile toggle.
   Only TOP-LEVEL mega-menu links are recolored (>) so the
   white dropdown submenus keep their dark text.
   ============================================================ */
.header-main{ background-color:#171717 !important; }

/* Logo -> white on dark */
#header-desktop .header-logo img,
#header-mobile .header-logo img,
.header-logo img{ filter:brightness(0) invert(1); }

/* Top-level menu links -> cream, gold on hover / current */
#mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link,
#mega-menu-wrap-header-menu-frans #mega-menu-header-menu-frans > li.mega-menu-item > a.mega-menu-link{
  color:rgba(240,235,227,.82) !important;
}
#mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-header-menu-frans #mega-menu-header-menu-frans > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-header-menu-frans #mega-menu-header-menu-frans > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link{
  color:var(--sk-gold2) !important;
}

/* Header icons (cart, account, search) -> cream */
.header-icons i{ color:rgba(240,235,227,.88) !important; }

/* Mobile hamburger lines -> cream so the toggle stays visible */
#mega-menu-wrap-header-menu .mega-menu-toggle .mega-toggle-animated-inner,
#mega-menu-wrap-header-menu .mega-menu-toggle .mega-toggle-animated-inner::before,
#mega-menu-wrap-header-menu .mega-menu-toggle .mega-toggle-animated-inner::after{
  background:rgba(240,235,227,.92) !important;
}
/* Mega Menu bar own background -> transparent so the dark .header-main shows.
   Top-level wrapper + menu bar + toggle only; .mega-sub-menu dropdowns keep their own (light) bg. */
#mega-menu-wrap-header-menu,
#mega-menu-wrap-header-menu-frans,
#mega-menu-wrap-header-menu #mega-menu-header-menu,
#mega-menu-wrap-header-menu-frans #mega-menu-header-menu-frans,
#mega-menu-wrap-header-menu .mega-menu-toggle,
#mega-menu-wrap-header-menu-frans .mega-menu-toggle{
  background:transparent !important;
  box-shadow:none !important;
}
/* ============================================================
   5. HEADER LAYOUT — match homepage design (CSS reflow, no markup changes)
   Scoped to #header-desktop so the mobile header is untouched.
   ============================================================ */

/* Top bar: refined dark premium */
.top-bar{ background:#0d0d0d !important; }
.top-bar .row{ align-items:center; }
.topbar-item-usp{ font-size:11px !important; letter-spacing:.07em; color:rgba(240,235,227,.78); }
.topbar-item-usp strong{ color:var(--sk-gold2); font-weight:600; }
.topbar-item-usp i{ color:var(--sk-gold) !important; }
.header-review-txt,.header-review-number{ color:rgba(240,235,227,.78); }

/* Desktop main row: logo (left) | nav (center) | actions (right) */
#header-desktop .row{ display:flex !important; align-items:center; gap:24px; }
#header-desktop .header-logo{ flex:0 0 auto; }
#header-desktop .header-menu{ flex:1 1 auto; display:flex; justify-content:center; }
#header-desktop .search-bar{ flex:0 0 auto; width:190px; }
#header-desktop .header-icons{ flex:0 0 auto; gap:16px; align-items:center; }
#header-desktop .header-logo img{ max-width:none !important; height:46px !important; width:auto !important; }

/* Center the mega-menu items horizontally */
#header-desktop #mega-menu-header-menu,
#header-desktop #mega-menu-header-menu-frans{
  display:flex !important; justify-content:center !important; align-items:center;
}

/* Nav links typography -> design (Inter, uppercase, spaced) */
#mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link,
#mega-menu-wrap-header-menu-frans #mega-menu-header-menu-frans > li.mega-menu-item > a.mega-menu-link{
  font-family:var(--sk-sans) !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
}

/* Cart -> gold pill (icon + counter) */
#header-desktop .cart-link{
  background:linear-gradient(135deg,var(--sk-cta),var(--sk-cta2));
  padding:9px 15px; border-radius:999px;
  box-shadow:0 10px 26px rgba(184,121,53,.22);
  display:inline-flex; align-items:center; gap:7px;
  transition:var(--sk-transition);
}
#header-desktop .cart-link:hover{ filter:brightness(1.05); }
#header-desktop .cart-link i{ color:#111 !important; font-size:16px !important; }
#header-desktop .cart-link .cart-counter{
  background:#fff; color:#111; min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; font-size:10px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}

/* Search field on dark -> rounded pill, light text */
#header-desktop .search-bar input{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(200,169,110,.22) !important;
  color:#fff !important; border-radius:999px !important;
}
#header-desktop .search-bar input::placeholder{ color:rgba(240,235,227,.5) !important; }
/* ============================================================
   6. HEADER EXACT-MATCH — top bar two tiers, moved search, SVG icons
   ============================================================ */

/* Top bar -> stack: USP slider (full width) above trust + search + language */
.top-bar .row{ display:block !important; }
.topbar-usps{ width:100% !important; }
.topbar-extra{ width:100% !important; display:flex !important; align-items:center; gap:14px; }
.topbar-extra .topbar-info{ margin-right:auto; }

/* Moved search -> compact pill in the top bar (design: top-right) */
.topbar-search{ flex:0 0 auto; width:210px; }
.topbar-search input{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(200,169,110,.22) !important;
  color:#fff !important; border-radius:999px !important;
  height:30px !important; font-size:12px !important;
}
.topbar-search input::placeholder{ color:rgba(240,235,227,.5) !important; }

/* SVG icons (exact design glyphs) */
#header-desktop .header-icons a svg,
#header-mobile  .header-icons a svg{ display:block; }
#header-desktop .header-icons a:not(.cart-link) svg{ stroke:rgba(240,235,227,.9) !important; }
#header-desktop .cart-link svg{ stroke:#111 !important; }
#header-mobile  .header-icons a svg{ stroke:rgba(240,235,227,.92) !important; }

/* Design action order: account first, cart pill last */
#header-desktop .header-icons{ display:flex; }
#header-desktop .header-icons .cart-link{ order:2; }
/* ============================================================
   7. HEADER FINETUNE — colors (3 tiers), cart pill text+counter,
      search width, language pill, marquee, discount banner
   ============================================================ */

/* --- 3 tiers like design --- */
.topbar-usps{ background:#080808 !important; }                 /* top-top: USP slider */
.top-bar{ background:#333333 !important; }                      /* top: trust + search + lang */
.topbar-extra{ background:rgba(255,255,255,.025); border-top:1px solid rgba(255,255,255,.06); }
.header-main{ background:#333333 !important; }                  /* header (was #171717) */

/* --- Continuous USP ticker (marquee) --- */
.swiper-topbar-usps .swiper-wrapper{ transition-timing-function:linear !important; }
.swiper-topbar-usps .topbar-item-usp{ width:auto !important; }

/* --- Cart pill: label + inline counter inside the button --- */
#header-desktop .cart-link{ padding:8px 16px; gap:8px; }
#header-desktop .cart-link .cart-label{
  color:#111; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
#header-desktop .cart-link .cart-counter{
  position:static !important; top:auto !important; right:auto !important;
  background:#fff !important; color:#111 !important; box-shadow:none !important;
  width:18px; height:18px; min-width:18px; font-size:10px; font-weight:800;
}
#header-mobile .cart-label{ display:none !important; }          /* mobile stays icon-only */

/* --- Search: shorter, like design --- */
.topbar-search{ width:168px !important; }
.topbar-search input{ height:28px !important; }

/* --- Language selector as a pill (flag + code) --- */
.language-selector .current-language{
  height: 27px;
  border:1px solid rgba(200,169,110,.20) !important;
  border-radius:999px !important; padding:4px 10px !important;
  background:rgba(255,255,255,.03) !important; gap:7px !important;
}
.language-selector .current-language img{ width:18px !important; height:auto !important; border-radius:2px; }
.language-selector .lang-code{ color:rgba(240,235,227,.9); font-size:11px; font-weight:700; letter-spacing:.06em; }
.language-selector .current-language i{ color:rgba(240,235,227,.55) !important; font-size:9px !important; }

/* --- Discount/action banner -> premium dark + gold --- */
.discount_banner_page{
  background:#0d0d0d !important; color:var(--sk-gold2) !important;
  border-bottom:1px solid rgba(200,169,110,.18); letter-spacing:.03em;
}
.discount_banner_page p,
.discount_banner_page a,
.discount_banner_page a span,
.discount_banner_page strong{ color:var(--sk-gold2) !important; }
.discount_banner_page .fas{ color:var(--sk-gold) !important; }
/* New logo: render white on the dark footer (header logo already inverted) */
footer[role="contentinfo"] .footer-logo img{ filter:brightness(0) invert(1); }
/* ============================================================
   8. LOGO — show original colors (no invert) + larger
   ============================================================ */
#header-desktop .header-logo img,
#header-mobile  .header-logo img,
.header-logo img{ filter:none !important; }
footer[role="contentinfo"] .footer-logo img{ filter:none !important; }

#header-desktop .header-logo img{ height:58px !important; max-width:none !important; width:auto !important; }
#header-mobile  .header-logo img{ height:46px !important; max-width:none !important; width:auto !important; }
footer[role="contentinfo"] .footer-logo img{ max-height:62px !important; width:auto !important; height:auto !important; }
/* ============================================================
   9. FOOTER LAYOUT -> design (grid columns, serif gold headings,
      round social buttons). Existing content kept.
   ============================================================ */
footer[role="contentinfo"] .first-footer-row{
  display:grid !important; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:40px; align-items:start;
}
footer[role="contentinfo"] h3{
  font-family:var(--sk-serif) !important; color:var(--sk-gold2) !important;
  font-size:19px !important; font-weight:500 !important; margin-bottom:14px; letter-spacing:.01em;
}
footer[role="contentinfo"] ul.nav{ list-style:none; padding:0; margin:0; }
footer[role="contentinfo"] ul.nav li{ margin-bottom:9px; }
footer[role="contentinfo"] ul.nav li a{ color:rgba(240,235,227,.72); font-size:14px; }
footer[role="contentinfo"] ul.nav li a:hover{ color:var(--sk-gold2); }

/* Social -> round bordered buttons (design) */
footer[role="contentinfo"] .footer-socials{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
footer[role="contentinfo"] .footer-socials a{
  width:38px; height:38px; border:1px solid rgba(200,169,110,.28); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:rgba(240,235,227,.85); transition:var(--sk-transition);
}
footer[role="contentinfo"] .footer-socials a:hover{
  color:#111 !important; background:var(--sk-gold2); border-color:var(--sk-gold2);
}
footer[role="contentinfo"] .footer-socials a i{ color:inherit !important; }

/* Bottom row divider */
footer[role="contentinfo"] .third-footer-row{
  border-top:1px solid rgba(200,169,110,.16); padding-top:22px; margin-top:10px;
}

@media(max-width:900px){
  footer[role="contentinfo"] .first-footer-row{ grid-template-columns:1fr 1fr; gap:28px; }
}
@media(max-width:560px){
  footer[role="contentinfo"] .first-footer-row{ grid-template-columns:1fr; }
}
/* ============================================================
   10. FOOTER POLISH -> design look (newsletter, payment, contact, bottom)
   Keeps the richer region-correct content; only styling.
   ============================================================ */

/* Newsletter -> centered "final" CTA like design */
footer[role="contentinfo"] .footer-newsletter{ text-align:center; padding:50px 0 !important; }
footer[role="contentinfo"] .footer-newsletter .footer-newsletter-title{ font-size:clamp(28px,3.4vw,40px) !important; }
footer[role="contentinfo"] .footer-newsletter-desc{ max-width:560px; margin:0 auto 16px !important; color:rgba(240,235,227,.72) !important; }
footer[role="contentinfo"] .footer-newsletter .wpcf7,
footer[role="contentinfo"] .footer-newsletter form{ max-width:470px; margin-left:auto; margin-right:auto; }
footer[role="contentinfo"] .newsletter-disclaimer{ color:rgba(240,235,227,.55) !important; margin-top:12px; }

/* Payment + contact row */
footer[role="contentinfo"] .second-footer-row{ display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; align-items:center; }
footer[role="contentinfo"] .paylogo-container{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
footer[role="contentinfo"] .paylogo img{ height:30px !important; width:auto !important; background:#fff; border-radius:5px; padding:3px 5px; box-shadow:0 1px 4px rgba(0,0,0,.25); }

/* Contact options as bordered cards */
footer[role="contentinfo"] .contact-footer-icons{ display:flex; gap:14px; flex-wrap:wrap; }
footer[role="contentinfo"] .footer-contact-option{
  display:flex; align-items:center; gap:12px;
  border:1px solid rgba(200,169,110,.20); border-radius:12px; padding:10px 16px;
  color:rgba(240,235,227,.85) !important; transition:var(--sk-transition);
}
footer[role="contentinfo"] .footer-contact-option:hover{ border-color:var(--sk-gold2); }
footer[role="contentinfo"] .footer-option-text{ color:rgba(240,235,227,.6); }

/* Bottom row (legal, reviews, company, socials, copyright) */
footer[role="contentinfo"] .footer-bottom{ border-top:1px solid rgba(200,169,110,.16); padding-top:22px; margin-top:8px; }
footer[role="contentinfo"] .footer-legal a{ color:rgba(240,235,227,.6); }
footer[role="contentinfo"] .footer-legal a:hover{ color:var(--sk-gold2); }
footer[role="contentinfo"] .footer-company{ color:rgba(240,235,227,.55) !important; }
/* ============================================================
   11. MEGA MENU dropdowns -> premium dark + account circle + cart underline fix
   ============================================================ */

/* Dropdown panels (grid + flyout) -> dark premium */
#mega-menu-wrap-header-menu .mega-sub-menu{
  background:#171717 !important;
  border:1px solid rgba(200,169,110,.18) !important;
  box-shadow:0 20px 55px rgba(0,0,0,.5) !important;
}
#mega-menu-wrap-header-menu .mega-sub-menu .mega-menu-column,
#mega-menu-wrap-header-menu .mega-sub-menu .mega-menu-row{ background:transparent !important; }
#mega-menu-wrap-header-menu .mega-sub-menu,
#mega-menu-wrap-header-menu .mega-sub-menu p,
#mega-menu-wrap-header-menu .mega-sub-menu li,
#mega-menu-wrap-header-menu .mega-sub-menu span{ color:rgba(240,235,227,.78) !important; }
#mega-menu-wrap-header-menu .mega-sub-menu a,
#mega-menu-wrap-header-menu .mega-sub-menu a.mega-menu-link{ color:rgba(240,235,227,.82) !important; text-decoration:none !important; }
#mega-menu-wrap-header-menu .mega-sub-menu a:hover,
#mega-menu-wrap-header-menu .mega-sub-menu a.mega-menu-link:hover{ color:var(--sk-gold2) !important; }
/* column / widget titles -> gold serif */
#mega-menu-wrap-header-menu .mega-sub-menu .mega-block-title,
#mega-menu-wrap-header-menu .mega-sub-menu .widget-title,
#mega-menu-wrap-header-menu .mega-sub-menu h1,
#mega-menu-wrap-header-menu .mega-sub-menu h2,
#mega-menu-wrap-header-menu .mega-sub-menu h3,
#mega-menu-wrap-header-menu .mega-sub-menu h4{
  color:var(--sk-gold2) !important; font-family:var(--sk-serif) !important;
}

/* Account icon -> circle (design) */
#header-desktop .header-icons a:not(.cart-link){
  width:42px; height:42px; border:1px solid rgba(240,235,227,.30); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; transition:var(--sk-transition);
}
#header-desktop .header-icons a:not(.cart-link):hover{ border-color:var(--sk-gold2); }
#header-desktop .header-icons a:not(.cart-link) svg{ stroke:rgba(240,235,227,.9) !important; }

/* Cart pill text -> no underline */
#header-desktop .cart-link,
#header-desktop .cart-link *,
.cart-link .cart-label{ text-decoration:none !important; }
/* ============================================================
   12. ANNOUNCE bar -> design CSS marquee ticker
   ============================================================ */
.announce{
  background:#080808; color:var(--sk-gold2);
  height:38px; display:flex; align-items:center; overflow:hidden;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase; width:100%;
}
.announce-track{
  display:inline-flex; gap:64px; white-space:nowrap;
  padding-left:64px; will-change:transform;
  animation:sk-ticker 32s linear infinite;
}
.announce-track span{ display:inline-block; }
@keyframes sk-ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* keep the top bar tiers clean now that USP swiper is gone */
.top-bar .row{ display:block !important; padding:0 !important; max-width:none !important; }
.topbar-extra{ max-width:1400px; margin:0 auto; padding:8px 40px; }
@media(max-width:760px){ .topbar-extra{ padding:8px 18px; } }
/* Larger header logo */
#header-desktop .header-logo img{ height:65px !important; }
#header-mobile  .header-logo img{ height:54px !important; }
/* ============================================================
   13. Top-level menu hover -> gold (beat Mega Menu plugin's white hover)
   ============================================================ */
html #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link:hover,
html #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item:hover > a.mega-menu-link,
html #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
html #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
html #mega-menu-wrap-header-menu-frans #mega-menu-header-menu-frans > li.mega-menu-item > a.mega-menu-link:hover,
html #mega-menu-wrap-header-menu-frans #mega-menu-header-menu-frans > li.mega-menu-item:hover > a.mega-menu-link,
html #mega-menu-wrap-header-menu-frans #mega-menu-header-menu-frans > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
html #mega-menu-wrap-header-menu-frans #mega-menu-header-menu-frans > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link{
  color:var(--sk-gold2) !important;
  background:transparent !important;
}
/* ============================================================
   14. Topbar search (shorter + black) + uniform header-top color
   ============================================================ */
.topbar-search{ width:auto !important; flex:0 0 auto; }
.topbar-search form.asearch{ width:175px !important; margin:0 !important; }
.topbar-search .input_search,
.topbar-search #keyword{
  width:175px !important; max-width:175px !important; min-width:0 !important;
  background:#0d0d0d !important; color:#fff !important;
  border:1px solid rgba(200,169,110,.25) !important; border-radius:999px !important;
  height:32px !important; font-size:12px !important; padding:0 14px !important; box-shadow:none !important;
}
.topbar-search .input_search::placeholder{ color:rgba(240,235,227,.5) !important; }
.topbar-search form.asearch button,
.topbar-search #mybtn{ background:transparent !important; color:rgba(240,235,227,.7) !important; }

/* Header-top band: one even color (fixes topbar-extra wrong bg) */
.top-bar{ background:#333333 !important; }
.topbar-extra{ background:transparent !important; border-top:none !important; }
/* ============================================================
   15. asearch widget in topbar -> short BLACK pill
   (overrides the widget's own inline white style)
   ============================================================ */
.topbar-search .search_bar{ width:178px !important; max-width:178px !important; }
.topbar-search form.asearch{background: #3c3c3c !important;
  border:1px solid rgba(200,169,110,.25) !important;
  border-radius:999px !important;
  width:178px !important; padding-right: 0;
    padding-left: 10px; height: 27px !important;
}
.topbar-search form.asearch .input_search,
.topbar-search form.asearch #keyword{
  background:transparent !important; border:none !important; box-shadow:none !important;
  color:#fff !important; width:100% !important; height:25px !important;
  font-size:12px !important; padding:0 !important;
}
.topbar-search form.asearch .input_search::placeholder{ color:rgba(240,235,227,.5) !important; padding-left: 10px; }
.topbar-search form.asearch #mybtn,
.topbar-search form.asearch #mybtn i{ color:rgba(240,235,227,.7) !important; background:transparent !important; }
/* Footer newsletter -> design .final look */
footer[role="contentinfo"] .sk-news-eyebrow{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--sk-gold); font-weight:600; margin-bottom:12px; text-align:center;
}
/* ============================================================
   16. FOOTER brand column (design) + grid
   ============================================================ */
footer[role="contentinfo"] .first-footer-row{ display:grid !important; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; align-items:start; }
footer[role="contentinfo"] .sk-footer-brand{ }
footer[role="contentinfo"] .sk-footer-logo{ height:56px; width:auto; margin-bottom:16px; }
footer[role="contentinfo"] .sk-footer-tagline{ color:rgba(240,235,227,.62); font-size:14px; line-height:1.7; max-width:320px; margin:0 0 18px; }
footer[role="contentinfo"] .sk-footer-social{ display:flex; gap:10px; }
footer[role="contentinfo"] .sk-footer-social a{ width:38px; height:38px; border:1px solid rgba(200,169,110,.28); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:rgba(240,235,227,.85); transition:var(--sk-transition); }
footer[role="contentinfo"] .sk-footer-social a:hover{ background:var(--sk-gold2); color:#111; border-color:var(--sk-gold2); }
footer[role="contentinfo"] .sk-footer-social svg{ width:17px; height:17px; }
footer[role="contentinfo"] .footer-company-info{ grid-column:1 / -1; border-top:1px solid rgba(200,169,110,.14); padding-top:24px; margin-top:8px; }
footer[role="contentinfo"] .footer-bottom .footer-socials{ display:none; }
@media(max-width:900px){ footer[role="contentinfo"] .first-footer-row{ grid-template-columns:1fr 1fr; } footer[role="contentinfo"] .footer-company-info{ grid-column:auto; } }
@media(max-width:560px){ footer[role="contentinfo"] .first-footer-row{ grid-template-columns:1fr; } }
/* Footer newsletter -> .final (title em, incentive, perks) */
footer[role="contentinfo"] .footer-newsletter-title em{ color:var(--sk-gold2); font-style:italic; }
footer[role="contentinfo"] .sk-news-incentive{ color:var(--sk-gold2); font-weight:700; margin:0 0 18px; text-align:center; }
footer[role="contentinfo"] .newsletter-perks{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px; }
footer[role="contentinfo"] .newsletter-perks span{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:rgba(240,235,227,.7); border:1px solid rgba(200,169,110,.22); border-radius:999px; padding:6px 14px; }
footer[role="contentinfo"] .newsletter-disclaimer{ text-align:center; }
/* ============================================================
   18. Topbar-extra -> eigen full-width balk (#383838), content als .row (1280)
   ============================================================ */
.top-bar{ background:#383838 !important; }            /* full-width balk-kleur (announce dekt eigen tier af) */
.topbar-extra{ background:transparent !important; border-top:none !important; }
.topbar-extra.row{    padding-top: 5px !important;
    padding-bottom: 5px !important;
  max-width:1280px !important; margin:0 auto !important; display:flex !important; align-items:center; gap:14px; justify-content:flex-start;
}
.topbar-extra.row .topbar-info{ margin-right:auto; }
@media(max-width:760px){ .topbar-extra.row{ padding:8px 18px !important; } }