/*
Theme Name: Vape Child
Theme URI: https://vape.webhostlb.net
Description: Faithful port of bakkar-vape.com onto WordPress + WooCommerce. Child theme of Astra.
Author: Youssef Solh
Version: 0.1.0
Template: astra
Text Domain: vape-child
*/

/* Tokens and component styles are loaded from assets/css/source-ported.css via enqueues.php */

/* Ensure `hidden` attribute defeats any cascading display rule from the parent theme. */
[hidden]{ display: none !important; }

/* --- Stage 3.2: Category tile styles --- */
.cat-tile{
    display:flex;
    flex-direction:column;
    border-radius:var(--radius2);
    overflow:hidden;
    background: rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    transition: transform .15s ease, border-color .2s ease, background .2s ease;
}
.cat-tile:hover{
    transform: translateY(-2px);
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.18);
}
.cat-tile__media{
    aspect-ratio: 4/3;
    background: rgba(255,255,255,.03);
    display:grid;
    place-items:center;
}
.cat-tile__media img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.cat-tile__body{
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.cat-tile__name{ font-weight:700; letter-spacing:-.01em; }
.cat-tile__count{ font-size:13px; }

/* --- Stage 3.4: Brand strip styles --- */
.brandstrip{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap:14px;
}
.brandstrip__item{
    display:grid;
    place-items:center;
    aspect-ratio: 3/2;
    border-radius: var(--radius);
    background: rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    padding:14px;
    transition: background .2s ease, border-color .2s ease;
}
.brandstrip__item:hover{
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.18);
}
.brandstrip__item img{
    max-height:60%;
    max-width:80%;
    object-fit:contain;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.45));
}

/* --- Stage 5.2: Product card styles --- */
.grid--products{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap:18px;
}
.prod-card{
    display:flex;
    flex-direction:column;
    border-radius: var(--radius2);
    overflow:hidden;
    background: rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    transition: transform .15s ease, border-color .2s ease, background .2s ease;
}
.prod-card:hover{
    transform: translateY(-2px);
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.18);
}
.prod-card__media{
    aspect-ratio: 1/1;
    background: rgba(255,255,255,.03);
    display:grid;
    place-items:center;
    overflow:hidden;
}
.prod-card__media img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:18px;
}
.prod-card__body{
    padding:14px 16px 16px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.prod-card__brand{
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color: var(--muted);
}
.prod-card__name{
    color:#fff;
    font-weight:600;
    line-height:1.3;
    min-height:2.6em;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.prod-card__row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:auto;
}
.prod-card__price{
    font-weight:700;
    font-size:16px;
    background: linear-gradient(135deg, var(--primary), var(--primary2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.btn--sm{
    height:38px;
    padding:0 12px;
    font-size:13px;
    border-radius:12px;
}

/* --- Stage 5.4: Single-product layout styles --- */
.single-product__layout{
    display:grid;
    grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
    gap: 36px;
    align-items:start;
}
@media (max-width: 820px){
    .single-product__layout{ grid-template-columns: 1fr; }
}
.single-product__media{
    border-radius: var(--radius2);
    background: rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    aspect-ratio: 1/1;
    overflow:hidden;
    display:grid;
    place-items:center;
}
.single-product__media img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:34px;
}
.single-product__title{
    font-size: 32px;
    line-height:1.15;
    letter-spacing:-.02em;
    margin: 8px 0 6px;
}
.single-product__price{
    font-size:24px;
    font-weight:700;
    background: linear-gradient(135deg, var(--primary), var(--primary2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.single-product__desc{ margin-top:14px; color: var(--muted); }

/* --- Stage 6.3: Cart row styles --- */
.cart-row{
    display:grid;
    grid-template-columns: 64px 1fr;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.cart-row:last-child{ border-bottom:none; }
.cart-row__media{
    width:64px; height:64px;
    border-radius:12px;
    overflow:hidden;
    background: rgba(255,255,255,.04);
    display:grid;
    place-items:center;
}
.cart-row__media img{
    max-width:100%; max-height:100%; object-fit:contain;
}
.cart-row__body{ display:flex; flex-direction:column; gap:6px; }
.cart-row__name{ font-weight:600; font-size:14px; line-height:1.3; }
.cart-row__row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.cart-row__qty{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background: rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    border-radius:10px;
    padding:2px 6px;
}
.cart-row__qty button{
    width:24px; height:24px;
    background:transparent; border:none; color:#fff; cursor:pointer; border-radius:6px;
}
.cart-row__qty button:hover{ background: rgba(255,255,255,.08); }
.cart-row__price{ font-weight:700; }
.cart-row__rm{
    width:28px; height:28px;
    background:transparent; border:1px solid rgba(255,255,255,.12); color:#fff;
    border-radius:8px; cursor:pointer;
}
.cart-row__rm:hover{ background: rgba(255,80,80,.12); border-color: rgba(255,80,80,.35); }