/* ===================================================================
   TAZRIRT goat-hair tent builder. Loaded only on tent product pages.
   Same colours and fonts as the majlis designer and the rest of the site.
   =================================================================== */
.tzt, .tzt-entry {
  --cream: #FAF7F2; --sand: #EFE3D3; --terracotta: #98452F; --terra-dark: #7D3A26;
  --dark: #241F1A; --ink: #3B332B; --muted: #5A5045; --line: #E4D8C8; --field: #CDBFAB; --bad: #8A2A18; --ok: #2F6B3F;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Lora', Georgia, 'Times New Roman', serif;
  font-family: var(--font-body); color: var(--ink);
}
.tzt *, .tzt *::before, .tzt *::after { box-sizing: border-box; }
.tzt { clear: both; width: 100%; background: var(--cream); border-top: 1px solid var(--line); margin: 32px 0; padding: 40px 0 48px; scroll-margin-top: 90px; }
.tzt-wrap { max-width: 1180px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left, 0px)) 0 max(16px, env(safe-area-inset-right, 0px)); }
.tzt h2, .tzt h3, .tzt p, .tzt figure { margin: 0; }
.tzt-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; max-width: 680px; }
.tzt-eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--terracotta); font-weight: 600; }
.tzt-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.08; color: var(--dark); }
.tzt-lede { color: var(--muted); font-size: 16px; line-height: 1.6; }
.tzt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 28px; align-items: start; }
/* Desktop: the 3D view and the price stay in view next to the choices. */
.tzt-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; }
.tzt-side > * { flex-shrink: 0; }
/* The theme sets overflow-x: hidden on body, which turns body into a scroll box and stops sticky; clip hides the same overflow without that. */
body:has(.tzt) { overflow-x: clip; overflow-y: visible; }
@media (min-width: 922px) {
  .tzt-side .tzt-stage__view { aspect-ratio: 16 / 10; min-height: 0; max-height: none; }
  .tzt-side .tzt-stage__bar { padding: 10px 14px 12px; }
  .tzt-side .tzt-stage__size { display: none; }
  .tzt-side .tzt-stage { position: relative; }
  .tzt-side .tzt-stage__bar { position: absolute; top: 52px; right: 8px; padding: 0; z-index: 3; }
  .tzt-side .tzt-stage__bar .tzt-tool { background: rgba(255, 255, 255, .94); font-size: 12.5px; padding: 6px 11px; }
  .tzt-side .tzt-lead { font-size: 12.5px; }
  .tzt-side .tzt-stage__hint { display: none; }
  .tzt-side .tzt-quote { padding: 18px; gap: 8px; }
  .tzt-side .tzt-row { padding: 4px 0; }
  .tzt-side .tzt-total b { font-size: 34px; }
}
.tzt-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tzt-sec { background: #FFFFFF; border: 1px solid var(--line); border-radius: 6px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.tzt-sec[hidden] { display: none; }
.tzt-sec h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--dark); display: flex; align-items: baseline; gap: 10px; line-height: 1.2; }
.tzt-sec h3 span { font-family: var(--font-body); font-size: 12px; color: var(--terracotta); font-weight: 600; }
.tzt-hint { font-size: 14px; color: var(--muted); }
.tzt-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.tzt-opts:empty { display: none; }
.tzt .tzt-opt { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 3px; padding: 14px 15px; border: 1.5px solid var(--line); border-radius: 6px; background: #FFFFFF; font-family: var(--font-body); color: var(--ink); }
.tzt .tzt-opt:hover { border-color: var(--field); }
.tzt .tzt-opt:focus-visible, .tzt .tzt-sw:focus-visible, .tzt .tzt-preset:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }
.tzt .tzt-opt[aria-pressed="true"] { border-color: var(--terracotta); box-shadow: inset 0 0 0 1px var(--terracotta); background: #FFFCF8; }
.tzt-opt b { font-weight: 600; font-size: 16px; color: var(--dark); }
.tzt-opt small { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.tzt-opt i { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; color: var(--dark); }
.tzt-opt i:empty { display: none; }
.tzt-opt em { font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ok); }
.tzt-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.tzt .tzt-preset { all: unset; cursor: pointer; font-size: 14px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: #FFFFFF; font-variant-numeric: tabular-nums; }
.tzt .tzt-preset:hover { border-color: var(--terracotta); }
.tzt-dims { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tzt-field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; color: var(--dark); }
.tzt-field output { font-weight: 400; color: var(--muted); }
.tzt .tzt-field input[type="number"] { font: inherit; font-weight: 400; color: var(--ink); background: var(--cream); border: 1px solid var(--field); border-radius: 4px; padding: 10px 12px; width: 100%; min-height: 44px; }
.tzt .tzt-field input[type="number"]:focus { outline: 2px solid var(--terracotta); outline-offset: 1px; }
.tzt .tzt-field input[type="range"] { accent-color: var(--terracotta); width: 100%; padding: 0; border: 0; background: none; }
.tzt-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.tzt .tzt-sw { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 400; background: #FFFFFF; }
.tzt .tzt-sw i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); }
.tzt .tzt-sw[aria-pressed="true"] { border-color: var(--terracotta); box-shadow: inset 0 0 0 1px var(--terracotta); }
.tzt-views { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tzt-views figure { background: var(--cream); border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
.tzt-views figcaption { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.tzt-views svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.tzt-quote { background: #FFFFFF; border: 1px solid var(--line); border-radius: 6px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.tzt-quote h3 { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--dark); }
.tzt-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.tzt-row span { display: flex; flex-direction: column; }
.tzt-row small { color: var(--muted); font-size: 12.5px; }
.tzt-row b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--dark); }
.tzt-row--save b { color: var(--ok); }
.tzt-row--muted { color: var(--muted); }
.tzt-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 4px; }
.tzt-total span { font-weight: 600; }
.tzt-total b { font-family: var(--font-display); font-size: 40px; line-height: 1; font-weight: 700; color: var(--dark); font-variant-numeric: tabular-nums; }
.tzt-policy { font-size: 13px; color: var(--ok); font-weight: 600; }
.tzt-lead { font-size: 13px; color: var(--muted); line-height: 1.5; }
.tzt-err { color: var(--bad); font-size: 14px; font-weight: 600; }
.tzt-err[hidden], .tzt-wa[hidden], .tzt-buy[hidden] { display: none !important; }
.tzt .tzt-buy, .tzt .tzt-bar__go, .tzt-entry .tzt-entry__btn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 20px; border-radius: 4px; background: var(--terracotta); color: #FFFFFF; font-family: var(--font-body); font-weight: 600; font-size: 16px; text-align: center; }
.tzt .tzt-buy:hover, .tzt .tzt-bar__go:hover, .tzt-entry .tzt-entry__btn:hover { background: var(--terra-dark); color: #FFFFFF; }
.tzt .tzt-buy:focus-visible, .tzt-entry .tzt-entry__btn:focus-visible { outline: 3px solid var(--dark); outline-offset: 2px; }
.tzt .tzt-buy:disabled { background: #6E625A; cursor: not-allowed; }
.tzt .tzt-wa { display: flex; justify-content: center; align-items: center; min-height: 48px; border: 1px solid var(--terracotta); border-radius: 4px; color: var(--terracotta); font-weight: 600; text-decoration: none; }
.tzt.is-busy .tzt-total b, .tzt .is-busy .tzt-total b { opacity: .45; }
.tzt-wrap.is-busy .tzt-total b, .tzt-wrap.is-busy [data-bartotal] { opacity: .45; transition: opacity .15s; }
.tzt-entry { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 8px; }
.tzt-entry__note { margin: 0; font-size: 13px; color: var(--ok); font-weight: 600; }
.tzt-from small { font-size: .7em; font-weight: 400; margin-right: 4px; }
.tzt-bar { display: none; }
/* 3D stage */
.tzt-stage { background: #FFFFFF; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.tzt-stage__view { position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 240px; max-height: 46vh; background: #F3ECE1; touch-action: none; }
.tzt-stage__view[hidden] { display: none; }
.tzt-stage__view canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; }
.tzt-stage__view canvas:active { cursor: grabbing; }
.tzt-stage__load { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; }
.tzt-stage__load[hidden] { display: none; }
.tzt-stage__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px 4px; }
.tzt-stage__size { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--dark); }
.tzt-stage__tools { display: flex; gap: 8px; }
.tzt-stage__tools[hidden] { display: none; }
.tzt .tzt-tool { all: unset; cursor: pointer; font-size: 13.5px; font-weight: 600; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: #FFFFFF; color: var(--ink); }
.tzt .tzt-tool:hover { border-color: var(--terracotta); }
.tzt .tzt-tool[aria-pressed="true"] { background: var(--dark); color: #FFFFFF; border-color: var(--dark); }
.tzt .tzt-tool:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }
.tzt-stage__hint { padding: 0 16px 14px; font-size: 12.5px; color: var(--muted); }
.tzt-stage__hint[hidden] { display: none; }
.tzt-stage .tzt-views { padding: 12px 16px 16px; }
.tzt-views[hidden] { display: none; }
.tzt-stage__tabs { display: flex; gap: 4px; padding: 8px 8px 0; background: #FFFFFF; }
.tzt .tzt-tab { all: unset; cursor: pointer; flex: 1; text-align: center; padding: 9px 10px; border-radius: 4px 4px 0 0; font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; }
.tzt .tzt-tab[aria-selected="true"] { color: var(--dark); border-bottom-color: var(--terracotta); background: var(--cream); }
.tzt .tzt-tab[hidden] { display: none; }
.tzt .tzt-tab:focus-visible { outline: 3px solid var(--terracotta); outline-offset: -3px; }
.tzt-chip { position: absolute; bottom: 10px; z-index: 2; font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 6px; pointer-events: none; font-variant-numeric: tabular-nums; }
.tzt-chip--size { left: 10px; background: rgba(36, 31, 26, .86); color: #FFFFFF; }
.tzt-chip--h { right: 10px; background: rgba(255, 255, 255, .92); color: var(--terracotta); }
.tzt-stage__plan { background: #FBF8F3; padding: 8px; }
.tzt-stage__plan[hidden] { display: none; }
.tzt-stage__plan svg { display: block; width: 100%; height: auto; }
.tzt-save { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tzt .tzt-save__btn { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: 10px 8px; border: 1px solid var(--field); border-radius: 4px; font-size: 13.5px; font-weight: 600; color: var(--ink); background: #FFFFFF; }
.tzt .tzt-save__btn:hover { border-color: var(--terracotta); color: var(--terracotta); }
.tzt .tzt-save__btn:disabled { opacity: .5; cursor: not-allowed; }
.tzt .tzt-save__btn:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }
.tzt-save__note { margin: 0; font-size: 12.5px; color: var(--ok); word-break: break-all; }
.tzt-save__note[hidden] { display: none; }
/* majlis models */
.tzt-deal { margin: 0; padding: 10px 14px; background: #EAF3EC; border-radius: 4px; color: var(--ok); font-size: 14px; }
.tzt-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.tzt .tzt-model { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 10px; border: 1.5px solid var(--line); border-radius: 6px; background: #FFFFFF; position: relative; }
.tzt .tzt-model:hover { border-color: var(--field); }
.tzt .tzt-model:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }
.tzt .tzt-model[aria-pressed="true"] { border-color: var(--terracotta); box-shadow: inset 0 0 0 1px var(--terracotta); }
.tzt .tzt-model[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--terracotta); color: #FFFFFF; display: grid; place-items: center; font-size: 13px; }
.tzt-model img, .tzt-model > i { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: var(--sand); }
.tzt-model b { font-weight: 600; font-size: 13.5px; line-height: 1.3; color: var(--dark); padding: 0 4px; }
.tzt-model__dots { display: flex; gap: 4px; padding: 0 4px; }
.tzt-model__dots i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); }
.tzt-opt s { font-weight: 400; color: var(--muted); margin-right: 4px; }
.tzt-opt em.tzt-off { color: var(--ok); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
@media (max-width: 921px) {
  .tzt-grid { grid-template-columns: minmax(0, 1fr); }
  .tzt-side { display: contents; }
  .tzt-stage { order: -1; scroll-margin-top: 70px; }
  .tzt-col { order: 0; }
  .tzt-quote { order: 1; }
  .tzt-stage__view { aspect-ratio: 4 / 3; max-height: none; }
  body:has(.tzt) #ast-scroll-top { display: none !important; }
  .tzt .tzt-bar__3d { all: unset; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--terracotta); padding: 10px 6px; text-decoration: underline; text-underline-offset: 3px; }
  .tzt-bar { gap: 10px; }
  .tzt-bar > div { margin-right: auto; }
  .tzt-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; align-items: center; justify-content: space-between; gap: 12px; background: #FFFFFF; border-top: 1px solid var(--line); padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .tzt-bar small { display: block; font-size: 12px; color: var(--muted); }
  .tzt-bar b { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--dark); font-variant-numeric: tabular-nums; }
  .tzt .tzt-bar__go { min-height: 46px; }
}
@media (max-width: 560px) {
  .tzt-dims, .tzt-views { grid-template-columns: 1fr; }
  .tzt-sec { padding: 14px; }
  .tzt-wrap { padding-left: 0; padding-right: 0; }   /* the theme container already keeps the side gutter */
  .tzt-models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .tzt * { transition: none !important; } }