/* ══════════════════════════════════════════════════════════
   Product Detail Page (PDP)
   ══════════════════════════════════════════════════════════ */

.pdp-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 1rem 4rem;
}

/* ── Breadcrumb ── */
.pdp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

    .pdp-breadcrumb a {
        color: var(--color-primary);
        text-decoration: none;
    }

        .pdp-breadcrumb a:hover {
            text-decoration: underline;
        }

.pdp-breadcrumb-sep {
    color: var(--color-text-muted);
    opacity: 0.5;
}

/* ── Two-column layout ── */
.pdp-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: flex-start;
}

/* ── Images ── */
.pdp-images {
    position: sticky;
    top: calc(var(--topbar-h, 64px) + 1.5rem);
    /* z-index above pdp-info so the magnifier lens (which can overflow
       this column when the cursor is near a wrapper edge) renders above
       the product-info column on the right. */
    z-index: 1;
}

.pdp-main-image-wrap {
    position: relative;
    border-radius: 14px;
    /* overflow: visible so the magnifier lens can extend past the wrapper
       edges when the cursor is near an edge. The lens always centers on
       the cursor; clipping it (the previous overflow: hidden) made the
       visible lens asymmetric at edges, which read as "lens is offset
       from cursor". The image keeps its own border-radius below so the
       rounded-corner look is preserved without the wrapper-level clip. */
    overflow: visible;
    background: var(--color-bg, #f5f3f0);
}

.pdp-main-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    /* Match the wrapper's radius so the image still has rounded corners
       now that the wrapper no longer clips its children. */
    border-radius: 14px;
}

/* ── Magnifier lens (hover zoom) ──
   The lens is a square overlay positioned by pdp-zoom.js on mousemove.
   The zoomed view is rendered as a background-image directly on the
   lens, with background-size that preserves the source's natural
   aspect ratio (= the source rendered at main-image-scale × zoom)
   and background-position computed so the cursor's source pixel
   lands at the lens's visual center. Earlier versions used an inner
   <img> with object-fit: cover and CSS transform, which silently
   cropped portrait sources to a square inside the lens — panning
   could only ever expose the middle slice of the photo and the top
   and bottom strips were permanently invisible. The bg-image
   approach keeps the entire source available for panning and makes
   the cover-fit math explicit in the JS.

   Tunable via three CSS custom properties on the wrapper, with
   sensible defaults read by the script:
     --zoom-lens-size    side length of the lens (default 200px)
     --zoom-factor       image scale inside the lens (default 2.5)
     --zoom-lens-radius  corner radius of the lens (default 0 = square;
                         set to 50% for circle, 8px for soft corners)
*/
.pdp-main-image-wrap {
    --zoom-lens-size: 200px;
    --zoom-factor: 2.5;
    --zoom-lens-radius: 0;
}

.pdp-zoom-lens {
    position: absolute;
    width: var(--zoom-lens-size);
    height: var(--zoom-lens-size);
    border-radius: var(--zoom-lens-radius);
    overflow: hidden; /* clip the bg image to the lens shape */

    /* border-box so width/height include the 3px border. With the default
       content-box, the lens's *rendered* size would be (lensSize + 6)px
       — the JS centering math assumes the visible box matches lensSize
       exactly, so without this the lens centers ~3px off-cursor. */
    box-sizing: border-box;

    /* Decorative chrome — white ring + drop shadow gives the magnifier
       its glass-lens look on top of any photo. Hardcoded intentionally:
       the lens needs to stand out from the underlying image regardless
       of theme tokens; tinting it from --color-* would risk the lens
       blending into specific product photos. */
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(0, 0, 0, 0.15) inset;

    /* Fallback bg color shows for the brief moment between display:block
       and the bg-image first paint, and at any wrapper-edge overflow. */
    background-color: var(--color-bg);
    background-repeat: no-repeat;
    pointer-events: none; /* cursor events pass through to the wrapper */
    display: none;        /* shown by JS while hovering */
    z-index: 5;
}

/* Touch devices: keep the lens hidden and skip the cursor change. The
   inline mousemove handler is a no-op on tap (mousemove doesn't fire),
   so no JS-side gate is needed here. */
@media (hover: hover) {
    .pdp-main-image-wrap {
        cursor: zoom-in;
    }
}

@media (hover: none) {
    .pdp-zoom-lens {
        display: none !important;
    }
}

.pdp-image-placeholder {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--color-text-muted);
}

.pdp-sale-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--color-danger);
    color: var(--color-text-inverse);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pdp-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.pdp-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, opacity 0.15s;
    opacity: 0.6;
}

    .pdp-thumb.active,
    .pdp-thumb:hover {
        border-color: var(--color-primary);
        opacity: 1;
    }

/* ── Product info ── */
.pdp-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pdp-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.25;
}

/* ── Title row ──
   Wraps the H1 + ShareButton in a flex container so Share sits to the
   right of the product title. The title flexes to fill the available
   width while the share button keeps its intrinsic size. On narrow
   viewports the row stays horizontal — the share trigger is small
   enough that it doesn't crowd even a long product title at mobile
   sizes. align-items: flex-start keeps the share button aligned to
   the top of the H1 if the title wraps to two lines. */
.pdp-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.pdp-title-row > .pdp-title {
    flex: 1;
    min-width: 0;
}

.pdp-title-row > .share-button-wrap {
    flex-shrink: 0;
}

.pdp-source {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.pdp-price {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.pdp-description {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.7;
}

.pdp-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pdp-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

/* ── Quantity selector ── */
.pdp-qty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pdp-qty-value {
    min-width: 32px;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
}

/* ── Added confirmation toast ── */
.pdp-added-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-surface, #1e2235);
    border: 1px solid var(--color-border, #2e3347);
    border-radius: 12px;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    z-index: 1200;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    animation: pdpToastIn 0.3s ease;
    font-size: 0.92rem;
    font-weight: 600;
}

    .pdp-added-toast span {
        color: var(--color-success);
    }

    .pdp-added-toast a {
        color: var(--color-primary);
        text-decoration: none;
        font-weight: 600;
        white-space: nowrap;
    }

        .pdp-added-toast a:hover {
            text-decoration: underline;
        }

@keyframes pdpToastIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .pdp-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .pdp-images {
        position: static;
    }

    .pdp-title {
        font-size: 1.3rem;
    }

    .pdp-wrapper {
        padding: 0.75rem 0.75rem 3rem;
    }

    .pdp-thumbs {
        gap: 6px;
    }

    .pdp-thumb {
        width: 60px;
        height: 60px;
    }
}

.shop-buy-btn {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-checkout-btn {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ════════════════════════════════════════════════════════
   Personalization — graphic upload (Image input type)
   Used by buyers to upload a logo/artwork for printing or engraving.
   Companion to the text personalization inputs above.
   ═══════════════════════════════════════════════════════ */

/* Empty-state dropzone shown until a file is chosen. */
.pdp-graphic-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.5rem 1rem;
    border: 1.5px dashed var(--color-input-border);
    border-radius: var(--radius-md);
    background: var(--color-input-bg);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

    .pdp-graphic-dropzone:hover {
        border-color: var(--color-input-focus);
        background: var(--color-surface-alt);
    }

    .pdp-graphic-dropzone.uploading {
        border-style: solid;
        cursor: wait;
    }

.pdp-graphic-dropzone-icon {
    font-size: 1.6rem;
    line-height: 1;
    opacity: 0.75;
}

.pdp-graphic-dropzone-text {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Filled-state preview: thumbnail / vector icon, filename, metadata, remove. */
.pdp-graphic-preview {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
}

.pdp-graphic-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    flex-shrink: 0;
}

/* Vector files don't render natively in <img> reliably across formats
   (ai/eps especially), so we show a simple monogram tile instead. */
.pdp-graphic-vector-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    flex-shrink: 0;
}

.pdp-graphic-info {
    flex: 1;
    min-width: 0;
}

.pdp-graphic-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdp-graphic-meta {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}

.pdp-graphic-remove {
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    width: 28px;
    height: 28px;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

    .pdp-graphic-remove:hover:not(:disabled) {
        background: var(--color-danger-bg);
        color: var(--color-danger);
        border-color: var(--color-danger-border);
    }

    .pdp-graphic-remove:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Spec hint sits under the dropzone/preview so the buyer always sees
   what's required. .shop-modal-help provides the base muted look; this
   selector just adds top spacing and ensures it lays out as a block. */
.pdp-graphic-spec {
    display: block;
    margin-top: 0.4rem;
}

.pdp-graphic-error {
    display: block;
    margin-top: 0.4rem;
    color: var(--color-danger);
    font-size: 0.82rem;
}

/* ── Description section ──────────────────────────────────────────
   Sits below the image + add-to-cart row as a full-width reading area.
   The inner .rte-content div picks up shared rich-text typography from
   the global stylesheet (same rule that styles Learn / WhenAndWhere /
   Contact page bodies), so we only set the frame, divider, heading, and
   reading-column width here. */
.pdp-description-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
    max-width: 720px;
}

.pdp-section-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
    line-height: 1.3;
}