/* ------------------------------------------------------------------ */
/* Thimze Packages — Frontend styles                                    */
/* ------------------------------------------------------------------ */

/* Slider wrapper */
.thimze-packages-wrap {
    position: relative;
    overflow: hidden;
    margin: 0 0 40px;
}

.thimze-packages {
    display: flex;
    flex-direction: row;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
}
.thimze-packages::-webkit-scrollbar { display: none; }

/* Grid mode — used when [thimze_packages layout="grid"] is rendered
   (e.g. inline on the shop archive). Plain responsive grid, no
   horizontal scroll, no carousel arrows. */
.thimze-packages-wrap--grid {
    overflow: visible;
}
.thimze-packages-wrap--grid .thimze-packages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
    padding-bottom: 0;
}
.thimze-packages-wrap--grid .thimze-package-card {
    flex: unset;
    min-width: 0;
    max-width: none;
    width: 100%;
}

@media (max-width: 600px) {
    .thimze-packages-wrap--grid .thimze-packages {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .thimze-packages-wrap--grid .thimze-package-card {
        padding: 10px;
    }
    .thimze-packages-wrap--grid .thimze-package-card__badge {
        font-size: 10px;
        padding: 2px 7px;
        margin-bottom: 6px;
    }
    .thimze-packages-wrap--grid .thimze-package-card__name {
        font-size: 13px;
        margin-bottom: 2px;
    }
    .thimze-packages-wrap--grid .thimze-package-card__desc {
        display: none;
    }
    .thimze-packages-wrap--grid .thimze-package-card__items,
    .thimze-packages-wrap--grid .thimze-package-card__included-label {
        display: block;
    }
    .thimze-packages-wrap--grid .thimze-package-card__price {
        font-size: 14px;
        margin-bottom: 6px;
    }
    .thimze-packages-wrap--grid .thimze-pkg-item-dots,
    .thimze-packages-wrap--grid .thimze-pkg-item-price,
    .thimze-packages-wrap--grid .thimze-pkg-value-total {
        display: none;
    }
    .thimze-packages-wrap--grid .thimze-pkg-bundle-row__price {
        font-size: 15px;
    }
    .thimze-packages-wrap--grid .thimze-pkg-social-proof {
        margin-bottom: 6px;
    }
    .thimze-packages-wrap--grid .thimze-pkg-social-proof__text {
        display: none;
    }
    .thimze-packages-wrap--grid .thimze-package-card__actions {
        gap: 6px;
        padding-top: 0;
    }
    .thimze-packages-wrap--grid .thimze-package-card__btn,
    .thimze-packages-wrap--grid .thimze-package-card__link {
        padding: 8px;
        font-size: 12px;
        min-height: auto;
    }
}

/* Card — fixed width so they sit in a row */
.thimze-package-card {
    border: 1.5px solid #e5e5e5;
    border-radius: 12px;
    padding: 22px;
    background: #fff;
    display: flex;
    flex-direction: column;
    flex: 0 0 420px;
    min-width: 420px;
    max-width: 420px;
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.thimze-package-card:hover {
    border-color: #27c2eb;
    box-shadow: 0 4px 20px rgba(39,194,235,.12);
}
.thimze-package-card.is-added {
    border-color: #27c2eb;
}

/* Slider nav arrows */
.thimze-pkg-prev,
.thimze-pkg-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #e5e5e5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #000;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: background .15s, border-color .15s, color .15s;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.thimze-pkg-prev { left: 0; }
.thimze-pkg-next { right: 0; }
.thimze-pkg-prev:hover,
.thimze-pkg-next:hover { background: #27c2eb; border-color: #27c2eb; color: #fff; }
.thimze-pkg-prev.hidden,
.thimze-pkg-next.hidden { display: none; }

/* Fade edges when scrollable */
.thimze-packages-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 8px;
    width: 48px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.9));
    pointer-events: none;
}
.thimze-packages-wrap.at-end::after { display: none; }

/* Badge */
.thimze-package-card__badge {
    display: inline-block;
    background: #e6f9fd;
    color: #0e8faf;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    padding: 3px 9px;
    margin-bottom: 10px;
    align-self: flex-start;
    letter-spacing: .02em;
}

/* Name */
.thimze-package-card__name {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.25;
    color: #111;
}

/* Description */
.thimze-package-card__desc {
    font-size: 13px;
    color: #666;
    margin: 0 0 14px;
    line-height: 1.5;
}

/* Items list */
.thimze-package-card__items {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    flex: 1;
}
.thimze-package-card__items li {
    font-size: 13px;
    color: #444;
    padding: 5px 0;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    align-items: center;
    gap: 7px;
    line-height: 1.4;
}
.thimze-package-card__items li:last-child { border-bottom: none; }
.thimze-package-card__items li::before {
    content: '✓';
    color: #27c2eb;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

/* Price */
.thimze-package-card__price {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    margin-bottom: 14px;
    letter-spacing: -.01em;
}

/* Button */
.thimze-package-card__btn {
    display: block;
    width: 100%;
    padding: 12px;
    background: #27c2eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background .15s ease;
}
.thimze-package-card__btn:hover    { background: #1a9dbf; }
.thimze-package-card__btn:disabled { opacity: .7; cursor: not-allowed; }
.thimze-package-card__btn.is-added { background: #27c2eb; }
.thimze-package-card__btn.is-added:hover { background: #1a9dbf; }

/* Actions container */
.thimze-package-card__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}

/* Select options link */
.thimze-package-card__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    color: #27c2eb;
    border: 1.5px solid #27c2eb;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .15s ease;
    text-align: center;
    box-sizing: border-box;
    min-height: 46px;
}
.thimze-package-card__link:hover {
    background: #e6f9fd;
    border-color: #1a9dbf;
    color: #1a9dbf;
}

/* Add to cart button — full width below the link */
.thimze-package-card__btn {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
}

/* View cart link */
.thimze-pkg-view-cart {
    display: block;
    text-align: center;
    margin-top: 8px;
    font-size: 12px;
    color: #27c2eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.thimze-pkg-view-cart:hover { color: #1a9dbf; }

/* Empty */
.thimze-packages__empty {
    color: #666;
    font-size: 14px;
}

/* "What's Included:" label */
.thimze-package-card__included-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #999;
    margin: 0 0 8px;
}

/* Item row — name + qty pill side by side */
.thimze-package-card__items li {
    justify-content: space-between;
}
.thimze-package-card__items li::before { display: none; }

.thimze-pkg-item-name {
    font-size: 13px;
    color: #444;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}
.thimze-pkg-item-name::before {
    content: '✓';
    color: #27c2eb;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
}

/* Quantity pill */
.thimze-pkg-item-qty {
    display: inline-flex;
    align-items: center;
    background: #27c2eb;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 8px;
}

/* Items beyond the first 3 are hidden until "See more" is tapped.
   Selector specificity here must beat ".thimze-package-card__items li"
   (which sets display: flex on every row), or the base rule silently
   wins and the rows stay visible regardless of the toggle. */
.thimze-package-card__items li.thimze-pkg-item--extra {
    display: none;
}
.thimze-package-card__items.is-expanded li.thimze-pkg-item--extra {
    display: flex;
}

.thimze-pkg-see-more {
    display: block;
    width: 100%;
    background: none;
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 8px 0 14px;
    margin: -6px 0 0;
    color: #27c2eb;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.thimze-pkg-see-more:hover,
.thimze-pkg-see-more:focus,
.thimze-pkg-see-more:active {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;
    color: #1a9dbf;
    text-decoration: none;
}

/* ── Mobile: one full package per screen, dots show position ── */
@media (max-width: 600px) {
    /*
     * Break out of the theme's content padding using the viewport-width
     * trick so the wrap is centred on the true screen width regardless
     * of whatever padding the theme's container happens to use.
     */
    .thimze-packages-wrap {
        overflow: hidden;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-top: 0;
    }

    .thimze-packages {
        gap: 0;
        padding-left: 16px;
        padding-right: 16px;
        scroll-snap-type: x mandatory;
    }

    /* Card fills the full mobile width — no sliver of the next
       card poking in. Position within the set is shown by the
       dots below instead. The right margin (rather than a gap on
       the track) keeps each slide exactly 100% wide so scroll-snap
       lands cleanly, while still leaving a consistent gap before
       the next card. */
    .thimze-package-card {
        flex: 0 0 calc(100% - 16px);
        min-width: calc(100% - 16px);
        max-width: calc(100% - 16px);
        margin-right: 16px;
        padding: 16px 14px;
        scroll-snap-align: start;
        font-size: 13px;
    }
    .thimze-package-card:last-child {
        margin-right: 0;
    }
    /* Explicit gutter on the first card so it never sits flush against
       the screen edge, independent of whether the track's own padding
       is being respected. Basis is shrunk to match so the first slide
       still totals one full screen width like the rest. */
    .thimze-package-card:first-child {
        margin-left: 16px;
        flex-basis: calc(100% - 32px);
        min-width: calc(100% - 32px);
        max-width: calc(100% - 32px);
    }

    /* Arrows are replaced by swipe + dots on mobile */
    .thimze-pkg-prev,
    .thimze-pkg-next {
        display: none !important;
    }

    /* No fade hint needed once the card is full width */
    .thimze-packages-wrap::after {
        display: none;
    }

    .thimze-pkg-dots {
        display: flex;
    }
}

/* Position dots — hidden on desktop, shown only in the mobile
   media query above. Built dynamically by packages-frontend.js
   with one dot per package card; the active one marks position
   (e.g. "1 of 4"). */
.thimze-pkg-dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.thimze-pkg-dots__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d8d8d8;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.thimze-pkg-dots__dot.is-active {
    background: #27c2eb;
    transform: scale(1.3);
}

/* ------------------------------------------------------------------ */
/* Package Intelligence Layer — value anchoring, bundle offer, social proof */
/* ------------------------------------------------------------------ */

/* Merged item list, priced variant — strikethrough price on the right */
.thimze-package-card__items--priced li {
    flex-wrap: nowrap;
}
.thimze-package-card__items--priced .thimze-pkg-item-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.thimze-pkg-item-dots {
    flex: 1;
    border-bottom: 1px dotted #ddd;
    margin-bottom: 3px;
}
.thimze-pkg-item-price {
    flex-shrink: 0;
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
    text-decoration-color: #ccc;
    white-space: nowrap;
}

/* Total value row — sits between the item list and the bundle price */
.thimze-pkg-value-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    margin-bottom: 14px;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    font-size: 12px;
    font-weight: 700;
    color: #777;
    letter-spacing: .03em;
}
.thimze-pkg-value-total span:last-child {
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
    text-decoration-color: #ccc;
}

/* Bundle price + savings — flat rows, no box */
.thimze-pkg-bundle-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}
.thimze-pkg-bundle-row__label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
}
.thimze-pkg-bundle-row__price {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    letter-spacing: -.01em;
}
.thimze-pkg-bundle-row__save {
    font-size: 12.5px;
    font-weight: 700;
    color: #d4820a;
    margin-bottom: 14px;
}

.thimze-pkg-social-proof {
    display: none;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.thimze-pkg-social-proof__stars {
    color: #ffb400;
    font-size: 13px;
    letter-spacing: 1px;
    flex-shrink: 0;
}
.thimze-pkg-social-proof__text {
    font-size: 12px;
    color: #777;
    font-style: italic;
}

@media (max-width: 600px) {
    .thimze-pkg-bundle-row__price {
        font-size: 18px;
    }
    .thimze-pkg-social-proof__text {
        font-size: 11px;
    }
}