/* === ARK Woodworks — Shop pages (loaded after styles.css, reuses its tokens) === */

.shop-main { padding-top: 120px; min-height: 70vh; }
.btn-sm { padding: 10px 18px; font-size: 0.88rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Header extras */
.nav-links a.active { color: var(--accent); }
.nav-links a.active::after { width: 100%; }
.shop-nav-actions { display: flex; align-items: center; gap: 6px; }
.cart-btn {
    position: relative;
    width: 46px; height: 46px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: all 0.2s;
}
.cart-btn:hover { border-color: var(--accent); color: var(--accent); }
.cart-count {
    position: absolute; top: -4px; right: -4px;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 999px;
    background: var(--accent); color: #fff;
    font-size: 0.72rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.cart-count[hidden] { display: none; }
.preview-ribbon {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    background: #1f1a14; color: #f3ede4;
    text-align: center; font-size: 0.82rem;
    padding: 8px 70px 8px 16px;
}

/* Page hero */
.shop-hero {
    padding: 40px 0 30px;
    text-align: center;
}
.shop-hero h1 { margin-bottom: 1rem; }
.shop-hero p { color: var(--text-soft); font-size: 1.08rem; max-width: 640px; margin: 0 auto; }
.usp-strip {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px; margin-top: 1.8rem; list-style: none;
}
.usp-strip li {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.88rem; font-weight: 500; color: var(--text-soft);
}
.usp-strip li::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* Category chips — reuse .filter-btn from the gallery */
.shop-chips {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px; margin: 1rem 0 2rem;
}
.filter-btn-link { color: var(--accent) !important; border-style: dashed !important; }
.category-intro { text-align: center; margin: 0 auto 2rem; max-width: 620px; }
.category-intro h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.5rem; }
.category-intro p { color: var(--text-soft); }
.category-intro[hidden] { display: none; }

/* Product grid & cards */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
}
.product-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: all 0.25s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent-soft); }
.product-card-img {
    position: relative; display: block;
    aspect-ratio: 1 / 1;
    background: var(--bg-alt);
    overflow: hidden;
}
.product-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.product-card:hover .product-card-img img { transform: scale(1.04); }
.product-badge {
    position: absolute; top: 12px; left: 12px;
    background: var(--accent); color: #fff;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 999px;
}
.product-card-body {
    padding: 18px 20px 22px;
    display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.product-card-body h3 { font-size: 1.12rem; line-height: 1.3; }
.product-card-body h3 a:hover { color: var(--accent); }
.product-card-body .btn { margin-top: auto; align-self: flex-start; }
.product-cat {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent);
}
.product-price { display: flex; align-items: baseline; gap: 10px; }
.product-price strong { font-size: 1.1rem; color: var(--text); }
.product-price s { color: var(--text-muted); font-size: 0.9rem; }
.product-price-lg strong { font-size: 1.6rem; font-family: var(--font-display); }
.product-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.product-tags span {
    font-size: 0.75rem; color: var(--text-soft);
    background: var(--bg-alt); border-radius: 6px; padding: 3px 8px;
}
.shop-empty { text-align: center; color: var(--text-soft); padding: 40px 0; grid-column: 1 / -1; }
.shop-empty h2 { margin-bottom: 0.5rem; }
.shop-empty .btn { margin-top: 1.2rem; }
.shop-empty a:not(.btn) { color: var(--accent); text-decoration: underline; }

/* Placeholder "photo" until real product photos exist */
.shop-placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    color: var(--accent);
    background:
        repeating-linear-gradient(100deg, rgba(139, 90, 43, 0.05) 0 2px, transparent 2px 14px),
        linear-gradient(135deg, #f3e7d6, #e8d6bd);
}
.shop-placeholder svg { width: 38%; max-width: 120px; opacity: 0.75; }
.shop-placeholder span { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

/* How it works / FAQ */
.steps-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px;
}
.step-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 26px 22px;
}
.step-card .step-num { display: block; margin-bottom: 0.6rem; }
.step-card h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.step-card p { color: var(--text-soft); font-size: 0.93rem; }
.faq { max-width: 760px; margin: 0 auto; }
.faq details {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px 22px; margin-bottom: 12px;
}
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { color: var(--text-soft); margin-top: 10px; font-size: 0.95rem; }

/* CNC promo banner */
.cnc-promo {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
    background: #1f1a14; color: #e9e1d4;
    border-radius: var(--radius-lg); padding: 48px;
    overflow: hidden;
}
.cnc-promo h2 { color: #fff; margin-bottom: 1rem; }
.cnc-promo p { color: #cfc6b8; margin-bottom: 1.6rem; }
.cnc-promo video { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; background: #000; }

/* Product page */
.breadcrumb { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.6rem; }
.breadcrumb a:hover { color: var(--accent); }
.product-layout {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start;
}
.product-main-img {
    aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden;
    background: var(--bg-alt); border: 1px solid var(--border);
}
.product-main-img img { width: 100%; height: 100%; object-fit: cover; }
.product-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.product-thumbs button {
    width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
    border: 2px solid transparent; padding: 0;
}
.product-thumbs button.active { border-color: var(--accent); }
.product-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.product-info h1 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); margin: 0.4rem 0 0.8rem; }
.product-desc { color: var(--text-soft); margin: 1.2rem 0 1.4rem; font-size: 1.02rem; }
.product-specs {
    display: grid; gap: 0;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); margin-bottom: 1.6rem;
}
.product-specs div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.product-specs div:last-child { border-bottom: 0; }
.product-specs dt { color: var(--text-muted); font-size: 0.9rem; }
.product-specs dd { font-weight: 500; text-align: right; font-size: 0.93rem; }
.product-buy { display: flex; gap: 12px; margin-bottom: 12px; }
.product-buy .btn { flex: 1; }
.product-info > .btn-block { margin-bottom: 12px; }
.product-assurances { list-style: none; margin-top: 1.2rem; display: grid; gap: 10px; }
.product-assurances li {
    font-size: 0.92rem; color: var(--text-soft);
    padding: 12px 16px; background: var(--bg-alt); border-radius: 10px;
}
.product-assurances strong { color: var(--text); }
.related { margin-top: 80px; }
.related h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.6rem; }

/* Quantity stepper */
.qty {
    display: inline-flex; align-items: center;
    border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface);
}
.qty button { width: 36px; height: 36px; font-size: 1.1rem; color: var(--text); }
.qty button:hover { color: var(--accent); }
.qty span { min-width: 26px; text-align: center; font-weight: 600; font-size: 0.95rem; }
.product-buy .qty button { width: 44px; height: 48px; }

/* Cart drawer */
.cart-overlay {
    position: fixed; inset: 0; z-index: 150;
    background: rgba(15, 12, 8, 0.45);
    animation: fadeIn 0.2s ease-out;
}
.cart-overlay[hidden] { display: none; }
.cart-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 160;
    width: min(420px, 100%);
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
    transform: translateX(105%);
    transition: transform 0.3s ease;
}
.cart-drawer.open { transform: translateX(0); }
.cart-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 24px; border-bottom: 1px solid var(--border);
}
.cart-close { font-size: 2rem; line-height: 1; width: 40px; height: 40px; color: var(--text-soft); }
.cart-drawer-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.cart-empty { padding: 50px 24px; text-align: center; color: var(--text-soft); display: grid; gap: 18px; justify-items: center; }
.cart-lines { list-style: none; padding: 8px 24px; flex: 1; }
.cart-line {
    display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center;
    padding: 14px 0; border-bottom: 1px solid var(--border);
}
.cart-line-img { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--bg-alt); display: block; }
.cart-line-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-img .shop-placeholder span { display: none; }
.cart-line-info { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.cart-line-name { font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.cart-line-name:hover { color: var(--accent); }
.cart-line-price { font-size: 0.85rem; color: var(--text-muted); }
.cart-line .qty button { width: 30px; height: 30px; }
.cart-remove { font-size: 1.4rem; color: var(--text-muted); width: 32px; height: 32px; align-self: start; }
.cart-remove:hover { color: #b34141; }
.cart-drawer-foot { padding: 20px 24px 28px; border-top: 1px solid var(--border); background: var(--surface); }
.cart-subtotal { display: flex; justify-content: space-between; font-size: 1.05rem; margin-bottom: 6px; }
.cart-note { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 14px; }

/* Checkout */
.checkout-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; }
.checkout-layout[hidden], .checkout-done[hidden], .checkout-empty[hidden] { display: none; }
.checkout-panel {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 28px;
}
.checkout-panel h2 { font-size: 1.4rem; margin-bottom: 1.2rem; }
.checkout-panel + .checkout-panel { margin-top: 24px; }
.checkout-panel .cart-lines { padding: 0; }
.cart-line-total { font-size: 0.95rem; }
.checkout-form { display: flex; flex-direction: column; gap: 16px; }
.checkout-form label { display: flex; flex-direction: column; gap: 8px; }
.checkout-form label > span { font-size: 0.85rem; font-weight: 500; color: var(--text-soft); }
.checkout-form input, .checkout-form select, .checkout-form textarea {
    padding: 13px 15px; border: 1.5px solid var(--border); border-radius: 10px;
    font: inherit; font-size: 0.95rem; color: var(--text); background: var(--bg);
}
.checkout-form input:focus, .checkout-form select:focus, .checkout-form textarea:focus {
    outline: none; border-color: var(--accent); background: var(--surface);
}
.checkout-form textarea { resize: vertical; min-height: 80px; }
.checkout-form label[hidden] { display: none; }
.pay-options { display: grid; gap: 10px; }
.pay-option {
    display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 12px !important;
    padding: 14px 16px; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer;
    background: var(--bg);
}
.pay-option:has(input:checked) { border-color: var(--accent); background: var(--surface); }
.pay-option input { margin-top: 4px; accent-color: var(--accent); }
.pay-option strong { display: block; font-size: 0.95rem; }
.pay-option small { color: var(--text-muted); font-size: 0.83rem; }
.pay-option.disabled { opacity: 0.55; cursor: not-allowed; }
.advance-note, .city-warning {
    font-size: 0.9rem; padding: 12px 16px; border-radius: 10px;
    background: var(--bg-alt); color: var(--text-soft);
}
.city-warning { background: #fbeaea; color: #8a2f2f; }
.city-warning a { text-decoration: underline; }
.city-warning[hidden] { display: none; }
.checkout-summary { display: grid; gap: 10px; margin: 6px 0 4px; }
.checkout-summary div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.95rem; color: var(--text-soft); }
.checkout-summary .summary-total { border-top: 1px solid var(--border); padding-top: 12px; color: var(--text); font-size: 1.1rem; }
.checkout-summary .summary-pay { color: var(--text); }
.form-status-error { color: #b34141; font-size: 0.9rem; text-align: center; min-height: 1.2em; }
.checkout-done { max-width: 640px; margin: 0 auto; }
.done-card {
    text-align: center; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 44px 32px; display: grid; gap: 16px; justify-items: center;
}
.done-card p { color: var(--text-soft); }
.done-tick {
    width: 64px; height: 64px; border-radius: 50%;
    background: #e5f5ea; color: #1e8a49; font-size: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.pay-box {
    width: 100%; text-align: left; background: var(--bg-alt);
    border-radius: var(--radius); padding: 22px; display: grid; gap: 12px;
}
.pay-box h3 { font-size: 1.15rem; }
.pay-box .product-specs { margin: 0; }
.pay-box p { font-size: 0.92rem; }

/* Custom CNC page */
.cnc-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.cnc-preview-wrap { position: sticky; top: 110px; }
.cnc-preview {
    position: relative; background: var(--bg-alt);
    border-radius: var(--radius-lg); border: 1px solid var(--border);
    padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
#cncCanvas {
    display: block; width: auto; height: auto; max-width: 100%; max-height: 62vh;   /* keeps the drawing's shape, so drag positions map exactly */
    filter: drop-shadow(0 12px 16px rgba(60, 40, 20, 0.28));
}
.cnc-scale { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.cnc-scale-title { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.cnc-scale canvas { width: 100%; height: auto; display: block; border-radius: 8px; }
.cnc-scale-caption { font-size: 0.82rem; color: var(--text-muted); margin-top: 8px; }
#plateTextWrap[hidden] { display: none; }
.cnc-canvas-wrap { position: relative; width: 100%; display: flex; justify-content: center; }
.cnc-empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; text-align: center;
    color: rgba(255, 255, 255, 0.92); font-weight: 500; padding: 20px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); pointer-events: none;
}
.cnc-empty[hidden] { display: none; }
.cnc-preview-meta { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 12px; font-size: 0.88rem; color: var(--text-soft); }
.cnc-disclaimer { font-size: 0.8rem; color: var(--text-muted); text-align: center; }
.upload-box {
    border: 2px dashed var(--accent-soft); border-radius: var(--radius);
    padding: 22px; text-align: center; background: var(--bg);
}
.upload-box input { width: 100%; font-size: 0.9rem; }
.upload-hint { font-size: 0.82rem; color: var(--text-muted); }
.upload-status { font-size: 0.85rem; color: var(--accent); min-height: 1.2em; }
.checkbox-row { flex-direction: row !important; align-items: center; gap: 10px !important; font-size: 0.9rem; color: var(--text-soft); }
.checkbox-row input { accent-color: var(--accent); width: 18px; height: 18px; }
.larger-note { font-size: 0.9rem; padding: 12px 16px; border-radius: 10px; background: #fff6e6; color: #7a5212; }
.larger-note[hidden] { display: none; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Responsive */
@media (max-width: 900px) {
    .shop-main { padding-top: 100px; }
    .product-layout, .checkout-layout, .cnc-layout, .cnc-promo { grid-template-columns: 1fr; gap: 32px; }
    .cnc-preview-wrap { position: static; }
    .cnc-promo { padding: 32px 24px; text-align: center; }
}
@media (max-width: 560px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .product-card-body { padding: 12px 12px 16px; gap: 6px; }
    .product-card-body h3 { font-size: 0.98rem; }
    .product-tags { display: none; }
    .product-card-body .btn { align-self: stretch; padding: 9px 10px; font-size: 0.82rem; }
    .checkout-panel { padding: 20px 16px; }
    .form-grid-2 { grid-template-columns: 1fr; }
    .cart-btn { width: 42px; height: 42px; }
    .preview-ribbon { font-size: 0.75rem; padding-right: 64px; }
}

/* Custom CNC: design policy + rejected-design warning */
.design-policy {
    font-size: 0.9rem; color: var(--text-soft);
    padding: 12px 16px; border-left: 3px solid var(--accent);
    background: var(--bg-alt); border-radius: 6px;
}
.design-policy strong { color: var(--text); }
.design-blocked {
    font-size: 0.92rem; padding: 14px 16px; border-radius: 10px;
    background: #fbeaea; color: #8a2f2f; border: 1px solid #f0caca;
}
.design-blocked strong { display: block; margin-bottom: 4px; }
.design-blocked[hidden] { display: none; }

/* Coming soon mode (SHOP.comingSoon) */
.cart-btn[hidden] { display: none; }
.coming-soon-tag {
    display: inline-block;
    padding: 5px 12px; border-radius: 999px;
    background: #1f1a14; color: #f3e7d6;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.coming-soon-banner {
    max-width: 720px; margin: 1.6rem auto 0.4rem;
    padding: 26px 28px; text-align: center;
    background: var(--surface); border: 1px dashed var(--accent-soft); border-radius: var(--radius-lg);
    display: grid; gap: 12px; justify-items: center;
}
.coming-soon-banner[hidden] { display: none; }
.coming-soon-banner h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.coming-soon-banner p { font-size: 0.98rem; }
.coming-soon-note { color: var(--text-soft); font-size: 0.95rem; margin-bottom: 12px; }
.preview-ribbon a { color: #f3d9b1; text-decoration: underline; }

#designFinishWrap[hidden] { display: none; }

/* Custom CNC: how-it-works steps + free design preview promise */
.urdu-line {
    font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", serif;
    font-size: 1.25rem; color: var(--accent); margin-top: 0.8rem !important; line-height: 2;
}
.cnc-steps {
    list-style: none; counter-reset: none;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    max-width: 920px; margin: 1.6rem auto 0; text-align: left;
}
.cnc-steps li {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px; display: flex; flex-direction: column; gap: 4px;
}
.cnc-steps strong { font-size: 0.95rem; color: var(--text); }
.cnc-steps small { font-size: 0.83rem; color: var(--text-soft); line-height: 1.45; }
.cnc-step-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent); color: #fff; font-weight: 700; font-size: 0.85rem;
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.cnc-rule {
    max-width: 760px; margin: 1.2rem auto 0 !important; padding: 12px 16px;
    background: #fff6e8; border: 1px solid #f0d6a8; border-radius: var(--radius);
    color: #6b4a14; font-size: 0.9rem; line-height: 1.55;
}
.cnc-rule.urdu-rule {
    margin-top: 0 !important; border-top: 0; border-radius: 0 0 var(--radius) var(--radius);
    font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif; font-size: 1rem; line-height: 2.1;
}
.cnc-rule:has(+ .urdu-rule) { border-radius: var(--radius) var(--radius) 0 0; }
.proof-box {
    background: #eef8f1; border: 1px solid #cbe9d5; border-radius: var(--radius);
    padding: 16px 18px; color: #1e5e37;
}
.proof-box strong { display: block; margin-bottom: 6px; font-size: 0.98rem; }
.proof-box ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 0.88rem; color: #2f5d40; }
@media (max-width: 900px) { .cnc-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cnc-steps li { padding: 12px; } }

/* Long dropdown labels must not stretch the layout wider than a phone screen */
.cnc-layout > *, .checkout-layout > *, .product-layout > *, .form-grid-2 > * { min-width: 0; }
.checkout-form select, .checkout-form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .checkout-form textarea { width: 100%; min-width: 0; max-width: 100%; }

/* Custom CNC: sample designs */
.cnc-samples-section { padding: 10px 0 30px; }
.cnc-samples-head { text-align: center; max-width: 640px; margin: 0 auto 1.4rem; }
.cnc-samples-head h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin-bottom: 0.4rem; }
.cnc-samples-head p { color: var(--text-soft); font-size: 0.95rem; }
.cnc-samples { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cnc-sample {
    display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden;
    background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg);
    transition: all 0.25s ease; color: inherit;
}
.cnc-sample:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent-soft); }
.cnc-sample.chosen { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139, 90, 43, 0.18); }
.cnc-sample-img { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-alt); }
.cnc-sample-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.cnc-sample:hover .cnc-sample-img img { transform: scale(1.04); }
.cnc-sample-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1; }
.cnc-sample-body strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--text); }
.cnc-sample-body small { font-size: 0.83rem; color: var(--text-soft); line-height: 1.45; }
.cnc-sample-cta { margin-top: auto; padding-top: 8px; font-size: 0.82rem; font-weight: 600; color: var(--accent); }
.sample-chosen {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: var(--radius); background: var(--bg-alt); border: 1px solid var(--accent-soft);
    font-size: 0.9rem;
}
.sample-chosen[hidden] { display: none; }
.sample-chosen img { width: 52px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.sample-chosen small { color: var(--text-muted); font-size: 0.8rem; }
.sample-chosen button { margin-left: auto; font-size: 1.4rem; color: var(--text-muted); width: 32px; height: 32px; flex-shrink: 0; }
@media (max-width: 900px) { .cnc-samples { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 560px) {
    .cnc-sample-body { padding: 10px 12px 12px; }
    .cnc-sample-body strong { font-size: 0.95rem; }
    .cnc-sample-body small { display: none; }
}

/* Custom CNC: move / resize controls under the preview */
#cncCanvas.can-drag { cursor: grab; }
#cncCanvas.dragging { cursor: grabbing; }
.cnc-adjust {
    width: 100%; display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px 16px; align-items: end;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px;
}
.cnc-adjust[hidden], .cnc-adjust label[hidden], #textFontWrap[hidden] { display: none; }
.cnc-adjust-hint { grid-column: 1 / -1; font-size: 0.85rem; color: var(--accent); font-weight: 500; }
.cnc-adjust label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--text-soft); }
.cnc-adjust input[type="range"] { width: 100%; accent-color: var(--accent); }
@media (max-width: 560px) { .cnc-adjust { grid-template-columns: 1fr 1fr; } .cnc-adjust .btn { grid-column: 1 / -1; } }

/* "How big is it?" zoom controls */
.cnc-scale-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cnc-scale-top .cnc-scale-title { margin-bottom: 0; }
.zoom-ctrls { display: inline-flex; align-items: center; gap: 4px; }
.zoom-ctrls button {
    min-width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text); font-size: 1.1rem; font-weight: 600;
}
.zoom-ctrls button:hover { border-color: var(--accent); color: var(--accent); }
.zoom-ctrls .zoom-fit { font-size: 0.8rem; padding: 0 12px; }
#zoomLabel { min-width: 38px; text-align: center; font-size: 0.85rem; font-weight: 600; color: var(--text-soft); }
#cncScale { cursor: grab; touch-action: pan-y; }
#cncScale.dragging { cursor: grabbing; }

/* Sample designs: one swipeable row on phones instead of a crowded grid */
@media (max-width: 700px) {
    .cnc-samples {
        display: flex; overflow-x: auto; gap: 12px; padding: 2px 2px 10px;
        scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .cnc-samples::-webkit-scrollbar { display: none; }
    .cnc-sample { flex: 0 0 64%; scroll-snap-align: start; }
    .cnc-samples-swipe { display: block !important; }
}
.cnc-samples-swipe { display: none; text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.urdu-hint { font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif; font-size: 0.95rem; line-height: 2.1; color: var(--text-soft) !important; text-align: right; }

/* Pop-up windows (send pictures, 3D view) */
.modal-overlay {
    position: fixed; inset: 0; z-index: 300; background: rgba(15, 12, 8, 0.6);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    animation: fadeIn 0.2s ease-out;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
    position: relative; width: min(480px, 100%); max-height: 92vh; overflow-y: auto;
    background: var(--bg); border-radius: var(--radius-lg); padding: 26px 22px 20px;
    box-shadow: var(--shadow-lg); display: grid; gap: 12px;
}
.modal-card h3 { font-size: 1.3rem; padding-right: 30px; }
.modal-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; font-size: 1.8rem; line-height: 1; color: var(--text-soft); }
.modal-urdu { font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif; color: var(--accent); line-height: 2; font-size: 1rem; }
.send-steps { padding-left: 20px; display: grid; gap: 8px; font-size: 0.93rem; color: var(--text-soft); }
.send-steps strong { color: var(--text); }
.send-again { display: block; font-size: 0.82rem; color: var(--accent); text-decoration: underline; margin-top: 2px; }
.send-actions { display: grid; gap: 8px; }
.send-wait { font-size: 0.9rem; color: var(--text-muted); text-align: center; }
.send-tip { font-size: 0.83rem; color: var(--text-muted); text-align: center; }

/* 3D view */
.view3d-btn {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    padding: 8px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
    background: rgba(31, 26, 20, 0.85); color: #fff; backdrop-filter: blur(6px);
}
.view3d-btn:hover { background: #1f1a14; }
.view3d-card { width: min(720px, 100%); }
.v3d-stage {
    position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 60vh; border-radius: var(--radius);
    background: radial-gradient(ellipse at 50% 45%, #fbf7f0 0%, #e8dfd1 70%, #d9ccb8 100%);
    overflow: hidden;
}
.v3d-stage canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.v3d-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--text-soft); }
.v3d-msg[hidden] { display: none; }
.v3d-views { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.v3d-views button {
    padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
    font-size: 0.85rem; font-weight: 500; color: var(--text-soft);
}
.v3d-views button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.v3d-hint { text-align: center; font-size: 0.83rem; color: var(--text-muted); }

/* "How big is it?" — example room sizes and own-photo mode */
.scale-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.scale-tabs button {
    flex: 1; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg);
    font-size: 0.83rem; font-weight: 600; color: var(--text-soft);
}
.scale-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.scale-sizes, .ruler-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-soft); margin-bottom: 8px; }
.scale-sizes[hidden], .ruler-row[hidden], .scale-photo[hidden] { display: none; }
.scale-sizes input, .ruler-row input {
    width: 70px; padding: 6px 8px; border: 1.5px solid var(--border); border-radius: 8px; font: inherit; background: var(--bg);
}
.ruler-row { margin: 8px 0 0; }
.ruler-row small { flex-basis: 100%; color: var(--text-muted); font-size: 0.8rem; }
.ruler-word { color: #e8731a; }
.scale-photo { display: grid; gap: 6px; margin-bottom: 8px; }
.scale-upload { justify-self: start; cursor: pointer; }
.scale-photo-status { font-size: 0.83rem; color: var(--text-soft); }

/* The preview column is now taller than most laptop screens, so it must scroll normally
   (sticky would hide the "How big is it?" section until the very end of the page). */
.cnc-preview-wrap { position: static; }

/* Custom CNC: one size slider per text line */
.line-sizes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 16px;
    padding-top: 10px; border-top: 1px dashed var(--border); }
.line-sizes[hidden] { display: none; }
.line-sizes em { font-style: normal; color: var(--text-muted); margin-left: 4px; overflow-wrap: anywhere; }

/* Custom CNC: Duco paint colour circles */
.duco-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.duco-swatches[hidden] { display: none; }
.duco-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; }
.duco-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); transform: scale(1.08); }
.duco-other { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px dashed var(--accent); background: var(--surface); color: var(--accent); font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.duco-other[aria-pressed="true"] { background: var(--accent); color: #fff; border-style: solid; }
.duco-name { flex-basis: 100%; font-size: 0.78rem; color: var(--text-muted); }
.material-hint a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }