/* Phone layouts: readable controls, full-width sheets and reachable actions. */
.mobile-nav,.mobile-steps,.mobile-design-actions{display:none}
@media(max-width:760px){
 html{scroll-padding-top:84px;-webkit-text-size-adjust:100%}
 body{font-size:16px;line-height:1.55}
 .wrap{width:calc(100% - 32px)}
 .announcement{font-size:11px;padding:7px 12px;letter-spacing:0}
 .header{height:72px;padding:0 16px;gap:12px;background:var(--paper)}
 .brand{gap:8px;min-width:0}.brand strong{font-size:24px}.brand small{font-size:8px;letter-spacing:1px}
 .brand img{width:32px;height:32px}.header .brand small{max-width:180px}
 .bag-button{min-height:44px;padding:8px 12px;border-radius:24px;background:#fffdf8}
 .bag-button svg{width:20px;height:22px}.bag-button b{font-size:12px;min-width:22px;height:22px}
 .button{font-size:15px;min-height:50px;padding:13px 18px;border-radius:8px;gap:12px}
 .button:hover{transform:none}
 input:not([type=range]):not([type=checkbox]):not([type=file]),textarea,select,.detail-copy select,.dimension-fields input{font-size:16px;min-height:48px;padding:12px;border-radius:8px}
 label,.controls-panel label,.access-card label{font-size:14px;line-height:1.4;margin-bottom:8px}
 .eyebrow{font-size:10px;letter-spacing:1.5px;margin-bottom:12px}
 .small,.contact-state,.material-spec,.material-spec span{font-size:13px;line-height:1.6}
 .material-spec{padding:12px 14px;border-radius:8px}
 .text-link,.designer-link{font-size:14px;min-height:44px;display:flex;align-items:center}
 .shop-page{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
 .shop-page>.header{position:sticky;top:0;z-index:4;border-bottom:1px solid var(--line)}
 .hero{min-height:0;gap:24px;padding:26px 0 28px}
 .hero-copy{padding:0}.hero h1{font-size:36px;line-height:1.12;letter-spacing:-1.2px;margin-bottom:16px}
 .hero-copy>p{font-size:16px;line-height:1.6;max-width:none;margin-bottom:16px}
 .material-note{font-size:12px;margin:14px 0}
 .hero-actions{display:grid;grid-template-columns:1fr;margin-top:18px;gap:10px}
 .hero-actions .button,.hero-actions .text-link{justify-content:space-between;width:100%;font-size:15px;padding:13px 18px;border:1px solid var(--green);border-radius:8px;min-height:50px}
 .hero-visual{margin:0}.hero-visual>img{height:200px;aspect-ratio:auto;object-position:50% 56%;border-radius:12px}
 .photo-tag,.photo-caption{display:none}
 .values{display:flex;justify-content:center;padding:15px 0;gap:10px;font-size:12px}.values span:not(:first-child){display:none}
 .collection{padding:32px 0 40px}.section-heading{margin-bottom:20px}.section-heading h2{font-size:30px;line-height:1.2;letter-spacing:-.8px}.section-heading h2 em{font-size:25px}
 .section-heading p{font-size:14px;margin:14px 0 0;line-height:1.6}
 .catalog-controls{gap:14px;margin:20px 0 14px}.filters{gap:8px;margin-right:-16px;padding-right:16px;padding-bottom:2px;scrollbar-width:none}.filters::-webkit-scrollbar{display:none}
 .filters button{min-height:44px;padding:9px 16px;font-size:14px;border-radius:24px}
 .search{border:1px solid #c6ccbe;background:#fffdf8;border-radius:10px;padding:0 12px;margin:0;gap:8px}
 .search svg{width:20px;height:20px;flex-shrink:0}.search input{border:0;background:transparent;min-width:0;min-height:48px;padding:11px 0}
 .catalog-note{font-size:12px;line-height:1.5;margin-bottom:18px}
 .product-grid{grid-template-columns:minmax(0,1fr);gap:14px}
 .product{display:grid;grid-template-columns:108px minmax(0,1fr);grid-template-areas:'photo meta' 'photo title' 'photo desc' 'bottom bottom';column-gap:14px;background:#fffdf8;border:1px solid var(--line);border-radius:12px;padding:14px;align-items:start}
 .product-image{grid-area:photo;border-radius:8px;align-self:start}.product-badge,.product-arrow{display:none}
 .product-meta{grid-area:meta;margin:0 0 4px}.product-category{font-size:10px;letter-spacing:1px}
 .product h3{grid-area:title;font-size:17px;line-height:1.3;margin:0 0 6px;min-height:0}
 .product-desc{grid-area:desc;font-size:13px;line-height:1.45;min-height:0;margin:0;color:#626d5a}
 .product-material{display:none}.product-bottom{grid-area:bottom;margin-top:14px;padding-top:12px;font-size:13px;gap:12px}
 .add-product{font-size:14px;min-height:44px;padding:9px 14px;background:var(--green);color:#fff;border-radius:7px;gap:12px}.add-product:hover{color:#fff}
 .custom-inner{padding-block:32px;gap:24px}.custom-art{display:none}.custom-copy h2{font-size:33px}.custom-copy>p{font-size:15px;line-height:1.65}.custom-copy form>small{font-size:12px}.quantity-field{width:85px}
 .how{padding:36px 0}.steps h3{font-size:23px}.steps p{font-size:14px;line-height:1.65}.faq{padding:0 0 36px;gap:20px}.faq h2{font-size:30px}summary{font-size:15px;min-height:54px}details p{font-size:14px;line-height:1.6}
 .closing{border-radius:12px;padding:25px}.closing h2{font-size:30px}.closing>span{display:none}
 footer{padding-top:30px;gap:18px}footer>p,footer>a:last-of-type,.workshop-access{font-size:13px}.footer-bottom{font-size:11px;flex-wrap:wrap;gap:5px}#whatsapp-contact{font-size:14px;min-height:44px;display:flex;align-items:center}
 .mobile-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:fixed;z-index:6;inset:auto 0 0;background:#faf8f3f5;border-top:1px solid #cbd1c2;box-shadow:0 -3px 20px #243b2510;padding:7px 12px calc(7px + env(safe-area-inset-bottom));backdrop-filter:blur(12px)}
 .mobile-nav a,.mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;font-size:12px;background:transparent;border:0;color:#53674c;border-radius:8px;position:relative}
 .mobile-nav svg{width:22px;height:22px}.mobile-nav .nav-order{background:var(--green);color:white}.mobile-nav b{position:absolute;top:2px;right:calc(50% - 31px);font-size:10px;min-width:17px;height:17px;border-radius:20px;background:#f1d8b5;color:#30462f}
 body:has(dialog[open]) .mobile-nav{visibility:hidden}
 .product-dialog,.cart-dialog,.send-dialog{position:fixed;inset:0;margin:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0;overscroll-behavior:contain;padding:0;scroll-padding-top:66px;-webkit-overflow-scrolling:touch}
 .close-dialog{width:44px;height:44px;font-size:29px;box-shadow:0 2px 12px #263b2520;flex-shrink:0}
 .product-dialog>.close-dialog,.send-dialog>.close-dialog{position:fixed;top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));background:#fffdf8}
 .product-detail-grid{display:block}.product-detail-grid>.product-photo{width:100%;height:210px;min-height:0;max-height:210px;aspect-ratio:auto}
 .detail-copy{padding:24px 20px calc(100px + env(safe-area-inset-bottom))}.detail-copy h2{font-size:30px;margin:10px 0 14px;padding-right:24px;line-height:1.2}.detail-copy p{font-size:15px;line-height:1.6}.detail-copy label{margin-top:19px}.detail-copy small{font-size:12px}.detail-copy .material-spec{font-size:13px}
 .detail-copy button[type=submit]{position:fixed;z-index:3;bottom:0;left:0;margin:0;width:100%;min-height:calc(62px + env(safe-area-inset-bottom));padding:16px 20px calc(16px + env(safe-area-inset-bottom));border-radius:0;font-size:16px;box-shadow:0 -4px 18px #30473118}
 .name-preview{padding:20px 16px 14px}.name-preview canvas{height:180px}.name-preview figcaption{margin-top:4px;font-size:13px}.name-preview small{font-size:12px}.name-preview .eyebrow{font-size:10px;padding-right:30px}
 .cart-dialog{padding:0 20px calc(28px + env(safe-area-inset-bottom))}.cart-head{position:sticky;top:0;z-index:2;background:var(--paper);padding:18px 0;align-items:center}.cart-head .eyebrow{font-size:10px}.cart-head h2{font-size:30px}
 .cart-item{grid-template-columns:70px minmax(0,1fr);gap:14px;padding:18px 0}.cart-item h3{font-size:16px;line-height:1.35}.cart-item p{font-size:13px;line-height:1.5}.cart-row{gap:8px}.qty-control button{width:42px;height:44px;font-size:20px}.qty-control span{font-size:15px;min-width:26px}.remove-item{font-size:13px;min-height:44px;padding:7px}
 #cart-form>label{margin-top:20px}.quote-summary{font-size:16px}.contact-state{border-radius:8px;margin:16px 0}.download-link{font-size:14px;min-height:44px}
 #toast{bottom:calc(84px + env(safe-area-inset-bottom));font-size:14px;width:calc(100% - 32px);padding:14px 18px;border-radius:10px}
 .send-dialog{padding:70px 22px calc(28px + env(safe-area-inset-bottom))}.send-dialog h2{font-size:32px}.send-dialog .eyebrow{font-size:10px}.send-dialog input{margin-bottom:20px}#submit-order p,#send-success p,.send-dialog .small{font-size:15px}#send-success .small,#send-success .whatsapp-send-help{font-size:14px}
 /* Designer: one editable step at a time, with a preview that does not cover it. */
 .designer-page{padding-bottom:calc(82px + env(safe-area-inset-bottom))}.designer-page .header{height:72px}.back-shop{font-size:13px;white-space:nowrap}.designer-page .brand small{display:none}
 .designer-wrap{width:calc(100% - 32px)}.designer-intro{padding:22px 0}.designer-intro h1{font-size:33px;line-height:1.15}.designer-intro p{font-size:15px}.designer-intro .eyebrow{font-size:10px}
 .designer-layout{display:flex;flex-direction:column;gap:16px}.preview-column{display:contents;position:static}.preview-panel{position:static;order:-1;width:100%;box-shadow:none;border-radius:12px}
 .preview-toolbar{padding:8px 12px;gap:8px}.preview-tabs button{min-height:44px;font-size:13px;padding:9px 12px}#fit-view{width:44px;height:44px}
 .design-preview{height:220px;min-height:220px;padding:16px}.preview-caption{font-size:12px;padding:10px 14px;gap:10px;flex-wrap:wrap}.layer-legend{display:none}.orbit-hint{font-size:12px;margin:8px 10px}.lid-view-controls{padding:8px 10px 0;gap:6px}.lid-view-controls .button{min-height:44px;font-size:12px;padding:9px 12px}
 .controls-panel{width:100%;border-radius:12px;overflow:clip}.controls-panel section{padding:20px}.control-heading{margin-bottom:18px}.control-heading h2{font-size:18px}.control-heading>span{font-size:24px}.type-picker button{font-size:14px;min-height:78px;gap:6px}.controls-panel label{margin-top:18px}.controls-panel label span{font-size:12px}.dimension-fields{gap:10px}.dimension-fields label{font-size:13px}
 .controls-panel input,.controls-panel select,.controls-panel textarea{scroll-margin-top:80px;scroll-margin-bottom:100px}.controls-panel .field-hint{font-size:13px}.fixed-material strong{font-size:13px}.fixed-material small{font-size:11px}.fixed-tag{font-size:9px}.range-line label,.range-line output{font-size:13px}.controls-panel input[type=range]{height:44px;min-height:44px}
 .upload-box{min-height:140px;border-radius:8px}.upload-box strong{font-size:16px}.upload-box small{font-size:13px}.logo-file-row{font-size:13px}.logo-file-row button,.project-actions button{min-height:44px;font-size:13px}.project-actions{padding:12px 20px;align-items:center}.project-actions .field-hint{font-size:12px;max-width:195px}
 .mobile-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:8px;background:#eef0e7;border-bottom:1px solid var(--line);scroll-margin-top:20px}
 .mobile-steps button{min-height:48px;border:0;border-radius:8px;font-size:13px;background:transparent;padding:9px 5px;color:#596951}.mobile-steps button[aria-current=step]{background:var(--green);color:#fff}
 .mobile-ready .controls-panel section:not(.current-step){display:none}
 .mobile-design-actions{display:flex;position:fixed;z-index:5;bottom:0;left:0;right:0;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -3px 18px #243b2510}
 .mobile-design-actions button{min-height:48px;font-size:14px;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:#fffdf8}.mobile-design-actions .primary{flex:1;background:var(--green);color:#fff;border-color:var(--green)}.mobile-design-actions .step-back{width:44px;padding:8px;font-size:22px}
 .designer-page:has(dialog[open]) .mobile-design-actions{visibility:hidden}
 .design-summary{width:100%;margin-top:0;padding:16px;gap:14px;display:flex;flex-wrap:wrap}.design-summary small{font-size:10px}.design-summary strong{font-size:14px}.download-panel{width:100%;margin:0;padding:20px;border-radius:10px}.download-panel h2{font-size:28px}.download-panel p,.download-panel p.production-note{font-size:13px}.form-error{font-size:14px}.designer-help{margin-top:26px}.designer-help p{font-size:14px}
 .workshop{width:calc(100% - 32px);margin:20px auto 40px}.workshop-heading p{font-size:15px}.access-card{padding:22px 18px}.access-card input{font-size:16px}.access-card p{font-size:15px}.access-card small{font-size:13px}.access-card .button{width:100%}.account-card>summary{font-size:17px;line-height:1.4}.order{padding:18px;border-radius:10px}.order-top h2{font-size:19px;overflow-wrap:anywhere}.order-top span{font-size:12px}.order-meta{gap:7px}.order-meta span{font-size:13px}.order p{font-size:15px}.order-actions{display:grid;grid-template-columns:1fr;gap:10px}.order small{font-size:12px}.work-controls{grid-template-columns:1fr;gap:12px;padding:14px}.work-controls label{font-size:14px}.work-controls select{font-size:16px;min-height:48px}.work-controls>.button{grid-column:auto;font-size:14px;min-height:48px}.work-badge{font-size:13px}.workshop-note{font-size:14px}
}
@media(max-width:350px){.product{grid-template-columns:88px minmax(0,1fr);padding:12px;column-gap:12px}.product h3{font-size:16px}.product-bottom{font-size:12px}.hero h1{font-size:32px}.brand small{font-size:7px}.dimension-fields{gap:7px}.dimension-fields input{padding:10px 7px}.cart-dialog{padding-inline:14px}.cart-item{grid-template-columns:56px minmax(0,1fr);gap:10px}.qty-control button{width:36px}.remove-item{padding-inline:0}.detail-copy{padding-inline:16px}}

.frame-preview canvas{height:380px}@media(max-width:760px){.frame-preview canvas{height:250px}}

/* The piece stays above the current editing step on phones. */
@media(max-width:760px){
 .designer-page .preview-panel{position:sticky;top:0;z-index:3;box-shadow:0 4px 14px #283c261a}
 .designer-page .design-preview{height:clamp(100px,20svh,180px);min-height:100px;padding:10px}
 .designer-page .orbit-hint{display:none}
 .designer-page .preview-toolbar{padding:4px 10px}
 .designer-page .lid-view-controls{padding:4px 8px 0}
 .designer-page .preview-caption{padding:6px 10px;font-size:11px}
 .designer-page .mobile-steps,.designer-page .controls-panel input,.designer-page .controls-panel select,.designer-page .controls-panel textarea{scroll-margin-top:calc(var(--pinned-preview-height,300px) + 12px)}
}

.header .site-switch{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 12px;border:1px solid #d8b89f;border-radius:8px;background:#f7e9de;color:#744b32;font-size:12px;font-weight:600;white-space:nowrap}.header .site-switch:hover{background:#efd9c8}.header-links{display:flex;align-items:center;gap:18px}.header-links>a{white-space:nowrap}@media(max-width:760px){.header .site-switch{font-size:11px;padding:7px 9px;min-height:36px}.header-links{flex-direction:column;align-items:flex-end;gap:2px}.header-links>a:not(.site-switch){font-size:10px}.shop-page>.header{gap:8px}.shop-page>.header .brand{margin-right:auto}.designer-page .header:has(.header-links){min-height:76px}}@media(max-width:360px){.shop-page>.header .brand strong{font-size:21px}.shop-page>.header .brand small{font-size:6px}.shop-page>.header .brand img{width:26px}.shop-page>.header .site-switch{font-size:10px;padding:6px}.shop-page>.header .bag-button{padding:7px}}
