/**
 * 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 {
    position: relative;     /* anchor for .wpaap-pc-card-deal overlay */
    margin: 0;
    padding: 14px;
    background: #fafafa;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Card deal badge (overlay on image, top-left) ───────────────────────
   Pinned to the image corner so it stays visible regardless of card
   width (220px desktop / 168px mobile-AMP). One short pill — countdown
   timers and PercentClaimed progress only render on the main card, not
   on the carousel mini-cards. Colors mirror the compact-template badge
   palette so deal types read consistently across the site. */
.wpaap-pc-card-deal {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    background: #B12704;            /* Lightning Deal — Amazon red */
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    pointer-events: none;           /* don't intercept the card's <a> tap */
}
.wpaap-pc-card-deal--dotd {
    background: #CC0C39;            /* Deal of the Day — bright red */
}
.wpaap-pc-card-deal--best {
    background: #067D62;            /* Best Deal — Amazon green */
}
.wpaap-pc-card-deal--save {
    /* Plain discount (no Amazon deal Type). Muted Amazon-orange so it
       still pops against the grey image well but stays differentiable
       from the bold red/green Amazon-flagged deal pills. */
    background: #C7511F;
}
.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 3 lines — long ASUS/Lenovo SKU titles get truncated on the
       3rd line cleanly, and 3 lines gives the visitor enough text to
       distinguish near-identical models (e.g., S14 vs S16 with same
       Ryzen chip) without scrolling. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -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;
}

/* ── Card meta rows (rank, promo name, end-time) ───────────────────────
   Three optional one-line rows stacked below the price. Each renders
   only when PA API returned the underlying field. Same compact font
   size (11px) so they share a visual weight and don't compete with
   the price row above them. */
.wpaap-pc-card-rank {
    margin-top: 4px;
    font-size: 11px;
    color: #6b7177;
    line-height: 1.3;
    /* Single line, ellipsis on overflow — long category names like
       "Traditional Laptops" would otherwise wrap on a 168px card. */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Inner span carries the actual text + trophy icon. We zero out the
   default wpaap-salesrank-badge framing (it has its own border/padding
   designed for the main card) so it sits inline with our minimal row. */
.wpaap-pc-card-rank .wpaap-salesrank-badge {
    display: inline;
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    font-size: inherit;
    font-weight: 600;
}
.wpaap-pc-card-rank .wpaap-salesrank-icon {
    margin-right: 2px;
}

.wpaap-pc-card-promo {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #8e44ad;                 /* purple — promo names ("Summer Sale",
                                       "Prime Day") read as time-bound but
                                       distinct from the red deal pill */
    line-height: 1.3;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wpaap-pc-card-ends {
    margin-top: 2px;
    font-size: 11px;
    color: #b12704;                 /* same red as sale price — telegraphs
                                       time pressure without another badge */
    font-weight: 600;
    line-height: 1.3;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 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%;
}