/**
 * Instinctor Frontend Styles
 */

/* Single Product */
/* ── Global: suppress browser dotted/glowing focus ring everywhere ─────────── */
*:focus {
    outline: none !important;
    box-shadow: none !important;
}
*:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.instinctor-single-product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 40px 0;
}

@media (max-width: 768px) {
    .instinctor-single-product {
        grid-template-columns: 1fr;
    }
}

.instinctor-product-gallery {
    background: #f5f5f5;
    border-radius: 8px;
    aspect-ratio: 1;
    overflow: hidden;
}

.instinctor-product-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instinctor-product-details h1 {
    font-size: 28px;
    margin: 0 0 16px;
}

.instinctor-product-details .instinctor-product-price {
    font-size: 24px;
    margin-bottom: 20px;
}

.instinctor-product-description {
    color: #555;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Add to Cart Form */
.instinctor-add-to-cart-form {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 24px;
}

.instinctor-quantity-input {
    width: 80px;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
}

.instinctor-add-to-cart-btn {
    flex: 1;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: #1d2327;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}

.instinctor-add-to-cart-btn:hover {
    background: #3c434a;
}

.instinctor-add-to-cart-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Cart */
.instinctor-cart {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.instinctor-cart-empty {
    text-align: center;
    padding: 60px 20px;
}

.instinctor-cart-empty h2 {
    margin-bottom: 10px;
}

.instinctor-cart-empty p {
    color: #666;
    margin-bottom: 20px;
}

.instinctor-cart-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

.instinctor-cart-table th,
.instinctor-cart-table td {
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.instinctor-cart-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
}

.instinctor-cart-item-image {
    width: 60px;
    height: 60px;
    background: #f5f5f5;
    border-radius: 4px;
    overflow: hidden;
}

.instinctor-cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instinctor-cart-item-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.instinctor-cart-item-name {
    font-weight: 600;
}

.instinctor-cart-item-remove {
    color: #c00;
    font-size: 12px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px 0;
}

.instinctor-cart-item-remove:hover {
    text-decoration: underline;
}

.instinctor-cart-totals {
    background: #f9f9f9;
    padding: 24px;
    border-radius: 8px;
}

.instinctor-cart-totals-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.instinctor-cart-totals-row.total {
    font-size: 18px;
    font-weight: 700;
    border-top: 2px solid #ddd;
    margin-top: 12px;
    padding-top: 16px;
}

.instinctor-cart-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
}

/* Checkout */
.instinctor-checkout {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
}

.instinctor-checkout-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
}

@media (max-width: 900px) {
    .instinctor-checkout-grid {
        grid-template-columns: 1fr;
    }
}

.instinctor-checkout-section {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

.instinctor-checkout-section h2 {
    font-size: 18px;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.instinctor-form-row {
    margin-bottom: 16px;
}

.instinctor-form-row label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
}

.instinctor-form-row input,
.instinctor-form-row select {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.instinctor-form-row input:focus,
.instinctor-form-row select:focus {
    border-color: #1d2327;
    outline: none;
}

.instinctor-form-row-half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.instinctor-order-summary {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 24px;
    position: sticky;
    top: 20px;
}

.instinctor-order-summary h2 {
    font-size: 18px;
    margin: 0 0 20px;
}

.instinctor-place-order-btn {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: #1d2327;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 20px;
}

.instinctor-place-order-btn:hover {
    background: #3c434a;
}

/* Buttons */
.instinctor-btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.instinctor-btn-primary {
    color: #fff;
    background: #1d2327;
    border: none;
}

.instinctor-btn-primary:hover {
    background: #3c434a;
    color: #fff;
}

.instinctor-btn-secondary {
    color: #1d2327;
    background: #f0f0f1;
    border: 1px solid #ddd;
}

.instinctor-btn-secondary:hover {
    background: #e0e0e0;
    color: #1d2327;
}

/* Messages */
.instinctor-message {
    padding: 16px 20px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.instinctor-message-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.instinctor-message-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.instinctor-message-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Loading */
.instinctor-loading {
    text-align: center;
    padding: 40px;
}

.instinctor-spinner {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid #f0f0f1;
    border-top-color: #1d2327;
    border-radius: 50%;
    animation: instinctor-spin 0.8s linear infinite;
}

@keyframes instinctor-spin {
    to { transform: rotate(360deg); }
}

/* Currency Switcher */
.instinctor-currency-selector {
    display: inline-block;
}

.instinctor-currency-selector select {
    padding: 8px 32px 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23666" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>') no-repeat right 10px center;
    background-size: 8px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    font-size: 14px;
}

.instinctor-currency-selector select:hover {
    border-color: #999;
}

.instinctor-currency-selector select:focus {
    outline: none;
    border-color: #1d2327;
    box-shadow: 0 0 0 1px #1d2327;
}

/* ==========================================================================
   Social Proof Styles
   ========================================================================== */

/* Purchase Notification Popup */
.instinctor-purchase-notification {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 16px;
    max-width: 320px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease-in-out;
    pointer-events: none;
}

.instinctor-purchase-notification.instinctor-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.instinctor-purchase-notification.instinctor-position-bottom-left {
    bottom: 20px;
    left: 20px;
}

.instinctor-purchase-notification.instinctor-position-bottom-right {
    bottom: 20px;
    right: 20px;
}

.instinctor-purchase-notification.instinctor-position-top-left {
    top: 20px;
    left: 20px;
}

.instinctor-purchase-notification.instinctor-position-top-right {
    top: 20px;
    right: 20px;
}

.instinctor-purchase-notification-inner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.instinctor-purchase-notification-image {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f5f5f5;
}

.instinctor-purchase-notification-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instinctor-purchase-notification-content {
    flex: 1;
    min-width: 0;
}

.instinctor-purchase-notification-message {
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
    line-height: 1.4;
}

.instinctor-purchase-notification-product {
    font-weight: 600;
    color: #1d2327;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.instinctor-purchase-notification-time {
    font-size: 12px;
    color: #888;
}

.instinctor-purchase-notification-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.instinctor-purchase-notification-close:hover {
    color: #333;
}

/* Visitor Count Badge */
.instinctor-visitor-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.instinctor-visitor-count-icon {
    display: flex;
    align-items: center;
}

.instinctor-visitor-count-icon::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #22863a;
    border-radius: 50%;
    margin-right: 4px;
    animation: instinctor-pulse 2s infinite;
}

@keyframes instinctor-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.9); }
}

.instinctor-visitor-count-number {
    font-weight: 700;
}

/* Stock Urgency Alert */
.instinctor-stock-urgency {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    margin: 12px 0;
}

.instinctor-stock-urgency-low {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.instinctor-stock-urgency-critical {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
    animation: instinctor-urgency-flash 2s infinite;
}

@keyframes instinctor-urgency-flash {
    0%, 100% { background: #fee2e2; }
    50% { background: #fecaca; }
}

.instinctor-stock-urgency-icon {
    font-size: 16px;
}

.instinctor-stock-urgency-icon::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: currentColor;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.instinctor-stock-urgency-critical .instinctor-stock-urgency-icon::before {
    background: #dc2626;
}

.instinctor-stock-urgency-low .instinctor-stock-urgency-icon::before {
    background: #d97706;
}

/* Cart Activity */
.instinctor-cart-activity {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 6px;
    font-size: 14px;
    color: #166534;
    margin: 12px 0;
}

.instinctor-cart-activity-icon {
    font-size: 18px;
}

.instinctor-cart-activity-icon::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2316a34a'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.instinctor-cart-activity-count {
    font-weight: 700;
}

/* Recent Sales */
.instinctor-recent-sales {
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin: 12px 0;
}

.instinctor-recent-sales-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.instinctor-recent-sales-header::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #22863a;
    border-radius: 50%;
    animation: instinctor-pulse 2s infinite;
}

.instinctor-recent-sales-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.instinctor-recent-sales-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
    color: #4b5563;
}

.instinctor-recent-sales-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.instinctor-recent-sales-item-image {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f5f5;
    flex-shrink: 0;
}

.instinctor-recent-sales-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instinctor-recent-sales-item-info {
    flex: 1;
    min-width: 0;
}

.instinctor-recent-sales-item-product {
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.instinctor-recent-sales-item-time {
    font-size: 11px;
    color: #9ca3af;
}

/* FOMO Countdown Timer */
.instinctor-fomo-countdown {
    padding: 16px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    border-radius: 8px;
    color: #fff;
    text-align: center;
    margin: 16px 0;
}

.instinctor-fomo-countdown-message {
    font-size: 14px;
    margin-bottom: 12px;
    font-weight: 500;
}

.instinctor-fomo-countdown-timer {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.instinctor-fomo-countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
}

.instinctor-fomo-countdown-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 12px;
    border-radius: 6px;
}

.instinctor-fomo-countdown-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 6px;
    opacity: 0.9;
}

.instinctor-fomo-countdown-separator {
    font-size: 24px;
    font-weight: 700;
    line-height: 44px;
}

/* ==========================================================================
   Vendor Store Styles
   ========================================================================== */

.instinctor-vendor-store {
    padding: 20px 0;
}

.instinctor-vendor-header {
    position: relative;
    margin-bottom: 30px;
}

.instinctor-vendor-banner {
    height: 200px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    overflow: hidden;
}

.instinctor-vendor-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instinctor-vendor-info {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-top: -40px;
    padding: 0 20px;
}

.instinctor-vendor-logo {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    border: 4px solid #fff;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.instinctor-vendor-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instinctor-vendor-logo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    font-size: 32px;
    font-weight: 700;
    color: #999;
}

.instinctor-vendor-details {
    flex: 1;
    padding-bottom: 10px;
}

.instinctor-vendor-name {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.instinctor-vendor-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #1d2327;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
}

.instinctor-vendor-meta {
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: #666;
}

.instinctor-vendor-rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.instinctor-vendor-stars {
    color: #f59e0b;
}

.instinctor-vendor-description {
    margin-top: 16px;
    color: #555;
    line-height: 1.6;
}

/* ==========================================================================
   Vendor Dashboard Styles
   ========================================================================== */

.instinctor-vendor-dashboard {
    padding: 20px 0;
}

.instinctor-vendor-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.instinctor-vendor-dashboard-header h1 {
    margin: 0;
    font-size: 28px;
}

.instinctor-vendor-status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.instinctor-vendor-status-active {
    background: #d1fae5;
    color: #065f46;
}

.instinctor-vendor-status-pending {
    background: #fef3c7;
    color: #92400e;
}

.instinctor-vendor-status-suspended {
    background: #fee2e2;
    color: #991b1b;
}

.instinctor-vendor-dashboard-nav {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 24px;
    overflow-x: auto;
}

.instinctor-vendor-dashboard-nav a {
    display: block;
    padding: 12px 20px;
    color: #666;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: all 0.2s;
}

.instinctor-vendor-dashboard-nav a:hover {
    color: #1d2327;
}

.instinctor-vendor-dashboard-nav a.active {
    color: #1d2327;
    border-bottom-color: #1d2327;
}

.instinctor-vendor-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.instinctor-vendor-stat-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
}

.instinctor-vendor-stat-label {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.instinctor-vendor-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #1d2327;
}

.instinctor-vendor-stat-value.positive {
    color: #059669;
}

/* ==========================================================================
   Wholesale Application Styles
   ========================================================================== */

.instinctor-wholesale-application {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px 0;
}

.instinctor-wholesale-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

.instinctor-wholesale-benefit {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.instinctor-wholesale-benefit-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.instinctor-wholesale-benefit-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.instinctor-wholesale-benefit-desc {
    font-size: 13px;
    color: #666;
}

/* ==========================================================================
   Bulk Order Form Styles
   ========================================================================== */

.instinctor-bulk-order-form {
    padding: 20px 0;
}

.instinctor-bulk-order-notice {
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    color: #1e40af;
}

.instinctor-bulk-order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.instinctor-bulk-order-table th {
    background: #f9fafb;
    padding: 12px;
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    border-bottom: 2px solid #e5e7eb;
}

.instinctor-bulk-order-table td {
    padding: 16px 12px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
}

.instinctor-bulk-order-product {
    display: flex;
    align-items: center;
    gap: 12px;
}

.instinctor-bulk-order-product-image {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    overflow: hidden;
    background: #f5f5f5;
}

.instinctor-bulk-order-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instinctor-quantity-breaks {
    position: relative;
    display: inline-block;
}

.instinctor-quantity-breaks-trigger {
    background: #e0e7ff;
    color: #4338ca;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.instinctor-quantity-breaks-popup {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    z-index: 100;
    display: none;
}

.instinctor-quantity-breaks-trigger:hover + .instinctor-quantity-breaks-popup,
.instinctor-quantity-breaks-popup:hover {
    display: block;
}

.instinctor-quantity-breaks-popup ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.instinctor-quantity-breaks-popup li {
    padding: 4px 0;
}

.instinctor-bulk-order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #f9fafb;
    border-radius: 8px;
}

.instinctor-bulk-order-total {
    font-size: 18px;
    font-weight: 700;
}

/* ==========================================================================
   Quote Request Styles
   ========================================================================== */

.instinctor-quote-request {
    max-width: 700px;
    margin: 0 auto;
    padding: 30px 0;
}

.instinctor-quote-items {
    margin-bottom: 24px;
}

.instinctor-quote-item {
    display: grid;
    grid-template-columns: 1fr 100px 1fr auto;
    gap: 12px;
    align-items: end;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 12px;
}

.instinctor-quote-item-remove {
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    padding: 8px;
}

.instinctor-quote-add-item {
    background: #f0f9ff;
    border: 2px dashed #93c5fd;
    color: #2563eb;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    font-weight: 500;
    transition: all 0.2s;
}

.instinctor-quote-add-item:hover {
    background: #e0f2fe;
    border-color: #60a5fa;
}

/* ==========================================================================
   Recommendations Grid Styles
   ========================================================================== */

.instinctor-recommendations {
    padding: 30px 0;
}

.instinctor-recommendations-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 20px;
}

.instinctor-recommendations-grid {
    display: grid;
    gap: 20px;
}

.instinctor-recommendations-grid.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

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

.instinctor-recommendations-grid.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
    .instinctor-recommendations-grid.columns-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .instinctor-recommendations-grid.columns-3,
    .instinctor-recommendations-grid.columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .instinctor-recommendations-grid {
        grid-template-columns: 1fr !important;
    }
}

.instinctor-recommendation-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

.instinctor-recommendation-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.instinctor-recommendation-image {
    position: relative;
    aspect-ratio: 1;
    background: #f5f5f5;
    overflow: hidden;
}

.instinctor-recommendation-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.instinctor-recommendation-card:hover .instinctor-recommendation-image img {
    transform: scale(1.05);
}

.instinctor-recommendation-sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #dc2626;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.instinctor-recommendation-info {
    padding: 16px;
}

.instinctor-recommendation-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.4;
}

.instinctor-recommendation-title a {
    color: inherit;
    text-decoration: none;
}

.instinctor-recommendation-title a:hover {
    color: #1d2327;
}

.instinctor-recommendation-price {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
}

.instinctor-recommendation-price .sale-price {
    color: #dc2626;
}

.instinctor-recommendation-price .original-price {
    text-decoration: line-through;
    color: #9ca3af;
    font-size: 14px;
    font-weight: 400;
    margin-left: 8px;
}

.instinctor-recommendation-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 12px;
}

.instinctor-recommendation-stars {
    color: #f59e0b;
}

.instinctor-recommendation-add-btn {
    width: 100%;
    padding: 10px;
    background: #1d2327;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.instinctor-recommendation-add-btn:hover {
    background: #3c434a;
}

/* ==============================
   Language Switcher
   ============================== */
.instinctor-language-switcher {
    position: relative;
    display: inline-block;
    font-size: 14px;
}

/* Dropdown Style */
.instinctor-lang-dropdown .instinctor-lang-current {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: border-color 0.2s;
}

.instinctor-lang-dropdown .instinctor-lang-current:hover {
    border-color: #1d2327;
}

.instinctor-lang-dropdown .instinctor-lang-current svg {
    transition: transform 0.2s;
}

.instinctor-lang-dropdown:hover .instinctor-lang-current svg {
    transform: rotate(180deg);
}

.instinctor-lang-dropdown .instinctor-lang-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 160px;
    margin: 4px 0 0;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s;
    z-index: 1000;
}

.instinctor-lang-dropdown:hover .instinctor-lang-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.instinctor-lang-dropdown .instinctor-lang-list li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: #1d2327;
    text-decoration: none;
    transition: background 0.2s;
}

.instinctor-lang-dropdown .instinctor-lang-list li a:hover,
.instinctor-lang-dropdown .instinctor-lang-list li a.active {
    background: #f5f5f5;
}

.instinctor-lang-dropdown .instinctor-lang-list li a.active {
    font-weight: 600;
}

.instinctor-lang-flag {
    font-size: 18px;
    line-height: 1;
}

/* Flags Style */
.instinctor-lang-flags {
    display: flex;
    align-items: center;
    gap: 8px;
}

.instinctor-lang-flags .instinctor-lang-flag-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 20px;
    text-decoration: none;
    border-radius: 4px;
    opacity: 0.6;
    transition: all 0.2s;
}

.instinctor-lang-flags .instinctor-lang-flag-link:hover,
.instinctor-lang-flags .instinctor-lang-flag-link.active {
    opacity: 1;
    background: #f5f5f5;
}

.instinctor-lang-flags .instinctor-lang-flag-link.active {
    box-shadow: 0 0 0 2px #1d2327;
}

/* RTL Support */

/* Flex Grid Responsive */
.impulse-flex-grid {
    width: 100%;
}

.impulse-flex-row {
    width: 100%;
}

.impulse-flex-cell {
    min-width: 0;
}

/* Stack on tablet (< 1024px) */
@media (max-width: 1024px) {
    .impulse-flex-row.impulse-stack-tablet {
        flex-direction: column !important;
    }
    
    .impulse-flex-row.impulse-stack-tablet > .impulse-flex-cell {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
}

/* Stack on mobile (< 768px) */
@media (max-width: 768px) {
    .impulse-flex-row.impulse-stack-mobile {
        flex-direction: column !important;
    }
    
    .impulse-flex-row.impulse-stack-mobile > .impulse-flex-cell {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
}

/* Hide number input spinners in cart/quantity selectors */
.impulse-cart-block input[type="number"],
.impulse-quantity-selector input[type="number"],
.instinctor-cart input[type="number"] {
    -moz-appearance: textfield;
}
.impulse-cart-block input[type="number"]::-webkit-outer-spin-button,
.impulse-cart-block input[type="number"]::-webkit-inner-spin-button,
.impulse-quantity-selector input[type="number"]::-webkit-outer-spin-button,
.impulse-quantity-selector input[type="number"]::-webkit-inner-spin-button,
.instinctor-cart input[type="number"]::-webkit-outer-spin-button,
.instinctor-cart input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ========================================
   Product Grid + Card Base
   ======================================== */
.impulse-product-grid {
    box-sizing: border-box;
    width: 100%;
}

.impulse-product-grid > * {
    min-width: 0;
}

.impulse-pcard {
    min-width: 0;        /* grid handles sizing — never force wider than a column */
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Pointer cursor only when card is actually clickable */
[data-qv*='"enable_modal":true'] .impulse-pcard,
.impulse-flip-card .impulse-pcard {
    cursor: pointer;
}

.impulse-pcard img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    box-sizing: border-box;
}

/* ========================================
   Product Card Image Slideshow
   ======================================== */
.impulse-pcard-image.has-slideshow {
    /* Slideshow handled by JS */
}

.impulse-pcard-slide-img {
    transition: opacity 0.5s ease-in-out;
}

.impulse-pcard-dots {
    pointer-events: auto;
}

.impulse-pcard-dot {
    transition: background 0.3s ease-in-out;
}

.impulse-pcard-dot:hover {
    transform: scale(1.2);
}

/* Legacy hover fade for 2-image cards without slideshow */
.impulse-pcard-image:not(.has-slideshow):hover .impulse-pcard-img-primary {
    opacity: 0;
}

.impulse-pcard-image:not(.has-slideshow):hover .impulse-pcard-img-secondary {
    opacity: 1;
}

/* ========================================
   Quick View Modal
   ======================================== */
.impulse-quickview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.impulse-quickview-overlay.active {
    opacity: 1;
    visibility: visible;
}

.impulse-quickview-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    overflow: hidden;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.impulse-quickview-overlay.active .impulse-quickview-modal {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.impulse-quickview-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.15s, border-color 0.15s;
    padding: 0;
}

.impulse-quickview-close:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.impulse-quickview-close svg {
    width: 14px;
    height: 14px;
    stroke: #666;
}

.impulse-quickview-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
}

/* ---- Mobile quickview ---- */
@media (max-width: 768px) {
    .impulse-quickview-content {
        grid-template-columns: 1fr;
        max-height: 90vh;
        overflow-y: auto;
    }
    .impulse-quickview-modal {
        width: 96%;
        border-radius: 8px;
        max-height: 92vh;
        overflow-y: auto;   /* modal itself scrolls on mobile; gallery+details stack vertically */
    }
    .impulse-quickview-gallery {
        height: 60vw;          /* fixed height — abs children (image, thumbs) need this */
        min-height: 200px;
        max-height: 320px;
        flex-shrink: 0;
    }
    /* Zoom preview is desktop-only — useless on touch, can shift the viewport */
    img.impulse-qv-preview {
        display: none !important;
    }
    /* Thumbs strip: solid bg so it doesn't show image content behind it */
    .impulse-quickview-thumbs {
        background: rgba(0, 0, 0, 0.45);
    }
    /* Zoom button: hide on touch */
    .impulse-quickview-zoom-btn {
        display: none !important;
    }
}

/* Gallery Side */
.impulse-quickview-gallery {
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
}

.impulse-quickview-gallery-main {
    position: absolute;
    inset: 0;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.impulse-quickview-gallery-main:active {
    cursor: pointer;
}

.impulse-quickview-gallery-main img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.4s ease-in-out;
    pointer-events: none;
    transform: scale(1);
    transform-origin: center center;
}

.impulse-quickview-gallery-main img.active {
    opacity: 1;
}

.impulse-quickview-gallery-main .impulse-quickview-zoom-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease-in-out, background 0.2s ease-in-out;
    padding: 0;
}

.impulse-quickview-gallery-main:hover .impulse-quickview-zoom-btn,
.impulse-quickview-gallery-main .impulse-quickview-zoom-btn:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.7);
}

.impulse-quickview-gallery-main .impulse-quickview-zoom-btn svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
    flex-shrink: 0;
}


/* Hover preview — bare image, no wrapper/background/shadow */
img.impulse-qv-preview {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    max-width: 80vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease-in-out, transform 0.28s ease-in-out;
    z-index: 200000;
}

img.impulse-qv-preview.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Thumbs strip — floats over bottom of image */
.impulse-quickview-thumbs {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 6px;
    padding: 10px;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: transparent;
}

.impulse-quickview-thumbs::-webkit-scrollbar {
    display: none;
}

.impulse-quickview-thumb {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.4);
    transition: border-color 0.15s;
    background: rgba(255,255,255,0.15);
}

.impulse-quickview-thumb.active {
    border-color: #fff;
}

.impulse-quickview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Navigation dots (alternative to thumbs for many images) */
.impulse-quickview-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.impulse-quickview-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.2s;
}

.impulse-quickview-dot.active {
    background: #fff;
}

/* Details Side */
.impulse-quickview-details {
    padding: 32px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .impulse-quickview-details {
        padding: 24px;
    }
}

.impulse-quickview-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 16px;
    padding-right: 36px; /* clear close button */
    color: #1d2327;
    line-height: 1.3;
}

.impulse-quickview-desc {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 16px;
}

.impulse-quickview-sku {
    font-size: 12px;
    color: #999;
    margin: 0 0 20px;
}

/* Variants */
.impulse-quickview-variants {
    margin-bottom: 20px;
}

.impulse-quickview-variant-group {
    margin-bottom: 16px;
}

.impulse-quickview-variant-label {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.impulse-quickview-variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.impulse-quickview-variant-btn {
    padding: 8px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.impulse-quickview-variant-btn:hover {
    border-color: #999;
}

.impulse-quickview-variant-btn.active {
    border-color: #1d2327;
    background: #1d2327;
    color: #fff;
}

/* Color swatches */
.impulse-quickview-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 2px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.15s;
}

.impulse-quickview-color-swatch:hover {
    border-color: #999;
}

.impulse-quickview-color-swatch.active {
    border-color: #1d2327;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d2327;
}

/* Add to Cart / Actions — always at the bottom of the details column */
.impulse-quickview-actions {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
}

/* Price + Qty on same row */
.impulse-quickview-price-qty-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.impulse-quickview-price {
    font-size: 28px;
    font-weight: 700;
    color: #1d2327;
    flex: 1;
    text-align: right;
}

.impulse-quickview-price del {
    font-size: 16px;
    color: #999;
    font-weight: 400;
    margin-left: 8px;
}

.impulse-quickview-price .sale {
    color: #dc2626;
}

.impulse-quickview-qty-control {
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.impulse-quickview-qty-btn {
    width: 32px;
    height: 34px;
    border: none;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    padding: 0;
}

.impulse-quickview-qty-btn:hover {
    background: #e0e0e0;
}

.impulse-quickview-qty-input {
    width: 44px;
    height: 34px;
    border: none;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    text-align: center;
    font-size: 13px;
    -moz-appearance: textfield;
}

.impulse-quickview-qty-input::-webkit-outer-spin-button,
.impulse-quickview-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.impulse-quickview-add-btn {
    width: 100%;
    padding: 12px 24px;
    background: #1d2327;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.impulse-quickview-add-btn:hover {
    background: #333;
}

.impulse-quickview-add-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Placeholder image in gallery — contain so logo doesn't crop */
.impulse-qv-placeholder-img {
    object-fit: contain !important;
    padding: 20%;
}


.impulse-quickview-view-full:hover {
    color: #1d2327;
    text-decoration: underline;
}

/* Loading state */
.impulse-quickview-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.impulse-quickview-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f0f0f0;
    border-top-color: #1d2327;
    border-radius: 50%;
    animation: impulse-spin 0.8s linear infinite;
}

@keyframes impulse-spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   Quick View — Add-on fields
   ======================================== */
.impulse-quickview-addons .ia-addon-check {
    opacity: 1 !important;
    visibility: visible !important;
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    width: 16px !important;
    height: 16px !important;
    display: inline-block !important;
    position: static !important;
    pointer-events: auto !important;
    clip: auto !important;
    clip-path: none !important;
}

/* ========================================
   Product Grid — Mobile centering
   1-col: single card centred with breathing
   room on both sides (max 480px).
   2-col: two equal columns fill the
   container naturally; justify-content:center
   keeps them centred if narrower than parent.
   ======================================== */
@media (max-width: 767px) {

    /* 1-column mode: narrow the grid track so the card doesn't
       stretch edge-to-edge and centre the whole thing */
    .impulse-product-grid[data-cols-mobile="1"] {
        grid-template-columns: minmax(0, 480px) !important;
        justify-content: center !important;
    }

    /* 2-column mode: two equal columns, centred as a unit */
    .impulse-product-grid[data-cols-mobile="2"] {
        grid-template-columns: repeat(2, 1fr) !important;
        justify-content: center !important;
    }
}

/* Product block: outer wrapper fills flex stretch, inner block centers via margin:auto */
.impulse-pblock-outer {
    width: 100%;
    align-self: stretch;
}

/* Section container children that don't have explicit widths should still stretch */
.impulse-container > *:not(.impulse-pblock-outer) {
    align-self: stretch;
}


/* ── Static blocks extracted from template renderer ─────────────────── */

@keyframes impulse-glitch{0%{transform:translate(0);clip-path:inset(0);filter:none}10%{transform:translate(-5px,3px);clip-path:inset(20% 0 40% 0);filter:hue-rotate(90deg)}20%{transform:translate(3px,-2px);clip-path:inset(60% 0 5% 0);filter:hue-rotate(180deg)}30%{transform:translate(-3px,0);clip-path:inset(5% 0 60% 0);filter:hue-rotate(270deg)}40%{transform:translate(5px,2px);clip-path:inset(40% 0 20% 0);filter:none}50%{transform:translate(-2px,-3px);clip-path:inset(0);filter:hue-rotate(120deg)}60%{transform:translate(0);clip-path:inset(0);filter:none;opacity:0}100%{transform:translate(0);clip-path:inset(0);filter:none;opacity:0}}.impulse-flip-glitching{animation:impulse-glitch 0.5s steps(1,end) forwards!important;transition:max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1)!important}

.impulse-flip-card{perspective:1000px;cursor:pointer}.impulse-flip-card .impulse-pcard{box-shadow:none!important}.impulse-flip-inner{position:relative;transform-style:preserve-3d;transition:transform 0.6s ease-in-out}.impulse-flip-front{overflow:hidden}.impulse-flip-back{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column}.pfc-flip-h:hover .impulse-flip-inner,.pfc-flip-h.flipped .impulse-flip-inner{transform:rotateY(180deg)}.pfc-flip-h .impulse-flip-front,.pfc-flip-h .impulse-flip-back{backface-visibility:hidden;-webkit-backface-visibility:hidden}.pfc-flip-h .impulse-flip-back{transform:rotateY(180deg)}.pfc-flip-v:hover .impulse-flip-inner,.pfc-flip-v.flipped .impulse-flip-inner{transform:rotateX(180deg)}.pfc-flip-v .impulse-flip-front,.pfc-flip-v .impulse-flip-back{backface-visibility:hidden;-webkit-backface-visibility:hidden}.pfc-flip-v .impulse-flip-back{transform:rotateX(180deg)}.pfc-zoom .impulse-flip-front{transition:transform 0.4s ease-in-out,opacity 0.3s ease-in-out}.pfc-zoom .impulse-flip-back{transform:scale(0.86);opacity:0;transition:transform 0.4s ease-in-out,opacity 0.4s ease-in-out}.pfc-zoom:hover .impulse-flip-front,.pfc-zoom.flipped .impulse-flip-front{opacity:0;transform:scale(1.05)}.pfc-zoom:hover .impulse-flip-back,.pfc-zoom.flipped .impulse-flip-back{transform:scale(1);opacity:1}.pfc-push .impulse-flip-front{transition:transform 0.5s ease-in-out}.pfc-push .impulse-flip-back{transform:translateX(100%);transition:transform 0.5s ease-in-out}.pfc-push:hover .impulse-flip-front,.pfc-push.flipped .impulse-flip-front{transform:translateX(-100%)}.pfc-push:hover .impulse-flip-back,.pfc-push.flipped .impulse-flip-back{transform:translateX(0)}.pfc-swing .impulse-flip-front{transform-origin:left center;transition:transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275);backface-visibility:hidden;-webkit-backface-visibility:hidden}.pfc-swing .impulse-flip-back{transform:rotateY(-90deg);transform-origin:left center;transition:transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275);backface-visibility:hidden;-webkit-backface-visibility:hidden}.pfc-swing:hover .impulse-flip-front,.pfc-swing.flipped .impulse-flip-front{transform:rotateY(90deg)}.pfc-swing:hover .impulse-flip-back,.pfc-swing.flipped .impulse-flip-back{transform:rotateY(0deg)}.pfc-fade .impulse-flip-front{transition:opacity 0.7s ease-in-out}.pfc-fade .impulse-flip-back{opacity:0;transition:opacity 0.7s ease-in-out}.pfc-fade:hover .impulse-flip-front,.pfc-fade.flipped .impulse-flip-front{opacity:0}.pfc-fade:hover .impulse-flip-back,.pfc-fade.flipped .impulse-flip-back{opacity:1}

@keyframes impulseFlyIn{0%{transform:scale(1.0)}100%{transform:scale(1.18)}}

/* ── Utility classes replacing repeated inline styles ─────────────────── */
.imp-fill { display:block;width:100%;height:100% }
.imp-link-reset { color:inherit;text-decoration:none }


/* ── Moved from inline impulse_output_frontend_styles ─────────────────── */
/* Impulse Frontend Styles */
    /* Default page font: Helvetica/Arial system stack. The previous stack
       (-apple-system,BlinkMacSystemFont,...) tripped Chrome's canvas font
       parser with the leading hyphen-prefixed identifier — the 3D heading
       canvas would silently fall back to whatever Chrome's "default sans"
       was on the OS (often a font with malformed glyph paths that produced
       self-intersecting strokes when traced by strokeText). Helvetica Neue
       on Mac, Arial on Windows — both clean glyphs, both already in OS RAM,
       no font download. */
    .impulse-page{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.6;color:#1a1a1a;display:flex;flex-direction:column;min-height:calc(100vh - var(--impulse-screen-bottom-inset, 0px));animation:impulse-fade-in 0.4s ease-in-out both}
    .impulse-page input:-webkit-autofill,.impulse-page input:-webkit-autofill:hover,.impulse-page input:-webkit-autofill:focus,.impulse-page textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset!important;-webkit-text-fill-color:#1d2327!important;transition:background-color 5000s ease-in-out 0s}
    @keyframes impulse-fade-in{from{opacity:0}to{opacity:1}}
    /* Scene-mode pages skip the page-level fade-in. The fade kicks in
       from `opacity:0` and depends on the browser advancing the CSS
       animation, but scene-mode init mutates the body's `cssText`
       (`position:fixed`, `overflow:hidden`, etc.) right after page
       load — those reflows leave the animation registered with
       `currentTime: 0` indefinitely (verified via getAnimations()).
       Result: the page stayed at opacity:0 until something forced a
       repaint, which is why a single scroll suddenly brought the
       first screen on. Scene mode has its own screen-transition
       reveal pipeline (applyFocusState + decomposeEnter); the page-
       level fade isn't doing anything useful there anyway. */
    body.impulse-screen-mode-active .impulse-page,
    body[data-screen-mode="1"] .impulse-page{animation:none;opacity:1}
    .impulse-page > *{flex-shrink:0}
    .impulse-page *{box-sizing:border-box}
    
    /* Container - centered with margin auto */
    /* 2026-05-23: cap content width at 1280px — Instinctor's "premium by
       default" principle. Any user, regardless of design skill, should
       get layouts that look intentional and framed rather than sprawled
       across an ultra-wide monitor. 1280px is the classic premium
       content width: wide enough for 3- and 4-column grids, narrow
       enough that nothing feels lost in space. Also gives editor⇄
       frontend WYSIWYG parity: the editor preview iframe and the live
       page now compute the same content width regardless of monitor
       size. Section background (smoke, video, gradient) still fills
       the FULL viewport via .impulse-section; only the inner content
       container is capped + centred. */
    .impulse-container{max-width:1280px;margin:0 auto;padding:0;display:flex;flex-direction:column;gap:var(--impulse-item-space, 0px)}
    @media(max-width:767px){.impulse-container,.impulse-content-wrapper{flex-direction:column!important}}
    /* Match editor .impulse-el — all children stretch to full width by default.
       Blocks with explicit width (unfold etc.) override with inline align-self:center */
    .impulse-container > *{align-self:stretch}
    .impulse-content-wrapper > *{align-self:stretch}
    .impulse-grid-cell > *,
    .impulse-cell-grid-cell > *,
    .impulse-cell-content > *{width:100%}
    /* When a cell has explicit left/right halign, children become
       content-sized AND defer their cross-axis position to the cell's
       align-items (flex-start / flex-end). Default halign=center keeps
       the 100%-width rule, so text-based blocks span the cell and
       text-align on the cell positions their inner text. Blocks that
       have their own width (single-mode products card, fixed-width
       buttons, etc.) sit at the requested edge.
       align-self:auto is critical: any block-level `.impulse-el {
       align-self: stretch }` would otherwise force the child to fill the
       cross-axis regardless of width:auto. */
    .impulse-grid-cell[data-halign="left"] > *,
    .impulse-grid-cell[data-halign="right"] > *{width:auto;max-width:100%;align-self:auto}
    .impulse-container-full{width:100%;max-width:none;padding:0}
    
    /* Section */
    .impulse-section{position:relative;overflow-x:clip;overflow-y:visible}
    /* Section with ambient/tilt motion: overflow visible so content isn't clipped during scale/translate. */
    .impulse-section[data-section-ambient],
    .impulse-section[data-section-tilt]{overflow:visible}
    /* Tilt 3D rotation: the wrapper (.impulse-el) must also allow overflow so perspective-transformed edges don't clip. */
    .impulse-el:has(> section[data-section-tilt]){overflow:visible}
    .impulse-el:has(.impulse-divider) .impulse-section{overflow:visible}
    .impulse-el:has(.impulse-logo-animator) .impulse-section{overflow:visible}
    .impulse-el:has(.impulse-logo-animator) .impulse-section > .impulse-container{overflow:visible}
    .impulse-el:has(.impulse-logo-animator){overflow:visible}
    /* 2026-05-24: breathing-room padding inside the animator container so
       canvas-backed presets (breathing, tilt, scale, push) have pixels
       to grow into. Without this, text fills 96% of the canvas width and
       any growth gets rasterised to nothing — ancestor overflow:visible
       can't restore pixels that were never drawn. em-based so the room
       scales with the heading's font-size. */
    .impulse-logo-animator{padding:0.3em 0.5em;box-sizing:content-box}
    .impulse-el:has(.impulse-divider) .impulse-section > .impulse-container{overflow:visible}
    .impulse-el:has(.impulse-display-text) .impulse-section{overflow:visible}
    .impulse-el:has(.impulse-display-text) .impulse-section > .impulse-container{overflow:visible}
    .impulse-el:has(.impulse-display-text){overflow:visible}
    .impulse-content-wrapper:has(.impulse-display-text){overflow:visible}
    .impulse-content-wrapper{position:relative;overflow-x:clip;overflow-y:visible}
    .impulse-bg-shape-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:hidden}
    /* 2026-05-23: z-index:0 (was 1!important). Overlay sits in the same
       layer as bg-video, painted above it via DOM order, but always below
       section content (.impulse-container at z-index:4). Fixes overlay
       painting over heading/text in some stacking contexts. */
    .impulse-section-overlay{z-index:0}
    .impulse-section-bg-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
    .impulse-section-bg-video-fallback{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;z-index:0;pointer-events:none;display:none}
    @media(hover:none),(pointer:coarse){.impulse-section-bg-video{display:none!important}.impulse-section-bg-video-fallback{display:block!important}}
    .impulse-section-animation{z-index:2}
    .impulse-bg-shape-layer ~ .impulse-container{position:relative;z-index:4}
    .impulse-bg-shape-el{pointer-events:none}
    .impulse-bg-shape-el svg{display:block;width:100%;height:100%}
    .impulse-stretch{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
    /* impulse-stretch is for top-level sections that need to bleed to viewport edges.
       When the section is nested inside a grid/cell-grid/layout cell, the bleed
       breaks out of the cell with margin:-50vw and content lays out at the viewport's
       left edge — cancel the bleed so the section stays bounded by its cell. */
    .impulse-grid-cell .impulse-section.impulse-stretch,
    .impulse-cell-grid-cell .impulse-section.impulse-stretch,
    .impulse-layout-cell .impulse-section.impulse-stretch{width:auto;position:static;left:auto;right:auto;margin-left:0;margin-right:0}
    
    /* Layout elements — always full-width, always responsive */
    /* Slider: full bleed like section */
    .impulse-new-slider{width:100%}
    /* Grid: collapse to 1 col on mobile (per-element 2col inline CSS overrides with higher ID specificity) */
    @media(max-width:767px){
        .impulse-grid{grid-template-columns:1fr!important;width:100%}
        .impulse-cell-grid-row{flex-direction:column!important;height:auto!important}
        .impulse-cell-grid-cell{flex:none!important;width:100%!important;height:auto!important;min-height:60px}
    }
    /* Grid: max 2 cols on tablet */
    @media(max-width:1024px){
        .impulse-grid{width:100%}
    }
    
    /* Site Header & Footer - outside content wrapper, always full width */
    .impulse-site-header,.impulse-site-footer{
        width:100%;
        box-sizing:border-box
    }
    
    /* Row */
    .impulse-row{display:flex;flex-wrap:wrap}
    .impulse-col{flex:1;min-width:0}
    
    /* Heading */
    
    /* Display Text */
    .impulse-display-text{position:relative;width:100%;min-width:0;max-width:100%;box-sizing:border-box}
    .impulse-display-text h1,.impulse-display-text h2,.impulse-display-text h3,.impulse-display-text h4,.impulse-display-text h5,.impulse-display-text h6,.impulse-display-text p{white-space:pre-line}
    /* Selection background — peach at full opacity, dark text. Low-opacity
       blue used to read as "no selection" against either dark or light page
       bgs. Animator's source text is opacity:0 (canvas overlay covers it),
       so show selection as a semi-transparent strip the canvas can't hide. */
    /* Selection colour: neutral grey to match the strict-greyscale rule. Was
       peach (#dd886b) — chosen because animator/3D-text source text is
       opacity:0 and covered by canvas, so the selection strip needed to read
       through the overlay. Grey at high alpha still does that without the
       brand-orange surprise. */
    .impulse-display-text ::selection{background:rgba(85,85,85,0.6);color:#fff}
    .impulse-display-text ::-moz-selection{background:rgba(85,85,85,0.6);color:#fff}
    .impulse-logo-animator ::selection{background:rgba(85,85,85,0.85);color:#fff}
    .impulse-logo-animator ::-moz-selection{background:rgba(85,85,85,0.85);color:#fff}
    .impulse-dt-line{transform-origin:center center}
    
    /* Text */
    .impulse-text{word-break:break-word;overflow-wrap:break-word}
    .impulse-text a,.impulse-text a:visited,.impulse-text a:hover,.impulse-text a:active{color:inherit;text-decoration:underline}
    .impulse-text p{margin:0}
    /* Forms */
    .impulse-contact-form,.impulse-login-form,.impulse-register-form{box-sizing:border-box}
    .impulse-contact-form input,.impulse-contact-form textarea,.impulse-login-form input,.impulse-register-form input{font-family:inherit}
    .impulse-contact-form input::placeholder,.impulse-login-form input::placeholder,.impulse-register-form input::placeholder,.impulse-contact-form textarea::placeholder{color:inherit;opacity:0.45}
    .impulse-contact-form input:focus,.impulse-login-form input:focus,.impulse-register-form input:focus,.impulse-contact-form textarea:focus{border-color:#888!important;outline:none!important}
    /* Accordion */
    .impulse-unfold{box-sizing:border-box}

    /* Image */
    .impulse-image img{max-width:100%;height:auto;display:block;transition:all 0.5s ease-in-out}
    .impulse-image a{display:inline-block;text-decoration:none;border:none;outline:none}
    .impulse-image a:focus,.impulse-image a:active{outline:none;border:none}
    .impulse-image a img{border:none}
    /* Image hover effects */
    .impulse-img-hover{position:relative;display:block}
    .impulse-img-hover[data-hover="shine"],.impulse-img-hover[data-hover="zoom"],.impulse-img-hover[data-hover="tilt"],.impulse-img-hover[data-hover="blur"],.impulse-img-hover[data-hover="portal"],.impulse-img-hover[data-hover="slices"],.impulse-img-hover[data-hover=],.impulse-img-hover[data-hover="thermal"],.impulse-img-hover[data-hover="burn"],.impulse-img-hover[data-hover="glitch"],.impulse-img-hover[data-hover="hologram"],.impulse-img-hover[data-hover="pixelate"]{overflow:hidden !important}
    /* Shine rides inside the image only — border-radius + isolation make it
       respect rounded corners and never leak past the image bounds. */
    .impulse-img-hover[data-hover="shine"]{isolation:isolate;border-radius:inherit}
    .impulse-img-hover[data-hover="shine"]::before{content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transform:skewX(-25deg);transition:max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none;z-index:2;border-radius:inherit}
    .impulse-img-hover[data-hover="shine"]:hover::before{animation:impulse-img-shine 1s ease-in-out forwards}
    @keyframes impulse-img-shine{0%{left:-75%}100%{left:125%}}
    .impulse-img-hover[data-hover="zoom"] img{transition:transform 0.8s ease-in-out}
    .impulse-img-hover[data-hover="zoom"]:hover img{transform:scale(1.08)}
    .impulse-img-hover[data-hover="tilt"]{perspective:600px}
    .impulse-img-hover[data-hover="tilt"] img{transition:transform 0.7s ease-in-out}
    .impulse-img-hover[data-hover="tilt"]:hover img{transform:rotateY(4deg) rotateX(2deg) scale(1.03)}
    .impulse-img-hover[data-hover="blur"] img{transition:filter 0.7s ease-in-out,transform 0.7s ease-in-out}
    .impulse-img-hover[data-hover="blur"]:hover img{filter:blur(3px) brightness(1.1);transform:scale(1.02)}
    .impulse-gallery-item{position:relative}.impulse-gallery-item::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0}
    .impulse-image-wrapper{position:relative;perspective:900px;overflow:hidden;--cyl-px:50%;--cyl-py:50%;--cyl-ea:0;--cyl-sx:50%;--cyl-sy:50%;--cyl-ha:0;touch-action:pan-y}
    /* edge shadow removed */
    .impulse-image-wrapper::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(circle at var(--cyl-sx) var(--cyl-sy),rgba(255,255,255,var(--cyl-ha)) 0%,transparent 75%)}
    .impulse-image-wrapper img{will-change:transform}

    .impulse-gallery-hover-shine .impulse-gallery-item{position:relative;overflow:hidden}
    .impulse-gallery-hover-shine .impulse-gallery-item::before{content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transform:skewX(-25deg);transition:max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none;z-index:2}
    .impulse-gallery-hover-shine .impulse-gallery-item:hover::before{animation:impulse-img-shine 1s ease-in-out forwards}
    .impulse-gallery-hover-zoom .impulse-gallery-item{overflow:hidden}
    .impulse-gallery-hover-zoom .impulse-gallery-item img{transition:transform 0.8s ease-in-out}
    .impulse-gallery-hover-zoom .impulse-gallery-item:hover img{transform:scale(1.08)}
    .impulse-gallery-hover-glitch .impulse-gallery-item{position:relative;overflow:hidden}
    .impulse-gallery-hover-hologram .impulse-gallery-item{position:relative;overflow:hidden}
    .impulse-gallery-hover-depth_glass{perspective:1200px;perspective-origin:50% 50%}
    .impulse-gallery-hover-depth_glass .impulse-gallery-item{transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),box-shadow 0.6s ease-in-out}
    .impulse-gallery-hover-pixelate .impulse-gallery-item{position:relative;overflow:hidden}
    .impulse-gallery-hover-portal .impulse-gallery-item{position:relative;overflow:hidden;transform-style:preserve-3d}
    .impulse-gallery-hover-shatter .impulse-gallery-item{position:relative;overflow:visible}
    .impulse-gallery-hover-preview .impulse-gallery-item{cursor:pointer}
    
    /* Grid — masonry mode: children break at column boundaries, gap between rows via margin-bottom */
    .impulse-grid-masonry > *{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;display:block;margin-bottom:var(--impulse-masonry-gap,16px);width:100%}
    .impulse-grid-masonry > *:last-child{margin-bottom:0}

    /* Button — single render path; all styling on the inline `style` attr.
       The .impulse-button a-descendant selectors below were left over from
       a long-dead structure where .impulse-button wrapped an <a>; today
       .impulse-button IS the <a>, so the descendant rules matched nothing.
       Deleted in 2.1.646. */
    .impulse-button-wrap{max-width:100%;overflow:hidden}
    /* Buttons never wrap their label across multiple lines. When a width
       is set (btn_min_width slider, or 100% / full-align), text that
       exceeds it stays single-line so the button keeps the dimensions
       the renderer intended. The wrap symptom — "Order" on one line,
       "Starter" on the next — happened when the width pin shrank the
       box below intrinsic text size. Single-line + ellipsis is the
       consistent visual contract; users widen the button if they want
       more text to fit. */
    .impulse-button{max-width:100%;box-sizing:border-box;white-space:nowrap}
    /* Block any inherited :active/:focus scaling — there are no UI rules
       that scale .impulse-button down on press, but browsers / editor
       contexts / parent transforms can re-trigger the entrance animation
       which starts at scale(0.9). Locking transform:none on press kills
       the visible "shrink" without disabling the initial entrance — the
       :active state is only briefly applied after the entrance completes.
       Also kill the browser focus outline + tap highlight + any width/
       padding shift coming from user-agent stylesheets — the cluster of
       defaults that combine to read as "dimensions change on click". */
    .impulse-button{outline:none;-webkit-tap-highlight-color:transparent}
    .impulse-button:active,
    .impulse-button:focus,
    .impulse-button:focus-visible{
        transform:none!important;
        animation:none!important;
        outline:none!important;
        box-shadow:none!important;
    }
    /* 2026-05-24: extend the press-shrink guard up to the wrap and the
       wrapping .impulse-el. Clicking anywhere in the parent container
       was visibly shrinking the button — the entrance keyframe
       `impulse-emerge` (scale 0.9 → 1) was re-triggering on parent
       state changes (selection, focus-within, container :active) that
       bubbled down through transform inheritance. Killing transform +
       animation on each level of the press cascade stops the chain
       cold without disabling the initial entrance (it's a transition,
       not a hover state). */
    .impulse-button-wrap:active,
    .impulse-button-wrap:focus-within,
    .impulse-el:has(> .impulse-button-wrap):active,
    .impulse-el:has(> .impulse-button-wrap):focus-within,
    .impulse-el[data-type="button"]:active,
    .impulse-el[data-type="button"]:focus-within,
    .impulse-el[data-type="button"].selected,
    .impulse-el[data-type="button"].selected .impulse-button-wrap,
    .impulse-el[data-type="button"].selected .impulse-button {
        transform:none!important;
        animation:none!important;
    }

    /* Frosted-glass variant — paired with the inline backdrop-filter the
       renderer emits when the Frosted Glass checkbox is on. Three
       components combine to give the visual character of glass on any
       background:
         1. The renderer rewrites bg to a low-alpha rgba tint so the
            backdrop-filter has something translucent to filter through
            (an opaque fill hides the blur entirely).
         2. backdrop-filter:blur+saturate distorts what's behind — only
            visible when there IS content behind. On a plain section
            with nothing varied to blur, this contributes nothing.
         3. (THIS RULE) inner highlight + shadow + outer glow give the
            button its own glassy character regardless of what's behind,
            so the effect reads as "frosted" even on solid colour
            sections. The top inner highlight reads as a glass edge
            catching light; the bottom inset shadow as a thin lower
            lip; the outer drop is a soft glow that lifts the button
            visually off the surface. */
    .impulse-frosted{
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.45),
            inset 0 -1px 0 rgba(0,0,0,0.08),
            0 4px 14px rgba(0,0,0,0.08);
    }
    /* Stroke saturation lift — when the gradient ring is also present,
       boost it so the ring reads as crisp as the backdrop's saturate(160%)
       lift. */
    .impulse-frosted.impulse-grad-border::before{
        filter:saturate(160%);
    }
    /* Frosted glass needs to blur whatever sits behind the button. CSS
       spec: `backdrop-filter` only blurs content inside its containing
       stacking context. The renderer inserts `isolation:isolate` on
       every grid cell (defensive for the grad-border z-index:-1 trick)
       and JS injects `will-change:transform,filter` on the wrap (perf
       hint for hover halo) — both promote to new stacking contexts and
       trap backdrop-filter inside an empty bubble, so the 3D background
       behind never gets blurred.

       Scoped override: only on cells/wraps that actually contain a
       frosted button. Every other use of isolation/will-change (grad
       ring without frosted, 3D text canvas, etc.) stays put. !important
       beats the inline styles. */
    .impulse-grid-cell:has(.impulse-frosted){isolation:auto !important}
    .impulse-button-wrap:has(.impulse-frosted){
        will-change:auto !important;
        overflow:visible !important;
    }

    /* Gradient ring on buttons — ::before pseudo masked with composite=exclude
       so the gradient shows ONLY in the border zone. Same rule as the editor's
       impulse-preview.php inline copy; both must stay in sync. Conic gradient
       (not linear): linear paints perpendicular stripes that read as "one side
       at a time" snapping when the angle spins; conic radiates from the centre
       so the highlight orbits the perimeter smoothly. First and last stops
       repeat the same colour to close the loop without a seam at 0°/360°. */
    .impulse-grad-border::before{
        content:'';position:absolute;inset:0;z-index:-1;box-sizing:border-box;
        padding:var(--impulse-border-width,2px);border-radius:inherit;
        background:conic-gradient(
            from var(--impulse-border-gradient-angle,135deg),
            var(--impulse-border-color,#1d2327),
            var(--impulse-border-gradient-to,transparent),
            var(--impulse-border-color,#1d2327)
        );
        -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
        -webkit-mask-composite:xor;
        mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
        mask-composite:exclude;pointer-events:none;
    }
    
    /* Video */
    .impulse-video iframe,.impulse-video video{max-width:100%}
    
    /* Divider */
    .impulse-divider hr{border:none;margin:0}
            @keyframes impulseDivAurora{0%{background-position:0% 50%}100%{background-position:-200% 50%}}
                
    /* Spacer */
    
    /* Icon */
    .impulse-icon{display:flex;align-items:center;justify-content:center}
    .impulse-icon-wrap{display:inline-flex;align-items:center;justify-content:center}
    
    /* Container element */
    
    /* Entrance Animations */
    .impulse-animated{opacity:0;animation-fill-mode:forwards}
    /* PHP renders animation-play-state:paused inline on each .impulse-animated
       element; without !important the CSS rule can't override the inline value
       and the animation never runs (heading stays at opacity:0 indefinitely). */
    .impulse-animated.impulse-visible{animation-play-state:running !important}
    
    /* Icon hover animations */
    .impulse-icon-hover-grow:hover{transform:scale(1.15)!important}
    .impulse-icon-hover-shrink:hover{transform:scale(0.85)!important}
    .impulse-icon-hover-pulse:hover{animation:impulse-pulse 0.6s ease-in-out infinite}
    .impulse-icon-hover-rotate:hover{transform:rotate(15deg)!important}
    
    @keyframes impulse-fade-in{from{opacity:0}to{opacity:1}}
    @keyframes impulse-emerge{from{opacity:0;transform:scale(var(--ea-scale,0.9));filter:blur(var(--ea-blur,4px))}to{opacity:1;transform:scale(1);filter:blur(0)}}
    @keyframes impulse-surface{from{opacity:0;transform:perspective(800px) translateZ(var(--ea-depth,-60px))}to{opacity:1;transform:perspective(800px) translateZ(0)}}
    /* Unveil keyframes: the inactive edge of each direction uses a negative
     * inset so the final state never clips a glyph's natural overflow
     * (descenders on "g/y/p/q" for unveil-up; ascenders + diacritics for
     * unveil-down; italic side-bearing for unveil-left/right). Without this,
     * inset(0 0 0 0) clipped to the heading's exact bounding box and lopped
     * off the bottom of letters like "g" in headings using line-height:1.1. */
    @keyframes impulse-unveil-up{from{opacity:1;clip-path:inset(100% 0 -30% 0)}to{opacity:1;clip-path:inset(0 0 -30% 0)}}
    @keyframes impulse-unveil-down{from{opacity:1;clip-path:inset(-30% 0 100% 0)}to{opacity:1;clip-path:inset(-30% 0 0 0)}}
    @keyframes impulse-unveil-left{from{opacity:1;clip-path:inset(-30% 100% -30% -10%)}to{opacity:1;clip-path:inset(-30% -10% -30% 0)}}
    @keyframes impulse-unveil-right{from{opacity:1;clip-path:inset(-30% -10% -30% 100%)}to{opacity:1;clip-path:inset(-30% 0 -30% -10%)}}
    @keyframes impulse-resolve{from{opacity:1;filter:blur(var(--ea-blur,12px))}to{opacity:1;filter:blur(0)}}
    @keyframes impulse-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

    /* Responsive */
    @media (max-width: 768px) {
        .impulse-row{flex-direction:column}
        .impulse-col{width:100%!important}
        /* Forms: half-width fields collapse to full */
        .impulse-contact-form{flex-direction:column!important}
        .impulse-contact-form > div{width:100%!important}
        .impulse-register-form > div[style*="display:flex"]{flex-direction:column!important}
        /* Login/Register: force full width on narrow screens */
        .impulse-login-wrapper,.impulse-register-form{min-width:0!important}
        /* Flip box: reduce height on mobile */
        .impulse-flip-box{max-height:80vh}
        /* Icon box horizontal: stack on mobile */
        .impulse-icon[style*="flex-direction:row"]{flex-direction:column!important;text-align:center!important}
        /* Pricing cards: single column below 768 */
        .impulse-pricing-grid{grid-template-columns:1fr!important}
        /* Accordion: full width */
        .impulse-unfold{width:100%!important}
        /* Slider mobile stack: slides shown vertically, no carousel */
        .impulse-carousel-slides{touch-action:pan-y}
    .impulse-new-slider[data-mobile-stack="1"] .impulse-carousel-track{height:auto!important;min-height:auto!important;overflow:visible!important}
        .impulse-new-slider[data-mobile-stack="1"] .impulse-carousel-slides{display:flex!important;flex-direction:column!important;height:auto!important;min-height:auto!important;transform:none!important;transition:none!important}
        .impulse-new-slider[data-mobile-stack="1"] .impulse-carousel-slide{position:relative!important;width:100%!important;flex-shrink:0!important;opacity:1!important;transform:none!important}
        .impulse-new-slider[data-mobile-stack="1"] .impulse-carousel-nav,.impulse-new-slider[data-mobile-stack="1"] .impulse-carousel-dots,.impulse-new-slider[data-mobile-stack="1"] .impulse-slide-nav{display:none!important}
    }
    
    /* Device Visibility */
    @media (min-width: 1025px) {
        .impulse-hide-desktop{display:none!important}
    }
    @media (min-width: 768px) and (max-width: 1024px) {
        .impulse-hide-tablet{display:none!important}
    }
    @media (max-width: 767px) {
        .impulse-hide-mobile{display:none!important}
    }
    @media (max-width: 480px) {
        /* Very narrow: forms go full width */
        .impulse-login-wrapper,.impulse-register-form > *{width:100%!important}
        /* Icon list: rearrange ABC → A / BC */
        .impulse-icon-list-headers{display:none!important}
        .impulse-icon-list li,.impulse-icon-list li > a{flex-wrap:wrap!important}
        /* Force text span to fill first line (icon + text), pushing col2+col3 to wrap */
        .impulse-icon-list li > span:nth-child(2),.impulse-icon-list li > a > span:nth-child(2){flex:1 0 calc(100% - 40px)!important}
        /* Col2+Col3 wrap to second line, sit side by side */
        .impulse-il-col2,.impulse-il-col3{flex:1 1 auto!important;text-align:left!important;font-size:0.9em!important;opacity:0.75}
        /* Price list: smaller text */
        .impulse-price-list{font-size:14px}
    }
    
    /* Icon Box */
    .impulse-icon{overflow:visible}
    .impulse-icon-wrap{transition:transform 0.7s ease-in-out,filter 0.7s ease-in-out}
    @keyframes impulse-icon-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
    .impulse-effect-pulse .impulse-icon-wrap{animation:impulse-icon-pulse 2s ease-in-out infinite}
    @keyframes impulse-icon-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
    .impulse-effect-float .impulse-icon-wrap{animation:impulse-icon-float 3s ease-in-out infinite}
    @keyframes impulse-icon-wobble{0%{transform:rotate(0)}15%{transform:rotate(6deg)}30%{transform:rotate(-5deg)}45%{transform:rotate(4deg)}60%{transform:rotate(-2deg)}75%{transform:rotate(1deg)}100%{transform:rotate(0)}}
    .impulse-effect-wobble .impulse-icon-wrap{animation:impulse-icon-wobble 2s ease-in-out infinite}
    .impulse-icon-image{width:var(--impulse-size,48px);height:auto;object-fit:contain;display:block}

    /* Icon hover effects — parallax + lift. Previously these rules were
       emitted PER-ELEMENT via wp_add_inline_style with #impulse-icon-N-card
       selectors (so a page with 12 icon cards shipped 12 duplicated copies
       of the same ~14 lines). Now consolidated as ONE class+data-attr
       ruleset — same behaviour, ~1/12 the CSS payload on icon-heavy pages.
       The icon renderer emits `data-hover-effect="$value"` on the card div. */
    .impulse-icon[data-hover-effect="parallax"]{perspective:900px;transform-style:preserve-3d}
    .impulse-icon[data-hover-effect="parallax"] .impulse-icon-wrap,
    .impulse-icon[data-hover-effect="parallax"] .impulse-icon-title,
    .impulse-icon[data-hover-effect="parallax"] .impulse-icon-text{transform-style:preserve-3d;will-change:transform;transition:transform 0.35s cubic-bezier(0.4, 0, 0.2, 1)}
    /* Two triggers — :hover (desktop pointer) and .impulse-icon-on (mobile,
       added by impulse-feature-card-parallax.js when card scrolls into view).
       Six SVG shapes covered: path, line, circle, rect, polyline, polygon. */
    .impulse-icon[data-hover-effect="parallax"]:hover .impulse-icon-wrap svg path,
    .impulse-icon[data-hover-effect="parallax"]:hover .impulse-icon-wrap svg line,
    .impulse-icon[data-hover-effect="parallax"]:hover .impulse-icon-wrap svg circle,
    .impulse-icon[data-hover-effect="parallax"]:hover .impulse-icon-wrap svg rect,
    .impulse-icon[data-hover-effect="parallax"]:hover .impulse-icon-wrap svg polyline,
    .impulse-icon[data-hover-effect="parallax"]:hover .impulse-icon-wrap svg polygon,
    .impulse-icon[data-hover-effect="parallax"].impulse-icon-on .impulse-icon-wrap svg path,
    .impulse-icon[data-hover-effect="parallax"].impulse-icon-on .impulse-icon-wrap svg line,
    .impulse-icon[data-hover-effect="parallax"].impulse-icon-on .impulse-icon-wrap svg circle,
    .impulse-icon[data-hover-effect="parallax"].impulse-icon-on .impulse-icon-wrap svg rect,
    .impulse-icon[data-hover-effect="parallax"].impulse-icon-on .impulse-icon-wrap svg polyline,
    .impulse-icon[data-hover-effect="parallax"].impulse-icon-on .impulse-icon-wrap svg polygon{animation:impulseIconStroke 0.9s cubic-bezier(0.4, 0, 0.2, 1) both}

    .impulse-icon[data-hover-effect="lift"]{transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),box-shadow 0.3s ease-in-out}
    .impulse-icon[data-hover-effect="lift"]:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,0.10)}

    /* SVG-URL icon paths — currentColor inheritance. Was emitted per-element
       inline via wp_add_inline_style; now matches any SVG inside an icon-wrap
       that was rendered with `data-svg="1"` (set by the renderer when the
       source was a URL/path rather than a Lucide name). */
    .impulse-icon-wrap[data-svg="1"] svg{fill:currentColor}

    .impulse-social-hover-shine a{position:relative;overflow:hidden}
    .impulse-social-hover-shine a::before{content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);transform:skewX(-25deg);transition:max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none;z-index:2}
    .impulse-social-hover-shine a:hover::before{animation:impulse-img-shine 1s ease-in-out forwards}
    .impulse-social-hover-spin a{transition:transform 0.7s}.impulse-social-hover-spin a:hover{transform:rotate(360deg)}
    .impulse-social-hover-grow a{transition:transform 0.3s}.impulse-social-hover-grow a:hover{transform:scale(1.2)}
    /* Icon-list hover effects — 3D motion only. Parallax and Tilt are JS-driven (impulse-icon-list-hover.js). */
    .impulse-icon-list-hover{perspective:900px}
    .impulse-icon-list-hover li{transition:transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);transform-style:preserve-3d;will-change:transform}
    .impulse-icon-list-hover li > span:first-child,
    .impulse-icon-list-hover li > a > span:first-child{transition:transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);transform-style:preserve-3d}
    /* Pop — whole row pushes forward on hover with a soft shadow */
    .impulse-hh-pop li:hover{transform:translate3d(0,0,24px);box-shadow:0 10px 28px rgba(0,0,0,0.14)}
    /* Burst — icon punches forward with a soft energy ring expanding behind it */
    .impulse-hh-burst li > span:first-child,
    .impulse-hh-burst li > a > span:first-child{position:relative;transition:transform 0.28s cubic-bezier(0.34,1.56,0.64,1)}
    .impulse-hh-burst li:hover > span:first-child,
    .impulse-hh-burst li:hover > a > span:first-child{transform:translate3d(0,0,30px) scale(1.18)}
    .impulse-hh-burst li > span:first-child::before,
    .impulse-hh-burst li > a > span:first-child::before{content:'';position:absolute;inset:-10%;border-radius:50%;background:radial-gradient(circle,currentColor 0%,currentColor 30%,transparent 70%);opacity:0;transform:scale(0.2);pointer-events:none;z-index:-1}
    .impulse-hh-burst li:hover > span:first-child::before,
    .impulse-hh-burst li:hover > a > span:first-child::before{animation:impulseIconBurst 0.7s cubic-bezier(0.4, 0, 0.2, 1) both}
    @keyframes impulseIconBurst{0%{opacity:0.45;transform:scale(0.2)}60%{opacity:0.12;transform:scale(2.0)}100%{opacity:0;transform:scale(2.5)}}
    /* Shared keyframe for Feature Card stroke-draw (dasharray + --sl set per-path by impulse-feature-card-parallax.js) */
    @keyframes impulseIconStroke{0%{stroke-dashoffset:var(--sl,200)}100%{stroke-dashoffset:0}}
    .impulse-icon-list-stagger li{opacity:0;transform:translateY(12px)}
    .impulse-icon-list-stagger.impulse-in-view li{animation:impulse-stagger-in 0.5s ease-in-out forwards}
    @keyframes impulse-stagger-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
    
    /* Product grid inside slider - natural height, centered */
    .impulse-grid-in-slider{width:100%}
    
    /* Section inside slider - fill available height */
    .impulse-slide-content-wrapper > .impulse-section.impulse-fill-slide{flex:1;height:100%;display:flex;flex-direction:column}
    .impulse-slide-content-wrapper .impulse-section.impulse-fill-slide > .impulse-container{flex:1;display:flex;flex-direction:column}
    
    /* FRONTEND: Hide editor elements, reset all hover borders/outlines from themes and WP core */
    /* Scoped to .impulse-frontend-page body class so this stylesheet is safe to load in the
       editor iframe too — the editor iframe does not have that body class, so toolbars stay visible. */
    .impulse-frontend-page .impulse-el-toolbar,.impulse-frontend-page .impulse-dropzone,.impulse-frontend-page .impulse-cell-empty-indicator,.impulse-frontend-page .impulse-empty-placeholder,.impulse-frontend-page .impulse-element-label,.impulse-frontend-page .impulse-add-element,.impulse-frontend-page .impulse-add-section,.impulse-frontend-page .impulse-empty-section{display:none!important}
    .impulse-frontend-page section:hover,
    .impulse-frontend-page section:focus,
    .impulse-frontend-page div:not(input):not(select):not(textarea):not(button):hover,
    .impulse-frontend-page div:not(input):not(select):not(textarea):not(button):focus{outline:none!important;-webkit-tap-highlight-color:transparent}
    .impulse-frontend-page *:focus-visible:not(input):not(select):not(textarea):not(button):not(a){outline:none!important}
    .impulse-frontend-page .impulse-el,.impulse-frontend-page .impulse-el *{outline:none!important;-webkit-tap-highlight-color:transparent}
    .impulse-el{width:100%;box-sizing:border-box;align-self:stretch}
    .impulse-el[data-type="grid"] .impulse-grid-wrapper,.impulse-el[data-type="grid"] .impulse-grid{margin-left:auto!important;margin-right:auto!important}
    .impulse-el[data-type="cell_grid"] > *,.impulse-el[data-type="freeform"] > *{margin-left:auto!important;margin-right:auto!important}
    @media(min-width:769px){.impulse-el[data-type="checkout"],.impulse-el[data-type="contact"],.impulse-el[data-type="login"],.impulse-el[data-type="register"],.impulse-el[data-type="free_shipping"],.impulse-el[data-type="icon_list"]{max-width:50%;margin-left:auto;margin-right:auto}}.impulse-el[data-type="checkout"],.impulse-el[data-type="contact"],.impulse-el[data-type="login"],.impulse-el[data-type="register"]{margin-left:auto!important;margin-right:auto!important}
    .impulse-el[data-type="cart"]{max-width:800px;margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box}.impulse-el[data-type="map"],.impulse-el[data-type="booking_block"],.impulse-el[data-type="unfold"],.impulse-el[data-type="off_canvas"]{max-width:var(--impulse-content-max-width,1440px);margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box}
    .impulse-el[data-type="video"]{margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box}
    .impulse-product-bundle{display:block!important;width:100%!important;box-sizing:border-box!important}
    .impulse-frontend-page .impulse-el::before,.impulse-frontend-page .impulse-el::after{display:none!important}
    .impulse-frontend-page .impulse-el:hover,.impulse-frontend-page .impulse-el:focus,.impulse-frontend-page .impulse-el:focus-within,.impulse-frontend-page .impulse-el:focus-visible{outline:none!important;box-shadow:none!important}
    .impulse-frontend-page [contenteditable]{outline:none!important;cursor:default!important;-webkit-user-modify:read-only!important}
    .impulse-frontend-page .impulse-cell-grid-cell,.impulse-frontend-page .impulse-grid-cell,.impulse-frontend-page .impulse-layout-cell{outline:none!important;cursor:default!important}
    .impulse-layout-grid{display:grid}
    .impulse-layout-col{display:flex;flex-direction:column}
    .impulse-layout-cell{position:relative;flex:1;display:flex;flex-direction:column}
    @media(max-width:767px){.impulse-layout-grid{grid-template-columns:1fr!important}.impulse-layout-col{min-height:0}}
    @media(min-width:1025px){.impulse-hide-desktop{display:none!important}}
    @media(min-width:768px) and (max-width:1024px){.impulse-hide-tablet{display:none!important}}
    @media(max-width:767px){.impulse-hide-mobile{display:none!important}}
    /* Cell content must be constrained to cell height */
    .impulse-cell-content{min-height:0!important}
    /* Images inside cell grid should respect row height */
    .impulse-cell-content > img,.impulse-cell-content > a{flex:1;min-height:0;max-height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
    .impulse-cell-content > img,.impulse-cell-content > a > img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;margin:0 auto}


/* ── Moved from inline <head> style block ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #1d2327; }
        /* Aggressive theme layout overrides — Impulse owns the entire viewport */
        body.impulse-frontend-page { background: #fff; width: 100%; max-width: none !important; overflow-x: hidden; }
        /* Screen mode: lock viewport, hide scrollbars, no horizontal overflow */
        body.impulse-screen-mode-active {
            overflow: hidden !important;
            max-width: 100vw !important;
            overscroll-behavior: none;
        }
        body.impulse-screen-mode-active .impulse-screen {
            overflow-x: hidden !important;
            max-width: 100vw !important;
            box-sizing: border-box;
        }
        body.impulse-screen-mode-active .impulse-screen::-webkit-scrollbar { display: none; }
        /* Pre-size screens before JS: prevents height flash on load/reload.
           `contain:paint` enforces the screen clips all its descendants to its
           own box — regardless of preserve-3d children inside (e.g. Tiers/arc
           pricing cards that use translateZ on the CTA button wrapper). Without
           this, Z-translated buttons can briefly project beyond the outgoing
           screen's bounds during transitions and flash onto the next screen. */
        .impulse-screen-wrapper > .impulse-screen { height:100dvh; min-height:100dvh; max-height:100dvh; overflow:hidden; contain:paint; }
        body.impulse-screen-mode-active .impulse-content-wrapper {
            box-sizing: border-box;
            max-width: 100vw;
            overflow-x: hidden;
        }
        body.impulse-frontend-page #page,
        body.impulse-frontend-page #content,
        body.impulse-frontend-page .site,
        body.impulse-frontend-page .site-content,
        body.impulse-frontend-page .content-area,
        body.impulse-frontend-page .entry-content,
        body.impulse-frontend-page .main-content,
        body.impulse-frontend-page main,
        body.impulse-frontend-page .container,
        body.impulse-frontend-page .wrapper { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; display: block !important; }
        body.impulse-frontend-page .sidebar,
        body.impulse-frontend-page .widget-area,
        body.impulse-frontend-page #secondary,
        body.impulse-frontend-page aside.sidebar { display: none !important; }
        /* Hide any theme-injected header/footer content */
        body > header:not(.impulse-global-header),
        body > .site-header,
        body > .header,
        body > #header,
        body > footer:not(.impulse-global-footer),
        body > .site-footer,
        body > #footer,
        body > .footer,
        body > #page > header,
        body > #page > footer,
        .site-title:not(.impulse-site-title),
        .site-description:not(.impulse-description) { display: none !important; }
        a { color: inherit; }
        img { max-width: 100%; height: auto; }
        .impulse-page-wrapper { display: flex; flex-direction: column; min-height: calc(100vh - var(--impulse-screen-bottom-inset, 0px)); width: 100%; overflow-x: hidden; animation: impulse-fade-in 0.4s ease-in-out both; }
        @keyframes impulse-fade-in { from { opacity: 0; } to { opacity: 1; } }
        .impulse-page { flex: 1; width: 100%; }
        /* Badge button rules deleted 2.1.646 — badge mode retired. */
        /* Map pulse */
        /* Map circle hover — expand to rectangle */
        .impulse-map-circle{transition:border-radius 0.5s cubic-bezier(0.4,0,0.2,1)}
        .impulse-map-circle:hover{border-radius:0!important}
        /* Map shine on hover */
        .impulse-map-shine::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);transition:max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}
        .impulse-google-map:hover .impulse-map-shine::before{left:150%;transition:left 0.8s ease-in-out}
        /* Map scroll reveal */
        .impulse-map-reveal{opacity:0;transform:scale(0.85);transition:opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)}
        .impulse-map-reveal.revealed{opacity:1;transform:scale(1)}
        /* Icon list linked items */
        a.impulse-il-item{transition:opacity 0.15s}
        a.impulse-il-item:hover{opacity:0.7}