.category-page{width:100%;max-width:1400px;margin:0 auto;padding:40px 16px 80px}.category-page .grid-row{grid-template-columns:repeat(12,1fr);gap:22px;display:grid}.category-page .grid-row+.grid-row{margin-top:22px}.category-page .col-4{grid-column:span 4}.category-page .col-6{grid-column:span 6;height:100%}.category-page .col-12{grid-column:span 12}.category-page .category-grid{gap:22px;margin-top:22px}.category-page .subcategory-button{background:var(--card);border-radius:var(--radius-md);box-shadow:0 4px 20px 0 color-mix(in oklab,var(--foreground)10%,transparent);justify-content:space-between;align-items:center;height:200px;padding:2rem;text-decoration:none;transition:transform .3s,box-shadow .3s;display:flex;position:relative;overflow:hidden}.category-page .subcategory-button:hover{box-shadow:0 8px 30px 0 color-mix(in oklab,var(--foreground)16%,transparent);transform:translateY(-2px)}.category-page .subcategory-sphere{background-color:color-mix(in oklab,var(--primary)14%,var(--card));opacity:.5;pointer-events:none;z-index:0;border-radius:50%;width:400px;height:500px;position:absolute;bottom:-150px;left:-100px}.category-page .subcategory-content{z-index:2;flex-direction:column;flex:1;justify-content:center;align-items:flex-start;gap:.5rem;display:flex;position:relative}.category-page .subcategory-content h2{color:var(--foreground);text-transform:uppercase;margin:0;font-size:36px;font-weight:900;line-height:1.1}.category-page .subcategory-content p{color:var(--muted-foreground);margin:0;font-size:18px;font-weight:600;line-height:1.3}.category-page .subcategory-image-container{z-index:2;flex-shrink:0;justify-content:center;align-items:center;height:100%;padding-left:2rem;display:flex;position:relative}.category-page .subcategory-image{filter:drop-shadow(0 4px 12px color-mix(in oklab,var(--foreground)22%,transparent));object-fit:contain;max-width:150px;max-height:150px;transition:transform .3s}.category-page .subcategory-button:hover .subcategory-image{transform:scale(1.05)}.category-page .subcategory-icon{font-size:84px;line-height:1}.category-page .text-header{text-transform:uppercase;font-size:2.2rem;font-weight:800}.category-page .text-title{font-size:1.5rem;font-weight:700}.category-page .text-desc{letter-spacing:.05em;font-size:1rem;font-weight:300;line-height:2}.category-page .category-page-block{background:var(--card);border-radius:var(--radius-md);box-shadow:0 4px 20px 0 color-mix(in oklab,var(--foreground)10%,transparent);padding:3rem 2rem 2rem;position:relative}.category-page .category-page-header{text-align:center;margin-bottom:2rem}.category-page .category-page-header:last-child{margin-bottom:0}.category-page .category-page-header h1{color:var(--foreground);margin:0 0 1rem}.category-page .category-page-header p{color:var(--muted-foreground);margin:0}.category-page .package-upsell-block{background:var(--card);border-radius:var(--radius-md);box-shadow:0 4px 20px 0 color-mix(in oklab,var(--foreground)10%,transparent);text-align:center;flex-direction:column;height:100%;padding:2rem;transition:transform .3s,box-shadow .3s;display:flex;position:relative;overflow:hidden}.category-page .package-upsell-block:hover{box-shadow:0 10px 28px 0 color-mix(in oklab,var(--foreground)16%,transparent);transform:translateY(-4px)}.category-page .package-badges{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;margin-bottom:.75rem;display:flex}.category-page .package-badge{border-radius:999px;padding:5px 10px;font-size:.7rem;font-weight:700;line-height:1}.category-page .package-badge.is-stock{background:color-mix(in oklab,var(--foreground)8%,transparent);color:var(--muted-foreground)}.category-page .package-badge.is-stock[data-out]{background:color-mix(in oklab,var(--destructive)14%,transparent);color:var(--destructive)}.category-page .package-img-block{z-index:2;flex-shrink:0;justify-content:center;align-items:center;width:220px;height:220px;margin:0 auto 1rem;padding:.5rem;display:flex;position:relative}.category-page .package-img-button{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:100%;height:100%;padding:0;display:flex}.category-page .package-img-block img{object-fit:contain;max-width:100%;max-height:100%}.category-page .package-img-fallback{color:color-mix(in oklab,var(--muted-foreground)45%,transparent);width:96px;height:96px}.category-page .package-name{color:var(--foreground);margin-bottom:.5rem;font-weight:700}.category-page .package-name button{color:inherit;cursor:pointer;font:inherit;background:0 0;border:none;padding:0;text-decoration:none}.category-page .package-name button:hover{color:var(--primary)}.category-page .package-purchase{flex-direction:column;margin-top:auto;display:flex}.category-page .tier-rail{background:color-mix(in oklab,var(--foreground)7%,var(--card));border:1px solid color-mix(in oklab,var(--foreground)8%,transparent);grid-template-columns:repeat(var(--tier-count),1fr);opacity:.94;border-radius:999px;gap:0;margin-bottom:1rem;padding:4px;transition:transform .35s cubic-bezier(.34,1.4,.64,1),opacity .35s;display:grid;position:relative;transform:translateY(5px)}.category-page .package-upsell-block:hover .tier-rail,.category-page .tier-rail:focus-within{opacity:1;transform:translateY(0)}.category-page .tier-rail-indicator{background:var(--primary);box-shadow:0 4px 12px 0 color-mix(in oklab,var(--primary)40%,transparent);transform:translateX(calc(var(--tier-index)*100%));width:calc((100% - 8px)/var(--tier-count));border-radius:999px;transition:transform .35s cubic-bezier(.34,1.4,.64,1);position:absolute;top:4px;bottom:4px;left:4px}.category-page .tier-option{color:var(--muted-foreground);cursor:pointer;z-index:1;background:0 0;border:none;border-radius:999px;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-height:46px;padding:.4rem .25rem;line-height:1.1;transition:color .25s;display:flex;position:relative}.category-page .tier-option:disabled{cursor:not-allowed;opacity:.4}.category-page .tier-option[data-active=true]{color:var(--primary-foreground)}.category-page .tier-option-top{align-items:center;gap:.2rem;font-size:1rem;font-weight:800;display:flex}.category-page .tier-option:not([data-active=true]):hover{color:var(--foreground)}.category-page .tier-option-flame{width:.85rem;height:.85rem}.category-page .tier-option-badge{background:color-mix(in oklab,var(--primary)16%,transparent);color:var(--primary);border-radius:999px;padding:2px 6px;font-size:.625rem;font-weight:700;line-height:1;transition:background-color .25s,color .25s}.category-page .tier-option[data-active=true] .tier-option-badge{background:color-mix(in oklab,var(--primary-foreground)24%,transparent);color:var(--primary-foreground)}.category-page .tier-add-form{flex:1}.category-page .tier-add-button{justify-content:center;width:100%;font-weight:700}.category-page .upsell-package-price-row{justify-content:center;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.category-page .package-price{color:var(--muted-foreground);font-size:1.5rem;font-weight:700}.category-page .package-price-old{color:var(--destructive);font-size:1.2rem;font-weight:600;text-decoration:line-through}.category-page .package-stock{color:var(--muted-foreground);margin:-.5rem 0 1rem;font-size:.8rem}.category-page .package-stock.is-out{color:var(--destructive)}.category-page .upsell-buttons{justify-content:center;gap:10px;margin-top:15px;display:flex}.category-page .primary-button,.category-page .secondary-button{background:var(--primary);border-radius:var(--radius-md);color:var(--primary-foreground);cursor:pointer;border:none;align-items:center;gap:.75rem;padding:.75rem 1.5rem;text-decoration:none;transition:background-color .3s,transform .2s;display:flex}.category-page .primary-button:hover,.category-page .secondary-button:hover{background:color-mix(in oklab,var(--primary)88%,white);transform:translateY(-1px)}.category-page .primary-button svg,.category-page .secondary-button svg{width:1.2rem;height:1.2rem}.category-page .primary-button.disabled,.category-page .secondary-button.disabled,.category-page .primary-button:disabled,.category-page .secondary-button:disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.category-page .category-toolbar{margin-bottom:22px}.category-page .category-result-count{color:var(--muted-foreground);text-align:center;margin:0 0 1rem;font-size:.875rem}.category-page .category-header-skeleton{width:min(320px,70%);height:2.2rem;margin:.55rem auto 1.55rem}.category-page .package-skeleton-image{width:100%;height:100%}.category-page .package-skeleton-name{width:70%;height:1.5rem;margin:.375rem auto}.category-page .package-skeleton-rail{border-radius:999px;height:56px;margin-bottom:1rem}.category-page .package-skeleton-price{width:45%;height:1.5rem;margin:.375rem 0}.category-page .package-skeleton-icon-button{width:67px;height:43px}.category-page .package-skeleton-add-button{flex:1;height:43px}@media (max-width:768px){.category-page .col-4,.category-page .col-6{grid-column:span 12}.category-page .subcategory-button{height:180px;padding:1.5rem}.category-page .subcategory-sphere{width:350px;height:300px;bottom:-120px;left:-150px}.category-page .subcategory-content h2{font-size:28px}.category-page .subcategory-content p{font-size:14px}.category-page .subcategory-image-container{padding-left:1rem}.category-page .subcategory-image{max-width:100px;max-height:100px}.category-page .subcategory-icon{font-size:56px}.category-page .category-page-block{padding:2.5rem 1.5rem 1.5rem}.category-page .category-page-header h1{font-size:1.3rem}.category-page .category-header-skeleton{height:1.3rem;margin:.325rem auto 1.325rem}.category-page .category-page-header p{font-size:.9rem}.category-page .package-upsell-block{padding:1.5rem}.category-page .package-img-block img{max-width:170px;max-height:170px}.category-page .package-price{font-size:1.3rem}.category-page .package-skeleton-price{height:1.3rem;margin:.325rem 0}.category-page .package-price-old{font-size:1rem}.category-page .tier-rail{opacity:1;transform:none}.category-page .tier-option-top{font-size:.9rem}}@media (prefers-reduced-motion:reduce){.category-page .tier-rail,.category-page .tier-rail-indicator{transition:none}.category-page .tier-rail{opacity:1;transform:none}}
