/* ============================================================
   AdSlot test placeholders — visible only with ?adtest=1 (local).
   Real production AdSense uses <ins class="adsbygoogle"> instead.
   ============================================================ */

.adslot-wrap {
    /* CLS prevention: reserve space matching smallest valid format */
    box-sizing: border-box;
    width: 100%;
    margin: 24px auto;
    padding: 0;
    /* Mobile reserved height by default (CSS var set inline per slot) */
    min-height: var(--ad-mh, 100px);
    display: block;
    position: relative;
}

/* === TEST PLACEHOLDER STYLING === */
.adslot-test {
    background: repeating-linear-gradient(
        45deg,
        #fff8e1 0px,
        #fff8e1 12px,
        #ffe0b2 12px,
        #ffe0b2 24px
    );
    border: 3px dashed #ff6f00;
    border-radius: 6px;
    color: #bf360c;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    text-align: center;
    padding: 12px 8px;
    overflow: hidden;
}

.adslot-test .adslot-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}

.adslot-test .adslot-tag {
    background: #ff6f00;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
}

.adslot-test .adslot-id {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 14px;
    font-weight: 700;
    color: #bf360c;
}

.adslot-test .adslot-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    color: #5d4037;
}

.adslot-test .adslot-meta > span {
    background: rgba(255,255,255,0.7);
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid rgba(191,54,12,0.2);
}

.adslot-test .adslot-page {
    font-weight: 700;
}

.adslot-test .adslot-pos {
    font-style: italic;
}

/* === MOBILE / DESKTOP SIZE INDICATORS === */
.adslot-test .adslot-size-mobile  { display: inline-block; }
.adslot-test .adslot-size-desktop { display: none; }

@media (min-width: 768px) {
    .adslot-wrap {
        min-height: var(--ad-dh, 90px);
    }
    .adslot-test .adslot-size-mobile  { display: none; }
    .adslot-test .adslot-size-desktop { display: inline-block; }
}

/* === SIDEBAR STICKY VARIANT (desktop 300x600) === */
.adslot-wrap.adslot-sidebar {
    width: 300px;
    min-height: 600px;
    position: sticky;
    top: 80px;
    margin: 0 auto;
}

/* === MOBILE-ONLY / DESKTOP-ONLY VISIBILITY === */
.adslot-mobile-only  { display: block; }
.adslot-desktop-only { display: none; }
@media (min-width: 768px) {
    .adslot-mobile-only  { display: none; }
    .adslot-desktop-only { display: block; }
}

/* === IN-FEED VARIANT — full-row break inside flex grids =====
   Used between product cards inside .boxes-wrapper. Forces 100%
   row width so the ad becomes a full divider, not an in-row cell. */
.adslot-wrap.adslot-infeed {
    flex: 1 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 16px 0;
}
/* hide the desktop in-feed ad on small screens (mobile gets MORE in-feeds)
   and vice-versa, so each viewport shows only its appropriately-sized set */
.adslot-wrap.adslot-infeed-mobile  { display: block; }
.adslot-wrap.adslot-infeed-desktop { display: none; }
@media (min-width: 768px) {
    .adslot-wrap.adslot-infeed-mobile  { display: none; }
    .adslot-wrap.adslot-infeed-desktop { display: block; }
}

/* === REAL ADSENSE (production) — keep CLS containment === */
ins.adsbygoogle {
    contain: layout;
    overflow: hidden;
    display: block;
}