:root{--coral:#FF6B6B;--teal:#12B5B0;--mustard:#FFC33D;--charcoal:#2B2B2B;--cream:#F6F1E6;--white:#fff;--muted:#6b7280;--line:#e8e4da;--soft:#fbfaf6}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--soft);color:var(--charcoal)}a{text-decoration:none;color:inherit}.container{width:min(1180px,calc(100% - 36px));margin:0 auto}.top{background:var(--charcoal);color:#fff;font-size:12px;padding:8px 0;text-align:center;letter-spacing:.04em}.header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.header-in{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}.logo{font-weight:950;font-size:30px;letter-spacing:.08em}.logo span:nth-child(1){color:var(--coral)}.logo span:nth-child(2){color:var(--mustard)}.logo span:nth-child(3){color:var(--teal)}.logo span:nth-child(4){color:var(--charcoal)}.nav{display:flex;gap:22px;align-items:center;font-weight:700;font-size:14px}.nav a:hover{color:var(--teal)}.nav .pill{padding:10px 15px;border-radius:999px;background:var(--charcoal);color:#fff}.hero{padding:76px 0 54px;background:linear-gradient(135deg,#fff 0%,#fff8ee 52%,#e8fbfa 100%)}.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:42px;align-items:center}.eyebrow{display:inline-flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);padding:8px 12px;border-radius:999px;font-size:12px;font-weight:800}.hero h1{font-size:clamp(44px,6vw,78px);line-height:.98;margin:20px 0 20px;letter-spacing:-.04em}.hero h1 em{font-style:normal;color:var(--coral)}.hero p{font-size:18px;line-height:1.7;color:#555;max-width:650px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border-radius:12px;font-weight:850;border:1px solid transparent;cursor:pointer}.btn-dark{background:var(--charcoal);color:#fff}.btn-teal{background:var(--teal);color:#fff}.btn-soft{background:#fff;border-color:var(--line)}.visual{min-height:390px;position:relative;border-radius:30px;background:var(--charcoal);overflow:hidden;padding:30px;box-shadow:0 24px 70px rgba(43,43,43,.16)}.visual:before,.visual:after{content:"";position:absolute;border-radius:999px}.visual:before{width:220px;height:220px;background:var(--coral);right:-50px;top:-70px}.visual:after{width:180px;height:180px;background:var(--teal);left:-55px;bottom:-65px}.shirt{position:absolute;inset:52px 78px 46px;background:#fff;border-radius:30px 30px 18px 18px;clip-path:polygon(22% 0,36% 8%,64% 8%,78% 0,100% 17%,85% 39%,76% 32%,76% 100%,24% 100%,24% 32%,15% 39%,0 17%);display:flex;align-items:center;justify-content:center}.shirt b{font-size:34px;letter-spacing:.08em;transform:translateY(8px)}.shirt b span{color:var(--coral)}.mark{position:absolute;bottom:25px;right:28px;color:#fff;font-weight:800;font-size:13px;z-index:3}.section{padding:66px 0}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}.section h2{font-size:34px;margin:0;letter-spacing:-.025em}.section-head p{color:var(--muted);margin:0;max-width:540px}.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.cat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;min-height:150px;position:relative;overflow:hidden;transition:.2s}.cat:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.06)}.cat strong{font-size:20px}.cat small{display:block;color:var(--muted);margin-top:6px}.cat i{position:absolute;width:65px;height:65px;right:-8px;bottom:-10px;border-radius:50%;background:var(--cream)}.cat:nth-child(2) i{background:#ffe7e7}.cat:nth-child(3) i{background:#fff1ba}.cat:nth-child(4) i{background:#dff8f7}.cat:nth-child(5) i{background:#e8e8e8}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.product-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:.2s}.product-card:hover{transform:translateY(-3px);box-shadow:0 14px 35px rgba(0,0,0,.07)}.product-art{height:210px;background:linear-gradient(145deg,#f7f1e5,#fff);display:flex;align-items:center;justify-content:center;position:relative}.product-art .mini-shirt{width:120px;height:130px;background:#333;clip-path:polygon(22% 0,36% 8%,64% 8%,78% 0,100% 17%,85% 39%,76% 32%,76% 100%,24% 100%,24% 32%,15% 39%,0 17%)}.product-art .code{position:absolute;left:14px;top:14px;font-size:11px;font-weight:900;background:#fff;padding:5px 8px;border-radius:999px}.product-body{padding:17px}.product-body h3{margin:0 0 6px;font-size:18px}.product-body p{margin:0;color:var(--muted);font-size:13px;line-height:1.5;min-height:40px}.meta{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.chip{font-size:11px;padding:5px 8px;background:#f3f4f6;border-radius:999px;font-weight:700}.how{background:var(--charcoal);color:#fff}.how .section-head p{color:#c5c5c5}.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.step{padding:20px;border:1px solid #4b4b4b;border-radius:16px}.step b{display:block;color:var(--mustard);font-size:12px;margin-bottom:10px}.step strong{font-size:17px}.custom-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.custom{border-radius:24px;padding:32px;min-height:230px;position:relative;overflow:hidden}.custom.print{background:#e8fbfa}.custom.stitch{background:#fff1ba}.custom h3{font-size:30px;margin:0 0 10px}.custom p{max-width:530px;line-height:1.6}.footer{background:#202020;color:#ddd;padding:42px 0}.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:30px}.footer strong{color:#fff}.footer a{display:block;margin-top:9px;font-size:13px;color:#bbb}.page-hero{padding:48px 0 28px;background:#fff}.page-hero h1{font-size:42px;margin:0 0 8px}.filterbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:24px}.filterbar a,.filterbar button{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;font-weight:750}.filterbar a.active{background:var(--charcoal);color:#fff}.search{display:flex;gap:8px;margin-left:auto}.search input{border:1px solid var(--line);border-radius:10px;padding:9px 12px;min-width:220px}.pagination{margin-top:28px}.detail{padding:48px 0}.detail-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:42px}.detail-art{min-height:500px;border-radius:28px;background:linear-gradient(145deg,#f6f1e6,#fff);display:flex;align-items:center;justify-content:center}.detail-art .mini-shirt{width:245px;height:280px;background:#333;clip-path:polygon(22% 0,36% 8%,64% 8%,78% 0,100% 17%,85% 39%,76% 32%,76% 100%,24% 100%,24% 32%,15% 39%,0 17%)}.detail h1{font-size:43px;margin:8px 0}.detail-copy{color:#555;line-height:1.7}.swatches{display:flex;gap:8px;flex-wrap:wrap}.swatch{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;padding:7px 9px;border-radius:999px;font-size:11px}.dot{width:16px;height:16px;border-radius:50%;border:1px solid #ccc}.sizes{display:flex;gap:7px;flex-wrap:wrap}.size{padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;font-weight:750;font-size:12px}.info-box{margin-top:18px;padding:17px;border-radius:15px;background:#fff;border:1px solid var(--line)}.login-wrap{min-height:calc(100vh - 80px);display:grid;place-items:center;padding:40px 18px;background:linear-gradient(135deg,#fff8ee,#e8fbfa)}.login-card{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.08)}.login-card h1{margin:5px 0 8px}.field{margin-top:15px}.field label{display:block;font-size:12px;font-weight:800;margin-bottom:6px}.field input{width:100%;padding:11px 12px;border-radius:10px;border:1px solid #d5d5d5;font:inherit}.error{color:#b91c1c;font-size:12px;margin-top:5px}@media(max-width:900px){.hero-grid,.detail-grid,.custom-grid{grid-template-columns:1fr}.cat-grid{grid-template-columns:repeat(2,1fr)}.product-grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:1fr 1fr}.nav>a:not(.pill):not(.cart-link){display:none}.visual{min-height:330px}.shirt{inset:45px 60px}.footer-grid{grid-template-columns:1fr}.search{margin-left:0;width:100%}.search input{flex:1}}@media(max-width:560px){.container{width:min(100% - 24px,1180px)}.hero{padding-top:45px}.hero h1{font-size:44px}.cat-grid,.product-grid,.steps{grid-template-columns:1fr}.section{padding:48px 0}.section-head{align-items:flex-start;flex-direction:column}.visual{min-height:290px}.shirt{inset:40px 45px}.header-in{min-height:64px}.logo{font-size:25px}} /* PUNDA Full V2 — Configurator & Cart */ .cart-link{display:inline-flex!important;align-items:center;gap:7px;font-weight:900}.cart-link span{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--coral);color:#fff;display:inline-grid;place-items:center;font-size:11px}.flash{margin-top:14px;padding:11px 14px;border-radius:12px;font-size:13px;font-weight:750}.flash-success{background:#e8fbf0;border:1px solid #b7ead0;color:#17633b}.flash-error{background:#fff0f0;border:1px solid #ffc8c8;color:#9f2020}.detail-art{position:relative}.preview-mark{position:absolute;bottom:24px;right:26px;font-weight:950;letter-spacing:.1em;color:#999;font-size:12px}.preview-caption{font-size:11px;color:#777;line-height:1.5;margin:10px 8px 0}.config-card{margin-top:14px;padding:18px;border-radius:16px;background:#fff;border:1px solid var(--line)}.config-step{display:flex;gap:11px;align-items:center;margin-bottom:14px}.config-step>span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--charcoal);color:#fff;font-size:12px;font-weight:900;flex:0 0 auto}.config-step strong{display:block;font-size:14px}.config-step small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.config-select,.config-textarea{width:100%;border:1px solid #d9d6cd;border-radius:11px;padding:11px 12px;background:#fff;font:inherit;color:var(--charcoal)}.config-textarea{resize:vertical}.field-label{display:block;font-size:12px;font-weight:850;margin-bottom:7px}.field-label span{font-weight:500;color:#888}.size-options{display:flex;gap:8px;flex-wrap:wrap}.choice-chip input{position:absolute;opacity:0;pointer-events:none}.choice-chip span{display:inline-flex;min-width:44px;justify-content:center;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:850;cursor:pointer;transition:.15s}.choice-chip input:checked+span{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}.size-guide{margin-top:13px}.size-guide summary{cursor:pointer;font-size:12px;font-weight:800;color:var(--teal)}.table-wrap{overflow-x:auto;margin-top:10px}.size-table{width:100%;border-collapse:collapse;font-size:12px}.size-table th,.size-table td{text-align:left;padding:8px;border-bottom:1px solid var(--line)}.qty-control{display:flex;align-items:center;width:165px;border:1px solid var(--line);border-radius:11px;overflow:hidden}.qty-control input{width:70px;text-align:center;border:0;padding:10px 4px;font:inherit;font-weight:800;outline:none}.qty-btn{width:46px;border:0;background:#f7f6f2;font-size:20px;cursor:pointer;height:42px}.custom-mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.custom-mode-card{position:relative}.custom-mode-card input{position:absolute;opacity:0;pointer-events:none}.custom-mode-card>span{min-height:86px;display:flex;flex-direction:column;justify-content:center;padding:13px;border:1px solid var(--line);border-radius:13px;cursor:pointer;background:#fff;transition:.15s}.custom-mode-card input:checked+span{border-color:var(--teal);box-shadow:0 0 0 2px rgba(18,181,176,.14);background:#f0fffe}.custom-mode-card b{font-size:13px}.custom-mode-card small{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.35}.config-two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.upload-zone{margin-top:14px;padding:14px;border:1px dashed #c9c5b9;border-radius:12px;background:#fbfaf6}.upload-zone input{display:block;width:100%;font-size:12px}.upload-zone small{display:block;color:#777;line-height:1.5;margin-top:7px}.file-name{font-size:12px;font-weight:750;color:var(--teal);margin-top:7px}.alert{margin-top:13px;padding:11px 13px;border-radius:11px;font-size:12px;line-height:1.5}.alert ul{margin:7px 0 0;padding-left:18px}.alert-error{background:#fff0f0;border:1px solid #ffcaca;color:#982626}.alert-warning{background:#fff8dc;border:1px solid #f0d87d;color:#725b10}.price-panel{margin-top:15px;padding:18px 20px;border-radius:18px;background:var(--charcoal);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px}.price-panel>div:first-child{display:flex;flex-direction:column;gap:4px}.price-kicker{font-size:10px;letter-spacing:.1em;font-weight:900;color:var(--mustard)}.price-panel strong{font-size:22px}.price-panel small{font-size:11px;color:#bbb;max-width:540px}.price-total{text-align:right;display:flex;flex-direction:column;gap:5px}.price-total span{font-size:11px;color:#bbb}.price-total b{font-size:27px;color:#fff}.draft-note{font-size:11px!important;color:#777!important;line-height:1.5;margin-top:12px}.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}.cart-items{display:flex;flex-direction:column;gap:14px}.cart-item{display:grid;grid-template-columns:130px 1fr;gap:17px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:15px}.cart-thumb{min-height:140px;border-radius:14px;background:linear-gradient(145deg,#f6f1e6,#fff);display:grid;place-items:center}.cart-thumb .mini-shirt{width:78px;height:90px;background:#333;clip-path:polygon(22% 0,36% 8%,64% 8%,78% 0,100% 17%,85% 39%,76% 32%,76% 100%,24% 100%,24% 32%,15% 39%,0 17%)}.cart-title-row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.cart-title-row h3{margin:3px 0 0;font-size:18px}.cart-code{font-size:10px;font-weight:900;color:var(--teal)}.link-danger{border:0;background:transparent;color:#b42323;font-size:11px;font-weight:800;cursor:pointer}.cart-specs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.cart-specs span{padding:5px 8px;border-radius:8px;background:#f5f5f3;font-size:11px}.cart-custom-box{margin-top:10px;padding:10px 12px;border-radius:11px;background:#edfafa;font-size:11px;display:flex;flex-direction:column;gap:7px}.cart-custom-box>div{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.cart-custom-box span{color:#555}.cart-custom-box em{font-style:normal;color:#8a6500;background:#fff5bd;padding:3px 6px;border-radius:999px}.design-file-pill{font-weight:750;color:var(--teal)}.cart-no-custom{display:inline-flex;margin-top:10px;padding:5px 8px;border-radius:8px;background:#f3f3f3;font-size:11px}.cart-note{margin-top:9px;font-size:11px;color:#666}.cart-bottom-row{display:flex;justify-content:space-between;gap:15px;align-items:end;margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}.cart-qty-form{display:flex;align-items:center;gap:7px}.cart-qty-form label{font-size:11px;font-weight:800}.cart-qty-form input{width:68px;padding:8px;border:1px solid var(--line);border-radius:8px}.btn-small{padding:8px 10px;font-size:11px}.cart-price{text-align:right;display:flex;flex-direction:column}.cart-price small{font-size:11px;color:#777}.cart-price strong{font-size:20px;margin-top:3px}.cart-summary{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px}.summary-row{display:flex;justify-content:space-between;gap:10px;padding:13px 0;border-bottom:1px solid var(--line);font-size:13px}.summary-total{font-size:18px}.cart-summary p{font-size:11px;line-height:1.6;color:#777}.btn-block{width:100%}.cart-summary>small{display:block;color:#888;font-size:10px;line-height:1.5;margin-top:9px}.cart-actions-under{display:flex;justify-content:space-between;gap:10px;margin-top:15px}.empty-cart{background:#fff;border:1px solid var(--line);border-radius:20px;padding:38px;text-align:center}.empty-cart strong{font-size:24px}.empty-cart p{color:#777}.custom-fields[hidden],.alert[hidden]{display:none!important} @media(max-width:900px){.custom-mode-grid{grid-template-columns:1fr}.cart-layout{grid-template-columns:1fr}.cart-summary{position:static}.config-two-col{grid-template-columns:1fr}.price-panel{align-items:flex-start;flex-direction:column}.price-total{text-align:left}.cart-item{grid-template-columns:100px 1fr}.cart-thumb{min-height:115px}} @media(max-width:560px){.cart-item{grid-template-columns:1fr}.cart-thumb{min-height:170px}.cart-bottom-row,.cart-actions-under{align-items:stretch;flex-direction:column}.cart-price{text-align:left}.cart-qty-form{flex-wrap:wrap}.price-panel strong{font-size:19px}.price-total b{font-size:23px}.custom-mode-grid{grid-template-columns:1fr}.cart-link{font-size:12px}} .checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}.checkout-form-card,.checkout-summary,.order-items-card,.track-timeline,.shipping-card,.payment-action-card,.order-status-card{background:#fff;border:1px solid var(--line);border-radius:18px}.checkout-form-card{padding:22px}.checkout-block{padding:4px 0 24px;margin-bottom:20px;border-bottom:1px solid var(--line)}.checkout-block:last-of-type{margin-bottom:12px}.checkout-block-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}.checkout-block-head>span{width:34px;height:34px;border-radius:10px;background:var(--charcoal);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:900}.checkout-block-head div{display:flex;flex-direction:column;gap:3px}.checkout-block-head strong{font-size:17px}.checkout-block-head small{font-size:11px;color:#777}.form-grid{display:grid;gap:13px}.form-grid.two{grid-template-columns:1fr 1fr}.checkout-form-card label{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}.checkout-form-card label>span{font-size:11px;font-weight:850}.checkout-form-card label em{font-style:normal;color:#8a8a8a;font-weight:500}.checkout-form-card input,.checkout-form-card textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;background:#fff}.checkout-form-card textarea{resize:vertical}.field-error{color:#b42323;font-size:10px}.checkout-safety{background:#fff8dd;border:1px solid #f2df9b;border-radius:12px;padding:12px 14px;margin:14px 0}.checkout-safety strong{font-size:11px;color:#7d5c00}.checkout-safety p{font-size:11px;line-height:1.55;margin:4px 0 0;color:#665d43}.checkout-submit{margin-top:10px}.checkout-summary{position:sticky;top:96px;padding:20px}.checkout-mini-items{display:flex;flex-direction:column;margin:12px 0}.checkout-mini-item{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}.checkout-mini-item>div{display:flex;flex-direction:column;gap:3px}.checkout-mini-item b{font-size:12px}.checkout-mini-item small{font-size:10px;color:#777}.checkout-mini-item>strong{font-size:12px;white-space:nowrap}.summary-warning{background:#fff5bd!important;color:#665200!important;border-radius:9px;padding:9px!important}.order-track-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}.order-status-card{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin-bottom:14px}.order-status-card>div{padding:18px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}.order-status-card>div:last-child{border-right:0}.status-label{font-size:9px;font-weight:900;letter-spacing:.09em;color:#888}.order-status-card strong{font-size:16px}.payment-action-card{padding:20px;margin:14px 0;display:flex;justify-content:space-between;gap:18px;align-items:center}.payment-action-card h2{font-size:18px;margin:5px 0}.payment-action-card p{font-size:11px;color:#777;line-height:1.5;margin:0}.order-items-card{padding:20px}.order-section-title{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:4px}.order-section-title span{font-size:10px;font-weight:900;letter-spacing:.1em}.order-item-row{display:flex;justify-content:space-between;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}.order-item-row h3{font-size:16px;margin:3px 0}.order-item-row p,.order-item-row small{font-size:10px;color:#777;margin:3px 0;display:block}.order-custom-line{color:var(--teal)!important;font-weight:700}.order-item-row>strong{font-size:14px;white-space:nowrap}.order-totals{padding-top:12px}.order-totals>div{display:flex;justify-content:space-between;padding:6px 0;font-size:12px}.order-totals .grand{font-size:18px;border-top:1px solid var(--line);padding-top:11px;margin-top:5px}.track-timeline,.shipping-card{padding:18px}.shipping-card{margin-top:14px}.shipping-card>b{display:block;margin-top:8px}.shipping-card p,.shipping-card small{font-size:10px;line-height:1.55;color:#777}.timeline-row{display:grid;grid-template-columns:12px 1fr;gap:9px;padding:13px 0;border-bottom:1px solid var(--line)}.timeline-dot{width:10px;height:10px;margin-top:3px;background:var(--teal);border-radius:50%}.timeline-row b{font-size:12px}.timeline-row p{font-size:10px;color:#666;margin:3px 0}.timeline-row small{font-size:9px;color:#999} @media(max-width:900px){.checkout-layout,.order-track-layout{grid-template-columns:1fr}.checkout-summary{position:static}.order-status-card{grid-template-columns:1fr}.order-status-card>div{border-right:0;border-bottom:1px solid var(--line)}.order-status-card>div:last-child{border-bottom:0}} @media(max-width:560px){.form-grid.two{grid-template-columns:1fr}.payment-action-card{align-items:stretch;flex-direction:column}.checkout-form-card{padding:16px}} .shipping-area-box{background:#fbfaf6;border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:6px}.shipping-search-row{display:grid;grid-template-columns:1fr auto;gap:9px}.shipping-search-row input{margin:0}.shipping-helper{font-size:10px;color:#777;line-height:1.5;margin:8px 0}.shipping-area-results{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:#fff;margin:5px 0 10px}.shipping-rates{display:grid;gap:9px}.shipping-empty{font-size:11px;color:#777;background:#fbfaf6;border:1px dashed var(--line);border-radius:12px;padding:14px}.shipping-rate-card{display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;border:1px solid var(--line);border-radius:13px;padding:13px!important;margin:0!important;cursor:pointer;background:#fff}.shipping-rate-card:has(input:checked){border-color:var(--teal);background:#effcfb;box-shadow:0 0 0 2px rgba(18,181,176,.08)}.shipping-rate-card input{width:auto!important;margin:0}.shipping-rate-card div{display:flex;flex-direction:column;gap:3px}.shipping-rate-card b{font-size:12px}.shipping-rate-card small{font-size:10px;color:#777}.shipping-rate-card strong{font-size:13px;white-space:nowrap}.shipping-summary-service{font-size:10px;color:#155e5b;background:#edfafa;border-radius:9px;padding:9px;margin-top:10px}.shipping-service-pill{display:flex;flex-direction:column;gap:2px;background:#edfafa;border-radius:9px;padding:9px 10px;margin:10px 0}.shipping-service-pill b{font-size:11px}.shipping-service-pill small{font-size:9px!important} @media(max-width:560px){.shipping-search-row{grid-template-columns:1fr}.shipping-rate-card{grid-template-columns:auto 1fr}.shipping-rate-card strong{grid-column:2}} /* V4.5 live tracking */ .track-live-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;padding:10px 12px;border:1px solid #c7ece9;border-radius:12px;background:#f0fdfa;font-size:12px}.track-live-bar span{color:#4b5563}.track-live-bar b{color:#0f766e}@media(max-width:720px){.track-live-bar{align-items:stretch}.track-live-bar .btn{width:100%}} /* V5.0 — Visual Product Studio */ .product-studio-shell{padding:26px 0 64px;background:linear-gradient(180deg,#f7f8fa 0%,#fbfaf6 100%)} .studio-breadcrumb{display:flex;gap:8px;align-items:center;font-size:12px;color:#7b8190;margin:6px 0 18px}.studio-breadcrumb a{font-weight:800;color:#414755}.studio-breadcrumb strong{color:#20242b} .product-studio-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(380px,.72fr);gap:20px;align-items:start} .studio-visual-card,.studio-config-card{background:#fff;border:1px solid #e8eaf0;border-radius:24px;box-shadow:0 14px 42px rgba(30,35,45,.055)} .studio-visual-card{padding:20px}.studio-config-card{padding:20px;position:sticky;top:96px;max-height:calc(100vh - 118px);overflow:auto} .studio-visual-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:16px}.studio-visual-head h1{font-size:30px;line-height:1.08;margin:9px 0 0;letter-spacing:-.025em}.studio-media-badge{display:flex;align-items:center;gap:8px;border:1px solid #dfe9ff;background:#f5f8ff;padding:9px 11px;border-radius:999px;font-size:11px;white-space:nowrap}.studio-media-badge>span{width:9px;height:9px;border-radius:50%;background:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.09)} .visual-stage-wrap{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;min-height:570px}.view-rail{display:flex;flex-direction:column;gap:10px}.view-thumb{border:1px solid #e3e6ed;background:#fff;border-radius:14px;padding:7px;cursor:pointer;transition:.18s;min-height:124px}.view-thumb:hover{border-color:#93b5ff;transform:translateY(-1px)}.view-thumb.active{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.10)}.view-thumb span{display:block;font-size:10px;font-weight:850;margin-top:6px}.view-thumb-art{height:82px;border-radius:10px;background:linear-gradient(150deg,#f7f8fa,#fff);display:grid;place-items:center;overflow:hidden}.view-thumb-art img{width:100%;height:100%;object-fit:contain}.view-thumb-art i{display:block;width:48px;height:58px;background:#333;clip-path:polygon(22% 0,36% 8%,64% 8%,78% 0,100% 17%,85% 39%,76% 32%,76% 100%,24% 100%,24% 32%,15% 39%,0 17%)} .visual-stage{position:relative;min-height:570px;border-radius:20px;border:1px solid #eceef3;background:radial-gradient(circle at 50% 38%,#fff 0%,#fbfcfe 55%,#f3f5f8 100%);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:70px 32px 48px}.visual-stage-toolbar{position:absolute;left:18px;right:18px;top:16px;display:flex;justify-content:space-between;gap:10px;align-items:center}.active-color-pill,.angle-pill{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.9);border:1px solid #e6e9ef;box-shadow:0 7px 20px rgba(40,50,70,.05);padding:8px 10px;border-radius:12px;font-size:10px}.active-color-pill i{width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}.active-color-pill span,.angle-pill span{color:#8a909d}.active-color-pill strong,.angle-pill strong{font-size:10px}.product-real-visual{width:100%;height:100%;min-height:430px;display:grid;place-items:center}.product-real-visual img{width:min(92%,620px);max-height:470px;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(32,40,55,.12))}.product-media-fallback{display:flex;flex-direction:column;align-items:center;gap:14px;color:#9aa0aa;font-size:11px;text-align:center}.product-media-fallback[hidden]{display:none!important}.fallback-shirt{--preview-color:#333;width:260px;height:300px;background:var(--preview-color);clip-path:polygon(22% 0,36% 8%,64% 8%,78% 0,100% 17%,85% 39%,76% 32%,76% 100%,24% 100%,24% 32%,15% 39%,0 17%);filter:drop-shadow(0 18px 18px rgba(20,25,35,.13));position:relative}.visual-zoom-hint{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);font-size:10px;color:#8b919d;background:rgba(255,255,255,.86);padding:7px 10px;border:1px solid #eaedf2;border-radius:999px;white-space:nowrap}.visual-confidence-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.visual-confidence-row>div{padding:11px 12px;border:1px solid #edf0f4;background:#fbfcfd;border-radius:13px}.visual-confidence-row b{font-size:11px;display:block}.visual-confidence-row span{font-size:9px;line-height:1.45;color:#8b919c;display:block;margin-top:3px} .studio-product-copy p{font-size:13px;line-height:1.65;color:#555d68;margin:0}.studio-config-section{padding:16px 0;border-top:1px solid #edf0f3}.studio-config-section:first-of-type{border-top:0}.studio-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}.studio-section-head>div{display:flex;align-items:center;gap:9px}.studio-section-head>div>span{font-size:9px;font-weight:950;color:#2563eb;background:#eef4ff;border:1px solid #dce8ff;padding:5px 6px;border-radius:7px}.studio-section-head strong{font-size:13px}.studio-section-head small{font-size:10px;color:#727987;font-weight:750}.sr-only-select{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.studio-swatches{display:flex;gap:8px;flex-wrap:wrap}.studio-swatch{width:31px;height:31px;border-radius:50%;border:1px solid #d8dce4;background:#fff;display:grid;place-items:center;padding:3px;cursor:pointer;transition:.15s}.studio-swatch span{width:100%;height:100%;border-radius:50%;display:block;background:linear-gradient(135deg,var(--swatch) 0 52%,var(--swatch2) 52%)}.studio-swatch:hover{transform:scale(1.08)}.studio-swatch.active{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}.studio-swatch.active:after{content:'✓';position:absolute;font-size:11px;color:#fff;font-weight:950;text-shadow:0 1px 3px rgba(0,0,0,.4)}.studio-swatch{position:relative}.studio-helper{display:block;font-size:9px;color:#8c929d;margin-top:8px;line-height:1.45}.studio-size-options{display:flex;gap:7px;flex-wrap:wrap}.studio-size-options label input{position:absolute;opacity:0;pointer-events:none}.studio-size-options label span{min-width:46px;height:39px;padding:0 12px;border:1px solid #dde1e8;border-radius:10px;background:#fff;display:grid;place-items:center;font-size:11px;font-weight:850;cursor:pointer}.studio-size-options label input:checked+span{background:#20242b;color:#fff;border-color:#20242b}.compact-size-guide{display:none}.studio-size-table summary{font-size:10px;color:#2563eb;font-weight:800;margin-top:9px;cursor:pointer}.studio-row-two{display:grid;grid-template-columns:.8fr 1.2fr;gap:14px}.studio-row-two>div+div{border-left:1px solid #edf0f3;padding-left:14px}.studio-qty{width:100%}.studio-qty input{min-width:60px}.studio-custom-choice{display:flex;gap:7px;flex-wrap:wrap}.studio-custom-choice label input{position:absolute;opacity:0}.studio-custom-choice label span{display:inline-flex;border:1px solid #dde1e8;border-radius:10px;padding:9px 10px;font-size:10px;font-weight:800;cursor:pointer}.studio-custom-choice label input:checked+span{border-color:#12B5B0;background:#edfbfa;color:#0e6f6c}.studio-price-dock{display:flex;align-items:end;justify-content:space-between;gap:12px;background:#20242b;color:#fff;border-radius:16px;padding:14px 16px;margin-top:13px}.studio-price-dock>div{display:flex;flex-direction:column}.studio-price-dock span{font-size:9px;color:#aab0bb}.studio-price-dock strong{font-size:20px;margin-top:3px}.studio-price-dock small{font-size:8px;color:#aab0bb;margin-top:3px}.studio-price-dock .price-total{text-align:right}.studio-price-dock .price-total b{font-size:24px}.studio-cart-btn{width:100%;margin-top:10px;min-height:48px;font-size:13px}.studio-config-card .draft-note{font-size:8px;line-height:1.45;color:#9298a3;margin:9px 2px 0}.studio-config-card .config-select,.studio-config-card .config-textarea{font-size:11px}.studio-config-card .upload-zone{margin-top:10px} .product-card-media{height:210px;background:linear-gradient(145deg,#f6f7f9,#fff);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.product-card-media img{width:88%;height:88%;object-fit:contain;transition:.22s;filter:drop-shadow(0 10px 12px rgba(25,30,40,.09))}.product-card:hover .product-card-media img{transform:scale(1.025)}.product-card-media .code{position:absolute;left:14px;top:14px;z-index:2;font-size:11px;font-weight:900;background:rgba(255,255,255,.92);padding:5px 8px;border-radius:999px}.product-card-media .mini-shirt{width:120px;height:130px;background:#333;clip-path:polygon(22% 0,36% 8%,64% 8%,78% 0,100% 17%,85% 39%,76% 32%,76% 100%,24% 100%,24% 32%,15% 39%,0 17%)} @media(max-width:1080px){.product-studio-grid{grid-template-columns:1fr}.studio-config-card{position:static;max-height:none}.visual-stage-wrap{min-height:520px}.visual-stage{min-height:520px}} @media(max-width:720px){.product-studio-shell{padding-top:14px}.studio-breadcrumb{overflow:auto;white-space:nowrap}.studio-visual-card,.studio-config-card{padding:14px;border-radius:18px}.studio-visual-head{flex-direction:column}.studio-visual-head h1{font-size:25px}.visual-stage-wrap{grid-template-columns:1fr;min-height:0}.view-rail{order:2;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.view-thumb{min-height:94px;padding:5px}.view-thumb-art{height:56px}.visual-stage{min-height:430px;padding:58px 16px 42px}.product-real-visual{min-height:340px}.product-real-visual img{max-height:360px}.fallback-shirt{width:210px;height:245px}.visual-confidence-row{grid-template-columns:1fr}.studio-row-two{grid-template-columns:1fr}.studio-row-two>div+div{border-left:0;border-top:1px solid #edf0f3;padding-left:0;padding-top:14px}.visual-stage-toolbar{left:10px;right:10px;top:10px}.visual-zoom-hint{white-space:normal;width:max-content;max-width:90%;text-align:center}.studio-price-dock{align-items:flex-start;flex-direction:column}.studio-price-dock .price-total{text-align:left}} /* V5.0.1 — Compact Product Studio polish */ .v501-polish{padding:18px 0 48px;background:#f5f6f8} .v501-polish>.container{width:min(1460px,calc(100% - 36px))} .v501-polish .studio-breadcrumb{margin:2px 0 12px;padding:0 4px} .v501-polish .product-studio-grid{grid-template-columns:minmax(320px,360px) minmax(0,1fr);gap:16px;align-items:start} .v501-polish .studio-config-card{grid-column:1;grid-row:1;position:sticky;top:88px;max-height:calc(100vh - 104px);overflow:auto;padding:0;border-radius:18px;box-shadow:0 12px 36px rgba(26,31,43,.07);scrollbar-width:thin} .v501-polish .studio-visual-card{grid-column:2;grid-row:1;padding:16px;border-radius:18px;box-shadow:0 12px 36px rgba(26,31,43,.055)} .v501-polish .studio-config-intro{padding:20px 20px 14px;border-bottom:1px solid #edf0f4;background:linear-gradient(180deg,#fff,#fcfcfd)} .v501-polish .studio-config-kicker{display:flex;align-items:center;gap:7px;margin-bottom:8px} .v501-polish .studio-config-kicker span{font-size:9px;font-weight:900;letter-spacing:.06em;color:#596170;background:#f4f5f7;border:1px solid #e7e9ee;padding:5px 7px;border-radius:999px} .v501-polish .studio-config-intro h1{margin:0;font-size:24px;line-height:1.12;letter-spacing:-.025em;color:#20242b} .v501-polish .studio-config-intro p{margin:9px 0 0;font-size:11px;line-height:1.55;color:#68707c} .v501-polish .studio-config-intro .meta{margin:11px 0 0;gap:6px} .v501-polish .studio-config-intro .chip{font-size:9px;padding:5px 7px;background:#f5f6f8;border:1px solid #eceef2} .v501-polish .studio-config-intro .chip-ready{background:#eefbf7;color:#087a62;border-color:#d2f2e8} .v501-polish .studio-material-line{display:grid;grid-template-columns:52px 1fr;gap:8px;margin-top:11px;padding-top:10px;border-top:1px dashed #e7e9ee;font-size:9px;line-height:1.4} .v501-polish .studio-material-line span{color:#9298a4}.v501-polish .studio-material-line strong{color:#4d5562;font-weight:750} .v501-polish .studio-config-card form{padding:0 20px 18px} .v501-polish .studio-config-section{padding:13px 0} .v501-polish .studio-section-head{margin-bottom:9px} .v501-polish .studio-section-head strong{font-size:12px} .v501-polish .studio-section-head>div>span{font-size:8px;padding:4px 5px} .v501-polish .studio-swatches{gap:7px} .v501-polish .studio-swatch{width:27px;height:27px;padding:3px} .v501-polish .studio-helper{font-size:8px;margin-top:7px} .v501-polish .studio-size-options{gap:6px} .v501-polish .studio-size-options label span{min-width:40px;height:34px;border-radius:9px;padding:0 9px;font-size:10px} .v501-polish .studio-row-two{gap:10px}.v501-polish .studio-row-two>div+div{padding-left:10px} .v501-polish .studio-custom-choice{gap:5px}.v501-polish .studio-custom-choice label span{padding:7px 8px;font-size:9px;border-radius:8px} .v501-polish .studio-price-dock{border-radius:13px;padding:11px 12px;margin-top:9px}.v501-polish .studio-price-dock strong{font-size:17px}.v501-polish .studio-price-dock .price-total b{font-size:19px} .v501-polish .studio-cart-btn{min-height:43px;margin-top:8px} .v501-polish .studio-visual-head{align-items:center;margin-bottom:12px;padding:0 2px} .v501-polish .studio-visual-head .eyebrow{padding:5px 8px;font-size:9px;background:#f7f8fa} .v501-polish .studio-preview-title{font-size:19px;line-height:1.15;margin:7px 0 0;letter-spacing:-.02em} .v501-polish .studio-media-badge{padding:7px 9px;font-size:9px} .v501-polish .visual-stage-wrap{grid-template-columns:minmax(0,1fr) 92px;gap:10px;min-height:590px} .v501-polish .visual-stage{grid-column:1;grid-row:1;min-height:590px;height:min(68vh,650px);padding:62px 26px 42px;border-radius:16px;background:radial-gradient(circle at 50% 36%,#fff 0%,#fcfdff 52%,#f2f4f7 100%)} .v501-polish .view-rail{grid-column:2;grid-row:1;gap:8px;align-self:stretch;overflow:auto;padding-right:1px;scrollbar-width:thin} .v501-polish .view-thumb{min-height:0;height:calc((min(68vh,650px) - 24px)/4);max-height:148px;padding:5px;border-radius:12px;background:#fafbfc} .v501-polish .view-thumb-art{height:calc(100% - 24px);min-height:70px;border-radius:8px;background:#fff} .v501-polish .view-thumb span{margin-top:4px;font-size:9px} .v501-polish .product-real-visual{min-height:0;height:100%;max-height:520px} .v501-polish .product-real-visual img{width:auto;max-width:78%;height:auto;max-height:500px;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(26,31,43,.10))} .v501-polish .visual-stage-toolbar{left:14px;right:14px;top:12px} .v501-polish .active-color-pill,.v501-polish .angle-pill{padding:7px 9px;border-radius:10px;font-size:9px} .v501-polish .visual-zoom-hint{bottom:11px;font-size:9px;padding:6px 9px} .v501-polish .visual-confidence-row{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px} .v501-polish .visual-confidence-row>div{padding:8px 10px;border-radius:10px;background:#fafbfc} .v501-polish .visual-confidence-row b{font-size:9px}.v501-polish .visual-confidence-row span{font-size:8px;margin-top:2px} @media(max-width:1180px){.v501-polish>.container{width:min(1180px,calc(100% - 30px))}.v501-polish .product-studio-grid{grid-template-columns:320px minmax(0,1fr)}.v501-polish .visual-stage-wrap{grid-template-columns:minmax(0,1fr) 82px}.v501-polish .product-real-visual img{max-width:84%}} @media(max-width:980px){.v501-polish .product-studio-grid{grid-template-columns:1fr}.v501-polish .studio-config-card,.v501-polish .studio-visual-card{grid-column:1;position:static;max-height:none}.v501-polish .studio-visual-card{grid-row:1}.v501-polish .studio-config-card{grid-row:2}.v501-polish .visual-stage{height:auto;min-height:520px}.v501-polish .view-thumb{height:120px}} @media(max-width:720px){.v501-polish>.container{width:min(100% - 20px,1460px)}.v501-polish .studio-visual-card,.v501-polish .studio-config-card{border-radius:14px}.v501-polish .visual-stage-wrap{grid-template-columns:1fr;min-height:0}.v501-polish .visual-stage{grid-column:1;grid-row:1;min-height:430px;padding:55px 12px 38px}.v501-polish .view-rail{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(4,1fr);overflow:visible}.v501-polish .view-thumb{height:96px}.v501-polish .view-thumb-art{height:66px}.v501-polish .product-real-visual img{max-width:92%;max-height:360px}.v501-polish .visual-confidence-row{display:none}.v501-polish .studio-config-intro{padding:16px}.v501-polish .studio-config-card form{padding:0 16px 16px}} /* ========================================================= PUNDA SHOP PAGINATION V5.0.7 Custom storefront pagination — no Tailwind dependency ========================================================= */ .shop-pagination-wrap{ margin-top:32px; } .shop-pager{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:16px; } .shop-pager-summary{ color:var(--muted); font-size:12px; line-height:1.4; } .shop-pager-summary strong{ color:var(--charcoal); } .shop-pager-controls{ display:flex; align-items:center; justify-content:flex-end; gap:7px; } .shop-pager-pages{ display:flex; align-items:center; gap:6px; } .shop-pager-nav, .shop-pager-page{ height:36px; min-width:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); background:#fff; border-radius:10px; color:var(--charcoal); font-size:12px; font-weight:800; line-height:1; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; } .shop-pager-nav{ gap:6px; padding:0 12px; min-width:auto; } .shop-pager-page:hover, .shop-pager-nav:hover{ border-color:#c9c6bc; background:#f8f7f3; } .shop-pager-page.is-active{ background:var(--charcoal); border-color:var(--charcoal); color:#fff; } .shop-pager-nav.is-disabled{ opacity:.38; cursor:not-allowed; pointer-events:none; } .shop-pager-arrow{ display:inline-flex; align-items:center; justify-content:center; width:14px; height:18px; overflow:hidden; font-size:22px; font-family:Arial,sans-serif; font-weight:400; line-height:16px; } .shop-pager-dots{ min-width:24px; text-align:center; color:#999; font-size:12px; font-weight:800; } /* Safety lock: Laravel/Tailwind SVG must never expand inside Shop pagination. */ .shop-pagination-wrap svg{ width:18px !important; height:18px !important; max-width:18px !important; max-height:18px !important; } @media(max-width:720px){ .shop-pager{ align-items:stretch; flex-direction:column; padding:14px; } .shop-pager-summary{ text-align:center; } .shop-pager-controls{ justify-content:center; flex-wrap:wrap; } } @media(max-width:430px){ .shop-pager-nav{ padding:0 9px; } .shop-pager-nav span:not(.shop-pager-arrow){ display:none; } .shop-pager-nav{ width:36px; padding:0; } } /* ========================================================= PUNDA PRODUCT COLOR SWATCH V5.1 Original branded treatment ========================================================= */ .studio-swatches{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .studio-swatch{ position:relative; width:30px; height:30px; min-width:30px; padding:0; border-radius:999px; border:1px solid #d7d9dc; background:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow: 0 1px 2px rgba(15,23,42,.04), inset 0 0 0 1px rgba(255,255,255,.35); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .studio-swatch:hover{ transform:translateY(-1px) scale(1.04); border-color:#adb3ba; box-shadow:0 4px 10px rgba(15,23,42,.10); } .studio-swatch-color{ display:block; width:21px; height:21px; border-radius:999px; /* Primary + secondary split. Single-color products automatically look solid because --swatch and --swatch2 are equal. */ background: linear-gradient( 135deg, var(--swatch) 0%, var(--swatch) 49%, var(--swatch2) 51%, var(--swatch2) 100% ); border:1px solid rgba(15,23,42,.16); box-shadow: inset 0 1px 1px rgba(255,255,255,.35), inset 0 -1px 1px rgba(0,0,0,.05); } /* Active state khas PUNDA: teal outer ring + dark micro-check */ .studio-swatch.active{ border-color:#12a99a; box-shadow: 0 0 0 3px rgba(18,169,154,.17), 0 3px 8px rgba(15,23,42,.08); } .studio-swatch-check{ position:absolute; right:-4px; bottom:-4px; width:14px; height:14px; border-radius:999px; display:none; align-items:center; justify-content:center; background:#222; color:#fff; font-style:normal; font-size:8px; font-weight:900; line-height:1; box-shadow: 0 0 0 2px #fff, 0 2px 5px rgba(15,23,42,.20); } .studio-swatch.active .studio-swatch-check{ display:flex; } /* Make pale colors easier to see. The inner border keeps white / light pink / aqua readable. */ .studio-swatch-color::after{ content:""; display:block; width:100%; height:100%; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(17,24,39,.06); } /* Keyboard accessibility */ .studio-swatch:focus-visible{ outline:3px solid rgba(18,169,154,.24); outline-offset:3px; } /* Desktop / tablet balance */ @media(max-width:900px){ .studio-swatches{ gap:9px; } .studio-swatch{ width:31px; height:31px; min-width:31px; } .studio-swatch-color{ width:22px; height:22px; } } /* Mobile touch target stays comfortable, but visually still compact. */ @media(max-width:560px){ .studio-swatches{ gap:10px; } .studio-swatch{ width:34px; height:34px; min-width:34px; } .studio-swatch-color{ width:23px; height:23px; } } /* ========================================================= PUNDA COLOR SWATCH V5.1.1 Compatibility fix against legacy studio-swatch CSS ========================================================= */ /* Inner color disc. !important sengaja digunakan karena storefront lama mempunyai selector .studio-swatch span yang lebih agresif. */ .studio-swatches .studio-swatch > .studio-swatch-color{ position:relative !important; display:block !important; width:21px !important; height:21px !important; padding:0 !important; margin:0 !important; border-radius:50% !important; background: linear-gradient( 135deg, var(--swatch) 0%, var(--swatch) 48%, var(--swatch2) 52%, var(--swatch2) 100% ) !important; border:1px solid rgba(15,23,42,.18) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.28), inset 0 -1px 1px rgba(0,0,0,.05) !important; color:transparent !important; font-size:0 !important; line-height:0 !important; } /* HAPUS pseudo-element legacy. Ini yang kemungkinan menyebabkan centang muncul pada setiap lingkaran. */ .studio-swatches .studio-swatch > .studio-swatch-color::before, .studio-swatches .studio-swatch > .studio-swatch-color::after{ content:none !important; display:none !important; } /* Badge check custom PUNDA: default HARUS tersembunyi. */ .studio-swatches .studio-swatch > .studio-swatch-check{ display:none !important; position:absolute !important; right:-4px !important; bottom:-4px !important; width:14px !important; height:14px !important; padding:0 !important; margin:0 !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; background:#222 !important; color:#fff !important; font-size:8px !important; font-style:normal !important; font-weight:900 !important; line-height:1 !important; box-shadow: 0 0 0 2px #fff, 0 2px 5px rgba(15,23,42,.20) !important; } /* Centang HANYA warna aktif */ .studio-swatches .studio-swatch.active > .studio-swatch-check{ display:flex !important; } /* ========================================================= OUTER BUTTON ========================================================= */ .studio-swatches .studio-swatch{ position:relative !important; width:30px !important; min-width:30px !important; height:30px !important; padding:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; background:#fff !important; border:1px solid #d7dce1 !important; overflow:visible !important; } /* Active PUNDA signature. Bukan membuat seluruh bulatan berubah warna: hanya outer selection ring. */ .studio-swatches .studio-swatch.active{ border-color:#13a99b !important; box-shadow: 0 0 0 3px rgba(19,169,155,.17), 0 3px 8px rgba(15,23,42,.08) !important; } /* Legacy checkmarks pada generic span di dalam studio-swatch dinonaktifkan. */ .studio-swatches .studio-swatch > span::before, .studio-swatches .studio-swatch > span::after{ content:none !important; } /* Mobile */ @media(max-width:560px){ .studio-swatches .studio-swatch{ width:34px !important; min-width:34px !important; height:34px !important; } .studio-swatches .studio-swatch > .studio-swatch-color{ width:23px !important; height:23px !important; } } /* ========================================================= PUNDA COLOR SELECTOR V5.1.2 Completely isolated from legacy .studio-swatch ========================================================= */ .punda-color-swatch{ appearance:none !important; -webkit-appearance:none !important; position:relative !important; width:30px !important; min-width:30px !important; height:30px !important; margin:0 !important; padding:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border-radius:999px !important; background:#ffffff !important; border:1px solid #d7dce2 !important; overflow:visible !important; cursor:pointer !important; box-shadow: 0 1px 2px rgba(15,23,42,.05) !important; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important; } /* MATIKAN seluruh pseudo element browser / CSS lama */ .punda-color-swatch::before, .punda-color-swatch::after{ content:none !important; display:none !important; } .punda-color-swatch-fill{ position:relative !important; display:block !important; width:21px !important; height:21px !important; min-width:21px !important; min-height:21px !important; margin:0 !important; padding:0 !important; border-radius:999px !important; border:1px solid rgba(15,23,42,.17) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.35), inset 0 -1px 1px rgba(0,0,0,.06) !important; color:transparent !important; font-size:0 !important; line-height:0 !important; } /* Jangan izinkan pseudo-element legacy muncul */ .punda-color-swatch-fill::before, .punda-color-swatch-fill::after{ content:none !important; display:none !important; } /* Hover */ .punda-color-swatch:hover{ transform:translateY(-1px) scale(1.05) !important; border-color:#aeb5bc !important; box-shadow: 0 4px 10px rgba(15,23,42,.12) !important; } /* Selected = bahasa visual PUNDA */ .punda-color-swatch.active{ border-color:#0ca89a !important; box-shadow: 0 0 0 3px rgba(12,168,154,.20), 0 3px 8px rgba(15,23,42,.10) !important; } /* titik kecil sebagai penanda aktif — bukan centang */ .punda-color-swatch.active::after{ content:"" !important; display:block !important; position:absolute !important; right:-3px !important; bottom:-3px !important; width:8px !important; height:8px !important; border-radius:999px !important; background:#0ca89a !important; border:2px solid #fff !important; box-sizing:content-box !important; box-shadow:0 1px 3px rgba(0,0,0,.18) !important; } .punda-color-swatch:focus-visible{ outline:3px solid rgba(12,168,154,.24) !important; outline-offset:3px !important; } @media(max-width:560px){ .punda-color-swatch{ width:34px !important; min-width:34px !important; height:34px !important; } .punda-color-swatch-fill{ width:23px !important; min-width:23px !important; height:23px !important; min-height:23px !important; } } /* ========================================================= PUNDA COLOR COINS V5.1.3 FINAL ISOLATED COLOR SELECTOR ========================================================= */ /* |-------------------------------------------------------------------------- | GRID |-------------------------------------------------------------------------- */ #studio-swatches{ display:grid !important; grid-template-columns: repeat(auto-fill, 28px) !important; gap:9px 8px !important; align-items:center !important; justify-content:start !important; width:100% !important; padding:4px 3px 5px !important; overflow:visible !important; } /* |-------------------------------------------------------------------------- | COLOR COIN |-------------------------------------------------------------------------- | | all:unset memutus seluruh style button/swatch lama. | */ #studio-swatches > button.punda-color-coin{ all:unset !important; box-sizing:border-box !important; position:relative !important; display:block !important; width:28px !important; height:28px !important; min-width:28px !important; min-height:28px !important; max-width:28px !important; max-height:28px !important; border-radius:999px !important; background: var(--punda-swatch-bg,#8B9096) !important; cursor:pointer !important; box-shadow: 0 0 0 1px #C9CED4, 0 1px 3px rgba(15,23,42,.10) !important; transition: transform .14s ease, box-shadow .14s ease !important; } /* |-------------------------------------------------------------------------- | Jangan izinkan CSS lama membuat isi/button lain |-------------------------------------------------------------------------- */ #studio-swatches > button.punda-color-coin::before, #studio-swatches > button.punda-color-coin::after{ content:none !important; display:none !important; } /* |-------------------------------------------------------------------------- | HOVER |-------------------------------------------------------------------------- */ #studio-swatches > button.punda-color-coin:hover{ transform: translateY(-1px) scale(1.08) !important; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px #AEB5BC, 0 3px 8px rgba(15,23,42,.12) !important; } /* |-------------------------------------------------------------------------- | ACTIVE — PUNDA SIGNATURE |-------------------------------------------------------------------------- | | Tidak memakai centang. | Ring teal menjadi identitas selector PUNDA. | */ #studio-swatches > button.punda-color-coin.active{ transform: scale(1.05) !important; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #12A99A, 0 4px 9px rgba(15,23,42,.15) !important; } /* |-------------------------------------------------------------------------- | KEYBOARD |-------------------------------------------------------------------------- */ #studio-swatches > button.punda-color-coin:focus-visible{ outline: 3px solid rgba(18,169,154,.25) !important; outline-offset: 4px !important; } /* |-------------------------------------------------------------------------- | MOBILE |-------------------------------------------------------------------------- */ @media(max-width:560px){ #studio-swatches{ grid-template-columns: repeat(auto-fill, 32px) !important; gap: 10px 9px !important; } #studio-swatches > button.punda-color-coin{ width:32px !important; height:32px !important; min-width:32px !important; min-height:32px !important; max-width:32px !important; max-height:32px !important; } } /* ========================================================= PUNDA LIVE MOCKUP V5.2.0 ========================================================= */ .product-real-visual{ position:relative; } /* Overlay area */ .live-mockup-layer{ position:absolute; inset:0; z-index:8; overflow:hidden; pointer-events:none; } /* |-------------------------------------------------------------------------- | CUSTOMER DESIGN |-------------------------------------------------------------------------- */ .live-design-image{ position:absolute; left:50%; top:50%; width:min(180px, 28%); max-width:none; height:auto; object-fit:contain; transform-origin:center center; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; pointer-events:auto; filter:drop-shadow( 0 4px 5px rgba(0,0,0,.10) ); } .live-design-image.dragging{ cursor:grabbing; } /* Soft guide around editable artwork. Tidak ikut masuk ke capture. */ .live-design-guide{ position:absolute; left:50%; top:50%; width:34%; height:52%; transform:translate(-50%,-50%); border:1px dashed rgba(18,169,154,.35); border-radius:14px; pointer-events:none; } /* |-------------------------------------------------------------------------- | CAPTURE FLASH |-------------------------------------------------------------------------- */ .mockup-capture-flash{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:20; padding:12px 18px; border-radius:999px; background:rgba(17,24,39,.92); color:#fff; font-size:12px; font-weight:900; box-shadow: 0 8px 30px rgba(0,0,0,.20); } /* |-------------------------------------------------------------------------- | CONTROL PANEL |-------------------------------------------------------------------------- */ .live-mockup-panel{ margin-top:12px; padding:13px; border:1px solid #d9ebe8; border-radius:14px; background: linear-gradient( 145deg, #f5fffd, #ffffff ); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); } .live-mockup-title{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; } .live-mockup-title > div{ display:flex; align-items:center; gap:7px; } .live-mockup-title strong{ font-size:11px; letter-spacing:.03em; } .live-mockup-title small{ max-width:180px; color:#6b7280; font-size:10px; line-height:1.4; text-align:right; } .live-dot{ width:8px; height:8px; border-radius:999px; background:#12a99a; box-shadow: 0 0 0 4px rgba(18,169,154,.12); } /* |-------------------------------------------------------------------------- | SCALE |-------------------------------------------------------------------------- */ .mockup-scale-control{ display:grid; grid-template-columns: 34px minmax(0,1fr) 34px 46px; gap:8px; align-items:center; } .mockup-scale-control input[type=range]{ width:100%; accent-color:#12a99a; } .mockup-scale-control strong{ font-size:11px; text-align:right; } .mockup-control-btn{ width:34px; height:34px; border:1px solid #dbe1e6; border-radius:9px; background:#fff; color:#111827; font-size:18px; font-weight:800; cursor:pointer; } .mockup-control-btn:hover{ border-color:#12a99a; background:#f4fffd; } /* |-------------------------------------------------------------------------- | ACTION |-------------------------------------------------------------------------- */ .mockup-action-row{ display:grid; grid-template-columns: .8fr 1.4fr; gap:8px; margin-top:11px; } .mockup-secondary-btn, .mockup-capture-btn{ min-height:38px; border-radius:10px; font-size:10px; font-weight:900; cursor:pointer; } .mockup-secondary-btn{ border:1px solid #d9dee4; background:#fff; color:#374151; } .mockup-capture-btn{ border:1px solid #12a99a; background:#12a99a; color:#fff; letter-spacing:.02em; } .mockup-capture-btn:hover{ background:#0e9589; } .mockup-capture-btn:disabled{ opacity:.55; cursor:wait; } .mockup-message{ margin-top:9px; color:#6b7280; font-size:9px; line-height:1.45; } /* |-------------------------------------------------------------------------- | MOBILE |-------------------------------------------------------------------------- */ @media(max-width:720px){ .live-design-image{ width:min(150px,32%); } .mockup-action-row{ grid-template-columns:1fr; } .live-mockup-title{ flex-direction:column; } .live-mockup-title small{ max-width:none; text-align:left; } } /* ========================================================= PUNDA MULTI AREA PRODUCT STUDIO V5.3.1 ========================================================= */ .punda-area-studio{ margin:0 0 14px; padding:12px; border:1px solid #e5e7eb; border-radius:15px; background: linear-gradient( 145deg, rgba(255,255,255,.98), rgba(248,250,252,.96) ); } .punda-area-studio[hidden]{ display:none !important; } .punda-area-intro{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; } .punda-area-intro > div{ min-width:0; } .punda-area-intro strong{ display:block; font-size:12px; font-weight:900; color:#20242a; } .punda-area-intro small{ display:block; margin-top:2px; font-size:9px; line-height:1.45; color:#818791; } .punda-area-limit{ flex:0 0 auto; padding:5px 8px; border-radius:999px; background:#f1f5f9; font-size:8px; font-weight:900; color:#64748b; } .punda-area-list{ display:grid; gap:7px; } .punda-area-card{ appearance:none; width:100%; display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:9px; padding:9px 10px; border:1px solid #e2e5e9; border-radius:12px; background:#fff; text-align:left; cursor:pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .punda-area-card:hover{ border-color:#b9c0c8; transform:translateY(-1px); } .punda-area-card.active{ border-color:#14b8a6; box-shadow: 0 0 0 2px rgba(20,184,166,.10); } .punda-area-index{ width:29px; height:29px; display:grid; place-items:center; border-radius:9px; background:#f1f5f9; color:#475569; font-size:9px; font-weight:950; } .punda-area-card.active .punda-area-index{ background:#ecfdf9; color:#0f8f83; } .punda-area-copy{ min-width:0; } .punda-area-copy strong{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#20242a; font-size:10px; font-weight:950; } .punda-area-copy small{ display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#7b818b; font-size:8px; } .punda-area-state{ display:inline-flex; align-items:center; justify-content:center; min-width:54px; padding:5px 7px; border-radius:999px; background:#f3f4f6; color:#777e87; font-size:7px; font-weight:950; text-transform:uppercase; letter-spacing:.03em; } .punda-area-state.ready{ background:#ecfdf5; color:#087c65; } .punda-area-state.editing{ background:#eff6ff; color:#2563eb; } .punda-add-area{ appearance:none; width:100%; margin-top:8px; display:flex; align-items:center; justify-content:center; gap:5px; padding:9px; border:1px dashed #aab2bb; border-radius:11px; background:#fafbfc; color:#30353b; cursor:pointer; font-size:9px; font-weight:950; letter-spacing:.02em; } .punda-add-area:hover{ border-color:#14b8a6; background:#f0fdfa; color:#087f75; } .punda-add-area:disabled{ opacity:.45; cursor:not-allowed; } .punda-area-help{ margin-top:8px; padding:7px 9px; border-radius:9px; background:#f8fafc; color:#7c828a; font-size:8px; line-height:1.5; } .punda-active-area-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:9px 0 10px; padding:7px 9px; border-radius:10px; background:#f8fafc; } .punda-active-area-head[hidden]{ display:none !important; } .punda-active-area-head > div{ display:flex; align-items:center; gap:6px; min-width:0; } .punda-active-area-head span{ color:#8a9199; font-size:7px; font-weight:950; } .punda-active-area-head strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#252a30; font-size:9px; } #punda-active-area-status{ flex:0 0 auto; padding:4px 7px; border-radius:999px; background:#eef2f6; color:#747b84; } #punda-active-area-status.ready{ background:#eafbf5; color:#087b65; } .punda-area-remove{ appearance:none; border:0; background:transparent; padding:2px 0 0; color:#b42318; cursor:pointer; font-size:8px; font-weight:900; } .punda-area-price-note{ color:#0f766e !important; font-weight:800; } @media(max-width:560px){ .punda-area-card{ grid-template-columns:28px minmax(0,1fr) auto; } .punda-area-intro{ align-items:center; } } /* ========================================================= END PUNDA MULTI AREA V5.3.1 ========================================================= */ /* ========================================================= PUNDA PRODUCT STUDIO V5.5.2 CANONICAL PRODUCT LAYOUT ========================================================= */ /* --------------------------------------------------------- 01. PAGE WIDTH --------------------------------------------------------- */ .v501-polish{ padding: 18px 0 48px !important; } .v501-polish > .container{ width: min( 1540px, calc(100% - 32px) ) !important; max-width:none !important; } /* --------------------------------------------------------- 02. MAIN PAGE CONFIG | VISUAL --------------------------------------------------------- */ .v501-polish .product-studio-grid{ display:grid !important; grid-template-columns: 340px minmax(0,1fr) !important; gap: 16px !important; align-items:start !important; } /* * Blade menulis Visual lebih dulu, * tetapi secara visual Config tetap kiri. */ .v501-polish .studio-config-card{ grid-column: 1 !important; grid-row: 1 !important; position: sticky !important; top: 88px !important; max-height: calc(100vh - 104px) !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 0 !important; scrollbar-width: thin; scrollbar-gutter: stable; } .v501-polish .studio-visual-card{ grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; padding: 16px !important; /* * Container query memakai lebar * workspace nyata, bukan viewport. */ container-type: inline-size; container-name: punda-product-studio; } /* --------------------------------------------------------- 03. CONFIG PANEL LEFT --------------------------------------------------------- */ .v501-polish .punda-config-form-body-v55{ padding: 0 18px 18px !important; } .v501-polish .punda-config-form-body-v55 .studio-config-section{ padding: 14px 0 !important; } /* * Qty lalu Jenis Pesanan. * Tidak dibelah 50:50 karena hasilnya janggal. */ .v501-polish .punda-config-form-body-v55 .studio-row-two{ display:grid !important; grid-template-columns: 1fr !important; gap: 0 !important; } .v501-polish .punda-config-form-body-v55 .studio-row-two > div + div{ margin-top: 14px !important; padding: 14px 0 0 !important; border-left: 0 !important; border-top: 1px solid #edf0f3 !important; } .v501-polish .studio-qty{ width: 176px !important; max-width: 100% !important; } /* * Polosan / Cetak DTF / Bordir * menjadi 3 pilihan sejajar. */ .v501-polish .studio-custom-choice{ display:grid !important; grid-template-columns: repeat( 3, minmax(0,1fr) ) !important; gap: 7px !important; width: 100% !important; } .v501-polish .studio-custom-choice label{ min-width: 0 !important; } .v501-polish .studio-custom-choice label span{ display:flex !important; align-items:center !important; justify-content:center !important; min-height: 40px !important; width: 100% !important; padding: 8px 5px !important; font-size: 9px !important; text-align: center !important; white-space: nowrap; } /* --------------------------------------------------------- 04. PRODUCT STUDIO TOOLS | PREVIEW --------------------------------------------------------- */ .v501-polish .punda-studio-workbench-v55{ display:grid !important; grid-template-columns: 310px minmax(0,1fr) !important; gap: 14px !important; align-items:start !important; min-width: 0 !important; } /* * Polosan: * studio custom hilang, * kaos memakai seluruh ruang visual. */ .v501-polish .punda-design-tools-v55:has( #custom-fields[hidden] ){ display: none !important; } .v501-polish .punda-studio-workbench-v55:has( #custom-fields[hidden] ){ grid-template-columns: minmax(0,1fr) !important; } /* --------------------------------------------------------- 05. STUDIO CUSTOM CARD --------------------------------------------------------- */ .v501-polish .punda-design-tools-v55{ display:block; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; max-height: 630px !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 12px !important; border: 1px solid #dfe7e5 !important; border-radius: 14px !important; background: #fff !important; box-shadow: 0 7px 22px rgba( 30, 45, 40, .06 ) !important; scrollbar-width: thin; scrollbar-gutter: stable; } .v501-polish .punda-design-tools-head-v55{ position: sticky !important; top: -12px !important; z-index: 20 !important; display:flex !important; align-items:center !important; justify-content: space-between !important; margin: -12px -12px 10px !important; padding: 11px 12px !important; border-bottom: 1px solid #e7edeb !important; background: rgba( 255, 255, 255, .98 ) !important; } .v501-polish .punda-design-tools-head-v55 strong{ font-size: 12px !important; } .v501-polish .punda-design-tools-head-v55 small{ font-size: 8.5px !important; color: #78827f !important; } .v501-polish .punda-design-tools-v55 .studio-config-section{ width: 100% !important; padding: 11px 0 !important; } .v501-polish .punda-design-tools-v55 .studio-section-head strong{ font-size: 11.5px !important; } .v501-polish .punda-design-tools-v55 .field-label{ font-size: 10px !important; } .v501-polish .punda-design-tools-v55 .config-select, .v501-polish .punda-design-tools-v55 .config-textarea{ font-size: 10.5px !important; } /* * Lokasi dan ukuran cetak */ .v501-polish .punda-design-tools-v55 .config-two-col{ display:grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; } /* * Upload dan mockup tidak boleh melebar * keluar dari card tools. */ .v501-polish .punda-design-tools-v55 .upload-zone, .v501-polish .punda-design-tools-v55 #live-mockup-panel{ box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; } /* * Catatan tetap bagian Studio Custom. */ .v501-polish .punda-design-tools-v55 .studio-config-section:has( #note ){ width: 100% !important; padding: 12px 0 0 !important; } /* --------------------------------------------------------- 06. PREVIEW COLUMN --------------------------------------------------------- */ .v501-polish .punda-preview-column-v55{ min-width: 0 !important; width: 100% !important; } .v501-polish .punda-preview-column-v55 .visual-stage-wrap{ display:grid !important; grid-template-columns: minmax(0,1fr) 88px !important; gap: 10px !important; min-width: 0 !important; min-height: 600px !important; } .v501-polish .punda-preview-column-v55 .visual-stage{ grid-column: 1 !important; grid-row: 1 !important; position: relative !important; min-width: 0 !important; min-height: 600px !important; height: min( 70vh, 660px ) !important; padding: 68px 22px 44px !important; overflow: hidden !important; } /* --------------------------------------------------------- 07. 4 VIEW --------------------------------------------------------- */ .v501-polish .punda-preview-column-v55 .view-rail{ grid-column: 2 !important; grid-row: 1 !important; display:flex !important; flex-direction: column !important; gap: 8px !important; min-width: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: thin; } .v501-polish .punda-preview-column-v55 .view-thumb{ width: 100% !important; min-height: 0 !important; height: calc( ( min(70vh,660px) - 24px ) / 4 ) !important; max-height: 150px !important; padding: 5px !important; } .v501-polish .punda-preview-column-v55 .view-thumb-art{ height: calc( 100% - 23px ) !important; min-height: 70px !important; } /* --------------------------------------------------------- 08. GARMENT --------------------------------------------------------- */ .v501-polish .punda-preview-column-v55 .product-real-visual{ box-sizing: border-box !important; width: 100% !important; min-height: 0 !important; height: 100% !important; max-height: none !important; padding-right: 135px !important; } .v501-polish .punda-preview-column-v55 .product-real-visual img{ width: auto !important; height: auto !important; max-width: 82% !important; max-height: 510px !important; object-fit: contain !important; } /* --------------------------------------------------------- 09. SIZE GUIDE right of garment, under Sudut --------------------------------------------------------- */ .v501-polish .punda-measure-dock-v55{ position: absolute !important; top: 54px !important; right: 12px !important; z-index: 40 !important; box-sizing: border-box !important; width: 172px !important; margin: 0 !important; padding: 0 !important; } .v501-polish .punda-measure-dock-v55:empty{ display: none !important; } .v501-polish .punda-measure-dock-v55 #punda-measure-control-v543{ box-sizing: border-box !important; width: 100% !important; margin: 0 !important; padding: 9px !important; border: 1px solid #dce7e4 !important; border-radius: 11px !important; background: rgba( 255, 255, 255, .97 ) !important; box-shadow: 0 6px 18px rgba( 25, 39, 35, .07 ) !important; } .v501-polish .punda-measure-dock-v55 #punda-measure-summary-v543{ box-sizing: border-box !important; width: 100% !important; margin: 6px 0 0 !important; padding: 8px !important; border: 1px solid #e3eae8 !important; border-radius: 9px !important; background: rgba( 249, 252, 251, .98 ) !important; } /* --------------------------------------------------------- 10. CONTAINER RESPONSIVE --------------------------------------------------------- */ /* * Ini menggunakan lebar area preview sebenarnya, * bukan lebar browser. */ @container punda-product-studio ( max-width: 900px ){ .punda-studio-workbench-v55{ grid-template-columns: 275px minmax(0,1fr) !important; } .punda-measure-dock-v55{ width: 152px !important; } .punda-preview-column-v55 .product-real-visual{ padding-right: 110px !important; } } @container punda-product-studio ( max-width: 720px ){ .punda-studio-workbench-v55{ grid-template-columns: 1fr !important; } .punda-preview-column-v55{ grid-row: 1 !important; } .punda-design-tools-v55{ grid-row: 2 !important; max-height: none !important; margin-top: 12px !important; } } /* --------------------------------------------------------- 11. REAL MOBILE --------------------------------------------------------- */ @media(max-width:760px){ .v501-polish > .container{ width: calc(100% - 20px) !important; } .v501-polish .product-studio-grid{ grid-template-columns: 1fr !important; } .v501-polish .studio-visual-card{ grid-column: 1 !important; grid-row: 1 !important; } .v501-polish .studio-config-card{ grid-column: 1 !important; grid-row: 2 !important; position: static !important; max-height: none !important; } .v501-polish .punda-preview-column-v55 .visual-stage-wrap{ grid-template-columns: 1fr !important; } .v501-polish .punda-preview-column-v55 .view-rail{ grid-column: 1 !important; grid-row: 2 !important; display:grid !important; grid-template-columns: repeat( 4, minmax(0,1fr) ) !important; } .v501-polish .punda-preview-column-v55 .visual-stage{ min-height: 440px !important; height: auto !important; } .v501-polish .punda-preview-column-v55 .view-thumb{ height: 96px !important; } } /* ========================================================= END PUNDA PRODUCT STUDIO V5.5.2 ========================================================= */ /* ========================================================= PUNDA PRODUCT STUDIO V5.6 CLEAN GARMENT CANVAS + REQUIRED SIZE FLOW ========================================================= */ /* --------------------------------------------------------- A. STUDIO = TOOL | PREVIEW --------------------------------------------------------- */ .v501-polish .punda-studio-workbench-v55{ grid-template-columns: 290px minmax(0,1fr) !important; gap: 12px !important; } /* --------------------------------------------------------- B. PREVIEW = CANVAS | GUIDE | 4 VIEW Tidak ada control card lagi di dalam canvas kaos. --------------------------------------------------------- */ .v501-polish .punda-preview-column-v55 .visual-stage-wrap{ display:grid !important; grid-template-columns: minmax(0,1fr) 178px 86px !important; gap: 9px !important; align-items:start !important; min-width:0 !important; } /* * KAOS */ .v501-polish .punda-preview-column-v55 .visual-stage{ grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; min-width: 0 !important; padding: 62px 20px 42px !important; } /* * PENTING: * * Hapus ruang palsu di kanan yang sebelumnya * dibuat untuk card Panduan Ukuran. * * Garment kembali benar-benar CENTER. */ .v501-polish .punda-preview-column-v55 .product-real-visual{ padding-right: 0 !important; padding-left: 0 !important; margin: 0 !important; width: 100% !important; justify-items: center !important; align-items: center !important; } .v501-polish .punda-preview-column-v55 .product-real-visual img{ max-width: 90% !important; max-height: 510px !important; margin: 0 auto !important; } /* --------------------------------------------------------- C. PANDUAN UKURAN — KOLOM SENDIRI --------------------------------------------------------- */ .v501-polish .punda-measure-dock-v55{ position: static !important; inset: auto !important; grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; max-width: none !important; margin: 52px 0 0 !important; padding: 0 !important; align-self: start !important; z-index: auto !important; } .v501-polish .punda-measure-dock-v55 #punda-measure-control-v543{ width: 100% !important; margin: 0 !important; padding: 10px !important; border-radius: 12px !important; box-shadow: none !important; } .v501-polish .punda-measure-dock-v55 #punda-measure-summary-v543{ width: 100% !important; margin: 7px 0 0 !important; padding: 9px !important; box-shadow: none !important; } /* --------------------------------------------------------- D. VIEW RAIL — KOLOM SENDIRI --------------------------------------------------------- */ .v501-polish .punda-preview-column-v55 .view-rail{ grid-column: 3 !important; grid-row: 1 !important; width: 100% !important; gap: 7px !important; align-self: start !important; } .v501-polish .punda-preview-column-v55 .view-thumb{ width: 100% !important; } /* --------------------------------------------------------- E. STUDIO SIZE STATUS --------------------------------------------------------- */ .punda-studio-size-v56{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin: 0 0 10px; padding: 9px 10px; border: 1px solid #dce8e5; border-radius: 11px; background: #f4fbfa; } .punda-studio-size-v56 > div{ min-width:0; } .punda-studio-size-v56 span{ display:block; color:#0d8b7f; font-size: 7px; font-weight: 950; letter-spacing: .07em; } .punda-studio-size-v56 strong{ display:block; margin-top: 2px; color: #202a27; font-size: 11px; line-height: 1.2; } .punda-studio-size-v56 small{ display:block; margin-top: 2px; color: #747e7b; font-size: 7.5px; line-height: 1.35; } #punda-studio-size-jump-v56{ appearance:none; flex: 0 0 auto; padding: 7px 9px; border: 1px solid #b8deda; border-radius: 8px; background: #fff; color: #087d72; cursor:pointer; font-size: 8px; font-weight: 900; } /* --------------------------------------------------------- F. SIZE WAJIB --------------------------------------------------------- */ .punda-size-required-v56{ display:flex; align-items:flex-start; gap: 8px; margin-top: 9px; padding: 9px 10px; border: 1px solid #e6e9ed; border-radius: 10px; background: #fafbfc; transition: .18s ease; } .punda-size-required-icon-v56{ display:grid; place-items:center; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: #edf1f5; color: #65707c; font-size: 10px; font-weight: 950; } .punda-size-required-v56 strong{ display:block; font-size: 9px; color: #313940; } .punda-size-required-v56 small{ display:block; margin-top: 2px; font-size: 7.5px; line-height: 1.4; color: #7a838d; } .punda-size-required-v56.is-warning{ border-color: #f3bf72; background: #fff8e9; box-shadow: 0 0 0 3px rgba( 242, 169, 66, .10 ); } .punda-size-required-v56.is-warning .punda-size-required-icon-v56{ background: #f59e0b; color: #fff; } .punda-size-required-v56.is-complete{ border-color: #ccebe5; background: #f3fbf9; } .punda-size-required-v56.is-complete .punda-size-required-icon-v56{ background: #12a99a; color: #fff; } .punda-size-required-v56.is-complete .punda-size-required-icon-v56::before{ content: "✓"; } .punda-size-required-v56.is-complete .punda-size-required-icon-v56{ font-size: 0; } .punda-size-required-v56.is-complete .punda-size-required-icon-v56::before{ font-size: 10px; } /* * Attention pulse hanya saat customer * mencoba melewati size. */ #punda-size-section-v56 .punda-size-attention-v56, #punda-size-section-v56.punda-size-attention-v56{ border-radius: 12px; animation: pundaSizeAttentionV56 .65s ease 2; } @keyframes pundaSizeAttentionV56{ 0%, 100%{ box-shadow: 0 0 0 0 rgba( 245, 158, 11, 0 ); } 50%{ box-shadow: 0 0 0 5px rgba( 245, 158, 11, .17 ); } } /* --------------------------------------------------------- G. TOP ORDER FLOW --------------------------------------------------------- */ .punda-order-flow-v56{ display:grid; grid-template-columns: repeat( 4, minmax(0,1fr) ); gap: 5px; margin: 12px 0 2px; padding: 7px; border: 1px solid #e9ecef; border-radius: 12px; background: #fafbfc; } .punda-order-flow-v56 button{ appearance:none; min-width:0; display:flex; flex-direction:column; align-items:center; gap: 3px; padding: 6px 3px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: #7b848e; } .punda-order-flow-v56 b{ display:grid; place-items:center; width: 19px; height: 19px; border-radius: 50%; background: #e9edf1; font-size: 7px; } .punda-order-flow-v56 span{ font-size: 7px; font-weight: 900; white-space: nowrap; } .punda-order-flow-v56 button.is-done{ color: #087d72; } .punda-order-flow-v56 button.is-done b{ background: #12a99a; color: #fff; } /* --------------------------------------------------------- H. STEP 03 → 04 SECARA VISUAL --------------------------------------------------------- */ .v501-polish .punda-config-form-body-v55 .studio-row-two{ display:flex !important; flex-direction: column !important; gap: 0 !important; } /* * Jenis Pesanan sekarang step 03, * sehingga tampil SEBELUM Jumlah. */ .v501-polish .punda-config-form-body-v55 .studio-row-two > div:nth-child(2){ order: 1; } .v501-polish .punda-config-form-body-v55 .studio-row-two > div:nth-child(1){ order: 2; margin-top: 12px; padding-top: 12px; border-top: 1px solid #edf0f3; } .v501-polish .punda-config-form-body-v55 .studio-row-two > div + div{ border-left: 0 !important; padding-left: 0 !important; } /* --------------------------------------------------------- I. RESPONSIVE --------------------------------------------------------- */ @media(max-width:1280px){ .v501-polish .punda-studio-workbench-v55{ grid-template-columns: 265px minmax(0,1fr) !important; } .v501-polish .punda-preview-column-v55 .visual-stage-wrap{ grid-template-columns: minmax(0,1fr) 158px 78px !important; } } @media(max-width:1050px){ .v501-polish .punda-preview-column-v55 .visual-stage-wrap{ grid-template-columns: minmax(0,1fr) 82px !important; } .v501-polish .punda-measure-dock-v55{ grid-column: 1 !important; grid-row: 2 !important; margin: 10px 0 0 !important; } .v501-polish .punda-preview-column-v55 .view-rail{ grid-column: 2 !important; } } /* ========================================================= END PUNDA PRODUCT STUDIO V5.6 ========================================================= */ /* ========================================================= PUNDA PHYSICAL SYNC V5.6.1 ========================================================= */ /* |-------------------------------------------------------------------------- | SATU GUIDE CUSTOM SAJA |-------------------------------------------------------------------------- | | Guide V5.4.1 dan custom box V5.4.3 | tidak lagi perlu tampil. | | Measurement width/length V5.4.3 tetap dipakai. | */ #punda-physical-guide-v541, #punda-custom-box-v543{ display:none !important; } /* * Legacy live guide sebelumnya * diberi display:none !important. * * Class V5.6.1 mengambil alih hanya * ketika physical spec valid. */ #live-design-guide.punda-v561-guide{ display:block !important; position:absolute !important; box-sizing:border-box !important; z-index:9 !important; pointer-events:none !important; border: 1.5px dashed rgba( 8, 148, 136, .82 ) !important; border-radius: 9px !important; background: rgba( 12, 171, 156, .035 ) !important; box-shadow: 0 0 0 1px rgba( 255, 255, 255, .45 ) inset !important; } #live-design-guide.punda-v561-guide::after{ content: attr( data-punda-label ); position:absolute; left:50%; bottom: -25px; transform: translateX(-50%); max-width: 220px; padding: 5px 8px; border-radius: 999px; background: #078f83; color: #fff; font-size: 7px; line-height: 1.1; font-weight: 900; white-space: nowrap; box-shadow: 0 3px 9px rgba( 15, 23, 42, .12 ); } #live-design-guide.punda-v561-guide.outside{ border-color: #dc574d !important; background: rgba( 220, 87, 77, .055 ) !important; } #live-design-guide.punda-v561-guide.outside::after{ background: #c7463d; } /* |-------------------------------------------------------------------------- | LOKASI BELUM DIPILIH |-------------------------------------------------------------------------- | | Jangan tampilkan garis panjang/lebar | pada koordinat yang belum mempunyai | view custom yang pasti. | */ #product-real-visual.punda-v561-await-position #punda-measure-overlay-v543{ visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } /* |-------------------------------------------------------------------------- | ARTWORK |-------------------------------------------------------------------------- | | Browser tidak boleh memaksakan | min/max width selain physical engine. | */ #live-design-image{ max-width:none !important; max-height:none !important; } /* |-------------------------------------------------------------------------- | CAPTURE |-------------------------------------------------------------------------- */ html.punda-capture-busy #live-design-guide.punda-v561-guide{ display:none !important; } /* ========================================================= END PUNDA PHYSICAL SYNC V5.6.1 ========================================================= */ /* ========================================================= PUNDA ARTWORK RENDER AUTHORITY V5.6.2 ========================================================= */ /* |-------------------------------------------------------------------------- | CUSTOMER ARTWORK = PHYSICAL BOX AUTHORITY |-------------------------------------------------------------------------- | | Ini sengaja memakai: | | ID + class + !important | | agar CSS / JS legacy tidak dapat membuat | artwork kembali menjadi selebar preview card. | */ #live-design-image.punda-v562-physical-artwork{ width: var( --punda-v562-art-width ) !important; height: var( --punda-v562-art-height ) !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; object-fit: contain !important; object-position: center center !important; box-sizing: border-box !important; } /* * Rule product image umum tidak boleh * mengambil alih gambar desain customer. */ .product-real-visual #live-design-image.punda-v562-physical-artwork{ width: var( --punda-v562-art-width ) !important; height: var( --punda-v562-art-height ) !important; } /* * Saat capture tidak ada perubahan ukuran. * Hanya guide visual yang disembunyikan. */ html.punda-capture-busy #live-design-image.punda-v562-physical-artwork{ width: var( --punda-v562-art-width ) !important; height: var( --punda-v562-art-height ) !important; } /* ========================================================= END PUNDA ARTWORK RENDER AUTHORITY V5.6.2 ========================================================= */ /* ========================================================= PUNDA UX POLICY V5.6.3-R1 ========================================================= */ /* --------------------------------------------------------- AREA FLOW — 4 STEP, 2 LINE --------------------------------------------------------- */ .punda-area-flow{ display: grid !important; grid-template-columns: repeat( 4, minmax(0,1fr) ) !important; gap: 5px !important; } .punda-area-flow-step{ display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; min-height: 58px !important; padding: 6px 2px !important; } .punda-area-flow-step span{ display: block !important; width: 100% !important; overflow: visible !important; white-space: normal !important; text-overflow: clip !important; text-align: center !important; font-size: 8px !important; line-height: 1.18 !important; font-weight: 850 !important; } /* --------------------------------------------------------- PREVIEW PURPOSE --------------------------------------------------------- */ .punda-preview-purpose-v563r1{ display: flex; align-items: flex-start; gap: 8px; margin: 0 0 9px; padding: 8px 10px; border: 1px solid #dfe7ed; border-radius: 10px; background: #f8fafc; color: #59636c; } .punda-preview-purpose-v563r1-icon{ display: grid; place-items: center; flex: 0 0 21px; width: 21px; height: 21px; border-radius: 50%; background: #e8f2ff; color: #1767a8; font-size: 10px; font-weight: 950; } .punda-preview-purpose-v563r1 strong{ display: block; margin-bottom: 2px; color: #2d3740; font-size: 9px; line-height: 1.25; } .punda-preview-purpose-v563r1 div > span{ display: block; max-width: 760px; color: #68747e; font-size: 7.5px; line-height: 1.42; } /* --------------------------------------------------------- MEASUREMENT COPY --------------------------------------------------------- */ #punda-measure-control-v543 strong{ font-size: 9px !important; line-height: 1.25 !important; } #punda-measure-control-v543 small{ font-size: 7px !important; line-height: 1.35 !important; } /* --------------------------------------------------------- TOGGLE ON = MEASUREMENT AUTHORITY --------------------------------------------------------- */ #product-real-visual.punda-v561-await-position #punda-measure-overlay-v543.show, #visual-stage #punda-measure-overlay-v543.show{ visibility: visible !important; opacity: 1 !important; } /* --------------------------------------------------------- SIDE VIEW = PANJANG SAJA --------------------------------------------------------- */ .punda-v563r1-side-view #punda-width-line-v543, .punda-v563r1-side-view #punda-width-label-v543{ display: none !important; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media(max-width:560px){ .punda-area-flow{ grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; } .punda-area-flow-step{ min-height: 54px !important; } } /* ========================================================= END PUNDA UX POLICY V5.6.3-R1 ========================================================= */ /* ========================================================= PUNDA CLEAN MEASUREMENT UX V5.6.4 ========================================================= */ /* --------------------------------------------------------- GARIS LEBAR --------------------------------------------------------- */ #punda-width-line-v543{ z-index: 42 !important; height: 1.5px !important; background: #17212b !important; } #punda-width-line-v543.punda-v564-hidden, #punda-width-label-v543.punda-v564-hidden{ display: none !important; } /* * Pastikan measurement overlay boleh * menampilkan width line di margin bawah. */ #punda-measure-overlay-v543{ overflow: visible !important; } /* --------------------------------------------------------- PREVIEW NOTICE — TEGAS --------------------------------------------------------- */ #punda-preview-purpose-v563r1{ display: flex !important; align-items: flex-start !important; gap: 11px !important; width: 100% !important; box-sizing: border-box !important; margin: 0 0 12px !important; padding: 12px 14px !important; border: 1px solid #b9e4df !important; border-left: 4px solid #0aa99a !important; border-radius: 12px !important; background: #effbf9 !important; box-shadow: 0 4px 14px rgba( 19, 75, 68, .06 ) !important; } #punda-preview-purpose-v563r1 .punda-preview-purpose-v563r1-icon{ display: grid !important; place-items: center !important; flex: 0 0 28px !important; width: 28px !important; height: 28px !important; margin-top: 1px !important; border-radius: 50% !important; background: #0aa99a !important; color: #fff !important; font-size: 13px !important; line-height: 1 !important; font-weight: 950 !important; } #punda-preview-purpose-v563r1 strong{ display: block !important; margin: 0 0 4px !important; color: #123c38 !important; font-size: 12px !important; line-height: 1.25 !important; font-weight: 950 !important; } #punda-preview-purpose-v563r1 div > span{ display: block !important; color: #3e5956 !important; font-size: 9.5px !important; line-height: 1.48 !important; font-weight: 650 !important; } /* --------------------------------------------------------- TOGGLE UKURAN — BERANI DAN JELAS --------------------------------------------------------- */ #punda-measure-control-v543{ gap: 12px !important; padding: 12px !important; border: 1px solid #b9ddd8 !important; border-radius: 12px !important; background: #f3fbfa !important; box-shadow: 0 4px 14px rgba( 20, 72, 66, .055 ) !important; } #punda-measure-control-v543 .punda-measure-copy-v543{ flex: 1 1 auto !important; min-width: 0 !important; } #punda-measure-control-v543 .punda-measure-copy-v543 strong{ display: block !important; margin: 0 0 5px !important; color: #163b37 !important; font-size: 11px !important; line-height: 1.22 !important; font-weight: 950 !important; } #punda-measure-control-v543 .punda-measure-copy-v543 small{ display: block !important; color: #516c68 !important; font-size: 8.5px !important; line-height: 1.45 !important; font-weight: 650 !important; } .punda-measure-helper-v564{ display: inline-block !important; margin-top: 7px !important; padding: 5px 7px !important; border-radius: 7px !important; background: #e3f5f2 !important; color: #17665e !important; font-size: 7.5px !important; line-height: 1.3 !important; font-weight: 700 !important; } .punda-measure-helper-v564 b{ font-weight: 950 !important; } /* --------------------------------------------------------- DIMENSION LABEL --------------------------------------------------------- */ #punda-width-label-v543, #punda-length-label-v543{ padding: 5px 8px !important; border: 1px solid rgba( 12, 103, 94, .12 ) !important; border-radius: 7px !important; background: #fff !important; color: #153d39 !important; font-size: 8px !important; line-height: 1 !important; font-weight: 950 !important; box-shadow: 0 2px 8px rgba( 0, 0, 0, .08 ) !important; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media(max-width:720px){ #punda-preview-purpose-v563r1{ padding: 10px 11px !important; } #punda-preview-purpose-v563r1 strong{ font-size: 11px !important; } #punda-preview-purpose-v563r1 div > span{ font-size: 8.5px !important; } #punda-measure-control-v543 .punda-measure-copy-v543 strong{ font-size: 10px !important; } } /* ========================================================= END PUNDA CLEAN MEASUREMENT UX V5.6.4 ========================================================= */ /* ========================================================= PUNDA HEADER NOTICE + WIDTH GUIDE V5.6.5 ========================================================= */ /* --------------------------------------------------------- HEADER 3 BAGIAN --------------------------------------------------------- */ .studio-visual-head{ display: grid !important; grid-template-columns: auto minmax(280px, 1fr) auto !important; align-items: center !important; gap: 16px !important; } /* --------------------------------------------------------- NOTICE DI TENGAH HEADER --------------------------------------------------------- */ #punda-preview-purpose-v563r1 .punda-preview-purpose-v563r1-icon{ display: grid !important; place-items: center !important; flex: 0 0 26px !important; width: 26px !important; height: 26px !important; border-radius: 50% !important; background: #0aa99a !important; color: #fff !important; font-size: 12px !important; font-weight: 950 !important; } #punda-preview-purpose-v563r1 strong{ display: block !important; margin: 0 0 2px !important; color: #123e39 !important; font-size: 10px !important; line-height: 1.2 !important; font-weight: 950 !important; } #punda-preview-purpose-v563r1 div > span{ display: block !important; color: #506964 !important; font-size: 8px !important; line-height: 1.35 !important; font-weight: 650 !important; } #punda-preview-purpose-v563r1 .punda-preview-purpose-v563r1-icon + div{ min-width: 0 !important; } #punda-preview-purpose-v563r1 &{ box-sizing: border-box; } /* * Override V5.6.4 yang tadinya berbentuk * card besar di sebelah kaos. */ #punda-preview-purpose-v563r1 { display: flex !important; align-items: center !important; gap: 9px !important; min-width: 0 !important; width: auto !important; max-width: 560px !important; margin: 0 !important; padding: 8px 11px !important; border: 1px solid #bce4df !important; border-left: 3px solid #08a596 !important; border-radius: 10px !important; background: #f0fbf9 !important; box-shadow: none !important; } /* --------------------------------------------------------- OLD WIDTH GUIDE --------------------------------------------------------- Tetap punya geometry, tetapi tidak terlihat. --------------------------------------------------------- */ html.punda-v565-active #punda-width-line-v543, html.punda-v565-active #punda-width-label-v543{ visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* --------------------------------------------------------- NEW WIDTH GUIDE --------------------------------------------------------- */ #punda-width-guide-v565{ position: absolute; display: none; height: 1px; z-index: 65; pointer-events: none; overflow: visible; } #punda-width-guide-v565.show{ display: block; } .punda-width-rule-v565{ position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: #162126; } .punda-width-rule-v565::before, .punda-width-rule-v565::after{ content: ""; position: absolute; top: -6px; width: 2px; height: 14px; background: #162126; } .punda-width-rule-v565::before{ left: 0; } .punda-width-rule-v565::after{ right: 0; } .punda-width-label-v565{ position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 5px 8px; border: 1px solid #dce5e4; border-radius: 7px; background: #fff; color: #183f3b; box-shadow: 0 2px 8px rgba(0,0,0,.08); white-space: nowrap; font-size: 8px; line-height: 1; font-weight: 950; } /* * Guide baru boleh muncul sedikit * melewati batas overlay. */ #punda-measure-overlay-v543{ overflow: visible !important; } /* --------------------------------------------------------- HEADER RESPONSIVE --------------------------------------------------------- */ @media(max-width:1180px){ .studio-visual-head{ grid-template-columns: 1fr auto !important; } #punda-preview-purpose-v563r1{ grid-column: 1 / -1 !important; grid-row: 2 !important; max-width: none !important; } } @media(max-width:720px){ .studio-visual-head{ grid-template-columns: 1fr !important; } .studio-media-badge{ justify-self: start !important; } #punda-preview-purpose-v563r1{ grid-column: auto !important; grid-row: auto !important; } } /* ========================================================= END V5.6.5 ========================================================= */ /* ========================================================= PUNDA SINGLE AUTHORITY UI V5.6.6 ========================================================= */ /* --------------------------------------------------------- HEADER PREVIEW --------------------------------------------------------- */ .studio-visual-head{ display: grid !important; grid-template-columns: minmax(220px, auto) minmax(360px, 1fr) auto !important; align-items: center !important; gap: 16px !important; } /* * Left title. */ .studio-visual-head > div:first-child{ grid-column: 1 !important; min-width: 0 !important; } /* * Notice SELALU tengah. */ #punda-preview-purpose-v563r1{ position: static !important; inset: auto !important; grid-column: 2 !important; display: flex !important; align-items: center !important; gap: 10px !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 9px 12px !important; border: 1px solid #bae5df !important; border-left: 4px solid #0aa99a !important; border-radius: 11px !important; background: #effbf9 !important; transform: none !important; box-shadow: none !important; z-index: auto !important; } .punda-preview-purpose-icon-v566{ display: grid !important; place-items: center !important; flex: 0 0 28px !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; background: #0aa99a !important; color: #fff !important; font-size: 13px !important; font-weight: 950 !important; } .punda-preview-purpose-copy-v566{ min-width: 0 !important; } .punda-preview-purpose-copy-v566 strong{ display: block !important; margin: 0 0 2px !important; color: #123e39 !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 950 !important; } .punda-preview-purpose-copy-v566 span{ display: block !important; color: #45625e !important; font-size: 8.5px !important; line-height: 1.4 !important; font-weight: 650 !important; } /* * Badge SELALU kanan. */ .studio-visual-head .studio-media-badge{ grid-column: 3 !important; justify-self: end !important; width: auto !important; min-width: max-content !important; margin: 0 !important; } /* --------------------------------------------------------- MATIKAN SEMUA WIDTH LEGACY --------------------------------------------------------- */ html.punda-v566-active #punda-width-line-v543, html.punda-v566-active #punda-width-label-v543, html.punda-v566-active #punda-width-guide-v565{ visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* --------------------------------------------------------- WIDTH GUIDE V5.6.6 --------------------------------------------------------- */ #punda-width-guide-v566{ position: absolute !important; display: none; height: 2px; z-index: 70 !important; overflow: visible !important; pointer-events: none !important; } #punda-width-guide-v566.show{ display: block !important; } .punda-width-rule-v566{ position: absolute; inset: 0; width: 100%; height: 2px; background: #152126; } .punda-width-rule-v566::before, .punda-width-rule-v566::after{ content: ""; position: absolute; top: -6px; width: 2px; height: 14px; background: #152126; } .punda-width-rule-v566::before{ left: 0; } .punda-width-rule-v566::after{ right: 0; } .punda-width-label-v566{ position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 5px 9px; border: 1px solid #dce7e5; border-radius: 8px; background: #ffffff; color: #173f3a; box-shadow: 0 2px 8px rgba(0,0,0,.09); white-space: nowrap; font-size: 8.5px; line-height: 1; font-weight: 950; } /* * Guide boleh melewati overlay sedikit. */ #punda-measure-overlay-v543{ overflow: visible !important; } /* --------------------------------------------------------- RESPONSIVE HEADER Notice tetap DI HEADER. --------------------------------------------------------- */ @media(max-width:1250px){ .studio-visual-head{ grid-template-columns: minmax(190px, auto) 1fr auto !important; gap: 10px !important; } .punda-preview-purpose-copy-v566 span{ font-size: 8px !important; } } @media(max-width:900px){ .studio-visual-head{ grid-template-columns: 1fr auto !important; align-items: start !important; } #punda-preview-purpose-v563r1{ grid-column: 1 / -1 !important; grid-row: 2 !important; } .studio-visual-head .studio-media-badge{ grid-column: 2 !important; grid-row: 1 !important; } } /* ========================================================= END PUNDA SINGLE AUTHORITY UI V5.6.6 ========================================================= */ /* ========================================================= PUNDA PHYSICAL SCALE UI V5.6.7 ========================================================= */ /* --------------------------------------------------------- MATIKAN SEMUA GARIS LEBAR GENERASI LAMA --------------------------------------------------------- */ html.punda-v567-active #punda-width-line-v543, html.punda-v567-active #punda-width-label-v543, html.punda-v567-active #punda-width-guide-v565, html.punda-v567-active #punda-width-guide-v566{ visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* --------------------------------------------------------- WIDTH PHYSICAL RULER --------------------------------------------------------- */ #punda-width-ruler-v567{ position: absolute !important; display: none; height: 2px; z-index: 75 !important; pointer-events: none !important; overflow: visible !important; } #punda-width-ruler-v567.show{ display: block !important; } .punda-width-ruler-line-v567{ position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: #172126; } .punda-width-ruler-line-v567::before, .punda-width-ruler-line-v567::after{ content: ""; position: absolute; top: -6px; width: 2px; height: 14px; background: #172126; } .punda-width-ruler-line-v567::before{ left: 0; } .punda-width-ruler-line-v567::after{ right: 0; } .punda-width-ruler-label-v567{ position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 6px 10px; border: 1px solid #dbe6e4; border-radius: 8px; background: #fff; color: #173f3b; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.08); font-size: 8.5px; line-height: 1; font-weight: 950; } #punda-measure-overlay-v543{ overflow: visible !important; } /* --------------------------------------------------------- SUDUT + TOGGLE = SATU CARD --------------------------------------------------------- */ #punda-view-measure-card-v567{ display: flex !important; flex-direction: column !important; gap: 0 !important; min-width: 170px !important; max-width: 190px !important; box-sizing: border-box !important; padding: 0 !important; border: 1px solid #e1e7e6 !important; border-radius: 13px !important; background: rgba( 255, 255, 255, .97 ) !important; box-shadow: 0 5px 16px rgba( 20, 30, 28, .06 ) !important; overflow: hidden !important; z-index: 90 !important; } /* * Existing Sudut row. */ #punda-view-measure-card-v567 .punda-view-row-v567{ position: static !important; inset: auto !important; display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; margin: 0 !important; padding: 9px 11px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* * Measurement control menjadi row bawah. */ #punda-view-measure-card-v567 #punda-measure-control-v543{ position: static !important; inset: auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 9px !important; width: 100% !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; margin: 0 !important; padding: 9px 11px !important; border: 0 !important; border-top: 1px solid #e7eceb !important; border-radius: 0 !important; background: #f8fbfa !important; box-shadow: none !important; } /* * Copy. */ #punda-view-measure-card-v567 #punda-measure-control-v543 strong{ display: block !important; margin: 0 0 2px !important; color: #173d39 !important; font-size: 9px !important; line-height: 1.2 !important; font-weight: 950 !important; } #punda-view-measure-card-v567 #punda-measure-control-v543 small{ display: block !important; max-width: 105px !important; color: #617572 !important; font-size: 7px !important; line-height: 1.25 !important; font-weight: 650 !important; } /* * Helper lama tidak perlu memenuhi card. */ #punda-view-measure-card-v567 .punda-measure-helper-v564{ display: none !important; } /* * Toggle jangan mengecil. */ #punda-view-measure-card-v567 .punda-measure-switch-v543{ flex: 0 0 auto !important; } /* --------------------------------------------------------- RESPONSIVE --------------------------------------------------------- */ @media(max-width:900px){ #punda-view-measure-card-v567{ min-width: 150px !important; max-width: 165px !important; } } /* ========================================================= END PUNDA PHYSICAL SCALE UI V5.6.7 ========================================================= */ /* ====================================================== PUNDA_STOREFRONT_PRICE_CSS_V6_0_6 ====================================================== */ .product-price-v606{ margin-top:13px; padding-top:12px; border-top:1px solid #eceff2; display:flex; align-items:baseline; gap:5px; color:#087f76; } .product-price-v606 span{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; } .product-price-v606 strong{ font-size:18px; line-height:1; color:#17202a; } .product-price-v606 small{ color:#6b7280; font-weight:700; } .product-base-price-v606{ margin:10px 0 12px; padding:12px 14px; border:1px solid #bfe8e2; border-radius:14px; background:#effbf8; } .product-base-price-v606>div{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; } .product-base-price-v606 span{ font-size:12px; font-weight:850; color:#39716c; } .product-base-price-v606 strong{ font-size:22px; color:#087f76; white-space:nowrap; } .product-base-price-v606 small{ display:block; margin-top:5px; font-size:11px; line-height:1.45; color:#60706e; } @media(max-width:640px){ .product-base-price-v606>div{align-items:flex-start;flex-direction:column;gap:4px} .product-base-price-v606 strong{font-size:20px} } /* END PUNDA_STOREFRONT_PRICE_CSS_V6_0_6 */ /* PUNDA_PRODUCT_PREVIEW_COMPACT_V6_0_7_6 Harga produk hanya satu baris. Header preview tidak boleh membesar hanya karena informasi harga. */ .product-studio-shell .studio-visual-head{ min-height:0 !important; height:auto !important; padding-top:16px !important; padding-bottom:16px !important; align-items:center !important; } .product-studio-shell .studio-visual-head > *{ min-height:0 !important; } .product-studio-shell .studio-preview-title{ margin-bottom:0 !important; } .product-studio-shell .v607-product-price{ display:inline-flex !important; align-items:baseline !important; gap:8px !important; margin-top:5px !important; margin-bottom:0 !important; padding:0 !important; min-height:0 !important; line-height:1.2 !important; background:transparent !important; border:0 !important; } .product-studio-shell .v607-product-price > span{ font-size:11px !important; font-weight:900 !important; letter-spacing:.06em !important; text-transform:uppercase !important; color:#087f76 !important; } .product-studio-shell .v607-product-price > strong{ font-size:17px !important; line-height:1.2 !important; margin:0 !important; } .product-studio-shell .v607-product-price > small{ display:none !important; } @media (max-width: 760px){ .product-studio-shell .studio-visual-head{ padding-top:12px !important; padding-bottom:12px !important; } .product-studio-shell .v607-product-price{ display:flex !important; flex-wrap:wrap !important; } } /* PUNDA_WHATSAPP_FLOAT_CSS_V6_0_7_7 */ .punda-wa-float-v6077{ position:fixed; right:22px; bottom:24px; z-index:9990; display:inline-flex; align-items:center; gap:8px; min-height:52px; padding:9px 14px 9px 10px; border:1px solid rgba(0,0,0,.08); border-radius:999px; background:#fff; color:#172026; text-decoration:none; box-shadow: 0 12px 35px rgba(20,35,32,.18); font-size:12px; font-weight:900; transition: transform .18s ease, box-shadow .18s ease; } .punda-wa-float-v6077:hover{ transform:translateY(-2px); box-shadow: 0 16px 42px rgba(20,35,32,.24); } .punda-wa-float-v6077 svg{ width:34px; height:34px; padding:6px; border-radius:50%; background:#20b66f; fill:#fff; } @media(max-width:680px){ .punda-wa-float-v6077{ right:14px; bottom:16px; width:52px; height:52px; min-height:52px; padding:9px; justify-content:center; } .punda-wa-float-v6077 span{ display:none; } .punda-wa-float-v6077 svg{ width:34px; height:34px; } } /* PUNDA_HOME_APPAREL_ICON_CSS_V6_0_8 */ .cat .punda-home-apparel-icon{ position:absolute !important; right:14px !important; bottom:12px !important; width:72px !important; height:78px !important; border-radius:0 !important; background:var(--charcoal) !important; opacity:.13; clip-path:polygon( 22% 0, 36% 8%, 64% 8%, 78% 0, 100% 17%, 85% 39%, 76% 32%, 76% 100%, 24% 100%, 24% 32%, 15% 39%, 0 17% ); } .cat:hover .punda-home-apparel-icon{ opacity:.20; } /* END PUNDA_HOME_APPAREL_ICON_CSS_V6_0_8 */ /* ========================================================= PUNDA_HOME_BRAND_CSS_V6_0_8_6 Home lebih ringkas + logo image storefront. ========================================================= */ .punda-brand-link{ display:inline-flex; align-items:center; justify-content:flex-start; flex:0 0 auto; line-height:0; } .punda-brand-logo{ display:block; width:auto; object-fit:contain; } .punda-brand-logo-header{ height:60px; max-width:108px; } .punda-footer-brand{ display:inline-flex; margin-bottom:14px; line-height:0; } .punda-footer-logo-plate{ display:inline-flex; align-items:center; justify-content:center; padding:8px 10px; border-radius:14px; background:#fff; } .punda-brand-logo-footer{ height:84px; max-width:126px; } .hero-copy-v6086 .eyebrow{ max-width:100%; white-space:normal; line-height:1.35; } .hero-copy-v6086 h1{ font-size:clamp(38px,5.2vw,68px); line-height:1.01; } .hero-copy-v6086 .hero-subcopy-v6086{ max-width:720px; margin-bottom:0; } .home-picks-v6086{ padding-top:52px; } @media(max-width:560px){ .punda-brand-logo-header{ height:50px; max-width:92px; } .punda-brand-logo-footer{ height:72px; max-width:110px; } .hero-copy-v6086 h1{ font-size:40px; } .home-picks-v6086{ padding-top:38px; } } /* END PUNDA_HOME_BRAND_CSS_V6_0_8_6 */ /* ========================================================= PUNDA_HOME_FEATURED_COLOR_CSS_V6_0_8_7 Variasi warna ringan pada featured cards; tanpa asset tambahan. ========================================================= */ .home-product-grid-v6087 .product-card-media{ transition:background .18s ease; } .home-product-grid-v6087 .home-product-tone-1 .product-card-media{ background:linear-gradient(145deg,#edf5ef 0%,#ffffff 78%); } .home-product-grid-v6087 .home-product-tone-2 .product-card-media{ background:linear-gradient(145deg,#fff0ef 0%,#ffffff 78%); } .home-product-grid-v6087 .home-product-tone-3 .product-card-media{ background:linear-gradient(145deg,#eef4ff 0%,#ffffff 78%); } .home-product-grid-v6087 .home-product-tone-4 .product-card-media{ background:linear-gradient(145deg,#f8f0e8 0%,#ffffff 78%); } .home-product-grid-v6087 .home-product-tone-5 .product-card-media{ background:linear-gradient(145deg,#fff8dc 0%,#ffffff 78%); } .home-product-grid-v6087 .product-card-media img{ max-width:90%; max-height:90%; } @media(max-width:560px){ .home-product-grid-v6087 .product-card-media{ height:230px; } } /* END PUNDA_HOME_FEATURED_COLOR_CSS_V6_0_8_7 */ /* ========================================================= PUNDA_HOME_HERO_LOOP_CSS_V6_0_8_8 Topbar brand copy + lightweight rotating product showcase. ========================================================= */ .top-v6088{ padding:7px 14px; } .top-copy-v6088{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 9px; max-width:1180px; margin:0 auto; line-height:1.35; } .top-copy-v6088 strong{ font-weight:900; } .top-copy-v6088 span{ font-weight:650; color:#f2f2f2; } .top-copy-v6088 em{ font-style:italic; font-weight:800; color:#fff; } .top-copy-v6088 span::before, .top-copy-v6088 em::before{ content:'•'; margin-right:9px; color:#FFC33D; font-style:normal; } .hero-loop-v6088{ padding:0 !important; min-height:390px; background:linear-gradient(145deg,#f8fafc 0%,#ffffff 54%,#edf9f8 100%) !important; border:1px solid rgba(43,43,43,.08); } .hero-loop-v6088::before, .hero-loop-v6088::after{ content:none !important; display:none !important; } .hero-loop-link-v6088{ position:relative; display:block; width:100%; min-height:390px; height:100%; color:inherit; } .hero-loop-stage-v6088{ position:absolute; inset:0; display:grid; place-items:center; padding:24px 28px 86px; overflow:hidden; } .hero-loop-stage-v6088::before{ content:''; position:absolute; width:260px; height:260px; right:-90px; top:-100px; border-radius:50%; background:rgba(255,107,107,.16); transition:background .3s ease; } .hero-loop-stage-v6088::after{ content:''; position:absolute; width:220px; height:220px; left:-95px; bottom:-105px; border-radius:50%; background:rgba(18,181,176,.14); } .hero-loop-stage-v6088 img{ position:relative; z-index:2; width:100%; height:100%; max-width:520px; max-height:310px; object-fit:contain; filter:drop-shadow(0 18px 22px rgba(24,31,36,.12)); opacity:1; transform:scale(1); transition:opacity .18s ease,transform .3s ease; } .hero-loop-stage-v6088 img.is-changing{ opacity:.08; transform:scale(.985); } .hero-loop-link-v6088:hover .hero-loop-stage-v6088 img{ transform:scale(1.025); } .hero-loop-meta-v6088{ position:absolute; z-index:4; left:18px; right:18px; bottom:16px; display:flex; align-items:end; justify-content:space-between; gap:14px; padding:12px 14px; border:1px solid rgba(255,255,255,.72); border-radius:15px; background:rgba(255,255,255,.88); backdrop-filter:blur(9px); box-shadow:0 12px 32px rgba(31,38,44,.08); } .hero-loop-copy-v6088{ min-width:0; display:flex; flex-direction:column; gap:2px; } .hero-loop-kicker-v6088{ font-size:8px; letter-spacing:.09em; font-weight:950; color:#0a8e84; } .hero-loop-copy-v6088 strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px; line-height:1.15; color:#222; } .hero-loop-copy-v6088 small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; font-weight:750; color:#687078; } .hero-loop-count-v6088{ flex:0 0 auto; padding:6px 8px; border-radius:999px; background:#20242b; color:#fff; font-size:9px; font-weight:800; } .hero-loop-count-v6088 b{ color:#FFC33D; } .hero-loop-empty-v6088{ min-height:390px; display:grid; place-items:center; font-weight:900; } .hero-loop-v6088[data-tone="2"] .hero-loop-stage-v6088::before{background:rgba(255,195,61,.18)} .hero-loop-v6088[data-tone="3"] .hero-loop-stage-v6088::before{background:rgba(65,105,225,.12)} .hero-loop-v6088[data-tone="4"] .hero-loop-stage-v6088::before{background:rgba(168,128,88,.13)} .hero-loop-v6088[data-tone="5"] .hero-loop-stage-v6088::before{background:rgba(18,181,176,.15)} @media(max-width:900px){ .hero-loop-v6088, .hero-loop-link-v6088{min-height:350px} .hero-loop-stage-v6088{padding:20px 24px 80px} .hero-loop-stage-v6088 img{max-height:275px} } @media(max-width:680px){ .top-copy-v6088{ gap:2px 6px; font-size:10px; } .top-copy-v6088 strong{ width:100%; text-align:center; } .top-copy-v6088 span::before{ content:none; } .hero-loop-v6088, .hero-loop-link-v6088{min-height:320px} .hero-loop-stage-v6088{padding:16px 16px 78px} .hero-loop-stage-v6088 img{max-height:235px} .hero-loop-meta-v6088{left:10px;right:10px;bottom:10px;padding:10px 11px} .hero-loop-copy-v6088 strong{font-size:14px} .hero-loop-copy-v6088 small{font-size:9px} } @media(max-width:480px){ .top-copy-v6088 em{ width:100%; text-align:center; } .top-copy-v6088 em::before{ content:none; } } /* END PUNDA_HOME_HERO_LOOP_CSS_V6_0_8_8 */ /* ========================================================= PUNDA_CATALOG_LOOP_CSS_V6_0_9_0 19-product catalog loop: description, explicit order CTA, manual previous/next controls. No external library/font. ========================================================= */ .catalog-loop-v6090{ position:relative; } .catalog-loop-stage-v6090{ padding-bottom:142px !important; } .catalog-loop-meta-v6090{ align-items:stretch !important; min-height:112px; } .catalog-loop-copy-v6090{ flex:1 1 auto; max-width:72%; } .catalog-loop-copy-v6090 p{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:5px 0 0; color:#5d6670; font-size:10px; line-height:1.45; font-weight:600; } .catalog-loop-actions-v6090{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:8px; } .catalog-order-cta-v6090{ display:inline-flex; align-items:center; justify-content:center; min-height:31px; padding:7px 10px; border-radius:9px; background:#20242b; color:#fff; font-size:9px; font-weight:950; letter-spacing:.025em; white-space:nowrap; box-shadow:0 5px 14px rgba(32,36,43,.13); transition:transform .16s ease,background .16s ease; } .catalog-loop-link-v6090:hover .catalog-order-cta-v6090{ transform:translateY(-1px); background:#0b8f86; } .catalog-loop-arrow-v6090{ position:absolute; z-index:8; top:42%; width:38px; height:38px; display:grid; place-items:center; padding:0 0 3px; border:1px solid rgba(32,36,43,.10); border-radius:50%; background:rgba(255,255,255,.94); color:#20242b; box-shadow:0 8px 24px rgba(25,31,38,.12); font:900 27px/1 Arial,sans-serif; cursor:pointer; transition:transform .16s ease,background .16s ease,color .16s ease; } .catalog-loop-arrow-v6090:hover{ transform:scale(1.06); background:#20242b; color:#fff; } .catalog-loop-arrow-v6090.is-prev{left:12px} .catalog-loop-arrow-v6090.is-next{right:12px} .catalog-loop-arrow-v6090:focus-visible{ outline:3px solid rgba(18,181,176,.28); outline-offset:2px; } @media(max-width:900px){ .catalog-loop-stage-v6090{padding-bottom:136px !important} .catalog-loop-copy-v6090{max-width:70%} } @media(max-width:680px){ .catalog-loop-stage-v6090{padding-bottom:152px !important} .catalog-loop-meta-v6090{min-height:128px !important} .catalog-loop-copy-v6090{max-width:66%} .catalog-loop-copy-v6090 p{font-size:9px;-webkit-line-clamp:3} .catalog-order-cta-v6090{font-size:8px;padding:6px 8px} .catalog-loop-arrow-v6090{width:34px;height:34px;font-size:24px;top:39%} .catalog-loop-arrow-v6090.is-prev{left:8px} .catalog-loop-arrow-v6090.is-next{right:8px} } @media(max-width:430px){ .catalog-loop-copy-v6090{max-width:62%} .catalog-loop-copy-v6090 p{-webkit-line-clamp:2} .catalog-order-cta-v6090{white-space:normal;text-align:center;line-height:1.15} } /* END PUNDA_CATALOG_LOOP_CSS_V6_0_9_0 */ /* ========================================================= PUNDA_HERO_CATALOG_UX_V6_0_9_1 Product image first, information below, modern side arrows. CSS-only refinement: no query/API/library/payload addition. ========================================================= */ /* Sedikit kurangi headline agar hero kanan punya ruang visual lebih kuat. */ .hero-copy-v6086 h1{ font-size:clamp(35px,4.65vw,61px) !important; line-height:1.015 !important; } /* Root hanya menjadi positioning shell. Card sebenarnya adalah link di dalamnya, sehingga tombol prev/next dapat duduk tepat di sisi luar card tanpa terpotong. */ .catalog-loop-v6090{ min-height:448px !important; overflow:visible !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; } .catalog-loop-link-v6090{ position:relative !important; display:grid !important; grid-template-rows:minmax(300px,1fr) auto !important; min-height:448px !important; height:100% !important; overflow:hidden !important; border:1px solid rgba(32,36,43,.09) !important; border-radius:28px !important; background:linear-gradient(145deg,#f8fafc 0%,#fff 54%,#edf9f8 100%) !important; box-shadow:0 18px 48px rgba(28,36,42,.09) !important; } /* AREA GAMBAR: tidak lagi menyediakan ruang palsu untuk overlay description. */ .catalog-loop-stage-v6090, .hero-loop-stage-v6088.catalog-loop-stage-v6090{ position:relative !important; inset:auto !important; min-height:300px !important; padding:24px 58px 14px !important; overflow:hidden !important; border-radius:28px 28px 0 0 !important; } .catalog-loop-stage-v6090 img{ width:100% !important; height:100% !important; max-width:520px !important; max-height:286px !important; object-fit:contain !important; } /* INFORMASI PRODUK: sekarang normal-flow DI BAWAH gambar. */ .catalog-loop-meta-v6090, .hero-loop-meta-v6088.catalog-loop-meta-v6090{ position:relative !important; left:auto !important; right:auto !important; bottom:auto !important; z-index:4 !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:end !important; gap:14px !important; min-height:126px !important; margin:0 !important; padding:15px 17px 16px !important; border:0 !important; border-top:1px solid rgba(32,36,43,.07) !important; border-radius:0 0 28px 28px !important; background:rgba(255,255,255,.98) !important; backdrop-filter:none !important; box-shadow:none !important; } .catalog-loop-copy-v6090{ max-width:none !important; min-width:0 !important; } .catalog-loop-copy-v6090 strong{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; font-size:16px !important; line-height:1.18 !important; } .catalog-loop-copy-v6090 p{ display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:2 !important; overflow:hidden !important; margin:7px 0 0 !important; color:#5d6670 !important; font-size:10px !important; line-height:1.5 !important; } .catalog-loop-actions-v6090{ align-self:stretch !important; justify-content:flex-end !important; gap:8px !important; } .catalog-order-cta-v6090{ min-height:34px !important; padding:8px 11px !important; border-radius:10px !important; background:linear-gradient(135deg,#20242b,#323840) !important; box-shadow:0 7px 18px rgba(32,36,43,.16) !important; } /* FUTURISTIC SIDE NAVIGATION. Teks ‹ › disembunyikan secara visual; chevron digambar CSS agar konsisten. */ .catalog-loop-arrow-v6090{ top:156px !important; width:46px !important; height:46px !important; padding:0 !important; border:1px solid rgba(255,255,255,.72) !important; border-radius:15px !important; background:linear-gradient(145deg,rgba(28,33,39,.96),rgba(51,59,68,.92)) !important; color:#fff !important; box-shadow: 0 12px 30px rgba(24,31,36,.24), inset 0 1px 0 rgba(255,255,255,.14) !important; backdrop-filter:blur(10px) !important; font-size:0 !important; transform:translateY(-50%) !important; } .catalog-loop-arrow-v6090::before{ content:'' !important; display:block !important; width:11px !important; height:11px !important; border-top:2.4px solid currentColor !important; border-right:2.4px solid currentColor !important; } .catalog-loop-arrow-v6090.is-prev{ left:-22px !important; } .catalog-loop-arrow-v6090.is-prev::before{ transform:rotate(-135deg) translate(-1px,-1px) !important; } .catalog-loop-arrow-v6090.is-next{ right:-22px !important; } .catalog-loop-arrow-v6090.is-next::before{ transform:rotate(45deg) translate(-1px,1px) !important; } .catalog-loop-arrow-v6090:hover{ background:linear-gradient(145deg,#0ca99c,#087e76) !important; color:#fff !important; transform:translateY(-50%) scale(1.08) !important; box-shadow:0 14px 34px rgba(8,126,118,.26) !important; } .catalog-loop-arrow-v6090:active{ transform:translateY(-50%) scale(.98) !important; } @media(max-width:1100px){ .hero-copy-v6086 h1{ font-size:clamp(34px,4.5vw,55px) !important; } .catalog-loop-arrow-v6090.is-prev{left:-14px !important} .catalog-loop-arrow-v6090.is-next{right:-14px !important} } @media(max-width:900px){ .catalog-loop-v6090, .catalog-loop-link-v6090{ min-height:430px !important; } .catalog-loop-link-v6090{ grid-template-rows:minmax(285px,1fr) auto !important; } .catalog-loop-stage-v6090{ min-height:285px !important; padding:20px 52px 12px !important; } .catalog-loop-stage-v6090 img{max-height:270px !important} .catalog-loop-arrow-v6090{top:146px !important} } @media(max-width:680px){ .hero-copy-v6086 h1{ font-size:38px !important; } .catalog-loop-v6090, .catalog-loop-link-v6090{ min-height:410px !important; } .catalog-loop-link-v6090{ grid-template-rows:minmax(250px,1fr) auto !important; border-radius:22px !important; } .catalog-loop-stage-v6090{ min-height:250px !important; padding:18px 44px 10px !important; border-radius:22px 22px 0 0 !important; } .catalog-loop-stage-v6090 img{max-height:238px !important} .catalog-loop-meta-v6090{ grid-template-columns:1fr !important; min-height:145px !important; gap:9px !important; padding:13px 14px 14px !important; border-radius:0 0 22px 22px !important; } .catalog-loop-actions-v6090{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important; } .catalog-loop-arrow-v6090{ top:126px !important; width:40px !important; height:40px !important; border-radius:13px !important; } .catalog-loop-arrow-v6090.is-prev{left:-8px !important} .catalog-loop-arrow-v6090.is-next{right:-8px !important} } /* END PUNDA_HERO_CATALOG_UX_V6_0_9_1 */ /* ========================================================= PUNDA_HERO_CARD_POLISH_V6_0_9_2 - Product image and product information are two separate rows. - Navigation controls live OUTSIDE the product card. - Modern/simple/futuristic visual with no extra JS/query/payload. ========================================================= */ @media (min-width: 901px){ .hero-grid{ grid-template-columns:minmax(0,1.02fr) minmax(440px,.98fr) !important; gap:62px !important; } } .hero-copy-v6086 h1{ font-size:clamp(34px,4.35vw,58px) !important; line-height:1.02 !important; letter-spacing:-.042em !important; } /* Outer shell: ONLY positioning context for the card + external arrows. */ .catalog-loop-v6090{ position:relative !important; min-height:472px !important; overflow:visible !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; isolation:isolate !important; } /* Actual product card. */ .catalog-loop-link-v6090{ position:relative !important; z-index:2 !important; display:grid !important; grid-template-rows:326px auto !important; width:100% !important; min-height:472px !important; overflow:hidden !important; border:1px solid rgba(30,41,59,.08) !important; border-radius:28px !important; background:#fff !important; box-shadow: 0 24px 70px rgba(31,41,55,.10), 0 2px 8px rgba(31,41,55,.04) !important; transform:translateZ(0) !important; transition:transform .22s ease, box-shadow .22s ease !important; } .catalog-loop-link-v6090:hover{ transform:translateY(-3px) !important; box-shadow: 0 30px 82px rgba(31,41,55,.13), 0 3px 10px rgba(31,41,55,.05) !important; } /* IMAGE ZONE: independent, fixed visual area. */ .catalog-loop-stage-v6090, .hero-loop-stage-v6088.catalog-loop-stage-v6090{ position:relative !important; inset:auto !important; display:grid !important; place-items:center !important; width:100% !important; min-height:326px !important; height:326px !important; margin:0 !important; padding:22px 42px 16px !important; overflow:hidden !important; border-radius:28px 28px 0 0 !important; background: radial-gradient(circle at 50% 38%,rgba(255,255,255,.96) 0 35%,rgba(248,250,252,.94) 72%), linear-gradient(145deg,#f6fbfa,#fff8ef) !important; } .catalog-loop-stage-v6090::before{ content:'' !important; position:absolute !important; width:180px !important; height:180px !important; right:-72px !important; top:-78px !important; border-radius:50% !important; background:rgba(255,195,61,.20) !important; pointer-events:none !important; } .catalog-loop-stage-v6090::after{ content:'' !important; position:absolute !important; width:150px !important; height:150px !important; left:-74px !important; bottom:-78px !important; border-radius:50% !important; background:rgba(18,181,176,.12) !important; pointer-events:none !important; } .catalog-loop-stage-v6090 img{ position:relative !important; z-index:2 !important; display:block !important; width:auto !important; height:auto !important; max-width:92% !important; max-height:292px !important; margin:0 auto !important; object-fit:contain !important; filter:drop-shadow(0 14px 18px rgba(30,41,59,.10)) !important; transition:opacity .18s ease, transform .26s ease !important; } .catalog-loop-link-v6090:hover .catalog-loop-stage-v6090 img{ transform:scale(1.018) !important; } /* INFO ZONE: normal document flow, strictly below image. */ .catalog-loop-meta-v6090, .hero-loop-meta-v6088.catalog-loop-meta-v6090{ position:static !important; inset:auto !important; transform:none !important; z-index:auto !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:end !important; gap:18px !important; width:100% !important; min-height:146px !important; margin:0 !important; padding:17px 18px 18px !important; border:0 !important; border-top:1px solid rgba(30,41,59,.07) !important; border-radius:0 0 28px 28px !important; background:#fff !important; box-shadow:none !important; backdrop-filter:none !important; } .catalog-loop-copy-v6090{ min-width:0 !important; max-width:none !important; } .catalog-loop-copy-v6090 .hero-loop-kicker-v6088{ display:block !important; margin-bottom:4px !important; color:#0a8f85 !important; font-size:8px !important; font-weight:950 !important; letter-spacing:.08em !important; } .catalog-loop-copy-v6090 strong{ display:block !important; overflow:visible !important; color:#20242b !important; font-size:16px !important; font-weight:950 !important; line-height:1.2 !important; white-space:normal !important; text-overflow:clip !important; } .catalog-loop-copy-v6090 small{ display:block !important; margin-top:3px !important; color:#6f7782 !important; font-size:8.5px !important; font-weight:850 !important; line-height:1.35 !important; } .catalog-loop-copy-v6090 p{ display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:2 !important; overflow:hidden !important; margin:9px 0 0 !important; color:#56606b !important; font-size:10.5px !important; font-weight:600 !important; line-height:1.48 !important; } .catalog-loop-actions-v6090{ display:flex !important; flex-direction:column !important; align-items:flex-end !important; justify-content:flex-end !important; align-self:stretch !important; gap:9px !important; min-width:112px !important; } .hero-loop-count-v6088{ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:45px !important; min-height:24px !important; padding:4px 8px !important; border-radius:999px !important; background:#eef2f4 !important; color:#4d5660 !important; font-size:8px !important; font-weight:900 !important; } .catalog-order-cta-v6090{ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-height:38px !important; padding:9px 13px !important; border-radius:11px !important; background:linear-gradient(135deg,#20242b,#343a42) !important; color:#fff !important; box-shadow:0 8px 20px rgba(32,36,43,.16) !important; font-size:9px !important; font-weight:950 !important; letter-spacing:.025em !important; white-space:nowrap !important; transition:background .18s ease, transform .18s ease, box-shadow .18s ease !important; } .catalog-loop-link-v6090:hover .catalog-order-cta-v6090{ background:linear-gradient(135deg,#0aa99a,#087e76) !important; transform:translateY(-1px) !important; box-shadow:0 10px 24px rgba(8,126,118,.20) !important; } /* EXTERNAL NAVIGATION: actual siblings of the card, visually outside it. */ .catalog-loop-arrow-v6090{ position:absolute !important; z-index:20 !important; top:163px !important; /* center of image zone, not center of full card */ display:grid !important; place-items:center !important; width:52px !important; height:52px !important; margin:0 !important; padding:0 !important; border:1px solid rgba(255,255,255,.75) !important; border-radius:17px !important; background:linear-gradient(145deg,rgba(30,36,43,.97),rgba(50,58,67,.94)) !important; color:#fff !important; box-shadow: 0 16px 38px rgba(24,31,36,.26), inset 0 1px 0 rgba(255,255,255,.14) !important; backdrop-filter:blur(12px) !important; font-size:0 !important; line-height:0 !important; cursor:pointer !important; transform:translateY(-50%) !important; transition:transform .18s ease, background .18s ease, box-shadow .18s ease !important; } .catalog-loop-arrow-v6090::before{ content:'' !important; display:block !important; width:12px !important; height:12px !important; border-top:2.5px solid currentColor !important; border-right:2.5px solid currentColor !important; } .catalog-loop-arrow-v6090.is-prev{ left:-66px !important; } .catalog-loop-arrow-v6090.is-prev::before{ transform:rotate(-135deg) translate(-1px,-1px) !important; } .catalog-loop-arrow-v6090.is-next{ right:-66px !important; } .catalog-loop-arrow-v6090.is-next::before{ transform:rotate(45deg) translate(-1px,1px) !important; } .catalog-loop-arrow-v6090:hover{ background:linear-gradient(145deg,#0aa99a,#087e76) !important; transform:translateY(-50%) scale(1.08) !important; box-shadow:0 18px 42px rgba(8,126,118,.28) !important; } .catalog-loop-arrow-v6090:active{ transform:translateY(-50%) scale(.97) !important; } .catalog-loop-arrow-v6090:focus-visible{ outline:3px solid rgba(18,181,176,.26) !important; outline-offset:4px !important; } @media(max-width:1220px){ .catalog-loop-arrow-v6090.is-prev{left:-42px !important} .catalog-loop-arrow-v6090.is-next{right:-42px !important} } @media(max-width:1050px){ .hero-grid{gap:38px !important} .catalog-loop-arrow-v6090{ width:46px !important; height:46px !important; border-radius:15px !important; } .catalog-loop-arrow-v6090.is-prev{left:-24px !important} .catalog-loop-arrow-v6090.is-next{right:-24px !important} } @media(max-width:900px){ .catalog-loop-v6090, .catalog-loop-link-v6090{min-height:448px !important} .catalog-loop-link-v6090{grid-template-rows:300px auto !important} .catalog-loop-stage-v6090, .hero-loop-stage-v6088.catalog-loop-stage-v6090{ min-height:300px !important; height:300px !important; padding:20px 48px 14px !important; } .catalog-loop-stage-v6090 img{max-height:270px !important} .catalog-loop-arrow-v6090{top:150px !important} .catalog-loop-arrow-v6090.is-prev{left:-18px !important} .catalog-loop-arrow-v6090.is-next{right:-18px !important} } @media(max-width:680px){ .hero-copy-v6086 h1{font-size:37px !important} .catalog-loop-v6090, .catalog-loop-link-v6090{min-height:430px !important} .catalog-loop-link-v6090{ grid-template-rows:264px auto !important; border-radius:22px !important; } .catalog-loop-stage-v6090, .hero-loop-stage-v6088.catalog-loop-stage-v6090{ min-height:264px !important; height:264px !important; padding:18px 40px 12px !important; border-radius:22px 22px 0 0 !important; } .catalog-loop-stage-v6090 img{max-height:236px !important} .catalog-loop-meta-v6090, .hero-loop-meta-v6088.catalog-loop-meta-v6090{ grid-template-columns:1fr !important; min-height:166px !important; gap:11px !important; padding:14px 15px 15px !important; border-radius:0 0 22px 22px !important; } .catalog-loop-actions-v6090{ flex-direction:row !important; align-items:center !important; justify-content:space-between !important; min-width:0 !important; } .catalog-loop-arrow-v6090{ top:132px !important; width:42px !important; height:42px !important; border-radius:14px !important; } .catalog-loop-arrow-v6090.is-prev{left:-8px !important} .catalog-loop-arrow-v6090.is-next{right:-8px !important} } @media (prefers-reduced-motion: reduce){ .catalog-loop-link-v6090, .catalog-loop-stage-v6090 img, .catalog-loop-arrow-v6090, .catalog-order-cta-v6090{ transition:none !important; } } /* END PUNDA_HERO_CARD_POLISH_V6_0_9_2 */