/* customiser.css - the fabric / lining / design / measurements steps (customization-page.php only). Loaded after app.css + devices.css.
   Evolves the existing look: Sintony type, brand red #a12410, the line-drawing preview, square-ish buttons. Companion: assets/js/customiser.js */
body.cz {
  --red: #a12410; --red-d: #7d1b0b; --gold: #bfa16b; --ink: #222; --mute: #6b6b6b; --line: #dcdcdc; --soft: #f7f5f1;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
/* #outer clips with overflow:hidden, which would stop position:sticky; clip does the same job without a scroll container */
body.cz #outer { overflow: hidden; overflow: clip; }
.cz h1 { margin: 0 0 10px; font-size: 26px; line-height: 1.15; }
.cz .cz-help { margin: -4px 0 16px; color: var(--mute); font-size: 13px; line-height: 1.5; }

/* ---------- progress bar (ol.suit-steps) ---------- */
.cz ol.cz-steps { display: flex; align-items: center; margin: 0 0 8px; padding: 0 2px; list-style: none; overflow-x: auto; overflow-y: hidden; position: relative;
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; font-size: 13px; line-height: 1.2; }
.cz ol.cz-steps::-webkit-scrollbar { display: none; }
.cz .cz-steps > li { flex: 0 0 auto; display: flex; align-items: center; margin: 0; padding: 0; border: 0; color: #8a8a8a; white-space: nowrap; }
.cz .cz-steps > li + li::before { content: ""; width: clamp(14px, 3vw, 38px); height: 2px; margin: 0 10px; background: var(--line); }
.cz .cz-steps > li.done + li::before { background: var(--red); }
.cz .cz-steps > li > a, .cz .cz-steps > li > .cz-n { color: inherit; }
.cz .cz-steps a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.cz .cz-steps > li:not(:has(a)) { min-height: 44px; }
.cz .cz-n { flex: 0 0 auto; width: 28px; height: 28px; margin-right: 8px; border: 2px solid var(--line); border-radius: 50%; background: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #8a8a8a; transition: background .2s, border-color .2s, color .2s; }
.cz .cz-steps > li.done { color: var(--ink); }
.cz .cz-steps > li.done .cz-n { background: var(--red); border-color: var(--red); color: #fff; }
.cz .cz-steps > li.done a:hover .cz-t { text-decoration: underline; }
.cz .cz-steps > li.current { color: var(--ink); font-weight: 700; }
.cz .cz-steps > li.current .cz-n { border-color: var(--red); color: var(--red); box-shadow: 0 0 0 3px rgba(161, 36, 16, .15); }

/* ---------- chips: fabric / lining already chosen ---------- */
.cz .cz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.cz .cz-chip, .cz .cz-si { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font-size: 12.5px; line-height: 1.25; }
.cz .cz-chip img, .cz .cz-sw { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 3px; object-fit: cover; background: var(--soft); }
.cz .cz-chip small, .cz .cz-si small { display: block; color: var(--mute); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; }
.cz .cz-chip b, .cz .cz-si b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.cz .cz-chip i, .cz .cz-si i { display: block; font-style: normal; color: var(--red); }

/* ---------- design step: two columns, sticky preview ---------- */
.cz-customization form[id^="frm_"] > .row { display: flex; flex-wrap: wrap; align-items: flex-start; }
.cz-customization form[id^="frm_"] > .row::before, .cz-customization form[id^="frm_"] > .row::after, .cz-customization form[id^="frm_"] > .row > .clearfix { display: none; }
.cz-customization form[id^="frm_"] > .row > [class*="col-md-"] { float: none; }
.cz-customization form[id^="frm_"] > .row > .col-md-12 { order: 1; flex: 0 0 100%; width: 100%; min-width: 0; }
.cz-customization form[id^="frm_"] > .row > .col-md-8 { order: 2; flex: 1 1 0; width: auto; min-width: 0; }
.cz-customization form[id^="frm_"] > .row > .col-md-4 { order: 3; flex: 0 0 360px; width: 360px; position: sticky; top: 12px; align-self: flex-start; }
.cz-customization .col-md-8 > .sel_data:first-of-type { display: block; }

/* tabs -> stepper strip */
body.cz ul.custom-tabs { display: flex; flex-wrap: nowrap; margin: 0 0 18px; padding: 0; overflow-x: auto; overflow-y: hidden; position: relative; background-color: #fff; border: 0; box-shadow: inset 0 -1px 0 var(--line);
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background-image: linear-gradient(to right, #fff 30%, rgba(255,255,255,0)), linear-gradient(to left, #fff 30%, rgba(255,255,255,0)), linear-gradient(to right, rgba(0,0,0,.14), rgba(0,0,0,0)), linear-gradient(to left, rgba(0,0,0,.14), rgba(0,0,0,0));
  background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 28px 100%, 28px 100%, 10px 100%, 10px 100%; background-attachment: local, local, scroll, scroll; }
body.cz ul.custom-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }
body.cz ul.custom-tabs > li { float: none; flex: 0 0 auto; margin: 0; }
body.cz ul.custom-tabs > li > a { display: flex; flex-direction: column; justify-content: center; min-height: 54px; margin: 0 2px 0 0; padding: 8px 16px; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  background: transparent; color: #555; font-size: 12px; line-height: 1.25; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; transition: color .15s, border-color .15s, background-color .15s; }
body.cz ul.custom-tabs > li > a:hover { background: var(--soft); color: var(--ink); border-bottom-color: #cfcfcf; }
body.cz ul.custom-tabs > li.active > a, body.cz ul.custom-tabs > li.active > a:hover { background: #fff; color: var(--red); border-bottom-color: var(--red); font-weight: 700; }
body.cz ul.custom-tabs > li > a:focus-visible { outline: 2px solid var(--red); outline-offset: -3px; }
.cz .cz-tl::after { content: ""; display: inline-block; width: 0; opacity: 0; }
.cz .cz-done .cz-tl::after { content: "\2713"; width: auto; opacity: 1; margin-left: 6px; color: var(--red); font-weight: 700; }
.cz .cz-tv { display: block; max-width: 130px; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; color: var(--mute); font-size: 10.5px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.cz li.active .cz-tv { color: #7a3a2e; }

/* group heading */
.cz .cz-gh { margin: 0 0 14px; }
.cz .cz-gh h2 { margin: 0; padding: 0; font-size: 20px; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; }
.cz .cz-gh p { margin: 4px 0 0; color: var(--mute); font-size: 13px; }
.cz .custom_title { display: none; }
.cz .sel_data { padding: 0; }

/* option cards */
body.cz .thumb_box { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 168px)); gap: 12px; float: none; width: auto; margin: 0 0 18px; padding: 0; list-style: none; }
body.cz .thumb_box li { position: relative; float: none; width: auto; margin: 0; border: 1px solid var(--line); border-radius: 4px; background: #fff; overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s var(--ease); }
body.cz .thumb_box li a { display: block; float: none; width: auto; height: auto; margin: 0; padding: 8px 8px 0; border: 0; background: transparent !important; position: static; }
body.cz .thumb_box li a::after { content: ""; position: absolute; inset: 0; border-radius: 4px; }
body.cz .thumb_box li a img { display: block; width: 100%; height: auto; aspect-ratio: 115 / 84; object-fit: contain; position: static; }
body.cz .thumb_box li a:focus { outline: 0; }
body.cz .thumb_box li a:focus-visible::after { outline: 3px solid var(--red); outline-offset: 2px; }
body.cz .thumb_box li .overlay { display: none !important; }
body.cz .thumb_box li > div { display: flex; align-items: center; justify-content: center; float: none; width: auto; height: auto; min-height: 3.1em; padding: 6px 8px 9px; font-size: 12.5px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
body.cz .thumb_box li:hover { border-color: #8d8d8d; box-shadow: 0 3px 10px rgba(0, 0, 0, .08); transform: translateY(-1px); }
body.cz .thumb_box li:active { transform: scale(.985); }
body.cz .thumb_box li.cz-on { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); background: #fffaf8; }
body.cz .thumb_box li.cz-on > div { font-weight: 700; color: var(--red); }
body.cz .thumb_box li.cz-on::after { content: "\2713"; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; font-size: 13px; line-height: 22px; text-align: center; animation: cz-pop .25s var(--ease); }
body.cz .thumb_box li.cz-wait::before { content: ""; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--red); border-radius: 50%; animation: cz-spin .7s linear infinite; z-index: 2; }
body.cz .thumb_box li.cz-none a img { display: none; }
body.cz .thumb_box li.cz-none a::before { content: ""; display: block; aspect-ratio: 115 / 84; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23b5b5b5' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='24' cy='24' r='13'/%3E%3Cpath d='M15 33L33 15'/%3E%3C/g%3E%3C/svg%3E") center / 38% no-repeat; }

/* preview column */
.cz-customization form[id^="frm_"] > .row > .col-md-4 { padding: 10px; margin: 0 15px 0 0; border: 1px solid #e6e1d8; border-radius: 4px; background: var(--soft); text-align: center; }
.cz .cz-vt > a.btn-cool { min-height: 44px; height: auto; padding: 12px 6px; margin: 0; font-size: 12px; letter-spacing: .04em; background: #fff; transition: background-color .15s, color .15s, border-color .15s; }
.cz .cz-vt > a.btn-cool.cz-on { background: var(--red); border-color: var(--red); color: #fff; }
.cz .cz-vt > a.btn-cool:not(.cz-on):hover { border-color: var(--red); color: var(--red); background: #fff; }
.cz .cz-vt > a.btn-cool:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.cz .cz-vt { display: flex; gap: 8px; }
.cz .cz-vt > a.btn-cool { flex: 1 1 0; }
.cz .cz-stage { position: relative; }
.cz #front-side, .cz #back-side { position: relative; width: min(100%, 280px, max(230px, calc((100vh - 330px) * .7757))); aspect-ratio: 346 / 446; height: auto; margin: 8px auto 0; transition: opacity .2s; }
.cz #front-side, .cz #back-side { background-color: #fff !important; border-radius: 3px; }
.cz .large_box { width: 100%; height: 100%; margin: 0; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; }
.cz .col-md-4.cz-loading #front-side, .cz .col-md-4.cz-loading #back-side { opacity: .55; }
.cz .col-md-4.cz-loading .cz-stage::after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px; border: 3px solid rgba(0,0,0,.12); border-top-color: var(--red); border-radius: 50%; animation: cz-spin .7s linear infinite; }
.cz .col-md-4.cz-pop #front-side, .cz .col-md-4.cz-pop #back-side { animation: cz-fade .25s var(--ease); }

/* summary */
.cz .cz-sum { margin: 8px 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.cz .cz-sum > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cz .cz-sum h2 { margin: 0; padding: 0; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.cz .cz-sum .cz-reset { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--red); font-size: 12px; text-decoration: underline; cursor: pointer; }
.cz .cz-sum ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cz .cz-si { width: 100%; min-height: 44px; padding: 7px 10px; text-align: left; font-family: inherit; color: inherit; cursor: pointer; transition: border-color .15s, background-color .15s; }
.cz button.cz-si:hover { border-color: var(--red); background: #fffaf8; }
.cz .cz-si.is-static { cursor: default; padding-left: 6px; }
.cz .cz-si:focus-visible, .cz .cz-reset:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* Back / Next */
.cz .cz-nav { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 12px 0; background: #fff; border-top: 1px solid var(--line); }
.cz .cz-nav .cz-pos { flex: 1 1 auto; color: var(--mute); font-size: 12px; text-align: center; }
.cz .cz-nav button { min-height: 46px; padding: 0 22px; border: 1px solid #bdbdbd; border-radius: 0; background: #fff; color: var(--ink); font: inherit; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .1s; }
.cz .cz-nav button:hover { border-color: var(--ink); }
.cz .cz-nav button:active { transform: scale(.97); }
.cz .cz-nav button:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.cz .cz-nav button[hidden] { display: none; }
.cz .cz-nav .cz-next { margin-left: auto; border-color: var(--red); background: var(--red); color: #fff; font-weight: 700; }
.cz .cz-nav .cz-next:hover { background: var(--red-d); border-color: var(--red-d); color: #fff; }
.cz .cz-nav .cz-next.is-busy { opacity: .7; pointer-events: none; }
.cz .cz-nav .cz-next.is-busy::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; vertical-align: -1px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: cz-spin .7s linear infinite; }

/* ---------- fabric + lining grid ---------- */
.cz-fabrics .content > .row, .cz-linings .content > .row { display: flex; flex-wrap: wrap; align-items: flex-start; }
.cz-fabrics .content > .row::before, .cz-fabrics .content > .row::after { display: none; }
.cz-fabrics .content > .row > section { order: 2; flex: 1 1 0; min-width: 0; width: auto; float: none; left: auto; right: auto; margin: 0; }
.cz-fabrics .content > .row > .content-aside { order: 1; flex: 0 0 210px; width: 210px; float: none; left: auto; right: auto; position: sticky; top: 12px; padding: 0 16px 8px 15px; margin: 0; }
.cz #collections { position: relative; min-height: 60vh; }
.cz #collections.cz-loading { pointer-events: none; }
.cz #collections.cz-loading .products-list { opacity: .4; }
.cz #collections.cz-loading::after { content: ""; position: absolute; inset: 70px 0 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.75) 50%, transparent 80%) 0 0 / 200% 100%; animation: cz-shim 1.1s linear infinite; }
.cz .products-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; padding: 0; margin: 0; }
body.cz .products-list .product-preview-outer { display: block; width: auto; margin: 0; padding: 0; }
.cz .product-preview { position: relative; display: flex; flex-direction: column; height: 100%; padding: 0 0 12px; border: 1px solid #e2e2e2; border-radius: 4px; background: #fff; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.cz .product-preview:hover { border-color: #9a9a9a; box-shadow: 0 4px 14px rgba(0, 0, 0, .09); }
.cz .product-preview .preview { display: contents; }
.cz .product-preview .preview-image-outer { order: 1; }
.cz .product-preview .preview-image { display: block; cursor: zoom-in; }
.cz .product-preview .preview-image img { display: block; width: 100%; height: auto; }
.cz .product-preview h3.title { order: 2; margin: 10px 12px 2px; padding: 0; font-size: 12.5px; line-height: 1.35; letter-spacing: 0; text-transform: uppercase; }
.cz .product-preview h3.title a { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; text-overflow: clip; color: var(--ink); }
.cz .product-preview .price { order: 3; padding: 0 12px; margin: 0; font-size: 15px; font-weight: 700; color: var(--red); }
.cz .product-preview .price.old { font-size: 12px; font-weight: 400; color: var(--mute); }
.cz .product-preview .price.mar-top-10 { margin-top: 0; }
.cz .product-preview .price-wrap { order: 3; }
body.cz .product-preview a.quick-view { order: 5; position: static; display: block; opacity: 1; width: auto; height: auto !important; min-height: 44px; margin: 10px 12px 0; padding: 14px 8px !important; border: 1px solid var(--red); border-radius: 0; background: var(--red) !important; color: #fff !important; font-size: 12px; letter-spacing: .06em; text-align: center; text-transform: uppercase; cursor: pointer; transition: background-color .15s, transform .1s; }
body.cz .product-preview a.quick-view:hover { background: var(--red-d) !important; text-decoration: none; }
body.cz .product-preview a.quick-view:active { transform: scale(.97); }
body.cz .product-preview a.quick-view span { color: #fff; }
.cz .product-preview ul.product-controls-list { position: absolute; top: 8px; right: 8px; z-index: 3; margin: 0; padding: 0; list-style: none; }
.cz .product-preview ul.product-controls-list li { margin: 0; padding: 0; }
.cz .product-preview ul.product-controls-list li a { position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.25); color: var(--ink); }
.cz .product-preview .label-sale { position: absolute; top: 8px; left: 8px; z-index: 3; }
.cz .products-list.cz-picking .product-preview { pointer-events: none; opacity: .5; }
.cz .products-list.cz-picking .product-preview.cz-picked { opacity: 1; border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.cz .cz-picked a.quick-view { pointer-events: none; opacity: .75; }
.cz .cz-picked a.quick-view::after { content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 8px; vertical-align: -1px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: cz-spin .7s linear infinite; }
.cz .filters-panel { padding-bottom: 14px; }
.cz .cz-filter-btn { display: none; }
.cz .content-aside .panel-heading a { font-size: 13px; letter-spacing: .06em; }
.cz .content-aside .panel-body .checkbox { margin: 0; }
.cz-linings .clearfix.mar-bottom-10 .btn-cool { min-height: 44px; }

/* ---------- measurements ---------- */
.cz-measurements #meas-frm .form-control { height: 46px; font-size: 14px; border-radius: 3px; transition: border-color .15s, box-shadow .15s; }
.cz-measurements #meas-frm .form-control:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(161, 36, 16, .14); outline: 0; }
.cz-measurements #meas-body > .row { display: flex; flex-wrap: wrap; }
.cz-measurements #meas-body > .row > .col-md-4 { align-self: flex-start; position: sticky; top: 12px; }
.cz-measurements #meas-body label { font-size: 13px; }
#meas-body .form-group { margin-bottom: 18px; }
#meas-body .form-group .row > div { padding-right: 6px; }
.cz-measurements .product-img.meas { padding: 12px; border: 1px solid #e6e1d8; border-radius: 4px; background: var(--soft); }
.cz-measurements .product-img.meas img { max-height: calc(100vh - 60px); width: auto; max-width: 100%; margin: 0 auto; }
.cz-measurements #meas-frm button[type=submit] { min-height: 48px; padding: 0 28px; border-color: var(--red); background: var(--red); color: #fff; font-size: 14px; letter-spacing: .06em; transition: background-color .15s; }
.cz-measurements #meas-frm button[type=submit]:hover { background: var(--red-d); color: #fff; }
.cz-measurements #meas-frm button[type=submit] .icon { color: #fff; }
.cz-measurements #meas-frm .has-error .form-control, .cz-measurements #meas-frm .form-control.error { border-color: #c0392b; }
.cz-measurements #meas-frm label.error { display: block; margin-top: 4px; color: #c0392b; font-size: 12px; font-weight: 400; }

@media (max-width: 991px) {
  #meas-body .form-group > .row > .col-md-6 { float: left; width: 50%; }
}
@media (pointer: coarse) {
  .cz .product-preview ul.product-controls-list { top: 4px; right: 4px; }
  .cz .product-preview ul.product-controls-list li a { width: 44px; height: 44px; background: rgba(255,255,255,.88); box-shadow: none; }
  .cz .product-preview ul.product-controls-list li a .icon { width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; }
  .cz .radio-inline label { display: inline-flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }
}

/* polo order form */
.cz #tshirt-order-frm .form-control { height: 46px; font-size: 14px; border-radius: 3px; }
.cz #tshirt-order-frm textarea.form-control { height: auto; min-height: 110px; }
.cz #tshirt-order-frm .form-control:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(161, 36, 16, .14); outline: 0; }
.cz #tshirt-order-frm button[type=submit] { min-height: 48px; padding: 0 28px; border-color: var(--red); background: var(--red); color: #fff; letter-spacing: .06em; }
.cz #tshirt-order-frm button[type=submit]:hover { background: var(--red-d); color: #fff; }

/* ---------- animation ---------- */
@keyframes cz-spin { to { transform: rotate(360deg); } }
@keyframes cz-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes cz-fade { from { opacity: .35; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes cz-shim { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .cz *, .cz *::before, .cz *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body.cz .thumb_box li:hover, body.cz .thumb_box li:active { transform: none; }
}

/* ---------- tablets (two columns, narrower preview) ---------- */
@media (max-width: 991px) {
  .cz-customization form[id^="frm_"] > .row > .col-md-4 { flex-basis: 290px; width: 290px; }
  .cz-fabrics .content > .row > .content-aside { flex-basis: 170px; width: 170px; }
  body.cz .thumb_box { grid-template-columns: repeat(auto-fill, minmax(112px, 150px)); gap: 10px; }
}

/* ---------- phones ---------- */
@media (max-width: 699px) {
  .cz h1 { font-size: 22px; line-height: 1.15; }
  .cz ol.cz-steps { margin-bottom: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
  .cz .cz-chip { flex: 1 1 calc(50% - 4px); }
  body.cz.cz-customization { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .cz-customization form[id^="frm_"] > .row { flex-direction: column; flex-wrap: nowrap; }
  .cz-customization form[id^="frm_"] > .row > [class*="col-md-"] { width: 100%; flex: 0 0 auto; }
  .cz-customization form[id^="frm_"] > .row > .col-md-8 { order: 3; }
  .cz-customization form[id^="frm_"] > .row > .col-md-4 { order: 2; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 8px 12px;
    border-radius: 0 0 6px 6px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .35); }
  .cz-customization form[id^="frm_"] > .row > .col-md-4 > .cz-stage { order: -1; flex: 0 0 auto; }
  .cz #front-side, .cz #back-side { width: min(44vw, calc(clamp(130px, 28vh, 260px) * .7757)); margin: 0; }
  .cz .col-md-4 { flex-wrap: wrap; }
  .cz .col-md-4 .cz-vt { flex-direction: column; flex: 1 1 0; }
  .cz .cz-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 16px -10px rgba(0, 0, 0, .4); }
  .cz .cz-nav button { min-height: 48px; padding: 0 18px; }
  .cz .cz-nav .cz-pos { font-size: 11px; }
  body.cz ul.custom-tabs { margin-bottom: 14px; }
  body.cz .thumb_box { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
  body.cz .thumb_box li > div { font-size: 12px; }
  .cz .cz-sum ul { grid-template-columns: 1fr 1fr; }
  .cz-fabrics .content > .row, .cz-linings .content > .row { flex-direction: column; flex-wrap: nowrap; }
  .cz-fabrics .content > .row > section { width: 100%; flex: 0 0 auto; }
  .cz-fabrics .content > .row > .content-aside { order: 1; width: 100%; flex: 0 0 auto; position: static; padding: 0; margin-bottom: 10px; border: 0; box-shadow: none; }
  .cz .cz-filter-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 3px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
  .cz .cz-filter-btn::after { content: "+"; font-size: 20px; line-height: 1; color: var(--red); }
  .cz .cz-filter-btn[aria-expanded="true"]::after { content: "\2212"; }
  .cz-fabrics #filter-frm:not(.cz-open) { display: none; }
  .cz-fabrics #filter-frm.cz-open { margin-top: 6px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 3px; background: #fff; }
  .cz .products-list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cz .product-preview h3.title { margin: 8px 8px 2px; font-size: 11.5px; }
  .cz .product-preview .price { padding: 0 8px; font-size: 14px; }
  body.cz .product-preview a.quick-view { margin: 8px 8px 0; }
  .cz-measurements #meas-body > .row > .col-md-4 { position: static; }
  .cz-measurements #meas-frm button[type=submit] { width: 100%; }
}

@media (max-width: 420px) {
  .cz .cz-x, .cz .cz-nav .cz-pos { display: none; }
  .cz .cz-nav button { padding: 0 14px; font-size: 12px; white-space: nowrap; }
  .cz .cz-nav .cz-next { flex: 1 1 auto; }
}

/* phone landscape: keep the two columns, the preview must fit the short screen */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) {
  .cz #front-side, .cz #back-side { width: min(100%, calc((100vh - 120px) * .7757)); }
}

/* ---------- QA fixes ---------- */
/* D12: 14px fields make iOS zoom the page on focus; 16px on touch and narrow screens (measurements, type select, polo form) */
@media (pointer: coarse), (max-width: 1199px) {
  .cz-measurements #meas-frm .form-control, .cz-measurements #meas-frm select.form-control,
  .cz #tshirt-order-frm .form-control, .cz #tshirt-order-frm textarea.form-control { font-size: 16px; }
}
/* Back / Next captions and the position never wrap onto a second line */
.cz .cz-nav button, .cz .cz-nav .cz-pos { white-space: nowrap; }
.cz .cz-nav .cz-pos { flex: 0 1 auto; margin: 0 auto; }
/* two-column widths (tablet / phone landscape): the long half of the caption makes the bar overflow, keep the short half */
@media (min-width: 700px) and (max-width: 899px) { .cz .cz-x { display: none; } }
/* the grid is never made unclickable while a details pop-up is prefetched (QA D6); the busy look stays, only real grid reloads block taps (overlay) */
.cz #collections.cz-loading { pointer-events: auto; }
/* focus rings: progress-bar links, tab strip, fabric / lining buttons */
.cz .cz-steps a:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 4px; }
.cz .cz-filter-btn:focus-visible, .cz .cz-reset:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.cz .product-preview a.preview-image:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.cz .product-preview h3.title a:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
body.cz .product-preview a.quick-view:focus-visible { outline: 3px solid #222; outline-offset: 2px; }
/* labels that now point at their field (for=) are a 44px target on touch; the extra hit area is borrowed from the spacing, nothing moves */
@media (pointer: coarse), (max-width: 1199px) {
  .cz-measurements #meas-frm label[for="meas_type"], .cz #tshirt-order-frm label[for] { display: block; padding: 15px 0; margin: -15px 0 -10px; }
}
/* the fitting radios (Classic / Large / Slim Fit) are 44px targets on every touch-sized screen, whatever the browser reports as pointer */
@media (pointer: coarse), (max-width: 1199px) {
  .cz .radio-inline label { display: inline-flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }
}