

:root{
    
    --cg-blue   : #2d337f;   
    --cg-accent : #b89b65 !important;
    

    
    --cg-text   : var(--cg-blue);
    --cg-font   : "Inter","Helvetica Neue",sans-serif;
}


.cg-list-flex .product-image-photo{
    
    object-fit:cover;
    border-radius:10px;
    background:#fafafa;                     
    box-shadow:0 2px 6px rgba(0,0,0,.08);   
    transition:transform .25s, box-shadow .25s;
}


.cg-list-flex .product-item:hover  .product-image-photo,
.cg-list-flex .product-item:focus-within .product-image-photo{
    transform:scale(1.06);
    box-shadow:0 4px 14px rgba(0,0,0,.12);
}



.cg-list-flex .product-list-details{
    display:flex;
    flex-direction:column;
    justify-content:center;      
    min-height:100%;             
}


.cg-list-flex .product-item-name{
    margin:0 0 .45rem;
    font:600 1.55rem/1.35 var(--cg-font);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}


.cg-list-flex .product-item-name a{
    position:relative;
    color:var(--cg-text);           
    text-decoration:none;
    background-image:linear-gradient(to right,var(--cg-accent) 0 0);
    background-size:0% 2px;
    background-repeat:no-repeat;
    background-position:left bottom;
    transition:color .25s ease, background-size .45s cubic-bezier(.16,.8,.36,1);
}
.cg-list-flex .product-item-name a:is(:hover,:focus){
    color:var(--cg-accent);
    background-size:100% 2px;
}

.cg-list-flex .product-item-name a::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.7) 45%,transparent 90%);
    transform:translateX(-120%);
    opacity:0;pointer-events:none;
    transition:transform .7s cubic-bezier(.16,.8,.36,1),opacity .2s ease-in;
}
.cg-list-flex .product-item-name a:is(:hover,:focus)::after{
    transform:translateX(120%);opacity:.9;
}


.cg-list-flex .product-item-description{
    font:400 1.3rem/1.55 var(--cg-font);
    color:#5c5c5c;
    max-width:38ch;          
    opacity:.88;
    transition:opacity .25s;
}
.cg-list-flex .product-item:hover .product-item-description{
    opacity:1;
}


@keyframes metaFadeIn{
   from{opacity:0;transform:translateY(12px);}
   to  {opacity:1;transform:translateY(0);}
}
.cg-list-flex .product-list-details{
    animation:metaFadeIn .45s cubic-bezier(.16,.8,.36,1) both;
}


@keyframes cgPriceReveal{
    0%{opacity:0;transform:translateY(8px) scale(.96);}
    100%{opacity:1;transform:translateY(0) scale(1);}
}




.cg-list-flex{
    --cg-price-gap:.35rem;
}


.cg-list-flex .price-box{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:var(--cg-price-gap);
    margin-block:0.6rem 0;                 
    font-family:var(--cg-font);
}


.cg-list-flex .price-box .price{
    font-size:clamp(1.8rem,1vw + 1.4rem,2.2rem);
    font-weight:700;
    color:var(--cg-accent);
    font-variant-numeric:tabular-nums;
    display:inline-flex;align-items:center;
    padding:.22rem .9rem .18rem;
    border-radius:10px;

    
    background:color-mix(in srgb,var(--cg-accent) 16%,rgba(255,255,255,.72));
    backdrop-filter:blur(8px) saturate(140%);          
    box-shadow:
        0 1px 1px rgba(255,255,255,.25) inset,
        0 3px 6px rgba(0,0,0,.08) inset,
        0 4px 12px rgba(0,0,0,.10);

    transition:
        transform .18s var(--cg-ease-smooth),
        box-shadow .18s var(--cg-ease-smooth);
    animation:priceRevealList .45s cubic-bezier(.16,.8,.36,1) both;
}

@keyframes priceRevealList{
    0%{opacity:0;transform:translateY(8px) scale(.96);}
    100%{opacity:1;transform:translateY(0) scale(1);}
}


.cg-list-flex .product-item:is(:hover,:focus-within) .price-box .price{
    transform:translateY(-3px) scale(1.015);
    box-shadow:
        0 1px 1px rgba(255,255,255,.28) inset,
        0 5px 10px rgba(0,0,0,.10) inset,
        0 6px 18px rgba(0,0,0,.12);
}


.cg-list-flex .special-price .price-label{
    display:inline-flex;align-items:center;
    padding:.14rem .6rem .1rem;
    font-size:1.05rem;font-weight:600;
    color:#fff;background:var(--cg-accent);
    border-radius:4px;
    text-transform:uppercase;
    letter-spacing:.35px;
    box-shadow:0 2px 4px rgba(0,0,0,.12);
}


.cg-list-flex .old-price .price{
    font-size:1.35rem;font-weight:400;color:#8e8e8e;
    text-decoration:line-through;opacity:.55;
    transition:opacity .25s;
}
.cg-list-flex .product-item:hover .old-price .price{
    opacity:.4;
}


@media (prefers-reduced-motion:reduce){
    .cg-list-flex .price-box .price{
        transition:none;animation:none;
    }
}



.product-item-photo .discount-percent,
.product.media      .discount-percent{
    
    position:absolute;
    top:12px;                     
    right:-38px;                  
    z-index:5;

    
    width:120px;
    text-align:center;

    
    background:linear-gradient(145deg,#d4af37 0%,#b89b65 100%);
    color:#fff;
    font:700 1.3rem/2rem var(--cg-font);
    letter-spacing:.2px;
    transform:rotate(45deg);
    box-shadow:0 2px 4px rgba(0,0,0,.18);

    
    animation:badgeIn .6s cubic-bezier(.16,.76,.38,1) both;
}


.product-item-photo .discount-percent::after,
.product.media      .discount-percent::after{
    content:"";
    position:absolute;
    right:-12px; top:0;
    border-width:0 0 12px 12px;
    border-style:solid;
    border-color:transparent transparent rgba(0,0,0,.12) transparent;
}


.product-item-photo .discount-percent::before,
.product.media      .discount-percent::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(
        60deg,
        rgba(255,255,255,.35),
        rgba(255,255,255,0) 60%
    );
    mix-blend-mode:overlay;
    pointer-events:none;
}


@keyframes badgeIn{
    0%  {opacity:0; transform:translateY(-15px) rotate(45deg);}
    100%{opacity:1; transform:translateY(0)    rotate(45deg);}
}



:root{ --cg-neutral:#4b4f5a; }          


.widget-product.cg-card-strip .product-item-description,
.cg-list-flex                 .product-item-description{
    font-family:var(--cg-font,"Inter","Helvetica Neue",sans-serif);
    font-size:clamp(1.4rem,0.35vw + 1.3rem,1.6rem);
    line-height:1.6;
    color:var(--cg-neutral);
    text-align:justify;

    max-width:90ch;                     
    margin:.45rem auto 0;

    overflow:hidden;                    
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;               
    max-height:calc(1.6em * 3);         

    position:relative;

    
    transition:max-height .8s cubic-bezier(.25,.9,.45,1);
    -webkit-transition:max-height .8s cubic-bezier(.25,.9,.45,1);
}


.widget-product.cg-card-strip .product-item-description::after,
.cg-list-flex                 .product-item-description::after{
    content:"";
    position:absolute;
    inset-inline-end:0; inset-block-end:0;
    width:35%; height:1.4em;            
    background:linear-gradient(
        to right,
        rgba(255,255,255,0) 0%,
        color-mix(in srgb,var(--cg-neutral) 8%,#fff) 100%
    );
    pointer-events:none;
}


@media (hover:hover){
    .widget-product.cg-card-strip .product-item:is(:hover,:focus-within) .product-item-description,
    .cg-list-flex                 .product-item:is(:hover,:focus-within) .product-item-description{
        -webkit-line-clamp:unset;   
        max-height:40em;            
    }
    .widget-product.cg-card-strip .product-item:is(:hover,:focus-within) .product-item-description::after,
    .cg-list-flex                 .product-item:is(:hover,:focus-within) .product-item-description::after{
        display:none;               
    }
}


@media (hover:none){
    .widget-product.cg-card-strip .product-item-description,
    .cg-list-flex                 .product-item-description{
        -webkit-line-clamp:unset;
        max-height:none;
    }
    .widget-product.cg-card-strip .product-item-description::after,
    .cg-list-flex                 .product-item-description::after{
        display:none;
    }
}


@media (prefers-reduced-motion:reduce){
    .widget-product.cg-card-strip .product-item-description,
    .cg-list-flex                 .product-item-description{
        transition:none !important;
    }
}



.cg-list-flex .product-btn-info{
    
    display:flex;
    flex-direction:column;
    justify-content:space-between;   
    align-items:center;
    
    
    min-height:11rem;                
    
    
    gap:1rem;
}


.cg-list-flex .product-btn-info .price-box,
.cg-list-flex .product-btn-info .price-block,
.cg-list-flex .product-btn-info .row.no-gutters{
    flex:0 0 auto;                   
    width:100%;                      
    display:flex;
    justify-content:center;
    align-items:center;
}


.cg-list-flex .product-btn-info .price-block form{
    margin:0;                        
}


.cg-list-flex .product-btn-info .row.no-gutters{
    gap:.75rem;                      
}
.cg-list-flex .product-btn-info .row.no-gutters > .col{
    flex:1 1 0;                      
    display:flex;
    justify-content:center;
    align-items:center;
}


.cg-list-flex .product-btn-info .row.no-gutters > .col{
    
    flex:1 1 0;
    display:flex;
    justify-content:center;
    align-items:center;
}


.cg-list-flex .product-btn-info .row.no-gutters > .col button{
    all:unset;                                    
    display:grid; place-items:center;
    width:3.2rem; height:3.2rem;                  
    border-radius:50%;
    cursor:pointer; user-select:none;

    
    background:color-mix(in srgb,var(--cg-accent,#b89b65) 8%,#fff 92%);
    backdrop-filter:blur(14px) saturate(180%);
    border:1px solid color-mix(in srgb,var(--cg-accent,#b89b65) 25%,transparent);
    box-shadow:0 1px 3px rgba(0,0,0,.06) inset,0 2px 4px rgba(0,0,0,.06);

    transition:
        background .22s var(--cg-ease-smooth,cubic-bezier(.16,.8,.36,1)),
        transform  .22s var(--cg-ease-smooth,cubic-bezier(.16,.8,.36,1)),
        box-shadow .22s var(--cg-ease-smooth,cubic-bezier(.16,.8,.36,1));
}


.cg-list-flex .product-btn-info .row.no-gutters > .col button i{
    font-size:1.6rem; width:1em; height:1em;
    line-height:1; display:block; pointer-events:none;
    color:var(--cg-accent,#b89b65);
    transform-origin:center;
    transition:transform .22s var(--cg-ease-smooth,cubic-bezier(.16,.8,.36,1));
}


.cg-list-flex .product-btn-info .row.no-gutters > .col button:is(:hover,:focus-visible){
    background:var(--cg-accent,#b89b65);
    color:#fff;
    transform:translateY(-3px) scale(1.08);
    box-shadow:0 4px 10px rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.14);
}
.cg-list-flex .product-btn-info .row.no-gutters > .col button:is(:hover,:focus-visible) i{
    transform:scale(var(--icon-scale-hover,1));
    color:#fff;
}


.cg-list-flex .product-btn-info .row.no-gutters > .col button:active{
    transform:translateY(0) scale(.94);
}


.cg-list-flex .product-btn-info .row.no-gutters > .col button:focus-visible{
    outline:2px solid color-mix(in srgb,var(--cg-accent,#b89b65) 45%,transparent);
    outline-offset:2px;
}


@media (prefers-reduced-motion:reduce){
    .cg-list-flex .product-btn-info .row.no-gutters > .col button,
    .cg-list-flex .product-btn-info .row.no-gutters > .col button i{
        transition:none;
    }
}

.cg-list-flex .product-btn-info .row.no-gutters > .col button span{
    display:none;
}



.cg-list-flex .product-btn-info .row.no-gutters > .col button{
    position:relative;                 
    overflow:visible;                  
}


.cg-list-flex .product-btn-info .row.no-gutters > .col button span{
    display:block;                     

    position:absolute;
    top:100%; left:50%;
    transform:translate(-50%, .55rem); 

    font-size:.85rem;
    font-weight:500;
    line-height:1;
    color:var(--cg-text,#2d337f);
    white-space:nowrap;

    opacity:.85;
    transition:opacity .22s ease;
}


.cg-list-flex .product-btn-info .row.no-gutters > .col button:is(:hover,:focus-visible) span{
    opacity:1;
}


@media (hover:none){
    .cg-list-flex .product-btn-info .row.no-gutters > .col button span{
        opacity:1;
    }
}
