/* Scoped copy of the approved Atelier atelier.css. Keep legacy shop styles outside this boundary. */
/* PETCOME / dark editorial art direction.
   DESIGN_VARIANCE 8, MOTION_INTENSITY 4, VISUAL_DENSITY 3.
   One charcoal theme; sage accent; open image compositions; pill actions. */



body.atelier-restored {
  color-scheme: dark !important;
  --bg: #101311;
  --panel: #1b201d;
  --ink: #f1f2e9;
  --muted: #a4afa7;
  --accent: #becbb1;
  --line: #323a33;
  --ease: cubic-bezier(.22,.68,.25,1);
  --font: 'Petcome Sans','Petcome TC','Microsoft JhengHei','PingFang TC',sans-serif;
}
body.atelier-restored * { box-sizing: border-box !important; }
html:has(body.atelier-restored) { scroll-behavior: smooth !important; scroll-padding-top: 112px !important; }
body.atelier-restored { margin: 0 !important; background: var(--bg) !important; color: var(--ink) !important; font-family: var(--font) !important; line-height: 1.8 !important; -webkit-font-smoothing: antialiased !important; }
body.atelier-restored, body.atelier-restored :where(main,footer) button { font-size: 15px !important; }
/* Keep static content distinct from editable controls without disabling selection. */
body.atelier-restored { cursor: default !important; caret-color: transparent !important; }
body.atelier-restored :where(main,footer) a[href], body.atelier-restored :where(main,footer) button, body.atelier-restored :where(main,footer) summary, body.atelier-restored :where(main,footer) select { cursor: pointer !important; }
body.atelier-restored :where(main,footer) input, body.atelier-restored :where(main,footer) textarea, body.atelier-restored [contenteditable=""], body.atelier-restored [contenteditable="true"], body.atelier-restored [contenteditable="plaintext-only"] { caret-color: auto !important; cursor: text !important; }
body.atelier-restored :where(main,footer) input:is([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"], [type="color"], [type="file"]) { cursor: pointer !important; }
body.atelier-restored :where(main,footer) h1,body.atelier-restored :where(main,footer) h2,body.atelier-restored :where(main,footer) h3,body.atelier-restored :where(main,footer) p,body.atelier-restored :where(main,footer) figure { margin: 0 !important; }
body.atelier-restored :where(main,footer) h1,body.atelier-restored :where(main,footer) h2,body.atelier-restored :where(main,footer) h3 { text-wrap: balance !important; }
body.atelier-restored :where(main,footer) p { text-wrap: pretty !important; }
body.atelier-restored :where(main,footer) a { color: inherit !important; text-decoration: none !important; }
body.atelier-restored :where(main,footer) button { font: inherit !important; color: inherit !important; cursor: pointer !important; }
body.atelier-restored :where(main,footer) img { display: block !important; max-width: 100% !important; }
body.atelier-restored :where(main,footer) a,body.atelier-restored :where(main,footer) button,body.atelier-restored :where(main,footer) summary { -webkit-tap-highlight-color: transparent !important; touch-action: manipulation !important; }
body.atelier-restored :where(main,footer) a,body.atelier-restored :where(main,footer) button { transition: color .2s,background .2s,transform .3s var(--ease) !important; }
body.atelier-restored :where(main,footer) a:focus-visible,body.atelier-restored :where(main,footer) button:focus-visible,body.atelier-restored :where(main,footer) summary:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 6px !important; }
body.atelier-restored [hidden] { display: none !important; }
body.atelier-restored .wrap { width: min(1140px, calc(100% - 128px)) !important; margin-inline: auto !important; }
body.atelier-restored .section { padding-block: 85px !important; }
body.atelier-restored .skip-link { position: fixed !important; z-index: 100 !important; top: -100px !important; left: 20px !important; background: var(--ink) !important; color: var(--bg) !important; padding: 12px 20px !important; }
body.atelier-restored .skip-link:focus { top: 15px !important; }
body.atelier-restored .subtle-link:hover { color: var(--accent) !important; }
body.atelier-restored .hero { position: relative !important; min-height: 740px !important; isolation: isolate !important; overflow: clip !important; }
body.atelier-restored .hero-art { position: absolute !important; z-index: -1 !important; top: 0 !important; right: 0 !important; width: 85% !important; height: 100% !important; pointer-events: none !important; }
body.atelier-restored .hero-art img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 70% 40% !important; }
body.atelier-restored .hero-art::after { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg,var(--bg) 0%,rgba(16,19,17,.9) 8%,rgba(16,19,17,.12) 45%,transparent 68%,transparent 82%,var(--bg) 100%),linear-gradient(0deg,var(--bg) 0%,rgba(16,19,17,.2) 22%,transparent 50%) !important; }
body.atelier-restored .hero-content { padding-top: 160px !important; padding-bottom: 64px !important; position: relative !important; }
body.atelier-restored .eyebrow { font-size: 10px !important; font-weight: 500 !important; letter-spacing: .17em !important; line-height: 1.5 !important; color: var(--accent) !important; }
body.atelier-restored .hero h1 { font-weight: 400 !important; font-size: clamp(58px,5.9vw,83px) !important; line-height: 1.31 !important; letter-spacing: -.055em !important; margin: 26px 0 27px !important; }
body.atelier-restored .hero h1 span { font-weight: 300 !important; color: var(--accent) !important; }
body.atelier-restored .hero-intro { max-width: 490px !important; color: #c7cec3 !important; font-size: 21px !important; font-weight: 400 !important; line-height: 1.85 !important; letter-spacing: .01em !important; text-wrap: pretty !important; }
body.atelier-restored .hero-intro-lead { display: block !important; color: var(--ink) !important; font-size: 23px !important; font-weight: 500 !important; line-height: 1.6 !important; margin-bottom: 12px !important; }
body.atelier-restored .hero .eyebrow { font-size: 12px !important; }
body.atelier-restored .hero-actions { display: flex !important; align-items: center !important; gap: 32px !important; margin-top: 30px !important; }
body.atelier-restored .button { display: inline-flex !important; min-height: 49px !important; align-items: center !important; justify-content: center !important; gap: 28px !important; border-radius: 99px !important; background: var(--ink) !important; color: var(--bg) !important; font-size: 12px !important; font-weight: 600 !important; padding: 12px 24px !important; white-space: nowrap !important; }
body.atelier-restored .button span { font-size: 20px !important; line-height: 1 !important; }
body.atelier-restored .button:hover { background: var(--accent) !important; transform: translateY(-3px) !important; }
body.atelier-restored .button:active { transform: translateY(1px) !important; }
body.atelier-restored .subtle-link { display: inline-flex !important; align-items: center !important; gap: 18px !important; min-height: 44px !important; font-size: 12px !important; }
body.atelier-restored .subtle-link span,body.atelier-restored .inline-link span { transition: transform .25s var(--ease) !important; font-size: 18px !important; }
body.atelier-restored .subtle-link:hover span,body.atelier-restored .inline-link:hover span { transform: translate(3px,-3px) !important; }
body.atelier-restored .hero-actions .button { min-height: 58px !important; padding: 14px 28px !important; font-size: 18px !important; gap: 32px !important; }
body.atelier-restored .hero-actions .subtle-link { min-height: 58px !important; font-size: 18px !important; gap: 20px !important; }
body.atelier-restored .hero-actions .button span,body.atelier-restored .hero-actions .subtle-link span { font-size: 24px !important; }
body.atelier-restored .collection { padding-top: 50px !important; padding-bottom: 75px !important; }
body.atelier-restored .section-heading h2 { font-size: 31px !important; line-height: 1.5 !important; letter-spacing: -.035em !important; font-weight: 400 !important; }
body.atelier-restored .section-heading p { margin-top: 12px !important; color: var(--muted) !important; font-size: 12px !important; letter-spacing: .02em !important; }
/* Information cards: 24px corners; navigation actions remain pill-shaped. */
body.atelier-restored .audience-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 32px !important; margin-top: 42px !important; }
body.atelier-restored .audience-card { display: flex !important; flex-direction: column !important; min-width: 0 !important; padding: 40px 44px 36px !important; background: #191f1b !important; border: 1px solid #596952 !important; border-radius: 24px !important; }
body.atelier-restored .audience-label { font-size: 12px !important; letter-spacing: .12em !important; color: var(--accent) !important; }
body.atelier-restored .audience-card h3 { font-size: clamp(28px,2.7vw,38px) !important; font-weight: 500 !important; letter-spacing: -.035em !important; line-height: 1.5 !important; margin-top: 22px !important; }
body.atelier-restored .audience-description { font-size: 15px !important; color: #bdc5bc !important; line-height: 1.95 !important; margin-block: 26px 38px !important; max-width: 27em !important; }
body.atelier-restored .audience-action { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 20px !important; min-height: 58px !important; padding: 12px 25px !important; margin-top: auto !important; border: 1px solid #93a884 !important; border-radius: 99px !important; background: var(--bg) !important; color: var(--accent) !important; font-size: 15px !important; font-weight: 500 !important; }
body.atelier-restored .audience-action>span:last-child { font-size: 23px !important; line-height: 1 !important; transition: transform .25s var(--ease) !important; }
body.atelier-restored .audience-action:hover,body.atelier-restored .audience-action:focus-visible { background: var(--accent) !important; color: var(--bg) !important; }
body.atelier-restored .audience-action:hover>span:last-child { transform: translate(2px,-2px) !important; }
body.atelier-restored .audience-action:active { transform: translateY(1px) !important; }
body.atelier-restored .product-story { padding-block: 55px 105px !important; }
body.atelier-restored .product-visual { width: min(960px,100%) !important; margin: 0 auto 56px !important; }
body.atelier-restored .product-visual img { width: 100% !important; height: auto !important; -webkit-mask-image: linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 91%,transparent) !important; -webkit-mask-composite: source-in !important; mask-image: linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 91%,transparent) !important; mask-composite: intersect !important; }
/* Product introduction: preserve the image, pair display type with readable copy.
   DESIGN_VARIANCE 6 / MOTION_INTENSITY 2 / VISUAL_DENSITY 3. */
body.atelier-restored .product-visual figcaption { text-align: center !important; font-size: 16px !important; color: var(--muted) !important; margin-top: 12px !important; }
body.atelier-restored .product-copy { display: grid !important; grid-template-columns: 1.1fr 1fr !important; align-items: center !important; gap: clamp(40px,6vw,88px) !important; max-width: 1040px !important; margin-inline: auto !important; }
body.atelier-restored .product-copy h2 { font-size: clamp(44px,4.6vw,64px) !important; font-weight: 400 !important; letter-spacing: -.04em !important; line-height: 1.3 !important; }
body.atelier-restored .product-copy h2 span { font-family: 'Petcome Sans','Petcome TC',sans-serif !important; letter-spacing: -.045em !important; color: var(--accent) !important; }
body.atelier-restored .product-description { color: #d0d6cd !important; font-size: 22px !important; line-height: 1.85 !important; margin: 0 !important; text-wrap: pretty !important; }
body.atelier-restored .product-link { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 24px !important; min-height: 58px !important; margin-top: 25px !important; padding-block: 14px !important; border-bottom: 1px solid #7f9075 !important; color: var(--ink) !important; font-size: 18px !important; transition: color .2s !important; }
body.atelier-restored .product-link span { font-size: 26px !important; color: var(--accent) !important; transition: transform .2s !important; }
body.atelier-restored .product-link:hover { color: var(--accent) !important; }
body.atelier-restored .product-link:hover span { transform: translate(2px,-2px) !important; }
body.atelier-restored .product-link:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 6px !important; }
body.atelier-restored .stories { border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; padding-block: 65px !important; display: grid !important; grid-template-columns: 1fr auto !important; gap: 40px !important; align-items: end !important; }
body.atelier-restored .stories-label { font-size: 12px !important; color: var(--accent) !important; margin-bottom: 20px !important; }
body.atelier-restored .stories h2 { font-size: 35px !important; font-weight: 300 !important; line-height: 1.55 !important; letter-spacing: -.03em !important; }
body.atelier-restored .stories-description { color: var(--muted) !important; font-size: 14px !important; line-height: 2 !important; margin-top: 20px !important; }
body.atelier-restored .story-link { display: inline-flex !important; align-items: center !important; gap: 32px !important; min-height: 54px !important; color: var(--accent) !important; font-size: 13px !important; }
body.atelier-restored .story-arrow { border: 1px solid #65735d !important; border-radius: 50% !important; display: grid !important; place-items: center !important; width: 52px !important; height: 52px !important; font-size: 23px !important; transition: background .2s,color .2s !important; }
body.atelier-restored .story-link:hover .story-arrow { background: var(--accent) !important; color: var(--bg) !important; }
body.atelier-restored .invitation { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 30px !important; padding-block: 110px 105px !important; }
body.atelier-restored .invitation h2 { font-size: clamp(35px,4.2vw,59px) !important; font-weight: 300 !important; letter-spacing: -.05em !important; line-height: 1.5 !important; margin-top: 24px !important; }
body.atelier-restored .invitation>.button { margin-right: 35px !important; }
body.atelier-restored .footer { padding-top: 34px !important; border-top: 1px solid var(--line) !important; }
body.atelier-restored .footer-info { display: flex !important; justify-content: space-between !important; gap: 30px !important; color: var(--muted) !important; font-size: 11px !important; }
body.atelier-restored .footer-info nav { display: flex !important; gap: 28px !important; }
body.atelier-restored .footer-info nav a { min-height: 44px !important; }
body.atelier-restored .footer-info nav a:hover { color: var(--ink) !important; }
body.atelier-restored .footer-wordmark { font-family: 'Petcome Sans',Arial,sans-serif !important; font-size: clamp(80px,15vw,210px) !important; font-weight: 600 !important; letter-spacing: -.075em !important; line-height: 1.15 !important; color: #b9c2ac !important; padding-block: 20px 30px !important; }
body.atelier-restored .footer-bottom { display: flex !important; justify-content: space-between !important; gap: 20px !important; align-items: center !important; padding-block: 8px 25px !important; color: var(--muted) !important; font-size: 9px !important; }
body.atelier-restored .footer-bottom>a { min-height: 44px !important; display: flex !important; align-items: center !important; }
body.atelier-restored .hero-content>* { animation: enter .95s var(--ease) both !important; }
body.atelier-restored .hero-content h1 { animation-delay: .08s !important; }
body.atelier-restored .hero-intro { animation-delay: .16s !important; }
body.atelier-restored .hero-actions { animation-delay: .24s !important; }
@keyframes enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* Shared language panel: visual prototype, never changes translations. */

@media (min-width: 1600px) {
  body.atelier-restored .hero-art { right: calc((100vw - 1600px)/2) !important; width: 1300px !important; }
  body.atelier-restored .hero { min-height: 750px !important; }
}
@media (max-width: 1100px) {
  body.atelier-restored .wrap { width: calc(100% - 96px) !important; }
  body.atelier-restored .hero { min-height: 710px !important; }
  body.atelier-restored .hero-art { width: 95% !important; right: -7% !important; }
  body.atelier-restored .hero-content { padding-top: 150px !important; }
  body.atelier-restored .hero-intro { max-width: 440px !important; font-size: 20px !important; }
  body.atelier-restored .audience-grid { gap: 24px !important; }
  body.atelier-restored .audience-card { padding-inline: 30px !important; }
}
@media (max-width: 767px) {
  html:has(body.atelier-restored) { scroll-padding-top: 94px !important; }
  body.atelier-restored .wrap { width: calc(100% - 48px) !important; }
  body.atelier-restored .section { padding-block: 58px !important; }
  body.atelier-restored .hero { min-height: 0 !important; display: flex !important; flex-direction: column !important; }
  body.atelier-restored .hero-content { order: 1 !important; padding-top: 116px !important; padding-bottom: 0 !important; }
  body.atelier-restored .eyebrow { font-size: 8px !important; letter-spacing: .13em !important; }
  body.atelier-restored .hero h1 { font-size: clamp(49px,12.5vw,72px) !important; line-height: 1.3 !important; margin: 22px 0 21px !important; }
  body.atelier-restored .hero-intro { max-width: 440px !important; font-size: 18px !important; line-height: 1.85 !important; letter-spacing: .01em !important; }
  body.atelier-restored .hero-intro-lead { font-size: 20px !important; margin-bottom: 10px !important; }
  body.atelier-restored .hero-actions { margin-top: 26px !important; gap: 24px !important; }
  body.atelier-restored .button { min-height: 47px !important; padding: 11px 21px !important; font-size: 11px !important; gap: 24px !important; }
  body.atelier-restored .subtle-link { font-size: 11px !important; gap: 12px !important; }
  body.atelier-restored .hero-actions .button { min-height: 54px !important; padding: 12px 23px !important; font-size: 17px !important; gap: 24px !important; }
  body.atelier-restored .hero-actions .subtle-link { min-height: 54px !important; font-size: 17px !important; gap: 12px !important; }
  body.atelier-restored .hero-art { position: relative !important; flex: none !important; order: 2 !important; align-self: flex-end !important; top: auto !important; right: auto !important; width: 120% !important; height: 360px !important; margin-top: 0 !important; }
  body.atelier-restored .hero-art img { object-position: 75% center !important; }
  body.atelier-restored .hero-art::after { background: linear-gradient(0deg,var(--bg),transparent 32%,transparent 72%,var(--bg)),linear-gradient(90deg,var(--bg),transparent 30%,transparent 90%,var(--bg)) !important; }
  body.atelier-restored .collection { padding-top: 32px !important; padding-bottom: 38px !important; }
  body.atelier-restored .section-heading h2 { font-size: 26px !important; }
  body.atelier-restored .section-heading p { margin-top: 10px !important; font-size: 11px !important; }
  body.atelier-restored .audience-grid { grid-template-columns: 1fr !important; gap: 24px !important; margin-top: 30px !important; }
  body.atelier-restored .audience-card { padding: 30px 27px 26px !important; }
  body.atelier-restored .audience-label { font-size: 11px !important; }
  body.atelier-restored .audience-card h3 { font-size: clamp(26px,7.2vw,34px) !important; margin-top: 19px !important; }
  body.atelier-restored .audience-description { font-size: 14px !important; margin-block: 23px 30px !important; }
  body.atelier-restored .audience-action { min-height: 54px !important; padding-inline: 22px !important; font-size: 14px !important; }
  body.atelier-restored .product-story { padding-block: 36px 65px !important; }
  body.atelier-restored .product-visual { width: calc(100% + 48px) !important; max-width: none !important; margin-inline: -24px !important; margin-bottom: 30px !important; }
  body.atelier-restored .product-visual figcaption { font-size: 16px !important; padding-inline: 24px !important; }
  body.atelier-restored .product-copy { grid-template-columns: 1fr !important; gap: 25px !important; }
  body.atelier-restored .product-copy h2 { font-size: clamp(40px,10vw,52px) !important; line-height: 1.25 !important; }
  body.atelier-restored .product-description { font-size: 19px !important; line-height: 1.85 !important; }
  body.atelier-restored .product-link { margin-top: 18px !important; }
  body.atelier-restored .stories { grid-template-columns: 1fr !important; padding-block: 40px !important; gap: 24px !important; }
  body.atelier-restored .stories h2 { font-size: 29px !important; }
  body.atelier-restored .stories-description { font-size: 13px !important; }
  body.atelier-restored .story-link { justify-self: start !important; gap: 24px !important; }
  body.atelier-restored .story-arrow { width: 46px !important; height: 46px !important; }
  body.atelier-restored .invitation { display: block !important; padding-block: 68px 70px !important; }
  body.atelier-restored .invitation h2 { font-size: 36px !important; line-height: 1.55 !important; margin-top: 20px !important; }
  body.atelier-restored .invitation>.button { margin-top: 27px !important; margin-right: 0 !important; }
  body.atelier-restored .footer { padding-top: 27px !important; }
  body.atelier-restored .footer-info { display: block !important; font-size: 10px !important; }
  body.atelier-restored .footer-info nav { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 15px !important; margin-top: 24px !important; }
  body.atelier-restored .footer-wordmark { font-size: 15.5vw !important; padding-block: 14px 23px !important; letter-spacing: -.075em !important; }
  body.atelier-restored .footer-bottom { flex-wrap: wrap !important; font-size: 8px !important; gap: 0 20px !important; padding-bottom: 16px !important; }
  body.atelier-restored .footer-bottom>p { order: 3 !important; flex-basis: 100% !important; line-height: 1.9 !important; margin-top: 10px !important; }
  body.atelier-restored .footer-bottom>a { margin-left: auto !important; }
}
@media (max-width: 370px) {
  body.atelier-restored .wrap { width: calc(100% - 40px) !important; }
  body.atelier-restored .product-visual { width: calc(100% + 40px) !important; margin-inline: -20px !important; }
  body.atelier-restored .hero h1 { font-size: 48px !important; }
  body.atelier-restored .hero-actions { gap: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.atelier-restored) { scroll-behavior: auto !important; }
  body.atelier-restored *,body.atelier-restored *::before,body.atelier-restored *::after { animation: none !important; transition: none !important; }
}

/* Additional clinic navigation; tablet keeps comfortable touch spacing. */
@media (min-width: 768px) and (max-width: 1000px) { }
@media (min-width:768px) and (max-width:1000px) { }

body.atelier-restored .care-reading-links{display:grid !important;grid-template-columns:1fr 1fr !important;gap:32px !important;margin:36px 0 0 !important}body.atelier-restored .care-reading-links a{display:flex !important;justify-content:space-between !important;gap:20px !important;padding:22px 0 !important;border-bottom:1px solid #424a40 !important;font-size:20px !important;color:#c5d1bb !important}body.atelier-restored .care-reading-links a:hover{color:#f1f2e8 !important}body.atelier-restored .care-reading-links a:focus-visible{outline:2px solid #c5d1bb !important;outline-offset:5px !important}@media(max-width:600px){body.atelier-restored .care-reading-links{gap:22px !important}body.atelier-restored .care-reading-links a{font-size:18px !important;gap:10px !important}}