/* =============================================
   Design Your Shirt page (/design-shirt)
   Uses the design tokens from home.css (body.hp-page).
   Everything is scoped under .ds so it cannot leak into other pages.
============================================= */
.ds{ float:none; clear:both; color:var(--ink);}
.ds [hidden]{ display:none !important;}
.ds ul, .ds ol{ margin:0; padding:0; list-style:none;}
/* main.css floats paragraphs and headings; undo that inside this page */
.ds p, .ds h1, .ds h2, .ds h3, .ds h4{ float:none;}
.ds li{ list-style:none; float:none; width:auto; margin:0; padding:0;}
.ds button{ font-family:var(--sans); cursor:pointer;}

/* ---------- Page head and step bar ---------- */
.ds-head{ padding:30px 0 26px; background:linear-gradient(100deg,#eef4fb 0%,#fff 70%); border-bottom:1px solid var(--line);}
.ds-crumbs{ display:flex; gap:8px; font-size:12.5px; color:var(--muted);}
.ds-crumbs li + li:before{ content:'/'; margin-right:8px; color:#a9b7c6;}
.ds-crumbs a{ color:var(--navy);}
.ds-head h1{ margin:8px 0 6px; font-size:36px; line-height:1.2; font-weight:600; color:var(--navy);}
.ds-head p{ margin:0; max-width:620px; color:var(--muted); font-size:15px;}

.ds-steps{ display:flex; align-items:center; gap:0; margin-top:24px !important;}
.ds-steps li{ display:flex; align-items:center; flex:none;}
.ds-steps li + li:before{ content:''; width:56px; height:2px; margin:0 6px; background:var(--line);}
.ds-steps button{
	display:flex;
	align-items:center;
	gap:10px;
	padding:6px 14px 6px 6px;
	border:1px solid var(--line);
	border-radius:999px;
	background:#fff;
	color:var(--muted);
	font:600 14px/1 var(--sans);
	transition:border-color .2s, background .2s, color .2s;
}
.ds-steps button:hover{ border-color:var(--navy); color:var(--navy);}
.ds-step-no{
	display:flex; align-items:center; justify-content:center;
	width:30px; height:30px; border-radius:50%;
	background:var(--tint); color:var(--navy); font-size:13px;
}
.ds-steps .is-current{ border-color:var(--navy); background:var(--navy); color:#fff;}
.ds-steps .is-current .ds-step-no{ background:#fff; color:var(--navy);}
.ds-steps .is-done{ color:var(--navy);}
.ds-steps .is-done .ds-step-no{ background:var(--navy); color:#fff; font-size:0;}
.ds-steps .is-done .ds-step-no:before{ content:'\f00c'; font:normal 12px/1 FontAwesome;}

/* ---------- Layout ---------- */
.ds-page{ padding:30px 0 70px;}
.ds-layout{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:30px; align-items:start;}
.ds-layout:before, .ds-layout:after{ display:none;}
.ds-aside{ position:sticky; top:calc(var(--hd-h, 90px) + var(--bar-h, 60px) + 16px);}

.ds-panel-head h2{ margin:0 0 6px; font-size:26px; line-height:1.25; font-weight:600; color:var(--navy);}
.ds-panel-head p{ margin:0 0 20px; color:var(--muted); font-size:14.5px;}

.ds-notice{
	margin-bottom:16px; padding:12px 16px;
	border:1px solid #f1c9a3; border-radius:10px; background:#fff6ec; color:#8a4b10; font-size:14px;
}

/* ---------- Buttons and links ---------- */
.ds-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:6px;
	min-height:42px; padding:0 20px;
	border:1px solid #c9d6e6; border-radius:999px;
	background:#fff; color:var(--navy);
	font:600 13.5px/1 var(--sans); letter-spacing:.02em;
	transition:background .2s, color .2s, box-shadow .2s;
}
.ds-btn:hover{ background:var(--tint); text-decoration:none;}
.ds-btn-primary{ border-color:var(--navy); background:var(--navy); color:#fff !important; box-shadow:0 6px 16px rgba(15,58,92,.22);}
.ds-btn-primary:hover{ background:var(--navy-dark);}
.ds-btn:disabled{ opacity:.6; cursor:default;}
.ds-btn:focus-visible, .ds-link:focus-visible, .ds-opt:focus-visible, .ds-method:focus-visible, .ds-tab:focus-visible, .ds-steps button:focus-visible{
	outline:3px solid rgba(74,134,201,.5); outline-offset:2px;
}
.ds-link{ padding:0; border:0; background:none; color:var(--blue); font:600 13px/1.4 var(--sans); text-decoration:underline;}
.ds-link:hover{ color:var(--navy);}

/* ---------- Form fields (filters, monogram, measurements) ---------- */
.ds-field{ display:block; margin:0; font-weight:400;}
.ds-field > span{ display:flex; justify-content:space-between; gap:8px; margin-bottom:6px; font:600 12px/1.3 var(--sans); letter-spacing:.04em; text-transform:uppercase; color:var(--muted);}
.ds-field > span a{ font-weight:600; text-transform:none; letter-spacing:0; color:var(--blue);}
.ds-field select, .ds-field input, .ds-field textarea, .ds-pair select, .ds-pair input{
	display:block; width:100%; height:44px; margin:0; padding:0 12px;
	border:1px solid #cfd9e6; border-radius:10px; background-color:#fff;
	color:var(--ink); font:400 14px/1.4 var(--sans); box-shadow:none;
}
.ds-field textarea{ height:auto; padding:10px 12px;}
.ds-field select, .ds-pair select{
	-webkit-appearance:none; appearance:none; padding-right:34px;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230f3a5c' stroke-width='1.8'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 12px center;
}
.ds-field select:focus, .ds-field input:focus, .ds-field textarea:focus, .ds-pair select:focus, .ds-pair input:focus{ border-color:var(--navy); outline:0; box-shadow:0 0 0 3px rgba(74,134,201,.25);}
.ds-field .error, .ds-pair .error{ border-color:#d64545; background-color:#fff6f6;}
.ds-pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.ds-fields{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 18px;}
.ds-fields .full{ grid-column:1 / -1;}

/* ---------- Step 1: filters and fabric cards ---------- */
/* two rows: [search | sort] and [filters] */
.ds-toolbar{ margin-bottom:22px; padding:14px; border:1px solid var(--line); border-radius:18px; background:var(--tint);}
.ds-fbar{ display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.ds-fbar-filters{ flex-wrap:wrap; margin-bottom:0;}
.ds-search{ position:relative; flex:1; min-width:0;}
.ds-search > i{ position:absolute; left:20px; top:50%; margin-top:-9px; font-size:18px; line-height:18px; color:var(--navy); pointer-events:none;}
.ds-kbd{ position:absolute; right:16px; top:50%; margin-top:-12px; min-width:24px; height:24px; padding:0 7px; border:1px solid #d5dfeb; border-bottom-width:2px; border-radius:6px; background:#f7f9fc; color:#7d90a5; font:600 12px/22px var(--sans); text-align:center; pointer-events:none; box-shadow:none;}
.ds-search input:not(:placeholder-shown) ~ .ds-kbd{ display:none;}
.ds-search input{
	display:block; width:100%; height:54px; margin:0; padding:0 54px 0 52px;
	border:1px solid transparent; border-radius:14px; background:#fff; box-shadow:0 2px 8px rgba(15,58,92,.08); color:var(--ink);
	font:400 15px/1.4 var(--sans); box-shadow:none; -webkit-appearance:none; appearance:none;
}
.ds-search input::-webkit-search-cancel-button{ -webkit-appearance:none;}
.ds-search input:focus{ border-color:var(--navy); outline:0; box-shadow:0 0 0 3px rgba(74,134,201,.25);}
.ds-search input::placeholder{ color:#8a99ab;}
.ds-search-clear{ position:absolute; right:10px; top:50%; width:34px; height:34px; margin-top:-17px; padding:0; border:0; border-radius:50%; background:var(--tint); color:var(--navy);}
.ds-search-clear:hover{ background:var(--navy); color:#fff;}
.ds-search-clear[hidden]{ display:none;}

/* filter button + pop-up list */
.ds-dd{ position:relative; flex:1 1 110px; min-width:0;}
.ds-dd-btn{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; height:46px; margin:0; padding:0 18px; border:1px solid #cfd9e6; border-radius:999px; background:#fff; color:var(--navy); font:600 13.5px/1 var(--sans); white-space:nowrap; transition:border-color .15s, background .15s;}
.ds-dd-btn .ds-dd-text{ overflow:hidden; text-overflow:ellipsis;}
.ds-dd-btn i{ font-size:15px; transition:transform .15s;}
.ds-dd-btn:hover{ border-color:var(--blue);}
.ds-dd.is-open .ds-dd-btn{ border-color:var(--navy); box-shadow:0 0 0 3px rgba(74,134,201,.2);}
.ds-dd.is-open .ds-dd-btn i{ transform:rotate(180deg);}
.ds-dd.is-active .ds-dd-btn{ padding-right:38px; border-color:var(--navy); background:var(--navy); color:#fff;}
.ds-dd-x{ position:absolute; right:5px; top:50%; width:30px; height:30px; margin-top:-15px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; font-size:13px;}
.ds-dd-x:hover{ background:#fff; color:var(--navy);}
.ds-dd-x[hidden]{ display:none;}
.ds-dd.is-active .ds-dd-btn i{ display:none;}
.ds-dd-btn:focus-visible, .ds-dd-x:focus-visible, .ds-opt-item:focus-visible{ outline:3px solid rgba(74,134,201,.5); outline-offset:2px;}

.ds-pop{ display:none; position:absolute; top:calc(100% + 8px); left:0; z-index:30; width:max-content; min-width:230px; max-width:min(420px, calc(100vw - 32px)); padding:14px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 18px 44px rgba(15,58,92,.22);}
.ds-dd.is-open .ds-pop{ display:block;}
.ds-fbar > .ds-dd:last-child .ds-pop{ left:auto; right:0;}   /* the sort list opens towards the left */
.ds-pop-title{ margin:0 0 10px; font:600 11px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.ds-pop-list{ display:grid; gap:4px;}
.ds-opt-item{ display:flex; align-items:center; gap:10px; width:100%; margin:0; padding:9px 12px; border:0; border-radius:10px; background:transparent; color:var(--ink); font:500 14px/1.3 var(--sans); text-align:left;}
.ds-opt-item:hover{ background:var(--tint);}
.ds-opt-item.is-selected{ background:var(--tint); color:var(--navy); font-weight:600;}
.ds-opt-item.is-selected:after{ content:'\f00c'; margin-left:auto; font:14px/1 FontAwesome; color:var(--blue);}
/* chips: the options sit side by side */
.ds-pop-chips .ds-pop-list{ display:flex; flex-wrap:wrap; gap:8px;}
.ds-pop-chips .ds-opt-item{ width:auto; padding:8px 14px; border:1px solid #d5dfeb; border-radius:999px; font-size:13.5px;}
.ds-pop-chips .ds-opt-item.is-selected{ border-color:var(--navy); background:var(--navy); color:#fff;}
.ds-pop-chips .ds-opt-item.is-selected:after{ content:none;}
/* colours: a grid of swatches */
.ds-pop-swatch{ width:340px;}
.ds-pop-swatch .ds-pop-list{ grid-template-columns:repeat(3, minmax(0,1fr));}
.ds-pop-swatch .ds-opt-item{ padding:8px 8px; font-size:13px;}
.ds-pop-swatch .ds-opt-item.is-selected:after{ content:none;}
.ds-pop-swatch .ds-opt-item.is-selected{ box-shadow:inset 0 0 0 2px var(--navy); background:#fff;}
.ds-swatch{ flex:none; width:20px; height:20px; border-radius:50%; border:1px solid rgba(15,58,92,.25);}
.ds-dd[data-select=sorting] .ds-dd-text:before{ content:'\f0dc'; margin-right:8px; font:14px/1 FontAwesome; color:var(--blue);}
.ds-clear-all{ flex:none; margin:0 6px; font-size:13.5px; white-space:nowrap;}
.ds-clear-all[hidden]{ display:none;}
.ds-fabrics.is-loading{ opacity:.45; pointer-events:none; transition:opacity .15s;}
.ds-loading, .ds-empty{ padding:50px 20px; text-align:center; color:var(--muted); font-size:15px;}
.ds-count{ margin:0 0 16px; font-size:13px; color:var(--muted);}

.ds-fab-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px;}
.ds-fab{ display:flex; flex-direction:column; overflow:hidden; border:2px solid var(--line); border-radius:14px; background:#fff; transition:border-color .2s, box-shadow .2s;}
.ds-fab:hover{ box-shadow:0 10px 26px rgba(15,58,92,.12);}
.ds-fab.is-selected{ border-color:var(--navy); box-shadow:0 0 0 3px rgba(15,58,92,.12);}
.ds-fab-img{ position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:4/5; padding:16px; background:var(--tint);}
.ds-fab-img > img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.ds-price-tag{ position:absolute; top:10px; left:10px; padding:5px 10px; border-radius:999px; background:var(--navy); color:#fff; font:600 12.5px/1 var(--sans);}
.ds-badge{ display:none; position:absolute; bottom:10px; left:10px; padding:5px 10px; border-radius:999px; background:#2e8b57; color:#fff; font:600 11.5px/1 var(--sans);}
.ds-fab.is-selected .ds-badge{ display:block;}
.ds-zoom{ position:absolute; top:8px; right:8px; z-index:2; width:34px; height:34px; border:0; border-radius:50%; background:#fff; color:var(--navy); box-shadow:0 2px 8px rgba(15,58,92,.2);}
.ds-zoom:hover{ background:var(--navy); color:#fff;}
.ds-fab-body{ display:flex; flex-direction:column; flex:1; padding:14px;}
.ds-eyebrow{ display:block; margin-bottom:6px; font:600 11px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--blue);}
.ds-fab-body h3{ margin:0 0 6px; font:600 16px/1.3 var(--serif); color:var(--navy);}
.ds-fab-body p{ flex:1; margin:0 0 12px; font-size:12.5px; line-height:1.5; color:var(--muted);}
.ds-fab-actions{ display:flex; gap:8px;}
.ds-fab-actions .ds-btn{ flex:1; min-height:38px; padding:0 10px; font-size:13px;}
.ds-fab-actions .ds-btn-primary{ flex:1.4;}
.ds-fab .when-on{ display:none;}
.ds-fab.is-selected .when-on{ display:inline;}
.ds-fab.is-selected .when-off{ display:none;}

.ds-fabrics .them-pagination{ float:none; width:auto; margin-top:26px;}
.ds-fabrics .pagination{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:0; padding:0;}
.ds-fabrics .pagination > li{ float:none; margin:0; padding:0; border:0;}
.ds-fabrics .pagination > li > a, .ds-fabrics .pagination > li > span{
	display:flex; align-items:center; justify-content:center; gap:4px;
	min-width:40px; height:40px; padding:0 12px;
	border:1px solid #d6e0ec !important; border-radius:10px; background:#fff !important;
	color:var(--ink) !important; font:600 13.5px/1 var(--sans);
}
.ds-fabrics .pagination > li > a:hover{ border-color:var(--navy) !important; color:var(--navy) !important;}
.ds-fabrics .pagination > li.active > a{ background:var(--navy) !important; border-color:var(--navy) !important; color:#fff !important;}
.ds-fabrics .pagination > li.disabled > a{ opacity:.45; cursor:default;}
.ds-fabrics .pagination em{ font-style:normal;}

/* ---------- Step 2: style options ---------- */
.ds-tabs{ display:flex; gap:8px; margin:0 0 22px; padding-bottom:4px; overflow-x:auto; scrollbar-width:none;}
.ds-tabs::-webkit-scrollbar{ display:none;}
.ds-tab{
	display:flex; align-items:center; gap:8px; flex:none;
	padding:8px 16px 8px 8px;
	border:1px solid var(--line); border-radius:999px; background:#fff;
	color:var(--ink); font:600 13.5px/1 var(--sans);
	transition:border-color .2s, background .2s, color .2s;
}
.ds-tab span{ display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--tint); color:var(--navy); font-size:12px;}
.ds-tab:hover{ border-color:var(--navy);}
.ds-tab.is-active{ border-color:var(--navy); background:var(--navy); color:#fff;}
.ds-tab.is-active span{ background:#fff;}

.ds-group h3{ margin:0 0 4px; font-size:22px; font-weight:600; color:var(--navy);}
.ds-hint{ margin:0 0 18px; color:var(--muted); font-size:14px;}
.ds-sub{ margin:0 0 12px; font:600 13px/1.4 var(--sans); color:var(--navy);}

.ds-options{ display:grid; grid-template-columns:repeat(auto-fill, minmax(125px,1fr)); gap:14px;}
.ds-opt{
	position:relative; display:flex; flex-direction:column; align-items:center; gap:8px;
	padding:12px 10px 14px;
	border:2px solid var(--line); border-radius:14px; background:#fff;
	color:var(--ink); text-align:center;
	transition:border-color .2s, box-shadow .2s, background .2s;
}
.ds-opt:hover{ border-color:#9db8d6; box-shadow:0 6px 16px rgba(15,58,92,.1);}
.ds-opt-img{ display:flex; align-items:center; justify-content:center; width:100%; height:130px;}
.ds-opt-img img{ mix-blend-mode:multiply; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.ds-opt-title{ font:600 13px/1.3 var(--sans);}
.ds-check{ display:none; position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff; font-size:12px; line-height:24px; text-align:center;}
.ds-opt.is-selected{ border-color:var(--navy); background:var(--tint); box-shadow:0 0 0 3px rgba(15,58,92,.12);}
.ds-opt.is-selected .ds-check{ display:block;}

.ds-monogram{ margin-top:26px; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--tint);}
.ds-monogram .ds-fields{ margin-bottom:16px;}
.ds-saved{ margin-left:12px; color:#2e8b57; font-size:13px; font-weight:600;}

.ds-choices{ display:grid; gap:10px;}
.ds-choice{ display:flex; align-items:center; gap:12px; margin:0; padding:14px 16px; border:2px solid var(--line); border-radius:12px; background:#fff; font-weight:400; cursor:pointer;}
.ds-choice input{ width:18px; height:18px; margin:0; accent-color:var(--navy);}
.ds-choice-title{ flex:1; font-size:14.5px;}
.ds-choice-price{ font-weight:700; color:var(--navy);}
.ds-choice:has(input:checked){ border-color:var(--navy); background:var(--tint);}

.ds-group-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line);}
.ds-group-nav .ds-btn-primary{ margin-left:auto;}

/* ---------- Step 3: measurements ---------- */
.ds-methods{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:14px; margin-bottom:26px;}
.ds-method{
	display:flex; flex-direction:column; gap:6px; overflow:hidden; padding:0 0 14px;
	border:2px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); text-align:left;
	transition:border-color .2s, box-shadow .2s;
}
.ds-method:hover{ border-color:#9db8d6; box-shadow:0 6px 16px rgba(15,58,92,.1);}
.ds-method img{ display:block; width:100%; height:120px; object-fit:cover; margin-bottom:6px;}
.ds-method strong{ padding:0 14px; font:600 14.5px/1.3 var(--sans); color:var(--navy);}
.ds-method span{ padding:0 14px; font-size:12.5px; line-height:1.5; color:var(--muted);}
.ds-method.is-selected{ border-color:var(--navy); box-shadow:0 0 0 3px rgba(15,58,92,.12);}

.ds-form{ scroll-margin-top:130px; padding:24px; border:1px solid var(--line); border-radius:14px; background:#fff;}
.ds-form h3{ margin:0 0 4px; font-size:22px; font-weight:600; color:var(--navy);}
.ds-measure{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:24px; align-items:start;}
.ds-measure-pic{ position:sticky; top:130px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--tint);}
.ds-measure-pic img{ display:block; width:100%; height:auto; border-radius:8px;}
.ds-form-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:22px;}
.ds-msg{ margin:0; font-size:13.5px; color:#c0392b;}
.ds-msg.is-ok{ color:#2e8b57;}

/* ---------- Summary ---------- */
.ds-summary{ display:flex; flex-direction:column; max-height:calc(100vh - 150px); padding:20px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 8px 28px rgba(15,58,92,.08);}
.ds-summary h2{ margin:0 0 14px; font-size:20px; font-weight:600; color:var(--navy);}
.ds-fab-sel{ display:flex; gap:14px; padding:12px; border-radius:12px; background:var(--tint);}
.ds-fab-sel > img{ flex:none; width:84px; height:104px; object-fit:contain; border-radius:8px; background:#fff;}
.ds-fab-sel strong{ display:block; font:600 15px/1.3 var(--serif); color:var(--navy);}
.ds-fab-sel > div{ flex:1; min-width:0;}
.ds-fab-row .ds-price, .ds-fab-row .ds-link{ white-space:nowrap;}
.ds-fab-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.ds-fab-sel p{ margin:4px 0 6px; font-size:12px; line-height:1.4; color:var(--muted);}
.ds-price{ display:block; font:700 18px/1.2 var(--sans); color:var(--navy);}
.ds-price small{ font-size:11px; font-weight:500; color:var(--muted);}
.ds-no-fabric{ padding:22px 12px; border:2px dashed var(--line); border-radius:12px; text-align:center; color:var(--muted);}
.ds-no-fabric i{ font-size:26px; color:#a9b7c6;}
.ds-no-fabric p{ margin:8px 0 4px; font-size:14px;}

.ds-list{ flex:1; min-height:120px; margin:14px 0 16px !important; overflow-y:auto;}
.ds-list li + li{ border-top:1px solid var(--line);}
.ds-row{ display:flex; align-items:center; gap:12px; width:100%; padding:6px 4px; border:0; background:none; text-align:left; color:var(--ink);}
.ds-row:hover .ds-row-edit{ color:var(--navy);}
.ds-row-img{ display:flex; align-items:center; justify-content:center; flex:none; width:42px; height:42px; border:1px solid var(--line); border-radius:8px; background:#fff;}
.ds-row-img img{ max-width:100%; max-height:100%; object-fit:contain;}
.ds-row-text{ flex:1; min-width:0;}
.ds-row-text small{ display:block; font:600 10.5px/1.2 var(--sans); letter-spacing:.07em; text-transform:uppercase; color:var(--muted);}
.ds-row-text strong{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 13.5px/1.4 var(--sans);}
.ds-row-text em{ display:block; font-style:normal; font-size:12px; color:var(--muted);}
.ds-row-edit{ font:600 12px/1 var(--sans); color:var(--blue);}
.ds-cta{ width:100%; min-height:48px; font-size:14.5px;}
.ds-aside.is-last-step .ds-cta{ display:none;}
.ds-notes{ display:flex; flex-wrap:wrap; gap:4px 16px; margin:14px 0 0 !important;}
.ds-notes li{ font-size:12.5px; color:var(--muted);}
.ds-notes i{ margin-right:5px; color:var(--blue);}

/* ---------- Mobile bar (hidden on desktop) ---------- */
.ds-bar{ display:none;}

/* ---------- Responsive ---------- */
@media (max-width:1199px){
	.ds-layout{ grid-template-columns:minmax(0,1fr) 320px; gap:24px;}
	.ds-fab-grid{ grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:991px){
	.ds-layout{ grid-template-columns:minmax(0,1fr);}
	.ds-aside{ position:static;}
	.ds-summary{ max-height:none;}
	.ds-list{ overflow:visible;}
	.ds-cta{ display:none;}
	.ds-fab-grid{ grid-template-columns:repeat(3, minmax(0,1fr));}
	.ds-page{ padding-bottom:110px;}

	.ds-bar{
		position:fixed; left:0; right:0; bottom:0; z-index:900;
		display:flex; align-items:center; justify-content:space-between; gap:12px;
		padding:10px 16px calc(10px + env(safe-area-inset-bottom));
		border-top:1px solid var(--line); background:#fff; box-shadow:0 -6px 20px rgba(15,58,92,.12);
	}
	.ds-bar.is-last-step{ display:none;}
	.ds-bar-info{ display:flex; align-items:center; gap:10px; min-width:0;}
	.ds-bar-info img{ width:38px; height:46px; object-fit:contain; border-radius:6px; background:var(--tint);}
	.ds-bar-info div{ min-width:0;}
	.ds-bar-info strong{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 13.5px/1.3 var(--sans); color:var(--navy);}
	.ds-bar-info span{ font-size:12px; color:var(--muted);}
	.ds-bar .ds-btn{ flex:none;}
	/* keep the WhatsApp button above the bar */
	body:has(.ds-bar) .whatsApp{ bottom:88px !important;}
}
@media (max-width:767px){
	.ds-head{ padding:22px 0 20px;}
	.ds-head h1{ font-size:28px;}
	.ds-head p{ font-size:14px;}
	.ds-steps{ margin-top:18px !important;}
	.ds-steps li + li:before{ width:18px;}
	.ds-steps button{ padding:5px 12px 5px 5px; font-size:13px;}
	.ds-step-no{ width:26px; height:26px;}
	.ds-page{ padding-top:22px;}
	.ds-panel-head h2{ font-size:22px;}
	/* filters stay on one scrolling row; the pop-ups become a sheet at the bottom of the screen */
	.ds-fbar-filters{ flex-wrap:nowrap; overflow-x:auto; margin-left:-16px; margin-right:-16px; padding:2px 16px 6px; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
	.ds-fbar-filters::-webkit-scrollbar{ display:none;}
	.ds-dd{ flex:none;}
	.ds-dd-btn{ width:auto; height:44px; padding:0 14px;}
	.ds-toolbar{ padding:10px;}
	.ds-kbd{ display:none;}
	.ds-search input{ height:50px; font-size:16px;}
	.ds-dd.is-open:before{ content:""; position:fixed; inset:0; z-index:1090; background:rgba(10,42,69,.45);}
	.ds-pop, .ds-pop-swatch{ position:fixed; left:12px !important; right:12px !important; top:auto; bottom:12px; z-index:1100; width:auto; max-width:none; max-height:70vh; overflow-y:auto;}
	.ds-pop-swatch .ds-pop-list{ grid-template-columns:repeat(2, minmax(0,1fr));}
	.ds-fab-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px;}
	.ds-fab-img{ padding:10px;}
	.ds-fab-body{ padding:10px;}
	.ds-fab-body h3{ font-size:14px;}
	.ds-fab-actions{ flex-direction:column;}
	.ds-options{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;}
	.ds-opt-img{ height:110px;}
	.ds-methods{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;}
	.ds-method img{ height:84px;}
	.ds-method strong, .ds-method span{ padding:0 10px;}
	.ds-measure{ grid-template-columns:minmax(0,1fr);}
	.ds-measure-pic{ position:static; max-width:260px;}
	.ds-form{ padding:16px;}
	.ds-fields{ gap:14px 12px;}
	.ds-monogram{ padding:14px;}
	.ds-group-nav .ds-btn{ padding:0 14px;}
}
@media (max-width:420px){
	.ds-steps button{ padding-right:10px;}
	.ds-steps li + li:before{ width:10px; margin:0 3px;}
	.ds-fields{ grid-template-columns:minmax(0,1fr);}
}
@media (prefers-reduced-motion:reduce){
	.ds *{ transition:none !important;}
}

/* ---------- Validation messages ---------- */
.ds-err{ display:block; margin-top:6px; font:500 12.5px/1.4 var(--sans); color:#c0392b;}
.ds-field small.ds-err{ text-transform:none; letter-spacing:0;}
.ds-tab.is-missing{ border-color:#d64545; color:#c0392b;}
.ds-tab.is-missing span{ background:#fde8e8; color:#c0392b;}

/* ---------- Step bar that stays in view ---------- */
.ds-stepbar{ position:sticky; top:var(--hd-h, 90px); z-index:900; padding:10px 0; border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); box-shadow:0 4px 14px rgba(15,58,92,.06);}
@supports (backdrop-filter:blur(6px)){ .ds-stepbar{ background:rgba(255,255,255,.88); backdrop-filter:blur(8px);} }
.ds-stepbar .ds-steps{ margin:0 !important;}
.ds-stepbar .ds-steps button{ padding-top:4px; padding-bottom:4px;}
@media (max-width:575px){
	/* on phones only the current step shows its name, so all three fit in the bar */
	.ds-stepbar .ds-steps button:not(.is-current) .ds-step-label{ display:none;}
	.ds-stepbar .ds-steps button:not(.is-current){ padding-right:6px;}
	.ds-stepbar .ds-steps li + li:before{ width:20px;}
}

/* monogram letters: a small box with the Save button next to it */
.ds-mono-row{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; }
.ds-mono-row .ds-field{ flex:none; width:150px;}
.ds-mono-row .ds-field input{ text-transform:uppercase; letter-spacing:.1em;}
.ds-mono-row .ds-btn{ margin-top:22px;}
.ds-mono-row .ds-saved{ margin:32px 0 0 0;}
@media (max-width:575px){ .ds-mono-row .ds-field{ width:130px;} }