/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for Byte Theme.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values.
 */

:root {
  --background: oklch(0.13 0.043 265.132);
  --foreground: oklch(1 0 89.876);
  --card: oklch(0.208 0.042 266.359);
  --card-foreground: var(--foreground);
  --primary: #000c53;
  --primary-foreground: var(--foreground);
  --secondary: oklch(0.704 0.04 256.993);
  --secondary-foreground: oklch(0.13 0.043 265.132);
  --muted: oklch(0.28 0.041 260.329);
  --muted-foreground: oklch(0.967 0.003 264.542);
  --accent: #ffffff;
  --accent-foreground: oklch(0.13 0.043 265.132);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.373 0.031 259.733);
  --input: oklch(0.373 0.031 259.733);
  --font-sans: "Sarabun", sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

/* [GLOBAL LINK RESET] */
a, a:hover, a:focus, a:active { text-decoration: none !important; }

/* [ZONE 1: GLOBAL TYPOGRAPHY] */
.layout-container h1, .layout-container h2, .layout-container h3, .layout-container .font-heading { font-family: "Kanit", sans-serif; font-weight: 600; }
.layout-container body, .layout-container p, .layout-container span, .layout-container li, .layout-container label { font-family: "Sarabun", sans-serif; line-height: 1.75 !important; }
.layout-content .bg-white h1, .layout-content .bg-white h2, .layout-content .bg-white h3, .layout-content .bg-white .font-heading, .layout-content .bg-slate-50 h1, .layout-content .bg-slate-50 h2, .layout-content .bg-slate-50 h3, .layout-content .bg-slate-50 .font-heading { color: #000c53 !important; }
.layout-content .bg-white p, .layout-content .bg-white span, .layout-content .bg-white li, .layout-content .bg-white label, .layout-content .bg-slate-50 p, .layout-content .bg-slate-50 span, .layout-content .bg-slate-50 li, .layout-content .bg-slate-50 label { color: #334155 !important; }
.layout-content h1, .layout-content h2 { position: relative; padding-bottom: 15px; margin-bottom: 20px; }
.layout-content h1::after, .layout-content h2::after { content: ""; position: absolute; bottom: 0; left: 0; width: 60px; height: 4px; background-color: #FFD700; }
.accordion--content h1::after, .accordion--content h2::after, .bg-secondary h1::after, .bg-secondary h2::after, .bg-muted h1::after, .bg-muted h2::after, .card h1::after, .card h2::after { display: none !important; }
.layout-content div[class*="[&_h2]:mt-6"] > p, .layout-content div[class*="[&_h2]:mt-6"] > ul > li, .layout-content div[class*="[&_h2]:mt-6"] > ol > li { font-size: 1.125rem !important; line-height: 1.7 !important; }
.accordion--content div[class*="[&_h2]:mt-6"] > p, .accordion--content div[class*="[&_h2]:mt-6"] > ul > li, .accordion--content div[class*="[&_h2]:mt-6"] > ol > li { font-size: inherit !important; line-height: inherit !important; }
.hero-blog--content h1, .hero-blog--content .heading-responsive-6xl { font-size: clamp(1.75rem, 4vw, 2.75rem) !important; line-height: 1.4 !important; }

/* [ZONE 2: CUSTOM COMPONENTS - PDF & AI BOX] */
.layout-content .PDF { display: flex; flex-direction: column; margin: 1.5rem 0; padding: 1.25rem 1.5rem; background-color: #ffffff; border-left: 6px solid #000c53; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); position: relative; transition: all 0.3s ease; }
.layout-content .PDF .pdf-heading { color: #000c53 !important; font-family: "Kanit", sans-serif !important; font-size: 1.25rem !important; font-weight: 600 !important; margin-top: 0 !important; margin-bottom: 1.25rem !important; line-height: 1.4 !important; }
.layout-content .PDF span.file { background-image: none !important; padding-left: 0 !important; display: inline-flex !important; align-items: center; vertical-align: middle; }
.layout-content .PDF span.file::before { content: ""; display: inline-block; width: 24px; height: 24px; margin-right: 8px; background-color: #000c53; -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,152a8,8,0,0,1-8,8H192v16h16a8,8,0,0,1,0,16H192v16a8,8,0,0,1-16,0V152a8,8,0,0,1,8-8h32A8,8,0,0,1,224,152ZM92,172a28,28,0,0,1-28,28H56v8a8,8,0,0,1-16,0V152a8,8,0,0,1,8-8H64A28,28,0,0,1,92,172Zm-16,0a12,12,0,0,0-12-12H56v24h8A12,12,0,0,0,76,172Zm88,8a36,36,0,0,1-36,36H112a8,8,0,0,1-8-8V152a8,8,0,0,1,8-8h16A36,36,0,0,1,164,180Zm-16,0a20,20,0,0,0-20-20h-8v40h8A20,20,0,0,0,148,180ZM40,112V40A16,16,0,0,1,56,24h96a8,8,0,0,1,5.66,2.34l56,56A8,8,0,0,1,216,88v24a8,8,0,0,1-16,0V96H152a8,8,0,0,1-16-0V40H56v72a8,8,0,0,1-16,0ZM160,80h28.69L160,51.31Z'%3E%3C/path%3E%3C/svg%3E") no-repeat center; mask-size: contain; flex-shrink: 0; transition: background-color 0.2s; }
.layout-content .PDF a { color: #000c53 !important; font-weight: 600; font-family: "Kanit", sans-serif; text-decoration: none !important; display: inline-block; vertical-align: middle; transition: all 0.2s; }
.layout-content .PDF a:hover { color: #FFD700 !important; }

/* FIX: ลบเส้นสีเทาออก (border-top: none) */
.layout-content .PDF .copyright-notice, .layout-content .PDF .copyright-notice p { font-size: 0.8rem !important; color: rgba(0, 12, 83, 0.5) !important; font-style: italic !important; margin: 0 !important; border-top: none !important; padding-top: 0.25rem !important; margin-top: 0.75rem !important; }

.layout-content .ai-disclosure { display: inline-flex !important; align-items: center !important; margin: 1.5rem 0 2.0rem 0 !important; padding: 12px 24px !important; background-color: #f0f9ff !important; border: 1px solid #bae6fd !important; border-radius: 50px !important; color: #0369a1 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important; }
.layout-content .ai-disclosure p { margin: 0 !important; font-size: 0.95rem !important; color: #0369a1 !important; line-height: 1.5 !important; }
.layout-content .ai-disclosure::before { content: ""; display: inline-block; width: 24px; height: 24px; margin-right: 12px; background-color: #0ea5e9 !important; flex-shrink: 0; -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,40H48A16,16,0,0,0,32,56v58.78c0,89.61,75.82,117.38,91.25,122.13a15.89,15.89,0,0,0,9.5,0c15.43-4.75,91.25-32.52,91.25-122.13V56A16,16,0,0,0,208,40Zm-43.06,77.66-40,40a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L119.25,140.69l34.34-34.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E") no-repeat center; mask-size: contain; }

/* [ZONE 3: INTERACTIVE CARDS & ACCORDION] */
.layout-content .accordion--content { position: relative; background: linear-gradient(90deg, rgba(255, 215, 0, 0.03) 0%, rgba(0, 0, 0, 0) 100%); }
.layout-content .accordion--content::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-color: #FFD700; opacity: 0.9; }
.layout-content .accordion--content > div { padding-left: 1.5rem !important; color: #e2e8f0; line-height: 1.7; }
.layout-content .accordion--content a { color: #FFD700 !important; font-weight: 500; text-decoration: none !important; border-bottom: 1px dashed rgba(255, 215, 0, 0.5); transition: all 0.3s ease; padding-bottom: 2px; }
.layout-content .accordion--content a:hover { color: #ffffff !important; border-bottom: 1px solid #ffffff; }
.layout-content .card, .layout-content [class*="card"], .layout-content .node--view-mode-teaser, .layout-content .experience-builder-component, .layout-content div[class*="bg-primary"], .layout-content div[class*="bg-secondary"], .layout-content div[class*="bg-accent"], .layout-content div[class*="bg-muted"] { transition: transform 0.3s ease-out, box-shadow 0.3s ease-out !important; }
.layout-content .card:hover, .layout-content [class*="card"]:hover, .layout-content .node--view-mode-teaser:hover, .layout-content div[class*="bg-primary"]:hover, .layout-content div[class*="bg-secondary"]:hover, .layout-content div[class*="bg-accent"]:hover, .layout-content div[class*="bg-muted"]:hover { transform: translateY(-12px) !important; box-shadow: 0 25px 50px -12px rgba(0, 12, 83, 0.2) !important; z-index: 10; position: relative; }

/* [ZONE 4: GOOGLE MAPS BUTTON & EXTLINK STYLING] */
.layout-container svg.ext, .layout-container i.ext, .layout-container span.ext { display: inline-block; width: 0.85em !important; height: 0.85em !important; margin-left: 6px; vertical-align: baseline; fill: currentColor !important; opacity: 0.7; transition: opacity 0.2s; }
.layout-container a:hover svg.ext { opacity: 1; }
.layout-container a[href*="google.com/maps"] { display: inline-flex !important; align-items: center; padding: 8px 16px 8px 12px; background-color: rgba(255, 215, 0, 0.1); color: #FFD700 !important; border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 8px; text-decoration: none !important; font-family: "Kanit", sans-serif; font-weight: 500; font-size: 0.95rem; transition: all 0.3s ease; margin: 8px 0; }
.layout-container a[href*="google.com/maps"] strong { font-weight: 500; color: inherit !important; }
.layout-container a[href*="google.com/maps"]::before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 8px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M236.49,103.52l-184-72A8,8,0,0,0,41.9,41.9l72,184a8,8,0,0,0,14.65.65l28.66-73.23,73.23-28.66A8,8,0,0,0,236.49,103.52ZM128,144a8,8,0,0,0-5,5l-26.17,66.88L55.76,55.76l161.35,63.13L150.23,145A8,8,0,0,0,145,150.23Z'%3E%3C/path%3E%3C/svg%3E") no-repeat center; mask-size: contain; flex-shrink: 0; }
.layout-container a[href*="google.com/maps"]:hover { background-color: #FFD700; color: #000c53 !important; border-color: #FFD700; text-decoration: none !important; box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2); }
.layout-container a[href*="google.com/maps"] svg.ext { display: none !important; }

/* [ZONE 5: ADMIN & PLUGIN PROTECTION] */
.layout-content a:hover, footer a:hover { color: #FFD700 !important; text-decoration: none !important; }
.layout-container input::placeholder, .layout-container textarea::placeholder { color: #FFF2B2 !important; opacity: 0.9 !important; }
.cm-klaro h1, .cm-klaro h2, .cm-modal h1, .cm-modal h2 { padding-bottom: 15px !important; margin-bottom: 15px !important; position: relative !important; }
.cm-klaro h1::after, .cm-klaro h2::after, .cm-modal h1::after, .cm-modal h2::after { display: block !important; content: "" !important; position: absolute !important; bottom: 0 !important; left: 0 !important; width: 40px !important; height: 4px !important; background-color: #FFD700 !important; }
ed11y-element-result { display: none !important; }

/* [ZONE 6: UI POLISH FOR CARDS & SUPPLIERS] */
.layout-content .grid .bg-card p { display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.6 !important; }
.layout-content .bg-secondary { background-color: rgba(255, 255, 255, 0.04) !important; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px !important; transition: all 0.3s ease !important; }
.layout-content .bg-secondary:hover { border-color: rgba(255, 215, 0, 0.4) !important; transform: translateY(-8px) !important; }
.layout-content .bg-secondary h2, .layout-content .bg-secondary h3, .layout-content .bg-secondary .text-secondary-foreground { color: #ffffff !important; }
.layout-content .bg-secondary p { color: rgba(255, 255, 255, 0.85) !important; }
.layout-content .bg-secondary svg { color: #FFD700 !important; fill: #FFD700 !important; width: 52px !important; height: 52px !important; margin-bottom: 0.5rem; }

/* ขยายขนาดโลโก้ Supplier เป็น 65px เพื่อความภูมิฐาน */
.bg-secondary img.image { max-height: 65px !important; width: auto !important; transition: transform 0.3s ease !important; object-fit: contain; }

.layout-content .grid .bg-muted { background-color: #ffffff !important; border-radius: 12px !important; height: 120px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 1.5rem !important; transition: all 0.3s ease !important; border: 1px solid transparent; }
.layout-content .grid .bg-muted:hover { transform: translateY(-5px) !important; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4) !important; border-color: rgba(255, 215, 0, 0.5) !important; }
.layout-content .grid .bg-muted img { max-height: 100% !important; max-width: 100% !important; object-fit: contain !important; mix-blend-mode: multiply; }

/* [ZONE 7: HERO SECTION FONT UNLOCK] */
.layout-content .h-dvh a.bg-primary { background-color: #FFD700 !important; color: #000c53 !important; font-weight: 600; border: none !important; }
.layout-content .h-dvh a.bg-primary:hover { background-color: #e6c200 !important; }
.layout-content .h-dvh a.bg-primary-foreground { background-color: rgba(255,255,255,0.05) !important; color: #ffffff !important; border: 1px solid #ffffff !important; }
.layout-content .h-dvh a.bg-primary-foreground:hover { background-color: rgba(255,255,255,0.15) !important; }
main .items-center.text-center div[class*="[&_h2]:mt-6"] > p { font-size: inherit !important; line-height: inherit !important; }

/* [ZONE 8: HEADER & MAIN NAVIGATION POLISH - GOLD BUTTON] */
header nav a { font-family: "Kanit", sans-serif !important; font-weight: 400 !important; font-size: 1.05rem !important; color: #f1f5f9 !important; position: relative; padding: 0.5rem 0 !important; margin: 0 0.85rem !important; text-decoration: none !important; background: transparent !important; transition: color 0.3s ease !important; }
header nav a:hover { color: #FFD700 !important; }
header nav a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 50%; background-color: #FFD700; transition: width 0.3s ease-in-out, left 0.3s ease-in-out; transform: translateX(-50%); }
header nav a:hover::after, header nav a.is-active::after, header nav a[aria-current="page"]::after { width: 100%; }
header nav a.is-active, header nav a[aria-current="page"] { color: #FFD700 !important; font-weight: 500 !important; }
header input[type="search"], header input[type="text"], header [placeholder*="ค้นหา"] { background-color: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 50px !important; color: #ffffff !important; padding: 0.5rem 1.25rem !important; transition: all 0.3s ease !important; }
header input[type="search"]:focus, header input[type="text"]:focus, header [placeholder*="ค้นหา"]:focus { border-color: #FFD700 !important; background-color: rgba(255, 255, 255, 0.1) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15) !important; }
header form button, header form input[type="submit"], header button:has(svg), header .button.form-submit { background-color: #FFD700 !important; color: #000c53 !important; border-radius: 50px !important; padding: 0.45rem 1.5rem !important; font-family: "Kanit", sans-serif !important; font-weight: 600 !important; transition: all 0.3s ease !important; cursor: pointer; border: none !important; margin-left: 8px !important; }
header form button:hover, header form input[type="submit"]:hover, header button:has(svg):hover { background-color: #e6c200 !important; box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2); }

/* [ZONE 9: FOOTER NEWSLETTER FORM POLISH - GOLD BUTTON] */
.webform-submission-newsletter-signup-form { display: flex !important; flex-wrap: nowrap !important; gap: 12px !important; align-items: center !important; margin-top: 1rem !important; }
.webform-submission-newsletter-signup-form .form-item { flex: 1 1 auto !important; margin: 0 !important; }
.webform-submission-newsletter-signup-form input[type="email"] { background-color: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 50px !important; color: #ffffff !important; padding: 0.6rem 1.5rem !important; height: 48px !important; width: 100% !important; transition: all 0.3s ease !important; font-family: "Sarabun", sans-serif !important; }
.webform-submission-newsletter-signup-form input[type="email"]:focus { border-color: #FFD700 !important; background-color: rgba(255, 255, 255, 0.1) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15) !important; }
.webform-submission-newsletter-signup-form input[type="submit"], .webform-submission-newsletter-signup-form .webform-button--submit { background-color: #FFD700 !important; color: #000c53 !important; border: none !important; border-radius: 50px !important; padding: 0 1.5rem !important; height: 48px !important; font-family: "Kanit", sans-serif !important; font-weight: 600 !important; transition: all 0.3s ease !important; cursor: pointer !important; white-space: nowrap !important; }
.webform-submission-newsletter-signup-form input[type="submit"]:hover { background-color: #e6c200 !important; box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2) !important; }

/* [ZONE 10: BULLETPROOF FORM POLISH & GOLD PLACEHOLDER] */
.layout-content .webform-submission-form:not(.webform-submission-newsletter-signup-form) label { color: #ffffff !important; font-family: "Kanit", sans-serif !important; font-weight: 500 !important; margin-bottom: 0.5rem !important; display: inline-block !important; font-size: 1.05rem !important; }
.layout-content .webform-submission-form:not(.webform-submission-newsletter-signup-form) label.form-required::after { color: #FFD700 !important; }
.layout-content .webform-submission-form:not(.webform-submission-newsletter-signup-form) input.form-text, .layout-content .webform-submission-form:not(.webform-submission-newsletter-signup-form) input.form-email, .layout-content .webform-submission-form:not(.webform-submission-newsletter-signup-form) input.form-tel, .layout-content .webform-submission-form:not(.webform-submission-newsletter-signup-form) textarea.form-textarea { background-color: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; padding: 0.75rem 1.5rem !important; width: 100% !important; transition: all 0.3s ease !important; font-family: "Sarabun", sans-serif !important; background-image: none !important; box-shadow: none !important; border-radius: 50px !important; }
.layout-content .webform-submission-form:not(.webform-submission-newsletter-signup-form) textarea.form-textarea { border-radius: 16px !important; }
.layout-content .webform-submission-form:not(.webform-submission-newsletter-signup-form) input.form-text:focus, .layout-content .webform-submission-form:not(.webform-submission-newsletter-signup-form) input.form-email:focus, .layout-content .webform-submission-form:not(.webform-submission-newsletter-signup-form) input.form-tel:focus, .layout-content .webform-submission-form:not(.webform-submission-newsletter-signup-form) textarea.form-textarea:focus { border-color: #FFD700 !important; background-color: rgba(255, 255, 255, 0.1) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15) !important; }
.layout-content .webform-submission-form:not(.webform-submission-newsletter-signup-form) input[type="submit"], .layout-content .webform-submission-form:not(.webform-submission-newsletter-signup-form) .webform-button--submit { background-color: #FFD700 !important; color: #000c53 !important; border: none !important; border-radius: 50px !important; padding: 0.75rem 2.5rem !important; font-family: "Kanit", sans-serif !important; font-weight: 600 !important; transition: all 0.3s ease !important; cursor: pointer !important; margin-top: 1rem !important; }
.layout-content .webform-submission-form:not(.webform-submission-newsletter-signup-form) input[type="submit"]:hover { background-color: #e6c200 !important; box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2) !important; }
/* ลูกเล่น Placeholder สีทองอ่อน */
::placeholder { color: #FFF2B2 !important; opacity: 0.8 !important; }

/* [ZONE 11: SMART STICKY HEADER] */
.layout-container > header { position: sticky !important; top: var(--drupal-displace-offset-top, 0px) !important; z-index: 1020 !important; background-color: transparent !important; border-bottom: 1px solid transparent !important; box-shadow: none !important; transition: background-color 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important; }
body.is-scrolled .layout-container > header { background-color: rgba(0, 12, 83, 0.4) !important; backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important; }

/* [ZONE 12: SMART LOGO CAPTIONS (TWO-LINES SPLIT DESIGN)] */
.supplier-name.auto-caption { display: block !important; margin-top: 0.75rem !important; font-family: "Kanit", sans-serif !important; text-align: center !important; width: 100%; transition: all 0.3s ease; }
.supplier-name.auto-caption .brand-title { display: block; font-size: 0.95rem; font-weight: 600; color: rgba(255, 255, 255, 0.95); text-transform: uppercase; line-height: 1.2; letter-spacing: 0.06em; }
.supplier-name.auto-caption .brand-desc { display: block; font-size: 0.75rem; font-weight: 300; color: rgba(255, 255, 255, 0.7); margin-top: 0.25rem; line-height: 1.4; }
.bg-secondary:hover .supplier-name.auto-caption .brand-title { color: #FFD700; }

/* [ZONE 12.5: THE ABSOLUTE LOGO INVERSION OVERRIDE] */
html body .layout-content div.bg-secondary.is-light-theme-forced { background-color: transparent !important; border: 1px solid #cbd5e1 !important; backdrop-filter: none !important; box-shadow: none !important; }
html body .layout-content div.bg-secondary.is-light-theme-forced:hover { border-color: #000c53 !important; background-color: rgba(0, 12, 83, 0.03) !important; transform: translateY(-8px) !important; }
html body .layout-content div.bg-secondary.is-light-theme-forced img.image { filter: grayscale(100%) invert(1) brightness(0.2) !important; opacity: 0.6 !important; }
html body .layout-content div.bg-secondary.is-light-theme-forced:hover img.image { filter: grayscale(100%) invert(1) brightness(0) !important; opacity: 1 !important; }
html body .layout-content div.bg-secondary.is-light-theme-forced .supplier-name.auto-caption .brand-title { color: #000c53 !important; }
html body .layout-content div.bg-secondary.is-light-theme-forced .supplier-name.auto-caption .brand-desc { color: #64748b !important; }

/* [ZONE 13: THE FINAL UI BALANCE] */
.layout-content .h-dvh a.bg-primary { background-color: #FFD700 !important; color: #000c53 !important; font-weight: 600; border: none !important; }
.layout-content .h-dvh a.bg-primary-foreground { background-color: rgba(255,255,255,0.05) !important; color: #ffffff !important; border: 1px solid #ffffff !important; }