/* Public MyPet design layer: preserve page grids and business controls. */
:root,:host{--ui-ink:#20372f;--ui-muted:#59665b;--ui-brand:#20372f;--ui-green:#518e45;--ui-yellow:#f1ca30;--ui-cream:#f9f6eb;--ui-border:#dce2d5;--ui-surface:#fffef9;--ui-page:#f9f6eb;--ui-radius:16px;--ui-shadow:0 4px 18px rgba(32,55,47,.045);--ui-font:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--navy:#20372f;--navy-2:#304e3a;--text:#20372f;--ink:#20372f;--muted:#59665b;--green:#518e45;--green-dark:#365f2e;--green-soft:#eaf1e4;--mint:#eaf1e4;--blue:#365f2e;--blue-soft:#eaf1e4;--purple:#365f2e;--purple-soft:#eaf1e4;--orange:#795e0d;--orange-soft:#fcf3ca;--line:#dce2d5;--surface:#fffef9;--page:#f9f6eb;--bg:#f9f6eb;--shadow:0 12px 34px #20372f12;--shadow-sm:0 8px 20px #20372f10}
html{scroll-padding-top:112px;-webkit-text-size-adjust:100%}
body[data-mypet-ui]{font-family:var(--ui-font);font-size:16px;line-height:1.65;color:var(--ui-ink);background:var(--ui-page);-webkit-font-smoothing:antialiased}
body[data-mypet-ui] main{min-width:0}
body[data-mypet-ui] h1{font-size:clamp(30px,3.4vw,48px);line-height:1.18;letter-spacing:-.035em;font-weight:750;text-wrap:balance}
body[data-mypet-ui] h2{line-height:1.3;letter-spacing:-.02em;text-wrap:balance}
body[data-mypet-ui] h3{line-height:1.4;letter-spacing:-.012em}
body[data-mypet-ui] :where(p,li){overflow-wrap:break-word}
body[data-mypet-ui] :where(input,select,textarea,button){font-family:inherit}
body[data-mypet-ui] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea){font-size:16px;line-height:1.5;border-color:#ccd8e2;border-radius:11px;min-width:0}
body[data-mypet-ui] :where(label,.field label,.shop-field label,.catalog-field label){font-size:13px;line-height:1.5;font-weight:650;color:#36516a}
body[data-mypet-ui] :where(.btn,.primary,.secondary,.shop-button,.catalog-search){min-height:44px;border-radius:11px;font-size:14px;line-height:1.4;font-weight:650;letter-spacing:0;box-shadow:none;text-decoration:none}
body[data-mypet-ui] :where(.btn-primary,.primary,.shop-button:not(.secondary):not(.shop-add),.catalog-search){background:var(--ui-brand);border-color:var(--ui-brand);color:#fff}
body[data-mypet-ui] :where(.btn-outline,.secondary){background:#fff;color:var(--ui-ink);border:1px solid #cbd7e1}
body[data-mypet-ui] :where(a,button,input,textarea,select,summary):focus-visible,:host :where(a,button,input,textarea,select):focus-visible{outline:3px solid #246bba;outline-offset:3px}
body[data-mypet-ui] :where(.clinic-card,.blog-card,.shop-card),body[data-ui-page=catalog] .card,body[data-ui-page=blog] .card{border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:#fff;box-shadow:var(--ui-shadow);overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease;transform:none}
body[data-mypet-ui] .section{padding-block:clamp(32px,4vw,56px)}
body[data-mypet-ui] .section-title{gap:20px;margin-bottom:24px}
body[data-mypet-ui] .section-title h2{font-size:clamp(24px,2.4vw,32px);font-weight:700}
body[data-mypet-ui] .section-title p{font-size:15px;line-height:1.65;color:var(--ui-muted)}
body[data-mypet-ui] .section-title .more{font-size:14px;color:var(--ui-brand)}
body[data-mypet-ui] .clinic-grid{align-items:stretch;gap:22px}
body[data-mypet-ui] .clinic-card{display:flex;flex-direction:column}
body[data-mypet-ui] .clinic-image{aspect-ratio:4/3;height:auto;flex-shrink:0;background:#eef3f6}
body[data-mypet-ui] .clinic-body{padding:20px;display:flex;flex-direction:column;flex:1}
body[data-mypet-ui] .clinic-body h3{font-size:18px;font-weight:650;margin:0 0 4px}
body[data-mypet-ui] .clinic-body .meta{font-size:14px;line-height:1.6;color:var(--ui-muted)}
body[data-mypet-ui] .clinic-actions{margin-top:auto;padding-top:18px}
body[data-mypet-ui] .clinic-actions .btn{font-size:14px;height:auto;padding:11px 8px}
body[data-mypet-ui] .tag{font-size:12px;line-height:1.5;padding:5px 9px;border-radius:7px;font-weight:550;color:#355c7a;background:#edf4f9}
body[data-mypet-ui] :where(.toolbar,.shop-toolbar,.shop-panel,.panel){border-radius:var(--ui-radius);border-color:var(--ui-border);box-shadow:none}
body[data-ui-page=catalog] .card .body{padding:20px}
body[data-ui-page=catalog] .card .body h3{font-size:19px;line-height:1.4;font-weight:650;margin-bottom:12px}
body[data-ui-page=catalog] .card .info{font-size:14px;line-height:1.65;color:var(--ui-muted)}
body[data-ui-page=catalog] .cover{height:auto;aspect-ratio:4/3}
body[data-ui-page=catalog] .card-actions a{font-size:14px;min-height:44px;font-weight:650}
body[data-ui-page=catalog] .gallery{grid-template-columns:2fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));height:clamp(260px,30vw,440px);min-height:0;max-height:440px}
body[data-ui-page=catalog] .gallery img{width:100%;height:100%;min-height:0;object-fit:cover}
body[data-ui-page=catalog] .gallery img:first-child{grid-row:span 2}
body[data-ui-page=catalog] .gallery:not(:has(img:nth-child(3))){grid-template-rows:1fr}
body[data-ui-page=catalog] .gallery:not(:has(img:nth-child(3))) img:first-child{grid-row:1}
body[data-ui-page=catalog] .panel h2{font-size:22px;font-weight:650}
body[data-ui-page=catalog] #description{font-size:16px;color:var(--ui-muted)}
body[data-ui-page=shop] .shop-product-section .shop-grid{gap:20px}
body[data-ui-page=shop] .shop-card>div{padding:16px}
body[data-ui-page=shop] .shop-card h2{font-size:16px;font-weight:600;line-height:1.5;min-height:3em;margin:8px 0 14px}
body[data-ui-page=shop] .shop-card small{font-size:12px;color:var(--ui-muted)}
body[data-ui-page=shop] .shop-card .shop-price{font-size:21px;line-height:1.3;letter-spacing:-.02em;font-weight:750}
body[data-ui-page=shop] .shop-price del{font-size:13px;color:#687887;font-weight:400}
body[data-ui-page=shop] .shop-card-meta{font-size:13px;color:var(--ui-muted)}
body[data-ui-page=shop] .shop-card .shop-add{min-height:44px;border-radius:9px;font-size:14px;font-weight:600;background:#fffef9;color:#20372f;border-color:#b9c8af}
body[data-ui-page=shop] .shop-discount{font-size:13px;border-radius:6px;padding:4px 7px}
body[data-ui-page=shop] .shop-category-menu button{font-size:15px;line-height:1.5}
body[data-ui-page=blog] #articles{gap:24px;align-items:stretch}
body[data-ui-page=blog] #articles .card{display:flex;flex-direction:column;padding:0 0 22px;gap:10px}
body[data-ui-page=blog] #articles .card>:not(img){margin-inline:22px}
body[data-ui-page=blog] #articles .card img{height:auto;aspect-ratio:16/10;border-radius:0}
body[data-ui-page=blog] #articles h2{font-size:21px;font-weight:650;margin-block:0}
body[data-ui-page=blog] #articles p{font-size:15px;color:var(--ui-muted);margin-block:0}
body[data-ui-page=blog] article{padding:clamp(22px,4vw,44px);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow);border-color:var(--ui-border)}
body[data-ui-page=blog] #article-content{font-size:17px;line-height:1.85;color:#344e63}
body[data-mypet-ui] .blog-card h3{font-size:19px;font-weight:650;line-height:1.45}
body[data-mypet-ui] .blog-card p{font-size:15px;color:var(--ui-muted)}
body[data-mypet-ui] .blog-card>img{aspect-ratio:16/10;object-fit:cover}
body[data-mypet-ui] :where(.shop-muted,.info,.sub,.small){color:var(--ui-muted)}
body[data-mypet-ui] footer{font-size:14px;line-height:1.7}
body[data-ui-page=account] .section-title h2{font-size:18px;letter-spacing:-.01em}
body[data-ui-page=account] :where(.auth-foot,.check,.hint,.secure,.helper,.field-note){font-size:13px;line-height:1.6}
body[data-ui-page=account] :where(.partner-type strong,.partner-type small){font-size:13px;line-height:1.5}
.ui-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ui-skip-link{position:fixed;z-index:10000;top:12px;left:16px;padding:10px 18px;border-radius:10px;background:#fff;color:#173653;box-shadow:0 4px 20px #17365333;transform:translateY(-180%);font-size:16px;font-weight:650}
.ui-skip-link:focus{transform:translateY(0)}
:host{font-family:var(--ui-font);color:var(--ui-ink)}
:host header{background:#fff;backdrop-filter:none}
:host .brand strong{letter-spacing:-.04em;font-weight:750}
:host nav a{font-size:14px;font-weight:600}
:host .mega-menu{box-shadow:0 16px 40px #17365314;border-radius:16px;backdrop-filter:none}
:host .btn{height:44px;border-radius:11px;font-size:14px;box-shadow:none;font-weight:650}
:host .btn-primary{background:#087f5b;color:#fff;border-color:#087f5b}
:host .icon-btn{width:44px;height:44px}
@media(hover:hover){body[data-mypet-ui] :where(.clinic-card,.blog-card,.shop-card):hover,body[data-ui-page=catalog] .card:hover,body[data-ui-page=blog] .card:hover{border-color:#bed0da;box-shadow:0 10px 26px rgba(20,49,75,.075);transform:none}body[data-mypet-ui] .btn:hover{transform:none}body[data-mypet-ui] :where(.btn-primary,.primary,.catalog-search):hover{background:#076b4d}}
@media(max-width:760px){body[data-mypet-ui]{font-size:16px}body[data-mypet-ui] :where(.container,.shop-wrap){width:calc(100% - 32px)}body[data-mypet-ui] :where(.wrap,.shell){padding-inline:16px}body[data-mypet-ui] .section-title{align-items:flex-start;flex-wrap:wrap;gap:12px}body[data-mypet-ui] .section-title p{font-size:14px}body[data-mypet-ui] .clinic-body{padding:18px}body[data-mypet-ui] .clinic-grid{gap:18px}body[data-ui-page=shop] .shop-product-section .shop-grid{gap:12px}body[data-ui-page=shop] .shop-card>div{padding:12px}body[data-ui-page=shop] .shop-card h2{font-size:15px}body[data-ui-page=shop] .shop-card .shop-price{font-size:18px}body[data-ui-page=shop] .shop-card .shop-add{font-size:13px}body[data-mypet-ui] :where(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea){font-size:16px}body[data-ui-page=blog] #article-content{font-size:16px}:host .header-row{gap:12px}}
@media(max-width:620px){body[data-ui-page=catalog] .gallery{grid-template-columns:1fr;grid-template-rows:1fr;height:auto;max-height:none}body[data-ui-page=catalog] .gallery img:first-child{grid-row:1;aspect-ratio:4/3;height:auto}body[data-ui-page=catalog] .gallery img:not(:first-child){display:none}}
/* Approved autumn palette: yellow accent, botanical green, forest ink, cream. */
body[data-mypet-ui] :where(h1,h2,h3,h4,label,.field label,.shop-field label,.catalog-field label){color:var(--ui-ink)}
body[data-mypet-ui] :where(.btn-primary,.primary,.shop-button:not(.secondary):not(.shop-add),.catalog-search,.banner-copy a,.searchbox button){background:var(--ui-brand);border-color:var(--ui-brand);color:#fff}
body[data-mypet-ui] :where(.btn-outline,.secondary,.shop-card .shop-add){background:var(--ui-surface);color:var(--ui-ink);border-color:#b9c8af}
body[data-mypet-ui] :where(.tag,.badge,.pill,.blog-category){background:#eaf1e4;color:#365f2e}
body[data-mypet-ui] :where(.clinic-image,.cover,.clinic-photo-empty){background:#eaf1e4}
body[data-mypet-ui] :where(.clinic-card,.blog-card,.shop-card,.panel,.toolbar,.shop-toolbar,.shop-panel,.auth-card,.form-card){background:var(--ui-surface);border-color:var(--ui-border)}
body[data-mypet-ui] :where(input,select,textarea){accent-color:var(--ui-green);border-color:#bcc8b5}
body[data-mypet-ui] :where(a,button,input,textarea,select,summary):focus-visible,:host :where(a,button,input,textarea,select):focus-visible{outline-color:#365f2e}
body[data-mypet-ui] :where(.topbar),:host .topbar{background:#20372f;background-image:linear-gradient(105deg,#20372f,#365f2e);color:#f9f6eb}
body[data-mypet-ui] header,:host header{background:#fffef9;border-color:var(--ui-border)}
:host .brand,:host .brand strong,:host nav a{color:var(--ui-ink)}
:host .brand-mark,body[data-mypet-ui] .brand-mark{background:#f1ca30;color:#20372f;box-shadow:0 6px 16px #20372f14}
:host nav a.active{color:#365f2e}
:host nav a.active:after{background:#f1ca30}
:host .btn-primary{background:#20372f;border-color:#20372f;color:#fff}
:host .mega-menu{background:#fffef9;border-color:var(--ui-border);box-shadow:0 16px 40px #20372f14}
:host :where(.mega-item:hover,.mega-link:hover,nav>a:hover){color:#365f2e}
:host :where(.city-btn,.btn-outline,.icon-btn){color:var(--ui-ink);border-color:var(--ui-border);background:#fffef9}
body[data-mypet-ui] :where(.home-hero,.banner-stage){background-color:#f9f6eb}
body[data-mypet-ui] .home-hero .banner-copy p{color:var(--ui-muted)}
body[data-mypet-ui] .banner-copy:not(.home-hero .banner-copy){background:#fffef9f5}
body[data-mypet-ui] :where(.shop-discount,.searchbox button){background:#f1ca30;color:#20372f;border-color:#f1ca30}
body[data-ui-page=shop] .shop-tabs button.active{background:#20372f;color:#f9f6eb;border-color:#20372f}
body[data-mypet-ui] .btn.primary{background:#20372f;color:#fff;border-color:#20372f;box-shadow:none}
body[data-mypet-ui] :where(.shop-price,.blog-explore,.more){color:#365f2e}
body[data-mypet-ui] .tag{color:#365f2e;background:#eaf1e4}
body[data-mypet-ui] #article-content{color:#34483a}
body[data-mypet-ui] footer{background:#20372f;color:#f9f6eb;border-color:#365044}
body[data-mypet-ui] footer :where(p,a,small,h3,h4,.footer-links,.brand strong){color:inherit}
body[data-mypet-ui] .home-blog{background:#fffef9;padding-block:56px}
body[data-mypet-ui] .home-blog .section-title{align-items:flex-end;margin-bottom:32px}
body[data-mypet-ui] .home-blog .blog-eyebrow{font-size:12px;line-height:1.5;letter-spacing:.16em;font-weight:750;color:#365f2e;margin:0 0 14px}
body[data-mypet-ui] .home-blog h2{font-size:clamp(30px,3.4vw,42px);margin:0 0 10px}
body[data-mypet-ui] .home-blog .blog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
body[data-mypet-ui] .home-blog .blog-card{display:flex;flex-direction:column;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible}
body[data-mypet-ui] .home-blog .blog-image{display:block;overflow:hidden;border-radius:20px;aspect-ratio:5/4;background:#eaf1e4}
body[data-mypet-ui] .home-blog .blog-image img{display:block;width:100%;height:100%;object-fit:cover}
body[data-mypet-ui] .home-blog .blog-image-placeholder{display:grid;place-items:center;height:100%;color:#365f2e;font-weight:700}
body[data-mypet-ui] .home-blog .blog-body{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:20px 0 0}
body[data-mypet-ui] .home-blog .blog-category{display:inline-block;padding:5px 10px;border-radius:99px;font-size:12px;font-weight:650;margin-bottom:14px}
body[data-mypet-ui] .home-blog h3{font-size:19px;line-height:1.5;font-weight:700;margin:0 0 12px}
body[data-mypet-ui] .home-blog h3 a{color:inherit;text-decoration:none}
body[data-mypet-ui] .home-blog .blog-body p{font-size:14px;line-height:1.75;color:var(--ui-muted);margin:0 0 24px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body[data-mypet-ui] .home-blog .blog-explore{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:auto;font-size:14px;font-weight:700;text-decoration:none}
body[data-mypet-ui] .home-blog .blog-explore>span[aria-hidden]{font-size:24px}
body[data-mypet-ui] .home-blog .blog-empty{grid-column:1/-1}
@media(hover:hover){body[data-mypet-ui] :where(.btn-primary,.primary,.catalog-search):hover,:host .btn-primary:hover{background:#304e3a;border-color:#304e3a}body[data-mypet-ui] .home-blog .blog-card:hover{box-shadow:none;border:0}body[data-mypet-ui] .home-blog :where(h3 a,.blog-explore,.more):hover{text-decoration:underline;text-underline-offset:4px}}
@media(max-width:960px){body[data-mypet-ui] .home-blog .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){body[data-mypet-ui] .home-blog{padding-block:36px}body[data-mypet-ui] .home-blog .blog-grid{grid-template-columns:1fr;gap:32px}body[data-mypet-ui] .home-blog .section-title{align-items:flex-start}body[data-mypet-ui] .home-blog .blog-image{aspect-ratio:16/10}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}body[data-mypet-ui] *,body[data-mypet-ui] *::before,body[data-mypet-ui] *::after,:host *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}