/* ==========================================================================
   Product details page (Artemis)

   Two columns: media rail + composite on the left, a sticky buy box on the right.
   Same .am-* language as the home sections and the product grid.

   Paired with: resources/views/project/shop/product/product-details.blade.php
                resources/views/project/shop/product/includes/*.blade.php

   The variant selectors keep their original markup contract — .selector,
   .available, .{field}-selector and data-{field}_id are what the page JS binds
   to, and every click submits the GET form. This file only restyles them.
   ========================================================================== */

/* ------------------------------------------------------------ Shell ------ */

.am-pdp {
    padding: 26px 0 60px;
}

.am-pdp__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: 48px;
}

/* ------------------------------------------------------------ Media ------ */

/* Composite on top, print-position thumbnails in a row underneath */
.am-pdp__media {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.am-pdp__stage {
    position: relative;
    border: 1px solid #ececee;
    border-radius: 14px;
    overflow: hidden;
    background: #fafafa;
}

/* The viewer composite is a fixed-px stack — centre it in the stage */
.am-pdp__stage .texture-container {
    margin: 0 auto;
    max-width: 100%;
}

.am-pdp__thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.am-pdp__thumb,
.am-pdp__thumb:visited {
    display: block;
    padding: 4px;
    border: 1px solid #e2e2e5;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: border-color .18s ease;
}

.am-pdp__thumb:hover {
    border-color: #b5b5ba;
}

.am-pdp__thumb.is-selected {
    border-color: #111113;
    box-shadow: 0 0 0 1px #111113 inset;
}

.am-pdp__thumb .texture-container {
    /* 100px composite scaled to fill the 66px cell exactly */
    transform: scale(.66);
    transform-origin: top left;
    margin: 0;
}

.am-pdp__thumb-frame {
    /* It is a <span>: without display:block the size and clipping below are ignored,
       the cell is sized by the unscaled 100px composite instead, and the artwork sits
       in the top-left corner of a box half again too big. */
    display: block;
    width: 66px;
    height: 66px;
    overflow: hidden;
}

.am-pdp__thumb-label {
    display: block;
    padding-top: 3px;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: #6f6f71;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------------------------------------- Buy box ------ */

.am-pdp__buy {
    position: sticky;
    /* clears the fixed shop header */
    top: 24px;
}

.am-pdp__title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.4px;
    color: #111113;
}

.am-pdp__title-text {
    flex: 1 1 auto;
    min-width: 0;
}

.am-pdp__badge {
    flex: 0 0 auto;
    margin-top: 6px;
    padding: 4px 9px;
    border-radius: 4px;
    background: var(--artemis-red, #ff325a);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.am-pdp__seller {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    font-size: 13px;
    color: #4d4d50;
}

.am-pdp__seller img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: #eee;
}

.am-pdp__seller a {
    font-weight: 700;
    color: #111113;
}

.am-pdp__seller a:hover {
    color: var(--artemis-red, #ff325a);
}

/* Price ------------------------------------------------------------------ */

.am-pdp__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}

.am-pdp__price-now {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: #111113;
}

.am-pdp__price-was {
    font-size: 15px;
    color: #99999c;
    text-decoration: line-through;
}

.am-pdp__price-off {
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255, 50, 90, .12);
    color: var(--artemis-red, #ff325a);
    font-size: 11.5px;
    font-weight: 700;
}

.am-pdp__price-note {
    margin: 0 0 18px;
    font-size: 12px;
    color: #8a8a8d;
}

/* Selector groups -------------------------------------------------------- */

.am-pdp__group {
    margin-bottom: 20px;
}

.am-pdp__group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.am-pdp__label {
    font-size: 17px;
    font-weight: 700;
    color: #111113;
}

.am-pdp__label-value {
    font-weight: 500;
    color: #6f6f71;
}

.am-pdp__label.has-error {
    color: var(--artemis-red, #ff325a);
}

.am-pdp__link,
.am-pdp__link:visited {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--artemis-red, #ff325a);
    text-decoration: none;
}

.am-pdp__link:hover {
    text-decoration: underline;
    color: var(--artemis-red, #ff325a);
}

.am-pdp__options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Colour swatches — circles, dark ring + tick when selected */

.am-pdp__swatch {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .16);
    background-repeat: repeat;
    background-size: 200px 200px;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}

.am-pdp__swatch:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
}

.am-pdp__swatch.selected {
    box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px #111113;
}

/* Tick drawn in CSS so it sits above any swatch texture */
.am-pdp__swatch.selected::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 12px;
    margin: -8px 0 0 -4px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .55));
}

/* The custom-colour picker is a native <input type="color"> */
input.am-pdp__swatch {
    padding: 0;
    background-size: cover;
    background-position: center;
    -webkit-appearance: none;
    appearance: none;
}

input.am-pdp__swatch::-webkit-color-swatch-wrapper { padding: 0; }
input.am-pdp__swatch::-webkit-color-swatch { border: none; border-radius: 50%; }
input.am-pdp__swatch::-moz-color-swatch { border: none; border-radius: 50%; }

/* Size / model / printable chips */

.am-pdp__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #d9d9dd;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #4d4d50;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.am-pdp__chip:hover {
    border-color: #111113;
    color: #111113;
}

.am-pdp__chip.selected {
    border-color: #111113;
    background: #111113;
    color: #fff;
}

/* Combination not orderable — kept visible so the range stays legible */
.am-pdp__chip.un-available,
.am-pdp__chip.disabled {
    color: #c2c2c6;
    border-color: #ececee;
    background: #fbfbfc;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Print positions are checkboxes styled as chips */
.am-pdp__chip--check {
    position: relative;
    margin: 0;
    font-weight: 600;
}

.am-pdp__chip--check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.am-pdp__chip--check:has(input:checked) {
    border-color: #111113;
    background: #111113;
    color: #fff;
}

/* :has() is unsupported in older browsers — JS mirrors the state onto .selected */
.am-pdp__chip--check.selected {
    border-color: #111113;
    background: #111113;
    color: #fff;
}

.am-pdp__chip--check input:focus-visible + span {
    outline: 2px solid var(--artemis-red, #ff325a);
    outline-offset: 3px;
}

/* Quantity + actions ----------------------------------------------------- */

/* Sits in .am-pdp__actions alongside both CTAs — matches their height */
.am-pdp__qty {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    height: 46px;
    border: 1px solid #d9d9dd;
    border-radius: 8px;
    overflow: hidden;
}

.am-pdp__qty button {
    width: 40px;
    border: none;
    background: #fff;
    font-size: 18px;
    line-height: 1;
    color: #111113;
    cursor: pointer;
    transition: background-color .15s ease;
}

.am-pdp__qty button:hover {
    background: #f4f4f6;
}

.am-pdp__qty input {
    width: 58px;
    padding: 8px 4px;
    border: none;
    border-left: 1px solid #e6e6e9;
    border-right: 1px solid #e6e6e9;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}

.am-pdp__qty input::-webkit-outer-spin-button,
.am-pdp__qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.am-pdp__actions {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.am-pdp__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 22px;
    border-radius: 8px;
    border: 1px solid #111113;
    font-size: 14.5px;
    font-weight: 700;
    /* Labels must never wrap to a second line inside a fixed-height button */
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* The .add-to-cart-btn class is required by the GA4 dataLayer handler, and
   eshop/css/custom.css gives it width:100% — which as a flex-basis let this button
   eat the whole row and squeeze "Buy Now" until its label wrapped. Reset it here. */
.am-pdp__btn--cart {
    flex: 1 1 auto;
    width: auto;
    background: #fff;
    color: #111113;
}

.am-pdp__btn--cart:hover {
    background: #f4f4f6;
}

.am-pdp__btn--buy {
    flex: 1 1 auto;
    width: auto;
    border-color: var(--artemis-red, #ff325a);
    background: var(--artemis-red, #ff325a);
    color: #fff;
}

.am-pdp__btn--buy:hover {
    background: #e02a4d;
    border-color: #e02a4d;
    color: #fff;
}

/* Shown while the GET form reloads after a selection */
.am-pdp.is-loading .am-pdp__buy {
    opacity: .55;
    pointer-events: none;
    transition: opacity .12s ease;
}

/* Prompt shown until every required attribute is chosen */
.am-pdp__prompt {
    margin-top: 16px;
    padding: 13px 15px;
    border: 1px dashed #d9d9dd;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #4d4d50;
}

.am-pdp__prompt b {
    color: #111113;
    text-transform: capitalize;
}

.am-pdp__reset {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 13px;
    color: #6f6f71;
    text-decoration: underline;
}

.am-pdp__reset:hover {
    color: var(--artemis-red, #ff325a);
}

.am-pdp__alert {
    padding: 13px 15px;
    border-radius: 8px;
    background: rgba(255, 50, 90, .1);
    color: #b3213e;
    font-size: 14px;
}

/* ------------------------------------------------------- Lower page ------ */

.am-pdp__section {
    margin-top: 54px;
}

.am-pdp__section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.am-pdp__section-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: #111113;
}

/* Also-available-on: a horizontal rail of the shared product cards */
.am-pdp__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 1fr);
    gap: 22px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
}

.am-pdp__rail > * {
    scroll-snap-align: start;
}

/* "You may like": a 6-up grid rather than a rail — this is a browse row, not a
   variant row, so it should read like the listing page. */
.am-pdp__suggest {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 28px 20px;
}

/* Description blocks, one per source of copy */
.am-pdp__desc + .am-pdp__desc {
    margin-top: 26px;
}

.am-pdp__desc-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2px;
    text-transform: uppercase;
    color: #6f6f71;
}

.am-pdp__desc-body {
    font-size: 14.5px;
    line-height: 1.7;
    color: #4d4d50;
}

.am-pdp__desc-body :last-child {
    margin-bottom: 0;
}

/* Description HTML is authored in the admin editor, so it carries whatever inline
   sizing the author left behind — category 74 ships style="width:700px;height:700px".
   An inline width beats a stylesheet width, so cap with max-width and force height
   back to auto, or the image overflows the column and distorts on narrow screens. */
.am-pdp__desc-body img {
    max-width: 100%;
    height: auto !important;
    border-radius: 8px;
}

/* --------------------------------------------------- Breakpoints --------- */

@media (max-width: 1199px) {
    .am-pdp__grid {
        gap: 34px;
    }

    .am-pdp__suggest {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .am-pdp__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    /* Sticky only makes sense beside the media column */
    .am-pdp__buy {
        position: static;
    }

    .am-pdp__suggest {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .am-pdp__section {
        margin-top: 40px;
    }
}

@media (max-width: 575px) {
    .am-pdp {
        padding: 16px 0 44px;
    }

    .am-pdp__title {
        font-size: 21px;
    }

    .am-pdp__price-now {
        font-size: 22px;
    }

    .am-pdp__label {
        font-size: 15px;
    }

    .am-pdp__swatch {
        width: 34px;
        height: 34px;
    }

    .am-pdp__chip {
        min-width: 46px;
        height: 36px;
        padding: 0 12px;
        font-size: 13px;
    }

    /* Three across is too tight on a phone: quantity keeps its own line,
       then each CTA takes a full-width row. */
    .am-pdp__qty {
        flex: 0 0 auto;
    }

    .am-pdp__btn {
        flex: 1 1 100%;
        width: 100%;
    }

    .am-pdp__section-title {
        font-size: 18px;
    }

    .am-pdp__rail {
        grid-auto-columns: minmax(150px, 1fr);
        gap: 14px;
    }

    .am-pdp__suggest {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 12px;
    }
}