/* Subscription builder: steps, choice cards, gift fields, footer. */
.ccq-sub { display: grid; gap: 32px; max-width: 880px; margin: 0 auto; }
.ccq-sub__step { display: grid; gap: 14px; }
.ccq-sub__title { display: flex; align-items: center; gap: 12px; margin: 0; font: 400 clamp(20px, 2vw, 26px)/1.15 var(--ccc-font-heading, "Crimson Text", Georgia, serif); color: var(--ccc-ink, #0b1014); }
.ccq-sub__n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ccc-primary, #1e2934); color: var(--ccc-page, #fff); font: 700 13px/1 var(--ccc-font-body, var(--ccq-font-sans, "Plus Jakarta Sans", sans-serif)); }
.ccq-sub__cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ccq-sub__cards--tiers { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ccq-sub__card { position: relative; display: block; cursor: pointer; }
.ccq-sub__card input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ccq-sub__cardbody { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 16px; border: 1.5px solid var(--ccc-border, #d9d9d9); border-radius: var(--ccc-radius-lg, 8px); background: var(--ccc-page, #fff); transition: border-color var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out), box-shadow var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out), background-color var(--ccc-duration, 250ms) var(--ccc-ease, ease-in-out); }
.ccq-sub__card input:checked + .ccq-sub__cardbody { border-color: var(--ccc-primary, #1e2934); box-shadow: inset 0 0 0 1px var(--ccc-primary, #1e2934); background: #fbfbf9; }
.ccq-sub__card input:focus-visible + .ccq-sub__cardbody { box-shadow: var(--ccc-focus, 0 0 0 2px #1e2934); }
.ccq-sub__popular { position: absolute; top: -11px; right: 12px; background: var(--ccc-accent, #e4ebc2); color: var(--ccc-primary, #1e2934); font: 700 11px/1 var(--ccc-font-body, var(--ccq-font-sans, sans-serif)); text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.ccq-sub__name { font: 700 15px/1.3 var(--ccc-font-body, var(--ccq-font-sans, sans-serif)); color: var(--ccc-ink, #0b1014); }
.ccq-sub__price { font: 400 22px/1 var(--ccc-font-heading, "Crimson Text", Georgia, serif); color: var(--ccc-ink, #0b1014); }
.ccq-sub__tag { display: inline-block; width: fit-content; font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 3px; background: #eef3e0; color: #3b5030; }
.ccq-sub__perks { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.45; color: var(--ccc-text, #515151); }
.ccq-sub__perks li { margin-bottom: 2px; }
.ccq-sub__switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--ccc-ink, #0b1014); }
.ccq-sub__switch input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ccc-primary, #1e2934); cursor: pointer; }
.ccq-sub__gift { display: grid; gap: 14px; padding: 18px; border: 1.5px solid var(--ccc-border, #d9d9d9); border-radius: var(--ccc-radius-lg, 8px); background: #fafaf8; }
@media (min-width: 640px) { .ccq-sub__gift { grid-template-columns: 1fr 1fr; } .ccq-sub__msg, .ccq-sub__gift .ccq-sub__switch { grid-column: 1 / -1; } }
.ccq-sub__gift[hidden] { display: none; }
.ccq-sub__gift label { display: grid; gap: 6px; font: 600 13px/1 var(--ccc-font-body, var(--ccq-font-sans, sans-serif)); color: var(--ccc-ink, #0b1014); }
.ccq-sub__gift input[type="text"], .ccq-sub__gift input[type="email"], .ccq-sub__gift textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ccc-border, #d9d9d9); border-radius: var(--ccc-radius, 4px); font: 400 14px/1.3 var(--ccc-font-body, var(--ccq-font-sans, sans-serif)); background: #fff; }
.ccq-sub__gift input:focus, .ccq-sub__gift textarea:focus { border-color: var(--ccc-primary, #1e2934); outline: none; }
.ccq-sub__count { justify-self: end; font-weight: 400; font-size: 12px; color: var(--ccc-text, #515151); }
.ccq-sub__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--ccc-border, #d9d9d9); }
.ccq-sub__total { margin: 0; font: 400 30px/1 var(--ccc-font-heading, "Crimson Text", Georgia, serif); color: var(--ccc-ink, #0b1014); }
.ccq-sub__per { font: 400 14px/1 var(--ccc-font-body, var(--ccq-font-sans, sans-serif)); color: var(--ccc-text, #515151); }
.ccq-sub__error { margin: 0; color: var(--ccc-danger, #b12535); font-size: 14px; }
.ccq-sub .ccq-delivery { margin: 0; }

.ccq-sub__subtitle { margin: 18px 0 10px; font: 700 15px/1.3 var(--ccc-font-body, var(--ccq-font-sans, sans-serif)); color: var(--ccc-ink, #0b1014); }
.ccq-sub__subtitle small { margin-left: 8px; font-weight: 400; color: var(--ccc-text, #515151); }
.ccq-sub__planprice { display: block; margin: 4px 0; font: 400 14px/1.3 var(--ccc-font-body, var(--ccq-font-sans, sans-serif)); color: var(--ccc-ink, #0b1014); }
.ccq-sub h4.ccq-sub__subtitle { font-family: var(--ccc-font-body, var(--ccq-font-sans, sans-serif)); font-size: 15px; text-transform: none; letter-spacing: 0; }
.ccq-sub h4.ccq-sub__subtitle small { font-family: var(--ccc-font-body, var(--ccq-font-sans, sans-serif)); font-size: 13px; }

.ccq-sub .ccq-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 36px; background: var(--ccc-primary, #1e2934); color: var(--ccc-page, #ffffff); font: 700 14px/1 var(--ccc-font-body, var(--ccq-font-sans, sans-serif)); text-transform: uppercase; letter-spacing: 0.06em; border: none; border-radius: var(--ccc-radius, 4px); cursor: pointer; transition: background-color var(--ccc-duration, 250ms) ease; }
.ccq-sub .ccq-btn:hover { background: #2b3b4a; }
.ccq-sub .ccq-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* PDP Context Overrides */
.ccq-pdp__subscription-wrapper .ccq-sub { margin: 0; max-width: 100%; gap: 24px; }
.ccq-pdp__subscription-wrapper .ccq-sub__cards--tiers { grid-template-columns: 1fr; }
@media (min-width: 480px) {
	.ccq-pdp__subscription-wrapper .ccq-sub__cards--tiers { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}