/* Shared storefront mobile layout. Source images, prices and purchase actions are retained. */
@media (max-width:800px) {
  html {scroll-behavior:auto;scroll-padding-top:0}
  .ps-page [id],.ps-page #photo-cleanup {scroll-margin-top:80px}
  #storeHeader.bas-header,body>.header,body>header {position:relative!important;top:auto!important}
  /* Header rows keep their height while the document scrolls. */
  #storeHeader.bas-header {padding:8px 16px 0;gap:6px 8px}
  #storeHeader .bas-global-search,.bas-detail #storeHeader.bas-detail-compact .bas-global-search {display:flex!important;height:40px}
  #storeHeader .bas-shop-nav {display:flex!important}
  #storeHeader .bas-global-search input,.header-search input {font-size:16px}
  #storeHeader .bas-global-search button {height:38px}
  .header-main,.nav {transition:none}
  .header-search {height:38px}
  .header-search input {padding-block:8px}
  .header-search button {height:36px}
  /* Only the relevant product navigation stays at the top. */
  .bas-detail .pd2-tabs-section,.product-landing .landing-nav,.ps-page .ps-detail-nav {position:sticky;top:0;z-index:40;background:#faf8f5}
  .bas-detail .pd2-tabs-section {padding:0;border-bottom:1px solid #e5e0e6}
  .bas-detail .pd2-tab-bar,.product-landing .landing-nav>.shell,.ps-page .ps-detail-nav {gap:22px;scroll-behavior:auto}
  .bas-detail .pd2-tab-bar a,.product-landing .landing-nav a,.ps-page .ps-detail-nav a {min-height:48px;padding-block:12px;font-size:13px;line-height:1.6}
  .ps-page [id],.product-landing section[id] {scroll-margin-top:64px}
  .bas-detail .pd2-tabs-section {scroll-margin-top:12px}
  /* Mobile scrolling does not need translated layers, blur filters or floating artwork. */
  .has-motion [data-motion],.has-motion .motion-lines>span,.pm-detail.reveal-on .pm-sec {opacity:1!important;transform:none!important;transition:none!important;will-change:auto!important}
  .has-motion .motion-lines {clip-path:none}
  .has-motion .mark {background-size:100% 100%}
  .bas-package,.product-box,.ps-package,.hero-shelf img,.bas-shelf-art img {filter:none!important;will-change:auto!important;animation:none!important}
  .bas-detail-dialog::backdrop,.ps-page #ps-viewer::backdrop,.purchase-dock,.bas-detail #mobileBuyBar.bas-detail-dock {backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .purchase-dock,.bas-detail #mobileBuyBar.bas-detail-dock {background:#fff;box-shadow:0 -1px 0 #e5e0e6}
  .bas-detail-package,.landing-package,.ps-screen-panel,.detail-interface-figure,.detail-screenshot .screen-preview {box-shadow:none}
  .bas-detail-package,.landing-package {border-radius:10px}
  .bas-detail-hero {padding-block:22px 24px}
  .bas-detail-hero-grid {gap:22px}
  .bas-detail-hero-title {font-size:clamp(28px,7.7vw,36px);line-height:1.3}
  .bas-detail-hero-description {font-size:14px;line-height:1.75}
  .bas-detail-meta {gap:12px;flex-wrap:wrap}
  .pm-detail .pm-sec {padding-block:42px}
  .pm-detail .pm-hero {min-height:360px;padding-block:52px}
  .pm-detail .pm-hero-bg {filter:none}
  .bas-guide-plans,.bas-reviews {padding-block:28px}
  .bas-guide-plan-grid {gap:12px}
  .bas-guide-plan-grid>article {padding:20px}
  .bas-review-card {padding:18px}
  .bas-review-content {font-size:14px;line-height:1.8}
  /* Photo Studio: bring both plans into the same short comparison. */
  .ps-page .ps-container {width:calc(100% - 32px)}
  .ps-page .ps-section {padding-block:36px}
  .ps-page .ps-section-head {gap:9px;margin-bottom:18px}
  .ps-page .ps-section-head>p {font-size:13px;line-height:1.75;max-width:none}
  .ps-page h2 {font-size:26px;line-height:1.4;letter-spacing:-.9px}
  .ps-page .ps-hero {padding:8px 0 26px;min-height:0;gap:20px}
  .ps-page .ps-intro {font-size:14px;line-height:1.75}
  .ps-page .ps-actions {margin-top:20px}
  .ps-page .ps-plan-grid {grid-template-columns:1fr;gap:12px}
  .ps-page .ps-plan-grid article {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:7px 12px;padding:18px;border-radius:12px;min-width:0}
  .ps-page .ps-plan-name {grid-column:1;grid-row:1;font-size:10px;line-height:1.5;letter-spacing:.7px}
  .ps-page .ps-plan-grid h3 {grid-column:1;grid-row:2;margin:0;font-size:15px;line-height:1.5;letter-spacing:-.4px}
  .ps-page .ps-price {grid-column:2;grid-row:1 / span 2;align-self:center;white-space:nowrap;text-align:right;font-size:31px;line-height:1.15;letter-spacing:-1px}
  .ps-page .ps-price small {display:block;font-size:11px;line-height:1.4;margin:4px 0 0;letter-spacing:0;color:#686574}
  .ps-page .ps-vat {grid-column:1 / -1;text-align:right;margin:0!important;font-size:11px;line-height:1.5;color:#726b7d}
  .ps-page .ps-plan-grid ul {grid-column:1 / -1;margin:3px 0 4px;padding:10px 0 0;display:grid;gap:5px;font-size:12px;line-height:1.6;color:#625c6e}
  .ps-page .ps-plan-grid .ps-button {grid-column:1 / -1;min-height:44px;padding:10px 14px;margin:0;font-size:13px;font-weight:700}
  .ps-page .ps-plan-grid a.ps-button,.ps-page .ps-plan-grid button.ps-button:not(:disabled) {background:var(--ps-accent);color:#fff;border-color:var(--ps-accent)}
  .ps-page .ps-release-note {font-size:12px;line-height:1.75;margin-top:14px!important;text-align:left}
  .ps-page .ps-feature-grid {gap:12px}
  .ps-page .ps-feature-grid article {padding:19px;border-radius:10px}
  .ps-page .ps-feature-grid h3 {font-size:17px;line-height:1.45;margin:5px 0 8px}
  .ps-page .ps-feature-grid p,.ps-page .ps-audience-cards p {font-size:13px;line-height:1.75}
  .ps-page .ps-feature-icon {margin-bottom:12px}
  .ps-page .ps-stitch-section {padding:24px 18px;margin-block:8px;gap:18px}
  .ps-page .ps-stitch-copy h2 {font-size:25px}
  .ps-page .ps-workflow {gap:12px}
  .ps-page .ps-workflow li {padding-block:14px;gap:14px}
  .ps-page .ps-workflow li p,.ps-page .ps-faq details p {font-size:13px;line-height:1.8}
  .ps-page .ps-closing {padding:24px 20px;margin-bottom:36px;gap:18px}
  .ps-page .ps-closing h2 {font-size:23px}
  .ps-page .ps-button {min-height:44px;font-size:13px}
  /* The newer Threads page follows the same compact mobile proportions. */
  body[data-brand] .header {height:64px}
  body[data-brand] .hero {padding-block:26px 30px;gap:22px}
  body[data-brand] h1 {font-size:clamp(30px,8.2vw,39px);line-height:1.25;letter-spacing:-1.5px;margin:16px 0}
  body[data-brand] .lead {font-size:14px;line-height:1.8}
  body[data-brand] .actions {margin-block:20px 12px}
  body[data-brand] .product-art {min-height:210px;border-radius:14px}
  body[data-brand] .box {width:150px;height:180px;padding:17px;box-shadow:10px 10px 0 #0000000b}
  body[data-brand] .box strong {font-size:19px}
  body[data-brand] .box .at {font-size:47px}
  body[data-brand] .box small {font-size:8px}
  body[data-brand] .tag {right:12px;bottom:16px;padding:8px 12px;font-size:11px}
  body[data-brand] section.content {padding-block:36px}
  body[data-brand] .section-head {margin-bottom:18px}
  body[data-brand] .facts {gap:12px;padding-block:18px}
  body[data-brand] .tabs {flex-wrap:nowrap;overflow-x:auto;padding:8px;gap:4px}
  body[data-brand] .tabs button {flex:0 0 auto;min-height:44px;white-space:nowrap;padding:10px 13px}
  body[data-brand] .pricing {gap:12px}
  body[data-brand] .price-card {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:18px;border-radius:12px}
  body[data-brand] .price-card .pill {grid-column:1;justify-self:start;font-size:10px;padding:2px 8px}
  body[data-brand] .price-card h3 {grid-column:1;grid-row:2;margin:0;font-size:18px}
  body[data-brand] .price-card .price {grid-column:2;grid-row:1 / span 2;align-self:center;text-align:right;font-size:28px;line-height:1.3;margin:0;white-space:nowrap}
  body[data-brand] .price small {display:block;font-size:11px}
  body[data-brand] .price-card p {grid-column:1 / -1;font-size:13px;line-height:1.7;margin:2px 0 4px}
  body[data-brand] .price-card .btn {grid-column:1 / -1;margin:0;min-height:44px;padding:10px 14px;font-size:13px}
  body[data-brand] .end {padding:24px;margin-block:30px}
  /* Checkout fields remain comfortably readable when a mobile keyboard opens. */
  .bas-auth input,.auth-page input,.checkout-page input,.checkout-page textarea {font-size:16px}
}
@media(max-width:620px) {
  .store-picks {gap:8px;margin-block:16px}
  .store-picks .store-pick {padding:12px 10px;min-height:108px;gap:6px}
  .store-pick>strong {font-size:12px;line-height:1.4}
  .store-pick>span:not(.store-badge) {font-size:10px;line-height:1.5}
  .bas-shelf-art {height:140px;max-width:320px}
  .bas-shelf-description,.store-hero-copy>p:not(.store-eyebrow) {font-size:13px;line-height:1.7}
  .bas-program-shortcuts,.store-shortcuts {padding-block:12px}
  .bas-catalog,.catalog {padding-top:18px}
  .bas-product-art {aspect-ratio:1.06}
  .bas-product-desc,.product-description {font-size:12px;line-height:1.65}
  .bas-product-type,.product-meta {font-size:10px}
  .bas-plan-toggle button,.plan-toggle button {min-height:40px;font-size:11px}
  .bas-categories button,.category-tab {min-height:44px;font-size:12px}
  .ps-page .ps-feature-grid {grid-template-columns:1fr}
  .ps-page .ps-feature-grid article {display:grid;grid-template-columns:32px minmax(0,1fr);gap:0 12px;padding:17px}
  .ps-page .ps-feature-icon {grid-column:1;grid-row:1 / 4;width:32px;height:32px;margin:0}
  .ps-page .ps-feature-label,.ps-page .ps-feature-grid h3,.ps-page .ps-feature-grid p {grid-column:2}
  .ps-page .ps-feature-label {font-size:10px}
  .ps-page .ps-value-strip {padding-block:14px}
  .ps-page .ps-value-strip>span {padding-inline:5px;font-size:10px}
  .ps-page .ps-value-strip strong {font-size:11px}
}
@media(max-width:359px) {
  .ps-page .ps-plan-grid article,body[data-brand] .price-card {padding:15px;column-gap:8px}
  .ps-page .ps-price {font-size:28px}
  .ps-page .ps-plan-grid h3 {font-size:14px}
  body[data-brand] .price-card .price {font-size:25px}
  .ps-page .ps-hero .ps-actions {display:grid;grid-template-columns:1fr}
  .store-pick>strong {font-size:11px}
}
@media (hover:none) {
  .art-link:hover .product-box,.store-pick:hover,.screen-preview:hover {transform:none!important}
  .product-card:hover .product-art {box-shadow:none}
}
@media(max-width:620px) {
  /* Keep newly added programs on one clear, swipeable shortcut row. */
  .bas-program-shortcuts,.store-shortcuts {display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#c4bdcc transparent;scroll-padding-inline:4px}
  .bas-program-shortcuts>a,.store-shortcuts>a {flex:0 0 58px;min-width:0;min-height:70px;gap:6px}
  .bas-program-shortcuts strong,.store-shortcuts>a {font-size:11px;line-height:1.4;overflow-wrap:anywhere}
  .store-picks .store-pick {min-height:88px;grid-template-columns:minmax(0,1fr) auto;gap:7px 4px}
  .store-pick>strong {grid-column:1;grid-row:2;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
  .store-pick>span:not(.store-badge) {display:none}
  .store-pick>svg {grid-column:2;grid-row:2;align-self:center;width:12px;height:12px;margin:0}
  .hero-shelf {height:145px}
  .hero-shelf .shelf-box-0 {width:126px;height:148px;top:6px}
  .hero-shelf .shelf-box-1 {width:150px;height:168px;top:-9px}
  .hero-shelf .shelf-box-2 {width:96px;height:122px;top:36px;right:0}
}

/* Follow-up mobile audit: readable controls and generous hit areas. */
@media (max-width:800px), (pointer:coarse) {
  body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),body select,body textarea {font-size:16px!important}
  #storeSort,#sort-select {min-height:44px;min-width:118px;max-width:none;padding:10px 18px 10px 2px}
  .category-tab,.bas-categories button {min-width:44px;padding-inline:8px}
  body[data-brand] .header nav a {display:inline-flex;align-items:center;min-height:44px}
  [data-action="clear-search"] {min-height:44px}
  #referralToggle {min-height:44px;padding-block:10px!important}
  .footer .footer-links {row-gap:0}
  .footer .footer-links a {display:flex;align-items:center;min-height:44px}
  .ps-breadcrumb a,.bas-detail-crumbs a,.breadcrumbs a {display:inline-flex;align-items:center;justify-content:center;min-height:36px;min-width:28px}
  main details>summary,#subscribeModal summary {min-height:44px;align-content:center}
  .ps-page .ps-faq details {padding:0}
  .ps-page .ps-faq summary {min-height:48px;align-items:center;padding:14px 0}
  .ps-page .ps-faq details p {margin-top:0;padding-bottom:18px}
  .ps-page #photo-cleanup {scroll-margin-top:64px}
  .member-section-heading button.text-link {min-height:44px}
  #ps-close,#ps-zoom,.screen-dialog-close {min-width:44px;min-height:44px}
}
/* A phone rotated to landscape should keep the same stable scrolling header. */
@media (max-height:500px) and (pointer:coarse) {
  html {scroll-behavior:auto;scroll-padding-top:0}
  .ps-page [id],.ps-page #photo-cleanup {scroll-margin-top:80px}
  #storeHeader.bas-header,body>.header,body>header {position:relative!important;top:auto!important}
  .bas-detail .pd2-tabs-section,.product-landing .landing-nav,.ps-page .ps-detail-nav {position:sticky;top:0;z-index:40;background:#faf8f5}
}
/* Screenshot viewers keep their controls visible while the original image pans. */
.screen-dialog[open] {display:flex;flex-direction:column;overflow:hidden}
.screen-dialog .screen-dialog-header {display:grid;grid-template-columns:minmax(0,1fr) auto;flex-shrink:0;gap:8px 12px}
.screen-dialog .screen-dialog-close {grid-column:2;grid-row:1}
.screen-dialog-zoom {grid-column:1 / -1;justify-self:start;min-height:40px;padding:8px 12px;border:1px solid #dcd4e4;border-radius:6px;background:#f7f4fa;color:#4b3a5e;font-family:inherit;font-size:13px;font-weight:600;line-height:1.4;cursor:pointer}
.screen-dialog .screen-dialog-image {min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom}
.screen-dialog[data-zoomed=true] .screen-dialog-image>img {width:auto;max-width:none;min-width:100%}

@media(max-width:620px) {
  /* The mobile image is anchored at 50%/50%; touch and focus must retain its centering. */
  .bas-product-art>.bas-package,
  .bas-product:hover .bas-product-art>.bas-package,
  .bas-product-link:focus-visible .bas-package {
    transform:translate(-50%,-50%);
    transition:none;
  }
}