/* A straightforward shop: real photography, clear product information, restrained branding. */
.storefront { background:#fff; color:#203c32; }
.store-notice { background:#edf3ee; border-bottom:1px solid #dce6de; text-align:center; padding:9px 16px; font-size:12px; color:#425c4e; }
.storefront .site-header { max-width:1240px; height:94px; padding:12px 36px; background:#fff; backdrop-filter:none; gap:20px; }
.storefront .site-header .brand { font-size:18px; letter-spacing:1.8px; }
.storefront .site-header .brand-logo { width:52px; height:52px; }
.storefront .site-header nav { gap:30px; }
.storefront .site-header nav a { font-size:14px; }
.storefront .bag-btn { font-size:14px; min-height:44px; }
.catalog-hero { max-width:1240px; margin:auto; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:64px; padding:48px 36px 52px; }
.store-kicker { color:#0f6e56; letter-spacing:1.8px; font-size:11px; font-weight:600; }
.catalog-intro h1 { font-family:DM,Arial,sans-serif; font-size:clamp(36px,4.1vw,54px); line-height:1.13; font-weight:600; letter-spacing:-1.6px; margin:16px 0 22px; }
.intro-copy { font-size:17px; line-height:1.75; max-width:480px; color:#53645a; }
.intro-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:28px; }
.storefront .button { border-radius:6px; min-height:48px; padding:14px 20px; font-size:14px; justify-content:center; gap:10px; box-shadow:none; }
.storefront .button:hover { transform:none; }
.plain-button { background:#fff; border:1px solid #afc4b5; border-radius:6px; min-height:48px; padding:12px 18px; font-size:14px; }
.plain-button:hover { background:#f4f7f3; }
.intro-note { font-size:12px; margin-top:18px; color:#596c5e; }
.example-portrait { margin:0; background:#f3f4ef; border-radius:8px; overflow:hidden; border:1px solid #e0e5dd; }
.example-portrait > img { display:block; width:100%; height:340px; object-fit:cover; object-position:50% 43%; }
.example-portrait figcaption { padding:14px 18px; display:flex; flex-direction:column; gap:3px; font-size:12px; color:#53645a; }
.example-portrait figcaption > span:first-child { font-size:14px; color:#203c32; font-weight:600; }
.catalog-section { max-width:1240px; margin:auto; padding:44px 36px; border-top:1px solid #e1e7df; }
.catalog-section h2 { font:600 28px/1.25 DM,Arial,sans-serif; letter-spacing:-.6px; }
.catalog-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:28px; margin-bottom:20px; }
.catalog-heading > div > p { font-size:14px; margin-top:8px; }
.catalog-heading .filters { margin:0; gap:6px; }
.catalog-heading .filters button { border-radius:6px; padding:10px 14px; font-size:13px; }
.catalog-section .collection-status { margin:0 0 16px; }
.catalog-products { gap:24px; }
.catalog-product { min-width:0; display:flex; flex-direction:column; }
.catalog-product-image { border:1px solid #e0e7df; padding:0; width:100%; border-radius:8px; background:#eef3ed; overflow:hidden; }
.catalog-product-image > img { display:block; width:100%; height:auto; aspect-ratio:1.14; object-fit:cover; }
.catalog-product-image:hover { border-color:#0f6e56; }
.catalog-product-title { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-top:18px; }
.catalog-product-title h3 { font-size:17px; font-weight:600; line-height:1.4; }
.catalog-product-title > span { font-size:17px; font-weight:600; white-space:nowrap; }
.catalog-product > p { font-size:14px; line-height:1.6; }
.catalog-product .catalog-size { margin:4px 0 8px; font-size:12px; color:#637164; }
.product-personalize { display:flex; justify-content:space-between; align-items:center; background:#fff; border:1px solid #b3c9b9; border-radius:6px; min-height:46px; padding:10px 14px; margin-top:16px; color:#0f6e56; font-size:14px; font-weight:600; }
.product-personalize:hover { background:#f0f6ef; }
.catalog-disclosure { font-size:12px; color:#53645a; margin-top:22px; line-height:1.7; }
.simple-how ol { list-style:decimal; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px; padding-left:24px; margin:28px 0 6px; }
.simple-how li { padding-left:5px; color:#0f6e56; }
.simple-how h3 { font-size:15px; line-height:1.5; color:#203c32; margin-bottom:8px; font-weight:600; }
.simple-how p { font-size:14px; max-width:300px; }
.store-help { display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; }
.store-help > div > p { margin:16px 0; font-size:14px; }
.plain-link { min-height:44px; display:inline-flex; align-items:center; color:#0f6e56; text-decoration:underline; font-size:13px; }
.store-help details { border-bottom:1px solid #dfe7dd; }
.store-help summary { padding:16px 20px 16px 0; min-height:48px; cursor:pointer; font-size:14px; font-weight:500; line-height:1.5; }
.store-help details p { font-size:13px; padding:0 18px 18px 0; line-height:1.8; }
.storefront .site-footer { max-width:1240px; padding:30px 36px; border-top:1px solid #e1e7df; }
.site-footer .brand { font-size:14px; letter-spacing:1.5px; }
.site-footer .brand-logo { width:42px; height:42px; }
.site-footer > p, .site-footer > span { font-size:12px; }
/* Your style: photo editing first, then one group for design and text. */
.photo-details { background:white; padding:0; border-radius:8px; }
.photo-details > summary { padding:16px; min-height:50px; font-size:15px; }
.photo-details[open] > summary { border-bottom:1px solid #dce5dc; }
.photo-tool-body { padding:0 16px 16px; }
.photo-tool-body h4, .style-settings h4 { font-size:14px; font-weight:600; margin:16px 0 10px; }
.photo-tool-body .photo-actions, .background-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
.photo-tool-body .small-btn { margin:0; padding:10px; line-height:1.45; font-size:12px; }
.background-actions #remove-bg-ai { background:#0f6e56; border-color:#0f6e56; color:white; }
.background-actions #remove-bg-ai:disabled { opacity:.5; }
.text-button { min-height:44px; border:0; background:none; font:inherit; color:#0f6e56; font-size:12px; padding:9px 0; text-align:left; text-decoration:underline; }
.advanced-background { border-top:1px solid #dce5dc; margin:4px 0 12px; }
.advanced-background summary { min-height:44px; display:flex; align-items:center; font-size:12px; cursor:pointer; }
.advanced-background > p { margin:0 0 12px; }
.advanced-background label { display:flex; justify-content:space-between; gap:12px; }
.photo-tool-body .placement-controls { padding:0; border:0; border-radius:0; background:none; margin:14px 0 0; border-top:1px solid #dce5dc; }
.placement-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.control-label { display:block; font-size:12px; font-weight:600; margin:4px 0 8px; }
.placement-grid .placement-buttons { gap:6px; flex-wrap:nowrap; }
.placement-grid .placement-buttons .small-btn { min-width:44px; min-height:44px; padding:8px; font-size:17px; }
.placement-grid .placement-buttons output { min-width:30px; font-size:12px; }
.style-settings { border:1px solid #dce5dc; border-radius:8px; background:white; padding:0 16px 16px; display:flex; flex-direction:column; gap:9px; }
.style-settings .caption-picker { padding:0; border:0; border-top:1px solid #dce5dc; border-radius:0; background:none; margin-top:10px; padding-top:12px; }
.caption-ideas { display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid #e0e8dd; border-radius:6px; background:#f5f8f2; margin-top:4px; }
.caption-ideas label { margin:0; }
.style-settings .caption-picker .caption-clear { font-size:12px; min-height:44px; }
#customizer .editor-step > h3 { font-family:DM,Arial,sans-serif; font-size:22px; font-weight:600; line-height:1.35; }
#customizer .dialog-header h2 { font-family:DM,Arial,sans-serif; font-size:25px; font-weight:600; letter-spacing:-.6px; }
#photo-tool-status:empty, #caption-status:empty { display:none; }
@media(max-width:1000px) {
  .catalog-hero { gap:32px; }
  .catalog-heading { align-items:flex-start; flex-direction:column; gap:18px; }
  .catalog-intro h1 { font-size:40px; }
  .example-portrait > img { height:320px; }
  .catalog-products { gap:18px; }
  .catalog-product-title h3 { font-size:15px; }
}
@media(max-width:720px) {
  html { scroll-padding-top:124px; }
  .storefront .site-header { height:auto; min-height:100px; padding:10px 20px 0; gap:4px 10px; }
  .storefront .site-header .brand { font-size:14px; letter-spacing:1.5px; }
  .storefront .site-header .brand-logo { width:40px; height:40px; }
  .storefront .site-header nav { gap:12px; }
  .storefront .site-header nav a { font-size:13px; }
  .store-notice { font-size:11px; padding:8px 14px; }
  .catalog-hero { grid-template-columns:1fr; gap:26px; padding:28px 20px 32px; }
  .catalog-intro h1 { font-size:clamp(31px,8.8vw,40px); letter-spacing:-1px; margin:12px 0 16px; }
  .intro-copy { font-size:15px; }
  .intro-actions { gap:10px; margin-top:22px; }
  .intro-actions > * { width:100%; }
  .example-portrait > img { height:290px; }
  .example-portrait figcaption { padding:12px 14px; }
  .catalog-section { padding:32px 20px; }
  .catalog-section h2 { font-size:25px; }
  .catalog-heading .filters { flex-wrap:wrap; }
  .catalog-heading .filters button { font-size:12px; padding:10px 12px; }
  .catalog-products { grid-template-columns:1fr; gap:30px; }
  .catalog-product-image > img { aspect-ratio:1.25; object-fit:contain; max-height:330px; }
  .catalog-product-title h3 { font-size:17px; }
  .simple-how ol { grid-template-columns:1fr; gap:22px; margin-top:22px; }
  .store-help { grid-template-columns:1fr; gap:18px; }
  .storefront .site-footer { padding:24px 20px; gap:14px; }
  .site-footer > span { font-size:11px; }
  .photo-tool-body { padding:0 12px 12px; }
  .photo-details > summary { padding:14px 12px; }
  .style-settings { padding-inline:12px; }
  #customizer .dialog-header h2 { font-size:21px; }
}
@media(max-width:360px) {
  .catalog-hero, .catalog-section { padding-inline:16px; }
  .photo-tool-body .photo-actions, .background-actions { grid-template-columns:1fr; }
  .placement-grid { grid-template-columns:1fr; }
  .placement-grid > div { display:flex; align-items:center; justify-content:space-between; gap:8px; }
}
.small-brand { display:flex; align-items:center; gap:8px; color:#0f6e56; font-size:10px; font-weight:700; letter-spacing:1.1px; margin-bottom:8px; }
.small-brand img,.brand-included img { object-fit:contain; flex-shrink:0; }
.brand-included { display:flex; align-items:center; gap:8px; font-size:12px; line-height:1.5; color:#416255; margin:12px 0; }
.storefront .print .product-signature span { font-size:5.5px; letter-spacing:.5px; line-height:1.4; }
.suggestions-section { display:grid; grid-template-columns:1fr 1fr; gap:60px; background:#edf3ed; border-block:1px solid #dce5dc; scroll-margin-top:110px; }
.suggestions-section h2 { margin:12px 0; }
.suggestions-section > div > p { max-width:350px; font-size:15px; line-height:1.6; color:#4b6054; }
#suggestion-form { min-width:0; }
#suggestion-form label { display:block; margin:0 0 8px; font-size:13px; font-weight:600; }
#suggestion-form select { margin-bottom:16px; }
#suggestion-form textarea { display:block; box-sizing:border-box; width:100%; min-height:108px; resize:vertical; border:1px solid #b4c6b8; border-radius:6px; background:#fffef8; color:#173d31; padding:12px; font:inherit; font-size:16px; line-height:1.5; }
#suggestion-form textarea:focus-visible { outline:2px solid #0f6e56; outline-offset:2px; }
.suggestion-privacy { font-size:12px; color:#4b6054; line-height:1.5; margin:10px 0 16px; }
#suggestion-status { font-size:13px; line-height:1.5; margin:12px 0 0; color:#173d31; min-height:20px; }
.site-footer .suggestion-shortcut { display:inline-flex; align-items:center; min-height:44px; font-size:13px; text-underline-offset:3px; color:#0f6e56; }
@media(max-width:720px) { .suggestions-section { grid-template-columns:1fr; gap:22px; } #suggestion-form .button { width:100%; } }
.store-promise { padding:36px; background:#edf3ed; border:1px solid #dce5dc; border-radius:8px; }
.store-promise > img { width:78px; height:78px; object-fit:contain; margin-bottom:20px; }
.store-promise h2 { font-size:28px; line-height:1.25; font-weight:500; max-width:280px; }
.store-promise p { color:#52665a; font-size:14px; margin:16px 0; }
.supplier-proof { border-top:1px solid #dce5dc; margin-top:18px; padding-top:18px; }
#proof-images figure { margin:16px 0; }
#proof-images img { display:block; max-width:100%; height:auto; max-height:360px; object-fit:contain; background:repeating-conic-gradient(#e7ebe5 0% 25%,#fff 0% 50%) 50% / 16px 16px; border:1px solid #dce5dc; border-radius:6px; }
#proof-images figcaption { font-size:11px; line-height:1.5; margin-top:6px; color:#53645a; }
.shipping-quote { padding:14px; border:1px solid #cfddd1; border-radius:6px; margin:12px 0; }
.shipping-quote summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:13px; font-weight:600; }
.shipping-quote label { display:block; font-size:12px; margin:10px 0 6px; }
.shipping-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.shipping-quote .small-btn { margin-top:12px; }
.proof-approval { display:flex; align-items:flex-start; gap:10px; font-size:12px; line-height:1.5; margin-top:14px; }
.proof-approval input { width:20px!important; height:20px!important; flex-shrink:0; margin:0; accent-color:#0f6e56; }
/* Two clear steps, with fixed print zones that cannot overlap. */
.customizer-steps { grid-template-columns:1fr 1fr!important; }
#customizer .style-settings { border:0; padding:12px 0 18px; margin:0; }
#customizer .style-settings > h4,.brand-included { display:none; }
#customizer .caption-picker { background:none; border:0; padding:0; margin-top:12px; }
#customizer .caption-ideas { margin-top:6px; }
#customizer .caption-ideas summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:12px; text-decoration:underline; text-underline-offset:3px; }
#customizer .caption-ideas > label { margin-top:8px; }
#customizer .photo-details { margin-top:8px; }
.auto-preview-note { font-size:11px; line-height:1.4; margin-top:8px; color:#52665a; }
#customizer .preview-area { min-height:390px; padding-bottom:65px; overflow:visible; }
#customizer .preview-area .product-mock { transform:none!important; flex-shrink:0; }
#customizer .preview-area .mug { background:linear-gradient(100deg,#e1e4e1,#fff 35%,#f9faf8 75%,#dfe3df)!important; }
.storefront .product-mock .print { display:grid!important; grid-template-rows:20px 86px 26px 22px; gap:7px; width:150px; height:175px; align-content:center; justify-items:center; clip-path:none!important; color:var(--design)!important; }
.storefront .product-mock .print > span { display:flex; align-items:center; justify-content:center; width:100%; height:20px; font-size:6px; line-height:1.3; letter-spacing:.2px; overflow:hidden; overflow-wrap:anywhere; }
.storefront .product-mock .photo-window { width:110px!important; height:86px!important; overflow:hidden!important; clip-path:inset(0); border-radius:0; }
.storefront .product-mock .photo-window > img { width:100%!important; height:100%!important; object-fit:contain; }
.storefront .product-mock .print > strong { display:flex; align-items:center; justify-content:center; width:100%; height:26px; line-height:1; white-space:nowrap; overflow:hidden; overflow-wrap:normal; letter-spacing:0!important; }
.storefront .product-mock .print > .product-signature { display:flex; align-items:center; gap:4px; margin:0; height:22px; }
.storefront .product-mock .print > .product-signature img { width:18px!important; height:18px!important; }
.storefront .product-mock .print > .product-signature span { font-size:4px; letter-spacing:.3px; }
.storefront .product-mock .print > i { display:none; }
#customizer .tumbler { clip-path:none; border-radius:12px 12px 35px 35px; background:linear-gradient(90deg,#dce1dd,#fff 40%,#f7f8f6 75%,#dce1dd)!important; }
#customizer .tumbler:after { content:''; position:absolute; width:54px; height:95px; left:-40px; top:45px; border:13px solid #e9ede8; border-radius:25px; z-index:-1; }
#customizer .tumbler .lid { background:linear-gradient(#a7b4b0,#e8eeeb 50%,#8d9c97); border-bottom:2px solid #bcc7c0; }
.storefront .tumbler .print { grid-template-rows:24px 125px 28px 24px; gap:9px; height:235px; width:125px; }
.storefront .tumbler .photo-window { height:125px!important; width:110px!important; }
.storefront .tumbler .print > span { height:24px; }
#customizer .preview-area .sticker { width:220px; height:270px; min-height:270px; border-radius:34px; background:#fffef8; }
.storefront .sticker .print { grid-template-rows:26px 130px 28px 24px; width:180px; height:245px; gap:8px; }
.storefront .sticker .photo-window { height:130px!important; width:150px!important; }
.storefront .sticker .print > span { height:26px; }
.live-product-preview { width:100%; text-align:center; }
#enlarge-preview { border:0; background:none; width:100%; padding:0; cursor:zoom-in; }
#live-product-image { display:block; width:100%; max-height:350px; aspect-ratio:1; object-fit:contain; }
#live-preview-status { position:absolute; bottom:12px; left:14px; right:14px; font-size:11px; line-height:1.4; text-align:center; color:#315d48; }
#customizer .preview-label { bottom:43px; }
#move-photo-preview { min-height:36px; margin:0; font-size:12px; }
#proof-images details { margin-top:12px; }
#proof-images summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:12px; text-decoration:underline; }
#preview-zoom { width:min(700px,94vw); }
#preview-zoom-image { width:100%; max-height:72dvh; object-fit:contain; }
@media(max-width:720px) {
 #customizer .preview-area { position:relative; min-height:265px; padding:8px 12px 58px; }
 #customizer .preview-area .mug { transform:scale(.88)!important; margin:0 24px 0 0; }
 #customizer .preview-area .tumbler { transform:scale(.72)!important; margin-block:-40px; }
 #customizer .preview-area .sticker { transform:scale(.78)!important; margin-block:-25px; }
 #live-product-image { max-height:235px; }
 #customizer .editor { gap:16px; }
 #customizer .customizer-footer { padding-top:10px; }
 #customizer .auto-preview-note { font-size:10px; }
 #customizer .photo-details { margin-bottom:12px; }
}
/* Keep the product, move action, and status in separate vertical areas. */
#customizer .preview-area { display:block; height:340px; min-height:340px; padding:0; }
#customizer .preview-area .product-mock { position:absolute; margin:0; }
#customizer .preview-area .mug { left:calc(50% - 120px); top:calc(50% - 125px); transform:none!important; }
#customizer .preview-area .tumbler { left:calc(50% - 65px); top:calc(50% - 170px); transform:scale(.85)!important; }
#customizer .preview-area .sticker { left:calc(50% - 110px); top:calc(50% - 165px); transform:scale(.9)!important; }
.live-product-preview { position:absolute; inset:0 0 65px; display:flex; flex-direction:column; align-items:center; }
#enlarge-preview { flex:1; min-height:0; display:block; }
#live-product-image { width:100%; height:100%; max-height:none; aspect-ratio:auto; }
#move-photo-preview { min-height:32px; height:32px; flex-shrink:0; }
#live-preview-status { top:10px; bottom:auto; padding:4px 8px; border-radius:4px; background:#e1f0e5e8; }
#customizer .preview-label { bottom:15px; }
#customizer #upload-trigger { min-height:68px; padding:12px; margin-top:8px; }
#customizer #upload-trigger > span { font-size:20px; }
#customizer .preview-area { height:100%; min-height:0; }
@media(max-width:720px) {
 #customizer .editor { --editor-preview-height:clamp(140px,25dvh,220px); grid-template-rows:var(--editor-preview-height) minmax(0,1fr); gap:12px; }
 #customizer .preview-area { height:var(--editor-preview-height); min-height:0; }
 .keyboard-open #customizer .editor { grid-template-rows:100px minmax(0,1fr); }
 .keyboard-open #customizer .preview-area { display:block; height:100px; min-height:0; }
 .keyboard-open #customizer .live-product-preview { inset:0; }
 .keyboard-open #customizer #move-photo-preview,.keyboard-open #customizer .preview-label { display:none; }
 .keyboard-open #customizer #live-preview-status { font-size:9px; top:2px; left:0; right:auto; max-width:42%; background:#e1f0e5cc; padding:2px 4px; }
 .keyboard-open #customizer .preview-area .mug { top:calc(50% - 96px); transform:scale(.35)!important; }
 .keyboard-open #customizer .preview-area .tumbler { top:calc(50% - 140px); transform:scale(.28)!important; }
 .keyboard-open #customizer .preview-area .sticker { top:calc(50% - 135px); transform:scale(.3)!important; }
}
@media(max-width:720px) {
 #customizer .preview-area { height:260px; min-height:260px; }
 #customizer .preview-area .mug { top:calc(50% - 125px); transform:scale(.8)!important; }
 #customizer .preview-area .tumbler { top:calc(50% - 170px); transform:scale(.6)!important; }
 #customizer .preview-area .sticker { top:calc(50% - 165px); transform:scale(.65)!important; }
}
@media(max-width:720px) { .catalog-hero { gap:24px; } .store-promise { padding:24px; } .store-promise h2 { font-size:23px; max-width:none; } .store-promise > img { width:56px; height:56px; margin-bottom:12px; } }
/* The print carries one standalone brand mark, below the personal text. */
.storefront .product-signature { display:flex!important; justify-content:center; align-items:center; padding-top:3px; }
.storefront .product-signature img { width:22px!important; height:22px!important; object-fit:contain; }
.storefront .product-signature span { display:none; }
.custom-font-color { display:flex!important; justify-content:space-between; align-items:center; font-size:12px; gap:12px; }
#font-color { width:56px; min-height:40px; padding:3px; cursor:pointer; }
#cup-color-control { margin-top:14px; }
#customizer .preview-area .mug:after { border-color:var(--cup-accent,#e9ede8)!important; }
#customizer .preview-area .mug { border-top:5px solid var(--cup-accent,#e9ede8); }
.example-portrait { background:#e9eee6; }
.example-portrait > img { object-fit:contain!important; padding:12px; height:310px; }
#customizer .editor-step[data-panel="1"] > h3,#customizer .editor-step[data-panel="1"] > .helper { display:none; }
#customizer .dialog-header { padding-bottom:14px; }
#customizer #upload-trigger { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 12px; min-height:64px; padding:10px 14px; }
#customizer #upload-trigger small { width:100%; }
#customizer #photo-status { font-size:11px; margin:4px 0 10px; }
#customizer #use-example-photo { min-height:32px; margin:4px 0; font-size:12px; }
#customizer .customizer-footer { gap:6px; }
#customizer .auto-preview-note { margin:0; font-size:10px; }
@media(max-width:720px) {
 #customizer .preview-area { height:var(--editor-preview-height); min-height:0; }
 .keyboard-open #customizer .preview-area { height:100px; min-height:0; }
 .example-portrait > img { height:260px; }
 #customizer .live-product-preview { inset:0 0 20px; }
 #customizer #move-photo-preview { position:absolute; right:10px; bottom:-16px; min-height:32px; }
 #customizer .preview-area:has(.live-product-preview:not([hidden])) .preview-label { display:none; }
 .keyboard-open #customizer .live-product-preview { inset:0; }
}