/* Kitten Shop — single product */

/* ── Breadcrumb band ────────────────────────────────────────────────────── */
/* Runs under the fixed header the way the page hero does, so the trail sits
   just below it rather than a header's height further down. */
.product-crumbs {
    --header-space: calc(var(--topbar-height) + var(--header-height) + var(--header-offset));

    margin-top: calc(-1 * var(--header-space));
    padding:    calc(var(--header-space) + 20px) 0 30px;
    background: var(--color-pink-50);
}

/* Only the page being viewed is stated at full strength; the trail behind it
   steps back, the way prod prints it */
.product-crumbs .breadcrumbs__item a,
.product-crumbs .breadcrumbs__sep { color: rgba(29, 29, 31, 0.31); }
.product-crumbs .breadcrumbs__item a:hover { color: var(--color-primary); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
/* The gallery row runs wider than the sections under it — 640px a column,
   as on prod — so it gets its own container width. */
.product-main { padding: 80px 0; }
.product-main .container { max-width: 1400px; }

.product-main__layout {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   80px;
    align-items:           start;
}

/* ── Gallery ────────────────────────────────────────────────────────────── */
/* The summary column runs much taller than the photos — reservation terms,
   cart, WhatsApp, the standing notes — so left on its own the gallery would
   leave a screen of white space beside the tail of it. Sticky keeps the photos
   in view for the whole scroll instead. Works because .product-main__layout is
   align-items:start; a stretched grid item is already full height and has
   nothing to stick within. */
.product-gallery {
    position:       sticky;
    top:            calc(var(--topbar-height) + var(--header-height) + var(--header-offset) + 20px);
    display:        flex;
    flex-direction: column;
    gap:            20px;
}

.product-gallery__slide img,
.product-gallery__image {
    width:         100%;
    aspect-ratio:  1 / 1;
    object-fit:    cover;
    border-radius: var(--radius);
}

/* Before Slick runs, only the first photo should be on the stage — otherwise
   the whole set stacks down the page while the script loads. */
.product-gallery__stage:not(.slick-initialized) .product-gallery__slide:not(:first-child) { display: none; }
.product-gallery__thumbs:not(.slick-initialized) { display: none; }

.product-gallery__thumbs .slick-slide { margin: 0 6px; }
.product-gallery__thumbs .slick-list   { margin: 0 -6px; }

.product-gallery__thumb img {
    width:         100%;
    aspect-ratio:  1 / 1;
    object-fit:    cover;
    border-radius: var(--radius-img);
    cursor:        pointer;
    opacity:       0.55;
    transition:    opacity var(--transition), box-shadow var(--transition);
}
/* Slick puts .slick-current directly on the same element as
   .product-gallery__thumb (not a wrapping ancestor), so this targets it —
   not the ".slick-current .product-gallery__thumb" descendant pattern,
   which can never match two classes on one node. */
.product-gallery__thumb:hover img,
.product-gallery__thumb.slick-current img { opacity: 1; }
/* Pink ring around whichever photo is on the stage right now */
.product-gallery__thumb.slick-current img { box-shadow: 0 0 0 2px var(--color-primary); }

/* ── Video slide ────────────────────────────────────────────────────────── */
.product-gallery__video {
    position:       relative;
    display:        flex;
    align-items:    center;
    justify-content: center;
    width:          100%;
    aspect-ratio:   1 / 1;
    padding:        0;
    border:         none;
    border-radius:  var(--radius);
    /* Behind the thumbnail — gallery.php always supplies one (the YouTube
       thumbnail, or the kitten's own featured photo for an uploaded file) */
    background:     #000000;
    cursor:         pointer;
    overflow:       hidden;
}
.product-gallery__video img {
    position:      absolute;
    inset:         0;
    width:         100%;
    height:        100%;
    object-fit:    cover;
    /* The thumbnail is a YCbCr JPEG YouTube pads to 4:3 with black bars top
       and bottom — dimming it keeps the crop from reading as a mistake */
    opacity:       0.7;
}
.product-gallery__play {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           64px;
    height:          64px;
    border-radius:   50%;
    background:      var(--color-primary);
    color:           #ffffff;
    /* The glyph is a triangle, not centred on its own box — nudged so it
       looks centred inside the circle rather than left of it */
    padding-left:    4px;
    transition:      background var(--transition);
}
.product-gallery__video:hover .product-gallery__play { background: var(--color-primary-dark); }

.product-gallery__thumb--video {
    position:   relative;
    background: #000000;
    border-radius: var(--radius-img);
    overflow:   hidden;
}
.product-gallery__thumb--video img { opacity: 0.7; }
.product-gallery__thumb--video .icon {
    position:  absolute;
    top:       50%;
    left:      50%;
    transform: translate(-50%, -50%);
    color:     #ffffff;
}

/* Arrows sit inside the stage, matching the round pink controls used elsewhere.
   The glyph is an SVG chevron supplied by js/pages/product.js, so it centres on
   the circle on its own — a rotated CSS border corner never quite does, because
   its ink sits off toward the corner it is drawn from. */
.product-gallery .slick-arrow {
    position:        absolute;
    top:             50%;
    z-index:         2;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    padding:         0;
    transform:       translateY(-50%);
    border:          none;
    border-radius:   50%;
    background:      var(--color-primary);
    color:           #ffffff;
    font-size:       0;
    cursor:          pointer;
    transition:      background var(--transition);
}
.product-gallery .slick-arrow:hover { background: var(--color-primary-dark); }
.product-gallery .slick-arrow svg { display: block; }
.product-gallery .slick-prev { left: 16px; }
.product-gallery .slick-next { right: 16px; }

/* ── Full-size affordance ───────────────────────────────────────────────── */
.product-gallery__slide { cursor: zoom-in; }

.product-gallery__zoom {
    position:        absolute;
    top:             16px;
    right:           16px;
    z-index:         2;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    padding:         0;
    border:          none;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 0.9);
    color:           var(--color-text);
    cursor:          zoom-in;
    transition:      background var(--transition), color var(--transition);
}
.product-gallery__zoom:hover {
    background: var(--color-primary);
    color:      #ffffff;
}

/* ── Lightbox ───────────────────────────────────────────────────────────── */
/* Same shape as the video modal in css/main.css — overlay, .is-open, a close
   button clear of the content — with paging added. */
.gallery-lightbox {
    position:        fixed;
    inset:           0;
    z-index:         var(--z-modal);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         20px;
    opacity:         0;
    visibility:      hidden;
    transition:      opacity 0.3s ease, visibility 0.3s ease;
}
.gallery-lightbox.is-open {
    opacity:    1;
    visibility: visible;
}

.gallery-lightbox__overlay {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, 0.85);
}

.gallery-lightbox__container {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    max-width:       100%;
    max-height:      100%;
}

/* The photo drives the box rather than the other way round, so a portrait and
   a landscape shot both fill what the viewport can give them */
.gallery-lightbox__image {
    display:       block;
    max-width:     100%;
    max-height:    calc(100vh - 120px);
    width:         auto;
    height:        auto;
    border-radius: var(--radius-box);
    object-fit:    contain;
}

.gallery-lightbox__close {
    position:   fixed;
    top:        20px;
    right:      20px;
    display:    inline-flex;
    padding:    0;
    border:     none;
    background: none;
    color:      var(--color-bg-alt);
    cursor:     pointer;
    transition: color var(--transition);
}
.gallery-lightbox__close:hover { color: var(--color-primary); }

.gallery-lightbox__nav {
    position:        fixed;
    top:             50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           48px;
    height:          48px;
    padding:         0;
    transform:       translateY(-50%);
    border:          none;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 0.15);
    color:           #ffffff;
    cursor:          pointer;
    transition:      background var(--transition);
}
.gallery-lightbox__nav:hover { background: var(--color-primary); }
.gallery-lightbox__nav svg { display: block; }
.gallery-lightbox__nav--prev { left: 20px; }
.gallery-lightbox__nav--next { right: 20px; }

.gallery-lightbox__counter {
    position:    fixed;
    left:        50%;
    bottom:      24px;
    margin:      0;
    transform:   translateX(-50%);
    font-size:   14px;
    line-height: 20px;
    color:       rgba(255, 255, 255, 0.7);
}

@media (max-width: 767px) {
    .gallery-lightbox { padding: 12px; }
    .gallery-lightbox__image { max-height: calc(100vh - 150px); }

    .gallery-lightbox__nav {
        width:  40px;
        height: 40px;
    }
    .gallery-lightbox__nav--prev { left: 8px; }
    .gallery-lightbox__nav--next { right: 8px; }
}

/* ── Summary ────────────────────────────────────────────────────────────── */
.product-summary {
    display:        flex;
    flex-direction: column;
    gap:            24px;
}

/* Social-proof badge — see the comment in summary.php. Pulled up against the
   title with a negative margin rather than reducing the column's own gap,
   which every other child of .product-summary also relies on. */
.product-viewers {
    display:       inline-flex;
    align-items:   center;
    align-self:    flex-start;
    gap:           8px;
    margin:        0 0 -12px;
    padding:       6px 14px 6px 12px;
    border-radius: var(--radius-pill);
    background:    var(--color-green-100);
    font-size:     13px;
    font-weight:   600;
    color:         var(--color-text);
}

.product-viewers__dot {
    flex-shrink:   0;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    /* Was var(--color-secondary) — identical to the pill's own background
       now that --color-green-100 is the same solid green, which made the
       pulsing dot invisible. */
    background:    #ffffff;
    animation:     product-viewers-pulse 1.6s infinite ease-in-out both;
}

@keyframes product-viewers-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.75); }
}

/* The heart sits on the title's own line, pushed to the far edge */
.product-summary__head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
}

.product-summary__title {
    margin:      0;
    font-size:   34px;
    line-height: 40px;
    font-weight: 700;
}

.product-specs {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   12px;
    margin:                0;
    padding:               0;
    list-style:            none;
}

.product-specs__item {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       12px 14px;
    border:        1px solid var(--color-pink-100);
    border-radius: 14px;
    background:    var(--color-pink-50);
    font-size:     14px;
    line-height:   20px;
}
.product-specs__item .icon {
    flex-shrink: 0;
    display:     block;
    width:       17px;
    height:      17px;
    color:       var(--color-primary);
}
.product-specs__label { font-weight: 700; margin-right: 4px; }
.product-specs__value { min-width: 0; color: var(--color-text); }

/* Reservation terms beside the price, on its own pale pink card rather than
   plain hairlines top and bottom — the "Reservation" label is a fixed UI
   caption for this box (not admin content), so it's injected via ::before
   rather than touching the template. */
.product-summary__terms {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
    padding:         22px 26px;
    border-radius:   18px;
    background:      var(--color-pink-50);
}

.product-summary__terms-text {
    max-width:   380px;
    font-size:   14px;
    line-height: 21px;
}
.product-summary__terms-text::before {
    content:     'Reservation';
    display:     block;
    margin:      0 0 6px;
    font-size:   15px;
    font-weight: 700;
    color:       var(--color-text);
}
.product-summary__terms-text p { margin: 0 0 12px; }
.product-summary__terms-text p:last-child { margin-bottom: 0; }

.product-summary__price {
    flex-shrink: 0;
    margin:      0;
    font-size:   24px;
    font-weight: 700;
    line-height: 1.25;
    color:       var(--color-primary);
    white-space: nowrap;
}
.product-summary__price del { opacity: 0.5; }
.product-summary__price ins { text-decoration: none; }

/* ── Add to cart ────────────────────────────────────────────────────────── */
.product-summary__cart .variations {
    width:           100%;
    margin:          0 0 16px;
    border-collapse: collapse;
}
.product-summary__cart .variations th,
.product-summary__cart .variations td {
    padding:        0 0 12px;
    text-align:     left;
    vertical-align: middle;
}
/* The swatch labels already say what the option is, so the attribute name
   would only repeat them — prod drops it too. */
.product-summary__cart .variations .label { display: none; }

/* The swatches are built from the native select by js/pages/product.js — the
   select stays in the DOM as the form value and the no-JS fallback. */
.product-swatches {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
}
.product-swatches + select { display: none; }

.product-swatch {
    padding:       8px 18px;
    border:        1px solid var(--color-border);
    border-radius: 60px;
    background:    #ffffff;
    font-family:   inherit;
    font-size:     13px;
    line-height:   18px;
    font-weight:   500;
    color:         #3b3d42;
    cursor:        pointer;
    transition:    background var(--transition), border-color var(--transition), color var(--transition);
}
.product-swatch:hover { border-color: var(--color-primary); }
/* The chosen option gets the same pale-pink fill as the reservation card,
   rather than just a darker outline, to read as clearly selected */
.product-swatch[aria-pressed="true"] {
    border-color: var(--color-primary);
    background:   var(--color-pink-50);
    color:        var(--color-primary);
    font-weight:  700;
}

.product-summary__cart .reset_variations {
    display:         inline-block;
    margin-top:      8px;
    font-size:       14px;
    color:           var(--color-secondary);
    text-decoration: none;
}
.product-summary__cart .reset_variations:hover { text-decoration: underline; }

.product-summary__cart .woocommerce-variation-price {
    margin:      12px 0;
    font-size:   20px;
    line-height: 20px;
    color:       #3b3d42;
}

/* Every kitten is one of a kind, so the quantity box would only ever read 1.
   WooCommerce's variation script sets display inline, hence the !important. */
.product-summary__cart .quantity { display: none !important; }

/* Flat pink pill, as on prod — not the gradient the UI kit uses elsewhere */
.woocommerce .product-summary__cart .single_add_to_cart_button.button {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    width:           100%;
    padding:         12px 16px;
    border:          none;
    border-radius:   50px;
    background:      var(--color-primary);
    box-shadow:      none;
    font-family:     var(--font-body);
    font-size:       16px;
    font-weight:     500;
    letter-spacing:  0.64px;
    line-height:     20px;
    color:           #ffffff;
    text-transform:  uppercase;
    cursor:          pointer;
    transition:      background var(--transition);
}
/* The cart glyph prod prints before the label; masked so it takes the text colour */
.woocommerce .product-summary__cart .single_add_to_cart_button.button::before {
    content:         '';
    width:           16px;
    height:          16px;
    background-color: currentColor;
    -webkit-mask:    url('../../img/cart.svg') no-repeat center / contain;
    mask:            url('../../img/cart.svg') no-repeat center / contain;
}
.woocommerce .product-summary__cart .single_add_to_cart_button.button:hover {
    background: var(--color-primary-dark);
}
.woocommerce .product-summary__cart .single_add_to_cart_button.button.disabled {
    opacity: 0.5;
    cursor:  not-allowed;
}

/* Full width, matching the Add to Cart button above it, rather than the
   auto-width pill .btn--text gives every other body-copy button */
.product-summary__whatsapp {
    align-self:      stretch;
    justify-content: center;
    width:           100%;
    height:          auto;
    padding:         13px 16px;
}

/* ── Standing notes under the form ──────────────────────────────────────── */
.product-notes {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    margin:         0;
    padding:        0;
    list-style:     none;
}

.product-notes__item {
    position:      relative;
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    padding:       16px 40px 16px 16px;
    border:        1px solid var(--color-border-light);
    border-radius: 16px;
    background:    #ffffff;
}
.product-notes__item .icon { flex-shrink: 0; }
/* Purely decorative chevron — this list has no collapse behaviour, so it's
   a plain CSS corner rather than a real toggle affordance. */
.product-notes__item::after {
    content:      '';
    position:     absolute;
    top:          22px;
    right:        18px;
    width:        8px;
    height:       8px;
    border-right: 2px solid var(--color-muted);
    border-bottom: 2px solid var(--color-muted);
    transform:    rotate(45deg);
}

.product-notes__text {
    margin:      0;
    font-size:   13px;
    line-height: 19px;
    color:       var(--color-text);
}
.product-notes__text strong { font-size: 14px; }

/* ── From Their First Home to Yours ─────────────────────────────────────── */
.product-about { padding: 40px 0; }

/* Everything in this section is centred as a column and the copy runs to a
   measure rather than the full container — a 1280px line of 18px text is
   unreadable. */
.product-about .container {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            20px;
}

.product-about__title {
    margin:         0 0 20px;
    font-size:      39px;
    line-height:    47px;
    font-weight:    500;
    letter-spacing: -0.9px;
    color:          #000000;
}

.product-about__items {
    display:        flex;
    flex-direction: column;
    width:          100%;
    max-width:      1090px;
    margin:         0;
    padding:        0;
    list-style:     none;
}

.product-about__item {
    display:       flex;
    align-items:   center;
    gap:           24px;
    padding:       24px 0;
    text-align:    left;
    border-bottom: 1px solid var(--color-border-light);
}
.product-about__item:first-child { padding-top: 0; }
.product-about__item:last-child { border-bottom: none; padding-bottom: 0; }

.product-about__marker {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    flex-shrink:    0;
    gap:            10px;
    width:          52px;
}
.product-about__number {
    font-size:   22px;
    font-weight: 700;
    color:       var(--color-primary);
}
.product-about__icon { display: flex; color: var(--color-primary); }

.product-about__media {
    flex-shrink:   0;
    width:         150px;
    height:        100px;
    border-radius: var(--radius-img);
    overflow:      hidden;
}
.product-about__media img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.product-about__body { min-width: 0; }

/* Prod's titles are a plain <h4> wrapped in <strong> — the h4 itself is only
   weight 400, but the browser's default bold on <strong> is what actually
   renders, which is why this reads at 700 rather than the h4's own 400. */
.product-about__item-title {
    margin:      0 0 6px;
    font-size:   18px;
    line-height: 25px;
    font-weight: 700;
    color:       #3b3d42;
    text-align:  left;
}

.product-about__item-text {
    font-size:   14px;
    line-height: 21px;
    color:       var(--color-text);
}
.product-about__item-text p { margin: 0 0 8px; }
.product-about__item-text p:last-child { margin-bottom: 0; }

/* Pink-tinted pill, as on prod — the call and the button share one card
   instead of floating separately under the story */
.product-about__cta {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: space-between;
    gap:             10px;
    width:           100%;
    max-width:       820px;
    padding:         16px;
    border-radius:   50px;
    background:      var(--color-pink-50);
}
/* Fixed at its own width so the call column is what gives way if the two
   ever get too wide to share a line */
.product-about__cta .btn { flex-shrink: 0; }

.product-about__call {
    display:     flex;
    align-items: center;
    gap:         12px;
    min-width:   0;
    margin:      0;
    font-size:   16px;
    line-height: 22px;
    font-weight: 600;
}
.product-about__call-icon { display: block; flex-shrink: 0; line-height: 0; }
.product-about__call-text { flex: 1 1 auto; min-width: 0; }
.product-about__call a {
    display:         block;
    color:           rgba(0, 0, 0, 0.6);
    text-decoration: none;
}
.product-about__call a:hover { color: var(--color-primary); }
/* Specificity over the generic ".product-about__call a" above, which would
   otherwise win and leave the number the same faint grey as the label */
.product-about__call a.product-about__phone { display: block; color: var(--color-text); }
.product-about__call a.product-about__phone:hover { color: var(--color-primary); }

/* ── Adoption Package ───────────────────────────────────────────────────── */
.product-package { padding: 40px 0 80px; }

/* The squiggle behind everything is set inline (see package.php) since it
   comes from an admin-editable Shop option; only its positioning lives
   here. Content and the kitten's own photo (product-package__media) share
   the row as two flex items rather than the photo just being that same
   background image stretched — a real photo, not a decoration. */
.product-package__card {
    display:             flex;
    align-items:         center;
    gap:                 40px;
    padding:             50px;
    border-radius:       30px;
    background-color:    var(--color-pink-50);
    background-repeat:   no-repeat;
    background-position: center right;
    background-size:     contain;
}

.product-package__content { flex: 1 1 auto; min-width: 0; }

.product-package__title {
    margin:      0 0 28px;
    font-size:   36px;
    line-height: 44px;
    font-weight: 500;
    color:       #000000;
}

/* Fills column by column: --package-rows comes from the partial, so a list of
   any length still breaks in the middle instead of running down one side.
   The columns hug their labels rather than splitting the card in half. */
.product-package__list {
    display:               grid;
    grid-auto-flow:        column;
    grid-template-rows:    repeat(var(--package-rows, 5), auto);
    grid-template-columns: repeat(2, max-content);
    gap:                   18px 40px;
    margin:                0;
    padding:               0;
    list-style:            none;
}

.product-package__item {
    display:        flex;
    align-items:    center;
    gap:            10px;
    font-size:      13px;
    line-height:    18px;
    font-weight:    600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
/* Small pink badge rather than a bare glyph — same box-sizing note as the
   product-specs icons above: content-box keeps the padding from eating the
   width under the sitewide border-box reset. */
.product-package__item .icon {
    flex-shrink:   0;
    box-sizing:    content-box;
    width:         18px;
    height:        18px;
    padding:       7px;
    border-radius: 8px;
    background:    #ffffff;
}

.product-package__media {
    flex-shrink:   0;
    width:         360px;
    height:        280px;
    border-radius: 24px;
    overflow:      hidden;
}
.product-package__media img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* ── Delivery options ───────────────────────────────────────────────────── */
.product-delivery {
    padding:    90px 0 50px;
    background: #fbfbfb;
}

.product-delivery__title {
    font-size:   42px;
    line-height: 68px;
    color:       #000000;
}

/* Line — paw — line, matching the standalone Delivery page's heading rule */
.product-delivery__rule {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    margin:          6px 0 10px;
    color:           var(--color-secondary);
}
.product-delivery__rule span {
    width:      74px;
    height:     1px;
    background: var(--color-border);
}

.product-delivery__list {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   24px;
    margin:                40px 0 0;
    padding:               0;
    list-style:            none;
}

.product-delivery__item {
    display:        flex;
    flex-direction: column;
    background:     #ffffff;
    border:         1px solid var(--color-border-light);
    border-radius:  20px;
    overflow:       hidden;
}
.product-delivery__item .icon { flex-shrink: 0; }
.product-delivery__content img.icon { object-fit: contain; }

.product-delivery__content {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            16px;
    padding:        28px 24px 0;
}
/* Without an uploaded illustration the content is the last thing in the
   card — give it the same bottom breathing room as its own top padding
   instead of running flush to the border. */
.product-delivery__item:not(:has(.product-delivery__illustration)) .product-delivery__content {
    padding-bottom: 28px;
}

.product-delivery__item-title {
    margin:      0;
    font-size:   17px;
    line-height: 22px;
    font-weight: 600;
}

.product-delivery__text {
    font-size:   14px;
    line-height: 20px;
    color:       #6b6b70;
}

/* Pinned to the card's bottom regardless of how tall the copy above runs, so
   short cards get more of the illustration and long ones less — never overlap */
.product-delivery__illustration {
    flex:      1 1 auto;
    min-height: 70px;
    margin-top: 16px;
}
.product-delivery__illustration img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: contain;
}
.product-delivery__text p { margin: 0 0 10px; }
.product-delivery__text p:last-child { margin-bottom: 0; }

/* ── Reserve Your Kitten Now ────────────────────────────────────────────── */
.product-steps { padding: 80px 0; }

.product-steps__title { color: #000000; }

/* Sits inline right after "Now", nudged up so it reads as a superscript flourish */
.product-steps__flourish {
    display:      inline-block;
    width:        20px;
    height:       20px;
    margin:       0 0 10px -2px;
    vertical-align: top;
}
.product-steps__flourish svg { display: block; width: 100%; height: 100%; }

.product-steps__card {
    position:       relative;
    overflow:       hidden;
    padding:        50px 40px;
    background:     var(--color-pink-50);
    border-radius:  30px;
}

/* Faint corner watermark — purely decorative, sits behind everything */
.product-steps__decor {
    position: absolute;
    top:      -30px;
    right:    -20px;
    width:    140px;
    height:   140px;
    color:    var(--color-primary);
    opacity:  0.08;
    z-index:  0;
}

.product-steps__title,
.product-steps__list {
    position: relative;
    z-index:  1;
}

.product-steps__list {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   20px 48px;
    margin:                40px 0 0;
    padding:               0;
    list-style:            none;
}

/* Divider sits below the photo row so it never cuts across the arrow */
.product-steps__item {
    position: relative;
}
.product-steps__item:not(:last-child)::after {
    content:    '';
    position:   absolute;
    top:        190px;
    bottom:     0;
    right:      -24px;
    width:      1px;
    background: var(--color-border);
}

.product-steps__image-wrap {
    position: relative;
    display:  inline-block;
    margin:   0 0 16px;
}

.product-steps__image {
    display:       block;
    width:         140px;
    height:        140px;
    border-radius: 20px;
    object-fit:    cover;
}
/* The built-in fallback illustration already has its own circular shape and
   transparent padding baked in — cropping it to fill would cut it off */
.product-steps__image--fallback {
    border-radius: 0;
    object-fit:    contain;
}

.product-steps__number {
    position:        absolute;
    right:           -4px;
    bottom:          -4px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           30px;
    height:          30px;
    border-radius:   50%;
    background:      var(--color-primary);
    color:           #ffffff;
    font-size:       14px;
    font-weight:     700;
    box-shadow:      0 0 0 4px var(--color-pink-50);
}

/* Bridges the gap between this column's photo and the next one's */
.product-steps__arrow {
    position: absolute;
    top:      50px;
    right:    -54px;
    width:    64px;
    height:   32px;
    z-index:  1;
}
.product-steps__arrow svg { display: block; width: 100%; height: 100%; }

.product-steps__item-title {
    margin:      0 0 12px;
    font-size:   24px;
    line-height: 28px;
    font-weight: 600;
    color:       var(--color-primary);
}

.product-steps__text {
    font-size:   16px;
    line-height: 22px;
    font-weight: 500;
}
.product-steps__text p { margin: 0 0 12px; }
.product-steps__text p:last-child { margin-bottom: 0; }

/* ── We Care for Every Step ─────────────────────────────────────────────── */
.product-care { padding: 80px 0; }

/* Photo + heading on the left; one full-bleed card per promise stacked
   on the right */
.product-care__layout {
    display:               grid;
    grid-template-columns: minmax(0, 420fr) minmax(0, 780fr);
    gap:                   48px;
    align-items:           center;
}

.product-care__intro {
    display:        flex;
    flex-direction: column;
    gap:            24px;
}

.product-care__media { position: relative; }
.product-care__media img {
    position:      relative;
    z-index:       1;
    display:       block;
    width:         100%;
    height:        340px;
    object-fit:    contain;
    border-radius: 24px;
}
/* Soft mint wash bleeding from behind the photo's top-right corner */
.product-care__media::before {
    content:       '';
    position:      absolute;
    top:           -24px;
    right:         -30px;
    width:         70%;
    height:        70%;
    background:    var(--color-green-200);
    opacity:       0.35;
    border-radius: 50%;
    z-index:       0;
}
/* Faint paw print anchored behind the photo's bottom-left corner */
.product-care__decor {
    position: absolute;
    left:     -30px;
    bottom:   -20px;
    width:    90px;
    height:   90px;
    color:    var(--color-primary);
    opacity:  0.18;
    z-index:  0;
}

.product-care__title {
    margin:      0;
    font-size:   32px;
    line-height: 38px;
    color:       #000000;
}

.product-care__list {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    margin:         0;
    padding:        0;
    list-style:     none;
}

.product-care__item {
    display:       flex;
    align-items:   center;
    gap:           20px;
    padding:       20px 24px;
    border-radius: 20px;
    overflow:      hidden;
}
/* Tint alternates green/pink/green by position, matching each row's icon */
.product-care__item:nth-child(odd)  { background: #e1f3e8; }
.product-care__item:nth-child(even) { background: var(--color-pink-50); }
.product-care__item:nth-child(odd)  .product-care__item-title { color: var(--color-secondary); }
.product-care__item:nth-child(even) .product-care__item-title { color: var(--color-primary); }

.product-care__item .icon { flex-shrink: 0; }

.product-care__body { flex: 1 1 auto; min-width: 0; }

.product-care__item-title {
    margin:      0 0 6px;
    font-size:   17px;
    line-height: 22px;
    font-weight: 600;
}

.product-care__text {
    margin:      0;
    font-size:   14px;
    line-height: 20px;
    font-weight: 500;
    color:       #6b6b70;
}

.product-care__photo {
    flex-shrink:   0;
    width:         120px;
    height:        90px;
    border-radius: 14px;
    overflow:      hidden;
}
.product-care__photo img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* ── Other kittens in the same category ─────────────────────────────────── */
.product-related { padding: 80px 0; }

.product-related__head {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
    margin-bottom:   40px;
}

.product-related__title {
    margin:      0;
    font-size:   32px;
    line-height: 38px;
    font-weight: 600;
    color:       #000000;
}

.product-related__actions {
    display:     flex;
    align-items: center;
    gap:         24px;
}

/* A quiet text link, not a button — the cards are the call to action here */
.product-related__link {
    font-size:       16px;
    line-height:     20px;
    font-weight:     500;
    letter-spacing:  0.64px;
    color:           #000000;
    text-decoration: none;
    white-space:     nowrap;
}
.product-related__link:hover { color: var(--color-primary); }

.product-related__nav {
    display: flex;
    gap:     12px;
}
/* Same pink-circle language as the photo gallery's arrows elsewhere on this
   page (css/pages/product.css, .product-gallery .slick-arrow) */
.product-related__arrow {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    padding:         0;
    border:          none;
    border-radius:   50%;
    background:      var(--color-primary);
    color:           #ffffff;
    cursor:          pointer;
    transition:      background var(--transition);
}
.product-related__arrow:hover { background: var(--color-primary-dark); }
.product-related__arrow svg { display: block; }

/* related_products() can hand back anywhere up to the configured count (10 by
   default) — sliding through them sidesteps ever landing on a half-filled
   row, which a fixed grid could not avoid without trimming to whatever count
   happens to divide evenly at each breakpoint. */
.product-related__slider {
    /* Slick expects to own layout once it initialises (display:block is its
       own default) — flex here is only for the brief pre-init state below;
       leaving it on unconditionally fights Slick's own width math and, with
       few enough slides, collapses them to a few px each. */
    display:    block;
    margin:     0;
    padding:    0;
    list-style: none;
}
.product-related__slider .slick-list  { overflow: hidden; }
.product-related__slider .slick-track { display: flex; align-items: stretch; }
/* Slick floats slides and pins them to height:100%; opting out of both lets
   a flex track stretch every card to the tallest one instead */
.product-related__slider .slick-slide {
    float:  none;
    height: auto;
}
.product-related__slider .product-card {
    width:  100%;
    height: 100%;
    margin: 0 8px;
}
.product-related__slider .slick-list { margin: 0 -8px; }

/* Before Slick initialises, lay the first row out plainly so the cards do not
   stack full-width while the script is still loading */
.product-related__slider:not(.slick-initialized) { display: flex; overflow: hidden; }
.product-related__slider:not(.slick-initialized) > .product-card { flex: 0 0 25%; }

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .product-main { padding: 50px 0; }
    .product-main__layout { gap: 40px; }

    .product-summary { gap: 20px; }
    .product-summary__terms { flex-direction: column; align-items: flex-start; gap: 12px; }
    .product-summary__terms-text { max-width: none; }

    .product-about { padding: 30px 0; }
    .product-about__title { font-size: 32px; line-height: 40px; }
    .product-about__item-text { font-size: 16px; line-height: 24px; }
    .product-about__media { width: 120px; height: 84px; }

    /* The card runs out of room to keep the call and the button on one line
       once the pill itself has to shrink to fit a narrower column */
    .product-about__cta { flex-direction: column; align-items: stretch; border-radius: var(--radius); }
    .product-about__cta .btn { align-self: stretch; }

    .product-package { padding: 30px 0 50px; }
    /* Stacked — the photo would otherwise get squeezed too narrow to read as
       a real portrait rather than a strip */
    .product-package__card { flex-direction: column; gap: 30px; padding: 40px; }
    /* A fixed height here would crop a different slice of each product's own
       photo at every width in this range (768–1024px) — proportional to
       width instead, so the crop stays the same regardless of how wide the
       stacked card happens to be. */
    .product-package__media { width: 100%; height: auto; aspect-ratio: 2 / 1; }
    /* Content-hugging columns would overflow the narrower card */
    .product-package__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
    .product-package__item { font-size: 14px; line-height: 18px; }
    /* The list now stretches to fill the card, leaving no clear corner for
       the decoration to sit in without running behind the text */
    .product-package__card { background-image: none; }

    .product-delivery { padding: 50px 0 30px; }
    .product-delivery__title { font-size: 36px; line-height: 42px; }
    .product-delivery__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }

    .product-steps { padding: 60px 0; }
    .product-steps__card { padding: 40px 30px; }
    .product-steps__list { margin-top: 20px; }

    .product-care { padding: 50px 0; }
    .product-care__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .product-care__photo { display: none; }

    .product-related { padding: 50px 0; }
    .product-related__slider:not(.slick-initialized) > .product-card { flex-basis: 33.333%; }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .product-crumbs { padding: calc(var(--header-space) + 16px) 0 20px; }

    .product-main { padding: 30px 0; }
    .product-main__layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }

    /* Once the columns stack there is nothing beside the photos to scroll past,
       and pinning them would only push the summary under them. Relative rather
       than static so the zoom button still has something to hang off. */
    .product-gallery { position: relative; top: auto; }

    .product-summary__title { font-size: 24px; line-height: 30px; }
    .product-specs { grid-template-columns: minmax(0, 1fr); gap: 12px; }

    .product-about__title { font-size: 28px; line-height: 34px; }
    /* Media drops out rather than shrinking further — at this width there is
       no room left for a third column beside the marker and the text */
    .product-about__item { align-items: flex-start; gap: 14px; }
    .product-about__media { display: none; }
    .product-about__marker { width: 40px; gap: 6px; }
    .product-about__number { font-size: 18px; }
    .product-delivery__title { font-size: 28px; line-height: 32px; }
    .product-delivery__item-title,
    .product-steps__item-title { font-size: 20px; line-height: 26px; }

    .product-package__card { padding: 24px; border-radius: var(--radius); }
    .product-package__title { font-size: 26px; line-height: 32px; margin-bottom: 20px; }
    .product-package__media { aspect-ratio: 2 / 1; }
    .product-package__list {
        grid-auto-flow:        row;
        grid-template-rows:    none;
        grid-template-columns: minmax(0, 1fr);
        gap:                   16px;
    }
    .product-package__item { font-size: 14px; line-height: 18px; }

    .product-delivery__list,
    .product-steps__list { grid-template-columns: minmax(0, 1fr); }
    .product-steps { padding: 40px 0; }
    .product-steps__card { padding: 30px 20px; }
    .product-steps__list { gap: 32px; }
    /* Stacked single column — the divider and arrow only make sense side by side */
    .product-steps__item:not(:last-child)::after,
    .product-steps__arrow { display: none; }

    .product-care__title { font-size: 26px; line-height: 32px; }
    .product-care__item { flex-direction: column; align-items: flex-start; padding: 20px; }
    .product-care__media img { height: 220px; }

    .product-related__slider:not(.slick-initialized) > .product-card { flex-basis: 50%; }
    .product-related__title { font-size: 24px; line-height: 30px; }
}