/* Rama’s: shared contrast, readable type and consistent form controls. */
html body{--read-text:#f5f6f8;--read-secondary:#d0d7e2;--read-panel:#1c222b;--read-border:#738096;font-size:16px;line-height:1.6}
html body :is(p,li,dd){font-size:16px;line-height:1.65}
html body :is(small,figcaption,.hint,.recommendation,.zone-detail,.microcopy,.small-label,.custom-color,.selected-color,.control-footer>p,.catalog-note,.key-disclaimer,.key-fixed,.key-view-note,.lightbox-view-note,.color-metrics,.color-editors label,.palette-manual label,.pet-size-limits,.service-examples,.upcoming-note,.social-footnote,.footer-brand>span,.availability,.eyebrow,.chapter-label,.visual-caption,.hero-footnote,.section-heading .step,.breadcrumb,.product-picker small,.detected-palette>span,.accepted-note,.plate-preview>span){font-size:14px!important;line-height:1.6!important;letter-spacing:normal}
html body :is(label,legend,summary,.studio-heading,.zone-detail,.logo-controls>label,.check-line,.physical-slider,.base-color){font-size:16px!important;line-height:1.5;color:var(--read-text)!important}
html body :is(.hint,.recommendation,.microcopy,.small-label,.custom-color,.selected-color,.control-footer>p,.catalog-note,.key-disclaimer,.key-fixed,.key-view-note,.lightbox-view-note,.service-examples,.upcoming-note,.social-footnote,.footer-brand>span,.eyebrow,.chapter-label,.visual-caption,.hero-footnote,.detected-palette,.accepted-note,.how p,.how span,.how-label,.key-quote p,.key-validation p,.key-upload span,.tile-details p,.product-picker small,.product-heading p,.design-title p,.recommendation b,.logo-controls>label span){color:var(--read-secondary)!important}
html body :is(button,.button,.text-link,.section-link,.footer-links a,.studio-nav a,.desktop-nav a,.category-shortcuts a){font-size:15px;line-height:1.45}
html body :is(.primary,.outline-button,.whatsapp-button,.text-button,.reset-link,.background-choice button,.shape-choice button,.segmented button,.key-segments button,.key-controls .outline-button,.view-bar button,.key-view-controls button,.lightbox-view-actions button,.logo-actions button){font-size:15px!important;line-height:1.45!important;min-height:44px}
html body :is(input:not([type=range]):not([type=checkbox]):not([type=color]):not([type=file]),textarea,select){font:500 16px/1.5 var(--font-body,Manrope,sans-serif)!important;color:#f5f6f8!important;background:#131922!important;border:1px solid #738096!important;border-radius:14px;min-height:48px;padding:12px 14px;box-sizing:border-box;max-width:100%}
html body textarea{min-height:112px;resize:vertical}
html body select option{background:#131922;color:#f5f6f8}
html body :is(input,textarea)::placeholder{color:#b9c5d5!important;opacity:1}
html body input[type=range]{accent-color:#ffcc00;min-height:36px;max-width:100%}
html body input[type=checkbox]{accent-color:#ffcc00;width:20px;height:20px;flex-shrink:0}
html body input[type=color]{width:46px;min-width:46px;height:40px;padding:3px;border:1px solid #8794a7;border-radius:10px;background:#1c222b}
html body :is(.control-footer,.key-quote,.quote-request){min-width:0}
html body .control-footer{display:grid;gap:18px;padding-top:24px}
html body .control-footer>label{display:grid;gap:8px;margin:0;width:100%;min-width:0}
html body .control-footer>label :is(input,textarea){display:block;width:100%;margin:0}
html body .control-footer>p{margin:0;align-items:flex-start;text-align:center}
html body .quote-request{display:grid;gap:14px;width:100%}
html body .quote-request>.primary{width:100%;justify-content:center}
html body .quote-request .key-control-content{display:grid;gap:12px;padding:16px;border:1px solid #73809670;border-radius:20px;background:#1c222be8}
html body .quote-request .key-control-content p{margin:0}
html body :is(.key-quote,.modal) label{display:grid;gap:8px;margin:16px 0}
html body :is(.key-quote,.modal) label :is(input:not([type=color]):not([type=checkbox]),textarea){width:100%}
/* The logo tools belong to the parent glass panel, without a gray nested box. */
html body .logo-studio{background:transparent!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:18px 0 0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--read-text)}
html body :is(.shape-choice,.background-choice){background:transparent!important;border:0!important;box-shadow:none!important;padding:0;gap:10px;margin:20px 0}
html body :is(.shape-choice,.background-choice) legend{float:none;display:block;width:100%;margin:0 0 12px;padding:0;color:#f5f6f8!important}
html body .background-choice{display:flex;flex-wrap:wrap}
html body .background-choice button{background:#202833!important;color:#f5f6f8!important;border:1px solid #8190a5!important;padding:10px 14px;border-radius:24px;gap:9px}
html body .shape-choice{display:flex;flex-wrap:wrap}
html body .shape-choice button{background:#202833!important;color:#f5f6f8!important;border:1px solid #8190a5!important;flex:1 1 95px;min-width:0;padding:14px 8px;border-radius:18px}
html body .shape-symbol{background:#e1e7ef}
html body :is(.segmented,.key-segments){background:#111720!important;border:1px solid #73809680;border-radius:25px;display:flex;gap:4px;padding:4px}
html body :is(.segmented,.key-segments) button{color:#f5f6f8!important;background:transparent!important;flex:1;white-space:normal;border-radius:22px;padding:10px}
html body :is(.background-choice button.active,.shape-choice button.active,.segmented button.active,.key-segments button[aria-pressed=true],.face-picker button[aria-pressed=true]){background:#ffcc00!important;color:#17191d!important;border-color:#ffdc53!important;box-shadow:none!important}
html body .shape-choice button.active .shape-symbol{background:#17191d}
html body :is(.part-picker button,.face-picker button,.product-picker button){background:#202833e8!important;color:#f5f6f8!important;border-color:#8190a5!important}
html body :is(.part-picker button,.product-picker button)>span{color:inherit!important}
html body :is(.part-picker button.active,.product-picker button.active){background:#303b49!important;border-color:#ffcc00!important;color:#fff!important}
html body .product-picker small{display:block;margin-top:5px}
html body :is(.outline-button,.text-button,.reset-link,.logo-actions button){color:#e5eaf2!important}
html body .outline-button{background:#202833!important;border-color:#8190a5!important}
html body :is(.primary,.yellow,.nav-cta,.header-contact,.whatsapp-button,.available .availability){background:#ffcc00!important;color:#17191d!important}
html body :is(.primary,.yellow,.nav-cta,.header-contact,.whatsapp-button) :is(span,small,p,svg){color:#17191d!important}
html body .rear-toggle{color:#f5f6f8;background:#2028339c;border-color:#738096}
html body .rear-toggle strong{color:#f5f6f8!important;font-size:16px}
html body .rear-toggle small{color:var(--read-secondary)!important;font-size:14px;line-height:1.6}
html body :is(.upload,.key-upload){color:#f5f6f8;background:#11172080!important;border-color:#8d9aaf!important}
html body :is(.upload strong,.upload span,.key-upload strong,.key-upload span){color:#e5eaf2!important;font-size:16px}
html body .plate-preview{border-color:#738096!important;background:transparent!important;margin:18px 0;overflow:hidden}
html body .plate-preview>span{color:#d0d7e2!important;background:#151b24!important;padding:10px 12px}
html body :is(.color-comparison,.color-guard){background:#1c222bf2!important;color:#f5f6f8;border-color:#8794a7}
html body :is(.color-guard p,.color-guard figcaption,.color-metrics,.color-editors label){font-size:14px!important;color:#e5eaf2!important;line-height:1.6!important}
html body .color-guard strong{font-size:18px;color:#fff}
html body :is(.detected-palette>span,.section-heading .step,.zone-detail){background:#202833!important;color:#e5eaf2!important;border-color:#738096!important}
/* Visor controls use their own dark backing regardless of the model color. */
html body :is(.pill,.visual-dimension,.guide-toggle,.key-measure,.key-view-top>span,.lightbox-view-top>span,.lightbox-size,.viewer-status){background:#171e28ed!important;color:#f5f6f8!important;border:1px solid #738096;opacity:1;font-size:14px!important;line-height:1.5}
html body .visual-bottom{color:#f5f6f8;background:#171e28ed;border:1px solid #738096;border-radius:20px;padding:9px 12px;font-size:14px;line-height:1.5;gap:10px;bottom:75px}
html body .visual-dimension{padding:8px 12px;border-radius:16px;max-width:calc(100% - 40px)}
html body .visual-dimension span{color:#d0d7e2!important;font-size:14px}
html body :is(.view-bar,.key-view-controls){background:#171e28ed!important;color:#f5f6f8!important;border-color:#738096!important;flex-wrap:wrap}
html body :is(.view-bar button,.key-view-controls button,.lightbox-view-actions button){color:#f5f6f8!important}
html body :is(.view-bar button.selected,.key-view-controls button[aria-pressed=true]){background:#ffcc00!important;color:#17191d!important}
html body :is(.key-view-note,.lightbox-view-note){background:#171e28f2!important;color:#e5eaf2!important;padding:8px;border-radius:12px;font-size:14px!important}
html body :is(.warning,.key-error,.color-guard [role=alert]){color:#ffd0c4!important;font-size:15px!important;line-height:1.6}
html body button:disabled{opacity:1;filter:none;cursor:not-allowed}
html body :is(.primary,.whatsapp-button):disabled{background:#4a4530!important;color:#f5e9b8!important;border-color:#8b8052!important}
html body .carousel-arrows button:disabled{color:#b4bdca;background:#202833;opacity:1;border-color:#738096}
html body :is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid #ffcc00;outline-offset:4px}
@media(max-width:780px){
 html body :is(.studio-nav,.desktop-nav){display:grid;grid-template-columns:1fr 1.25fr .85fr;gap:6px;font-size:14px!important}
 html body :is(.studio-nav a,.desktop-nav a){font-size:14px!important;padding:10px 2px;white-space:normal;line-height:1.4}
 html body .category-shortcuts a{font-size:14px;padding:10px 14px}
 html body .view-bar{gap:4px;padding:6px;justify-content:center}
 html body .view-bar button{padding:8px;min-height:40px;font-size:14px!important}
 html body .visual-panel{height:600px}
 html body .visual-bottom{left:10px;right:10px;bottom:110px;flex-wrap:wrap}
 html body .visual-top{left:12px;right:12px}
 html body .visual-dimension{left:14px;top:78px;font-size:14px}
 html body .key-viewer{height:570px}
 html body .key-three-host{bottom:180px}
 html body .key-fallback{height:calc(100% - 180px);bottom:180px}
 html body .key-view-controls{bottom:90px;padding:8px 5px;gap:4px}
 html body .key-measure{bottom:190px}
 html body .key-view-note{font-size:14px!important;bottom:8px}
 html body .color-guard{margin:8px;padding:14px}
 html body .shape-choice{gap:8px}
 html body .shape-choice button{font-size:14px!important}
 html body .palette-manual{gap:12px}
 html body :is(.control-footer,.key-quote){margin-top:20px}
}

/* Floor for legacy small-print rules across the informational pages and all tools. */
html body :is(
  .brand-dot,
  .header-mid,
  .header-contact,
  .breadcrumb,
  .breadcrumb-right,
  .eyebrow,
  .intro-aside > span,
  .pill,
  .visual-dimension,
  .visual-dimension span,
  .visual-bottom > span,
  .guide-toggle,
  .view-bar button,
  .tag,
  .product-no,
  .catalog-card > p,
  .catalog-facts > div,
  .catalog-facts small,
  .primary,
  .microcopy,
  .how span,
  .how h3,
  .how p,
  footer,
  .design-title p,
  .back,
  .product-heading .eyebrow,
  .product-heading p,
  .step,
  .section-heading h3,
  .selected-color,
  .custom-color,
  .hint,
  .small-label,
  .zone-detail,
  .upload strong,
  .upload > span,
  .recommendation,
  .reset-link,
  .control-footer > p,
  .logo-controls > label,
  .logo-actions button,
  .warning,
  .viewer-status,
  .modal .eyebrow,
  .modal > p,
  .captures button,
  .review-facts,
  .form-row label,
  .notes,
  .notes span,
  .send-note p,
  .whatsapp-button,
  .busy,
  .catalog-intro p,
  footer > span,
  .product-picker button > span,
  .product-picker small,
  .part-picker button,
  .rear-toggle strong,
  .rear-toggle small,
  .breadcrumb select,
  .studio-heading,
  .studio-heading > span,
  .segmented button,
  .shape-choice legend,
  .shape-choice button,
  .physical-slider,
  .check-line,
  .base-color,
  .base-color span,
  .detected-palette > span,
  .outline-button,
  .text-button,
  .accepted-note,
  .comparison-title,
  .comparison-images figcaption,
  .color-comparison p,
  .comparison-actions button,
  .plate-preview > span,
  .background-choice legend,
  .background-choice button,
  .studio-nav,
  .category-shortcuts a,
  .category-heading p,
  .availability,
  .tile-details p,
  .tile-action,
  .upcoming-note,
  .catalog-note,
  .product-picker button>span,
  .visual-bottom,
  .footer-brand+span,
  .key-title>p,
  .key-view-top,
  .key-measure,
  .key-view-controls button,
  .key-view-note,
  .key-validation,
  .key-disclaimer,
  .key-control-content>label,
  .key-control-content select,
  .key-control-content>p,
  .key-fixed,
  .key-upload strong,
  .key-upload span,
  .key-control-content>.key-logo-color,
  .key-logo-color>span,
  .key-control-content .outline-button,
  .key-segments button,
  .key-review>p,
  .key-review .primary,
  .key-comparison figcaption,
  .key-controls .outline-button,
  .key-quote p,
  .key-quote .primary,
  .lightbox-view-top span,
  .lightbox-size,
  .lightbox-view-actions button,
  .lightbox-open,
  .lightbox-view-note,
  .lightbox-empty>span,
  .lightbox-empty p,
  .lightbox-empty strong,
  .lightbox-designer .key-logo-color>span,
  .lightbox-designer .key-quote p,
  .lightbox-power,
  .pet-dimensions,
  .pet-camera button,
  .pet-view-note,
  .pet-view-label,
  button,
  .review-bar,
  .review-bar button,
  .desktop-nav,
  .nav-cta,
  .button,
  .text-link,
  .hero-footnote,
  .visual-caption,
  .visual-bottom>span:last-child,
  .brand-strip>span,
  .section-heading>p,
  .tile-top,
  .tile-copy>p,
  .tile-copy>a,
  .create-intro>p,
  .steps p,
  .story-date>span,
  .story-copy>p,
  .contact-details span,
  .contact-details p,
  .contact-details a,
  footer>span:last-child,
  .mobile-dialog-top,
  .hero-actions .button,
  .hero-actions .text-link,
  .create-intro .button,
  .section-link,
  .faq-intro>p,
  .faq-intro .section-link,
  .faq-list summary,
  .faq-answer p,
  .back-link,
  .page-intro .button,
  .service-number,
  .service-body>p,
  .service-examples,
  .service-body>a,
  .service-note>p,
  .office-info p,
  .history-index>a>span,
  .chapter-label,
  .story-signature span,
  .footer-links,
  .page-intro>p,
  .history-index>a,
  .history-text p,
  .office-info .section-link,
  .footer-brand>span,
  .social-trigger,
  .contact-social,
  .social-dialog>p,
  .social-links strong,
  .social-links small,
  .social-footnote,
  .hero-actions .store-button
){font-size:max(14px,1em)!important;line-height:1.55}
html body :is(.studio-heading>span,.base-color span,.comparison-title,.comparison-images figcaption,.key-logo-color>span,.social-links small,.intro-aside>span,.contact-details span,.story-signature span,.tile-top,.notes span,.review-facts){color:#d0d7e2!important}
html body .lightbox-power{font-size:15px!important}
html body .lightbox-open{font-size:15px!important;white-space:normal;max-width:calc(100% - 30px)}
html body .pet-camera{flex-wrap:wrap;gap:8px}
html body :is(.pet-camera button,.pet-view-label,.pet-dimensions){font-size:14px!important}
html body .pet-view-note{font-size:14px!important;line-height:1.5}
/* Controls and help flow below the canvas, so larger text cannot overlap. */
html body :is(.key-viewer,.lightbox-viewer,.pet-viewer){height:auto!important;display:flex;flex-direction:column}
html body :is(.key-three-host,.lightbox-host,.pet-host){position:relative;inset:auto;height:420px;flex:none;width:100%}
html body :is(.key-fallback,.lightbox-fallback,.pet-fallback){position:absolute;inset:0 0 auto;width:100%;height:420px!important;pointer-events:none}
html body :is(.key-measure,.lightbox-size,.pet-dimensions){position:relative;inset:auto;align-self:flex-start;max-width:calc(100% - 32px);margin:10px 16px;font-size:14px!important}
html body :is(.key-view-controls,.lightbox-view-actions,.pet-camera){position:relative;inset:auto;display:flex;justify-content:center;flex-wrap:wrap;gap:6px;padding:12px;margin:0 10px;transform:none}
html body .lightbox-open{position:relative;inset:auto;transform:none;align-self:center;margin:0 12px 6px}
html body :is(.key-view-note,.lightbox-view-note,.pet-view-note){position:relative;inset:auto;margin:8px 12px 12px;line-height:1.6!important}
html body :is(.key-view-top button,.lightbox-view-top button,.pet-reset){background:#171e28ed!important;color:#f5f6f8!important;border:1px solid #738096}
@media(max-width:780px){html body :is(.key-three-host,.lightbox-host,.pet-host){height:360px}html body :is(.key-fallback,.lightbox-fallback,.pet-fallback){height:360px!important}}
html body :is(.social-links>a,.store-button,.social-close,.close-dialog){background:#202833!important;color:#f5f6f8!important;border-color:#8190a5!important}
html body :is(.social-links>a:hover,.store-button:hover,.social-close:hover,.close-dialog:hover){background:#303c4d!important;color:#fff!important}
html body :is(.key-base-colors button,.swatches button)[aria-pressed=true]{outline:3px solid #ffcc00;outline-offset:3px}
html body :is(.key-base-colors button,.swatches button){width:36px;height:36px;border:1px solid #9ba7ba}
/* Keep numbered configurator steps circular at every viewport width. */
html body .section-heading .step{
  display:inline-grid;
  place-items:center;
  box-sizing:border-box;
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  max-width:36px;
  max-height:36px;
  flex:0 0 36px;
  aspect-ratio:1;
  border-radius:50%;
  padding:0!important;
  font-size:16px!important;
  line-height:1!important;
}
/* Catalog cutouts keep original RGB/alpha; no filters or artificial drop shadows. */
html body .product-illustration.has-product-image{
  aspect-ratio:4/3;min-height:0;padding:38px 12px 8px;
  background:radial-gradient(ellipse at 50% 42%,#414a59 0%,#303641 72%);
}
html body .product-illustration.has-product-image img{
  display:block;width:100%;height:100%;min-height:0;object-fit:contain;
  filter:none!important;mix-blend-mode:normal;opacity:1;
}
html body .product-illustration .availability{left:14px;top:12px;z-index:1;font-size:13px!important;line-height:1.4!important}
html body :is(.visual-panel,.key-viewer,.lightbox-viewer,.pet-viewer,.viewer-host,.key-three-host,.lightbox-host,.pet-host,.key-fallback,.lightbox-fallback,.pet-fallback){background:#303641!important;border-color:#8190a5!important;color:#f5f6f8}
html body :is(.pet-view-label,.pet-dimensions,.pet-view-note,.key-view-note,.lightbox-view-note){color:#e1e7f0!important}