/*
Theme Name: Aneu Supreme V11 — FIGS Killer
Theme URI:
Author: Greg R.
Author URI:
Description: Aneu Supreme V9 — warm luxury sporty ecommerce theme for scrubs (FIGS-killer layout).
Version: 11.0.0
License: GNU General Public License v2 or later
License URI:
Text Domain: aneu-supreme-v11
Tags: e-commerce, custom-logo, custom-menu, featured-images, block-styles, wide-blocks
*/
@import url("assets/css/main.css");



/* =========================================
   FIGS-Killer Hybrid (FIGS + Apple) System
   ========================================= */
:root{
  --fk-ink:#151515;
  --fk-muted:#5a5a5a;
  --fk-ivory:#f6f0e7;
  --fk-card:#fbf7f1;
  --fk-plum:#2e2633;
  --fk-teal:#1f7a7a;
  --fk-coral:#e9706b;
  --fk-border:rgba(0,0,0,.10);
  --fk-radius:22px;
  --fk-radius-sm:14px;
  --fk-shadow:0 18px 40px rgba(0,0,0,.10);
}

body{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(233,112,107,.10), transparent 60%),
              radial-gradient(900px 500px at 80% 10%, rgba(31,122,122,.12), transparent 55%),
              var(--fk-ivory);
}

.fk-container{max-width:1180px;margin:0 auto;padding:0 18px;}

.fk-header{
  position:sticky; top:0; z-index:999;
  background: rgba(246,240,231,.78);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--fk-border);
}

.fk-header__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  min-height:70px;
}

.fk-logo{display:flex; align-items:center; gap:12px; text-decoration:none;}
.fk-logo__mark{display:none;}
.fk-logo__img{
  width:42px;height:42px;
  border-radius:50%;
  display:block;
  background:rgba(255,255,255,.65);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}
.fk-logo__textwrap{display:flex; flex-direction:column; line-height:1.05;}
.fk-logo__text{font-weight:900;letter-spacing:-.02em;color:var(--fk-ink);}
.fk-logo__sub{font-size:12px; opacity:.78; margin-top:3px;}

.fk-nav{display:flex; gap:14px; align-items:center;}
.fk-nav a{
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  color:var(--fk-ink);
  font-weight:700;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.50);
}
.fk-nav a:hover{background: rgba(255,255,255,.78); transform: translateY(-1px);}

.fk-cart{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  color:var(--fk-ink);
  font-weight:800;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
}
.fk-cart__icon{width:18px;height:18px;border-radius:6px;background:rgba(58,43,63,.25);display:inline-block;}
.fk-cart:hover{background: rgba(255,255,255,.80);}

.fk-burger{display:none; background:transparent; border:0; padding:10px; border-radius:12px;}
.fk-burger span{display:block; width:22px; height:2px; background:var(--fk-ink); margin:5px 0; border-radius:2px;}

@media (max-width: 900px){
  .fk-burger{display:inline-block;}
  .fk-nav{
    position:fixed; left:0; right:0; top:70px;
    background: rgba(246,240,231,.96);
    border-bottom:1px solid var(--fk-border);
    padding:14px 18px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .fk-nav.is-open{display:flex;}
  .fk-nav a{width:100%; text-align:left;}
}

.fk-hero{padding:34px 0 18px;}
.fk-hero__grid{
  display:grid; grid-template-columns: 1.1fr .9fr;
  gap:22px; align-items:stretch;
}
.fk-hero__copy{
  background: rgba(251,247,241,.86);
  border:1px solid rgba(0,0,0,.10);
  border-radius: var(--fk-radius);
  box-shadow: var(--fk-shadow);
  padding:28px;
}
.fk-eyebrow{
  display:inline-flex; gap:10px; align-items:center;
  font-weight:900; letter-spacing:.08em; font-size:12px;
  color: rgba(21,21,21,.80);
  padding:10px 14px; border-radius:999px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.08);
}
.fk-dot{width:10px;height:10px;border-radius:50%; background: rgba(47,124,127,.85); display:inline-block;}
.fk-h1{font-size:44px; line-height:1.05; margin:16px 0 10px; letter-spacing:-.02em;}
.fk-lede{font-size:18px; color: var(--fk-muted); margin:0 0 18px;}
.fk-cta{display:flex; gap:12px; flex-wrap:wrap; margin:14px 0;}
.fk-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.60);
  color: var(--fk-ink);
}
.fk-btn--primary{background: rgba(58,43,63,.92); color:#fff; border-color: rgba(58,43,63,.92);}
.fk-btn--primary:hover{filter:brightness(1.05); transform: translateY(-1px);}
.fk-btn--ghost:hover{background: rgba(255,255,255,.85); transform: translateY(-1px);}
.fk-btn--small{padding:10px 14px; font-weight:900;}
.fk-badges{list-style:none; padding:0; margin:14px 0 0; display:flex; gap:10px; flex-wrap:wrap;}
.fk-badges li{
  font-weight:800; font-size:12px; color: rgba(21,21,21,.80);
  padding:10px 12px; border-radius:999px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.08);
}

.fk-hero__media .fk-hero__card{
  border-radius: var(--fk-radius);
  overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: var(--fk-shadow);
  background: rgba(255,255,255,.40);
}
.fk-hero__img{display:block; width:100%; height:100%; object-fit:cover; min-height:320px;}

@media (max-width: 900px){
  .fk-hero__grid{grid-template-columns:1fr;}
  .fk-h1{font-size:36px;}
  .fk-hero__img{min-height:260px;}
}

.fk-section-head{margin:22px 0 14px;}
.fk-section-head--row{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap;}
.fk-h2{font-size:28px; letter-spacing:-.01em; margin:0;}
.fk-h3{font-size:18px; margin:0 0 10px;}
.fk-sub{color:var(--fk-muted); margin:6px 0 0; max-width:66ch;}
.fk-link{font-weight:900; text-decoration:none; color: var(--fk-ink); padding:10px 12px; border-radius:999px; border:1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.50);}

.fk-tiles{
  display:grid;
  /* Don't stretch tiles across the row (keeps cards tight to image width) */
  grid-template-columns:repeat(auto-fit,minmax(220px,260px));
  justify-content:center;
  gap:16px;
  margin-top:18px;
}


.fk-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:20px;
  min-height:140px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}


.fk-tile img{
  width:100%;
  height:170px;
  display:block;
  object-fit:cover;
  /* Bias upward so faces aren't clipped */
  object-position:center 20%;
}

.fk-tile__label{
  position:relative;
  /* Lower the label so it's clearly under the picture */
  margin:12px 14px 14px;
  font-weight:900;
  letter-spacing:.2px;
  font-size:16px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(8px);
}


.fk-tile:hover{transform: translateY(-2px);}

@media (max-width: 1000px){
  .fk-tiles{grid-template-columns: repeat(2, minmax(0, 260px)); justify-content:center;}
  .fk-tile img{height:170px;}
}

.fk-products{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  margin-top:16px;
}


.fk-product{
  border-radius: var(--fk-radius-sm);
  border:1px solid rgba(0,0,0,.10);
  background: rgba(251,247,241,.88);
  box-shadow:0 16px 30px rgba(0,0,0,.08);
  overflow:hidden;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.fk-product img{
  width:100%;
  height:auto;
  display:block;
  border-radius:16px;
  aspect-ratio:4 / 3;
  object-fit:cover;
  background:#f3f1ee;
}

.fk-product__meta{display:flex; justify-content:space-between; gap:10px; align-items:baseline;}
.fk-product__name{font-weight:900;}
.fk-product__price{font-weight:900; color: rgba(21,21,21,.70);}

@media (max-width: 900px){
  .fk-products{grid-template-columns:1fr;}
  .fk-product img{height:220px;}
}

.fk-fit{padding:26px 0;}
.fk-fit__grid{display:grid; grid-template-columns: 1fr 1fr; gap:12px;}
.fk-fit__card{
  border-radius: var(--fk-radius);
  border:1px solid rgba(0,0,0,.10);
  background: rgba(251,247,241,.86);
  box-shadow: var(--fk-shadow);
  padding:22px;
}
.fk-fit__card--soft{background: rgba(255,255,255,.45);}
.fk-check{list-style:none; padding:0; margin:12px 0 0;}
.fk-check li{padding-left:28px; position:relative; margin:10px 0; font-weight:800; color: rgba(21,21,21,.78);}
.fk-check li:before{content:'✓'; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:6px; background: rgba(47,124,127,.18); display:inline-flex; align-items:center; justify-content:center; font-weight:900;}

.fk-pillbar{display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 14px;}
.fk-pillbar span{padding:10px 12px; border-radius:999px; border:1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.55); font-weight:900;}

.fk-proof{display:flex; gap:12px; align-items:flex-start;}
.fk-stars{font-size:18px; letter-spacing:2px;}
.fk-proof__text{color: rgba(21,21,21,.76); font-weight:700;}

@media (max-width: 900px){
  .fk-fit__grid{grid-template-columns:1fr;}
}

.fk-final{padding:8px 0 34px;}
.fk-final__card{
  border-radius: var(--fk-radius);
  border:1px solid rgba(0,0,0,.10);
  background: linear-gradient(135deg, rgba(58,43,63,.14), rgba(31,122,122,.12), rgba(255,255,255,.35));
  box-shadow: var(--fk-shadow);
  padding:26px;
}

.fk-footer{padding:26px 0 18px; border-top:1px solid var(--fk-border); background: rgba(246,240,231,.82); backdrop-filter: blur(10px);}
.fk-footer__grid{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:flex-start;}
.fk-footer__brand{font-weight:900;}
.fk-footer__tag{color: var(--fk-muted); margin-top:6px;}
.fk-footer__links{display:flex; gap:12px; flex-wrap:wrap;}
.fk-footer__links a{color: var(--fk-ink); text-decoration:none; font-weight:800; padding:10px 12px; border-radius:999px; border:1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.45);}
.fk-footer__bottom{margin-top:14px; color: rgba(21,21,21,.65);}

/* V3 layout hardening: avoid overlaps across browsers */
.fk-section{position:relative; z-index:1;}
.fk-hero{position:relative; z-index:2;}
.fk-wrap{overflow-x:hidden;}
@supports not (backdrop-filter: blur(8px)) {.fk-pill, .fk-tile__label{background:rgba(255,255,255,.9);}}


/* === FIX: tile cards should be OPAQUE (no bleed-through) and images should fill consistently === */
.fk-tiles{ gap: 14px; }
.fk-tile{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #f8f7f3; /* opaque */
  border: 1px solid rgba(10,10,10,.10);
  box-shadow: 0 8px 22px rgba(10,10,10,.10);
  padding: 0;
  min-height: 170px;
}
/* Use aspect-ratio when available (most modern browsers) */
@supports (aspect-ratio: 1 / 1){
  .fk-tile{ aspect-ratio: 16 / 9; min-height: unset; }
}
.fk-tile img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  display: block;
}
.fk-tile__label{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(10,10,10,.10);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.fk-tile__label strong{ display:block; }
.fk-tile__label small{ display:block; margin-top:2px; opacity:.75; }

/* Avoid section overlap on some themes/plugins */
.fk-quick{ margin-top: 14px; }


/* === V6 HOTFIX: image cropping + reliable tile layout === */
.fk-hero__img{object-position:50% 18%;}

/* Wrap images so we control aspect ratio and prevent weird clipping */
.fk-tile{display:block;}
.fk-tile__media{width:100%; aspect-ratio: 16 / 9; overflow:hidden; border-radius:14px;}
.fk-tile__media img{width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block;}

/* If a Gutenberg Cover/Image block sneaks onto the homepage, keep it sane */
.wp-block-cover, .wp-block-image{max-width:100%;}
.wp-block-cover__image-background, .wp-block-cover__video-background{object-position:50% 20% !important;}
.wp-block-image img{height:auto !important; width:100% !important;}


/* === V7 LAYOUT FIXES (cross-browser) === */

/* HERO: prefer showing faces (top bias) and prevent odd cropping */
.fk-hero__img{
  height:auto;
  min-height:0;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 10%;
}

/* TILES: make image fill the tile and keep label readable */
.fk-tile{
  min-height:0;
  aspect-ratio: 16 / 10;
}
.fk-tile > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 20%;
}
.fk-tile__label{
  position:absolute;
  left:14px;
  bottom:14px;
  margin:0;
  z-index:2;
  max-width: calc(100% - 28px);
}
.fk-tile::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(255,255,255,.82) 0%, rgba(255,255,255,.22) 55%, rgba(255,255,255,0) 100%);
  z-index:1;
  pointer-events:none;
}

/* STRIP cards: ensure consistent media framing */
.fk-strip__img{
  width:100%;
  height:auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 20%;
  display:block;
}

/* Safety: if any parent sets overflow weird, keep sections from collapsing */
.fk-section, .fk-hero, .fk-tiles, .fk-strip{position:relative;}
/* === V9 FIX: put tile labels UNDER the images (no overlay) === */
.fk-tile{ display:flex; flex-direction:column; }
.fk-tile img{
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 35%;
}
/* If aspect-ratio isn't supported, fall back to a fixed height */
@supports not (aspect-ratio: 1 / 1){
  .fk-tile img{ height: 150px; }
}
.fk-tile__label{
  position: relative;
  left: auto; right: auto; bottom: auto;
  margin: 12px 14px 14px;
}

/* ==============================
   V10 FIXES — tiles + logo mark
   ============================== */

/* Header logo is now an actual IMG tag (better scaling + crispness) */
.fk-logo__mark{ display:none; }

/* Kill any legacy absolute overlays that were causing chopped/hidden tile images */
.fk-tile,
.fk-tile *{
  box-sizing: border-box;
}

.fk-tiles{
  display:grid;
  /* Cards stay tight to the image width */
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  justify-content:center;
  gap: 18px;
}

.fk-tile{
  position: relative;
  display:flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(20,20,20,0.06);
  box-shadow: 0 12px 30px rgba(20,20,20,0.08);
  overflow: hidden;
}

.fk-tile::after{
  content: none !important;
}

/* The image was getting cropped *before* it even hit the browser.
   We still force it to display fully (no more "half-head" in tile cards).
*/
.fk-tile img{
  position: relative !important;
  inset: auto !important;
  display:block;
  width: 100%;
  height: 120px;
  object-fit: contain;
  object-position: center;
  background: rgba(245,246,248,0.9);
  border-radius: 14px;
  padding: 6px;
}

/* Put text UNDER the image (not overlaying it) */
.fk-tile__label{
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  margin: 0;
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(20,20,20,0.08);
  border-radius: 999px;
  padding: 12px 14px;
  text-align: center;
  font-weight: 800;
  line-height: 1;
}


/* --- Aneu Supreme v11 overrides (logo + tight tiles) --- */

.fk-logo__mark{ display:none !important; }
.fk-logo__img{ width:38px; height:38px; border-radius:50%; display:block; }

.fk-tiles{
  grid-template-columns:repeat(auto-fit,minmax(220px,260px));
  justify-content:center;
}

.fk-tile img{
  height:170px;
  object-fit:cover;
  object-position:center 20%;
}

.fk-tile__label{
  margin:12px 14px 14px;
}