.shop-page { background: #f6f7f4; }
.offer-bar { background: #08271d; box-shadow: 0 9px 24px rgba(3,20,17,.3); color: #d9f6e4; position: sticky; top: 82px; z-index: 9; }.offer-bar-inner { align-items: center; display: flex; gap: 14px; justify-content: center; min-height: 74px; text-align: left; }.offer-bar-inner p { margin: 0; }.offer-bar-inner p:first-of-type { display: grid; gap: 2px; }.offer-bar-inner p:first-of-type strong { color: #fff; font-size: .9rem; letter-spacing: -.025em; }.offer-bar-inner p:first-of-type span { color: #b4d9c1; font-size: .71rem; }.offer-pulse { background: #76e69e; border-radius: 50%; box-shadow: 0 0 0 0 rgba(118,230,158,.55); flex: 0 0 auto; height: 9px; width: 9px; animation: offerPulse 1.6s infinite; }.offer-countdown { align-items: center; border-left: 1px solid rgba(185,247,215,.25); color: #fff; display: grid; font: 500 .62rem var(--mono); gap: 1px; padding-left: 22px; text-align: center; white-space: nowrap; }.offer-countdown span { color: #a9cfb8; letter-spacing: .04em; text-transform: uppercase; }.offer-countdown strong { color: #9cf7bd; font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: .035em; line-height: 1; }@keyframes offerPulse { 70% { box-shadow: 0 0 0 9px rgba(118,230,158,0); } 100% { box-shadow: 0 0 0 0 rgba(118,230,158,0); } }
.shop-hero { background: #031411; color: #fff; overflow: hidden; padding: 100px 0 118px; position: relative; }
.shop-hero:after { background: radial-gradient(circle, rgba(16,185,129,.25), transparent 67%); content: ""; height: 570px; position: absolute; right: -150px; top: -360px; width: 570px; }
.shop-hero .container { position: relative; z-index: 1; }
.shop-hero .eyebrow, .shop-heading .eyebrow, .checkout-dialog .eyebrow { justify-content: flex-start; }
.shop-hero h1 { font-size: clamp(3.8rem, 7.4vw, 7rem); letter-spacing: -.09em; line-height: .87; margin: 20px 0 27px; }
.shop-hero h1 em, .shop-heading h2 em { font-family: Georgia, serif; font-weight: 400; }
.shop-hero > .container > p:not(.eyebrow) { color: #bfd1c8; font-size: 1rem; max-width: 570px; }
.shop-hero-points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 33px; }
.shop-hero-points span { border: 1px solid rgba(185,247,215,.24); border-radius: 100px; color: #c8ead7; font: 500 .67rem var(--mono); padding: 8px 11px; }
.shop-products { padding: 95px 0 112px; }
.shop-heading { align-items: end; display: flex; gap: 42px; justify-content: space-between; margin-bottom: 42px; }
.shop-heading h2 { font-size: clamp(2.55rem, 4.6vw, 4.8rem); letter-spacing: -.075em; line-height: .93; margin-top: 16px; max-width: 690px; }
.shop-heading > .package-promise { background: #e8f6ed; border-left: 3px solid #078255; color: #496359; font-size: .87rem; line-height: 1.65; max-width: 355px; padding: 18px; }.package-promise > strong { color: #0a3326; display: block; font-size: 1.05rem; letter-spacing: -.035em; line-height: 1.25; margin-bottom: 8px; }.heading-offer { color: #08774d; display: block; font: 700 .68rem var(--mono); letter-spacing: .025em; line-height: 1.4; margin-top: 13px; text-transform: uppercase; }
.shop-heading .eyebrow { color: var(--teal); }
.product-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-card { background: #fff; border: 1px solid rgba(7,23,39,.1); border-radius: 15px; box-shadow: 0 16px 35px rgba(7,23,39,.07); display: flex; flex-direction: column; overflow: hidden; }
.product-card-featured { border-color: #0b805a; box-shadow: 0 18px 42px rgba(4,120,87,.16); transform: translateY(-10px); }
.product-card-test { border-style: dashed; }.product-card-test .product-image { filter: saturate(.72); }
.product-image { height: 218px; overflow: hidden; position: relative; }
.product-image:after { background: linear-gradient(180deg, transparent 40%, rgba(3,20,17,.45)); content: ""; inset: 0; position: absolute; }
.product-image img { height: 100%; object-fit: cover; width: 100%; }
.product-image span { background: #eefaf2; border-radius: 4px; color: #08774d; font: 500 .62rem var(--mono); left: 16px; padding: 7px 9px; position: absolute; text-transform: uppercase; top: 16px; z-index: 1; }
.product-content { display: flex; flex: 1; flex-direction: column; padding: 25px; }
.product-type { color: #08774d; font: 500 .64rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.product-content h3 { font-size: 2rem; letter-spacing: -.07em; line-height: 1; margin: 10px 0 12px; }
.product-description { color: var(--muted); font-size: .82rem; line-height: 1.55; }
.product-content ul { border-top: 1px solid var(--line); display: grid; gap: 9px; list-style: none; margin: 22px 0 24px; padding-top: 19px; }
.product-content li { color: #405146; font-size: .74rem; font-weight: 700; padding-left: 18px; position: relative; }
.product-content li:before { color: #078255; content: "✓"; left: 0; position: absolute; }
.domain-choice { color: #405146; display: grid; font-size: .7rem; font-weight: 800; gap: 6px; margin: -4px 0 22px; }.domain-choice select { background: #f7faf8; border: 1px solid rgba(7,23,39,.16); border-radius: 4px; color: var(--ink); font: 600 .74rem var(--sans); padding: 9px; }
.product-buy { align-items: end; display: flex; justify-content: space-between; margin-top: auto; }
.product-buy span { color: var(--muted); display: block; font: 500 .62rem var(--mono); text-transform: uppercase; }
.product-buy strong { display: block; font-size: 1.3rem; letter-spacing: -.06em; line-height: 1.1; margin-top: 4px; }
.buy-button { background: #063c2f; border: 0; border-radius: 4px; color: #fff; cursor: pointer; font: 800 .73rem var(--sans); min-width: 132px; padding: 12px 13px; }
.buy-button:hover { background: #08774d; }
.shop-note { color: var(--muted); font-size: .84rem; margin-top: 28px; text-align: center; }.shop-note a { color: #08774d; font-weight: 800; }
.checkout-dialog { border: 0; border-radius: 15px; box-shadow: 0 25px 70px rgba(0,0,0,.3); color: var(--ink); inset: 0; margin: auto; max-width: min(440px, calc(100% - 32px)); padding: 35px; position: fixed; width: 100%; }.checkout-dialog::backdrop { background: rgba(3,20,17,.68); }.checkout-dialog h2 { font-size: 2.4rem; letter-spacing: -.07em; line-height: 1; margin: 15px 0 12px; }.checkout-dialog > p:not(.eyebrow) { color: var(--muted); font-size: .86rem; }.checkout-dialog .eyebrow { color: #08774d; }.dialog-close { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 1.7rem; position: absolute; right: 17px; top: 11px; }.checkout-dialog form { display: grid; gap: 9px; margin-top: 24px; }.checkout-dialog label { font-size: .75rem; font-weight: 800; }.checkout-dialog input { border: 1px solid rgba(7,23,39,.2); border-radius: 4px; font: inherit; padding: 13px; }.checkout-dialog .button { border: 0; cursor: pointer; margin-top: 8px; }.checkout-error { color: #b42318; font-size: .75rem; min-height: 1.1em; }
@media (max-width: 860px) { .offer-bar-inner { gap: 8px; justify-content: center; min-height: 87px; }.offer-bar-inner p:first-of-type { max-width: 225px; }.offer-countdown { padding-left: 14px; }.shop-heading { align-items: start; flex-direction: column; gap: 20px; }.product-grid { grid-template-columns: 1fr; max-width: 530px; }.product-card-featured { transform: none; } }
@media (max-width: 520px) { .offer-bar { top: 82px; }.offer-bar-inner { gap: 6px; min-height: 92px; }.offer-bar-inner p:first-of-type strong { font-size: .8rem; }.offer-bar-inner p:first-of-type span { font-size: .65rem; }.offer-countdown { padding-left: 10px; }.offer-countdown strong { font-size: 1.35rem; } }
@media (max-width: 640px) { .shop-hero { padding: 67px 0 76px; }.shop-products { padding: 70px 0 78px; }.shop-hero h1 { font-size: clamp(3.25rem, 15vw, 4.3rem); }.product-content { padding: 22px; }.product-image { height: 205px; } }
