/************************************
 * PRODUCT CARD 8 CLEAN: STORE PRO / DIY
 * - Clean grid, strong price hierarchy
 * - Clear CTA (.pc-cart) for your global JS
 * - Mobile full-width CTA
 * - Full RTL support
 * - Equal height cards (same row)
 * - Slider cursor pointer
 ************************************/

 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

 .pc8{
   --pc8-font: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
 
   --pc8-bg: #f6f7f9;
   --pc8-card: #fff;
 
   --pc8-ink: #0f1115;
   --pc8-muted: rgba(15,17,21,.62);
 
   --pc8-line: #e7eaf0;
   --pc8-line2:#dfe4ee;
 
   --pc8-accent: #f26522;
   --pc8-good: #1a7f37;
   --pc8-bad:  #c62828;
 
   --pc8-radius: 16px;
   --pc8-shadow: 0 10px 26px rgba(0,0,0,.07);
   --pc8-shadow-h: 0 14px 38px rgba(0,0,0,.11);
 
   --pc8-media-h: 230px;
 }
 
 /* =========================================================
    EQUAL HEIGHT: aynı satırdaki tüm kartlar aynı boy
    ========================================================= */
 .pc8 > [class*="col-"]{
   display:flex;
 }
 
 .pc8 .pc8-tile{
   width:100%;
   height:100%;
   display:flex;
 }
 
 .pc8 .pc8-card{
   width:100%;
   height:100%;
   display:flex;
   flex-direction:column;
 
   font-family: var(--pc8-font);
   background: var(--pc8-card);
   border: 1px solid var(--pc8-line);
   border-radius: var(--pc8-radius);
   overflow: hidden;
   box-shadow: var(--pc8-shadow);
   transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
   position: relative;
 }
 
 .pc8 .pc8-card:hover{
   transform: translateY(-2px);
   box-shadow: var(--pc8-shadow-h);
   border-color: var(--pc8-line2);
 }
 
 /* =========================================================
    MEDIA
    ========================================================= */
 .pc8 .pc8-media{
   position: relative;
   background: #fff;
   border-bottom: 1px solid var(--pc8-line);
 }
 
 /* slider yapın */
 .pc8 .product-card{ position: relative; z-index: 3; }
 .pc8 .product-card .product-slider{
   height: var(--pc8-media-h);
   background: #fff;
 }
 
 .pc8 .product-card .slick-list,
 .pc8 .product-card .slick-track{
   height: 100% !important;
 }
 
 .pc8 .product-card img{
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: block;
 }
 
 /* slider alanında pointer */
 .pc8 .pc8-media,
 .pc8 .pc8-media .product-card,
 .pc8 .pc8-media .product-slider{
   cursor: pointer;
 }
 
 /* SOLDOUT visual */
 .pc8 .pc8-card.is-soldout .product-card img{
   filter: grayscale(1) contrast(.98);
   opacity: .78;
 }
 .pc8 .pc8-card.is-soldout .pc8-media::after{
   content:"";
   position:absolute;
   inset:0;
   background: rgba(255,255,255,.28);
   pointer-events:none;
   z-index: 5;
 }
 
 /* =========================================================
    BADGES
    ========================================================= */
 .pc8 .pc8-badges{
   position:absolute;
   left: 12px;
   top: 12px;
   z-index: 8;
   display:flex;
   flex-direction:column;
   gap: 8px;
   max-width: calc(100% - 70px);
   pointer-events:none;
 }
 
 .pc8 .pc8-badge{
   display:inline-flex;
   align-items:center;
   gap: 8px;
 
   padding: 7px 10px;
   border-radius: 12px;
 
   font-size: 12px;
   font-weight: 900;
   line-height: 1;
 
   background: #fff;
   border: 1px solid var(--pc8-line2);
   color: var(--pc8-ink);
 }
 
 .pc8 .pc8-badge i{ font-size: 15px; }
 
 .pc8 .pc8-badge--ship{
   border-color: rgba(242,101,34,.35);
 }
 .pc8 .pc8-badge--ship i{ color: var(--pc8-accent); }
 
 .pc8 .pc8-badge--sold{
   background: rgba(204, 59, 2, 0.1);
   border-color: rgba(198, 90, 40, 0.35);
   color: #ad3b05;
 }
 .pc8 .pc8-badge--sold i{ color: var(--pc8-bad); }
 
 .pc8 .pc8-badge--soft{
   background: rgba(255,255,255,.88);
 }
 
 /* =========================================================
    ACTIONS (fav)
    ========================================================= */
 .pc8 .pc8-actions{
   position:absolute;
   right: 12px;
   top: 12px;
   z-index: 10;
   display:flex;
   gap: 8px;
   pointer-events:auto;
 }
 
 .pc8 .pc8-act{
   width: 38px;
   height: 38px;
   border-radius: 12px;
   border: 1px solid var(--pc8-line2);
   background:#fff;
   display:inline-flex;
   align-items:center;
   justify-content:center;
   box-shadow: 0 8px 18px rgba(0,0,0,.10);
   transition: transform .12s ease, box-shadow .12s ease;
   cursor: pointer;
 }
 
 .pc8 .pc8-act:hover{
   transform: translateY(-1px);
   box-shadow: 0 12px 26px rgba(0,0,0,.14);
 }
 
 /* =========================================================
    CONTENT
    ========================================================= */
 .pc8 .pc8-body{
   flex: 1;
   padding: 12px 12px 12px 12px;
   display:flex;
   flex-direction:column;
   gap: 9px;
 }
 
 .pc8 .pc8-title{
   font-size: 14.5px;
   font-weight: 900;
   line-height: 1.25;
   margin: 0;
   color: var(--pc8-ink);
 
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 
 .pc8 .pc8-desc{
   font-size: 12.5px;
   color: var(--pc8-muted);
   line-height: 1.35;
   margin: 0;
 
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 
 /* rating row */
 .pc8 .pc8-rating{
   font-size: 12px;
   color: rgba(15,17,21,.66);
   display:flex;
   align-items:center;
   gap: 8px;
 }
 
 .pc8 .pc8-stars i{
   font-size: 14px;
   color: rgba(15,17,21,.18);
 }
 
 /* FIX: .pc8 nokta eksikliği düzeltildi */
 .pc8 .pc8-stars--1 i:nth-child(-n+1),
 .pc8 .pc8-stars--2 i:nth-child(-n+2),
 .pc8 .pc8-stars--3 i:nth-child(-n+3),
 .pc8 .pc8-stars--4 i:nth-child(-n+4),
 .pc8 .pc8-stars--5 i:nth-child(-n+5){
   color: rgba(15,17,21,.88);
 }
 
 .pc8 .pc8-rate{ font-weight: 900; }
 .pc8 .pc8-votes{ color: rgba(15,17,21,.45); }
 
 /* =========================================================
    BOTTOM: price + CTA
    ========================================================= */
 .pc8 .pc8-bottom{
   margin-top: auto;
   padding-top: 10px;
   border-top: 1px solid var(--pc8-line);
 }
 
 .pc8 .pc8-price-wrap{
   display:block;
 }
 
 /* CTA row */
 .pc8 .pc8-cta{
   margin-top: 10px;
   display:flex;
   align-items:center;
   justify-content: space-between;
   gap: 10px;
 }
 
 /* add-to-cart MUST be .pc-cart */
 .pc8 .pc-cart{
   flex: 1;
   width: auto;
   height: auto;
 
   border: 1px solid rgba(0,0,0,.08);
   background: var(--pc8-accent);
   color:#fff;
 
   border-radius: 14px;
   padding: 11px 12px;
 
   display:inline-flex;
   align-items:center;
   justify-content:center;
   gap: 10px;
 
   font-family: var(--pc8-font);
   font-size: 13px;
   font-weight: 900;
   line-height: 1;
 
   transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
   box-shadow: 0 10px 22px rgba(242,101,34,.22);
   cursor: pointer;
 }
 
 .pc8 .pc-cart i{ font-size: 18px; }
 .pc8 .pc-cart:hover{ filter: brightness(.98); transform: translateY(-1px); }
 .pc8 .pc-cart:active{ transform: translateY(0); }
 .pc8 .pc-cart:focus-visible{
   outline: 0;
   box-shadow: 0 0 0 3px rgba(242,101,34,.25), 0 10px 22px rgba(242,101,34,.22);
 }
 
 /* Secondary mini action */
 .pc8 .pc8-view{
   width: 46px;
   min-width: 46px;
   height: 46px;
   border-radius: 14px;
   border: 1px solid var(--pc8-line2);
   background:#fff;
   display:inline-flex;
   align-items:center;
   justify-content:center;
   color: rgba(15,17,21,.82);
   box-shadow: 0 10px 22px rgba(0,0,0,.08);
   cursor: pointer;
 }
 .pc8 .pc8-view i{ font-size: 20px; }
 
 /* soldout disables cart */
 .pc8 .pc8-card.is-soldout .pc-cart{
   background: rgba(0,0,0,.08);
   border-color: rgba(0,0,0,.10);
   color: rgba(0,0,0,.52);
   box-shadow: none;
   cursor: not-allowed;
   pointer-events: none;
 }
 
 /* Make stretched-link not block actions */
 .pc8 .pc8-media > .stretched-link{ z-index: 1; }
 .pc8 .product-card,
 .pc8 .product-slider,
 .pc8 .slick-list,
 .pc8 .slick-track{ position: relative; z-index: 3; }
 
 /* =========================================================
    RTL
    ========================================================= */
 [dir="rtl"] .pc8 .pc8-badges{ left:auto; right:12px; }
 [dir="rtl"] .pc8 .pc8-actions{ right:auto; left:12px; }
 
 /* RTL: CTA order */
 [dir="rtl"] .pc8 .pc8-cta{
   flex-direction: row-reverse;
 }
 
 /* Mobile: CTA full width */
 @media (max-width: 576px){
   .pc8 .pc8-cta{ flex-wrap: wrap; }
   .pc8 .pc-cart{ width: 100%; }
   .pc8 .pc8-view{ width: 100%; min-width: 0; height: 44px; }
 }
 
 /* =========================================================
    SLICK NAV: oklar sadece media ortasında kalsın
    ========================================================= */
 .pc8 .pc-nav{
   position: absolute;
   top: calc(var(--pc8-media-h) / 2);
   transform: translateY(-50%);
   z-index: 12;
 
   width: 36px;
   height: 56px;
   border-radius: 14px;
   border: 1px solid rgba(0,0,0,.10);
   background: rgba(255,255,255,.86);
 
   display: inline-flex;
   align-items: center;
   justify-content: center;
 
   opacity: 0;
   transition: opacity .15s ease, background .15s ease;
   cursor: pointer;
 }
 
 .pc8 .pc8-card:hover .pc-nav{ opacity: 1; }
 .pc8 .pc-nav:hover{ background: rgba(255,255,255,.96); }
 
 .pc8 .pc-nav i{ font-size: 22px; color: rgba(0,0,0,.78); }
 
 .pc8 .pc-nav--prev{ left: 10px; }
 .pc8 .pc-nav--next{ right: 10px; }
 
 @media (max-width: 992px){
   .pc8 .pc-nav{ opacity: .92; }
 }
 
 [dir="rtl"] .pc8 .pc-nav--prev{ left:auto; right:10px; }
 [dir="rtl"] .pc8 .pc-nav--next{ right:auto; left:10px; }
 [dir="rtl"] .pc8 .pc-nav i{ transform: rotate(180deg); }
 
 /* =========================================================
    PRICE HIERARCHY (eğer fiyat HTML'inde class varsa)
    ========================================================= */
 .pc8 .pc8-price-wrap .new-price{
   font-size: 18.5px;
   font-weight: 900;
   color: var(--pc8-ink);
   display: block;
 }
 .pc8 .pc8-price-wrap .old-price{
   font-size: 12px;
   opacity: .58;
   text-decoration: line-through;
   display: block;
   margin-top: 2px;
 }
 .pc8 .pc8-price-wrap .discount-badge{
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 7px 10px;
   border-radius: 12px;
   font-weight: 900;
   font-size: 12px;
   line-height: 1;
   background: var(--pc8-accent);
   color: #fff;
   margin-bottom: 6px;
 }
 
 /* fallback class isimleri */
 .pc8 .pc8-price-wrap .yeni_fiyat,
 .pc8 .pc8-price-wrap .fiyat_yeni,
 .pc8 .pc8-price-wrap .sale-price{
   font-size: 18.5px;
   font-weight: 900;
   color: var(--pc8-ink);
 }
 
 .pc8 .pc8-price-wrap .eski_fiyat,
 .pc8 .pc8-price-wrap .fiyat_eski,
 .pc8 .pc8-price-wrap .regular-price{
   font-size: 12px;
   opacity: .58;
   text-decoration: line-through;
 }
 
 .pc8 .pc8-price-wrap .indirim,
 .pc8 .pc8-price-wrap .indirim_orani,
 .pc8 .pc8-price-wrap .discount{
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 7px 10px;
   border-radius: 12px;
   font-weight: 900;
   font-size: 12px;
   line-height: 1;
   background: rgba(242,101,34,.10);
   color: var(--pc8-ink);
   border: 1px solid rgba(242,101,34,.30);
   margin-bottom: 6px;
 }