/*
Theme Name: Shop Flytchee
Theme URI: https://shopflytchee.com
Description: Lightweight custom child theme for Shop Flytchee (built on Hello Elementor).
Author: MyWebChef
Template: hello-elementor
Version: 1.0
*/

/* ---------- Product cards (loop) ---------- */
ul.products li.product{ text-align:left; position:relative; }
ul.products li.product a img{ margin:0; }
.sf-card-media{ position:relative; overflow:hidden; background:#EFEDEA; margin-bottom:14px; }
.sf-card-media .sf-card-imglink{ display:block; position:relative; }
.sf-card-media img{ width:100%; height:auto; display:block; transition:opacity .5s ease, transform 1.2s ease; }
.sf-card-media .sf-img-hover{ position:absolute; inset:0; opacity:0; }
.sf-card-media:hover .sf-img-main img{ transform:scale(1.05); }
.sf-card-media:has(.sf-img-hover):hover .sf-img-main img{ opacity:0; }
.sf-card-media:hover .sf-img-hover{ opacity:1; }

/* Badges */
.sf-badges{ position:absolute; top:12px; left:12px; z-index:3; display:flex; gap:6px; }
.sf-badge{ font-family:Jost,sans-serif; font-weight:600; font-size:12px; line-height:1; padding:6px 9px; letter-spacing:.5px; }
.sf-badge.sf-hot{ background:#C2703D; color:#fff; }
.sf-badge.sf-sale{ background:#fff; color:#1A1A1A; }

/* Hover quick actions */
.sf-actions{ position:absolute; left:0; right:0; bottom:16px; display:flex; gap:10px; justify-content:center; opacity:0; transform:translateY(12px); transition:.35s ease; z-index:3; }
.sf-card-media:hover .sf-actions{ opacity:1; transform:none; }
.sf-act{ width:44px; height:44px; border-radius:50%; background:#fff; color:#1A1A1A; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 12px rgba(0,0,0,.14); transition:.25s ease; font-size:15px; }
.sf-act:hover{ background:#1A1A1A; color:#fff; }

/* Title + price */
ul.products li.product .woocommerce-loop-product__title{ font-family:Jost,sans-serif; font-weight:600; font-size:14px; line-height:1.4; text-transform:uppercase; letter-spacing:.4px; color:#1A1A1A; padding:0; margin:0 0 6px; }
ul.products li.product .price{ font-family:Inter,sans-serif; font-weight:500; font-size:15px; color:#1A1A1A; display:block; }
ul.products li.product .price del{ color:#9A9A9A; font-weight:400; margin-right:7px; opacity:1; }
ul.products li.product .price ins{ color:#C0392B; text-decoration:none; font-weight:600; }

/* Swatches */
.sf-swatches{ display:flex; gap:7px; margin-top:11px; }
.sf-swatch{ width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); display:inline-block; cursor:pointer; transition:transform .2s; }
.sf-swatch:hover{ transform:scale(1.18); }

/* ---------- Shop filters sidebar ---------- */
.sf-filters{ font-family:Inter,sans-serif; }
.sf-fil-title{ font-family:Jost,sans-serif; font-weight:600; font-size:15px; text-transform:uppercase; letter-spacing:.5px; margin:26px 0 12px; color:#1A1A1A; }
.sf-fil-title:first-child{ margin-top:0; }
.sf-fil-cats{ list-style:none; margin:0; padding:0; }
.sf-fil-cats li{ padding:5px 0; border-bottom:1px solid #F0ECE4; }
.sf-fil-cats a{ color:#4A4A4A; text-decoration:none; font-size:14px; display:flex; justify-content:space-between; }
.sf-fil-cats a:hover{ color:#C2703D; }
.sf-fil-cats span{ color:#9A9A9A; }
.sf-price{ display:flex; gap:8px; }
.sf-price input{ width:50%; padding:9px 10px; border:1px solid #E7E2DA; font-size:13px; font-family:Inter; }
.sf-fil-colors{ display:flex; flex-wrap:wrap; gap:11px; }
.sf-fil-color{ cursor:pointer; line-height:0; }
.sf-fil-color input{ display:none; }
.sf-fil-color span{ width:24px; height:24px; border-radius:50%; display:inline-block; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); transition:.2s; }
.sf-fil-color input:checked + span{ box-shadow:0 0 0 2px #1A1A1A; }
.sf-fil-actions{ margin-top:22px; display:flex; align-items:center; gap:14px; }
.sf-fil-apply{ background:#1A1A1A; color:#fff; border:0; padding:12px 26px; font-family:Jost; font-weight:600; text-transform:uppercase; letter-spacing:1px; font-size:13px; cursor:pointer; transition:.25s; }
.sf-fil-apply:hover{ background:#C2703D; }
.sf-fil-clear{ font-size:13px; color:#9A9A9A; text-decoration:none; }
.sf-fil-clear:hover{ color:#1A1A1A; }