
    :root{
      /* 🎨 Paleta principal (ajusta rápido aquí) */
      --bg:#ffffff;         /* fondo global – blanco */
      --fg:#0f172a;         /* texto principal – gris azulado muy oscuro */
      --muted:#6b7280;      /* texto secundario */
      --accent:#ec4899;     /* rosa (botones/badges) */
      --accent-600:#db2777; /* rosa oscuro hover */
      --brand:#111827;      /* casi negro (chips, footer) */
      --card:#ffffff;       /* cards */
      --radius:22px;
      --shadow:0 10px 30px rgba(0,0,0,.12);
      --container:1200px;
    }

    #bakery-landing *{box-sizing:border-box}
    #bakery-landing{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Noto Sans", "Helvetica Neue", sans-serif; color:var(--fg); background:var(--bg)}
    #bakery-landing img{max-width:100%; display:block}
    #bakery-landing a{text-decoration:none; color:inherit}

    /* Utilidades rápidas */
    .container{max-width:var(--container); margin-inline:auto; padding-inline:24px}
    .btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.95rem 1.4rem; border-radius:999px; font-weight:600; transition:.25s transform, .25s background-color, .25s color, .25s box-shadow}
    .btn-primary{background:var(--accent); color:#fff; box-shadow:var(--shadow)}
    .btn-primary:hover{background:var(--accent-600); transform:translateY(-1px)}
    .btn-ghost{background:#fff; border:1px solid #e5e7eb; color:var(--fg)}
    .btn-ghost:hover{border-color:#d1d5db; transform:translateY(-1px)}
    .badge{font-size:.8rem; letter-spacing:.15em; font-weight:700}

    /* Nav */
    .nav {
      position: fixed;
      top: 0;
      width: 100%;
      backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.7);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      z-index: 999;
      transition: .3s padding, .3s box-shadow, .3s background;
    }
    .nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem}
    .nav .brand{font-size:1.4rem; font-weight:800}
    .nav .brand .pink{color:var(--accent)}
    .nav-center{flex:1; display:flex; justify-content:center}
    .nav .links{display:none; gap:1.25rem}
    .nav a.nav-link{padding:.5rem .25rem; border-bottom:2px solid transparent; color:var(--fg)}
    .nav a.nav-link.active{border-color:var(--accent); color:var(--accent)}
    .nav.scrolled{background:#fff; box-shadow:0 6px 22px rgba(0,0,0,.08); padding-block:.65rem}
    .nav:not(.scrolled){padding-block:1rem}

    /* Nav Actions */
    .nav-actions{display:flex; align-items:center; gap:1rem}
    .nav-action-btn{display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem; background:transparent; border:none; color:var(--fg); cursor:pointer; font-size:.95rem; transition:.2s color; position:relative}
    .nav-action-btn:hover{color:var(--accent)}
    .icon-action{flex-shrink:0}
    
    /* User Menu Dropdown */
    .user-menu{position:fixed; background:#fff; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.15); padding:.5rem 0; margin-top:.5rem; min-width:200px; z-index:1000; animation:slideDown 0.2s ease}
    @keyframes slideDown{from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:translateY(0)}}
    .user-menu .logout-btn{width:100%; text-align:left; padding:.75rem 1rem; border:none; background:none; cursor:pointer; color:var(--fg); transition:.2s background; font-size:.95rem}
    .user-menu .logout-btn:hover{background:#f9fafb}
    
    /* Search */
    .search-container{position:relative}
    .search-btn{display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem; background:transparent; border:none; color:var(--fg); cursor:pointer; font-size:.95rem; transition:.2s color}
    .search-btn:hover{color:var(--accent)}
    .icon-search{flex-shrink:0}
    .search-text{white-space:nowrap}
    
    .search-overlay{position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:1000; display:none; align-items:flex-start; justify-content:center; padding-top:120px; backdrop-filter:blur(4px)}
    .search-overlay.active{display:flex}
    .search-box{background:#fff; border-radius:12px; padding:1rem; width:90%; max-width:600px; display:flex; gap:1rem; align-items:center; box-shadow:0 10px 40px rgba(0,0,0,.2)}
    .search-box input{flex:1; padding:.75rem 1rem; border:2px solid #e5e7eb; border-radius:8px; font-size:1rem; outline:none; transition:.2s border-color}
    .search-box input:focus{border-color:var(--accent)}
    .search-close{background:none; border:none; font-size:2rem; color:var(--muted); cursor:pointer; line-height:1; padding:0; width:32px; height:32px; display:flex; align-items:center; justify-content:center; transition:.2s color}
    .search-close:hover{color:var(--fg)}
    .search-results{background:#fff; border-radius:12px; margin-top:1rem; width:90%; max-width:600px; max-height:400px; overflow-y:auto; box-shadow:0 10px 40px rgba(0,0,0,.2); display:none}
    .search-results.active{display:block}
    .search-result-item{padding:1rem; border-bottom:1px solid #e5e7eb; cursor:pointer; transition:.2s background}
    .search-result-item:hover{background:#f9fafb}
    .search-result-item:last-child{border-bottom:none}
    
    /* Cart Badge */
    .cart-badge{position:absolute; top:-4px; right:-4px; background:var(--accent); color:#fff; border-radius:50%; width:18px; height:18px; display:none; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; line-height:1}

    /* Modal */
    .modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:2000; display:none; align-items:center; justify-content:center; padding:1rem; backdrop-filter:blur(4px)}
    .modal-overlay.active{display:flex}
    .modal-content{background:#fff; border-radius:var(--radius); padding:2rem; width:90%; max-width:450px; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.3); max-height:90vh; overflow-y:auto}
    .modal-close{position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:2rem; color:var(--muted); cursor:pointer; line-height:1; padding:0; width:32px; height:32px; display:flex; align-items:center; justify-content:center; transition:.2s color}
    .modal-close:hover{color:var(--fg)}
    .modal-content h2{margin:0 0 1.5rem; font-size:1.8rem; font-weight:800}
    
    /* Form */
    .form-group{margin-bottom:1.25rem}
    .form-group label{display:block; margin-bottom:.5rem; font-weight:600; color:var(--fg)}
    .form-group input{width:100%; padding:.75rem; border:2px solid #e5e7eb; border-radius:8px; font-size:1rem; outline:none; transition:.2s border-color}
    .form-group input:focus{border-color:var(--accent)}
    .modal-footer-text{margin-top:1.5rem; text-align:center; color:var(--muted); font-size:.9rem}
    .modal-footer-text a{color:var(--accent); font-weight:600}
    
    /* Cart Modal */
    .cart-modal{max-width:500px}
    .cart-items{min-height:200px; max-height:400px; overflow-y:auto}
    .cart-empty{text-align:center; color:var(--muted); padding:2rem 0}
    .cart-item{display:flex; gap:1rem; padding:1rem; border-bottom:1px solid #e5e7eb; align-items:center}
    .cart-item:last-child{border-bottom:none}
    .cart-item-info{flex:1}
    .cart-item-name{font-weight:600; margin-bottom:.25rem}
    .cart-item-price{color:var(--accent); font-weight:600}
    .cart-item-remove{background:none; border:none; color:var(--muted); cursor:pointer; padding:.5rem; transition:.2s color}
    .cart-item-remove:hover{color:#ef4444}
    .cart-footer{border-top:2px solid #e5e7eb; padding-top:1.5rem; margin-top:1.5rem}
    .cart-total{text-align:right; margin-bottom:1rem; font-size:1.2rem}
    .cart-total span{color:var(--accent)}

    @media (min-width: 768px){
      .nav .links{display:flex}
      .nav .brand{font-size:1.6rem}
    }
    
    @media (max-width: 767px){
      .nav-center{display:none}
      .search-text, .nav-action-btn span{display:none}
      .search-btn, .nav-action-btn{padding:.5rem}
    }

    /* Hero */
    .hero{position:relative; min-height:100svh; display:flex; align-items:flex-start; justify-content:center; overflow:hidden; background:linear-gradient(135deg,#f9fafb 0%, #ffffff 60%); padding-top:clamp(80px, 12vh, 120px)}
    .hero .blob{position:absolute; filter:blur(60px); opacity:.25; pointer-events:none}
    .blob.pink{background:var(--accent); width:380px; height:380px; border-radius:999px; top:12%; left:8%}
    .blob.dark{background:#111827; width:520px; height:520px; border-radius:999px; right:6%; bottom:10%}
    .hero .inner{text-align:center; position:relative; z-index:1; width:100%; max-width:var(--container); padding-inline:24px}
    .hero h1{font-size:clamp(2.8rem, 6vw, 5.5rem); line-height:1.05; margin:0 0 12px; font-weight:800}
    .hero h1 .pink{color:var(--accent); font-size:clamp(1.8rem, 4vw, 3rem)}
    .hero p{max-width:46ch; margin:0 auto 2rem; color:var(--muted); font-size:clamp(1.05rem,2.2vw,1.25rem)}
    .hero .cta{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap}
    .scroll-down{position:absolute; left:50%; transform:translateX(-50%); bottom:26px; animation:bounce 1.6s infinite}
    @keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-8px)}}
    
    /* Hero Responsive Adjustments */
    @media (min-width: 768px) and (max-width: 1023px){
      .hero{padding-top:clamp(100px, 15vh, 140px)}
    }
    @media (min-width: 1024px){
      .hero{padding-top:clamp(120px, 18vh, 160px)}
    }
    @media (max-width: 767px){
      .hero{padding-top:clamp(60px, 10vh, 100px)}
    }

    /* Secciones base */
    section.section{padding:clamp(64px, 8vw, 100px) 0}
    .section h2{font-size:clamp(2.2rem, 4vw, 3.2rem); margin:0 0 10px; font-weight:800}
    .muted{color:var(--muted)}

    /* About grid */
    .about-grid{display:grid; gap:2rem}
    @media (min-width: 900px){ .about-grid{grid-template-columns:1.2fr 1fr} }
    .stat-cards{display:flex; gap:1rem; padding-top:12px}
    .stat{flex:1; border-radius:18px; padding:22px; background:#fff; box-shadow:var(--shadow)}
    .stat.pink{background:#fdf2f8} /* rosa 50 */
    .stat h3{margin:0 0 6px; font-size:2rem; font-weight:800}
    .frame{position:relative; height:360px; border-radius:28px; padding:60px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#f3f4f6, #e5e7eb); transform:rotate(-2deg); transition:.35s transform; box-shadow:var(--shadow)}
    .frame::before{content:""; position:absolute; inset:-10px; border-radius:30px; background:var(--accent); z-index:-1; transform:rotate(3deg)}
    .frame:hover{transform:rotate(0)}

    /* Products */
    .cards{display:grid; gap:1.2rem; justify-content:center}
    @media (min-width: 900px){ .cards{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); max-width:400px; margin:0 auto} }
    .card{background:var(--card); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); transition:.3s transform, .3s box-shadow}
    .card:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.12)}
    .card .emoji{font-size:48px; margin-bottom:8px}
    .card h3{margin:6px 0 10px; font-size:1.25rem; font-weight:800}
    .card:hover h3{color:var(--accent)}
    
    /* Featured Cakes Slider */
    .featured-slider-container{
      margin: 3rem 0 4rem;
      padding: 0 1rem;
      width: 100%;
      display: block;
      visibility: visible;
      opacity: 1;
    }
    .featured-slider{
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
      display: block;
    }
    .slider-track{
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      border-radius: var(--radius);
      position: relative;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      width: 100%;
      min-height: 400px;
    }
    .slider-track::-webkit-scrollbar{
      display: none;
    }
    .slider-track{
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .slider-slide{
      min-width: 100%;
      width: 100%;
      flex-shrink: 0;
      scroll-snap-align: start;
      display: flex;
      gap: 2rem;
      padding: 2rem;
      background: #fff;
      border-radius: var(--radius);
      box-shadow: 0 10px 40px rgba(0,0,0,.1);
      flex-direction: column;
      box-sizing: border-box;
    }
    @media (min-width: 900px){
      .slider-slide{
        flex-direction: row;
        align-items: center;
      }
    }
    .slide-image-container{
      flex: 1;
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      background: #f9fafb;
      aspect-ratio: 1;
      max-width: 100%;
      min-height: 300px;
    }
    @media (min-width: 900px){
      .slide-image-container{
        max-width: 500px;
      }
    }
    .slide-image{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .slide-content{
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding: 1.5rem 0;
      min-width: 0;
    }
    .slide-review-card{
      background: #f9fafb;
      border-radius: 16px;
      padding: 1.5rem;
      border: 1px solid #e5e7eb;
      transition: .3s box-shadow;
    }
    .slide-review-card:hover{
      box-shadow: 0 8px 24px rgba(0,0,0,.1);
    }
    .review-card-header{
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 1rem;
      flex-wrap: wrap;
      gap: 0.75rem;
    }
    .review-card-stars{
      color: #fbbf24;
      font-size: 1.1rem;
      letter-spacing: 2px;
      line-height: 1;
    }
    .review-card-author{
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
    }
    .review-card-author-name{
      font-weight: 700;
      color: var(--fg);
      font-size: 0.95rem;
    }
    .review-card-verified{
      background: #8b4513;
      color: #fff;
      font-size: 0.65rem;
      padding: 0.2rem 0.5rem;
      border-radius: 4px;
      font-weight: 600;
      text-transform: uppercase;
    }
    .review-card-meta{
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      font-size: 0.85rem;
      color: var(--muted);
      margin-bottom: 1rem;
    }
    .review-card-comment{
      color: var(--fg);
      line-height: 1.6;
      font-size: 0.95rem;
      margin-bottom: 1rem;
    }
    .review-card-rating{
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 1rem;
      flex-wrap: wrap;
    }
    .review-card-rating-value{
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--fg);
    }
    .review-card-rating-stars{
      color: #fbbf24;
      font-size: 1rem;
    }
    .review-card-button{
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1.5rem;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 999px;
      font-weight: 600;
      cursor: pointer;
      transition: .3s transform, .3s background;
      text-decoration: none;
      font-size: 0.9rem;
    }
    .review-card-button:hover{
      background: var(--accent-600);
      transform: translateY(-2px);
    }
    .slider-nav-btn{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: .3s all;
      box-shadow: 0 4px 12px rgba(0,0,0,.1);
      color: var(--fg);
    }
    .slider-nav-btn:hover{
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
      transform: translateY(-50%) scale(1.1);
    }
    .slider-nav-btn:active{
      transform: translateY(-50%) scale(0.95);
    }
    .slider-prev{
      left: -24px;
    }
    .slider-next{
      right: -24px;
    }
    @media (max-width: 1024px){
      .slider-nav-btn{
        width: 40px;
        height: 40px;
      }
      .slider-prev{
        left: -20px;
      }
      .slider-next{
        right: -20px;
      }
    }
    @media (max-width: 768px){
      .slider-nav-btn{
        width: 36px;
        height: 36px;
        opacity: 0.9;
      }
      .slider-prev{
        left: 8px;
      }
      .slider-next{
        right: 8px;
      }
      .featured-slider-container{
        padding: 0 0.5rem;
      }
    }
    .slider-dots{
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      margin-top: 1.5rem;
      flex-wrap: wrap;
    }
    .slider-dot{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #d1d5db;
      border: none;
      cursor: pointer;
      transition: .3s all;
      padding: 0;
    }
    .slider-dot:hover{
      background: var(--accent);
      transform: scale(1.2);
    }
    .slider-dot.active{
      background: var(--accent);
      width: 24px;
      border-radius: 5px;
    }
    
    /* Cakes Gallery */
    .cakes-gallery{display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); max-width:1400px; margin:0 auto; margin-top:3rem}
    @media (min-width: 768px){ .cakes-gallery{grid-template-columns:repeat(3, 1fr)} }
    @media (min-width: 1200px){ .cakes-gallery{grid-template-columns:repeat(4, 1fr)} }
    .cake-item{position:relative; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow); transition:.3s transform, .3s box-shadow; aspect-ratio:1; background:#f3f4f6; cursor:pointer}
    .cake-item:hover{transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,.15)}
    .cake-image{width:100%; height:100%; object-fit:cover; display:block; transition:.3s transform}
    .cake-item:hover .cake-image{transform:scale(1.05)}
    
    /* Product Detail Modal */
    .product-detail-overlay{z-index:3000}
    .product-detail-modal{background:#fff; border-radius:var(--radius); width:95%; max-width:1200px; max-height:95vh; overflow-y:auto; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.3); padding:2rem}
    .product-detail-container{display:grid; gap:3rem; grid-template-columns:1fr}
    @media (min-width: 900px){ .product-detail-container{grid-template-columns:1fr 1fr} }
    
    /* Product Images */
    .product-images{display:flex; flex-direction:column; gap:1rem}
    .product-main-image{width:100%; aspect-ratio:1; border-radius:var(--radius); overflow:hidden; background:#f9fafb}
    .product-main-image img{width:100%; height:100%; object-fit:cover; display:block}
    .product-thumbnails{display:grid; grid-template-columns:repeat(auto-fit, minmax(60px, 1fr)); gap:0.75rem; max-width:100%}
    .product-thumbnail{aspect-ratio:1; border-radius:12px; overflow:hidden; cursor:pointer; border:2px solid transparent; transition:.2s border-color; background:#f9fafb}
    .product-thumbnail:hover{border-color:var(--accent)}
    .product-thumbnail.active{border-color:var(--accent)}
    .product-thumbnail img{width:100%; height:100%; object-fit:cover; display:block}
    
    /* Product Info */
    .product-info{display:flex; flex-direction:column; gap:1rem}
    .breadcrumbs{font-size:0.9rem; color:var(--muted); margin-bottom:0.5rem}
    .breadcrumbs a{color:var(--accent); text-decoration:none}
    .breadcrumbs a:hover{text-decoration:underline}
    .product-title{font-size:2.5rem; font-weight:800; margin:0; color:var(--fg); line-height:1.2}
    .product-rating{display:flex; align-items:center; gap:0.75rem; margin:0.5rem 0}
    .stars{color:#fbbf24; font-size:1.2rem; letter-spacing:2px}
    .reviews-count{color:var(--muted); font-size:0.95rem}
    .product-price{font-size:2rem; font-weight:800; color:var(--fg); margin:1rem 0}
    .tax-note{display:block; font-size:0.9rem; color:var(--muted); font-weight:400; margin-top:0.25rem}
    
    /* Product Options */
    .product-options{margin:1.5rem 0}
    .form-select{width:100%; padding:.75rem; border:2px solid #e5e7eb; border-radius:8px; font-size:1rem; outline:none; transition:.2s border-color; background:#fff; cursor:pointer}
    .form-select:focus{border-color:var(--accent)}
    .form-input{width:100%; padding:.75rem; border:2px solid #e5e7eb; border-radius:8px; font-size:1rem; outline:none; transition:.2s border-color}
    .form-input:focus{border-color:var(--accent)}
    
    /* Product Description */
    .product-description{margin-top:2rem; padding-top:2rem; border-top:1px solid #e5e7eb; color:var(--fg); line-height:1.6}
    .product-description p{margin:0.75rem 0}
    .product-description strong{display:block; margin-top:1rem; font-weight:600}
    /* Descripción elegante en modal de producto */
    .product-description-elegant{margin-top:1.25rem; padding:1.25rem 0; border-top:1px solid #e5e7eb; font-family:Georgia, "Times New Roman", "Liberation Serif", serif; font-size:1.05rem; line-height:1.75; letter-spacing:0.02em; color:#374151}
    .product-description-elegant p{margin:0.5rem 0}
    .product-description-elegant strong{font-weight:600; margin-top:0.75rem}
    .add-to-cart-detail{margin-bottom:0.5rem}
    
    /* Product Addons */
    .product-addons{margin-top:2rem; padding-top:2rem; border-top:1px solid #e5e7eb}
    .product-addons h3{font-size:1.3rem; font-weight:700; margin-bottom:1rem; color:var(--fg)}
    .addons-list{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr))}
    .addon-item{display:flex; flex-direction:column; align-items:center; padding:1rem; border:2px solid #e5e7eb; border-radius:12px; cursor:pointer; transition:.2s border-color, .2s background; text-align:center}
    .addon-item:hover{border-color:var(--accent); background:#fdf2f8}
    .addon-item.selected{border-color:var(--accent); background:#fdf2f8}
    .addon-item input[type="radio"]{margin-bottom:0.5rem}
    .addon-image{width:80px; height:80px; object-fit:cover; border-radius:8px; margin-bottom:0.5rem}
    .addon-name{font-weight:600; font-size:0.9rem; margin-bottom:0.25rem; color:var(--fg)}
    .addon-price{color:var(--accent); font-weight:600; font-size:0.95rem}

    /* Reviews Section */
    .reviews-section{padding:clamp(64px, 8vw, 100px) 0}
    .reviews-summary{display:grid; gap:2rem; margin-bottom:3rem; padding:2rem; background:#f9fafb; border-radius:var(--radius)}
    @media (min-width: 900px){ .reviews-summary{grid-template-columns:1.5fr 1fr} }
    
    /* Rating Overview */
    .rating-overview{display:flex; flex-direction:column; gap:1.5rem}
    .rating-number{text-align:center}
    .rating-value{font-size:4rem; font-weight:800; color:var(--fg); display:block; line-height:1}
    .rating-stars-large{font-size:1.5rem; color:#fbbf24; letter-spacing:4px; margin:0.5rem 0}
    .rating-count{color:var(--muted); font-size:0.95rem; margin-top:0.5rem}
    .rating-breakdown{display:flex; flex-direction:column; gap:0.75rem}
    .star-bar-item{display:flex; align-items:center; gap:0.75rem}
    .star-label{font-weight:600; width:20px; color:var(--fg)}
    .star-bar{flex:1; height:8px; background:#e5e7eb; border-radius:4px; overflow:hidden; position:relative}
    .star-bar-fill{height:100%; background:var(--accent); border-radius:4px; transition:width 0.3s ease}
    .star-count{font-size:0.9rem; color:var(--muted); min-width:40px; text-align:right}
    
    /* Authenticity Badges */
    .authenticity-badges{display:flex; flex-direction:column; gap:1rem}
    .badge-item{display:flex; align-items:center; gap:1rem; padding:1rem; background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.1)}
    .badge-item.gold{border-left:4px solid #fbbf24}
    .badge-item.diamond{border-left:4px solid #60a5fa}
    .badge-icon{font-size:2rem}
    .badge-info{flex:1}
    .badge-title{font-size:0.75rem; font-weight:700; letter-spacing:0.1em; color:var(--muted); margin-bottom:0.25rem}
    .badge-value{font-size:1.5rem; font-weight:800; color:var(--fg)}
    
    /* Customer Photos */
    .customer-photos-section{margin:3rem 0}
    .photos-title{font-size:1.3rem; font-weight:700; margin-bottom:1.5rem; color:var(--fg)}
    .photos-gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:1rem; margin-bottom:1rem}
    @media (min-width: 768px){ .photos-gallery{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr))} }
    .photo-item{position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; cursor:pointer; transition:.3s transform}
    .photo-item:hover{transform:scale(1.05)}
    .photo-item img{width:100%; height:100%; object-fit:cover; display:block}
    .see-more-btn{background:none; border:none; color:var(--accent); font-weight:600; cursor:pointer; padding:0.5rem 0; text-decoration:underline}
    
    /* Reviews List */
    .reviews-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1.5rem; margin-top:3rem}
    @media (min-width: 900px){ .reviews-list{grid-template-columns:repeat(3, 1fr)} }
    .review-item{background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:1.25rem; transition:.2s box-shadow; display:flex; flex-direction:column; box-shadow:0 2px 8px rgba(0,0,0,.05)}
    .review-item:hover{box-shadow:0 4px 12px rgba(0,0,0,.1)}
    .review-header{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.75rem}
    .review-rating-date{display:flex; justify-content:space-between; align-items:flex-start; width:100%; margin-bottom:0.75rem}
    .review-stars-header{color:#fbbf24; font-size:1rem; letter-spacing:1px}
    .review-date{color:var(--muted); font-size:0.85rem}
    .reviewer-info{display:flex; flex-direction:column; gap:0.25rem; margin-bottom:0.75rem}
    .reviewer-name-row{display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap}
    .reviewer-name{font-weight:700; color:var(--fg); font-size:0.95rem; display:inline-block}
    .verified-badge{background:#8b4513; color:#fff; font-size:0.65rem; padding:0.2rem 0.5rem; border-radius:4px; font-weight:600; text-transform:uppercase}
    .reviewer-location{color:var(--muted); font-size:0.85rem}
    .review-title{font-weight:700; font-size:0.95rem; color:var(--fg); margin-bottom:0.5rem; line-height:1.3}
    .review-comment{color:var(--fg); line-height:1.5; margin-bottom:0.75rem; font-size:0.9rem; flex:1}
    .review-image{width:100%; border-radius:8px; margin-top:0.75rem; cursor:pointer; object-fit:cover; max-height:250px}
    .review-footer{display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:0.75rem; border-top:1px solid #e5e7eb}
    .review-social{display:flex; align-items:center; gap:0.75rem}
    .social-icon{width:20px; height:20px; color:var(--muted); cursor:pointer; transition:.2s color}
    .social-icon:hover{color:var(--accent)}
    .review-likes{display:flex; align-items:center; gap:0.5rem}
    .like-btn, .dislike-btn{background:none; border:none; color:var(--muted); cursor:pointer; font-size:1rem; transition:.2s color; padding:0.25rem; display:flex; align-items:center; gap:0.25rem}
    .like-btn:hover, .dislike-btn:hover{color:var(--accent)}
    .like-btn.liked{color:var(--accent)}
    .dislike-btn.disliked{color:#ef4444}
    .likes-count{font-size:0.85rem; color:var(--muted)}
    
    /* Write Review Modal */
    .review-modal{max-width:600px}
    .star-rating-input{display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:0.5rem}
    .star-rating-input input[type="radio"]{display:none}
    .star-label-input{font-size:2rem; color:#e5e7eb; cursor:pointer; transition:.2s color; user-select:none}
    .star-rating-input input[type="radio"]:checked ~ .star-label-input,
    .star-rating-input input[type="radio"]:checked + .star-label-input,
    .star-rating-input:hover .star-label-input{color:#fbbf24}
    .star-rating-input .star-label-input:hover,
    .star-rating-input .star-label-input:hover ~ .star-label-input{color:#fbbf24}
    .form-textarea{width:100%; padding:.75rem; border:2px solid #e5e7eb; border-radius:8px; font-size:1rem; outline:none; transition:.2s border-color; font-family:inherit; resize:vertical}
    .form-textarea:focus{border-color:var(--accent)}
    .photo-preview{position:relative; margin-top:1rem; display:inline-block}
    .photo-preview img{max-width:200px; max-height:200px; border-radius:8px; object-fit:cover}
    .remove-photo-btn{position:absolute; top:-10px; right:-10px; background:var(--accent); color:#fff; border:none; border-radius:50%; width:24px; height:24px; cursor:pointer; font-size:1.2rem; line-height:1; display:flex; align-items:center; justify-content:center}
    
    /* Responsive */
    @media (max-width: 768px){
      .reviews-summary{grid-template-columns:1fr}
      .rating-value{font-size:3rem}
      .badge-item{flex-direction:column; text-align:center}
      .review-header{flex-direction:column}
      .reviewer-info{width:100%}
      .photos-gallery{grid-template-columns:repeat(3, 1fr)}
    }

    /* Contact */
    .contact-grid{display:grid; gap:1.2rem; margin-bottom:26px}
    @media (min-width: 900px){ .contact-grid{grid-template-columns:repeat(3,1fr)} }
    .contact-box{background:#f9fafb; border-radius:var(--radius); padding:26px; text-align:center; transition:.25s background-color}
    .contact-box:hover{background:#fdf2f8}

    /* Iconitos (SVG) */
    .icon{width:42px; height:42px; margin:0 auto 10px; color:var(--accent)}

    /* Footer */
    .footer{background:var(--brand); color:#fff; padding:42px 0; text-align:center}
    .footer .brand{font-size:1.8rem; font-weight:800}
    .footer .pink{color:var(--accent)}

    /* Tracking Page */
    .tracking-page {
      padding-top: 120px;
    }
