/* Phone layout. Desktop keeps its approved composition. */
.mobile-evolution-cards { display:none; }
.viewer-phone-hint { display:none; }
@media (max-width:760px) {
  html { -webkit-text-size-adjust:100%; scroll-padding-top:0; scroll-behavior:auto!important; }
  body { --gutter:22px; font-size:16px; }
  main, main>section, main>section>div { min-width:0; }
  main [id] { scroll-margin-top:88px; }
  main p { overflow-wrap:break-word; word-break:normal; }
  main h1, main h2, main h3 { text-wrap:balance; word-break:normal; overflow-wrap:normal; }
  button, a { -webkit-tap-highlight-color:transparent; }
  input, select, textarea { font-size:16px; }
  .pawmaker-film .site-header { height:70px; padding-inline:18px; gap:12px; }
  .pawmaker-film .site-header .wordmark { width:142px; flex-shrink:1; }
  .pawmaker-film .site-header .header-actions { gap:6px; }
  .pawmaker-film .site-header .home-account-link,
  .pawmaker-film .site-header .bag-button,
  .pawmaker-film .site-header.is-over-hero .bag-button,
  .pawmaker-film .site-header .menu-toggle { display:grid; place-items:center; width:42px; height:44px; min-width:42px; padding:10px; border:0; background:transparent; }
  .pawmaker-film .site-header .header-shop { display:none; }
  .pawmaker-film .site-header .menu-label { display:none; }
  .pawmaker-film .site-header .bag-button>svg { width:23px; height:23px; }
  .pawmaker-film .site-header .bag-button>span { top:0; right:0; min-width:18px; height:18px; font-size:12px; }
  .pawmaker-film .mobile-nav { top:70px!important; padding:8px 22px 20px; max-height:calc(100dvh - 70px); overflow:auto; }
  .pawmaker-film .mobile-nav a { font-size:24px; padding:15px 0; min-height:54px; }

  /* Text floats over the quiet lower part of the image, clear of the cat. */
  .pawmaker-film .hero.film-hero { margin-top:0; height:calc(100svh - 70px); min-height:650px; max-height:900px; background:#f3eee6; }
  .pawmaker-film .film-stage { background:#f3eee6; }
  .pawmaker-film .film-poster,
  .pawmaker-film .hero-film { height:72%; bottom:auto; }
  .pawmaker-film .film-poster img { object-position:67% 46%; }
  .pawmaker-film .film-shade { background:linear-gradient(0deg,#f3eee6 0%,#f3eee6 24%,rgba(243,238,230,.95) 36%,rgba(243,238,230,.62) 48%,rgba(243,238,230,0) 65%); }
  .pawmaker-film .film-hero .film-copy { left:22px; right:22px; bottom:76px; width:auto; max-width:none; }
  .pawmaker-film .film-hero h1 { font-size:clamp(39px,11.3vw,49px); line-height:1.02; letter-spacing:-.025em; margin:0 0 16px; }
  .pawmaker-film .film-hero .film-coating { font-size:16px!important; line-height:1.55; max-width:29ch; margin-bottom:18px; }
  .pawmaker-film .film-hero .film-benefits { display:flex; flex-flow:row wrap; gap:8px 15px; margin:0; padding:0; }
  .pawmaker-film .film-hero .film-benefits li,
  .pawmaker-film .film-hero .film-benefits li+li { padding:0; border:0; font-size:16px!important; line-height:1.5; white-space:normal; }
  .pawmaker-film .film-benefits li::before { content:'·'; color:#a76743; margin-right:7px; }
  .hero-shop-shortcut { min-height:48px; margin-top:22px; padding:11px 18px; font-size:17px; gap:25px; }
  .pawmaker-film .film-hero .film-scroll { left:22px; bottom:17px; min-height:44px; padding:8px 0; }
  .pawmaker-film .film-hero .film-scroll>span { font-size:17px!important; }

  /* The wide comparison becomes three legible, tappable chapters. */
  #evolution.evolution-campaign { padding-block:46px 42px; }
  #evolution .evolution-editorial-heading { display:block; padding-block:0; margin-bottom:26px; }
  #evolution .evolution-editorial-heading h2 { font-size:36px; line-height:1.08; letter-spacing:-.025em; max-width:none; }
  #evolution .evolution-editorial-heading h2 br { display:none; }
  #evolution .evolution-editorial-heading h2 em { display:block; margin-top:6px; }
  #evolution .evolution-editorial-intro { font-size:17px; line-height:1.5; margin:18px 0 0; }
  #evolution .evolution-editorial-panorama,
  #evolution .evolution-editorial-stages { display:none; }
  .mobile-evolution-cards { display:grid; gap:16px; margin:0 22px; }
  .mobile-evolution-card { border:1px solid #dfd2bf; border-radius:12px; background:#f8f3eb; overflow:hidden; }
  .mobile-evolution-card.is-steel { border-color:#bc997d; }
  .mobile-evolution-visual { position:relative; aspect-ratio:1.58; overflow:hidden; background:#eee2d2; }
  .mobile-evolution-visual img { position:absolute; width:300%; max-width:none; height:auto; bottom:0; left:0; }
  .mobile-evolution-card:nth-child(2) .mobile-evolution-visual img { left:-100%; }
  .mobile-evolution-card:nth-child(3) .mobile-evolution-visual img { left:-200%; }
  .mobile-evolution-text { padding:18px 20px 5px; }
  .mobile-evolution-text h3 { font:400 29px/1.15 'PawMaker Editorial',Georgia,serif; margin:0 0 10px; color:#4d392b; text-align:left; }
  .mobile-evolution-text h3>span { display:inline-block; font:400 15px/1.4 Arial,sans-serif; color:#a76743; margin-right:10px; vertical-align:middle; }
  .mobile-evolution-text p { font:400 17px/1.55 Arial,sans-serif; color:#6f5946; margin:0; }
  .mobile-evolution-card details { margin:0 20px; }
  .mobile-evolution-card summary { display:flex; align-items:center; justify-content:space-between; padding:13px 0; min-height:48px; list-style:none; cursor:pointer; font-size:16px; color:#8c5435; }
  .mobile-evolution-card summary::after { content:'+'; font-size:24px; font-weight:400; }
  .mobile-evolution-card details[open] summary::after { content:'−'; }
  .mobile-evolution-detail { border-top:1px solid #e0d2bf; padding:16px 0 20px; }
  .mobile-evolution-detail img { display:block; width:100%; height:auto; border-radius:7px; aspect-ratio:2; object-fit:cover; margin:0 0 15px; }
  .mobile-evolution-detail p { font-size:16px; line-height:1.6; margin:0 0 10px; color:#6b5542; }
  .mobile-evolution-detail p:last-child { margin-bottom:0; color:#805035; }
  /* Do not crossfade two blocks of small text on a narrow screen. */
  #care .care-material-slide,
  #care .care-material-slide[hidden] { transition:none; transform:none; }
  #care .care-material-slide[hidden] { opacity:0; visibility:hidden; }

  .welcome-builder.coupon-builder { padding-block:44px; }
  .welcome-builder.coupon-builder .section-heading { margin-bottom:26px; }
  .welcome-builder.coupon-builder .section-heading .eyebrow { font-size:15px; line-height:1.5; letter-spacing:0; margin-bottom:12px; }
  .welcome-builder.coupon-builder .section-heading h2 { font-size:41px; line-height:1.04; }
  .welcome-builder.coupon-builder .builder-layout { grid-template-columns:minmax(0,1fr); gap:26px; }
  .welcome-builder.coupon-builder .viewer-column { position:static; min-width:0; }
  .welcome-builder.coupon-builder .viewer-frame { min-height:0; border-radius:12px; }
  .welcome-builder.coupon-builder .product-viewer { height:330px; touch-action:pan-y; }
  .welcome-builder.coupon-builder .product-viewer canvas { touch-action:pan-y!important; }
  .welcome-builder.coupon-builder .viewer-topline { top:16px; left:18px; font-size:14px; letter-spacing:.03em; }
  .welcome-builder.coupon-builder .viewer-controls { display:grid; grid-template-columns:44px minmax(0,1fr) repeat(3,44px); gap:4px; padding:0 10px 14px; }
  .welcome-builder.coupon-builder .viewer-controls>span { font-size:14px; line-height:1.35; text-align:center; margin:0; }
  .viewer-desktop-hint { display:none; }
  .viewer-phone-hint { display:inline; }
  .welcome-builder.coupon-builder .viewer-controls>button { width:44px; height:44px; }
  .welcome-builder.coupon-builder .viewer-caption { padding-block:12px; }
  .welcome-builder.coupon-builder .viewer-caption>span { max-width:none; font-size:14px; text-align:left; }
  .welcome-builder.coupon-builder .selected-items:empty { display:none; }
  .welcome-builder.coupon-builder .selected-chip { font-size:15px!important; line-height:1.4; padding:3px 5px 3px 10px; min-height:40px; }
  .welcome-builder.coupon-builder .selected-chip button { width:30px; height:30px; }
  .welcome-builder.coupon-builder .gift-picker-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 18px; }
  .welcome-builder.coupon-builder .gift-picker-heading h3 { font-size:25px!important; line-height:1.2; margin:0; }
  .welcome-builder.coupon-builder .gift-count { font-size:16px!important; white-space:nowrap; padding:0; }
  .welcome-builder.coupon-builder .included-gift-card { display:grid; grid-template-columns:64px minmax(0,1fr); gap:7px 14px; padding:20px 16px; }
  .welcome-builder.coupon-builder .included-gift-card>img { grid-row:1/3; width:64px; height:80px; object-fit:contain; }
  .welcome-builder.coupon-builder .included-gift-card h4 { font-size:17px!important; line-height:1.35; margin-bottom:7px; }
  .welcome-builder.coupon-builder .included-gift-card p { font-size:16px!important; line-height:1.5; }
  .welcome-builder.coupon-builder .included-gift-card>strong { grid-column:2; font-size:17px!important; }
  .welcome-builder.coupon-builder .gift-value-line { font-size:16px!important; line-height:1.5; margin:20px 0 15px; }
  .welcome-builder.coupon-builder #add-on-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .welcome-builder.coupon-builder #add-on-grid .add-on-card { min-height:242px; padding:36px 10px 15px; align-items:center; text-align:center; transform:none; }
  .welcome-builder.coupon-builder #add-on-grid .gift-product-photo { width:100%; height:108px; margin:0 auto 12px; }
  .welcome-builder.coupon-builder #add-on-grid .add-on-name { font-size:16px!important; line-height:1.35; min-height:44px; margin:0; display:flex; align-items:center; text-align:center; }
  .welcome-builder.coupon-builder #add-on-grid .add-on-price { display:flex; flex-wrap:wrap; gap:4px 8px; margin-top:auto; }
  .welcome-builder.coupon-builder #add-on-grid .add-on-price del,
  .welcome-builder.coupon-builder #add-on-grid .add-on-price strong { font-size:16px!important; line-height:1.5; }
  .welcome-builder.coupon-builder #add-on-grid .add-on-toggle { width:26px; height:26px; top:10px; right:10px; font-size:19px; }
  .welcome-builder .gift-selection-note { font-size:16px!important; line-height:1.55; margin-top:16px; }
  .gift-choice-guide { top:64px; right:4px; }
  .gift-choice-guide>span { font-size:14px; }
  .welcome-builder.coupon-builder .purchase-center { margin-top:22px; gap:22px; }
  .welcome-builder.coupon-builder .cat-coupon { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding:20px; border-radius:10px; }
  .welcome-builder.coupon-builder .coupon-percent { font-size:26px; margin-bottom:9px; }
  .welcome-builder.coupon-builder .cat-coupon p { max-width:none; font-size:16px; line-height:1.55; }
  .welcome-builder.coupon-builder .coupon-claim { width:100%; min-height:48px; font-size:16px; }
  .welcome-builder.coupon-builder .coupon-clock { align-items:flex-start; }
  .welcome-builder.coupon-builder .set-summary { display:grid; grid-template-columns:minmax(0,1fr)!important; gap:18px!important; text-align:left; width:100%; min-width:0; padding:0; margin:0; }
  .welcome-builder.coupon-builder .set-summary-price { align-items:flex-start; text-align:left; width:100%; min-width:0; }
  .welcome-builder.coupon-builder #set-total { font-size:36px!important; line-height:1.2; }
  .welcome-builder.coupon-builder #set-saving,
  .welcome-builder.coupon-builder .set-summary-price small { font-size:16px!important; line-height:1.6; }
  .welcome-builder.coupon-builder .set-summary .button { grid-column:1/-1; min-height:56px; font-size:17px!important; width:100%; gap:14px; white-space:normal; }
  .pawmaker-mascot,.store-page .pawmaker-mascot { --mascot-size:64px; --mascot-height:64px; left:8px; --mascot-bottom:10px; transition:none; }
  .mascot-message { font-size:16px; line-height:1.5; }
  .mascot-bubble-close { width:40px; height:40px; }
  .mascot-claim-reward { font-size:16px; }
  .toast,
  #store-toast,
  .store-page #store-toast { top:82px; bottom:auto!important; left:50%; width:calc(100% - 32px); max-width:420px; padding:13px 17px; border-radius:8px; font-size:16px; line-height:1.5; transform:translateX(-50%); text-align:left; }
  .toast.visible { transform:translateX(-50%); }
}
/* The compact phone journey goes directly from our story to material tests. */
@media (max-width:760px) {
  #alloy.material-intro { display:none!important; }
}
@media (max-width:360px) {
  body { --gutter:18px; }
  .pawmaker-film .site-header { padding-inline:12px; gap:6px; }
  .pawmaker-film .site-header .wordmark { width:132px; }
  .pawmaker-film .site-header .header-actions { gap:2px; }
  .pawmaker-film .film-hero .film-copy { left:18px; right:18px; }
  .pawmaker-film .film-hero h1 { font-size:39px; }
  .welcome-builder.coupon-builder .viewer-controls { grid-template-columns:40px minmax(0,1fr) repeat(3,40px); padding-inline:6px; gap:1px; }
  .welcome-builder.coupon-builder .viewer-controls>button { width:40px; }
  .welcome-builder.coupon-builder .viewer-controls>span { font-size:13px; }
  .mobile-evolution-cards { margin-inline:18px; }
}