/* Comfortrek V307 — unified brand theme system
   Same Comfortrek identity across every storefront theme and both appearance modes.
   The theme changes atmosphere; the brand remains orange / white / green.
*/
:root{
  --ct307-orange:#ff7a00;
  --ct307-orange-2:#ff9f1c;
  --ct307-green:#16a34a;
  --ct307-green-2:#22c55e;
  --ct307-white:#fff;
  --ct307-black:#08090b;
  --ct307-ink:#101214;
  --ct307-radius:16px;
  --ct307-shadow:0 18px 55px rgba(0,0,0,.16);
}

body[class*="site-theme-"]{
  --ct-brand-primary:var(--ct307-orange);
  --ct-brand-primary-2:var(--ct307-orange-2);
  --ct-brand-success:var(--ct307-green);
  --ct-brand-success-2:var(--ct307-green-2);
  --ct-brand-radius:var(--theme-editor-radius,16px);
  --ct-brand-shadow:var(--ct307-shadow);
  --ct-brand-line:rgba(255,122,0,.18);
}

/* Dark appearance: premium black/charcoal base with Comfortrek orange/green signals. */
body.appearance-dark[class*="site-theme-"]{
  --ct307-page:#070809;
  --ct307-surface:#101214;
  --ct307-surface-2:#171a1d;
  --ct307-text:#f7f7f4;
  --ct307-muted:#aeb4b8;
  --ct307-line:rgba(255,255,255,.10);
  --ct307-header:rgba(7,8,9,.90);
  background:var(--ct307-page)!important;
  color:var(--ct307-text)!important;
}

/* Light appearance: warm white, not the washed-out grey/cream treatment that caused readability problems. */
body.appearance-light[class*="site-theme-"]{
  --ct307-page:#faf9f6;
  --ct307-surface:#ffffff;
  --ct307-surface-2:#f3f1ec;
  --ct307-text:#111315;
  --ct307-muted:#5f666b;
  --ct307-line:rgba(17,19,21,.10);
  --ct307-header:rgba(255,255,255,.94);
  background:var(--ct307-page)!important;
  color:var(--ct307-text)!important;
}

/* Every existing theme keeps its personality through the secondary accent. */
body.site-theme-signature{--ct307-theme:#d7b35c}
body.site-theme-midnight_luxe{--ct307-theme:#9b8cff}
body.site-theme-aurora{--ct307-theme:#72d9ce}
body.site-theme-obsidian_gold{--ct307-theme:#d8b45d}
body.site-theme-titanium{--ct307-theme:#b9c6d0}
body.site-theme-royal_noir{--ct307-theme:#d66b7d}
body.site-theme-cyber_chrome{--ct307-theme:#5edcff}
body.site-theme-emerald_noir{--ct307-theme:#75c89b}
body.site-theme-desert_luxe{--ct307-theme:#d89a63}
body.site-theme-pearl_luxe{--ct307-theme:#8bc8a9}
body.site-theme-violet_neon{--ct307-theme:#c77cff}
body.site-theme-monochrome{--ct307-theme:#b9bdc2}
body.site-theme-palo_alto,body.site-theme-paloalto_travel{--ct307-theme:#d5aa68}
body.site-theme-apex_atelier{--ct307-theme:#d7ae69}
body.site-theme-symmetry_studio{--ct307-theme:#8db4cf}
body.site-theme-prestige_maison{--ct307-theme:#d1b17a}
body.site-theme-motion_gallery{--ct307-theme:#73c8c4}
body.site-theme-broadcast_editorial{--ct307-theme:#d8b56f}
body.site-theme-enterprise_grid{--ct307-theme:#88b6e6}
body.site-theme-hyper_commerce{--ct307-theme:#ff718a}
body.site-theme-concept_objects{--ct307-theme:#9eb7a9}
body.site-theme-wonder_immersive{--ct307-theme:#8bd5ff}
body.site-theme-quiet_luxury{--ct307-theme:#c9ae7b}
body.site-theme-nordic_atelier{--ct307-theme:#9bb6c5}
body.site-theme-gallery_house{--ct307-theme:#c6a77c}
body.site-theme-studio_mono{--ct307-theme:#aeb4bb}
body.site-theme-editorial_motion{--ct307-theme:#d29a61}
body.site-theme-neo_utility{--ct307-theme:#83b7d9}

/* Shared storefront surfaces */
body[class*="site-theme-"] .site-header{
  background:var(--ct307-header)!important;
  border-bottom:1px solid var(--ct307-line)!important;
  backdrop-filter:blur(18px) saturate(125%);
}
body[class*="site-theme-"] .announcement-bar{
  background:linear-gradient(90deg,var(--ct307-orange),var(--ct307-orange-2),var(--ct307-green))!important;
  color:#fff!important;
  border:0!important;
  font-weight:700;
  letter-spacing:.035em;
}
body[class*="site-theme-"] .main-nav a,
body[class*="site-theme-"] .header-actions a,
body[class*="site-theme-"] .cart-icon-btn,
body[class*="site-theme-"] .appearance-toggle{
  color:var(--ct307-text)!important;
}
body[class*="site-theme-"] .search-input{
  background:var(--ct307-surface-2)!important;
  color:var(--ct307-text)!important;
  border:1px solid var(--ct307-line)!important;
}
body[class*="site-theme-"] .search-input::placeholder{color:var(--ct307-muted)!important}

body[class*="site-theme-"] .btn-primary,
body[class*="site-theme-"] button.btn-primary{
  background:linear-gradient(135deg,var(--ct307-orange),var(--ct307-orange-2))!important;
  color:#fff!important;
  border:0!important;
  border-radius:var(--ct-brand-radius)!important;
  box-shadow:0 12px 32px rgba(255,122,0,.25)!important;
}
body[class*="site-theme-"] .btn-secondary{
  background:transparent!important;
  color:var(--ct307-text)!important;
  border:1px solid color-mix(in srgb,var(--ct307-green) 55%,var(--ct307-text))!important;
  border-radius:var(--ct-brand-radius)!important;
}
body[class*="site-theme-"] .product-card,
body[class*="site-theme-"] .category-card,
body[class*="site-theme-"] .tag-card,
body[class*="site-theme-"] .account-card,
body[class*="site-theme-"] .filter-panel,
body[class*="site-theme-"] .search-panel,
body[class*="site-theme-"] .drawer,
body[class*="site-theme-"] .modal-content{
  background:var(--ct307-surface)!important;
  color:var(--ct307-text)!important;
  border-color:var(--ct307-line)!important;
  box-shadow:var(--ct-brand-shadow)!important;
}
body[class*="site-theme-"] .product-card:hover,
body[class*="site-theme-"] .category-card:hover,
body[class*="site-theme-"] .tag-card:hover{
  border-color:color-mix(in srgb,var(--ct307-orange) 38%,var(--ct307-line))!important;
}
body[class*="site-theme-"] .product-card .price,
body[class*="site-theme-"] .product-price,
body[class*="site-theme-"] .sale-price{
  color:var(--ct307-orange)!important;
}
body[class*="site-theme-"] .badge,
body[class*="site-theme-"] .offer-badge,
body[class*="site-theme-"] .discount-badge{
  background:var(--ct307-green)!important;
  color:#fff!important;
}
body[class*="site-theme-"] .section-heading::after,
body[class*="site-theme-"] .section-title::after{
  background:linear-gradient(90deg,var(--ct307-orange),var(--ct307-green),transparent)!important;
}

/* Hero treatment: premium black/white composition while preserving each theme's secondary hue. */
body[class*="site-theme-"] .hero{
  background:var(--ct307-surface)!important;
}
body.appearance-dark[class*="site-theme-"] .hero{
  background:linear-gradient(115deg,#070809 0%,#101214 56%,color-mix(in srgb,var(--ct307-theme) 13%,#101214))!important;
}
body.appearance-light[class*="site-theme-"] .hero{
  background:linear-gradient(115deg,#fff 0%,#faf9f6 62%,color-mix(in srgb,var(--ct307-theme) 8%,#faf9f6))!important;
}
body[class*="site-theme-"] .hero h1,
body[class*="site-theme-"] .hero .hero-title{
  color:var(--ct307-text)!important;
}
body[class*="site-theme-"] .hero h1 strong,
body[class*="site-theme-"] .hero h1 .accent,
body[class*="site-theme-"] .hero .accent{
  color:var(--ct307-orange)!important;
}
body[class*="site-theme-"] .hero .eyebrow,
body[class*="site-theme-"] .hero .hero-eyebrow{
  color:var(--ct307-orange)!important;
}

/* Trust row */
body[class*="site-theme-"] .trust-item svg,
body[class*="site-theme-"] .trust-item .icon,
body[class*="site-theme-"] .feature-icon{color:var(--ct307-green)!important}

/* V308 logo contract: render ONE full logo only. Mobile uses the same desktop artwork,
   scaled down; there is never a separate mobile logo and light/dark never render together. */
.brand-logo-managed.brand-logo-desktop{display:block!important;max-width:230px!important;max-height:52px!important;width:auto!important;height:auto!important;object-fit:contain!important}
.brand-logo-mobile{display:none!important}
@media(max-width:767px){
  .site-header .header-inner{grid-template-columns:auto minmax(0,1fr) auto!important;gap:8px!important}
  .site-header .logo{min-width:0!important;max-width:180px!important;overflow:visible!important;justify-self:center!important}
  .site-header .brand-logo-managed.brand-logo-desktop{display:block!important;width:auto!important;max-width:155px!important;max-height:43px!important;height:auto!important;object-fit:contain!important}
  .mobile-menu-toggle{flex:0 0 auto!important}
  .mobile-header-actions{flex:0 0 auto!important;gap:6px!important}
  .mobile-header-actions>a,.mobile-header-actions>button{min-width:34px!important}
}
@media(max-width:380px){
  .site-header .logo{max-width:148px!important}
  .site-header .brand-logo-managed.brand-logo-desktop{max-width:136px!important;max-height:39px!important}
}

/* Mobile storefront: clean cards, no full-screen overlay, no unreadable dark menu. */
@media(max-width:767px){
  body[class*="site-theme-"] .mobile-menu-drawer,
  body[class*="site-theme-"] .mobile-nav,
  body[class*="site-theme-"] .mobile-menu-panel{
    background:var(--ct307-surface)!important;
    color:var(--ct307-text)!important;
    border-color:var(--ct307-line)!important;
  }
  body.appearance-dark[class*="site-theme-"] .mobile-menu-drawer a,
  body.appearance-dark[class*="site-theme-"] .mobile-nav a,
  body.appearance-dark[class*="site-theme-"] .mobile-menu-panel a{color:#f7f7f4!important}
  body.appearance-light[class*="site-theme-"] .mobile-menu-drawer a,
  body.appearance-light[class*="site-theme-"] .mobile-nav a,
  body.appearance-light[class*="site-theme-"] .mobile-menu-panel a{color:#111315!important}
  body[class*="site-theme-"] .product-grid{gap:10px!important}
}

@media(prefers-reduced-motion:reduce){
  body[class*="site-theme-"] *,body[class*="site-theme-"] *::before,body[class*="site-theme-"] *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}