/*
 * Theme17 — Custom overrides
 * Most styling handled by Tailwind CSS + CSS custom properties.
 * This file is for theme-specific overrides and transitions.
 */

/* ═══════════════════════════════════════════════
   BASE TYPOGRAPHY — theme17 identity
   Font: Manrope (300/400/500/600/700/800)
   ═══════════════════════════════════════════════ */
html {
    font-size: 16px;
}

body, * {
    font-family: var(--t17-font-family, 'Manrope', Helvetica, Arial, sans-serif);
}

h1 { font-weight: 500; line-height: 1.5; }
h2 { font-weight: 500; line-height: 1.5; }
h3 { font-weight: 500; line-height: 1.5; }
h4 { font-weight: 500; line-height: 1.5; }

label  { font-weight: 500; line-height: 1.5; }
button { font-weight: 500; line-height: 1.5; }
input  { font-weight: 400; line-height: 1.5; }

/* ═══════════════════════════════════════════════
   BOOTSTRAP COMPAT — hide modal markup
   (success_popup.blade.php uses .modal class)
   ═══════════════════════════════════════════════ */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
}
.modal.show {
    display: flex;
}
.modal-dialog {
    background: #fff;
    border-radius: 14px;
    max-width: 420px;
    width: 90%;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    font-family: inherit;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e8e8e8;
}
.modal-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--t17-primary, #06205c);
}
.modal-header .close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #999;
    line-height: 1;
}
.modal-body {
    padding: 20px;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px;
    border-top: 1px solid #e8e8e8;
    gap: 8px;
}
.modal-footer .btn {
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: opacity 0.15s;
}
.modal-footer .btn-secondary {
    background: var(--t17-primary, #06205c);
    color: #fff;
}
.modal-footer .btn-secondary:hover {
    opacity: 0.85;
}

/* Smooth page transitions */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Category card hover image scale */
.group:hover img {
    transform: scale(1.05);
}

/* Transition duration helper (Tailwind v3 CDN doesn't include all utilities) */
.duration-400 {
    transition-duration: 400ms;
}

/* ═══════════════════════════════════════════════
   FOOTER — Accreditation logos grid responsive
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .t17-accred-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}
@media (max-width: 480px) {
    .t17-accred-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════
   CATEGORY PAGE — Product Grid & Cards
   ═══════════════════════════════════════════════ */

/* Product grid responsive fallback (Tailwind handles primary layout) */
.products-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
}
@media (min-width: 640px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (min-width: 768px) {
    .products-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (min-width: 1024px) {
    .products-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

/* Product card — active color thumb highlight */
.t17-color-thumb:hover {
    border-color: #06205c !important;
}
.t17-color-thumb:hover img {
    opacity: 1 !important;
}

/* ═══════════════════════════════════════════════
   PRODUCT CARD — link overlay & hover
   ═══════════════════════════════════════════════ */
/* The product name is the card's only anchor; this overlay extends its hit
   area over the whole card. The colour strip must stay out of the anchor —
   its clicks swap the image instead of navigating — so it is raised above
   the overlay rather than excluded from it. */
.t17-product-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.t17-product-card .t17-thumb-strip {
    position: relative;
    z-index: 2;
}
.t17-product-card:hover .t17-product-media {
    background: #fff;
}
.t17-product-card:hover .t17-product-main-img {
    mix-blend-mode: normal;
}

/* ═══════════════════════════════════════════════
   PRODUCT RAIL — horizontally paged card strip
   ═══════════════════════════════════════════════ */
/* Native scrolling rather than a carousel library: each card already owns a
   Swiper for its colour strip, and nesting the two makes horizontal drags
   ambiguous. The arrows page the rail; touch devices keep their own gesture. */
.t17-rail {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.t17-rail::-webkit-scrollbar {
    display: none;
}
/* Item widths mirror the grid columns of the other home product block, so a
   full rail page lines up with the same card size elsewhere on the page. */
.t17-rail-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 100%;
}
@media (min-width: 640px) {
    .t17-rail-item { width: calc((100% - 20px) / 2); }
}
@media (min-width: 768px) {
    .t17-rail-item { width: calc((100% - 40px) / 3); }
}
@media (min-width: 1024px) {
    .t17-rail-item { width: calc((100% - 60px) / 4); }
}
@media (min-width: 1680px) {
    .t17-rail-item { width: calc((100% - 80px) / 5); }
}
/* Text panels hold fewer, wider columns than the product cards — prose needs the
   line length — and drop to a single full-width card once two no longer fit.
   Raised specificity so these hold against the column widths above. Widths are a
   percentage of the rail, never vw: vw counts the scrollbar and would push the
   card past the rail's right edge. */
.t17-rail-item.t17-rail-item--text {
    width: 100%;
}
@media (min-width: 640px) {
    .t17-rail-item.t17-rail-item--text { width: calc((100% - 20px) / 2); }
}
@media (min-width: 1024px) {
    .t17-rail-item.t17-rail-item--text { width: calc((100% - 40px) / 3); }
}
@media (min-width: 1680px) {
    .t17-rail-item.t17-rail-item--text { width: calc((100% - 60px) / 4); }
}

.t17-rail-nav-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.t17-rail-nav-group[hidden] {
    display: none;
}
/* Below sm the rail is scrolled by touch, and the arrows would squeeze a long
   heading into a narrow column beside them. */
@media (max-width: 639px) {
    .t17-rail-nav-group { display: none; }
}

.t17-rail-nav {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--t17-primary, #06205c);
    background: #fff;
    color: var(--t17-primary, #06205c);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .18s, color .18s, opacity .18s;
    flex-shrink: 0;
}
.t17-rail-nav:hover:not(:disabled) {
    background: var(--t17-primary, #06205c);
    color: #fff;
}
.t17-rail-nav:disabled {
    opacity: .3;
    cursor: default;
}

/* ═══════════════════════════════════════════════
   WISHLIST PAGE — Grid responsive
   ═══════════════════════════════════════════════ */
.t17-wishlist-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
}
@media (min-width: 640px) {
    .t17-wishlist-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
@media (min-width: 768px) {
    .t17-wishlist-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; }
}
@media (min-width: 1024px) {
    .t17-wishlist-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; }
}
/* Mirrors the Tailwind `wide` breakpoint (1680px) used by the other product grids. */
@media (min-width: 1680px) {
    .t17-wishlist-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 20px !important; }
}

/* Filter colour circle hover */
.t17-filter-color:hover {
    transform: scale(1.1);
}

/* ═══════════════════════════════════════════════
   PRESET PACKS PAGE — Card hover & Quick Add
   ═══════════════════════════════════════════════ */
.t17-pack-card:hover .t17-quick-add-btn {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
.t17-quick-add-btn:hover {
    filter: brightness(0.95);
}
.t17-pagination-arrow:not(:disabled):hover {
    border-color: #06205c !important;
}
.t17-page-btn:hover {
    border-color: #06205c !important;
}

/* ═══════════════════════════════════════════════
   CATEGORY PAGE — Subcategory horizontal scroll
   ═══════════════════════════════════════════════ */
.t17-subcat-strip::-webkit-scrollbar {
    display: none;
}
.t17-subcat-strip {
    scrollbar-width: none;
}

/* ═══════════════════════════════════════════════
   FIND BY COLOUR — colour tiles
   ═══════════════════════════════════════════════ */
/* auto-fit keeps the tiles on one row on wide screens and wraps them evenly
   below, so the row never leaves a short orphan line of one or two cards. */
.t17-colour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 16px 12px;
}

.t17-colour-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.t17-colour-card__tile {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    border: 2px solid transparent;
    background: var(--t17-bg-secondary, #f4f6f9);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color .18s, background-color .18s;
}

.t17-colour-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

/* Shown for colour groups with no catalogue photo to illustrate them. */
.t17-colour-card__swatch {
    width: 52%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.t17-colour-card__check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--t17-brand-secondary, #fcb600);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .18s, transform .18s;
}

.t17-colour-card__label {
    color: var(--t17-text, #06205c);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .18s;
}

.t17-colour-card:hover .t17-colour-card__tile,
.t17-colour-card:focus-visible .t17-colour-card__tile {
    border-color: var(--t17-brand-secondary, #fcb600);
    background: #fff;
    /* Tint of the brand colour; the plain white above stays as the fallback
       for browsers without color-mix(). */
    background: color-mix(in srgb, var(--t17-brand-secondary, #fcb600) 10%, #fff);
}

.t17-colour-card:hover .t17-colour-card__check,
.t17-colour-card:focus-visible .t17-colour-card__check {
    opacity: 1;
    transform: scale(1);
}

.t17-colour-card:hover .t17-colour-card__label,
.t17-colour-card:focus-visible .t17-colour-card__label {
    color: var(--t17-brand-secondary, #fcb600);
}

@media (max-width: 639px) {
    .t17-colour-grid {
        grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
        gap: 14px 10px;
    }
    .t17-colour-card__label { font-size: 12px; }
}