:root {
  --ungaro-ink: #17213b;
  --ungaro-wine: #6b1530;
  --ungaro-cream: #f5efe8;
  --ungaro-gold: #b89558;
  --ungaro-stock-low: #c39a32;
}

.ungaro-main { background: #f7f3ee; }

.ungaro-product {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(390px, .82fr);
  align-items: stretch;
  min-height: 870px;
  background: #1c1818;
}

.ungaro-stage-column,
.ungaro-stage,
.ungaro-hero { min-width: 0; min-height: 0; }

.ungaro-stage-column {
  display: grid;
  background: #1c1818;
}

.ungaro-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, .38fr);
  grid-template-rows: auto auto 1fr;
  align-content: start;
  align-items: start;
  gap: 10px 14px;
  padding: 18px;
  overflow: hidden;
}

.ungaro-hero {
  position: relative;
  grid-row: 1 / span 3;
  width: 100%;
  height: auto;
  aspect-ratio: 965 / 1629;
  margin: 0;
  overflow: hidden;
  background: #1c1818;
}

.ungaro-hero > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.ungaro-fabric-card {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  color: var(--ungaro-ink);
  background: rgba(246, 243, 236, .96);
}

.ungaro-stage > .ungaro-image-note {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  padding: 15px 0 0;
  color: rgba(246, 243, 236, .72);
}

.ungaro-panel {
  min-width: 0;
  padding: clamp(46px, 6vw, 88px) clamp(28px, 5vw, 74px);
  color: var(--ungaro-ink);
  background: var(--ungaro-cream);
}

.ungaro-panel h1 {
  margin: 8px 0 4px;
  color: var(--ungaro-ink);
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(62px, 6vw, 94px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .95;
}

.ungaro-subtitle {
  margin: 0 0 24px;
  color: var(--ungaro-wine);
  font-family: var(--serif, Georgia, serif);
  font-size: 23px;
  font-style: italic;
}

.ungaro-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 26px 0 4px;
}

.ungaro-price-row strong { font-size: 27px; }
.ungaro-from { color: #777; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.ungaro-premium-note { max-width: 560px; margin: 0 0 22px; color: #665f5b; font-size: 12px; line-height: 1.5; }

.ungaro-stock {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 26px;
  border: 1px solid #dce4d9;
  padding: 13px 15px;
  background: #f5f8f3;
}

.ungaro-stock[data-state="blocked"] { border-color: #ecd4d4; background: #fff6f6; }
.ungaro-stock-dot { width: 9px; height: 9px; border-radius: 50%; background: #3f8654; box-shadow: 0 0 0 5px rgba(63,134,84,.12); }
.ungaro-stock[data-state="low"] .ungaro-stock-dot { background: var(--ungaro-stock-low); box-shadow: 0 0 0 5px rgba(195,154,50,.14); }
.ungaro-stock[data-state="blocked"] .ungaro-stock-dot { background: #9c3543; box-shadow: 0 0 0 5px rgba(156,53,67,.12); }
.ungaro-stock div { display: flex; flex-direction: column; gap: 2px; }
.ungaro-stock strong { color: #315f3e; font-size: 13px; }
.ungaro-stock small { color: #777; font-size: 11px; }

.ungaro-option { min-width: 0; margin: 0 0 24px; }
.ungaro-option .option-head { margin-bottom: 11px; }

.ungaro-swatches {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 4px 10px;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}

.ungaro-swatch {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  box-shadow: 0 0 0 1px #cfc6bd;
  cursor: pointer;
}

.ungaro-swatch img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.ungaro-swatch:hover:not(:disabled) { box-shadow: 0 0 0 2px var(--ungaro-gold); }
.ungaro-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--ungaro-cream), 0 0 0 4px var(--ungaro-gold); }
.ungaro-swatch:focus-visible { outline: 2px solid var(--ungaro-ink); outline-offset: 4px; }
.ungaro-swatch:disabled { opacity: .32; cursor: not-allowed; }
.ungaro-selection-note { min-height: 18px; margin: 9px 0 0; color: #655f5a; font-size: 11px; }

.ungaro-select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ungaro-field { display: flex; flex-direction: column; gap: 8px; }
.ungaro-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ungaro-field-head label { color: var(--ungaro-ink); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ungaro-field-head button { border: 0; border-bottom: 1px solid currentColor; padding: 0 0 2px; color: #1f5a4b; background: transparent; cursor: pointer; font: inherit; font-size: 11px; }
.ungaro-collar-control { display: grid; grid-template-columns: 64px minmax(0, 1fr); min-height: 64px; border: 1px solid #d6d4d1; background: #fff; }
.ungaro-collar-control img { width: 64px; height: 64px; border-right: 1px solid #e2ded9; object-fit: contain; background: #faf9f7; }
.ungaro-collar-control .product-select { height: 64px; border: 0; }
[dir="rtl"] .ungaro-collar-control img { border-right: 0; border-left: 1px solid #e2ded9; }

.ungaro-buy-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; margin-top: 18px; }
.ungaro-quantity-field, .ungaro-quantity-field select, .ungaro-order { min-height: 58px; }
.ungaro-order { display: flex; width: 100%; margin: 0; justify-content: center; text-align: center; }
.ungaro-order[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.ungaro-order-message { margin: 10px 0 0; }
.delivery-note { margin-top: 12px; }

.ungaro-palette { padding-top: 100px; padding-bottom: 110px; background: #f7f3ee; }
.ungaro-palette-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 34px; }
.ungaro-palette-card { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); align-content: start; overflow: hidden; border: 1px solid var(--line); padding: 0; color: var(--ink); background: rgba(255,255,255,.42); text-align: left; cursor: pointer; }
.ungaro-palette-card:hover, .ungaro-palette-card:focus-visible, .ungaro-palette-card.selected { border-color: var(--forest); outline: 0; box-shadow: 0 0 0 1px var(--forest); }
.ungaro-palette-card > img { position: static; grid-row: 1; display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center; }
.ungaro-palette-card-copy { position: static; inset: auto; grid-row: 2; display: grid; gap: 7px; width: auto; padding: 18px; color: var(--ink); background: rgba(255,255,255,.92); transform: none; }
.ungaro-palette-card-kicker, .ungaro-palette-card-code { margin: 0; color: var(--muted-text); font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ungaro-palette-card strong { font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.05; }
.ungaro-palette-card-meta { color: var(--muted-text); font-size: 11px; line-height: 1.5; }
.ungaro-palette-card-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 5px; font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.ungaro-palette-card-status::before { width: 9px; height: 9px; border-radius: 50%; background: #2f785f; content: ""; }
.ungaro-palette-card[data-availability="low"] .ungaro-palette-card-status::before { background: var(--ungaro-stock-low); }
.ungaro-palette-card[data-availability="soldout"] .ungaro-palette-card-status::before { background: #9b4a3e; }
.ungaro-palette-card .dan-fabric-availability { margin-top:5px; }

.ungaro-story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); min-height: 760px; color: #fff; background: var(--pine); }
.ungaro-story > div { display: flex; flex-direction: column; justify-content: center; padding: clamp(56px, 7vw, 112px); }
.ungaro-story h2 { max-width: 540px; margin: 0 0 30px; font-family: var(--serif); font-size: clamp(64px, 7vw, 106px); font-weight: 400; letter-spacing: -.045em; line-height: .94; }
.ungaro-story > div > p { max-width: 590px; color: rgba(255,255,255,.72); line-height: 1.78; }
.ungaro-story figure { position: relative; min-height: 760px; margin: 0; overflow: hidden; }
.ungaro-story figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.ungaro-story figcaption { position: absolute; right: 18px; bottom: 18px; padding: 11px 14px; color: var(--ink); background: rgba(246,243,236,.9); font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ungaro-guide-modal { width: min(900px, calc(100vw - 32px)); max-height: min(86vh, 840px); border: 0; padding: 0; color: var(--ungaro-ink); background: #fff; box-shadow: 0 26px 80px rgba(15,25,22,.28); }
.ungaro-guide-modal::backdrop { background: rgba(12,25,22,.62); }
.ungaro-guide-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #ded9d2; padding: 22px 26px; }
.ungaro-guide-header h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(28px,4vw,44px); font-weight: 400; }
.ungaro-guide-header button { width: 44px; height: 44px; border: 1px solid #cfc8bf; border-radius: 50%; background: #fff; color: var(--ungaro-ink); cursor: pointer; font-size: 28px; }
.ungaro-guide-content { overflow: auto; max-height: calc(86vh - 90px); padding: 26px; }
.ungaro-guide-intro { margin: 0 0 20px; color: #655f5a; line-height: 1.55; }
.ungaro-size-table { width: 100%; border-collapse: collapse; }
.ungaro-size-table th, .ungaro-size-table td { border-bottom: 1px solid #e3ded8; padding: 12px; text-align: left; }
.ungaro-size-table th { background: #f6f2ed; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.ungaro-guide-note { margin: 18px 0 0; color: #746e68; font-size: 12px; line-height: 1.55; }
.ungaro-collar-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.ungaro-collar-card { display: grid; gap: 8px; border: 1px solid #ddd6ce; padding: 10px; background: #fff; color: var(--ungaro-ink); cursor: pointer; text-align: left; }
.ungaro-collar-card img { width: 100%; aspect-ratio: 1.2; object-fit: contain; background: #faf8f5; }
.ungaro-collar-card.is-selected { outline: 2px solid var(--ungaro-gold); outline-offset: 2px; }

@media (min-width: 621px) { .ungaro-select-grid > .ungaro-field > .product-select { height: 66px; } }
@media (max-width: 1080px) { .ungaro-palette-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 1000px) {
  .ungaro-product { grid-template-columns: 1fr; min-height: 0; }
  .ungaro-stage-column { min-height: min(1040px, 132vw); }
  .ungaro-panel { padding: 56px 28px 70px; }
}
@media (max-width: 720px) {
  .ungaro-stage-column { min-height: 132vw; max-height: 760px; }
  .ungaro-stage { grid-template-columns: minmax(0, 1fr) 120px; gap: 4px; padding: 10px; }
  .ungaro-stage > .ungaro-image-note { display: none; }
  .ungaro-panel h1 { font-size: 58px; }
  .ungaro-select-grid { grid-template-columns: 1fr; }
  .ungaro-buy-row { grid-template-columns: 78px minmax(0,1fr); }
  .ungaro-palette-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ungaro-palette-card-copy { padding: 13px; }
  .ungaro-palette-card strong { font-size: 20px; }
  .ungaro-story { grid-template-columns: 1fr; }
  .ungaro-story figure { min-height: 720px; }
  .ungaro-collar-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}