/**
 * OrtaTools Theme – Custom CSS
 * Supplements Tailwind with custom overrides and Amazon-style utilities.
 */

/* ===================== Scrollbar ===================== */
.scrollbar-none { scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

/* ===================== X-CLOAK ===================== */
[x-cloak] { display: none !important; }

/* ===================== Amazon-style card shadow ===================== */
.shadow-amz-card { box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08); }

/* ===================== Line clamp ===================== */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 3; }

/* ===================== Product Grid ===================== */
.orta-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
@media (max-width: 640px) {
    .orta-product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ===================== Swiper ===================== */
.swiper-pagination-bullet { background: #232F3E; opacity: .4; }
.swiper-pagination-bullet-active { background: #FF9900 !important; opacity: 1 !important; }
.swiper-button-next, .swiper-button-prev { color: #131921 !important; }

/* ===================== Select2 overrides ===================== */
.select2-container--default .select2-selection--single {
    border-color: #d1d5db;
    border-radius: 4px;
    height: 38px;
    padding: 4px 8px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.select2-container--default .select2-results__option--highlighted { background-color: #FF9900 !important; }

/* ===================== Sticky buy box ===================== */
.orta-sticky-panel { position: sticky; top: 70px; }

/* ===================== Transitions ===================== */
.transition-fast { transition: all 0.15s ease; }

/* ===================== Back-to-top ===================== */
#orta-back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    background: #232F3E;
    color: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    transition: background .2s, opacity .3s;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
}
#orta-back-to-top:hover { background: #FF9900; }
#orta-back-to-top.visible { opacity: 1; pointer-events: auto; }

/* ===================== Mobile bottom padding (buy bar) ===================== */
@media (max-width: 1023px) {
    .orta-has-mobile-bar { padding-bottom: 80px; }
}

/* ===================== Prose overrides (product description) ===================== */
.prose h2, .prose h3 { color: #131921; font-weight: 700; }
.prose a { color: #007185; }
.prose a:hover { text-decoration: underline; }
.prose table { border-collapse: collapse; width: 100%; font-size: .875rem; }
.prose table th { background: #f3f4f6; padding: 8px 12px; font-weight: 600; text-align: left; }
.prose table td { padding: 7px 12px; border-bottom: 1px solid #f3f4f6; }

/* ===================== Alpine transitions ===================== */
.slide-fade-enter-active, .slide-fade-leave-active { transition: all 0.25s ease; }
.slide-fade-enter-from, .slide-fade-leave-to { transform: translateX(100%); opacity: 0; }

/* ===================== Filter panel ===================== */
.orta-filter-active { background: #FF9900; color: #fff; border-color: #FF9900; }