:root{--jv-red:var(--bs-accent,#ed1c24);--jv-black:#101114;--jv-muted:#6c7179;--jv-line:#e6e8eb;--jv-bg:#f5f6f7;--jv-green:#19ad68;--jv-yellow:#ed1c24} .jv-page{background:var(--jv-bg);min-height:100vh;padding-bottom:70px}.jv-sticky-head{position:sticky;top:76px;z-index:30;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--jv-line);box-shadow:0 10px 28px rgba(16,17,20,.04)}.jv-sticky-head .container{padding-top:15px;padding-bottom:12px}.jv-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.jv-title-row h1{margin:4px 0 2px;font-size:27px;letter-spacing:-.04em}.jv-title-row p{margin:0;color:var(--jv-muted);font-size:11px}.jv-back{display:inline-flex;color:#646970;font-weight:850;font-size:10px}.jv-eyebrow{display:inline-flex;margin-left:10px;padding:5px 8px;background:#fff0f2;color:var(--jv-red);border:1px solid #ffd5da;border-radius:999px;font-size:8px;font-weight:950;letter-spacing:.07em}.jv-autosave-label{font-size:9px;color:#777c84;font-weight:850}.jv-progress-card{position:relative;margin-top:13px;padding:12px 16px 9px;border:1px solid var(--jv-line);border-radius:14px;background:#fff;overflow:hidden}.jv-progress-card:before{content:"";position:absolute;left:7%;right:7%;top:33px;height:2px;background:#e5e7ea}.jv-progress{position:relative;z-index:1;display:grid;grid-template-columns:repeat(6,1fr)}.jv-step{text-align:center}.jv-step-icon{width:42px;height:42px;margin:auto;border-radius:50%;background:#f0f1f3;color:#a0a5ac;border:5px solid #fff;box-shadow:0 0 0 1px #e4e6e9;display:grid;place-items:center}.jv-step-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.jv-step.done .jv-step-icon{background:#15171b;color:#fff;box-shadow:0 0 0 1px #15171b}.jv-step.active .jv-step-icon{background:var(--jv-red);color:#fff;box-shadow:0 0 0 1px var(--jv-red),0 0 0 5px rgba(237,28,36,.10)}.jv-step-label{font-size:9px;color:#979ba2;font-weight:850;margin-top:6px}.jv-step.done .jv-step-label,.jv-step.active .jv-step-label{color:#111}.jv-now{display:inline-flex;margin-top:3px;padding:2px 5px;background:#fff0f2;color:var(--jv-red);border-radius:999px;font-size:7px;font-weight:950}.jv-progress-hint{display:flex;justify-content:space-between;gap:10px;border-top:1px dashed #e5e7ea;padding-top:8px;margin-top:7px;color:#858a91;font-size:8px}.jv-progress-hint b{color:#111}.jv-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:18px;align-items:start;padding-top:20px}.jv-panel{background:#fff;border:1px solid var(--jv-line);border-radius:16px;box-shadow:0 8px 28px rgba(17,19,24,.045);padding:20px}.jv-summary{position:sticky;top:217px}.jv-panel h2{margin:0 0 4px;font-size:24px;letter-spacing:-.035em}.jv-sub{margin:0 0 18px;color:var(--jv-muted);font-size:11px}.jv-badge{display:inline-flex;padding:5px 8px;border-radius:999px;background:var(--jv-red);color:#fff;font-size:8px;font-weight:950;letter-spacing:.06em}.jv-product-intro{display:grid;grid-template-columns:390px 1fr;gap:20px;align-items:center}.jv-product-media{min-height:390px;background:linear-gradient(145deg,#f3f4f5,#e8eaed);border-radius:16px;display:grid;place-items:center;overflow:hidden;position:relative}.jv-product-media img{width:100%;height:100%;max-height:390px;object-fit:contain}.jv-product-copy h3{font-size:28px;letter-spacing:-.04em;margin:0 0 5px}.jv-product-copy p{color:var(--jv-muted);font-size:12px}.jv-price-big{font-size:29px;font-weight:950;margin:16px 0}.jv-feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.jv-feature{border:1px solid var(--jv-line);border-radius:11px;padding:10px;background:#fafafa}.jv-feature b{display:block;font-size:10px}.jv-feature small{color:var(--jv-muted);font-size:8px}.jv-config{display:grid;grid-template-columns:390px 1fr;gap:20px}.jv-config-media{height:430px;border-radius:16px;background:linear-gradient(145deg,#f3f4f5,#e8eaed);display:grid;place-items:center;overflow:hidden;position:relative}.jv-config-media img{width:100%;height:100%;object-fit:contain}.jv-option{margin:0 0 17px}.jv-option-title{font-size:10px;font-weight:950;margin-bottom:8px}.jv-swatches,.jv-chips,.jv-segment{display:flex;gap:7px;flex-wrap:wrap}.jv-swatch{display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid #dfe1e5;border-radius:10px;background:#fff;font-weight:850;font-size:10px}.jv-swatch.active{border-color:#111;box-shadow:0 0 0 3px rgba(237,28,36,.08)}.jv-color-dot{width:22px;height:22px;border-radius:50%;border:1px solid #c8cbd0}.jv-chip,.jv-segment button{border:1px solid #dfe1e5;background:#fff;border-radius:9px;padding:9px 11px;font-weight:900;font-size:10px}.jv-chip.active,.jv-segment button.active{background:#111;color:#fff;border-color:#111}.jv-qty{display:flex;border:1px solid #dfe1e5;border-radius:10px;overflow:hidden;width:150px}.jv-qty button{width:42px;border:0;background:#f2f3f4;font-size:17px;font-weight:950}.jv-qty input{width:66px;border:0;text-align:center;font-weight:900;outline:none}.jv-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:20px}.jv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.jv-card{border:1px solid #e1e3e7;border-radius:13px;overflow:hidden;background:#fff;cursor:pointer;transition:.18s}.jv-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(16,17,20,.08)}.jv-card.active{border-color:var(--jv-red);box-shadow:0 0 0 3px rgba(237,28,36,.09)}.jv-card-img{height:135px;background:#f0f1f3;display:grid;place-items:center;overflow:hidden}.jv-card-img img{width:100%;height:100%;object-fit:cover}.jv-card-body{padding:10px}.jv-card-body b{display:block;font-size:12px}.jv-card-body small{display:block;color:var(--jv-muted);font-size:9px;margin-top:2px}.jv-card-price{color:var(--jv-red);font-weight:900;font-size:9px;margin-top:5px}.jv-upload{border:2px dashed #d7dade;border-radius:15px;padding:19px;background:#fafbfc;text-align:center}.jv-upload-icon{width:55px;height:55px;border-radius:17px;background:#111;color:#fff;display:grid;place-items:center;margin:0 auto 9px;font-size:22px}.jv-upload h3{margin:0;font-size:15px}.jv-upload p{margin:4px 0 10px;color:var(--jv-muted);font-size:9px}.jv-file{position:relative;overflow:hidden}.jv-file input{position:absolute;inset:0;opacity:0;cursor:pointer}.jv-art-preview{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;margin-top:12px;border:1px solid var(--jv-line);border-radius:12px;padding:10px;text-align:left;background:#fff}.jv-art-box{height:105px;border-radius:10px;background:#f2f3f4;display:grid;place-items:center;overflow:hidden}.jv-art-box img{max-width:92%;max-height:92%;object-fit:contain}.jv-review{display:inline-flex;margin-top:6px;padding:4px 7px;border-radius:999px;background:#fff1f2;color:#b3131b;font-size:8px;font-weight:950}.jv-patch-builder{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}.jv-patch-shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.jv-patch-shape{border:1px solid var(--jv-line);border-radius:12px;padding:8px;background:#fff;text-align:center;cursor:pointer}.jv-patch-shape.active{border-color:var(--jv-red);box-shadow:0 0 0 3px rgba(237,28,36,.09)}.jv-patch-shape svg{width:70px;height:62px}.jv-patch-shape b{display:block;font-size:9px}.jv-patch-options{border:1px solid var(--jv-line);border-radius:13px;padding:13px;background:#fafafa}.jv-size-custom{display:grid;grid-template-columns:1fr 1fr;gap:8px}.jv-size-custom input,.jv-field input,.jv-field textarea{width:100%;border:1px solid #dfe1e5;border-radius:9px;padding:10px;outline:none}.jv-size-custom input:focus,.jv-field input:focus,.jv-field textarea:focus{border-color:var(--jv-red);box-shadow:0 0 0 3px rgba(237,28,36,.08)}.jv-position-layout{display:grid;grid-template-columns:390px 1fr;gap:18px}.jv-position-preview{height:440px;border-radius:16px;background:linear-gradient(145deg,#f3f4f5,#e8eaed);display:grid;place-items:center;position:relative;overflow:hidden}.jv-position-preview>img{width:100%;height:100%;object-fit:contain}.jv-art-overlay{position:absolute;width:58px;height:48px;display:grid;place-items:center;transform-origin:center center;transition:.2s}.jv-art-overlay img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.24))}.jv-art-overlay span{background:#111;color:#fff;border:2px solid #fff;border-radius:7px;padding:5px 6px;font-size:7px;font-weight:950;text-align:center;box-shadow:0 3px 8px rgba(0,0,0,.18)}.jv-pos-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.jv-pos{border:1px solid #dfe1e5;background:#fff;border-radius:9px;padding:9px;text-align:left;font-weight:900;font-size:10px}.jv-pos.active{background:#111;color:#fff;border-color:#111}.jv-size-card{border:1px solid var(--jv-line);border-radius:11px;padding:9px;cursor:pointer}.jv-size-card.active{border-color:var(--jv-red);box-shadow:0 0 0 3px rgba(237,28,36,.08)}.jv-size-card b{display:block;font-size:10px}.jv-size-card small{display:block;color:var(--jv-muted);font-size:8px}.jv-custom-list{display:grid;gap:7px;margin-top:12px}.jv-custom{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--jv-line);border-radius:11px;padding:9px}.jv-custom b{display:block;font-size:10px}.jv-custom small{display:block;color:var(--jv-muted);font-size:8px}.jv-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.jv-field{margin-bottom:11px}.jv-field label{display:block;font-size:9px;font-weight:950;margin-bottom:5px}.jv-autosave{display:flex;align-items:center;gap:8px;background:#eaf9f1;border:1px solid #bee6d0;border-radius:10px;padding:9px 11px;color:#246c47;margin-bottom:14px;font-size:9px}.jv-autosave i{width:8px;height:8px;border-radius:50%;background:var(--jv-green);box-shadow:0 0 0 4px rgba(25,173,104,.12)}.jv-upsells{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.jv-summary h3{margin:0 0 12px;font-size:17px}.jv-summary-product{display:flex;gap:9px;padding-bottom:11px;border-bottom:1px solid var(--jv-line)}.jv-summary-product img{width:66px;height:72px;object-fit:contain;background:#f1f2f3;border-radius:9px}.jv-summary-product b,.jv-summary-row b{font-size:10px}.jv-summary-product small,.jv-summary-row small{display:block;color:var(--jv-muted);font-size:8px}.jv-summary-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--jv-line)}.jv-summary-total{display:flex;justify-content:space-between;gap:10px;padding-top:13px;font-size:18px;font-weight:950}.jv-note{background:#fff1f2;border-left:4px solid var(--jv-yellow);border-radius:8px;padding:9px 10px;margin-top:11px;color:#5b5f65;font-size:8px}.jv-final{background:#111;color:#fff;border-radius:13px;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}.jv-final small{color:#b9bdc3}.jv-final b{font-size:24px}.jv-mobile-total{display:none}.jv-modal{position:fixed;inset:0;background:rgba(0,0,0,.58);z-index:120;display:none;align-items:center;justify-content:center;padding:18px}.jv-modal.show{display:flex}.jv-modal-card{width:min(660px,100%);background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.32)}.jv-modal-head{background:#111;color:#fff;padding:15px 18px;display:flex;justify-content:space-between}.jv-modal-head span{color:var(--jv-red);font-size:9px;font-weight:950}.jv-modal-body{padding:18px}.jv-save-step{display:grid;grid-template-columns:26px 1fr auto;gap:9px;align-items:center;padding:9px 0;border-bottom:1px solid var(--jv-line)}.jv-save-step>span{width:23px;height:23px;border-radius:50%;background:#eaf9f1;color:var(--jv-green);display:grid;place-items:center;font-weight:950}.jv-save-step small{display:block;color:var(--jv-muted);font-size:8px}.jv-save-step strong{font-size:8px;color:var(--jv-green)}.jv-order-result{display:flex;justify-content:space-between;gap:10px;background:#f6f7f8;border-radius:10px;padding:11px;margin-top:12px}.jv-order-result small{display:block;color:var(--jv-muted);font-size:8px}.jv-order-result b{font-size:17px}.jv-modal-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:13px}.jv-whatsapp{background:#20b967;color:#fff}.jv-loading{opacity:.6;pointer-events:none} @media(max-width:1050px){.jv-layout{grid-template-columns:1fr}.jv-summary{position:relative;top:auto}.jv-product-intro,.jv-config,.jv-position-layout{grid-template-columns:1fr}.jv-product-media,.jv-config-media,.jv-position-preview{height:350px;min-height:0}.jv-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:720px){.jv-sticky-head{top:64px}.jv-title-row{align-items:flex-start;flex-direction:column;gap:4px}.jv-title-row h1{font-size:22px}.jv-autosave-label{display:none}.jv-eyebrow{margin-left:6px}.jv-progress-card{margin-left:-12px;margin-right:-12px;border-radius:0;border-left:0;border-right:0;padding:9px 6px 6px}.jv-progress-card:before{left:30px;right:30px;top:27px}.jv-progress{grid-template-columns:repeat(6,60px);overflow-x:auto;scrollbar-width:none}.jv-progress::-webkit-scrollbar{display:none}.jv-step-icon{width:34px;height:34px;border-width:4px}.jv-step-icon svg{width:16px;height:16px}.jv-step-label{font-size:7px}.jv-progress-hint{display:none}.jv-layout{padding-top:12px;padding-left:12px;padding-right:12px}.jv-panel{padding:14px;border-radius:13px}.jv-panel h2{font-size:20px}.jv-product-media,.jv-config-media,.jv-position-preview{height:290px}.jv-grid{grid-template-columns:repeat(2,1fr);gap:7px}.jv-card-img{height:112px}.jv-patch-builder{grid-template-columns:1fr}.jv-patch-shapes{grid-template-columns:repeat(3,1fr)}.jv-form-grid{grid-template-columns:1fr}.jv-upsells{grid-template-columns:1fr 1fr}.jv-summary{display:none}.jv-mobile-total{display:flex;position:fixed;left:8px;right:8px;bottom:8px;z-index:80;background:#111;color:#fff;border-radius:13px;padding:10px 12px;align-items:center;justify-content:space-between;box-shadow:0 20px 50px rgba(0,0,0,.3)}.jv-mobile-total small{display:block;color:#c4c8ce;font-size:8px}.jv-mobile-total b{font-size:16px}.jv-actions{position:sticky;bottom:72px;background:#fff;padding-top:9px;z-index:8}.jv-art-preview{grid-template-columns:82px 1fr}.jv-art-box{height:82px}.jv-feature-row{grid-template-columns:1fr 1fr}.jv-pos-grid{grid-template-columns:1fr 1fr}} /* FINAL JOURNEY BRAND — remove every yellow/gold accent */ :root{ --jv-red:#ed1c24 !important; --jv-yellow:#ed1c24 !important; /* legacy variable retained, value is red */ --jv-soft-red:#fff1f2 !important; } /* Legacy yellow notes/review chips -> soft red */ .jv-note{ background:#fff1f2 !important; border-left-color:#ed1c24 !important; color:#5b5f65 !important; } .jv-review, .jv-needs-review{ background:#fff1f2 !important; color:#b3131b !important; border:1px solid #ffd0d5 !important; } /* Colored journey buttons = red + white immediately */ .jv-page .btn-accent, .jv-page .btn-yellow, .jv-page .btn-primary, .jv-page button.is-primary{ background:#ed1c24 !important; border-color:#ed1c24 !important; color:#fff !important; } .jv-page .btn-accent *, .jv-page .btn-yellow *, .jv-page .btn-primary *, .jv-page button.is-primary *{ color:#fff !important; } .jv-page .btn-accent:hover, .jv-page .btn-yellow:hover, .jv-page .btn-primary:hover, .jv-page button.is-primary:hover{ background:#c9141d !important; border-color:#c9141d !important; color:#fff !important; } /* Price / active accent text */ .jv-card-price, .jv-modal-head span, .jv-price-accent{ color:#ed1c24 !important; } /* =============================================================== MOBILE APP JOURNEY V4 Desktop remains unchanged. Mobile becomes app-like. =============================================================== */ .jv-mobile-appbar, .jv-mobile-sheet, .jv-sheet-backdrop{display:none} @media(max-width:720px){ html{scroll-behavior:auto} body.journey-app-page{ background:#f4f5f7; overscroll-behavior-y:none; } /* Journey behaves like a dedicated app screen */ body.journey-app-page .promo-bar, body.journey-app-page .site-header, body.journey-app-page .footer{ display:none !important; } .jv-page{ min-height:100dvh; padding-bottom:calc(92px + env(safe-area-inset-bottom)); background:#f4f5f7; } /* App bar */ .jv-mobile-appbar{ display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:8px; position:sticky; top:0; z-index:60; height:62px; padding:6px 14px; padding-top:max(6px,env(safe-area-inset-top)); background:rgba(255,255,255,.96); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid #eceef1; } .jv-app-back{ width:38px;height:38px;border-radius:12px; display:grid;place-items:center; color:#191b20;background:#f5f6f7; } .jv-app-back svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .jv-app-brand{display:flex;align-items:center;gap:8px;min-width:0} .jv-app-brand img{width:34px;height:34px;object-fit:contain} .jv-app-brand div{min-width:0} .jv-app-brand b{display:block;font-size:13px;line-height:1.1;color:#17191d} .jv-app-brand small{display:block;margin-top:2px;font-size:9px;color:#7a7f87;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .jv-app-step{ display:inline-flex;align-items:center;justify-content:center; min-width:44px;height:30px;padding:0 10px; border-radius:999px;background:#fff0f2;color:var(--jv-red); border:1px solid #ffd5da;font-size:10px;font-weight:950; } /* Header now only contains compact progress */ .jv-sticky-head{ top:62px; box-shadow:none; background:rgba(255,255,255,.96); border-bottom:1px solid #eceef1; } .jv-sticky-head .container{padding:7px 10px 8px} .jv-title-row{display:none !important} .jv-progress-card{ margin:0; padding:7px 2px 5px; border:0; border-radius:0; box-shadow:none; background:transparent; } .jv-progress-card:before{ left:7%;right:7%;top:23px;height:2px;background:#e5e7eb; } .jv-progress{ grid-template-columns:repeat(6,minmax(0,1fr)); overflow:visible; width:100%; } .jv-step-icon{ width:31px;height:31px;border-width:3px; } .jv-step-icon svg{width:15px;height:15px} .jv-step-label{ display:block; font-size:6.5px; line-height:1.1; margin-top:4px; min-height:14px; letter-spacing:-.01em; } .jv-now{ display:none; } .jv-progress-hint{display:none} /* Main app card */ .jv-layout{ display:block; padding:10px 10px 14px; } .jv-panel{ border-radius:22px; padding:16px; border:1px solid #e7e9ec; box-shadow:0 10px 28px rgba(16,17,20,.055); } .jv-panel h2{ font-size:22px; line-height:1.12; letter-spacing:-.035em; } .jv-sub{ font-size:11px; line-height:1.5; margin-bottom:14px; } .jv-badge{ padding:5px 9px; font-size:8px; } /* Product and preview are intentionally compact on a phone */ .jv-product-intro, .jv-config, .jv-position-layout{ display:block; } .jv-product-media, .jv-config-media, .jv-position-preview{ height:245px !important; min-height:245px !important; border-radius:18px; margin-bottom:15px; } .jv-product-media img, .jv-config-media img, .jv-position-preview>img{ max-height:245px; object-fit:contain; } .jv-product-copy h3{ font-size:23px; margin-top:2px; } .jv-product-copy p{font-size:11px} .jv-price-big{ font-size:25px; margin:12px 0; } .jv-feature-row{ grid-template-columns:repeat(2,1fr); gap:7px; margin:12px 0 4px; } .jv-feature{ padding:9px; min-height:62px; } .jv-feature b{font-size:10px} .jv-feature small{font-size:8px;line-height:1.35} /* Touch controls */ .jv-swatch, .jv-chip, .jv-segment button, .jv-pos, .jv-qty button, .btn{ min-height:44px; -webkit-tap-highlight-color:transparent; } .jv-swatches{gap:8px} .jv-swatch{ padding:7px 10px; font-size:10px; } .jv-color-dot{width:25px;height:25px} .jv-chip,.jv-segment button{ padding:9px 12px; font-size:10px; } .jv-chip.active, .jv-segment button.active, .jv-pos.active{ background:var(--jv-red); border-color:var(--jv-red); color:#fff; } .jv-option{margin-bottom:14px} .jv-option-title{font-size:9px;margin-bottom:7px} .jv-qty{height:46px} .jv-qty button{height:44px} .jv-qty input{font-size:16px} /* Cards */ .jv-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .jv-card{ border-radius:15px; } .jv-card:hover{transform:none;box-shadow:none} .jv-card-img{height:118px} .jv-card-body{padding:9px} .jv-card-body b{font-size:11px} .jv-card-body small{font-size:8px} .jv-card-price{font-size:9px} /* Position/size step */ .jv-pos-grid{gap:8px} .jv-pos{ text-align:center; padding:10px 7px; border-radius:12px; font-size:9px; } .jv-size-card{ min-height:58px; border-radius:12px; padding:10px; } /* Forms: 16px prevents iOS zoom and focus jumps */ .jv-form-grid{grid-template-columns:1fr} .jv-field input, .jv-field textarea, .jv-size-custom input{ font-size:16px !important; border-radius:12px; min-height:48px; } .jv-field textarea{min-height:96px} .jv-autosave{ border-radius:12px; font-size:9px; } .jv-patch-builder{grid-template-columns:1fr} .jv-patch-shapes{grid-template-columns:repeat(3,1fr)} .jv-art-preview{grid-template-columns:76px 1fr} .jv-art-box{height:76px} /* Keep secondary actions in content, but primary CTA lives in app dock */ .jv-actions{ position:static !important; bottom:auto !important; background:transparent !important; padding-top:8px !important; margin-top:10px; gap:7px; } .jv-actions>.btn-accent, .jv-actions>div>.btn-accent, .jv-product-copy>.btn-accent, .jv-final>.btn-accent{ display:none !important; } .jv-actions .btn-outline{ flex:1; min-width:0; padding-left:9px;padding-right:9px; font-size:10px; } .jv-final{ border-radius:14px; padding:12px; } .jv-summary{display:none !important} .jv-upsells{grid-template-columns:repeat(2,1fr)} /* App-style fixed dock */ .jv-mobile-total{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; position:fixed; left:10px;right:10px; bottom:calc(8px + env(safe-area-inset-bottom)); z-index:85; padding:8px; border-radius:19px; background:rgba(255,255,255,.96) !important; border:1px solid #e3e5e8; box-shadow:0 16px 45px rgba(17,19,24,.18); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); color:#17191d !important; } .jv-mobile-total-info{ border:0;background:transparent;padding:3px 5px; text-align:left;min-width:0;color:#17191d; } .jv-mobile-total-info small{ display:block;color:#7c8189;font-size:8px; } .jv-mobile-total-info b{ display:block;color:#17191d;font-size:17px;line-height:1.1;margin-top:2px; } .jv-mobile-total-info span{ display:block;color:var(--jv-red);font-size:8px;font-weight:900;margin-top:2px; } .jv-mobile-primary{ min-width:118px; height:50px; border-radius:14px !important; padding:0 15px !important; font-size:12px !important; white-space:nowrap; } .jv-mobile-primary:disabled{ background:#d8dbe0 !important; border-color:#d8dbe0 !important; color:#fff !important; box-shadow:none !important; } /* Bottom sheet for summary */ .jv-sheet-backdrop{ position:fixed;inset:0;z-index:98; background:rgba(11,12,15,.45); opacity:0;pointer-events:none; transition:.2s opacity; } .jv-sheet-backdrop.show{ display:block;opacity:1;pointer-events:auto; } .jv-mobile-sheet{ display:block; position:fixed; left:0;right:0;bottom:0; z-index:99; max-height:78dvh; padding:7px 14px calc(16px + env(safe-area-inset-bottom)); border-radius:24px 24px 0 0; background:#fff; box-shadow:0 -18px 50px rgba(0,0,0,.18); transform:translateY(105%); transition:.24s transform ease; overflow:auto; } .jv-mobile-sheet.show{transform:translateY(0)} .jv-sheet-handle{ width:42px;height:4px;border-radius:99px;background:#d7dade;margin:2px auto 10px; } .jv-sheet-head{ display:flex;align-items:center;justify-content:space-between; padding-bottom:10px;border-bottom:1px solid #eceef1; } .jv-sheet-head small{color:#8a8f96;font-size:8px} .jv-sheet-head h3{margin:1px 0 0;font-size:20px} .jv-sheet-head button{ width:36px;height:36px;border:0;border-radius:12px;background:#f3f4f5; font-size:22px;line-height:1; } .jv-sheet-body{padding:12px 0 3px} .jv-sheet-body .jv-summary-product{ display:flex;gap:10px;align-items:center; } .jv-sheet-body .jv-summary-product img{ width:64px;height:64px;object-fit:contain;background:#f3f4f5;border-radius:12px; } /* Give the stage a stable anchor for step transitions */ #journeyStage{scroll-margin-top:132px} } /* Small phones */ @media(max-width:380px){ .jv-app-brand b{font-size:12px} .jv-step-label{font-size:6px} .jv-step-icon{width:29px;height:29px} .jv-product-media,.jv-config-media,.jv-position-preview{ height:220px !important;min-height:220px !important; } .jv-mobile-primary{min-width:106px;padding:0 12px !important} } /* =============================================================== MOBILE APP V5 — SAFE INTERACTION MODE Tested target: mobile Safari-like viewport 390x844. Primary navigation uses the ORIGINAL stage buttons again. =============================================================== */ @media(max-width:720px){ /* All interactive UI should react immediately to touch */ .jv-page button, .jv-page .jv-card, .jv-page .jv-size-card, .jv-page .jv-patch-shape, .jv-page label{ touch-action:manipulation; -webkit-tap-highlight-color:rgba(237,28,36,.08); } /* Do not hide real step buttons. V4 hid them and relied on a second fixed button; on real phones that can be confusing or become disabled. */ .jv-actions>.btn-accent, .jv-actions>div>.btn-accent, .jv-product-copy>.btn-accent, .jv-final>.btn-accent{ display:inline-flex !important; } /* Original step buttons become large app-like actions */ .jv-actions{ display:grid !important; grid-template-columns:1fr; gap:8px !important; margin-top:14px !important; } .jv-actions>div{ display:grid !important; grid-template-columns:1fr; gap:8px; } .jv-actions .btn{ width:100%; min-height:50px; border-radius:14px; font-size:12px; } .jv-product-copy>.btn-accent{ width:100%; min-height:52px; border-radius:14px; margin-top:8px; } .jv-final{ display:grid !important; grid-template-columns:1fr; gap:10px; } .jv-final>.btn-accent{ width:100%; min-height:52px; border-radius:14px; } /* V5 removes the duplicate "Lanjut" controller button. The bottom dock is only a compact total/summary control. */ .jv-mobile-total{ grid-template-columns:1fr !important; left:12px !important; right:12px !important; bottom:calc(8px + env(safe-area-inset-bottom)) !important; padding:6px 9px !important; border-radius:16px !important; } .jv-mobile-primary{ display:none !important; } .jv-mobile-total-info{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; width:100%; min-height:44px; } .jv-mobile-total-info small{ margin:0 !important; } .jv-mobile-total-info b{ font-size:16px !important; margin:0 !important; } .jv-mobile-total-info span{ margin:0 !important; padding:7px 9px; border-radius:10px; background:#fff1f2; white-space:nowrap; } /* Enough breathing room so no bottom dock covers a button */ .jv-page{ padding-bottom:calc(78px + env(safe-area-inset-bottom)) !important; } .jv-layout{ padding-bottom:22px !important; } /* Controls must be above any decorative layers */ #journeyStage, #journeyStage .jv-actions, #journeyStage button, #journeyStage input, #journeyStage textarea, #journeyStage label, #journeyStage .jv-card{ position:relative; z-index:2; } /* Slightly simpler progress to free vertical space */ .jv-sticky-head{top:62px !important} .jv-progress-card{padding:5px 1px 4px !important} .jv-step-icon{width:29px !important;height:29px !important} .jv-step-label{font-size:6px !important;min-height:12px !important} /* Product visual no longer dominates the screen */ .jv-product-media, .jv-config-media, .jv-position-preview{ height:220px !important; min-height:220px !important; } .jv-product-media img, .jv-config-media img, .jv-position-preview>img{ max-height:220px !important; } } /* V5.1 — final overlap fix after automated viewport test. Ringkasan is now IN NORMAL DOCUMENT FLOW, never fixed over buttons. */ @media(max-width:720px){ .jv-mobile-total{ position:relative !important; left:auto !important; right:auto !important; bottom:auto !important; width:auto !important; margin:0 10px 14px !important; grid-template-columns:1fr !important; z-index:4 !important; box-shadow:0 8px 22px rgba(17,19,24,.08) !important; } .jv-page{ padding-bottom:0 !important; } .jv-layout{ padding-bottom:12px !important; } .jv-actions, .jv-final{ margin-bottom:0 !important; } } /* =============================================================== MOBILE APP JOURNEY V6 — APPROVED MOCKUP Compact app bar + persistent CTA + 4 icon bottom navigation. =============================================================== */ .jv-bottom-nav, .jv-mobile-action-dock{display:none} @media(max-width:720px){ /* Robustly hide the normal website chrome inside Journey. */ body.journey-app-page .promo-bar, body.journey-app-page .site-header, body.journey-app-page .footer, body:has(#journeyApp) .promo-bar, body:has(#journeyApp) .site-header, body:has(#journeyApp) .footer{ display:none !important; } body.journey-app-page, body:has(#journeyApp){ background:#f5f6f8 !important; } /* Compact app header only. */ .jv-mobile-appbar{ display:grid !important; grid-template-columns:40px minmax(0,1fr) auto; gap:9px; align-items:center; height:58px; padding:7px 12px; padding-top:max(7px, env(safe-area-inset-top)); position:sticky; top:0; z-index:110; background:rgba(255,255,255,.97); border-bottom:1px solid #eceef1; box-shadow:0 4px 16px rgba(17,19,24,.04); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); } .jv-app-back{ border:0 !important; width:38px !important; height:38px !important; padding:0 !important; border-radius:12px !important; background:#f5f6f7 !important; color:#17191d !important; display:grid !important; place-items:center !important; } .jv-app-back svg{ width:20px;height:20px; fill:none;stroke:currentColor;stroke-width:2.1; stroke-linecap:round;stroke-linejoin:round; } .jv-app-title{min-width:0} .jv-app-title b{ display:block; font-size:13px; line-height:1.1; color:#ed1c24; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jv-app-title small{ display:block; margin-top:3px; font-size:9px; color:#7f848c; } .jv-app-step{ min-width:45px !important; height:30px !important; border-radius:999px !important; background:#fff0f2 !important; color:#ed1c24 !important; border:1px solid #ffd2d7 !important; display:grid !important; place-items:center !important; padding:0 9px !important; font-size:10px !important; font-weight:950 !important; } /* The old six-icon desktop journey header is removed on mobile. */ .jv-sticky-head{ display:none !important; } /* Main content starts immediately below app bar. */ .jv-page{ min-height:100dvh !important; padding-bottom:calc(142px + env(safe-area-inset-bottom)) !important; background:#f5f6f8 !important; } .jv-layout{ display:block !important; padding:10px 10px 16px !important; } .jv-panel{ padding:15px !important; border-radius:20px !important; background:#fff !important; border:1px solid #e8e9ec !important; box-shadow:0 8px 24px rgba(17,19,24,.045) !important; } .jv-panel h2{ margin-top:7px !important; font-size:22px !important; line-height:1.12 !important; letter-spacing:-.035em !important; } .jv-sub{ font-size:11px !important; line-height:1.45 !important; margin-bottom:13px !important; } .jv-badge{ font-size:7px !important; padding:4px 8px !important; } /* Product images are compact so controls/CTA appear quickly. */ .jv-product-media, .jv-config-media, .jv-position-preview{ height:218px !important; min-height:218px !important; margin-bottom:13px !important; border-radius:16px !important; } .jv-product-media img, .jv-config-media img, .jv-position-preview>img{ width:100% !important; height:100% !important; max-height:218px !important; object-fit:contain !important; } .jv-product-copy h3{font-size:22px !important} .jv-product-copy p{font-size:10px !important;line-height:1.45 !important} .jv-price-big{ font-size:25px !important; margin:10px 0 13px !important; } .jv-feature-row{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:7px !important; margin:10px 0 4px !important; } .jv-feature{ min-height:58px !important; padding:9px !important; border-radius:12px !important; } .jv-feature b{font-size:9px !important} .jv-feature small{font-size:7.5px !important} /* Color & size selectors: always visible and touch friendly. */ .jv-option{margin-bottom:14px !important} .jv-option-title{ font-size:9px !important; margin-bottom:7px !important; color:#3d4148 !important; } .jv-swatches,.jv-chips{ gap:8px !important; } .jv-swatch{ min-width:44px !important; min-height:44px !important; padding:6px 9px !important; font-size:9px !important; border-radius:12px !important; touch-action:manipulation !important; } .jv-color-dot{width:26px !important;height:26px !important} .jv-chip{ min-width:46px !important; min-height:44px !important; padding:9px 11px !important; border-radius:11px !important; font-size:10px !important; touch-action:manipulation !important; } .jv-swatch.active, .jv-chip.active, .jv-pos.active, .jv-segment button.active{ border-color:#ed1c24 !important; background:#ed1c24 !important; color:#fff !important; box-shadow:none !important; } .jv-swatch.active .jv-color-dot{ border-color:#fff !important; box-shadow:0 0 0 2px #ed1c24 !important; } .jv-qty{ width:150px !important; height:46px !important; border-radius:12px !important; } .jv-qty button{ width:44px !important; min-height:44px !important; touch-action:manipulation !important; } .jv-qty input{ font-size:16px !important; } /* Cards & forms */ .jv-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; } .jv-card{border-radius:14px !important} .jv-card-img{height:115px !important} .jv-card-body{padding:9px !important} .jv-card-body b{font-size:10px !important} .jv-card-body small{font-size:8px !important} .jv-card-price{font-size:8px !important} .jv-pos-grid{gap:7px !important} .jv-pos{ min-height:44px !important; padding:9px 6px !important; text-align:center !important; font-size:9px !important; border-radius:11px !important; touch-action:manipulation !important; } .jv-form-grid{grid-template-columns:1fr !important} .jv-field input, .jv-field textarea, .jv-size-custom input{ font-size:16px !important; min-height:47px !important; border-radius:12px !important; } .jv-field textarea{min-height:94px !important} /* Desktop summary is not shown on mobile. */ .jv-summary{display:none !important} /* Native CTA buttons stay in DOM as fallback but don't duplicate the app CTA. */ .jv-actions>.btn-accent, .jv-actions>div>.btn-accent, .jv-product-copy>.btn-accent, .jv-final>.btn-accent{ display:none !important; } .jv-actions{ position:static !important; display:flex !important; margin-top:11px !important; padding:0 !important; background:transparent !important; } .jv-actions .btn-outline{ min-height:42px !important; border-radius:12px !important; font-size:9px !important; } /* Persistent primary action, directly above the 4-icon app nav. */ .jv-mobile-action-dock{ display:block !important; position:fixed; left:10px;right:10px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:120; padding:7px; background:rgba(255,255,255,.97); border:1px solid #e6e8eb; border-radius:17px; box-shadow:0 10px 30px rgba(17,19,24,.16); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } .jv-mobile-primary{ display:flex !important; width:100% !important; min-height:50px !important; border-radius:13px !important; align-items:center !important; justify-content:center !important; font-size:12px !important; pointer-events:auto !important; touch-action:manipulation !important; } .jv-mobile-primary:disabled{ background:#d7dadf !important; border-color:#d7dadf !important; color:#fff !important; box-shadow:none !important; } /* Four-item mobile app navigation. */ .jv-bottom-nav{ display:grid !important; grid-template-columns:repeat(5,1fr); position:fixed; left:0;right:0;bottom:0; z-index:115; height:calc(64px + env(safe-area-inset-bottom)); padding:5px 8px env(safe-area-inset-bottom); background:rgba(255,255,255,.98); border-top:1px solid #e7e9ec; box-shadow:0 -7px 20px rgba(17,19,24,.055); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } .jv-bottom-item{ appearance:none; border:0; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:#80858d; font-size:8px; font-weight:800; text-decoration:none; min-width:0; touch-action:manipulation; } .jv-bottom-item svg{ width:20px;height:20px; fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round; } .jv-bottom-item.active, .jv-bottom-item:active{ color:#ed1c24; } /* Old mobile summary strip is completely gone. */ .jv-mobile-total{display:none !important} /* Bottom sheet is only opened from "Pesanan". */ .jv-mobile-sheet{ max-height:76dvh !important; padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important; } #journeyStage{scroll-margin-top:70px !important} } @media(max-width:380px){ .jv-mobile-action-dock{left:8px;right:8px} .jv-product-media, .jv-config-media, .jv-position-preview{ height:200px !important; min-height:200px !important; } .jv-product-media img, .jv-config-media img, .jv-position-preview>img{ max-height:200px !important; } } /* ============================================================ MOBILE APP V7 FAILSAFE If the Blade markup on server is older/mixed, JS creates the app bar, CTA dock, 4-icon nav, and summary sheet at runtime. Native stage CTA remains visible until app shell is confirmed. ============================================================ */ @media(max-width:720px){ /* Hard-hide legacy mobile summary from previous versions */ .jv-mobile-total{ display:none !important; } /* Fallback: native step CTA must NEVER disappear by default */ body:not(.jv-mobile-shell-ready) .jv-actions>.btn-accent, body:not(.jv-mobile-shell-ready) .jv-actions>div>.btn-accent, body:not(.jv-mobile-shell-ready) .jv-product-copy>.btn-accent, body:not(.jv-mobile-shell-ready) .jv-final>.btn-accent{ display:flex !important; width:100% !important; min-height:52px !important; align-items:center !important; justify-content:center !important; border-radius:14px !important; margin-top:10px !important; background:#ed1c24 !important; border-color:#ed1c24 !important; color:#fff !important; font-size:12px !important; touch-action:manipulation !important; position:relative !important; z-index:10 !important; } /* Once shell is ready, use the persistent app CTA to avoid duplicates */ body.jv-mobile-shell-ready .jv-actions>.btn-accent, body.jv-mobile-shell-ready .jv-actions>div>.btn-accent, body.jv-mobile-shell-ready .jv-product-copy>.btn-accent, body.jv-mobile-shell-ready .jv-final>.btn-accent{ display:none !important; } /* Runtime-injected shell */ .jv-mobile-appbar{ display:grid !important; } .jv-mobile-action-dock{ display:block !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; } .jv-mobile-action-dock .jv-mobile-primary{ display:flex !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; width:100% !important; } .jv-bottom-nav{ display:grid !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; } /* Make stage controls impossible to sit behind decorative layers */ #journeyStage, #journeyStage button, #journeyStage input, #journeyStage textarea, #journeyStage label, #journeyStage .jv-card{ pointer-events:auto !important; } /* If old desktop header is still in DOM, hide it on journey */ body.journey-app-page .promo-bar, body.journey-app-page .site-header, body.journey-app-page .footer{ display:none !important; } } /* ============================================================= QA REVISION V8 — PRICE LAYOUT + FORM FEEDBACK ============================================================= */ .jv-price-summary{ margin-top:10px;padding:12px 13px;border:1px solid #ffd2d7;border-radius:12px; background:#fff1f2;color:#17191d; display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px; min-width:0;overflow:hidden; } .jv-price-copy{min-width:0} .jv-price-label{display:block;color:#6f747c;font-size:9px;line-height:1.25;overflow-wrap:anywhere} .jv-price-value{font-size:21px;font-weight:950;white-space:nowrap;color:#17191d;line-height:1.05} .jv-price-summary .jv-review{grid-column:1/-1;margin-top:0;width:max-content;max-width:100%} .jv-customer-error{display:none;color:#c9141d;font-size:8px;font-weight:800;margin-top:5px;line-height:1.35} .jv-field.has-error .jv-customer-error{display:block} .jv-field.has-error input,.jv-field.has-error textarea{border-color:#ed1c24 !important;box-shadow:0 0 0 3px rgba(237,28,36,.08) !important} .jv-field .jv-optional-hint{display:block;color:#8b9097;font-size:7px;font-weight:700;margin-top:4px} @media(max-width:720px){ .jv-price-summary{grid-template-columns:1fr !important;gap:4px !important;padding:11px 12px !important;border-radius:12px !important} .jv-price-label{font-size:8px !important} .jv-price-value{font-size:21px !important;white-space:normal !important} .jv-price-summary .jv-review{margin-top:4px !important} .jv-customer-error{font-size:8px !important} } /* V22 */ .jv-upsell-options{display:grid;grid-template-columns:1fr 1fr 70px;gap:6px;margin-top:8px}.jv-upsell-options select,.jv-upsell-options input{min-height:38px;border:1px solid #e2e5e9;border-radius:9px;background:#fff;padding:0 8px;font:inherit}.jv-final-actions{justify-content:space-between}.jv-final-actions .btn{min-width:220px}.retail-detail-actions-three{grid-template-columns:auto auto 1fr}.retail-product-keywords{font-size:10px;color:#9298a2;margin-top:4px;line-height:1.4}@media(max-width:720px){.jv-upsell-options{grid-template-columns:1fr 1fr}.jv-upsell-options input{grid-column:1/-1}.jv-final-actions{display:grid!important;grid-template-columns:1fr 1fr}.jv-final-actions .btn{min-width:0;width:100%}} /* ============================================================= V22.2 — PROJECT REVISI 10 POIN ============================================================= */ .jv-progress{grid-template-columns:repeat(7,minmax(0,1fr)) !important} .jv-progress-card:before{left:6.5% !important;right:6.5% !important} /* Detail warna sekarang punya galeri model pria / wanita / size chart */ .jv-config-media-gallery{ height:auto !important; min-height:430px; display:flex !important; flex-direction:column; align-items:stretch !important; justify-content:flex-start !important; padding:12px; gap:10px; overflow:hidden; } .jv-config-media-gallery>img{ width:100% !important; height:330px !important; min-height:0; object-fit:contain !important; border-radius:12px; background:#f1f2f3; } .jv-variant-gallery{display:flex;gap:8px;overflow-x:auto;padding:2px 0 1px;scrollbar-width:none} .jv-variant-gallery::-webkit-scrollbar{display:none} .jv-variant-thumb{position:relative;flex:0 0 82px;width:82px;height:82px;border:2px solid transparent;border-radius:11px;padding:0;overflow:hidden;background:#fff;cursor:pointer} .jv-variant-thumb.active{border-color:#ed1c24;box-shadow:0 0 0 2px rgba(237,28,36,.08)} .jv-variant-thumb img{width:100% !important;height:100% !important;object-fit:cover !important;border-radius:0 !important;background:#f2f3f4} .jv-variant-thumb span{position:absolute;left:4px;right:4px;bottom:4px;padding:3px 4px;border-radius:6px;background:rgba(15,16,18,.76);color:#fff;font-size:7px;font-weight:800;line-height:1.15;text-align:center} /* Poin 4: Selesai Custom kiri, + Bordir kanan */ .jv-change-design-row{margin-top:16px !important} .jv-custom-finish-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px} .jv-custom-finish-actions .btn{width:100%;min-height:45px;display:flex;align-items:center;justify-content:center} .jv-custom-finish-actions .btn-accent{grid-column:1} .jv-custom-finish-actions .btn-outline{grid-column:2} /* Poin 1: kontrol qty produk tambahan tidak boleh terpotong */ .jv-upsell-options{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 96px !important;overflow:visible !important} .jv-upsell-options select,.jv-upsell-options input{box-sizing:border-box;min-width:0;width:100%;overflow:visible !important} .jv-upsell-options input[type="number"]{-webkit-appearance:auto !important;appearance:auto !important;padding-left:8px !important;padding-right:3px !important} @media(max-width:720px){ .jv-progress{grid-template-columns:repeat(7,58px) !important;overflow-x:auto !important;justify-content:start !important} .jv-config-media-gallery{min-height:0 !important;height:auto !important;padding:8px !important} .jv-config-media-gallery>img{height:230px !important} .jv-variant-thumb{flex-basis:70px;width:70px;height:70px} .jv-custom-finish-actions{grid-template-columns:1fr 1fr;position:relative;z-index:9;margin-bottom:8px} .jv-custom-finish-actions .btn{min-height:43px;padding:9px 8px;font-size:10px} .jv-upsell-options{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 82px !important} .jv-upsell-options input{grid-column:auto !important} } /* =============================================================== V22.3 — GALERI WARNA SESUAI REFERENSI CLIENT Fokus: contoh model laki-laki + perempuan + size chart lebih dominan. =============================================================== */ .jv-variant-showcase{min-width:0} .jv-variant-showcase-head{margin-bottom:10px} .jv-variant-showcase-head b{display:block;font-size:14px;line-height:1.25;color:#17191d;letter-spacing:-.02em} .jv-variant-showcase-head span{display:block;margin-top:4px;color:#737981;font-size:9px;line-height:1.45} .jv-config-media-gallery{ min-height:0 !important; height:auto !important; padding:10px !important; display:block !important; background:#f4f5f6 !important; border:1px solid #e4e6e9; } .jv-variant-preview{ width:100%; height:360px; display:grid; grid-template-columns:1fr; overflow:hidden; border-radius:14px; background:#eceeef; } .jv-variant-preview>img{ width:100% !important; height:100% !important; max-height:none !important; object-fit:cover !important; object-position:50% 18%; border-radius:0 !important; background:#eceeef; } .jv-variant-preview-pair{grid-template-columns:1fr 1fr;gap:2px} .jv-variant-preview-pair>img{object-fit:cover !important;object-position:50% 18%} .jv-variant-preview.is-size-chart{background:#fff} .jv-variant-preview.is-size-chart>img{object-fit:contain !important;object-position:center;padding:10px} .jv-variant-gallery{ display:flex; gap:7px; overflow-x:auto; margin-top:9px; padding:1px 1px 3px; scroll-snap-type:x proximity; scrollbar-width:none; } .jv-variant-gallery::-webkit-scrollbar{display:none} .jv-variant-thumb{ position:relative; flex:0 0 66px; width:66px; height:66px; border:2px solid transparent; border-radius:9px; padding:0; overflow:hidden; background:#fff; cursor:pointer; scroll-snap-align:start; box-shadow:0 1px 0 rgba(16,17,20,.04); } .jv-variant-thumb.active{border-color:#ed1c24;box-shadow:0 0 0 2px rgba(237,28,36,.09)} .jv-variant-thumb>img{width:100% !important;height:100% !important;object-fit:cover !important;object-position:50% 18%;border-radius:0 !important;background:#f2f3f4} .jv-variant-thumb[data-type="size_chart"]>img{object-fit:contain !important;padding:3px;background:#fff} .jv-variant-thumb small{display:none} .jv-thumb-pair{display:grid;width:100%;height:100%;grid-template-columns:1fr 1fr;gap:1px;background:#e8eaec} .jv-thumb-pair img{width:100% !important;height:100% !important;object-fit:cover !important;object-position:50% 18%} @media(max-width:1050px){ .jv-variant-preview{height:430px} } @media(max-width:720px){ .jv-variant-showcase-head b{font-size:13px} .jv-variant-showcase-head span{font-size:9px} .jv-config-media-gallery{padding:8px !important;margin-bottom:14px !important} .jv-variant-preview{height:360px} .jv-variant-preview-pair{grid-template-columns:1fr 1fr} .jv-variant-thumb{flex-basis:62px;width:62px;height:62px} } @media(max-width:420px){ .jv-variant-preview{height:330px} .jv-variant-gallery{gap:6px} .jv-variant-thumb{flex-basis:58px;width:58px;height:58px} } /* ============================================================ V22.4 — REVISI 23 SEPTEMBER + MOBILE COMFORT ============================================================ */ .jv-custom-detail-card,.jv-review-card,.jv-review-total{border:1px solid #e6e8eb;border-radius:16px;background:#fff} .jv-custom-detail-card{padding:16px}.jv-custom-detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid #eceef1}.jv-custom-detail-head span{font-size:12px;font-weight:950}.jv-custom-detail-head b{font-size:13px;color:var(--jv-red)} .jv-custom-detail-grid{display:grid;grid-template-columns:280px 1fr;gap:18px;align-items:center;padding-top:15px}.jv-custom-detail-preview{height:250px;border-radius:14px;background:#f4f5f6;display:grid;place-items:center;overflow:hidden}.jv-custom-detail-preview img{max-width:92%;max-height:92%;object-fit:contain}.jv-custom-detail-fallback svg{width:70px;height:70px;stroke:#ed1c24;fill:none;stroke-width:1.5}.jv-custom-detail-copy small{display:block;color:#7a7f87;font-size:10px;margin-top:8px}.jv-custom-detail-copy b{display:block;font-size:14px}.jv-custom-detail-copy strong{display:block;font-size:26px;margin-top:3px}.jv-custom-detail-copy p{font-size:11px;color:#70757d;line-height:1.55}.jv-inline-link{display:inline-flex;margin-top:12px;color:#626871;font-weight:850;font-size:11px}.jv-custom-finish-single{display:flex;justify-content:flex-end;margin-top:12px}.jv-custom-finish-single .btn{min-width:220px} .jv-saved-customs{margin-top:15px;padding-top:13px;border-top:1px solid #eceef1}.jv-saved-customs>b{display:block;font-size:11px;margin-bottom:8px}.jv-link-danger{border:0;background:transparent;color:#c61c24;font-weight:850;font-size:10px;cursor:pointer} .jv-review-total{padding:18px 20px;margin:14px 0;background:#111318;color:#fff}.jv-review-total small{display:block;font-size:10px;color:#bfc3ca}.jv-review-total b{display:block;font-size:30px;margin-top:3px}.jv-review-total span{display:block;font-size:9px;color:#c7cbd0;margin-top:5px}.jv-review-card{padding:16px;margin-top:12px}.jv-review-card h3{margin:0 0 12px;font-size:15px}.jv-review-card-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.jv-review-card-title span{font-size:9px;color:#777d84}.jv-review-product{display:flex;align-items:center;gap:12px}.jv-review-product img{width:82px;height:82px;object-fit:contain;background:#f2f3f4;border-radius:13px}.jv-review-product b,.jv-review-product strong{display:block}.jv-review-product small{display:block;color:#777d84;font-size:10px;margin:3px 0}.jv-review-custom{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid #eceef1}.jv-review-custom:first-of-type{border-top:0}.jv-review-custom b,.jv-review-custom strong{display:block;font-size:11px}.jv-review-custom small{font-size:9px;color:#777d84}.jv-review-custom>div:last-child{text-align:right}.jv-review-custom button{border:0;background:transparent;color:#c61c24;font-size:9px;font-weight:850;margin-top:3px}.jv-review-custom-total{display:flex;justify-content:space-between;gap:10px;margin-top:9px;padding:11px 12px;border-radius:11px;background:#fff1f2;color:#a8131c;font-size:12px}.jv-add-custom-review{width:100%;margin-top:10px}.jv-custom-total{background:#fff7f7;padding-left:8px;padding-right:8px;border-radius:9px}.jv-cart-button{border-color:#ed1c24!important;color:#ed1c24!important}.jv-cart-button:hover{background:#fff1f2!important} @media(max-width:720px){ /* Progress icons are intentionally visible on mobile. */ .jv-sticky-head{display:block!important;position:sticky!important;top:58px!important;z-index:105!important;background:rgba(255,255,255,.98)!important;box-shadow:0 5px 14px rgba(17,19,24,.05)!important} .jv-sticky-head .container{padding:6px 8px!important} .jv-title-row{display:none!important} .jv-progress-card{display:block!important;margin:0!important;padding:7px 3px 5px!important;border-radius:14px!important;overflow:visible!important} .jv-progress-card:before{display:none!important} .jv-progress{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:1px!important} .jv-step-icon{width:31px!important;height:31px!important;border-width:3px!important} .jv-step-icon svg{width:15px!important;height:15px!important} .jv-step-label{font-size:8px!important;line-height:1.05!important;margin-top:4px!important;min-height:17px!important} .jv-now{display:none!important} #journeyStage{scroll-margin-top:145px!important} .jv-page{padding-bottom:calc(154px + env(safe-area-inset-bottom))!important} .jv-layout{padding:9px 9px 18px!important} .jv-panel{padding:14px!important;border-radius:18px!important} .jv-panel h2{font-size:21px!important} .jv-sub{font-size:12px!important;line-height:1.55!important;color:#666c74!important} .jv-badge{font-size:8px!important} .jv-config{display:block!important} .jv-variant-showcase-head b{font-size:12px!important}.jv-variant-showcase-head span{font-size:10px!important;line-height:1.45!important} .jv-config-media-gallery{height:auto!important;min-height:0!important;padding:0!important;background:transparent!important;overflow:visible!important} .jv-variant-preview{height:260px!important;border-radius:15px!important;background:#f3f4f5!important;overflow:hidden!important} .jv-variant-preview img{height:100%!important;max-height:none!important;object-fit:contain!important} .jv-variant-preview-pair{display:grid!important;grid-template-columns:1fr 1fr!important;gap:3px!important}.jv-variant-preview-pair img{width:100%!important} .jv-variant-gallery{display:flex!important;gap:8px!important;overflow-x:auto!important;padding:8px 1px 3px!important;scroll-snap-type:x proximity!important;scrollbar-width:none!important}.jv-variant-gallery::-webkit-scrollbar{display:none} .jv-variant-thumb{flex:0 0 76px!important;width:76px!important;min-height:86px!important;border-radius:12px!important;scroll-snap-align:start!important}.jv-variant-thumb>img,.jv-thumb-pair{height:58px!important}.jv-variant-thumb small{font-size:8px!important} .jv-option-title{font-size:10px!important}.jv-swatch{font-size:11px!important;min-height:46px!important}.jv-chip{font-size:11px!important;min-height:46px!important}.jv-stock-note{font-size:11px!important}.jv-price-big{font-size:24px!important}.jv-price-summary{padding:11px!important}.jv-price-label{font-size:10px!important}.jv-price-value{font-size:18px!important} .jv-actions{gap:8px!important}.jv-actions>div{display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:8px!important}.jv-actions .jv-cart-button{display:flex!important;width:100%!important;min-height:48px!important;font-size:12px!important;border-radius:13px!important} .jv-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}.jv-card-img{height:128px!important}.jv-card-body b{font-size:12px!important}.jv-card-body small{font-size:10px!important;line-height:1.4!important}.jv-card-price{font-size:9px!important} .jv-custom-detail-card{padding:13px!important;border-radius:16px!important}.jv-custom-detail-head span{font-size:12px!important}.jv-custom-detail-head b{font-size:12px!important}.jv-custom-detail-grid{display:block!important}.jv-custom-detail-preview{height:210px!important;margin-bottom:12px!important}.jv-custom-detail-copy small{font-size:10px!important}.jv-custom-detail-copy b{font-size:13px!important}.jv-custom-detail-copy strong{font-size:24px!important}.jv-custom-detail-copy p{font-size:11px!important}.jv-inline-link{font-size:11px!important}.jv-custom-finish-single .btn{width:100%!important;min-height:50px!important} .jv-review-total{padding:15px!important;border-radius:15px!important}.jv-review-total b{font-size:27px!important}.jv-review-card{padding:13px!important;border-radius:15px!important}.jv-review-card h3{font-size:14px!important}.jv-review-product img{width:72px!important;height:72px!important}.jv-review-product b,.jv-review-product strong{font-size:12px!important}.jv-review-product small{font-size:10px!important}.jv-review-custom b,.jv-review-custom strong{font-size:11px!important}.jv-review-custom small{font-size:9px!important}.jv-review-custom-total{font-size:11px!important} .jv-field label{font-size:10px!important}.jv-field input,.jv-field textarea{font-size:16px!important;min-height:50px!important}.jv-customer-error,.jv-optional-hint{font-size:10px!important} /* Secondary back/edit buttons remain visible; primary action stays in dock. */ .jv-final-actions>.btn-outline{display:flex!important;width:100%!important;min-height:46px!important;font-size:11px!important} .jv-mobile-action-dock{bottom:calc(80px + env(safe-area-inset-bottom))!important;left:8px!important;right:8px!important;padding:6px!important;border-radius:16px!important} .jv-mobile-primary{min-height:52px!important;font-size:13px!important;border-radius:12px!important} .jv-bottom-nav{height:calc(62px + env(safe-area-inset-bottom))!important} .jv-bottom-item{font-size:9px!important}.jv-bottom-item svg{width:21px!important;height:21px!important} } @media(max-width:360px){ .jv-step-label{font-size:7px!important}.jv-step-icon{width:29px!important;height:29px!important} .jv-variant-preview{height:230px!important} } /* V22.5: on mobile the sticky journey CTA is the single Selesai Custom action. */ @media(max-width:680px){[data-desktop-custom-finish]{display:none!important}} /* ============================================================= OCT 2026 — FINAL FLOW: Bordir detail + 5-step progress ============================================================= */ .jv-progress{grid-template-columns:repeat(5,minmax(0,1fr))!important} .jv-progress-card:before{left:10%!important;right:10%!important} .jv-stock-note{display:flex;align-items:center;min-height:40px;padding:9px 11px;border:1px solid #dfe3e8;border-radius:11px;background:#f7f8f9;color:#31353a;font-size:10px;font-weight:900;margin:-5px 0 15px} .jv-stock-note.is-low{background:#fff1f2;border-color:#ffcfd3;color:#a5161d} .jv-option-help{display:block;margin-top:6px;color:var(--jv-muted);font-size:9px} .jv-custom-actions-three{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:9px;margin-top:16px} .jv-custom-actions-three .btn{min-height:46px;width:100%} .jv-add-custom-btn{border-color:#ed1c24!important;color:#ed1c24!important} .jv-auto-address-badge{display:inline-flex;margin-left:5px;padding:2px 5px;border-radius:999px;background:#e9f8ef;color:#087647;font-size:7px;font-weight:900;text-transform:none;letter-spacing:0} .jv-review-product span{display:block;color:#777d84;font-size:9px;margin-top:4px} .jv-review-custom{display:grid!important;grid-template-columns:54px 1fr auto!important;align-items:center;gap:9px} .jv-review-custom-media{width:54px;height:54px;border:1px solid #e6e8eb;border-radius:10px;background:#f5f6f7;display:grid;place-items:center;overflow:hidden} .jv-review-custom-media img{max-width:90%;max-height:90%;object-fit:contain}.jv-review-custom-media svg{width:24px;height:24px;stroke:#ed1c24;fill:none} .jv-review-custom-main small{display:block!important;margin-top:2px!important} .jv-customer-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.jv-customer-summary-grid>div{padding:10px;border:1px solid #e6e8eb;border-radius:11px;background:#fafafa}.jv-customer-summary-grid small{display:block;color:#777d84;font-size:8px}.jv-customer-summary-grid b{display:block;margin-top:3px;font-size:11px;word-break:break-word} @media(max-width:720px){ .jv-progress{grid-template-columns:repeat(5,66px)!important} .jv-custom-actions-three{grid-template-columns:1fr 1fr!important;position:relative;z-index:9;margin-bottom:8px}.jv-custom-actions-three .btn:nth-child(2){grid-column:1/-1;grid-row:1}.jv-custom-actions-three .btn:first-child{grid-column:1;grid-row:2}.jv-custom-actions-three .btn:last-child{grid-column:2;grid-row:2} .jv-position-preview{height:330px!important}.jv-pos{min-height:44px!important}.jv-chip{min-height:42px!important}.jv-qty{width:100%!important;max-width:210px}.jv-qty button{width:48px!important;min-height:46px}.jv-qty input{flex:1;width:auto!important;min-width:0} .jv-customer-summary-grid{grid-template-columns:1fr!important}.jv-review-custom{grid-template-columns:48px 1fr auto!important}.jv-review-custom-media{width:48px;height:48px} } /* ============================================================= OCT2 R2 — Catatan Hasil Cek: multi custom + Sampel Custom ============================================================= */ .jv-review-custom-main .jv-review-price{ display:block;margin-top:5px;color:#6f757d;font-size:9px;font-weight:750; } .jv-review-custom-main .jv-review-subtotal{ display:block;margin-top:2px;color:#24272b;font-size:11px;font-weight:950; } .jv-review-custom-actions{align-self:center;text-align:right} .jv-review-custom-actions button{margin-top:0!important} @media(max-width:720px){ /* Di tahap Atur Posisi, jangan biarkan CTA tunggal menutupi tombol Tambah Custom. */ body.jv-stage-custom-position .jv-mobile-action-dock{display:none!important} body.jv-stage-custom-position #journeyStage{padding-bottom:150px!important} body.jv-stage-custom-position .jv-custom-actions-three{ position:fixed!important; left:8px!important; right:8px!important; bottom:calc(68px + env(safe-area-inset-bottom))!important; z-index:126!important; display:grid!important; grid-template-columns:1fr 1.15fr 1fr!important; gap:6px!important; margin:0!important; padding:7px!important; background:rgba(255,255,255,.98)!important; border:1px solid #e4e7eb!important; border-radius:16px!important; box-shadow:0 12px 34px rgba(17,19,24,.18)!important; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } body.jv-stage-custom-position .jv-custom-actions-three .btn{ min-height:46px!important; padding:7px 6px!important; border-radius:11px!important; font-size:9.5px!important; line-height:1.15!important; } body.jv-stage-custom-position .jv-custom-actions-three .btn:nth-child(2), body.jv-stage-custom-position .jv-custom-actions-three .btn:first-child, body.jv-stage-custom-position .jv-custom-actions-three .btn:last-child{ grid-column:auto!important;grid-row:auto!important; } body.jv-stage-custom-position .jv-add-custom-btn{ background:#fff!important;border:1.5px solid #ed1c24!important;color:#ed1c24!important; } .jv-review-custom{grid-template-columns:48px minmax(0,1fr) auto!important} .jv-review-custom-main .jv-review-price{font-size:9px!important} .jv-review-custom-main .jv-review-subtotal{font-size:11px!important} } @media(max-width:380px){ body.jv-stage-custom-position .jv-custom-actions-three{grid-template-columns:.85fr 1fr 1.12fr!important} body.jv-stage-custom-position .jv-custom-actions-three .btn{font-size:8.6px!important;padding-left:4px!important;padding-right:4px!important} } /* ============================================================= OCT2 R3 — final Catatan Hasil Cek Bordirshop Sampel Custom, subtotal konsisten, multi custom per produk ============================================================= */ .jv-current-custom-card{ display:grid;grid-template-columns:64px minmax(0,1fr);gap:11px;align-items:center; margin:0 0 14px;padding:11px;border:1px solid #e4e7eb;border-radius:14px;background:#fafbfc; } .jv-current-custom-media{width:64px;height:64px;border:1px solid #e4e7eb;border-radius:11px;background:#fff;display:grid;place-items:center;overflow:hidden} .jv-current-custom-media img{width:100%;height:100%;object-fit:contain}.jv-current-custom-media svg{width:28px;height:28px;stroke:#ed1c24;fill:none} .jv-current-custom-card small{display:block;color:#777d84;font-size:8px;font-weight:800}.jv-current-custom-card b{display:block;margin-top:2px;font-size:13px}.jv-current-custom-card span{display:block;margin-top:3px;color:#777d84;font-size:9px} .jv-saved-customs{margin-top:14px;padding:10px;border:1px solid #e4e7eb;border-radius:14px;background:#fff} .jv-saved-customs-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.jv-saved-customs-head span{font-size:8px;font-weight:900;color:#777d84;background:#f1f2f4;border-radius:999px;padding:4px 7px} .jv-saved-custom-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 0;border-top:1px solid #eef0f2}.jv-saved-custom-card:first-of-type{border-top:0} .jv-saved-custom-media{width:48px;height:48px;border:1px solid #e5e7ea;border-radius:9px;background:#f7f8f9;display:grid;place-items:center;overflow:hidden}.jv-saved-custom-media img{max-width:92%;max-height:92%;object-fit:contain}.jv-saved-custom-media svg{width:22px;height:22px;stroke:#ed1c24;fill:none} .jv-saved-custom-main b{display:block;font-size:10px}.jv-saved-custom-main small{display:block!important;margin-top:2px!important;color:#777d84!important;font-size:8px!important}.jv-saved-custom-main span{display:block;margin-top:4px;color:#6f757d;font-size:8.5px;font-weight:750}.jv-saved-custom-main strong{display:block;margin-top:2px;font-size:10px;font-weight:950} @media(max-width:720px){ .jv-current-custom-card{grid-template-columns:56px minmax(0,1fr);padding:9px}.jv-current-custom-media{width:56px;height:56px} .jv-saved-customs{padding:9px}.jv-saved-custom-card{grid-template-columns:46px minmax(0,1fr) auto}.jv-saved-custom-media{width:46px;height:46px} body.jv-stage-custom-position .jv-custom-actions-three .jv-add-custom-btn{font-weight:950!important} } /* =============================================================== OCT2 R3.1 — iPhone tap + explicit next hardening Sample/custom cards use real