/* CSS */
.grid[data-products-listing-container] > :last-child[data-pagination] {
    grid-column: 1 / -1; /* span all columns */
    justify-self: center; /* center itself */
}

[data-products-listing-wrapper][data-view="carousel"] {
    left: unset !important;
    width: 100% !important;
}

.owl-carousel {
    margin-bottom: 20px;
}

.owl-carousel .owl-nav {
    font-size: 50px;
    line-height: 40px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
    opacity: 50%;
}

.owl-carousel .owl-stage {
    display: flex;
    padding-left: 0 !important;
}

.owl-carousel .owl-stage .item {
    height: 100%;
}

.glightbox-container .gprev,
.glightbox-container .gnext {
  display: none !important;
}

[data-savebar-delivery-marker-needle]::after {
  content: '';
  position: absolute;
  left: -1px; 
  top: 9px; /* Adjust based on arrowhead size to center it */
  border: 6px solid transparent; /* Creates the sizing for the triangle */
  border-left-color: #6b7280; /* The color of the arrowhead */
  background: #fff;
  border-right: 0; /* Removes the tail side */
  transform: rotate(90deg);
}

@media screen and (max-width: 768px) {
    [data-savebar-delivery-marker-needle]::after {
        top: 25px;
    }
}

[data-checkout-value-box]{
    text-align:center;
}

/*
 * Brand jump bar - The Connector (Signature Saver `airtime` sub-path) only.
 * Only rendered on that sub-path (path.php gate); markup in templates/sections/signature-builder.php,
 * behaviour in assets/js/brand-bar.js. Neutral chips with the Signature Saver yellow (Tailwind yellow-*) for the active one.
 */
.brand-bar {
    --brand-bar-accent: #eab308;        /* yellow-500 - matches the card "Free"/save pills */
    --brand-bar-accent-text: #422006;   /* yellow-950 - readable on yellow-500 */
    --brand-bar-focus: #a16207;         /* yellow-700 */
    --brand-bar-chip-border: #e2e8f0;   /* slate-200 */
    --brand-bar-chip-border-hover: #cbd5e1; /* slate-300 */
    --brand-bar-chip-text: #334155;     /* slate-700 */
    --brand-bar-count: #94a3b8;         /* slate-400 */
    --brand-bar-bg: #f1f5f9;            /* body bg-slate-100, opaque so cards never show through */
    --brand-bar-rule: #e2e8f0;          /* slate-200 */
    --brand-bar-fade: 28px;

    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 20;
    min-width: 0;
    padding: 0.625rem 0;
    background: var(--brand-bar-bg);
    /* Full-bleed band: the background (and its bottom rule) is painted out to the viewport edges with
       spread shadows, then clipped to the bar's height. Shadows don't add scrollable overflow, so this
       covers the cards either side without a horizontal page scroll (unlike 100vw, which includes the scrollbar). */
    box-shadow: 0 0 0 100vmax var(--brand-bar-bg), 0 1px 0 100vmax var(--brand-bar-rule);
    -webkit-clip-path: inset(0 -100vmax -1px -100vmax);
    clip-path: inset(0 -100vmax -1px -100vmax);
    transition: box-shadow 200ms ease;
}

/* Pinned to the top: a soft shadow lifts it off the cards scrolling underneath (brand-bar.js sets data-stuck) */
.brand-bar[data-stuck] {
    box-shadow: 0 0 0 100vmax var(--brand-bar-bg), 0 1px 0 100vmax var(--brand-bar-rule), 0 4px 10px 100vmax rgba(15, 23, 42, 0.06);
    -webkit-clip-path: inset(0 -100vmax -14px -100vmax);
    clip-path: inset(0 -100vmax -14px -100vmax);
}

.brand-bar[hidden] {
    display: none;
}

.brand-bar__list {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin: 0;
    padding: 2px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.brand-bar__list::-webkit-scrollbar {
    display: none;
}

/* Fade the edge(s) that have more chips beyond them, so the row reads as scrollable (brand-bar.js sets the flags) */
.brand-bar[data-more-start] .brand-bar__list {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--brand-bar-fade));
    mask-image: linear-gradient(to right, transparent, #000 var(--brand-bar-fade));
}

.brand-bar[data-more-end] .brand-bar__list {
    -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--brand-bar-fade));
    mask-image: linear-gradient(to left, transparent, #000 var(--brand-bar-fade));
}

.brand-bar[data-more-start][data-more-end] .brand-bar__list {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--brand-bar-fade), #000 calc(100% - var(--brand-bar-fade)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--brand-bar-fade), #000 calc(100% - var(--brand-bar-fade)), transparent);
}

.brand-bar__list > li {
    flex: 0 0 auto;
}

/* Chevrons either side of the chip row: step to the previous / next brand */
.brand-bar__inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.brand-bar__inner > .brand-bar__list {
    flex: 1 1 auto;
    min-width: 0;
}

.brand-bar__step {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--brand-bar-chip-border);
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    color: var(--brand-bar-chip-text);
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

.brand-bar__step:hover:not(:disabled) {
    border-color: var(--brand-bar-accent);
    color: #0f172a;
}

.brand-bar__step:focus-visible {
    outline: 2px solid var(--brand-bar-focus);
    outline-offset: 2px;
}

.brand-bar__step:disabled {
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
}

/* One brand: nothing to step through */
.brand-bar[data-single] .brand-bar__step {
    display: none;
}

.brand-bar__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 1rem;
    border: 1px solid var(--brand-bar-chip-border);
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    color: var(--brand-bar-chip-text);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.005em;
    white-space: nowrap;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.brand-bar__chip:hover {
    border-color: var(--brand-bar-chip-border-hover);
    color: #0f172a;
}

.brand-bar__chip:active {
    box-shadow: none;
}

.brand-bar__chip:focus-visible {
    outline: 2px solid var(--brand-bar-focus);
    outline-offset: 2px;
}

.brand-bar__chip[aria-current="true"] {
    background: var(--brand-bar-accent);
    border-color: var(--brand-bar-accent);
    box-shadow: 0 1px 3px rgba(161, 98, 7, 0.3);
    color: var(--brand-bar-accent-text);
    font-weight: 600;
}

/* Product count: a quiet trailing number rather than a second pill */
.brand-bar__count {
    color: var(--brand-bar-count);
    font-size: 0.8125rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.brand-bar__chip[aria-current="true"] .brand-bar__count {
    color: rgba(66, 32, 6, 0.65);
}

.brand-bar__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile: the listing bleeds into the page gutter (max-sm:w-screen -ml-6), so the bar does too;
   the chevrons sit in that gutter and the chip row fills the space between them */
@media (max-width: 639px) {
    .brand-bar {
        margin: 0 -1.5rem;
        --brand-bar-fade: 20px;
    }

    .brand-bar__inner {
        gap: 0.375rem;
        padding: 0 0.75rem;
    }

    .brand-bar__step {
        width: 2.125rem;
        height: 2.125rem;
    }

    .brand-bar__chip {
        height: 2.125rem;
        padding: 0 0.875rem;
    }
}

/* Native #hash jumps land below the sticky bar; brand-bar.js sets the measured height */
[data-brand-section] {
    scroll-margin-top: var(--brand-bar-offset, 64px);
}

/* Sections are focused (tabindex=-1) after a jump only to move keyboard focus - no ring on the whole block */
[data-brand-section]:focus {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .brand-bar,
    .brand-bar__chip {
        transition: none;
    }
}