*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.container{width:min(1240px,calc(100% - 44px));margin:auto}.announcement{background:var(--dark);color:#fff;text-align:center;padding:9px 16px;font-size:10px;letter-spacing:.13em;text-transform:uppercase}.announcement span{opacity:.55;margin:0 9px}.site-header{background:rgba(255,253,252,.97);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:70;backdrop-filter:blur(14px)}.brand-row{height:92px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:25px}.brand{font:700 var(--logo-size)/.9 var(--font-heading);letter-spacing:.19em;text-align:center;display:inline-flex;flex-direction:column;gap:3px;min-width:190px}.brand i{font:400 11px var(--font-heading)}.brand-search{justify-self:start;display:flex;align-items:center;border-bottom:1px solid #d7cbc7;width:170px}.brand-search input{border:0;outline:0;background:transparent;width:135px;font-size:11px;padding:8px}.brand-search button{border:0;background:none;font-size:18px}.brand-actions{justify-self:end;display:flex;align-items:center;gap:18px;font-size:11px;font-weight:750}.count{display:inline-grid;place-items:center;background:var(--dark);color:#fff;width:21px;height:21px;border-radius:50%;font-size:9px;margin-left:4px}.mobile-toggle{display:none;border:0;background:none;font-size:22px}.nav-row{border-top:1px solid #eee4e0}.menu{height:51px;display:flex;align-items:center;justify-content:center;gap:30px}.menu>a,.mega-trigger>a{display:block;padding:17px 0;font-size:11px;font-weight:800;letter-spacing:.04em}.menu>a:hover,.mega-trigger>a:hover{color:var(--accent)}.mega-trigger{height:100%;display:flex;align-items:center}.mega-menu{position:absolute;top:143px;left:50%;transform:translateX(-50%);width:min(1190px,calc(100vw - 40px));background:var(--surface);border:1px solid var(--border);border-radius:0 0 calc(var(--radius) + 4px) calc(var(--radius) + 4px);box-shadow:0 28px 65px #47363718;padding:27px;display:grid;grid-template-columns:1fr 1fr 1fr 1.15fr;gap:30px;opacity:0;visibility:hidden;pointer-events:none;transition:.17s}.mega-trigger:hover .mega-menu,.mega-trigger:focus-within .mega-menu{opacity:1;visibility:visible;pointer-events:auto}.compact-mega{grid-template-columns:1fr 1fr 1.2fr;max-width:880px}.mega-column h4{font-size:10px;text-transform:uppercase;letter-spacing:.15em;margin:0 0 13px;padding-bottom:12px;border-bottom:1px solid #eee5e1}.mega-column a{display:block;padding:8px 0;font-size:13px;color:#5c5350}.mega-column .mega-strong{font-weight:850;color:var(--text)}.mega-feature{min-height:222px;border-radius:var(--radius);background:#f1e8e9;position:relative;padding:17px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}.mega-feature img{position:absolute;right:-15px;top:4px;width:170px;height:170px;object-fit:contain}.mega-feature-label{position:absolute;left:15px;top:15px;background:#fff;border:1px solid #e4d7d3;border-radius:999px;padding:6px 8px;font-size:9px;font-weight:850}.mega-feature b{font:500 19px var(--font-heading);position:relative}.mega-feature small{font-size:10px;color:#766b67;margin-top:4px;position:relative}.mini-feature{background:#eee7f1}.mini-feature-icon{font-size:72px;position:absolute;right:20px;top:48px}.eyebrow{font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--accent);font-weight:850}.section{padding:76px 0}.white-section{background:#fff}.soft-section{background:#fbf8f6}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 21px;border-radius:999px;border:1px solid var(--dark);font-weight:800;font-size:12px;cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-1px)}.btn-dark{background:var(--dark);color:#fff}.btn-light{background:#fff;color:var(--text)}.btn-soft{background:#fff;border-color:var(--border);color:var(--text)}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}.section-title{margin-bottom:30px}.section-title.centered{text-align:center;max-width:750px;margin-left:auto;margin-right:auto}.section-title h2,.easy-grid h2,.soft-cta h2{font:500 42px/1.05 var(--font-heading);letter-spacing:-.025em;margin:9px 0}.section-title p{color:#746a66;line-height:1.65;margin:0}.row-title{display:flex;align-items:end;justify-content:space-between;gap:20px}.text-link{font-size:12px;font-weight:850;border-bottom:1px solid}.home-hero{background:var(--surface);border-bottom:1px solid var(--border);overflow:hidden}.hero-slider{min-height:595px}.hero-slide{display:none;padding:38px 0 24px}.hero-slide.is-active{display:block;animation:fade .45s ease both}@keyframes fade{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}.hero-slide-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center}.hero-copy h1{font:500 clamp(48px,5.6vw,76px)/.98 var(--font-heading);letter-spacing:-.037em;margin:14px 0 19px;max-width:700px}.hero-copy p{font-size:16px;line-height:1.72;color:#756b67;max-width:590px}.hero-mini-proof{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.hero-mini-proof span{font-size:10px;font-weight:800;border:1px solid var(--border);background:#fff;border-radius:999px;padding:8px 11px}.hero-visual{min-height:500px;border-radius:calc(var(--radius) + 8px);position:relative;overflow:hidden;display:grid;place-items:center}.hero-pet{background:#f1dfe2}.hero-personal{background:#e9e3ef}.hero-business{background:#e4ebe2}.hero-pattern{position:absolute;inset:0;opacity:.55}.hero-product-card{width:58%;min-width:300px;aspect-ratio:1;background:#fffdfc;border:1px solid #e4d7d3;box-shadow:0 24px 50px #46383a18;border-radius:calc(var(--radius) + 1px);padding:22px;position:relative;z-index:2;display:grid;place-items:center;transform:rotate(-2.5deg)}.hero-product-card img{width:100%;height:100%;object-fit:contain}.hero-note{position:absolute;left:6%;bottom:7%;z-index:4;background:#fffdfc;border:1px solid #e4d7d3;border-radius:14px;padding:12px 14px;max-width:190px;box-shadow:0 13px 28px #46383a12}.hero-note small{display:block;font-size:8px;letter-spacing:.13em;color:#9a7d85}.hero-note b{font:500 15px var(--font-heading)}.hero-controls{display:flex;justify-content:center;align-items:center;gap:14px;padding-bottom:20px}.hero-arrow{width:38px;height:38px;border:1px solid var(--border);border-radius:50%;background:#fff}.hero-dots{display:flex;gap:7px}.hero-dot{width:21px;height:7px;padding:0;border:0;border-radius:999px;background:#d8cdca}.hero-dot.is-active{width:42px;background:var(--accent)}.quick-trust{background:#fff}.quick-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--border)}.quick-trust-grid>div{padding:22px 20px;border-right:1px solid var(--border);display:grid;grid-template-columns:auto 1fr;column-gap:11px}.quick-trust-grid>div:last-child{border-right:0}.quick-trust i{grid-row:1/3;font:500 20px var(--font-heading);color:#b88b95}.quick-trust b{font-size:12px}.quick-trust span{font-size:10px;color:#827873;margin-top:4px}.category-product-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}.category-product-card{text-align:center}.category-art{aspect-ratio:.93;border-radius:18px;border:1px solid var(--border);display:grid;place-items:center;overflow:hidden;transition:.2s}.category-art img{width:88%;height:88%;object-fit:contain}.category-product-card:hover .category-art{transform:translateY(-3px);box-shadow:0 14px 26px #4b38390d}.category-product-card strong{display:block;font-size:11px;margin-top:10px}.category-product-card small{display:block;font-size:9px;color:#8a7f7b;margin-top:3px}.category-art>span{font:500 50px var(--font-heading)}.art-rose{background:#f1dfe2}.art-sage{background:#e6ece2}.art-lilac{background:#ebe6f0}.art-blue{background:#e5ebf1}.art-cream{background:#f4eee5}.art-peach{background:#f2e0d6}.art-dark{background:var(--dark);color:#fff}.animal-section{background:#faf6f4}.animal-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}.animal-card{text-align:center}.animal-card>span{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--border);font-size:66px;box-shadow:0 9px 28px #4b383908;transition:.2s}.animal-card:nth-child(2)>span{background:#eee8f2}.animal-card:nth-child(3)>span{background:#e9eee4}.animal-card:nth-child(4)>span{background:#f2e2d7}.animal-card:nth-child(5)>span{background:#e4ecef}.animal-card:nth-child(6)>span{background:#eee8df}.animal-card:hover>span{transform:translateY(-4px)}.animal-card b{display:block;font-size:12px;margin-top:10px}.animal-card small{font-size:9px;color:#8c807c}.center-actions{text-align:center;margin-top:30px}.portrait-story{background:var(--dark);color:#fff;border-radius:calc(var(--radius) + 8px);padding:38px;display:grid;grid-template-columns:.85fr 2.15fr;gap:38px;align-items:center}.portrait-story h2{font:500 44px/1.04 var(--font-heading);margin:10px 0 14px}.portrait-story p{font-size:12px;color:#d9d0d0}.portrait-steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:center}.portrait-steps>div{text-align:center}.portrait-steps>div>div{aspect-ratio:1.16;background:#fff;border-radius:18px;display:grid;place-items:center;color:#222;font-size:70px;position:relative}.portrait-steps img{width:80%;height:80%;object-fit:contain}.portrait-steps span{position:absolute;left:9px;top:9px;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:var(--dark);color:#fff;font-size:10px}.portrait-steps b{display:block;font-size:10px;margin-top:8px}.portrait-steps em{font-style:normal;color:#c9b8bb;font-size:22px}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.product-card,.store-product-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.product-image,.store-product-image{aspect-ratio:1;background:#f0e9e4;position:relative;overflow:hidden}.product-image img,.store-product-image img{width:100%;height:100%;object-fit:cover;transition:.25s}.product-card:hover img,.store-product-card:hover img{transform:scale(1.025)}.badge{position:absolute;left:11px;top:11px;background:#fff;border:1px solid #e4d7d3;border-radius:999px;padding:6px 9px;font-size:8px;letter-spacing:.09em;text-transform:uppercase;font-weight:850}.product-info,.store-product-info{padding:15px}.product-info small,.store-product-info small{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#9a8582}.product-info h3,.store-product-info h2{font:500 18px var(--font-heading);margin:5px 0 8px}.product-info>div,.product-price-row{display:flex;justify-content:space-between;align-items:center;gap:10px}.product-info>div b,.product-price-row b{font-size:12px}.product-info>div span,.product-price-row span{font-size:9px;font-weight:850}.store-product-info p{font-size:10px;line-height:1.5;color:#817570;min-height:30px}.personalise-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.personalise-tile{min-height:260px;border-radius:var(--radius);padding:21px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--border);position:relative;overflow:hidden}.personalise-tile>div{font:500 58px var(--font-heading);position:absolute;top:42px;left:0;right:0;text-align:center}.personalise-tile .logo-example{font:800 27px/1.1 Arial;letter-spacing:.08em}.personalise-tile b{font:500 20px var(--font-heading)}.personalise-tile small{font-size:10px;color:#746a66;margin-top:4px}.tile-cream{background:#f5eee8}.tile-sage{background:#e6ece2}.tile-dark{background:var(--dark);color:#fff}.tile-dark small{color:#d4caca}.tile-peach{background:#f0dfd4}.easy-section{background:#f5eee9}.easy-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center}.easy-grid p{color:#746a66}.easy-links{display:grid;gap:10px}.easy-links a{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px 16px;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:11px}.easy-links a>span{font-size:28px}.easy-links b{display:block;font-size:12px}.easy-links small{display:block;font-size:9px;color:#8a7f7a}.easy-links em{font-style:normal;font-size:21px}.collection-hero,.workwear-hero{padding:62px 0;background:#fff}.collection-hero-grid{display:grid;grid-template-columns:1fr .82fr;gap:50px;align-items:center}.collection-hero h1,.workwear-hero h1{font:500 64px/.98 var(--font-heading);letter-spacing:-.035em;margin:10px 0 17px}.collection-hero p,.workwear-hero p{font-size:15px;line-height:1.65;color:#756b67;max-width:600px}.collection-hero-art{min-height:390px;border-radius:calc(var(--radius) + 8px);display:grid;place-items:center;overflow:hidden}.collection-hero-art img{width:85%;height:85%;object-fit:contain}.mini-benefits{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.mini-benefits .container{display:grid;grid-template-columns:repeat(4,1fr)}.mini-benefits span{text-align:center;padding:16px;font-size:10px;font-weight:800;border-right:1px solid var(--border)}.mini-benefits span:last-child{border:0}.shop-toolbar{background:#fff;border-bottom:1px solid var(--border);padding:20px 0}.shop-filter-bar{display:grid;grid-template-columns:1.5fr .8fr .8fr auto;gap:9px}.shop-filter-bar select,.filter-search{min-height:45px;border:1px solid var(--border);border-radius:999px;background:#fff}.shop-filter-bar select{padding:0 13px}.filter-search{display:flex;align-items:center;padding:0 12px}.filter-search input{border:0;outline:0;background:transparent;flex:1;min-width:0;padding:0 8px}.chip-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.chip-row a{font-size:9px;font-weight:800;border:1px solid var(--border);border-radius:999px;padding:7px 9px;background:#faf7f5}.results-heading{display:flex;justify-content:space-between;gap:15px;margin-bottom:20px;font-size:10px;color:#817671}.empty-state{text-align:center;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:55px 20px}.empty-state>div{font-size:55px}.empty-state h2{font:500 30px var(--font-heading)}.soft-cta{background:#efe5e8;border-radius:calc(var(--radius) + 4px);padding:32px;display:flex;align-items:center;justify-content:space-between;gap:25px}.animal-landing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.animal-landing-card{min-height:280px;border-radius:calc(var(--radius) + 2px);background:var(--animal-bg);padding:26px;display:grid;grid-template-columns:.75fr 1.25fr;align-items:center}.animal-big{font-size:105px;text-align:center}.animal-landing-card h2{font:500 33px var(--font-heading);margin:7px 0}.animal-detail-hero{padding:62px 0;background:#fff}.animal-detail-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px}.animal-detail-grid h1{font:500 68px var(--font-heading);margin:8px 0}.animal-detail-emoji{min-height:380px;border-radius:calc(var(--radius) + 8px);display:grid;place-items:center;background:#f1e4e6;font-size:160px}.personalisation-paths{background:#fff;border-bottom:1px solid var(--border)}.personalisation-paths .container{display:grid;grid-template-columns:repeat(4,1fr)}.personalisation-paths a{text-align:center;padding:20px;border-right:1px solid var(--border)}.personalisation-paths span{display:block;font:500 27px var(--font-heading)}.personalisation-paths b{display:block;font-size:11px;margin-top:7px}.personalisation-paths small{font-size:9px;color:#8a7e79}.content-page-hero,.article-hero{padding:72px 0 55px;background:#f1e5e7;text-align:center}.content-page-hero h1,.article-hero h1{font:500 60px/1 var(--font-heading);letter-spacing:-.03em;max-width:850px;margin:10px auto 14px}.content-page-hero p,.article-hero p{max-width:650px;margin:auto;color:#746a66;line-height:1.6}.content-page-grid,.article-layout,.faq-layout,.size-guide-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:42px;align-items:start}.content.prose{font-size:14px;line-height:1.85}.help-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:23px;position:sticky;top:165px}.help-card>span{font-size:36px;color:#b7818d}.help-card h2{font:500 25px var(--font-heading)}.help-card p{font-size:11px;line-height:1.6;color:#7b706c}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.process-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px;min-height:300px}.process-card>div{font-size:55px;margin:40px 0 25px}.process-card h2{font:500 22px var(--font-heading)}.faq-list details{background:#fff;border:1px solid var(--border);border-radius:15px;padding:15px 17px;margin-bottom:9px}.panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px}.input,.select,textarea{width:100%;padding:12px 13px;border:1px solid #ded2cd;border-radius:12px;background:#fff;outline:0}.form-group{margin:11px 0}.form-group label{display:block;font-size:10px;font-weight:850;margin-bottom:6px}.product-v3-layout{display:grid;grid-template-columns:.92fr 1.08fr;gap:48px;align-items:start}.product-gallery{position:sticky;top:165px}.product-main-photo{min-height:590px;border-radius:calc(var(--radius) + 7px);background:#f0e7e4;display:grid;place-items:center;position:relative;overflow:hidden}.product-main-photo img{width:90%;height:90%;object-fit:contain}.photo-label{position:absolute;left:15px;top:15px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:7px 10px;font-size:9px;font-weight:850}.product-buy>h1{font:500 47px/1.02 var(--font-heading);margin:7px 0 10px}.product-rating{font-size:10px;color:#b27f89}.product-price-large{font:700 21px var(--font-heading);margin:14px 0}.product-lead{font-size:14px;line-height:1.65;color:#706662}.customizer-v3{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px}.customizer-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}.customizer-stage{min-height:390px;border-radius:17px;background:#f4eeea;position:relative;overflow:hidden;display:grid;place-items:center;touch-action:none}.custom-garment-img{width:92%;height:92%;object-fit:contain;opacity:.62}.custom-overlay{position:absolute;display:grid;place-items:center;cursor:move;user-select:none;touch-action:none;z-index:5}.custom-overlay img{max-width:100%;max-height:75%;object-fit:contain}.custom-text{font-size:11px;font-weight:800}.product-options{display:grid;grid-template-columns:1fr 1fr .55fr;gap:10px}.add-bag-btn{width:100%;margin-top:8px}.product-accordions details{border-bottom:1px solid var(--border);padding:12px 0}.product-accordions summary{font-size:11px;font-weight:850}.account-shell{min-height:620px;display:grid;place-items:center;background:linear-gradient(135deg,#fbf6f4,#eee8f0)}.account-card{width:min(500px,calc(100% - 30px));background:#fff;border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);padding:30px}.account-card h1,.account-top h1,.checkout-heading h1{font:500 45px var(--font-heading);margin:8px 0}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.full-btn{width:100%}.account-grid,.cart-v3-grid,.checkout-v3-grid{display:grid;grid-template-columns:.35fr .65fr;gap:20px}.cart-v3-grid,.checkout-v3-grid{grid-template-columns:1.25fr .75fr}.account-profile,.account-orders,.cart-items,.checkout-card,.order-summary,.cart-total-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px}.cart-item{display:grid;grid-template-columns:95px 1fr 85px 95px;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--border)}.cart-thumb{width:95px;height:95px;border-radius:14px;background:#f2ebe6;overflow:hidden}.cart-thumb img{width:100%;height:100%;object-fit:cover}.cart-total-card,.order-summary{position:sticky;top:165px}.summary-item{display:grid;grid-template-columns:60px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}.site-footer{background:var(--dark);color:#fff}.footer-newsletter{display:grid;grid-template-columns:1fr 1.1fr;gap:35px;align-items:center;padding:28px 0;border-bottom:1px solid #ffffff22}.footer-newsletter>div{display:flex;align-items:center;gap:13px}.footer-newsletter form{display:flex;gap:8px}.footer-newsletter input{flex:1;min-width:0;border:1px solid #6a595a;background:#fff;padding:12px 14px;border-radius:999px}.footer-grid{display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:30px;padding:42px 0 34px}.site-footer h4{font-size:9px;letter-spacing:.15em;text-transform:uppercase}.site-footer a{display:block;color:#d4c8c9;margin:9px 0;font-size:10px}.site-footer p{font-size:10px;line-height:1.6;color:#d4c8c9}.brand.light{font-size:21px;align-items:flex-start;min-width:0}.footer-bottom{border-top:1px solid #ffffff1e;padding:18px 0 22px;display:flex;justify-content:space-between;font-size:9px;color:#bbaeb0}
@media(max-width:1080px){.menu{gap:18px}.category-product-grid{grid-template-columns:repeat(4,1fr)}.product-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.container{width:min(100% - 30px,1240px)}.brand-row{height:78px;grid-template-columns:auto 1fr auto}.brand-search{display:none}.brand{font-size:24px;min-width:0}.brand-actions>a:first-child{display:none}.mobile-toggle{display:block}.nav-row{border:0}.menu{display:none;position:absolute;left:0;right:0;top:78px;background:#fff;height:auto;flex-direction:column;align-items:stretch;padding:13px 18px}.menu.open{display:flex}.menu>a,.mega-trigger>a{padding:9px 0;font-size:13px}.mega-trigger{display:block}.mega-menu{display:none!important}.hero-slide-grid,.collection-hero-grid,.animal-detail-grid{grid-template-columns:1fr}.hero-copy h1{font-size:54px}.hero-visual{min-height:420px}.quick-trust-grid{grid-template-columns:repeat(2,1fr)}.animal-grid{grid-template-columns:repeat(3,1fr)}.portrait-story{grid-template-columns:1fr}.product-grid{grid-template-columns:repeat(2,1fr)}.personalise-grid{grid-template-columns:repeat(2,1fr)}.easy-grid{grid-template-columns:1fr}.product-v3-layout{grid-template-columns:1fr}.product-gallery{position:static}.customizer-layout{grid-template-columns:1fr}.content-page-grid,.article-layout,.faq-layout,.size-guide-grid{grid-template-columns:1fr}.help-card{position:static}.process-grid{grid-template-columns:repeat(2,1fr)}.account-grid,.cart-v3-grid,.checkout-v3-grid{grid-template-columns:1fr}.cart-total-card,.order-summary{position:static}.footer-grid{grid-template-columns:1fr 1fr 1fr}.footer-newsletter{grid-template-columns:1fr}}
@media(max-width:560px){.container{width:calc(100% - 22px)}.announcement{font-size:8px}.hero-copy h1{font-size:42px}.hero-visual{min-height:340px}.hero-product-card{min-width:0;width:72%}.quick-trust-grid{grid-template-columns:1fr}.section{padding:55px 0}.section-title h2,.easy-grid h2{font-size:34px}.category-product-grid{grid-template-columns:repeat(2,1fr)}.animal-grid{grid-template-columns:repeat(2,1fr)}.animal-card>span{font-size:54px}.portrait-story{padding:24px 17px}.portrait-steps{grid-template-columns:1fr}.portrait-steps em{transform:rotate(90deg)}.product-grid{grid-template-columns:1fr 1fr;gap:10px}.product-info,.store-product-info{padding:11px}.product-info h3,.store-product-info h2{font-size:15px}.personalise-grid{grid-template-columns:1fr}.row-title{align-items:start;flex-direction:column}.collection-hero h1,.workwear-hero h1,.animal-detail-grid h1{font-size:45px}.shop-filter-bar{grid-template-columns:1fr}.animal-landing-grid{grid-template-columns:1fr}.content-page-hero h1,.article-hero h1{font-size:43px}.process-grid{grid-template-columns:1fr}.two-fields{grid-template-columns:1fr}.cart-item{grid-template-columns:72px 1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-newsletter form{flex-direction:column}.footer-bottom{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.notice{padding:12px 14px;border:1px solid #e2d4d1;border-radius:13px;background:#f3e9eb;color:#5b484d;margin-bottom:18px;font-size:11px}.notice a{text-decoration:underline}.payment-choice{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:14px;padding:12px;margin:9px 0;background:#fff}.payment-choice b,.payment-choice small{display:block}.payment-choice b{font-size:11px}.payment-choice small{font-size:9px;color:#847975;margin-top:3px}.checkout-cost-row,.summary-total{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:10px}.summary-total{border-top:1px solid var(--border);margin-top:4px;font:500 18px var(--font-heading)}.summary-note{font-size:9px;background:#f5eeef;border-radius:12px;padding:11px;color:#806c70;margin-top:10px}
/* ===== V4 additions ===== */
.brand-image{max-width:260px;max-height:70px;object-fit:contain}.seasonal-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:#fff;border-radius:999px;padding:7px 10px;font-size:9px;font-weight:800}.hero-slide{position:relative}.hero-slide .hero-visual{background:var(--hero-bg,#f1dfe2)}.hero-pattern.pattern-stripes{background-image:repeating-linear-gradient(135deg,transparent,transparent 28px,#ffffff50 29px,#ffffff50 32px)}.hero-pattern.pattern-grid{background-image:linear-gradient(#ffffff50 1px,transparent 1px),linear-gradient(90deg,#ffffff50 1px,transparent 1px);background-size:30px 30px}.hero-pattern.pattern-gingham{background-image:linear-gradient(90deg,#ffffff40 1px,transparent 1px),linear-gradient(#ffffff40 1px,transparent 1px);background-size:26px 26px}.hero-pattern.pattern-checker{background-image:linear-gradient(45deg,#ffffff30 25%,transparent 25%),linear-gradient(-45deg,#ffffff30 25%,transparent 25%);background-size:30px 30px}.hero-image-frame{width:60%;min-width:300px;aspect-ratio:1;background:#fffdfc;border:1px solid var(--border);box-shadow:0 24px 50px #46383a18;border-radius:calc(var(--radius) + 1px);padding:22px;position:relative;z-index:2;display:grid;place-items:center;transform:rotate(-2deg)}.hero-image-frame img{width:100%;height:100%;object-fit:contain}.hero-season-label{position:absolute;right:6%;top:7%;z-index:4;background:#fff;border:1px solid var(--border);border-radius:999px;padding:8px 11px;font-size:9px;font-weight:850}.image-guide-note{font-size:9px!important;color:#8e817c!important;margin-top:5px!important}.variant-group{margin:15px 0}.variant-group>label{display:flex;justify-content:space-between;font-size:10px;font-weight:850;margin-bottom:8px}.option-pills,.color-swatches,.placement-pills,.view-tabs{display:flex;gap:7px;flex-wrap:wrap}.option-pill,.placement-pill,.view-tab{border:1px solid var(--border);background:#fff;border-radius:999px;padding:8px 11px;font-size:9px;font-weight:800;cursor:pointer}.option-pill.is-active,.placement-pill.is-active,.view-tab.is-active{background:var(--dark);color:#fff;border-color:var(--dark)}.color-swatch{width:34px;height:34px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--border);cursor:pointer;position:relative}.color-swatch.is-active:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;font-size:11px;color:#fff;text-shadow:0 1px 3px #000}.qty-stepper{display:inline-grid;grid-template-columns:36px 54px 36px;border:1px solid var(--border);border-radius:999px;overflow:hidden}.qty-stepper button,.qty-stepper input{border:0;background:#fff;text-align:center}.qty-stepper button{cursor:pointer;font-size:17px}.customizer-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}.customizer-progress span{font-size:8px;font-weight:800;text-align:center;padding:8px;border-radius:999px;background:#f4eeeb;color:#8c7d78}.customizer-progress span.is-active{background:#ead9dd;color:#74555d}.customizer-v4{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px}.customizer-v4-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}.customizer-canvas-wrap{position:relative}.customizer-stage-v4{min-height:460px;border-radius:18px;background:#f4eeea;position:relative;overflow:hidden;display:grid;place-items:center;touch-action:none}.customizer-stage-v4 .base-product{width:94%;height:94%;object-fit:contain;transition:.2s}.design-layer{position:absolute;left:34%;top:35%;width:110px;height:110px;z-index:4;display:grid;place-items:center;cursor:move;touch-action:none;transform-origin:center}.design-layer img{max-width:100%;max-height:80%;object-fit:contain}.design-layer .design-text{text-align:center;font-weight:800;white-space:nowrap}.print-boundary{position:absolute;border:1px dashed #9e7b8366;border-radius:8px;color:#9e7b83;font-size:7px;padding:4px;pointer-events:none}.boundary-left{left:29%;top:29%;width:28%;height:33%}.boundary-center{left:36%;top:28%;width:32%;height:40%}.view-tabs{margin-bottom:9px}.quality-meter{display:flex;align-items:center;gap:8px;background:#faf5f3;border-radius:12px;padding:9px;margin-top:8px}.quality-dot{width:9px;height:9px;border-radius:50%;background:#c7b9b5}.quality-dot.good{background:#729277}.quality-dot.warn{background:#c09154}.quality-meter b{font-size:9px}.quality-meter small{display:block;font-size:8px;color:#8b7d78}.editor-toolbox{display:grid;gap:10px}.tool-section{border:1px solid var(--border);border-radius:14px;padding:12px}.tool-section h3{font:500 17px var(--font-heading);margin:0 0 10px}.tool-section .form-group{margin:8px 0}.inline-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.range-row{display:grid;grid-template-columns:70px 1fr 42px;gap:8px;align-items:center;font-size:9px}.range-row output{text-align:right}.addon-list{display:grid;gap:7px}.addon-choice{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:start;border:1px solid var(--border);border-radius:12px;padding:9px}.addon-choice b,.addon-choice small{display:block}.addon-choice b{font-size:10px}.addon-choice small{font-size:8px;color:#887b76}.customizer-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.dynamic-price-box{background:var(--dark);color:#fff;border-radius:16px;padding:14px;display:flex;justify-content:space-between;align-items:center;margin-top:12px}.dynamic-price-box small{display:block;color:#d9cecf;font-size:8px}.dynamic-price-box b{font:500 22px var(--font-heading)}.product-media-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.product-media-thumb{background:#fff;border:1px solid var(--border);border-radius:12px;padding:7px;text-align:center;font-size:8px}.product-media-thumb img{aspect-ratio:1;object-fit:contain;width:100%}.saved-toast{position:fixed;right:20px;bottom:20px;background:var(--dark);color:#fff;border-radius:14px;padding:12px 15px;font-size:10px;z-index:120;opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}.saved-toast.show{opacity:1;transform:none}.payment-choice{display:flex;gap:10px;align-items:start;border:1px solid var(--border);border-radius:14px;padding:12px;margin:9px 0}.payment-choice b,.payment-choice small{display:block}.payment-choice b{font-size:11px}.payment-choice small{font-size:9px;color:#847975;margin-top:3px}.bank-note{background:#f7f0e9;border-radius:12px;padding:10px;font-size:9px;line-height:1.5;margin:8px 0}.account-profile,.account-orders{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px}.account-grid{display:grid;grid-template-columns:.34fr .66fr;gap:20px}.checkout-cost-row{display:flex;justify-content:space-between;font-size:10px;padding:8px 0}.summary-total{display:flex;justify-content:space-between;font:500 18px var(--font-heading);padding:16px 0}.summary-note{font-size:9px;background:#f5eeef;border-radius:12px;padding:11px;color:#806c70}.notice{padding:12px 14px;border-radius:13px;background:#e7efe3;margin-bottom:18px}.notice.error{background:#f3dddd}
@media(max-width:900px){.customizer-v4-grid{grid-template-columns:1fr}.customizer-stage-v4{min-height:420px}.account-grid{grid-template-columns:1fr}.hero-image-frame{min-width:0;width:70%}}@media(max-width:560px){.customizer-stage-v4{min-height:340px}.inline-controls{grid-template-columns:1fr}.customizer-progress{grid-template-columns:1fr 1fr}.hero-image-frame{width:75%}.brand-image{max-width:190px;max-height:58px}}
/* =========================================================
V5 COMPACT HEADER + FEMININE EDITORIAL STOREFRONT
========================================================= */
body{font-family:var(--font-body);font-weight:500}
h1,h2,h3,.section-title h2,.product-buy>h1,.content-page-hero h1,.article-hero h1{font-family:var(--font-heading)}
.announcement{padding:6px 16px;font-size:9px;letter-spacing:.11em;min-height:27px;display:flex;align-items:center;justify-content:center}
.site-header{position:relative;background:rgba(255,255,255,.96);border-bottom:1px solid var(--border);z-index:80;backdrop-filter:blur(14px)}
.site-header.is-sticky{position:sticky;top:0}
.header-inner{height:var(--header-height);display:grid;grid-template-columns:minmax(150px,220px) 1fr auto;align-items:center;gap:20px;position:relative}
.brand{min-width:0;display:inline-flex;align-items:center;justify-content:flex-start;flex-direction:row;gap:0;font:600 var(--logo-size)/1 var(--font-heading);letter-spacing:.095em;text-align:left;white-space:nowrap}
.brand i{font:500 .76em var(--font-heading);letter-spacing:0;margin:0 .12em}
.brand-image{width:auto;max-width:190px;max-height:34px;object-fit:contain}
.brand-actions{justify-self:end;display:flex;align-items:center;gap:14px;font-size:10px;font-weight:700}
.menu{height:var(--header-height);display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.6vw,25px)}
.menu>a,.mega-trigger>a{padding:0;min-height:var(--header-height);display:flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:.025em}
.mega-trigger{height:100%;display:flex;align-items:center}
.mega-menu{top:calc(var(--header-height) - 1px);left:50%;width:min(1160px,calc(100vw - 34px));border-radius:0 0 18px 18px;padding:23px;gap:24px}
.count{width:19px;height:19px;font-size:8px}
.mobile-toggle{font-size:20px}
.home-hero{overflow:hidden}
.hero-slider{min-height:505px}
.hero-slide{padding:26px 0 18px}
.hero-slide-grid{gap:42px}
.hero-copy h1{font-size:clamp(44px,5vw,66px);line-height:.98;letter-spacing:-.03em;margin:12px 0 16px}
.hero-copy p{font-size:14px;line-height:1.7;max-width:560px}
.hero-visual{min-height:425px}
.hero-image-frame{width:56%;max-width:400px}
.hero-controls{padding-bottom:14px}
.hero-mini-proof{margin-top:18px}
.hero-mini-proof span{padding:7px 10px}
.section{padding:68px 0}
.eyebrow{letter-spacing:.15em}
.btn{min-height:45px}
.home-sections{display:flex;flex-direction:column}
@media(max-width:1080px){
.header-inner{grid-template-columns:auto 1fr auto;gap:12px}
.menu{gap:13px}.menu>a,.mega-trigger>a{font-size:9px}
.brand{font-size:calc(var(--logo-size) * .9)}
}
@media(max-width:900px){
.header-inner{height:56px;grid-template-columns:1fr auto;gap:10px}
.brand{font-size:20px}
.brand-image{max-width:150px;max-height:30px}
.brand-actions{grid-column:2}.header-account{display:none}
.menu{display:none;position:absolute;left:-15px;right:-15px;top:56px;height:auto;background:#fff;flex-direction:column;align-items:stretch;padding:13px 18px;border-top:1px solid var(--border);box-shadow:0 18px 35px #00000012}
.menu.open{display:flex}.menu>a,.mega-trigger>a{min-height:0;padding:9px 0;font-size:12px}
.mega-trigger{display:block;height:auto}.mega-menu{display:none!important}
.hero-slider{min-height:auto}.hero-slide{padding-top:20px}.hero-visual{min-height:375px}
}
@media(max-width:560px){
.announcement{font-size:7.5px;padding:5px 8px}
.brand{font-size:18px;letter-spacing:.07em}
.nav-bag{font-size:9px}
.hero-copy h1{font-size:40px}
.hero-visual{min-height:320px}
.hero-image-frame{width:74%}
.section{padding:52px 0}
}
/* V5.1 compact-header hardening */
@media(min-width:901px){
.site-header .header-inner{height:var(--header-height);min-height:var(--header-height);grid-template-columns:205px minmax(0,1fr) auto}
.site-header .brand{font-size:var(--logo-size);line-height:1;letter-spacing:.08em}
.site-header .brand-actions{align-self:center}
.site-header .menu{align-self:stretch}
}
/* =========================================================
V5.2 HOMEPAGE SECTION POLISH
========================================================= */
/* Process / trust strip */
.quick-trust{
background:#fff;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
}
.quick-trust-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
border-bottom:0;
}
.quick-trust-grid>div{
min-height:112px;
padding:24px 28px;
border-right:1px solid var(--border);
display:grid;
grid-template-columns:42px 1fr;
grid-template-rows:auto auto;
column-gap:14px;
row-gap:3px;
align-content:center;
}
.quick-trust-grid>div:last-child{border-right:0}
.quick-trust i{
grid-row:1/3;
align-self:start;
font:500 26px/1 var(--font-heading);
color:var(--accent);
opacity:.72;
letter-spacing:-.02em;
}
.quick-trust b{
font-size:14px;
line-height:1.25;
font-weight:750;
color:var(--text);
}
.quick-trust span{
font-size:11px;
line-height:1.5;
color:#7b706c;
margin-top:1px;
max-width:250px;
}
/* Shop by product section */
.white-section[data-home-section="shop_by_product"]{
padding-top:88px;
padding-bottom:88px;
}
.white-section[data-home-section="shop_by_product"] .section-title{
max-width:860px;
margin-bottom:42px;
}
.white-section[data-home-section="shop_by_product"] .section-title .eyebrow{
font-size:11px;
margin-bottom:13px;
}
.white-section[data-home-section="shop_by_product"] .section-title h2{
font-size:clamp(42px,4.2vw,58px);
line-height:1.04;
margin:0 0 15px;
}
.white-section[data-home-section="shop_by_product"] .section-title p{
font-size:15px;
line-height:1.65;
max-width:720px;
margin-inline:auto;
}
.category-product-grid{
display:grid;
grid-template-columns:repeat(8,minmax(0,1fr));
gap:18px;
align-items:start;
}
.category-product-card{
text-align:center;
display:block;
min-width:0;
}
.category-art{
aspect-ratio:1/1;
border-radius:22px;
border:1px solid var(--border);
display:grid;
place-items:center;
overflow:hidden;
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
box-shadow:0 7px 20px rgba(55,40,43,.04);
position:relative;
}
.category-art:after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
pointer-events:none;
}
.category-art img{
width:84%;
height:84%;
object-fit:contain;
transition:transform .22s ease;
}
.category-product-card:hover .category-art{
transform:translateY(-5px);
box-shadow:0 18px 36px rgba(55,40,43,.10);
border-color:#dbc7c4;
}
.category-product-card:hover .category-art img{transform:scale(1.025)}
.category-product-card strong{
display:block;
font-size:14px;
line-height:1.3;
margin-top:14px;
color:var(--text);
font-weight:800;
}
.category-product-card small{
display:block;
font-size:10.5px;
line-height:1.4;
color:#8a7d79;
margin-top:4px;
}
.category-art>span{
font:500 54px/1 var(--font-heading);
}
.art-dark{
background:var(--dark);
color:#fff;
}
.art-dark:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
/* keep the coloured product blocks softer but richer */
.art-rose{background:#F1E0E4}
.art-sage{background:#E4ECE2}
.art-lilac{background:#ECE6F1}
.art-blue{background:#E4EBF1}
.art-cream{background:#F3EBDD}
.art-peach{background:#F3E0D5}
/* Wider screens: keep cards readable rather than stretching endlessly */
@media(min-width:1500px){
.white-section[data-home-section="shop_by_product"] .container{
width:min(1320px,calc(100% - 64px));
}
}
/* Tablet */
@media(max-width:1180px){
.category-product-grid{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:20px 16px;
}
.quick-trust-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.quick-trust-grid>div:nth-child(2){
border-right:0;
}
.quick-trust-grid>div:nth-child(-n+2){
border-bottom:1px solid var(--border);
}
}
/* Mobile */
@media(max-width:640px){
.quick-trust-grid{
grid-template-columns:1fr;
}
.quick-trust-grid>div{
min-height:94px;
padding:18px 16px;
grid-template-columns:36px 1fr;
border-right:0;
border-bottom:1px solid var(--border);
}
.quick-trust-grid>div:last-child{border-bottom:0}
.quick-trust i{font-size:22px}
.quick-trust b{font-size:13px}
.quick-trust span{font-size:10.5px}
.white-section[data-home-section="shop_by_product"]{
padding-top:58px;
padding-bottom:62px;
}
.white-section[data-home-section="shop_by_product"] .section-title{
margin-bottom:28px;
}
.white-section[data-home-section="shop_by_product"] .section-title h2{
font-size:38px;
}
.white-section[data-home-section="shop_by_product"] .section-title p{
font-size:13px;
}
.category-product-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px 12px;
}
.category-art{
border-radius:18px;
}
.category-product-card strong{
font-size:13px;
margin-top:11px;
}
.category-product-card small{
font-size:10px;
}
}
/* =========================================================
V5.3 COMPACT HOMEPAGE
========================================================= */
.home-sections>.section{padding-top:52px;padding-bottom:52px}
.quick-trust-grid>div{
min-height:82px;
padding:15px 24px;
grid-template-columns:38px 1fr;
column-gap:12px;
}
.quick-trust i{font-size:23px}
.quick-trust b{font-size:13px}
.quick-trust span{font-size:10.5px;line-height:1.4;max-width:270px}
.white-section[data-home-section="shop_by_product"]{
padding-top:50px;
padding-bottom:56px;
}
.white-section[data-home-section="shop_by_product"] .section-title{
margin-bottom:28px;
max-width:800px;
}
.white-section[data-home-section="shop_by_product"] .section-title .eyebrow{
margin-bottom:9px;
}
.white-section[data-home-section="shop_by_product"] .section-title h2{
font-size:clamp(36px,3.35vw,48px);
line-height:1.03;
margin-bottom:10px;
}
.white-section[data-home-section="shop_by_product"] .section-title p{
font-size:13.5px;
line-height:1.55;
}
.category-product-grid{gap:15px}
.category-product-card strong{font-size:13px;margin-top:11px}
.category-product-card small{font-size:10px;margin-top:2px}
.category-art{border-radius:20px}
/* Animal cards can now use uploaded images */
.animal-card>span.animal-visual{
aspect-ratio:1;
border-radius:50%;
display:grid;
place-items:center;
overflow:hidden;
border:1px solid var(--border);
box-shadow:0 7px 22px rgba(55,40,43,.05);
}
.animal-card>span.animal-visual img{width:100%;height:100%;object-fit:cover}
.animal-card>span.animal-visual em{font-style:normal;font-size:62px;line-height:1}
.animal-card:hover>span.animal-visual{transform:translateY(-4px)}
/* Keep all following homepage sections tighter */
.home-sections .section-title{margin-bottom:24px}
.home-sections .section-title h2{font-size:clamp(34px,3.2vw,44px)}
.portrait-story{padding:30px}
.personalise-tile{min-height:235px}
.easy-section{padding-top:48px!important;padding-bottom:48px!important}
@media(max-width:1180px){
.quick-trust-grid>div{min-height:78px;padding:14px 20px}
}
@media(max-width:640px){
.home-sections>.section{padding-top:42px;padding-bottom:42px}
.quick-trust-grid>div{min-height:74px;padding:13px 14px}
.white-section[data-home-section="shop_by_product"]{padding-top:42px;padding-bottom:46px}
.white-section[data-home-section="shop_by_product"] .section-title h2{font-size:34px}
.white-section[data-home-section="shop_by_product"] .section-title{margin-bottom:22px}
.animal-card>span.animal-visual em{font-size:48px}
}
/* =========================================================
V5.4 REVIEWS / FOUNDER / SOCIAL
========================================================= */
.reviews-section{background:#fbf7f5}
.reviews-section .section-title p{max-width:560px}
.reviews-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.review-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:22px;min-height:250px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 8px 25px rgba(50,35,39,.04)}
.review-stars{font-size:12px;letter-spacing:.12em;color:var(--accent);margin-bottom:15px}
.review-card>p{font:500 18px/1.55 var(--font-heading);margin:0 0 24px;color:#44393c}
.review-person{display:flex;align-items:center;gap:11px}
.review-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;background:#f1e2e5;display:grid;place-items:center;flex:none}
.review-avatar img{width:100%;height:100%;object-fit:cover}
.review-avatar span{font:500 18px var(--font-heading);color:var(--accent)}
.review-person b{display:block;font-size:11px}
.review-person small,.review-person em{display:block;font-size:9px;color:#8a7e7a;font-style:normal;margin-top:2px}
.founder-section{background:#fff}
.founder-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:54px;align-items:center;max-width:1080px}
.founder-photo{border-radius:26px;overflow:hidden;background:#f1e7e3;aspect-ratio:6/7}
.founder-photo img,.founder-photo video{width:100%;height:100%;object-fit:cover;display:block}
.founder-video{background:#111}
.founder-placeholder{width:100%;height:100%;display:grid;place-items:center;text-align:center;align-content:center;gap:8px;color:#8d777d}
.founder-placeholder span{font-size:70px}
.founder-placeholder small{font-size:10px;line-height:1.5}
.founder-copy h2{font-size:clamp(38px,4vw,54px);line-height:1.04;margin:10px 0 17px}
.founder-copy>p{font-size:14px;line-height:1.8;color:#746a66;max-width:650px;white-space:pre-line}
.founder-sign{margin:22px 0}.founder-sign span{display:block;font:italic 27px var(--font-heading);color:var(--accent)}.founder-sign small{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#867b77;margin-top:4px}
.social-section{background:#f3e6e7;padding-top:42px!important;padding-bottom:42px!important}
.social-panel{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.social-panel h2{font-size:34px;margin:7px 0}.social-panel p{font-size:11px;color:#766a66;max-width:580px}
.social-buttons{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.social-buttons a{background:#fff;border:1px solid #ddc9c9;border-radius:999px;padding:11px 15px;font-size:10px;font-weight:800}
.social-empty{font-size:10px;color:#897a76}
.footer-social{display:flex;gap:13px}.footer-social a{display:inline!important;margin:0!important;color:#d8cfd0!important}
@media(max-width:900px){
.reviews-grid{grid-template-columns:1fr 1fr}
.founder-grid{grid-template-columns:1fr;gap:28px}.founder-photo{max-width:520px;margin:auto}
.social-panel{grid-template-columns:1fr}.social-buttons{justify-content:flex-start}
}
@media(max-width:600px){
.reviews-grid{grid-template-columns:1fr}
.review-card{min-height:auto}
.founder-copy h2{font-size:36px}
.social-panel h2{font-size:29px}
}
/* =========================================================
V5.5 REAL CUSTOMER REVIEWS + LAST-PAGE SLIDER
========================================================= */
.reviews-section{background:#fbf7f5;border-top:1px solid var(--border)}
.reviews-carousel{position:relative;padding:0 48px}
.reviews-track{display:flex;gap:14px;overflow:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory}
.review-card{flex:0 0 calc((100% - 28px)/3);scroll-snap-align:start}
.review-topline{display:flex;align-items:center;justify-content:space-between;gap:8px}
.review-stars span{color:#dfd4d1}
.verified-pill{font-size:8px;font-weight:800;background:#e8efe5;color:#4c674a;border-radius:999px;padding:6px 8px;white-space:nowrap}
.review-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border:1px solid var(--border);border-radius:50%;background:#fff;z-index:3;cursor:pointer}
.review-prev{left:0}.review-next{right:0}
.review-dots{display:flex;justify-content:center;gap:6px;margin-top:18px}.review-dots button{width:7px;height:7px;border:0;border-radius:999px;background:#d9cecb;padding:0;cursor:pointer}.review-dots button.active{width:24px;background:var(--accent)}
.account-page{background:#faf7f5}.account-topline{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.account-topline h1{font:500 48px/1 var(--font-heading);margin:7px 0}.account-topline p{color:#7b706c}
.customer-dashboard-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px;align-items:start}.customer-side-card,.account-panel{background:#fff;border:1px solid var(--border);border-radius:20px;padding:20px}.customer-side-card{position:sticky;top:95px}.customer-avatar-large{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#f0dfe3;color:var(--accent);font:500 25px var(--font-heading)}.customer-side-card h2{font:500 23px var(--font-heading);margin:12px 0 5px}.customer-side-card p{font-size:10px;line-height:1.6;color:#7b706c}.account-links{display:grid;margin-top:18px;border-top:1px solid var(--border);padding-top:11px}.account-links a{font-size:10px;font-weight:750;padding:7px 0}.customer-main{display:grid;gap:16px}.account-panel-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:16px}.account-panel-head h2{font:500 29px var(--font-heading);margin:5px 0}.account-panel-head>span{font-size:9px;color:#81746f}.account-order-list{display:grid}.account-order-list article{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--border)}.account-order-list article:last-child{border:0}.account-order-list b,.account-order-list span{font-size:12px}.account-order-list small,.account-order-list em{display:block;font-size:9px;color:#897c78;font-style:normal;margin-top:3px}.account-order-list article>div:last-child{text-align:right}.account-help{font-size:10px;line-height:1.6;color:#827570}.star-rating-input{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}.star-rating-input input{display:none}.star-rating-input label{font-size:30px;color:#ded2cf;cursor:pointer;line-height:1}.star-rating-input input:checked~label,.star-rating-input label:hover,.star-rating-input label:hover~label{color:var(--accent)}.my-review-list{display:grid;gap:10px}.my-review-list article{border:1px solid var(--border);border-radius:14px;padding:14px}.my-review-list b{display:block;font-size:12px;margin:5px 0}.my-review-list p{font-size:11px;line-height:1.55;color:#6f6561}.review-status{display:inline-block;border-radius:999px;padding:6px 9px;font-size:8px;font-weight:800}.review-status.approved{background:#e7efe4;color:#50684f}.review-status.pending{background:#f4e5d6;color:#886241}
@media(max-width:960px){.review-card{flex-basis:calc((100% - 14px)/2)}.customer-dashboard-grid{grid-template-columns:1fr}.customer-side-card{position:static}}
@media(max-width:640px){.reviews-carousel{padding:0 36px}.review-card{flex-basis:100%}.account-topline{align-items:flex-start;flex-direction:column}.account-topline h1{font-size:38px}.review-arrow{width:32px;height:32px}.customer-side-card,.account-panel{padding:16px}}
/* =========================================================
V5.6 HERO STUDIO — CLEAN / NO BACKGROUND PANEL
========================================================= */
.home-hero.hero-clean{background:var(--surface);border-bottom:1px solid var(--border)}
.hero-clean .hero-slider{min-height:500px}
.hero-clean .hero-slide{padding:28px 0 16px;background:transparent}
.hero-clean .hero-slide-grid{grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.hero-clean .hero-copy{position:relative;z-index:3}
.hero-clean .hero-copy-center{text-align:center}.hero-clean .hero-copy-center .actions,.hero-clean .hero-copy-center .hero-mini-proof{justify-content:center}.hero-clean .hero-copy-center p{margin-inline:auto}
.hero-clean .hero-copy h1{font-size:clamp(43px,4.9vw,66px)}
.hero-clean .hero-visual-clean{min-height:430px;position:relative;display:grid;place-items:center;isolation:isolate;overflow:visible}
.hero-clean .hero-accent-blob{position:absolute;width:70%;aspect-ratio:1;border-radius:48% 52% 56% 44% / 44% 48% 52% 56%;background:color-mix(in srgb,var(--slide-accent) 18%,transparent);filter:blur(.1px);z-index:-2;transform:rotate(-8deg)}
.hero-clean .hero-main-media{width:min(67%,440px);aspect-ratio:1;margin:0;position:relative;z-index:2;display:grid;place-items:center;transform:scale(var(--hero-scale));transform-origin:center}
.hero-clean .hero-main-media img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 24px rgba(56,38,42,.14))}
.hero-clean .hero-secondary-media{position:absolute;width:28%;max-width:190px;aspect-ratio:1;margin:0;right:5%;bottom:8%;z-index:3;display:grid;place-items:center;transform:rotate(5deg)}
.hero-clean .hero-secondary-media img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(56,38,42,.13))}
.hero-clean .hero-floating-note{position:absolute;left:5%;bottom:7%;z-index:5;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border:1px solid color-mix(in srgb,var(--slide-accent) 30%,var(--border));border-radius:15px;padding:11px 14px;box-shadow:0 13px 28px rgba(56,38,42,.08);max-width:185px}
.hero-clean .hero-floating-note small{display:block;color:color-mix(in srgb,var(--slide-accent) 78%,var(--text));font-size:7.5px;letter-spacing:.13em;margin-bottom:3px}
.hero-clean .hero-floating-note b{font:500 15px/1.2 var(--font-heading)}
.hero-clean .hero-decoration{position:absolute;inset:0;pointer-events:none;z-index:-1}
.hero-clean .hero-decoration i{position:absolute;display:block;color:var(--slide-accent)}
.hero-clean .hero-decoration i:nth-child(1){left:14%;top:15%}.hero-clean .hero-decoration i:nth-child(2){right:14%;top:20%}.hero-clean .hero-decoration i:nth-child(3){left:13%;bottom:17%}.hero-clean .hero-decoration i:nth-child(4){right:19%;bottom:12%}
.hero-clean .decor-sparkles i:before,.hero-clean .decor-stars i:before{content:"✦";font-size:17px;opacity:.62}.hero-clean .decor-sparkles i:nth-child(2):before{font-size:9px}.hero-clean .decor-sparkles i:nth-child(3):before{content:"·";font-size:35px}.hero-clean .decor-stars i:before{content:"★";font-size:12px}
.hero-clean .decor-paws i:before{content:"♡";font-size:18px;opacity:.52}.hero-clean .decor-paws i:nth-child(2):before{content:"•";font-size:25px}
.hero-clean .decor-hearts i:before{content:"♡";font-size:21px;opacity:.6}
.hero-clean .decor-flowers i:before{content:"✿";font-size:18px;opacity:.55}
.hero-clean .decor-leaves i:before{content:"❧";font-size:22px;opacity:.58}
.hero-clean .decor-moons i:before{content:"☾";font-size:22px;opacity:.58}
.hero-clean .decor-sun i:before{content:"☀";font-size:20px;opacity:.48}
.hero-clean .decor-confetti i:before{content:"✦";font-size:13px;opacity:.55}.hero-clean .decor-confetti i:nth-child(2):before{content:"●";font-size:8px}.hero-clean .decor-confetti i:nth-child(3):before{content:"◆";font-size:9px}
.hero-clean .decor-stitches i{width:38px;height:1px;border-top:1px dashed var(--slide-accent);opacity:.55}.hero-clean .decor-stitches i:before{content:"";}
/* layout options */
.hero-clean .hero-layout-collage .hero-main-media{width:min(61%,410px);transform:translate(-4%,-2%) scale(var(--hero-scale))}
.hero-clean .hero-layout-collage .hero-secondary-media{width:34%;right:2%;bottom:3%;transform:rotate(7deg)}
.hero-clean .hero-layout-editorial .hero-main-media{width:min(70%,460px);aspect-ratio:4/5;padding:10px;background:#fff;border:1px solid var(--border);border-radius:18px;transform:rotate(-1.4deg) scale(var(--hero-scale));box-shadow:0 20px 42px rgba(56,38,42,.08)}
.hero-clean .hero-layout-editorial .hero-main-media img{filter:none}
.hero-clean .hero-layout-editorial .hero-secondary-media{width:26%;right:0;bottom:3%;background:#fff;border:1px solid var(--border);padding:6px;border-radius:13px}
.hero-clean .hero-layout-minimal .hero-accent-blob{width:55%;opacity:.55}
.hero-clean .hero-layout-minimal .hero-main-media{width:min(72%,470px)}
.hero-clean .hero-layout-minimal .hero-decoration{opacity:.55}
/* position options */
.hero-clean .hero-pos-left .hero-main-media{translate:-8% 0}.hero-clean .hero-pos-right .hero-main-media{translate:8% 0}
/* animations — deliberately subtle */
@keyframes tnHeroFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes tnHeroRise{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
@keyframes tnHeroSlide{from{opacity:0;translate:26px 0}to{opacity:1;translate:0 0}}
@keyframes tnHeroZoom{from{opacity:.35;scale:.96}to{opacity:1;scale:1}}
.hero-clean .hero-slide.is-active.hero-animation-float .hero-main-media{animation:tnHeroFloat 5.5s ease-in-out infinite}
.hero-clean .hero-slide.is-active.hero-animation-float .hero-secondary-media{animation:tnHeroFloat 6.2s ease-in-out .5s infinite reverse}
.hero-clean .hero-slide.is-active.hero-animation-soft-rise .hero-main-media,.hero-clean .hero-slide.is-active.hero-animation-soft-rise .hero-copy{animation:tnHeroRise .55s ease both}
.hero-clean .hero-slide.is-active.hero-animation-soft-rise .hero-secondary-media{animation:tnHeroRise .65s ease .12s both}
.hero-clean .hero-slide.is-active.hero-animation-slide-in .hero-main-media{animation:tnHeroSlide .55s ease both}.hero-clean .hero-slide.is-active.hero-animation-slide-in .hero-copy{animation:tnHeroRise .5s ease both}
.hero-clean .hero-slide.is-active.hero-animation-soft-zoom .hero-main-media{animation:tnHeroZoom .6s ease both}
@media(prefers-reduced-motion:reduce){.hero-clean .hero-slide.is-active .hero-main-media,.hero-clean .hero-slide.is-active .hero-secondary-media,.hero-clean .hero-slide.is-active .hero-copy{animation:none!important}}
@media(max-width:900px){
.hero-clean .hero-slide-grid{grid-template-columns:1fr;gap:20px}
.hero-clean .hero-visual-clean{min-height:350px}
.hero-clean .hero-main-media{width:min(66%,400px)}
.hero-clean .hero-secondary-media{width:24%;right:9%}
.hero-clean .hero-floating-note{left:10%}
}
@media(max-width:560px){
.hero-clean .hero-slide{padding-top:20px}
.hero-clean .hero-visual-clean{min-height:300px}
.hero-clean .hero-main-media{width:min(73%,330px)}
.hero-clean .hero-secondary-media{width:27%;right:4%;bottom:5%}
.hero-clean .hero-floating-note{left:4%;bottom:3%;padding:9px 11px}
.hero-clean .hero-accent-blob{width:78%}
}
/* V5.7 hero media frames */
.hero-clean .hero-frame-thin{
background:#fff;
border:1px solid color-mix(in srgb,var(--border) 84%,#cbb);
border-radius:10px;
padding:4px;
box-shadow:0 8px 22px rgba(55,40,43,.045);
}
.hero-clean .hero-frame-soft{
background:#fff;
border:1px solid color-mix(in srgb,var(--slide-accent) 22%,var(--border));
border-radius:14px;
padding:5px;
box-shadow:0 14px 30px rgba(55,40,43,.09);
}
.hero-clean .hero-frame-none{background:transparent;border:0;padding:0;box-shadow:none}
.hero-clean .hero-frame-thin img,.hero-clean .hero-frame-soft img{border-radius:6px}
.hero-clean .hero-secondary-media.hero-frame-thin,.hero-clean .hero-secondary-media.hero-frame-soft{padding:3px}
/* =========================================================
V5.8 HERO SIZE + UNIFORM FRAME FIX
========================================================= */
/* Same narrow frame on ALL sides.
2mm visual feel without a bulky picture-frame effect. */
.hero-clean .hero-frame-thin{
box-sizing:border-box !important;
border:2px solid color-mix(in srgb,var(--border) 92%,#cfc5c2) !important;
padding:6px !important;
border-radius:10px !important;
background:#fff !important;
box-shadow:0 8px 20px rgba(55,40,43,.045) !important;
}
.hero-clean .hero-frame-thin img{
width:100% !important;
height:100% !important;
border-radius:5px !important;
}
/* The second photo uses the exact same border/padding proportion. */
.hero-clean .hero-secondary-media.hero-frame-thin{
padding:6px !important;
border-width:2px !important;
}
/* Business & Logo was visually too tall/large.
Keep it on the same footprint as pet / personalised slides. */
.hero-clean .hero-template-business-logo .hero-main-media{
width:min(57%,390px) !important;
aspect-ratio:1/1 !important;
max-height:390px !important;
transform:scale(var(--hero-scale)) !important;
}
.hero-clean .hero-template-business-logo .hero-main-media img{
object-fit:contain !important;
}
.hero-clean .hero-template-business-logo .hero-secondary-media{
width:23% !important;
max-width:145px !important;
right:8% !important;
bottom:8% !important;
}
.hero-clean .hero-template-business-logo .hero-accent-blob{
width:60% !important;
}
.hero-clean .hero-template-business-logo .hero-floating-note{
left:8% !important;
bottom:8% !important;
}
/* Keep every hero media block from becoming taller than the copy area. */
.hero-clean .hero-main-media{
max-height:410px;
}
.hero-clean .hero-secondary-media{
max-height:160px;
}
/* Slightly tighter hero overall so every slide feels consistent. */
.hero-clean .hero-visual-clean{
min-height:400px;
}
.hero-clean .hero-slider{
min-height:475px;
}
@media(max-width:900px){
.hero-clean .hero-template-business-logo .hero-main-media{
width:min(62%,360px) !important;
max-height:360px !important;
}
.hero-clean .hero-visual-clean{min-height:330px}
}
@media(max-width:560px){
.hero-clean .hero-template-business-logo .hero-main-media{
width:min(72%,310px) !important;
max-height:310px !important;
}
.hero-clean .hero-secondary-media.hero-frame-thin{
padding:4px !important;
}
}
/* =========================================================
V5.9 — UNIFORM RESPONSIVE HERO CAROUSEL
Outer frame is LOCKED for every slide.
3 slides, 4 slides, or 10 slides all render the same stage size.
========================================================= */
.home-hero.hero-clean{
overflow:hidden !important;
}
.hero-clean .hero-slider{
min-height:548px !important;
}
.hero-clean .hero-slide{
padding:26px 0 18px !important;
min-height:548px !important;
}
.hero-clean .hero-slide-grid{
grid-template-columns:minmax(0,.95fr) minmax(460px,1.05fr) !important;
gap:clamp(30px,3.5vw,58px) !important;
min-height:500px !important;
align-items:center !important;
}
.hero-clean .hero-copy{
min-width:0 !important;
align-self:center !important;
}
.hero-clean .hero-copy h1{
font-size:clamp(42px,4.15vw,62px) !important;
line-height:.99 !important;
max-width:690px !important;
margin:12px 0 16px !important;
}
.hero-clean .hero-copy p{
font-size:14px !important;
line-height:1.65 !important;
max-width:590px !important;
}
/* One stage size for EVERY hero template. */
.hero-clean .hero-visual-clean{
width:100% !important;
height:500px !important;
min-height:500px !important;
max-height:500px !important;
position:relative !important;
display:grid !important;
place-items:center !important;
overflow:visible !important;
}
/* Fixed square OUTER frame. Never scale/resize this element. */
.hero-clean .hero-main-media,
.hero-clean .hero-layout-floating .hero-main-media,
.hero-clean .hero-layout-collage .hero-main-media,
.hero-clean .hero-layout-editorial .hero-main-media,
.hero-clean .hero-layout-minimal .hero-main-media,
.hero-clean .hero-template-business-logo .hero-main-media{
width:clamp(390px,27vw,485px) !important;
height:clamp(390px,27vw,485px) !important;
max-width:485px !important;
max-height:485px !important;
aspect-ratio:1/1 !important;
margin:0 !important;
position:relative !important;
inset:auto !important;
transform:none !important;
translate:0 0 !important;
rotate:0deg !important;
box-sizing:border-box !important;
display:block !important;
overflow:hidden !important;
}
/* Exact equal "about 2mm" mat on all 4 sides:
1px hairline + 7px equal inner spacing. */
.hero-clean .hero-main-media.hero-frame-thin,
.hero-clean .hero-secondary-media.hero-frame-thin{
background:#fff !important;
border:1px solid #ddd3cf !important;
padding:7px !important;
border-radius:11px !important;
box-shadow:0 10px 28px rgba(55,40,43,.06) !important;
}
.hero-clean .hero-main-media.hero-frame-soft,
.hero-clean .hero-secondary-media.hero-frame-soft{
background:#fff !important;
border:1px solid color-mix(in srgb,var(--slide-accent) 28%,#ddd3cf) !important;
padding:7px !important;
border-radius:13px !important;
box-shadow:0 16px 34px rgba(55,40,43,.11) !important;
}
.hero-clean .hero-main-media.hero-frame-none,
.hero-clean .hero-secondary-media.hero-frame-none{
border:0 !important;
padding:0 !important;
background:transparent !important;
box-shadow:none !important;
}
/* IMPORTANT: image_scale affects only the picture inside the fixed frame. */
.hero-clean .hero-main-media > img{
display:block !important;
width:100% !important;
height:100% !important;
max-width:none !important;
max-height:none !important;
border-radius:6px !important;
transform:scale(var(--hero-image-scale,1)) !important;
transform-origin:center !important;
transition:transform .25s ease !important;
}
/* Editorial no longer changes outer aspect ratio. */
.hero-clean .hero-layout-editorial .hero-main-media{
padding:7px !important;
transform:none !important;
}
/* Same secondary frame size on every slide. */
.hero-clean .hero-secondary-media,
.hero-clean .hero-layout-floating .hero-secondary-media,
.hero-clean .hero-layout-collage .hero-secondary-media,
.hero-clean .hero-layout-editorial .hero-secondary-media,
.hero-clean .hero-template-business-logo .hero-secondary-media{
position:absolute !important;
width:154px !important;
height:154px !important;
max-width:154px !important;
max-height:154px !important;
aspect-ratio:1/1 !important;
right:3% !important;
bottom:5% !important;
left:auto !important;
top:auto !important;
margin:0 !important;
transform:rotate(4deg) !important;
translate:0 0 !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
.hero-clean .hero-secondary-media > img{
display:block !important;
width:100% !important;
height:100% !important;
object-fit:contain !important;
max-width:none !important;
max-height:none !important;
border-radius:5px !important;
}
/* Layout styles may change composition but NEVER outer main frame size. */
.hero-clean .hero-layout-collage .hero-secondary-media{
right:1% !important;
bottom:3% !important;
transform:rotate(6deg) !important;
}
.hero-clean .hero-layout-editorial .hero-secondary-media{
right:2% !important;
bottom:4% !important;
}
.hero-clean .hero-layout-minimal .hero-secondary-media{
display:none !important;
}
.hero-clean .hero-pos-left .hero-main-media{
translate:-4% 0 !important;
}
.hero-clean .hero-pos-right .hero-main-media{
translate:4% 0 !important;
}
/* Decorations stay inside the same visual stage. */
.hero-clean .hero-accent-blob{
width:68% !important;
max-width:470px !important;
}
.hero-clean .hero-template-business-logo .hero-accent-blob{
width:68% !important;
}
.hero-clean .hero-floating-note,
.hero-clean .hero-template-business-logo .hero-floating-note{
left:4% !important;
bottom:5% !important;
max-width:180px !important;
}
/* Float animation moves the fixed frame but never changes its size. */
@keyframes tnUniformFloat{
0%,100%{translate:0 0}
50%{translate:0 -7px}
}
.hero-clean .hero-slide.is-active.hero-animation-float .hero-main-media{
animation:tnUniformFloat 5.5s ease-in-out infinite !important;
}
.hero-clean .hero-slide.is-active.hero-animation-float .hero-secondary-media{
animation:tnUniformFloat 6.1s ease-in-out .45s infinite reverse !important;
}
/* Tablet */
@media(max-width:1100px){
.hero-clean .hero-slide-grid{
grid-template-columns:minmax(0,.95fr) minmax(390px,1.05fr) !important;
gap:28px !important;
}
.hero-clean .hero-visual-clean{
height:430px !important;
min-height:430px !important;
max-height:430px !important;
}
.hero-clean .hero-main-media,
.hero-clean .hero-layout-floating .hero-main-media,
.hero-clean .hero-layout-collage .hero-main-media,
.hero-clean .hero-layout-editorial .hero-main-media,
.hero-clean .hero-layout-minimal .hero-main-media,
.hero-clean .hero-template-business-logo .hero-main-media{
width:385px !important;
height:385px !important;
max-width:385px !important;
max-height:385px !important;
}
.hero-clean .hero-secondary-media,
.hero-clean .hero-template-business-logo .hero-secondary-media{
width:126px !important;
height:126px !important;
max-width:126px !important;
max-height:126px !important;
}
.hero-clean .hero-copy h1{
font-size:clamp(38px,4vw,52px) !important;
}
}
/* Stack before it becomes cramped. */
@media(max-width:900px){
.hero-clean .hero-slider,
.hero-clean .hero-slide{
min-height:auto !important;
}
.hero-clean .hero-slide-grid{
grid-template-columns:1fr !important;
gap:18px !important;
min-height:0 !important;
}
.hero-clean .hero-copy{
max-width:720px !important;
}
.hero-clean .hero-visual-clean{
height:390px !important;
min-height:390px !important;
max-height:390px !important;
}
.hero-clean .hero-main-media,
.hero-clean .hero-layout-floating .hero-main-media,
.hero-clean .hero-layout-collage .hero-main-media,
.hero-clean .hero-layout-editorial .hero-main-media,
.hero-clean .hero-layout-minimal .hero-main-media,
.hero-clean .hero-template-business-logo .hero-main-media{
width:350px !important;
height:350px !important;
max-width:350px !important;
max-height:350px !important;
}
.hero-clean .hero-secondary-media,
.hero-clean .hero-template-business-logo .hero-secondary-media{
width:112px !important;
height:112px !important;
max-width:112px !important;
max-height:112px !important;
right:12% !important;
}
}
/* Phone */
@media(max-width:560px){
.hero-clean .hero-slide{
padding:18px 0 12px !important;
}
.hero-clean .hero-copy h1{
font-size:clamp(34px,10vw,43px) !important;
}
.hero-clean .hero-copy p{
font-size:12.5px !important;
}
.hero-clean .hero-visual-clean{
height:330px !important;
min-height:330px !important;
max-height:330px !important;
}
.hero-clean .hero-main-media,
.hero-clean .hero-layout-floating .hero-main-media,
.hero-clean .hero-layout-collage .hero-main-media,
.hero-clean .hero-layout-editorial .hero-main-media,
.hero-clean .hero-layout-minimal .hero-main-media,
.hero-clean .hero-template-business-logo .hero-main-media{
width:min(82vw,305px) !important;
height:min(82vw,305px) !important;
max-width:305px !important;
max-height:305px !important;
}
.hero-clean .hero-secondary-media,
.hero-clean .hero-template-business-logo .hero-secondary-media{
width:92px !important;
height:92px !important;
max-width:92px !important;
max-height:92px !important;
right:4% !important;
bottom:4% !important;
}
.hero-clean .hero-main-media.hero-frame-thin,
.hero-clean .hero-secondary-media.hero-frame-thin{
padding:5px !important;
}
.hero-clean .hero-floating-note{
font-size:9px !important;
max-width:150px !important;
}
}
/* V5.10 carousel visibility hardening */
.hero-clean .hero-slide{display:none !important}
.hero-clean .hero-slide.is-active{display:block !important}
.hero-clean[data-slide-count="1"] .hero-controls{opacity:.45}
/* =========================================================
V5.11 NESTED MENU / SUBCATEGORY FRONTEND
========================================================= */
.mega-column .mega-sub{padding-left:12px!important;font-size:9px!important;color:#8a7e7a!important;position:relative}
.mega-column .mega-sub:before{content:"";position:absolute;left:2px;top:50%;width:5px;border-top:1px solid var(--border)}
.simple-trigger{position:relative}
.simple-dropdown{display:none;position:absolute;top:calc(var(--header-height) - 1px);left:0;min-width:235px;background:#fff;border:1px solid var(--border);border-radius:0 0 12px 12px;padding:9px;box-shadow:0 18px 38px rgba(44,34,37,.10);z-index:100}
.simple-trigger:hover>.simple-dropdown{display:block}
.simple-dropdown-item{position:relative}
.simple-dropdown-item>a{display:flex;padding:9px 10px;border-radius:7px;font-size:10px;font-weight:700}
.simple-dropdown-item>a:hover{background:#faf4f3}
.simple-submenu{margin:-2px 0 5px 10px;padding-left:10px;border-left:1px solid var(--border)}
.simple-submenu a{display:block;padding:6px 8px;font-size:9px;color:#81746f}
.simple-submenu a:hover{color:var(--accent)}
@media(max-width:900px){
.simple-trigger{height:auto!important;display:block!important}
.simple-trigger>.simple-dropdown{display:block!important;position:static!important;min-width:0!important;border:0!important;box-shadow:none!important;padding:0 0 4px 12px!important;background:transparent!important}
.simple-dropdown-item>a{padding:6px 0!important;font-size:10px!important}
.simple-submenu{margin-left:8px}
.mega-column .mega-sub{padding-left:8px!important}
}
/* V5.11 subcategory collection cards */
.subcategory-section{padding-top:48px!important;padding-bottom:48px!important;background:#fbf8f6}
.subcategory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.subcategory-grid>a{display:block}.subcategory-grid>a>div{aspect-ratio:1;border:1px solid var(--border);border-radius:17px;background:#fff;overflow:hidden}.subcategory-grid img{width:100%;height:100%;object-fit:contain}.subcategory-grid b{display:block;font-size:13px;margin-top:9px}.subcategory-grid small{display:block;font-size:9px;color:#857975;margin-top:2px}
@media(max-width:900px){.subcategory-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.subcategory-grid{gap:10px}.subcategory-grid>a>div{border-radius:13px}}
/* =========================================================
V5.12 LIVE GLOBAL LAYOUT CONTROLS
========================================================= */
.container{width:min(var(--container-width,1240px),calc(100% - 44px))}
.section{padding-top:var(--section-space,54px);padding-bottom:var(--section-space,54px)}
.btn{border-radius:var(--button-radius,999px)}
.product-grid{grid-template-columns:repeat(var(--product-grid-cols,4),minmax(0,1fr))!important}
.store-product-card,.category-art,.product-main-photo,.cart-total-card{border-radius:var(--product-card-radius,18px)}
body.hide-product-descriptions .store-product-info>p{display:none!important}
body.shadow-none .store-product-card,body.shadow-none .category-art{box-shadow:none!important}
body.shadow-soft .store-product-card{box-shadow:0 8px 24px rgba(55,40,43,.045)}
body.shadow-medium .store-product-card{box-shadow:0 14px 34px rgba(55,40,43,.085)}
.customizer-stage-v4{height:var(--customizer-height,520px)!important;min-height:var(--customizer-height,520px)!important}
/* V5.12 storefront pricing UI */
.qty-discount-hint{display:block;margin-top:8px;color:#7d716d;font-size:9px;line-height:1.4}
.placement-pill small{font-size:8px;opacity:.72}
.second-placement-box{display:grid;grid-template-columns:1fr minmax(180px,.75fr);gap:12px;align-items:center;background:#fbf6f3;border:1px solid var(--border);border-radius:13px;padding:11px;margin:12px 0}
.second-placement-box b,.second-placement-box small{display:block}.second-placement-box b{font-size:11px}.second-placement-box small{font-size:8.5px;color:#7d716d;margin-top:3px}.second-placement-box select{width:100%;padding:9px;border:1px solid var(--border);border-radius:9px;background:#fff}
.pricing-v512{display:grid!important;grid-template-columns:1fr auto!important;gap:10px 18px!important;align-items:start!important}
.pricing-v512 em{display:block;font-style:normal;font-size:8px;text-decoration:line-through;color:#9b8f8b;margin-top:2px}
.live-pricing-breakdown{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);gap:6px;border-top:1px solid var(--border);padding-top:9px}
.live-pricing-breakdown span{display:flex;justify-content:space-between;gap:8px;font-size:8.5px;color:#776d69}.live-pricing-breakdown b{color:var(--text)}
.pricing-total-line{grid-column:1/-1;font-size:10px!important;padding-top:5px;border-top:1px dashed var(--border)}
.pricing-saving{grid-column:1/-1;background:#e9f0e6;color:#4e6d4e;border-radius:8px;padding:7px 9px;font-size:8.5px;font-weight:700}
.cart-item-v512{grid-template-columns:82px minmax(0,1fr) 85px 105px!important;align-items:center!important}
.cart-item-copy>small{display:block;color:#817570;margin-top:3px}.cart-personalisation{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}.cart-personalisation span{font-size:8px;background:#f5efed;border-radius:999px;padding:4px 6px}.cart-saving{font-size:8px;color:#537151;background:#edf4eb;padding:5px 7px;border-radius:6px;margin-top:7px;width:max-content;max-width:100%}.cart-remove{display:inline-block;font-size:8px;margin-top:7px;color:#9b5c68}.cart-qty-label{display:block;font-size:8px;margin-bottom:4px}.cart-line-price{text-align:right}.cart-line-price small,.cart-line-price b{display:block}.cart-line-price small{font-size:8px;color:#847974;margin-bottom:4px}
@media(max-width:900px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.second-placement-box{grid-template-columns:1fr}.cart-item-v512{grid-template-columns:70px minmax(0,1fr) 70px!important}.cart-line-price{grid-column:2/-1}}
@media(max-width:520px){.container{width:min(var(--container-width,1240px),calc(100% - 26px))}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.live-pricing-breakdown{grid-template-columns:1fr}.pricing-total-line{grid-column:auto}.customizer-stage-v4{height:min(var(--customizer-height,520px),390px)!important;min-height:min(var(--customizer-height,520px),390px)!important}}
/* =========================================================
V5.13 BASIC PRODUCT STOREFRONT
========================================================= */
.basic-product-layout-front{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(390px,.94fr);gap:clamp(32px,5vw,70px);align-items:start}.basic-product-gallery{min-width:0}.basic-product-main{aspect-ratio:1;position:relative;border:1px solid var(--border);border-radius:var(--product-card-radius,18px);background:#fff;overflow:hidden}.basic-product-main>img{width:100%;height:100%;object-fit:contain}.basic-product-main>span{position:absolute;left:12px;top:12px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 8px;font-size:8px;font-weight:750}.basic-gallery-thumbs{display:flex;gap:7px;margin-top:9px;overflow:auto}.basic-gallery-thumbs button{width:70px;height:70px;border:1px solid var(--border);border-radius:9px;background:#fff;padding:3px;cursor:pointer}.basic-gallery-thumbs button.active{border-color:var(--accent)}.basic-gallery-thumbs img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.basic-product-buy{position:sticky;top:calc(var(--header-height,58px) + 18px)}.basic-breadcrumb{font-size:8.5px;color:#877c78}.basic-product-buy h1{font:400 clamp(36px,4vw,54px)/1.02 var(--font-heading);margin:10px 0 12px}.basic-price-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.basic-price-row>b{font:400 25px var(--font-heading)}.basic-price-row del{font-size:12px;color:#9b918d}.basic-price-row>span{background:#e9f2e6;color:#50704f;border-radius:999px;padding:5px 7px;font-size:8px;font-weight:750}.basic-short{font-size:13px;line-height:1.65;color:#675e5a;margin:17px 0}
.basic-buy-form{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:16px 0;margin-top:16px}.basic-option{margin-bottom:15px}.basic-option-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px}.basic-option-head b{font-size:10px}.basic-option-head span{font-size:9px;color:#827773}.basic-size-options{display:flex;gap:6px;flex-wrap:wrap}.basic-size-options button{min-width:43px;height:38px;border:1px solid var(--border);background:#fff;border-radius:8px;cursor:pointer;font-size:9px}.basic-size-options button.active{background:var(--dark);border-color:var(--dark);color:#fff}.basic-color-options{display:flex;gap:8px;flex-wrap:wrap}.basic-color-options button{width:31px;height:31px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px var(--border);cursor:pointer}.basic-color-options button.active{box-shadow:0 0 0 2px var(--dark)}
.basic-purchase-row{display:grid;grid-template-columns:120px 1fr;gap:8px;margin-top:17px}.basic-qty{display:grid;grid-template-columns:34px 1fr 34px;border:1px solid var(--border);border-radius:var(--button-radius,999px);overflow:hidden;background:#fff}.basic-qty button{border:0;background:#fff;cursor:pointer}.basic-qty input{width:100%;border:0;text-align:center;outline:0}.basic-add-cart{width:100%}.basic-add-cart:disabled{opacity:.5}.basic-stock-note{font-size:8.5px;color:#817671;margin-top:7px}.basic-product-points{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px}.basic-product-points span{font-size:8px;background:#f6f1ee;border-radius:999px;padding:5px 7px}.basic-description-card{max-width:850px;margin:65px auto 0;border-top:1px solid var(--border);padding-top:35px}.basic-description-card h2{font:400 32px var(--font-heading);margin:5px 0 12px}.basic-description-card>div:last-child{font-size:12.5px;line-height:1.8;color:#655c58}
@media(max-width:900px){.basic-product-layout-front{grid-template-columns:1fr}.basic-product-buy{position:static}.basic-product-main{max-height:650px}.basic-purchase-row{grid-template-columns:110px 1fr}}
@media(max-width:520px){.basic-product-buy h1{font-size:36px}.basic-purchase-row{grid-template-columns:1fr}.basic-qty{height:42px}.basic-gallery-thumbs button{width:58px;height:58px}}
/* =========================================================
V5.14 MULTI-ITEM CUSTOM PRODUCT BUILDER
========================================================= */
.custom-product-v514{padding-top:38px!important}.custom-product-intro{display:flex;justify-content:space-between;gap:30px;align-items:flex-end;margin-bottom:22px}.custom-breadcrumb{font-size:8px;color:#887d79}.custom-product-intro h1{font:400 clamp(38px,4.7vw,62px)/.98 var(--font-heading);margin:8px 0 10px;max-width:780px}.custom-product-intro p{font-size:12px;line-height:1.65;color:#716763;max-width:760px;margin:0}.custom-start-price{text-align:right;min-width:165px}.custom-start-price span,.custom-start-price small{display:block}.custom-start-price span{font-size:7px;letter-spacing:.1em;color:#918783;text-transform:uppercase}.custom-start-price b{display:block;font:400 27px var(--font-heading);margin:3px 0}.custom-start-price small{font-size:7.5px;color:#817671;line-height:1.4}
.multi-customizer-shell{display:grid;grid-template-columns:minmax(430px,1.08fr) minmax(440px,.92fr);gap:18px;align-items:start}.multi-preview-column{position:sticky;top:calc(var(--header-height,58px) + 14px)}.multi-view-tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px}.multi-view-tabs button{border:1px solid var(--border);background:#fff;border-radius:999px;padding:7px 10px;font-size:8px;cursor:pointer}.multi-view-tabs button.active{background:var(--dark);border-color:var(--dark);color:#fff}
.multi-preview-stage{height:var(--customizer-height,520px);min-height:430px;position:relative;overflow:hidden;border:1px solid var(--border);border-radius:20px;background:linear-gradient(145deg,#f5f1ed,#fff);touch-action:none}.multi-base-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.multi-design-layer{position:absolute;left:34%;top:34%;width:100px;height:100px;cursor:grab;touch-action:none;transform-origin:center;display:none}.multi-design-layer:active{cursor:grabbing}.multi-design-layer img{width:100%;height:100%;object-fit:contain;pointer-events:none}.multi-line-preview{position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);font-size:7px;font-weight:800;white-space:nowrap;background:#ffffffd9;border:1px solid var(--border);padding:3px 5px;border-radius:999px}.multi-text-preview{position:absolute;left:52%;top:42%;transform:translate(-50%,-50%);font:700 18px Georgia,serif;text-shadow:0 1px 2px #0002;white-space:nowrap;display:none}.preview-view-label{position:absolute;right:11px;bottom:10px;background:#ffffffdb;border:1px solid var(--border);border-radius:999px;padding:5px 7px;font-size:7px;font-weight:800}.preview-tools-row{display:flex;gap:5px;margin-top:7px}.preview-tools-row button{border:1px solid var(--border);background:#fff;border-radius:7px;padding:7px 9px;font-size:7.5px;cursor:pointer}.preview-tools-row button:disabled{opacity:.4}.preview-note{font-size:7.5px;color:#857b77;line-height:1.45;margin-top:8px}
.multi-controls-column{min-width:0}.bundle-items-head{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 12px}.bundle-items-head span,.bundle-items-head b{display:block}.bundle-items-head span{font-size:6.5px;letter-spacing:.1em;color:#9b655a}.bundle-items-head b{font-size:10px;margin-top:2px}.bundle-item-tabs{display:flex;gap:5px;overflow:auto;padding:7px 0}.bundle-item-tabs>button{display:grid;grid-template-columns:24px minmax(85px,1fr);gap:6px;align-items:center;min-width:125px;border:1px solid var(--border);background:#fff;border-radius:8px;padding:6px;text-align:left;cursor:pointer}.bundle-item-tabs>button>span{width:23px;height:23px;border-radius:50%;background:#f4efec;display:grid;place-items:center;font-size:7px;font-weight:800}.bundle-item-tabs>button b,.bundle-item-tabs>button small{display:block}.bundle-item-tabs>button b{font-size:8px}.bundle-item-tabs>button small{font-size:6.5px;color:#8b817d;margin-top:2px}.bundle-item-tabs>button.active{border-color:#d78b79;background:#fff6f1}.bundle-item-tabs>button.active>span{background:#EE6C57;color:#fff}
.item-editor-card{background:#fff;border:1px solid var(--border);border-radius:13px;overflow:hidden}.item-editor-title{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;background:linear-gradient(120deg,#fff8ee,#f5fbfa);border-bottom:1px solid var(--border)}.item-editor-title span{display:block;font-size:6px;letter-spacing:.12em;color:#D15B48;font-weight:850}.item-editor-title h2{font:400 19px var(--font-heading);margin:3px 0 0}.text-danger-btn{border:0;background:none;color:#a15858;font-size:7px;text-decoration:underline;cursor:pointer}.text-danger-btn:disabled{opacity:.35}
.custom-step{display:grid;grid-template-columns:33px 1fr;gap:8px;padding:13px 14px;border-bottom:1px solid #eee8e5}.custom-step:last-child{border-bottom:0}.step-number{width:29px;height:29px;border-radius:8px;background:#f6eeea;color:#B75C49;display:grid;place-items:center;font-size:7px;font-weight:850}.step-body{min-width:0}.step-body h3{font-size:10px;margin:2px 0 9px}.step-body p{font-size:7.5px;color:#857a76;margin:2px 0}.inline-stock{font-size:7px;color:#748078;margin-top:5px}
.decoration-method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.decoration-method-grid button{display:grid;gap:3px;text-align:left;border:1px solid var(--border);border-radius:9px;background:#fff;padding:8px;cursor:pointer;min-height:78px}.decoration-method-grid button span{font-size:8px;font-weight:800}.decoration-method-grid button small{font-size:6.7px;line-height:1.35;color:#827773}.decoration-method-grid button b{font-size:7.5px;color:#466e70;margin-top:auto}.decoration-method-grid button.active{border-color:#EE6C57;background:#fff6f1;box-shadow:inset 0 0 0 1px #EE6C57}.line-color-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:8px;background:#f7f5f4;border-radius:8px}.line-color-row>label{font-size:8px;font-weight:750}.line-color-row>div{display:flex;gap:5px}.line-color-row button{border:1px solid var(--border);background:#fff;border-radius:999px;padding:6px 9px;font-size:7px;cursor:pointer}.line-color-row button.active{background:#222;color:#fff;border-color:#222}
.artwork-upload-control{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;border:1px dashed #d8cfca;border-radius:9px;padding:9px;background:#fcfaf9}.artwork-upload-control b,.artwork-upload-control small{display:block}.artwork-upload-control b{font-size:8px}.artwork-upload-control small{font-size:6.7px;color:#8d827d;margin-top:2px}.artwork-status{font-size:7px;color:#9b7066;margin-top:5px}.artwork-status.ready{color:#47744d}
.placement-choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.placement-choice-grid button{border:1px solid var(--border);background:#fff;border-radius:8px;padding:7px;text-align:left;cursor:pointer}.placement-choice-grid span,.placement-choice-grid small{display:block}.placement-choice-grid span{font-size:7.5px;font-weight:750}.placement-choice-grid small{font-size:6.5px;color:#7e8a7e;margin-top:2px}.placement-choice-grid button.active{background:#edf7f4;border-color:#75aaa7}
.transform-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.transform-controls label{display:grid;grid-template-columns:auto 1fr 32px;gap:6px;align-items:center;font-size:7px}.transform-controls output{text-align:right;font-size:7px}
.additional-step{background:#fffcf7}.additional-title{display:flex;justify-content:space-between;align-items:center;gap:10px}.mini-switch{position:relative;width:36px;height:20px}.mini-switch input{display:none}.mini-switch span{position:absolute;inset:0;background:#d8d9d8;border-radius:999px;cursor:pointer}.mini-switch span:after{content:"";position:absolute;width:14px;height:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.16s}.mini-switch input:checked+span{background:#218D91}.mini-switch input:checked+span:after{translate:16px 0}.additional-discount-note{font-size:7px;color:#4f7757;background:#edf5eb;border-radius:7px;padding:6px 8px;margin-top:7px}
.bundle-review-card{margin-top:18px;border:1px solid var(--border);border-radius:14px;background:#fff;overflow:hidden}.bundle-review-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:17px 18px;background:linear-gradient(115deg,#fff 0%,#fff8ec 55%,#eef9f7 100%)}.bundle-review-head h2{font:400 27px var(--font-heading);margin:4px 0}.bundle-review-head p{font-size:8.5px;color:#817773;margin:0}.bundle-live-total{text-align:right;min-width:170px}.bundle-live-total span,.bundle-live-total small{display:block}.bundle-live-total span{font-size:6.5px;letter-spacing:.1em}.bundle-live-total b{display:block;font:400 28px var(--font-heading);margin:3px 0}.bundle-live-total small{font-size:7px;color:#4f7655}.bundle-summary-list{display:grid}.bundle-summary-list article{display:grid;grid-template-columns:34px minmax(0,1fr) 130px;gap:10px;align-items:center;padding:11px 17px;border-top:1px solid #eee9e6}.summary-num{width:30px;height:30px;border-radius:8px;background:#f6efeb;display:grid;place-items:center;font-size:8px;font-weight:850}.summary-copy b,.summary-copy span{display:block}.summary-copy b{font-size:9px}.summary-copy span{font-size:7px;color:#817671;margin-top:2px}.summary-price{text-align:right}.summary-price b,.summary-price small{display:block}.summary-price b{font-size:11px}.summary-price small{font-size:6.5px;color:#4e7454;margin-top:2px}.summary-price button{border:0;background:none;text-decoration:underline;color:#987066;font-size:7px;cursor:pointer;margin-top:3px}.bundle-bottom-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 17px;border-top:1px solid var(--border)}.bundle-assurances{display:flex;gap:5px;flex-wrap:wrap}.bundle-assurances span{font-size:6.8px;background:#f6f2ef;border-radius:999px;padding:4px 6px}.bundle-add-btn{min-width:280px}
.custom-product-description{max-width:850px;margin:65px auto 0;border-top:1px solid var(--border);padding-top:34px}.custom-product-description h2{font:400 32px var(--font-heading);margin:4px 0 12px}.custom-product-description>div:last-child{font-size:12px;line-height:1.8;color:#665d59}
@media(max-width:1050px){.multi-customizer-shell{grid-template-columns:1fr}.multi-preview-column{position:static}.multi-preview-stage{height:min(var(--customizer-height,520px),560px)}.decoration-method-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.custom-product-intro,.bundle-review-head,.bundle-bottom-row{flex-direction:column;align-items:flex-start}.custom-start-price,.bundle-live-total{text-align:left}.multi-preview-stage{height:390px;min-height:390px}.decoration-method-grid,.placement-choice-grid{grid-template-columns:1fr}.transform-controls{grid-template-columns:1fr}.bundle-summary-list article{grid-template-columns:30px 1fr}.summary-price{grid-column:2;text-align:left}.bundle-add-btn{width:100%;min-width:0}.bundle-bottom-row{align-items:stretch}.bundle-items-head{align-items:flex-start;flex-direction:column}}
/* =========================================================
V5.14 CART / CHECKOUT / CUSTOMER ACCOUNT
========================================================= */
.cart-item-v514.bundle-cart-item{grid-template-columns:82px minmax(0,1fr) 78px 110px!important;align-items:start!important}.cart-bundle-details{display:grid;gap:5px;margin-top:8px}.cart-bundle-details article{display:grid;grid-template-columns:23px 1fr auto;gap:6px;align-items:center;background:#faf7f5;border:1px solid #eee4df;border-radius:7px;padding:6px}.cart-bundle-details article>span{width:21px;height:21px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:7px;font-weight:850}.cart-bundle-details b,.cart-bundle-details small{display:block}.cart-bundle-details b{font-size:7.5px}.cart-bundle-details small{font-size:6.5px;color:#847975;margin-top:1px}.cart-bundle-details a{font-size:6.5px;color:#9a5f55;text-decoration:underline}.cart-edit-design{display:inline-block;margin-top:7px;font-size:8px;font-weight:800;color:#287578}.bundle-qty-display{display:block;font-size:14px}.bundle-qty-help{display:block;font-size:6.5px;color:#8d8380;margin-top:2px}.cart-account-note{display:block;font-size:7px;line-height:1.5;color:#827773;margin-top:10px}
.checkout-account-ready{display:grid;grid-template-columns:31px 1fr;gap:8px;align-items:center;background:#edf7f3;border:1px solid #d6e9e2;border-radius:9px;padding:9px 10px;margin-bottom:18px}.checkout-account-ready>span{width:29px;height:29px;border-radius:50%;background:#218D91;color:#fff;display:grid;place-items:center}.checkout-account-ready b,.checkout-account-ready small{display:block}.checkout-account-ready b{font-size:9px}.checkout-account-ready small{font-size:7px;color:#627873;margin-top:2px}
.checkout-account-create{border:1px solid var(--border);border-radius:10px;padding:10px 11px;margin-bottom:18px;background:#fffaf5}.checkout-account-toggle{display:grid;grid-template-columns:18px 1fr;gap:7px;align-items:start;cursor:pointer}.checkout-account-toggle b,.checkout-account-toggle small{display:block}.checkout-account-toggle b{font-size:9px}.checkout-account-toggle small{font-size:7px;color:#817671;margin-top:2px;line-height:1.45}.checkout-account-create #accountPasswordFields{margin-top:10px;padding-top:9px;border-top:1px solid #eee5df}.checkout-login-note{font-size:7px;color:#837974}.checkout-login-note a{text-decoration:underline}
.checkout-bundle-summary{align-items:start!important}.checkout-bundle-summary>img{width:60px;height:60px;object-fit:cover;border-radius:12px;background:#f3ece8}.checkout-item-mini-list{display:grid;gap:2px;margin-top:5px}.checkout-item-mini-list>span{display:block;font-size:6.5px;color:#817671;line-height:1.35}.checkout-item-mini-list>span>b{color:#594f4c}.checkout-saving{color:#4f7757!important;font-weight:750}
.account-order-list>a{display:block;color:inherit}.account-order-list>a article{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}.account-order-list>a:hover article{background:#faf7f5}
.account-order-page{padding-top:38px!important}.account-order-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;background:linear-gradient(115deg,#fff8ec,#eff9f7);border:1px solid var(--border);border-radius:13px;padding:18px 20px;margin-bottom:14px}.account-order-head>div:first-child>a{font-size:7px;color:#846f68}.account-order-head h1{font:400 38px var(--font-heading);margin:6px 0 2px}.account-order-head p{font-size:8px;color:#817671;margin:0}.account-order-head>div:last-child{text-align:right}.account-order-head>div:last-child span,.account-order-head>div:last-child small{display:block;font-size:7px}.account-order-head>div:last-child b{display:block;font:400 25px var(--font-heading);margin:3px 0}
.account-order-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:14px;align-items:start}.account-order-product{background:#fff;border:1px solid var(--border);border-radius:11px;overflow:hidden;margin-bottom:10px}.account-order-product-head{padding:11px 13px;background:#faf8f6}.account-order-product-head h2{font-size:11px;margin:0}.account-order-product-head p{font-size:7px;color:#817671;margin:2px 0 0}.account-bundle-items{display:grid}.account-bundle-items article{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px 12px;border-top:1px solid #eee9e6}.account-item-number{width:29px;height:29px;border-radius:8px;background:#f5eeea;display:grid;place-items:center;font-size:8px;font-weight:850}.account-item-detail b,.account-item-detail span{display:block}.account-item-detail b{font-size:8.5px}.account-item-detail span{font-size:6.8px;color:#817671;margin-top:2px}.account-item-side{text-align:right}.account-item-side>b{display:block;font-size:9px;margin-top:5px}.account-order-sidebar{position:sticky;top:calc(var(--header-height,58px) + 14px);display:grid;gap:8px}.account-order-sidebar section{background:#fff;border:1px solid var(--border);border-radius:10px;padding:11px}.account-order-sidebar h2{font-size:9px;margin:0 0 6px}.account-order-sidebar p{font-size:8px;line-height:1.6;color:#756b67;margin:0}
@media(max-width:850px){.account-order-grid{grid-template-columns:1fr}.account-order-sidebar{position:static;grid-template-columns:repeat(3,1fr)}.cart-item-v514.bundle-cart-item{grid-template-columns:70px minmax(0,1fr) 70px!important}.cart-item-v514.bundle-cart-item .cart-line-price{grid-column:2/-1}}
@media(max-width:600px){.account-order-head{align-items:flex-start;flex-direction:column}.account-order-head>div:last-child{text-align:left}.account-order-sidebar{grid-template-columns:1fr}.account-bundle-items article{grid-template-columns:28px 1fr}.account-item-side{grid-column:2;text-align:left}.cart-bundle-details article{grid-template-columns:22px 1fr}.cart-bundle-details article>a{grid-column:2}}
.bundle-qty-control{display:flex;align-items:center;gap:6px;margin-left:auto}.bundle-qty-control>span{font-size:7px;font-weight:800;color:#6d7778}.bundle-qty-control input{width:58px;height:32px;border:1px solid var(--border);border-radius:7px;text-align:center;background:#fff}
@media(max-width:720px){.bundle-qty-control{margin-left:0}}
.cart-bundle-item-side{text-align:right}.cart-bundle-item-side>b,.cart-bundle-item-side>a{display:block}.cart-bundle-item-side>b{font-size:7.5px}.cart-bundle-item-side>a{margin-top:2px}
/* =========================================================
V5.14.2 CUSTOMIZER PRO
Compact, readable, production-ready customer UI
========================================================= */
.custom-product-v514{
padding-top:26px!important;
font-size:14px;
}
.custom-product-v514 [hidden]{display:none!important}
.custom-product-intro{
align-items:center!important;
margin-bottom:14px!important;
padding:0 2px;
}
.custom-product-intro h1{
font-size:clamp(32px,3.4vw,50px)!important;
line-height:1!important;
margin:6px 0 7px!important;
}
.custom-product-intro p{
max-width:760px!important;
font-size:12px!important;
line-height:1.55!important;
}
.custom-start-price{
min-width:150px!important;
padding:9px 11px;
border:1px solid var(--border);
border-radius:11px;
background:#fff;
}
.custom-start-price b{font-size:24px!important}
.custom-start-price small{font-size:7px!important}
.customizer-pro-form{
display:block;
}
.customizer-pro-shell{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(470px,.92fr);
gap:16px;
align-items:start;
}
.customizer-pro-preview{
position:sticky;
top:calc(var(--header-height,58px) + 12px);
min-width:0;
}
.customizer-preview-top{
display:flex;
justify-content:space-between;
gap:10px;
align-items:center;
min-height:48px;
padding:9px 11px;
border:1px solid var(--border);
border-bottom:0;
border-radius:12px 12px 0 0;
background:#fff;
}
.customizer-preview-top span,
.customizer-preview-top b{display:block}
.customizer-preview-top>div:first-child>span{
font-size:7px;
letter-spacing:.11em;
color:#b06457;
font-weight:800;
}
.customizer-preview-top>div:first-child>b{
margin-top:2px;
font-size:11px;
}
.customizer-ready-badge{
display:flex;
align-items:center;
gap:5px;
font-size:7px;
color:#8b7f7a;
}
.customizer-ready-badge i{
width:7px;height:7px;border-radius:50%;
background:#c7c7c7;
}
.customizer-ready-badge.ready{color:#3d7562}
.customizer-ready-badge.ready i{
background:#48a173;
box-shadow:0 0 0 3px #48a17318;
}
.customizer-view-tabs{
display:flex;
gap:5px;
padding:7px 9px;
border-left:1px solid var(--border);
border-right:1px solid var(--border);
background:#faf8f6;
overflow:auto;
}
.customizer-view-tabs button{
flex:0 0 auto;
border:1px solid var(--border);
background:#fff;
border-radius:7px;
padding:7px 10px;
font-size:8px;
font-weight:700;
color:#635955;
cursor:pointer;
}
.customizer-view-tabs button.active{
background:var(--dark);
border-color:var(--dark);
color:#fff;
}
.customizer-preview-stage{
height:clamp(430px,var(--customizer-height,520px),650px);
min-height:430px;
position:relative;
overflow:hidden;
border:1px solid var(--border);
background:
radial-gradient(circle at 50% 42%,#fff 0 48%,#f8f5f2 100%);
touch-action:none;
}
.customizer-garment-image{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
user-select:none;
pointer-events:none;
}
.customizer-design-layer{
position:absolute;
left:43%;
top:38%;
width:100px;
height:100px;
display:none;
transform:translate(-50%,-50%);
transform-origin:center;
cursor:grab;
touch-action:none;
z-index:4;
}
.customizer-design-layer:active{cursor:grabbing}
.customizer-design-layer img{
width:100%;
height:100%;
object-fit:contain;
pointer-events:none;
}
.customizer-method-label{
position:absolute;
left:50%;
bottom:-22px;
transform:translateX(-50%);
white-space:nowrap;
padding:4px 6px;
border:1px solid var(--border);
border-radius:999px;
background:#ffffffec;
font-size:6.5px;
font-weight:800;
color:#5f5551;
}
.customizer-text-preview{
position:absolute;
transform:translate(-50%,-50%);
z-index:5;
font:700 18px Georgia,serif;
white-space:nowrap;
text-shadow:0 1px 2px #0002;
}
.customizer-view-label{
position:absolute;
right:10px;
bottom:10px;
padding:5px 7px;
background:#ffffffed;
border:1px solid var(--border);
border-radius:999px;
font-size:7px;
font-weight:800;
z-index:7;
}
.customizer-empty-art{
position:absolute;
left:50%;
bottom:18px;
transform:translateX(-50%);
z-index:6;
padding:7px 10px;
border:1px dashed #d9cec7;
background:#ffffffde;
border-radius:8px;
color:#8a7b75;
font-size:7.5px;
}
.customizer-preview-footer{
display:flex;
justify-content:space-between;
gap:10px;
align-items:center;
padding:8px 9px;
border:1px solid var(--border);
border-top:0;
border-radius:0 0 12px 12px;
background:#fff;
}
.customizer-preview-footer>small{
max-width:390px;
text-align:right;
color:#8a7d78;
font-size:6.7px;
line-height:1.4;
}
.customizer-preview-tools{
display:flex;
gap:5px;
flex-wrap:wrap;
}
.customizer-preview-tools button{
border:1px solid var(--border);
background:#fff;
border-radius:6px;
padding:6px 8px;
font-size:7px;
font-weight:700;
cursor:pointer;
}
.customizer-preview-tools button:hover{background:#f7f4f2}
.customizer-preview-tools button:disabled{opacity:.35}
.customizer-pro-controls{
min-width:0;
}
.customizer-bundle-bar{
display:grid;
grid-template-columns:minmax(110px,1fr) 68px auto auto;
gap:6px;
align-items:center;
padding:9px;
border:1px solid var(--border);
border-radius:11px;
background:#fff;
}
.customizer-bundle-title span,
.customizer-bundle-title b{display:block}
.customizer-bundle-title span{
font-size:6.3px;
letter-spacing:.11em;
color:#b15e50;
font-weight:800;
}
.customizer-bundle-title b{
margin-top:2px;
font-size:10px;
}
.customizer-quantity{
display:grid;
grid-template-columns:auto 42px;
gap:5px;
align-items:center;
}
.customizer-quantity span{
font-size:7px;
font-weight:750;
}
.customizer-quantity input{
width:42px;
height:32px;
border:1px solid var(--border);
border-radius:7px;
text-align:center;
background:#fff;
font-weight:750;
}
.customizer-mini-action{
border:1px solid var(--border);
background:#fff;
border-radius:7px;
height:32px;
padding:0 9px;
font-size:7px;
font-weight:750;
white-space:nowrap;
cursor:pointer;
}
.customizer-mini-action.primary{
background:#f3faf7;
border-color:#cfe2dc;
color:#2b7267;
}
.customizer-mini-action:disabled{opacity:.4}
.customizer-item-tabs{
display:flex;
gap:5px;
overflow:auto;
padding:7px 0;
}
.customizer-item-tabs>button{
min-width:116px;
display:grid;
grid-template-columns:24px 1fr;
gap:6px;
align-items:center;
padding:6px;
border:1px solid var(--border);
border-radius:8px;
background:#fff;
text-align:left;
cursor:pointer;
}
.customizer-item-tabs>button>span{
width:23px;
height:23px;
border-radius:7px;
display:grid;
place-items:center;
background:#f4efeb;
font-size:7px;
font-weight:800;
}
.customizer-item-tabs>button b,
.customizer-item-tabs>button small{display:block}
.customizer-item-tabs>button b{font-size:7.5px}
.customizer-item-tabs>button small{
margin-top:1px;
color:#8a7f7a;
font-size:6.2px;
}
.customizer-item-tabs>button.active{
border-color:#e39a89;
background:#fff7f3;
}
.customizer-item-tabs>button.active>span{
background:#EE6C57;
color:#fff;
}
.customizer-config-card{
overflow:hidden;
border:1px solid var(--border);
border-radius:12px;
background:#fff;
}
.customizer-config-head{
display:flex;
justify-content:space-between;
gap:10px;
align-items:center;
padding:11px 12px;
background:linear-gradient(110deg,#fff8ee,#f3faf8);
border-bottom:1px solid var(--border);
}
.customizer-config-head>div:first-child>span{
display:block;
font-size:6.2px;
letter-spacing:.11em;
color:#b15c4d;
font-weight:850;
}
.customizer-config-head h2{
margin:2px 0 0;
font:400 19px var(--font-heading);
}
.customizer-config-head-side{
display:flex;
align-items:center;
gap:8px;
}
.customizer-config-head-side>b{
font:400 18px var(--font-heading);
}
.customizer-config-head-side>button{
border:0;
background:none;
color:#9c625d;
text-decoration:underline;
font-size:6.5px;
cursor:pointer;
}
.customizer-config-head-side>button:disabled{opacity:.35}
.customizer-section{
padding:11px 12px;
border-bottom:1px solid #eee9e6;
}
.customizer-section-head{
display:grid;
grid-template-columns:28px 1fr;
gap:7px;
align-items:center;
margin-bottom:8px;
}
.customizer-section-head>span{
width:27px;
height:27px;
border-radius:7px;
display:grid;
place-items:center;
background:#f5eeea;
color:#b45b49;
font-size:7px;
font-weight:850;
}
.customizer-section-head b,
.customizer-section-head small{display:block}
.customizer-section-head b{font-size:9px}
.customizer-section-head small{
margin-top:1px;
color:#8a817c;
font-size:6.4px;
line-height:1.35;
}
.customizer-section-head.additional-head{
grid-template-columns:28px 1fr auto;
}
.customizer-field-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:7px;
}
.customizer-field{
display:grid;
gap:4px;
}
.customizer-field>span{
font-size:6.8px;
color:#5f686b;
font-weight:750;
}
.customizer-field select,
.customizer-field input{
width:100%;
min-width:0;
height:35px;
border:1px solid #dcdfe0;
border-radius:7px;
background:#fff;
padding:0 8px;
font-size:8px;
color:#352f2d;
}
.customizer-color-select{
display:grid;
grid-template-columns:28px 1fr;
gap:5px;
}
.customizer-color-select>i{
width:28px;
height:35px;
border:1px solid #dcdfe0;
border-radius:7px;
background:#888;
}
.customizer-stock-line{
margin-top:5px;
font-size:6.5px;
color:#4b7560;
}
.customizer-stock-line.error{
color:#a14e4e;
font-weight:750;
}
.customizer-methods{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:6px;
}
.customizer-methods button{
min-height:72px;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:3px;
padding:8px;
border:1px solid #e2dedb;
border-radius:8px;
background:#fff;
text-align:left;
cursor:pointer;
}
.customizer-methods button span{
font-size:7.4px;
font-weight:800;
}
.customizer-methods button small{
color:#8b817c;
font-size:6px;
line-height:1.3;
}
.customizer-methods button b{
margin-top:auto;
font-size:6.6px;
color:#28716e;
}
.customizer-methods button.active{
border-color:#df8672;
background:#fff5f0;
box-shadow:inset 0 0 0 1px #df8672;
}
.customizer-line-colours{
display:flex;
justify-content:space-between;
gap:8px;
align-items:center;
margin-top:7px;
padding:7px 8px;
border-radius:7px;
background:#f7f5f3;
}
.customizer-line-colours>span{
font-size:7px;
font-weight:750;
}
.customizer-line-colours>div{
display:flex;
gap:5px;
}
.customizer-line-colours button{
border:1px solid #dcd8d5;
background:#fff;
border-radius:999px;
padding:5px 8px;
font-size:6.5px;
cursor:pointer;
}
.customizer-line-colours button.active{
background:#282323;
border-color:#282323;
color:#fff;
}
.customizer-artwork-box{
border:1px dashed #d5cbc5;
border-radius:8px;
background:#fcfaf8;
overflow:hidden;
}
.customizer-upload-inner{
display:grid;
grid-template-columns:30px 1fr auto;
gap:8px;
align-items:center;
padding:9px;
}
.customizer-upload-icon{
width:29px;
height:29px;
display:grid;
place-items:center;
border-radius:7px;
background:#f0f7f5;
color:#26736b;
font-size:13px;
}
.customizer-upload-copy b,
.customizer-upload-copy small{display:block}
.customizer-upload-copy b{font-size:7.5px}
.customizer-upload-copy small{
margin-top:2px;
color:#8b817d;
font-size:6.1px;
line-height:1.3;
}
.customizer-upload-inner button{
border:1px solid #d8dddc;
background:#fff;
border-radius:7px;
padding:7px 9px;
font-size:6.6px;
font-weight:750;
cursor:pointer;
}
.customizer-reuse-row{
display:grid;
grid-template-columns:auto 1fr;
gap:7px;
align-items:center;
margin-top:6px;
}
.customizer-reuse-row label{
font-size:6.5px;
color:#6d7578;
}
.customizer-reuse-row select{
width:100%;
height:32px;
border:1px solid #dcdfe0;
border-radius:7px;
background:#fff;
padding:0 7px;
font-size:7px;
}
.customizer-artwork-status{
margin-top:5px;
font-size:6.5px;
color:#9a736b;
}
.customizer-artwork-status.ok{color:#44744e}
.customizer-artwork-status.warn{color:#956b18}
.customizer-placement-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:5px;
}
.customizer-placement-grid button{
min-height:47px;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
gap:2px;
border:1px solid #e1ddda;
border-radius:7px;
background:#fff;
padding:6px 7px;
text-align:left;
cursor:pointer;
}
.customizer-placement-grid button span{
font-size:7px;
font-weight:750;
}
.customizer-placement-grid button small{
font-size:6px;
color:#70817a;
}
.customizer-placement-grid button.active{
background:#edf7f4;
border-color:#6fa5a0;
box-shadow:inset 0 0 0 1px #6fa5a0;
}
.customizer-adjustments{
margin-top:7px;
border:1px solid #e6e2df;
border-radius:7px;
background:#faf9f8;
}
.customizer-adjustments summary,
.customizer-notes summary{
display:flex;
justify-content:space-between;
gap:7px;
align-items:center;
padding:7px 8px;
list-style:none;
cursor:pointer;
font-size:6.8px;
font-weight:750;
}
.customizer-adjustments summary::-webkit-details-marker,
.customizer-notes summary::-webkit-details-marker{display:none}
.customizer-adjustments summary>span,
.customizer-notes summary>span{
color:#9a8e88;
font-size:6px;
font-weight:500;
}
.customizer-adjustments>div{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
padding:4px 8px 8px;
}
.customizer-adjustments label{
display:grid;
grid-template-columns:auto 1fr 30px;
gap:6px;
align-items:center;
font-size:6.5px;
}
.customizer-adjustments input{width:100%}
.customizer-adjustments output{
text-align:right;
font-size:6.3px;
}
.customizer-switch{
position:relative;
width:36px;
height:20px;
}
.customizer-switch input{
position:absolute;
opacity:0;
pointer-events:none;
}
.customizer-switch i{
position:absolute;
inset:0;
border-radius:999px;
background:#d4d6d5;
cursor:pointer;
transition:.18s;
}
.customizer-switch i:after{
content:"";
position:absolute;
left:3px;
top:3px;
width:14px;
height:14px;
border-radius:50%;
background:#fff;
transition:.18s;
}
.customizer-switch input:checked+i{
background:#218D91;
}
.customizer-switch input:checked+i:after{
transform:translateX(16px);
}
.customizer-additional{
display:grid;
gap:7px;
padding-left:35px;
}
.customizer-discount-note{
padding:6px 7px;
border-radius:7px;
background:#edf5eb;
color:#4b714f;
font-size:6.3px;
}
.customizer-notes{
margin:8px 12px 10px;
border:1px solid #e7e2df;
border-radius:7px;
background:#faf9f8;
}
.customizer-notes textarea{
width:calc(100% - 16px);
margin:0 8px 8px;
border:1px solid #dcdfe0;
border-radius:7px;
padding:8px;
resize:vertical;
font:400 8px var(--font-body);
}
.customizer-live-price{
display:grid;
grid-template-columns:92px minmax(110px,1fr) minmax(180px,1.3fr);
gap:8px;
align-items:center;
padding:10px 12px;
border-top:1px solid var(--border);
background:#fffdfb;
position:sticky;
bottom:0;
z-index:10;
}
.customizer-live-price>div>span,
.customizer-live-price>div>b,
.customizer-live-price>div>small{display:block}
.customizer-live-price>div>span{
font-size:5.8px;
letter-spacing:.08em;
color:#8b817d;
}
.customizer-live-price>div>b{
margin-top:2px;
font:400 18px var(--font-heading);
}
.customizer-live-price>div>small{
margin-top:1px;
color:#4b754f;
font-size:6px;
}
.customizer-add-button{
min-height:43px;
display:flex;
justify-content:space-between;
gap:10px;
align-items:center;
border:0;
border-radius:9px;
background:var(--dark);
color:#fff;
padding:0 12px;
cursor:pointer;
}
.customizer-add-button span{
font-size:8px;
font-weight:800;
}
.customizer-add-button b{
font:400 16px var(--font-heading);
}
.customizer-add-button:disabled{opacity:.55}
.customizer-review{
margin-top:12px;
border:1px solid var(--border);
border-radius:11px;
background:#fff;
overflow:hidden;
}
.customizer-review>summary{
display:flex;
justify-content:space-between;
gap:10px;
align-items:center;
padding:10px 12px;
cursor:pointer;
list-style:none;
background:#faf8f6;
}
.customizer-review>summary::-webkit-details-marker{display:none}
.customizer-review>summary span,
.customizer-review>summary b{display:block}
.customizer-review>summary span{
font-size:5.8px;
letter-spacing:.1em;
color:#a36155;
font-weight:800;
}
.customizer-review>summary b{
margin-top:2px;
font-size:9px;
}
.customizer-review>summary strong{
font:400 19px var(--font-heading);
}
.customizer-summary-list{
display:grid;
}
.customizer-summary-list article{
display:grid;
grid-template-columns:28px minmax(0,1fr) 90px;
gap:8px;
align-items:center;
padding:8px 11px;
border-top:1px solid #eee9e6;
}
.customizer-summary-number{
width:27px;
height:27px;
display:grid;
place-items:center;
border-radius:7px;
background:#f4eeea;
font-size:7px;
font-weight:850;
}
.customizer-summary-copy b,
.customizer-summary-copy small,
.customizer-summary-side b,
.customizer-summary-side small{display:block}
.customizer-summary-copy b{font-size:7.5px}
.customizer-summary-copy small{
margin-top:1px;
color:#817773;
font-size:6.2px;
}
.customizer-summary-side{text-align:right}
.customizer-summary-side b{font-size:8.5px}
.customizer-summary-side small{
color:#4f7552;
font-size:5.8px;
}
.customizer-summary-side button{
border:0;
background:none;
color:#9a655a;
text-decoration:underline;
font-size:6.2px;
cursor:pointer;
}
.customizer-review-note{
padding:7px 11px;
border-top:1px solid #eee9e6;
color:#6e766f;
font-size:6.3px;
}
@media(max-width:1120px){
.customizer-pro-shell{
grid-template-columns:minmax(0,1fr) minmax(430px,.95fr);
}
.customizer-preview-stage{
height:500px;
}
.customizer-methods{
grid-template-columns:1fr;
}
.customizer-methods button{
min-height:0;
display:grid;
grid-template-columns:1fr auto;
}
.customizer-methods button small{
grid-column:1;
}
.customizer-methods button b{
grid-column:2;
grid-row:1/3;
align-self:center;
}
}
@media(max-width:900px){
.customizer-pro-shell{
grid-template-columns:1fr;
}
.customizer-pro-preview{
position:static;
}
.customizer-preview-stage{
height:min(520px,70vw);
min-height:390px;
}
.customizer-methods{
grid-template-columns:repeat(3,1fr);
}
}
@media(max-width:650px){
.custom-product-intro{
align-items:flex-start!important;
flex-direction:column;
}
.custom-start-price{
text-align:left!important;
width:100%;
}
.customizer-preview-stage{
height:390px;
min-height:360px;
}
.customizer-preview-footer{
align-items:flex-start;
flex-direction:column;
}
.customizer-preview-footer>small{
text-align:left;
}
.customizer-bundle-bar{
grid-template-columns:1fr 62px;
}
.customizer-bundle-bar .customizer-mini-action{
width:100%;
}
.customizer-methods,
.customizer-placement-grid,
.customizer-field-grid{
grid-template-columns:1fr 1fr;
}
.customizer-methods button{
display:flex;
min-height:72px;
}
.customizer-live-price{
grid-template-columns:1fr 1fr;
}
.customizer-add-button{
grid-column:1/-1;
}
.customizer-adjustments>div{
grid-template-columns:1fr;
}
.customizer-summary-list article{
grid-template-columns:27px 1fr;
}
.customizer-summary-side{
grid-column:2;
text-align:left;
}
}
@media(max-width:430px){
.customizer-methods,
.customizer-placement-grid,
.customizer-field-grid{
grid-template-columns:1fr;
}
.customizer-additional{
padding-left:0;
}
}
/* =========================================================
V5.14.3 — EDITOR DESIGN #1
Clean professional rail + live text studio
========================================================= */
.editor-one-layout{
display:grid;
grid-template-columns:92px minmax(0,1fr);
gap:12px;
align-items:start;
}
.editor-one-rail{
position:sticky;
top:calc(var(--header-height,58px) + 12px);
display:grid;
gap:5px;
padding:8px;
border:1px solid var(--border);
border-radius:12px;
background:#fff;
}
.editor-one-rail button{
min-height:62px;
display:grid;
place-items:center;
align-content:center;
gap:4px;
border:0;
border-radius:9px;
background:#fff;
color:#665c58;
cursor:pointer;
}
.editor-one-rail button>span{
font-size:18px;
line-height:1;
}
.editor-one-rail button>b{
font-size:6.8px;
font-weight:750;
}
.editor-one-rail button:hover{
background:#faf6f2;
}
.editor-one-rail button.active{
background:#f8efe7;
color:#2f2927;
}
.editor-one-layout .customizer-pro-shell{
min-width:0;
}
.customizer-methods button{
min-height:68px;
}
.customizer-methods button>b{
display:none!important;
}
.editor-text-section{
background:linear-gradient(180deg,#fff 0%,#fffdfb 100%);
}
.editor-text-controls{
display:grid;
gap:8px;
padding-left:35px;
}
.editor-text-wide input{
font-size:11px;
letter-spacing:.02em;
}
.editor-text-grid{
display:grid;
grid-template-columns:1.25fr .8fr .75fr 1.1fr;
gap:6px;
}
.editor-text-formatbar{
display:grid;
grid-template-columns:1.15fr .75fr 1fr;
gap:7px;
align-items:end;
}
.editor-text-formatbar>label,
.editor-text-align{
min-height:49px;
border:1px solid #e1ddda;
border-radius:8px;
background:#faf9f8;
padding:7px;
}
.editor-text-formatbar>label>span,
.editor-text-align>span{
display:block;
margin-bottom:5px;
font-size:6.4px;
font-weight:750;
color:#6d6561;
}
.editor-text-formatbar>label:first-child{
display:grid;
grid-template-columns:auto 30px 36px 30px;
gap:4px;
align-items:center;
}
.editor-text-formatbar>label:first-child>span{
grid-column:1/-1;
}
.editor-text-formatbar button,
.editor-text-align button{
height:28px;
border:1px solid #dbd7d4;
border-radius:6px;
background:#fff;
cursor:pointer;
font-size:9px;
}
.editor-text-formatbar output{
display:grid;
place-items:center;
height:28px;
border:1px solid #dbd7d4;
border-radius:6px;
background:#fff;
font-size:7.5px;
font-weight:800;
}
.editor-text-colour input{
width:100%;
height:28px;
border:0;
padding:0;
background:transparent;
}
.editor-text-align>div{
display:flex;
gap:4px;
}
.editor-text-align button{
width:31px;
transform:none;
}
.editor-text-align button:nth-of-type(1){text-align:left}
.editor-text-align button:nth-of-type(2){text-align:center}
.editor-text-align button:nth-of-type(3){text-align:right}
.editor-text-align button.active{
background:#2f2927;
color:#fff;
border-color:#2f2927;
}
.editor-text-help{
padding:6px 8px;
border-radius:7px;
background:#f1f7f5;
color:#4f716b;
font-size:6.3px;
}
.customizer-primary-text-preview{
position:absolute;
z-index:8;
display:none;
transform:translate(-50%,-50%);
min-width:40px;
max-width:220px;
padding:2px 4px;
white-space:pre-wrap;
line-height:1.05;
cursor:grab;
touch-action:none;
user-select:none;
text-shadow:0 1px 2px rgba(0,0,0,.08);
}
.customizer-primary-text-preview:active{
cursor:grabbing;
}
#editor-summary{
scroll-margin-top:80px;
}
#editor-garment,#editor-text,#editor-artwork,#editor-placement,#editor-options{
scroll-margin-top:82px;
}
/* Keep method cards premium and uncluttered — no visible method price. */
.customizer-methods button{
justify-content:flex-start;
}
.customizer-methods button span{
font-size:7.6px;
}
.customizer-methods button small{
margin-top:2px;
}
.customizer-methods button.active:after{
content:"Selected";
margin-top:auto;
font-size:5.8px;
font-weight:800;
letter-spacing:.05em;
color:#9c604e;
}
/* Slightly stronger hierarchy for Design #1 */
.customizer-config-card{
box-shadow:0 8px 24px rgba(54,43,39,.035);
}
.customizer-preview-stage{
background:linear-gradient(145deg,#fcfbfa,#f7f3ef);
}
.customizer-add-button{
box-shadow:0 6px 16px rgba(47,41,39,.12);
}
.customizer-bundle-bar,
.customizer-config-card,
.customizer-pro-preview{
scrollbar-width:thin;
}
@media(max-width:1120px){
.editor-one-layout{
grid-template-columns:72px minmax(0,1fr);
}
.editor-one-rail{
padding:6px;
}
.editor-one-rail button{
min-height:55px;
}
.editor-text-grid{
grid-template-columns:1fr 1fr;
}
}
@media(max-width:900px){
.editor-one-layout{
grid-template-columns:1fr;
}
.editor-one-rail{
position:sticky;
top:0;
z-index:35;
grid-template-columns:repeat(6,1fr);
gap:3px;
padding:5px;
overflow:auto;
}
.editor-one-rail button{
min-width:64px;
min-height:45px;
gap:2px;
}
.editor-one-rail button>span{
font-size:14px;
}
.editor-text-controls{
padding-left:0;
}
}
@media(max-width:620px){
.editor-one-rail{
grid-template-columns:repeat(6,64px);
}
.editor-text-grid,
.editor-text-formatbar{
grid-template-columns:1fr 1fr;
}
.editor-text-formatbar>label:first-child{
grid-column:1/-1;
}
}
@media(max-width:430px){
.editor-text-grid,
.editor-text-formatbar{
grid-template-columns:1fr;
}
}
/* =========================================================
V5.14.4 — CUSTOMER STUDIO
Compact product-first customiser. No decorative left rail.
========================================================= */
.custom-product-v514{
padding:14px 0 46px!important;
}
.custom-product-v514>.container{
width:min(1380px,calc(100% - 28px));
max-width:none;
}
.studio-form{display:block}
.studio-shell{
display:grid;
grid-template-columns:minmax(0,1.16fr) minmax(430px,.84fr);
gap:12px;
align-items:start;
}
.studio-preview-card,
.studio-controls{
border:1px solid var(--border);
border-radius:14px;
background:#fff;
box-shadow:0 8px 30px rgba(45,38,35,.035);
}
.studio-preview-card{
position:sticky;
top:calc(var(--header-height,58px) + 10px);
overflow:hidden;
}
.studio-product-mini{
min-height:70px;
display:flex;
justify-content:space-between;
align-items:center;
gap:18px;
padding:10px 12px;
border-bottom:1px solid var(--border);
background:linear-gradient(110deg,#fff 0%,#fffaf5 100%);
}
.studio-product-copy{min-width:0}
.studio-breadcrumb{
display:flex;
align-items:center;
gap:4px;
margin-bottom:3px;
color:#998c86;
font-size:6.4px;
}
.studio-breadcrumb a{color:#7b6d68}
.studio-product-copy h1{
max-width:760px;
margin:0;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
font:400 clamp(23px,2.2vw,34px)/1 var(--font-heading);
}
.studio-product-copy p{
max-width:720px;
margin:4px 0 0;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
color:#81756f;
font-size:7.4px;
}
.studio-price-chip{
flex:0 0 auto;
min-width:104px;
text-align:right;
padding-left:10px;
border-left:1px solid #ece3de;
}
.studio-price-chip>span,
.studio-price-chip>small{display:block}
.studio-price-chip>span{
color:#9d7066;
font-size:5.7px;
font-weight:850;
letter-spacing:.1em;
}
.studio-price-chip>b{
display:block;
margin:1px 0;
font:400 22px var(--font-heading);
}
.studio-price-chip>small{
color:#91847e;
font-size:6px;
}
.studio-price-chip i{font-style:normal;font-weight:800}
.studio-preview-toolbar{
min-height:43px;
display:flex;
justify-content:space-between;
align-items:center;
gap:8px;
padding:6px 8px;
border-bottom:1px solid var(--border);
background:#faf8f6;
}
.studio-view-tabs{
display:flex;
gap:4px;
overflow:auto;
scrollbar-width:none;
}
.studio-view-tabs::-webkit-scrollbar{display:none}
.studio-view-tabs button{
flex:0 0 auto;
height:29px;
padding:0 9px;
border:1px solid #ded8d4;
border-radius:7px;
background:#fff;
color:#665b57;
font-size:6.8px;
font-weight:750;
cursor:pointer;
}
.studio-view-tabs button.active{
border-color:#302a28;
background:#302a28;
color:#fff;
}
.studio-stage{
position:relative;
height:clamp(470px,var(--customizer-height,560px),680px);
min-height:470px;
overflow:hidden;
background:
radial-gradient(circle at 50% 43%,#fff 0 45%,#f8f5f2 82%,#f4f0ed 100%);
touch-action:none;
}
.studio-garment{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
user-select:none;
pointer-events:none;
}
.studio-art-layer{
position:absolute;
left:43%;
top:38%;
z-index:5;
display:none;
width:100px;
height:100px;
transform:translate(-50%,-50%);
transform-origin:center;
cursor:grab;
touch-action:none;
}
.studio-art-layer:active{cursor:grabbing}
.studio-art-layer img{
width:100%;
height:100%;
object-fit:contain;
pointer-events:none;
}
.studio-method-label{
position:absolute;
left:50%;
bottom:-20px;
transform:translateX(-50%);
white-space:nowrap;
padding:3px 5px;
border:1px solid #ded8d4;
border-radius:999px;
background:#ffffffeb;
font-size:5.8px;
font-weight:800;
}
.studio-primary-text,
.studio-extra-text{
position:absolute;
z-index:8;
display:none;
transform:translate(-50%,-50%);
min-width:36px;
max-width:240px;
white-space:pre-wrap;
line-height:1.05;
text-shadow:0 1px 2px rgba(0,0,0,.08);
}
.studio-primary-text{
cursor:grab;
touch-action:none;
user-select:none;
}
.studio-primary-text:active{cursor:grabbing}
.studio-extra-text{
font:700 18px Georgia,serif;
}
.studio-view-label{
position:absolute;
right:9px;
bottom:9px;
z-index:9;
padding:4px 7px;
border:1px solid var(--border);
border-radius:999px;
background:#ffffffec;
font-size:6.2px;
font-weight:800;
}
.studio-empty-art{
position:absolute;
left:50%;
bottom:14px;
z-index:7;
transform:translateX(-50%);
padding:6px 8px;
border:1px dashed #d8ccc5;
border-radius:7px;
background:#ffffffdd;
color:#8b7e78;
font-size:6.4px;
}
.studio-preview-foot{
min-height:43px;
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
padding:6px 8px;
border-top:1px solid var(--border);
background:#fff;
}
.studio-preview-actions{
display:flex;
gap:4px;
}
.studio-preview-actions button{
height:27px;
padding:0 7px;
border:1px solid #dfd9d5;
border-radius:6px;
background:#fff;
font-size:6.3px;
cursor:pointer;
}
.studio-preview-actions button:disabled{opacity:.35}
.studio-preview-foot>small{
color:#90837d;
font-size:5.9px;
text-align:right;
}
.studio-controls{
position:sticky;
top:calc(var(--header-height,58px) + 10px);
height:calc(100vh - var(--header-height,58px) - 24px);
min-height:620px;
display:flex;
flex-direction:column;
overflow:hidden;
}
.studio-bundle-head{
display:grid;
grid-template-columns:minmax(95px,1fr) 58px auto auto;
gap:5px;
align-items:center;
padding:7px 8px;
border-bottom:1px solid var(--border);
background:#fff;
}
.studio-bundle-count>span,
.studio-bundle-count>b{display:block}
.studio-bundle-count>span{
color:#a16659;
font-size:5.7px;
font-weight:850;
letter-spacing:.09em;
}
.studio-bundle-count>b{
margin-top:1px;
font-size:8px;
}
.studio-qty{
display:grid;
grid-template-columns:auto 36px;
gap:4px;
align-items:center;
}
.studio-qty>span{font-size:6px;font-weight:750}
.studio-qty input{
width:36px;
height:29px;
border:1px solid #ddd8d5;
border-radius:6px;
text-align:center;
background:#fff;
font-size:7.5px;
font-weight:800;
}
.studio-small-btn{
height:29px;
padding:0 8px;
border:1px solid #ded9d6;
border-radius:6px;
background:#fff;
font-size:6px;
font-weight:750;
cursor:pointer;
white-space:nowrap;
}
.studio-small-btn.accent{
border-color:#cfe1dc;
background:#f0f8f6;
color:#286e65;
}
.studio-small-btn:disabled{opacity:.4}
.studio-item-tabs{
display:flex;
gap:4px;
overflow:auto;
min-height:43px;
padding:5px 7px;
border-bottom:1px solid var(--border);
background:#faf9f8;
scrollbar-width:none;
}
.studio-item-tabs::-webkit-scrollbar{display:none}
.studio-item-tabs>button{
flex:0 0 104px;
display:grid;
grid-template-columns:22px 1fr;
gap:5px;
align-items:center;
padding:4px 5px;
border:1px solid #e1dbd7;
border-radius:7px;
background:#fff;
text-align:left;
cursor:pointer;
}
.studio-item-tabs>button>span{
width:21px;
height:21px;
display:grid;
place-items:center;
border-radius:6px;
background:#f5efeb;
font-size:6.3px;
font-weight:850;
}
.studio-item-tabs>button b,
.studio-item-tabs>button small{display:block}
.studio-item-tabs>button b{font-size:6.5px}
.studio-item-tabs>button small{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
color:#8f817b;
font-size:5.4px;
}
.studio-item-tabs>button.active{
border-color:#dd8c79;
background:#fff7f3;
}
.studio-item-tabs>button.active>span{
background:#EE6C57;
color:#fff;
}
.studio-scroll{
flex:1 1 auto;
overflow-y:auto;
overscroll-behavior:contain;
scrollbar-width:thin;
scrollbar-color:#d9d0cb transparent;
background:#fff;
}
.studio-step{
border-bottom:1px solid #ece7e4;
background:#fff;
}
.studio-step>summary{
min-height:44px;
display:grid;
grid-template-columns:26px 1fr auto;
gap:7px;
align-items:center;
padding:6px 9px;
list-style:none;
cursor:pointer;
}
.studio-step>summary::-webkit-details-marker{display:none}
.studio-step>summary>span{
width:25px;
height:25px;
display:grid;
place-items:center;
border-radius:7px;
background:#f5eeea;
color:#b65e4d;
font-size:6.5px;
font-weight:850;
}
.studio-step>summary b,
.studio-step>summary small{display:block}
.studio-step>summary b{font-size:7.5px}
.studio-step>summary small{
margin-top:1px;
color:#938781;
font-size:5.7px;
}
.studio-step>summary>i{
font-style:normal;
color:#9c918c;
font-size:8px;
transition:transform .15s;
}
.studio-step[open]>summary>i{transform:rotate(180deg)}
.studio-step[open]>summary{
background:#fdfbf9;
}
.studio-step-body{
padding:1px 9px 10px 42px;
}
.studio-field-label{
display:flex;
justify-content:space-between;
align-items:center;
gap:8px;
margin-bottom:5px;
}
.studio-field-label b{font-size:6.8px}
.studio-field-label small{
color:#82766f;
font-size:5.8px;
}
.studio-field-label.colour-title{margin-top:9px}
.studio-size-chips{
display:flex;
flex-wrap:wrap;
gap:4px;
}
.studio-size-chips button{
min-width:38px;
height:31px;
padding:0 8px;
border:1px solid #ddd8d5;
border-radius:7px;
background:#fff;
color:#4d4542;
font-size:6.7px;
font-weight:750;
cursor:pointer;
}
.studio-size-chips button.active{
border-color:#302a28;
background:#302a28;
color:#fff;
}
.studio-size-chips button:disabled{
opacity:.35;
cursor:not-allowed;
text-decoration:line-through;
}
.studio-custom-size{
margin-top:6px;
padding-top:6px;
border-top:1px dashed #e6e0dc;
}
.studio-custom-size-toggle{
display:flex;
gap:6px;
align-items:center;
color:#655c58;
font-size:6.2px;
cursor:pointer;
}
#customSizeBox{
margin-top:6px;
padding:7px;
border:1px solid #e2ddda;
border-radius:7px;
background:#faf8f6;
}
#customSizeBox input{
width:100%;
height:31px;
border:1px solid #dcd7d4;
border-radius:6px;
background:#fff;
padding:0 7px;
font-size:6.8px;
}
#customSizeBox small{
display:block;
margin-top:4px;
color:#938781;
font-size:5.5px;
}
.studio-colour-swatches{
display:flex;
flex-wrap:wrap;
gap:6px;
}
.studio-colour-swatches button{
width:46px;
min-height:44px;
display:grid;
place-items:center;
align-content:center;
gap:3px;
padding:3px;
border:1px solid transparent;
border-radius:8px;
background:transparent;
cursor:pointer;
}
.studio-colour-swatches button>i{
width:25px;
height:25px;
display:block;
border-radius:50%;
background:var(--swatch,#888);
border:2px solid #fff;
box-shadow:0 0 0 1px #d6d1ce;
}
.studio-colour-swatches button>span{
max-width:42px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
color:#746965;
font-size:5.3px;
}
.studio-colour-swatches button.active{
background:#f7f2ee;
border-color:#dbcfc9;
}
.studio-colour-swatches button.active>i{
box-shadow:0 0 0 2px #302a28;
}
.studio-colour-swatches button:disabled{
opacity:.3;
cursor:not-allowed;
}
.studio-stock{
margin-top:5px;
color:#4e7663;
font-size:5.7px;
}
.studio-stock.error{
color:#a04d4d;
font-weight:750;
}
.studio-methods{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:5px;
}
.studio-methods button{
min-height:58px;
position:relative;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:2px;
padding:7px 20px 7px 7px;
border:1px solid #dfdad7;
border-radius:8px;
background:#fff;
text-align:left;
cursor:pointer;
}
.studio-methods button>b{font-size:6.5px}
.studio-methods button>small{
color:#918680;
font-size:5.4px;
line-height:1.3;
}
.studio-methods button>i{
position:absolute;
right:6px;
top:6px;
width:15px;
height:15px;
display:none;
place-items:center;
border-radius:50%;
background:#EE6C57;
color:#fff;
font-size:5.5px;
font-style:normal;
}
.studio-methods button.active{
border-color:#e08c78;
background:#fff7f3;
}
.studio-methods button.active>i{display:grid}
.studio-line-colours{
display:flex;
justify-content:space-between;
align-items:center;
gap:8px;
margin-top:6px;
padding:6px 7px;
border-radius:7px;
background:#f7f5f3;
}
.studio-line-colours>span{
font-size:6px;
font-weight:750;
}
.studio-line-colours>div{display:flex;gap:4px}
.studio-line-colours button{
height:25px;
padding:0 7px;
border:1px solid #dcd7d4;
border-radius:999px;
background:#fff;
font-size:5.8px;
cursor:pointer;
}
.studio-line-colours button.active{
border-color:#302a28;
background:#302a28;
color:#fff;
}
.studio-upload{
border:1px dashed #d8ccc5;
border-radius:8px;
background:#fcfaf8;
overflow:hidden;
}
.studio-upload .customizer-upload-inner{
padding:7px!important;
grid-template-columns:27px 1fr auto!important;
}
.studio-upload .customizer-upload-icon{
width:26px!important;
height:26px!important;
}
.studio-upload .customizer-upload-copy b{font-size:6.6px!important}
.studio-upload .customizer-upload-copy small{font-size:5.3px!important}
.studio-upload .customizer-upload-inner button{
padding:6px 8px!important;
font-size:5.8px!important;
}
.studio-reuse{
display:grid;
grid-template-columns:auto 1fr;
gap:6px;
align-items:center;
margin-top:5px;
}
.studio-reuse label{
color:#746a65;
font-size:5.7px;
}
.studio-reuse select{
height:29px;
border:1px solid #ded9d6;
border-radius:6px;
background:#fff;
padding:0 6px;
font-size:6px;
}
.studio-art-status{
margin-top:4px;
color:#9a7067;
font-size:5.6px;
}
.studio-art-status.ok{color:#457451}
.studio-art-status.warn{color:#9b6b18}
.studio-placement-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:4px;
}
.studio-placement-grid button{
min-height:33px;
border:1px solid #ded9d6;
border-radius:7px;
background:#fff;
padding:5px;
font-size:5.8px;
font-weight:700;
cursor:pointer;
}
.studio-placement-grid button.active{
border-color:#5f9c95;
background:#eef8f5;
color:#286d67;
}
.studio-adjust-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:7px;
margin-top:7px;
}
.studio-adjust-grid label{
display:grid;
grid-template-columns:auto 1fr 28px;
gap:5px;
align-items:center;
font-size:5.6px;
}
.studio-adjust-grid input{width:100%}
.studio-adjust-grid output{
text-align:right;
font-size:5.5px;
}
.studio-switch-row{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
min-height:35px;
padding:5px 7px;
border:1px solid #e0dbd8;
border-radius:7px;
background:#faf9f8;
}
.studio-switch-row b,
.studio-switch-row small{display:block}
.studio-switch-row b{font-size:6.4px}
.studio-switch-row small{
margin-top:1px;
color:#918680;
font-size:5.4px;
}
.studio-text-controls,
.studio-extra-controls{
display:grid;
gap:6px;
margin-top:7px;
}
.studio-input-field{
display:grid;
gap:3px;
}
.studio-input-field>span{
color:#625b57;
font-size:5.8px;
font-weight:700;
}
.studio-input-field input:not([type=color]),
.studio-input-field select{
width:100%;
height:31px;
border:1px solid #ded9d6;
border-radius:6px;
background:#fff;
padding:0 7px;
font-size:6.4px;
}
.studio-input-field input[type=color]{
width:100%;
height:31px;
border:0;
padding:0;
background:transparent;
}
.studio-two,
.studio-three{
display:grid;
gap:5px;
}
.studio-two{grid-template-columns:1fr 1fr}
.studio-three{grid-template-columns:.8fr 1.25fr .7fr}
.studio-text-format{
display:grid;
grid-template-columns:1fr 1fr;
gap:5px;
}
.studio-text-format>div{
display:grid;
grid-template-columns:auto 27px 31px 27px;
gap:4px;
align-items:center;
min-height:34px;
padding:4px 6px;
border:1px solid #e0dbd8;
border-radius:7px;
background:#faf9f8;
}
.studio-text-format>div>span{
font-size:5.7px;
font-weight:700;
}
.studio-text-format button{
height:25px;
border:1px solid #dcd7d4;
border-radius:5px;
background:#fff;
font-size:7px;
cursor:pointer;
}
.studio-text-format output{
text-align:center;
font-size:6px;
font-weight:800;
}
.studio-text-format .studio-text-align{
grid-template-columns:auto repeat(3,27px);
}
.studio-text-align button.active{
border-color:#302a28;
background:#302a28;
color:#fff;
}
.studio-note{
width:100%;
min-height:60px;
border:1px solid #ded9d6;
border-radius:7px;
padding:7px;
resize:vertical;
font:400 6.5px var(--font-body);
}
.studio-summary-list{display:grid}
.studio-summary-list article{
display:grid!important;
grid-template-columns:24px 1fr auto!important;
gap:6px!important;
padding:6px 0!important;
border-top:1px solid #eee9e6!important;
}
.studio-summary-list article:first-child{border-top:0!important}
.studio-summary-list .customizer-summary-number{
width:23px!important;height:23px!important;font-size:5.7px!important
}
.studio-summary-list .customizer-summary-copy b{font-size:6.2px!important}
.studio-summary-list .customizer-summary-copy small{font-size:5.3px!important}
.studio-summary-list .customizer-summary-side b{font-size:6.7px!important}
.studio-summary-list .customizer-summary-side small,
.studio-summary-list .customizer-summary-side button{font-size:5.2px!important}
.studio-remove-row{
display:flex;
justify-content:flex-end;
padding:7px 9px 9px;
}
.studio-remove-row button{
border:0;
background:none;
color:#a0655e;
text-decoration:underline;
font-size:5.8px;
cursor:pointer;
}
.studio-remove-row button:disabled{opacity:.35}
.studio-buybar{
min-height:63px;
display:grid;
grid-template-columns:minmax(86px,.65fr) minmax(175px,1.35fr);
gap:7px;
align-items:center;
padding:7px 8px;
border-top:1px solid var(--border);
background:#fffdfb;
box-shadow:0 -5px 16px rgba(45,38,35,.035);
}
.studio-buybar>div>span,
.studio-buybar>div>b,
.studio-buybar>div>small{display:block}
.studio-buybar>div>span{
color:#8b7e78;
font-size:5.5px;
letter-spacing:.08em;
}
.studio-buybar>div>b{
margin-top:1px;
font:400 18px var(--font-heading);
}
.studio-buybar>div>small{
color:#4a7550;
font-size:5.2px;
}
.studio-add-button{
min-height:43px;
display:flex;
justify-content:space-between;
align-items:center;
gap:9px;
border:0;
border-radius:8px;
background:#302a28;
color:#fff;
padding:0 11px;
cursor:pointer;
}
.studio-add-button>span{
font-size:7px;
font-weight:800;
}
.studio-add-button>b{
font:400 15px var(--font-heading);
}
.studio-add-button:disabled{opacity:.55}
/* Override older customizer rules inside the new studio. */
.studio-shell .customizer-ready-badge{font-size:5.8px}
.studio-shell .customizer-ready-badge i{width:6px;height:6px}
.studio-shell [hidden]{display:none!important}
@media(max-width:1120px){
.studio-shell{
grid-template-columns:minmax(0,1fr) minmax(390px,.86fr);
}
.studio-methods{
grid-template-columns:1fr;
}
.studio-methods button{
min-height:44px;
}
}
@media(max-width:900px){
.custom-product-v514>.container{
width:min(100% - 18px,760px);
}
.studio-shell{grid-template-columns:1fr}
.studio-preview-card,
.studio-controls{position:static}
.studio-controls{
height:auto;
min-height:0;
}
.studio-scroll{
max-height:none;
overflow:visible;
}
.studio-stage{
height:min(560px,78vw);
min-height:400px;
}
.studio-methods{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:620px){
.custom-product-v514{padding-top:7px!important}
.custom-product-v514>.container{width:calc(100% - 10px)}
.studio-product-mini{
min-height:61px;
padding:8px;
}
.studio-product-copy h1{
font-size:21px;
}
.studio-product-copy p{display:none}
.studio-price-chip{
min-width:82px;
}
.studio-price-chip>b{font-size:18px}
.studio-stage{
height:390px;
min-height:350px;
}
.studio-preview-foot{
align-items:flex-start;
flex-direction:column;
}
.studio-preview-foot>small{text-align:left}
.studio-bundle-head{
grid-template-columns:1fr 55px;
}
.studio-bundle-head .studio-small-btn{
width:100%;
}
.studio-step-body{
padding-left:9px;
}
.studio-methods,
.studio-placement-grid{
grid-template-columns:1fr 1fr;
}
.studio-three{grid-template-columns:1fr 1fr}
.studio-three>*:last-child{grid-column:1/-1}
.studio-buybar{
position:sticky;
bottom:0;
z-index:30;
}
}
@media(max-width:420px){
.studio-colour-swatches button{width:42px}
.studio-methods,
.studio-placement-grid,
.studio-two,
.studio-three,
.studio-text-format{
grid-template-columns:1fr;
}
.studio-three>*:last-child{grid-column:auto}
}
/* =========================================================
V5.14.5 — PLACEMENT STUDIO
Front / Back / Sleeves are independent personalisation slots.
========================================================= */
.custom-product-v514{padding:10px 0 36px!important}
.custom-product-v514>.container{width:min(1420px,calc(100% - 20px));max-width:none}
.placement-studio-form{display:block}
.placement-studio{
display:grid;
grid-template-columns:minmax(0,1.18fr) minmax(430px,.82fr);
gap:10px;
align-items:start;
}
.ps-preview,.ps-controls{
border:1px solid var(--border);
border-radius:12px;
background:#fff;
box-shadow:0 7px 24px rgba(49,41,38,.035);
}
.ps-preview{position:sticky;top:calc(var(--header-height,58px) + 8px);overflow:hidden}
.ps-preview-head{
min-height:58px;
display:flex;justify-content:space-between;align-items:center;gap:14px;
padding:7px 10px;border-bottom:1px solid var(--border);
background:linear-gradient(110deg,#fff 0%,#fffaf7 100%);
}
.ps-title{min-width:0}
.ps-breadcrumb{display:flex;gap:4px;align-items:center;margin-bottom:2px;color:#9a8d87;font-size:5.5px}
.ps-breadcrumb a{color:#716763}
.ps-title h1{
margin:0;max-width:680px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
font:400 clamp(18px,1.9vw,26px)/1.05 var(--font-heading);
}
.ps-title p{
margin:3px 0 0;max-width:680px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
color:#837772;font-size:6.2px
}
.ps-live-price{
flex:0 0 95px;text-align:right;padding-left:10px;border-left:1px solid #eee5e0
}
.ps-live-price span,.ps-live-price small{display:block}
.ps-live-price span{font-size:5px;font-weight:850;letter-spacing:.1em;color:#a06e63}
.ps-live-price b{display:block;margin:1px 0;font:400 20px var(--font-heading)}
.ps-live-price small{font-size:5.2px;color:#8d817c}
.ps-live-price i{font-style:normal;font-weight:800}
.ps-viewbar{
min-height:39px;display:flex;justify-content:space-between;align-items:center;gap:8px;
padding:5px 7px;border-bottom:1px solid var(--border);background:#faf8f6
}
.ps-view-tabs{display:flex;gap:4px;overflow:auto;scrollbar-width:none}
.ps-view-tabs::-webkit-scrollbar{display:none}
.ps-view-tabs button{
position:relative;flex:0 0 auto;height:29px;display:flex;gap:5px;align-items:center;
padding:0 9px;border:1px solid #ded8d4;border-radius:7px;background:#fff;
color:#625a56;font-size:6.5px;font-weight:750;cursor:pointer
}
.ps-view-tabs button>i{
min-width:13px;height:13px;display:grid;place-items:center;border-radius:50%;
background:#eeeae7;color:#777;font-size:5px;font-style:normal
}
.ps-view-tabs button.configured>i{background:#e6f4ef;color:#287260}
.ps-view-tabs button.active{border-color:#302a28;background:#302a28;color:#fff}
.ps-view-tabs button.active>i{background:#fff;color:#302a28}
.ps-viewbar .customizer-ready-badge{font-size:5.4px}
.ps-viewbar .customizer-ready-badge i{width:6px;height:6px}
.ps-stage{
position:relative;height:clamp(475px,var(--customizer-height,555px),665px);min-height:475px;
overflow:hidden;touch-action:none;
background:radial-gradient(circle at 50% 42%,#fff 0 44%,#f8f5f2 78%,#f3efec 100%)
}
.ps-garment{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}
.ps-art-layer{
position:absolute;left:50%;top:40%;z-index:5;display:none;width:100px;height:100px;
transform:translate(-50%,-50%);transform-origin:center;cursor:grab;touch-action:none
}
.ps-art-layer:active{cursor:grabbing}
.ps-art-layer img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.ps-method-tag{
position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);white-space:nowrap;
padding:3px 5px;border:1px solid #ded8d4;border-radius:999px;background:#ffffffea;
font-size:5.5px;font-weight:800
}
.ps-text-layer{
position:absolute;z-index:7;display:none;transform:translate(-50%,-50%);min-width:36px;max-width:240px;
white-space:pre-wrap;line-height:1.05;cursor:grab;touch-action:none;user-select:none;
text-shadow:0 1px 2px rgba(0,0,0,.08)
}
.ps-text-layer:active{cursor:grabbing}
.ps-view-label{
position:absolute;right:8px;bottom:8px;z-index:8;padding:4px 6px;border:1px solid var(--border);
border-radius:999px;background:#ffffffeb;font-size:5.8px;font-weight:800
}
.ps-empty{
position:absolute;left:50%;bottom:13px;z-index:7;transform:translateX(-50%);
padding:6px 8px;border:1px dashed #d7ccc6;border-radius:7px;background:#ffffffdc;
color:#8d807a;font-size:6px;white-space:nowrap
}
.ps-preview-foot{
min-height:38px;display:flex;justify-content:space-between;align-items:center;gap:10px;
padding:5px 7px;border-top:1px solid var(--border)
}
.ps-preview-foot>div{display:flex;gap:4px}
.ps-preview-foot button{
height:25px;padding:0 7px;border:1px solid #dfd9d5;border-radius:6px;background:#fff;font-size:5.8px;cursor:pointer
}
.ps-preview-foot button:disabled{opacity:.35}
.ps-preview-foot small{color:#8f827c;font-size:5.4px;text-align:right}
.ps-controls{
position:sticky;top:calc(var(--header-height,58px) + 8px);
height:calc(100vh - var(--header-height,58px) - 18px);min-height:620px;
display:flex;flex-direction:column;overflow:hidden
}
.ps-orderbar{
min-height:46px;display:grid;grid-template-columns:minmax(90px,1fr) 54px auto auto;
gap:5px;align-items:center;padding:6px 7px;border-bottom:1px solid var(--border)
}
.ps-orderbar>div>span,.ps-orderbar>div>b{display:block}
.ps-orderbar>div>span{font-size:5px;font-weight:850;letter-spacing:.1em;color:#a4695e}
.ps-orderbar>div>b{margin-top:1px;font-size:7px}
.ps-orderbar label{display:grid;grid-template-columns:auto 34px;gap:4px;align-items:center}
.ps-orderbar label span{font-size:5.5px;font-weight:700}
.ps-orderbar input{
width:34px;height:27px;border:1px solid #ddd8d5;border-radius:6px;text-align:center;background:#fff;font-size:6.5px;font-weight:800
}
.ps-orderbar button{
height:27px;padding:0 7px;border:1px solid #ded9d6;border-radius:6px;background:#fff;
font-size:5.6px;font-weight:750;cursor:pointer;white-space:nowrap
}
.ps-orderbar button.accent{border-color:#cfe3dd;background:#eef8f5;color:#286c63}
.ps-orderbar button:disabled{opacity:.4}
.ps-item-tabs{
min-height:40px;display:flex;gap:4px;overflow:auto;padding:5px 7px;border-bottom:1px solid var(--border);
background:#faf9f8;scrollbar-width:none
}
.ps-item-tabs::-webkit-scrollbar{display:none}
.ps-item-tabs button{
flex:0 0 102px;display:grid;grid-template-columns:21px 1fr;gap:5px;align-items:center;
padding:4px;border:1px solid #e1dbd7;border-radius:7px;background:#fff;text-align:left;cursor:pointer
}
.ps-item-tabs button>span{width:20px;height:20px;display:grid;place-items:center;border-radius:6px;background:#f5efeb;font-size:5.8px;font-weight:850}
.ps-item-tabs button b,.ps-item-tabs button small{display:block}
.ps-item-tabs button b{font-size:6px}
.ps-item-tabs button small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#8f817b;font-size:5px}
.ps-item-tabs button.active{border-color:#dd8c79;background:#fff7f3}
.ps-item-tabs button.active>span{background:#EE6C57;color:#fff}
.ps-scroll{flex:1 1 auto;overflow-y:auto;overscroll-behavior-y:auto;scrollbar-width:thin;background:#fff;-webkit-overflow-scrolling:touch}
.ps-block{padding:8px 9px;border-bottom:1px solid #ece7e4}
.ps-block-head{display:grid;grid-template-columns:25px 1fr;gap:7px;align-items:center;margin-bottom:7px}
.ps-block-head>span{
width:24px;height:24px;display:grid;place-items:center;border-radius:7px;background:#f5eeea;
color:#b75f4f;font-size:5.8px;font-weight:850
}
.ps-block-head b,.ps-block-head small{display:block}
.ps-block-head b{font-size:7.2px}
.ps-block-head small{margin-top:1px;color:#938781;font-size:5.2px}
.ps-label-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.ps-label-row b{font-size:6px}
.ps-label-row small{font-size:5.1px;color:#857872}
.ps-label-row.colour-label{margin-top:8px}
.ps-size-chips{display:flex;gap:4px;flex-wrap:wrap}
.ps-size-chips button{
min-width:36px;height:29px;padding:0 7px;border:1px solid #ddd8d5;border-radius:6px;background:#fff;
font-size:6px;font-weight:750;cursor:pointer
}
.ps-size-chips button.active{border-color:#302a28;background:#302a28;color:#fff}
.ps-size-chips button:disabled{opacity:.3;text-decoration:line-through;cursor:not-allowed}
.ps-custom-size{margin-top:6px;padding-top:6px;border-top:1px dashed #e6e0dc}
.ps-custom-size>label{display:flex;gap:6px;align-items:center;font-size:5.6px;color:#665d59;cursor:pointer}
#customSizeBox{margin-top:5px;padding:6px;border:1px solid #e2ddda;border-radius:7px;background:#faf8f6}
#customSizeBox input{width:100%;height:29px;border:1px solid #dcd7d4;border-radius:6px;padding:0 7px;font-size:6px}
#customSizeBox small{display:block;margin-top:3px;font-size:5px;color:#958983}
.ps-colours{display:flex;gap:5px;flex-wrap:wrap}
.ps-colours button{
width:42px;min-height:41px;display:grid;place-items:center;align-content:center;gap:2px;padding:3px;
border:1px solid transparent;border-radius:7px;background:transparent;cursor:pointer
}
.ps-colours button i{
width:23px;height:23px;display:block;border-radius:50%;background:var(--swatch,#888);
border:2px solid #fff;box-shadow:0 0 0 1px #d6d1ce
}
.ps-colours button span{max-width:38px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:4.8px;color:#746965}
.ps-colours button.active{background:#f7f2ee;border-color:#dbd0ca}
.ps-colours button.active i{box-shadow:0 0 0 2px #302a28}
.ps-colours button:disabled{opacity:.28;cursor:not-allowed}
.ps-stock{margin-top:4px;color:#4f7563;font-size:5.1px}
.ps-stock.error{color:#a34f4f;font-weight:750}
.ps-slot-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.ps-slot-head .ps-block-head{margin-bottom:7px}
#removeDecoration{
border:0;background:none;color:#a06058;text-decoration:underline;font-size:5.2px;cursor:pointer
}
.ps-mode-choice{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.ps-mode-choice button{
min-height:55px;display:grid;grid-template-columns:27px 1fr;gap:6px;align-items:center;padding:6px;
border:1px solid #dfdad7;border-radius:8px;background:#fff;text-align:left;cursor:pointer
}
.ps-mode-choice button>i{
width:27px;height:27px;display:grid;place-items:center;border-radius:7px;background:#f5f2ef;
font-size:12px;font-style:normal;color:#675d58
}
.ps-mode-choice button b,.ps-mode-choice button small{display:block}
.ps-mode-choice button b{font-size:6.4px}
.ps-mode-choice button small{margin-top:1px;color:#91847f;font-size:5.1px;line-height:1.25}
.ps-mode-choice button.active{border-color:#d88775;background:#fff7f3}
.ps-mode-choice button.active>i{background:#EE6C57;color:#fff}
#slotEditor{margin-top:8px;padding-top:7px;border-top:1px solid #eee9e6}
.ps-placement-chips{display:flex;gap:4px;flex-wrap:wrap}
.ps-placement-chips button{
height:29px;padding:0 8px;border:1px solid #ded9d6;border-radius:6px;background:#fff;font-size:5.7px;font-weight:700;cursor:pointer
}
.ps-placement-chips button.active{border-color:#5e9992;background:#eef8f5;color:#286d67}
.ps-placement-chips button[hidden]{display:none!important}
.ps-mode-fields{display:grid;gap:6px;margin-top:8px}
.ps-upload{border:1px dashed #d8ccc5;border-radius:8px;background:#fcfaf8;overflow:hidden}
.ps-upload-inner{display:grid;grid-template-columns:26px 1fr auto;gap:6px;align-items:center;padding:7px}
.ps-upload-inner>i{
width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:#eef7f4;color:#287266;font-style:normal;font-size:10px
}
.ps-upload-inner b,.ps-upload-inner small{display:block}
.ps-upload-inner b{font-size:5.9px}
.ps-upload-inner small{margin-top:1px;color:#938681;font-size:4.9px}
.ps-upload-inner button{height:27px;padding:0 7px;border:1px solid #ddd8d5;border-radius:6px;background:#fff;font-size:5.2px;cursor:pointer}
.ps-art-status{font-size:5.1px;color:#987168}
.ps-art-status.ok{color:#457450}
.ps-logo-size{padding:7px;border:1px solid #e5dfdc;border-radius:7px;background:#faf9f8}
.ps-logo-size>div:nth-child(2){display:grid;grid-template-columns:1fr auto 1fr 67px;gap:5px;align-items:end}
.ps-logo-size label{display:grid;gap:3px}
.ps-logo-size label span{font-size:5.3px;color:#625b57;font-weight:700}
.ps-logo-size input,.ps-logo-size select{
width:100%;height:29px;border:1px solid #dcd7d4;border-radius:6px;background:#fff;padding:0 6px;font-size:6px
}
.ps-logo-size>small{display:block;margin-top:4px;color:#948780;font-size:4.9px}
.ps-label-row.method-label{margin-top:2px}
.ps-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ps-methods button{
position:relative;min-height:52px;display:flex;justify-content:space-between;gap:6px;align-items:flex-start;
padding:6px;border:1px solid #ded9d6;border-radius:7px;background:#fff;text-align:left;cursor:pointer
}
.ps-methods button span b,.ps-methods button span small{display:block}
.ps-methods button span b{font-size:5.7px}
.ps-methods button span small{margin-top:2px;color:#91847f;font-size:4.8px;line-height:1.25}
.ps-methods button>i{display:none;width:14px;height:14px;place-items:center;border-radius:50%;background:#EE6C57;color:#fff;font-size:5px;font-style:normal}
.ps-methods button.active{border-color:#dc8976;background:#fff7f3}
.ps-methods button.active>i{display:grid}
.ps-line-colours{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 6px;border-radius:7px;background:#f7f5f3}
.ps-line-colours>span{font-size:5.4px;font-weight:750}
.ps-line-colours>div{display:flex;gap:4px}
.ps-line-colours button{height:24px;padding:0 7px;border:1px solid #dcd7d4;border-radius:999px;background:#fff;font-size:5.1px;cursor:pointer}
.ps-line-colours button.active{background:#302a28;border-color:#302a28;color:#fff}
.ps-fine{border:1px solid #e4dfdc;border-radius:7px;background:#faf9f8}
.ps-fine summary{display:flex;justify-content:space-between;align-items:center;padding:6px;list-style:none;cursor:pointer;font-size:5.4px;font-weight:700}
.ps-fine summary::-webkit-details-marker{display:none}
.ps-fine summary span{font-size:4.8px;color:#998d87;font-weight:500}
.ps-fine>div{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 6px 6px}
.ps-fine label{display:grid;grid-template-columns:auto 1fr 27px;gap:4px;align-items:center;font-size:5px}
.ps-fine input{width:100%}.ps-fine output{text-align:right;font-size:4.9px}
.ps-input{display:grid;gap:3px}
.ps-input>span{font-size:5.4px;font-weight:700;color:#625b57}
.ps-input input:not([type=color]),.ps-input select{
width:100%;height:29px;border:1px solid #dcd7d4;border-radius:6px;background:#fff;padding:0 6px;font-size:5.8px
}
.ps-input input[type=color]{width:100%;height:29px;border:0;background:transparent;padding:0}
.ps-two,.ps-three{display:grid;gap:5px}
.ps-two{grid-template-columns:1.3fr .7fr}
.ps-three{grid-template-columns:.8fr .65fr .8fr}
.ps-size-stepper{height:29px;display:grid;grid-template-columns:27px 1fr 27px;border:1px solid #dcd7d4;border-radius:6px;overflow:hidden;background:#fff}
.ps-size-stepper button{border:0;background:#f8f6f4;cursor:pointer}
.ps-size-stepper output{display:grid;place-items:center;font-size:5.8px}
.ps-align{display:flex;gap:4px;align-items:center}
.ps-align>span{margin-right:auto;font-size:5.3px;font-weight:700}
.ps-align button{height:26px;padding:0 7px;border:1px solid #ddd8d5;border-radius:6px;background:#fff;font-size:5px;cursor:pointer}
.ps-align button.active{background:#302a28;border-color:#302a28;color:#fff}
.add-placement-block{background:#fffdfb}
.ps-add-view{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.ps-add-view button{
min-height:38px;display:flex;flex-direction:column;justify-content:center;gap:1px;
border:1px solid #ded9d6;border-radius:7px;background:#fff;font-size:5.6px;font-weight:700;cursor:pointer
}
.ps-add-view button small{font-size:4.7px;color:#928680;font-weight:500}
.ps-add-view button.configured{border-color:#cfe2dc;background:#f0f8f6;color:#286d63}
.ps-add-view button.configured small{color:#4e7a70}
.ps-notes,.ps-summary{border-bottom:1px solid #ece7e4}
.ps-notes summary,.ps-summary summary{
display:flex;justify-content:space-between;align-items:center;padding:7px 9px;cursor:pointer;list-style:none;
font-size:5.8px;font-weight:700
}
.ps-notes summary::-webkit-details-marker,.ps-summary summary::-webkit-details-marker{display:none}
.ps-notes summary span,.ps-summary summary span{font-size:4.9px;color:#958983;font-weight:500}
.ps-notes textarea{width:calc(100% - 18px);margin:0 9px 8px;min-height:58px;border:1px solid #ddd8d5;border-radius:7px;padding:6px;font:400 5.8px var(--font-body);resize:vertical}
#bundleSummaryList{padding:0 9px 8px}
#bundleSummaryList article{
display:grid;grid-template-columns:22px 1fr auto;gap:6px;align-items:start;padding:6px 0;border-top:1px solid #eee9e6
}
#bundleSummaryList article:first-child{border-top:0}
#bundleSummaryList article>span{width:21px;height:21px;display:grid;place-items:center;border-radius:6px;background:#f5efeb;font-size:5.5px;font-weight:850}
#bundleSummaryList article>div b,#bundleSummaryList article>div small,#bundleSummaryList article>aside b{display:block}
#bundleSummaryList article>div b{font-size:5.8px}
#bundleSummaryList article>div small{margin-top:1px;color:#817670;font-size:4.9px}
#bundleSummaryList article>aside{text-align:right}
#bundleSummaryList article>aside b{font-size:6px}
#bundleSummaryList article>aside button{border:0;background:none;color:#9b655c;text-decoration:underline;font-size:4.8px;cursor:pointer}
.ps-remove-item{display:flex;justify-content:flex-end;padding:5px 9px 8px}
.ps-remove-item button{border:0;background:none;color:#a1645c;text-decoration:underline;font-size:5px;cursor:pointer}
.ps-remove-item button:disabled{opacity:.35}
.ps-buybar{
min-height:58px;display:grid;grid-template-columns:minmax(85px,.65fr) minmax(175px,1.35fr);
gap:6px;align-items:center;padding:6px 7px;border-top:1px solid var(--border);background:#fffdfb;
box-shadow:0 -4px 14px rgba(50,41,38,.035)
}
.ps-buybar>div span,.ps-buybar>div b,.ps-buybar>div small{display:block}
.ps-buybar>div span{font-size:4.9px;letter-spacing:.08em;color:#8c807a}
.ps-buybar>div b{font:400 17px var(--font-heading)}
.ps-buybar>div small{font-size:4.8px;color:#4d7654}
.ps-buybar>button{
min-height:40px;display:flex;justify-content:space-between;align-items:center;gap:8px;
border:0;border-radius:8px;background:#302a28;color:#fff;padding:0 10px;cursor:pointer
}
.ps-buybar>button span{font-size:6.5px;font-weight:800}
.ps-buybar>button b{font:400 14px var(--font-heading)}
.ps-buybar>button:disabled{opacity:.55}
@media(max-width:1100px){
.placement-studio{grid-template-columns:minmax(0,1fr) minmax(390px,.86fr)}
.ps-methods{grid-template-columns:1fr}
.ps-methods button{min-height:41px}
}
@media(max-width:900px){
.custom-product-v514>.container{width:min(100% - 14px,760px)}
.placement-studio{grid-template-columns:1fr}
.ps-preview,.ps-controls{position:static}
.ps-controls{height:auto;min-height:0}
.ps-scroll{overflow:visible}
.ps-stage{height:min(550px,76vw);min-height:390px}
.ps-methods{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
.custom-product-v514>.container{width:calc(100% - 8px)}
.ps-preview-head{min-height:52px;padding:6px 7px}
.ps-title h1{font-size:17px}
.ps-title p{display:none}
.ps-live-price{flex-basis:78px}
.ps-live-price b{font-size:17px}
.ps-stage{height:385px;min-height:345px}
.ps-preview-foot{align-items:flex-start;flex-direction:column}
.ps-preview-foot small{text-align:left}
.ps-orderbar{grid-template-columns:1fr 52px}
.ps-orderbar button{width:100%}
.ps-mode-choice{grid-template-columns:1fr}
.ps-methods,.ps-add-view{grid-template-columns:1fr 1fr}
.ps-logo-size>div:nth-child(2){grid-template-columns:1fr auto 1fr 62px}
.ps-buybar{position:sticky;bottom:0;z-index:30}
}
@media(max-width:410px){
.ps-methods,.ps-add-view,.ps-two,.ps-three,.ps-fine>div{grid-template-columns:1fr}
}
/* =========================================================
V5.14.6 — FINAL CUSTOMER EDITOR POLISH
Smaller preview · wider readable editor · centred tabs
========================================================= */
.placement-studio{
--ps-ink:#342d2a;
--ps-coral:#e97863;
--ps-coral-soft:#fff2ed;
--ps-sage:#397a70;
--ps-sage-soft:#eef8f5;
--ps-cream:#fffaf6;
--ps-line:#eadfd9;
--ps-muted:#81746e;
grid-template-columns:minmax(420px,.75fr) minmax(585px,1fr)!important;
gap:12px!important;
}
.ps-preview,
.ps-controls{
border-color:var(--ps-line)!important;
border-radius:15px!important;
box-shadow:0 10px 34px rgba(59,44,37,.055)!important;
}
/* Compact product header inside preview. */
.ps-preview-head{
min-height:52px!important;
padding:7px 11px!important;
background:linear-gradient(110deg,#fff 0%,var(--ps-cream) 100%)!important;
}
.ps-breadcrumb{
margin-bottom:1px!important;
font-size:6px!important;
}
.ps-title h1{
max-width:520px!important;
font-size:clamp(18px,1.55vw,23px)!important;
line-height:1.03!important;
}
.ps-title p{
max-width:520px!important;
margin-top:3px!important;
font-size:6.6px!important;
}
.ps-live-price{
flex-basis:92px!important;
min-width:92px!important;
}
.ps-live-price span{font-size:5.5px!important;color:#a36659!important}
.ps-live-price b{font-size:18px!important}
.ps-live-price small{font-size:5.8px!important}
/* Tabs exactly over the centre of the garment preview. */
.ps-viewbar{
position:relative!important;
justify-content:center!important;
min-height:42px!important;
padding:6px 9px!important;
background:#fcfaf8!important;
}
.ps-view-tabs{
width:100%!important;
justify-content:center!important;
gap:6px!important;
padding-right:100px!important;
padding-left:100px!important;
}
.ps-view-tabs button{
min-width:86px!important;
height:30px!important;
justify-content:center!important;
padding:0 8px!important;
border-radius:8px!important;
font-size:6.8px!important;
}
.ps-view-tabs button.active{
background:var(--ps-ink)!important;
border-color:var(--ps-ink)!important;
}
.ps-view-tabs button.configured:not(.active){
border-color:#b9d5cf!important;
background:#f4fbf9!important;
color:#326f66!important;
}
.ps-view-tabs button>i{
min-width:14px!important;
width:14px!important;
height:14px!important;
background:#ece8e5!important;
}
.ps-view-tabs button.configured>i{
background:#dff0eb!important;
color:#347669!important;
}
.ps-view-tabs button>em{
width:15px;
height:15px;
display:grid;
place-items:center;
margin-left:-1px;
border-radius:50%;
background:#f2e3de;
color:#a65f52;
font-size:8px;
font-style:normal;
font-weight:800;
line-height:1;
}
.ps-view-tabs button>em[hidden]{display:none!important}
.ps-view-tabs button.active>em{
background:#fff;
color:#a75f53;
}
.ps-viewbar .customizer-ready-badge{
position:absolute!important;
right:10px!important;
top:50%!important;
transform:translateY(-50%)!important;
font-size:5.8px!important;
}
/* Smaller image section with real breathing room around garment. */
.ps-stage{
height:clamp(400px,51vh,500px)!important;
min-height:400px!important;
background:radial-gradient(circle at 50% 43%,#fff 0 48%,#f9f6f3 82%,#f5f0ec 100%)!important;
}
.ps-garment{
inset:4%!important;
width:92%!important;
height:92%!important;
}
.ps-empty{font-size:6.4px!important}
.ps-preview-foot{
min-height:40px!important;
padding:6px 9px!important;
}
.ps-preview-foot button{
height:27px!important;
font-size:6.2px!important;
}
.ps-preview-foot small{
font-size:5.8px!important;
}
/* Wider editor panel and more readable typography, while fields stay compact. */
.ps-controls{
min-height:610px!important;
}
.ps-orderbar{
min-height:48px!important;
padding:7px 9px!important;
}
.ps-orderbar>div>span{font-size:5.6px!important}
.ps-orderbar>div>b{font-size:7.8px!important}
.ps-orderbar label span{font-size:6px!important}
.ps-orderbar input{
width:38px!important;
height:29px!important;
font-size:7.3px!important;
}
.ps-orderbar button{
height:29px!important;
padding:0 9px!important;
font-size:6.2px!important;
}
.ps-orderbar button.accent{
border-color:#c6ded8!important;
background:var(--ps-sage-soft)!important;
color:var(--ps-sage)!important;
}
.ps-item-tabs{
min-height:43px!important;
padding:5px 9px!important;
}
.ps-item-tabs button{
flex-basis:112px!important;
}
.ps-item-tabs button b{font-size:6.7px!important}
.ps-item-tabs button small{font-size:5.5px!important}
.ps-item-tabs button.active{
border-color:#e7a08f!important;
background:var(--ps-coral-soft)!important;
}
.ps-item-tabs button.active>span{
background:var(--ps-coral)!important;
}
/* Editor section hierarchy. */
.ps-block{
padding:9px 11px!important;
}
.ps-block-head{
grid-template-columns:28px 1fr!important;
gap:8px!important;
margin-bottom:8px!important;
}
.ps-block-head>span{
width:27px!important;
height:27px!important;
background:#f7ede8!important;
color:#b45d4d!important;
font-size:6.5px!important;
}
.ps-block-head b{font-size:8.3px!important}
.ps-block-head small{
margin-top:2px!important;
font-size:6px!important;
line-height:1.3!important;
}
.ps-label-row{
margin-bottom:5px!important;
}
.ps-label-row b{font-size:6.8px!important}
.ps-label-row small{font-size:5.8px!important}
/* Size buttons: compact but readable. */
.ps-size-chips{gap:5px!important}
.ps-size-chips button{
min-width:42px!important;
height:32px!important;
padding:0 10px!important;
border-radius:7px!important;
font-size:6.7px!important;
}
.ps-size-chips button.active{
background:var(--ps-ink)!important;
border-color:var(--ps-ink)!important;
}
.ps-custom-size{
max-width:390px!important;
margin-top:7px!important;
padding-top:7px!important;
}
.ps-custom-size>label{
font-size:6.1px!important;
}
#customSizeBox{
max-width:370px!important;
padding:7px!important;
}
#customSizeBox input{
height:31px!important;
font-size:6.7px!important;
}
#customSizeBox small{
font-size:5.5px!important;
line-height:1.35!important;
}
/* Colour swatches: icon first, readable name underneath. */
.ps-colours{
gap:7px!important;
}
.ps-colours button{
width:48px!important;
min-height:45px!important;
gap:3px!important;
}
.ps-colours button i{
width:26px!important;
height:26px!important;
}
.ps-colours button span{
max-width:46px!important;
font-size:5.5px!important;
}
.ps-colours button.active{
border-color:#d8c8c0!important;
background:#faf3ee!important;
}
.ps-colours button.active i{
box-shadow:0 0 0 2px var(--ps-ink)!important;
}
.ps-stock{
margin-top:5px!important;
font-size:5.8px!important;
}
/* Artwork / Text choice is clear and compact. */
.ps-mode-choice{
gap:7px!important;
}
.ps-mode-choice button{
min-height:52px!important;
grid-template-columns:31px 1fr!important;
gap:7px!important;
padding:7px!important;
}
.ps-mode-choice button>i{
width:30px!important;
height:30px!important;
}
.ps-mode-choice button b{font-size:7px!important}
.ps-mode-choice button small{
font-size:5.7px!important;
line-height:1.3!important;
}
.ps-mode-choice button.active{
border-color:#e0907e!important;
background:var(--ps-coral-soft)!important;
}
.ps-mode-choice button.active>i{
background:var(--ps-coral)!important;
}
/* Placement chips. */
.ps-placement-chips{
gap:5px!important;
}
.ps-placement-chips button{
height:31px!important;
padding:0 10px!important;
font-size:6.2px!important;
}
.ps-placement-chips button.active{
border-color:#77aaa2!important;
background:var(--ps-sage-soft)!important;
color:#2d7067!important;
}
/* Artwork upload and physical-size entry. */
.ps-upload-inner{
grid-template-columns:29px 1fr auto!important;
gap:7px!important;
padding:8px!important;
}
.ps-upload-inner>i{
width:28px!important;
height:28px!important;
}
.ps-upload-inner b{font-size:6.5px!important}
.ps-upload-inner small{font-size:5.4px!important}
.ps-upload-inner button{
height:29px!important;
font-size:5.8px!important;
}
.ps-art-status{font-size:5.6px!important}
.ps-logo-size{
max-width:570px!important;
padding:8px!important;
}
.ps-logo-size>div:nth-child(2){
grid-template-columns:95px auto 95px 72px!important;
justify-content:start!important;
}
.ps-logo-size label span{font-size:5.9px!important}
.ps-logo-size input,
.ps-logo-size select{
height:31px!important;
font-size:6.5px!important;
}
.ps-logo-size>small{font-size:5.4px!important}
/* Method buttons readable without becoming tall. */
.ps-methods{
gap:5px!important;
}
.ps-methods button{
min-height:48px!important;
padding:7px!important;
}
.ps-methods button span b{font-size:6.5px!important}
.ps-methods button span small{
font-size:5.3px!important;
line-height:1.25!important;
}
.ps-methods button.active{
border-color:#e19381!important;
background:var(--ps-coral-soft)!important;
}
.ps-methods button.active>i{
background:var(--ps-coral)!important;
}
.ps-line-colours{
padding:6px 8px!important;
}
.ps-line-colours>span{font-size:6px!important}
.ps-line-colours button{
height:26px!important;
font-size:5.8px!important;
}
/* Text editor: clear fields and explicit Font size in px. */
.ps-input>span{
margin-bottom:1px!important;
font-size:6.2px!important;
}
.ps-input input:not([type=color]),
.ps-input select{
height:32px!important;
padding:0 8px!important;
font-size:6.8px!important;
}
.ps-input input[type=color]{
height:32px!important;
}
.ps-two{
grid-template-columns:1.35fr .65fr!important;
gap:7px!important;
}
.ps-three{
grid-template-columns:.85fr .65fr .85fr!important;
gap:7px!important;
}
.ps-size-stepper{
height:32px!important;
grid-template-columns:30px 1fr 30px!important;
}
.ps-size-stepper button{
font-size:9px!important;
}
.ps-size-stepper output{
font-size:6.4px!important;
font-weight:800!important;
}
.ps-align{
gap:5px!important;
padding-top:1px!important;
}
.ps-align>span{
font-size:6px!important;
}
.ps-align button{
height:28px!important;
padding:0 9px!important;
font-size:5.8px!important;
}
.ps-align button.active{
background:var(--ps-ink)!important;
border-color:var(--ps-ink)!important;
}
/* Add placement as a neat secondary action group. */
.add-placement-block{
background:#fffdfb!important;
}
.ps-add-view{
gap:6px!important;
}
.ps-add-view button{
min-height:41px!important;
font-size:6.2px!important;
}
.ps-add-view button small{
margin-top:1px!important;
font-size:5.2px!important;
}
.ps-add-view button.configured{
border-color:#c8ded8!important;
background:var(--ps-sage-soft)!important;
color:var(--ps-sage)!important;
}
/* Summary / notes and bottom purchase bar. */
.ps-notes summary,
.ps-summary summary{
padding:8px 11px!important;
font-size:6.5px!important;
}
.ps-notes summary span,
.ps-summary summary span{
font-size:5.5px!important;
}
.ps-notes textarea{
min-height:64px!important;
font-size:6.5px!important;
}
#bundleSummaryList article>div b{font-size:6.4px!important}
#bundleSummaryList article>div small{font-size:5.4px!important}
#bundleSummaryList article>aside b{font-size:6.7px!important}
.ps-buybar{
min-height:61px!important;
padding:7px 9px!important;
background:linear-gradient(100deg,#fffdfb 0%,#fff8f2 100%)!important;
}
.ps-buybar>div span{font-size:5.5px!important}
.ps-buybar>div b{font-size:18px!important}
.ps-buybar>div small{font-size:5.4px!important}
.ps-buybar>button{
min-height:42px!important;
border-radius:9px!important;
background:#2f514a!important;
box-shadow:0 6px 16px rgba(47,81,74,.16)!important;
}
.ps-buybar>button span{font-size:7px!important}
.ps-buybar>button b{font-size:14px!important}
/* Fine controls. */
.ps-fine summary{
padding:7px 8px!important;
font-size:5.9px!important;
}
.ps-fine summary span{font-size:5.2px!important}
.ps-fine label{font-size:5.6px!important}
.ps-fine output{font-size:5.5px!important}
@media(max-width:1180px){
.placement-studio{
grid-template-columns:minmax(390px,.82fr) minmax(500px,1.18fr)!important;
}
.ps-view-tabs{
padding-left:72px!important;
padding-right:72px!important;
}
}
@media(max-width:900px){
.placement-studio{grid-template-columns:1fr!important}
.ps-stage{
height:min(490px,72vw)!important;
min-height:380px!important;
}
.ps-view-tabs{
padding-left:0!important;
padding-right:0!important;
justify-content:flex-start!important;
}
.ps-viewbar .customizer-ready-badge{
position:static!important;
transform:none!important;
flex:0 0 auto!important;
}
}
@media(max-width:600px){
.ps-title h1{font-size:16px!important}
.ps-live-price b{font-size:16px!important}
.ps-stage{
height:350px!important;
min-height:330px!important;
}
.ps-view-tabs button{
min-width:78px!important;
}
.ps-logo-size>div:nth-child(2){
grid-template-columns:1fr auto 1fr 62px!important;
}
.ps-two,.ps-three{
grid-template-columns:1fr!important;
}
}
/* =========================================================
V5.14.7 — SKETCH MATCH EDITOR
User-drawn layout: image left, compact editor right.
All editor UI uses readable sans-serif typography.
========================================================= */
.sketch-editor{
--se-ink:#2f3333;
--se-muted:#737b79;
--se-line:#dedfda;
--se-soft:#f8f7f3;
--se-warm:#fff8f4;
--se-coral:#e77963;
--se-coral-soft:#fff1ec;
--se-sage:#4d8177;
--se-sage-soft:#eef7f4;
grid-template-columns:minmax(430px,.80fr) minmax(650px,1.20fr)!important;
gap:12px!important;
align-items:stretch!important;
}
.sketch-editor,
.sketch-controls,
.sketch-viewbar,
.sketch-preview-actions,
.sketch-editor button,
.sketch-editor input,
.sketch-editor select,
.sketch-editor textarea{
font-family:"Nunito Sans","Arial","Helvetica",sans-serif;
}
.sketch-preview,
.sketch-controls{
border:1px solid var(--se-line)!important;
border-radius:14px!important;
background:#fff!important;
box-shadow:0 8px 28px rgba(46,50,48,.045)!important;
}
/* LEFT — exactly tabs / image / 4 actions */
.sketch-preview{
position:sticky!important;
top:calc(var(--header-height,58px) + 8px)!important;
height:calc(100vh - var(--header-height,58px) - 18px)!important;
min-height:620px!important;
display:grid!important;
grid-template-rows:54px minmax(0,1fr) 54px!important;
overflow:hidden!important;
}
.sketch-viewbar{
min-height:54px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:8px 12px!important;
border-bottom:1px solid var(--se-line)!important;
background:#fff!important;
}
.sketch-viewbar .ps-view-tabs{
width:auto!important;
max-width:100%!important;
justify-content:center!important;
gap:8px!important;
padding:0!important;
}
.sketch-viewbar .ps-view-tabs button{
min-width:92px!important;
height:36px!important;
justify-content:center!important;
gap:5px!important;
padding:0 11px!important;
border:1px solid #d8dad6!important;
border-radius:8px!important;
background:#fff!important;
color:#535a58!important;
font-size:12px!important;
font-weight:700!important;
}
.sketch-viewbar .ps-view-tabs button:hover{
border-color:#b8c4c0!important;
background:#fafbf9!important;
}
.sketch-viewbar .ps-view-tabs button.active{
background:var(--se-ink)!important;
border-color:var(--se-ink)!important;
color:#fff!important;
}
.sketch-viewbar .ps-view-tabs button.configured:not(.active){
border-color:#b9d6cf!important;
background:var(--se-sage-soft)!important;
color:#346f66!important;
}
.sketch-viewbar .ps-view-tabs button>i{
width:15px!important;
min-width:15px!important;
height:15px!important;
font-size:8px!important;
}
.sketch-viewbar .ps-view-tabs button>em{
width:16px!important;
height:16px!important;
font-size:10px!important;
}
.sketch-viewbar .customizer-ready-badge{
position:absolute!important;
right:12px!important;
top:18px!important;
font-size:10px!important;
}
.sketch-viewbar .customizer-ready-badge i{
width:7px!important;
height:7px!important;
}
.sketch-stage{
height:auto!important;
min-height:0!important;
position:relative!important;
background:radial-gradient(circle at 50% 45%,#fff 0 47%,#f7f7f4 80%,#f1f0ec 100%)!important;
}
.sketch-stage .ps-garment{
inset:4%!important;
width:92%!important;
height:92%!important;
}
.sketch-stage .ps-empty{
font-size:11px!important;
padding:7px 10px!important;
}
.sketch-stage .ps-view-label{
font-size:10px!important;
padding:5px 8px!important;
}
.sketch-preview-actions{
min-height:54px!important;
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:8px!important;
align-items:center!important;
padding:8px 12px!important;
border-top:1px solid var(--se-line)!important;
background:#fff!important;
}
.sketch-preview-actions button{
width:100%!important;
height:34px!important;
padding:0 8px!important;
border:1px solid #d9dcda!important;
border-radius:7px!important;
background:#fff!important;
color:#4a5150!important;
font-size:11px!important;
font-weight:700!important;
cursor:pointer!important;
}
.sketch-preview-actions button:hover{
background:#f7f8f6!important;
}
.sketch-preview-actions button:disabled{
opacity:.35!important;
cursor:not-allowed!important;
}
/* RIGHT — sketch header */
.sketch-controls{
position:sticky!important;
top:calc(var(--header-height,58px) + 8px)!important;
height:calc(100vh - var(--header-height,58px) - 18px)!important;
min-height:620px!important;
display:flex!important;
flex-direction:column!important;
overflow:hidden!important;
}
.sketch-editor-head{
min-height:68px;
display:grid;
grid-template-columns:92px minmax(180px,1fr) 72px 86px 70px 108px;
gap:8px;
align-items:center;
padding:9px 12px;
border-bottom:1px solid var(--se-line);
background:#fff;
}
.sketch-item-id{
min-width:0;
display:grid;
grid-template-columns:34px 1fr;
gap:7px;
align-items:center;
}
.sketch-item-id>span{
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:8px;
background:var(--se-coral);
color:#fff;
font-size:13px;
font-weight:800;
}
.sketch-item-id small,
.sketch-item-id b{
display:block;
}
.sketch-item-id small{
font-size:9px;
color:#9b6b61;
font-weight:800;
letter-spacing:.08em;
}
.sketch-item-id b{
margin-top:1px;
font-size:11px;
color:#424746;
}
.sketch-product-name{
min-width:0;
padding:0 8px;
border-left:1px solid #ece9e4;
}
.sketch-product-name small,
.sketch-product-name b{
display:block;
}
.sketch-product-name small{
font-size:9px;
color:#8b918f;
letter-spacing:.08em;
font-weight:800;
}
.sketch-product-name b{
margin-top:2px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
color:#333837;
font-size:13px;
font-weight:800;
}
.sketch-qty{
display:grid;
gap:3px;
}
.sketch-qty span{
font-size:10px;
color:#666d6b;
font-weight:700;
}
.sketch-qty input{
width:100%!important;
height:36px!important;
border:1px solid #d7d9d6!important;
border-radius:7px!important;
background:#fff!important;
text-align:center!important;
font-size:13px!important;
font-weight:700!important;
}
.sketch-head-btn{
height:36px;
border:1px solid #d7d9d6;
border-radius:7px;
background:#fff;
color:#444a48;
font-size:11px;
font-weight:700;
cursor:pointer;
}
.sketch-head-btn:hover{
background:#f8f8f6;
}
.sketch-head-btn.add{
border-color:#c5ddd6;
background:var(--se-sage-soft);
color:#326f66;
}
.sketch-head-price{
min-width:0;
padding:6px 8px;
border:1px solid #e4ddd7;
border-radius:8px;
background:var(--se-warm);
text-align:right;
}
.sketch-head-price small,
.sketch-head-price b{
display:block;
}
.sketch-head-price small{
font-size:9px;
color:#9a6c60;
font-weight:800;
letter-spacing:.08em;
}
.sketch-head-price b{
margin-top:1px;
font-size:16px!important;
font-weight:800!important;
color:#303533;
font-family:"Nunito Sans","Arial",sans-serif!important;
}
.sketch-item-tabs{
min-height:0!important;
padding:5px 10px!important;
border-bottom:1px solid var(--se-line)!important;
background:#faf9f7!important;
}
.sketch-item-tabs[hidden]{
display:none!important;
}
.sketch-item-tabs button{
flex-basis:120px!important;
min-height:37px!important;
}
.sketch-item-tabs button b{
font-size:11px!important;
}
.sketch-item-tabs button small{
font-size:9px!important;
}
/* Scroll body */
.sketch-scroll{
flex:1 1 auto!important;
overflow-y:auto!important;
overscroll-behavior:contain!important;
scrollbar-width:thin!important;
scrollbar-color:#bcbfbb transparent!important;
background:#fff!important;
}
.sketch-scroll::-webkit-scrollbar{
width:8px;
}
.sketch-scroll::-webkit-scrollbar-thumb{
background:#bcbfbb;
border-radius:999px;
}
/* Size dropdown + colours on one row */
.sketch-garment-row{
display:grid;
grid-template-columns:170px minmax(0,1fr);
gap:12px 16px;
align-items:start;
padding:12px;
border-bottom:1px solid var(--se-line);
background:#fff;
}
.sketch-size-select{
display:grid;
gap:5px;
}
.sketch-size-select>span,
.sketch-field-title>span{
font-size:11px;
color:#4e5553;
font-weight:800;
}
.sketch-size-select select{
width:100%;
height:38px;
border:1px solid #d6d9d6;
border-radius:7px;
background:#fff;
padding:0 10px;
color:#343a38;
font-size:13px;
font-weight:700;
}
.sketch-size-select small{
color:#7b8380;
font-size:10px;
}
.sketch-colour-group{
min-width:0;
}
.sketch-field-title{
min-height:19px;
display:flex;
justify-content:space-between;
gap:8px;
align-items:center;
margin-bottom:5px;
}
.sketch-field-title small{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
color:#78807d;
font-size:10px;
}
.sketch-colours{
display:flex!important;
flex-wrap:wrap!important;
gap:7px!important;
}
.sketch-colours button{
width:50px!important;
min-height:48px!important;
padding:3px!important;
border-radius:8px!important;
}
.sketch-colours button i{
width:28px!important;
height:28px!important;
}
.sketch-colours button span{
max-width:46px!important;
font-size:9px!important;
}
.sketch-colours button.active{
border-color:#d6c7bf!important;
background:#fbf3ee!important;
}
.sketch-stock{
grid-column:1/-1;
margin:0!important;
padding-top:1px;
color:#4c786c!important;
font-size:10px!important;
}
/* Custom size only as a small optional strip */
.sketch-custom-size{
max-width:none!important;
margin:0!important;
padding:8px 12px!important;
border-top:0!important;
border-bottom:1px solid var(--se-line)!important;
background:#fbfbf9!important;
}
.sketch-custom-size>label{
font-size:10px!important;
}
.sketch-custom-size #customSizeBox{
max-width:430px!important;
margin-top:7px!important;
}
.sketch-custom-size #customSizeBox input{
height:34px!important;
font-size:12px!important;
}
.sketch-custom-size #customSizeBox small{
font-size:9px!important;
}
/* Main slot editor */
.sketch-slot-block{
padding:12px!important;
border-bottom:1px solid var(--se-line)!important;
}
.sketch-slot-block .ps-block-head{
grid-template-columns:30px 1fr!important;
gap:8px!important;
}
.sketch-slot-block .ps-block-head>span{
width:30px!important;
height:30px!important;
font-size:11px!important;
}
.sketch-slot-block .ps-block-head b{
font-size:14px!important;
}
.sketch-slot-block .ps-block-head small{
font-size:10px!important;
}
.sketch-slot-block #removeDecoration{
font-size:10px!important;
}
.sketch-mode-choice{
grid-template-columns:1fr 1fr!important;
gap:10px!important;
}
.sketch-mode-choice button{
min-height:62px!important;
grid-template-columns:34px 1fr!important;
gap:8px!important;
padding:9px!important;
}
.sketch-mode-choice button>i{
width:34px!important;
height:34px!important;
font-size:16px!important;
}
.sketch-mode-choice button b{
font-size:12px!important;
}
.sketch-mode-choice button small{
margin-top:2px!important;
font-size:9px!important;
line-height:1.3!important;
}
.sketch-mode-choice button.active{
border-color:#e19a88!important;
background:var(--se-coral-soft)!important;
}
.sketch-mode-choice button.active>i{
background:var(--se-coral)!important;
}
.sketch-placement-row{
margin-top:10px;
padding-top:10px;
border-top:1px solid #eceae5;
}
.sketch-placement-row .ps-label-row b{
font-size:11px!important;
}
.sketch-placement-row .ps-label-row small{
font-size:9px!important;
}
.sketch-placement-row .ps-placement-chips{
gap:7px!important;
}
.sketch-placement-row .ps-placement-chips button{
height:34px!important;
padding:0 12px!important;
font-size:11px!important;
}
/* Compact field cards — like the user sketch */
.sketch-fields-grid{
display:grid!important;
gap:10px!important;
margin-top:10px!important;
}
.sketch-fields-grid.artwork-grid{
grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr)!important;
}
.sketch-fields-grid.text-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.sketch-field-card{
min-width:0;
padding:9px;
border:1px solid #dedfda;
border-radius:8px;
background:#fff;
}
.sketch-field-card.upload-card{
min-height:84px;
}
.sketch-field-card.logo-size-card{
min-height:84px;
}
.sketch-field-card.method-card-wide,
.sketch-field-card.text-wide,
.sketch-fine{
grid-column:1/-1!important;
}
.sketch-field-card.text-wide{
padding:9px!important;
}
.sketch-field-card.ps-input{
gap:5px!important;
}
.sketch-field-card.ps-input>span{
font-size:11px!important;
}
.sketch-field-card.ps-input input:not([type=color]),
.sketch-field-card.ps-input select{
height:36px!important;
padding:0 9px!important;
font-size:12px!important;
}
.sketch-field-card.ps-input input[type=color]{
height:36px!important;
}
.sketch-logo-size{
display:grid;
grid-template-columns:1fr auto 1fr 70px;
gap:6px;
align-items:end;
}
.sketch-logo-size label{
display:grid;
gap:4px;
}
.sketch-logo-size label span{
font-size:10px;
color:#626967;
font-weight:700;
}
.sketch-logo-size input,
.sketch-logo-size select{
width:100%;
height:36px;
border:1px solid #d7d9d6;
border-radius:7px;
background:#fff;
padding:0 8px;
font-size:12px;
}
.sketch-logo-size>b{
align-self:center;
padding-top:16px;
}
.sketch-methods{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:8px!important;
}
.sketch-methods button{
min-height:52px!important;
padding:8px!important;
}
.sketch-methods button span b{
font-size:11px!important;
}
.sketch-methods button span small{
font-size:9px!important;
}
.sketch-methods button.active{
border-color:#e39a88!important;
background:var(--se-coral-soft)!important;
}
.sketch-field-card .ps-line-colours{
margin-top:7px;
padding:7px 8px!important;
}
.sketch-field-card .ps-line-colours>span{
font-size:10px!important;
}
.sketch-field-card .ps-line-colours button{
height:28px!important;
font-size:9px!important;
}
.sketch-fine{
margin:0!important;
border:1px solid #dedfda!important;
border-radius:8px!important;
background:#fafaf8!important;
}
.sketch-fine summary{
padding:9px!important;
font-size:10px!important;
}
.sketch-fine summary span{
font-size:9px!important;
}
.sketch-fine>div{
gap:12px!important;
padding:0 9px 9px!important;
}
.sketch-fine label{
font-size:10px!important;
}
.sketch-fine output{
font-size:9px!important;
}
/* Text fields */
.font-size-card .ps-size-stepper{
height:36px!important;
grid-template-columns:34px 1fr 34px!important;
}
.font-size-card .ps-size-stepper button{
font-size:16px!important;
}
.font-size-card .ps-size-stepper output{
font-size:11px!important;
}
.align-card{
display:grid!important;
grid-template-columns:auto repeat(3,1fr)!important;
gap:5px!important;
align-items:end!important;
}
.align-card>span{
grid-column:1/-1;
margin:0!important;
font-size:11px!important;
font-weight:700!important;
}
.align-card button{
height:36px!important;
padding:0 7px!important;
font-size:10px!important;
}
.align-card button.active{
background:var(--se-ink)!important;
border-color:var(--se-ink)!important;
}
/* Add placement row */
.sketch-add-placement{
padding:11px 12px!important;
background:#fffaf7!important;
}
.sketch-add-placement .ps-block-head{
grid-template-columns:30px 1fr!important;
}
.sketch-add-placement .ps-block-head>span{
width:30px!important;
height:30px!important;
font-size:12px!important;
}
.sketch-add-placement .ps-block-head b{
font-size:13px!important;
}
.sketch-add-placement .ps-block-head small{
font-size:9px!important;
}
.sketch-add-placement .ps-add-view{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:8px!important;
}
.sketch-add-placement .ps-add-view button{
min-height:44px!important;
font-size:11px!important;
}
.sketch-add-placement .ps-add-view button small{
margin-top:2px!important;
font-size:9px!important;
}
/* Notes / summary readable */
.sketch-notes summary,
.sketch-summary summary{
padding:10px 12px!important;
font-size:11px!important;
}
.sketch-notes summary span,
.sketch-summary summary span{
font-size:9px!important;
}
.sketch-notes textarea{
min-height:70px!important;
font-size:11px!important;
}
.sketch-summary #bundleSummaryList article>div b{
font-size:11px!important;
}
.sketch-summary #bundleSummaryList article>div small{
font-size:9px!important;
}
/* Bottom total stays fixed and clear */
.sketch-buybar{
min-height:62px!important;
grid-template-columns:minmax(120px,.7fr) minmax(220px,1.3fr)!important;
gap:9px!important;
padding:8px 12px!important;
border-top:1px solid var(--se-line)!important;
background:#fff!important;
}
.sketch-buybar>div span{
font-size:9px!important;
}
.sketch-buybar>div b{
font-family:"Nunito Sans","Arial",sans-serif!important;
font-size:17px!important;
font-weight:800!important;
}
.sketch-buybar>div small{
font-size:9px!important;
}
.sketch-buybar>button{
min-height:42px!important;
border-radius:8px!important;
background:var(--se-sage)!important;
}
.sketch-buybar>button span{
font-size:12px!important;
}
.sketch-buybar>button b{
font-family:"Nunito Sans","Arial",sans-serif!important;
font-size:13px!important;
font-weight:800!important;
}
/* Responsive */
@media(max-width:1200px){
.sketch-editor{
grid-template-columns:minmax(390px,.85fr) minmax(560px,1.15fr)!important;
}
.sketch-editor-head{
grid-template-columns:86px minmax(150px,1fr) 66px 80px 64px 96px;
gap:6px;
}
.sketch-viewbar .ps-view-tabs button{
min-width:80px!important;
}
}
@media(max-width:980px){
.sketch-editor{
grid-template-columns:1fr!important;
}
.sketch-preview,
.sketch-controls{
position:static!important;
height:auto!important;
min-height:0!important;
}
.sketch-preview{
grid-template-rows:54px 470px 54px!important;
}
.sketch-editor-head{
grid-template-columns:82px minmax(150px,1fr) 62px 78px 62px 92px;
}
.sketch-scroll{
max-height:none!important;
overflow:visible!important;
}
}
@media(max-width:720px){
.sketch-editor-head{
grid-template-columns:78px 1fr 58px 72px;
}
.sketch-head-btn.add{
display:none;
}
.sketch-head-price{
grid-column:auto;
}
.sketch-product-name{
min-width:120px;
}
.sketch-garment-row{
grid-template-columns:140px 1fr;
}
.sketch-fields-grid.artwork-grid,
.sketch-fields-grid.text-grid{
grid-template-columns:1fr 1fr!important;
}
.sketch-field-card.method-card-wide,
.sketch-field-card.text-wide,
.sketch-fine{
grid-column:1/-1!important;
}
}
@media(max-width:520px){
.sketch-preview{
grid-template-rows:auto 360px auto!important;
}
.sketch-viewbar{
justify-content:flex-start!important;
}
.sketch-viewbar .ps-view-tabs{
justify-content:flex-start!important;
overflow:auto!important;
}
.sketch-viewbar .customizer-ready-badge{
display:none!important;
}
.sketch-preview-actions{
grid-template-columns:1fr 1fr!important;
}
.sketch-editor-head{
grid-template-columns:70px 1fr 60px;
}
.sketch-head-btn{
display:none;
}
.sketch-head-price{
grid-column:3;
grid-row:1;
}
.sketch-qty{
grid-column:1;
grid-row:2;
}
.sketch-product-name{
grid-column:2/-1;
grid-row:2;
}
.sketch-garment-row{
grid-template-columns:1fr;
}
.sketch-stock{
grid-column:1;
}
.sketch-fields-grid.artwork-grid,
.sketch-fields-grid.text-grid{
grid-template-columns:1fr!important;
}
.sketch-add-placement .ps-add-view{
grid-template-columns:1fr 1fr!important;
}
}
/* =========================================================
V5.14.8 — FORM STUDIO
Proper compact form UI + bigger editor + reliable preview
========================================================= */
.sketch-editor{
grid-template-columns:minmax(390px,.68fr) minmax(690px,1.32fr)!important;
gap:10px!important;
}
.sketch-preview,
.sketch-controls{
border-radius:12px!important;
box-shadow:0 6px 20px rgba(45,48,46,.035)!important;
}
/* Left preview: useful image area, no oversized blank frame. */
.sketch-preview{
grid-template-rows:50px minmax(0,1fr) 48px!important;
}
.sketch-viewbar{
min-height:50px!important;
padding:7px 10px!important;
}
.sketch-viewbar .ps-view-tabs{
gap:5px!important;
}
.sketch-viewbar .ps-view-tabs button{
min-width:82px!important;
height:34px!important;
padding:0 8px!important;
font-size:11px!important;
}
.sketch-viewbar .customizer-ready-badge{
right:8px!important;
top:16px!important;
font-size:9px!important;
}
.sketch-stage{
background:#f8f8f6!important;
}
.sketch-stage .ps-garment{
inset:6%!important;
width:88%!important;
height:88%!important;
object-fit:contain!important;
}
.sketch-preview-actions{
min-height:48px!important;
padding:7px 9px!important;
gap:6px!important;
}
.sketch-preview-actions button{
height:32px!important;
font-size:10px!important;
}
/* Right header becomes a genuine compact form header. */
.sketch-editor-head{
min-height:62px!important;
grid-template-columns:82px minmax(190px,1fr) 65px 84px 62px 100px!important;
gap:6px!important;
padding:8px 10px!important;
}
.sketch-item-id>span{
width:32px!important;
height:32px!important;
}
.sketch-item-id small,
.sketch-product-name small,
.sketch-head-price small{
font-size:8px!important;
}
.sketch-item-id b{
font-size:10px!important;
}
.sketch-product-name b{
font-size:12px!important;
}
.sketch-qty span{
font-size:9px!important;
}
.sketch-qty input,
.sketch-head-btn{
height:34px!important;
}
.sketch-head-price{
padding:5px 7px!important;
}
.sketch-head-price b{
font-size:15px!important;
}
/* Garment row: actual form fields rather than cards. */
.sketch-garment-row{
grid-template-columns:155px minmax(0,1fr)!important;
gap:9px 14px!important;
padding:10px 12px!important;
background:#fbfbf9!important;
}
.sketch-size-select>span,
.sketch-field-title>span{
font-size:10px!important;
}
.sketch-size-select select{
height:36px!important;
font-size:12px!important;
}
.sketch-size-select small,
.sketch-field-title small{
font-size:9px!important;
}
.sketch-colours{
gap:5px!important;
}
.sketch-colours button{
width:43px!important;
min-height:42px!important;
}
.sketch-colours button i{
width:24px!important;
height:24px!important;
}
.sketch-colours button span{
font-size:8px!important;
}
.sketch-stock{
font-size:9px!important;
}
/* Compact optional custom size line. */
.sketch-custom-size{
padding:7px 12px!important;
}
.sketch-custom-size>label{
font-size:9px!important;
}
.sketch-custom-size #customSizeBox{
max-width:390px!important;
padding:6px!important;
}
.sketch-custom-size #customSizeBox input{
height:32px!important;
font-size:11px!important;
}
/* Current placement: clean form section, not giant cards. */
.sketch-slot-block{
padding:10px 12px!important;
}
.sketch-slot-block .ps-block-head{
margin-bottom:6px!important;
}
.sketch-slot-block .ps-block-head>span{
width:27px!important;
height:27px!important;
font-size:10px!important;
}
.sketch-slot-block .ps-block-head b{
font-size:13px!important;
}
.sketch-slot-block .ps-block-head small{
font-size:9px!important;
}
.sketch-mode-choice{
gap:6px!important;
}
.sketch-mode-choice button{
min-height:46px!important;
grid-template-columns:28px 1fr!important;
gap:7px!important;
padding:6px 8px!important;
border-radius:7px!important;
}
.sketch-mode-choice button>i{
width:28px!important;
height:28px!important;
font-size:13px!important;
}
.sketch-mode-choice button b{
font-size:11px!important;
}
.sketch-mode-choice button small{
font-size:8px!important;
}
/* Placement becomes a slim radio row. */
.sketch-placement-row{
margin-top:8px!important;
padding-top:8px!important;
}
.sketch-placement-row .ps-label-row{
margin-bottom:4px!important;
}
.sketch-placement-row .ps-label-row b{
font-size:10px!important;
}
.sketch-placement-row .ps-label-row small{
font-size:8px!important;
}
.sketch-placement-row .ps-placement-chips{
gap:5px!important;
}
.sketch-placement-row .ps-placement-chips button{
height:31px!important;
padding:0 10px!important;
font-size:10px!important;
}
/* Real form grid. */
.sketch-fields-grid{
gap:8px!important;
margin-top:8px!important;
}
.sketch-fields-grid.artwork-grid{
grid-template-columns:minmax(0,1.4fr) minmax(210px,.6fr)!important;
}
.sketch-fields-grid.text-grid{
grid-template-columns:minmax(200px,1.5fr) minmax(150px,1fr) minmax(120px,.72fr)!important;
}
.sketch-field-card{
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
}
.sketch-field-card.upload-card,
.sketch-field-card.logo-size-card{
padding:8px!important;
border:1px solid #e0e1dd!important;
border-radius:7px!important;
background:#fbfbf9!important;
}
.sketch-field-card.upload-card,
.sketch-field-card.logo-size-card{
min-height:76px!important;
}
.sketch-field-card.method-card-wide{
padding-top:1px!important;
}
.sketch-field-title{
margin-bottom:4px!important;
}
.sketch-field-title>span{
font-size:10px!important;
}
.sketch-field-title small{
font-size:8px!important;
}
/* Upload field compact. */
.sketch-field-card .ps-upload{
border-radius:6px!important;
}
.sketch-field-card .ps-upload-inner{
grid-template-columns:25px 1fr auto!important;
padding:6px!important;
}
.sketch-field-card .ps-upload-inner>i{
width:25px!important;
height:25px!important;
}
.sketch-field-card .ps-upload-inner b{
font-size:9px!important;
}
.sketch-field-card .ps-upload-inner small{
font-size:7px!important;
}
.sketch-field-card .ps-upload-inner button{
height:28px!important;
font-size:8px!important;
}
/* Physical size is a tight production form. */
.sketch-logo-size{
grid-template-columns:1fr auto 1fr 66px!important;
gap:5px!important;
}
.sketch-logo-size label span{
font-size:9px!important;
}
.sketch-logo-size input,
.sketch-logo-size select{
height:32px!important;
padding:0 7px!important;
font-size:10px!important;
}
/* Method = compact segmented choices. */
.sketch-methods{
gap:5px!important;
}
.sketch-methods button{
min-height:43px!important;
padding:6px 7px!important;
border-radius:7px!important;
}
.sketch-methods button span b{
font-size:10px!important;
}
.sketch-methods button span small{
font-size:8px!important;
}
.sketch-field-card .ps-line-colours{
margin-top:5px!important;
padding:5px 7px!important;
}
.sketch-field-card .ps-line-colours>span{
font-size:9px!important;
}
.sketch-field-card .ps-line-colours button{
height:25px!important;
font-size:8px!important;
}
/* Text form: plain labels + fields, no decorative tiles. */
.sketch-field-card.ps-input{
gap:4px!important;
}
.sketch-field-card.ps-input>span{
display:flex!important;
justify-content:space-between!important;
gap:6px!important;
font-size:10px!important;
}
.sketch-field-card.ps-input>span small{
color:#8a918e!important;
font-size:8px!important;
font-weight:600!important;
}
.sketch-field-card.ps-input input:not([type=color]),
.sketch-field-card.ps-input select{
height:34px!important;
padding:0 8px!important;
border:1px solid #d7d9d6!important;
border-radius:6px!important;
background:#fff!important;
font-size:11px!important;
}
.sketch-field-card.ps-input input[type=color]{
height:34px!important;
border:1px solid #d7d9d6!important;
border-radius:6px!important;
background:#fff!important;
}
.font-search-card{
grid-column:span 2!important;
}
.font-search-card>em{
display:block;
margin-top:2px;
color:#6e7975;
font-size:8px;
font-style:normal;
}
.font-size-card .ps-size-stepper{
height:34px!important;
}
.font-size-card .ps-size-stepper output{
font-size:10px!important;
}
.align-card{
padding:0!important;
}
.align-card>span{
font-size:10px!important;
}
.align-card button{
height:32px!important;
font-size:9px!important;
}
/* Fine controls collapsed and unobtrusive. */
.sketch-fine{
border:1px solid #e0e1dd!important;
border-radius:7px!important;
background:#fbfbf9!important;
}
.sketch-fine summary{
padding:7px 8px!important;
font-size:9px!important;
}
.sketch-fine summary span{
font-size:8px!important;
}
.sketch-fine>div{
padding:0 8px 7px!important;
}
.sketch-fine label{
font-size:9px!important;
}
/* Add placement is a compact utility row. */
.sketch-add-placement{
padding:8px 12px!important;
}
.sketch-add-placement .ps-block-head{
margin-bottom:6px!important;
}
.sketch-add-placement .ps-block-head>span{
width:26px!important;
height:26px!important;
}
.sketch-add-placement .ps-block-head b{
font-size:11px!important;
}
.sketch-add-placement .ps-block-head small{
font-size:8px!important;
}
.sketch-add-placement .ps-add-view{
gap:5px!important;
}
.sketch-add-placement .ps-add-view button{
min-height:36px!important;
font-size:9px!important;
}
.sketch-add-placement .ps-add-view button small{
font-size:7px!important;
}
/* Bottom form actions. */
.sketch-notes summary,
.sketch-summary summary{
padding:8px 12px!important;
font-size:10px!important;
}
.sketch-notes summary span,
.sketch-summary summary span{
font-size:8px!important;
}
.sketch-buybar{
min-height:58px!important;
padding:7px 10px!important;
}
.sketch-buybar>div b{
font-size:16px!important;
}
.sketch-buybar>button{
min-height:40px!important;
}
.sketch-buybar>button span{
font-size:11px!important;
}
/* Selected live customer text itself may use any chosen font. */
.ps-text-layer{
line-height:1.05!important;
text-rendering:geometricPrecision;
}
/* Keep editor legible on common 1366/1440 desktop widths. */
@media(max-width:1280px){
.sketch-editor{
grid-template-columns:minmax(370px,.72fr) minmax(600px,1.28fr)!important;
}
.sketch-editor-head{
grid-template-columns:78px minmax(160px,1fr) 60px 76px 58px 92px!important;
}
.sketch-fields-grid.text-grid{
grid-template-columns:minmax(180px,1.35fr) minmax(135px,.9fr) minmax(115px,.75fr)!important;
}
}
@media(max-width:1020px){
.sketch-editor{
grid-template-columns:1fr!important;
}
.sketch-preview,
.sketch-controls{
height:auto!important;
min-height:0!important;
position:static!important;
}
.sketch-preview{
grid-template-rows:50px 430px 48px!important;
}
.sketch-scroll{
overflow:visible!important;
}
}
@media(max-width:700px){
.sketch-fields-grid.artwork-grid,
.sketch-fields-grid.text-grid{
grid-template-columns:1fr 1fr!important;
}
.font-search-card,
.text-wide,
.method-card-wide,
.sketch-fine{
grid-column:1/-1!important;
}
}
@media(max-width:500px){
.sketch-fields-grid.artwork-grid,
.sketch-fields-grid.text-grid{
grid-template-columns:1fr!important;
}
.font-search-card{
grid-column:1!important;
}
}
/* =========================================================
V5.14.9 — COMPACT FORM FINAL
Header aligned · compact size/colour · 50/50 choices
========================================================= */
/* Top editor header: one clean aligned row. */
.sketch-editor-head{
min-height:58px!important;
grid-template-columns:76px minmax(190px,1fr) 58px 82px 58px 94px!important;
gap:6px!important;
align-items:center!important;
padding:7px 10px!important;
}
.sketch-item-id{
grid-template-columns:31px 1fr!important;
gap:6px!important;
}
.sketch-item-id>span{
width:31px!important;
height:31px!important;
border-radius:7px!important;
}
.sketch-item-id small,
.sketch-product-name small,
.sketch-head-price small{
line-height:1!important;
}
.sketch-item-id b,
.sketch-product-name b{
line-height:1.15!important;
}
.sketch-product-name{
padding:0 7px!important;
}
.sketch-qty{
align-self:center!important;
}
.sketch-qty input{
height:32px!important;
}
.sketch-head-btn{
height:32px!important;
}
.sketch-head-price{
min-height:42px!important;
display:grid!important;
align-content:center!important;
padding:5px 7px!important;
}
.sketch-head-price b{
margin-top:2px!important;
}
/* Garment line: small Size on the left, colours immediately beside it. */
.sketch-garment-row{
grid-template-columns:124px minmax(0,1fr)!important;
gap:8px 12px!important;
align-items:start!important;
padding:9px 12px!important;
}
.sketch-size-compact{
width:124px!important;
display:grid!important;
gap:5px!important;
}
.sketch-size-select{
gap:3px!important;
}
.sketch-size-select select{
width:112px!important;
height:33px!important;
padding:0 8px!important;
font-size:11px!important;
}
.sketch-size-select small{
display:none!important;
}
.size-chart-btn{
width:max-content!important;
height:24px!important;
padding:0 6px!important;
border:0!important;
border-bottom:1px solid #74807c!important;
border-radius:0!important;
background:transparent!important;
color:#4e6962!important;
font-size:9px!important;
font-weight:700!important;
cursor:pointer!important;
}
.size-chart-btn:hover{
color:#2d554c!important;
border-color:#2d554c!important;
}
.sketch-colour-group{
padding-top:0!important;
}
.sketch-colours{
gap:5px!important;
}
.sketch-colours button{
width:40px!important;
min-height:39px!important;
}
.sketch-colours button i{
width:22px!important;
height:22px!important;
}
.sketch-colours button span{
font-size:7.5px!important;
}
.sketch-stock{
grid-column:1/-1!important;
padding-top:0!important;
margin-top:-2px!important;
font-size:8.5px!important;
}
/* Current placement: top control row split exactly 50/50. */
.sketch-choice-grid{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:10px!important;
align-items:stretch!important;
}
.sketch-choice-panel{
min-width:0!important;
padding:8px!important;
border:1px solid #e0e1dd!important;
border-radius:7px!important;
background:#fbfbf9!important;
}
.sketch-choice-panel.disabled{
opacity:.55!important;
}
.sketch-mini-label{
min-height:17px!important;
display:flex!important;
justify-content:space-between!important;
align-items:center!important;
gap:6px!important;
margin-bottom:5px!important;
}
.sketch-mini-label b{
font-size:9.5px!important;
color:#4c5351!important;
}
.sketch-mini-label small{
color:#858d8a!important;
font-size:8px!important;
}
.sketch-choice-grid .sketch-mode-choice{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:5px!important;
}
.sketch-choice-grid .sketch-mode-choice button{
min-height:43px!important;
grid-template-columns:24px 1fr!important;
gap:5px!important;
padding:5px 6px!important;
}
.sketch-choice-grid .sketch-mode-choice button>i{
width:24px!important;
height:24px!important;
font-size:11px!important;
}
.sketch-choice-grid .sketch-mode-choice button b{
font-size:9.5px!important;
}
.sketch-choice-grid .sketch-mode-choice button small{
display:none!important;
}
.sketch-choice-grid .sketch-placement-row{
margin:0!important;
padding:8px!important;
border-top:1px solid #e0e1dd!important;
}
.sketch-choice-grid .ps-placement-chips{
display:flex!important;
flex-wrap:wrap!important;
gap:5px!important;
}
.sketch-choice-grid .ps-placement-chips button{
height:31px!important;
padding:0 9px!important;
font-size:9px!important;
flex:0 0 auto!important;
}
.sketch-choice-grid .sketch-placement-row.disabled .ps-placement-chips button{
cursor:not-allowed!important;
}
/* Fields under the choice row: compact normal form. */
#slotEditor{
margin-top:8px!important;
}
.sketch-fields-grid{
gap:7px!important;
margin-top:7px!important;
}
.sketch-fields-grid.text-grid{
grid-template-columns:1.2fr 1.2fr .65fr .65fr!important;
}
.sketch-fields-grid.text-grid .text-wide{
grid-column:span 2!important;
}
.sketch-fields-grid.text-grid .font-search-card{
grid-column:span 2!important;
}
.sketch-fields-grid.text-grid .align-card{
grid-column:span 2!important;
}
.sketch-field-card.ps-input input:not([type=color]),
.sketch-field-card.ps-input select{
height:32px!important;
font-size:10px!important;
}
.sketch-field-card.ps-input>span{
font-size:9.5px!important;
}
.sketch-field-card.ps-input>span small{
font-size:7.5px!important;
}
.font-search-card>em{
font-size:7.5px!important;
}
.font-size-card .ps-size-stepper{
height:32px!important;
}
.align-card button{
height:30px!important;
font-size:8.5px!important;
}
/* Artwork fields stay tight and balanced. */
.sketch-fields-grid.artwork-grid{
grid-template-columns:minmax(0,1.35fr) minmax(190px,.65fr)!important;
}
.sketch-field-card.upload-card,
.sketch-field-card.logo-size-card{
min-height:70px!important;
padding:7px!important;
}
.sketch-logo-size input,
.sketch-logo-size select{
height:31px!important;
font-size:9.5px!important;
}
.sketch-methods button{
min-height:40px!important;
padding:5px 6px!important;
}
.sketch-methods button span b{
font-size:9.5px!important;
}
.sketch-methods button span small{
font-size:7.5px!important;
}
/* Add another placement: small utility buttons, no full-width visual blocks. */
.sketch-add-placement{
padding:8px 12px!important;
}
.sketch-add-placement .ps-block-head{
display:flex!important;
align-items:center!important;
gap:7px!important;
margin-bottom:6px!important;
}
.sketch-add-placement .ps-block-head>span{
flex:0 0 25px!important;
}
.sketch-add-placement .ps-add-view{
display:flex!important;
flex-wrap:wrap!important;
gap:6px!important;
}
.sketch-add-placement .ps-add-view button{
width:auto!important;
min-width:92px!important;
min-height:32px!important;
padding:4px 10px!important;
flex:0 0 auto!important;
font-size:8.5px!important;
}
.sketch-add-placement .ps-add-view button small{
display:inline!important;
margin-left:5px!important;
font-size:7px!important;
}
/* Order note: clearly usable and open by default. */
.sketch-notes{
padding-bottom:10px!important;
background:#fbfbf9!important;
}
.sketch-notes summary{
padding:9px 12px 6px!important;
font-size:10px!important;
}
.sketch-notes textarea{
width:calc(100% - 24px)!important;
min-height:108px!important;
margin:0 12px!important;
padding:9px 10px!important;
border:1px solid #d7d9d6!important;
border-radius:7px!important;
background:#fff!important;
font-size:10px!important;
line-height:1.45!important;
}
/* Bottom order total / Add to bag: slim, not a giant button. */
.sketch-buybar{
min-height:52px!important;
grid-template-columns:minmax(115px,1fr) auto!important;
gap:10px!important;
padding:6px 10px!important;
}
.sketch-buybar>div{
align-self:center!important;
}
.sketch-buybar>div span{
font-size:8px!important;
}
.sketch-buybar>div b{
font-size:15px!important;
}
.sketch-buybar>div small{
font-size:8px!important;
}
.sketch-buybar>button{
width:205px!important;
min-height:36px!important;
padding:0 10px!important;
justify-self:end!important;
border-radius:7px!important;
}
.sketch-buybar>button span{
font-size:10px!important;
}
.sketch-buybar>button b{
font-size:11px!important;
}
/* Size chart modal. */
.size-chart-open{
overflow:hidden!important;
}
.size-chart-modal{
position:fixed!important;
inset:0!important;
z-index:99999!important;
display:grid!important;
place-items:center!important;
padding:24px!important;
background:rgba(35,38,37,.58)!important;
backdrop-filter:blur(3px)!important;
}
.size-chart-modal[hidden]{
display:none!important;
}
.size-chart-dialog{
width:min(820px,94vw)!important;
max-height:90vh!important;
display:flex!important;
flex-direction:column!important;
overflow:hidden!important;
border-radius:12px!important;
background:#fff!important;
box-shadow:0 24px 70px rgba(0,0,0,.24)!important;
}
.size-chart-head{
min-height:58px!important;
display:flex!important;
justify-content:space-between!important;
align-items:center!important;
gap:12px!important;
padding:10px 14px!important;
border-bottom:1px solid #e2e1dd!important;
}
.size-chart-head b,
.size-chart-head small{
display:block!important;
}
.size-chart-head b{
font-size:14px!important;
}
.size-chart-head small{
margin-top:2px!important;
color:#7b8380!important;
font-size:10px!important;
}
.size-chart-head button{
width:34px!important;
height:34px!important;
border:1px solid #d8dad7!important;
border-radius:7px!important;
background:#fff!important;
font-size:20px!important;
cursor:pointer!important;
}
.size-chart-body{
overflow:auto!important;
padding:12px!important;
background:#f7f7f4!important;
}
.size-chart-body img{
display:block!important;
width:100%!important;
height:auto!important;
max-height:72vh!important;
object-fit:contain!important;
margin:auto!important;
border-radius:8px!important;
}
/* More exact responsive behaviour. */
@media(max-width:1260px){
.sketch-editor-head{
grid-template-columns:72px minmax(160px,1fr) 55px 76px 55px 88px!important;
}
.sketch-garment-row{
grid-template-columns:116px minmax(0,1fr)!important;
}
.sketch-size-compact{
width:116px!important;
}
.sketch-size-select select{
width:106px!important;
}
}
@media(max-width:900px){
.sketch-choice-grid{
grid-template-columns:1fr!important;
}
.sketch-fields-grid.text-grid{
grid-template-columns:1fr 1fr!important;
}
.sketch-fields-grid.text-grid .text-wide,
.sketch-fields-grid.text-grid .font-search-card,
.sketch-fields-grid.text-grid .align-card{
grid-column:1/-1!important;
}
}
@media(max-width:560px){
.sketch-garment-row{
grid-template-columns:105px minmax(0,1fr)!important;
}
.sketch-size-compact{
width:105px!important;
}
.sketch-size-select select{
width:98px!important;
}
.sketch-colours button{
width:36px!important;
}
.sketch-fields-grid.artwork-grid,
.sketch-fields-grid.text-grid{
grid-template-columns:1fr!important;
}
.sketch-fields-grid.text-grid .text-wide,
.sketch-fields-grid.text-grid .font-search-card,
.sketch-fields-grid.text-grid .align-card{
grid-column:1!important;
}
.sketch-buybar>button{
width:160px!important;
}
}
/* =========================================================
V5.14.10 — LIVE CONTROLS
Compact artwork row + live preview sizing + richer review
========================================================= */
/* Make the garment visibly larger inside the existing left panel. */
.sketch-stage .ps-garment{
inset:1.5%!important;
width:97%!important;
height:97%!important;
object-fit:contain!important;
}
/* Live artwork sizing belongs on the preview, not in the form. */
.live-design-size{
position:absolute!important;
left:50%!important;
bottom:18px!important;
z-index:18!important;
transform:translateX(-50%)!important;
min-width:300px!important;
display:grid!important;
grid-template-columns:auto 28px minmax(90px,150px) 42px 28px!important;
gap:6px!important;
align-items:center!important;
padding:6px 8px!important;
border:1px solid #d9ddd9!important;
border-radius:9px!important;
background:rgba(255,255,255,.94)!important;
box-shadow:0 6px 18px rgba(42,48,45,.10)!important;
backdrop-filter:blur(5px)!important;
}
.live-design-size[hidden]{display:none!important}
.live-design-size>span{
color:#4c5552!important;
font-size:9px!important;
font-weight:800!important;
white-space:nowrap!important;
}
.live-design-size button{
width:28px!important;
height:28px!important;
display:grid!important;
place-items:center!important;
border:1px solid #d7dbd7!important;
border-radius:6px!important;
background:#fff!important;
color:#313735!important;
font-size:16px!important;
line-height:1!important;
cursor:pointer!important;
}
.live-design-size button:hover{
border-color:#8fb5ad!important;
background:#f1f8f6!important;
}
.live-design-size input[type=range]{
width:100%!important;
margin:0!important;
}
.live-design-size output{
color:#4c5552!important;
font-size:9px!important;
font-weight:800!important;
text-align:center!important;
}
/* Artwork / finished size / method all on one compact row. */
.sketch-fields-grid.artwork-grid{
display:grid!important;
grid-template-columns:minmax(150px,.70fr) minmax(190px,.82fr) minmax(310px,1.48fr)!important;
gap:7px!important;
align-items:start!important;
}
.sketch-fields-grid.artwork-grid .upload-card,
.sketch-fields-grid.artwork-grid .logo-size-card,
.sketch-fields-grid.artwork-grid .method-card{
min-height:72px!important;
height:auto!important;
padding:7px!important;
border:1px solid #e0e1dd!important;
border-radius:7px!important;
background:#fbfbf9!important;
}
.sketch-fields-grid.artwork-grid .sketch-field-title{
min-height:16px!important;
margin-bottom:5px!important;
}
.sketch-fields-grid.artwork-grid .sketch-field-title>span{
font-size:9px!important;
}
.sketch-fields-grid.artwork-grid .sketch-field-title small{
max-width:120px!important;
font-size:7px!important;
}
/* Upload is intentionally just Choose file + selected filename. */
.sketch-fields-grid .ps-upload{
border:0!important;
background:transparent!important;
overflow:visible!important;
}
.compact-file-picker{
min-height:34px!important;
display:flex!important;
align-items:center!important;
gap:7px!important;
}
.compact-file-picker button{
flex:0 0 auto!important;
height:31px!important;
padding:0 10px!important;
border:1px solid #cbd7d3!important;
border-radius:6px!important;
background:#eef7f4!important;
color:#356e65!important;
font-size:9px!important;
font-weight:800!important;
cursor:pointer!important;
}
.compact-file-picker span{
min-width:0!important;
overflow:hidden!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
color:#69716f!important;
font-size:8px!important;
}
.sketch-fields-grid .ps-art-status{
margin-top:4px!important;
max-width:100%!important;
overflow:hidden!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
font-size:7px!important;
}
/* Finished size stays one compact line. */
.sketch-fields-grid.artwork-grid .sketch-logo-size{
grid-template-columns:1fr auto 1fr 62px!important;
gap:4px!important;
}
.sketch-fields-grid.artwork-grid .sketch-logo-size input,
.sketch-fields-grid.artwork-grid .sketch-logo-size select{
height:30px!important;
padding:0 6px!important;
font-size:9px!important;
}
.sketch-fields-grid.artwork-grid .sketch-logo-size label span{
font-size:8px!important;
}
/* Method choices share the same third column. */
.method-card .sketch-methods{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:4px!important;
}
.method-card .sketch-methods button{
min-height:32px!important;
height:32px!important;
padding:4px 5px!important;
align-items:center!important;
}
.method-card .sketch-methods button span b{
font-size:8px!important;
line-height:1.05!important;
}
.method-card .sketch-methods button span small{
display:none!important;
}
.method-card .sketch-methods button>i{
width:12px!important;
height:12px!important;
font-size:4px!important;
}
.method-card .ps-line-colours{
margin-top:5px!important;
min-height:28px!important;
padding:4px 6px!important;
}
.method-card .ps-line-colours>span{
font-size:8px!important;
}
.method-card .ps-line-colours button{
height:23px!important;
padding:0 6px!important;
font-size:7px!important;
}
/* Old right-side preview-position card is intentionally gone. */
/* Add another placement = one clean aligned line. */
.single-line-placement{
min-height:50px!important;
display:flex!important;
align-items:center!important;
gap:10px!important;
padding:7px 12px!important;
background:#fffaf7!important;
}
.add-placement-label{
flex:0 0 auto!important;
display:flex!important;
align-items:center!important;
gap:6px!important;
}
.add-placement-label>span{
width:25px!important;
height:25px!important;
display:grid!important;
place-items:center!important;
border-radius:7px!important;
background:#f7ede8!important;
color:#b45d4d!important;
font-size:12px!important;
font-weight:800!important;
}
.add-placement-label b,
.add-placement-label small{
display:block!important;
}
.add-placement-label b{
font-size:9px!important;
line-height:1.05!important;
}
.add-placement-label small{
margin-top:1px!important;
color:#8d837e!important;
font-size:7px!important;
}
.single-line-placement .ps-add-view{
flex:1 1 auto!important;
display:flex!important;
flex-wrap:nowrap!important;
justify-content:flex-start!important;
gap:5px!important;
overflow-x:auto!important;
scrollbar-width:none!important;
}
.single-line-placement .ps-add-view::-webkit-scrollbar{display:none!important}
.single-line-placement .ps-add-view button{
flex:0 0 auto!important;
width:auto!important;
min-width:82px!important;
min-height:29px!important;
height:29px!important;
padding:0 8px!important;
display:inline-flex!important;
flex-direction:row!important;
align-items:center!important;
justify-content:center!important;
gap:4px!important;
font-size:8px!important;
}
.single-line-placement .ps-add-view button small{
display:inline!important;
margin:0!important;
font-size:6.5px!important;
}
/* Order note is small until clicked open. */
.sketch-notes{
background:#fff!important;
padding:0!important;
}
.sketch-notes summary{
min-height:36px!important;
padding:8px 12px!important;
font-size:9px!important;
}
.sketch-notes summary span{
font-size:7.5px!important;
}
.sketch-notes textarea{
width:calc(100% - 24px)!important;
min-height:74px!important;
margin:0 12px 9px!important;
padding:8px 9px!important;
font-size:9px!important;
}
/* Review gives a production-ready breakdown rather than one vague line. */
.sketch-summary{
background:#fbfbf9!important;
}
.sketch-summary summary{
min-height:38px!important;
padding:8px 12px!important;
}
#bundleSummaryList{
padding:0 10px 10px!important;
}
.review-item-card{
display:block!important;
padding:8px!important;
border:1px solid #dedfda!important;
border-radius:8px!important;
background:#fff!important;
}
.review-item-card + .review-item-card{
margin-top:7px!important;
}
.review-item-top{
display:grid!important;
grid-template-columns:25px minmax(0,1fr) auto!important;
gap:7px!important;
align-items:center!important;
padding-bottom:7px!important;
border-bottom:1px solid #ecece8!important;
}
.review-item-top>span{
width:25px!important;
height:25px!important;
display:grid!important;
place-items:center!important;
border-radius:7px!important;
background:#ed765f!important;
color:#fff!important;
font-size:9px!important;
font-weight:800!important;
}
.review-item-top>div>b,
.review-item-top>div>small,
.review-item-top>aside>b,
.review-item-top>aside>small{
display:block!important;
}
.review-item-top>div>b{
font-size:9px!important;
}
.review-item-top>div>small{
margin-top:1px!important;
color:#7f8784!important;
font-size:7.5px!important;
}
.review-item-top>aside{
text-align:right!important;
}
.review-item-top>aside>b{
font-size:10px!important;
}
.review-item-top>aside>small{
color:#4e786d!important;
font-size:7px!important;
}
.review-item-top>aside>button{
margin-top:2px!important;
border:0!important;
background:none!important;
color:#9b655c!important;
text-decoration:underline!important;
font-size:7px!important;
cursor:pointer!important;
}
.review-placement-list{
display:grid!important;
gap:5px!important;
padding-top:7px!important;
}
.review-placement{
display:grid!important;
grid-template-columns:minmax(120px,.7fr) repeat(4,minmax(0,1fr))!important;
gap:5px!important;
align-items:center!important;
padding:5px 6px!important;
border-radius:6px!important;
background:#f8f8f5!important;
}
.review-placement>b{
color:#3e4744!important;
font-size:8px!important;
}
.review-placement>span{
color:#68716e!important;
font-size:7px!important;
line-height:1.25!important;
}
.review-note{
display:grid!important;
grid-template-columns:90px 1fr!important;
gap:7px!important;
padding:6px!important;
border-radius:6px!important;
background:#fff6f1!important;
}
.review-note b{
font-size:8px!important;
}
.review-note span{
color:#6e625d!important;
font-size:7.5px!important;
}
.review-empty{
color:#858d89!important;
font-size:8px!important;
}
/* Smaller final action button. */
.sketch-buybar{
min-height:48px!important;
padding:5px 9px!important;
}
.sketch-buybar>button{
width:168px!important;
min-height:33px!important;
height:33px!important;
padding:0 9px!important;
}
.sketch-buybar>button span{
font-size:9px!important;
}
.sketch-buybar>button b{
font-size:10px!important;
}
.sketch-buybar>div span{
font-size:7.5px!important;
}
.sketch-buybar>div b{
font-size:14px!important;
}
/* Responsive artwork row. */
@media(max-width:1280px){
.sketch-fields-grid.artwork-grid{
grid-template-columns:minmax(145px,.70fr) minmax(175px,.78fr) minmax(275px,1.52fr)!important;
}
.method-card .sketch-methods button span b{
font-size:7.5px!important;
}
}
@media(max-width:980px){
.sketch-fields-grid.artwork-grid{
grid-template-columns:1fr 1fr!important;
}
.sketch-fields-grid.artwork-grid .method-card{
grid-column:1/-1!important;
}
.review-placement{
grid-template-columns:1fr 1fr!important;
}
.review-placement>b{
grid-column:1/-1!important;
}
}
@media(max-width:620px){
.sketch-stage .ps-garment{
inset:1%!important;
width:98%!important;
height:98%!important;
}
.live-design-size{
min-width:260px!important;
grid-template-columns:auto 28px minmax(70px,1fr) 38px 28px!important;
}
.sketch-fields-grid.artwork-grid{
grid-template-columns:1fr!important;
}
.sketch-fields-grid.artwork-grid .method-card{
grid-column:1!important;
}
.single-line-placement{
align-items:flex-start!important;
flex-direction:column!important;
}
.single-line-placement .ps-add-view{
width:100%!important;
}
.review-placement{
grid-template-columns:1fr!important;
}
.sketch-buybar>button{
width:145px!important;
}
}
/* =========================================================
V5.14.11 — FINAL FOCUS EDITOR
Full-screen customiser · palette supplied by customer
#B9D9D5 #E7DACC #EEF2F5 #DDE8EB #C4DADE
========================================================= */
/* Editor-only auto-hide storefront navigation. It is removed from layout flow. */
body.customizer-focus-mode{
background:#EEF2F5!important;
}
body.customizer-focus-mode .announcement{
position:fixed!important;
left:0!important;right:0!important;top:0!important;
z-index:1202!important;
transform:translateY(-110%)!important;
opacity:0!important;
pointer-events:none!important;
transition:transform .22s ease,opacity .18s ease!important;
}
body.customizer-focus-mode .site-header{
position:fixed!important;
left:0!important;right:0!important;top:31px!important;
z-index:1201!important;
transform:translateY(-190%)!important;
opacity:0!important;
pointer-events:none!important;
transition:transform .24s ease,opacity .18s ease!important;
box-shadow:0 10px 26px rgba(54,67,68,.11)!important;
}
body.customizer-focus-mode.editor-no-announcement .site-header{top:0!important}
body.customizer-focus-mode.editor-header-visible .announcement,
body.customizer-focus-mode.editor-header-visible .site-header{
transform:translateY(0)!important;
opacity:1!important;
pointer-events:auto!important;
}
body.customizer-focus-mode .custom-product-v514{
padding:6px 0 24px!important;
background:#EEF2F5!important;
}
body.customizer-focus-mode .custom-product-v514>.container{
width:calc(100% - 12px)!important;
}
/* Final desktop split: preview is deliberately larger than previous builds. */
.sketch-editor{
--final-mint:#B9D9D5;
--final-sand:#E7DACC;
--final-snow:#EEF2F5;
--final-blue:#DDE8EB;
--final-aqua:#C4DADE;
--final-ink:#354344;
--final-muted:#718081;
--final-line:#C4DADE;
grid-template-columns:minmax(500px,.88fr) minmax(620px,1.12fr)!important;
gap:8px!important;
color:var(--final-ink)!important;
}
.sketch-preview,
.sketch-controls{
border:1px solid var(--final-aqua)!important;
border-radius:11px!important;
box-shadow:0 5px 18px rgba(65,90,91,.055)!important;
background:#fff!important;
}
/* Preview panel: larger garment and calmer controls. */
.sketch-preview{
min-height:600px!important;
grid-template-rows:48px minmax(0,1fr) 44px!important;
}
.sketch-viewbar{
min-height:48px!important;
padding:6px 8px!important;
border-color:var(--final-aqua)!important;
background:#fff!important;
}
.sketch-viewbar .ps-view-tabs{
gap:5px!important;
}
.sketch-viewbar .ps-view-tabs button{
min-width:88px!important;
height:32px!important;
border-color:var(--final-aqua)!important;
background:var(--final-snow)!important;
color:var(--final-ink)!important;
font-size:10px!important;
}
.sketch-viewbar .ps-view-tabs button.configured:not(.active){
border-color:var(--final-mint)!important;
background:#f5fbfa!important;
color:#436866!important;
}
.sketch-viewbar .ps-view-tabs button.active{
border-color:#94c3bf!important;
background:var(--final-mint)!important;
color:#263b3b!important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)!important;
}
.sketch-viewbar .ps-view-tabs button>i{
background:var(--final-blue)!important;
color:#527170!important;
}
.sketch-viewbar .ps-view-tabs button.active>i{
background:#fff!important;
color:#486c69!important;
}
.sketch-viewbar .customizer-ready-badge{
color:#4e7470!important;
font-size:8px!important;
}
.sketch-stage{
background:radial-gradient(circle at 50% 44%,#fff 0 52%,#EEF2F5 79%,#DDE8EB 100%)!important;
}
.sketch-stage .ps-garment{
inset:.5%!important;
width:99%!important;
height:99%!important;
}
.ps-view-label{
border-color:var(--final-aqua)!important;
background:rgba(238,242,245,.94)!important;
color:#536665!important;
}
.ps-empty{
border-color:var(--final-aqua)!important;
background:rgba(255,255,255,.92)!important;
color:#687879!important;
}
.sketch-preview-actions{
min-height:44px!important;
padding:6px 8px!important;
gap:5px!important;
border-color:var(--final-aqua)!important;
background:#fff!important;
}
.sketch-preview-actions button{
height:30px!important;
border-color:var(--final-aqua)!important;
background:var(--final-snow)!important;
color:#526261!important;
font-size:8.5px!important;
}
.sketch-preview-actions button:hover:not(:disabled){
background:var(--final-blue)!important;
}
.live-design-size{
min-width:285px!important;
bottom:12px!important;
padding:5px 7px!important;
border-color:var(--final-aqua)!important;
background:rgba(238,242,245,.96)!important;
box-shadow:0 5px 14px rgba(71,98,99,.11)!important;
}
.live-design-size button{
border-color:var(--final-aqua)!important;
background:#fff!important;
}
.live-design-size button:hover{background:var(--final-mint)!important}
/* Right editor header: compact, aligned, soft palette. */
.sketch-controls{
min-height:600px!important;
}
.sketch-editor-head{
min-height:54px!important;
grid-template-columns:70px minmax(180px,1fr) 54px 76px 54px 88px!important;
gap:5px!important;
padding:6px 8px!important;
border-color:var(--final-aqua)!important;
background:var(--final-blue)!important;
}
.sketch-item-id{
grid-template-columns:29px 1fr!important;
gap:5px!important;
}
.sketch-item-id>span{
width:29px!important;height:29px!important;
background:var(--final-mint)!important;
color:#294443!important;
font-size:11px!important;
}
.sketch-item-id small,
.sketch-product-name small,
.sketch-head-price small{
color:#708281!important;
font-size:7px!important;
}
.sketch-item-id b{font-size:9px!important}
.sketch-product-name{
padding:0 6px!important;
border-color:rgba(115,140,140,.18)!important;
}
.sketch-product-name b{
color:#354344!important;
font-size:11px!important;
}
.sketch-qty span{font-size:8px!important}
.sketch-qty input,
.sketch-head-btn{
height:30px!important;
border-color:var(--final-aqua)!important;
background:#fff!important;
color:#425452!important;
font-size:9px!important;
}
.sketch-head-btn.add{
border-color:#a7cbc8!important;
background:var(--final-mint)!important;
color:#315451!important;
}
.sketch-head-price{
min-height:38px!important;
padding:4px 6px!important;
border-color:#dac8b8!important;
background:var(--final-sand)!important;
}
.sketch-head-price b{
color:#3f4846!important;
font-size:13px!important;
}
.sketch-item-tabs{
border-color:var(--final-aqua)!important;
background:var(--final-snow)!important;
}
.sketch-item-tabs button{
border-color:var(--final-aqua)!important;
background:#fff!important;
}
.sketch-item-tabs button.active{
border-color:#a4c9c5!important;
background:var(--final-mint)!important;
}
.sketch-item-tabs button.active>span{
background:#7faeaa!important;
}
/* Scrollable editor body + compact size/colour row. */
.sketch-scroll{
background:#fff!important;
scrollbar-color:#9fc1bf transparent!important;
}
.sketch-garment-row{
grid-template-columns:118px minmax(0,1fr)!important;
gap:6px 10px!important;
padding:7px 10px!important;
border-color:var(--final-aqua)!important;
background:var(--final-snow)!important;
}
.sketch-size-compact{width:118px!important;gap:3px!important}
.sketch-size-select>span,
.sketch-field-title>span{font-size:9px!important}
.sketch-size-select select{
width:108px!important;
height:30px!important;
border-color:var(--final-aqua)!important;
background:#fff!important;
color:#405150!important;
font-size:10px!important;
}
.size-chart-btn{
height:19px!important;
padding:0 3px!important;
border-color:#7fa6a3!important;
color:#517673!important;
font-size:8px!important;
}
.sketch-colours{gap:4px!important}
.sketch-colours button{
width:38px!important;
min-height:36px!important;
border-radius:7px!important;
}
.sketch-colours button i{
width:20px!important;height:20px!important;
}
.sketch-colours button span{font-size:7px!important}
.sketch-colours button.active{
border-color:#ccb9a7!important;
background:var(--final-sand)!important;
}
.sketch-stock{
color:#52736f!important;
font-size:8px!important;
}
/* Personalisation / placement and field cards. */
.sketch-slot-block{
padding:8px 10px!important;
border-color:var(--final-aqua)!important;
}
.sketch-slot-block .ps-block-head{
margin-bottom:5px!important;
}
.sketch-slot-block .ps-block-head>span{
width:25px!important;height:25px!important;
background:var(--final-blue)!important;
color:#536b69!important;
font-size:9px!important;
}
.sketch-slot-block .ps-block-head b{font-size:11px!important}
.sketch-slot-block .ps-block-head small{font-size:8px!important}
.sketch-choice-grid{
gap:7px!important;
}
.sketch-choice-panel{
padding:6px!important;
border-color:var(--final-aqua)!important;
background:var(--final-snow)!important;
}
.sketch-mini-label{
min-height:14px!important;
margin-bottom:4px!important;
}
.sketch-mini-label b{font-size:8.5px!important}
.sketch-mini-label small{font-size:7px!important}
.sketch-choice-grid .sketch-mode-choice{
gap:4px!important;
}
.sketch-choice-grid .sketch-mode-choice button{
min-height:37px!important;
grid-template-columns:22px 1fr!important;
padding:4px 5px!important;
border-color:var(--final-aqua)!important;
background:#fff!important;
}
.sketch-choice-grid .sketch-mode-choice button>i{
width:22px!important;height:22px!important;
background:var(--final-blue)!important;
color:#5f7472!important;
}
.sketch-choice-grid .sketch-mode-choice button b{font-size:8.5px!important}
.sketch-choice-grid .sketch-mode-choice button.active{
border-color:#d2bcaa!important;
background:var(--final-sand)!important;
}
.sketch-choice-grid .sketch-mode-choice button.active>i{
background:#d7c3b0!important;
color:#534b43!important;
}
.sketch-choice-grid .sketch-placement-row{
border-color:var(--final-aqua)!important;
background:var(--final-snow)!important;
}
.sketch-choice-grid .ps-placement-chips{gap:4px!important}
.sketch-choice-grid .ps-placement-chips button{
height:28px!important;
padding:0 7px!important;
border-color:var(--final-aqua)!important;
background:#fff!important;
color:#536362!important;
font-size:8px!important;
}
.sketch-choice-grid .ps-placement-chips button.active{
border-color:#96c0bc!important;
background:var(--final-mint)!important;
color:#31514f!important;
}
/* Artwork row remains upload | finished size | method, but tighter. */
.sketch-fields-grid{
gap:6px!important;
margin-top:6px!important;
}
.sketch-fields-grid.artwork-grid{
grid-template-columns:minmax(145px,.68fr) minmax(180px,.78fr) minmax(300px,1.54fr)!important;
}
.sketch-fields-grid.artwork-grid .upload-card,
.sketch-fields-grid.artwork-grid .logo-size-card,
.sketch-fields-grid.artwork-grid .method-card{
min-height:64px!important;
padding:6px!important;
border-color:var(--final-aqua)!important;
background:var(--final-snow)!important;
}
.compact-file-picker{
min-height:29px!important;
gap:5px!important;
}
.compact-file-picker button{
height:28px!important;
padding:0 8px!important;
border-color:#9fc7c3!important;
background:var(--final-mint)!important;
color:#345653!important;
font-size:8px!important;
}
.compact-file-picker span{font-size:7px!important}
.sketch-fields-grid .ps-art-status{font-size:6.5px!important}
.sketch-fields-grid.artwork-grid .sketch-logo-size input,
.sketch-fields-grid.artwork-grid .sketch-logo-size select{
height:28px!important;
border-color:var(--final-aqua)!important;
background:#fff!important;
font-size:8.5px!important;
}
.method-card .sketch-methods{gap:3px!important}
.method-card .sketch-methods button{
height:29px!important;
min-height:29px!important;
border-color:var(--final-aqua)!important;
background:#fff!important;
}
.method-card .sketch-methods button span b{font-size:7.5px!important}
.method-card .sketch-methods button.active{
border-color:#9bc4c0!important;
background:var(--final-mint)!important;
}
.method-card .sketch-methods button>i{background:#78a8a4!important}
.method-card .ps-line-colours{
background:var(--final-blue)!important;
}
/* Text form: compact, readable, consistent soft-blue borders. */
.sketch-fields-grid.text-grid{
grid-template-columns:1.2fr 1.15fr .62fr .62fr!important;
gap:6px!important;
}
.sketch-field-card.ps-input>span{font-size:8.5px!important}
.sketch-field-card.ps-input>span small{font-size:7px!important}
.sketch-field-card.ps-input input:not([type=color]),
.sketch-field-card.ps-input select{
height:29px!important;
padding:0 7px!important;
border-color:var(--final-aqua)!important;
background:#fff!important;
color:#405150!important;
font-size:9px!important;
}
.sketch-field-card.ps-input input[type=color]{
height:29px!important;
border-color:var(--final-aqua)!important;
}
.font-search-card>em{font-size:7px!important;color:#70817f!important}
.font-size-card .ps-size-stepper{
height:29px!important;
border-color:var(--final-aqua)!important;
}
.align-card button{
height:28px!important;
border-color:var(--final-aqua)!important;
font-size:8px!important;
}
.align-card button.active{
border-color:#96c0bc!important;
background:var(--final-mint)!important;
color:#31514f!important;
}
/* One-line placement utility. */
.single-line-placement{
min-height:44px!important;
gap:8px!important;
padding:5px 10px!important;
border-color:var(--final-aqua)!important;
background:var(--final-blue)!important;
}
.add-placement-label>span{
width:23px!important;height:23px!important;
background:var(--final-sand)!important;
color:#665a50!important;
}
.add-placement-label b{font-size:8.5px!important}
.add-placement-label small{font-size:6.5px!important}
.single-line-placement .ps-add-view{gap:4px!important}
.single-line-placement .ps-add-view button{
min-width:76px!important;
height:27px!important;
min-height:27px!important;
padding:0 7px!important;
border-color:#b4ced0!important;
background:#fff!important;
color:#4d6262!important;
font-size:7.5px!important;
}
.single-line-placement .ps-add-view button.configured{
border-color:#95bebb!important;
background:var(--final-mint)!important;
color:#31514f!important;
}
/* Note stays collapsed; review stays useful but visually compact. */
.sketch-notes,
.sketch-summary{
border-color:var(--final-aqua)!important;
}
.sketch-notes summary,
.sketch-summary summary{
min-height:33px!important;
padding:6px 10px!important;
font-size:8.5px!important;
}
.sketch-notes summary span,
.sketch-summary summary span{font-size:7px!important}
.sketch-notes textarea{
width:calc(100% - 20px)!important;
min-height:66px!important;
margin:0 10px 8px!important;
border-color:var(--final-aqua)!important;
background:var(--final-snow)!important;
font-size:8.5px!important;
}
.sketch-summary{background:var(--final-snow)!important}
#bundleSummaryList{padding:0 8px 8px!important}
.review-item-card{
padding:6px!important;
border-color:var(--final-aqua)!important;
background:#fff!important;
}
.review-item-top{
padding-bottom:5px!important;
border-color:#e2eaeb!important;
}
.review-item-top>span{
background:var(--final-mint)!important;
color:#294443!important;
}
.review-placement-list{gap:4px!important;padding-top:5px!important}
.review-placement{
padding:4px 5px!important;
background:var(--final-snow)!important;
}
.review-note{background:var(--final-sand)!important}
/* Final checkout bar: compact, calm, and always obvious. */
.sketch-buybar{
min-height:44px!important;
padding:4px 8px!important;
border-color:var(--final-aqua)!important;
background:var(--final-blue)!important;
}
.sketch-buybar>div span{font-size:7px!important}
.sketch-buybar>div b{font-size:13px!important;color:#354344!important}
.sketch-buybar>div small{font-size:7px!important}
.sketch-buybar>button{
width:150px!important;
height:31px!important;
min-height:31px!important;
border:1px solid #99bfbb!important;
background:var(--final-mint)!important;
color:#294443!important;
box-shadow:none!important;
}
.sketch-buybar>button:hover{background:#abd1cd!important}
.sketch-buybar>button span{font-size:8.5px!important}
.sketch-buybar>button b{font-size:9.5px!important;color:#294443!important}
.ps-remove-item{padding:3px 8px 5px!important}
.ps-remove-item button{font-size:7px!important}
/* Size chart follows the same palette. */
.size-chart-dialog{border:1px solid var(--final-aqua)!important}
.size-chart-head{border-color:var(--final-aqua)!important;background:var(--final-blue)!important}
.size-chart-body{background:var(--final-snow)!important}
@media(max-width:1280px){
.sketch-editor{
grid-template-columns:minmax(455px,.84fr) minmax(570px,1.16fr)!important;
}
.sketch-fields-grid.artwork-grid{
grid-template-columns:minmax(130px,.64fr) minmax(160px,.76fr) minmax(265px,1.60fr)!important;
}
.method-card .sketch-methods button span b{font-size:7px!important}
}
@media(max-width:1020px){
body.customizer-focus-mode .site-header{top:0!important}
body.customizer-focus-mode .announcement{display:none!important}
.sketch-editor{grid-template-columns:1fr!important}
.sketch-preview{
min-height:0!important;
grid-template-rows:46px 500px 44px!important;
}
}
@media(max-width:650px){
.sketch-preview{grid-template-rows:auto 380px auto!important}
.sketch-fields-grid.artwork-grid,
.sketch-fields-grid.text-grid{grid-template-columns:1fr!important}
.sketch-fields-grid.text-grid .text-wide,
.sketch-fields-grid.text-grid .font-search-card,
.sketch-fields-grid.text-grid .align-card{grid-column:1!important}
.live-design-size{min-width:245px!important}
.sketch-buybar>button{width:132px!important}
}
/* =========================================================
V5.14.12 — VIEWPORT / HEADER STABILITY FIX
Header stays hidden until deliberate reveal; editor fills the viewport.
========================================================= */
@media (min-width:1021px){
html:has(body.customizer-focus-mode),
body.customizer-focus-mode{
height:100dvh!important;
min-height:100dvh!important;
overflow:hidden!important;
}
body.customizer-focus-mode .custom-product-v514{
height:100dvh!important;
min-height:100dvh!important;
max-height:100dvh!important;
padding:6px 0!important;
overflow:hidden!important;
}
body.customizer-focus-mode .custom-product-v514>.container{
height:100%!important;
min-height:0!important;
}
body.customizer-focus-mode .placement-studio-form{
height:100%!important;
min-height:0!important;
display:block!important;
}
body.customizer-focus-mode .placement-studio{
height:100%!important;
min-height:0!important;
max-height:100%!important;
align-items:stretch!important;
}
body.customizer-focus-mode .sketch-preview,
body.customizer-focus-mode .sketch-controls{
position:relative!important;
top:auto!important;
height:100%!important;
min-height:0!important;
max-height:100%!important;
}
body.customizer-focus-mode .sketch-preview{
grid-template-rows:48px minmax(0,1fr) 44px!important;
}
body.customizer-focus-mode .sketch-stage{
min-height:0!important;
height:auto!important;
}
body.customizer-focus-mode .sketch-controls{
display:flex!important;
flex-direction:column!important;
}
body.customizer-focus-mode .sketch-scroll{
flex:1 1 0!important;
min-height:0!important;
overflow-y:auto!important;
overscroll-behavior:contain!important;
}
body.customizer-focus-mode .sketch-buybar{
flex:0 0 auto!important;
}
body.customizer-focus-mode .site-footer{
display:none!important;
}
}
/* Header reveal is an overlay only; it never pushes or resizes the editor. */
body.customizer-focus-mode .announcement,
body.customizer-focus-mode .site-header{
will-change:transform,opacity!important;
}
body.customizer-focus-mode:not(.editor-header-visible) .announcement,
body.customizer-focus-mode:not(.editor-header-visible) .site-header{
visibility:hidden!important;
}
body.customizer-focus-mode.editor-header-visible .announcement,
body.customizer-focus-mode.editor-header-visible .site-header{
visibility:visible!important;
}
/* =========================================================
V5.14.13 — NORMAL HEADER + FULL FIRST-VIEWPORT EDITOR
Normal storefront scroll flow: header visible, editor fills the
remaining first viewport, product details/footer continue below.
========================================================= */
body.customizer-page-mode{
background:#EEF2F5!important;
min-height:100%!important;
overflow-x:hidden!important;
overflow-y:auto!important;
}
body.customizer-page-mode .announcement{
position:relative!important;
inset:auto!important;
transform:none!important;
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
}
body.customizer-page-mode .site-header{
position:sticky!important;
top:0!important;
transform:none!important;
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
box-shadow:0 4px 14px rgba(58,70,70,.055)!important;
}
body.customizer-page-mode .custom-product-v514{
padding:6px 0 34px!important;
background:#EEF2F5!important;
overflow:visible!important;
}
body.customizer-page-mode .custom-product-v514>.container{
width:calc(100% - 12px)!important;
max-width:none!important;
}
/* Exactly one editor screen beneath the visible storefront chrome. */
@media (min-width:1021px){
body.customizer-page-mode .placement-studio-form{
display:block!important;
height:var(--customizer-page-height,calc(100dvh - 96px))!important;
min-height:560px!important;
max-height:none!important;
margin:0!important;
}
body.customizer-page-mode .placement-studio{
height:100%!important;
min-height:0!important;
max-height:100%!important;
align-items:stretch!important;
}
body.customizer-page-mode .sketch-preview,
body.customizer-page-mode .sketch-controls{
position:relative!important;
top:auto!important;
height:100%!important;
min-height:0!important;
max-height:100%!important;
}
body.customizer-page-mode .sketch-preview{
grid-template-rows:48px minmax(0,1fr) 44px!important;
}
body.customizer-page-mode .sketch-stage{
height:auto!important;
min-height:0!important;
}
body.customizer-page-mode .sketch-controls{
display:flex!important;
flex-direction:column!important;
}
body.customizer-page-mode .sketch-scroll{
flex:1 1 0!important;
min-height:0!important;
overflow-y:auto!important;
overscroll-behavior:contain!important;
}
body.customizer-page-mode .sketch-buybar{
flex:0 0 auto!important;
}
}
/* Normal content resumes below the editor instead of being trapped/hidden. */
body.customizer-page-mode .custom-product-description{
margin:22px 0 0!important;
padding:28px!important;
border:1px solid #C4DADE!important;
border-radius:12px!important;
background:#fff!important;
}
body.customizer-page-mode .site-footer{
display:block!important;
margin-top:0!important;
}
/* On smaller screens the editor becomes normal document flow. */
@media (max-width:1020px){
body.customizer-page-mode .placement-studio-form{
height:auto!important;
min-height:0!important;
}
body.customizer-page-mode .sketch-preview,
body.customizer-page-mode .sketch-controls{
position:static!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
}
body.customizer-page-mode .sketch-scroll{
overflow:visible!important;
max-height:none!important;
}
}
/* =========================================================
V5.14.14 — SAME-SHIRT QTY + COMPACT TEXT FORM
Same design quantity lives beside Size. New Shirt creates
a separate independently personalised garment/design.
========================================================= */
/* Header: Item / Product / Duplicate / New shirt / Price. */
.sketch-editor-head{
grid-template-columns:78px minmax(210px,1fr) 82px 98px 96px!important;
gap:7px!important;
min-height:58px!important;
padding:7px 10px!important;
align-items:center!important;
}
.sketch-editor-head .sketch-head-btn{
height:32px!important;
padding:0 9px!important;
font-size:9px!important;
}
.sketch-editor-head .new-shirt-btn{
border-color:#9fc8c4!important;
background:var(--final-mint,#B9D9D5)!important;
color:#294645!important;
}
.sketch-product-name b{
max-width:100%!important;
overflow:hidden!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
/* Garment row: Size | Same-shirt Quantity | Colour. */
.sketch-garment-row{
grid-template-columns:118px 126px minmax(0,1fr)!important;
column-gap:12px!important;
row-gap:4px!important;
padding:8px 12px!important;
align-items:start!important;
}
.sketch-size-compact{width:118px!important}
.sketch-size-select select{width:108px!important;height:32px!important}
.same-shirt-qty{
min-width:0!important;
}
.same-shirt-qty .sketch-field-title{
margin-bottom:5px!important;
}
.same-shirt-qty-buttons{
display:grid!important;
grid-template-columns:repeat(3,34px)!important;
gap:5px!important;
}
.same-shirt-qty-buttons button{
width:34px!important;
height:32px!important;
border:1px solid var(--final-aqua,#C4DADE)!important;
border-radius:7px!important;
background:#fff!important;
color:#465453!important;
font-size:10px!important;
font-weight:800!important;
cursor:pointer!important;
}
.same-shirt-qty-buttons button:hover:not(:disabled){
background:var(--final-snow,#EEF2F5)!important;
}
.same-shirt-qty-buttons button.active{
border-color:#8dbab6!important;
background:var(--final-mint,#B9D9D5)!important;
color:#294543!important;
}
.same-shirt-qty-buttons button:disabled{
opacity:.3!important;
cursor:not-allowed!important;
}
.sketch-colour-group{min-width:0!important}
.sketch-stock{
grid-column:1/-1!important;
font-size:8px!important;
}
/* Compact text form: Text, then Font/Style/Weight, then Align/Colour/Size. */
.text-form-compact{
display:grid!important;
gap:7px!important;
margin-top:7px!important;
}
.text-form-compact .ps-input{
min-width:0!important;
display:grid!important;
gap:3px!important;
}
.text-form-compact .ps-input>span,
.text-form-compact .align-card>span{
color:#475553!important;
font-size:8.5px!important;
font-weight:800!important;
}
.text-form-compact .ps-input>span small{
color:#7b8987!important;
font-size:7px!important;
font-weight:600!important;
}
.text-form-compact input:not([type=color]),
.text-form-compact select{
width:100%!important;
height:31px!important;
padding:0 8px!important;
border:1px solid var(--final-aqua,#C4DADE)!important;
border-radius:6px!important;
background:#fff!important;
color:#384645!important;
font-size:9px!important;
}
.text-entry-field{
width:min(440px,100%)!important;
}
.text-font-line{
display:grid!important;
grid-template-columns:minmax(220px,1.6fr) minmax(110px,.7fr) minmax(120px,.75fr)!important;
gap:7px!important;
align-items:start!important;
}
.text-format-line{
display:grid!important;
grid-template-columns:minmax(230px,1.25fr) 110px 150px!important;
gap:7px!important;
align-items:end!important;
}
.text-form-compact .font-search-card>em{
display:block!important;
min-height:11px!important;
margin-top:1px!important;
color:#788684!important;
font-size:6.8px!important;
font-style:normal!important;
}
.text-form-compact .text-colour-field input[type=color]{
width:100%!important;
height:31px!important;
padding:2px!important;
border:1px solid var(--final-aqua,#C4DADE)!important;
border-radius:6px!important;
background:#fff!important;
}
.text-form-compact .font-size-card .ps-size-stepper{
height:31px!important;
display:grid!important;
grid-template-columns:30px 1fr 30px!important;
border:1px solid var(--final-aqua,#C4DADE)!important;
border-radius:6px!important;
overflow:hidden!important;
background:#fff!important;
}
.text-form-compact .font-size-card .ps-size-stepper button{
border:0!important;
background:var(--final-snow,#EEF2F5)!important;
font-size:13px!important;
cursor:pointer!important;
}
.text-form-compact .font-size-card .ps-size-stepper output{
display:grid!important;
place-items:center!important;
color:#40504e!important;
font-size:9px!important;
font-weight:800!important;
}
.text-form-compact .align-card{
min-width:0!important;
display:grid!important;
gap:3px!important;
}
.text-form-compact .align-card>div{
display:grid!important;
grid-template-columns:repeat(3,1fr)!important;
gap:4px!important;
}
.text-form-compact .align-card button{
height:31px!important;
padding:0 7px!important;
border:1px solid var(--final-aqua,#C4DADE)!important;
border-radius:6px!important;
background:#fff!important;
color:#445250!important;
font-size:8px!important;
cursor:pointer!important;
}
.text-form-compact .align-card button.active{
border-color:#8dbab6!important;
background:var(--final-mint,#B9D9D5)!important;
color:#284441!important;
}
/* Review clearly distinguishes a design from identical copies. */
.review-item-top>div small{
color:#6f7f7d!important;
}
@media(max-width:1240px){
.sketch-editor-head{
grid-template-columns:72px minmax(165px,1fr) 76px 92px 88px!important;
}
.sketch-garment-row{
grid-template-columns:110px 120px minmax(0,1fr)!important;
}
.text-font-line{
grid-template-columns:minmax(180px,1.4fr) 105px 112px!important;
}
.text-format-line{
grid-template-columns:minmax(190px,1.15fr) 95px 140px!important;
}
}
@media(max-width:900px){
.sketch-garment-row{
grid-template-columns:110px 118px minmax(0,1fr)!important;
}
.text-font-line,
.text-format-line{
grid-template-columns:1fr 1fr!important;
}
.text-font-line .font-search-card,
.text-format-line .align-card{
grid-column:1/-1!important;
}
}
@media(max-width:560px){
.sketch-editor-head{
grid-template-columns:68px 1fr 82px!important;
}
.sketch-editor-head .sketch-head-btn{
display:none!important;
}
.sketch-head-price{grid-column:3!important}
.sketch-garment-row{
grid-template-columns:105px 115px!important;
}
.sketch-colour-group{
grid-column:1/-1!important;
}
.text-font-line,
.text-format-line{
grid-template-columns:1fr!important;
}
.text-font-line .font-search-card,
.text-format-line .align-card{
grid-column:auto!important;
}
}
/* Neutralise older grid-span rules inside the V5.14.14 text form. */
.text-font-line .font-search-card{grid-column:auto!important}
.text-format-line .align-card{grid-column:auto!important}
/* =========================================================
V5.14.15 — FINAL FORM + VISUAL PLACEMENT TARGETING
========================================================= */
/* Size | Quantity input | Colours — no wasted width. */
.sketch-garment-row{
grid-template-columns:92px 68px minmax(0,1fr)!important;
column-gap:10px!important;
row-gap:3px!important;
padding:7px 10px!important;
}
.sketch-size-compact{width:92px!important}
.sketch-size-select select{width:86px!important;height:31px!important;padding:0 7px!important}
.size-chart-btn{font-size:8px!important;height:20px!important;padding:0!important}
.same-shirt-qty{display:grid!important;gap:4px!important;align-content:start!important}
.same-shirt-qty>span{font-size:8.5px!important;font-weight:800!important;color:#475553!important}
.same-shirt-qty input{
width:58px!important;height:31px!important;padding:0 7px!important;
border:1px solid var(--final-aqua,#C4DADE)!important;border-radius:6px!important;
background:#fff!important;color:#364442!important;font:800 10px "Nunito Sans",Arial,sans-serif!important;
}
.sketch-colour-group{min-width:0!important}
.sketch-colours{gap:5px!important;align-items:flex-start!important}
.sketch-colours button{width:38px!important;min-height:38px!important}
.sketch-colours button i{width:21px!important;height:21px!important}
.sketch-colours button span{font-size:7px!important}
.sketch-stock{font-size:7.6px!important}
/* Row 1: Personalisation | Placement | Finished size. Content width only. */
.placement-form-row1{
display:grid!important;
grid-template-columns:max-content max-content minmax(220px,300px)!important;
gap:7px!important;
align-items:stretch!important;
margin-top:2px!important;
}
.placement-form-row1:has(.finished-size-panel[hidden]){
grid-template-columns:max-content max-content!important;
}
.compact-control-panel{
min-width:0!important;padding:7px!important;border:1px solid var(--final-aqua,#C4DADE)!important;
border-radius:7px!important;background:rgba(238,242,245,.72)!important;
}
.personalisation-panel{width:max-content!important}
.placement-panel{width:max-content!important}
.finished-size-panel{width:100%!important;min-width:220px!important}
.compact-mode-choice{display:flex!important;gap:5px!important}
.compact-mode-choice button{
width:auto!important;min-width:0!important;min-height:31px!important;height:31px!important;
display:inline-flex!important;grid-template-columns:none!important;align-items:center!important;gap:5px!important;
padding:0 9px!important;border-radius:6px!important;
}
.compact-mode-choice button>i{width:21px!important;height:21px!important;font-size:10px!important;flex:0 0 21px!important}
.compact-mode-choice button b{font-size:8.5px!important;white-space:nowrap!important}
.compact-placement-chips{display:flex!important;gap:4px!important;flex-wrap:nowrap!important}
.compact-placement-chips button{height:31px!important;padding:0 8px!important;font-size:8px!important;white-space:nowrap!important}
.finished-size-panel .sketch-mini-label{margin-bottom:5px!important}
.compact-finished-size{display:grid!important;grid-template-columns:52px auto 52px 62px!important;gap:4px!important;align-items:end!important}
.compact-finished-size label{display:grid!important;gap:2px!important}
.compact-finished-size label span{font-size:7px!important;color:#60706d!important;font-weight:800!important}
.compact-finished-size input,.compact-finished-size select{
width:100%!important;height:29px!important;border:1px solid var(--final-aqua,#C4DADE)!important;
border-radius:6px!important;background:#fff!important;padding:0 6px!important;font-size:8.5px!important;
}
.compact-finished-size input.limit-error{border-color:#cf7667!important;background:#fff4f1!important}
.compact-finished-size>b{align-self:center!important;padding-top:11px!important;font-size:11px!important}
/* Row 2 artwork: Upload | Method | Final note — equal height. */
.artwork-action-row{
display:grid!important;grid-template-columns:1fr 1.25fr 1fr!important;gap:7px!important;
align-items:stretch!important;margin-top:7px!important;
}
.artwork-action-row>.compact-control-panel{min-height:78px!important;height:100%!important}
.artwork-upload-panel .ps-upload{border:0!important;background:transparent!important}
.artwork-upload-panel .compact-file-picker{min-height:34px!important}
.artwork-upload-panel .compact-file-picker button{height:29px!important;padding:0 9px!important;font-size:8px!important}
.artwork-upload-panel .compact-file-picker span{font-size:7px!important}
.artwork-upload-panel .ps-art-status{margin-top:3px!important;font-size:6.6px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.compact-methods{display:flex!important;gap:4px!important;flex-wrap:wrap!important}
.compact-methods button{
width:auto!important;min-width:0!important;height:30px!important;min-height:30px!important;
padding:0 8px!important;display:inline-flex!important;align-items:center!important;gap:5px!important;
}
.compact-methods button span b{font-size:7.6px!important;white-space:nowrap!important}
.compact-methods button>i{width:12px!important;height:12px!important;font-size:4px!important}
.artwork-method-panel .ps-line-colours{margin-top:5px!important;padding:4px 6px!important;display:flex!important;gap:6px!important;align-items:center!important;flex-wrap:wrap!important}
.artwork-method-panel .ps-line-colours>span{font-size:7px!important}
.artwork-method-panel .ps-line-colours button{height:22px!important;padding:0 6px!important;font-size:6.5px!important}
.artwork-method-panel .ps-line-colours>small{flex:1 1 100%!important;color:#778582!important;font-size:6.3px!important}
.placement-note-panel{display:grid!important;gap:5px!important;cursor:text!important}
.placement-note-panel>span{display:flex!important;justify-content:space-between!important;gap:6px!important}
.placement-note-panel>span b{font-size:8px!important}.placement-note-panel>span small{font-size:6.5px!important;color:#7b8986!important}
.placement-note-panel textarea{
width:100%!important;min-height:45px!important;height:45px!important;resize:none!important;
border:1px solid var(--final-aqua,#C4DADE)!important;border-radius:6px!important;background:#fff!important;
padding:6px 7px!important;color:#3f4c4a!important;font:400 8px/1.3 "Nunito Sans",Arial,sans-serif!important;
}
/* Text mode stays two compact rows only. */
.text-form-compact{gap:6px!important;margin-top:7px!important}
.text-entry-field{width:min(390px,100%)!important}
.text-font-line{grid-template-columns:minmax(210px,1.35fr) 100px 112px!important;gap:6px!important}
.text-format-line{grid-template-columns:minmax(205px,1.25fr) 92px 135px!important;gap:6px!important}
.text-form-compact input:not([type=color]),.text-form-compact select{height:29px!important;font-size:8.5px!important}
.text-form-compact .font-size-card .ps-size-stepper,.text-form-compact .align-card button,.text-form-compact .text-colour-field input[type=color]{height:29px!important}
/* Placement target guide on the live product — subtle, production oriented. */
.placement-target-guide{
position:absolute!important;z-index:4!important;transform:translate(-50%,-50%)!important;
border:1.5px dashed rgba(77,129,119,.72)!important;border-radius:6px!important;
background:rgba(185,217,213,.10)!important;pointer-events:none!important;
}
.placement-target-guide[hidden]{display:none!important}
.placement-target-guide>span{
position:absolute!important;left:50%!important;top:-19px!important;transform:translateX(-50%)!important;
padding:3px 6px!important;border-radius:999px!important;background:rgba(77,129,119,.92)!important;
color:#fff!important;font-size:6.5px!important;font-weight:800!important;white-space:nowrap!important;
}
/* Keep the collected palette consistent. */
.sketch-slot-block,.sketch-garment-row{background:rgba(238,242,245,.58)!important}
.single-line-placement{background:rgba(196,218,222,.52)!important}
.compact-control-panel button.active,.compact-placement-chips button.active{border-color:#87b6b0!important;background:#B9D9D5!important;color:#294743!important}
@media(max-width:1280px){
.placement-form-row1{grid-template-columns:max-content max-content minmax(190px,250px)!important}
.artwork-action-row{grid-template-columns:.9fr 1.2fr 1fr!important}
.compact-mode-choice button{padding:0 7px!important}.compact-placement-chips button{padding:0 7px!important}
}
@media(max-width:980px){
.placement-form-row1,.placement-form-row1:has(.finished-size-panel[hidden]){grid-template-columns:1fr 1fr!important}
.finished-size-panel{grid-column:1/-1!important;width:100%!important}
.personalisation-panel,.placement-panel{width:100%!important}
.artwork-action-row{grid-template-columns:1fr 1fr!important}.placement-note-panel{grid-column:1/-1!important}
}
@media(max-width:620px){
.sketch-garment-row{grid-template-columns:86px 62px!important}.sketch-colour-group{grid-column:1/-1!important}
.placement-form-row1,.placement-form-row1:has(.finished-size-panel[hidden]),.artwork-action-row{grid-template-columns:1fr!important}
.finished-size-panel,.placement-note-panel{grid-column:auto!important}.personalisation-panel,.placement-panel{width:100%!important}
.text-font-line,.text-format-line{grid-template-columns:1fr!important}
}
/* =========================================================
V5.14.16 — FINAL COMPACT FORM
Row 1: Personalisation | Upload | Placement | Finished size
Row 2: Method | Final note
Text: Text | Font | Style | Weight / Align | Colour+Border | Size
========================================================= */
/* Garment controls: compact Size + compact Quantity + Colours. */
.sketch-garment-row{
grid-template-columns:82px 60px minmax(0,1fr)!important;
column-gap:9px!important;
row-gap:2px!important;
padding:6px 10px!important;
}
.sketch-size-compact{width:82px!important}
.sketch-size-select select{
width:78px!important;
height:29px!important;
padding:0 6px!important;
font-size:8.5px!important;
}
.size-chart-btn{height:18px!important;font-size:7.4px!important}
.same-shirt-qty{width:60px!important;gap:3px!important}
.same-shirt-qty>span{font-size:7.8px!important}
.same-shirt-qty input{
width:52px!important;
height:29px!important;
padding:0 6px!important;
font-size:9px!important;
}
.sketch-colours{gap:4px!important}
.sketch-colours button{width:35px!important;min-height:35px!important}
.sketch-colours button i{width:19px!important;height:19px!important}
.sketch-colours button span{font-size:6.5px!important}
.sketch-stock{font-size:7px!important}
/* Artwork Row 1: exact four compact sections with no dead width. */
.placement-form-row1{
display:grid!important;
grid-template-columns:max-content minmax(145px,180px) max-content 188px!important;
gap:6px!important;
align-items:stretch!important;
margin-top:2px!important;
}
.placement-form-row1:has(.row1-upload-panel[hidden]){
grid-template-columns:max-content max-content!important;
}
.placement-form-row1 .compact-control-panel{
min-height:62px!important;
padding:6px!important;
}
.personalisation-panel,
.placement-panel{width:max-content!important}
.row1-upload-panel{
width:100%!important;
min-width:145px!important;
}
.row1-upload-panel .sketch-mini-label,
.finished-size-panel .sketch-mini-label,
.personalisation-panel .sketch-mini-label,
.placement-panel .sketch-mini-label{margin-bottom:4px!important}
.row1-upload-panel .ps-upload{border:0!important;background:transparent!important}
.row1-upload-panel .compact-file-picker{
min-height:29px!important;
display:flex!important;
align-items:center!important;
gap:5px!important;
}
.row1-upload-panel .compact-file-picker button{
height:27px!important;
padding:0 8px!important;
font-size:7.5px!important;
}
.row1-upload-panel .compact-file-picker span{
min-width:0!important;
overflow:hidden!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
font-size:6.6px!important;
}
.row1-upload-panel .ps-art-status{
margin-top:2px!important;
overflow:hidden!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
font-size:6px!important;
}
.compact-mode-choice button,
.compact-placement-chips button{height:28px!important;min-height:28px!important}
.compact-mode-choice button{padding:0 7px!important}
.compact-mode-choice button>i{width:19px!important;height:19px!important;flex-basis:19px!important}
.compact-mode-choice button b{font-size:7.8px!important}
.compact-placement-chips button{padding:0 7px!important;font-size:7.4px!important}
/* Finished size is deliberately tight. */
.finished-size-panel{
width:188px!important;
min-width:188px!important;
}
.compact-finished-size{
grid-template-columns:42px auto 42px 57px!important;
gap:3px!important;
}
.compact-finished-size label span{font-size:6.5px!important}
.compact-finished-size input,
.compact-finished-size select{
height:27px!important;
padding:0 5px!important;
font-size:7.8px!important;
}
.compact-finished-size>b{padding-top:9px!important;font-size:9px!important}
#finishedSizeLimit{max-width:92px!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important}
/* Artwork Row 2: Method + Final note only, same height and aligned. */
.artwork-action-row.artwork-row2{
display:grid!important;
grid-template-columns:minmax(360px,1.55fr) minmax(230px,1fr)!important;
gap:6px!important;
align-items:stretch!important;
margin-top:6px!important;
}
.artwork-row2>.compact-control-panel{
min-height:72px!important;
height:72px!important;
padding:6px!important;
}
.artwork-method-panel{overflow:hidden!important}
.compact-methods{
display:flex!important;
flex-wrap:nowrap!important;
gap:4px!important;
}
.compact-methods button{
height:28px!important;
min-height:28px!important;
padding:0 7px!important;
}
.compact-methods button span b{font-size:7.2px!important}
.artwork-method-panel .ps-line-colours{
margin-top:4px!important;
min-height:25px!important;
padding:3px 5px!important;
flex-wrap:nowrap!important;
}
.artwork-method-panel .ps-line-colours>span{font-size:6.5px!important;white-space:nowrap!important}
.artwork-method-panel .ps-line-colours>small{
flex:1 1 auto!important;
overflow:hidden!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
font-size:5.7px!important;
}
.placement-note-panel{height:72px!important}
.placement-note-panel textarea{
min-height:43px!important;
height:43px!important;
padding:5px 6px!important;
font-size:7.4px!important;
}
/* Text mode — exactly two tight rows. */
.text-form-compact{
display:grid!important;
gap:6px!important;
margin-top:6px!important;
}
.text-row-one{
display:grid!important;
grid-template-columns:minmax(170px,1.25fr) minmax(190px,1.35fr) 96px 104px!important;
gap:6px!important;
align-items:start!important;
}
.text-row-two{
display:grid!important;
grid-template-columns:minmax(190px,1.05fr) minmax(230px,1.25fr) 132px!important;
gap:6px!important;
align-items:end!important;
}
.text-form-compact .ps-input,
.text-form-compact .align-card{min-width:0!important;gap:2px!important}
.text-form-compact .ps-input>span,
.text-form-compact .align-card>span{font-size:7.8px!important}
.text-form-compact input:not([type=color]),
.text-form-compact select{
height:28px!important;
padding:0 6px!important;
font-size:8px!important;
}
.text-entry-field{width:auto!important}
.font-search-card{grid-column:auto!important}
.font-live-meta{
min-height:14px!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:5px!important;
overflow:hidden!important;
}
.font-live-meta em{
min-width:0!important;
overflow:hidden!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
color:#788684!important;
font-size:5.8px!important;
font-style:normal!important;
}
.font-live-sample,
#fontLiveSample{
flex:0 0 auto!important;
max-width:92px!important;
overflow:hidden!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
color:#334441!important;
font-size:8px!important;
line-height:1!important;
}
.text-row-two .align-card{
display:grid!important;
gap:2px!important;
}
.text-row-two .align-card>div{
display:grid!important;
grid-template-columns:repeat(3,1fr)!important;
gap:3px!important;
}
.text-row-two .align-card button{
height:28px!important;
padding:0 5px!important;
font-size:7px!important;
}
.text-colour-border-field{
display:grid!important;
gap:2px!important;
}
.text-colour-border-control{
display:grid!important;
grid-template-columns:58px minmax(82px,1fr) 74px!important;
gap:4px!important;
align-items:end!important;
}
.text-colour-border-control label{
min-width:0!important;
display:grid!important;
gap:2px!important;
}
.text-colour-border-control small{
color:#758481!important;
font-size:5.8px!important;
font-weight:700!important;
}
.text-colour-border-control input[type=color],
.text-colour-border-control select{
width:100%!important;
height:28px!important;
border:1px solid var(--final-aqua,#C4DADE)!important;
border-radius:6px!important;
background:#fff!important;
}
.text-colour-border-control input[type=color]{padding:2px!important}
#textBorderColorWrap[hidden]{display:none!important}
.text-row-two .font-size-card .ps-size-stepper{
height:28px!important;
grid-template-columns:27px 1fr 27px!important;
}
.text-row-two .font-size-card .ps-size-stepper button{font-size:11px!important}
.text-row-two .font-size-card .ps-size-stepper output{font-size:7.8px!important}
/* New placement is the only block after the mode-specific form. */
.single-line-placement{
min-height:42px!important;
padding:5px 10px!important;
gap:8px!important;
}
.single-line-placement .ps-add-view button{
min-width:76px!important;
height:27px!important;
min-height:27px!important;
padding:0 7px!important;
font-size:7.2px!important;
}
.add-placement-label b{font-size:8px!important}
.add-placement-label small{font-size:6px!important}
/* No separate global order-note panel in V5.14.16. */
.sketch-notes{display:none!important}
/* Review is the final form section. */
.sketch-summary summary{
min-height:34px!important;
padding:7px 10px!important;
font-size:8.5px!important;
}
#bundleSummaryList{padding:0 8px 8px!important}
.review-item-card{padding:7px!important}
.review-placement{padding:4px 5px!important}
.review-placement>b{font-size:7.4px!important}
.review-placement>span{font-size:6.4px!important}
/* Font preview should visually match the selected font immediately. */
#primaryTextFont{transition:font-family .12s ease!important}
.ps-text-layer{
-webkit-font-smoothing:antialiased!important;
text-rendering:geometricPrecision!important;
}
@media(max-width:1360px){
.placement-form-row1{
grid-template-columns:max-content minmax(132px,160px) max-content 174px!important;
}
.finished-size-panel{width:174px!important;min-width:174px!important}
.compact-finished-size{grid-template-columns:39px auto 39px 54px!important}
.text-row-one{grid-template-columns:minmax(150px,1.1fr) minmax(170px,1.2fr) 88px 94px!important}
.text-row-two{grid-template-columns:minmax(170px,1fr) minmax(210px,1.18fr) 122px!important}
}
@media(max-width:1100px){
.placement-form-row1{
grid-template-columns:1fr 1fr!important;
}
.placement-form-row1:has(.row1-upload-panel[hidden]){grid-template-columns:1fr 1fr!important}
.personalisation-panel,.placement-panel,.row1-upload-panel,.finished-size-panel{width:100%!important;min-width:0!important}
.artwork-action-row.artwork-row2{grid-template-columns:1.25fr 1fr!important}
.text-row-one{grid-template-columns:1.2fr 1.2fr .7fr .75fr!important}
.text-row-two{grid-template-columns:1fr 1.2fr .75fr!important}
}
@media(max-width:760px){
.placement-form-row1,
.placement-form-row1:has(.row1-upload-panel[hidden]),
.artwork-action-row.artwork-row2{grid-template-columns:1fr!important}
.artwork-row2>.compact-control-panel{height:auto!important;min-height:68px!important}
.text-row-one,.text-row-two{grid-template-columns:1fr 1fr!important}
.text-row-one .text-entry-field,.text-row-one .font-search-card{grid-column:1/-1!important}
.text-row-two .align-card,.text-row-two .text-colour-border-field{grid-column:1/-1!important}
}
@media(max-width:520px){
.sketch-garment-row{grid-template-columns:76px 56px!important}
.sketch-colour-group{grid-column:1/-1!important}
.text-row-one,.text-row-two{grid-template-columns:1fr!important}
.text-row-one .text-entry-field,.text-row-one .font-search-card,.text-row-two .align-card,.text-row-two .text-colour-border-field{grid-column:auto!important}
.text-colour-border-control{grid-template-columns:54px 1fr 70px!important}
}
.review-summary-tools{display:flex!important;justify-content:flex-end!important;padding:0 8px 4px!important}
.review-summary-tools button{border:0!important;background:transparent!important;color:#9b655c!important;text-decoration:underline!important;font-size:6.8px!important;cursor:pointer!important}
.review-summary-tools button:disabled{display:none!important}
/* =========================================================
V5.14.17 — TEXT / FONT / ARTWORK FORM FIX
========================================================= */
/* Hidden mode panels must stay hidden even when later grid rules use !important. */
#slotArtworkFields[hidden],
#slotTextFields[hidden],
#artworkTopUploadPanel[hidden],
#finishedSizePanel[hidden],
.font-picker-menu[hidden]{display:none!important}
/* Artwork row 2: Method + Final note stay inside their cards, no clipped line-colour row. */
.artwork-action-row.artwork-row2{
grid-template-columns:minmax(420px,1.5fr) minmax(250px,1fr)!important;
gap:7px!important;
align-items:stretch!important;
}
.artwork-row2>.compact-control-panel{
min-height:88px!important;
height:auto!important;
padding:7px!important;
}
.artwork-method-panel{overflow:visible!important;display:flex!important;flex-direction:column!important}
.artwork-method-panel .compact-methods{flex:0 0 auto!important}
.artwork-method-panel .ps-line-colours{
flex:0 0 auto!important;
min-height:30px!important;
margin-top:6px!important;
padding:5px 7px!important;
gap:7px!important;
border-radius:6px!important;
overflow:hidden!important;
}
.artwork-method-panel .ps-line-colours>small{font-size:6.1px!important}
.placement-note-panel{height:auto!important;min-height:88px!important;display:flex!important;flex-direction:column!important}
.placement-note-panel textarea{flex:1 1 auto!important;min-height:54px!important;height:auto!important;resize:none!important}
/* New text form: compact, two rows, no unrelated artwork/method panels. */
.text-form-v17{display:grid!important;gap:7px!important;margin-top:7px!important}
.text-form-v17[hidden]{display:none!important}
.text-v17-row{display:grid!important;gap:7px!important;align-items:start!important}
.text-v17-row1{grid-template-columns:minmax(220px,1.35fr) minmax(210px,1.2fr) 108px 112px!important}
.text-v17-row2{grid-template-columns:minmax(175px,1fr) 88px minmax(150px,.9fr) 154px!important;align-items:end!important}
.text-form-v17 .ps-input,.text-form-v17 .align-card{min-width:0!important;display:grid!important;gap:3px!important}
.text-form-v17 .ps-input>span,.text-form-v17 .align-card>span{font-size:8.2px!important;font-weight:700!important}
.text-form-v17 .ps-input>span small{font-size:6.3px!important;color:#758481!important;font-weight:600!important}
.text-form-v17 textarea,
.text-form-v17 input:not([type=color]),
.text-form-v17 select,
.font-picker-button{
width:100%!important;
min-width:0!important;
height:31px!important;
border:1px solid var(--final-aqua,#C4DADE)!important;
border-radius:6px!important;
background:#fff!important;
color:#34413e!important;
padding:0 7px!important;
font:600 8.5px/1.2 "Nunito Sans",Arial,sans-serif!important;
}
.text-form-v17 textarea{
height:48px!important;
min-height:48px!important;
padding:6px 8px!important;
line-height:1.28!important;
resize:none!important;
white-space:pre-wrap!important;
}
/* Font picker: dedicated searchable dropdown with its own scroll. */
.font-picker-field{position:relative!important;z-index:32!important}
.font-picker-button{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;cursor:pointer!important;text-align:left!important}
.font-picker-button strong{min-width:0!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;font-size:8.5px!important}
.font-picker-button i{font-style:normal!important;font-size:10px!important;color:#65736f!important}
.font-picker-menu{
position:absolute!important;
z-index:999!important;
left:0!important;
right:0!important;
top:48px!important;
min-width:250px!important;
padding:6px!important;
border:1px solid #bcd3d6!important;
border-radius:8px!important;
background:#fff!important;
box-shadow:0 14px 34px rgba(41,55,52,.18)!important;
}
.font-picker-search-wrap{display:grid!important;grid-template-columns:1fr auto!important;gap:5px!important;align-items:center!important;margin-bottom:5px!important}
.font-picker-search-wrap input{height:30px!important;font-size:8px!important}
.font-picker-search-wrap span{font-size:6.5px!important;color:#71817d!important}
.font-picker-list{max-height:245px!important;overflow-y:auto!important;overscroll-behavior:contain!important;scrollbar-width:thin!important;padding-right:2px!important}
.font-picker-option{
width:100%!important;
min-height:34px!important;
display:grid!important;
grid-template-columns:1fr auto!important;
gap:8px!important;
align-items:center!important;
padding:5px 7px!important;
border:0!important;
border-bottom:1px solid #eef2f1!important;
background:#fff!important;
color:#34413e!important;
text-align:left!important;
cursor:pointer!important;
}
.font-picker-option:hover,.font-picker-option:focus,.font-picker-option.active{background:#EEF2F5!important;outline:none!important}
.font-picker-option span{font-size:8px!important;font-weight:700!important}
.font-picker-option small{font-size:7px!important;color:#6d7c78!important;white-space:nowrap!important}
.font-picker-empty{padding:12px 8px!important;color:#7a8784!important;font-size:8px!important;text-align:center!important}
.font-live-meta{min-height:14px!important}
#fontLiveSample{max-width:100px!important}
/* Alignment / colour / border / direct editable font size. */
.text-v17-row2 .align-card>div{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:3px!important}
.text-v17-row2 .align-card button{height:31px!important;padding:0 5px!important;font-size:7.4px!important}
.text-v17-fill input[type=color]{height:31px!important;padding:2px!important;border:1px solid var(--final-aqua,#C4DADE)!important;border-radius:6px!important;background:#fff!important}
.text-v17-border-grid{display:grid!important;grid-template-columns:1fr 46px!important;gap:4px!important;align-items:center!important}
.text-v17-border-grid label{display:block!important}
.text-v17-border-grid input[type=color]{width:100%!important;height:31px!important;padding:2px!important;border:1px solid var(--final-aqua,#C4DADE)!important;border-radius:6px!important;background:#fff!important}
.text-v17-border-grid label[hidden]{display:none!important}
.text-size-number-control{height:31px!important;display:grid!important;grid-template-columns:28px 1fr 24px 28px!important;border:1px solid var(--final-aqua,#C4DADE)!important;border-radius:6px!important;overflow:hidden!important;background:#fff!important}
.text-size-number-control button{border:0!important;background:#EEF2F5!important;color:#31413e!important;font-size:12px!important;cursor:pointer!important}
.text-size-number-control input{height:29px!important;border:0!important;border-radius:0!important;padding:0 2px!important;text-align:center!important;font-size:8.5px!important;-moz-appearance:textfield!important}
.text-size-number-control input::-webkit-inner-spin-button,.text-size-number-control input::-webkit-outer-spin-button{-webkit-appearance:none!important;margin:0!important}
.text-size-number-control>span{display:grid!important;place-items:center!important;color:#6c7976!important;font-size:7px!important}
/* Preserve actual line breaks in live preview and final review. */
.ps-text-layer{white-space:pre-wrap!important;line-height:1.08!important}
.review-text-lines{white-space:normal!important}
@media(max-width:1180px){
.text-v17-row1{grid-template-columns:1.15fr 1.1fr 92px 96px!important}
.text-v17-row2{grid-template-columns:1fr 76px 132px 140px!important}
.artwork-action-row.artwork-row2{grid-template-columns:1.35fr 1fr!important}
}
@media(max-width:820px){
.text-v17-row1,.text-v17-row2{grid-template-columns:1fr 1fr!important}
.text-v17-message,.font-picker-field{grid-column:1/-1!important}
.artwork-action-row.artwork-row2{grid-template-columns:1fr!important}
}
@media(max-width:520px){
.text-v17-row1,.text-v17-row2{grid-template-columns:1fr!important}
.text-v17-message,.font-picker-field{grid-column:auto!important}
}
#lineColorRow[hidden]{display:none!important}
/* =========================================================
V5.14.19 — FINAL LIVE EDITOR READABILITY
Larger readable labels/fields without breaking compact layout
========================================================= */
.sketch-editor{
--final-editor-text:#2d3a38;
--final-editor-muted:#667673;
color:var(--final-editor-text)!important;
}
.sketch-editor,
.sketch-editor button,
.sketch-editor input,
.sketch-editor select,
.sketch-editor textarea{
font-family:"Nunito Sans","Segoe UI",Arial,sans-serif!important;
}
/* Header / garment controls */
.sketch-item-id small,
.sketch-product-name small,
.sketch-head-price small,
.sketch-qty span{font-size:9px!important}
.sketch-item-id b{font-size:11px!important}
.sketch-product-name b{font-size:13px!important}
.sketch-head-price b{font-size:16px!important}
.sketch-head-btn{font-size:10.5px!important}
.sketch-size-select>span,
.sketch-field-title>span,
.sketch-mini-label b{font-size:10.5px!important}
.sketch-size-select select{font-size:12px!important}
.size-chart-btn{font-size:9.5px!important}
.sketch-colours button span{font-size:8.5px!important}
.sketch-stock{font-size:9.5px!important}
/* Placement section */
.sketch-slot-block .ps-block-head b{font-size:13px!important}
.sketch-slot-block .ps-block-head small{font-size:9px!important}
.sketch-choice-grid .sketch-mode-choice button b{font-size:10.5px!important}
.sketch-choice-grid .ps-placement-chips button{font-size:10px!important}
.sketch-mini-label small,
.sketch-choice-grid .sketch-mode-choice button small{font-size:8.5px!important}
/* Artwork form */
.compact-control-panel>span b,
.artwork-method-panel .sketch-field-title>span,
.placement-note-panel>span b{font-size:10.5px!important}
.compact-control-panel>span small,
.placement-note-panel>span small,
.sketch-fields-grid.artwork-grid .sketch-field-title small{font-size:8.5px!important}
.compact-file-picker button{font-size:10px!important}
.compact-file-picker span,
.sketch-fields-grid .ps-art-status{font-size:8.5px!important}
.sketch-logo-size label span{font-size:9px!important}
.sketch-logo-size input,
.sketch-logo-size select{font-size:11px!important}
.method-card .sketch-methods button span b,
.compact-methods button span b{font-size:9.5px!important}
.artwork-method-panel .ps-line-colours>span{font-size:9px!important}
.artwork-method-panel .ps-line-colours button{font-size:8.5px!important}
/* Text form — make every control genuinely readable. */
.text-form-v17{gap:9px!important}
.text-v17-row{gap:9px!important}
.text-form-v17 .ps-input>span,
.text-form-v17 .align-card>span{
font-size:10.5px!important;
line-height:1.2!important;
color:#32413e!important;
}
.text-form-v17 .ps-input>span small{font-size:8px!important}
.text-form-v17 textarea,
.text-form-v17 input:not([type=color]),
.text-form-v17 select,
.font-picker-button{
min-height:36px!important;
height:36px!important;
font-size:11.5px!important;
line-height:1.2!important;
padding:0 9px!important;
}
.text-form-v17 textarea{
height:58px!important;
min-height:58px!important;
padding:8px 10px!important;
font-size:12px!important;
line-height:1.35!important;
}
.font-picker-button strong{font-size:11.5px!important}
.font-picker-button i{font-size:13px!important}
.font-picker-menu{
top:56px!important;
min-width:310px!important;
padding:8px!important;
}
.font-picker-search-wrap input{height:34px!important;font-size:10.5px!important}
.font-picker-search-wrap span{font-size:8.5px!important}
.font-picker-list{max-height:310px!important}
.font-picker-option{min-height:40px!important;padding:7px 9px!important}
.font-picker-option span{font-size:11px!important}
.font-picker-option small{font-size:9px!important}
.font-picker-empty{font-size:10px!important}
#fontLoadStatus{font-size:8.5px!important}
#fontLiveSample{
font-size:13px!important;
max-width:150px!important;
}
/* Text alignment / colours / border / size */
.text-v17-row2 .align-card button{
height:36px!important;
font-size:10px!important;
}
.text-v17-fill input[type=color],
.text-v17-border-grid input[type=color]{
height:36px!important;
}
.text-v17-border-grid{grid-template-columns:1fr 52px!important}
.text-v17-size{
display:grid!important;
visibility:visible!important;
opacity:1!important;
min-width:150px!important;
}
.text-size-number-control{
height:36px!important;
grid-template-columns:32px minmax(46px,1fr) 28px 32px!important;
}
.text-size-number-control button{font-size:15px!important}
.text-size-number-control input,
#primaryTextSize{
display:block!important;
visibility:visible!important;
opacity:1!important;
width:100%!important;
min-width:46px!important;
height:34px!important;
font-size:12px!important;
font-weight:800!important;
}
.text-size-number-control>span{font-size:9px!important}
/* Add placement / review */
.add-placement-label b{font-size:10px!important}
.add-placement-label small{font-size:8px!important}
.single-line-placement .ps-add-view button{font-size:9.5px!important}
.review-item-top>div>b{font-size:10px!important}
.review-item-top>div>small{font-size:8.5px!important}
.review-item-top>aside>b{font-size:11px!important}
.review-placement>b{font-size:9px!important}
.review-placement>span{font-size:8.5px!important}
.sketch-summary summary{font-size:10px!important}
.sketch-buybar>div span{font-size:8.5px!important}
.sketch-buybar>div b{font-size:15px!important}
.sketch-buybar>button span{font-size:10px!important}
.sketch-buybar>button b{font-size:11px!important}
/* Keep the form compact after increasing type size. */
.text-v17-row1{
grid-template-columns:minmax(230px,1.4fr) minmax(220px,1.2fr) 112px 118px!important;
}
.text-v17-row2{
grid-template-columns:minmax(185px,1fr) 96px minmax(160px,.9fr) 160px!important;
}
@media(max-width:1180px){
.text-v17-row1{grid-template-columns:1.15fr 1.1fr 104px 108px!important}
.text-v17-row2{grid-template-columns:1fr 84px 142px 150px!important}
}
@media(max-width:820px){
.text-v17-row1,.text-v17-row2{grid-template-columns:1fr 1fr!important}
.text-v17-size{min-width:0!important}
}
@media(max-width:520px){
.text-v17-row1,.text-v17-row2{grid-template-columns:1fr!important}
}
/* =========================================================
V5.14.20 — TEXT FINISHED SIZE + FINAL QA
========================================================= */
.text-v17-row2{grid-template-columns:minmax(170px,.95fr) 88px minmax(145px,.82fr) 145px minmax(215px,1.05fr)!important;align-items:end!important}
.text-finished-size-panel{min-width:210px!important;display:grid!important;gap:4px!important}
.text-finished-size-panel>span{display:flex!important;justify-content:space-between!important;gap:7px!important;align-items:center!important}
.text-finished-size-panel>span small{font-size:8px!important;color:#6f7d79!important}
.text-finished-size-control{height:36px!important;display:grid!important;grid-template-columns:minmax(44px,1fr) 12px minmax(44px,1fr) 67px!important;gap:4px!important;align-items:end!important}
.text-finished-size-control label{display:grid!important;grid-template-columns:14px 1fr!important;gap:3px!important;align-items:center!important}
.text-finished-size-control label em{font-size:8px!important;color:#60706c!important;font-style:normal!important;font-weight:800!important}
.text-finished-size-control input,.text-finished-size-control select{width:100%!important;min-width:0!important;height:36px!important;padding:0 6px!important;border:1px solid #c5d6d9!important;border-radius:7px!important;background:#fff!important;font-size:10.5px!important}
.text-finished-size-control>b{align-self:center!important;text-align:center!important;font-size:11px!important}
.text-finished-size-control .limit-error{border-color:#d65e55!important;background:#fff4f2!important}
@media(max-width:1260px){.text-v17-row2{grid-template-columns:minmax(155px,.9fr) 78px 135px 140px minmax(195px,1fr)!important}}
@media(max-width:1020px){.text-v17-row2{grid-template-columns:1fr 1fr 1fr!important}.text-finished-size-panel{grid-column:span 2!important}}
@media(max-width:700px){.text-v17-row2{grid-template-columns:1fr 1fr!important}.text-finished-size-panel{grid-column:1/-1!important}}
@media(max-width:500px){.text-v17-row2{grid-template-columns:1fr!important}.text-finished-size-panel{grid-column:1!important}}
/* =========================================================
V5.14.21 — TEXT FINISHED SIZE IN TOP ROW
Text: Personalisation | Placement | Finished Size
Artwork: Personalisation | Artwork | Placement | Finished Size
========================================================= */
.placement-form-row1.text-mode{
grid-template-columns:max-content max-content 188px!important;
align-items:stretch!important;
}
.placement-form-row1.artwork-mode{
grid-template-columns:max-content minmax(132px,160px) max-content 188px!important;
align-items:stretch!important;
}
.placement-form-row1.empty-mode{
grid-template-columns:max-content max-content!important;
}
.text-finished-size-top-panel{
width:188px!important;
min-width:188px!important;
padding:7px!important;
}
.text-finished-size-top-panel[hidden]{display:none!important}
.text-finished-size-top-panel .sketch-mini-label{
margin-bottom:5px!important;
}
.text-top-finished-size{
grid-template-columns:42px auto 42px 57px!important;
gap:3px!important;
}
.text-top-finished-size label span{
font-size:7px!important;
}
.text-top-finished-size input,
.text-top-finished-size select{
height:27px!important;
padding:0 5px!important;
font-size:8px!important;
}
.text-top-finished-size>b{
padding-top:9px!important;
font-size:9px!important;
}
#textFinishedSizeLimit{
max-width:92px!important;
overflow:hidden!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
/* Lower Text form no longer reserves any Finished Size column/space. */
.text-v17-row2{
grid-template-columns:minmax(185px,1fr) 96px minmax(160px,.9fr) 160px!important;
}
@media(max-width:1360px){
.placement-form-row1.text-mode{
grid-template-columns:max-content max-content 174px!important;
}
.text-finished-size-top-panel{width:174px!important;min-width:174px!important}
.text-top-finished-size{grid-template-columns:39px auto 39px 54px!important}
}
@media(max-width:1100px){
.placement-form-row1.text-mode,
.placement-form-row1.artwork-mode{
grid-template-columns:1fr 1fr!important;
}
.text-finished-size-top-panel,
.finished-size-panel{
width:100%!important;
min-width:0!important;
}
}
@media(max-width:760px){
.placement-form-row1.text-mode,
.placement-form-row1.artwork-mode,
.placement-form-row1.empty-mode{
grid-template-columns:1fr!important;
}
}
/* =========================================================
V5.14.22 — TEXT TOP ROW ALIGNMENT FIX
Keep Personalisation | Placement | Finished Size on one row
========================================================= */
.placement-form-row1.text-mode{
display:grid!important;
grid-template-columns:max-content max-content 188px!important;
gap:8px!important;
align-items:stretch!important;
justify-content:start!important;
}
.placement-form-row1.text-mode .personalisation-panel,
.placement-form-row1.text-mode .placement-panel,
.placement-form-row1.text-mode .text-finished-size-top-panel{
grid-row:1!important;
align-self:stretch!important;
}
.placement-form-row1.text-mode .text-finished-size-top-panel{
width:188px!important;
min-width:188px!important;
margin:0!important;
}
/* Override the old 1100px two-column wrap. */
@media(max-width:1100px) and (min-width:761px){
.placement-form-row1.text-mode{
grid-template-columns:max-content max-content 174px!important;
}
.placement-form-row1.text-mode .text-finished-size-top-panel{
width:174px!important;
min-width:174px!important;
}
}
/* Only stack when the editor is genuinely narrow/mobile. */
@media(max-width:760px){
.placement-form-row1.text-mode{
grid-template-columns:1fr!important;
}
.placement-form-row1.text-mode .personalisation-panel,
.placement-form-row1.text-mode .placement-panel,
.placement-form-row1.text-mode .text-finished-size-top-panel{
grid-row:auto!important;
width:100%!important;
min-width:0!important;
}
}
/* =========================================================
V5.15.1 — APPAREL PRODUCT IMAGE COLOUR SWATCHES
Caps / aprons / scarves / beanies / tees / sweatshirts / hoodies
========================================================= */
.sketch-colours.product-image-swatches{
display:flex!important;
gap:7px!important;
align-items:flex-start!important;
overflow-x:auto!important;
overflow-y:hidden!important;
max-width:100%!important;
padding:2px 2px 5px!important;
scrollbar-width:thin;
}
.sketch-colours.product-image-swatches button{
flex:0 0 62px!important;
width:62px!important;
min-width:62px!important;
height:auto!important;
min-height:68px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:flex-start!important;
gap:3px!important;
padding:4px!important;
border:1px solid #cfdcdd!important;
border-radius:8px!important;
background:#fff!important;
overflow:hidden!important;
}
.sketch-colours.product-image-swatches button:hover{
border-color:#729ea2!important;
box-shadow:0 2px 8px rgba(28,72,78,.10)!important;
}
.sketch-colours.product-image-swatches button.active{
border:2px solid #245d66!important;
padding:3px!important;
box-shadow:0 0 0 2px rgba(36,93,102,.10)!important;
}
.sketch-colours.product-image-swatches button:disabled{
opacity:.34!important;
filter:grayscale(.45)!important;
cursor:not-allowed!important;
}
.product-colour-thumbnail{
display:block!important;
width:52px!important;
height:46px!important;
object-fit:contain!important;
object-position:center!important;
border-radius:5px!important;
background:#f7f9f9!important;
}
.sketch-colours.product-image-swatches button span{
width:100%!important;
font-size:7.5px!important;
line-height:1.05!important;
font-weight:750!important;
text-align:center!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
color:#34474a!important;
}
@media(max-width:760px){
.sketch-colours.product-image-swatches button{
flex-basis:58px!important;
width:58px!important;
min-width:58px!important;
}
.product-colour-thumbnail{width:48px!important;height:42px!important}
}
/* =========================================================
V5.15.2 — PRESET EMBROIDERY DESIGN MODE
Artwork / Logo | Simple Text | Preset Design
========================================================= */
.placement-form-row1.preset-mode{grid-template-columns:max-content max-content 188px!important;align-items:stretch!important;justify-content:start!important;gap:8px!important}.placement-form-row1.preset-mode .personalisation-panel,.placement-form-row1.preset-mode .placement-panel,.placement-form-row1.preset-mode .finished-size-panel{grid-row:1!important}.compact-mode-choice:has([data-decoration-mode="preset"]){display:grid!important;grid-template-columns:repeat(3,max-content)!important;gap:5px!important}.compact-mode-choice [data-decoration-mode="preset"] i{font-size:12px!important}.preset-design-fields{display:grid!important;grid-template-columns:minmax(360px,1.7fr) minmax(180px,.8fr) minmax(210px,1fr)!important;gap:9px!important;padding-top:8px!important;border-top:1px solid #e4e8e8!important}.preset-design-fields[hidden]{display:none!important}.preset-design-picker-panel,.preset-thread-panel,.preset-design-text{border:1px solid #cbdcde;border-radius:9px;background:#f8fbfb;padding:8px;min-height:92px}.preset-design-picker{display:flex;gap:6px;overflow-x:auto;padding:4px 1px 3px;scrollbar-width:thin}.preset-design-picker button{flex:0 0 88px;width:88px;display:grid;gap:3px;justify-items:center;padding:5px;border:1px solid #d7e0e1;border-radius:7px;background:#fff;cursor:pointer}.preset-design-picker button.active{border:2px solid #2b777a;padding:4px;background:#edf8f6}.preset-design-picker img{width:64px;height:48px;object-fit:contain;background:#f6f8f8;border-radius:4px}.preset-design-picker button span{width:100%;display:grid;gap:1px}.preset-design-picker button b{font-size:8px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-design-picker button small{font-size:6.8px;color:#78878a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-design-text{display:grid;align-content:start;gap:6px}.preset-design-text>span{display:flex;justify-content:space-between;gap:8px}.preset-design-text b{font-size:10px}.preset-design-text small{font-size:7px;color:#77878a}.preset-design-text input{height:36px;border:1px solid #cad8da;border-radius:6px;padding:0 9px;font-size:12px}.preset-thread-colours{display:flex;flex-wrap:wrap;gap:5px;padding-top:6px}.preset-thread-colours button{display:flex;align-items:center;gap:5px;height:31px;padding:0 8px;border:1px solid #d5dfe0;border-radius:99px;background:#fff;font-size:8px;font-weight:750;cursor:pointer}.preset-thread-colours button.active{border-color:#2f7779;box-shadow:inset 0 0 0 1px #2f7779;background:#edf8f6}.preset-thread-colours i{width:15px;height:15px;border-radius:50%;background:var(--thread);border:1px solid rgba(0,0,0,.15)}.ps-preset-tint-preview{position:absolute;inset:0;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-position:center;mask-repeat:no-repeat;mask-size:contain;pointer-events:none}.ps-preset-text-preview{position:absolute;left:8%;right:8%;bottom:3%;z-index:4;text-align:center;font-size:15px;font-weight:700;line-height:1;pointer-events:none;text-shadow:0 1px 1px rgba(255,255,255,.6)}@media(max-width:1180px){.preset-design-fields{grid-template-columns:1.4fr .8fr!important}.preset-thread-panel{grid-column:1/-1}.compact-mode-choice:has([data-decoration-mode="preset"]){grid-template-columns:repeat(3,1fr)!important}.compact-mode-choice [data-decoration-mode]{min-width:0!important}}@media(max-width:820px){.preset-design-fields{grid-template-columns:1fr!important}.preset-thread-panel{grid-column:auto}.placement-form-row1.preset-mode{grid-template-columns:1fr 1fr!important}.placement-form-row1.preset-mode .finished-size-panel{grid-row:auto!important;width:100%!important}}@media(max-width:560px){.placement-form-row1.preset-mode{grid-template-columns:1fr!important}.compact-mode-choice:has([data-decoration-mode="preset"]){grid-template-columns:1fr!important}.preset-design-picker button{flex-basis:82px;width:82px}}
/* V5.15.3 — customer-entered Preset Design text is production metadata only. */
#presetTextPreview{
display:none!important;
visibility:hidden!important;
}
/* =========================================================
V5.15.4 — COMPACT INNER PAGE HEADERS
Standard storefront proportions for Shop / Collections /
Animals / Workwear / Content pages / Blog articles.
Homepage hero and Custom Product Live Editor are untouched.
========================================================= */
/* Collection-style pages: Shop, Category, Personalised, Animals, Workwear */
.collection-hero,
.workwear-hero,
.animal-detail-hero{
padding:26px 0!important;
background:#fff;
}
.collection-hero-grid,
.animal-detail-grid{
grid-template-columns:minmax(0,1.12fr) minmax(240px,.58fr)!important;
gap:28px!important;
align-items:center!important;
}
.collection-hero h1,
.workwear-hero h1,
.animal-detail-grid h1{
font-size:clamp(36px,3.5vw,46px)!important;
line-height:1.02!important;
letter-spacing:-.028em!important;
margin:6px 0 10px!important;
}
.collection-hero p,
.workwear-hero p,
.animal-detail-grid p{
max-width:610px!important;
font-size:12.5px!important;
line-height:1.55!important;
margin-top:0!important;
margin-bottom:0!important;
}
.collection-hero .eyebrow,
.workwear-hero .eyebrow,
.animal-detail-hero .eyebrow{
font-size:8px!important;
}
.collection-hero .actions,
.workwear-hero .actions,
.animal-detail-hero .actions{
margin-top:15px!important;
}
.collection-hero .btn,
.workwear-hero .btn,
.animal-detail-hero .btn{
min-height:39px!important;
padding:0 16px!important;
font-size:10px!important;
}
/* The old 390px visual was the main source of excess page height. */
.collection-hero-art,
.collection-hero .animal-detail-emoji,
.animal-detail-hero .animal-detail-emoji{
min-height:205px!important;
height:205px!important;
max-height:205px!important;
border-radius:18px!important;
}
.collection-hero-art img{
width:78%!important;
height:78%!important;
max-height:170px!important;
object-fit:contain!important;
}
.collection-hero .animal-detail-emoji,
.animal-detail-hero .animal-detail-emoji{
font-size:82px!important;
}
/* Compact utility rows immediately below collection headers. */
.mini-benefits span{
padding:11px 12px!important;
font-size:9px!important;
}
.shop-toolbar{
padding:12px 0!important;
}
.shop-filter-bar select,
.filter-search{
min-height:40px!important;
}
.chip-row{
margin-top:8px!important;
}
.chip-row a{
padding:5px 8px!important;
font-size:8px!important;
}
.personalisation-paths a{
padding:13px 10px!important;
}
.personalisation-paths span{
font-size:21px!important;
}
.personalisation-paths b{
font-size:9.5px!important;
margin-top:4px!important;
}
.personalisation-paths small{
font-size:8px!important;
}
/* Normal information pages / FAQ / Contact / Size Guide / Journal / Article. */
.content-page-hero,
.article-hero{
padding:30px 0 26px!important;
}
.content-page-hero h1,
.article-hero h1{
max-width:780px!important;
margin:6px auto 9px!important;
font-size:clamp(34px,3.4vw,44px)!important;
line-height:1.03!important;
letter-spacing:-.025em!important;
}
.content-page-hero p,
.article-hero p{
max-width:620px!important;
font-size:11.5px!important;
line-height:1.5!important;
}
.content-page-hero .eyebrow,
.article-hero .eyebrow{
font-size:8px!important;
}
/* The first content block should start quickly after a compact page title. */
.content-page-hero + .section,
.article-hero + .section,
.animal-detail-hero + .section{
padding-top:44px!important;
}
/* Keep empty states useful but stop them looking like another giant hero. */
.empty-state{
padding:34px 18px!important;
}
.empty-state>div{
font-size:38px!important;
}
.empty-state h2{
font-size:24px!important;
margin:8px 0!important;
}
/* Tablet */
@media(max-width:900px){
.collection-hero,
.workwear-hero,
.animal-detail-hero{
padding:22px 0!important;
}
.collection-hero-grid,
.animal-detail-grid{
grid-template-columns:minmax(0,1fr) minmax(180px,.48fr)!important;
gap:20px!important;
}
.collection-hero-art,
.collection-hero .animal-detail-emoji,
.animal-detail-hero .animal-detail-emoji{
min-height:165px!important;
height:165px!important;
max-height:165px!important;
}
.collection-hero-art img{max-height:138px!important}
.collection-hero .animal-detail-emoji,
.animal-detail-hero .animal-detail-emoji{font-size:64px!important}
}
/* Mobile: one compact title block; visual stays small instead of taking a screen. */
@media(max-width:680px){
.collection-hero-grid,
.animal-detail-grid{
grid-template-columns:1fr!important;
gap:14px!important;
}
.collection-hero-art,
.collection-hero .animal-detail-emoji,
.animal-detail-hero .animal-detail-emoji{
min-height:125px!important;
height:125px!important;
max-height:125px!important;
}
.collection-hero-art img{max-height:105px!important}
.collection-hero h1,
.workwear-hero h1,
.animal-detail-grid h1{
font-size:34px!important;
}
.content-page-hero,
.article-hero{
padding:24px 0 21px!important;
}
.content-page-hero h1,
.article-hero h1{
font-size:32px!important;
}
.personalisation-paths .container{
grid-template-columns:repeat(2,1fr)!important;
}
}
/* =========================================================
V5.15.5 — MINIMAL INNER PAGE HEADERS
========================================================= */
.collection-hero,
.workwear-hero{
padding:16px 0 17px!important;
border-bottom:1px solid var(--border)!important;
}
.collection-hero-grid{
grid-template-columns:1fr!important;
gap:0!important;
min-height:0!important;
}
.collection-hero-grid>div:first-child{max-width:760px!important}
.collection-hero h1,
.workwear-hero h1{
font-size:clamp(31px,2.7vw,38px)!important;
line-height:1.02!important;
margin:4px 0 7px!important;
}
.collection-hero p,
.workwear-hero p{
font-size:11.5px!important;
line-height:1.45!important;
max-width:700px!important;
}
.collection-hero .eyebrow,
.workwear-hero .eyebrow{
font-size:7.5px!important;
letter-spacing:.12em!important;
}
.collection-hero .actions,
.workwear-hero .actions{margin-top:11px!important}
.collection-hero .btn,
.workwear-hero .btn{
min-height:35px!important;
padding:0 13px!important;
font-size:9px!important;
}
.collection-hero-art{display:none!important}
.collection-hero + .shop-toolbar{margin-top:0!important}
.shop-toolbar{padding:9px 0!important}
.shop-filter-bar select,
.filter-search{min-height:37px!important}
.chip-row{margin-top:6px!important}
.collection-hero + .mini-benefits,
.workwear-hero + .mini-benefits{margin-top:0!important}
.mini-benefits span{padding:9px 10px!important;font-size:8.5px!important}
.content-page-hero,
.article-hero{padding:20px 0 18px!important}
.content-page-hero h1,
.article-hero h1{
font-size:clamp(30px,2.8vw,38px)!important;
margin:4px auto 6px!important;
}
.content-page-hero p,
.article-hero p{font-size:10.5px!important;line-height:1.45!important}
.content-page-hero + .section,
.article-hero + .section{padding-top:34px!important}
@media(max-width:680px){
.collection-hero,
.workwear-hero{padding:14px 0 15px!important}
.collection-hero h1,
.workwear-hero h1{font-size:30px!important}
.content-page-hero,
.article-hero{padding:17px 0 15px!important}
}
/* =========================================================
V5.15.6 — FINAL NOTE FOR ALL 3 PERSONALISATION MODES
========================================================= */
.artwork-action-row.artwork-row2{
grid-template-columns:1fr!important;
}
.common-final-note-panel{
width:100%!important;
margin-top:9px!important;
display:grid!important;
grid-template-columns:minmax(150px,190px) 1fr!important;
gap:10px!important;
align-items:center!important;
min-height:58px!important;
padding:8px 10px!important;
}
.common-final-note-panel[hidden]{
display:none!important;
}
.common-final-note-panel>span{
display:grid!important;
gap:2px!important;
}
.common-final-note-panel>span b{
font-size:10.5px!important;
}
.common-final-note-panel>span small{
font-size:8.5px!important;
color:#748387!important;
}
.common-final-note-panel textarea{
width:100%!important;
min-height:42px!important;
height:42px!important;
resize:vertical!important;
padding:7px 9px!important;
font-size:10.5px!important;
line-height:1.35!important;
}
@media(max-width:760px){
.common-final-note-panel{
grid-template-columns:1fr!important;
}
}
/* =========================================================
V5.16.0 — LIVE CUSTOMER AUTH / ACCOUNT SECURITY
========================================================= */
.auth-shell{min-height:calc(100vh - 140px)!important;padding:38px 0!important}
.auth-card{width:min(560px,calc(100% - 28px))!important;padding:28px!important}
.auth-card h1{margin-bottom:8px!important}
.auth-intro{font-size:11.5px!important;line-height:1.55!important;color:#706764!important;margin:0 0 17px!important}
.social-login-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.social-login-button{
min-height:46px;border:1px solid var(--border);border-radius:12px;background:#fff;
display:flex;align-items:center;justify-content:center;gap:9px;padding:0 13px;font-size:11px;font-weight:800
}
.social-login-button i{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;background:#f5f3f2}
.social-login-button.facebook i{background:#1877f2;color:#fff}
.auth-divider{display:flex;align-items:center;gap:10px;margin:15px 0;color:#918581;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--border);flex:1}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;background:#f4eeeb;border-radius:12px;margin-bottom:12px}
.auth-tabs button{border:0;background:transparent;border-radius:9px;min-height:36px;font-size:10px;font-weight:800;color:#776d69}
.auth-tabs button.active{background:#fff;color:var(--text);box-shadow:0 2px 8px #3b2d2c10}
.auth-tab-panel{display:none}.auth-tab-panel.active{display:block}
.auth-code-input{font-size:22px!important;letter-spacing:.22em!important;text-align:center!important;font-weight:800!important}
.auth-resend{text-align:center;margin-top:9px}.auth-resend button{border:0;background:transparent;text-decoration:underline;font-size:9.5px;cursor:pointer;color:#695d59}
.auth-footer-link{text-align:center;font-size:10.5px;margin:17px 0 0}.auth-footer-link a{text-decoration:underline;font-weight:800}
.auth-small-link{text-align:right;font-size:9.5px}.auth-small-link a{text-decoration:underline}
.auth-legal{text-align:center;font-size:8.5px;line-height:1.5;color:#8b7f7b;margin-top:13px}
.auth-legal a{text-decoration:underline}
.auth-verify-box,.auth-mode-card{
padding:12px;border:1px solid var(--border);border-radius:12px;background:#fbf8f6;margin-bottom:12px;display:grid;gap:3px
}
.auth-verify-box b,.auth-mode-card b{font-size:11px}.auth-verify-box small,.auth-mode-card small{font-size:9px;color:#746966}
.auth-otp-form{margin-top:8px}.auth-otp-form label{display:grid;gap:5px}.auth-otp-form label>span{font-size:9px;font-weight:800}
.account-security-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.security-card{border:1px solid var(--border);border-radius:14px;padding:14px;background:#fff;display:block}
.security-card h3{font:500 20px var(--font-heading);margin:0 0 10px}
.security-card p{font-size:10px;line-height:1.5}.security-card>small{display:block;margin-top:9px;font-size:8.5px;line-height:1.5;color:#837774}
.security-ok,.security-warn{display:inline-flex;border-radius:999px;padding:5px 8px;font-size:8.5px;font-weight:800;margin:3px 0 8px}
.security-ok{background:#e7f3eb;color:#3e6a4e}.security-warn{background:#fff2e7;color:#94613b}
.connected-login-list{display:grid;gap:6px}.connected-login-list>span{display:grid;grid-template-columns:28px 1fr;column-gap:7px;align-items:center;border:1px solid var(--border);border-radius:9px;padding:7px}
.connected-login-list i{grid-row:1/3;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#eef2f4;font-style:normal;font-weight:800}
.connected-login-list b{font-size:9.5px}.connected-login-list small{font-size:8px;color:#7d716e}
@media(max-width:680px){
.social-login-grid,.account-security-grid{grid-template-columns:1fr}
.auth-card{padding:20px!important}
}
/* =========================================================
V5.16.1 — CHECKOUT SHIPPING METHODS
========================================================= */
.checkout-shipping-methods{display:grid;gap:8px;margin:2px 0 18px}
.checkout-shipping-methods.is-loading{opacity:.58;pointer-events:none}
.shipping-choice{
display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;
border:1px solid var(--border);border-radius:12px;padding:10px 11px;background:#fff;cursor:pointer;
transition:border-color .18s ease,background .18s ease,box-shadow .18s ease
}
.shipping-choice:has(input:checked){border-color:#8fb8b5;background:#f1f8f7;box-shadow:0 0 0 1px #a8cfcc inset}
.shipping-choice input{margin:0;accent-color:#5d918d}
.shipping-choice span{display:grid;gap:2px}.shipping-choice b{font-size:10.5px}.shipping-choice small{font-size:8.5px;color:#7b716e}
.shipping-choice strong{font-size:10.5px;white-space:nowrap}
.checkout-shipping-summary>span{display:grid;gap:2px}.checkout-shipping-summary small{font-size:8px;color:#897d79;font-weight:500}
@media(max-width:560px){.shipping-choice{grid-template-columns:auto 1fr}.shipping-choice strong{grid-column:2}}
/* =========================================================
V5.17.0 — BUSINESS FINAL STOREFRONT
Coupons · Tax · Tracking · Cookie Consent · Maintenance
========================================================= */
.cart-coupon-box{display:grid;gap:6px;margin:10px 0;padding:10px;border:1px solid var(--border);border-radius:12px;background:#fbf8f6}
.cart-coupon-box>label{font-size:9px;font-weight:800}
.cart-coupon-box>div{display:grid;grid-template-columns:1fr auto;gap:6px}
.cart-coupon-box .btn{min-height:38px!important;padding:0 12px!important}
.cart-discount-row{color:#477263!important}
.checkout-tax-note{display:block;font-size:8.5px;color:#837773;margin:3px 0 8px}
.order-tracking-line a{text-decoration:underline;font-weight:800}
.cookie-consent{
position:fixed;left:18px;right:18px;bottom:18px;z-index:9999;margin:auto;max-width:980px;
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;
padding:14px 16px;border:1px solid #d8cbc7;border-radius:16px;background:rgba(255,253,252,.98);
box-shadow:0 18px 55px rgba(52,38,38,.18);backdrop-filter:blur(10px)
}
.cookie-consent[hidden]{display:none!important}
.cookie-consent>div:first-child{display:grid;gap:3px}.cookie-consent b{font-size:11px}.cookie-consent p{margin:0;font-size:9px;line-height:1.45;color:#6f6562}.cookie-consent a{font-size:8.5px;text-decoration:underline}
.cookie-consent-options{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;padding-top:7px;border-top:1px solid #eadfdb}
.cookie-consent-options[hidden]{display:none!important}.cookie-consent-options label{display:flex;gap:5px;align-items:center;font-size:9px;font-weight:700}
.cookie-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end}.cookie-actions .btn{min-height:35px!important;padding:0 11px!important;font-size:8.5px!important}
.cookie-settings-button{position:fixed;left:8px;bottom:8px;z-index:9000;border:1px solid #d9ceca;border-radius:999px;background:#fff;padding:6px 9px;font-size:7.5px;color:#776b68;cursor:pointer}
.maintenance-screen{min-height:100vh;display:grid;place-items:center;background:#fbf7f4;padding:24px;text-align:center}
.maintenance-screen>div{max-width:560px;padding:34px;border:1px solid #eaded8;border-radius:24px;background:#fff}
.maintenance-screen span{font-size:42px}.maintenance-screen h1{font:500 42px/1 var(--font-heading);margin:12px 0}.maintenance-screen p{font-size:12px;line-height:1.6;color:#736966}
@media(max-width:720px){
.cookie-consent{grid-template-columns:1fr;left:10px;right:10px;bottom:10px}.cookie-actions{justify-content:flex-start;flex-wrap:wrap}
}
/* =========================================================
V5.17.2 — LIVE EDITOR WIDTH / ALIGNMENT HARD FIX
Keep the controls inside the right panel at every desktop width.
========================================================= */
.sketch-controls{container-type:inline-size!important;min-width:0!important;overflow:hidden!important}
.sketch-scroll{overflow-x:hidden!important}
.placement-form-row1,
.placement-form-row1.artwork-mode,
.placement-form-row1.text-mode,
.placement-form-row1.preset-mode,
.placement-form-row1.empty-mode{
width:100%!important;
max-width:100%!important;
justify-content:stretch!important;
align-items:stretch!important;
gap:7px!important;
}
.placement-form-row1.artwork-mode{
grid-template-columns:minmax(250px,1.35fr) minmax(145px,.72fr) minmax(230px,1fr) minmax(170px,.72fr)!important;
}
.placement-form-row1.text-mode{
grid-template-columns:minmax(280px,1.35fr) minmax(245px,1fr) minmax(170px,.7fr)!important;
}
.placement-form-row1.preset-mode{
grid-template-columns:minmax(280px,1.35fr) minmax(245px,1fr) minmax(170px,.7fr)!important;
}
.placement-form-row1.empty-mode{
grid-template-columns:minmax(310px,1.3fr) minmax(280px,1fr)!important;
}
.placement-form-row1 .compact-control-panel,
.placement-form-row1 .personalisation-panel,
.placement-form-row1 .placement-panel,
.placement-form-row1 .row1-upload-panel,
.placement-form-row1 .finished-size-panel,
.placement-form-row1 .text-finished-size-top-panel{
width:100%!important;min-width:0!important;max-width:none!important;
}
.compact-mode-choice{
width:100%!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;
}
.compact-mode-choice button{
width:100%!important;max-width:100%!important;padding:0 6px!important;justify-content:flex-start!important;overflow:hidden!important;
}
.compact-mode-choice button b{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.compact-placement-chips{
width:100%!important;display:flex!important;flex-wrap:wrap!important;gap:4px!important;
}
.compact-placement-chips button{flex:1 1 76px!important;min-width:72px!important;padding:0 6px!important}
.compact-finished-size{grid-template-columns:minmax(40px,1fr) 12px minmax(40px,1fr) minmax(52px,64px)!important}
.artwork-upload-panel .compact-file-picker{width:100%!important;min-width:0!important;display:grid!important;grid-template-columns:auto minmax(0,1fr)!important}
.artwork-upload-panel .compact-file-picker span{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
@container (max-width:900px){
.placement-form-row1.artwork-mode{grid-template-columns:1fr 1fr!important}
.placement-form-row1.text-mode,.placement-form-row1.preset-mode{grid-template-columns:1fr 1fr!important}
.placement-form-row1.empty-mode{grid-template-columns:1fr 1fr!important}
.placement-form-row1 .finished-size-panel,.placement-form-row1 .text-finished-size-top-panel{grid-column:auto!important}
}
@container (max-width:640px){
.placement-form-row1.artwork-mode,.placement-form-row1.text-mode,.placement-form-row1.preset-mode,.placement-form-row1.empty-mode{grid-template-columns:1fr!important}
.compact-mode-choice{grid-template-columns:1fr 1fr 1fr!important}
}
@container (max-width:430px){.compact-mode-choice{grid-template-columns:1fr!important}}
.checkout-country-live{margin-top:6px;font-size:11px;font-weight:750;min-height:16px}
.checkout-country-live.is-allowed{color:#39765f}
.checkout-country-live.is-blocked{color:#a34e47}
/* =========================================================
V5.17.3 — LIVE EDITOR TAB / PANEL FINAL ALIGNMENT
========================================================= */
/* The editor is a focused workspace. Store mega-menu panels must never bleed across it. */
body.customizer-page-mode .mega-menu,
body.customizer-focus-mode .mega-menu{display:none!important}
body.customizer-page-mode .sketch-editor,
body.customizer-focus-mode .sketch-editor{position:relative!important;isolation:isolate!important}
body.customizer-page-mode .sketch-preview,
body.customizer-page-mode .sketch-controls,
body.customizer-focus-mode .sketch-preview,
body.customizer-focus-mode .sketch-controls{opacity:1!important;background:#fff!important;min-width:0!important}
/* Equal, predictable view tabs; the tiny clear X only appears when the tab is hovered. */
.sketch-viewbar .ps-view-tabs{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:minmax(88px,1fr)!important;width:100%!important;max-width:560px!important;overflow:visible!important}
.sketch-viewbar .ps-view-tabs button{width:100%!important;min-width:0!important;position:relative!important}
.sketch-viewbar .ps-view-tabs button>em:not([hidden]){opacity:0!important;pointer-events:none!important;transition:opacity .15s ease!important}
.sketch-viewbar .ps-view-tabs button:hover>em:not([hidden]),
.sketch-viewbar .ps-view-tabs button:focus-visible>em:not([hidden]){opacity:1!important;pointer-events:auto!important}
/* One stable top-control grammar for Artwork, Text and Preset.
Artwork upload intentionally gets its own short second row to prevent clipping. */
.sketch-controls{container-type:inline-size!important;min-width:0!important;overflow:hidden!important}
.sketch-scroll{overflow-x:hidden!important}
.placement-form-row1,
.placement-form-row1.artwork-mode,
.placement-form-row1.text-mode,
.placement-form-row1.preset-mode,
.placement-form-row1.empty-mode{
display:grid!important;width:100%!important;max-width:100%!important;min-width:0!important;
gap:7px!important;align-items:stretch!important;justify-content:stretch!important
}
.placement-form-row1 .personalisation-panel{grid-area:mode!important}
.placement-form-row1 .artwork-upload-panel{grid-area:upload!important}
.placement-form-row1 .placement-panel{grid-area:place!important}
.placement-form-row1 .finished-size-panel,
.placement-form-row1 .text-finished-size-top-panel{grid-area:size!important}
.placement-form-row1.artwork-mode{
grid-template-columns:minmax(280px,1.15fr) minmax(230px,.95fr) minmax(190px,.72fr)!important;
grid-template-areas:"mode place size" "upload upload upload"!important
}
.placement-form-row1.text-mode,
.placement-form-row1.preset-mode{
grid-template-columns:minmax(280px,1.15fr) minmax(230px,.95fr) minmax(190px,.72fr)!important;
grid-template-areas:"mode place size"!important
}
.placement-form-row1.empty-mode{
grid-template-columns:minmax(300px,1.15fr) minmax(260px,1fr)!important;
grid-template-areas:"mode place"!important
}
.placement-form-row1 .compact-control-panel,
.placement-form-row1 .personalisation-panel,
.placement-form-row1 .placement-panel,
.placement-form-row1 .row1-upload-panel,
.placement-form-row1 .finished-size-panel,
.placement-form-row1 .text-finished-size-top-panel{
width:100%!important;min-width:0!important;max-width:none!important;grid-row:auto!important;margin:0!important
}
.compact-mode-choice{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;gap:5px!important}
.compact-mode-choice button{width:100%!important;min-width:0!important;max-width:none!important;padding:0 6px!important;overflow:hidden!important}
.compact-mode-choice button span,.compact-mode-choice button b{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.compact-placement-chips{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;gap:4px!important}
.compact-placement-chips button{width:100%!important;min-width:0!important;padding:0 5px!important}
.compact-finished-size,.text-top-finished-size{grid-template-columns:minmax(42px,1fr) 12px minmax(42px,1fr) minmax(58px,66px)!important;width:100%!important}
.artwork-upload-panel .compact-file-picker{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;width:100%!important;min-width:0!important}
.artwork-upload-panel .compact-file-picker span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
/* Text controls respond to the RIGHT PANEL width, not the browser width. */
@container (max-width:820px){
.placement-form-row1.artwork-mode{grid-template-columns:1fr 1fr!important;grid-template-areas:"mode place" "size size" "upload upload"!important}
.placement-form-row1.text-mode,.placement-form-row1.preset-mode{grid-template-columns:1fr 1fr!important;grid-template-areas:"mode place" "size size"!important}
.placement-form-row1.empty-mode{grid-template-columns:1fr 1fr!important;grid-template-areas:"mode place"!important}
.text-v17-row1,.text-v17-row2{grid-template-columns:1fr 1fr!important}
.text-v17-message,.font-picker-field{grid-column:1/-1!important}
}
@container (max-width:560px){
.placement-form-row1.artwork-mode,.placement-form-row1.text-mode,.placement-form-row1.preset-mode,.placement-form-row1.empty-mode{grid-template-columns:1fr!important;grid-template-areas:"mode" "place" "size" "upload"!important}
.placement-form-row1.empty-mode{grid-template-areas:"mode" "place"!important}
.placement-form-row1.text-mode,.placement-form-row1.preset-mode{grid-template-areas:"mode" "place" "size"!important}
.compact-mode-choice{grid-template-columns:1fr!important}
.compact-placement-chips{grid-template-columns:1fr 1fr!important}
.text-v17-row1,.text-v17-row2{grid-template-columns:1fr!important}
.text-v17-message,.font-picker-field{grid-column:auto!important}
}
.checkout-shipping-units{display:inline-flex;margin-left:7px;padding:4px 7px;border-radius:999px;background:#eef4f4;color:#657776;font-size:8px;font-weight:750;vertical-align:middle}
/* =========================================================
V5.17.4 — LIVE EDITOR STRUCTURAL REBUILD
One authoritative layout layer. Scoped to .tn-editor-v174 so
legacy customizer rules cannot break this workspace again.
========================================================= */
/* Never allow storefront dropdowns to visually contaminate the editor. */
body.customizer-page-mode .site-header .mega-menu,
body.customizer-page-mode .site-header .simple-dropdown,
body.customizer-focus-mode .site-header .mega-menu,
body.customizer-focus-mode .site-header .simple-dropdown{
display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important
}
body.customizer-page-mode .tn-editor-v174{z-index:1!important}
/* Workspace split — large fixed preview + readable control panel. */
body.customizer-page-mode .tn-editor-v174{
display:grid!important;
grid-template-columns:minmax(460px,42%) minmax(0,58%)!important;
gap:12px!important;
align-items:stretch!important;
width:100%!important;
min-width:0!important;
max-width:none!important;
color:#314240!important;
font-family:"Nunito Sans","Segoe UI",Arial,sans-serif!important;
}
body.customizer-page-mode .tn-editor-v174 *,
body.customizer-page-mode .tn-editor-v174 *::before,
body.customizer-page-mode .tn-editor-v174 *::after{box-sizing:border-box!important}
body.customizer-page-mode .tn-editor-v174 .sketch-preview,
body.customizer-page-mode .tn-editor-v174 .sketch-controls{
width:100%!important;min-width:0!important;max-width:none!important;height:100%!important;min-height:0!important;
border:1px solid #c7dadd!important;border-radius:14px!important;background:#fff!important;
box-shadow:0 8px 24px rgba(58,83,82,.06)!important;overflow:hidden!important
}
/* LEFT / preview. */
body.customizer-page-mode .tn-editor-v174 .sketch-preview{
display:grid!important;grid-template-rows:58px minmax(0,1fr) 52px!important;position:relative!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-viewbar{
min-height:58px!important;padding:8px 10px!important;border-bottom:1px solid #d5e2e4!important;background:#fbfdfd!important;
display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:center!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-viewbar .ps-view-tabs{
display:grid!important;grid-template-columns:repeat(auto-fit,minmax(104px,1fr))!important;grid-auto-flow:row!important;grid-auto-columns:auto!important;
width:100%!important;max-width:none!important;gap:6px!important;overflow:visible!important;padding:0!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-viewbar .ps-view-tabs button{
position:relative!important;width:100%!important;min-width:0!important;height:38px!important;padding:0 24px 0 10px!important;
border:1px solid #c9dadd!important;border-radius:9px!important;background:#f5f9f9!important;color:#3c5552!important;
display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;font-size:11px!important;font-weight:800!important;line-height:1!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-viewbar .ps-view-tabs button.active{
background:#b9d9d5!important;border-color:#8ebbb5!important;color:#243f3c!important;box-shadow:none!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-viewbar .ps-view-tabs button.configured:not(.active){
background:#eef8f6!important;border-color:#acd0cb!important;color:#315e58!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-viewbar .ps-view-tabs button>i{
width:16px!important;height:16px!important;min-width:16px!important;display:grid!important;place-items:center!important;border-radius:50%!important;
background:#dcebed!important;color:#406d68!important;font-size:9px!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-viewbar .ps-view-tabs button>em{
position:absolute!important;right:5px!important;top:50%!important;transform:translateY(-50%)!important;width:17px!important;height:17px!important;
display:grid!important;place-items:center!important;border-radius:50%!important;background:#fff!important;color:#9a5f58!important;font-size:11px!important;font-style:normal!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-viewbar .customizer-ready-badge{
position:static!important;inset:auto!important;transform:none!important;display:flex!important;align-items:center!important;gap:5px!important;
white-space:nowrap!important;color:#4a746e!important;font-size:9px!important;font-weight:750!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-viewbar .customizer-ready-badge i{width:8px!important;height:8px!important;min-width:8px!important}
body.customizer-page-mode .tn-editor-v174 .sketch-stage{
min-width:0!important;min-height:0!important;height:auto!important;overflow:hidden!important;position:relative!important;
background:radial-gradient(circle at 50% 43%,#fff 0 52%,#f4f8f8 76%,#e6eff1 100%)!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-stage .ps-garment{
position:absolute!important;inset:5%!important;width:90%!important;height:90%!important;max-width:90%!important;max-height:90%!important;object-fit:contain!important;margin:auto!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-stage .ps-empty{
max-width:min(78%,420px)!important;text-align:center!important;font-size:10.5px!important;line-height:1.35!important;padding:8px 12px!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-stage .ps-view-label{font-size:10px!important;padding:6px 9px!important}
body.customizer-page-mode .tn-editor-v174 .sketch-preview-actions{
min-height:52px!important;padding:8px 10px!important;border-top:1px solid #d5e2e4!important;background:#fbfdfd!important;
display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important;align-items:center!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-preview-actions button{
width:100%!important;min-width:0!important;height:34px!important;border:1px solid #c9dadd!important;border-radius:8px!important;
background:#fff!important;color:#4c605d!important;font-size:9.5px!important;font-weight:750!important;padding:0 7px!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-preview-actions button:hover:not(:disabled){background:#edf6f5!important}
/* RIGHT shell. */
body.customizer-page-mode .tn-editor-v174 .sketch-controls{display:flex!important;flex-direction:column!important;container-type:inline-size!important}
body.customizer-page-mode .tn-editor-v174 .sketch-editor-head{
flex:0 0 auto!important;min-height:62px!important;padding:8px 10px!important;border-bottom:1px solid #c7dadd!important;background:#e7f0f2!important;
display:grid!important;grid-template-columns:78px minmax(220px,1fr) 112px 120px 126px!important;gap:8px!important;align-items:center!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-item-id{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;gap:6px!important;align-items:center!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v174 .sketch-item-id>span{width:34px!important;height:34px!important;font-size:12px!important;background:#b9d9d5!important;color:#274744!important}
body.customizer-page-mode .tn-editor-v174 .sketch-item-id small,
body.customizer-page-mode .tn-editor-v174 .sketch-product-name small,
body.customizer-page-mode .tn-editor-v174 .sketch-head-price small{font-size:8px!important;letter-spacing:.08em!important;color:#6d817e!important}
body.customizer-page-mode .tn-editor-v174 .sketch-item-id b{font-size:10px!important;white-space:nowrap!important}
body.customizer-page-mode .tn-editor-v174 .sketch-product-name{min-width:0!important;padding:0 9px!important;border-left:1px solid rgba(99,127,126,.18)!important}
body.customizer-page-mode .tn-editor-v174 .sketch-product-name b{display:block!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:12.5px!important;color:#354847!important}
body.customizer-page-mode .tn-editor-v174 .sketch-head-btn{
width:100%!important;min-width:0!important;height:38px!important;padding:0 10px!important;border:1px solid #bfd3d6!important;border-radius:9px!important;
background:#fff!important;color:#3f5552!important;font-size:10px!important;font-weight:800!important;white-space:nowrap!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-head-btn.add{background:#b9d9d5!important;border-color:#9ac4bf!important;color:#2e4e49!important}
body.customizer-page-mode .tn-editor-v174 .sketch-head-price{
min-width:0!important;min-height:44px!important;padding:6px 9px!important;border:1px solid #d9c8b8!important;border-radius:10px!important;background:#e7dacc!important;text-align:right!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-head-price b{font-size:19px!important;line-height:1.05!important;color:#394644!important}
body.customizer-page-mode .tn-editor-v174 .sketch-item-tabs{flex:0 0 auto!important;padding:6px 10px!important;border-bottom:1px solid #d5e2e4!important;background:#fafcfc!important}
body.customizer-page-mode .tn-editor-v174 .sketch-scroll{
flex:1 1 0!important;min-height:0!important;min-width:0!important;overflow-y:auto!important;overflow-x:hidden!important;background:#fff!important;scrollbar-gutter:stable!important
}
/* Garment controls. */
body.customizer-page-mode .tn-editor-v174 .sketch-garment-row{
width:100%!important;min-width:0!important;padding:11px 12px!important;border-bottom:1px solid #d9e5e7!important;background:#f9fbfb!important;
display:grid!important;grid-template-columns:112px 82px minmax(0,1fr)!important;column-gap:12px!important;row-gap:5px!important;align-items:start!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-size-compact{width:100%!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v174 .sketch-size-select{display:grid!important;gap:5px!important}
body.customizer-page-mode .tn-editor-v174 .sketch-size-select>span,
body.customizer-page-mode .tn-editor-v174 .same-shirt-qty>span,
body.customizer-page-mode .tn-editor-v174 .sketch-field-title>span{font-size:10px!important;font-weight:800!important;color:#465b58!important}
body.customizer-page-mode .tn-editor-v174 .sketch-size-select select,
body.customizer-page-mode .tn-editor-v174 .same-shirt-qty input{
width:100%!important;height:38px!important;padding:0 10px!important;border:1px solid #c6d9dc!important;border-radius:9px!important;background:#fff!important;font-size:11.5px!important;color:#344a47!important
}
body.customizer-page-mode .tn-editor-v174 .size-chart-btn{height:22px!important;padding:0!important;background:transparent!important;border:0!important;text-align:left!important;font-size:9px!important;text-decoration:underline!important;color:#52716d!important}
body.customizer-page-mode .tn-editor-v174 .same-shirt-qty{width:100%!important;display:grid!important;gap:5px!important}
body.customizer-page-mode .tn-editor-v174 .sketch-colour-group{min-width:0!important}
body.customizer-page-mode .tn-editor-v174 .sketch-field-title{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin-bottom:5px!important}
body.customizer-page-mode .tn-editor-v174 .sketch-field-title small{font-size:8.5px!important;color:#748582!important}
body.customizer-page-mode .tn-editor-v174 .sketch-colours{display:flex!important;flex-wrap:wrap!important;gap:7px!important;align-items:flex-start!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v174 .sketch-colours button{width:47px!important;min-width:47px!important;min-height:47px!important;height:auto!important;padding:3px 2px!important}
body.customizer-page-mode .tn-editor-v174 .sketch-colours button i{width:24px!important;height:24px!important}
body.customizer-page-mode .tn-editor-v174 .sketch-colours button span{font-size:8px!important;line-height:1.1!important}
body.customizer-page-mode .tn-editor-v174 .sketch-stock{grid-column:1/-1!important;margin:0!important;padding:0!important;font-size:9px!important;line-height:1.35!important;color:#55716c!important}
/* Placement card — no squeeze, no horizontal layout gamble. */
body.customizer-page-mode .tn-editor-v174 .sketch-slot-block{margin:0!important;padding:13px 12px 14px!important;background:#fff!important;border:0!important;border-bottom:1px solid #d9e5e7!important;border-radius:0!important}
body.customizer-page-mode .tn-editor-v174 .ps-slot-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin-bottom:10px!important}
body.customizer-page-mode .tn-editor-v174 .ps-block-head{display:flex!important;align-items:center!important;gap:9px!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v174 .ps-block-head>span{width:34px!important;height:34px!important;min-width:34px!important;display:grid!important;place-items:center!important;border-radius:9px!important;background:#e5f0f2!important;color:#53706d!important;font-size:11px!important;font-weight:800!important}
body.customizer-page-mode .tn-editor-v174 .ps-block-head b{font-size:13.5px!important;line-height:1.15!important;color:#304643!important}
body.customizer-page-mode .tn-editor-v174 .ps-block-head small{display:block!important;margin-top:2px!important;font-size:9px!important;line-height:1.25!important;color:#7a8987!important}
body.customizer-page-mode .tn-editor-v174 #removeDecoration{border:0!important;background:transparent!important;color:#a35d55!important;text-decoration:underline!important;font-size:9.5px!important;padding:6px!important}
body.customizer-page-mode .tn-editor-v174 .placement-form-row1,
body.customizer-page-mode .tn-editor-v174 .placement-form-row1.artwork-mode,
body.customizer-page-mode .tn-editor-v174 .placement-form-row1.text-mode,
body.customizer-page-mode .tn-editor-v174 .placement-form-row1.preset-mode,
body.customizer-page-mode .tn-editor-v174 .placement-form-row1.empty-mode{
display:grid!important;width:100%!important;min-width:0!important;max-width:none!important;gap:9px!important;align-items:stretch!important;
grid-template-columns:minmax(0,1.45fr) minmax(220px,.75fr)!important;
grid-template-areas:"mode mode" "place size" "upload upload"!important
}
body.customizer-page-mode .tn-editor-v174 .placement-form-row1.empty-mode{grid-template-areas:"mode mode" "place place"!important}
body.customizer-page-mode .tn-editor-v174 .placement-form-row1 .personalisation-panel{grid-area:mode!important}
body.customizer-page-mode .tn-editor-v174 .placement-form-row1 .placement-panel{grid-area:place!important}
body.customizer-page-mode .tn-editor-v174 .placement-form-row1 .artwork-upload-panel{grid-area:upload!important}
body.customizer-page-mode .tn-editor-v174 .placement-form-row1 .finished-size-panel,
body.customizer-page-mode .tn-editor-v174 .placement-form-row1 .text-finished-size-top-panel{grid-area:size!important}
body.customizer-page-mode .tn-editor-v174 .placement-form-row1 .compact-control-panel{
width:100%!important;min-width:0!important;max-width:none!important;min-height:0!important;height:auto!important;margin:0!important;padding:10px!important;
border:1px solid #d0dfe1!important;border-radius:10px!important;background:#f8fbfb!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-mini-label{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin:0 0 7px!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v174 .sketch-mini-label b{font-size:10.5px!important;color:#334a47!important}
body.customizer-page-mode .tn-editor-v174 .sketch-mini-label small{font-size:8.5px!important;line-height:1.2!important;color:#748582!important;text-align:right!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
body.customizer-page-mode .tn-editor-v174 .compact-mode-choice{
display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:7px!important;width:100%!important;min-width:0!important
}
body.customizer-page-mode .tn-editor-v174 .compact-mode-choice button{
width:100%!important;min-width:0!important;max-width:none!important;height:40px!important;padding:0 10px!important;border:1px solid #d1dee0!important;border-radius:9px!important;
display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:7px!important;background:#fff!important;color:#314643!important;font-size:10px!important;font-weight:800!important;overflow:hidden!important
}
body.customizer-page-mode .tn-editor-v174 .compact-mode-choice button>i{width:24px!important;height:24px!important;min-width:24px!important;display:grid!important;place-items:center!important;border-radius:7px!important;background:#f2eeee!important;font-size:12px!important;font-style:normal!important}
body.customizer-page-mode .tn-editor-v174 .compact-mode-choice button span,
body.customizer-page-mode .tn-editor-v174 .compact-mode-choice button b{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:10px!important}
body.customizer-page-mode .tn-editor-v174 .compact-mode-choice button.active{background:#d7ece9!important;border-color:#94c2bc!important;color:#284b46!important}
body.customizer-page-mode .tn-editor-v174 .compact-placement-chips{
display:grid!important;grid-template-columns:repeat(auto-fit,minmax(112px,1fr))!important;gap:7px!important;width:100%!important;min-width:0!important
}
body.customizer-page-mode .tn-editor-v174 .compact-placement-chips button{
width:100%!important;min-width:0!important;height:38px!important;padding:0 8px!important;border:1px solid #d1dee0!important;border-radius:8px!important;background:#fff!important;
color:#334a47!important;font-size:9.5px!important;font-weight:800!important;white-space:normal!important;line-height:1.1!important
}
body.customizer-page-mode .tn-editor-v174 .compact-placement-chips button.active{background:#c8e1dd!important;border-color:#93beb8!important;color:#294b46!important}
/* Finished size. */
body.customizer-page-mode .tn-editor-v174 .finished-size-panel,
body.customizer-page-mode .tn-editor-v174 .text-finished-size-top-panel{width:100%!important;min-width:0!important;max-width:none!important}
body.customizer-page-mode .tn-editor-v174 .compact-finished-size,
body.customizer-page-mode .tn-editor-v174 .text-top-finished-size{
display:grid!important;grid-template-columns:minmax(58px,1fr) 14px minmax(58px,1fr) minmax(72px,.8fr)!important;gap:5px!important;align-items:end!important;width:100%!important
}
body.customizer-page-mode .tn-editor-v174 .compact-finished-size label{display:grid!important;gap:3px!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v174 .compact-finished-size label span{font-size:8px!important;color:#667a77!important;font-weight:800!important}
body.customizer-page-mode .tn-editor-v174 .compact-finished-size input,
body.customizer-page-mode .tn-editor-v174 .compact-finished-size select{
width:100%!important;min-width:0!important;height:38px!important;padding:0 8px!important;border:1px solid #c6d9dc!important;border-radius:8px!important;background:#fff!important;font-size:10.5px!important;color:#344a47!important
}
body.customizer-page-mode .tn-editor-v174 .compact-finished-size>b{align-self:center!important;padding:16px 0 0!important;text-align:center!important;font-size:11px!important;color:#617370!important}
/* Artwork upload / methods. */
body.customizer-page-mode .tn-editor-v174 .artwork-upload-panel .ps-upload{border:0!important;background:transparent!important;padding:0!important}
body.customizer-page-mode .tn-editor-v174 .artwork-upload-panel .compact-file-picker{
width:100%!important;display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:8px!important;align-items:center!important
}
body.customizer-page-mode .tn-editor-v174 .artwork-upload-panel .compact-file-picker button{height:36px!important;padding:0 14px!important;border:1px solid #a8cbc6!important;border-radius:8px!important;background:#d9ece9!important;color:#31504c!important;font-size:9.5px!important;font-weight:800!important}
body.customizer-page-mode .tn-editor-v174 .artwork-upload-panel .compact-file-picker span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:9px!important;color:#6e817e!important}
body.customizer-page-mode .tn-editor-v174 .ps-art-status{margin-top:4px!important;font-size:8.5px!important;line-height:1.3!important;color:#687a78!important}
body.customizer-page-mode .tn-editor-v174 .artwork-action-row.artwork-row2{display:block!important;width:100%!important;margin:10px 0 0!important}
body.customizer-page-mode .tn-editor-v174 .artwork-row2>.compact-control-panel,
body.customizer-page-mode .tn-editor-v174 .artwork-method-panel{width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;padding:10px!important;border:1px solid #d0dfe1!important;border-radius:10px!important;background:#f8fbfb!important}
body.customizer-page-mode .tn-editor-v174 .compact-methods{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:7px!important;width:100%!important}
body.customizer-page-mode .tn-editor-v174 .compact-methods button{height:38px!important;min-width:0!important;padding:0 10px!important;border:1px solid #d1dee0!important;border-radius:8px!important;background:#fff!important;font-size:9px!important}
body.customizer-page-mode .tn-editor-v174 .compact-methods button span b{font-size:9px!important;white-space:normal!important;line-height:1.1!important}
/* Text editor — predictable two rows at desktop, clean stacking below. */
body.customizer-page-mode .tn-editor-v174 .text-form-v17{display:grid!important;gap:10px!important;margin-top:10px!important;width:100%!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v174 .text-v17-row{display:grid!important;gap:9px!important;width:100%!important;min-width:0!important;align-items:end!important}
body.customizer-page-mode .tn-editor-v174 .text-v17-row1{grid-template-columns:minmax(220px,1.2fr) minmax(220px,1.15fr) minmax(120px,.58fr) minmax(120px,.58fr)!important}
body.customizer-page-mode .tn-editor-v174 .text-v17-row2{grid-template-columns:minmax(190px,1fr) minmax(110px,.55fr) minmax(180px,.9fr) minmax(170px,.8fr)!important}
body.customizer-page-mode .tn-editor-v174 .text-form-v17 .ps-input,
body.customizer-page-mode .tn-editor-v174 .text-form-v17 .align-card{display:grid!important;gap:5px!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v174 .text-form-v17 .ps-input>span,
body.customizer-page-mode .tn-editor-v174 .text-form-v17 .align-card>span{font-size:10.5px!important;line-height:1.2!important;font-weight:800!important;color:#354b47!important}
body.customizer-page-mode .tn-editor-v174 .text-form-v17 .ps-input>span small{font-size:8px!important;color:#788986!important;font-weight:650!important}
body.customizer-page-mode .tn-editor-v174 .text-form-v17 textarea{width:100%!important;min-width:0!important;height:62px!important;min-height:62px!important;padding:9px 10px!important;border:1px solid #c6d9dc!important;border-radius:9px!important;background:#fff!important;font-size:11.5px!important;line-height:1.4!important;resize:vertical!important}
body.customizer-page-mode .tn-editor-v174 .text-form-v17 input:not([type=color]),
body.customizer-page-mode .tn-editor-v174 .text-form-v17 select,
body.customizer-page-mode .tn-editor-v174 .font-picker-button{width:100%!important;min-width:0!important;height:38px!important;padding:0 10px!important;border:1px solid #c6d9dc!important;border-radius:9px!important;background:#fff!important;font-size:10.5px!important;color:#334a47!important}
body.customizer-page-mode .tn-editor-v174 .font-picker-menu{width:min(420px,100%)!important;min-width:0!important;max-width:100%!important;z-index:50!important}
body.customizer-page-mode .tn-editor-v174 .font-live-meta{min-height:21px!important}
body.customizer-page-mode .tn-editor-v174 #fontLoadStatus{font-size:8px!important}
body.customizer-page-mode .tn-editor-v174 #fontLiveSample{font-size:12px!important;max-width:150px!important}
body.customizer-page-mode .tn-editor-v174 .text-v17-row2 .align-card>div{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
body.customizer-page-mode .tn-editor-v174 .text-v17-row2 .align-card button{height:38px!important;min-width:0!important;padding:0 5px!important;border-radius:8px!important;font-size:9.5px!important}
body.customizer-page-mode .tn-editor-v174 .text-v17-fill input[type=color]{width:100%!important;height:38px!important;padding:3px!important;border:1px solid #c6d9dc!important;border-radius:8px!important;background:#fff!important}
body.customizer-page-mode .tn-editor-v174 .text-v17-border-grid{display:grid!important;grid-template-columns:minmax(0,1fr) 50px!important;gap:5px!important}
body.customizer-page-mode .tn-editor-v174 .text-size-number-control{height:38px!important;display:grid!important;grid-template-columns:34px minmax(48px,1fr) 30px 34px!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v174 .text-size-number-control button{height:38px!important;font-size:14px!important}
body.customizer-page-mode .tn-editor-v174 .text-size-number-control input{height:38px!important;min-width:0!important;padding:0 5px!important;text-align:center!important;font-size:11px!important;font-weight:800!important}
body.customizer-page-mode .tn-editor-v174 .text-size-number-control>span{height:38px!important;display:grid!important;place-items:center!important;font-size:8px!important}
/* Preset mode. */
body.customizer-page-mode .tn-editor-v174 .preset-design-fields{display:grid!important;grid-template-columns:minmax(0,1.45fr) minmax(210px,.75fr)!important;gap:9px!important;margin-top:10px!important;padding-top:0!important;border-top:0!important;width:100%!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v174 .preset-design-picker-panel{grid-row:1 / span 2!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v174 .preset-design-picker-panel,
body.customizer-page-mode .tn-editor-v174 .preset-thread-panel,
body.customizer-page-mode .tn-editor-v174 .preset-design-text{min-width:0!important;min-height:0!important;padding:10px!important;border:1px solid #d0dfe1!important;border-radius:10px!important;background:#f8fbfb!important}
body.customizer-page-mode .tn-editor-v174 .preset-design-picker{min-width:0!important;max-width:100%!important;overflow-x:auto!important;padding-bottom:5px!important}
body.customizer-page-mode .tn-editor-v174 .preset-design-picker button{flex:0 0 104px!important;width:104px!important}
body.customizer-page-mode .tn-editor-v174 .preset-design-text input{height:38px!important;font-size:10.5px!important}
/* Shared final note. */
body.customizer-page-mode .tn-editor-v174 .common-final-note-panel{width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;margin:10px 0 0!important;padding:10px!important;border:1px solid #d0dfe1!important;border-radius:10px!important;background:#f8fbfb!important;display:grid!important;grid-template-columns:180px minmax(0,1fr)!important;gap:10px!important;align-items:center!important}
body.customizer-page-mode .tn-editor-v174 .common-final-note-panel>span b{font-size:10.5px!important;color:#344a47!important}
body.customizer-page-mode .tn-editor-v174 .common-final-note-panel>span small{font-size:8px!important;line-height:1.3!important;color:#758784!important}
body.customizer-page-mode .tn-editor-v174 .common-final-note-panel textarea{width:100%!important;min-width:0!important;height:48px!important;min-height:48px!important;padding:8px 10px!important;border:1px solid #c6d9dc!important;border-radius:8px!important;background:#fff!important;font-size:10px!important;line-height:1.35!important;resize:vertical!important}
/* Add placement / review. */
body.customizer-page-mode .tn-editor-v174 .single-line-placement{margin:0!important;padding:10px 12px!important;border:0!important;border-bottom:1px solid #d9e5e7!important;border-radius:0!important;background:#edf5f5!important;display:grid!important;grid-template-columns:150px minmax(0,1fr)!important;gap:10px!important;align-items:center!important}
body.customizer-page-mode .tn-editor-v174 .add-placement-label{min-width:0!important}
body.customizer-page-mode .tn-editor-v174 .add-placement-label b{font-size:10.5px!important}
body.customizer-page-mode .tn-editor-v174 .add-placement-label small{font-size:8px!important}
body.customizer-page-mode .tn-editor-v174 .single-line-placement .ps-add-view{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(100px,1fr))!important;gap:6px!important;min-width:0!important;overflow:visible!important}
body.customizer-page-mode .tn-editor-v174 .single-line-placement .ps-add-view button{width:100%!important;min-width:0!important;height:38px!important;padding:0 8px!important;border-radius:8px!important;font-size:9px!important}
body.customizer-page-mode .tn-editor-v174 .sketch-summary{margin:0!important;border:0!important;border-bottom:1px solid #d9e5e7!important;border-radius:0!important;background:#fff!important}
body.customizer-page-mode .tn-editor-v174 .sketch-summary summary{padding:12px!important;font-size:10.5px!important}
/* Buy bar. */
body.customizer-page-mode .tn-editor-v174 .sketch-buybar{
flex:0 0 auto!important;min-height:64px!important;padding:8px 12px!important;border-top:1px solid #bfd3d6!important;background:#dfecef!important;
display:grid!important;grid-template-columns:minmax(170px,1fr) minmax(240px,310px)!important;gap:12px!important;align-items:center!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-buybar>div span{font-size:8px!important;letter-spacing:.08em!important}
body.customizer-page-mode .tn-editor-v174 .sketch-buybar>div b{font-size:17px!important}
body.customizer-page-mode .tn-editor-v174 .sketch-buybar>button{width:100%!important;height:46px!important;border-radius:10px!important;background:#b9d9d5!important;border:1px solid #95c2bd!important;color:#294844!important}
body.customizer-page-mode .tn-editor-v174 .sketch-buybar>button span{font-size:10.5px!important}
body.customizer-page-mode .tn-editor-v174 .sketch-buybar>button b{font-size:11.5px!important}
/* Container-responsive control panel, independent of browser width. */
@container (max-width:860px){
body.customizer-page-mode .tn-editor-v174 .sketch-editor-head{grid-template-columns:72px minmax(180px,1fr) 92px 100px 104px!important}
body.customizer-page-mode .tn-editor-v174 .placement-form-row1,
body.customizer-page-mode .tn-editor-v174 .placement-form-row1.artwork-mode,
body.customizer-page-mode .tn-editor-v174 .placement-form-row1.text-mode,
body.customizer-page-mode .tn-editor-v174 .placement-form-row1.preset-mode{grid-template-columns:1fr 1fr!important}
body.customizer-page-mode .tn-editor-v174 .text-v17-row1{grid-template-columns:1fr 1fr!important}
body.customizer-page-mode .tn-editor-v174 .text-v17-message,
body.customizer-page-mode .tn-editor-v174 .font-picker-field{grid-column:1/-1!important}
body.customizer-page-mode .tn-editor-v174 .text-v17-row2{grid-template-columns:1fr 1fr!important}
}
@container (max-width:650px){
body.customizer-page-mode .tn-editor-v174 .sketch-editor-head{grid-template-columns:64px minmax(0,1fr) 100px!important;grid-template-areas:"item product price" "duplicate add add"!important}
body.customizer-page-mode .tn-editor-v174 .sketch-item-id{grid-area:item!important}
body.customizer-page-mode .tn-editor-v174 .sketch-product-name{grid-area:product!important}
body.customizer-page-mode .tn-editor-v174 #duplicateCurrentItem{grid-area:duplicate!important}
body.customizer-page-mode .tn-editor-v174 #addNewItem{grid-area:add!important}
body.customizer-page-mode .tn-editor-v174 .sketch-head-price{grid-area:price!important}
body.customizer-page-mode .tn-editor-v174 .sketch-garment-row{grid-template-columns:1fr 1fr!important}
body.customizer-page-mode .tn-editor-v174 .sketch-colour-group{grid-column:1/-1!important}
body.customizer-page-mode .tn-editor-v174 .placement-form-row1,
body.customizer-page-mode .tn-editor-v174 .placement-form-row1.artwork-mode,
body.customizer-page-mode .tn-editor-v174 .placement-form-row1.text-mode,
body.customizer-page-mode .tn-editor-v174 .placement-form-row1.preset-mode,
body.customizer-page-mode .tn-editor-v174 .placement-form-row1.empty-mode{grid-template-columns:1fr!important;grid-template-areas:"mode" "place" "size" "upload"!important}
body.customizer-page-mode .tn-editor-v174 .placement-form-row1.empty-mode{grid-template-areas:"mode" "place"!important}
body.customizer-page-mode .tn-editor-v174 .compact-mode-choice{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v174 .preset-design-fields{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v174 .preset-design-picker-panel{grid-row:auto!important}
body.customizer-page-mode .tn-editor-v174 .common-final-note-panel{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v174 .single-line-placement{grid-template-columns:1fr!important}
}
/* Whole-page responsive behavior. */
@media (max-width:1180px) and (min-width:1021px){
body.customizer-page-mode .tn-editor-v174{grid-template-columns:minmax(390px,40%) minmax(590px,60%)!important;gap:9px!important}
body.customizer-page-mode .tn-editor-v174 .sketch-viewbar{grid-template-columns:1fr!important;gap:4px!important}
body.customizer-page-mode .tn-editor-v174 .sketch-viewbar .customizer-ready-badge{justify-self:end!important;font-size:8px!important}
}
@media (max-width:1020px){
body.customizer-page-mode .tn-editor-v174{grid-template-columns:1fr!important;gap:12px!important}
body.customizer-page-mode .tn-editor-v174 .sketch-preview,
body.customizer-page-mode .tn-editor-v174 .sketch-controls{height:auto!important;min-height:0!important;max-height:none!important;position:static!important}
body.customizer-page-mode .tn-editor-v174 .sketch-preview{grid-template-rows:auto minmax(480px,62vh) auto!important}
body.customizer-page-mode .tn-editor-v174 .sketch-scroll{overflow:visible!important;max-height:none!important}
body.customizer-page-mode .tn-editor-v174 .sketch-buybar{position:sticky!important;bottom:0!important;z-index:20!important}
}
@media (max-width:720px){
body.customizer-page-mode .tn-editor-v174 .sketch-viewbar{grid-template-columns:1fr!important;gap:5px!important}
body.customizer-page-mode .tn-editor-v174 .sketch-viewbar .ps-view-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
body.customizer-page-mode .tn-editor-v174 .sketch-viewbar .customizer-ready-badge{justify-self:end!important}
body.customizer-page-mode .tn-editor-v174 .sketch-preview-actions{grid-template-columns:1fr 1fr!important}
body.customizer-page-mode .tn-editor-v174 .sketch-editor-head{grid-template-columns:64px minmax(0,1fr) 96px!important;grid-template-areas:"item product price" "duplicate add add"!important}
body.customizer-page-mode .tn-editor-v174 .sketch-item-id{grid-area:item!important}
body.customizer-page-mode .tn-editor-v174 .sketch-product-name{grid-area:product!important}
body.customizer-page-mode .tn-editor-v174 #duplicateCurrentItem{grid-area:duplicate!important}
body.customizer-page-mode .tn-editor-v174 #addNewItem{grid-area:add!important}
body.customizer-page-mode .tn-editor-v174 .sketch-head-price{grid-area:price!important}
body.customizer-page-mode .tn-editor-v174 .sketch-garment-row{grid-template-columns:1fr 1fr!important}
body.customizer-page-mode .tn-editor-v174 .sketch-colour-group{grid-column:1/-1!important}
body.customizer-page-mode .tn-editor-v174 .placement-form-row1,
body.customizer-page-mode .tn-editor-v174 .placement-form-row1.artwork-mode,
body.customizer-page-mode .tn-editor-v174 .placement-form-row1.text-mode,
body.customizer-page-mode .tn-editor-v174 .placement-form-row1.preset-mode,
body.customizer-page-mode .tn-editor-v174 .placement-form-row1.empty-mode{grid-template-columns:1fr!important;grid-template-areas:"mode" "place" "size" "upload"!important}
body.customizer-page-mode .tn-editor-v174 .placement-form-row1.empty-mode{grid-template-areas:"mode" "place"!important}
body.customizer-page-mode .tn-editor-v174 .compact-mode-choice{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v174 .text-v17-row1,
body.customizer-page-mode .tn-editor-v174 .text-v17-row2{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v174 .text-v17-message,
body.customizer-page-mode .tn-editor-v174 .font-picker-field{grid-column:auto!important}
body.customizer-page-mode .tn-editor-v174 .preset-design-fields{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v174 .preset-design-picker-panel{grid-row:auto!important}
body.customizer-page-mode .tn-editor-v174 .common-final-note-panel{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v174 .single-line-placement{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v174 .sketch-buybar{grid-template-columns:1fr!important}
}
/* Hidden is a state, not a layout suggestion. Keep JS-controlled panels/tabs truly hidden. */
body.customizer-page-mode .tn-editor-v174 [hidden],
body.customizer-focus-mode .tn-editor-v174 [hidden]{display:none!important}
/* V5.17.4 tab-fit guard: all available Front/Back/Sleeve tabs stay on one row. */
body.customizer-page-mode .tn-editor-v174 .sketch-viewbar .ps-view-tabs{
grid-template-columns:repeat(auto-fit,minmax(82px,1fr))!important
}
body.customizer-page-mode .tn-editor-v174 .sketch-viewbar .ps-view-tabs button{
padding-left:6px!important;padding-right:18px!important;font-size:10px!important;white-space:nowrap!important
}
@media (max-width:1450px) and (min-width:1021px){
body.customizer-page-mode .tn-editor-v174 .sketch-viewbar .customizer-ready-badge span{font-size:0!important}
body.customizer-page-mode .tn-editor-v174 .sketch-viewbar .customizer-ready-badge span::after{content:"Ready";font-size:8px!important}
}
/* Highest-priority JS state guard: never let layout rules unhide a [hidden] editor control. */
#multiCustomizerForm .tn-editor-v174 [hidden]{display:none!important}
@media (max-width:1250px) and (min-width:1021px){
body.customizer-page-mode .tn-editor-v174 .sketch-viewbar{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v174 .sketch-viewbar .customizer-ready-badge{display:none!important}
}
/* =========================================================
V5.17.5 — LIVE EDITOR STRUCTURAL REBUILD
One authoritative layout layer. Scoped to .tn-editor-v175 so
legacy customizer rules cannot break this workspace again.
========================================================= */
/* Never allow storefront dropdowns to visually contaminate the editor. */
body.customizer-page-mode .site-header .mega-menu,
body.customizer-page-mode .site-header .simple-dropdown,
body.customizer-focus-mode .site-header .mega-menu,
body.customizer-focus-mode .site-header .simple-dropdown{
display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important
}
body.customizer-page-mode .tn-editor-v175{z-index:1!important}
/* Workspace split — large fixed preview + readable control panel. */
body.customizer-page-mode .tn-editor-v175{
display:grid!important;
grid-template-columns:minmax(460px,42%) minmax(0,58%)!important;
gap:12px!important;
align-items:stretch!important;
width:100%!important;
min-width:0!important;
max-width:none!important;
color:#314240!important;
font-family:"Nunito Sans","Segoe UI",Arial,sans-serif!important;
}
body.customizer-page-mode .tn-editor-v175 *,
body.customizer-page-mode .tn-editor-v175 *::before,
body.customizer-page-mode .tn-editor-v175 *::after{box-sizing:border-box!important}
body.customizer-page-mode .tn-editor-v175 .sketch-preview,
body.customizer-page-mode .tn-editor-v175 .sketch-controls{
width:100%!important;min-width:0!important;max-width:none!important;height:100%!important;min-height:0!important;
border:1px solid #c7dadd!important;border-radius:14px!important;background:#fff!important;
box-shadow:0 8px 24px rgba(58,83,82,.06)!important;overflow:hidden!important
}
/* LEFT / preview. */
body.customizer-page-mode .tn-editor-v175 .sketch-preview{
display:grid!important;grid-template-rows:58px minmax(0,1fr) 52px!important;position:relative!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar{
min-height:58px!important;padding:8px 10px!important;border-bottom:1px solid #d5e2e4!important;background:#fbfdfd!important;
display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:center!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar .ps-view-tabs{
display:grid!important;grid-template-columns:repeat(auto-fit,minmax(104px,1fr))!important;grid-auto-flow:row!important;grid-auto-columns:auto!important;
width:100%!important;max-width:none!important;gap:6px!important;overflow:visible!important;padding:0!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar .ps-view-tabs button{
position:relative!important;width:100%!important;min-width:0!important;height:38px!important;padding:0 24px 0 10px!important;
border:1px solid #c9dadd!important;border-radius:9px!important;background:#f5f9f9!important;color:#3c5552!important;
display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;font-size:11px!important;font-weight:800!important;line-height:1!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar .ps-view-tabs button.active{
background:#b9d9d5!important;border-color:#8ebbb5!important;color:#243f3c!important;box-shadow:none!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar .ps-view-tabs button.configured:not(.active){
background:#eef8f6!important;border-color:#acd0cb!important;color:#315e58!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar .ps-view-tabs button>i{
width:16px!important;height:16px!important;min-width:16px!important;display:grid!important;place-items:center!important;border-radius:50%!important;
background:#dcebed!important;color:#406d68!important;font-size:9px!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar .ps-view-tabs button>em{
position:absolute!important;right:5px!important;top:50%!important;transform:translateY(-50%)!important;width:17px!important;height:17px!important;
display:grid!important;place-items:center!important;border-radius:50%!important;background:#fff!important;color:#9a5f58!important;font-size:11px!important;font-style:normal!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar .customizer-ready-badge{
position:static!important;inset:auto!important;transform:none!important;display:flex!important;align-items:center!important;gap:5px!important;
white-space:nowrap!important;color:#4a746e!important;font-size:9px!important;font-weight:750!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar .customizer-ready-badge i{width:8px!important;height:8px!important;min-width:8px!important}
body.customizer-page-mode .tn-editor-v175 .sketch-stage{
min-width:0!important;min-height:0!important;height:auto!important;overflow:hidden!important;position:relative!important;
background:radial-gradient(circle at 50% 43%,#fff 0 52%,#f4f8f8 76%,#e6eff1 100%)!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-stage .ps-garment{
position:absolute!important;inset:5%!important;width:90%!important;height:90%!important;max-width:90%!important;max-height:90%!important;object-fit:contain!important;margin:auto!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-stage .ps-empty{
max-width:min(78%,420px)!important;text-align:center!important;font-size:10.5px!important;line-height:1.35!important;padding:8px 12px!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-stage .ps-view-label{font-size:10px!important;padding:6px 9px!important}
body.customizer-page-mode .tn-editor-v175 .sketch-preview-actions{
min-height:52px!important;padding:8px 10px!important;border-top:1px solid #d5e2e4!important;background:#fbfdfd!important;
display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important;align-items:center!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-preview-actions button{
width:100%!important;min-width:0!important;height:34px!important;border:1px solid #c9dadd!important;border-radius:8px!important;
background:#fff!important;color:#4c605d!important;font-size:9.5px!important;font-weight:750!important;padding:0 7px!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-preview-actions button:hover:not(:disabled){background:#edf6f5!important}
/* RIGHT shell. */
body.customizer-page-mode .tn-editor-v175 .sketch-controls{display:flex!important;flex-direction:column!important;container-type:inline-size!important}
body.customizer-page-mode .tn-editor-v175 .sketch-editor-head{
flex:0 0 auto!important;min-height:62px!important;padding:8px 10px!important;border-bottom:1px solid #c7dadd!important;background:#e7f0f2!important;
display:grid!important;grid-template-columns:78px minmax(220px,1fr) 112px 120px 126px!important;gap:8px!important;align-items:center!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-item-id{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;gap:6px!important;align-items:center!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v175 .sketch-item-id>span{width:34px!important;height:34px!important;font-size:12px!important;background:#b9d9d5!important;color:#274744!important}
body.customizer-page-mode .tn-editor-v175 .sketch-item-id small,
body.customizer-page-mode .tn-editor-v175 .sketch-product-name small,
body.customizer-page-mode .tn-editor-v175 .sketch-head-price small{font-size:8px!important;letter-spacing:.08em!important;color:#6d817e!important}
body.customizer-page-mode .tn-editor-v175 .sketch-item-id b{font-size:10px!important;white-space:nowrap!important}
body.customizer-page-mode .tn-editor-v175 .sketch-product-name{min-width:0!important;padding:0 9px!important;border-left:1px solid rgba(99,127,126,.18)!important}
body.customizer-page-mode .tn-editor-v175 .sketch-product-name b{display:block!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:12.5px!important;color:#354847!important}
body.customizer-page-mode .tn-editor-v175 .sketch-head-btn{
width:100%!important;min-width:0!important;height:38px!important;padding:0 10px!important;border:1px solid #bfd3d6!important;border-radius:9px!important;
background:#fff!important;color:#3f5552!important;font-size:10px!important;font-weight:800!important;white-space:nowrap!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-head-btn.add{background:#b9d9d5!important;border-color:#9ac4bf!important;color:#2e4e49!important}
body.customizer-page-mode .tn-editor-v175 .sketch-head-price{
min-width:0!important;min-height:44px!important;padding:6px 9px!important;border:1px solid #d9c8b8!important;border-radius:10px!important;background:#e7dacc!important;text-align:right!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-head-price b{font-size:19px!important;line-height:1.05!important;color:#394644!important}
body.customizer-page-mode .tn-editor-v175 .sketch-item-tabs{flex:0 0 auto!important;padding:6px 10px!important;border-bottom:1px solid #d5e2e4!important;background:#fafcfc!important}
body.customizer-page-mode .tn-editor-v175 .sketch-scroll{
flex:1 1 0!important;min-height:0!important;min-width:0!important;overflow-y:auto!important;overflow-x:hidden!important;background:#fff!important;scrollbar-gutter:stable!important
}
/* Garment controls. */
body.customizer-page-mode .tn-editor-v175 .sketch-garment-row{
width:100%!important;min-width:0!important;padding:11px 12px!important;border-bottom:1px solid #d9e5e7!important;background:#f9fbfb!important;
display:grid!important;grid-template-columns:112px 82px minmax(0,1fr)!important;column-gap:12px!important;row-gap:5px!important;align-items:start!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-size-compact{width:100%!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v175 .sketch-size-select{display:grid!important;gap:5px!important}
body.customizer-page-mode .tn-editor-v175 .sketch-size-select>span,
body.customizer-page-mode .tn-editor-v175 .same-shirt-qty>span,
body.customizer-page-mode .tn-editor-v175 .sketch-field-title>span{font-size:10px!important;font-weight:800!important;color:#465b58!important}
body.customizer-page-mode .tn-editor-v175 .sketch-size-select select,
body.customizer-page-mode .tn-editor-v175 .same-shirt-qty input{
width:100%!important;height:38px!important;padding:0 10px!important;border:1px solid #c6d9dc!important;border-radius:9px!important;background:#fff!important;font-size:11.5px!important;color:#344a47!important
}
body.customizer-page-mode .tn-editor-v175 .size-chart-btn{height:22px!important;padding:0!important;background:transparent!important;border:0!important;text-align:left!important;font-size:9px!important;text-decoration:underline!important;color:#52716d!important}
body.customizer-page-mode .tn-editor-v175 .same-shirt-qty{width:100%!important;display:grid!important;gap:5px!important}
body.customizer-page-mode .tn-editor-v175 .sketch-colour-group{min-width:0!important}
body.customizer-page-mode .tn-editor-v175 .sketch-field-title{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin-bottom:5px!important}
body.customizer-page-mode .tn-editor-v175 .sketch-field-title small{font-size:8.5px!important;color:#748582!important}
body.customizer-page-mode .tn-editor-v175 .sketch-colours{display:flex!important;flex-wrap:wrap!important;gap:7px!important;align-items:flex-start!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v175 .sketch-colours button{width:47px!important;min-width:47px!important;min-height:47px!important;height:auto!important;padding:3px 2px!important}
body.customizer-page-mode .tn-editor-v175 .sketch-colours button i{width:24px!important;height:24px!important}
body.customizer-page-mode .tn-editor-v175 .sketch-colours button span{font-size:8px!important;line-height:1.1!important}
body.customizer-page-mode .tn-editor-v175 .sketch-stock{grid-column:1/-1!important;margin:0!important;padding:0!important;font-size:9px!important;line-height:1.35!important;color:#55716c!important}
/* Placement card — no squeeze, no horizontal layout gamble. */
body.customizer-page-mode .tn-editor-v175 .sketch-slot-block{margin:0!important;padding:13px 12px 14px!important;background:#fff!important;border:0!important;border-bottom:1px solid #d9e5e7!important;border-radius:0!important}
body.customizer-page-mode .tn-editor-v175 .ps-slot-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin-bottom:10px!important}
body.customizer-page-mode .tn-editor-v175 .ps-block-head{display:flex!important;align-items:center!important;gap:9px!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v175 .ps-block-head>span{width:34px!important;height:34px!important;min-width:34px!important;display:grid!important;place-items:center!important;border-radius:9px!important;background:#e5f0f2!important;color:#53706d!important;font-size:11px!important;font-weight:800!important}
body.customizer-page-mode .tn-editor-v175 .ps-block-head b{font-size:13.5px!important;line-height:1.15!important;color:#304643!important}
body.customizer-page-mode .tn-editor-v175 .ps-block-head small{display:block!important;margin-top:2px!important;font-size:9px!important;line-height:1.25!important;color:#7a8987!important}
body.customizer-page-mode .tn-editor-v175 #removeDecoration{border:0!important;background:transparent!important;color:#a35d55!important;text-decoration:underline!important;font-size:9.5px!important;padding:6px!important}
body.customizer-page-mode .tn-editor-v175 .placement-form-row1,
body.customizer-page-mode .tn-editor-v175 .placement-form-row1.artwork-mode,
body.customizer-page-mode .tn-editor-v175 .placement-form-row1.text-mode,
body.customizer-page-mode .tn-editor-v175 .placement-form-row1.preset-mode,
body.customizer-page-mode .tn-editor-v175 .placement-form-row1.empty-mode{
display:grid!important;width:100%!important;min-width:0!important;max-width:none!important;gap:9px!important;align-items:stretch!important;
grid-template-columns:minmax(0,1.45fr) minmax(220px,.75fr)!important;
grid-template-areas:"mode mode" "place size" "upload upload"!important
}
body.customizer-page-mode .tn-editor-v175 .placement-form-row1.empty-mode{grid-template-areas:"mode mode" "place place"!important}
body.customizer-page-mode .tn-editor-v175 .placement-form-row1 .personalisation-panel{grid-area:mode!important}
body.customizer-page-mode .tn-editor-v175 .placement-form-row1 .placement-panel{grid-area:place!important}
body.customizer-page-mode .tn-editor-v175 .placement-form-row1 .artwork-upload-panel{grid-area:upload!important}
body.customizer-page-mode .tn-editor-v175 .placement-form-row1 .finished-size-panel,
body.customizer-page-mode .tn-editor-v175 .placement-form-row1 .text-finished-size-top-panel{grid-area:size!important}
body.customizer-page-mode .tn-editor-v175 .placement-form-row1 .compact-control-panel{
width:100%!important;min-width:0!important;max-width:none!important;min-height:0!important;height:auto!important;margin:0!important;padding:10px!important;
border:1px solid #d0dfe1!important;border-radius:10px!important;background:#f8fbfb!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-mini-label{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin:0 0 7px!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v175 .sketch-mini-label b{font-size:10.5px!important;color:#334a47!important}
body.customizer-page-mode .tn-editor-v175 .sketch-mini-label small{font-size:8.5px!important;line-height:1.2!important;color:#748582!important;text-align:right!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
body.customizer-page-mode .tn-editor-v175 .compact-mode-choice{
display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:7px!important;width:100%!important;min-width:0!important
}
body.customizer-page-mode .tn-editor-v175 .compact-mode-choice button{
width:100%!important;min-width:0!important;max-width:none!important;height:40px!important;padding:0 10px!important;border:1px solid #d1dee0!important;border-radius:9px!important;
display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:7px!important;background:#fff!important;color:#314643!important;font-size:10px!important;font-weight:800!important;overflow:hidden!important
}
body.customizer-page-mode .tn-editor-v175 .compact-mode-choice button>i{width:24px!important;height:24px!important;min-width:24px!important;display:grid!important;place-items:center!important;border-radius:7px!important;background:#f2eeee!important;font-size:12px!important;font-style:normal!important}
body.customizer-page-mode .tn-editor-v175 .compact-mode-choice button span,
body.customizer-page-mode .tn-editor-v175 .compact-mode-choice button b{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:10px!important}
body.customizer-page-mode .tn-editor-v175 .compact-mode-choice button.active{background:#d7ece9!important;border-color:#94c2bc!important;color:#284b46!important}
body.customizer-page-mode .tn-editor-v175 .compact-placement-chips{
display:grid!important;grid-template-columns:repeat(auto-fit,minmax(112px,1fr))!important;gap:7px!important;width:100%!important;min-width:0!important
}
body.customizer-page-mode .tn-editor-v175 .compact-placement-chips button{
width:100%!important;min-width:0!important;height:38px!important;padding:0 8px!important;border:1px solid #d1dee0!important;border-radius:8px!important;background:#fff!important;
color:#334a47!important;font-size:9.5px!important;font-weight:800!important;white-space:normal!important;line-height:1.1!important
}
body.customizer-page-mode .tn-editor-v175 .compact-placement-chips button.active{background:#c8e1dd!important;border-color:#93beb8!important;color:#294b46!important}
/* Finished size. */
body.customizer-page-mode .tn-editor-v175 .finished-size-panel,
body.customizer-page-mode .tn-editor-v175 .text-finished-size-top-panel{width:100%!important;min-width:0!important;max-width:none!important}
body.customizer-page-mode .tn-editor-v175 .compact-finished-size,
body.customizer-page-mode .tn-editor-v175 .text-top-finished-size{
display:grid!important;grid-template-columns:minmax(58px,1fr) 14px minmax(58px,1fr) minmax(72px,.8fr)!important;gap:5px!important;align-items:end!important;width:100%!important
}
body.customizer-page-mode .tn-editor-v175 .compact-finished-size label{display:grid!important;gap:3px!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v175 .compact-finished-size label span{font-size:8px!important;color:#667a77!important;font-weight:800!important}
body.customizer-page-mode .tn-editor-v175 .compact-finished-size input,
body.customizer-page-mode .tn-editor-v175 .compact-finished-size select{
width:100%!important;min-width:0!important;height:38px!important;padding:0 8px!important;border:1px solid #c6d9dc!important;border-radius:8px!important;background:#fff!important;font-size:10.5px!important;color:#344a47!important
}
body.customizer-page-mode .tn-editor-v175 .compact-finished-size>b{align-self:center!important;padding:16px 0 0!important;text-align:center!important;font-size:11px!important;color:#617370!important}
/* Artwork upload / methods. */
body.customizer-page-mode .tn-editor-v175 .artwork-upload-panel .ps-upload{border:0!important;background:transparent!important;padding:0!important}
body.customizer-page-mode .tn-editor-v175 .artwork-upload-panel .compact-file-picker{
width:100%!important;display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:8px!important;align-items:center!important
}
body.customizer-page-mode .tn-editor-v175 .artwork-upload-panel .compact-file-picker button{height:36px!important;padding:0 14px!important;border:1px solid #a8cbc6!important;border-radius:8px!important;background:#d9ece9!important;color:#31504c!important;font-size:9.5px!important;font-weight:800!important}
body.customizer-page-mode .tn-editor-v175 .artwork-upload-panel .compact-file-picker span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:9px!important;color:#6e817e!important}
body.customizer-page-mode .tn-editor-v175 .ps-art-status{margin-top:4px!important;font-size:8.5px!important;line-height:1.3!important;color:#687a78!important}
body.customizer-page-mode .tn-editor-v175 .artwork-action-row.artwork-row2{display:block!important;width:100%!important;margin:10px 0 0!important}
body.customizer-page-mode .tn-editor-v175 .artwork-row2>.compact-control-panel,
body.customizer-page-mode .tn-editor-v175 .artwork-method-panel{width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;padding:10px!important;border:1px solid #d0dfe1!important;border-radius:10px!important;background:#f8fbfb!important}
body.customizer-page-mode .tn-editor-v175 .compact-methods{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;gap:7px!important;width:100%!important}
body.customizer-page-mode .tn-editor-v175 .compact-methods button{height:38px!important;min-width:0!important;padding:0 10px!important;border:1px solid #d1dee0!important;border-radius:8px!important;background:#fff!important;font-size:9px!important}
body.customizer-page-mode .tn-editor-v175 .compact-methods button span b{font-size:9px!important;white-space:normal!important;line-height:1.1!important}
/* Text editor — predictable two rows at desktop, clean stacking below. */
body.customizer-page-mode .tn-editor-v175 .text-form-v17{display:grid!important;gap:10px!important;margin-top:10px!important;width:100%!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v175 .text-v17-row{display:grid!important;gap:9px!important;width:100%!important;min-width:0!important;align-items:end!important}
body.customizer-page-mode .tn-editor-v175 .text-v17-row1{grid-template-columns:minmax(220px,1.2fr) minmax(220px,1.15fr) minmax(120px,.58fr) minmax(120px,.58fr)!important}
body.customizer-page-mode .tn-editor-v175 .text-v17-row2{grid-template-columns:minmax(190px,1fr) minmax(110px,.55fr) minmax(180px,.9fr) minmax(170px,.8fr)!important}
body.customizer-page-mode .tn-editor-v175 .text-form-v17 .ps-input,
body.customizer-page-mode .tn-editor-v175 .text-form-v17 .align-card{display:grid!important;gap:5px!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v175 .text-form-v17 .ps-input>span,
body.customizer-page-mode .tn-editor-v175 .text-form-v17 .align-card>span{font-size:10.5px!important;line-height:1.2!important;font-weight:800!important;color:#354b47!important}
body.customizer-page-mode .tn-editor-v175 .text-form-v17 .ps-input>span small{font-size:8px!important;color:#788986!important;font-weight:650!important}
body.customizer-page-mode .tn-editor-v175 .text-form-v17 textarea{width:100%!important;min-width:0!important;height:62px!important;min-height:62px!important;padding:9px 10px!important;border:1px solid #c6d9dc!important;border-radius:9px!important;background:#fff!important;font-size:11.5px!important;line-height:1.4!important;resize:vertical!important}
body.customizer-page-mode .tn-editor-v175 .text-form-v17 input:not([type=color]),
body.customizer-page-mode .tn-editor-v175 .text-form-v17 select,
body.customizer-page-mode .tn-editor-v175 .font-picker-button{width:100%!important;min-width:0!important;height:38px!important;padding:0 10px!important;border:1px solid #c6d9dc!important;border-radius:9px!important;background:#fff!important;font-size:10.5px!important;color:#334a47!important}
body.customizer-page-mode .tn-editor-v175 .font-picker-menu{width:min(420px,100%)!important;min-width:0!important;max-width:100%!important;z-index:50!important}
body.customizer-page-mode .tn-editor-v175 .font-live-meta{min-height:21px!important}
body.customizer-page-mode .tn-editor-v175 #fontLoadStatus{font-size:8px!important}
body.customizer-page-mode .tn-editor-v175 #fontLiveSample{font-size:12px!important;max-width:150px!important}
body.customizer-page-mode .tn-editor-v175 .text-v17-row2 .align-card>div{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
body.customizer-page-mode .tn-editor-v175 .text-v17-row2 .align-card button{height:38px!important;min-width:0!important;padding:0 5px!important;border-radius:8px!important;font-size:9.5px!important}
body.customizer-page-mode .tn-editor-v175 .text-v17-fill input[type=color]{width:100%!important;height:38px!important;padding:3px!important;border:1px solid #c6d9dc!important;border-radius:8px!important;background:#fff!important}
body.customizer-page-mode .tn-editor-v175 .text-v17-border-grid{display:grid!important;grid-template-columns:minmax(0,1fr) 50px!important;gap:5px!important}
body.customizer-page-mode .tn-editor-v175 .text-size-number-control{height:38px!important;display:grid!important;grid-template-columns:34px minmax(48px,1fr) 30px 34px!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v175 .text-size-number-control button{height:38px!important;font-size:14px!important}
body.customizer-page-mode .tn-editor-v175 .text-size-number-control input{height:38px!important;min-width:0!important;padding:0 5px!important;text-align:center!important;font-size:11px!important;font-weight:800!important}
body.customizer-page-mode .tn-editor-v175 .text-size-number-control>span{height:38px!important;display:grid!important;place-items:center!important;font-size:8px!important}
/* Preset mode. */
body.customizer-page-mode .tn-editor-v175 .preset-design-fields{display:grid!important;grid-template-columns:minmax(0,1.45fr) minmax(210px,.75fr)!important;gap:9px!important;margin-top:10px!important;padding-top:0!important;border-top:0!important;width:100%!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v175 .preset-design-picker-panel{grid-row:1 / span 2!important;min-width:0!important}
body.customizer-page-mode .tn-editor-v175 .preset-design-picker-panel,
body.customizer-page-mode .tn-editor-v175 .preset-thread-panel,
body.customizer-page-mode .tn-editor-v175 .preset-design-text{min-width:0!important;min-height:0!important;padding:10px!important;border:1px solid #d0dfe1!important;border-radius:10px!important;background:#f8fbfb!important}
body.customizer-page-mode .tn-editor-v175 .preset-design-picker{min-width:0!important;max-width:100%!important;overflow-x:auto!important;padding-bottom:5px!important}
body.customizer-page-mode .tn-editor-v175 .preset-design-picker button{flex:0 0 104px!important;width:104px!important}
body.customizer-page-mode .tn-editor-v175 .preset-design-text input{height:38px!important;font-size:10.5px!important}
/* Shared final note. */
body.customizer-page-mode .tn-editor-v175 .common-final-note-panel{width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;margin:10px 0 0!important;padding:10px!important;border:1px solid #d0dfe1!important;border-radius:10px!important;background:#f8fbfb!important;display:grid!important;grid-template-columns:180px minmax(0,1fr)!important;gap:10px!important;align-items:center!important}
body.customizer-page-mode .tn-editor-v175 .common-final-note-panel>span b{font-size:10.5px!important;color:#344a47!important}
body.customizer-page-mode .tn-editor-v175 .common-final-note-panel>span small{font-size:8px!important;line-height:1.3!important;color:#758784!important}
body.customizer-page-mode .tn-editor-v175 .common-final-note-panel textarea{width:100%!important;min-width:0!important;height:48px!important;min-height:48px!important;padding:8px 10px!important;border:1px solid #c6d9dc!important;border-radius:8px!important;background:#fff!important;font-size:10px!important;line-height:1.35!important;resize:vertical!important}
/* Add placement / review. */
body.customizer-page-mode .tn-editor-v175 .single-line-placement{margin:0!important;padding:10px 12px!important;border:0!important;border-bottom:1px solid #d9e5e7!important;border-radius:0!important;background:#edf5f5!important;display:grid!important;grid-template-columns:150px minmax(0,1fr)!important;gap:10px!important;align-items:center!important}
body.customizer-page-mode .tn-editor-v175 .add-placement-label{min-width:0!important}
body.customizer-page-mode .tn-editor-v175 .add-placement-label b{font-size:10.5px!important}
body.customizer-page-mode .tn-editor-v175 .add-placement-label small{font-size:8px!important}
body.customizer-page-mode .tn-editor-v175 .single-line-placement .ps-add-view{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(100px,1fr))!important;gap:6px!important;min-width:0!important;overflow:visible!important}
body.customizer-page-mode .tn-editor-v175 .single-line-placement .ps-add-view button{width:100%!important;min-width:0!important;height:38px!important;padding:0 8px!important;border-radius:8px!important;font-size:9px!important}
body.customizer-page-mode .tn-editor-v175 .sketch-summary{margin:0!important;border:0!important;border-bottom:1px solid #d9e5e7!important;border-radius:0!important;background:#fff!important}
body.customizer-page-mode .tn-editor-v175 .sketch-summary summary{padding:12px!important;font-size:10.5px!important}
/* Buy bar. */
body.customizer-page-mode .tn-editor-v175 .sketch-buybar{
flex:0 0 auto!important;min-height:64px!important;padding:8px 12px!important;border-top:1px solid #bfd3d6!important;background:#dfecef!important;
display:grid!important;grid-template-columns:minmax(170px,1fr) minmax(240px,310px)!important;gap:12px!important;align-items:center!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-buybar>div span{font-size:8px!important;letter-spacing:.08em!important}
body.customizer-page-mode .tn-editor-v175 .sketch-buybar>div b{font-size:17px!important}
body.customizer-page-mode .tn-editor-v175 .sketch-buybar>button{width:100%!important;height:46px!important;border-radius:10px!important;background:#b9d9d5!important;border:1px solid #95c2bd!important;color:#294844!important}
body.customizer-page-mode .tn-editor-v175 .sketch-buybar>button span{font-size:10.5px!important}
body.customizer-page-mode .tn-editor-v175 .sketch-buybar>button b{font-size:11.5px!important}
/* Container-responsive control panel, independent of browser width. */
@container (max-width:860px){
body.customizer-page-mode .tn-editor-v175 .sketch-editor-head{grid-template-columns:72px minmax(180px,1fr) 92px 100px 104px!important}
body.customizer-page-mode .tn-editor-v175 .placement-form-row1,
body.customizer-page-mode .tn-editor-v175 .placement-form-row1.artwork-mode,
body.customizer-page-mode .tn-editor-v175 .placement-form-row1.text-mode,
body.customizer-page-mode .tn-editor-v175 .placement-form-row1.preset-mode{grid-template-columns:1fr 1fr!important}
body.customizer-page-mode .tn-editor-v175 .text-v17-row1{grid-template-columns:1fr 1fr!important}
body.customizer-page-mode .tn-editor-v175 .text-v17-message,
body.customizer-page-mode .tn-editor-v175 .font-picker-field{grid-column:1/-1!important}
body.customizer-page-mode .tn-editor-v175 .text-v17-row2{grid-template-columns:1fr 1fr!important}
}
@container (max-width:650px){
body.customizer-page-mode .tn-editor-v175 .sketch-editor-head{grid-template-columns:64px minmax(0,1fr) 100px!important;grid-template-areas:"item product price" "duplicate add add"!important}
body.customizer-page-mode .tn-editor-v175 .sketch-item-id{grid-area:item!important}
body.customizer-page-mode .tn-editor-v175 .sketch-product-name{grid-area:product!important}
body.customizer-page-mode .tn-editor-v175 #duplicateCurrentItem{grid-area:duplicate!important}
body.customizer-page-mode .tn-editor-v175 #addNewItem{grid-area:add!important}
body.customizer-page-mode .tn-editor-v175 .sketch-head-price{grid-area:price!important}
body.customizer-page-mode .tn-editor-v175 .sketch-garment-row{grid-template-columns:1fr 1fr!important}
body.customizer-page-mode .tn-editor-v175 .sketch-colour-group{grid-column:1/-1!important}
body.customizer-page-mode .tn-editor-v175 .placement-form-row1,
body.customizer-page-mode .tn-editor-v175 .placement-form-row1.artwork-mode,
body.customizer-page-mode .tn-editor-v175 .placement-form-row1.text-mode,
body.customizer-page-mode .tn-editor-v175 .placement-form-row1.preset-mode,
body.customizer-page-mode .tn-editor-v175 .placement-form-row1.empty-mode{grid-template-columns:1fr!important;grid-template-areas:"mode" "place" "size" "upload"!important}
body.customizer-page-mode .tn-editor-v175 .placement-form-row1.empty-mode{grid-template-areas:"mode" "place"!important}
body.customizer-page-mode .tn-editor-v175 .compact-mode-choice{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v175 .preset-design-fields{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v175 .preset-design-picker-panel{grid-row:auto!important}
body.customizer-page-mode .tn-editor-v175 .common-final-note-panel{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v175 .single-line-placement{grid-template-columns:1fr!important}
}
/* Whole-page responsive behavior. */
@media (max-width:1180px) and (min-width:1021px){
body.customizer-page-mode .tn-editor-v175{grid-template-columns:minmax(390px,40%) minmax(590px,60%)!important;gap:9px!important}
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar{grid-template-columns:1fr!important;gap:4px!important}
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar .customizer-ready-badge{justify-self:end!important;font-size:8px!important}
}
@media (max-width:1020px){
body.customizer-page-mode .tn-editor-v175{grid-template-columns:1fr!important;gap:12px!important}
body.customizer-page-mode .tn-editor-v175 .sketch-preview,
body.customizer-page-mode .tn-editor-v175 .sketch-controls{height:auto!important;min-height:0!important;max-height:none!important;position:static!important}
body.customizer-page-mode .tn-editor-v175 .sketch-preview{grid-template-rows:auto minmax(480px,62vh) auto!important}
body.customizer-page-mode .tn-editor-v175 .sketch-scroll{overflow:visible!important;max-height:none!important}
body.customizer-page-mode .tn-editor-v175 .sketch-buybar{position:sticky!important;bottom:0!important;z-index:20!important}
}
@media (max-width:720px){
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar{grid-template-columns:1fr!important;gap:5px!important}
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar .ps-view-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar .customizer-ready-badge{justify-self:end!important}
body.customizer-page-mode .tn-editor-v175 .sketch-preview-actions{grid-template-columns:1fr 1fr!important}
body.customizer-page-mode .tn-editor-v175 .sketch-editor-head{grid-template-columns:64px minmax(0,1fr) 96px!important;grid-template-areas:"item product price" "duplicate add add"!important}
body.customizer-page-mode .tn-editor-v175 .sketch-item-id{grid-area:item!important}
body.customizer-page-mode .tn-editor-v175 .sketch-product-name{grid-area:product!important}
body.customizer-page-mode .tn-editor-v175 #duplicateCurrentItem{grid-area:duplicate!important}
body.customizer-page-mode .tn-editor-v175 #addNewItem{grid-area:add!important}
body.customizer-page-mode .tn-editor-v175 .sketch-head-price{grid-area:price!important}
body.customizer-page-mode .tn-editor-v175 .sketch-garment-row{grid-template-columns:1fr 1fr!important}
body.customizer-page-mode .tn-editor-v175 .sketch-colour-group{grid-column:1/-1!important}
body.customizer-page-mode .tn-editor-v175 .placement-form-row1,
body.customizer-page-mode .tn-editor-v175 .placement-form-row1.artwork-mode,
body.customizer-page-mode .tn-editor-v175 .placement-form-row1.text-mode,
body.customizer-page-mode .tn-editor-v175 .placement-form-row1.preset-mode,
body.customizer-page-mode .tn-editor-v175 .placement-form-row1.empty-mode{grid-template-columns:1fr!important;grid-template-areas:"mode" "place" "size" "upload"!important}
body.customizer-page-mode .tn-editor-v175 .placement-form-row1.empty-mode{grid-template-areas:"mode" "place"!important}
body.customizer-page-mode .tn-editor-v175 .compact-mode-choice{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v175 .text-v17-row1,
body.customizer-page-mode .tn-editor-v175 .text-v17-row2{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v175 .text-v17-message,
body.customizer-page-mode .tn-editor-v175 .font-picker-field{grid-column:auto!important}
body.customizer-page-mode .tn-editor-v175 .preset-design-fields{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v175 .preset-design-picker-panel{grid-row:auto!important}
body.customizer-page-mode .tn-editor-v175 .common-final-note-panel{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v175 .single-line-placement{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v175 .sketch-buybar{grid-template-columns:1fr!important}
}
/* Hidden is a state, not a layout suggestion. Keep JS-controlled panels/tabs truly hidden. */
body.customizer-page-mode .tn-editor-v175 [hidden],
body.customizer-focus-mode .tn-editor-v175 [hidden]{display:none!important}
/* V5.17.5 tab-fit guard: all available Front/Back/Sleeve tabs stay on one row. */
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar .ps-view-tabs{
grid-template-columns:repeat(auto-fit,minmax(82px,1fr))!important
}
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar .ps-view-tabs button{
padding-left:6px!important;padding-right:18px!important;font-size:10px!important;white-space:nowrap!important
}
@media (max-width:1450px) and (min-width:1021px){
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar .customizer-ready-badge span{font-size:0!important}
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar .customizer-ready-badge span::after{content:"Ready";font-size:8px!important}
}
/* Highest-priority JS state guard: never let layout rules unhide a [hidden] editor control. */
#multiCustomizerForm .tn-editor-v175 [hidden]{display:none!important}
@media (max-width:1250px) and (min-width:1021px){
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar .customizer-ready-badge{display:none!important}
}
/* =========================================================
V5.17.5 — SCREENSHOT-DRIVEN MODE LAYOUT FIX
Personalisation / artwork / placement / finished size are
physically separated so no breakpoint can overlap them.
========================================================= */
body.customizer-page-mode .tn-editor-v175 .placement-setup-v175,
body.customizer-page-mode .tn-editor-v175 .placement-setup-v175.artwork-mode,
body.customizer-page-mode .tn-editor-v175 .placement-setup-v175.text-mode,
body.customizer-page-mode .tn-editor-v175 .placement-setup-v175.preset-mode,
body.customizer-page-mode .tn-editor-v175 .placement-setup-v175.empty-mode{
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
grid-template-areas:none!important;
gap:10px!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
align-items:stretch!important;
}
body.customizer-page-mode .tn-editor-v175 .placement-setup-v175>.personalisation-panel,
body.customizer-page-mode .tn-editor-v175 .placement-setup-v175>.artwork-upload-panel,
body.customizer-page-mode .tn-editor-v175 .placement-setup-v175>.placement-essentials-v175{
grid-area:auto!important;
grid-column:1/-1!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
}
body.customizer-page-mode .tn-editor-v175 .placement-essentials-v175{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(280px,34%)!important;
gap:10px!important;
align-items:stretch!important;
}
body.customizer-page-mode .tn-editor-v175 .placement-essentials-v175>.placement-panel,
body.customizer-page-mode .tn-editor-v175 .placement-essentials-v175>.finished-size-panel,
body.customizer-page-mode .tn-editor-v175 .placement-essentials-v175>.text-finished-size-top-panel{
grid-area:auto!important;
grid-column:auto!important;
grid-row:auto!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
height:auto!important;
align-self:stretch!important;
}
body.customizer-page-mode .tn-editor-v175 .placement-setup-v175.empty-mode .placement-essentials-v175{
grid-template-columns:minmax(0,1fr)!important;
}
body.customizer-page-mode .tn-editor-v175 .placement-setup-v175 .artwork-upload-panel{
order:2!important;
}
body.customizer-page-mode .tn-editor-v175 .placement-setup-v175 .placement-essentials-v175{
order:3!important;
}
body.customizer-page-mode .tn-editor-v175 .placement-setup-v175 .personalisation-panel{
order:1!important;
}
/* Personalisation buttons always fit their own panel. */
body.customizer-page-mode .tn-editor-v175 .compact-mode-choice,
body.customizer-page-mode .tn-editor-v175 .compact-mode-choice:has([data-decoration-mode="preset"]){
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:8px!important;
width:100%!important;
min-width:0!important;
}
body.customizer-page-mode .tn-editor-v175 .compact-mode-choice button{
min-width:0!important;
width:100%!important;
max-width:none!important;
white-space:normal!important;
}
/* Placement + size: never allow the inputs to escape the card. */
body.customizer-page-mode .tn-editor-v175 .compact-finished-size,
body.customizer-page-mode .tn-editor-v175 .text-top-finished-size{
display:grid!important;
grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr) minmax(72px,86px)!important;
gap:6px!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
align-items:end!important;
}
body.customizer-page-mode .tn-editor-v175 .compact-finished-size label,
body.customizer-page-mode .tn-editor-v175 .compact-finished-size input,
body.customizer-page-mode .tn-editor-v175 .compact-finished-size select,
body.customizer-page-mode .tn-editor-v175 .text-top-finished-size label,
body.customizer-page-mode .tn-editor-v175 .text-top-finished-size input,
body.customizer-page-mode .tn-editor-v175 .text-top-finished-size select{
min-width:0!important;
max-width:100%!important;
width:100%!important;
}
/* Preset: three deliberate cards at wide widths; no horizontal crop. */
body.customizer-page-mode .tn-editor-v175 .preset-design-fields{
display:grid!important;
grid-template-columns:minmax(340px,1.45fr) minmax(210px,.8fr) minmax(230px,.9fr)!important;
gap:10px!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
margin-top:10px!important;
overflow:visible!important;
}
body.customizer-page-mode .tn-editor-v175 .preset-design-picker-panel,
body.customizer-page-mode .tn-editor-v175 .preset-design-text,
body.customizer-page-mode .tn-editor-v175 .preset-thread-panel{
grid-row:auto!important;
grid-column:auto!important;
min-width:0!important;
max-width:100%!important;
width:100%!important;
overflow:hidden!important;
}
body.customizer-page-mode .tn-editor-v175 .preset-design-picker{
width:100%!important;
max-width:100%!important;
min-width:0!important;
overflow-x:auto!important;
overflow-y:hidden!important;
}
body.customizer-page-mode .tn-editor-v175 .preset-thread-colours{
width:100%!important;
min-width:0!important;
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:7px!important;
}
body.customizer-page-mode .tn-editor-v175 .preset-thread-colours button{
min-width:0!important;
width:100%!important;
justify-content:flex-start!important;
}
/* Text mode: keep fields readable instead of squeezing 4 columns too early. */
body.customizer-page-mode .tn-editor-v175 .text-v17-row1{
grid-template-columns:minmax(260px,1.2fr) minmax(260px,1.1fr) minmax(140px,.55fr) minmax(140px,.55fr)!important;
}
body.customizer-page-mode .tn-editor-v175 .text-v17-row2{
grid-template-columns:minmax(200px,1fr) minmax(120px,.55fr) minmax(190px,.9fr) minmax(190px,.9fr)!important;
}
/* Brand-aware customiser: follows the active site preset instead of old teal. */
body.customizer-page-mode .tn-editor-v175 .sketch-preview,
body.customizer-page-mode .tn-editor-v175 .sketch-controls{
border-color:color-mix(in srgb,var(--accent) 22%,#d9dce5)!important;
box-shadow:0 10px 28px color-mix(in srgb,var(--dark) 8%,transparent)!important;
}
body.customizer-page-mode .tn-editor-v175 .compact-mode-choice button.active,
body.customizer-page-mode .tn-editor-v175 .compact-placement-chips button.active,
body.customizer-page-mode .tn-editor-v175 .preset-design-picker button.active,
body.customizer-page-mode .tn-editor-v175 .preset-thread-colours button.active{
background:color-mix(in srgb,var(--accent) 11%,#fff)!important;
border-color:color-mix(in srgb,var(--accent) 56%,#fff)!important;
color:var(--dark)!important;
}
body.customizer-page-mode .tn-editor-v175 .compact-mode-choice button.active>i{
background:color-mix(in srgb,var(--accent) 18%,#fff)!important;
color:var(--accent)!important;
}
body.customizer-page-mode .tn-editor-v175 .sketch-buybar{
background:color-mix(in srgb,var(--accent) 8%,#fff)!important;
border-top-color:color-mix(in srgb,var(--accent) 25%,#ddd)!important;
}
body.customizer-page-mode .tn-editor-v175 .sketch-buybar>button{
background:var(--accent)!important;
border-color:var(--accent)!important;
color:#fff!important;
}
body.customizer-page-mode .tn-editor-v175 .ps-block-head>span,
body.customizer-page-mode .tn-editor-v175 .sketch-item-id>span{
background:color-mix(in srgb,var(--accent) 10%,#fff)!important;
color:var(--accent)!important;
}
body.customizer-page-mode .tn-editor-v175 .compact-control-panel,
body.customizer-page-mode .tn-editor-v175 .preset-design-picker-panel,
body.customizer-page-mode .tn-editor-v175 .preset-thread-panel,
body.customizer-page-mode .tn-editor-v175 .preset-design-text,
body.customizer-page-mode .tn-editor-v175 .artwork-method-panel,
body.customizer-page-mode .tn-editor-v175 .common-final-note-panel{
border-color:color-mix(in srgb,var(--accent) 18%,#dde1e8)!important;
background:color-mix(in srgb,var(--accent) 2.5%,#fff)!important;
}
/* Container breakpoints are based on the editor panel, not the monitor. */
@container (max-width:980px){
body.customizer-page-mode .tn-editor-v175 .preset-design-fields{
grid-template-columns:minmax(0,1fr) minmax(210px,.72fr)!important;
}
body.customizer-page-mode .tn-editor-v175 .preset-design-picker-panel{grid-column:1/-1!important}
body.customizer-page-mode .tn-editor-v175 .text-v17-row1{grid-template-columns:1fr 1fr!important}
body.customizer-page-mode .tn-editor-v175 .text-v17-row2{grid-template-columns:1fr 1fr!important}
body.customizer-page-mode .tn-editor-v175 .text-v17-message,
body.customizer-page-mode .tn-editor-v175 .font-picker-field{grid-column:1/-1!important}
}
@container (max-width:720px){
body.customizer-page-mode .tn-editor-v175 .placement-essentials-v175{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v175 .compact-mode-choice,
body.customizer-page-mode .tn-editor-v175 .compact-mode-choice:has([data-decoration-mode="preset"]){grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v175 .preset-design-fields,
body.customizer-page-mode .tn-editor-v175 .text-v17-row1,
body.customizer-page-mode .tn-editor-v175 .text-v17-row2{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v175 .preset-design-picker-panel,
body.customizer-page-mode .tn-editor-v175 .text-v17-message,
body.customizer-page-mode .tn-editor-v175 .font-picker-field{grid-column:auto!important}
}
@container (max-width:430px){
body.customizer-page-mode .tn-editor-v175 .compact-finished-size,
body.customizer-page-mode .tn-editor-v175 .text-top-finished-size{
grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr)!important;
}
body.customizer-page-mode .tn-editor-v175 .compact-finished-size select,
body.customizer-page-mode .tn-editor-v175 .text-top-finished-size select{grid-column:1/-1!important}
body.customizer-page-mode .tn-editor-v175 .preset-thread-colours{grid-template-columns:1fr!important}
}
/* Absolute state guard. */
#multiCustomizerForm .tn-editor-v175 [hidden]{display:none!important}
/* =========================================================
THREAD & NEEDLES BRAND PRESET — COMPLETE STOREFRONT SKIN
Dominant logo colour sampled from the supplied identity: #3D4061.
========================================================= */
body.theme-thread-needles-brand{
background:var(--bg)!important;
color:var(--text)!important;
}
body.theme-thread-needles-brand .announcement-bar{
background:var(--dark)!important;
color:#fff!important;
}
body.theme-thread-needles-brand .site-header{
background:rgba(255,255,255,.97)!important;
border-bottom-color:var(--border)!important;
}
body.theme-thread-needles-brand .brand,
body.theme-thread-needles-brand .brand span,
body.theme-thread-needles-brand .brand i{color:var(--accent)!important}
body.theme-thread-needles-brand .hero-clean{--slide-accent:var(--accent)!important}
body.theme-thread-needles-brand .hero-clean .hero-floating-note,
body.theme-thread-needles-brand .product-card,
body.theme-thread-needles-brand .category-card,
body.theme-thread-needles-brand .review-card,
body.theme-thread-needles-brand .account-card,
body.theme-thread-needles-brand .checkout-card,
body.theme-thread-needles-brand .order-summary,
body.theme-thread-needles-brand .cart-total-card{
border-color:var(--border)!important;
}
body.theme-thread-needles-brand .btn:not(.alt):not(.soft),
body.theme-thread-needles-brand button.primary,
body.theme-thread-needles-brand .add-bag-btn{
background:var(--accent)!important;
border-color:var(--accent)!important;
color:#fff!important;
}
body.theme-thread-needles-brand .btn.soft,
body.theme-thread-needles-brand .review-status.pending{
background:color-mix(in srgb,var(--accent) 9%,#fff)!important;
border-color:color-mix(in srgb,var(--accent) 24%,#fff)!important;
color:var(--accent)!important;
}
body.theme-thread-needles-brand .eyebrow,
body.theme-thread-needles-brand .section-kicker,
body.theme-thread-needles-brand .product-rating,
body.theme-thread-needles-brand .founder-sign span,
body.theme-thread-needles-brand .review-stars{color:var(--accent)!important}
body.theme-thread-needles-brand .review-dots button.active{background:var(--accent)!important}
body.theme-thread-needles-brand .customer-avatar-large{
background:color-mix(in srgb,var(--accent) 11%,#fff)!important;
color:var(--accent)!important;
}
body.theme-thread-needles-brand .site-footer{background:var(--dark)!important}
body.theme-thread-needles-brand input:focus,
body.theme-thread-needles-brand select:focus,
body.theme-thread-needles-brand textarea:focus{
border-color:color-mix(in srgb,var(--accent) 65%,#fff)!important;
box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)!important;
outline:0!important;
}
/* =========================================================
V5.17.6 — COMPACT LIVE EDITOR RESTORE
Restores the original tight production-editor density while
retaining V5.17.5 structural isolation so panels never overlap.
========================================================= */
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-garment-row{
padding:7px 10px!important;
grid-template-columns:94px 68px minmax(0,1fr)!important;
column-gap:9px!important;
row-gap:3px!important;
}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-size-select{gap:3px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-size-select>span,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .same-shirt-qty>span,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-field-title>span{font-size:9px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-size-select select,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .same-shirt-qty input{height:32px!important;padding:0 7px!important;border-radius:7px!important;font-size:10px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .size-chart-btn{height:18px!important;font-size:8px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .same-shirt-qty{gap:3px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-field-title{margin-bottom:3px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-field-title small{font-size:7.5px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-colours{gap:4px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-colours button{width:39px!important;min-width:39px!important;min-height:39px!important;padding:2px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-colours button i{width:21px!important;height:21px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-colours button span{font-size:7px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-stock{font-size:8px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-slot-block{padding:8px 10px 9px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .ps-slot-head{margin-bottom:6px!important;gap:8px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .ps-block-head{gap:7px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .ps-block-head>span{width:30px!important;height:30px!important;min-width:30px!important;border-radius:8px!important;font-size:10px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .ps-block-head b{font-size:12.5px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .ps-block-head small{font-size:8.5px!important;margin-top:1px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 #removeDecoration{font-size:8.5px!important;padding:4px!important}
/* Compact desktop setup: same visual rhythm as the early editor, without shared grid areas. */
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.artwork-mode,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.text-mode,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.preset-mode,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.empty-mode{
gap:6px!important;
align-items:stretch!important;
}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.artwork-mode{
grid-template-columns:minmax(245px,.9fr) minmax(205px,.72fr) minmax(430px,1.55fr)!important;
}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.text-mode,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.preset-mode{
grid-template-columns:minmax(270px,.86fr) minmax(480px,1.6fr)!important;
}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.empty-mode{
grid-template-columns:minmax(270px,520px)!important;
}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175>.personalisation-panel,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175>.artwork-upload-panel,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175>.placement-essentials-v175{
grid-area:auto!important;
grid-column:auto!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
order:initial!important;
}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.artwork-mode>.personalisation-panel{grid-column:1!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.artwork-mode>.artwork-upload-panel{grid-column:2!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.artwork-mode>.placement-essentials-v175{grid-column:3!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.text-mode>.personalisation-panel,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.preset-mode>.personalisation-panel{grid-column:1!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.text-mode>.placement-essentials-v175,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.preset-mode>.placement-essentials-v175{grid-column:2!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.empty-mode>.personalisation-panel{grid-column:1!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-essentials-v175{
grid-template-columns:minmax(0,1.35fr) minmax(205px,.8fr)!important;
gap:6px!important;
}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.empty-mode .placement-essentials-v175{display:none!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-control-panel,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175 .compact-control-panel{
padding:7px!important;
border-radius:8px!important;
min-height:0!important;
}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-mini-label{margin:0 0 4px!important;gap:7px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-mini-label b{font-size:9.5px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-mini-label small{font-size:7.5px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-mode-choice,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-mode-choice:has([data-decoration-mode="preset"]){
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:4px!important;
}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-mode-choice button{
height:32px!important;
padding:0 7px!important;
gap:5px!important;
border-radius:7px!important;
white-space:nowrap!important;
}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-mode-choice button>i{width:20px!important;height:20px!important;min-width:20px!important;border-radius:6px!important;font-size:10px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-mode-choice button span,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-mode-choice button b{font-size:8.5px!important;white-space:nowrap!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-placement-chips{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-placement-chips button{height:32px!important;padding:0 6px!important;border-radius:7px!important;font-size:8.5px!important;white-space:nowrap!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-finished-size,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-top-finished-size{
grid-template-columns:minmax(45px,1fr) 10px minmax(45px,1fr) minmax(62px,72px)!important;
gap:4px!important;
align-items:end!important;
}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-finished-size label,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-top-finished-size label{gap:1px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-finished-size label span,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-top-finished-size label span{font-size:6.8px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-finished-size input,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-finished-size select,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-top-finished-size input,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-top-finished-size select{height:30px!important;padding:0 6px!important;border-radius:6px!important;font-size:8.5px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-finished-size>b,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-top-finished-size>b{padding:0 0 7px!important;font-size:9px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .artwork-upload-panel .compact-file-picker{min-height:31px!important;gap:5px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .artwork-upload-panel .compact-file-picker button{height:30px!important;padding:0 9px!important;border-radius:6px!important;font-size:8px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .artwork-upload-panel .compact-file-picker span{font-size:7px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .artwork-upload-panel .ps-art-status{margin-top:2px!important;font-size:6.5px!important}
/* Mode-specific forms stay dense and aligned. */
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .artwork-action-row.artwork-row2{margin-top:6px!important;gap:6px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .artwork-method-panel{padding:7px!important;border-radius:8px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-methods{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-methods button{height:31px!important;padding:0 7px!important;border-radius:7px!important;font-size:8px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-methods button span b{font-size:7.8px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .artwork-method-panel .ps-line-colours{margin-top:4px!important;padding:4px 6px!important;gap:5px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-form-v17{gap:6px!important;margin-top:6px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-v17-row{gap:6px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-v17-row1{grid-template-columns:minmax(190px,1.25fr) minmax(190px,1.2fr) minmax(92px,.52fr) minmax(96px,.55fr)!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-v17-row2{grid-template-columns:minmax(165px,.9fr) minmax(90px,.5fr) minmax(150px,.8fr) minmax(145px,.75fr)!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-form-v17 .ps-input,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-form-v17 .align-card{gap:3px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-form-v17 .ps-input>span,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-form-v17 .align-card>span{font-size:9px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-form-v17 .ps-input>span small{font-size:6.8px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-form-v17 textarea{height:48px!important;min-height:48px!important;padding:7px 8px!important;border-radius:7px!important;font-size:10px!important;resize:none!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-form-v17 input:not([type=color]),
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-form-v17 select,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .font-picker-button{height:32px!important;padding:0 7px!important;border-radius:7px!important;font-size:9px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .font-live-meta{min-height:15px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 #fontLoadStatus{font-size:6.8px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 #fontLiveSample{font-size:10px!important;max-width:112px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-v17-row2 .align-card>div{gap:3px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-v17-row2 .align-card button{height:32px!important;padding:0 4px!important;border-radius:7px!important;font-size:8px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-v17-fill input[type=color]{height:32px!important;border-radius:7px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-v17-border-grid{gap:3px!important;grid-template-columns:minmax(0,1fr) 42px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-size-number-control{height:32px!important;grid-template-columns:30px minmax(42px,1fr) 25px 30px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-size-number-control button,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-size-number-control input,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-size-number-control>span{height:32px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-design-fields{
grid-template-columns:minmax(310px,1.4fr) minmax(180px,.72fr) minmax(205px,.82fr)!important;
gap:6px!important;
margin-top:6px!important;
}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-design-picker-panel{grid-row:auto!important;grid-column:auto!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-design-picker-panel,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-thread-panel,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-design-text{padding:7px!important;border-radius:8px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-design-picker{gap:5px!important;padding:2px 1px 2px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-design-picker button{flex:0 0 90px!important;width:90px!important;padding:4px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-design-picker img{width:60px!important;height:44px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-design-picker button b{font-size:7.5px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-design-picker button small{font-size:6.3px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-design-text{gap:4px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-design-text b{font-size:9px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-design-text small{font-size:6.5px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-design-text input{height:32px!important;padding:0 7px!important;font-size:9px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-thread-colours{display:flex!important;flex-wrap:wrap!important;gap:4px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-thread-colours button{width:auto!important;min-width:68px!important;height:28px!important;padding:0 7px!important;font-size:7.5px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-thread-colours i{width:14px!important;height:14px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .common-final-note-panel{
margin:6px 0 0!important;
padding:7px!important;
border-radius:8px!important;
grid-template-columns:150px minmax(0,1fr)!important;
gap:7px!important;
}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .common-final-note-panel>span b{font-size:9px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .common-final-note-panel>span small{font-size:6.8px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .common-final-note-panel textarea{height:40px!important;min-height:40px!important;padding:6px 8px!important;border-radius:7px!important;font-size:8.5px!important;resize:none!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .single-line-placement{padding:6px 10px!important;grid-template-columns:125px minmax(0,1fr)!important;gap:7px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .add-placement-label b{font-size:9px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .add-placement-label small{font-size:6.5px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .single-line-placement .ps-add-view{gap:4px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .single-line-placement .ps-add-view button{height:31px!important;padding:0 6px!important;border-radius:7px!important;font-size:8px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-summary summary{padding:8px 10px!important;font-size:9px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-buybar{
min-height:56px!important;
padding:6px 10px!important;
grid-template-columns:minmax(150px,1fr) minmax(220px,290px)!important;
gap:9px!important;
}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-buybar>div span{font-size:7px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-buybar>div b{font-size:16px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-buybar>button{height:40px!important;border-radius:9px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-buybar>button span{font-size:9.5px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-buybar>button b{font-size:10px!important}
/* Compact adaptive states: wrap before anything can collide, but do not create giant vertical cards. */
@container (max-width:1040px){
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.artwork-mode{
grid-template-columns:minmax(245px,1fr) minmax(210px,.86fr)!important;
}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.artwork-mode>.personalisation-panel{grid-column:1!important;grid-row:1!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.artwork-mode>.artwork-upload-panel{grid-column:2!important;grid-row:1!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.artwork-mode>.placement-essentials-v175{grid-column:1/-1!important;grid-row:2!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-v17-row1{grid-template-columns:1.25fr 1.2fr .55fr .58fr!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-v17-row2{grid-template-columns:.9fr .5fr .8fr .75fr!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-design-fields{grid-template-columns:minmax(300px,1.3fr) minmax(190px,.8fr)!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-design-picker-panel{grid-row:1 / span 2!important;grid-column:1!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-design-text{grid-column:2!important;grid-row:1!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-thread-panel{grid-column:2!important;grid-row:2!important}
}
@container (max-width:820px){
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.text-mode,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.preset-mode{grid-template-columns:minmax(235px,.8fr) minmax(0,1.3fr)!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-essentials-v175{grid-template-columns:minmax(0,1.2fr) minmax(180px,.8fr)!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-v17-row1,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-v17-row2{grid-template-columns:1fr 1fr!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-v17-message,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .font-picker-field{grid-column:1/-1!important}
}
@container (max-width:640px){
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.artwork-mode,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.text-mode,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.preset-mode,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175.empty-mode{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175>.personalisation-panel,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175>.artwork-upload-panel,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-setup-v175>.placement-essentials-v175{grid-column:1!important;grid-row:auto!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-essentials-v175{grid-template-columns:1fr 1fr!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-design-fields{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-design-picker-panel,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-design-text,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .preset-thread-panel{grid-column:1!important;grid-row:auto!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .common-final-note-panel{grid-template-columns:1fr!important}
}
@container (max-width:500px){
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .placement-essentials-v175{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-mode-choice,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-mode-choice:has([data-decoration-mode="preset"]){grid-template-columns:repeat(3,minmax(0,1fr))!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-mode-choice button{padding:0 4px!important;gap:3px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-mode-choice button>i{display:none!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-mode-choice button span,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-mode-choice button b{font-size:7.6px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .compact-finished-size,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-top-finished-size{grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr) 62px!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-v17-row1,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-v17-row2{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .text-v17-message,
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .font-picker-field{grid-column:auto!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .single-line-placement{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v175.tn-editor-v176 .sketch-buybar{grid-template-columns:120px minmax(0,1fr)!important}
}
#multiCustomizerForm .tn-editor-v176 [hidden]{display:none!important}
/* =========================================================
V5.17.7 — THREAD & NEEDLES BRAND IDENTITY / AUTO-ACTIVE
Primary sampled brand navy: #3D4061
This layer intentionally scopes visual changes to the brand preset.
========================================================= */
body.theme-thread-needles-brand{
--tn-brand:#3D4061;
--tn-brand-2:#8F93AE;
--tn-brand-dark:#30324D;
--tn-brand-ink:#2B2D3C;
--tn-brand-bg:#F6F6F9;
--tn-brand-soft:#EFF0F5;
--tn-brand-soft-2:#E7E8F0;
--tn-brand-border:#D9DBE6;
background:var(--tn-brand-bg)!important;
color:var(--tn-brand-ink)!important;
}
body.theme-thread-needles-brand .announcement,
body.theme-thread-needles-brand .announcement-bar{
background:var(--tn-brand-dark)!important;
color:#fff!important;
border-color:transparent!important;
}
body.theme-thread-needles-brand .announcement span,
body.theme-thread-needles-brand .announcement b{color:#fff!important}
body.theme-thread-needles-brand .site-header{
background:rgba(255,255,255,.98)!important;
border-bottom:1px solid var(--tn-brand-border)!important;
}
body.theme-thread-needles-brand .brand,
body.theme-thread-needles-brand .brand span,
body.theme-thread-needles-brand .brand i,
body.theme-thread-needles-brand .menu>div>a:hover,
body.theme-thread-needles-brand .menu>a:hover,
body.theme-thread-needles-brand .text-link,
body.theme-thread-needles-brand .eyebrow,
body.theme-thread-needles-brand .section-kicker{
color:var(--tn-brand)!important;
}
body.theme-thread-needles-brand .nav-bag,
body.theme-thread-needles-brand .btn.btn-dark,
body.theme-thread-needles-brand .btn:not(.alt):not(.soft):not(.btn-light),
body.theme-thread-needles-brand button.primary,
body.theme-thread-needles-brand .add-bag-btn{
background:var(--tn-brand)!important;
border-color:var(--tn-brand)!important;
color:#fff!important;
}
body.theme-thread-needles-brand .nav-bag:hover,
body.theme-thread-needles-brand .btn.btn-dark:hover,
body.theme-thread-needles-brand .add-bag-btn:hover{
background:var(--tn-brand-dark)!important;
border-color:var(--tn-brand-dark)!important;
}
body.theme-thread-needles-brand .btn.btn-soft,
body.theme-thread-needles-brand .btn.soft,
body.theme-thread-needles-brand .btn-light{
background:var(--tn-brand-soft)!important;
border-color:var(--tn-brand-border)!important;
color:var(--tn-brand)!important;
}
body.theme-thread-needles-brand .btn.btn-soft:hover,
body.theme-thread-needles-brand .btn.soft:hover,
body.theme-thread-needles-brand .btn-light:hover{
background:var(--tn-brand-soft-2)!important;
border-color:var(--tn-brand-2)!important;
}
body.theme-thread-needles-brand .hero-clean{
background:linear-gradient(180deg,#fff 0%,var(--tn-brand-bg) 100%)!important;
--slide-accent:var(--tn-brand)!important;
}
body.theme-thread-needles-brand .hero-accent-blob{
background:color-mix(in srgb,var(--tn-brand) 12%,#fff)!important;
}
body.theme-thread-needles-brand .hero-floating-note,
body.theme-thread-needles-brand .hero-main-media,
body.theme-thread-needles-brand .hero-secondary-media{
border-color:var(--tn-brand-border)!important;
}
body.theme-thread-needles-brand .hero-dot.is-active,
body.theme-thread-needles-brand .review-dots button.active{
background:var(--tn-brand)!important;
}
body.theme-thread-needles-brand .hero-arrow:hover{
color:#fff!important;
background:var(--tn-brand)!important;
border-color:var(--tn-brand)!important;
}
body.theme-thread-needles-brand .quick-trust,
body.theme-thread-needles-brand .animal-section,
body.theme-thread-needles-brand .soft-section,
body.theme-thread-needles-brand .easy-section,
body.theme-thread-needles-brand .reviews-section{
background:var(--tn-brand-soft)!important;
}
body.theme-thread-needles-brand .white-section,
body.theme-thread-needles-brand .founder-section,
body.theme-thread-needles-brand .social-section{
background:#fff!important;
}
body.theme-thread-needles-brand .product-card,
body.theme-thread-needles-brand .category-product-card,
body.theme-thread-needles-brand .animal-card,
body.theme-thread-needles-brand .review-card,
body.theme-thread-needles-brand .account-card,
body.theme-thread-needles-brand .checkout-card,
body.theme-thread-needles-brand .order-summary,
body.theme-thread-needles-brand .cart-total-card,
body.theme-thread-needles-brand .easy-links>a,
body.theme-thread-needles-brand .social-panel{
border-color:var(--tn-brand-border)!important;
}
body.theme-thread-needles-brand .product-card:hover,
body.theme-thread-needles-brand .category-product-card:hover,
body.theme-thread-needles-brand .animal-card:hover{
border-color:color-mix(in srgb,var(--tn-brand) 45%,var(--tn-brand-border))!important;
}
/* Re-map the old pastel homepage blocks into one coherent brand family. */
body.theme-thread-needles-brand .art-rose,
body.theme-thread-needles-brand .art-peach{background:#F0EDF2!important}
body.theme-thread-needles-brand .art-sage,
body.theme-thread-needles-brand .art-cream{background:#F2F2F6!important}
body.theme-thread-needles-brand .art-lilac,
body.theme-thread-needles-brand .art-blue{background:#E9EAF2!important}
body.theme-thread-needles-brand .tile-cream,
body.theme-thread-needles-brand .tile-peach{background:#F2F1F5!important}
body.theme-thread-needles-brand .tile-sage{background:#E9EAF1!important}
body.theme-thread-needles-brand .tile-dark{background:var(--tn-brand-dark)!important;color:#fff!important}
body.theme-thread-needles-brand .tile-dark b,
body.theme-thread-needles-brand .tile-dark small{color:#fff!important}
body.theme-thread-needles-brand .portrait-story{
background:var(--tn-brand-dark)!important;
}
body.theme-thread-needles-brand .portrait-story .eyebrow,
body.theme-thread-needles-brand .portrait-story h2,
body.theme-thread-needles-brand .portrait-story p{color:#fff!important}
body.theme-thread-needles-brand .review-stars,
body.theme-thread-needles-brand .product-rating,
body.theme-thread-needles-brand .founder-sign span{color:var(--tn-brand)!important}
body.theme-thread-needles-brand .verified-pill,
body.theme-thread-needles-brand .customer-avatar-large{
background:var(--tn-brand-soft)!important;
color:var(--tn-brand)!important;
border-color:var(--tn-brand-border)!important;
}
body.theme-thread-needles-brand input:focus,
body.theme-thread-needles-brand select:focus,
body.theme-thread-needles-brand textarea:focus{
border-color:var(--tn-brand)!important;
box-shadow:0 0 0 3px color-mix(in srgb,var(--tn-brand) 11%,transparent)!important;
outline:0!important;
}
body.theme-thread-needles-brand .site-footer{
background:var(--tn-brand-dark)!important;
color:#fff!important;
}
body.theme-thread-needles-brand .site-footer a,
body.theme-thread-needles-brand .site-footer p,
body.theme-thread-needles-brand .site-footer small,
body.theme-thread-needles-brand .site-footer b,
body.theme-thread-needles-brand .site-footer h3,
body.theme-thread-needles-brand .site-footer h4{color:#fff!important}
/* Customer customizer inherits the brand instead of the legacy teal. */
body.theme-thread-needles-brand.customizer-page-mode .tn-editor-v175 .view-tab.active,
body.theme-thread-needles-brand.customizer-page-mode .tn-editor-v175 [data-decoration-mode].active,
body.theme-thread-needles-brand.customizer-page-mode .tn-editor-v175 .preset-design-picker button.active,
body.theme-thread-needles-brand.customizer-page-mode .tn-editor-v175 .preset-thread-colours button.active{
border-color:var(--tn-brand)!important;
color:var(--tn-brand)!important;
box-shadow:inset 0 0 0 1px var(--tn-brand)!important;
}
body.theme-thread-needles-brand.customizer-page-mode .tn-editor-v175 .view-tab.active,
body.theme-thread-needles-brand.customizer-page-mode .tn-editor-v175 [data-decoration-mode].active{
background:var(--tn-brand-soft)!important;
}
body.theme-thread-needles-brand.customizer-page-mode .tn-editor-v175 .ps-block-head>span{
background:var(--tn-brand)!important;
color:#fff!important;
}
/* =========================================================
V5.17.8 — THREAD & NEEDLES FORCED BRAND IDENTITY
Live-safe visual lock. Does not depend on DB theme values.
Customer identity sampled from supplied logo: #3D4061.
========================================================= */
:root{
--tn-brand:#3D4061;
--tn-brand-2:#8F93AE;
--tn-brand-dark:#30324D;
--tn-brand-ink:#2B2D3C;
--tn-brand-bg:#F6F6F9;
--tn-brand-surface:#FFFFFF;
--tn-brand-soft:#EFF0F5;
--tn-brand-soft-2:#E7E8F0;
--tn-brand-border:#D9DBE6;
}
body.theme-thread-needles-brand{
--bg:var(--tn-brand-bg)!important;
--surface:var(--tn-brand-surface)!important;
--text:var(--tn-brand-ink)!important;
--accent:var(--tn-brand)!important;
--accent2:var(--tn-brand-2)!important;
--dark:var(--tn-brand-dark)!important;
--border:var(--tn-brand-border)!important;
background:var(--tn-brand-bg)!important;
color:var(--tn-brand-ink)!important;
}
body.theme-thread-needles-brand .announcement,
body.theme-thread-needles-brand .announcement-bar{
background:var(--tn-brand-dark)!important;color:#fff!important;border-color:var(--tn-brand-dark)!important;
}
body.theme-thread-needles-brand .site-header{background:#fff!important;border-color:var(--tn-brand-border)!important}
body.theme-thread-needles-brand .brand,
body.theme-thread-needles-brand .brand span,
body.theme-thread-needles-brand .brand i,
body.theme-thread-needles-brand .menu a:hover,
body.theme-thread-needles-brand .text-link,
body.theme-thread-needles-brand .eyebrow,
body.theme-thread-needles-brand .section-kicker{color:var(--tn-brand)!important}
body.theme-thread-needles-brand .nav-bag,
body.theme-thread-needles-brand .btn:not(.alt):not(.soft):not(.btn-light),
body.theme-thread-needles-brand button.primary,
body.theme-thread-needles-brand .add-bag-btn,
body.theme-thread-needles-brand .checkout-submit,
body.theme-thread-needles-brand .place-order-btn{
background:var(--tn-brand)!important;border-color:var(--tn-brand)!important;color:#fff!important;
}
body.theme-thread-needles-brand .nav-bag:hover,
body.theme-thread-needles-brand .btn:not(.alt):not(.soft):not(.btn-light):hover,
body.theme-thread-needles-brand .add-bag-btn:hover{background:var(--tn-brand-dark)!important;border-color:var(--tn-brand-dark)!important}
body.theme-thread-needles-brand .btn.alt,
body.theme-thread-needles-brand .btn.soft,
body.theme-thread-needles-brand .btn-light{
background:var(--tn-brand-soft)!important;border-color:var(--tn-brand-border)!important;color:var(--tn-brand)!important;
}
body.theme-thread-needles-brand .hero-clean{--slide-accent:var(--tn-brand)!important;background:linear-gradient(135deg,#fff 0%,#F3F3F8 100%)!important}
body.theme-thread-needles-brand .hero-accent-blob{background:color-mix(in srgb,var(--tn-brand) 13%,#fff)!important}
body.theme-thread-needles-brand .hero-dot.is-active,
body.theme-thread-needles-brand .review-dots button.active{background:var(--tn-brand)!important}
body.theme-thread-needles-brand .quick-trust,
body.theme-thread-needles-brand .animal-section,
body.theme-thread-needles-brand .soft-section,
body.theme-thread-needles-brand .easy-section,
body.theme-thread-needles-brand .reviews-section{background:var(--tn-brand-soft)!important}
body.theme-thread-needles-brand .white-section,
body.theme-thread-needles-brand .founder-section,
body.theme-thread-needles-brand .social-section{background:#fff!important}
body.theme-thread-needles-brand .product-card,
body.theme-thread-needles-brand .category-product-card,
body.theme-thread-needles-brand .animal-card,
body.theme-thread-needles-brand .review-card,
body.theme-thread-needles-brand .account-card,
body.theme-thread-needles-brand .checkout-card,
body.theme-thread-needles-brand .order-summary,
body.theme-thread-needles-brand .cart-total-card,
body.theme-thread-needles-brand .social-panel{
background:#fff!important;border-color:var(--tn-brand-border)!important;
}
body.theme-thread-needles-brand .product-card:hover,
body.theme-thread-needles-brand .category-product-card:hover,
body.theme-thread-needles-brand .animal-card:hover{border-color:color-mix(in srgb,var(--tn-brand) 45%,#fff)!important}
body.theme-thread-needles-brand .art-rose,
body.theme-thread-needles-brand .art-peach,
body.theme-thread-needles-brand .tile-cream,
body.theme-thread-needles-brand .tile-peach{background:#F0EFF5!important}
body.theme-thread-needles-brand .art-sage,
body.theme-thread-needles-brand .art-cream,
body.theme-thread-needles-brand .tile-sage{background:#E8E9F0!important}
body.theme-thread-needles-brand .art-lilac,
body.theme-thread-needles-brand .art-blue{background:#E3E5EF!important}
body.theme-thread-needles-brand .tile-dark,
body.theme-thread-needles-brand .portrait-story,
body.theme-thread-needles-brand .site-footer{background:var(--tn-brand-dark)!important;color:#fff!important}
body.theme-thread-needles-brand .site-footer a,
body.theme-thread-needles-brand .site-footer p,
body.theme-thread-needles-brand .site-footer small,
body.theme-thread-needles-brand .site-footer b,
body.theme-thread-needles-brand .site-footer h3,
body.theme-thread-needles-brand .site-footer h4{color:#fff!important}
body.theme-thread-needles-brand input:focus,
body.theme-thread-needles-brand select:focus,
body.theme-thread-needles-brand textarea:focus{border-color:var(--tn-brand)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--tn-brand) 11%,transparent)!important}
/* Customer live editor — replace old gold/rose/teal state colours with the brand navy. */
body.theme-thread-needles-brand.customizer-page-mode .tn-editor-v175 .view-tab.active,
body.theme-thread-needles-brand.customizer-page-mode .tn-editor-v175 [data-decoration-mode].active,
body.theme-thread-needles-brand.customizer-page-mode .tn-editor-v175 .placement-btn.active,
body.theme-thread-needles-brand.customizer-page-mode .tn-editor-v175 .preset-design-picker button.active,
body.theme-thread-needles-brand.customizer-page-mode .tn-editor-v175 .preset-thread-colours button.active,
body.theme-thread-needles-brand.customizer-page-mode .tn-editor-v175 .colour-swatch.active,
body.theme-thread-needles-brand.customizer-page-mode .tn-editor-v175 .color-swatch.active{
border-color:var(--tn-brand)!important;
box-shadow:inset 0 0 0 1px var(--tn-brand)!important;
background:color-mix(in srgb,var(--tn-brand) 8%,#fff)!important;
color:var(--tn-brand)!important;
}
body.theme-thread-needles-brand.customizer-page-mode .tn-editor-v175 .add-bag-btn,
body.theme-thread-needles-brand.customizer-page-mode .customizer-sticky-total .add-bag-btn{
background:var(--tn-brand)!important;border-color:var(--tn-brand)!important;color:#fff!important;
}
body.theme-thread-needles-brand.customizer-page-mode .customizer-sticky-total,
body.theme-thread-needles-brand.customizer-page-mode .editor-total-bar{background:#F3F3F8!important;border-color:var(--tn-brand-border)!important}
/* =========================================================
V5.17.13 SHOP YOUR WAY — UNIFORM CARD FRAME
========================================================= */
.white-section[data-home-section="shop_by_product"] .category-art{
border-width:var(--shop-card-border-width,1px) !important;
border-style:solid !important;
border-color:var(--border) !important;
border-radius:var(--shop-card-radius,22px) !important;
padding:10px;
background:#F4F5F9 !important;
box-shadow:0 6px 18px rgba(48,50,77,.05);
}
.white-section[data-home-section="shop_by_product"] .category-art.art-dark{
background:var(--dark) !important;
border-color:var(--dark) !important;
}
.white-section[data-home-section="shop_by_product"] .category-art img{
width:100% !important;
height:100% !important;
object-fit:contain !important;
border-radius:max(6px,calc(var(--shop-card-radius,22px) - 8px));
background:#fff;
overflow:hidden;
}
.white-section[data-home-section="shop_by_product"] .category-product-card:hover .category-art{
border-color:var(--primary,var(--dark)) !important;
}
@media(max-width:700px){
.white-section[data-home-section="shop_by_product"] .category-art{padding:7px}
}
/* =========================================================
V5.17.15 PET PORTRAIT PROCESS — EDITABLE PREMIUM STEPS
========================================================= */
[data-home-section="pet_story"] .portrait-story{
grid-template-columns:minmax(230px,.82fr) minmax(0,2.18fr);
gap:34px;
padding:34px;
}
[data-home-section="pet_story"] .portrait-story-copy{min-width:0}
[data-home-section="pet_story"] .portrait-story-copy p{line-height:1.6;max-width:340px;margin:0 0 20px}
[data-home-section="pet_story"] .portrait-steps{gap:12px;min-width:0}
[data-home-section="pet_story"] .portrait-step-card{min-width:0;text-align:center;position:relative}
[data-home-section="pet_story"] .portrait-step-media{
aspect-ratio:1/1;
width:100%;
background:#fff;
border:1px solid rgba(255,255,255,.2);
border-radius:22px;
overflow:hidden;
display:grid;
place-items:center;
box-shadow:0 12px 28px rgba(15,17,38,.14);
}
[data-home-section="pet_story"] .portrait-step-media img{width:100%;height:100%;object-fit:cover;display:block}
[data-home-section="pet_story"] .portrait-step-media .portrait-step-fallback{width:100%;height:100%;display:grid;place-items:center;color:#30324D;font-size:58px;background:#fff}
[data-home-section="pet_story"] .portrait-step-card>span{
position:absolute;z-index:2;left:10px;top:10px;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#3D4061;color:#fff;font-size:10px;font-weight:800;border:2px solid #fff
}
[data-home-section="pet_story"] .portrait-step-card>b{display:block;font-size:11px;margin-top:9px;color:#fff}
[data-home-section="pet_story"] .portrait-steps>em{font-style:normal;color:#cfd1df;font-size:22px}
@media(max-width:900px){
[data-home-section="pet_story"] .portrait-story{grid-template-columns:1fr;padding:28px}
[data-home-section="pet_story"] .portrait-story-copy{text-align:center}
[data-home-section="pet_story"] .portrait-story-copy p{margin-left:auto;margin-right:auto}
}
@media(max-width:620px){
[data-home-section="pet_story"] .portrait-story{padding:22px 16px}
[data-home-section="pet_story"] .portrait-steps{grid-template-columns:1fr;gap:10px}
[data-home-section="pet_story"] .portrait-steps>em{transform:rotate(90deg)}
[data-home-section="pet_story"] .portrait-step-media{max-width:320px;margin:auto}
}
/* =========================================================
V5.17.16 EDITABLE MAKE-IT-YOURS CARDS
========================================================= */
.personalise-custom-card{background:var(--personalise-card-bg,#f1f1f6)!important;overflow:hidden;position:relative}
.personalise-custom-card .personalise-visual{height:150px;display:grid;place-items:center;margin:-2px -2px 20px;overflow:hidden;border-radius:16px}
.personalise-custom-card .personalise-visual img{width:100%;height:100%;object-fit:cover;display:block;border-radius:16px}
.personalise-custom-card .personalise-visual span{font:500 clamp(34px,3.2vw,54px)/1 var(--font-heading);white-space:normal;text-align:center;padding:12px}
.personalise-custom-card.is-dark-card{color:#fff}
.personalise-custom-card.is-dark-card small{color:#fff!important;opacity:.9}
@media(max-width:900px){.personalise-custom-card .personalise-visual{height:132px}}
@media(max-width:600px){.personalise-custom-card .personalise-visual{height:120px;margin-bottom:14px}.personalise-custom-card .personalise-visual span{font-size:36px}}
/* =========================================================
V5.17.17 MAKE-IT-YOURS FULL IMAGE / NO CROP
========================================================= */
[data-home-section="personalise"] .personalise-grid{
align-items:stretch;
}
[data-home-section="personalise"] .personalise-custom-card{
min-height:0!important;
padding:14px!important;
justify-content:flex-start!important;
}
[data-home-section="personalise"] .personalise-custom-card .personalise-visual{
position:relative!important;
top:auto!important;
left:auto!important;
right:auto!important;
width:100%!important;
height:auto!important;
aspect-ratio:1 / 1!important;
margin:0 0 14px!important;
border-radius:18px!important;
overflow:hidden!important;
display:grid!important;
place-items:center!important;
background:#E7EBF8!important;
}
[data-home-section="personalise"] .personalise-custom-card .personalise-visual img{
width:100%!important;
height:100%!important;
max-width:none!important;
object-fit:contain!important;
object-position:center center!important;
border-radius:18px!important;
display:block!important;
}
[data-home-section="personalise"] .personalise-custom-card .personalise-visual span{
position:static!important;
display:grid!important;
place-items:center!important;
width:100%!important;
height:100%!important;
padding:18px!important;
}
[data-home-section="personalise"] .personalise-custom-card>b{
margin-top:auto;
}
@media(max-width:900px){
[data-home-section="personalise"] .personalise-custom-card .personalise-visual{
height:auto!important;
aspect-ratio:1 / 1!important;
}
}
@media(max-width:600px){
[data-home-section="personalise"] .personalise-custom-card{
padding:11px!important;
}
[data-home-section="personalise"] .personalise-custom-card .personalise-visual{
height:auto!important;
aspect-ratio:1 / 1!important;
margin-bottom:11px!important;
border-radius:14px!important;
}
[data-home-section="personalise"] .personalise-custom-card .personalise-visual img{
border-radius:14px!important;
}
}
/* =========================================================
V5.17.18 LIVE EDITOR — #E7EBF8 BRAND THEME
Visual-only override. Keeps V5.17.6 compact/no-overlap layout intact.
========================================================= */
body.customizer-page-mode .tn-editor-v175,
body.customizer-page-mode .tn-editor-v176{
--le-bg:#E7EBF8;
--le-surface:#F6F8FE;
--le-surface-2:#EEF2FB;
--le-active:#D5DDF4;
--le-active-2:#C8D3F1;
--le-border:#C8D1EB;
--le-border-strong:#AEBBDD;
--le-navy:#3D4061;
--le-text:#2B2D3C;
--le-muted:#6E7691;
--le-danger:#A55353;
color:var(--le-text)!important;
}
/* Main editor shells */
body.customizer-page-mode .tn-editor-v175 .sketch-preview,
body.customizer-page-mode .tn-editor-v175 .sketch-controls,
body.customizer-page-mode .tn-editor-v176 .sketch-preview,
body.customizer-page-mode .tn-editor-v176 .sketch-controls{
background:var(--le-bg)!important;
border-color:var(--le-border)!important;
box-shadow:0 8px 24px rgba(61,64,97,.08)!important;
}
/* Preview top/bottom bars + editor header */
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar,
body.customizer-page-mode .tn-editor-v175 .sketch-preview-actions,
body.customizer-page-mode .tn-editor-v175 .sketch-editor-head,
body.customizer-page-mode .tn-editor-v175 .sketch-item-tabs,
body.customizer-page-mode .tn-editor-v176 .sketch-viewbar,
body.customizer-page-mode .tn-editor-v176 .sketch-preview-actions,
body.customizer-page-mode .tn-editor-v176 .sketch-editor-head,
body.customizer-page-mode .tn-editor-v176 .sketch-item-tabs{
background:var(--le-bg)!important;
border-color:var(--le-border)!important;
}
/* Garment preview stage */
body.customizer-page-mode .tn-editor-v175 .sketch-stage,
body.customizer-page-mode .tn-editor-v176 .sketch-stage{
background:radial-gradient(circle at 50% 43%,#fff 0 50%,#F6F8FE 72%,#E7EBF8 100%)!important;
}
/* Scroll/control area */
body.customizer-page-mode .tn-editor-v175 .sketch-scroll,
body.customizer-page-mode .tn-editor-v176 .sketch-scroll{
background:var(--le-surface)!important;
}
/* Major rows/blocks */
body.customizer-page-mode .tn-editor-v175 .sketch-garment-row,
body.customizer-page-mode .tn-editor-v175 .sketch-slot-block,
body.customizer-page-mode .tn-editor-v175 .single-line-placement,
body.customizer-page-mode .tn-editor-v175 .sketch-summary,
body.customizer-page-mode .tn-editor-v176 .sketch-garment-row,
body.customizer-page-mode .tn-editor-v176 .sketch-slot-block,
body.customizer-page-mode .tn-editor-v176 .single-line-placement,
body.customizer-page-mode .tn-editor-v176 .sketch-summary{
background:var(--le-surface)!important;
border-color:var(--le-border)!important;
}
/* Compact control cards */
body.customizer-page-mode .tn-editor-v175 .compact-control-panel,
body.customizer-page-mode .tn-editor-v175 .artwork-method-panel,
body.customizer-page-mode .tn-editor-v175 .preset-design-picker-panel,
body.customizer-page-mode .tn-editor-v175 .preset-thread-panel,
body.customizer-page-mode .tn-editor-v175 .preset-design-text,
body.customizer-page-mode .tn-editor-v175 .common-final-note-panel,
body.customizer-page-mode .tn-editor-v176 .compact-control-panel,
body.customizer-page-mode .tn-editor-v176 .artwork-method-panel,
body.customizer-page-mode .tn-editor-v176 .preset-design-picker-panel,
body.customizer-page-mode .tn-editor-v176 .preset-thread-panel,
body.customizer-page-mode .tn-editor-v176 .preset-design-text,
body.customizer-page-mode .tn-editor-v176 .common-final-note-panel{
background:var(--le-surface-2)!important;
border-color:var(--le-border)!important;
}
/* Inputs */
body.customizer-page-mode .tn-editor-v175 input,
body.customizer-page-mode .tn-editor-v175 select,
body.customizer-page-mode .tn-editor-v175 textarea,
body.customizer-page-mode .tn-editor-v176 input,
body.customizer-page-mode .tn-editor-v176 select,
body.customizer-page-mode .tn-editor-v176 textarea{
background:#fff!important;
border-color:var(--le-border)!important;
color:var(--le-text)!important;
}
body.customizer-page-mode .tn-editor-v175 input:focus,
body.customizer-page-mode .tn-editor-v175 select:focus,
body.customizer-page-mode .tn-editor-v175 textarea:focus,
body.customizer-page-mode .tn-editor-v176 input:focus,
body.customizer-page-mode .tn-editor-v176 select:focus,
body.customizer-page-mode .tn-editor-v176 textarea:focus{
border-color:var(--le-navy)!important;
box-shadow:0 0 0 3px rgba(61,64,97,.10)!important;
outline:none!important;
}
/* Standard buttons/chips */
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar .ps-view-tabs button,
body.customizer-page-mode .tn-editor-v175 .sketch-preview-actions button,
body.customizer-page-mode .tn-editor-v175 .sketch-head-btn,
body.customizer-page-mode .tn-editor-v175 .compact-mode-choice button,
body.customizer-page-mode .tn-editor-v175 .compact-placement-chips button,
body.customizer-page-mode .tn-editor-v175 .compact-methods button,
body.customizer-page-mode .tn-editor-v175 .single-line-placement .ps-add-view button,
body.customizer-page-mode .tn-editor-v176 .sketch-viewbar .ps-view-tabs button,
body.customizer-page-mode .tn-editor-v176 .sketch-preview-actions button,
body.customizer-page-mode .tn-editor-v176 .sketch-head-btn,
body.customizer-page-mode .tn-editor-v176 .compact-mode-choice button,
body.customizer-page-mode .tn-editor-v176 .compact-placement-chips button,
body.customizer-page-mode .tn-editor-v176 .compact-methods button,
body.customizer-page-mode .tn-editor-v176 .single-line-placement .ps-add-view button{
background:#fff!important;
border-color:var(--le-border)!important;
color:var(--le-text)!important;
}
/* Selected / configured states */
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar .ps-view-tabs button.active,
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar .ps-view-tabs button.configured:not(.active),
body.customizer-page-mode .tn-editor-v175 [data-decoration-mode].active,
body.customizer-page-mode .tn-editor-v175 .compact-mode-choice button.active,
body.customizer-page-mode .tn-editor-v175 .placement-btn.active,
body.customizer-page-mode .tn-editor-v175 .compact-placement-chips button.active,
body.customizer-page-mode .tn-editor-v175 .preset-design-picker button.active,
body.customizer-page-mode .tn-editor-v175 .preset-thread-colours button.active,
body.customizer-page-mode .tn-editor-v175 .colour-swatch.active,
body.customizer-page-mode .tn-editor-v175 .color-swatch.active,
body.customizer-page-mode .tn-editor-v176 .sketch-viewbar .ps-view-tabs button.active,
body.customizer-page-mode .tn-editor-v176 .sketch-viewbar .ps-view-tabs button.configured:not(.active),
body.customizer-page-mode .tn-editor-v176 [data-decoration-mode].active,
body.customizer-page-mode .tn-editor-v176 .compact-mode-choice button.active,
body.customizer-page-mode .tn-editor-v176 .placement-btn.active,
body.customizer-page-mode .tn-editor-v176 .compact-placement-chips button.active,
body.customizer-page-mode .tn-editor-v176 .preset-design-picker button.active,
body.customizer-page-mode .tn-editor-v176 .preset-thread-colours button.active,
body.customizer-page-mode .tn-editor-v176 .colour-swatch.active,
body.customizer-page-mode .tn-editor-v176 .color-swatch.active{
background:var(--le-active)!important;
border-color:var(--le-navy)!important;
color:var(--le-navy)!important;
box-shadow:inset 0 0 0 1px rgba(61,64,97,.10)!important;
}
/* Small badges / item number / icon tiles */
body.customizer-page-mode .tn-editor-v175 .sketch-item-id>span,
body.customizer-page-mode .tn-editor-v175 .ps-block-head>span,
body.customizer-page-mode .tn-editor-v175 .sketch-viewbar .ps-view-tabs button>i,
body.customizer-page-mode .tn-editor-v176 .sketch-item-id>span,
body.customizer-page-mode .tn-editor-v176 .ps-block-head>span,
body.customizer-page-mode .tn-editor-v176 .sketch-viewbar .ps-view-tabs button>i{
background:var(--le-active)!important;
color:var(--le-navy)!important;
}
/* Add shirt + file upload */
body.customizer-page-mode .tn-editor-v175 .sketch-head-btn.add,
body.customizer-page-mode .tn-editor-v175 .artwork-upload-panel .compact-file-picker button,
body.customizer-page-mode .tn-editor-v176 .sketch-head-btn.add,
body.customizer-page-mode .tn-editor-v176 .artwork-upload-panel .compact-file-picker button{
background:var(--le-active-2)!important;
border-color:var(--le-border-strong)!important;
color:var(--le-navy)!important;
}
/* Price chip */
body.customizer-page-mode .tn-editor-v175 .sketch-head-price,
body.customizer-page-mode .tn-editor-v176 .sketch-head-price{
background:#DDE4F6!important;
border-color:var(--le-border)!important;
}
body.customizer-page-mode .tn-editor-v175 .sketch-head-price b,
body.customizer-page-mode .tn-editor-v176 .sketch-head-price b{color:var(--le-navy)!important}
/* Typography */
body.customizer-page-mode .tn-editor-v175 .sketch-product-name b,
body.customizer-page-mode .tn-editor-v175 .ps-block-head b,
body.customizer-page-mode .tn-editor-v175 .sketch-mini-label b,
body.customizer-page-mode .tn-editor-v175 .sketch-size-select>span,
body.customizer-page-mode .tn-editor-v175 .same-shirt-qty>span,
body.customizer-page-mode .tn-editor-v175 .sketch-field-title>span,
body.customizer-page-mode .tn-editor-v176 .sketch-product-name b,
body.customizer-page-mode .tn-editor-v176 .ps-block-head b,
body.customizer-page-mode .tn-editor-v176 .sketch-mini-label b,
body.customizer-page-mode .tn-editor-v176 .sketch-size-select>span,
body.customizer-page-mode .tn-editor-v176 .same-shirt-qty>span,
body.customizer-page-mode .tn-editor-v176 .sketch-field-title>span{
color:var(--le-text)!important;
}
body.customizer-page-mode .tn-editor-v175 small,
body.customizer-page-mode .tn-editor-v175 .ps-art-status,
body.customizer-page-mode .tn-editor-v176 small,
body.customizer-page-mode .tn-editor-v176 .ps-art-status{
color:var(--le-muted)!important;
}
body.customizer-page-mode .tn-editor-v175 #removeDecoration,
body.customizer-page-mode .tn-editor-v176 #removeDecoration{color:var(--le-danger)!important}
/* Sticky total / checkout bar */
body.customizer-page-mode .tn-editor-v175 .sketch-buybar,
body.customizer-page-mode .customizer-sticky-total,
body.customizer-page-mode .editor-total-bar,
body.customizer-page-mode .tn-editor-v176 .sketch-buybar{
background:var(--le-bg)!important;
border-color:var(--le-border)!important;
}
body.customizer-page-mode .tn-editor-v175 .sketch-buybar>button,
body.customizer-page-mode .tn-editor-v176 .sketch-buybar>button,
body.customizer-page-mode .customizer-sticky-total .add-bag-btn,
body.customizer-page-mode .tn-editor-v175 .add-bag-btn,
body.customizer-page-mode .tn-editor-v176 .add-bag-btn{
background:var(--le-navy)!important;
border-color:var(--le-navy)!important;
color:#fff!important;
}
body.customizer-page-mode .tn-editor-v175 .sketch-buybar>button b,
body.customizer-page-mode .tn-editor-v175 .sketch-buybar>button span,
body.customizer-page-mode .tn-editor-v176 .sketch-buybar>button b,
body.customizer-page-mode .tn-editor-v176 .sketch-buybar>button span{color:#fff!important}
/* Scrollbar stays subtle and on-brand. */
body.customizer-page-mode .tn-editor-v175 .sketch-scroll,
body.customizer-page-mode .tn-editor-v176 .sketch-scroll{scrollbar-color:#AEBBDD #EEF2FB!important}
/* V5.17.21 — selected colour reference preview (editor base image remains fixed) */
.colour-reference-preview{display:grid;grid-template-columns:64px minmax(0,1fr);gap:9px;align-items:center;margin-top:8px;padding:8px;border:1px solid #cfd7ee;border-radius:12px;background:#f7f9ff;max-width:330px}
.colour-reference-preview[hidden]{display:none!important}
.colour-reference-preview img{width:64px;height:64px;object-fit:contain;border-radius:9px;background:#fff;border:1px solid #dfe4f0}
.colour-reference-preview div{min-width:0}.colour-reference-preview small{display:block;color:#7a8194;font-size:10px}.colour-reference-preview b{display:block;color:#30354d;margin:2px 0}.colour-reference-preview span{display:block;color:#6f7689;font-size:10px;line-height:1.3}
@media(max-width:700px){.colour-reference-preview{max-width:none}}
/* V5.17.22 — smooth editor scroll handoff + product size chart copy */
.sketch-editor-head button[hidden]{display:none!important}
.size-chart-description{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:#F6F7FC;color:#4E556B;font-size:13px;line-height:1.55}
/* V5.17.23 — visible item delete action */
.sketch-editor-head .remove-item-btn{border-color:#d9a6a6!important;color:#8f3434!important;background:#fff7f7!important}
.sketch-editor-head .remove-item-btn:hover{background:#fdeaea!important;border-color:#c97f7f!important}
@media(max-width:760px){.sketch-editor-head .remove-item-btn{order:8}}
/* V5.17.32 recent orders carousel */
.recent-makes-carousel{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr) 46px;gap:12px;align-items:center}
.recent-makes-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 10px}.recent-makes-track::-webkit-scrollbar{display:none}
.recent-make-card{flex:0 0 clamp(210px,24vw,300px);margin:0;scroll-snap-align:start;border:1px solid #D8DDEA;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 8px 24px rgba(48,50,77,.06)}
.recent-make-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#E7EBF8}.recent-make-card figcaption{padding:11px 13px;font-weight:800;color:#30324D}
@media(max-width:700px){.recent-makes-carousel{grid-template-columns:36px minmax(0,1fr) 36px;gap:5px}.recent-make-card{flex-basis:78%}}
/* V5.17.33 — final storefront alignment + clean header bag */
body.theme-thread-needles-brand .nav-bag{
background:#fff!important;
color:var(--tn-brand)!important;
border:1px solid var(--tn-brand-border)!important;
border-radius:8px!important;
padding:6px 8px!important;
}
body.theme-thread-needles-brand .nav-bag:hover{background:#F7F8FC!important;border-color:#BFC5D8!important;color:var(--tn-brand-dark)!important}
body.theme-thread-needles-brand .nav-bag .count,
body.theme-thread-needles-brand .nav-bag .bag-count{background:#E7EBF8!important;color:#30324D!important}
/* Keep the two visual navigation sections genuinely centred even with an odd number of cards. */
.category-product-grid{
display:flex!important;
flex-wrap:wrap!important;
justify-content:center!important;
align-items:flex-start!important;
gap:16px!important;
max-width:1240px!important;
margin-inline:auto!important;
}
.category-product-grid .category-product-card{flex:0 1 155px!important;max-width:165px!important;width:100%!important}
.animal-grid{
display:flex!important;
flex-wrap:wrap!important;
justify-content:center!important;
align-items:flex-start!important;
gap:24px!important;
max-width:1240px!important;
margin-inline:auto!important;
}
.animal-grid .animal-card{flex:0 1 210px!important;max-width:230px!important;width:100%!important}
@media(max-width:700px){.category-product-grid .category-product-card{flex-basis:calc(50% - 10px)!important;max-width:none!important}.animal-grid .animal-card{flex-basis:calc(50% - 12px)!important;max-width:none!important}}
/* Offline background-removal controls live beside the customer's artwork picker. */
.background-remove-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:7px}
.background-remove-tools button{border:1px solid #C8D0E6;background:#fff;color:#30324D;border-radius:7px;padding:7px 10px;font-size:8px;font-weight:800;cursor:pointer}
.background-remove-tools button.primary{background:#E7EBF8;color:#30324D;border-color:#BFC9E4}
.background-remove-tools button:disabled{opacity:.45;cursor:not-allowed}
.background-remove-tools small{font-size:7px;color:#6E7488;line-height:1.35}
/* Text/design previews must never visibly overflow the production placement frame. */
.ps-text-layer{overflow:hidden!important;overflow-wrap:anywhere!important;word-break:break-word!important;box-sizing:border-box!important}
.ps-art-layer{transform-origin:center center!important}
/* V5.17.35 — product-title typography + Recent Work category tabs + preset live text */
.product-info h3,.store-product-info h2,.basic-product-buy h1,.custom-product-intro h1{
font-family:"Google Sans","Inter","Segoe UI",Arial,sans-serif!important;
font-weight:650!important;letter-spacing:-.015em!important;
}
.recent-makes-section .container{min-width:0}
.recent-work-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;scrollbar-width:none}.recent-work-tabs::-webkit-scrollbar{display:none}
.recent-work-tabs button{flex:0 0 auto;border:1px solid #cfd5e6;background:#fff;color:#3d4061;border-radius:999px;min-height:38px;padding:0 15px;font-weight:800;font-size:11px;cursor:pointer}
.recent-work-tabs button.active{background:#3d4061;color:#fff;border-color:#3d4061}
.recent-makes-carousel{width:100%!important;min-width:0!important;display:block!important;position:relative!important;padding:0 50px!important}
.recent-makes-track{width:100%!important;min-width:0!important;display:flex!important;gap:14px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;padding:4px 2px 10px!important;scrollbar-width:none}
.recent-makes-track::-webkit-scrollbar{display:none}
.recent-make-card{display:block;flex:0 0 clamp(220px,24vw,310px)!important;width:clamp(220px,24vw,310px)!important;min-width:220px!important;max-width:310px!important;margin:0!important;scroll-snap-align:start;border:1px solid #D8DDEA;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 8px 24px rgba(48,50,77,.06)}
.recent-make-card[hidden]{display:none!important}
.recent-make-card img{width:100%!important;height:auto!important;aspect-ratio:1/1!important;object-fit:cover!important}
.recent-makes-carousel>.review-arrow{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;z-index:5!important}
.recent-makes-prev{left:0!important}.recent-makes-next{right:0!important}.recent-makes-carousel.is-single>.review-arrow{display:none!important}
.preset-design-fields{grid-template-columns:minmax(340px,1.55fr) minmax(260px,1fr)!important}
.preset-text-customizer{border:1px solid #cbdcde;border-radius:9px;background:#f8fbfb;padding:8px;display:grid;gap:7px;align-content:start;min-height:92px}
.preset-text-customizer input,.preset-text-customizer select{height:36px;border:1px solid #cad8da;border-radius:6px;background:#fff;padding:0 9px;font-size:11px;width:100%}
.preset-text-customizer label{display:grid;grid-template-columns:45px minmax(0,1fr);align-items:center;gap:7px;font-size:9px;font-weight:800;color:#4d5569}
.preset-thread-panel{display:none!important}
.ps-preset-text-preview{display:none;position:absolute!important;z-index:8!important;text-align:center!important;line-height:1!important;font-weight:700!important;pointer-events:none!important;text-shadow:0 1px 1px rgba(255,255,255,.4)!important}
@media(max-width:700px){.recent-makes-carousel{padding:0 38px!important}.recent-make-card{flex-basis:78vw!important;width:78vw!important;min-width:220px!important}.preset-design-fields{grid-template-columns:1fr!important}}
/* V5.17.36 — stable editable preset text zones */
.preset-design-fields{
grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr)!important;
align-items:start!important;
}
.preset-text-customizer{
min-width:0!important;
display:grid!important;
gap:10px!important;
padding:10px!important;
align-content:start!important;
}
.preset-live-text-head{display:grid;gap:2px;padding-bottom:7px;border-bottom:1px solid #dde5e6}
.preset-live-text-head b{font-size:10px;color:#31384b}
.preset-live-text-head small{font-size:7.5px;color:#77878a;line-height:1.35}
.preset-text-slot{display:grid;gap:7px;border:1px solid #d9e1e3;border-radius:8px;background:#fff;padding:8px;min-width:0}
.preset-text-slot[hidden]{display:none!important}
.preset-text-slot-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.62fr);gap:8px;align-items:end;min-width:0}
.preset-text-slot-fields>input{min-width:0;width:100%!important;height:38px!important}
.preset-text-customizer .preset-text-slot-fields>label{display:grid!important;grid-template-columns:1fr!important;gap:4px!important;align-items:stretch!important;min-width:0!important;font-size:8px!important;font-weight:800!important;color:#4d5569!important}
.preset-text-customizer .preset-text-slot-fields>label span{display:block!important;white-space:nowrap!important}
.preset-text-customizer .preset-text-slot-fields select{min-width:0!important;width:100%!important;height:38px!important;font-size:10px!important;padding:0 8px!important}
.ps-preset-text-preview,.ps-preset-text-preview-2{position:absolute!important;z-index:8!important;text-align:center!important;line-height:1!important;font-weight:700!important;pointer-events:none!important;text-shadow:0 1px 1px rgba(255,255,255,.35)!important;overflow:hidden!important;white-space:nowrap!important;box-sizing:border-box!important}
@media(max-width:1180px){.preset-design-fields{grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr)!important}}
@media(max-width:860px){.preset-design-fields{grid-template-columns:1fr!important}.preset-text-slot-fields{grid-template-columns:1fr!important}}
/* =========================================================
V5.17.37 — mobile-first final polish
- Live Editor becomes one natural page scroll on phones/tablets
- Homepage navigation cards stay readable and tap-friendly
========================================================= */
@media (max-width: 900px){
body.customizer-page-mode{overflow:auto!important;height:auto!important;min-height:100%!important}
body.customizer-page-mode .placement-studio.tn-editor-v176,
body.customizer-page-mode .tn-editor-v176.sketch-editor{
display:flex!important;
flex-direction:column!important;
grid-template-columns:1fr!important;
width:100%!important;
max-width:100%!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
overflow:visible!important;
gap:12px!important;
}
body.customizer-page-mode .tn-editor-v176 .sketch-preview,
body.customizer-page-mode .tn-editor-v176 .sketch-controls{
width:100%!important;
min-width:0!important;
max-width:none!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
position:relative!important;
inset:auto!important;
overflow:visible!important;
border-radius:16px!important;
}
body.customizer-page-mode .tn-editor-v176 .sketch-preview{
display:grid!important;
grid-template-rows:auto minmax(360px,58svh) auto!important;
}
body.customizer-page-mode .tn-editor-v176 .sketch-stage{
min-height:360px!important;
height:auto!important;
max-height:58svh!important;
overflow:hidden!important;
}
body.customizer-page-mode .tn-editor-v176 .sketch-scroll{
height:auto!important;
min-height:0!important;
max-height:none!important;
overflow:visible!important;
overscroll-behavior:auto!important;
padding-bottom:14px!important;
}
body.customizer-page-mode .tn-editor-v176 .sketch-viewbar{
position:relative!important;
top:auto!important;
overflow:hidden!important;
}
body.customizer-page-mode .tn-editor-v176 .sketch-viewbar .ps-view-tabs{
display:flex!important;
gap:7px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scrollbar-width:none!important;
padding-bottom:2px!important;
}
body.customizer-page-mode .tn-editor-v176 .sketch-viewbar .ps-view-tabs::-webkit-scrollbar{display:none!important}
body.customizer-page-mode .tn-editor-v176 .sketch-viewbar .ps-view-tabs button{
flex:0 0 auto!important;
min-width:118px!important;
}
body.customizer-page-mode .tn-editor-v176 .sketch-buybar{
position:sticky!important;
bottom:0!important;
z-index:40!important;
width:100%!important;
border-radius:14px 14px 0 0!important;
box-shadow:0 -8px 24px rgba(48,50,77,.12)!important;
}
body.customizer-page-mode .tn-editor-v176 .sketch-editor-head{
grid-template-columns:auto minmax(0,1fr) auto!important;
gap:8px!important;
align-items:center!important;
}
body.customizer-page-mode .tn-editor-v176 .sketch-product-name{min-width:0!important}
body.customizer-page-mode .tn-editor-v176 .sketch-head-btn,
body.customizer-page-mode .tn-editor-v176 .sketch-head-price{min-height:42px!important}
body.customizer-page-mode .tn-editor-v176 .garment-choice-layout-v51726{
grid-template-columns:1fr!important;
grid-template-areas:"left" "colours" "stock"!important;
gap:10px!important;
}
body.customizer-page-mode .tn-editor-v176 .preset-design-fields,
body.customizer-page-mode .tn-editor-v176 .compact-control-row,
body.customizer-page-mode .tn-editor-v176 .artwork-control-row{
grid-template-columns:1fr!important;
}
body.customizer-page-mode .tn-editor-v176 input,
body.customizer-page-mode .tn-editor-v176 select,
body.customizer-page-mode .tn-editor-v176 textarea,
body.customizer-page-mode .tn-editor-v176 button{font-size:max(12px,1em)}
}
@media (max-width: 640px){
body.customizer-page-mode main,
body.customizer-page-mode .section,
body.customizer-page-mode .container{padding-left:0!important;padding-right:0!important;max-width:100%!important}
body.customizer-page-mode .tn-editor-v176{gap:8px!important;border-radius:0!important}
body.customizer-page-mode .tn-editor-v176 .sketch-preview,
body.customizer-page-mode .tn-editor-v176 .sketch-controls{border-radius:12px!important}
body.customizer-page-mode .tn-editor-v176 .sketch-preview{grid-template-rows:auto 340px auto!important}
body.customizer-page-mode .tn-editor-v176 .sketch-stage{min-height:340px!important;max-height:340px!important}
body.customizer-page-mode .tn-editor-v176 .sketch-editor-head{
display:flex!important;
flex-wrap:wrap!important;
gap:7px!important;
padding:10px!important;
}
body.customizer-page-mode .tn-editor-v176 .sketch-item-id{order:1!important}
body.customizer-page-mode .tn-editor-v176 .sketch-product-name{order:2!important;flex:1 1 calc(100% - 62px)!important}
body.customizer-page-mode .tn-editor-v176 .sketch-head-price{order:3!important;flex:1 1 100%!important;width:100%!important}
body.customizer-page-mode .tn-editor-v176 .sketch-head-btn{order:4!important;flex:1 1 calc(50% - 5px)!important}
body.customizer-page-mode .tn-editor-v176 .remove-item-btn{order:5!important}
body.customizer-page-mode .tn-editor-v176 .garment-basic-row{grid-template-columns:1fr 1fr!important}
body.customizer-page-mode .tn-editor-v176 .compact-colour-reference-v51726{grid-template-columns:58px minmax(0,1fr)!important}
body.customizer-page-mode .tn-editor-v176 .compact-mode-choice,
body.customizer-page-mode .tn-editor-v176 .compact-placement-chips,
body.customizer-page-mode .tn-editor-v176 .compact-methods{
display:grid!important;
grid-template-columns:1fr!important;
gap:7px!important;
}
body.customizer-page-mode .tn-editor-v176 .preset-design-picker{
overflow-x:auto!important;
overflow-y:hidden!important;
display:flex!important;
flex-wrap:nowrap!important;
gap:8px!important;
scrollbar-width:none!important;
}
body.customizer-page-mode .tn-editor-v176 .preset-design-picker::-webkit-scrollbar{display:none!important}
body.customizer-page-mode .tn-editor-v176 .preset-design-picker button{flex:0 0 145px!important}
body.customizer-page-mode .tn-editor-v176 .colour-slider-v51729{
grid-template-columns:28px minmax(0,1fr) 28px!important;
gap:4px!important;
}
body.customizer-page-mode .tn-editor-v176 .sketch-buybar{
padding:8px!important;
gap:8px!important;
}
body.customizer-page-mode .tn-editor-v176 .sketch-buybar>button{min-height:48px!important}
.personalise-grid{grid-template-columns:1fr!important;gap:12px!important}
.personalise-tile{min-height:0!important}
.personalise-visual{aspect-ratio:16/10!important}
.category-product-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.category-product-grid .category-product-card{max-width:none!important;width:100%!important}
.home-premade-group .product-grid,.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.store-product-info h2,.product-info h3{font-size:15px!important;line-height:1.25!important}
.personalisation-paths .container{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
}
@media (max-width: 420px){
.home-premade-group .product-grid,.product-grid{grid-template-columns:1fr!important}
body.customizer-page-mode .tn-editor-v176 .garment-basic-row{grid-template-columns:1fr!important}
}