:root { --catalog-blue:#04a8ee; --catalog-green:#42f58a; --catalog-line:rgba(125,223,255,.3); }
* { box-sizing:border-box; }
body { margin:0; color:#fff; background:#02070b; font-family:Arial, Helvetica, sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.wrap { width:min(1120px, calc(100% - 36px)); margin:0 auto; }
header { position:sticky; top:0; z-index:20; background:rgba(2,7,11,.86); border-bottom:1px solid rgba(255,255,255,.12); backdrop-filter:blur(14px); }
.nav { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand { font-weight:900; }
.back { padding:11px 15px; border:1px solid var(--catalog-line); border-radius:8px; background:rgba(255,255,255,.06); }
.hero { padding:72px 0 40px; background:radial-gradient(circle at 78% 15%, rgba(4,168,238,.22), transparent 32%), #02070b; }
.brand-kicker { margin:0 0 8px; color:#7ddfff; font-size:.8rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
h1 { margin:0 0 12px; font-size:clamp(2.6rem, 7vw, 5.8rem); line-height:.95; }
.lead { max-width:780px; margin:0; color:rgba(255,255,255,.76); font-size:1.08rem; }
.catalog { padding:42px 0 80px; display:grid; gap:30px; }
.product { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start; padding-bottom:46px; }
.product:not(:last-child)::after { content:""; position:absolute; right:0; bottom:0; left:0; height:2px; background:linear-gradient(90deg,transparent 0%,#087cbc 18%,#f4fdff 49%,#087cbc 80%,transparent 100%); background-size:220% 100%; box-shadow:0 0 16px rgba(125,223,255,.46); animation:catalog-divider 6s ease-in-out infinite alternate; }
.product.image-free-product { grid-template-columns:minmax(0, 760px); justify-content:center; }
.gallery { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
.gallery .photo:first-child { grid-column:1 / -1; }
.gallery.product-slideshow { grid-template-columns:1fr; }
.gallery.product-slideshow .photo { grid-column:1 / -1; min-height:clamp(260px, 44vw, 520px); }
.gallery.product-slideshow .photo:not(.is-active) { display:none; }
.photo, .placeholder { overflow:hidden; min-height:180px; border:1px solid var(--catalog-line); border-radius:8px; background:radial-gradient(circle at 18% 20%, rgba(125,223,255,.18), transparent 28%), #07131b; cursor:zoom-in; }
.photo { position:relative; }
.photo img { width:100%; height:100%; min-height:180px; max-height:530px; object-fit:contain; transition:transform .22s ease, filter .22s ease; }
.photo:hover img { transform:scale(1.025); filter:drop-shadow(0 0 16px rgba(125,223,255,.32)); }
.gallery-count { position:absolute; right:12px; bottom:12px; z-index:2; display:inline-flex; align-items:center; min-height:30px; padding:7px 10px; border:1px solid rgba(255,255,255,.42); border-radius:999px; color:#f4fcff; background:rgba(2,7,11,.78); box-shadow:0 0 18px rgba(4,168,238,.3); font-size:.78rem; font-weight:900; backdrop-filter:blur(10px); pointer-events:none; }
.placeholder { display:grid; place-items:center; padding:28px; color:rgba(255,255,255,.6); text-align:center; cursor:default; }
.panel { position:sticky; top:96px; border:1px solid var(--catalog-line); border-radius:8px; padding:28px; background:linear-gradient(145deg, rgba(255,255,255,.1), rgba(4,168,238,.06), rgba(0,0,0,.34)); box-shadow:0 20px 52px rgba(0,0,0,.34); }
h2 { margin:0 0 10px; font-size:clamp(1.8rem, 4vw, 3.1rem); line-height:1.06; }
.fade-title, .reelcraft-title, .green-title, .price, .shiny-link, .sharp-gpm, .sharp-title { position:relative; display:inline-block; isolation:isolate; background:none; }
.fade-title { color:#f7fdff; text-shadow:0 0 1px rgba(255,255,255,.92),0 0 14px rgba(120,223,255,.34),0 0 24px rgba(4,168,238,.24); }
.reelcraft-title { color:#fff; text-shadow:0 0 1px rgba(255,255,255,.92),0 0 12px rgba(255,62,71,.34),0 0 22px rgba(216,21,30,.26); }
.green-title { color:#dcffeb; text-shadow:0 0 1px rgba(255,255,255,.9),0 0 12px rgba(66,245,138,.36),0 0 22px rgba(66,245,138,.22); }
.sharp-title { color:#d8ffe7; text-shadow:0 0 1px rgba(255,255,255,.9),0 0 12px rgba(66,245,138,.36),0 0 22px rgba(66,245,138,.22); transition:color .22s ease, text-shadow .22s ease; }
.price { margin:2px 0 14px; color:#d9fff0; background:linear-gradient(90deg,#ffffff 0%,#dbffeb 22%,#42f58a 45%,#ffffff 68%,#94ffbd 86%,#ffffff 100%); background-size:240% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-size:clamp(1.4rem,3vw,2rem); font-weight:950; text-shadow:0 0 12px rgba(66,245,138,.38),0 0 18px rgba(255,255,255,.18); filter:drop-shadow(0 0 12px rgba(66,245,138,.22)); animation:catalog-title 7s ease-in-out infinite alternate; }
.fade-title::after, .reelcraft-title::after, .green-title::after, .price::after, .shiny-link::after, .sharp-gpm::after, .sharp-title::after { content:attr(data-shine); position:absolute; inset:0; z-index:1; color:transparent; background-size:260% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; pointer-events:none; text-shadow:none; filter:drop-shadow(0 0 10px rgba(4,168,238,.22)); opacity:.92; animation:catalog-title 8s ease-in-out infinite alternate; }
.fade-title::after { background-image:linear-gradient(90deg,#fff 0%,#ccefff 20%,#36bbf5 42%,#fff 60%,#78dfff 82%,#fff 100%); }
.reelcraft-title::after { background-image:linear-gradient(90deg,#fff 0%,#ffd4d4 20%,#d8151e 44%,#fff 62%,#ff3e47 84%,#fff 100%); filter:drop-shadow(0 0 10px rgba(216,21,30,.28)); }
.green-title::after { background-image:linear-gradient(90deg,#fff 0%,#dcffeb 20%,#42f58a 42%,#fff 60%,#8fffc0 82%,#fff 100%); filter:drop-shadow(0 0 10px rgba(66,245,138,.26)); }
.sharp-title::after { background-image:linear-gradient(90deg,#fff,#d8ffe7 25%,#2cff7d 50%,#fff 76%,#0c9f4f); filter:drop-shadow(0 0 10px rgba(66,245,138,.26)); }
.price::after { content:none; }
.panel p { color:rgba(255,255,255,.76); }
.specs { display:grid; gap:10px; margin:20px 0; }
.spec { padding:11px 13px; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:rgba(0,0,0,.22); color:rgba(255,255,255,.82); }
.shiny-link { color:#d9f7ff; font-weight:950; text-decoration:underline; text-decoration-color:rgba(156,234,255,.72); text-underline-offset:3px; text-shadow:0 0 10px rgba(4,168,238,.34); }
.shiny-link::after { background-image:linear-gradient(90deg,#fff 0%,#ccefff 20%,#36bbf5 42%,#fff 60%,#78dfff 82%,#fff 100%); }
.shiny-link:hover { text-decoration-color:#fff; filter:drop-shadow(0 0 14px rgba(125,223,255,.46)); }
.variant-row { display:grid; gap:8px; margin:18px 0; }
.variant-row label { color:#bfeeff; font-size:.86rem; font-weight:800; }
.product-select { width:100%; min-height:46px; padding:10px 13px; border:1px solid rgba(125,223,255,.52); border-radius:8px; color:#fff; background:#02070b; font:inherit; font-weight:800; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.product-select:hover, .product-select:focus { outline:0; border-color:#e3f8ff; background:#02070b; box-shadow:0 0 24px rgba(4,168,238,.26); }
.product-select option { color:#fff; background:#02070b; }
.product-select option:hover, .product-select option:checked { color:#fff; background:#0876aa; }
.sharp-shooter-select[data-tone="purple"] { border-color:rgba(234,78,255,.86); background:linear-gradient(110deg,#16021f,#9b17c7 52%,#ffd7ff); box-shadow:0 0 26px rgba(205,55,255,.34); }
.sharp-shooter-select[data-tone="green"] { border-color:rgba(75,255,151,.86); background:linear-gradient(110deg,#02170d,#0d7d3d 52%,#caffdf); box-shadow:0 0 26px rgba(75,255,151,.32); }
.sharp-shooter-select[data-tone="blue"] { border-color:rgba(59,180,255,.9); background:linear-gradient(110deg,#031326,#075fae 52%,#d3efff); box-shadow:0 0 26px rgba(59,180,255,.36); }
.sharp-shooter-select[data-tone="red"] { border-color:rgba(255,75,75,.9); background:linear-gradient(110deg,#230405,#a70c16 52%,#ffd5d5); box-shadow:0 0 26px rgba(255,75,75,.34); }
.sharp-shooter-select option[data-tone="purple"] { background:#02070b; color:#f4baff; }
.sharp-shooter-select option[data-tone="green"] { background:#02070b; color:#baffd3; }
.sharp-shooter-select option[data-tone="blue"] { background:#02070b; color:#bfeeff; }
.sharp-shooter-select option[data-tone="red"] { background:#02070b; color:#ffc7c7; }
.sharp-shooter-select option:hover, .sharp-shooter-select option:checked { background:#0876aa; color:#fff; }
.sharp-gpm { color:#fff; font-weight:950; text-shadow:0 0 10px currentColor; }
.sharp-gpm.purple { color:#f4c6ff; }
.sharp-gpm.green { color:#d8ffe7; }
.sharp-gpm.blue { color:#d9f5ff; }
.sharp-gpm.red { color:#ffd5d5; }
.sharp-gpm.purple::after { background-image:linear-gradient(90deg,#fff,#f4c6ff 25%,#d236ff 50%,#fff 76%,#a20ed0); }
.sharp-gpm.green::after { background-image:linear-gradient(90deg,#fff,#d8ffe7 25%,#2cff7d 50%,#fff 76%,#0c9f4f); }
.sharp-gpm.blue::after { background-image:linear-gradient(90deg,#fff,#d9f5ff 25%,#2eb9ff 50%,#fff 76%,#0872d7); }
.sharp-gpm.red::after { background-image:linear-gradient(90deg,#fff,#ffd5d5 25%,#ff3838 50%,#fff 76%,#c40613); }
.sharp-title[data-tone="purple"] { color:#f4c6ff; text-shadow:0 0 1px rgba(255,255,255,.9),0 0 14px rgba(210,54,255,.34),0 0 24px rgba(162,14,208,.24); }
.sharp-title[data-tone="green"] { color:#d8ffe7; text-shadow:0 0 1px rgba(255,255,255,.9),0 0 14px rgba(44,255,125,.34),0 0 24px rgba(12,159,79,.24); }
.sharp-title[data-tone="blue"] { color:#d9f5ff; text-shadow:0 0 1px rgba(255,255,255,.9),0 0 14px rgba(46,185,255,.34),0 0 24px rgba(8,114,215,.24); }
.sharp-title[data-tone="red"] { color:#ffd5d5; text-shadow:0 0 1px rgba(255,255,255,.9),0 0 14px rgba(255,56,56,.34),0 0 24px rgba(196,6,19,.24); }
.sharp-title[data-tone="purple"]::after { background-image:linear-gradient(90deg,#fff,#f4c6ff 25%,#d236ff 50%,#fff 76%,#a20ed0); }
.sharp-title[data-tone="green"]::after { background-image:linear-gradient(90deg,#fff,#d8ffe7 25%,#2cff7d 50%,#fff 76%,#0c9f4f); }
.sharp-title[data-tone="blue"]::after { background-image:linear-gradient(90deg,#fff,#d9f5ff 25%,#2eb9ff 50%,#fff 76%,#0872d7); }
.sharp-title[data-tone="red"]::after { background-image:linear-gradient(90deg,#fff,#ffd5d5 25%,#ff3838 50%,#fff 76%,#c40613); }
.actions { display:flex; flex-wrap:wrap; gap:10px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:12px 17px; border:0; border-radius:8px; color:#061018; background:#fff; font:900 1rem Arial, sans-serif; cursor:pointer; }
.button.alt { border:1px solid var(--catalog-line); color:#fff; background:rgba(255,255,255,.07); }
.add-cart-button { border:1px solid rgba(128,230,170,.72); color:#dffff0; background:rgba(9,62,39,.76); }
.add-cart-button:hover { color:#061b0e; background:linear-gradient(110deg,#fff,#7dffab 52%,#d7ffe7); }
.cart-toast { position:fixed; z-index:120; pointer-events:none; padding:6px 10px; border:1px solid rgba(141,255,181,.72); border-radius:999px; color:#beffd3; background:rgba(2,22,12,.94); box-shadow:0 0 22px rgba(82,255,145,.36); font:800 .78rem/1 Arial,sans-serif; white-space:nowrap; transform:translate(-50%,-100%); animation:ampw-cart-toast 1.15s cubic-bezier(.2,.78,.25,1) forwards; }
.image-lightbox { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px; background:rgba(0,0,0,.52); opacity:0; pointer-events:none; backdrop-filter:blur(0); transition:opacity .35s ease, backdrop-filter .35s ease; }
.image-lightbox.is-open { opacity:1; pointer-events:auto; backdrop-filter:blur(10px); }
.lightbox-frame { position:relative; width:min(92vw,980px); max-height:88vh; padding:4px; border-radius:8px; background:linear-gradient(120deg,#fff,#7ddfff,#fff,#04a8ee); background-size:240% 240%; box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 46px rgba(4,168,238,.3); animation:catalog-title 8s ease-in-out infinite alternate; }
.lightbox-frame img { width:100%; max-height:86vh; object-fit:contain; border-radius:6px; background:#02070b; }
.lightbox-nav { position:absolute; z-index:2; top:50%; width:48px; height:62px; border:1px solid rgba(255,255,255,.45); border-radius:8px; transform:translateY(-50%); color:#061018; background:linear-gradient(135deg,#fff,#7ddfff); font-size:2.2rem; cursor:pointer; }
.image-lightbox:not(.has-multiple-images) .lightbox-nav { display:none; }
.lightbox-prev { left:max(14px, calc((100vw - min(92vw,980px))/2 - 66px)); }.lightbox-next { right:max(14px, calc((100vw - min(92vw,980px))/2 - 66px)); }
footer { padding:30px 0; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.62); }
@keyframes catalog-title { from { background-position:0% 50%; } to { background-position:100% 50%; } }
@keyframes catalog-soft-glow { from { opacity:.94; } to { opacity:1; } }
@keyframes catalog-divider { from { background-position:0% 50%; opacity:.58; } to { background-position:100% 50%; opacity:1; } }
@keyframes ampw-cart-toast { 0% { opacity:0; transform:translate(-50%,-62%) scale(.86); } 18% { opacity:1; transform:translate(-50%,-112%) scale(1); } 72% { opacity:1; transform:translate(-50%,-168%) scale(1); } 100% { opacity:0; transform:translate(-50%,-235%) scale(.96); } }
@media (max-width:900px) { .product { grid-template-columns:1fr; }.panel { position:static; } }
@media (max-width:700px) { .wrap { width:min(100% - 28px,1120px); }.nav { min-height:auto; padding:14px 0; align-items:stretch; flex-direction:column; }.back,.button { width:100%; }.hero { padding:44px 0 28px; } h1 { font-size:clamp(2rem,12vw,3.4rem); }.gallery { grid-template-columns:1fr; }.gallery .photo:first-child { grid-column:auto; }.photo img { max-height:58vh; }.panel { padding:22px; }.actions { display:grid; grid-template-columns:1fr; }.lightbox-nav { width:42px; height:54px; }.lightbox-prev { left:10px; }.lightbox-next { right:10px; } }