:root {
    --primary: #006196;
    --secondary: #2BA8E0;
    --ink: #17212b;
    --muted: #657386;
    --line: #d9e4ec;
    --soft: #eef8fd;
    --soft-2: #f7fbfe;
    --white: #ffffff;
    --success: #167a4a;
    --danger: #b42318;
    --shadow: 0 18px 45px rgba(0, 97, 150, 0.12);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: Inter, Arial, sans-serif;
    line-height: 1.5;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

.skip-link {
    position: absolute;
    top: -60px;
    left: 16px;
    z-index: 100;
    background: var(--ink);
    color: var(--white);
    padding: 10px 14px;
}

.skip-link:focus {
    top: 16px;
}

.promo-strip {
    background: var(--primary);
    color: var(--white);
    text-align: center;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 800;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--line);
    transition: box-shadow 0.2s ease;
}

.site-header.is-stuck {
    box-shadow: 0 10px 24px rgba(23, 33, 43, 0.08);
}

.top-nav {
    display: grid;
    grid-template-columns: auto minmax(280px, 1fr) auto;
    gap: 22px;
    align-items: center;
    padding: 14px clamp(16px, 4vw, 56px);
}

.logo img {
    height: 56px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

.hamburger {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--white);
    padding: 8px;
}

.hamburger span {
    display: block;
    height: 2px;
    margin: 5px 0;
    background: var(--primary);
}

.search-form {
    display: flex;
    min-width: 0;
    border: 2px solid var(--primary);
    border-radius: 6px;
    overflow: hidden;
    background: var(--white);
}

.search-form input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 13px 14px;
    outline: 0;
}

.search-form button,
.coupon-form button,
.pincode-box button {
    border: 0;
    background: var(--primary);
    color: var(--white);
    padding: 0 18px;
    cursor: pointer;
    font-weight: 900;
}

.quick-links {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #344054;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.cart-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--primary);
    border-radius: 999px;
    padding: 8px 12px;
    color: var(--primary);
}

.cart-pill span {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--secondary);
    color: var(--white);
    font-size: 12px;
}

.language-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #344054;
    font-weight: 900;
}

.language-switch span {
    font-size: 12px;
}

.language-switch select {
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    padding: 0 10px;
    font-weight: 900;
    outline: 0;
}

html[dir="rtl"] body {
    direction: rtl;
}

html[dir="rtl"] .search-form,
html[dir="rtl"] .coupon-form,
html[dir="rtl"] .cart-update-form {
    direction: rtl;
}

html[dir="rtl"] .quick-links,
html[dir="rtl"] .mega-nav,
html[dir="rtl"] .breadcrumb,
html[dir="rtl"] .pdp-rating,
html[dir="rtl"] .studio-actions {
    flex-direction: row-reverse;
}

html[dir="rtl"] .top-nav {
    direction: rtl;
}

html[dir="rtl"] .product-card,
html[dir="rtl"] .pdp-panel,
html[dir="rtl"] .studio-tools,
html[dir="rtl"] .summary-box,
html[dir="rtl"] .filter-sidebar,
html[dir="rtl"] .cart-item,
html[dir="rtl"] .checkout-card {
    text-align: right;
}

.mega-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0 clamp(16px, 4vw, 56px);
    border-top: 1px solid var(--line);
}

.mega-item {
    position: relative;
    flex: 0 0 auto;
}

.mega-item > a {
    display: block;
    padding: 13px 14px;
    color: #25364a;
    font-size: 14px;
    font-weight: 900;
}

.mega-item:hover > a {
    background: var(--soft);
    color: var(--primary);
}

.mega-dropdown {
    position: fixed;
    left: clamp(16px, 4vw, 56px);
    right: clamp(16px, 4vw, 56px);
    top: 139px;
    display: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 18px;
    padding: 22px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.mega-item:hover .mega-dropdown {
    display: grid;
}

.mega-dropdown a {
    padding: 9px 8px;
    color: var(--muted);
    border-radius: 6px;
}

.mega-dropdown a:hover {
    background: var(--soft);
    color: var(--primary);
}

.section,
.page-hero,
.hero-slider {
    padding-inline: clamp(16px, 4vw, 56px);
}

.section {
    padding-top: clamp(34px, 6vw, 72px);
    padding-bottom: clamp(34px, 6vw, 72px);
}

.section-soft {
    background: var(--soft-2);
}

.hero-slider {
    position: relative;
    min-height: 520px;
    background: linear-gradient(135deg, var(--soft), #ffffff);
    overflow: hidden;
}

.slide {
    display: none;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
    gap: 34px;
    align-items: center;
    min-height: 520px;
}

.slide.active {
    display: grid;
}

.slide-copy span {
    color: var(--secondary);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 13px;
}

.slide-copy h1,
.page-hero h1,
.section-head h2,
.product-info h1,
.admin-head h1,
.not-found h1 {
    margin: 0;
    line-height: 1.06;
    letter-spacing: 0;
}

.slide-copy h1 {
    max-width: 760px;
    margin-top: 12px;
    font-size: clamp(40px, 7vw, 74px);
}

.slide-copy p {
    max-width: 560px;
    color: var(--muted);
    font-size: 18px;
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    padding: 12px 18px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 900;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
}

.btn-primary:hover {
    background: #004d78;
}

.btn-outline {
    background: var(--white);
    color: var(--primary);
    border-color: var(--primary);
}

.btn.full {
    width: 100%;
}

.btn.large {
    min-height: 54px;
    font-size: 17px;
}

.hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.slide-art {
    min-height: 360px;
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--soft);
}

.slide-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.slider-dots {
    position: absolute;
    left: clamp(16px, 4vw, 56px);
    bottom: 24px;
    display: flex;
    gap: 8px;
}

.slider-dots button {
    width: 34px;
    height: 5px;
    border: 0;
    border-radius: 999px;
    background: #b7d9ea;
    cursor: pointer;
}

.slider-dots button.active {
    background: var(--primary);
}

.section-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: end;
    margin-bottom: 22px;
}

.section-head h2,
.page-hero h1,
.admin-head h1 {
    font-size: clamp(28px, 4vw, 44px);
}

.section-head a {
    color: var(--primary);
    font-weight: 900;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.category-tile,
.product-card,
.summary-box,
.filter-sidebar,
.auth-card,
.account-panel,
.admin-card,
.admin-form,
.admin-table,
.confirmation-box {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
}

.category-tile {
    display: grid;
    gap: 10px;
    padding: 16px;
    min-height: 190px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.category-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 97, 150, 0.14);
}

.category-art {
    display: block;
    height: 110px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--soft);
}

.category-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.category-tile:hover .category-art img {
    transform: scale(1.04);
}

.category-count {
    font-size: 12px;
    color: var(--muted);
}

.scroll-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 270px);
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.product-card {
    overflow: hidden;
    scroll-snap-align: start;
}

.product-image {
    position: relative;
    display: block;
    background: linear-gradient(135deg, var(--soft), #daf0fa);
    aspect-ratio: 1.25;
    overflow: hidden;
}

/* Category-specific product image backgrounds */
.product-image[data-cat="visiting-cards"] { background: linear-gradient(135deg, #e6f3fa, #c8e4f2); }
.product-image[data-cat="stationery"]      { background: linear-gradient(135deg, #edf8e4, #d0efc0); }
.product-image[data-cat="signs-posters"]   { background: linear-gradient(135deg, #fff3e0, #ffd8a0); }
.product-image[data-cat="labels-stickers"] { background: linear-gradient(135deg, #fce4f0, #f5b8d8); }
.product-image[data-cat="clothing-caps"]   { background: linear-gradient(135deg, #eeeeff, #d0d0f5); }
.product-image[data-cat="mugs-gifts"]      { background: linear-gradient(135deg, #fff8e6, #ffe4a0); }
.product-image[data-cat="stamps"]          { background: linear-gradient(135deg, #f5f0ff, #ddd0f8); }
.product-image[data-cat="pens"]            { background: linear-gradient(135deg, #e8fff0, #b8f0cc); }
.product-image[data-cat="drinkware"]       { background: linear-gradient(135deg, #e6f7ff, #b8e4f8); }

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.04);
}

.price-badge {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--white);
    font-size: 12px;
    font-weight: 900;
}

.product-body {
    display: grid;
    gap: 8px;
    padding: 14px;
}

.product-name {
    min-height: 48px;
    font-weight: 900;
}

.product-body p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.card-row,
.summary-row,
.summary-item,
.order-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.mini-btn {
    border: 0;
    border-radius: 6px;
    background: var(--secondary);
    color: var(--white);
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 900;
}

.trust-section {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
}

.trust-section div {
    display: grid;
    gap: 5px;
    padding: 28px clamp(16px, 4vw, 40px);
    background: var(--soft);
    text-align: center;
}

.trust-icon {
    font-size: 28px;
    display: block;
    margin-bottom: 4px;
}

.trust-section strong {
    color: var(--primary);
    font-size: 16px;
}

.trust-section span {
    color: var(--muted);
    font-size: 13px;
}

/* Why section */
.why-section {
    background: var(--white);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.why-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 24px 20px;
    text-align: center;
    transition: box-shadow 0.2s ease;
}

.why-card:hover {
    box-shadow: 0 8px 24px rgba(0, 97, 150, 0.1);
}

.why-icon {
    font-size: 36px;
    margin-bottom: 12px;
}

.why-card h3 {
    margin: 0 0 8px;
    font-size: 16px;
    color: var(--primary);
}

.why-card p {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
}

/* ============================================================
   VISTAPRINT-STYLE HOMEPAGE
   ============================================================ */

/* ── HERO ──────────────────────────────────────────────────── */
.vp-hero {
    position: relative;
    background: linear-gradient(135deg, #f0f8ff 0%, #e8f4fd 100%);
    overflow: hidden;
}
.vp-slide { display: none; }
.vp-slide.active { display: block; }
.vp-slide-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    min-height: 520px;
    padding: 60px clamp(20px,5vw,80px);
    max-width: 1400px;
    margin: 0 auto;
}
.vp-tag {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.vp-slide-copy h1 {
    font-size: clamp(32px, 4.5vw, 56px);
    font-weight: 900;
    color: #0f172a;
    line-height: 1.1;
    margin: 0 0 16px;
}
.vp-slide-copy h1 em {
    font-style: normal;
    color: var(--primary);
}
.vp-slide-copy p {
    font-size: 16px;
    color: #475569;
    margin: 0 0 28px;
    max-width: 480px;
    line-height: 1.6;
}
.vp-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.vp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 24px; border-radius: 8px;
    font-size: 15px; font-weight: 700; text-decoration: none;
    transition: all .18s; cursor: pointer; border: none;
    white-space: nowrap;
}
.vp-btn-primary { background: var(--primary); color: #fff; }
.vp-btn-primary:hover { background: #004d78; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,97,150,.3); }
.vp-btn-ghost { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.vp-btn-ghost:hover { background: var(--primary); color: #fff; }
.vp-btn-white { background: #fff; color: var(--primary); font-weight: 800; }
.vp-btn-white:hover { background: #f0f8ff; }
.vp-hero-trust { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #64748b; }
.vp-hero-trust span:first-child { color: #f59e0b; font-size: 16px; letter-spacing: 1px; }
.vp-slide-art { display: flex; align-items: center; justify-content: center; }
.vp-slide-art img { width: 100%; max-width: 540px; height: auto; filter: drop-shadow(0 20px 40px rgba(0,97,150,.18)); }
.vp-slide-inner-imgonly { grid-template-columns: 1fr; padding: 0; min-height: auto; max-width: 100%; }
.vp-slide-art-full { width: 100%; overflow: hidden; background: #f0f8ff; display: flex; }
.vp-slide-art-full img { width: 100%; max-width: none; height: auto; filter: none; display: block; }

/* Slider arrows + dots */
.vp-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.9); border: 1px solid #e2e8f0;
    font-size: 22px; cursor: pointer; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.1); transition: all .15s;
    color: #374151;
}
.vp-arrow:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.vp-arrow-prev { left: 16px; }
.vp-arrow-next { right: 16px; }
.vp-slider-dots {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px;
}
.vp-slider-dots button {
    width: 8px; height: 8px; border-radius: 50%;
    border: 0; background: #93c5d9; cursor: pointer;
    transition: all .2s;
}
.vp-slider-dots button.active { background: var(--primary); width: 24px; border-radius: 4px; }

/* ── OFFER STRIP ────────────────────────────────────────────── */
.vp-offer-strip {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
    background: #fff;
}
.vp-offer-item {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 24px;
    border-right: 1px solid #e2e8f0;
}
.vp-offer-item:last-child { border-right: none; }
.vp-offer-icon { font-size: 28px; flex-shrink: 0; }
.vp-offer-item strong { display: block; font-size: 14px; font-weight: 800; color: #0f172a; }
.vp-offer-item span { font-size: 12px; color: #64748b; }

/* ── SECTIONS ───────────────────────────────────────────────── */
.vp-section {
    padding: clamp(40px,6vw,72px) clamp(20px,5vw,80px);
    max-width: 1400px; margin: 0 auto;
}
.vp-section-gray { background: #f8fafc; max-width: 100%; }
.vp-section-gray .vp-section { max-width: 1400px; }
.vp-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 28px; gap: 16px;
}
.vp-section-head.centered { flex-direction: column; align-items: center; text-align: center; }
.vp-section-head h2 { font-size: clamp(22px,3vw,34px); font-weight: 900; color: #0f172a; margin: 0; }
.vp-section-head p { margin: 8px 0 0; color: #64748b; font-size: 15px; }
.vp-section-head a { color: var(--primary); font-weight: 700; font-size: 14px; white-space: nowrap; }

/* ── CATEGORY GRID ──────────────────────────────────────────── */
.vp-cat-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 20px;
}
.vp-cat-tile {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 18px 10px; border-radius: 12px; border: 1.5px solid #e2e8f0;
    background: #fff; text-decoration: none; text-align: center;
    transition: all .18s;
}
.vp-cat-tile:hover { border-color: var(--primary); box-shadow: 0 4px 16px rgba(0,97,150,.12); transform: translateY(-2px); }
.vp-cat-img {
    width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
    background: #f0f8ff; display: flex; align-items: center; justify-content: center;
}
.vp-cat-img img { width: 100%; height: 100%; object-fit: cover; }
.vp-cat-tile strong { font-size: 15px; font-weight: 800; color: #0f172a; line-height: 1.3; }
.vp-cat-tile span { font-size: 12px; color: #64748b; }

/* ── OFFER BANNER ───────────────────────────────────────────── */
.vp-banner-strip {
    display: grid; grid-template-columns: 1fr auto;
    align-items: center; gap: 32px;
    background: linear-gradient(135deg, var(--primary), #2BA8E0);
    padding: 40px clamp(20px,5vw,80px);
    margin: 0;
}
.vp-banner-left span {
    display: inline-block; background: rgba(255,255,255,.2);
    color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
    margin-bottom: 12px;
}
.vp-banner-left h3 { font-size: clamp(20px,3vw,32px); font-weight: 900; color: #fff; margin: 0 0 8px; }
.vp-banner-left p { color: rgba(255,255,255,.85); margin: 0 0 20px; font-size: 15px; }
.vp-banner-left strong { background: rgba(255,255,255,.25); padding: 2px 8px; border-radius: 4px; }
.vp-banner-code {
    text-align: center; background: rgba(255,255,255,.15);
    border: 2px dashed rgba(255,255,255,.4);
    border-radius: 16px; padding: 20px 32px;
}
.vp-banner-code span { display: block; font-size: 11px; color: rgba(255,255,255,.7); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.vp-banner-code strong { display: block; font-size: 28px; font-weight: 900; color: #fff; letter-spacing: .1em; }
.vp-banner-code em { display: block; font-style: normal; font-size: 14px; color: rgba(255,255,255,.8); margin-top: 4px; }

/* ── PRODUCT CARDS ──────────────────────────────────────────── */
.vp-product-scroll {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 240px);
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-snap-type: x proximity;
    -ms-overflow-style: none; scrollbar-width: none;
}
.vp-product-scroll::-webkit-scrollbar { display: none; }

.vp-product-card {
    border-radius: 12px; background: #fff;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all .2s;
    scroll-snap-align: start;
    display: flex; flex-direction: column;
}
.vp-product-card:hover { border-color: var(--primary); box-shadow: 0 8px 28px rgba(0,97,150,.16); transform: translateY(-3px); }

.vp-product-img {
    position: relative; display: block;
    aspect-ratio: 1.2; overflow: hidden;
    background: linear-gradient(135deg, #f0f8ff, #e0f0fa);
}
.vp-product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.vp-product-card:hover .vp-product-img img { transform: scale(1.06); }

.vp-price-badge {
    position: absolute; bottom: 10px; left: 10px;
    background: var(--primary); color: #fff;
    font-size: 10px; font-weight: 800;
    padding: 4px 10px; border-radius: 999px;
}
.vp-badge-hot { background: #e11d2e; }

.vp-card-hover-overlay {
    position: absolute; inset: 0;
    background: rgba(0,97,150,.72);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .2s;
}
.vp-product-card:hover .vp-card-hover-overlay { opacity: 1; }
.vp-design-btn {
    background: #fff; color: var(--primary);
    font-size: 13px; font-weight: 800;
    padding: 10px 20px; border-radius: 8px;
    text-decoration: none; transition: all .15s;
}
.vp-design-btn:hover { background: var(--primary); color: #fff; }

.vp-product-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.vp-product-rating { display: flex; align-items: center; gap: 6px; }
.vp-stars { color: #f59e0b; font-size: 12px; letter-spacing: 1px; }
.vp-review-count { font-size: 11px; color: #64748b; }
.vp-product-name {
    font-size: 14px; font-weight: 700; color: #0f172a;
    text-decoration: none; line-height: 1.3;
}
.vp-product-name:hover { color: var(--primary); }
.vp-product-cat { font-size: 11px; color: #94a3b8; }
.vp-product-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid #f1f5f9; }
.vp-product-price strong { display: block; font-size: 17px; font-weight: 900; color: var(--primary); }
.vp-product-price span { font-size: 10px; color: #94a3b8; }
.vp-add-btn {
    min-height: 34px; padding: 0 14px;
    background: var(--primary); color: #fff;
    border: none; border-radius: 6px;
    font-size: 12px; font-weight: 700; cursor: pointer;
    transition: background .15s; white-space: nowrap;
}
.vp-add-btn:hover { background: #004d78; }

/* ── HOW IT WORKS ───────────────────────────────────────────── */
.vp-how-section { background: #f8fafc; max-width: 100%; }
.vp-how-section .vp-section { max-width: 1400px; }
.vp-how-grid {
    display: grid; grid-template-columns: repeat(4,1fr); gap: 24px;
    position: relative;
}
.vp-how-grid::before {
    content: '';
    position: absolute;
    top: 30px; left: calc(12.5%); right: calc(12.5%);
    height: 2px; background: #e2e8f0; z-index: 0;
}
.vp-how-step {
    text-align: center; position: relative; z-index: 1;
    padding: 24px 16px; background: #fff;
    border-radius: 14px; border: 1px solid #e2e8f0;
    transition: box-shadow .2s;
}
.vp-how-step:hover { box-shadow: 0 6px 20px rgba(0,97,150,.1); }
.vp-how-num {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--primary); color: #fff;
    font-size: 16px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
}
.vp-how-icon { font-size: 32px; margin-bottom: 12px; }
.vp-how-step h3 { font-size: 15px; font-weight: 800; color: #0f172a; margin: 0 0 8px; }
.vp-how-step p { font-size: 13px; color: #64748b; margin: 0; line-height: 1.5; }

/* ── STATS ──────────────────────────────────────────────────── */
.vp-stats-section {
    display: grid; grid-template-columns: repeat(5,1fr);
    background: var(--primary); padding: 40px clamp(20px,5vw,80px);
}
.vp-stat { text-align: center; padding: 0 16px; border-right: 1px solid rgba(255,255,255,.2); }
.vp-stat:last-child { border-right: none; }
.vp-stat strong { display: block; font-size: clamp(22px,3vw,36px); font-weight: 900; color: #fff; }
.vp-stat span { font-size: 13px; color: rgba(255,255,255,.75); }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .vp-cat-grid { grid-template-columns: repeat(5,1fr); }
    .vp-stats-section { grid-template-columns: repeat(3,1fr); gap: 20px; }
    .vp-stat { border-right: none; }
}
@media (max-width: 900px) {
    .vp-slide-inner { grid-template-columns: 1fr; min-height: auto; text-align: center; padding: 40px 20px 60px; }
    .vp-slide-art { display: none; }
    .vp-slide-inner-imgonly { padding: 0; }
    .vp-slide-inner-imgonly .vp-slide-art-full { display: flex; }
    .vp-hero-actions { justify-content: center; }
    .vp-hero-trust { justify-content: center; }
    .vp-offer-strip { grid-template-columns: 1fr 1fr; }
    .vp-cat-grid { grid-template-columns: repeat(3,1fr); }
    .vp-how-grid { grid-template-columns: repeat(2,1fr); }
    .vp-how-grid::before { display: none; }
    .vp-banner-strip { grid-template-columns: 1fr; }
    .vp-banner-code { display: none; }
    .vp-stats-section { grid-template-columns: repeat(2,1fr); }
    .vp-product-scroll { grid-auto-columns: minmax(180px,210px); }
}
@media (max-width: 600px) {
    .vp-offer-strip { grid-template-columns: 1fr; }
    .vp-cat-grid { grid-template-columns: repeat(3,1fr); gap: 8px; }
    .vp-cat-img { width: 56px; height: 56px; }
    .vp-how-grid { grid-template-columns: 1fr 1fr; }
    .vp-stats-section { grid-template-columns: 1fr 1fr; padding: 24px 16px; }
    .vp-section { padding: 32px 16px; }
    .vp-product-scroll { grid-auto-columns: minmax(160px,190px); }
}

.page-hero {
    padding-top: 34px;
    padding-bottom: 34px;
    background: var(--soft);
}

.page-hero.compact {
    min-height: auto;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--muted);
    font-size: 14px;
}

.breadcrumb a {
    color: var(--primary);
    font-weight: 800;
}

.page-hero p,
.lead {
    color: var(--muted);
}

.catalog-layout,
.cart-layout,
.checkout-layout,
.account-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.filter-sidebar,
.summary-box {
    position: sticky;
    top: 160px;
    padding: 18px;
}

.filter-sidebar h2,
.summary-box h2 {
    margin-top: 0;
}

.filter-block {
    display: grid;
    gap: 10px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

.filter-block h3 {
    margin: 0;
    font-size: 15px;
}

.catalog-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.catalog-toolbar p {
    margin: 0;
    color: var(--muted);
}

.catalog-toolbar select,
.form-grid input,
.form-grid textarea,
.auth-form input,
.admin-form input,
.admin-form select,
.cart-update-form input,
.coupon-form input,
.pincode-box input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 11px 12px;
    background: var(--white);
}

.pagination {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}

.pagination a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-weight: 900;
}

.pagination a.active {
    background: var(--primary);
    color: var(--white);
}

.empty-state {
    padding: 28px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: var(--soft);
    color: var(--muted);
    font-weight: 800;
}

.product-detail {
    display: grid;
    gap: 24px;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
    gap: 32px;
}

.zoom-wrap {
    aspect-ratio: 1.2;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
}

.zoom-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.zoom-wrap.is-zooming img {
    transform: scale(1.18);
}

.thumb-row {
    display: grid;
    grid-template-columns: repeat(3, 90px);
    gap: 10px;
    margin-top: 12px;
}

.thumb-row button {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0;
    background: var(--white);
    overflow: hidden;
    cursor: pointer;
}

.product-info h1 {
    font-size: clamp(32px, 5vw, 54px);
}

.price-line {
    margin: 20px 0;
    color: var(--muted);
}

.price-line strong {
    color: var(--primary);
    font-size: 34px;
}

.qty-selector {
    display: inline-grid;
    grid-template-columns: 44px 70px 44px;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}

.qty-selector button,
.qty-selector input {
    height: 44px;
    border: 0;
    text-align: center;
    background: var(--white);
}

.qty-selector button {
    cursor: pointer;
    color: var(--primary);
    font-weight: 900;
}

.pricing-table,
.admin-table table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
}

.pricing-table th,
.pricing-table td,
.admin-table th,
.admin-table td {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.pricing-table th,
.admin-table th {
    background: var(--soft);
}

.cta-row,
.pincode-box,
.coupon-form,
.cart-update-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.pincode-box {
    margin-top: 16px;
}

.pincode-box span,
.coupon-form span {
    color: var(--muted);
    font-weight: 800;
}

.tabs {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.tab-buttons {
    display: flex;
    background: var(--soft);
}

.tab-buttons button,
.auth-tabs button {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 14px;
    cursor: pointer;
    font-weight: 900;
}

.tab-buttons button.active,
.auth-tabs button.active {
    background: var(--primary);
    color: var(--white);
}

.tab-panel {
    display: none;
    padding: 20px;
}

.tab-panel.active {
    display: block;
}

.cart-layout,
.checkout-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
}

.cart-list {
    display: grid;
    gap: 14px;
}

.cart-item {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.cart-item img {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--soft);
}

.cart-item h2 {
    margin: 0 0 4px;
    font-size: 18px;
}

.cart-item p {
    margin: 0 0 10px;
    color: var(--muted);
}

.cart-update-form input {
    width: 80px;
}

.cart-update-form button {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--white);
    padding: 9px 10px;
    cursor: pointer;
    font-weight: 800;
}

.summary-box {
    display: grid;
    gap: 14px;
}

.summary-row.total {
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 20px;
    color: var(--primary);
}

.summary-item {
    color: var(--muted);
    font-size: 14px;
}

.checkout-steps,
.auth-form,
.form-grid,
.admin-form {
    display: grid;
    gap: 16px;
}

.step {
    display: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 22px;
}

.step.active {
    display: grid;
    gap: 18px;
}

.step legend {
    padding: 0 8px;
    color: var(--primary);
    font-size: 20px;
    font-weight: 900;
}

.form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid label,
.auth-form label,
.admin-form label {
    display: grid;
    gap: 7px;
    color: #344054;
    font-weight: 900;
}

.full-field {
    grid-column: 1 / -1;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

.payment-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.payment-options label {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    font-weight: 900;
}

.confirmation-box {
    margin: clamp(24px, 5vw, 56px);
    text-align: center;
}

.confirmation-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 18px;
    border-radius: 6px;
    background: #25D366;
    color: #fff;
    font-weight: 900;
    text-decoration: none;
    border: 1px solid #25D366;
    transition: background 0.15s;
}
.btn-whatsapp:hover { background: #1ebe57; }

.auth-page {
    min-height: 600px;
    display: grid;
    place-items: center;
    background: var(--soft);
}

.auth-card {
    width: min(100%, 480px);
    padding: 18px;
    box-shadow: var(--shadow);
}

.auth-tabs {
    display: flex;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid var(--line);
    margin-bottom: 16px;
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: grid;
}

.form-message {
    margin-bottom: 14px;
    padding: 10px;
    border-radius: 6px;
    background: #fff4e5;
    color: #8a4b0a;
    font-weight: 800;
}

.social-login {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.social-login button {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--white);
    padding: 10px;
    cursor: pointer;
    font-weight: 900;
}

.account-sidebar,
.account-content {
    display: grid;
    gap: 14px;
}

.account-sidebar {
    position: sticky;
    top: 160px;
}

.account-sidebar h1 {
    margin: 0 0 8px;
}

.account-sidebar a {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-weight: 900;
}

.account-sidebar a:hover {
    background: var(--soft);
    color: var(--primary);
}

.account-panel {
    padding: 18px;
}

.order-row {
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
}

.order-row em {
    color: var(--primary);
    font-style: normal;
    font-weight: 900;
}

.pay-badge {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 700;
}

.pay-paid {
    background: #e3f5e6;
    color: #1e7a34;
}

.pay-cod,
.pay-pending {
    background: #fff4dd;
    color: #9a6a00;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.admin-card {
    display: grid;
    gap: 8px;
    padding: 24px;
}

.admin-card span {
    color: var(--primary);
    font-size: 42px;
    font-weight: 900;
}

.admin-form {
    grid-template-columns: 1fr 1fr 160px auto;
    align-items: end;
    padding: 18px;
    margin: 20px 0;
}

.admin-table {
    overflow-x: auto;
}

.not-found {
    display: grid;
    place-items: center;
    min-height: 520px;
    text-align: center;
}

.not-found h1 {
    color: var(--primary);
    font-size: clamp(80px, 15vw, 160px);
}

/* old footer kept for backward compat */
.site-footer { display: none; }

/* ── NEW VISTAPRINT-STYLE FOOTER ─────────────────────────────── */
.vp-footer {
    background: #0f172a;
    color: rgba(255,255,255,.8);
    margin-top: 0;
}
.vp-footer-inner {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
    padding: 56px clamp(20px,5vw,80px) 40px;
    max-width: 1400px;
    margin: 0 auto;
}
.vp-footer-brand p { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.6; margin: 12px 0 20px; max-width: 280px; }
.vp-footer-logo { width: 160px; height: auto; }
.vp-footer-social { display: flex; gap: 8px; }
.vp-social-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid rgba(255,255,255,.2); border-radius: 8px;
    color: rgba(255,255,255,.7); font-size: 12px; font-weight: 700;
    transition: all .15s;
}
.vp-social-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

.vp-footer-col h4 { font-size: 13px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 14px; }
.vp-footer-col a { display: block; font-size: 13px; color: rgba(255,255,255,.55); margin-bottom: 9px; transition: color .15s; }
.vp-footer-col a:hover { color: #fff; }
.vp-footer-payments { margin-top: 20px; }
.vp-footer-payments h4 { margin-bottom: 10px; }
.vp-payment-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.vp-payment-icons span {
    padding: 4px 8px; border: 1px solid rgba(255,255,255,.2);
    border-radius: 5px; font-size: 10px; font-weight: 700; color: rgba(255,255,255,.65);
}

.vp-footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px clamp(20px,5vw,80px);
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: 12px; color: rgba(255,255,255,.4);
    gap: 16px; flex-wrap: wrap;
}

@media (max-width: 900px) {
    .vp-footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 600px) {
    .vp-footer-inner { grid-template-columns: 1fr; gap: 24px; padding: 32px 16px; }
    .vp-footer-bottom { flex-direction: column; text-align: center; }
}

.copyright { display: none; }

.whatsapp-float,
.back-to-top {
    position: fixed;
    right: 18px;
    z-index: 60;
    border: 0;
    border-radius: 999px;
    box-shadow: var(--shadow);
    cursor: pointer;
    font-weight: 900;
}

.whatsapp-float {
    bottom: 82px;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    background: #20b15a;
    color: var(--white);
}

.back-to-top {
    bottom: 20px;
    display: none;
    min-width: 54px;
    height: 44px;
    background: var(--primary);
    color: var(--white);
}

.back-to-top.show {
    display: block;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 80;
    transform: translateX(-50%);
    padding: 12px 16px;
    border-radius: 6px;
    background: var(--ink);
    color: var(--white);
    box-shadow: var(--shadow);
    font-weight: 900;
}

@media (max-width: 1180px) {
    .top-nav {
        grid-template-columns: auto 1fr auto;
    }

    .hamburger {
        display: block;
    }

    .logo img {
        height: 46px;
        max-width: 156px;
    }

    .search-form {
        grid-column: 1 / -1;
        order: 3;
    }

    .mega-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 10px 16px 18px;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }

    .mega-nav.open {
        display: flex;
    }

    .mega-dropdown {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        box-shadow: none;
        border: 0;
        padding: 0 0 12px 12px;
    }

    .slide,
    .product-detail-grid,
    .catalog-layout,
    .cart-layout,
    .checkout-layout,
    .account-layout {
        grid-template-columns: 1fr;
    }

    .filter-sidebar,
    .summary-box,
    .account-sidebar {
        position: static;
    }

    .product-grid,
    .category-grid,
    .trust-section,
    .why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .top-nav {
        grid-template-columns: auto 1fr;
        gap: 12px;
        padding: 12px 16px;
    }

    .quick-links {
        grid-column: 1 / -1;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .slide {
        min-height: auto;
        padding-block: 32px 64px;
    }

    .hero-slider {
        min-height: auto;
    }

    .slide-art {
        min-height: 240px;
    }

    .category-grid,
    .product-grid,
    .trust-section,
    .why-grid,
    .footer-grid,
    .form-grid,
    .payment-options,
    .admin-grid,
    .admin-form {
        grid-template-columns: 1fr;
    }

    .section-head,
    .catalog-toolbar,
    .cta-row,
    .pincode-box,
    .coupon-form {
        align-items: stretch;
        flex-direction: column;
    }

    .cart-item {
        grid-template-columns: 90px minmax(0, 1fr);
    }

    .cart-item > strong {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .cart-update-form {
        flex-wrap: wrap;
    }

    .thumb-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

.vc-product-shell {
    padding: 18px clamp(16px, 4vw, 68px) 36px;
    background: #fff;
}

.vc-breadcrumb {
    margin: 0 0 14px;
}

.vc-product-layout {
    display: grid;
    grid-template-columns: minmax(440px, 1fr) minmax(420px, 0.92fr);
    gap: clamp(34px, 5vw, 72px);
    align-items: start;
}

.vc-gallery {
    min-width: 0;
}

.vc-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 565px;
    border: 2px solid #0578b7;
    border-radius: 10px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(0, 97, 150, 0.62), rgba(0, 0, 0, 0.12) 24%, transparent 25%),
        linear-gradient(160deg, #13242d 0%, #2f343d 52%, #60584e 100%);
}

.vc-scene {
    position: absolute;
    inset: 0;
    display: none;
    overflow: hidden;
}

.vc-scene.active {
    display: block;
}

.vc-scene-one::before {
    content: "";
    position: absolute;
    left: -8%;
    top: -18%;
    width: 52%;
    height: 72%;
    background: #139bb4;
    transform: rotate(43deg);
}

.vc-standing-card,
.vc-flat-card,
.vc-stack-card,
.vc-size-card {
    position: absolute;
    background: #fff;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}

.vc-standing-card {
    left: 15%;
    top: 10%;
    width: 210px;
    height: 318px;
    border-radius: 14px;
    transform: rotate(-25deg);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    color: #67b82f;
}

.vc-standing-card strong,
.vc-flat-card strong {
    font-size: 32px;
    line-height: 1;
}

.vc-standing-card small {
    color: #2BA8E0;
    font-weight: 900;
    letter-spacing: 1px;
}

.vc-logo {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: linear-gradient(135deg, #006196, #70c947);
    color: #fff;
    font-size: 25px;
    font-weight: 900;
}

.vc-logo.small {
    width: 54px;
    height: 54px;
    font-size: 18px;
}

.vc-flat-card {
    right: 14%;
    top: 12%;
    width: 320px;
    height: 185px;
    border-radius: 12px;
    transform: rotate(7deg);
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 18px;
    align-items: center;
    padding: 22px;
    color: #67b82f;
}

.vc-flat-card::before {
    content: "";
    grid-column: 2;
    width: 1px;
    height: 130px;
    background: #bcc8d0;
}

.vc-flat-card p {
    margin: 0;
    color: #334155;
    font-size: 12px;
    line-height: 1.5;
}

.vc-scene-two {
    background:
        radial-gradient(circle at 18% 18%, rgba(43, 168, 224, 0.2), transparent 32%),
        linear-gradient(135deg, #18222c, #44515d);
}

.vc-stack-card {
    display: grid;
    place-items: center;
    width: 340px;
    height: 195px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 26px;
}

.vc-stack-card.red {
    left: 19%;
    top: 43%;
    background: #e23d45;
    color: #fff;
    transform: rotate(-7deg);
}

.vc-stack-card.white {
    left: 31%;
    top: 24%;
    color: #006196;
    transform: rotate(8deg);
}

.vc-stack-card.dark {
    right: 12%;
    top: 38%;
    background: #111827;
    color: #fff;
    transform: rotate(3deg);
}

.vc-scene-three {
    display: none;
    place-items: center;
    background: #f1f5f9;
}

.vc-scene-three.active {
    display: grid;
}

.vc-size-card {
    position: static;
    display: grid;
    place-items: center;
    width: min(72%, 470px);
    aspect-ratio: 1.72;
    border-radius: 8px;
    border: 2px dashed #94a3b8;
    color: #1e293b;
}

.vc-size-card strong {
    color: #006196;
    font-size: clamp(22px, 3vw, 34px);
}

.vc-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border: 1px solid #c9d3dc;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    color: #000;
    cursor: pointer;
    font-size: 54px;
    line-height: 1;
    transform: translateY(-50%);
}

.vc-prev {
    left: -24px;
    color: #9aa4af;
}

.vc-next {
    right: -24px;
}

.vc-zoom-hint {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 4;
    padding: 1px 4px;
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    font-size: 19px;
    transform: translateX(-50%);
}

.vc-thumbs {
    display: flex;
    gap: 12px;
    margin-top: 26px;
}

.vc-thumbs button {
    width: 112px;
    height: 110px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #e5e7eb;
    cursor: pointer;
    overflow: hidden;
}

.vc-thumbs button.active {
    border-color: #0578b7;
}

.thumb-scene {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
}

.thumb-scene.one {
    background: linear-gradient(135deg, #1b2d36, #4b5563 62%, #ffffff 63%);
}

.thumb-scene.two {
    background: linear-gradient(135deg, #111827, #334155 55%, #dc2626 56%);
}

.thumb-scene.three {
    background: linear-gradient(135deg, #f8fafc, #f8fafc 70%, #1f2937 71%);
}

.vc-buy-panel {
    padding-top: 6px;
}

.vc-buy-panel h1 {
    margin: 0 0 8px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.08;
}

.vc-subtitle {
    margin: 0 0 10px;
    color: #475569;
}

.vc-rating {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 26px;
    color: #64748b;
}

.vc-rating strong {
    color: #986a06;
}

.vc-option-group {
    margin-bottom: 28px;
}

.vc-option-group h2,
.vc-label {
    display: block;
    margin: 0 0 8px;
    color: #000;
    font-size: 25px;
    font-weight: 900;
}

.vc-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 16px;
}

.vc-choice {
    display: grid;
    place-items: center;
    min-height: 100px;
    padding: 18px;
    border: 1px solid #b8c0c8;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    font-size: 21px;
    font-weight: 900;
}

.vc-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.vc-choice.active,
.vc-choice:has(input:checked) {
    border: 3px solid #0578b7;
    background: #e6f6ff;
}

.vc-select {
    width: 100%;
    min-height: 72px;
    border: 1px solid #7d858c;
    border-radius: 9px;
    padding: 0 58px 0 22px;
    background: #fff;
    color: #000;
    font-size: 25px;
    font-weight: 900;
}

.vc-price-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin: -8px 0 28px;
    color: #475569;
}

.vc-price-box strong {
    color: #006196;
    font-size: 32px;
}

.vc-actions {
    display: grid;
    gap: 24px;
    margin-bottom: 20px;
}

.vc-main-action,
.vc-upload-action {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 24px;
    font-weight: 900;
}

.vc-main-action {
    border: 0;
    background: #68c9ea;
    color: #000;
}

.vc-upload-action {
    border: 1px solid #b8c0c8;
    background: #fff;
    color: #111;
}

.vc-upload-action input {
    display: none;
}

.vc-accordion {
    border-top: 1px solid #b8c0c8;
}

.vc-accordion button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 76px;
    border: 0;
    border-bottom: 1px solid #b8c0c8;
    background: #fff;
    color: #000;
    cursor: pointer;
    padding: 0;
    text-align: left;
    text-decoration: underline;
    font-size: 25px;
}

.vc-accordion button span {
    text-decoration: none;
    font-size: 54px;
    line-height: 1;
}

.vc-accordion div {
    display: none;
    padding: 16px 0 22px;
    color: #475569;
}

.vc-accordion div.open {
    display: block;
}

.vc-mini-table {
    width: 100%;
    border-collapse: collapse;
}

.vc-mini-table td {
    padding: 9px 0;
    border-top: 1px solid #e2e8f0;
}

.vc-template-section {
    padding: 34px clamp(16px, 4vw, 68px) 72px;
    background: #fff;
}

.vc-template-head {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-bottom: 20px;
}

.vc-template-head h2 {
    margin: 0;
    color: #000;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.1;
}

.vc-template-head a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #000;
    font-size: 24px;
    font-weight: 900;
}

.vc-template-head span {
    font-size: 38px;
}

.vc-template-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.vc-template-card {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid #d7dde3;
    border-radius: 10px;
    background: #fff;
}

.template-card-art {
    display: grid;
    place-items: center;
    min-height: 118px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(0, 97, 150, 0.12), rgba(43, 168, 224, 0.08)),
        #f1f5f9;
    color: #006196;
    font-size: 32px;
    font-weight: 900;
}

.vc-template-card strong {
    min-height: 44px;
    color: #111827;
}

.vc-template-card small {
    color: #64748b;
    font-weight: 800;
}

/* old pdp-shell kept */
.pdp-shell { padding: 26px clamp(16px,4vw,56px) 64px; background:#f7fbfe; }

/* ============================================================
   VISTAPRINT-STYLE PRODUCT DETAIL PAGE
   ============================================================ */
.vp-pdp { max-width:1280px; margin:0 auto; padding:16px clamp(16px,4vw,56px) 64px; }

/* Breadcrumb */
.vp-breadcrumb { display:flex; align-items:center; gap:8px; font-size:13px; color:#64748b; margin-bottom:24px; flex-wrap:wrap; }
.vp-breadcrumb a { color:var(--primary); font-weight:600; }
.vp-breadcrumb span { color:#cbd5e1; }

/* Layout */
.vp-pdp-layout {
    display:grid;
    grid-template-columns: minmax(0,1fr) minmax(360px,440px);
    gap:48px;
    align-items:start;
    margin-bottom:48px;
}

/* ── GALLERY ──────────────────────────────────────────────── */
.vp-pdp-gallery { display:flex; flex-direction:column; gap:14px; }
.vp-pdp-main-img {
    border-radius:14px;
    overflow:hidden;
    background:linear-gradient(135deg,#f0f8ff,#e8f4fd);
    border:1px solid #e2e8f0;
    aspect-ratio:1.1;
    display:flex; align-items:center; justify-content:center;
}
.vp-pdp-main-img img { width:100%; height:100%; object-fit:contain; padding:24px; }
.vp-pdp-quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vp-pdp-qa {
    display:flex; align-items:center; gap:12px;
    padding:14px 16px; border-radius:10px; text-decoration:none;
    border:1.5px solid #e2e8f0; background:#fff;
    transition:all .15s;
}
.vp-pdp-qa:hover { border-color:var(--primary); box-shadow:0 4px 14px rgba(0,97,150,.1); }
.vp-pdp-qa span { font-size:24px; flex-shrink:0; }
.vp-pdp-qa strong { display:block; font-size:13px; font-weight:800; color:#0f172a; }
.vp-pdp-qa em { display:block; font-style:normal; font-size:11px; color:#64748b; }
.vp-pdp-qa-design { background:#f0f8ff; border-color:#c8dff0; }
.vp-pdp-qa-design:hover { background:#dceefa; }

.vp-pdp-customize-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin-top:10px; padding:15px 16px; border-radius:10px;
    background:#0f172a; color:#fff; text-decoration:none;
    font-size:14px; font-weight:800; letter-spacing:.2px;
    transition:background .15s, transform .1s;
}
.vp-pdp-customize-btn:hover { background:#1e293b; }
.vp-pdp-customize-btn:active { transform:scale(.99); }

/* ── PANEL ────────────────────────────────────────────────── */
.vp-pdp-panel { display:flex; flex-direction:column; gap:16px; }

.vp-pdp-rating { display:flex; align-items:center; gap:8px; }
.vp-pdp-stars { color:#f59e0b; font-size:16px; letter-spacing:1px; }
.vp-pdp-stars-sm { color:#f59e0b; font-size:13px; }
.vp-pdp-rating-num { font-weight:800; color:#0f172a; font-size:15px; }
.vp-pdp-review-link { font-size:13px; color:var(--primary); font-weight:600; text-decoration:underline; }

.vp-pdp-title { font-size:clamp(24px,3vw,34px); font-weight:900; color:#0f172a; margin:0; line-height:1.15; }
.vp-pdp-subtitle { font-size:15px; color:#64748b; margin:0; line-height:1.5; }

.vp-pdp-features { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
.vp-pdp-features li { font-size:14px; color:#374151; display:flex; align-items:flex-start; gap:8px; }

.vp-pdp-divider { border:none; border-top:1px solid #f1f5f9; margin:0; }

.vp-pdp-options { display:flex; flex-direction:column; gap:12px; }
.vp-pdp-option-row { display:flex; flex-direction:column; gap:5px; }
.vp-pdp-option-row label { font-size:13px; font-weight:700; color:#374151; }
.vp-pdp-select {
    width:100%; min-height:44px; border:1.5px solid #d1d5db; border-radius:8px;
    padding:0 12px; font-size:14px; color:#0f172a; background:#fff;
    cursor:pointer; transition:border-color .15s;
}
.vp-pdp-select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,97,150,.1); }

/* Price box */
.vp-pdp-price-box {
    background:#f0f8ff; border:1.5px solid #c8dff0;
    border-radius:10px; padding:16px 18px;
}
.vp-pdp-price-main { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.vp-pdp-price-label { font-size:13px; color:#64748b; font-weight:600; }
.vp-pdp-price-amount { font-size:28px; font-weight:900; color:var(--primary); }
.vp-pdp-price-sub { display:flex; align-items:center; gap:6px; font-size:12px; color:#64748b; flex-wrap:wrap; }

/* Browse Designs button (like Vistaprint) */
.vp-pdp-browse-btn {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-height:56px; padding:14px 20px;
    background:var(--primary); color:#fff; border-radius:10px;
    text-decoration:none; text-align:center;
    box-shadow:0 6px 20px rgba(0,97,150,.28);
    transition:all .18s;
    font-weight:900;
    font-size:18px;
}
.vp-pdp-browse-btn span { font-size:12px; font-weight:500; color:rgba(255,255,255,.75); margin-top:2px; }
.vp-pdp-browse-btn:hover { background:#004d78; transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,97,150,.35); }

.vp-pdp-or { display:flex; align-items:center; gap:10px; color:#94a3b8; font-size:13px; }
.vp-pdp-or::before,.vp-pdp-or::after { content:''; flex:1; height:1px; background:#e2e8f0; }

/* Add to Cart button on product page */
.vp-pdp-cart-btn {
    display:flex; align-items:center; justify-content:center; gap:10px;
    min-height:52px; width:100%; padding:0 20px;
    background:#16a34a; color:#fff; border:none; border-radius:10px;
    font-size:16px; font-weight:800; cursor:pointer;
    box-shadow:0 4px 16px rgba(22,163,74,.3);
    transition:all .18s;
}
.vp-pdp-cart-btn:hover { background:#15803d; transform:translateY(-1px); box-shadow:0 8px 22px rgba(22,163,74,.38); }

.vp-pdp-upload-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    min-height:46px; padding:0 20px; border:1.5px solid #c8dff0;
    border-radius:10px; background:#f0f8ff; color:var(--primary);
    font-size:14px; font-weight:700; text-decoration:none; transition:all .15s;
}
.vp-pdp-upload-btn:hover { background:#dceefa; border-color:var(--primary); }

.vp-pdp-trust-row {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    font-size:12px; color:#64748b; font-weight:600;
}
.vp-pdp-trust-row span::first-letter { color:#16a34a; }

/* ── INFO SECTION ─────────────────────────────────────────── */
.vp-pdp-info-section { display:flex; flex-direction:column; gap:32px; }
.vp-pdp-info-block {
    background:#fff; border:1px solid #e2e8f0;
    border-radius:14px; padding:28px 28px;
}
.vp-pdp-info-block h2 { font-size:20px; font-weight:900; color:#0f172a; margin:0 0 18px; }

.vp-pdp-specs-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.vp-pdp-spec { display:flex; flex-direction:column; gap:4px; }
.vp-pdp-spec strong { font-size:13px; font-weight:800; color:#0f172a; }
.vp-pdp-spec span { font-size:13px; color:#64748b; }

.vp-pdp-options-list { margin:0; padding:0 0 0 18px; display:flex; flex-direction:column; gap:6px; }
.vp-pdp-options-list li { font-size:14px; color:#374151; }

.vp-pdp-desc-block p { font-size:15px; color:#475569; line-height:1.7; margin:0 0 16px; }
.vp-pdp-chips { display:flex; flex-wrap:wrap; gap:8px; }
.vp-pdp-chips span { padding:5px 14px; background:#f0f8ff; color:var(--primary); border:1px solid #c8dff0; border-radius:999px; font-size:13px; font-weight:600; }

/* FAQs */
.vp-pdp-faqs { display:flex; flex-direction:column; gap:8px; }
.vp-pdp-faq { border:1px solid #e2e8f0; border-radius:8px; }
.vp-pdp-faq summary { padding:14px 16px; font-size:14px; font-weight:700; color:#0f172a; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.vp-pdp-faq summary::after { content:'＋'; font-size:18px; color:#64748b; }
.vp-pdp-faq[open] summary::after { content:'−'; }
.vp-pdp-faq p { padding:0 16px 14px; margin:0; font-size:14px; color:#475569; line-height:1.6; }

/* Reviews */
.vp-pdp-reviews-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.vp-pdp-review-summary { display:flex; align-items:center; gap:8px; }
.vp-pdp-review-summary strong { font-size:22px; font-weight:900; color:#0f172a; }
.vp-pdp-review-ai { font-size:14px; color:#64748b; background:#f8fafc; border-left:3px solid var(--primary); padding:10px 14px; border-radius:0 6px 6px 0; margin-bottom:20px; }
.vp-pdp-reviews-list { display:flex; flex-direction:column; gap:16px; }
.vp-pdp-review { padding:16px; border:1px solid #f1f5f9; border-radius:10px; }
.vp-pdp-review-top { display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.vp-pdp-review-top strong { font-size:14px; font-weight:800; color:#0f172a; }
.vp-pdp-review-top span:last-child { font-size:12px; color:#94a3b8; margin-left:auto; }
.vp-pdp-review p { margin:0; font-size:14px; color:#374151; line-height:1.5; }
.vp-pdp-response { margin-top:10px; padding:10px 12px; background:#f0f8ff; border-radius:6px; font-size:13px; color:#475569; }

/* Related products */
.vp-related-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.vp-related-card { display:flex; flex-direction:column; gap:10px; border:1px solid #e2e8f0; border-radius:10px; overflow:hidden; text-decoration:none; transition:all .15s; }
.vp-related-card:hover { border-color:var(--primary); box-shadow:0 4px 14px rgba(0,97,150,.12); transform:translateY(-2px); }
.vp-related-card img { width:100%; aspect-ratio:1.2; object-fit:contain; background:linear-gradient(135deg,#f0f8ff,#e8f4fd); padding:12px; }
.vp-related-card div { padding:0 12px 12px; }
.vp-related-card strong { display:block; font-size:13px; font-weight:700; color:#0f172a; margin-bottom:4px; }
.vp-related-card span { font-size:13px; font-weight:800; color:var(--primary); }

/* Responsive */
@media(max-width:900px) {
    .vp-pdp-layout { grid-template-columns:1fr; gap:24px; }
    .vp-pdp-specs-grid { grid-template-columns:1fr; }
    .vp-related-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px) {
    .vp-pdp-quick-actions { grid-template-columns:1fr; }
    .vp-related-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
    .vp-pdp-info-block { padding:18px; }
}

.pdp-breadcrumb {
    margin: 0 auto 22px;
    max-width: 1280px;
}

.pdp-layout,
.pdp-info-grid,
.pdp-card {
    max-width: 1280px;
    margin-right: auto;
    margin-left: auto;
}

.pdp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
    gap: 32px;
    align-items: start;
}

.pdp-gallery,
.pdp-panel,
.pdp-card,
.pdp-accordion {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(0, 97, 150, 0.08);
}

.pdp-gallery { padding: 14px; }

.pdp-main-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(135deg, #f0f8ff, #e8f4fd);
    border: 1px solid #e2e8f0;
    display: flex; align-items: center; justify-content: center;
}
.pdp-main-image img {
    width: 100%; height: 100%;
    object-fit: contain; padding: 20px;
    transition: transform .25s ease;
}
.pdp-main-image.is-zooming img { transform: scale(1.4); }

/* Category badge on image */
.pdp-img-badge {
    position: absolute; bottom: 12px; left: 12px;
    background: rgba(0,97,150,.85); color: #fff;
    padding: 4px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 700;
    backdrop-filter: blur(4px);
}

/* Action cards below image */
.pdp-action-cards {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px;
}
.pdp-action-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 14px 10px; border-radius: 10px; border: 1.5px solid #e2e8f0;
    background: #fff; text-decoration: none; text-align: center;
    transition: all .15s;
}
.pdp-action-card:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(0,97,150,.12); }
.pdp-action-card span { font-size: 26px; }
.pdp-action-card strong { font-size: 13px; font-weight: 800; color: #0f172a; }
.pdp-action-card em { font-style: normal; font-size: 11px; color: #64748b; }
.pdp-ac-design { background: #f0f8ff; border-color: #c8dff0; }
.pdp-ac-design:hover { background: #dceefa; }
.pdp-ac-upload { background: #fafbfc; }

/* Old thumbs hidden */
.pdp-thumbs { display: none; }
.pdp-thumbs button { display: grid; gap: 8px; padding: 6px; border: 2px solid var(--line); border-radius: 8px; background: #fff; color: #475467;
    cursor: pointer;
    font-weight: 900;
}

.pdp-thumbs button.active {
    border-color: var(--primary);
}

.pdp-thumbs img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    object-fit: cover;
}

.pdp-thumbs strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
}

.pdp-panel {
    position: sticky;
    top: 156px;
    padding: 26px;
}

.pdp-rating {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: #64748b;
    font-weight: 800;
}

.pdp-rating > span {
    color: #f59e0b;
}

.pdp-rating a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.pdp-panel h1 {
    margin: 14px 0 8px;
    color: #0f172a;
    font-size: clamp(30px, 3.2vw, 46px);
    line-height: 1.08;
}

.pdp-subtitle {
    margin: 0;
    color: #475569;
    font-size: 18px;
    font-weight: 700;
}

.pdp-features {
    display: grid;
    gap: 12px;
    margin: 24px 0;
    padding: 0;
    list-style: none;
}

.pdp-features li {
    display: flex;
    gap: 10px;
    color: #344054;
    font-weight: 700;
}

.pdp-features span {
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 12px;
}

.pdp-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.pdp-fields label {
    display: grid;
    gap: 8px;
    color: #344054;
    font-weight: 900;
}

.pdp-fields select {
    width: 100%;
    min-height: 50px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    padding: 0 14px;
    font-weight: 800;
    outline: 0;
}

.pdp-fields select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0, 97, 150, 0.12);
}

.pdp-total-box {
    display: grid;
    gap: 14px;
    margin-top: 22px;
    border-radius: 8px;
    background: #eff8ff;
    padding: 18px;
}

.pdp-total-box div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}

.pdp-total-box div + div {
    border-top: 1px solid #cfe8f8;
    padding-top: 14px;
}

.pdp-total-box span {
    color: #344054;
    font-weight: 900;
}

.pdp-total-box strong {
    color: #0f172a;
    text-align: right;
    font-size: 20px;
}

/* Old buttons kept for backward compat */
.pdp-actions { display:none; }
.pdp-primary-action, .pdp-secondary-action { display:none; }

/* ── NEW CUSTOMIZE BOX (Vistaprint style) ─────────────────── */
.pdp-customize-box {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdp-customize-main {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--primary);
    color: #fff;
    border-radius: 12px;
    text-decoration: none;
    border: none;
    box-shadow: 0 6px 20px rgba(0,97,150,.28);
    transition: all .18s;
}
.pdp-customize-main:hover {
    background: #004d78;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,97,150,.35);
}
.pdp-cust-icon { font-size: 28px; flex-shrink: 0; }
.pdp-cust-text { flex: 1; }
.pdp-cust-text strong { display:block; font-size: 18px; font-weight: 900; line-height: 1.2; }
.pdp-cust-text em { display:block; font-style:normal; font-size: 13px; color: rgba(255,255,255,.75); margin-top:2px; }
.pdp-cust-arrow { font-size: 22px; font-weight: 700; opacity:.8; }

.pdp-or-row {
    display: flex; align-items: center; gap: 10px;
    color: #94a3b8; font-size: 13px;
}
.pdp-or-row::before, .pdp-or-row::after {
    content:''; flex:1; height:1px; background:#e2e8f0;
}

.pdp-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 20px;
    border: 1.5px solid #c8dff0;
    border-radius: 10px;
    background: #f0f8ff;
    color: #006196;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all .15s;
}
.pdp-upload-btn:hover { background: #dceefa; border-color: #006196; }

.pdp-primary-action:hover {
    background: #034d78;
}

.pdp-secondary-action:hover {
    background: #eff8ff;
}

.pdp-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 34px;
}

.pdp-accordion {
    overflow: hidden;
    box-shadow: none;
}

.pdp-accordion > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 70px;
    border: 0;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    padding: 0 24px;
    text-align: left;
    font-size: 20px;
    font-weight: 900;
}

.pdp-accordion > button span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eff8ff;
    color: var(--primary);
    font-size: 24px;
    transition: transform 0.2s ease;
}

.pdp-accordion.open > button span {
    transform: rotate(45deg);
}

.pdp-accordion > div {
    display: none;
    border-top: 1px solid #edf2f7;
    padding: 22px 24px;
    color: #475569;
}

.pdp-accordion.open > div {
    display: block;
}

.pdp-spec-grid,
.pdp-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.pdp-spec-grid h3 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 16px;
}

.pdp-spec-grid p {
    margin: 0;
}

.pdp-option-grid span {
    border-radius: 8px;
    background: #f8fafc;
    padding: 12px 14px;
    color: #344054;
    font-weight: 800;
}

.pdp-card {
    margin-top: 28px;
    padding: 28px;
}

.pdp-card h2 {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 26px;
}

.pdp-card p {
    max-width: 920px;
    margin: 0;
    color: #475569;
}

.pdp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.pdp-chips span {
    border: 1px solid #cfe8f8;
    border-radius: 999px;
    background: #eff8ff;
    color: var(--primary);
    padding: 8px 14px;
    font-weight: 900;
}

.pdp-review-head {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) 1.2fr;
    gap: 24px;
    align-items: start;
}

.pdp-review-head strong {
    display: inline-block;
    margin-right: 8px;
    color: #0f172a;
    font-size: 42px;
    line-height: 1;
}

.pdp-review-head span {
    color: #64748b;
    font-weight: 800;
}

.pdp-review-head p {
    border-radius: 8px;
    background: #f8fafc;
    padding: 18px;
}

.pdp-reviews {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.pdp-reviews article {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
}

.pdp-reviews header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.pdp-reviews h3 {
    margin: 0;
    color: #0f172a;
}

.pdp-reviews header span {
    color: #64748b;
    font-weight: 700;
}

.pdp-reviews header strong {
    color: #f59e0b;
}

.pdp-reviews article p {
    margin-top: 14px;
}

.pdp-reviews blockquote {
    margin: 16px 0 0;
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    background: #eff8ff;
    padding: 14px;
    color: #475569;
}

.pdp-reviews blockquote strong {
    display: block;
    color: #0f172a;
}

.pdp-faqs {
    display: grid;
    gap: 12px;
}

@media (max-width: 1180px) {
    .vc-product-layout {
        grid-template-columns: 1fr;
    }

    .vc-stage {
        min-height: 480px;
    }

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

    .pdp-layout,
    .pdp-info-grid {
        grid-template-columns: 1fr;
    }

    .pdp-panel {
        position: static;
    }
}

@media (max-width: 720px) {
    .pdp-shell {
        padding: 18px 14px 44px;
    }

    .pdp-gallery,
    .pdp-panel,
    .pdp-card {
        padding: 16px;
    }

    .pdp-thumbs,
    .pdp-fields,
    .pdp-actions,
    .pdp-spec-grid,
    .pdp-option-grid,
    .pdp-review-head {
        grid-template-columns: 1fr;
    }

    .pdp-total-box div,
    .pdp-reviews header {
        align-items: flex-start;
        flex-direction: column;
    }

    .pdp-total-box strong {
        text-align: left;
    }

    .pdp-accordion > button {
        min-height: 62px;
        padding: 0 16px;
        font-size: 17px;
    }

    .vc-product-shell {
        padding-top: 12px;
    }

    .vc-stage {
        min-height: 340px;
    }

    .vc-standing-card {
        left: 13%;
        width: 132px;
        height: 205px;
    }

    .vc-standing-card strong,
    .vc-flat-card strong {
        font-size: 20px;
    }

    .vc-logo {
        width: 46px;
        height: 46px;
        font-size: 15px;
    }

    .vc-flat-card {
        right: 8%;
        width: 190px;
        height: 116px;
        padding: 12px;
        gap: 8px;
    }

    .vc-flat-card p {
        font-size: 8px;
    }

    .vc-arrow {
        width: 52px;
        height: 52px;
        font-size: 40px;
    }

    .vc-zoom-hint {
        width: 92%;
        text-align: center;
        font-size: 13px;
    }

    .vc-thumbs button {
        width: 88px;
        height: 84px;
    }

    .vc-choice-grid,
    .vc-template-grid {
        grid-template-columns: 1fr;
    }

    .vc-choice,
    .vc-select,
    .vc-main-action,
    .vc-upload-action,
    .vc-accordion button {
        font-size: 18px;
    }

    .vc-template-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ============================================================
   TEMPLATE BROWSER — VISTAPRINT STYLE
   ============================================================ */

.template-mode .promo-strip,
.template-mode .site-header,
.template-mode .site-footer,
.template-mode .whatsapp-float,
.template-mode .back-to-top { display: none; }
.template-mode main { padding: 0; }

.tpl-top-bar {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; padding: 12px 28px; background: #fff;
    border-bottom: 1px solid #e2e8f0; position: sticky; top: 0; z-index: 50;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.tpl-top-left { display: flex; align-items: center; gap: 18px; }
.tpl-back {
    display: inline-flex; align-items: center; gap: 6px;
    color: #006196; font-size: 13px; font-weight: 700;
    border: 1px solid #c8dff0; border-radius: 6px; padding: 6px 12px;
    background: #f0f8ff; transition: background .15s;
}
.tpl-back:hover { background: #dceefa; }
.tpl-product-info strong { display: block; font-size: 16px; font-weight: 800; color: #0f172a; }
.tpl-product-info span { font-size: 12px; color: #64748b; }
.tpl-top-right { display: flex; align-items: center; gap: 16px; }
.tpl-qty-form { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #374151; }
.tpl-qty-form select {
    min-height: 36px; border: 1px solid #d1d5db; border-radius: 6px;
    padding: 0 10px; font-weight: 600; font-size: 13px; background: #fff; cursor: pointer;
}
.tpl-top-price strong { display: block; font-size: 22px; font-weight: 900; color: #006196; line-height: 1; }
.tpl-top-price span { font-size: 11px; color: #64748b; }

.template-browser {
    display: grid; grid-template-columns: 280px minmax(0,1fr);
    min-height: calc(100vh - 57px); background: #f8fafc; align-items: start;
}

.make-panel {
    position: sticky; top: 57px; height: calc(100vh - 57px); overflow-y: auto;
    background: #fff; border-right: 1px solid #e2e8f0; padding: 0;
    display: flex; flex-direction: column;
}
.make-panel-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 20px 12px; border-bottom: 1px solid #e2e8f0;
}
.make-panel h2 { margin: 0; font-size: 15px; font-weight: 800; color: #0f172a; }
.make-panel-sub {
    margin: 0; padding: 8px 20px 12px; font-size: 12px; color: #64748b;
    background: #f8fafc; border-bottom: 1px solid #e2e8f0;
}
.make-block { border-bottom: 1px solid #e2e8f0; }
.make-block > button {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; border: 0; background: transparent; cursor: pointer;
    padding: 13px 20px; color: #0f172a; font-size: 13px; font-weight: 700;
    transition: background .15s;
}
.make-block > button:hover { background: #f8fafc; }
.mpanel-arrow { font-size: 14px; color: #94a3b8; transition: transform .2s; }
.make-block.open .mpanel-arrow { transform: rotate(180deg); }
.make-block > div { display: none; padding: 12px 20px 16px; gap: 10px; flex-direction: column; }
.make-block.open > div { display: flex; }
.make-block label:not(.add-image-btn):not(.make-color-custom) {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 12px; font-weight: 600; color: #374151;
}
.make-block input[type="text"] {
    min-height: 36px; border: 1px solid #d1d5db; border-radius: 6px;
    padding: 7px 10px; font-size: 13px; color: #0f172a; width: 100%;
    transition: border-color .15s;
}
.make-block input[type="text"]:focus { outline: none; border-color: #006196; box-shadow: 0 0 0 3px rgba(0,97,150,.1); }
.add-image-btn {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
    border: 1.5px dashed #c8dff0; border-radius: 8px; background: #f0f8ff;
    cursor: pointer; padding: 0 14px; font-size: 13px; font-weight: 700;
    color: #006196; transition: all .15s;
}
.add-image-btn:hover { border-color: #006196; background: #e0f0fa; }
.add-img-icon { font-size: 20px; line-height: 1; font-weight: 300; }
.add-image-btn input { display: none; }
.make-hint { margin: 0; font-size: 11px; color: #94a3b8; }
.make-image-preview img {
    width: 100%; max-height: 90px; object-fit: contain;
    border: 1px solid #e2e8f0; border-radius: 6px;
    background: #fff; padding: 6px; margin-top: 6px;
}
.make-color-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.make-color-swatch {
    width: 26px; height: 26px; border-radius: 50%; background: var(--qc);
    border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,.18);
    cursor: pointer; transition: transform .12s;
}
.make-color-swatch:hover { transform: scale(1.15); }
.make-color-swatch.active { box-shadow: 0 0 0 3px #006196; }
.make-color-custom { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #64748b; cursor: pointer; }
.make-color-custom input[type="color"] { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #d1d5db; padding: 0; cursor: pointer; }
.toggle-switch input { position: absolute; opacity: 0; }
.toggle-switch span {
    position: relative; display: block; width: 40px; height: 22px;
    border-radius: 999px; background: #006196; cursor: pointer; transition: background .2s;
}
.toggle-switch span::before {
    content: ""; position: absolute; right: 3px; top: 3px;
    width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: right .2s;
}
.toggle-switch input:not(:checked) ~ span { background: #9ca3af; }
.toggle-switch input:not(:checked) ~ span::before { right: auto; left: 3px; }
.brand-kit-link {
    display: block; margin: auto 0 0; padding: 14px 20px;
    font-size: 12px; color: #006196; font-weight: 700;
    border-top: 1px solid #e2e8f0; background: #f0f8ff;
}
.brand-kit-link:hover { background: #e0f0fa; }

.tpl-right-col { display: flex; flex-direction: column; gap: 0; }
.tpl-filter-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 24px; background: #fff; border-bottom: 1px solid #e2e8f0;
    position: sticky; top: 57px; z-index: 30; flex-wrap: wrap;
}
.tpl-filter-chips { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.tpl-chip {
    min-height: 32px; padding: 0 14px; border: 1.5px solid #e2e8f0;
    border-radius: 999px; background: #fff; color: #374151;
    cursor: pointer; font-size: 13px; font-weight: 600; transition: all .15s; white-space: nowrap;
}
.tpl-chip:hover { border-color: #006196; color: #006196; }
.tpl-chip.active { background: #006196; border-color: #006196; color: #fff; }
.tpl-filter-right { display: flex; align-items: center; gap: 8px; }
.template-search {
    display: flex; align-items: center; gap: 8px; height: 36px;
    border: 1.5px solid #e2e8f0; border-radius: 8px; background: #fff;
    padding: 0 12px; transition: border-color .15s;
}
.template-search:focus-within { border-color: #006196; }
.search-icon { font-size: 16px; color: #94a3b8; line-height: 1; }
.template-search input { flex: 1; min-width: 0; width: 150px; border: 0; outline: 0; font-size: 13px; color: #0f172a; }
.favourites-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 36px;
    padding: 0 14px; border: 1.5px solid #e2e8f0; border-radius: 8px;
    background: #fff; cursor: pointer; font-size: 13px; font-weight: 600;
    white-space: nowrap; transition: all .15s;
}
.favourites-btn span { font-size: 16px; line-height: 1; }
.favourites-btn.active { border-color: #e11d2e; color: #e11d2e; background: #fff5f5; }
.tpl-meta-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 24px; font-size: 13px; color: #64748b; border-bottom: 1px solid #f1f5f9;
}
.clear-filter { border: 0; background: transparent; color: #006196; cursor: pointer; font-size: 13px; font-weight: 600; text-decoration: underline; padding: 0; }

.tpl-grid-wrap { padding: 20px 24px 48px; }
.templates-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 18px;
}

.template-card {
    position: relative; border-radius: 12px; background: #fff; overflow: hidden;
    border: 2px solid transparent;
    box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 2px 12px rgba(0,0,0,.04);
    transition: border-color .18s, box-shadow .18s, transform .18s; cursor: pointer;
}
.template-card:hover { border-color: #006196; box-shadow: 0 4px 24px rgba(0,97,150,.22); transform: translateY(-3px); }
.template-card.hidden { display: none; }

.upload-template { border: 2px dashed #c8dff0 !important; background: #f8fafc !important; }
.upload-template label {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; width: 100%; min-height: 280px; padding: 24px 20px; cursor: pointer; text-align: center;
}
.upload-template input { display: none; }
.upload-circle {
    display: grid; place-items: center; width: 56px; height: 56px;
    border: 2px dashed #93bfd8; border-radius: 50%; background: #fff;
    font-size: 26px; color: #006196; transition: all .15s;
}
.upload-template:hover .upload-circle { background: #e0f0fa; border-color: #006196; }
.upload-template strong { font-size: 14px; font-weight: 700; color: #0f172a; line-height: 1.4; }
.upload-template em { font-style: normal; font-size: 15px; font-weight: 800; color: #006196; }
.upload-template small { font-size: 12px; color: #64748b; }

.heart-btn {
    position: absolute; top: 10px; right: 10px; z-index: 4;
    display: grid; place-items: center; width: 32px; height: 32px;
    border: 0; border-radius: 50%; background: rgba(255,255,255,.92);
    color: #94a3b8; cursor: pointer; font-size: 18px; line-height: 1;
    box-shadow: 0 1px 5px rgba(0,0,0,.13); transition: color .15s, background .15s;
}
.heart-btn:hover { color: #e11d2e; background: #fff; }
.heart-btn.active { color: #e11d2e; background: #fff5f5; }

.template-preview {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 28px 16px 18px; min-height: 195px; position: relative;
    text-decoration: none; background: #f1f5f9; transition: background .2s;
    border-radius: 10px 10px 0 0; overflow: hidden;
}
.template-preview::after {
    content: "Personalise";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,97,150,.75);
    color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .02em;
    opacity: 0; transition: opacity .18s; border-radius: 10px 10px 0 0;
}
.template-card:hover .template-preview::after { opacity: 1; }

.tpl-blue-line .template-preview    { background: linear-gradient(150deg,#dbeafe,#eff6ff); }
.tpl-black-gold .template-preview   { background: linear-gradient(150deg,#1a1200,#3d2e00); }
.tpl-red-bold .template-preview     { background: linear-gradient(150deg,#fff1f2,#ffe4e6); }
.tpl-minimal .template-preview      { background: linear-gradient(150deg,#f1f5f9,#e2e8f0); }
.tpl-green .template-preview        { background: linear-gradient(150deg,#dcfce7,#f0fdf4); }
.tpl-creative .template-preview     { background: linear-gradient(150deg,#ede9fe,#ddd6fe); }
.tpl-medical .template-preview      { background: linear-gradient(150deg,#e0f2fe,#f0f9ff); }
.tpl-realestate .template-preview   { background: linear-gradient(150deg,#fef3c7,#fffbeb); }
.tpl-cafe .template-preview         { background: linear-gradient(150deg,#fef9c3,#fefce8); }
.tpl-salon .template-preview        { background: linear-gradient(150deg,#fce7f3,#fdf2f8); }
.tpl-tech .template-preview         { background: linear-gradient(150deg,#0f172a,#1e293b); }
.tpl-legal .template-preview        { background: linear-gradient(150deg,#dbeafe,#e0e7ff); }
.tpl-navy-stripe .template-preview  { background: linear-gradient(150deg,#dbeafe,#eff6ff); }
.tpl-rose .template-preview         { background: linear-gradient(150deg,#ffe4e6,#fff1f2); }
.tpl-diagonal .template-preview     { background: linear-gradient(150deg,#f8fafc,#e2e8f0); }
.tpl-dark-exec .template-preview    { background: linear-gradient(150deg,#1a1a2e,#0f0f20); }
.tpl-teal .template-preview         { background: linear-gradient(150deg,#ccfbf1,#f0fdfa); }
.tpl-orange .template-preview       { background: linear-gradient(150deg,#ffedd5,#fff7ed); }
.tpl-mono .template-preview         { background: linear-gradient(150deg,#f1f5f9,#e2e8f0); }
.tpl-grid .template-preview         { background: linear-gradient(150deg,#f8fafc,#f1f5f9); }
.tpl-pastel .template-preview       { background: linear-gradient(150deg,#ede9fe,#faf5ff); }
.tpl-yellow .template-preview       { background: linear-gradient(150deg,#fef9c3,#fefce8); }
.tpl-gradient .template-preview     { background: linear-gradient(135deg,#4f46e5,#7c3aed,#ec4899); }
.tpl-foil .template-preview         { background: linear-gradient(150deg,#1a1200,#3d2e00); }

.mini-card-wrap {
    width: calc(100% - 8px); max-width: 218px; aspect-ratio: 1.75; position: relative;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.26));
    transition: transform .2s ease, filter .2s ease; z-index: 2;
}
.template-card:hover .mini-card-wrap { transform: translateY(-5px) scale(1.03); filter: drop-shadow(0 14px 28px rgba(0,0,0,.34)); }
.tpl-card-label { position: relative; z-index: 3; font-size: 12px; font-weight: 600; color: #475569; margin-top: 10px; text-align: center; }

.mini-card {
    width: 100%; height: 100%; border-radius: 7px;
    display: grid; grid-template-rows: auto 1fr auto;
    overflow: hidden; position: relative;
    background: #fff; color: #17212b; padding: 10px; gap: 3px;
    font-family: Inter, Arial, sans-serif;
}
.mc-logo { width: 28px; height: 28px; border-radius: 4px; background: var(--mc-accent,#006196); background-size: cover; background-position: center; flex-shrink: 0; }
.mc-logo.has-image { background-color: transparent; }
.mc-body { display: grid; align-content: center; gap: 2px; }
.mc-company { font-size: 10.5px; font-weight: 900; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.mc-title { font-size: 7.5px; display: block; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-footer { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid rgba(0,0,0,.09); padding-top: 4px; }
.mc-name, .mc-phone { font-size: 7px; display: block; opacity: .65; }

.tpl-blue-line.mini-card { grid-template-columns:32px 1fr; grid-template-rows:1fr auto; padding:0; gap:0; }
.tpl-blue-line.mini-card::before { content:""; grid-row:1/-1; grid-column:1; background:#006196; }
.tpl-blue-line .mc-logo { display:none; }
.tpl-blue-line .mc-body { grid-column:2; padding:10px 10px 4px; align-content:center; }
.tpl-blue-line .mc-footer { grid-column:2; padding:0 10px 10px; border-top:none; }
.tpl-blue-line .mc-company { color:#006196; font-size:11px; }

.tpl-black-gold.mini-card { background:#0c0c0c; color:#d8b56d; }
.tpl-black-gold .mc-logo { background:linear-gradient(135deg,#d8b56d,#a07840); border-radius:50%; }
.tpl-black-gold .mc-company { color:#d8b56d; letter-spacing:.04em; }
.tpl-black-gold .mc-title { color:rgba(216,181,109,.65); }
.tpl-black-gold .mc-footer { border-top:1px solid rgba(216,181,109,.25); }
.tpl-black-gold .mc-name, .tpl-black-gold .mc-phone { color:rgba(216,181,109,.55); }

.tpl-red-bold.mini-card { grid-template-rows:30px 1fr auto; padding:0; gap:0; }
.tpl-red-bold.mini-card::before { content:""; background:#e11d2e; grid-row:1; grid-column:1/-1; }
.tpl-red-bold .mc-logo { position:absolute; top:5px; left:8px; width:20px; height:20px; background:rgba(255,255,255,.3); border-radius:3px; }
.tpl-red-bold .mc-body { padding:8px 10px 4px; }
.tpl-red-bold .mc-company { color:#e11d2e; font-size:11px; }
.tpl-red-bold .mc-footer { padding:0 10px 10px; border-top:none; }

.tpl-minimal.mini-card { border:1px solid #e2e8f0; }
.tpl-minimal .mc-logo { background:#17212b; }
.tpl-minimal .mc-company { color:#17212b; }
.tpl-minimal .mc-footer { border-top:1.5px solid #e2e8f0; }

.tpl-green.mini-card { background:linear-gradient(135deg,#f0fdf4,#dcfce7); }
.tpl-green .mc-logo { background:#16a34a; }
.tpl-green .mc-company { color:#15803d; }
.tpl-green .mc-footer { border-top:2px solid #16a34a; }

.tpl-creative.mini-card { background:linear-gradient(135deg,#7c3aed,#2563eb); color:#fff; }
.tpl-creative .mc-logo { background:rgba(255,255,255,.3); }
.tpl-creative .mc-company { color:#fff; }
.tpl-creative .mc-title { color:rgba(255,255,255,.75); }
.tpl-creative .mc-footer { border-top:1px solid rgba(255,255,255,.2); }
.tpl-creative .mc-name, .tpl-creative .mc-phone { color:rgba(255,255,255,.65); }

.tpl-medical.mini-card { grid-template-rows:30px 1fr auto; padding:0; gap:0; }
.tpl-medical.mini-card::before { content:""; background:linear-gradient(90deg,#0369a1,#0284c7); }
.tpl-medical .mc-logo { position:absolute; right:8px; top:5px; width:20px; height:20px; background:rgba(255,255,255,.4); border-radius:50%; }
.tpl-medical .mc-body { padding:8px 10px 4px; }
.tpl-medical .mc-company { color:#0369a1; }
.tpl-medical .mc-footer { padding:0 10px 10px; border-top:none; }

.tpl-realestate.mini-card { grid-template-columns:34px 1fr; grid-template-rows:1fr auto; padding:0; gap:0; }
.tpl-realestate.mini-card::before { content:""; background:#92400e; grid-column:1; grid-row:1/-1; }
.tpl-realestate .mc-logo { display:none; }
.tpl-realestate .mc-body { grid-column:2; padding:10px 10px 4px; align-content:center; }
.tpl-realestate .mc-company { color:#92400e; }
.tpl-realestate .mc-footer { grid-column:2; padding:0 10px 10px; border-top:none; }

.tpl-cafe.mini-card { background:#fdf6e3; }
.tpl-cafe .mc-logo { background:#92400e; border-radius:50%; }
.tpl-cafe .mc-company { color:#92400e; }
.tpl-cafe .mc-footer { border-top:1.5px solid #d97706; }

.tpl-salon.mini-card { background:linear-gradient(135deg,#fff0f6,#fce7f3); }
.tpl-salon .mc-logo { background:#be185d; border-radius:50%; }
.tpl-salon .mc-company { color:#be185d; }
.tpl-salon .mc-footer { border-top:2px solid #be185d; }

.tpl-tech.mini-card { background:#0f172a; color:#e2e8f0; }
.tpl-tech .mc-logo { background:#0ea5e9; }
.tpl-tech .mc-company { color:#f1f5f9; }
.tpl-tech .mc-title { color:#0ea5e9; }
.tpl-tech .mc-footer { border-top:1px solid #1e293b; }
.tpl-tech .mc-name, .tpl-tech .mc-phone { color:#94a3b8; }

.tpl-legal.mini-card { border-left:5px solid #1e3a5f; }
.tpl-legal .mc-logo { background:#1e3a5f; border-radius:2px; }
.tpl-legal .mc-company { color:#1e3a5f; }

.tpl-navy-stripe.mini-card { background:#1e40af; color:#fff; }
.tpl-navy-stripe.mini-card::after { content:""; position:absolute; right:0; top:0; bottom:0; width:7px; background:#3b82f6; }
.tpl-navy-stripe .mc-logo { background:rgba(255,255,255,.3); }
.tpl-navy-stripe .mc-company { color:#fff; }
.tpl-navy-stripe .mc-title { color:rgba(255,255,255,.75); }
.tpl-navy-stripe .mc-footer { border-top:1px solid rgba(255,255,255,.2); }
.tpl-navy-stripe .mc-name, .tpl-navy-stripe .mc-phone { color:rgba(255,255,255,.65); }

.tpl-rose.mini-card { border:1px solid #fce7f3; }
.tpl-rose .mc-logo { background:#881337; border-radius:50%; }
.tpl-rose .mc-company { color:#881337; font-style:italic; }

.tpl-diagonal.mini-card { overflow:hidden; }
.tpl-diagonal.mini-card::before { content:""; position:absolute; left:-10%; top:-10%; width:50%; height:130%; background:#0f172a; transform:skewX(-8deg); }
.tpl-diagonal .mc-logo { position:relative; z-index:1; background:rgba(255,255,255,.3); }
.tpl-diagonal .mc-body { position:relative; z-index:1; padding-left:42%; }
.tpl-diagonal .mc-company { color:#0f172a; }
.tpl-diagonal .mc-footer { position:relative; z-index:1; padding-left:42%; border-top:1px solid #e2e8f0; }

.tpl-dark-exec.mini-card { background:#1a1a2e; color:#e94560; }
.tpl-dark-exec .mc-logo { background:#e94560; }
.tpl-dark-exec .mc-company { color:#fff; }
.tpl-dark-exec .mc-title { color:#e94560; }
.tpl-dark-exec .mc-footer { border-top:1px solid rgba(233,69,96,.3); }
.tpl-dark-exec .mc-name, .tpl-dark-exec .mc-phone { color:rgba(255,255,255,.45); }

.tpl-teal.mini-card { background:#0f766e; color:#fff; }
.tpl-teal .mc-logo { background:rgba(255,255,255,.25); }
.tpl-teal .mc-company { color:#fff; }
.tpl-teal .mc-title { color:#2dd4bf; }
.tpl-teal .mc-footer { border-top:1px solid rgba(255,255,255,.2); }
.tpl-teal .mc-name, .tpl-teal .mc-phone { color:rgba(255,255,255,.65); }

.tpl-orange.mini-card { background:#ea580c; color:#fff; }
.tpl-orange .mc-logo { background:rgba(255,255,255,.3); }
.tpl-orange .mc-company { color:#fff; }
.tpl-orange .mc-title { color:rgba(255,255,255,.8); }
.tpl-orange .mc-footer { border-top:1px solid rgba(255,255,255,.25); }
.tpl-orange .mc-name, .tpl-orange .mc-phone { color:rgba(255,255,255,.65); }

.tpl-mono.mini-card { border:1.5px solid #111827; }
.tpl-mono .mc-logo { background:#111827; border-radius:0; }
.tpl-mono .mc-company { color:#111827; text-transform:uppercase; letter-spacing:.06em; }
.tpl-mono .mc-footer { border-top:2px solid #111827; }

.tpl-grid.mini-card { border:1px solid #334155; }
.tpl-grid.mini-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:#0c0c0c; }
.tpl-grid .mc-logo { background:#0c0c0c; border-radius:0; }
.tpl-grid .mc-company { color:#0c0c0c; text-transform:uppercase; }

.tpl-pastel.mini-card { background:linear-gradient(135deg,#f5f3ff,#ede9fe); }
.tpl-pastel .mc-logo { background:#7c3aed; }
.tpl-pastel .mc-company { color:#5b21b6; }
.tpl-pastel .mc-footer { border-top:1.5px solid #c4b5fd; }

.tpl-yellow.mini-card { background:#eab308; color:#0c0a00; }
.tpl-yellow .mc-logo { background:#0c0a00; }
.tpl-yellow .mc-company { color:#0c0a00; font-weight:900; }
.tpl-yellow .mc-footer { border-top:1px solid rgba(0,0,0,.2); }

.tpl-gradient.mini-card { background:linear-gradient(135deg,#4f46e5,#7c3aed,#ec4899); color:#fff; }
.tpl-gradient .mc-logo { background:rgba(255,255,255,.3); }
.tpl-gradient .mc-company { color:#fff; }
.tpl-gradient .mc-title { color:rgba(255,255,255,.8); }
.tpl-gradient .mc-footer { border-top:1px solid rgba(255,255,255,.2); }
.tpl-gradient .mc-name, .tpl-gradient .mc-phone { color:rgba(255,255,255,.65); }

.tpl-foil.mini-card { background:linear-gradient(135deg,#1a1200,#3d2b00); color:#fbbf24; }
.tpl-foil .mc-logo { background:linear-gradient(135deg,#fbbf24,#d97706); border-radius:50%; }
.tpl-foil .mc-company { color:#fbbf24; letter-spacing:.04em; }
.tpl-foil .mc-title { color:rgba(251,191,36,.65); }
.tpl-foil .mc-footer { border-top:1px solid rgba(251,191,36,.2); }
.tpl-foil .mc-name, .tpl-foil .mc-phone { color:rgba(251,191,36,.5); }

/* ── CLOTHING / T-SHIRT TEMPLATES ──────────────────────────── */
.tpl-cloth-navy.mini-card   { background:#1e40af; color:#fff; }
.tpl-cloth-navy .mc-logo    { background:rgba(255,255,255,.25); border-radius:50%; }
.tpl-cloth-navy .mc-company { color:#fff; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.tpl-cloth-navy .mc-title   { color:rgba(255,255,255,.75); }
.tpl-cloth-navy .mc-footer  { border-top:1px solid rgba(255,255,255,.2); }
.tpl-cloth-navy .mc-name,.tpl-cloth-navy .mc-phone { color:rgba(255,255,255,.65); }
.tpl-cloth-navy .template-preview  { background:linear-gradient(150deg,#dbeafe,#eff6ff); }

.tpl-cloth-black.mini-card  { background:#0f172a; color:#e2e8f0; }
.tpl-cloth-black .mc-logo   { background:#374151; }
.tpl-cloth-black .mc-company{ color:#f1f5f9; font-size:11px; font-weight:900; text-transform:uppercase; }
.tpl-cloth-black .mc-title  { color:#94a3b8; }
.tpl-cloth-black .mc-footer { border-top:1px solid #1e293b; }
.tpl-cloth-black .mc-name,.tpl-cloth-black .mc-phone { color:#64748b; }
.tpl-cloth-black .template-preview { background:linear-gradient(150deg,#f1f5f9,#e2e8f0); }

.tpl-cloth-white.mini-card  { background:#fff; border:1px solid #e2e8f0; }
.tpl-cloth-white .mc-logo   { background:#006196; }
.tpl-cloth-white .mc-company{ color:#0f172a; font-size:11px; font-weight:900; text-transform:uppercase; }
.tpl-cloth-white .mc-title  { color:#64748b; }
.tpl-cloth-white .mc-footer { border-top:1.5px solid #006196; }
.tpl-cloth-white .template-preview { background:linear-gradient(150deg,#f8fafc,#f1f5f9); }

.tpl-cloth-event.mini-card  { background:linear-gradient(135deg,#7c3aed,#2563eb); color:#fff; }
.tpl-cloth-event .mc-logo   { background:rgba(255,255,255,.3); border-radius:50%; }
.tpl-cloth-event .mc-company{ color:#fff; font-size:11px; font-weight:900; }
.tpl-cloth-event .mc-title  { color:rgba(255,255,255,.8); }
.tpl-cloth-event .mc-footer { border-top:1px solid rgba(255,255,255,.25); }
.tpl-cloth-event .mc-name,.tpl-cloth-event .mc-phone { color:rgba(255,255,255,.65); }
.tpl-cloth-event .template-preview { background:linear-gradient(135deg,#ede9fe,#ddd6fe); }

.tpl-cloth-corp.mini-card   { background:#fff; border-left:5px solid #006196; }
.tpl-cloth-corp .mc-logo    { background:#006196; }
.tpl-cloth-corp .mc-company { color:#006196; font-size:11px; font-weight:900; }
.tpl-cloth-corp .mc-footer  { border-top:1px solid #e2e8f0; }
.tpl-cloth-corp .template-preview { background:linear-gradient(150deg,#dbeafe,#eff6ff); }

.tpl-cloth-red.mini-card    { background:#e11d2e; color:#fff; }
.tpl-cloth-red .mc-logo     { background:rgba(255,255,255,.3); }
.tpl-cloth-red .mc-company  { color:#fff; font-size:11px; font-weight:900; text-transform:uppercase; }
.tpl-cloth-red .mc-title    { color:rgba(255,255,255,.8); }
.tpl-cloth-red .mc-footer   { border-top:1px solid rgba(255,255,255,.25); }
.tpl-cloth-red .mc-name,.tpl-cloth-red .mc-phone { color:rgba(255,255,255,.65); }
.tpl-cloth-red .template-preview { background:linear-gradient(150deg,#fff1f2,#ffe4e6); }

/* ── MUG TEMPLATES ─────────────────────────────────────────── */
.tpl-mug-blue.mini-card     { background:#006196; color:#fff; }
.tpl-mug-blue .mc-logo      { background:rgba(255,255,255,.25); border-radius:50%; }
.tpl-mug-blue .mc-company   { color:#fff; font-size:11px; }
.tpl-mug-blue .mc-title     { color:#7dd3fc; }
.tpl-mug-blue .mc-footer    { border-top:1px solid rgba(255,255,255,.2); }
.tpl-mug-blue .mc-name,.tpl-mug-blue .mc-phone { color:rgba(255,255,255,.65); }
.tpl-mug-blue .template-preview { background:linear-gradient(150deg,#e0f2fe,#f0f9ff); }

.tpl-mug-red.mini-card      { background:linear-gradient(135deg,#e11d2e,#be185d); color:#fff; }
.tpl-mug-red .mc-logo       { background:rgba(255,255,255,.3); border-radius:50%; }
.tpl-mug-red .mc-company    { color:#fff; font-size:11px; font-weight:900; }
.tpl-mug-red .mc-title      { color:rgba(255,255,255,.8); }
.tpl-mug-red .mc-footer     { border-top:1px solid rgba(255,255,255,.25); }
.tpl-mug-red .mc-name,.tpl-mug-red .mc-phone { color:rgba(255,255,255,.7); }
.tpl-mug-red .template-preview { background:linear-gradient(150deg,#fce7f3,#fdf2f8); }

.tpl-mug-minimal.mini-card  { background:#fff; border:1px solid #e2e8f0; }
.tpl-mug-minimal .mc-logo   { background:#0f172a; border-radius:50%; }
.tpl-mug-minimal .mc-company{ color:#0f172a; font-size:11px; font-weight:900; }
.tpl-mug-minimal .mc-footer { border-top:1.5px solid #0f172a; }
.tpl-mug-minimal .template-preview { background:linear-gradient(150deg,#f8fafc,#f1f5f9); }

.tpl-mug-corp.mini-card     { background:#0f172a; color:#e2e8f0; }
.tpl-mug-corp .mc-logo      { background:#006196; }
.tpl-mug-corp .mc-company   { color:#f1f5f9; font-size:11px; }
.tpl-mug-corp .mc-title     { color:#2BA8E0; }
.tpl-mug-corp .mc-footer    { border-top:1px solid #1e293b; }
.tpl-mug-corp .mc-name,.tpl-mug-corp .mc-phone { color:#64748b; }
.tpl-mug-corp .template-preview { background:linear-gradient(150deg,#f1f5f9,#e2e8f0); }

/* ── STATIONERY TEMPLATES ──────────────────────────────────── */
.tpl-stat-corp.mini-card    { grid-template-columns:32px 1fr; grid-template-rows:1fr auto; padding:0; gap:0; background:#fff; }
.tpl-stat-corp.mini-card::before { content:""; grid-row:1/-1; grid-column:1; background:#006196; }
.tpl-stat-corp .mc-logo     { display:none; }
.tpl-stat-corp .mc-body     { grid-column:2; padding:10px 10px 4px; align-content:start; }
.tpl-stat-corp .mc-company  { color:#006196; font-size:11px; }
.tpl-stat-corp .mc-footer   { grid-column:2; padding:0 10px 10px; border-top:none; }
.tpl-stat-corp .template-preview { background:linear-gradient(150deg,#dbeafe,#eff6ff); }

.tpl-stat-green.mini-card   { grid-template-rows:28px 1fr auto; padding:0; gap:0; }
.tpl-stat-green.mini-card::before { content:""; background:linear-gradient(90deg,#16a34a,#15803d); grid-row:1; grid-column:1/-1; }
.tpl-stat-green .mc-logo    { position:absolute; right:8px; top:4px; width:20px; height:20px; background:rgba(255,255,255,.4); border-radius:50%; }
.tpl-stat-green .mc-body    { padding:8px 10px 4px; }
.tpl-stat-green .mc-company { color:#16a34a; font-size:11px; }
.tpl-stat-green .mc-footer  { padding:0 10px 10px; border-top:none; }
.tpl-stat-green .template-preview { background:linear-gradient(150deg,#dcfce7,#f0fdf4); }

/* ── LABEL TEMPLATES ───────────────────────────────────────── */
.tpl-label-round.mini-card  { border-radius:50%; overflow:hidden; background:linear-gradient(135deg,#e91e63,#7c3aed); color:#fff; align-items:center; justify-content:center; }
.tpl-label-round .mc-logo   { display:none; }
.tpl-label-round .mc-body   { text-align:center; align-content:center; }
.tpl-label-round .mc-company{ color:#fff; font-size:10px; font-weight:900; text-align:center; }
.tpl-label-round .mc-footer { display:none; }
.tpl-label-round .template-preview { background:linear-gradient(150deg,#fce7f3,#fdf2f8); }

.tpl-label-product.mini-card{ background:#fff; border:1.5px solid #0f172a; }
.tpl-label-product .mc-logo { background:#0f172a; border-radius:0; }
.tpl-label-product .mc-company{ color:#0f172a; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.tpl-label-product .mc-footer{ border-top:2px solid #0f172a; }
.tpl-label-product .template-preview { background:linear-gradient(150deg,#f8fafc,#f1f5f9); }

.tpl-label-kraft.mini-card  { background:#fdf6e3; border:1.5px solid #92400e; }
.tpl-label-kraft .mc-logo   { background:#92400e; border-radius:50%; }
.tpl-label-kraft .mc-company{ color:#92400e; font-size:11px; font-weight:900; }
.tpl-label-kraft .mc-footer { border-top:1.5px solid #d97706; }
.tpl-label-kraft .template-preview { background:linear-gradient(150deg,#fef9c3,#fefce8); }

/* ── STAMP TEMPLATES ───────────────────────────────────────── */
.tpl-stamp-round.mini-card  { border-radius:50%; overflow:hidden; background:linear-gradient(135deg,#1e3a5f,#006196); color:#fff; align-items:center; justify-content:center; }
.tpl-stamp-round .mc-logo   { display:none; }
.tpl-stamp-round .mc-body   { text-align:center; align-content:center; }
.tpl-stamp-round .mc-company{ color:#fff; font-size:10px; font-weight:900; text-align:center; text-transform:uppercase; letter-spacing:.06em; }
.tpl-stamp-round .mc-footer { display:none; }
.tpl-stamp-round .template-preview { background:linear-gradient(150deg,#dbeafe,#e0e7ff); }

.tpl-stamp-rect.mini-card   { background:#fff; border:2px solid #0f172a; }
.tpl-stamp-rect .mc-logo    { background:#0f172a; border-radius:0; }
.tpl-stamp-rect .mc-company { color:#0f172a; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.tpl-stamp-rect .mc-footer  { border-top:2px solid #0f172a; }
.tpl-stamp-rect .template-preview { background:linear-gradient(150deg,#f8fafc,#e2e8f0); }

/* ── PEN TEMPLATES ─────────────────────────────────────────── */
.tpl-pen-blue.mini-card     { background:#006196; color:#fff; }
.tpl-pen-blue .mc-logo      { background:rgba(255,255,255,.25); }
.tpl-pen-blue .mc-company   { color:#fff; font-size:11px; font-weight:900; }
.tpl-pen-blue .mc-title     { color:#7dd3fc; }
.tpl-pen-blue .mc-footer    { border-top:1px solid rgba(255,255,255,.2); }
.tpl-pen-blue .mc-name,.tpl-pen-blue .mc-phone { color:rgba(255,255,255,.65); }
.tpl-pen-blue .template-preview { background:linear-gradient(150deg,#dbeafe,#eff6ff); }

.tpl-pen-black.mini-card    { background:#0f172a; color:#e2e8f0; }
.tpl-pen-black .mc-logo     { background:#374151; }
.tpl-pen-black .mc-company  { color:#f1f5f9; font-size:11px; }
.tpl-pen-black .mc-title    { color:#94a3b8; }
.tpl-pen-black .mc-footer   { border-top:1px solid #1e293b; }
.tpl-pen-black .mc-name,.tpl-pen-black .mc-phone { color:#64748b; }
.tpl-pen-black .template-preview { background:linear-gradient(150deg,#f1f5f9,#e2e8f0); }

/* ── INVITATION CARD TEMPLATES ────────────────────────────── */
/* Mini card for invitation templates — portrait ratio */
.tpl-inv-gujarati.mini-card,.tpl-inv-maroon.mini-card,.tpl-inv-gold.mini-card,
.tpl-inv-baby.mini-card,.tpl-inv-bday.mini-card,.tpl-inv-religious.mini-card,
.tpl-poster-wedding.mini-card,.tpl-poster-bday.mini-card,
.tpl-poster-religious.mini-card,.tpl-poster-corp.mini-card {
    aspect-ratio: 0.7 !important;
}
.mini-card-wrap.portrait { aspect-ratio: 0.7; }

.tpl-inv-gujarati.mini-card { background:linear-gradient(160deg,#fff8f0,#ffe8d6); border:2px solid #D4AF37; }
.tpl-inv-gujarati .mc-logo { background:linear-gradient(135deg,#8B0000,#c0392b); border-radius:50%; }
.tpl-inv-gujarati .mc-company { color:#8B0000; font-family:serif; font-size:12px; font-style:italic; }
.tpl-inv-gujarati .mc-title { color:#D4AF37; font-style:italic; }
.tpl-inv-gujarati .mc-footer { border-top:1px solid #D4AF37; }

.tpl-inv-maroon.mini-card { background:#800020; color:#fff8dc; }
.tpl-inv-maroon .mc-logo { background:linear-gradient(135deg,#D4AF37,#b8960c); border-radius:50%; }
.tpl-inv-maroon .mc-company { color:#fff8dc; font-family:serif; font-size:12px; }
.tpl-inv-maroon .mc-title { color:#D4AF37; }
.tpl-inv-maroon .mc-footer { border-top:1px solid rgba(212,175,55,.4); }
.tpl-inv-maroon .mc-name, .tpl-inv-maroon .mc-phone { color:rgba(255,248,220,.7); }

.tpl-inv-gold.mini-card { background:linear-gradient(160deg,#fff8dc,#fef3c7); border:2px solid #D4AF37; }
.tpl-inv-gold .mc-logo { background:linear-gradient(135deg,#D4AF37,#b8960c); border-radius:50%; }
.tpl-inv-gold .mc-company { color:#8B6914; font-family:serif; font-size:12px; font-style:italic; }
.tpl-inv-gold .mc-title { color:#D4AF37; }
.tpl-inv-gold .mc-footer { border-top:1px solid #D4AF37; }

.tpl-inv-baby.mini-card { background:linear-gradient(160deg,#fce4ec,#f8bbd9); }
.tpl-inv-baby .mc-logo { background:#e91e63; border-radius:50%; }
.tpl-inv-baby .mc-company { color:#880e4f; font-family:serif; font-size:12px; }
.tpl-inv-baby .mc-title { color:#e91e63; }
.tpl-inv-baby .mc-footer { border-top:2px solid #f48fb1; }

.tpl-inv-bday.mini-card { background:linear-gradient(160deg,#fff9c4,#fff176); }
.tpl-inv-bday .mc-logo { background:#e74c3c; border-radius:50%; }
.tpl-inv-bday .mc-company { color:#c0392b; font-family:serif; font-size:12px; font-weight:900; }
.tpl-inv-bday .mc-title { color:#e74c3c; }
.tpl-inv-bday .mc-footer { border-top:2px solid #e74c3c; }

.tpl-inv-religious.mini-card { background:linear-gradient(160deg,#fff8e1,#ffe0b2); }
.tpl-inv-religious .mc-logo { background:linear-gradient(135deg,#ff8f00,#f57c00); border-radius:50%; }
.tpl-inv-religious .mc-company { color:#bf360c; font-family:serif; font-size:12px; }
.tpl-inv-religious .mc-title { color:#ff8f00; }
.tpl-inv-religious .mc-footer { border-top:2px solid #ff8f00; }

/* Poster templates */
.tpl-poster-wedding.mini-card { background:linear-gradient(160deg,#fff5f5,#ffe4e1); border:1px solid #c0392b; }
.tpl-poster-wedding .mc-logo { background:#c0392b; border-radius:50%; }
.tpl-poster-wedding .mc-company { color:#8B0000; font-family:serif; font-size:12px; font-style:italic; }
.tpl-poster-wedding .mc-title { color:#c0392b; }
.tpl-poster-wedding .mc-footer { border-top:1.5px solid #D4AF37; }

.tpl-poster-bday.mini-card { background:linear-gradient(135deg,#e74c3c,#e67e22); color:#fff; }
.tpl-poster-bday .mc-logo { background:rgba(255,255,255,.3); border-radius:50%; }
.tpl-poster-bday .mc-company { color:#fff; font-size:12px; font-weight:900; }
.tpl-poster-bday .mc-title { color:rgba(255,255,255,.85); }
.tpl-poster-bday .mc-footer { border-top:1px solid rgba(255,255,255,.3); }
.tpl-poster-bday .mc-name,.tpl-poster-bday .mc-phone { color:rgba(255,255,255,.7); }

.tpl-poster-religious.mini-card { background:linear-gradient(135deg,#ff8f00,#e65100); color:#fff; }
.tpl-poster-religious .mc-logo { background:rgba(255,255,255,.3); border-radius:50%; }
.tpl-poster-religious .mc-company { color:#fff8e1; font-family:serif; font-size:12px; }
.tpl-poster-religious .mc-title { color:rgba(255,248,225,.8); }
.tpl-poster-religious .mc-footer { border-top:1px solid rgba(255,255,255,.3); }
.tpl-poster-religious .mc-name,.tpl-poster-religious .mc-phone { color:rgba(255,255,255,.7); }

.tpl-poster-corp.mini-card { background:#006196; color:#fff; }
.tpl-poster-corp .mc-logo { background:rgba(255,255,255,.25); border-radius:4px; }
.tpl-poster-corp .mc-company { color:#fff; font-size:12px; font-weight:900; }
.tpl-poster-corp .mc-title { color:#7dd3fc; }
.tpl-poster-corp .mc-footer { border-top:1px solid rgba(255,255,255,.2); }
.tpl-poster-corp .mc-name,.tpl-poster-corp .mc-phone { color:rgba(255,255,255,.65); }

/* Preview background for new templates */
.tpl-inv-gujarati .template-preview    { background:linear-gradient(150deg,#fff8f0,#ffe8d6); }
.tpl-inv-maroon .template-preview      { background:linear-gradient(150deg,#800020,#5c0011); }
.tpl-inv-gold .template-preview        { background:linear-gradient(150deg,#fff8dc,#fef3c7); }
.tpl-inv-baby .template-preview        { background:linear-gradient(150deg,#fce4ec,#f8bbd9); }
.tpl-inv-bday .template-preview        { background:linear-gradient(150deg,#fff9c4,#fff176); }
.tpl-inv-religious .template-preview   { background:linear-gradient(150deg,#fff8e1,#ffe0b2); }
.tpl-poster-wedding .template-preview  { background:linear-gradient(150deg,#fff5f5,#ffe4e1); }
.tpl-poster-bday .template-preview     { background:linear-gradient(135deg,#e74c3c,#e67e22); }
.tpl-poster-religious .template-preview{ background:linear-gradient(135deg,#ff8f00,#e65100); }
.tpl-poster-corp .template-preview     { background:linear-gradient(150deg,#dbeafe,#eff6ff); }

.tpl-card-footer { padding: 10px 12px 12px; background: #fff; }
.swatches { display: flex; gap: 7px; margin-bottom: 10px; }
.swatches button {
    width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff;
    background: var(--swatch); box-shadow: 0 0 0 1.5px rgba(0,0,0,.2);
    cursor: pointer; transition: transform .12s; flex-shrink: 0;
}
.swatches button:hover { transform: scale(1.18); }
.swatches button.active { box-shadow: 0 0 0 3px #006196; }
.tpl-card-price-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.template-price { font-size: 15px; font-weight: 900; color: #006196; }
.template-unit { font-size: 11px; color: #94a3b8; }
.tpl-personalise-btn {
    display: inline-flex; align-items: center; gap: 4px; min-height: 30px;
    padding: 0 12px; background: #006196; color: #fff; border-radius: 6px;
    font-size: 12px; font-weight: 700; text-decoration: none; transition: background .15s; white-space: nowrap;
}
.tpl-personalise-btn:hover { background: #004d78; }

@media (max-width: 1100px) {
    .template-browser { grid-template-columns: 240px minmax(0,1fr); }
    .templates-grid { grid-template-columns: repeat(3, minmax(170px,1fr)); gap: 14px; }
}
@media (max-width: 800px) {
    .template-browser { grid-template-columns: 1fr; }
    .make-panel { position: static; height: auto; }
    .tpl-filter-bar { top: 57px; }
    .templates-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
    .tpl-grid-wrap { padding: 16px; }
    .tpl-personalise-btn { display: none; }
}
@media (max-width: 480px) {
    .tpl-top-bar { padding: 10px 14px; flex-wrap: wrap; }
    .templates-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
}


/* ============================================================
   NEW STUDIO — VISTAPRINT STYLE
   ============================================================ */
.studio-mode .promo-strip,
.studio-mode .site-header,
.studio-mode .site-footer,
.studio-mode .whatsapp-float,
.studio-mode .back-to-top { display:none; }
.studio-mode main { padding:0; }
.studio-shell { display:flex; flex-direction:column; height:100vh; overflow:hidden; background:#f1f5f9; }
.studio-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px; height:52px; min-height:52px; background:#fff; border-bottom:1px solid #e2e8f0; flex-shrink:0; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.studio-topbar-left,.studio-topbar-center,.studio-topbar-right { display:flex; align-items:center; gap:8px; }
.studio-topbar-right { margin-left:auto; }
.stb-back { color:#006196; font-size:13px; font-weight:700; padding:6px 12px; border:1px solid #c8dff0; border-radius:6px; background:#f0f8ff; transition:background .15s; white-space:nowrap; }
.stb-back:hover { background:#dceefa; }
.stb-info strong { font-size:14px; color:#0f172a; }
.stb-info span { font-size:12px; color:#64748b; display:block; line-height:1; }
.stb-btn { height:32px; padding:0 10px; border:1px solid #e2e8f0; border-radius:6px; background:#fff; font-size:12px; font-weight:600; cursor:pointer; color:#374151; transition:all .15s; white-space:nowrap; }
.stb-btn:hover:not(:disabled) { border-color:#006196; color:#006196; }
.stb-btn:disabled { opacity:.4; cursor:default; }
.stb-btn.stb-primary { background:#006196; color:#fff; border-color:#006196; font-weight:700; }
.stb-btn.stb-primary:hover { background:#004d78; }
.stb-divider { width:1px; height:22px; background:#e2e8f0; }
.stb-zoom { font-size:12px; font-weight:700; color:#374151; min-width:38px; text-align:center; }
.stb-order { text-align:right; }
.stb-order span { display:block; font-size:11px; color:#64748b; }
.stb-order strong { font-size:16px; font-weight:900; color:#006196; }
.studio-body { display:flex; flex:1; overflow:hidden; }
.studio-tools-panel { width:220px; min-width:220px; background:#fff; border-right:1px solid #e2e8f0; overflow-y:auto; padding:0; flex-shrink:0; }
.stp-section { padding:14px 16px; border-bottom:1px solid #f1f5f9; }
.stp-label { font-size:11px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.stp-add-btns { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.stp-add-btn { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 6px; border:1.5px solid #e2e8f0; border-radius:8px; background:#fafafa; cursor:pointer; font-size:11px; font-weight:600; color:#374151; transition:all .15s; }
.stp-add-btn span { font-size:20px; line-height:1; }
.stp-add-btn:hover { border-color:#006196; background:#f0f8ff; color:#006196; }
.stp-upload-btn { display:flex; align-items:center; gap:8px; width:100%; min-height:38px; padding:0 12px; border:1.5px dashed #c8dff0; border-radius:8px; background:#f0f8ff; cursor:pointer; font-size:12px; font-weight:600; color:#006196; transition:all .15s; }
.stp-upload-btn:hover { border-color:#006196; background:#e0f0fa; }
.stp-upload-btn input { display:none; }
.stp-bg-row,.stp-grad-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.stp-bg-row input[type="color"] { width:36px; height:36px; border-radius:6px; border:1px solid #e2e8f0; cursor:pointer; padding:2px; }
.stp-bg-row span { font-size:12px; color:#64748b; }
.stp-grad-row select,.stp-section select { width:100%; min-height:34px; border:1px solid #e2e8f0; border-radius:6px; padding:0 8px; font-size:12px; background:#fff; }
.stp-clear-btn { margin-top:8px; width:100%; border:1px solid #fee2e2; background:#fff5f5; color:#e11d2e; border-radius:6px; padding:6px; font-size:12px; font-weight:600; cursor:pointer; }
.stp-color-swatches { display:flex; flex-wrap:wrap; gap:10px; }
.stp-color-swatch { width:32px; height:32px; border-radius:50%; border:2px solid #e2e8f0; cursor:pointer; padding:0; transition:transform .1s, border-color .15s; }
.stp-color-swatch:hover { transform:scale(1.08); }
.stp-color-swatch.selected { border-color:var(--primary); box-shadow:0 0 0 2px rgba(0,97,150,.25); }
.studio-canvas-area { flex:1; overflow:auto; display:flex; flex-direction:column; align-items:center; align-items:safe center; padding:20px 24px 32px; background:#e8edf3; gap:14px; }

/* Side tabs */
.studio-side-tabs { display:flex; align-items:center; gap:8px; background:#fff; padding:6px 8px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.08); margin:0 auto; }
.side-tab { min-height:36px; padding:0 20px; border:1.5px solid #e2e8f0; border-radius:8px; background:#fff; color:#374151; font-size:13px; font-weight:700; cursor:pointer; transition:all .15s; }
.side-tab.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.side-tab-hint { font-size:12px; color:#94a3b8; padding-left:8px; }

/* Both sides layout */
.studio-both-sides { display:flex; gap:24px; align-items:flex-start; justify-content:center; flex-wrap:wrap; width:100%; }

.studio-side-wrap { display:flex; flex-direction:column; gap:8px; }
.studio-side-label { text-align:center; font-size:11px; font-weight:800; letter-spacing:.1em; color:#94a3b8; text-transform:uppercase; }
.studio-canvas-inner { position:relative; }
.studio-side-active .studio-side-label { color:var(--primary); }
.studio-side-active .design-canvas { outline:3px solid var(--primary); outline-offset:2px; }

.studio-canvas-wrap { position:relative; }
/* Portrait canvas for invitation cards, posters, photo frames */
.design-canvas-portrait {
    width: 420px !important;
    height: 594px !important; /* A5 proportions */
}
.design-canvas-square {
    width: 450px !important;
    height: 450px !important;
}

.design-canvas {
    position:relative; background:#fff; overflow:hidden;
    box-shadow:0 8px 40px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.12);
    border-radius:4px; cursor:default; width:620px; height:354px;
    transition:outline .15s;
}

/* Download bar */
.studio-download-bar { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; background:#fff; padding:12px 16px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.08); margin:0 auto; }
.sdb-btn { min-height:38px; padding:0 18px; border-radius:8px; border:none; font-size:13px; font-weight:700; cursor:pointer; transition:all .15s; }
.sdb-front { background:#e0f0fa; color:#006196; border:1.5px solid #c8dff0; }
.sdb-front:hover { background:#006196; color:#fff; }
.sdb-back { background:#f0f0ff; color:#4040cc; border:1.5px solid #c8c8f0; }
.sdb-back:hover { background:#4040cc; color:#fff; }
.sdb-both { background:#006196; color:#fff; }
.sdb-both:hover { background:#004d78; }

/* Top bar active side label */
.stb-side-label { font-size:13px; color:#64748b; }
.stb-side-label strong { color:var(--primary); }
.design-canvas.hidden { display:none; }
.mockup-tint-overlay {
    position:absolute; inset:0; z-index:0; pointer-events:none;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain; mask-size:contain;
    -webkit-mask-mode:alpha; mask-mode:alpha;
    mix-blend-mode:multiply;
    display:none;
}
.canvas-guides { position:absolute; inset:0; pointer-events:none; z-index:0; }
.guide-label { position:absolute; font-size:9px; font-weight:700; color:#94a3b8; background:rgba(255,255,255,.8); padding:1px 4px; border-radius:3px; letter-spacing:.04em; }
.bleed-label { top:3px; left:3px; }
.safe-label { top:3px; right:3px; }
.canvas-back-placeholder { display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:#94a3b8; font-size:14px; font-weight:600; }
.canvas-size-note { margin:14px auto 0; font-size:11px; color:#94a3b8; font-weight:600; }
.ce { position:absolute; box-sizing:border-box; cursor:move; }
.ce-selected { outline:2px solid #006196; outline-offset:1px; }
.ce-handle { position:absolute; width:10px; height:10px; background:#006196; border:2px solid #fff; border-radius:2px; z-index:999; cursor:pointer; }
.ce-handle-nw { top:-5px; left:-5px; cursor:nw-resize; }
.ce-handle-n { top:-5px; left:calc(50% - 5px); cursor:n-resize; }
.ce-handle-ne { top:-5px; right:-5px; cursor:ne-resize; }
.ce-handle-e { top:calc(50% - 5px); right:-5px; cursor:e-resize; }
.ce-handle-se { bottom:-5px; right:-5px; cursor:se-resize; }
.ce-handle-s { bottom:-5px; left:calc(50% - 5px); cursor:s-resize; }
.ce-handle-sw { bottom:-5px; left:-5px; cursor:sw-resize; }
.ce-handle-w { top:calc(50% - 5px); left:-5px; cursor:w-resize; }
.studio-props-panel { width:220px; min-width:220px; background:#fff; border-left:1px solid #e2e8f0; overflow-y:auto; flex-shrink:0; }
.spp-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; padding:24px; text-align:center; color:#94a3b8; }
.spp-empty-icon { font-size:40px; margin-bottom:12px; }
.spp-empty p { font-size:13px; margin:0; line-height:1.5; }
.spp-content { padding:0; }
.spp-section { padding:14px 16px; border-bottom:1px solid #f1f5f9; }
.spp-label { font-size:11px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.spp-section input[type="number"],.spp-section input[type="text"],.spp-section select,.spp-section textarea { width:100%; min-height:34px; border:1px solid #e2e8f0; border-radius:6px; padding:6px 8px; font-size:12px; color:#0f172a; margin-bottom:8px; transition:border-color .15s; resize:vertical; }
.spp-section input:focus,.spp-section select:focus,.spp-section textarea:focus { outline:none; border-color:#006196; box-shadow:0 0 0 3px rgba(0,97,150,.1); }
.spp-section input[type="color"] { width:100%; height:36px; border:1px solid #e2e8f0; border-radius:6px; cursor:pointer; padding:2px; margin-bottom:8px; }
.spp-section input[type="range"] { width:calc(100% - 40px); vertical-align:middle; }
.spp-row2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.spp-format-row { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.spp-format-row button { min-width:30px; height:30px; border:1px solid #e2e8f0; border-radius:4px; background:#fafafa; cursor:pointer; font-size:12px; transition:all .12s; }
.spp-format-row button:hover { border-color:#006196; background:#f0f8ff; }
.spp-layer-row { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:10px; }
.spp-layer-row button,.spp-delete-btn { width:100%; min-height:32px; border:1px solid #e2e8f0; border-radius:6px; background:#fafafa; cursor:pointer; font-size:11px; font-weight:600; transition:all .12s; }
.spp-layer-row button:hover { border-color:#006196; color:#006196; }
.spp-delete-btn { background:#fff5f5; border-color:#fee2e2; color:#e11d2e; margin-top:4px; }
.spp-delete-btn:hover { background:#fee2e2; }
.hidden { display:none !important; }
@media print {
    body * { visibility: hidden; }
    .design-canvas,
    .design-canvas * { visibility: visible; }
    .design-canvas {
        position: fixed;
        top: 0; left: 0;
        width: 89mm; height: 51mm;
        box-shadow: none;
        border: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .ce-handle,
    .ce-selected,
    .canvas-guides,
    .guide-label { display: none !important; }
}
.studio-page {
    display: grid;
    grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
    min-height: calc(100vh - 96px);
    background: #eaf7fd;
}

.studio-tools {
    position: sticky;
    top: 0;
    display: grid;
    align-content: start;
    gap: 18px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    border-right: 1px solid #d7e4ec;
    background: #fff;
    padding: 24px clamp(18px, 2vw, 30px);
}

.studio-tools-head {
    display: grid;
    gap: 6px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e7eef4;
}

.studio-tools-head > span {
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.studio-tools h1 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.05;
}

.studio-template-name {
    margin: 0;
    color: #64748b;
    font-weight: 800;
}

.studio-section {
    display: grid;
    gap: 12px;
}

.studio-section h2 {
    margin: 0;
    color: #0f172a;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.studio-tools label {
    display: grid;
    gap: 7px;
    color: #111827;
    font-size: 14px;
    font-weight: 900;
}

.studio-tools input {
    width: 100%;
    min-height: 46px;
    border: 1px solid #b8c8d6;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    padding: 10px 12px;
    font-weight: 800;
    outline: 0;
}

.studio-tools input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0, 97, 150, 0.12);
}

.studio-color-field {
    grid-template-columns: 1fr auto;
    align-items: center;
}

.studio-color-field input {
    width: 58px;
    height: 44px;
    min-height: 44px;
    padding: 5px;
}

.studio-upload-field {
    position: relative;
    display: flex !important;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    border: 2px dashed #b8c8d6;
    border-radius: 8px;
    background: #f8fafc;
    color: var(--primary) !important;
    cursor: pointer;
    text-align: center;
}

.studio-upload-field input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.studio-clear-upload {
    min-height: 42px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-weight: 900;
}

.studio-clear-upload:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.studio-tool-action,
.studio-mini-actions button {
    min-height: 42px;
    border: 1px solid var(--primary);
    border-radius: 8px;
    background: #fff;
    color: var(--primary);
    cursor: pointer;
    font-weight: 900;
}

.studio-tool-action:hover,
.studio-mini-actions button:hover:not(:disabled) {
    background: #eff8ff;
}

.studio-mini-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.studio-mini-actions button:disabled,
.studio-tools input:disabled,
.studio-range-field input:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.studio-range-field {
    grid-template-columns: 1fr;
}

.studio-range-field input {
    padding: 0;
}

.studio-order-box {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    border-radius: 8px;
    background: #eff8ff;
    padding: 14px;
}

.studio-order-box span {
    color: #475569;
    font-weight: 900;
}

.studio-order-box strong {
    color: #0f172a;
    font-size: 20px;
}

.studio-canvas-wrap {
    display: grid;
    grid-template-rows: auto auto minmax(420px, 1fr) auto;
    gap: 18px;
    min-width: 0;
    padding: 28px clamp(20px, 4vw, 58px);
}

.studio-editor-toolbar {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto auto auto;
    gap: 10px;
    align-items: center;
    max-width: 1040px;
    width: 100%;
    justify-self: center;
    border: 1px solid #d7e4ec;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.studio-editor-toolbar button {
    min-height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    padding: 0 12px;
    font-weight: 900;
}

.studio-editor-toolbar button:hover:not(:disabled),
.studio-editor-toolbar button.active {
    border-color: var(--primary);
    background: #eff8ff;
    color: var(--primary);
}

.studio-editor-toolbar button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.studio-editor-toolbar strong {
    min-width: 58px;
    color: #0f172a;
    text-align: center;
}

.studio-preview-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    max-width: 1040px;
    width: 100%;
    justify-self: center;
}

.studio-preview-head div {
    display: grid;
    gap: 4px;
}

.studio-preview-head span {
    color: #64748b;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.studio-preview-head strong {
    color: #0f172a;
    font-size: clamp(20px, 2.4vw, 30px);
}

.studio-preview-stage {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 1040px;
    min-height: 520px;
    justify-self: center;
    border: 1px solid rgba(0, 97, 150, 0.08);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(0, 97, 150, 0.08), transparent 36%),
        radial-gradient(circle at 80% 20%, rgba(43, 168, 224, 0.16), transparent 34%),
        #f8fbfd;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 24px 70px rgba(0, 97, 150, 0.12);
    padding: clamp(24px, 5vw, 72px);
}

.studio-card {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: center;
    gap: 12px;
    width: min(100%, 680px);
    aspect-ratio: 1.72;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.98)),
        #fff;
    box-shadow: 0 24px 58px rgba(15, 23, 42, 0.16);
    padding: clamp(26px, 4vw, 46px);
    color: var(--studio-color, #006196);
    transform: scale(var(--studio-zoom, 1));
    transform-origin: center;
    transition: transform 0.18s ease;
}

.studio-card::after {
    content: "";
    position: absolute;
    right: -52px;
    bottom: -72px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--studio-color, #006196) 18%, transparent);
}

.studio-guide {
    position: absolute;
    z-index: 4;
    pointer-events: none;
    border-radius: 6px;
    color: #0f6ca5;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-guide.bleed {
    inset: 12px;
    border: 1px dashed rgba(0, 97, 150, 0.42);
    padding: 4px;
}

.studio-guide.safe {
    inset: 34px;
    border: 1px dashed rgba(22, 122, 74, 0.42);
    padding: 4px;
    color: #167a4a;
}

.studio-card.hide-guides .studio-guide {
    display: none;
}

[data-studio-element] {
    cursor: move;
    user-select: none;
}

[data-studio-element].is-selected {
    outline: 2px solid #0b73bb;
    outline-offset: 5px;
    box-shadow: 0 0 0 7px rgba(11, 115, 187, 0.12);
}

.studio-uploaded-image {
    display: none;
}

.studio-card.has-upload {
    display: grid;
    place-items: center;
    padding: 20px;
    background: #fff;
}

.studio-card.has-upload::after {
    display: none;
}

.studio-card.has-upload .studio-uploaded-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: contain;
}

.studio-card.has-upload .studio-logo,
.studio-card.has-upload strong,
.studio-card.has-upload em,
.studio-card.has-upload p {
    display: none;
}

.studio-card.has-upload [data-studio-element].is-selected {
    display: initial;
}

.studio-logo {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--studio-color, #006196);
    color: #fff;
    font-weight: 900;
}

.studio-card [data-custom-text] {
    position: absolute;
    left: 46%;
    top: 42%;
    z-index: 5;
    color: var(--studio-color, #006196);
    font-size: 28px;
    font-weight: 900;
}

.studio-card strong {
    position: relative;
    z-index: 1;
    font-size: clamp(30px, 5vw, 54px);
    line-height: 1;
}

.studio-card em {
    position: relative;
    z-index: 1;
    color: #475569;
    font-style: normal;
    font-weight: 900;
}

.studio-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #111827;
}

.studio-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    max-width: 1040px;
    width: 100%;
    justify-self: center;
    border-top: 1px solid rgba(0, 97, 150, 0.12);
    padding-top: 18px;
}

.template-mode .promo-strip,
.template-mode .site-header,
.template-mode .whatsapp-float,
.template-mode .back-to-top,
.template-mode .site-footer {
    display: none;
}

.template-mode main {
    padding: 0;
}

.template-mode .template-browser {
    min-height: calc(100vh - 100px);
}

@media (max-width: 1320px) {
    .template-layout {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 20px;
    }

    .templates-grid {
        grid-template-columns: repeat(3, minmax(170px, 1fr));
        gap: 16px;
    }

    .tpl-top-bar {
        flex-wrap: wrap;
        gap: 12px;
    }
}

@media (max-width: 1050px) {
    .template-layout,
    .studio-page {
        grid-template-columns: 1fr;
    }

    .studio-page {
        min-height: auto;
    }

    .studio-tools {
        position: static;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid #d7e4ec;
    }

    .make-panel {
        position: static;
        min-height: auto;
    }
}

@media (max-width: 720px) {
    /* Template browser responsive */
    .tpl-top-bar {
        padding: 12px 16px;
    }

    .template-layout {
        grid-template-columns: 1fr;
    }

    .make-panel {
        position: static;
    }

    .tpl-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .tpl-filter-chips {
        order: 2;
    }

    .tpl-filter-right {
        order: 1;
        flex-wrap: wrap;
    }

    .template-search input {
        width: 120px;
    }

    .templates-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .tpl-personalise-btn {
        display: none;
    }

    /* Studio responsive */
    .studio-preview-head,
    .studio-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .studio-canvas-wrap {
        grid-template-rows: auto auto auto;
        padding: 18px 14px;
    }

    .studio-editor-toolbar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .studio-editor-toolbar span {
        display: none;
    }

    .studio-preview-stage {
        min-height: 330px;
        padding: 18px;
    }

    .studio-card {
        width: 100%;
        min-height: 210px;
    }

    .template-card {
        min-height: 460px;
    }

    .make-panel {
        padding: 24px;
        border-radius: 16px;
    }

    .favourites-btn,
    .filter-chip,
    .clear-filter,
    .template-search input {
        font-size: 20px;
    }
}

.settings-form,
.reorder-detail-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 920px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.settings-form label,
.reorder-detail-form label {
    display: grid;
    gap: 7px;
    color: #344054;
    font-weight: 900;
}

.settings-form input,
.reorder-detail-form input {
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
}

.settings-form button,
.reorder-detail-form button {
    align-self: end;
}

.library-page,
.reorder-page {
    min-height: 620px;
    background: #fff;
}

.library-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 24px;
}

.library-head h1,
.reorder-card h1 {
    margin: 0;
    font-size: clamp(34px, 5vw, 56px);
}

.library-head p,
.reorder-card p {
    color: var(--muted);
}

.library-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.library-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.library-preview {
    display: grid;
    place-items: center;
    aspect-ratio: 1.72;
    border-radius: 8px;
    background: #eef8fd;
    color: var(--project-color, var(--primary));
    overflow: hidden;
}

.library-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.library-preview span {
    font-size: 36px;
    font-weight: 900;
}

.library-preview strong {
    font-size: 20px;
}

.library-card h2 {
    margin: 0;
    font-size: 18px;
}

.library-card p {
    margin: 0;
    color: var(--muted);
}

.reorder-card {
    max-width: 720px;
    margin-inline: auto;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
}

@media (max-width: 1100px) {
    .library-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .settings-form,
    .reorder-detail-form,
    .library-grid {
        grid-template-columns: 1fr;
    }

    .library-head {
        align-items: stretch;
        flex-direction: column;
    }
}

.form-error {
    background: #fdecea;
    color: #b3261e;
    border: 1px solid #f5c2c0;
    border-radius: 8px;
    padding: 12px 16px;
    font-weight: 600;
}