/* =============================================================================
   Store MM — Single Product  (v2 — full specificity, Woodmart-safe)
   All layout-critical rules are scoped under .smm-wrap and use !important
   where Woodmart's global resets would otherwise win.
   ============================================================================= */

/* ── Custom properties (no specificity issues here) ───────────────────────── */
.smm-wrap {
    --smm-accent:    #E84040;
    --smm-dark:      #111827;
    --smm-body:      #374151;
    --smm-muted:     #6B7280;
    --smm-border:    #E5E7EB;
    --smm-bg:        #F9FAFB;
    --smm-white:     #FFFFFF;
    --smm-radius-sm: 6px;
    --smm-radius-md: 10px;
    --smm-radius-lg: 14px;
}

/* ── Box-sizing reset scoped to our widget only ───────────────────────────── */
.smm-wrap,
.smm-wrap *,
.smm-wrap *::before,
.smm-wrap *::after {
    box-sizing: border-box !important;
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.smm-wrap {
    max-width: 1340px !important;
    margin: 0 auto !important;
    padding: 36px 20px 64px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--smm-body) !important;
    background: #fff !important;
}

/* ── Error box ────────────────────────────────────────────────────────────── */
.smm-wrap .smm-error {
    border: 1px solid var(--smm-border);
    border-radius: var(--smm-radius-md);
    padding: 32px;
    text-align: center;
    background: var(--smm-bg);
}

/* =============================================================================
   BREADCRUMB
   ============================================================================= */
.smm-wrap .smm-breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    color: var(--smm-muted) !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    list-style: none !important;
    background: none !important;
    border: none !important;
}
.smm-wrap .smm-breadcrumb a {
    color: var(--smm-muted) !important;
    text-decoration: none !important;
}
.smm-wrap .smm-breadcrumb a:hover {
    color: var(--smm-accent) !important;
}

/* =============================================================================
   TWO-COLUMN GRID  — !important to override Woodmart "display:block" on divs
   ============================================================================= */
.smm-wrap .smm-grid {
    display: grid !important;
    grid-template-columns: 56fr 44fr !important;
    gap: 52px !important;
    align-items: start !important;
    width: 100% !important;
}

/* =============================================================================
   GALLERY COLUMN
   ============================================================================= */
.smm-wrap .smm-gallery-col {
    position: sticky !important;
    top: 96px !important;
    display: block !important;
    width: 100% !important;
}

/* Video embed */
.smm-wrap .smm-video-block { margin-top: 18px; }
.smm-wrap .smm-video-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #c0392b;
    margin: 0 0 10px;
}
.smm-wrap .smm-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    border: 1px solid #e8e8e8;
}
.smm-wrap .smm-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Main viewer */
.smm-wrap .smm-main-viewer {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    background: var(--smm-bg) !important;
    border: 1px solid var(--smm-border) !important;
    border-radius: var(--smm-radius-lg) !important;
    overflow: hidden !important;
    display: block !important;
}

/* Slides */
.smm-wrap .smm-slide {
    display: none !important;
    position: absolute !important;
    inset: 0 !important;
    align-items: center !important;
    justify-content: center !important;
}
.smm-wrap .smm-slide.is-active {
    display: flex !important;
}
.smm-wrap .smm-slide-img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    padding: 16px !important;
    cursor: zoom-in !important;
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Nav arrows */
.smm-wrap .smm-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.14) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: var(--smm-dark) !important;
    z-index: 10 !important;
    padding: 0 !important;
    transition: background .15s ease !important;
}
.smm-wrap .smm-nav:hover {
    background: #fff !important;
    transform: translateY(-50%) scale(1.08) !important;
}
.smm-wrap .smm-nav-prev { left: 12px !important; right: auto !important; }
.smm-wrap .smm-nav-next { right: 12px !important; left: auto !important; }
.smm-wrap .smm-nav svg  { display: block !important; flex-shrink: 0 !important; }

/* Counter badge */
.smm-wrap .smm-counter {
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    background: rgba(0,0,0,.45) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    pointer-events: none !important;
    line-height: 1.5 !important;
}

/* Thumbnails wrapper */
.smm-wrap .smm-thumbs-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 12px 0 0 !important;
    width: 100% !important;
}
.smm-wrap .smm-thumbs {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    flex: 1 !important;
    padding-bottom: 2px !important;
    list-style: none !important;
    margin: 0 !important;
}
.smm-wrap .smm-thumbs::-webkit-scrollbar { display: none !important; }

.smm-wrap .smm-thumb {
    flex: 0 0 72px !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    border-radius: var(--smm-radius-sm) !important;
    border: 2px solid var(--smm-border) !important;
    overflow: hidden !important;
    background: var(--smm-bg) !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: border-color .15s ease !important;
}
.smm-wrap .smm-thumb:hover,
.smm-wrap .smm-thumb.is-active {
    border-color: var(--smm-accent) !important;
    box-shadow: 0 0 0 2px rgba(232,64,64,.18) !important;
}
.smm-wrap .smm-thumb-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 4px !important;
    display: block !important;
    border: none !important;
    box-shadow: none !important;
}

/* Thumb scroll buttons */
.smm-wrap .smm-thumbs-btn {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--smm-border) !important;
    background: var(--smm-white) !important;
    color: var(--smm-body) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
}
.smm-wrap .smm-thumbs-btn:hover {
    background: var(--smm-bg) !important;
    border-color: var(--smm-dark) !important;
}

/* No-image placeholder */
.smm-wrap .smm-no-image {
    aspect-ratio: 1/1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    background: var(--smm-bg) !important;
    border: 2px dashed var(--smm-border) !important;
    border-radius: var(--smm-radius-lg) !important;
    color: var(--smm-muted) !important;
}

/* =============================================================================
   INFO COLUMN
   ============================================================================= */
.smm-wrap .smm-info-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    min-width: 0 !important;
}

/* Designer card */
.smm-wrap .smm-designer-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    background: var(--smm-bg) !important;
    border: 1px solid var(--smm-border) !important;
    border-radius: var(--smm-radius-md) !important;
    margin: 0 !important;
}
.smm-wrap .smm-designer-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--smm-border) !important;
    flex-shrink: 0 !important;
    display: block !important;
}
.smm-wrap .smm-designer-meta {
    flex: 1 !important;
    min-width: 0 !important;
}
.smm-wrap .smm-designer-name {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--smm-dark) !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
}
.smm-wrap .smm-verified {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    color: #fff !important;
    flex-shrink: 0 !important;
}
.smm-wrap .smm-designer-counts {
    font-size: 12px !important;
    color: var(--smm-muted) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 3px !important;
}
.smm-wrap .smm-dot { opacity: .4 !important; }
.smm-wrap .smm-designer-link {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--smm-accent) !important;
    text-decoration: none !important;
    border: 1px solid var(--smm-accent) !important;
    padding: 5px 12px !important;
    border-radius: var(--smm-radius-sm) !important;
    white-space: nowrap !important;
    background: transparent !important;
    transition: background .15s ease, color .15s ease !important;
    display: inline-block !important;
}
.smm-wrap .smm-designer-link:hover {
    background: var(--smm-accent) !important;
    color: #fff !important;
}

/* Title */
.smm-wrap .smm-title {
    font-size: clamp(20px, 2.6vw, 28px) !important;
    font-weight: 800 !important;
    color: var(--smm-dark) !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Meta badges */
.smm-wrap .smm-meta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.smm-wrap .smm-meta-badge {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    background: var(--smm-bg) !important;
    border: 1px solid var(--smm-border) !important;
    color: var(--smm-muted) !important;
    letter-spacing: .3px !important;
}

/* Price */
.smm-wrap .smm-price-block {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    padding: 16px 0 4px !important;
    border-top: 1px solid var(--smm-border) !important;
    margin: 0 !important;
}
.smm-wrap .smm-price {
    font-size: clamp(28px, 3.2vw, 38px) !important;
    font-weight: 900 !important;
    color: var(--smm-accent) !important;
    letter-spacing: -.5px !important;
    line-height: 1 !important;
}
.smm-wrap .smm-currency {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--smm-accent) !important;
}
.smm-wrap .smm-price-note {
    font-size: 12px !important;
    color: var(--smm-muted) !important;
    margin-left: 4px !important;
}

/* =============================================================================
   ADD TO CART SECTION
   ============================================================================= */
.smm-wrap .smm-atc-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* Quantity label */
.smm-wrap .smm-qty-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
}
.smm-wrap .smm-qty-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    color: var(--smm-muted) !important;
    display: block !important;
    margin: 0 !important;
}

/* Quantity controls row */
.smm-wrap .smm-qty-controls {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    border: 1px solid var(--smm-border) !important;
    border-radius: var(--smm-radius-sm) !important;
    overflow: hidden !important;
    width: auto !important;
    height: 44px !important;
    background: var(--smm-white) !important;
}

/* Qty minus/plus buttons */
.smm-wrap .smm-qty-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--smm-bg) !important;
    color: var(--smm-dark) !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .15s ease !important;
    box-shadow: none !important;
    outline: none !important;
}
.smm-wrap .smm-qty-btn:hover:not(:disabled) {
    background: #e9eaec !important;
}
.smm-wrap .smm-qty-btn:disabled {
    opacity: .3 !important;
    cursor: not-allowed !important;
}

/* Qty number input — Woodmart sets width:100%, height auto, font-size etc. */
.smm-wrap .smm-qty-input,
.smm-wrap input.smm-qty-input,
.smm-wrap input[type="number"].smm-qty-input {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 44px !important;
    flex: 0 0 56px !important;
    border: none !important;
    border-left: 1px solid var(--smm-border) !important;
    border-right: 1px solid var(--smm-border) !important;
    border-radius: 0 !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--smm-dark) !important;
    background: var(--smm-white) !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    display: block !important;
    line-height: 44px !important;
}
.smm-wrap .smm-qty-input::-webkit-inner-spin-button,
.smm-wrap .smm-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
.smm-wrap .smm-qty-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* BUY BUTTON — no "button" or "alt" WC classes, just .smm-buy-btn */
.smm-wrap .smm-buy-btn,
.smm-wrap button.smm-buy-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 54px !important;
    height: auto !important;
    padding: 0 28px !important;
    background: var(--smm-dark) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--smm-radius-md) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
    cursor: pointer !important;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: none !important;
    outline: none !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    font-family: inherit !important;
}
.smm-wrap .smm-buy-btn:hover:not(:disabled) {
    background: #1F2937 !important;
    box-shadow: 0 6px 20px rgba(17,24,39,.28) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}
.smm-wrap .smm-buy-btn:active:not(:disabled) {
    transform: translateY(0) !important;
}
.smm-wrap .smm-buy-btn:disabled,
.smm-wrap .smm-buy-btn.smm-loading {
    background: var(--smm-muted) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}
.smm-wrap .smm-buy-btn .smm-cart-icon {
    flex-shrink: 0 !important;
    display: block !important;
}

/* Spinner */
.smm-wrap .smm-buy-btn.smm-loading::after {
    content: '' !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(255,255,255,.3) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    animation: smm-spin .7s linear infinite !important;
}
@keyframes smm-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* Stock text */
.smm-wrap .smm-stock {
    font-size: 13px !important;
    color: var(--smm-muted) !important;
    margin: 0 !important;
    padding: 0 !important;
}
.smm-wrap .smm-stock-ok { color: #10B981 !important; }
.smm-wrap .smm-out-of-stock {
    padding: 14px 20px !important;
    background: #FEF2F2 !important;
    border: 1px solid #FECACA !important;
    border-radius: var(--smm-radius-sm) !important;
    color: #DC2626 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-align: center !important;
}

/* =============================================================================
   CONTENT SECTIONS
   ============================================================================= */
.smm-wrap .smm-section {
    border-top: 1px solid var(--smm-border) !important;
    padding-top: 18px !important;
    margin: 0 !important;
}
.smm-wrap .smm-section-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .7px !important;
    color: var(--smm-dark) !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
}
.smm-wrap .smm-section-body {
    font-size: 14px !important;
    color: var(--smm-body) !important;
}
.smm-wrap .smm-section-body p  { margin: 0 0 8px !important; }
.smm-wrap .smm-section-body ul { padding-left: 18px !important; margin: 0 !important; }
.smm-wrap .smm-section-body li { margin-bottom: 4px !important; }

/* Delivery notice */
.smm-wrap .smm-delivery-notice {
    display: flex !important;
    gap: 14px !important;
    padding: 16px !important;
    background: var(--smm-bg) !important;
    border: 1px solid var(--smm-border) !important;
    border-radius: var(--smm-radius-md) !important;
    font-size: 13px !important;
    margin: 0 !important;
}
.smm-wrap .smm-notice-icon {
    font-size: 22px !important;
    flex-shrink: 0 !important;
    line-height: 1.4 !important;
}
.smm-wrap .smm-delivery-notice strong {
    display: block !important;
    font-size: 14px !important;
    color: var(--smm-dark) !important;
    margin-bottom: 6px !important;
}
.smm-wrap .smm-delivery-notice ul {
    margin: 0 !important;
    padding-left: 16px !important;
    color: var(--smm-muted) !important;
    list-style: disc !important;
}
.smm-wrap .smm-delivery-notice li { margin-bottom: 3px !important; }

/* Share */
.smm-wrap .smm-share {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding-top: 4px !important;
}
.smm-wrap .smm-share-label {
    font-size: 13px !important;
    color: var(--smm-muted) !important;
    font-weight: 600 !important;
}
.smm-wrap .smm-share-btn,
.smm-wrap button.smm-share-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--smm-border) !important;
    background: var(--smm-white) !important;
    color: var(--smm-body) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: border-color .15s ease, background .15s ease !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.smm-wrap .smm-share-btn:hover {
    border-color: var(--smm-dark) !important;
    color: var(--smm-dark) !important;
}

/* =============================================================================
   RATINGS & REVIEWS
   ============================================================================= */
.smm-wrap .smm-ratings-section { }

.smm-wrap .smm-rating-avg-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}
.smm-wrap .smm-rating-avg-num {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: var(--smm-dark) !important;
    line-height: 1 !important;
}
.smm-wrap .smm-stars-display {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}
.smm-wrap .smm-rating-count {
    font-size: 13px !important;
    color: var(--smm-muted) !important;
}
.smm-wrap .smm-rating-none {
    font-size: 13px !important;
    color: var(--smm-muted) !important;
    margin: 0 !important;
}
.smm-wrap .smm-rating-form-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    color: var(--smm-muted) !important;
    margin: 0 0 6px !important;
}
.smm-wrap .smm-stars-input {
    display: flex !important;
    gap: 4px !important;
    margin-bottom: 10px !important;
}
.smm-wrap .smm-star-btn,
.smm-wrap button.smm-star-btn {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    transition: transform .1s ease !important;
    box-shadow: none !important;
    outline: none !important;
}
.smm-wrap .smm-star-btn:hover { transform: scale(1.15) !important; }
.smm-wrap .smm-rating-textarea {
    width: 100% !important;
    border: 1px solid var(--smm-border) !important;
    border-radius: var(--smm-radius-sm) !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: var(--smm-body) !important;
    resize: vertical !important;
    margin-bottom: 10px !important;
    display: block !important;
    box-sizing: border-box !important;
    outline: none !important;
    background: var(--smm-bg) !important;
}
.smm-wrap .smm-rating-textarea:focus {
    border-color: #F59E0B !important;
    background: var(--smm-white) !important;
}
.smm-wrap .smm-rating-submit-btn,
.smm-wrap button.smm-rating-submit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    padding: 0 20px !important;
    background: #F59E0B !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--smm-radius-sm) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background .15s ease !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: inherit !important;
}
.smm-wrap .smm-rating-submit-btn:hover:not(:disabled) { background: #d97706 !important; }
.smm-wrap .smm-rating-submit-btn:disabled { opacity: .4 !important; cursor: not-allowed !important; }
.smm-wrap .smm-rating-msg {
    font-size: 13px !important;
    margin-top: 8px !important;
    padding: 0 !important;
}
.smm-wrap .smm-rating-gate {
    font-size: 13px !important;
    color: var(--smm-muted) !important;
    margin: 0 !important;
}
.smm-wrap .smm-rating-gate a {
    color: var(--smm-accent) !important;
    text-decoration: none !important;
}

/* =============================================================================
   LIKE + SHARE ROW
   ============================================================================= */
.smm-wrap .smm-like-share-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

/* Like button */
.smm-wrap .smm-like-btn,
.smm-wrap button.smm-like-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border: 1px solid var(--smm-border) !important;
    border-radius: 20px !important;
    background: var(--smm-white) !important;
    color: var(--smm-muted) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: border-color .15s ease, color .15s ease, transform .12s ease !important;
    position: relative !important;
    box-shadow: none !important;
    outline: none !important;
}
.smm-wrap .smm-like-btn:hover {
    border-color: #E84040 !important;
    color: #E84040 !important;
}
.smm-wrap .smm-like-btn.is-liked {
    border-color: #E84040 !important;
    color: #E84040 !important;
    background: #fff5f5 !important;
}
.smm-wrap .smm-like-btn:active { transform: scale(.92) !important; }
.smm-wrap .smm-like-heart { flex-shrink: 0 !important; display: block !important; }

/* Tooltip for not-logged-in */
.smm-wrap .smm-like-tooltip {
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important;
    background: rgba(0,0,0,.76) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

/* =============================================================================
   LIGHTBOX
   ============================================================================= */
.smm-lightbox {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.smm-lb-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,.84) !important;
    cursor: pointer !important;
}
.smm-lb-inner {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 92vw !important;
    max-height: 90vh !important;
}
.smm-lb-inner img {
    max-width: 90vw !important;
    max-height: 88vh !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.5) !important;
    display: block !important;
}
.smm-lb-close {
    position: absolute !important;
    top: -18px !important;
    right: -18px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.96) !important;
    border: none !important;
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--smm-dark) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
    padding: 0 !important;
}

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

/* Tablet landscape */
@media (max-width: 1100px) {
    .smm-wrap .smm-grid { gap: 36px !important; }
}

/* Tablet portrait → single column */
@media (max-width: 900px) {
    .smm-wrap .smm-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .smm-wrap .smm-gallery-col {
        position: static !important;
    }
    .smm-wrap .smm-main-viewer {
        max-width: 520px !important;
        margin: 0 auto !important;
    }
    .smm-wrap .smm-thumbs-wrap {
        max-width: 520px !important;
        margin: 12px auto 0 !important;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .smm-wrap { padding: 18px 12px 48px !important; }
    .smm-wrap .smm-title  { font-size: 20px !important; }
    .smm-wrap .smm-price  { font-size: 28px !important; }
    .smm-wrap .smm-designer-card { flex-wrap: wrap !important; }
    .smm-wrap .smm-designer-link { width: 100% !important; text-align: center !important; margin-top: 6px !important; }
    .smm-wrap .smm-delivery-notice { flex-direction: column !important; gap: 8px !important; }
    .smm-wrap .smm-grid { gap: 24px !important; }
}

/* Hard guard against horizontal overflow on phones/tablets.
   CSS grid children default to min-width:auto and refuse to shrink below
   their content, which can push the 2-column grid (and the gallery) wider
   than the screen. Force single column + min-width:0 so nothing overflows. */
@media (max-width: 900px) {
    .smm-wrap { overflow-x: hidden !important; max-width: 100% !important; }
    .smm-wrap .smm-grid { grid-template-columns: 1fr !important; }
    .smm-wrap .smm-grid > * { min-width: 0 !important; }
    .smm-wrap .smm-gallery-col,
    .smm-wrap .smm-info-col,
    .smm-wrap .smm-main-viewer,
    .smm-wrap .smm-thumbs-wrap,
    .smm-wrap .smm-thumbs { max-width: 100% !important; min-width: 0 !important; }
    .smm-wrap .smm-slide-img { max-width: 100% !important; height: auto !important; }
}

/* =====================================================================
   PRODUCT OPTIONS  (S-PO1 — docs/product-options-build.md §4.2)

   The controls sit between the price and the quantity, inside
   .smm-atc-section, and borrow that section's own vocabulary so they read
   as part of the buy box rather than as a bolted-on form. Phase 1 renders
   plain controls only; swatches, pictures and detail columns are S-PO3.

   ⚠️ `!important` throughout, matching the rest of this file — WoodMart
   styles bare input/select/label at a specificity these rules would
   otherwise lose to.
   ===================================================================== */

.smm-wrap .smm-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 0 4px !important;
}

.smm-wrap .smm-opt {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
    min-width: 0 !important;               /* long labels must shrink, not overflow */
}

/* Same treatment as .smm-qty-label — one buy box, one label style. */
.smm-wrap .smm-opt-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    color: var(--smm-muted) !important;
    display: block !important;
    margin: 0 !important;
}

.smm-wrap .smm-opt-req {
    color: var(--smm-accent) !important;
    text-decoration: none !important;
    border: 0 !important;
    margin-inline-start: 3px !important;    /* mirrors itself under RTL */
    cursor: help !important;
}

.smm-wrap .smm-opt-input,
.smm-wrap .smm-opt-select {
    width: 100% !important;
    max-width: 320px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    color: var(--smm-dark) !important;
    background: var(--smm-white) !important;
    border: 1px solid var(--smm-border) !important;
    border-radius: var(--smm-radius-sm) !important;
    margin: 0 !important;
    height: auto !important;
}

/* ⚠️ The reference/colour lists can hold long labels with a price appended,
   so the closed <select> must truncate rather than widen its column — the
   filename-overflow rule from CLAUDE.md applies here too. */
.smm-wrap .smm-opt-select {
    text-overflow: ellipsis !important;
    padding-inline-end: 30px !important;
}

.smm-wrap .smm-opt-input:focus,
.smm-wrap .smm-opt-select:focus {
    outline: none !important;
    border-color: var(--smm-dark) !important;
}

.smm-wrap .smm-opt-hint {
    font-size: 11px !important;
    color: var(--smm-muted) !important;
}

/* The control the server refused, marked so the message has something to
   point at. Red is a signal here, not decoration. */
.smm-wrap .smm-opt-invalid .smm-opt-input,
.smm-wrap .smm-opt-invalid .smm-opt-select {
    border-color: var(--smm-accent) !important;
}

.smm-wrap .smm-opt-error {
    margin: 0 !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--smm-accent) !important;
    background: #fdf3f2 !important;
    border: 1px solid var(--smm-accent) !important;
    border-radius: var(--smm-radius-sm) !important;
    overflow-wrap: anywhere !important;
}

/* [hidden] is only a UA default; one theme `display:block` would show an
   empty error box on every product page. */
.smm-wrap .smm-opt-error[hidden] {
    display: none !important;
}

@media (max-width: 480px) {
    .smm-wrap .smm-opt-input,
    .smm-wrap .smm-opt-select {
        max-width: 100% !important;
    }
}

/* =============================================================================
   PRODUCT OPTIONS — RICH CHOICE RENDERING (S-PO3)

   The native <select> stays in the DOM for every mode — it is what
   collectOptions() reads on add-to-cart and what a screen reader announces.
   When a richer widget takes over (swatches, the reference table) the select
   is visually hidden but stays focusable-by-value: clicking a swatch or a
   table row sets its value and dispatches a real 'change' event, so nothing
   downstream (validation, the price calc, the gallery swap) has to know which
   widget is on screen.
   ===================================================================== */

.smm-wrap .smm-opt-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --- swatches (D13 — 1 to 3 colours, split) --------------------------- */

.smm-wrap .smm-opt-swatches {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.smm-wrap .smm-opt-swatch-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 5px 10px 5px 5px !important;
    background: var(--smm-white) !important;
    border: 1px solid var(--smm-border) !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: var(--smm-dark) !important;
    transition: border-color .15s ease !important;
}
.smm-wrap .smm-opt-swatch-btn:hover { border-color: var(--smm-dark) !important; }
.smm-wrap .smm-opt-swatch-btn.is-on {
    border-color: var(--smm-accent) !important;
    box-shadow: 0 0 0 1px var(--smm-accent) inset !important;
}

.smm-wrap .smm-opt-swatch-dot {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    flex: 0 0 auto !important;
}

.smm-wrap .smm-opt-swatch-text {
    overflow-wrap: anywhere !important;
}

/* --- reference / gear-style table (D1, up to 5 columns + search) ------ */

.smm-wrap .smm-opt-table-wrap {
    border: 1px solid var(--smm-border) !important;
    border-radius: var(--smm-radius-sm) !important;
    overflow: hidden !important;
    max-width: 100% !important;
}

.smm-wrap .smm-opt-table-search-wrap {
    padding: 8px !important;
    border-bottom: 1px solid var(--smm-border) !important;
    background: var(--smm-bg) !important;
}
.smm-wrap .smm-opt-table-search {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    border: 1px solid var(--smm-border) !important;
    border-radius: var(--smm-radius-sm) !important;
    background: var(--smm-white) !important;
}

.smm-wrap .smm-opt-table-scroll {
    max-height: 260px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

.smm-wrap .smm-opt-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
}
.smm-wrap .smm-opt-table thead th {
    position: sticky !important;
    top: 0 !important;
    background: var(--smm-bg) !important;
    text-align: left !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    color: var(--smm-muted) !important;
    white-space: nowrap !important;
}
.smm-wrap .smm-opt-table tbody td {
    padding: 8px 10px !important;
    border-top: 1px solid var(--smm-border) !important;
    color: var(--smm-dark) !important;
    /* a reference code beside a price must wrap, not push the row wider —
       the filename-overflow rule applies here too. */
    overflow-wrap: anywhere !important;
    min-width: 0 !important;
}
.smm-wrap .smm-opt-table-row {
    cursor: pointer !important;
}
.smm-wrap .smm-opt-table-row:hover td { background: var(--smm-bg) !important; }
.smm-wrap .smm-opt-table-row.is-on td {
    background: #fdf3f2 !important;
}
.smm-wrap .smm-opt-table-td-label { font-weight: 600 !important; white-space: nowrap !important; }
.smm-wrap .smm-opt-table-dot {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    vertical-align: middle !important;
    margin-inline-end: 6px !important;
}
.smm-wrap .smm-opt-table-td-price {
    white-space: nowrap !important;
    font-weight: 700 !important;
    color: var(--smm-accent) !important;
}
.smm-wrap .smm-opt-table-empty {
    margin: 0 !important;
    padding: 14px !important;
    text-align: center !important;
    font-size: 13px !important;
    color: var(--smm-muted) !important;
}
.smm-wrap .smm-opt-table-empty[hidden] { display: none !important; }

/* =============================================================================
   PRODUCT OPTIONS — THE FILE FIELD (S-PO6, docs/product-options-build.md §4.6)
   ===================================================================== */

/* ⚠️ "-BOX", never bare .smm-opt-file — the outer field wrapper already
   carries that exact class (every field type gets .smm-opt-{type}), and
   this is a DIFFERENT, nested element with its own data-key. */
.smm-wrap .smm-opt-file-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 320px !important;
}

.smm-wrap .smm-opt-file-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: fit-content !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--smm-dark) !important;
    background: var(--smm-white) !important;
    border: 1px solid var(--smm-border) !important;
    border-radius: var(--smm-radius-sm) !important;
    cursor: pointer !important;
}
.smm-wrap .smm-opt-file-btn:hover { border-color: var(--smm-dark) !important; }
.smm-wrap .smm-opt-file-btn[hidden] { display: none !important; }

/* The real <input type=file> is visually hidden — the label above is the
   click target, matching every other control in this buy box. It stays
   keyboard-reachable via the label's `for`. */
.smm-wrap .smm-opt-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.smm-wrap .smm-opt-file-progress {
    font-size: 13px !important;
    color: var(--smm-muted) !important;
}
.smm-wrap .smm-opt-file-progress[hidden] { display: none !important; }

.smm-wrap .smm-opt-file-preview {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    background: var(--smm-bg) !important;
    border: 1px solid var(--smm-border) !important;
    border-radius: var(--smm-radius-sm) !important;
}
.smm-wrap .smm-opt-file-preview[hidden] { display: none !important; }

.smm-wrap .smm-opt-file-thumb {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    border: 1px solid var(--smm-border) !important;
    flex: 0 0 auto !important;
}
.smm-wrap .smm-opt-file-thumb[hidden] { display: none !important; }

.smm-wrap .smm-opt-file-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 13px !important;
    color: var(--smm-dark) !important;
    /* A customer-chosen filename can be one long unbreakable word — the
       filename-overflow rule applies here exactly as it does everywhere
       else on this site. */
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.smm-wrap .smm-opt-file-remove {
    flex: 0 0 auto !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--smm-muted) !important;
    background: var(--smm-white) !important;
    border: 1px solid var(--smm-border) !important;
    border-radius: 999px !important;
    cursor: pointer !important;
}
.smm-wrap .smm-opt-file-remove:hover {
    color: var(--smm-accent) !important;
    border-color: var(--smm-accent) !important;
}

.smm-wrap .smm-opt-file-note {
    margin: 0 !important;
    font-size: 12px !important;
    color: var(--smm-muted) !important;
}

/* Orange — this project's standing colour for a pending/warning state
   (CLAUDE.md's palette), used nowhere else on this page. It marks the ONE
   thing on this form that does not block the order (D19/follow_up) so it
   reads differently from the red "you must fix this" language above. */
.smm-wrap .smm-opt-file-followup {
    margin: 0 !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #e67e22 !important;
    background: #fdf6ee !important;
    border: 1px solid #f3d9b8 !important;
    border-radius: var(--smm-radius-sm) !important;
}

.smm-wrap .smm-opt-invalid .smm-opt-file-box {
    border-radius: var(--smm-radius-sm) !important;
    box-shadow: 0 0 0 1px var(--smm-accent) !important;
}

/* =============================================================================
   Custom-variant request (S-PO4) — "Can't find what you need?" button + panel.
   docs/product-options-build.md §6. Deliberately its own small vocabulary
   (.smm-cr-*) rather than reusing .smm-idea-* — that stylesheet is not enqueued
   on this page.
   ============================================================================= */
.smm-wrap .smm-cr {
    margin-top: 14px !important;
}
/* A dashed grey box read as a NOTICE, not a control — owner-reported 2026-09-07:
   "I can't identify it's a button... most users will expect it's a simple text
   box." Rebuilt with the affordances a button actually needs (solid border,
   white fill so it doesn't blend into the page background, an icon that says
   "this opens a message", a chevron that flips on open) while staying visibly
   SECONDARY to "Ajouter au panier" — outline, not filled; body-weight border
   colour at rest, brand accent only on hover/focus/open. */
.smm-wrap .smm-cr-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    padding: 11px 14px !important;
    background: var(--smm-white) !important;
    border: 1px solid var(--smm-border) !important;
    border-radius: var(--smm-radius-md) !important;
    color: var(--smm-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: start !important;
    cursor: pointer !important;
    transition: border-color .15s ease, box-shadow .15s ease, color .15s ease !important;
}
.smm-wrap .smm-cr-toggle-icon {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    color: var(--smm-accent) !important;
}
.smm-wrap .smm-cr-toggle-text {
    flex: 1 1 auto !important;
    text-align: start !important;
}
.smm-wrap .smm-cr-toggle-chevron {
    flex: 0 0 auto !important;
    width: 13px !important;
    height: 13px !important;
    color: var(--smm-muted) !important;
    transition: transform .15s ease !important;
}
.smm-wrap .smm-cr-toggle:hover,
.smm-wrap .smm-cr-toggle:focus-visible {
    border-color: var(--smm-accent) !important;
    box-shadow: 0 1px 5px rgba(0,0,0,.08) !important;
}
.smm-wrap .smm-cr-toggle.is-open {
    border-color: var(--smm-accent) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.smm-wrap .smm-cr-toggle.is-open .smm-cr-toggle-chevron {
    color: var(--smm-accent) !important;
    transform: rotate(180deg) !important;
}
/* Sits flush under an open toggle rather than floating a gap below it. */
.smm-wrap .smm-cr-panel.is-attached {
    margin-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: none !important;
}
.smm-wrap .smm-cr-panel {
    margin-top: 10px !important;
    padding: 16px !important;
    background: var(--smm-white) !important;
    border: 1px solid var(--smm-border) !important;
    border-radius: var(--smm-radius-md) !important;
}
.smm-wrap .smm-cr-panel[hidden] { display: none !important; }
.smm-wrap .smm-cr-prompt {
    margin: 0 0 12px !important;
    padding: 10px 12px !important;
    background: var(--smm-bg) !important;
    border-inline-start: 3px solid var(--smm-accent) !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    color: var(--smm-dark) !important;
}
.smm-wrap .smm-cr-field {
    margin-bottom: 12px !important;
}
.smm-wrap .smm-cr-label {
    display: block !important;
    margin-bottom: 4px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--smm-dark) !important;
}
.smm-wrap .smm-cr-input {
    width: 100% !important;
    padding: 9px 11px !important;
    border: 1px solid var(--smm-border) !important;
    border-radius: var(--smm-radius-sm) !important;
    font-size: 13.5px !important;
    color: var(--smm-dark) !important;
    background: var(--smm-white) !important;
}
.smm-wrap .smm-cr-input:focus {
    outline: none !important;
    border-color: var(--smm-accent) !important;
}
.smm-wrap .smm-cr-textarea {
    resize: vertical !important;
    min-height: 90px !important;
}
.smm-wrap .smm-cr-qty {
    max-width: 100px !important;
}
/* Honeypot — off-screen, not display:none (some bots skip hidden fields but not
   off-screen ones), never reachable by keyboard or a screen reader. */
.smm-wrap .smm-cr-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
.smm-wrap .smm-cr-msg {
    margin: 0 0 10px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}
.smm-wrap .smm-cr-msg[hidden] { display: none !important; }
.smm-wrap .smm-cr-msg.smm-cr-err { color: var(--smm-accent) !important; }
.smm-wrap .smm-cr-msg.smm-cr-ok  { color: #1a7f4b !important; }
.smm-wrap .smm-cr-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 11px 16px !important;
    background: var(--smm-dark) !important;
    color: var(--smm-white) !important;
    border: none !important;
    border-radius: var(--smm-radius-md) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}
.smm-wrap .smm-cr-submit:disabled {
    opacity: .6 !important;
    cursor: default !important;
}
.smm-wrap .smm-cr-submit:hover:not(:disabled) {
    background: var(--smm-accent) !important;
}