/* DinhoS Reef - Integração com a Loja
 * CSS responsivo e totalmente escopado ao componente .drsi-*.
 * Não altera o tema nem outros componentes do WordPress.
 */
.drsi-section {
    width: 100%;
    display: block;
    clear: both;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    container-type: inline-size;
    overflow: hidden;
}
.drsi-section *,
.drsi-section *::before,
.drsi-section *::after {
    box-sizing: border-box;
    min-width: 0;
}
.drsi-header { text-align: center; margin: 0 0 24px; }
.drsi-title {
    font-size: clamp(1.45rem, 3vw, 2.2rem);
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 8px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.drsi-subtitle {
    font-size: clamp(.9rem, 1.8vw, 1.1rem);
    color: #555;
    margin: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.drsi-grid {
    display: grid;
    grid-template-columns: repeat(var(--drsi-columns, 4), minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}
.drsi-card {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}
.drsi-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.10); }
.drsi-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    max-width: calc(100% - 24px);
    background: #e74c3c;
    color: #fff;
    font-weight: 700;
    font-size: .75rem;
    padding: 4px 12px;
    border-radius: 30px;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.drsi-image-link {
    display: block;
    width: 100%;
    overflow: hidden;
    background: #f8f9fa;
    aspect-ratio: 1 / 1;
}
.drsi-image-link img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.drsi-card:hover .drsi-image-link img { transform: scale(1.03); }
.drsi-info {
    padding: 16px 16px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.drsi-name {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 6px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.drsi-name a { color: #1a1a2e; text-decoration: none; }
.drsi-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
    font-size: .9rem;
    flex-wrap: wrap;
}
.drsi-stars { letter-spacing: 1px; white-space: nowrap; }
.drsi-rating-count { overflow-wrap: anywhere; }
.drsi-price {
    margin: 6px 0 8px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.drsi-price .woocommerce-Price-amount,
.drsi-price bdi { max-width: 100%; overflow-wrap: anywhere; }
.drsi-regular-price { text-decoration: line-through; color: #999; font-size: .9rem; }
.drsi-sale-price,
.drsi-current-price { font-size: 1.3rem; font-weight: 700; color: #2c3e50; overflow-wrap: anywhere; }
.drsi-sale-price { color: #e74c3c; }
.drsi-stock { margin: 4px 0 12px; font-size: .85rem; line-height: 1.4; }
.drsi-in-stock { color: #27ae60; font-weight: 600; }
.drsi-out-of-stock { color: #e74c3c; font-weight: 700; }
.drsi-add-to-cart {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    margin-top: auto;
    padding: 10px 12px;
    border: 0;
    border-radius: 30px;
    background: #f39c12;
    color: #fff;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
    text-transform: uppercase;
    letter-spacing: .3px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.drsi-add-to-cart:hover:not(.disabled):not(:disabled) { background: #e67e22; transform: scale(1.01); }
.drsi-add-to-cart:focus-visible { outline: 3px solid rgba(243,156,18,.45); outline-offset: 2px; }
.drsi-add-to-cart.loading { opacity: .8; cursor: wait; }
.drsi-add-to-cart.disabled,
.drsi-add-to-cart:disabled { background: #bdc3c7; cursor: not-allowed; opacity: .65; }
.drsi-add-to-cart.added { background: #27ae60; }
.drsi-footer { text-align: center; margin-top: 28px; margin-bottom: 0; }
.drsi-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    min-height: 46px;
    background: transparent;
    border: 2px solid #1a1a2e;
    color: #1a1a2e;
    font-weight: 600;
    padding: 10px 32px;
    border-radius: 40px;
    text-decoration: none;
    font-size: .95rem;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
    touch-action: manipulation;
}
.drsi-error { margin: 20px 0; padding: 12px 16px; border-radius: 10px; background: #f8f9fa; line-height: 1.5; overflow-wrap: anywhere; }

/* Tablets and small notebooks */
@media (max-width: 1024px) {
    .drsi-grid { grid-template-columns: repeat(min(var(--drsi-columns, 4), 3), minmax(0, 1fr)); gap: 20px; }
}

/* Phones: two comfortable columns on most modern smartphones */
@media (max-width: 767px) {
    .drsi-section {
        width: 100%;
        max-width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
        padding-bottom: 0 !important;
        overflow: visible !important;
    }
    .drsi-grid {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        align-items: start !important;
    }
    .drsi-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    .drsi-footer {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    .drsi-header { margin-bottom: 18px; }
    .drsi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .drsi-card { border-radius: 12px; }
    .drsi-info { padding: 11px; }
    .drsi-name { font-size: .88rem; }
    .drsi-rating { font-size: .78rem; gap: 3px; }
    .drsi-stars { letter-spacing: 0; font-size: .8rem; }
    .drsi-price { gap: 5px; margin-top: 5px; }
    .drsi-regular-price { font-size: .75rem; }
    .drsi-sale-price,
    .drsi-current-price { font-size: 1.05rem; }
    .drsi-stock { font-size: .75rem; margin-bottom: 9px; }
    .drsi-add-to-cart {
        min-height: 44px;
        padding: 9px 7px;
        font-size: .67rem;
        letter-spacing: .1px;
        border-radius: 24px;
    }
    .drsi-badge {
        top: 7px;
        left: 7px;
        max-width: calc(100% - 14px);
        padding: 3px 8px;
        font-size: .62rem;
    }
    .drsi-footer { margin-top: 20px; margin-bottom: 0; }
    .drsi-view-all { width: 100%; padding: 10px 16px; }
}

/* Very small phones: one column avoids cramped cards and horizontal overflow. */
@media (max-width: 399px) {
    .drsi-section { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
    .drsi-grid { grid-template-columns: 1fr; gap: 12px; }
    .drsi-info { padding: 12px; }
    .drsi-name { font-size: .92rem; }
    .drsi-sale-price,
    .drsi-current-price { font-size: 1.12rem; }
    .drsi-add-to-cart { font-size: .72rem; }
}

/* Prevent unexpected overflow on older/mobile browsers. */
@media (max-width: 320px) {
    .drsi-section { padding-left: 7px; padding-right: 7px; }
    .drsi-grid { gap: 9px; }
    .drsi-info { padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .drsi-card,
    .drsi-image-link img,
    .drsi-add-to-cart { transition: none; }
    .drsi-card:hover,
    .drsi-card:hover .drsi-image-link img,
    .drsi-add-to-cart:hover:not(.disabled) { transform: none; }
}


/* v1.0.17 - CLEAN MOBILE
   Sem hacks de altura em wrappers Elementor. */
@media (max-width: 767px) {
    .drsi-section {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-bottom: 0 !important;
        box-sizing: border-box !important;
    }

    .drsi-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
    }

    .drsi-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .drsi-image-link {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
    }

    .drsi-image-link img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .drsi-footer {
        margin: 20px 0 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }
}

@media (max-width: 399px) {
    .drsi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .drsi-info {
        padding: 9px !important;
    }

    .drsi-name {
        min-height: 3.8em !important;
        font-size: .78rem !important;
        line-height: 1.27 !important;
    }

    .drsi-sale-price,
    .drsi-current-price {
        font-size: .95rem !important;
    }

    .drsi-stock {
        font-size: .70rem !important;
    }

    .drsi-add-to-cart {
        min-height: 40px !important;
        padding: 7px 5px !important;
        font-size: .58rem !important;
        line-height: 1.15 !important;
    }
}


/* v1.0.23: column flex-wrap with auto height reserved the grid intrinsic height.
   Scope to the direct shop branch; no page-wide wrapper changes. */
@media(max-width:767px){
.e-con:has(> .elementor-widget-shortcode > .elementor-shortcode > .drsi-section), .e-con:has(> .elementor-widget-shortcode > .elementor-widget-container > .elementor-shortcode > .drsi-section), .e-con-inner:has(> .elementor-widget-shortcode > .elementor-shortcode > .drsi-section), .elementor-widget-wrap:has(> .elementor-widget-shortcode > .elementor-widget-container > .elementor-shortcode > .drsi-section), .drsi-shop-container {display:block!important;flex-wrap:nowrap!important;height:auto!important;min-height:0!important;--min-height:0px!important;--height:auto!important;flex-grow:0!important;}
.elementor-widget-shortcode:has(> .elementor-shortcode > .drsi-section), .elementor-widget-shortcode:has(> .elementor-widget-container > .elementor-shortcode > .drsi-section), .drsi-shop-widget {height:auto!important;min-height:0!important;max-height:none!important;flex:0 0 auto!important;}
.drsi-section .drsi-grid {height:auto!important;min-height:0!important;align-items:start!important;}
.drsi-section .drsi-card {height:auto!important;min-height:0!important;}
}

/* v1.0.24: visual-only product refinement; mobile height fix remains intact. */
.drsi-section .drsi-card {border:1px solid #e0edf4!important;border-radius:16px!important;background:#fff!important;box-shadow:0 5px 18px rgba(26,60,94,.07)!important;overflow:hidden!important;transition:box-shadow .2s ease,border-color .2s ease!important;}
.drsi-section .drsi-info {gap:4px;}
.drsi-section .drsi-name a {color:#1a3c5e!important;text-decoration:none!important;}
.drsi-section .drsi-add-to-cart {letter-spacing:0!important;box-shadow:0 3px 8px rgba(243,156,18,.15)!important;}
.drsi-section .drsi-view-all {border-width:1px!important;color:#1a3c5e!important;border-color:#1a3c5e!important;}
.drsi-section a:focus-visible,.drsi-section button:focus-visible {outline:3px solid #1675db!important;outline-offset:3px!important;}
@media(hover:hover){.drsi-section .drsi-card:hover {transform:none!important;border-color:#b8dcec!important;box-shadow:0 9px 24px rgba(26,60,94,.12)!important;}}
@media(max-width:767px){.drsi-section .drsi-card {border-radius:12px!important;}.drsi-section .drsi-name {font-weight:600!important;}}
@media(prefers-reduced-motion:reduce){.drsi-section .drsi-card {transition:none!important;}}
.drsi-section .drsi-grid {align-items:stretch!important;}

/* Mouse hover: brand-blue glow without changing document flow. */
@media(hover:hover) and (pointer:fine){
    .drsi-section .drsi-card {position:relative;overflow:visible!important;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease!important;}
    .drsi-section .drsi-card .drsi-image-link {overflow:hidden;border-radius:inherit;}
    .drsi-section .drsi-card:hover {transform:translateY(-4px) scale(1.025)!important;z-index:2;border-color:#70d6ff!important;box-shadow:0 8px 24px rgba(0,149,246,.18),0 0 22px rgba(0,190,255,.30),0 0 42px rgba(0,149,246,.14)!important;}
}
@media(prefers-reduced-motion:reduce){
    .drsi-section .drsi-card {transition:none!important;}
    .drsi-section .drsi-card:hover {transform:none!important;}
}