/* Owner-approved round 2: brand, Waze, neutral surfaces and category colors. */
body:is(:has(#home:not([hidden])),:has(#orders:not([hidden]))) {
 --ink:#293a37;--muted:#5b625d;--paper:#faf8f3;--cream:#f1ebe0;--surface:#ffffff;--pale:#f8eadb;--line:#d9d7cf;--green:#2b6651;--focus:#176544;
 & .header {min-height:108px}
 & .header .brand {gap:14px}
 & .header .brand>.blue-name {font-family:Rubik,Heebo,Arial,sans-serif;font-weight:800;font-size:25px;line-height:1.2;letter-spacing:0;color:#443c30;background:#fff2de;padding:11px 15px 9px;border:1px solid #e7cba4;border-bottom:3px solid #bb4c1e;border-radius:9px}
 & .header .brand>.blue-name>span {font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}
 & a.mobile-visit {background:#33ccff;color:#123b48;border:1px solid #147b9d;border-radius:9px;text-decoration:none;padding:10px 16px}
 & a.mobile-visit:hover {background:#8ae3ff}
 & .header a.mobile-visit {background:#33ccff;color:#123b48;border-color:#147b9d}
 & a.mobile-visit .waze-icon {background:transparent;padding:0;width:30px;height:30px}
 & .service-bar {background:#f3ebdd;border-block:1px solid #e5d9c8}
 & #how {background:#faf8f3}
 & .tinted {background:#f1eee6}
 & .review {background:#f2e9dc;border-color:#dfd1bc}
 & .closing {background:#363731;color:#fff7ea}
 & .delivery-cards article {background:var(--surface)}
 & .visit-title {border-inline-start-color:#bb4c1e}
 & .faq {background:var(--surface);padding-inline:28px;border:1px solid var(--line);border-radius:12px;margin-bottom:30px}
 & footer {background:#ece8df}
 & .scene-location {background:var(--surface)}
 @media(min-width:901px) {
  & .scene-location {top:auto;bottom:20px;right:2%;width:17%;box-sizing:border-box;padding:10px;font-size:13px;line-height:1.4}
  & .scene-location strong {font-size:15px}
 }
 & .category.cat,& [data-category=cat] {--category-ink:#824719;--category-bg:#f8e5d0;--category-active:#985021;--category-active-ink:#fff;--category-border:#c68f60}
 & .category.dog,& [data-category=dog] {--category-ink:#235f7c;--category-bg:#deeff6;--category-active:#246684;--category-active-ink:#fff;--category-border:#74a6ba}
 & .category.bird,& [data-category=bird] {--category-ink:#4b6847;--category-bg:#e6eedf;--category-active:#4a7044;--category-active-ink:#fff;--category-border:#8fa880}
 & .category.rodent,& [data-category=rodent] {--category-ink:#76506f;--category-bg:#f0e4ef;--category-active:#7e5474;--category-active-ink:#fff;--category-border:#b792ad}
 & [data-category=gear] {--category-ink:#63543d;--category-bg:#eee8d9;--category-active:#716048;--category-active-ink:#fff;--category-border:#ac9d81}
 & .category {border:1px solid var(--line);border-top:4px solid var(--category-border);background:var(--surface)}
 & .category .eyebrow {color:var(--category-ink);background:var(--category-bg);padding:5px 10px;border-radius:5px;display:inline-block;margin-bottom:18px}
 & .catalog-heading h1 {letter-spacing:0;font-size:38px}
 & .catalog-tabs {gap:10px;margin-top:20px;margin-bottom:20px}
 & .catalog-tabs button {font-family:Heebo,Arial,sans-serif;font-size:17px;font-weight:700;border:1px solid var(--category-border);border-bottom-width:3px;border-radius:9px;min-height:50px;padding:9px 22px;color:var(--category-ink);background:var(--category-bg)}
 & .catalog-tabs button[aria-pressed=true] {color:var(--category-active-ink);background:var(--category-active);border-color:var(--category-active);outline:2px solid var(--category-active);outline-offset:3px;text-decoration:underline;text-underline-offset:5px}
 & .catalog-tabs button:focus-visible {outline:3px solid var(--focus);outline-offset:5px}
 & .product-card,& .cart-panel {background:var(--surface);border-color:var(--line)}
 & .quantity {background:var(--cream)}
 & .quantity button {background:var(--surface);color:#aa481f}
 & .mobile-cart:not([hidden]) {background:#bb4c1e;color:white;font-family:inherit}
 & #checkout-cart {background:#f2ede3;border:1px solid var(--line)}
 & .form-section {border-color:var(--line)}
 & .delivery-note {background:var(--cream)}
 & .choice-grid label:has(input:checked),& .address-type-options label:has(input:checked) {background:#f0f5ef}
 & .summary {background:var(--surface)}
 @media(max-width:1120px) {
  & .header .brand>.blue-name {font-size:23px;padding:9px 12px 7px}
 }
 @media(max-width:620px) {
  & .header {min-height:0;gap:12px 10px}
  & .header .brand {gap:10px;min-width:0}
  & .header .brand>.blue-name {font-size:19px;padding:8px 9px 6px}
  & .header .brand img {width:54px;height:54px}
  & .header a.mobile-visit {padding:6px 12px;min-height:46px}
  & .faq {padding-inline:18px}
  & .catalog-heading h1 {font-size:30px}
  & .catalog-tabs {gap:10px;margin-top:16px}
  & .catalog-tabs button {font-size:15px;padding:9px 15px;min-height:48px}
  & .cart-panel .button {font-size:17px}
 }
 @media(max-width:359px) {
  & .header .brand {gap:8px}
  & .header .brand>.blue-name {font-size:16px;padding:7px 7px 5px}
  & .header .brand img {width:44px;height:44px}
  & .catalog-tabs button {padding-inline:12px}
 }
}
html[data-theme=dark] body:is(:has(#home:not([hidden])),:has(#orders:not([hidden]))) {
 --ink:#f2eee6;--muted:#c3c1bb;--paper:#1d2021;--cream:#292c2d;--surface:#25292a;--pale:#37312b;--line:#555b59;--green:#9dc5ab;--focus:#a3d9ea;
 & .header .brand>.blue-name {background:#302e29;color:#fff0d5;border-color:#7e6951;border-bottom-color:#e69858}
 & .service-bar {background:#2c2926;border-color:#554c42}
 & #how {background:var(--paper)}
 & .tinted {background:#272a2a}
 & .review {background:#302d29;border-color:#5e5548}
 & .closing {background:#282724;color:#f7efe1}
 & footer {background:#242728}
 & .category.cat,& [data-category=cat] {--category-ink:#ffd2ac;--category-bg:#3d3025;--category-active:#eeb77f;--category-active-ink:#342414;--category-border:#a47853}
 & .category.dog,& [data-category=dog] {--category-ink:#b6e5f7;--category-bg:#263941;--category-active:#91cde5;--category-active-ink:#193642;--category-border:#658d9c}
 & .category.bird,& [data-category=bird] {--category-ink:#c8e5b7;--category-bg:#303b2b;--category-active:#b4cc98;--category-active-ink:#263719;--category-border:#7d9868}
 & .category.rodent,& [data-category=rodent] {--category-ink:#ebc9e2;--category-bg:#3d2f3a;--category-active:#d6b1cd;--category-active-ink:#40273a;--category-border:#a27f99}
 & [data-category=gear] {--category-ink:#e3d6b8;--category-bg:#37342b;--category-active:#d4c3a0;--category-active-ink:#373020;--category-border:#968971}
 & .category {background:var(--surface)}
 & .quantity button {color:#ffbc8e}
 & #checkout-cart {background:#2b2c2a}
 & .choice-grid label:has(input:checked),& .address-type-options label:has(input:checked) {background:#2d3530}
 & input::placeholder,& textarea::placeholder {color:#bcbdb7}
 & .hero-copy {--ink:#edf1df}
 @media(max-width:900px) {& .hero-copy {--ink:#f2eee6}}
}
html[data-theme=dark] #consent-banner {background:#272b2c;color:#f2eee6;border-color:#737b79}
html[data-theme=dark] #consent-deny {background:#272b2c;color:#f2eee6;border-color:#a5aaa3}

/* R3: approved header/hero finish; labels stay editable, artwork originals stay intact. */
body:has(#home:not([hidden])) {
 & .hero.wrap {aspect-ratio:auto;min-height:0}
 & .hero-copy {min-height:clamp(560px,41.658vw,809px);box-sizing:border-box}
 & .hero>.service-bar {position:relative;z-index:2;width:100%}
 & .scene-location .location-address {display:flex;flex-direction:column}
 & .location-address>span {white-space:nowrap}
 & .road-labels {position:absolute;inset:0;width:100%;height:auto;aspect-ratio:1942/809;pointer-events:none;overflow:visible}
 & .road-labels text {font-family:Heebo,Arial,sans-serif;font-size:26px;font-weight:600;letter-spacing:0;fill:#3f463d;stroke:#fff7e5;stroke-width:1.8px;stroke-linejoin:round;paint-order:stroke fill;opacity:.92}
 @media(min-width:901px) { & .scene-location {top:calc(clamp(560px,41.658vw,809px) - 106px);bottom:auto;width:auto;min-width:17%;max-width:22%} }
 @media(max-width:900px) {
  & .hero-copy {min-height:0}
  & .hero>.service-bar {margin:0}
  & .hero .service-inner {padding:16px 10px 4px;gap:8px;align-items:flex-start}
  & .hero .service-item {flex-direction:column;gap:6px;text-align:center;padding-inline:6px}
  & .hero .service-item svg {width:28px;height:28px;margin:0}
  & .hero .service-item strong {font-size:18px}
  & .hero .service-item span {font-size:14px;line-height:1.5}
  & .hero .service-item small {font-size:12px;white-space:nowrap}
  & .hero .service-details {font-size:13px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:8px}
  & .scene-canvas .road-labels {display:none}
  & .scene-map>.road-labels {display:block;inset:auto;left:-100%;top:0;width:200%}
  & .road-labels text {font-size:34px;stroke-width:2px}
 }
}

html[data-theme=dark] body:has(#home:not([hidden])) .road-labels text {fill:#fff7e5;stroke:#393e39}

/* R3.3: approved WhatsApp instruction and separate payment reassurance. */
#how .step-payment-note {display:block;margin-top:8px;font-weight:600;color:var(--ink)}

/* R3.4: approved category actions, aligned within each row. */
body:has(#home:not([hidden])) #products .category {display:flex;flex-direction:column;align-items:flex-start}
body:has(#home:not([hidden])) #products .category-link {margin-top:auto;padding-top:18px;white-space:nowrap}

@media(min-width:360px) and (max-width:389px) {body:has(#home:not([hidden])) #products .category h3 {font-size:20px}}

/* R3.5: approved spacing between the phone label and number. */
#visit a[href^="tel:"] {column-gap:.35em}

/* R3.6: approved header on service pages; article content keeps its own styling. */
body:has(main>article.legal:not([hidden])) .header {
 --ink:#293a37;--line:#d9d7cf;--focus:#176544;
 width:min(1200px,calc(100% - 64px));min-height:108px;padding-block:12px;gap:20px;flex-wrap:nowrap;border-bottom:0;
 font-family:Heebo,Arial,sans-serif;line-height:1.65;color:var(--ink);
 & .brand {gap:14px;flex-shrink:0}
 & .brand img {width:76px;height:76px;border-radius:50%;object-fit:contain}
 & .brand>.legacy-name {display:none}
 & .brand>.blue-name {display:flex;flex-direction:column;white-space:nowrap;font-family:Rubik,Heebo,Arial,sans-serif;font-weight:800;font-size:25px;line-height:1.2;letter-spacing:0;color:#443c30;background:#fff2de;padding:11px 15px 9px;border:1px solid #e7cba4;border-bottom:3px solid #bb4c1e;border-radius:9px}
 & .brand>.blue-name>span {font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}
 & nav {gap:26px;font-size:17px;font-weight:600;margin-inline:auto}
 & nav>.button {display:none}
 & a.mobile-visit {display:flex;background:#33ccff;color:#123b48;border:1px solid #147b9d;border-radius:9px;text-decoration:none;padding:10px 16px;font-size:17px;min-height:50px;white-space:nowrap;gap:10px}
 & a.mobile-visit:hover {background:#8ae3ff}
 & .waze-address {display:none}
 & .waze-icon {background:transparent;padding:0;width:30px;height:30px}
 & .theme-control {padding:9px;width:auto;min-width:100px;height:44px;border-color:var(--line);background:transparent;justify-content:center;flex-shrink:0;gap:7px;border-radius:24px;font-family:inherit}
 & .theme-label {display:inline;font-size:14px;white-space:nowrap}
 & a:focus-visible,& button:focus-visible {outline:3px solid var(--focus);outline-offset:4px}
 @media(max-width:1120px) {
  gap:14px;
  & nav {gap:14px;font-size:14px}
  & .brand>.blue-name {font-size:23px;padding:9px 12px 7px}
  & .brand img {width:64px;height:64px}
  & a.mobile-visit {font-size:15px;padding:10px}
  & .theme-control {min-width:44px;width:44px}
  & .theme-label {display:none}
 }
 @media(max-width:900px) {& nav {display:none} & a.mobile-visit {margin-inline-start:auto}}
 @media(max-width:620px) {
  width:calc(100% - 36px);display:grid;grid-template-columns:1fr auto;gap:12px 10px;padding-block:14px;min-height:0;
  & .brand {grid-row:1;grid-column:1;gap:10px;min-width:0}
  & .brand>.blue-name {font-size:19px;padding:8px 9px 6px}
  & .brand img {width:54px;height:54px}
  & .theme-control {grid-column:2;grid-row:1;margin:0;justify-self:end}
  & a.mobile-visit {grid-column:1/-1;grid-row:2;justify-self:stretch;justify-content:center;margin:0;min-height:46px;padding:6px 12px;font-size:15px}
 }
 @media(max-width:359px) {
  width:calc(100% - 28px);gap:10px;
  & .brand {gap:8px}
  & .brand>.blue-name {font-size:16px;padding:7px 7px 5px}
  & .brand img {width:44px;height:44px}
 }
}
html[data-theme=dark] body:has(main>article.legal:not([hidden])) .header {
 --ink:#f2eee6;--line:#555b59;--focus:#a3d9ea;
 & .brand>.blue-name {background:#302e29;color:#fff0d5;border-color:#7e6951;border-bottom-color:#e69858}
}
