/**
 * Styles for the [amazon_product template="regular_carousel"] shortcode.
 *
 * Scope: this file is enqueued ONLY when the shortcode renders, so it
 * stays out of the way of every other page on the site. AMP and non-AMP
 * both use the same classes — only the outer wrapper differs
 * (<amp-carousel> vs <div data-wpaap-carousel>), and CSS doesn't care.
 *
 * Namespace: every selector starts with .wpaap-pc- (PC = "product carousel")
 * so we never collide with the wpaap_product CPT template's classes.
 */

/* ── Outer widget — unifies the regular card + carousel into one visual unit ── */
.wpaap-pc-widget {
    margin: 24px 0;
    /* Reset typography to inherit from the post — never impose our own. */
}

.wpaap-pc-widget .wpaap-pc-main {
    /* The wrapped regular product card. We just provide the container; the
       card brings its own border/shadow via .wpaap-product. */
    margin: 0;
}

.wpaap-pc-related {
    margin-top: 16px;
    padding-top: 20px;
    border-top: 1px solid #e4e4e4;
}

.wpaap-pc-heading {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: #1d2327;
    letter-spacing: 0.01em;
}

/* ── Carousel container — non-AMP branch ────────────────────────────── */
/* The arrow buttons are absolutely positioned at the edges so they sit
   on top of the scroll track without occupying horizontal space. On
   small viewports we hide them and rely on native touch swipe. */
.wpaap-pc-carousel {
    position: relative;
}

.wpaap-pc-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 14px;       /* room for card hover lift + scrollbar */
    /* Hide the scrollbar visually on desktop while keeping it scrollable.
       Touch devices already render their own indicator. */
    scrollbar-width: thin;
    scrollbar-color: #c5c8cb transparent;
}
.wpaap-pc-track::-webkit-scrollbar {
    height: 6px;
}
.wpaap-pc-track::-webkit-scrollbar-track {
    background: transparent;
}
.wpaap-pc-track::-webkit-scrollbar-thumb {
    background-color: #c5c8cb;
    border-radius: 3px;
}

/* AMP carousel — same look as the non-AMP track. The amp-carousel root
   handles overflow itself, so we only need card-spacing rules to match. */
.wpaap-pc-carousel--amp {
    --wpaap-pc-card-gap: 14px;
}
.wpaap-pc-carousel--amp .wpaap-pc-card {
    margin-right: var(--wpaap-pc-card-gap);
}
.wpaap-pc-carousel--amp .wpaap-pc-card:last-child {
    margin-right: 0;
}

/* ── Arrow buttons ──────────────────────────────────────────────────── */
.wpaap-pc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #d0d3d6;
    background: #ffffff;
    color: #1d2327;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(20, 22, 24, 0.10);
    transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
    /* Center the chevron glyph perfectly */
    display: flex;
    align-items: center;
    justify-content: center;
}
.wpaap-pc-arrow:hover {
    background: #f6f7f7;
    box-shadow: 0 4px 12px rgba(20, 22, 24, 0.14);
}
.wpaap-pc-arrow:active {
    transform: translateY(calc(-50% + 1px));
}
.wpaap-pc-arrow:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}
.wpaap-pc-arrow--prev { left: -10px; }
.wpaap-pc-arrow--next { right: -10px; }

/* Mobile: hide arrows, rely on swipe. Edge of next card peeks through to
   communicate swipeability without copy. */
@media (max-width: 640px) {
    .wpaap-pc-arrow { display: none; }
}

/* ── Card ───────────────────────────────────────────────────────────── */
/* Whole card is one <a>. Fixed width gives consistent visual rhythm;
   flex-shrink:0 prevents the track from squishing them to fit. */
.wpaap-pc-card {
    flex: 0 0 auto;
    width: 220px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    scroll-snap-align: start;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
    /* So focus rings don't get clipped at card edges. */
    outline-offset: 2px;
}
.wpaap-pc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(20, 22, 24, 0.10);
    border-color: #d0d3d6;
}
.wpaap-pc-card:focus-visible {
    outline: 2px solid #2271b1;
    border-color: #2271b1;
}

@media (max-width: 640px) {
    .wpaap-pc-card { width: 168px; }
}

/* Touch / no-hover devices: skip the hover lift so swipe gestures don't
   trigger a phantom transform-while-scrolling (mobile browsers fire
   hover events on touchstart). Keeps the carousel feeling native. */
@media (hover: none) {
    .wpaap-pc-card:hover {
        transform: none;
        box-shadow: none;
        border-color: #e4e4e4;
    }
}

/* ── Card image ─────────────────────────────────────────────────────── */
.wpaap-pc-card-image {
    margin: 0;
    padding: 14px;
    background: #fafafa;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wpaap-pc-card-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* amp-img with layout="responsive" sizes itself from its width/height
   attrs (the aspect ratio) and the parent's width. The parent is a 1:1
   square via aspect-ratio, so a 1:1 amp-img fills it perfectly. We just
   need the inner <img> (which AMP renders inside the <amp-img>) to use
   object-fit so product art doesn't crop. */
.wpaap-pc-card-image amp-img {
    width: 100%;
    max-height: 100%;
}
.wpaap-pc-card-image amp-img img {
    object-fit: contain;
}
.wpaap-pc-card-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f0f0f0 0%, #e6e6e6 100%);
    border-radius: 4px;
}

/* ── Card body ──────────────────────────────────────────────────────── */
.wpaap-pc-card-body {
    padding: 10px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;     /* allow children to shrink + ellipsis */
}

.wpaap-pc-card-brand {
    font-size: 11px;
    font-weight: 600;
    color: #6b7177;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

.wpaap-pc-card-title {
    font-size: 13px;
    line-height: 1.35;
    color: #1d2327;
    /* Clamp to 2 lines so card heights stay regular. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    margin-top: 2px;
}

/* ── Card price ─────────────────────────────────────────────────────── */
.wpaap-pc-card-price {
    margin-top: auto;          /* push to bottom of card */
    padding-top: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    line-height: 1.2;
}
.wpaap-pc-card-sale {
    font-size: 15px;
    font-weight: 700;
    color: #b12704;            /* Amazon-style sale red */
}
.wpaap-pc-card-mrp {
    font-size: 12px;
    color: #6b7177;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.wpaap-pc-card-savings {
    font-size: 11px;
    font-weight: 700;
    color: #007600;
    background: #e7f4e7;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.02em;
}

/* ── AMP variant tweaks ──────────────────────────────────────────────
   amp-carousel needs an explicit pixel height upfront (it can't auto-
   size — AMP reserves layout space ahead of paint). Cards on desktop
   would normally grow to 220px wide → 220px tall image (aspect-ratio
   1/1) → ~320px total card; on mobile they're 168→268px. To keep the
   carousel viewport height short and consistent across viewports
   (eliminating the white-space-below issue that v5.66.x had with the
   360px height), we lock AMP cards to the mobile width everywhere.
   AMP traffic is mobile-dominated; the rare desktop AMP visitor sees
   the same compact card the mobile visitor does. */
.is-amp .wpaap-pc-card {
    width: 168px;
    height: 100%;
}