/* ============================================================
   BongBazar — Custom Printing landing page
   Scoped to .cp-page. Builds on the storefront design tokens
   (--mp-accent, --mp-primary, --mp-border, …) from storefront.css.
   ============================================================ */

.cp-page {
    /* Break out of .mp-main padding + .mp-container gutters for a full-bleed hero */
    margin: -24px calc(-1 * clamp(16px, 2vw, 40px)) -40px;
    overflow-x: clip;
    color: var(--mp-text);
}

.cp-shell {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding-left: clamp(16px, 2.6vw, 44px);
    padding-right: clamp(16px, 2.6vw, 44px);
}

/* ===================== HERO ===================== */
.cp-hero {
    position: relative;
    background: linear-gradient(180deg, #fdfbf9 0%, #f7f2ec 52%, #f2ebe3 100%);
    padding: clamp(18px, 2.4vw, 34px) 0 clamp(72px, 7vw, 96px);
    isolation: isolate;
}
.cp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(58% 62% at 72% 34%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(40% 46% at 12% 18%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 72%);
    pointer-events: none;
    z-index: -1;
}

.cp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    align-items: center;
    gap: clamp(20px, 3vw, 52px);
    /* No forced viewport-based min-height — the hero hugs its content so the
       category strip and How It Works stay within the first viewport */
    min-height: 0;
}

/* ---- Carousel slides (mirrors the marketplace hero mechanism) ---- */
.cp-hero-track { position: relative; }
.cp-hero-slide { display: none; }
.cp-hero-slide.cp-hero-slide-active { display: grid; }
.cp-hero-track:not([data-multi]) .cp-hero-slide,
.cp-hero-track[data-multi="false"] .cp-hero-slide { display: grid; }

/* Full hero background: the uploaded image covers the ENTIRE hero section
   edge-to-edge (not just the inner shell). The copy stays readable over a
   light scrim; the duplicate side image is hidden so the artwork is not
   shown twice. */
.cp-hero.cp-hero-has-bg {
    background-image: var(--cp-hero-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.cp-hero.cp-hero-has-bg::before {
    /* Override the default beige gradient with a readability scrim */
    background:
        linear-gradient(90deg, rgba(253, 251, 249, 0.94) 0%, rgba(253, 251, 249, 0.72) 38%, rgba(253, 251, 249, 0.25) 62%, rgba(253, 251, 249, 0) 82%),
        radial-gradient(58% 62% at 72% 34%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 70%);
}
.cp-hero.cp-hero-has-bg .cp-showcase { display: none; }
.cp-hero.cp-hero-has-bg .cp-hero-grid {
    grid-template-columns: minmax(0, 1fr);
}
.cp-hero.cp-hero-has-bg .cp-lede { max-width: 52ch; }

.cp-hero-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
}
.cp-hero-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(27, 42, 74, 0.22);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.cp-hero-dot:hover { background: rgba(27, 42, 74, 0.4); }
.cp-hero-dot.active {
    background: var(--mp-accent);
    transform: scale(1.25);
}

/* ---- Left column ---- */
.cp-eyebrow {
    margin: 0 0 10px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: #6b7280;
}
.cp-title {
    margin: 0 0 12px;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.032em;
    color: var(--mp-primary);
}
.cp-title .cp-title-accent { color: var(--mp-accent); }

.cp-lede {
    margin: 0 0 clamp(16px, 2vw, 24px);
    max-width: 44ch;
    font-size: clamp(0.98rem, 1.05vw, 1.1rem);
    line-height: 1.5;
    color: #4a5364;
}

/* ---- Feature shortcuts ---- */
.cp-features {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 1.4vw, 20px);
    margin: 0 0 clamp(16px, 2vw, 26px);
    padding: 0;
    list-style: none;
}
.cp-feature {
    width: 112px;
    text-align: center;
}
.cp-feature-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.cp-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    background: #fff;
    color: var(--mp-accent);
    font-size: 1.28rem;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(27, 42, 74, 0.09), 0 1px 2px rgba(27, 42, 74, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cp-feature-label {
    display: block;
    font-size: 0.79rem;
    font-weight: 500;
    line-height: 1.3;
    color: #3c4658;
}
.cp-feature-link:hover .cp-feature-icon,
.cp-feature-link:focus-visible .cp-feature-icon {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(27, 42, 74, 0.14);
}
.cp-feature-link:hover .cp-feature-label { color: var(--mp-accent); }

/* ---- CTA ---- */
.cp-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 28px;
    background: var(--mp-accent);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    border: 0;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(230, 57, 70, 0.28);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.cp-cta:hover,
.cp-cta:focus-visible {
    background: var(--mp-accent-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(230, 57, 70, 0.34);
}
.cp-cta i { font-size: 0.95rem; }

/* ---- Right column: product showcase ---- */
.cp-showcase {
    position: relative;
    width: 100%;
    /* Cap the showcase height so it never drives the hero taller than the copy */
    max-height: 380px;
    aspect-ratio: 16 / 11;
}
.cp-showcase-photo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}
.cp-stage {
    position: absolute;
    inset: 0;
}
.cp-stage::after {
    /* Soft surface the products sit on */
    content: "";
    position: absolute;
    left: 4%;
    right: 2%;
    bottom: 7%;
    height: 26px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(90, 74, 60, 0.16) 0%, rgba(90, 74, 60, 0) 72%);
    border-radius: 50%;
}
.cp-piece {
    position: absolute;
    display: block;
    filter: drop-shadow(0 14px 18px rgba(76, 62, 50, 0.16));
}
.cp-piece .cp-art { width: 100%; height: auto; display: block; }

/* The hanger travels with the tee so the two never drift apart.
   The deep negative bottom margin seats the hanger down onto the tee's
   shoulders, keeping the hook safely below the hero's top boundary. */
.cp-hanger {
    display: block;
    width: 44%;
    height: auto;
    margin: 0 auto -18%;
}

/* Natural, overlapping arrangement — mirrors the reference composition */
.cp-piece-tee      { left: 21%; bottom: 19%; width: 35%; z-index: 3; }
.cp-piece-hoodie   { left: 55%; bottom: 21%; width: 33%; z-index: 3; }
.cp-piece-tote     { left: 39%; bottom: 8%;  width: 28%; z-index: 5; }
.cp-piece-cushion  { left: 73%; bottom: 3%;  width: 27%; z-index: 6; }
.cp-piece-phone    { left: 56%; bottom: 2%;  width: 12%; z-index: 7; }
.cp-piece-mug      { left: 7%;  bottom: 3%;  width: 20%; z-index: 5; }

/* ===================== CATEGORY STRIP ===================== */
.cp-categories {
    position: relative;
    z-index: 4;
    /* Overlap scaled to the tighter hero bottom padding so the strip hugs
       the hero without covering the product showcase */
    margin-top: clamp(-88px, -5.5vw, -62px);
}
.cp-categories-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--mp-border-light);
    border-radius: 22px;
    box-shadow: 0 14px 40px -14px rgba(27, 42, 74, 0.18), 0 2px 8px rgba(27, 42, 74, 0.05);
    padding: 16px clamp(14px, 1.6vw, 22px);
}
.cp-categories-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.cp-categories-track::-webkit-scrollbar { display: none; }

.cp-cat-card {
    flex: 1 0 132px;
    min-width: 132px;
    max-width: 190px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 10px 14px;
    background: #fff;
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--mp-text);
    transition: var(--mp-transition);
}
.cp-cat-card:hover,
.cp-cat-card:focus-visible {
    color: var(--mp-text);
    border-color: rgba(230, 57, 70, 0.35);
    box-shadow: 0 10px 22px -8px rgba(27, 42, 74, 0.2);
    transform: translateY(-3px);
}
.cp-cat-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 92px;
}
.cp-cat-media .cp-art { width: auto; height: 100%; max-width: 100%; }
.cp-cat-media .cp-art-photo { object-fit: contain; }
.cp-art-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--mp-text-muted);
    font-size: 1.7rem;
}
.cp-cat-name {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: var(--mp-text);
}

/* Carousel next / prev buttons */
.cp-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #fff;
    color: var(--mp-text);
    border: 1px solid var(--mp-border);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(27, 42, 74, 0.14);
    cursor: pointer;
    z-index: 2;
    transition: var(--mp-transition);
}
.cp-scroll-btn:hover { background: var(--mp-accent); border-color: var(--mp-accent); color: #fff; }
.cp-scroll-btn[hidden] { display: none; }
.cp-scroll-prev { left: -14px; }
.cp-scroll-next { right: -14px; }

/* ===================== HOW IT WORKS ===================== */
.cp-how {
    padding: clamp(18px, 2.2vw, 30px) 0 clamp(32px, 4vw, 48px);
}
.cp-how-card {
    display: grid;
    grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(20px, 3vw, 44px);
    padding: clamp(20px, 2.6vw, 32px) clamp(20px, 3vw, 40px);
    background: linear-gradient(180deg, #fdf4f4 0%, #fbeeef 100%);
    border: 1px solid rgba(230, 57, 70, 0.1);
    border-radius: 22px;
}
.cp-how-title {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 2.1vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--mp-primary);
}
.cp-how-sub {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #566070;
}

.cp-steps {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.2vw, 18px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.cp-step {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 0;
    min-width: 0;
}
.cp-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    font-size: 1.2rem;
    background: #fff;
}
.cp-step-icon.tone-rose  { background: #fde8ea; color: #d4394a; }
.cp-step-icon.tone-blue  { background: #e3effb; color: #2f7fd1; }
.cp-step-icon.tone-green { background: #e2f5ea; color: #1f9d5c; }
.cp-step-icon.tone-amber { background: #fdf0dc; color: #c9821d; }

.cp-step-body { min-width: 0; }
.cp-step-title {
    display: block;
    margin: 0 0 3px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--mp-primary);
}
.cp-step-desc {
    display: block;
    margin: 0;
    font-size: 0.83rem;
    line-height: 1.35;
    color: #6b7280;
}
.cp-step-arrow {
    flex: 0 0 auto;
    color: #b9c0cc;
    font-size: 0.95rem;
}

/* ===================== TRUST STRIP / PROSE (admin-managed) ===================== */
.cp-trust { padding: 0 0 clamp(28px, 4vw, 48px); }
.cp-trust-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px clamp(20px, 3vw, 48px);
    margin: 0;
    padding: 18px clamp(18px, 2.4vw, 28px);
    list-style: none;
    background: #fff;
    border: 1px solid var(--mp-border);
    border-radius: 16px;
}
.cp-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--mp-text);
}
.cp-trust-item i { color: var(--mp-success); font-size: 1rem; }

.cp-prose { padding: 0 0 clamp(28px, 4vw, 48px); }
.cp-section-title {
    margin: 0 0 12px;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--mp-primary);
}
.cp-prose p { margin: 0; color: #566070; line-height: 1.65; }
.cp-faq-list { margin: 0; padding-left: 20px; color: #566070; line-height: 1.75; }

/* ===================== CATEGORY LISTING PAGE ===================== */
.cp-category-page {
    /* Normal page flow — no full-bleed hero breakout needed here */
    margin: 0;
}
.cp-catpage-head { padding: clamp(18px, 2.4vw, 32px) 0 0; }
.cp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 0.85rem;
    color: #6b7280;
}
.cp-breadcrumb a { color: var(--mp-accent); text-decoration: none; font-weight: 600; }
.cp-breadcrumb a:hover { text-decoration: underline; }
.cp-breadcrumb i { font-size: 0.6rem; color: #b9c0cc; }

.cp-catpage-banner {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.4vw, 32px);
    padding: clamp(18px, 2.4vw, 30px) clamp(20px, 3vw, 40px);
    background: linear-gradient(180deg, #fdf4f4 0%, #fbeeef 100%);
    border: 1px solid rgba(230, 57, 70, 0.1);
    border-radius: 22px;
}
.cp-catpage-photo {
    width: clamp(96px, 10vw, 150px);
    height: clamp(96px, 10vw, 150px);
    object-fit: cover;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px -10px rgba(27, 42, 74, 0.25);
}
.cp-catpage-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(96px, 10vw, 150px);
    height: clamp(96px, 10vw, 150px);
    border-radius: 18px;
    background: #fff;
    color: var(--mp-text-muted);
    font-size: 2.2rem;
    box-shadow: 0 8px 22px -10px rgba(27, 42, 74, 0.25);
}
.cp-catpage-title {
    margin: 0 0 6px;
    font-size: clamp(1.7rem, 2.8vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--mp-primary);
}
.cp-catpage-sub { margin: 0; font-size: 0.95rem; color: #566070; }

.cp-catpage-products { padding: clamp(20px, 2.6vw, 36px) 0 clamp(40px, 5vw, 64px); }
.cp-catpage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: clamp(14px, 1.8vw, 24px);
}
.cp-product-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--mp-border);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: var(--mp-text);
    box-shadow: 0 2px 8px rgba(27, 42, 74, 0.05);
    transition: var(--mp-transition);
}
.cp-product-card:hover,
.cp-product-card:focus-visible {
    color: var(--mp-text);
    border-color: rgba(230, 57, 70, 0.35);
    box-shadow: 0 12px 26px -10px rgba(27, 42, 74, 0.22);
    transform: translateY(-3px);
}
.cp-product-media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    background: #f8f9fb;
}
.cp-product-media img { width: 100%; height: 100%; object-fit: contain; }
.cp-product-media .cp-art-fallback { font-size: 2.4rem; }
.cp-product-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--mp-border-light);
}
.cp-product-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mp-primary);
}
.cp-product-price { font-size: 0.92rem; font-weight: 600; color: var(--mp-accent); }
.cp-product-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #566070;
}
.cp-product-card:hover .cp-product-cta { color: var(--mp-accent); }
.cp-product-cta i { font-size: 0.7rem; transition: transform 0.2s ease; }
.cp-product-card:hover .cp-product-cta i { transform: translateX(3px); }

.cp-catpage-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: clamp(40px, 6vw, 80px) 20px;
    background: #fff;
    border: 1px dashed var(--mp-border);
    border-radius: 18px;
    color: #6b7280;
    text-align: center;
}
.cp-catpage-empty i { font-size: 2.6rem; color: #b9c0cc; }
.cp-catpage-empty p { margin: 0; font-size: 1rem; }

/* ===================== RESPONSIVE ===================== */

/* Large desktop → small desktop */
@media (max-width: 1280px) {
    .cp-lede { max-width: 40ch; }
    .cp-features { gap: 8px; }
    .cp-feature { width: 96px; }
    .cp-feature-icon { width: 50px; height: 50px; font-size: 1.15rem; margin-bottom: 8px; }
    .cp-step { gap: 10px; }
    .cp-step-icon { width: 48px; height: 48px; font-size: 1.05rem; }
}

/* Tablet — keep two columns, tighten spacing and showcase */
@media (max-width: 1024px) {
    .cp-hero-grid {
        grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
        gap: 22px;
        min-height: 0;
    }
    .cp-title { font-size: clamp(2.2rem, 5vw, 3rem); }
    .cp-lede { font-size: 1rem; max-width: 100%; }
    /* Keep all four shortcuts on one row rather than wrapping 3 + 1 */
    .cp-features { gap: 6px; }
    .cp-feature { width: 82px; }
    .cp-feature-icon { width: 50px; height: 50px; font-size: 1.1rem; }
    .cp-feature-label { font-size: 0.71rem; }
    .cp-cta { padding: 13px 26px; font-size: 0.98rem; }

    .cp-how-card { grid-template-columns: 1fr; gap: 20px; }
    .cp-steps {
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .cp-steps::-webkit-scrollbar { display: none; }
    .cp-step { flex: 0 0 auto; }
}

/* Mobile — stack the hero, showcase follows the copy */
@media (max-width: 767px) {
    .cp-hero { padding-bottom: 72px; }
    .cp-hero-grid { grid-template-columns: 1fr; gap: 18px; }
    .cp-hero-slide.cp-hero-slide-active { display: flex; flex-direction: column; }
    .cp-hero-copy { order: 1; }
    .cp-showcase { order: 2; aspect-ratio: 16 / 10; max-width: 520px; margin: 0 auto; }

    .cp-title { font-size: clamp(2.1rem, 10vw, 2.75rem); }
    .cp-features { gap: 12px; justify-content: space-between; }
    .cp-feature { width: calc(25% - 9px); }
    .cp-cta { width: 100%; justify-content: center; }

    .cp-categories { margin-top: -52px; }
    .cp-categories-card { border-radius: 16px; padding: 14px 12px; }
    .cp-cat-card { flex: 0 0 116px; min-width: 116px; }
    .cp-cat-media { height: 74px; }
    .cp-cat-name { font-size: 0.79rem; }
    .cp-scroll-btn { display: none; }

    .cp-how-card { border-radius: 16px; padding: 20px 16px; }

    /* Category listing page on mobile */
    .cp-catpage-banner { flex-direction: column; text-align: center; }
    .cp-catpage-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .cp-product-media { height: 130px; }
    .cp-product-body { padding: 10px 12px 12px; }
    .cp-product-name { font-size: 0.88rem; }
    .cp-product-price { font-size: 0.82rem; }
    .cp-product-cta { font-size: 0.74rem; }
}

@media (max-width: 420px) {
    .cp-feature { width: calc(50% - 6px); }
    .cp-features { justify-content: flex-start; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .cp-cta, .cp-cat-card, .cp-feature-icon, .cp-scroll-btn { transition: none; }
    .cp-cta:hover, .cp-cat-card:hover, .cp-feature-link:hover .cp-feature-icon { transform: none; }
    .cp-categories-track { scroll-behavior: auto; }
}