/* ============================================================================
 *  Product detail page (/product/<slug>)
 * ----------------------------------------------------------------------------
 *  Written against the v-redesign token set (assets/css/vamsi-redesign.css).
 *  Uses only --v-* tokens so an admin brand-colour change flows through here
 *  too. vamsi-animate.css is already loaded site-wide by includes/header.php,
 *  so .va-* motifs (shine, glow, scroll reveal) are available without a new
 *  <link>.
 *
 *  House motifs reused deliberately, so this page reads as the same site:
 *    • 135deg orange gradient CTA + tinted glow shadow that grows on hover
 *    • deep-indigo (--v-accent) as the "serious" counterweight to the orange
 *    • card lift on hover (translateY + shadow-lg + border dissolves)
 *    • kicker / title / decorative 40px underline section headings
 *    • radial orange bloom on indigo, from .v-page-banner
 * ========================================================================== */

/* ── Page shell ─────────────────────────────────────────────────────────── */
.pd-page {
    background: var(--v-bg);
    /* Ambient orange bloom behind the fold — the .v-page-banner motif, dialled
       down so product photography stays the loudest thing on screen. */
    background-image:
        radial-gradient(900px circle at 88% -8%, rgba(255, 107, 53, .10), transparent 60%),
        radial-gradient(700px circle at 2% 4%, rgba(99, 102, 241, .07), transparent 55%);
    background-repeat: no-repeat;
}

.pd-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--v-space-4);
    position: relative;
}

/* ── Top bar: breadcrumb + checkout ─────────────────────────────────────── */
.pd-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v-space-4);
    flex-wrap: wrap;
    padding: var(--v-space-6) 0 var(--v-space-3);
}

.pd-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: var(--v-font-size-sm);
    color: var(--v-text-muted);
    min-width: 0;
}
.pd-crumbs a {
    color: var(--v-text-secondary);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--v-duration-fast) var(--v-ease);
}
.pd-crumbs a:hover { color: var(--v-primary-dark); }
.pd-crumbs .sep { color: var(--v-border); }
.pd-crumbs .current {
    color: var(--v-text);
    font-weight: 600;
    max-width: 42ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cart / checkout pill, sits at the right end of the crumb row.
   Scoped under .v-redesign so it outranks `.v-redesign a { color: inherit }`
   in vamsi-redesign.css — otherwise the label renders navy-on-navy. */
.v-redesign .pd-checkout {
    display: inline-flex;
    align-items: center;
    gap: var(--v-space-2);
    flex: 0 0 auto;
    white-space: nowrap;
    background: var(--v-accent);
    color: var(--v-white);
    font-weight: 700;
    font-size: var(--v-font-size-sm);
    padding: 10px 18px;
    border-radius: var(--v-radius-full);
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(27, 20, 100, .28);
    transition: transform var(--v-duration) var(--v-ease), box-shadow var(--v-duration) var(--v-ease);
}
.v-redesign .pd-checkout:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(27, 20, 100, .38);
}
.pd-checkout .ck-cart-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--v-radius-full);
    background: var(--v-primary);
    color: var(--v-white);
    font-size: var(--v-font-size-xs);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.pd-checkout .ck-cart-badge:empty,
.pd-checkout .ck-cart-badge[data-count="0"] { display: none; }

/* ── Main two-column layout ─────────────────────────────────────────────── */
.pd {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--v-space-12);
    align-items: start;
    padding: var(--v-space-3) 0 var(--v-space-12);
}

/* ── Gallery ────────────────────────────────────────────────────────────── */
.pd-gallery {
    display: flex;
    gap: var(--v-space-4);
    align-items: flex-start;
    position: sticky;
    top: calc(var(--v-header-height) + var(--v-space-4));
}
.pd-thumbs {
    display: flex;
    flex-direction: column;
    gap: var(--v-space-3);
    flex: 0 0 auto;
}
.pd-thumb {
    width: 70px;
    height: 70px;
    border-radius: var(--v-radius-md);
    overflow: hidden;
    border: 2px solid var(--v-border);
    background: var(--v-white);
    cursor: pointer;
    padding: 0;
    transition: border-color var(--v-duration-fast) var(--v-ease),
                transform var(--v-duration-fast) var(--v-ease),
                box-shadow var(--v-duration-fast) var(--v-ease);
}
/* Scoped under .v-redesign: header.php re-links vamsi-redesign.css inside
   <body>, so its `.v-redesign img { height: auto }` would otherwise land after
   this file and win on equal specificity — collapsing the image box. */
.v-redesign .pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--v-white);
    display: block;
}
.pd-thumb:hover {
    transform: translateY(-2px);
    border-color: var(--v-primary-light);
    box-shadow: var(--v-shadow);
}
.pd-thumb.active {
    border-color: var(--v-primary);
    box-shadow: 0 0 0 3px var(--v-primary-glow);
}

/* Main image: square, whole product shown (contain — never crop a cracker). */
.pd-main {
    flex: 1;
    max-width: 600px;
    aspect-ratio: 1 / 1;
    position: relative;
    border-radius: var(--v-radius-2xl);
    overflow: hidden;
    background: var(--v-white);
    border: 1px solid var(--v-border);
    box-shadow: var(--v-shadow-lg);
}
.v-redesign .pd-main img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: var(--v-white);
    transition: transform var(--v-duration-slow) var(--v-ease);
}
.pd-main:hover img { transform: scale(1.06); }

/* Discount flag, mirrors .v-product-badge */
.pd-flag {
    position: absolute;
    top: var(--v-space-4);
    left: var(--v-space-4);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, var(--v-primary), var(--v-primary-dark));
    color: var(--v-white);
    font-size: var(--v-font-size-xs);
    font-weight: 800;
    letter-spacing: .03em;
    padding: 6px 12px;
    border-radius: var(--v-radius-full);
    box-shadow: 0 4px 14px rgba(255, 107, 53, .35);
}

/* ── Info column ────────────────────────────────────────────────────────── */
.pd-info { padding-top: var(--v-space-1); }

.pd-cat {
    display: inline-block;
    font-size: var(--v-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--v-primary-dark);
    background: var(--v-primary-glow);
    padding: 6px 14px;
    border-radius: var(--v-radius-full);
    margin-bottom: var(--v-space-4);
}
.pd-title {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.15;
    margin: 0 0 var(--v-space-3);
    color: var(--v-accent);
    letter-spacing: -.02em;
    font-weight: 800;
}
.pd-rating {
    display: flex;
    align-items: center;
    gap: var(--v-space-2);
    margin: 0 0 var(--v-space-5);
    font-size: var(--v-font-size-sm);
}
.pd-rating a { color: var(--v-text-muted); text-decoration: none; }
.pd-rating a:hover { color: var(--v-primary-dark); text-decoration: underline; }

/* Price card — the single loudest element in the column. */
.pd-price-card {
    background: var(--v-white);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius-lg);
    padding: var(--v-space-5);
    margin-bottom: var(--v-space-5);
    box-shadow: var(--v-shadow-sm);
}
.pd-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--v-space-3);
    margin: 0 0 var(--v-space-2);
}
.pd-price .now {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--v-primary-dark);
    line-height: 1;
}
.pd-price .was {
    font-size: var(--v-font-size-lg);
    color: var(--v-text-muted);
    text-decoration: line-through;
}
.pd-price .off {
    font-size: var(--v-font-size-xs);
    font-weight: 800;
    color: #0a7d3b;
    background: #e5f8ec;
    padding: 5px 11px;
    border-radius: var(--v-radius-full);
}
.pd-save {
    font-size: var(--v-font-size-sm);
    font-weight: 700;
    color: #0a7d3b;
    margin: 0 0 var(--v-space-1);
}
.pd-note {
    font-size: var(--v-font-size-sm);
    color: var(--v-text-secondary);
    margin: 0;
}
.pd-lead {
    font-size: var(--v-font-size-base);
    line-height: 1.7;
    color: var(--v-text-secondary);
    margin: 0 0 var(--v-space-6);
    max-width: 48ch;
}

/* ── Quantity + actions ─────────────────────────────────────────────────── */
.pd-qty-label {
    display: block;
    font-size: var(--v-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--v-text-secondary);
    margin: var(--v-space-2) 0 var(--v-space-2);
}
.ck-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius-md);
    overflow: hidden;
    background: var(--v-white);
    height: 54px; /* clears the 48px touch-target rule */
}
.ck-qty button {
    width: 48px;
    border: none;
    background: var(--v-bg-alt);
    color: var(--v-accent);
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    transition: background var(--v-duration-fast) var(--v-ease), color var(--v-duration-fast) var(--v-ease);
}
.ck-qty button:hover { background: var(--v-primary-glow); color: var(--v-primary-dark); }
.ck-qty button:active { transform: scale(.94); }
.ck-qty input {
    width: 62px;
    border: none;
    text-align: center;
    font: inherit;
    font-weight: 700;
    font-size: var(--v-font-size-lg);
    color: var(--v-text);
    background: transparent;
    -moz-appearance: textfield;
}
.ck-qty input::-webkit-outer-spin-button,
.ck-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pd-buy-row {
    display: flex;
    align-items: center;
    gap: var(--v-space-3);
    margin: 0 0 var(--v-space-3);
    flex-wrap: wrap;
}

/* Add to cart — outline weight, so Buy Now stays the hero. */
.ck-pd-cart {
    flex: 1;
    min-width: 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--v-space-2);
    height: 54px;
    font-weight: 700;
    font-size: var(--v-font-size-base);
    padding: 0 var(--v-space-6);
    border-radius: var(--v-radius-md);
    cursor: pointer;
    background: var(--v-white);
    color: var(--v-primary-dark);
    border: 2px solid var(--v-primary);
    transition: background var(--v-duration) var(--v-ease),
                transform var(--v-duration-fast) var(--v-ease),
                box-shadow var(--v-duration) var(--v-ease);
}
.ck-pd-cart:hover {
    background: var(--v-primary-glow);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 107, 53, .22);
}
.ck-pd-cart:active { transform: translateY(0); }
.ck-pd-cart:disabled { opacity: .65; cursor: default; transform: none; }

.pd-wish {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border: 1px solid var(--v-border);
    background: var(--v-white);
    border-radius: var(--v-radius-md);
    color: var(--v-text-muted);
    font-size: var(--v-font-size-lg);
    cursor: pointer;
    transition: color var(--v-duration) var(--v-ease),
                border-color var(--v-duration) var(--v-ease),
                background var(--v-duration) var(--v-ease),
                transform var(--v-duration-fast) var(--v-ease);
}
.pd-wish:hover { transform: translateY(-2px); }
.pd-wish:hover,
.pd-wish.on {
    color: var(--v-primary);
    border-color: var(--v-primary-light);
    background: var(--v-primary-glow);
}

/* Buy Now — the house primary: 135deg gradient + glow that grows on hover. */
.ck-buy-now {
    position: relative;
    overflow: hidden;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--v-space-2);
    height: 58px;
    margin: 0 0 var(--v-space-5);
    font-weight: 800;
    font-size: 1.05rem;
    border: none;
    cursor: pointer;
    border-radius: var(--v-radius-md);
    color: var(--v-white);
    background: linear-gradient(135deg, var(--v-primary) 0%, var(--v-primary-dark) 100%);
    box-shadow: 0 10px 26px -8px rgba(255, 107, 53, .55);
    transition: transform var(--v-duration-fast) var(--v-ease), box-shadow var(--v-duration) var(--v-ease);
}
.ck-buy-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -8px rgba(255, 107, 53, .65);
}
.ck-buy-now:active { transform: translateY(0); }
.ck-buy-now:disabled { opacity: .65; cursor: default; transform: none; }

.pd-alt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v-space-2);
    margin-bottom: var(--v-space-5);
}
.pd-alt-actions a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: var(--v-font-size-sm);
    padding: 10px 16px;
    border-radius: var(--v-radius-full);
    text-decoration: none;
    transition: background var(--v-duration) var(--v-ease), transform var(--v-duration-fast) var(--v-ease);
}
.pd-alt-actions a:hover { transform: translateY(-1px); }
.pd-alt-wa { background: rgba(37, 211, 102, .12); color: #1c8f4d; }
.pd-alt-wa:hover { background: rgba(37, 211, 102, .2); }
.pd-alt-list { background: var(--v-bg-alt); color: var(--v-text-secondary); }
.pd-alt-list:hover { background: var(--v-border-light); color: var(--v-accent); }

/* ── Trust strip ────────────────────────────────────────────────────────── */
.pd-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--v-space-3);
    border-top: 1px solid var(--v-border);
    padding-top: var(--v-space-5);
}
.pd-trust span {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    font-size: var(--v-font-size-xs);
    font-weight: 600;
    color: var(--v-text-secondary);
    line-height: 1.35;
}
.pd-trust i {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v-radius-full);
    background: var(--v-primary-glow);
    color: var(--v-primary-dark);
    font-size: var(--v-font-size-base);
}

/* ── Sticky mobile buy bar ──────────────────────────────────────────────── */
/* Hidden by default; only ever shown ≤900px, and always parked ABOVE the
   fixed .v-mobile-bottom-nav (which reserves 68px + safe-area at ≤640px). */
.pd-sticky-buy {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    align-items: center;
    gap: var(--v-space-3);
    padding: 10px var(--v-space-4);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--v-border);
    box-shadow: 0 -6px 24px rgba(15, 23, 42, .10);
    transform: translateY(110%);
    transition: transform var(--v-duration) var(--v-ease);
}
.pd-sticky-buy.show { transform: translateY(0); }
.pd-sticky-price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: 0 0 auto;
}
.pd-sticky-price .now {
    font-size: var(--v-font-size-lg);
    font-weight: 800;
    color: var(--v-primary-dark);
}
.pd-sticky-price .was {
    font-size: var(--v-font-size-xs);
    color: var(--v-text-muted);
    text-decoration: line-through;
}
.pd-sticky-buy .ck-buy-now {
    margin: 0;
    height: 48px;
    font-size: var(--v-font-size-base);
    flex: 1;
}

/* ── Details: tabbed panel ──────────────────────────────────────────────── */
.pd-details {
    background: var(--v-white);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius-xl);
    box-shadow: var(--v-shadow-sm);
    overflow: hidden;
    margin-bottom: var(--v-space-12);
}
.pd-tabs {
    display: flex;
    gap: var(--v-space-1);
    padding: 0 var(--v-space-5);
    border-bottom: 1px solid var(--v-border);
    background: var(--v-bg-alt);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pd-tabs::-webkit-scrollbar { display: none; }
.pd-tab {
    position: relative;
    flex: 0 0 auto;
    border: none;
    background: none;
    cursor: pointer;
    padding: var(--v-space-4) var(--v-space-4);
    font: inherit;
    font-size: var(--v-font-size-sm);
    font-weight: 700;
    color: var(--v-text-muted);
    white-space: nowrap;
    transition: color var(--v-duration) var(--v-ease);
}
.pd-tab::after {
    content: "";
    position: absolute;
    left: var(--v-space-4);
    right: var(--v-space-4);
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--v-primary), var(--v-indigo));
    transform: scaleX(0);
    transition: transform var(--v-duration) var(--v-ease);
}
.pd-tab:hover { color: var(--v-text); }
.pd-tab[aria-selected="true"] { color: var(--v-accent); }
.pd-tab[aria-selected="true"]::after { transform: scaleX(1); }

.pd-panel { padding: var(--v-space-6) var(--v-space-5); }
.pd-panel[hidden] { display: none; }
.pd-desc-body {
    font-size: var(--v-font-size-base);
    line-height: 1.8;
    color: var(--v-text-secondary);
    max-width: 72ch;
}
.pd-desc-body p { margin: 0 0 1rem; }
.pd-desc-body p:last-child { margin-bottom: 0; }

.pd-incl {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--v-space-2) var(--v-space-6);
}
.pd-incl li {
    display: flex;
    gap: var(--v-space-3);
    align-items: flex-start;
    padding: var(--v-space-3) 0;
    border-bottom: 1px solid var(--v-border-light);
    color: var(--v-text);
    font-size: var(--v-font-size-sm);
    line-height: 1.5;
}
.pd-incl li i {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--v-radius-full);
    background: rgba(16, 185, 129, .14);
    color: var(--v-success);
    font-size: .7rem;
    margin-top: 1px;
}

/* ── Shared section heading (kicker + title + 40px underline) ───────────── */
.pd-sec { margin-bottom: var(--v-space-12); }
.pd-sec-kicker {
    display: inline-block;
    font-size: var(--v-font-size-xs);
    font-weight: 700;
    color: var(--v-primary);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: var(--v-space-2);
}
.pd-sec-title {
    position: relative;
    font-size: var(--v-font-size-2xl);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--v-accent);
    margin: 0 0 var(--v-space-6);
    padding-bottom: var(--v-space-3);
}
.pd-sec-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    border-radius: 3px;
    background: var(--v-primary);
}

/* ── Reviews ────────────────────────────────────────────────────────────── */
.ck-stars { color: #f5a623; letter-spacing: 1px; font-size: var(--v-font-size-base); line-height: 1; }
.ck-stars .empty { color: var(--v-border); }

.ck-rev-summary {
    display: flex;
    align-items: center;
    gap: var(--v-space-4);
    background: var(--v-white);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius-lg);
    padding: var(--v-space-5);
    margin: 0 0 var(--v-space-6);
    box-shadow: var(--v-shadow-sm);
}
.ck-rev-summary .big {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--v-accent);
    line-height: 1;
    letter-spacing: -.02em;
}
.ck-rev-summary .meta {
    font-size: var(--v-font-size-sm);
    color: var(--v-text-secondary);
    line-height: 1.6;
}

.ck-rev-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--v-space-4);
    margin: 0 0 var(--v-space-8);
}
.ck-rev {
    background: var(--v-white);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius-lg);
    padding: var(--v-space-5);
    transition: transform var(--v-duration) var(--v-ease),
                box-shadow var(--v-duration) var(--v-ease),
                border-color var(--v-duration) var(--v-ease);
}
.ck-rev:hover {
    transform: translateY(-4px);
    box-shadow: var(--v-shadow-lg);
    border-color: transparent;
}
.ck-rev-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--v-space-2);
}
.ck-rev-author { font-weight: 700; color: var(--v-text); }
.ck-rev-date { font-size: var(--v-font-size-xs); color: var(--v-text-muted); }
.ck-rev-title { font-weight: 700; color: var(--v-accent); margin: var(--v-space-2) 0 var(--v-space-1); }
.ck-rev-body { color: var(--v-text-secondary); line-height: 1.7; margin: 0; font-size: var(--v-font-size-sm); }
.ck-rev-empty { color: var(--v-text-muted); margin: 0 0 var(--v-space-6); }

.ck-rev-form {
    background: var(--v-white);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius-xl);
    padding: var(--v-space-6);
    max-width: 640px;
    box-shadow: var(--v-shadow-sm);
}
.ck-rev-form h3 { margin: 0 0 var(--v-space-3); font-size: var(--v-font-size-xl); color: var(--v-accent); font-weight: 800; }
.ck-rev-form label {
    display: block;
    font-size: var(--v-font-size-sm);
    font-weight: 600;
    color: var(--v-text);
    margin: var(--v-space-4) 0 6px;
}
.ck-rev-form input[type=text],
.ck-rev-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius);
    font: inherit;
    font-size: var(--v-font-size-sm);
    background: var(--v-white);
    color: var(--v-text);
    transition: border-color var(--v-duration-fast) var(--v-ease), box-shadow var(--v-duration-fast) var(--v-ease);
}
.ck-rev-form input[type=text]:focus,
.ck-rev-form textarea:focus {
    outline: none;
    border-color: var(--v-primary);
    box-shadow: 0 0 0 3px var(--v-primary-glow);
}
.ck-rev-form textarea { min-height: 110px; resize: vertical; }
.ck-rev-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ck-rev-form .opt { font-weight: 400; color: var(--v-text-muted); }

.ck-star-pick { display: inline-flex; flex-direction: row-reverse; gap: 5px; line-height: 1; }
.ck-star-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
/* font-size must be set on the label itself: `.ck-rev-form label` above sets
   14px, which would otherwise beat inheritance from .ck-star-pick. */
.ck-star-pick label {
    font-size: 1.9rem;
    color: var(--v-border);
    cursor: pointer;
    margin: 0;
    transition: color var(--v-duration-fast) var(--v-ease), transform var(--v-duration-fast) var(--v-ease);
}
.ck-star-pick input:checked ~ label,
.ck-star-pick label:hover,
.ck-star-pick label:hover ~ label { color: #f5a623; }
.ck-star-pick label:hover { transform: scale(1.15); }
.ck-star-pick input:focus-visible + label { outline: 2px solid var(--v-primary); outline-offset: 2px; border-radius: 4px; }

.ck-rev-form .v-btn-submit {
    margin-top: var(--v-space-5);
    display: inline-flex;
    align-items: center;
    gap: var(--v-space-2);
    background: linear-gradient(135deg, var(--v-primary), var(--v-primary-dark));
    color: var(--v-white);
    font-weight: 700;
    font-size: var(--v-font-size-sm);
    padding: 13px 28px;
    border: none;
    border-radius: var(--v-radius-full);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255, 107, 53, .3);
    transition: transform var(--v-duration-fast) var(--v-ease), box-shadow var(--v-duration) var(--v-ease);
}
.ck-rev-form .v-btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, .4);
}

.ck-rev-flash {
    background: #e5f8ec;
    border: 1px solid #b7e6c8;
    color: #0a7d3b;
    padding: 13px 16px;
    border-radius: var(--v-radius);
    margin: 0 0 var(--v-space-5);
    font-size: var(--v-font-size-sm);
    font-weight: 600;
}
.ck-rev-flash.err { background: #fdecec; border-color: #f5c2c2; color: #b3261e; }

/* ── Related products (adopts the .v-product-card language) ─────────────── */
.ck-rel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--v-space-5);
}
.ck-rel-card {
    display: flex;
    flex-direction: column;
    background: var(--v-white);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius-lg);
    overflow: hidden;
    text-decoration: none;
    transition: transform var(--v-duration) var(--v-ease),
                box-shadow var(--v-duration) var(--v-ease),
                border-color var(--v-duration) var(--v-ease);
}
.ck-rel-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--v-shadow-lg);
    border-color: transparent;
}
.ck-rel-media { overflow: hidden; background: var(--v-white); }
.v-redesign .ck-rel-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    display: block;
    background: var(--v-white);
    transition: transform var(--v-duration-slow) var(--v-ease);
}
.ck-rel-card:hover img { transform: scale(1.06); }
.ck-rel-info {
    padding: var(--v-space-4);
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.ck-rel-name {
    font-size: var(--v-font-size-sm);
    font-weight: 700;
    color: var(--v-accent);
    line-height: 1.35;
    transition: color var(--v-duration-fast) var(--v-ease);
}
.ck-rel-card:hover .ck-rel-name { color: var(--v-primary-dark); }
.ck-rel-price {
    font-size: var(--v-font-size-lg);
    font-weight: 800;
    color: var(--v-primary-dark);
    margin-top: auto;
}
.ck-rel-price .was {
    font-size: var(--v-font-size-xs);
    color: var(--v-text-muted);
    text-decoration: line-through;
    font-weight: 400;
    margin-left: 6px;
}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.ck-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(20px);
    z-index: 4000;
    background: var(--v-accent);
    color: var(--v-white);
    padding: 14px 24px;
    border-radius: var(--v-radius-full);
    font-weight: 600;
    font-size: var(--v-font-size-sm);
    box-shadow: var(--v-shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--v-duration) var(--v-ease), transform var(--v-duration) var(--v-ease);
    display: inline-flex;
    align-items: center;
    gap: var(--v-space-2);
}
.ck-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ck-toast.err { background: var(--v-error); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Tablet landscape (iPad Pro, ~1024–1180). Stay two-column — collapsing here
   would blow the 1:1 image up to the full container width — but tighten the
   gutter and shrink the rail so both columns still breathe. */
@media (max-width: 1024px) {
    .pd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--v-space-6); }
    .pd-gallery { position: static; gap: var(--v-space-3); }
    .pd-thumb { width: 58px; height: 58px; }
    .pd-price .now { font-size: 2rem; }
    /* Add to Cart can't demand 200px here or it wraps under the stepper. */
    .ck-pd-cart { min-width: 150px; padding: 0 var(--v-space-4); }
    .pd-trust { gap: var(--v-space-2); }
    .pd-trust span { font-size: 11px; }
    .pd-sticky-buy { display: flex; }
    /* Clear the sticky bar (there is no bottom nav above 640px). */
    .pd-page { padding-bottom: 84px; }

    /* Lift the floating CTAs clear of the bar while it is showing — they are
       z-index 9998 and would otherwise sit on top of the price. */
    body.pd-cta-stuck .v-whatsapp-float,
    body.pd-cta-stuck .v-ordernow-float,
    body.pd-cta-stuck .v-back-to-top {
        bottom: 88px;
        transition: bottom var(--v-duration) var(--v-ease);
    }
}

/* Tablet portrait and below (iPad ~820, Surface ~912). Now stack — but cap the
   gallery so the square image can't balloon to a full-width monolith, and
   centre it over the info column. */
@media (max-width: 900px) {
    .pd { grid-template-columns: 1fr; gap: var(--v-space-8); }
    .pd-gallery { max-width: 560px; margin: 0 auto; width: 100%; }
    .pd-main { max-width: none; }
    .pd-info { max-width: 640px; margin: 0 auto; width: 100%; }
    .pd-lead { max-width: none; }
    .ck-pd-cart { min-width: 200px; }
    .pd-details, .pd-sec { margin-bottom: var(--v-space-8); }
}

/* Phones. */
@media (max-width: 640px) {
    .pd-topbar { padding: var(--v-space-4) 0 var(--v-space-2); }
    .pd-crumbs { font-size: var(--v-font-size-xs); }
    .pd { gap: var(--v-space-6); padding-bottom: var(--v-space-8); }

    /* The fixed bottom nav already carries a Cart entry, so the checkout pill
       is a duplicate that costs a whole wrapped row up top. */
    .v-redesign .pd-checkout { display: none; }

    /* Thumbs move below the main image and run horizontally. */
    .pd-gallery { flex-direction: column-reverse; gap: var(--v-space-3); max-width: none; }
    .pd-thumbs { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
    .pd-thumbs::-webkit-scrollbar { display: none; }
    .pd-thumb { width: 56px; height: 56px; }
    .pd-main { border-radius: var(--v-radius-lg); }
    .pd-flag { top: var(--v-space-3); left: var(--v-space-3); }

    .pd-title { margin-bottom: var(--v-space-2); }
    .pd-price-card { padding: var(--v-space-4); }
    .pd-price .now { font-size: 1.875rem; }

    /* Stepper and wishlist share row 1; Add to Cart takes a full row of its
       own — at 360px there is no honest way to fit all three side by side. */
    .pd-buy-row { gap: var(--v-space-2); }
    .ck-qty { height: 50px; }
    .ck-qty button { width: 44px; }
    .pd-wish { width: 50px; height: 50px; margin-left: auto; }
    .ck-pd-cart { min-width: 100%; height: 50px; order: 3; }
    .ck-buy-now { height: 54px; }

    .pd-alt-actions { gap: var(--v-space-2); }
    .pd-alt-actions a {
        flex: 1;
        justify-content: center;
        white-space: nowrap;
        font-size: var(--v-font-size-xs);
        padding: 10px var(--v-space-2);
    }

    /* Three-up stays, just compact — a stacked list here pushed the tabs below
       the fold on a 360px screen. */
    .pd-trust { gap: var(--v-space-2); padding-top: var(--v-space-4); }
    .pd-trust i { width: 34px; height: 34px; font-size: var(--v-font-size-sm); }
    .pd-trust span { font-size: 10.5px; gap: 6px; }

    /* Tabs: edge-to-edge scroller with snap, so a half-cut tab reads as "more". */
    .pd-details { border-radius: var(--v-radius-lg); }
    .pd-tabs { padding: 0 var(--v-space-3); scroll-snap-type: x proximity; }
    .pd-tab { padding: var(--v-space-3) var(--v-space-3); font-size: var(--v-font-size-xs); scroll-snap-align: start; }
    .pd-tab::after { left: var(--v-space-3); right: var(--v-space-3); }
    .pd-panel { padding: var(--v-space-5) var(--v-space-4); }
    .pd-desc-body { font-size: var(--v-font-size-sm); line-height: 1.75; }
    .pd-incl { grid-template-columns: 1fr; gap: 0; }

    .pd-sec-title { font-size: var(--v-font-size-xl); margin-bottom: var(--v-space-5); }

    .ck-rev-summary { padding: var(--v-space-4); gap: var(--v-space-3); }
    .ck-rev-summary .big { font-size: 2.25rem; }
    .ck-rev-list { grid-template-columns: 1fr; }
    .ck-rev-form { padding: var(--v-space-5) var(--v-space-4); }
    .ck-star-pick label { font-size: 2.1rem; } /* thumb-sized targets */

    .ck-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-space-3); }
    .ck-rel-info { padding: var(--v-space-3); }

    /* Sticky bar sits ABOVE the fixed 5-up .v-mobile-bottom-nav. */
    .pd-sticky-buy {
        bottom: calc(68px + env(safe-area-inset-bottom));
        gap: var(--v-space-2);
        padding: 8px var(--v-space-3);
    }
    .pd-sticky-buy .ck-buy-now { height: 46px; }
    .ck-toast { bottom: calc(150px + env(safe-area-inset-bottom)); }

    /* Above the bottom nav (68) + the bar (66) + a little air. */
    body.pd-cta-stuck .v-whatsapp-float,
    body.pd-cta-stuck .v-ordernow-float,
    body.pd-cta-stuck .v-back-to-top {
        bottom: calc(150px + env(safe-area-inset-bottom));
    }

    /* vamsi-redesign.css clears the 68px bottom nav on every storefront page.
       The sticky buy bar stacks on top of that, so reserve room for both.
       !important for the same reason that rule needs it: `.v-redesign` sets
       `padding: 0 !important` and matches <body>. Specificity (0,1,1) then
       beats `.v-redesign` (0,1,0), and we load after vamsi-redesign.css. */
    body.pd-page { padding-bottom: calc(68px + 66px + env(safe-area-inset-bottom)) !important; }
}

/* Very small phones (≤360px): the stepper + wishlist row is the first thing
   to overflow. */
@media (max-width: 380px) {
    .ck-qty input { width: 50px; }
    .ck-qty button { width: 40px; }
    .pd-trust span { font-size: 10px; }
    .pd-sticky-price .now { font-size: var(--v-font-size-base); }
    .ck-rel-grid { grid-template-columns: 1fr; }
}

/* ── Reduced motion (house convention — see vamsi-animate.css) ──────────── */
@media (prefers-reduced-motion: reduce) {
    .pd-main img,
    .ck-rel-card img,
    .ck-rel-card,
    .ck-rev,
    .pd-thumb,
    .ck-buy-now,
    .ck-pd-cart,
    .pd-wish,
    .pd-checkout,
    .pd-sticky-buy {
        transition: none !important;
    }
    .pd-main:hover img,
    .ck-rel-card:hover img,
    .ck-rel-card:hover,
    .ck-rev:hover,
    .ck-buy-now:hover,
    .ck-pd-cart:hover,
    .pd-wish:hover,
    .pd-checkout:hover {
        transform: none !important;
    }
    .pd-sticky-buy { transform: translateY(0); }
}