/* ================================================================
   DT Buy Box — Front-end Stylesheet  v2.0.0
   dailytut.com
   Accent color + image size come from CSS custom properties
   set inline by PHP (dt_buy_box_inject_css).
   All font-family values inherit from the active theme.
   ================================================================ */

/* ── CSS custom property defaults (overridden by PHP inline block) */
:root {
    --dtbb-c1:       #e8750a;
    --dtbb-c2:       #f0a500;
    --dtbb-img:      143px;
    --dtbb-img-mob:  130px;
}


/* ================================================================
   DEFAULT STYLE
   ================================================================ */

.dt-buy-box {
    display:       flex;
    align-items:   flex-start;
    gap:           20px;
    border:        1px solid #e2e8f0;
    border-left:   4px solid var(--dtbb-c1);
    border-radius: 8px;
    padding:       18px 20px;
    margin:        28px 0;
    background:    #fff;
    box-shadow:    0 2px 12px rgba(0,0,0,.06);
    box-sizing:    border-box;
    font-family:   inherit;
}

img.dt-buy-box__image {
    flex:             0 0 var(--dtbb-img);
    width:            var(--dtbb-img);
    height:           var(--dtbb-img);
    object-fit:       contain;
    object-position:  center;
    border-radius:    6px;
    background:       #f5f5f5;
    display:          block;
    margin:           0 !important;
}

.dt-buy-box__body {
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            5px;
    font-family:    inherit;
}

.dt-buy-box__badge {
    display:        inline-flex;
    align-items:    center;
    background:     #e8f5e9;
    color:          #2e7d32;
    font-size:      14px;
    font-weight:    700;
    padding:        4px 11px;
    border-radius:  4px;
    letter-spacing: .02em;
    margin:         0 !important;
    font-family:    inherit;
    width:          fit-content;
}

.dt-buy-box p.dt-buy-box__title {
    font-size:   15px !important;
    font-weight: 700 !important;
    color:       #111 !important;
    margin:      0 !important;
    line-height: 1.35 !important;
    font-family: inherit !important;
}

/* Stars + price row */
.dt-buy-box__meta {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    margin:          0 !important;
    flex-wrap:       wrap;
}

.dt-buy-box__stars {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    font-size:   13px;
}

.dt-buy-box__stars-gfx {
    position:    relative;
    display:     inline-block;
    white-space: nowrap;
    line-height: 1;
}

.dt-buy-box__stars-fill {
    position:    absolute;
    left:        0;
    top:         0;
    overflow:    hidden;
    color:       #f5a623;
    white-space: nowrap;
}

.dt-buy-box__stars-empty { color: #ddd; }

.dt-buy-box__stars-rating {
    color:       #666;
    font-size:   12px;
    font-family: inherit;
}

.dt-buy-box__price {
    font-size:   16px !important;
    font-weight: 700 !important;
    color:       #111 !important;
    margin:      0 !important;
    white-space: nowrap;
    font-family: inherit !important;
}

.dt-buy-box p.dt-buy-box__desc {
    font-size:   13px !important;
    color:       #555 !important;
    margin:      0 !important;
    line-height: 1.6 !important;
    font-family: inherit !important;
}

.dt-buy-box__btn-wrap {
    display:         flex !important;
    justify-content: flex-end;
    width:           100%;
}

a.dt-buy-box__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             9px;
    background:      linear-gradient(135deg, var(--dtbb-c1) 0%, var(--dtbb-c2) 100%);
    color:           #fff !important;
    font-weight:     700;
    font-size:       15px;
    padding:         12px 26px;
    border-radius:   7px;
    text-decoration: none !important;
    box-shadow:      0 3px 8px rgba(232,117,10,.30);
    transition:      opacity .15s ease;
    font-family:     inherit;
    text-align:      center;
}

a.dt-buy-box__btn:hover { opacity: .87; color: #fff !important; }

.dt-buy-box .dt-buy-box__btn-wrap a.button-red,
.dt-buy-box .dt-buy-box__btn-wrap .button-red,
.dt-buy-box a.button-red,
.dt-buy-box .button-red {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           auto !important;
    max-width:       100% !important;
    margin:          0 !important;
    flex-shrink:     0;
    text-align:      center !important;
}

.dt-buy-box a.button-red::before,
.dt-buy-box .button-red::before {
    position:   static !important;
    left:       auto !important;
    right:      auto !important;
    top:        auto !important;
    margin:     0 8px 0 0 !important;
    transform:  none !important;
    flex:       0 0 auto !important;
}

.dt-buy-box p.dt-buy-box__updated {
    font-size:   10px !important;
    color:       #aaa !important;
    margin:      2px 0 0 !important;
    text-align:  right;
    line-height: 1.4 !important;
    font-family: inherit !important;
}

/* Button modifiers */
a.dt-buy-box__btn--full {
    width:           100% !important;
    justify-content: center !important;
}

a.dt-buy-box__btn--sm {
    padding:       8px 14px !important;
    font-size:     12px !important;
    border-radius: 5px !important;
    flex-shrink:   0;
    white-space:   nowrap;
}


/* ================================================================
   HERO STYLE
   ================================================================ */

.dt-buy-box--hero {
    border:        none !important;
    border-radius: 12px !important;
    overflow:      hidden !important;
    box-shadow:    0 6px 24px rgba(0,0,0,.10) !important;
    padding:       0 !important;
    position:      relative;
    flex-direction: column; /* hero-inner handles the row layout */
    gap:           0 !important;
}

.dt-buy-box__hero-ribbon {
    position:       absolute;
    top:            20px;
    right:          0;
    background:     var(--dtbb-c1);
    color:          #fff;
    font-size:      10px;
    font-weight:    800;
    padding:        5px 16px 5px 12px;
    border-radius:  4px 0 0 4px;
    letter-spacing: .07em;
    text-transform: uppercase;
    z-index:        2;
    box-shadow:     -2px 2px 8px rgba(0,0,0,.15);
    font-family:    inherit;
}

.dt-buy-box__hero-inner {
    display:     flex;
    align-items: stretch;
}

/* Image panel — fixed canvas with contained product image */
.dt-buy-box__hero-img-wrap {
    flex:            0 0 220px;
    overflow:        hidden;
    min-height:      220px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         8px;
    box-sizing:      border-box;
    background:      #f5f5f5;
}

.dt-buy-box__hero-img {
    width:            100%;
    height:           100%;
    max-width:        100%;
    max-height:       100%;
    min-height:       0;
    object-fit:       contain;
    object-position:  center;
    display:          block;
}

.dt-buy-box__hero-body {
    flex:           1;
    min-width:      0;
    padding:        24px 28px;
    display:        flex;
    flex-direction: column;
    gap:            10px;
    background:     #fff;
    font-family:    inherit;
}


/* ================================================================
   DEAL STYLE
   ================================================================ */

.dt-buy-box--deal {
    background:     linear-gradient(135deg,#fff8f0,#fff3e3) !important;
    border:         2px solid var(--dtbb-c1) !important;
    border-left:    2px solid var(--dtbb-c1) !important;
    border-radius:  10px !important;
    padding:        18px 22px !important;
    flex-direction: column !important;
    gap:            0 !important;
    align-items:    stretch !important;
}

.dt-buy-box__deal-header {
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(232,117,10,.2);
    padding-bottom:12px;
    font-family:   inherit;
}

.dt-buy-box__deal-label {
    font-size:      12px;
    font-weight:    800;
    color:          var(--dtbb-c1);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-family:    inherit;
}

.dt-buy-box__deal-caveat {
    margin-left: auto;
    font-size:   11px;
    color:       #c07040;
    font-style:  italic;
    font-family: inherit;
}

.dt-buy-box__deal-body {
    display:     flex;
    gap:         18px;
    align-items: flex-start;
}

/* Deal image — larger, cover fill */
.dt-buy-box__deal-img {
    flex:             0 0 120px !important;
    width:            120px !important;
    height:           120px !important;
    object-fit:       cover !important;
    object-position:  center !important;
    border-radius:    8px !important;
    display:          block;
    margin:           0 !important;
    background:       #f5f5f5;
}

.dt-buy-box__deal-info {
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            8px;
    font-family:    inherit;
}

.dt-buy-box__deal-price-row {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
}

.dt-buy-box__deal-price {
    font-size:   28px !important;
    font-weight: 900 !important;
    color:       var(--dtbb-c1) !important;
    line-height: 1 !important;
    font-family: inherit !important;
}


/* ================================================================
   COMPACT STYLE
   ================================================================ */

.dt-buy-box--compact {
    flex-direction: row !important;
    align-items:    center !important;
    gap:            12px !important;
    padding:        10px 14px !important;
    border-radius:  7px !important;
    box-shadow:     none !important;
    border-left-width: 1px !important;
}

.dt-buy-box__compact-img {
    flex:          0 0 48px !important;
    width:         48px !important;
    height:        48px !important;
    border-radius: 5px !important;
    object-fit:    contain !important;
    background:    #f5f5f5 !important;
    margin:        0 !important;
}

.dt-buy-box__compact-info {
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    justify-content: center;
    gap:            4px;
    font-family:    inherit;
}

.dt-buy-box__compact-title {
    font-size:     13px;
    font-weight:   700;
    color:         #111;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    font-family:   inherit;
}

.dt-buy-box__compact-meta {
    display:     inline-flex;
    align-items: center;
    gap:         7px;
    min-width:   0;
    flex-wrap:   wrap;
    font-family: inherit;
}

.dt-buy-box__compact-stars {
    display:     inline-flex;
    align-items: center;
    gap:         4px;
    font-size:   12px;
    color:       #f5a623;
    flex-shrink: 0;
    white-space: nowrap;
}

.dt-buy-box__compact-price {
    font-size:   14px;
    font-weight: 800;
    color:       #111;
    flex-shrink: 0;
    font-family: inherit;
}

.dt-buy-box__compact-sep {
    color:       #888;
    font-size:   12px;
    line-height: 1;
    flex-shrink: 0;
}

.dt-buy-box__compact-rating {
    color:       #666;
    font-size:   11px;
    font-family: inherit;
}


/* ================================================================
   RESPONSIVE  ≤ 520px
   ================================================================ */

@media (max-width: 520px) {

    /* ── Default ──────────────────────────────── */
    .dt-buy-box {
        flex-direction: column;
        align-items:    center;   /* centers image on mobile */
        text-align:     center;
        gap:            14px;
        padding:        16px;
    }

    img.dt-buy-box__image {
        flex:   0 0 auto;
        width:  var(--dtbb-img-mob);
        height: var(--dtbb-img-mob);
    }

    .dt-buy-box__body {
        align-items: center;
        width:       100%;
    }

    .dt-buy-box__badge { align-self: center; }

    .dt-buy-box__meta { justify-content: center; }

    .dt-buy-box__btn-wrap {
        justify-content: center !important;
        width:           100%;
    }

    a.dt-buy-box__btn,
    .dt-buy-box .button-red {
        width:           100% !important;
        margin:          0 !important;
        text-align:      center;
        justify-content: center !important;
    }

    .dt-buy-box p.dt-buy-box__updated { text-align: center !important; }

    /* ── Hero ─────────────────────────────────── */
    .dt-buy-box--hero { text-align: center; }

    .dt-buy-box__hero-inner { flex-direction: column; }

    .dt-buy-box__hero-img-wrap {
        flex:       none;
        width:      100%;
        height:     200px;
        min-height: auto;
        padding:    8px;
    }

    .dt-buy-box__hero-img {
        width:      100%;
        height:     100%;
        max-height: 100%;
        min-height: 0;
    }

    .dt-buy-box__hero-body {
        padding:     20px 16px;
        align-items: center;
    }

    .dt-buy-box__hero-body .dt-buy-box__meta { justify-content: center; }

    .dt-buy-box__hero-ribbon { top: 12px; font-size: 9px; }

    /* ── Deal ─────────────────────────────────── */
    .dt-buy-box--deal { padding: 14px 16px !important; }

    .dt-buy-box__deal-body {
        flex-direction: column;
        align-items:    center;
        text-align:     center;
    }

    .dt-buy-box__deal-img {
        width:  110px !important;
        height: 110px !important;
    }

    .dt-buy-box__deal-info {
        align-items: center;
        width:       100%;
    }

    .dt-buy-box__deal-price-row { justify-content: center; }

    .dt-buy-box__deal-caveat { display: none; }

    /* ── Compact ──────────────────────────────── */
    .dt-buy-box--compact {
        flex-wrap:       wrap;
        align-items:     center !important;
        justify-content: flex-start;
        text-align:      left;
    }

    .dt-buy-box--compact .dt-buy-box__compact-info {
        flex:      1 1 calc(100% - 60px);
        min-width: 0;
    }

    .dt-buy-box--compact .dt-buy-box__compact-title {
        white-space: normal;
        overflow:    visible;
        text-overflow: unset;
        line-height: 1.35;
    }

    .dt-buy-box--compact .dt-buy-box__compact-meta {
        justify-content: flex-start;
    }

    .dt-buy-box--compact .dt-buy-box__btn--sm {
        flex:            0 0 100%;
        width:           auto !important;
        margin:          4px auto 0 !important;
        align-self:      center;
        justify-content: center !important;
        text-align:      center !important;
    }
}