/* KONOK SHILPO — STEP 05 central theme token layer.
   Static values remain production-safe fallbacks; validated runtime branding
   may override the five public --brand-* theme tokens on :root. */
:root{
  --brand-primary:#C7A74D;
  --brand-primary-hover:#D4B85A;
  --brand-primary-soft:#F9F6EF;
  --brand-highlight:var(--brand-primary);
  --brand-secondary:#36454F;
  --brand-background:#FFFFFF;
  --brand-surface:var(--brand-background);
  --brand-text:var(--brand-secondary);
  --brand-muted:#706A5D;
  --brand-border:#E8E0D0;
  --brand-on-primary:#FFFFFF;

  /* Compatibility mapping for the existing design system. */
  --black:var(--brand-secondary) !important;
  --gold:var(--brand-primary) !important;
  --gold2:var(--brand-primary-hover) !important;
  --cream:var(--brand-primary-soft) !important;
  --muted:#706A5D !important;
  --border:#E8E0D0 !important;
  --white:#FFFFFF !important;
  /* Keep the existing semantic danger/error token red. Branding accents are
     targeted below so validation, delete and cancelled states stay meaningful. */
  --red:#C62828 !important;
  --brand:#36454F !important;
}

body{background:var(--brand-background);color:var(--brand-text)}
a{transition:color .18s ease,background-color .18s ease,border-color .18s ease}
a:hover{color:var(--brand-primary-hover)}
::selection{background:var(--brand-primary);color:var(--brand-on-primary)}

/* Shared navigation and search states. */
.navbar{background:#fff;border-bottom:1px solid var(--brand-border)}
.nav-menu-bar a:hover,
.nav-menu-bar a.active,
.drawer-nav-link:hover,
.drawer-nav-link.active,
.drawer-category-toggle:hover{color:var(--brand-primary)}
.drawer-nav-link.active,
.drawer-category-toggle.active{background:var(--brand-primary-soft)}
.nav-search input:focus,
#mobileSearchInput:focus,
input:focus,
select:focus,
textarea:focus{border-color:var(--brand-primary) !important;box-shadow:0 0 0 3px var(--brand-primary-soft)}
.nav-cart-badge,.pb,.badge-count,.ks-bnav-badge,.bnav-badge{
  background:var(--brand-primary) !important;
  color:var(--brand-on-primary) !important;
}

/* Primary actions use KONOK SHILPO gold with white labels. */
.btn-g,.bo,.btn-buy,.sticky-btn-g,.checkout-cta,.place-order-btn,
.btn-auth,.save-btn,.track-btn,.empty-btn,.go-shop-btn,.apply-filter-btn,
.wr-submit-btn,.write-review-btn,.oc-btn.primary,.a2hs-modal .close-btn,
.sheet-invoice-download,.empty-box a,.empty-box button{
  background:var(--brand-primary) !important;
  border-color:var(--brand-primary) !important;
  color:var(--brand-on-primary) !important;
}
.btn-g:hover,.bo:hover,.btn-buy:hover,.sticky-btn-g:hover,.checkout-cta:hover,
.place-order-btn:hover,.btn-auth:hover,.save-btn:hover,.track-btn:hover,
.go-shop-btn:hover,.apply-filter-btn:hover,.wr-submit-btn:hover,
.write-review-btn:hover,.oc-btn.primary:hover,.sheet-invoice-download:hover{
  background:var(--brand-primary-hover) !important;
  border-color:var(--brand-primary-hover) !important;
  color:#fff !important;
}

/* Premium black secondary actions. */
.btn-cart,.sticky-btn,.pbtn,.checkout-btn,.wish-add,.oa-btn.primary,
.ofilter.active,.offer-btn,.saved-add-btn,.rec-add,.pag-btn.active{
  background:var(--brand-secondary) !important;
  border-color:var(--brand-secondary) !important;
  color:#fff !important;
}

/* Product, category, filter and account active accents. */
.slide-tag,.offer-strip,.hdot.active,.rbar-fill,.fsb-fill,
.track-step.done .ts-dot,.s-step.done .s-dot,.addr-default-tag,
.toggle input:checked + .toggle-track,.auth-tab.active::after{
  background:var(--brand-primary) !important;
  border-color:var(--brand-primary) !important;
  color:var(--brand-on-primary) !important;
}
.pcard:hover,.cat:hover,.addr-card.default,.tab.active,.filter-opt.active,
.vopt.selected,input[type="checkbox"]:checked,input[type="radio"]:checked{
  border-color:var(--brand-primary) !important;
}
.price,.pprice,.pcur,.order-total,.cart-total,.tab.active,.filter-opt.active,
.edit-link,.breadcrumb a{color:var(--brand-primary-hover) !important}
.section-see-btn:hover{
  background:var(--brand-primary) !important;
  color:var(--brand-on-primary) !important;
}

/* Target-page controls that are not part of the shared button classes. */
body[data-popup-page="home"] .home-search button,
body[data-popup-page="order"] .suggestion-badge,
body[data-popup-page="order"] .complaint-submit{
  background:var(--brand-primary) !important;
  border-color:var(--brand-primary) !important;
  color:var(--brand-on-primary) !important;
}

/* Bind Home and Shop promotional accents to the official primary red. */
body[data-popup-page="home"] .home-title-mark,
body[data-popup-page="home"] .home-popular-shell .pbadge,
body[data-popup-page="home"] .home-popular-shell .pbtn-cart-icon,
.shop-hero::before,
.ftab.active,
.shop-section-title::before,
.pbadge,
.pbtn-cart-icon{
  background:var(--brand-primary) !important;
  border-color:var(--brand-primary) !important;
  color:var(--brand-on-primary) !important;
}
body[data-popup-page="home"] .home-popular-shell .pbtn-cart-icon,
.pbtn-cart-icon,
.ftab.active{
  box-shadow:0 6px 14px var(--brand-primary-soft) !important;
}
.shop-hero-kicker,
.shop-hero h1 span,
.discount-tag,
.product-voucher-discount,
#voucherDetailDiscount,
.tot-row.discount span:last-child{
  color:var(--brand-highlight) !important;
}
.discount-tag{
  background:var(--brand-primary-soft) !important;
  color:var(--brand-primary-hover) !important;
}

/* Later product-gallery highlight rules also used the retired red identity. */
.product-gallery .thumb.active,
.product-gallery .gallery-dot.active{
  border-color:var(--brand-primary) !important;
  background:var(--brand-primary) !important;
  box-shadow:0 0 0 1px var(--brand-primary),0 4px 12px var(--brand-primary-soft) !important;
}
.product-gallery .gallery-dot:focus-visible{
  outline-color:var(--brand-primary) !important;
}
#colorVariantBox .color-vopt:hover,
#colorVariantBox .color-vopt[aria-pressed="true"]{
  border-color:var(--brand-primary) !important;
  box-shadow:0 0 0 1px var(--brand-primary-soft) !important;
}


/* STEP 05: shared header/language/bottom-nav accents that previously used
   direct production-red literals. Neutral white/black surfaces stay neutral. */
.ks-language-switcher{border-color:var(--brand-primary) !important;background:var(--brand-primary-soft) !important}
.ks-language-switcher button.is-active{background:var(--brand-primary) !important;color:#fff !important}
.drawer-nav-link:hover,.drawer-category-toggle:hover,.drawer-submenu a:hover{background:var(--brand-primary-soft) !important;color:var(--brand-primary) !important}
.drawer-order,.drawer-account{background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-hover)) !important;color:#fff !important}
.drawer-order:focus-visible,.drawer-account:focus-visible{outline-color:var(--brand-primary-soft) !important}
body nav.ks-reference-bottom{border-top-color:var(--brand-primary) !important}
body nav.ks-reference-bottom .ks-bnav-item.active,
body nav.ks-reference-bottom .ks-bnav-item:hover,
body nav.ks-reference-bottom .ks-bnav-item.active .ks-bnav-ico{color:var(--brand-primary) !important}
body nav.ks-reference-bottom .ks-bnav-badge{background:var(--brand-primary) !important;color:#fff !important}
body nav.ks-reference-bottom .ks-bnav-item:focus-visible{outline-color:var(--brand-primary) !important}

/* STEP 05: selected page accents that are brand-dependent. Semantic status
   colors (success/error/warning/pending) are intentionally not included. */
.auth-hero::after{background:linear-gradient(var(--brand-primary),var(--brand-primary-hover)) !important}
.hero-copy h1{color:var(--brand-primary) !important}
.auth-tab.active,.btn-auth{background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-hover)) !important;color:#fff !important}
.forgot-link,.auth-switch button,.guest-link .privacy-line a{color:var(--brand-primary-hover) !important}
.auth-secure svg{fill:var(--brand-primary) !important;stroke:var(--brand-primary) !important}
.member-badge,.points-tier{background:var(--brand-primary-soft) !important;border-color:var(--brand-primary) !important;color:var(--brand-primary-hover) !important}
.pstat:hover,.addr-card.default,.addr-add-card:hover,.offer-card{background:var(--brand-primary-soft) !important}
.addr-card.default,.addr-add-card:hover,.offer-card{border-color:var(--brand-primary) !important}
.points-card::before,.profile-banner::before,.profile-banner::after{background:var(--brand-primary-soft) !important}
.star-input button.on,.star-input button:hover{color:var(--brand-primary) !important}

/* Footer keeps a near-black premium base with a readable white logo plate. */
footer{background:var(--brand-secondary) !important;color:rgba(255,255,255,.82) !important}
footer a{color:rgba(255,255,255,.82)}
footer a:hover{color:#fff}
.footer-brand-logo{
  display:block;
  width:min(250px,72vw);
  height:auto;
  max-height:78px;
  object-fit:contain;
  background:#fff;
  border-radius:9px;
  padding:4px 8px;
}

/* Login and confirmation logo variants. */
.auth-brand-logo,.confirmation-brand-logo{
  display:block;
  width:min(300px,82vw);
  height:auto;
  margin:0 auto;
  object-fit:contain;
}
.confirmation-brand-logo{width:min(260px,76vw)}

@media(max-width:767px){
  .footer-brand-logo{width:min(220px,76vw)}
  .auth-brand-logo{width:min(250px,82vw)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto !important;transition-duration:.01ms !important}
}

/* STEP 11 — Remaining branding consumer gap closure.
   These selectors migrate only legacy brand-red presentation consumers to the
   validated central --brand-* tokens. Semantic danger/error/discount/status
   colors remain owned by their existing semantic tokens and are not targeted. */

/* Home: decorative hero accent, View All links, category selection and rating accents. */
body[data-popup-page="home"] .hero::after,
body[data-popup-page="home"] .home-search button,
body[data-popup-page="home"] .home-title-mark,
body[data-popup-page="home"] .hdot.active,
body[data-popup-page="home"] .offer-strip,
body[data-popup-page="home"] .home-popular-shell .pbadge,
body[data-popup-page="home"] .home-popular-shell .pbtn-cart-icon{
  background:var(--brand-primary) !important;
}
body[data-popup-page="home"] .cat-section .see-all,
body[data-popup-page="home"] .home-section-head a,
body[data-popup-page="home"] .home-popular-shell .home-card-rating,
body[data-popup-page="home"] .stars,
body[data-popup-page="home"] .rstars{
  color:var(--brand-primary) !important;
}
body[data-popup-page="home"] .home-popular-shell .pcur{
  color:var(--brand-primary-hover) !important;
}
body[data-popup-page="home"] .cat.active::after{
  border-color:var(--brand-primary) !important;
}
body[data-popup-page="home"] .btn-g{
  background:var(--brand-primary) !important;
  border-color:var(--brand-primary) !important;
  color:var(--brand-on-primary) !important;
}

/* Shop: image-tab label, empty-state accent and card rating were still literal red. */
body[data-popup-page="shop"] .ftab.category-image.active .ftab-label,
body[data-popup-page="shop"] .shop-layout .pbadge,
body[data-popup-page="shop"] .shop-layout .pbtn-cart-icon{
  background:var(--brand-primary) !important;
}
body[data-popup-page="shop"] .shop-layout .home-card-rating,
body[data-popup-page="shop"] .shop-hero-kicker,
body[data-popup-page="shop"] .shop-hero h1 span{
  color:var(--brand-primary) !important;
}
body[data-popup-page="shop"] .shop-layout .pcur{
  color:var(--brand-primary-hover) !important;
}
body[data-popup-page="shop"] .no-results-card::before{
  background:linear-gradient(90deg,var(--brand-primary),var(--brand-secondary)) !important;
}
body[data-popup-page="shop"] .no-results-icon{
  background:var(--brand-primary-soft) !important;
  box-shadow:inset 0 0 0 1px var(--brand-primary) !important;
}

/* Login/Profile visual accents. Status/error/delete/discount selectors are deliberately excluded. */
.auth-hero{
  background:
    radial-gradient(circle at 78% 20%,var(--brand-primary-soft),transparent 24%),
    linear-gradient(105deg,#121212 0%,#0d0d0d 54%,#36454F 100%) !important;
}
.hero-scene::before{border-color:var(--brand-primary) !important;box-shadow:inset 0 -42px 0 var(--brand-primary-soft) !important}
.hero-scene::after{border-top-color:var(--brand-primary) !important;box-shadow:0 9px 0 -2px var(--brand-primary-soft) !important}
.auth-tab.active,.btn-auth{box-shadow:0 4px 12px var(--brand-primary-soft) !important}
.review-stars,.star-input button.on,.star-input button:hover{color:var(--brand-primary) !important}

/* Cart recommendation chrome is brand presentation; remove/delete remains semantic red. */
.ci-wish-btn:hover,.ci-move-btn:hover{color:var(--brand-primary) !important}
.rec-scroll-btn{border-color:var(--brand-primary) !important}
.rec-card:hover{border-color:var(--brand-primary) !important}

/* Shop's inline Boost loader copy is before this stylesheet; bind it to central tokens. */
body[data-popup-page="shop"] .ks-boost-core{filter:drop-shadow(0 12px 26px var(--brand-primary-soft)) !important}
body[data-popup-page="shop"] .ks-boost-core::before{background:linear-gradient(90deg,var(--brand-primary-soft),transparent) !important}
body[data-popup-page="shop"] .ks-boost-ring{background:conic-gradient(from 0deg,var(--brand-primary) 0 13%,var(--brand-primary-soft) 13% 25%,var(--brand-primary-hover) 25% 37%,var(--brand-primary-soft) 37% 50%,var(--brand-primary) 50% 63%,var(--brand-primary-soft) 63% 75%,var(--brand-primary-hover) 75% 87%,var(--brand-primary-soft) 87% 100%) !important}
body[data-popup-page="shop"] .ks-boost-ring::before,
body[data-popup-page="shop"] .ks-boost-ring::after,
body[data-popup-page="shop"] .ks-boost-emblem{border-color:var(--brand-primary-soft) !important}
body[data-popup-page="shop"] .ks-boost-speed-lines i{background:linear-gradient(90deg,var(--brand-primary),transparent) !important}