/* =========================
      THEME TOKENS (DEFAULT)
      Theme 1: Flowwow Pink
    ========================== */
    :root{
      --bg: #FFF7FA;
      --surface: #FFFFFF;
      --surface-2: #FFF1F6;

      --text: #1B1B1F;
      --muted: #6B6B75;
      --border: #EFE3E9;

      --primary: #FF4D8D;
      --primary-hover: #E63C7A;
      --on-primary: #FFFFFF;

      --link: #FF2F7D;
      --primary-rgb: 255, 77, 141; /* auto-set by JS too */

      --radius: 18px;
      --radius-sm: 14px;

      --shadow-sm: 0 10px 24px rgba(16, 24, 40, 0.06);
      --shadow-md: 0 16px 40px rgba(16, 24, 40, 0.10);

      --ring: 0 0 0 .25rem rgba(var(--primary-rgb), .22);

      --grid-max: 1240px;
    }

    /* =========================
      BASE
    ========================== */
    html, body { height: 100%; }
    body{
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a{ color: var(--link); text-decoration: none; }
    a:hover{ text-decoration: underline; }

    .container-max{
      max-width: var(--grid-max);
    }

    .h-display{
      font-family: Fraunces, ui-serif, Georgia, serif;
      letter-spacing: -0.02em;
    }

    .text-muted-2{ color: var(--muted) !important; }

    .surface{
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
    }

    .section{
      padding: 42px 0;
    }
    @media (max-width: 575.98px){
      .section{ padding: 34px 0; }
    }

    /* =========================
      HEADER
    ========================== */
    .site-header{
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }
    .site-header .nav-link,
    .site-header .btn,
    .site-header .form-control{
      font-size: 14px;
    }

    .brand-mark{
      display:flex; align-items:center; gap:10px;
    }
    .brand-dot{
      width: 12px; height: 12px; border-radius: 999px;
      background: var(--primary);
      box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .12);
    }
    .brand-name{
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 13px;
    }

    .city-pill{
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: 999px;
      padding: 8px 10px;
      display:flex; align-items:center; gap:8px;
      cursor:pointer;
      transition: box-shadow .2s ease, border-color .2s ease;
      user-select:none;
      white-space:nowrap;
    }
    .city-pill:hover{ box-shadow: var(--shadow-sm); }
    .city-pill .bi{ color: var(--muted); }

    .search-wrap .form-control{
      border-radius: 999px !important;
      border: 1px solid var(--border);
      background: var(--surface);
      padding-left: 42px;
      height: 40px;
    }
    .search-wrap .form-control:focus{
      border-color: var(--primary);
      box-shadow: var(--ring);
    }
    .search-ico{
      position:absolute; left: 14px; top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      pointer-events:none;
    }

    .icon-btn{
      width: 40px; height: 40px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface);
      display:grid;
      place-items:center;
      transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
      position: relative;
    }
    .icon-btn:hover{
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
      border-color: color-mix(in srgb, var(--border) 70%, var(--primary) 30%);
    }
    .icon-btn .bi{ font-size: 18px; color: var(--text); }

    .mini-counter{
      position:absolute;
      right:-2px; top:-2px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      background: var(--primary);
      color: var(--on-primary);
      font-size: 11px;
      display:flex;
      align-items:center;
      justify-content:center;
      border: 2px solid var(--surface);
      line-height: 1;
    }

    /* Theme button in header */
    .theme-btn{
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: 999px;
      padding: 8px 10px;
      height: 40px;
      display:flex;
      align-items:center;
      gap:10px;
      transition: box-shadow .2s ease, transform .15s ease;
      white-space:nowrap;
    }
    .theme-btn:hover{
      box-shadow: var(--shadow-sm);
      transform: translateY(-1px);
    }
    .theme-dots{
      display:flex; gap:5px; align-items:center;
    }
    .theme-dot{
      width: 10px; height: 10px;
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,.06);
    }
    .theme-dot.dot-border{ background: var(--border); }
    .theme-dot.dot-s2{ background: var(--surface-2); }
    .theme-dot.dot-primary{ background: var(--primary); }
    .theme-dot.dot-link{ background: var(--link); }
    .theme-dot.dot-surface{ background: var(--surface); border-color: rgba(0,0,0,.10); }

    .dropdown-menu{
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: var(--shadow-md);
      overflow: hidden;
      background: var(--surface);
    }
    .dropdown-item{
      padding: 10px 12px;
      display:flex;
      gap:12px;
      align-items:center;
      font-size: 14px;
      color: var(--text);
    }
    .dropdown-item:active{ background: rgba(var(--primary-rgb), .10); }
    .dropdown-item:hover{ background: rgba(var(--primary-rgb), .06); }

    .theme-swatch{
      display:flex; gap:5px; align-items:center;
      flex: 0 0 auto;
    }
    .theme-swatch span{
      width: 10px; height: 10px; border-radius: 999px;
      border: 1px solid rgba(0,0,0,.08);
      display:inline-block;
    }

    /* =========================
      BUTTONS (Design tokens applied)
    ========================== */
    .btn{
      border-radius: 999px;
      font-weight: 600;
      padding: 10px 14px;
    }
    .btn-primary{
      background: var(--primary);
      border-color: var(--primary);
      color: var(--on-primary);
      box-shadow: 0 14px 28px rgba(var(--primary-rgb), .18);
    }
    .btn-primary:hover{
      background: var(--primary-hover);
      border-color: var(--primary-hover);
      color: var(--on-primary);
      box-shadow: 0 16px 34px rgba(var(--primary-rgb), .22);
    }
    .btn-primary:focus{
      box-shadow: var(--ring);
    }

    .btn-outline{
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text);
    }
    .btn-outline:hover{
      border-color: color-mix(in srgb, var(--border) 70%, var(--primary) 30%);
      box-shadow: var(--shadow-sm);
      transform: translateY(-1px);
    }
    .btn-outline:focus{ box-shadow: var(--ring); }

    .btn-link-clean{
      background: transparent;
      border: 0;
      color: var(--link);
      padding: 0;
      font-weight: 600;
      text-decoration: none;
    }
    .btn-link-clean:hover{ text-decoration: underline; }

    /* =========================
      CHIPS (filters)
    ========================== */
    .chip-row{
      display:flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items:center;
    }

    .chip{
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      border-radius: 999px;
      padding: 9px 12px;
      font-size: 14px;
      line-height: 1;
      display:inline-flex;
      align-items:center;
      gap:8px;
      cursor:pointer;
      user-select:none;
      transition: background .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease, color .2s ease;
      white-space:nowrap;
    }
    .chip:hover{
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
      border-color: color-mix(in srgb, var(--border) 70%, var(--primary) 30%);
    }
    .chip.is-active{
      background: var(--primary);
      color: var(--on-primary);
      border-color: var(--primary);
      box-shadow: 0 14px 28px rgba(var(--primary-rgb), .18);
    }
    .chip .chip-ico{ color: var(--muted); }
    .chip.is-active .chip-ico{ color: var(--on-primary); opacity: .92; }

    /* =========================
      HERO + DEW PATTERN
    ========================== */
    .hero{
      padding: 34px 0 12px;
      position: relative;
    }
    .dew-surface{
      position: relative;
      border-radius: calc(var(--radius) + 6px);
      overflow: hidden;
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-md);
    }
    .dew-surface::before{
      content:"";
      position:absolute; inset:-1px;
      background:
        radial-gradient(circle at 12% 22%, rgba(var(--primary-rgb), .08) 0 1px, transparent 2px),
        radial-gradient(circle at 28% 64%, rgba(var(--primary-rgb), .06) 0 1px, transparent 2px),
        radial-gradient(circle at 63% 18%, rgba(var(--primary-rgb), .06) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 52%, rgba(var(--primary-rgb), .05) 0 1px, transparent 2px),
        radial-gradient(circle at 88% 78%, rgba(var(--primary-rgb), .04) 0 1px, transparent 2px);
      background-size: 180px 180px, 220px 220px, 200px 200px, 240px 240px, 260px 260px;
      opacity: .42; /* very low contrast */
      pointer-events:none;
      mix-blend-mode: multiply;
    }

    .hero-inner{
      position: relative;
      padding: 26px;
    }
    @media (max-width: 575.98px){
      .hero-inner{ padding: 18px; }
    }

    .hero h1{
      font-size: 52px;
      line-height: 1.05;
      margin-bottom: 14px;
    }
    @media (max-width: 575.98px){
      .hero h1{ font-size: 38px; }
    }

    .trust{
      display:flex;
      flex-wrap: wrap;
      gap: 10px 14px;
      margin: 16px 0 18px;
      color: var(--muted);
      font-size: 14px;
    }
    .trust .trust-item{
      display:inline-flex; align-items:center; gap:8px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.55);
      border-radius: 999px;
      padding: 8px 10px;
      backdrop-filter: blur(6px);
    }
    .trust .bi{ color: var(--link); }

    .hero-media{
      border-radius: calc(var(--radius) + 2px);
      overflow:hidden;
      border: 1px solid var(--border);
      background: var(--surface);
      position: relative;
      box-shadow: var(--shadow-sm);
      height: 100%;
      min-height: 320px;
    }
    .collage{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      grid-template-rows: 1fr 1fr;
      gap: 10px;
      height: 100%;
      padding: 10px;
      position: relative;
    }
    .collage img{
      width:100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
    }
    .collage .img-big{
      grid-row: 1 / span 2;
      grid-column: 1 / 2;
    }
    .hero-caption{
      font-size: 14px;
      color: var(--muted);
    }

    /* Theme preview strip (inside hero, after chips) */
    .theme-preview-strip{
      margin-top: 16px;
      display:flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: stretch;
    }
    .theme-preview-box{
      flex: 1 1 220px;
      min-width: 220px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--surface);
      overflow:hidden;
      box-shadow: var(--shadow-sm);
    }
    .theme-preview-box .tp-head{
      display:flex;
      justify-content: space-between;
      align-items:center;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }
    .theme-preview-box .tp-title{
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .01em;
    }
    .theme-preview-box .tp-body{
      padding: 12px;
      background: var(--bg);
    }
    .theme-preview-box .tp-mini-card{
      border-radius: 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      padding: 12px;
      display:flex;
      gap: 10px;
      align-items:center;
    }
    .theme-preview-box .tp-mini-card img{
      width: 52px; height: 52px;
      border-radius: 14px;
      object-fit: cover;
      border: 1px solid var(--border);
    }
    .theme-preview-box .tp-mini-card .name{
      font-size: 13px;
      font-weight: 600;
      line-height: 1.2;
    }
    .theme-preview-box .tp-mini-card .price{
      font-size: 13px;
      color: var(--muted);
    }
    .theme-preview-box .tp-actions{
      margin-top: 10px;
      display:flex;
      gap: 10px;
    }
    .theme-preview-box .btn{
      padding: 8px 12px;
      font-size: 13px;
    }

    /* =========================
      PRODUCT GRID + CARD
    ========================== */
    .section-title{
      display:flex;
      align-items: end;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .section-title h2{
      font-size: 34px;
      margin: 0;
      line-height: 1.05;
    }
    @media (max-width: 575.98px){
      .section-title h2{ font-size: 30px; }
    }
    .section-sub{
      font-size: 14px;
      color: var(--muted);
      margin-top: 8px;
    }

    .product-card{
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow:hidden;
      height: 100%;
      position: relative;
      transition: transform .18s ease, box-shadow .22s ease;
      box-shadow: var(--shadow-sm);
    }
    .product-card::after{
      /* Morning glare */
      content:"";
      position:absolute;
      inset:0;
      background: radial-gradient(600px 180px at 30% 0%, rgba(var(--primary-rgb), .12), transparent 55%);
      opacity: 0;
      transition: opacity .22s ease;
      pointer-events:none;
    }
    .product-card:hover{
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }
    .product-card:hover::after{ opacity: .55; }

    .product-media{
      position: relative;
      background: var(--surface-2);
      border-bottom: 1px solid var(--border);
    }
    .product-media img{
      width: 100%;
      height: 220px;
      object-fit: cover;
      display:block;
    }
    @media (max-width: 575.98px){
      .product-media img{ height: 190px; }
    }

    .badge-soft{
      position:absolute;
      left: 12px;
      top: 12px;
      border-radius: 999px;
      padding: 7px 10px;
      font-size: 12px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.72);
      backdrop-filter: blur(8px);
      color: var(--text);
      display:inline-flex;
      gap: 6px;
      align-items:center;
    }
    .badge-soft .bi{ color: var(--link); }

    .product-body{
      padding: 14px 14px 16px;
      position: relative;
      z-index: 1;
    }
    .product-name{
      font-size: 16px;
      line-height: 1.25;
      margin: 0 0 8px;
      font-weight: 600;
    }
    .price-row{
      display:flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
    }
    .price{
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    .price small{
      font-size: 12px;
      color: var(--muted);
      font-weight: 600;
      margin-left: 6px;
    }

    .size-switch{
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 4px;
      display:inline-flex;
      gap: 4px;
      background: var(--surface);
    }
    .size-btn{
      border: 0;
      background: transparent;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 12px;
      color: var(--muted);
      font-weight: 700;
      cursor:pointer;
      transition: background .18s ease, color .18s ease;
    }
    .size-btn.is-active{
      background: var(--surface-2);
      color: var(--text);
      border: 1px solid var(--border);
    }

    .product-actions{
      margin-top: 12px;
      display:flex;
      gap: 10px;
      align-items:center;
    }
    .product-actions .btn{
      width: 100%;
      padding: 10px 12px;
    }

    /* =========================
      CATEGORIES
    ========================== */
    .cat-tile{
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: var(--shadow-sm);
      padding: 14px;
      height: 100%;
      display:flex;
      flex-direction: column;
      gap: 10px;
      transition: transform .18s ease, box-shadow .22s ease;
      position: relative;
      overflow:hidden;
    }
    .cat-tile::after{
      content:"";
      position:absolute;
      inset:0;
      background: radial-gradient(520px 160px at 20% 0%, rgba(var(--primary-rgb), .10), transparent 60%);
      opacity: 0;
      transition: opacity .22s ease;
      pointer-events:none;
    }
    .cat-tile:hover{
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
    }
    .cat-tile:hover::after{ opacity: .6; }

    .cat-ico{
      width: 44px; height: 44px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: var(--surface-2);
      display:grid; place-items:center;
      color: var(--link);
      font-size: 18px;
    }
    .cat-title{
      margin: 0;
      font-weight: 700;
      font-size: 16px;
      letter-spacing: -0.01em;
    }
    .cat-sub{
      margin: 0;
      font-size: 13px;
      color: var(--muted);
    }

    /* =========================
      DELIVERY/GUARANTEES
    ========================== */
    .soft-panel{
      border-radius: calc(var(--radius) + 6px);
      border: 1px solid var(--border);
      background: var(--surface-2);
      padding: 18px;
      position: relative;
      overflow:hidden;
    }
    .soft-panel::before{
      content:"";
      position:absolute;
      inset:-1px;
      background:
        radial-gradient(circle at 18% 26%, rgba(var(--primary-rgb), .06) 0 1px, transparent 2px),
        radial-gradient(circle at 76% 34%, rgba(var(--primary-rgb), .05) 0 1px, transparent 2px),
        radial-gradient(circle at 62% 78%, rgba(var(--primary-rgb), .04) 0 1px, transparent 2px);
      background-size: 240px 240px, 260px 260px, 220px 220px;
      opacity: .45;
      pointer-events:none;
      mix-blend-mode: multiply;
    }
    .soft-panel > *{ position: relative; z-index: 1; }

    .step{
      display:flex;
      gap: 12px;
      align-items:flex-start;
      padding: 10px 0;
    }
    .step + .step{
      border-top: 1px dashed color-mix(in srgb, var(--border) 85%, var(--primary) 15%);
    }
    .step-ico{
      width: 40px; height: 40px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: var(--surface);
      display:grid; place-items:center;
      color: var(--link);
      flex: 0 0 auto;
    }
    .step-title{
      margin: 0 0 2px;
      font-weight: 700;
      font-size: 14px;
    }
    .step-text{
      margin: 0;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.35;
    }

    /* =========================
      HELP STRIPE
    ========================== */
    .help-stripe{
      border-radius: calc(var(--radius) + 8px);
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: var(--shadow-md);
      overflow:hidden;
    }
    .help-stripe .inner{
      padding: 18px;
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      position: relative;
    }
    .help-stripe .inner::before{
      content:"";
      position:absolute;
      inset:-1px;
      background: radial-gradient(700px 220px at 18% 0%, rgba(var(--primary-rgb), .12), transparent 60%);
      opacity: .55;
      pointer-events:none;
    }
    .help-stripe .inner > *{ position: relative; z-index: 1; }

    .help-title{
      margin: 0;
      font-weight: 800;
      font-size: 18px;
      letter-spacing: -0.01em;
    }
    .help-sub{
      margin: 4px 0 0;
      font-size: 13px;
      color: var(--muted);
    }

    /* =========================
      FOOTER
    ========================== */
    footer{
      padding: 34px 0 46px;
      border-top: 1px solid var(--border);
    }
    .footer-title{
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 10px;
      color: var(--text);
    }
    .footer-link{
      display:block;
      color: var(--muted);
      font-size: 14px;
      padding: 6px 0;
      text-decoration: none;
    }
    .footer-link:hover{ color: var(--text); text-decoration: none; }

    /* =========================
      UI KIT BUTTON + OFFCANVAS
    ========================== */
    .uikit-fab{
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 1045;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: var(--shadow-md);
      padding: 10px 12px;
      display:flex;
      align-items:center;
      gap: 10px;
      cursor:pointer;
      user-select:none;
      transition: transform .15s ease, box-shadow .2s ease;
    }
    .uikit-fab:hover{ transform: translateY(-2px); }
    .uikit-fab .pill{
      width: 10px; height: 10px; border-radius: 999px;
      background: var(--primary);
      box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .12);
    }
    .offcanvas{
      background: var(--bg);
      color: var(--text);
      border-left: 1px solid var(--border);
    }
    .offcanvas .surface{
      background: var(--surface);
    }
    .offcanvas .form-control{
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--surface);
    }
    .offcanvas .form-control:focus{
      border-color: var(--primary);
      box-shadow: var(--ring);
    }

    /* Bootstrap overrides that must obey tokens */
    .modal-content{
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: var(--shadow-md);
    }
    .modal-header{
      border-bottom: 1px solid var(--border);
    }
    .modal-footer{
      border-top: 1px solid var(--border);
    }
    .progress{
      background: color-mix(in srgb, var(--surface-2) 80%, #ffffff 20%);
      border-radius: 999px;
      height: 8px;
    }
    .progress-bar{
      background: var(--primary);
    }

    /* Utility: no visible focus ring only where needed? keep accessible */
    .focus-demo:focus{
      outline: none;
      box-shadow: var(--ring);
    }
    
/* =========================
  FLOATING THEME BUTTON
  Always top-right, visible on mobile
========================= */
.theme-float{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  z-index: 1031; /* above sticky header, below offcanvas/modal */
}

.theme-btn.theme-btn--float{
  box-shadow: var(--shadow-sm);
}

.theme-btn.theme-btn--float:hover{
  box-shadow: var(--shadow-md);
}

/* On mobile: move below header so it doesn't overlap the right-side header buttons */
@media (max-width: 991.98px){
  .theme-float{
    top: calc(env(safe-area-inset-top, 0px) + 62px);
    right: calc(env(safe-area-inset-right, 0px) + 12px);
  }
}

/* On very small screens: make the button more compact */
@media (max-width: 575.98px){
  .theme-btn.theme-btn--float{
    padding: 8px 10px;
    gap: 8px;
  }
}