.cal-calculator { margin-top: 1.5rem; padding-top: 1.5rem; }
.cal-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: min-content 1fr; gap: 1.5rem; align-items: start; }
.cal-layout > .bc-controls { grid-column: 1; grid-row: 1 / 3; }
.cal-preview { grid-column: 2; grid-row: 1; }
.cal-summary { grid-column: 2; grid-row: 2; position: sticky; top: 6rem; }
.cal-presets-wrap { margin-bottom: 1.5rem; }
.cal-presets-wrap h3 { font-weight: 800; }
.cal-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .7rem; }
.cal-preset { display: grid; gap: .2rem; padding: .8rem; border: 1px solid #567084; border-radius: .65rem; background: #14283b; text-align: left; }
.cal-preset strong { font-size: .8rem; }
.cal-preset span { font-size: .75rem; color: #a6e3f0; }
.cal-preset:hover { border-color: #78dcf6; background: #203e52; }
.cal-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.cal-chip, .cal-quantity-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: .4rem .65rem; border: 1px solid #567084; border-radius: .55rem; font-size: .8rem; cursor: pointer; background: #14283b; }
.cal-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cal-chip:has(:focus-visible) { outline: 3px solid #78dcf6; outline-offset: 3px; }
.cal-chip:has(:checked), .cal-quantity-chip[aria-pressed="true"] { border-color: #78dcf6; background: #203e52; box-shadow: inset 0 0 0 1px #78dcf6; }
#cal-quantity { width: 100%; min-height: 3rem; padding: .65rem .85rem; border: 1px solid #567084; border-radius: .65rem; background: #14283b; color: #fff; font: inherit; color-scheme: dark; }
.cal-warning { color: #ffd19b; font-size: .8rem; margin-top: .4rem; }
.cal-extra { padding: 1rem; border: 1px solid #567084; border-radius: .65rem; }
.cal-extra > summary { cursor: pointer; min-height: 2.75rem; font-size: .9rem; font-weight: 800; }
.cal-extra > .bc-controls { padding-top: 1rem; }
.cal-calculator .bc-option:has(input:disabled) label { opacity: .55; cursor: not-allowed; }
.cal-calculator .bc-summary dl > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; padding: .4rem 0; border-bottom: 1px solid #344b60; }
.cal-calculator .bc-summary dd { text-align: left; font-variant-numeric: tabular-nums; }
.cal-summary .bc-total strong { font-size: clamp(1.45rem, 3vw, 2.4rem); overflow-wrap: anywhere; }
.cal-summary > p { margin-bottom: .8rem; }
.cal-summary { scroll-margin-top: 6rem; }
.cal-preview-price { display: grid; gap: .2rem; padding-top: .7rem; margin-top: .7rem; border-top: 1px solid #c6beaf; font-size: .7rem; color: #233c4e; }
.cal-preview-price strong { font-size: 1.15rem; line-height: 1.3; }
.cal-calculator [aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
:is(#cal-sample,.cal-expanded-sample) { width: min(100%, 16rem); margin: 0 auto 1rem; container-type: inline-size; filter: drop-shadow(0 8px 7px #152c3d25); }
.cal-ad { position: relative; overflow: hidden; background: #173b50; color: #f5f0e5; text-align: center; isolation: isolate; }
.cal-ad-copy { position: relative; z-index: 1; }
.cal-header { padding: 8% 7% 7%; background: radial-gradient(circle at 100% 20%, #31677b 0 24%, transparent 24.5%), #173b50; }
.cal-eyelet { position: absolute; top: 3%; left: calc(50% - 1.2cqw); width: 2.4cqw; height: 2.4cqw; border: .7cqw solid #a7b1b2; border-radius: 50%; background: #eee9dd; }
.cal-brand { display: flex; align-items: center; gap: 3cqw; position: relative; z-index: 1; text-align: left; }
.cal-brand img { width: 13cqw; height: 13cqw; object-fit: contain; filter: invert(1); }
.cal-brand strong { font-family: Georgia, serif; font-size: 7cqw; line-height: 1.15; font-weight: 400; }
.cal-year { display: block; position: relative; z-index: 1; font-size: 17cqw; letter-spacing: -.06em; line-height: 1.15; margin: 3cqw 0; }
.cal-tagline { display: block; font-size: 3.3cqw; letter-spacing: .08em; }
.cal-gold-line { display: block; margin: 4cqw auto 0; width: 55%; height: 1cqw; background: #8ab5c2; }
:is(#cal-sample,.cal-expanded-sample)[data-gold="true"] .cal-year { background: linear-gradient(110deg, #b88c32, #fff0b0 35%, #ca983b 55%, #fff2bb 80%); background-clip: text; -webkit-background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 #493811); }
:is(#cal-sample,.cal-expanded-sample)[data-gold="true"] .cal-gold-line { background: linear-gradient(110deg, #b88c32, #fff0b0, #ca983b, #fff2bb); }
.cal-ad[data-surface="gloss"]::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 12%, #ffffff60 33%, #ffffff09 49%, transparent 60%, #ffffff38 80%, transparent); }
.cal-ad[data-surface="matte"], .cal-ad[data-surface="thick"] { background-color: #29485a; }
.cal-ad[data-surface="matte"]::after, .cal-ad[data-surface="thick"]::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: #d4d4c70b; }
.cal-ad[data-surface="soft"]::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 20% 0, #e4d5bd20, #050d1740), repeating-linear-gradient(25deg, #ffffff09 0 1px, transparent 1px 3px); }
.cal-ad[data-surface="thick"] { border-bottom: 1cqw solid #8c9b9f; }
.cal-extra-field, .cal-bottom-field { padding: 4cqw 2cqw; font-size: 3.3cqw; }
.cal-spring { display: flex; justify-content: space-around; height: 4cqw; padding: 0 2cqw; background: linear-gradient(#f0f0e7 0 30%, #9b9e98 30% 65%, #f7f7f0 65%); }
.cal-spring i { position: relative; top: -1cqw; width: 2cqw; height: 6cqw; border: 1cqw solid var(--cal-spring-color); border-left-color: #f0f1eab3; border-radius: 45%; box-shadow: 1px 0 1px #29374499; z-index: 2; }
.cal-month { background: #fffef9; color: #173448; padding: 3cqw 5cqw; border-bottom: 1px solid #c6c6bc; }
.cal-month-title { display: block; font-size: 4cqw; letter-spacing: .1em; padding-bottom: 1.5cqw; }
.cal-dates { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; font-size: 4cqw; line-height: 1.4; }
.cal-dates b { font-size: 2.6cqw; }
.cal-dates > span { position: relative; }
.cal-weekend { color: #b64a45; }
.cal-mono-block .cal-month { padding-top: 2cqw; padding-bottom: 2cqw; }
.cal-cursor { position: absolute; inset: 0 -1cqw; border: .8cqw solid var(--cal-cursor-color); border-radius: .6cqw; font-style: normal; }
.cal-cursor[data-kind="branded"] { inset: -1cqw -1cqw 0; border-top-width: 2.5cqw; color: white; font-size: 1.8cqw; line-height: 1; text-align: right; padding-right: .3cqw; text-shadow: 0 0 2px #000; }
.cal-cursor[data-kind="magnetic"] { border-width: 1.2cqw; border-radius: 1.5cqw; box-shadow: 1px 2px 2px #0004; }
:is(#cal-sample,.cal-expanded-sample)[data-block="color"] .cal-month-title { background: #d2e9ef; color: #174d63; padding-left: 2cqw; }
:is(#cal-sample,.cal-expanded-sample)[data-block="color"] .cal-month { background: #edf7f8; }
:is(#cal-sample,.cal-expanded-sample)[data-block="arctic"] .cal-month { background: #f3f7ff; color: #455f7a; }
:is(#cal-sample,.cal-expanded-sample)[data-block="arctic"] .cal-month-title { color: #5881a2; }
:is(#cal-sample,.cal-expanded-sample)[data-block="metallic"] .cal-month { background: linear-gradient(110deg, #b8c3ca, #edf0ee 35%, #ccd2d3 60%, #f7f8ef); }
@media (max-width: 767px) {
  .cal-layout { display: flex; flex-direction: column; }
  .cal-layout > * { width: 100%; min-width: 0; position: static; }
  .cal-preview { order: -1; }
  :is(#cal-sample,.cal-expanded-sample) { width: min(100%, 13rem); }
  .cal-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 375px) { .cal-calculator { padding: 1rem; } .cal-extra { padding: .7rem; } .cal-preset { padding: .65rem; } }