:root{
      --bg:#0f1111;          /* header background */
      --bg-soft:#131921;     /* header secondary */
      --nav:#232f3e;         /* nav background */
      --card:#ffffff;        /* card bg */
      --muted:#e3e6e6;       /* light gray */
      --text:#0f1111;        /* body text */
      --text-inv:#ffffff;    /* text on dark */
      --accent:#ffd814;      /* primary accent (Amazon-ish yellow) */
      --accent-2:#fa8900;    /* orange */
      --link:#007185;        /* teal link */
      --shadow:0 2px 8px rgba(15,17,17,.15);
      --radius:14px;
      --radius-sm:10px;
      --container: 1320px;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:var(--text);background:#eaeded}
    a{color:var(--link);text-decoration:none}
    a:hover{text-decoration:underline}
    img{max-width:100%;display:block}
    .container{max-width:var(--container);margin:auto;padding:0 16px}
    .visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap}

    /* Top utility bar (returns, orders, account, cart) */
    .header{background:var(--bg-soft);color:var(--text-inv)}
    .header .row{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:12px;align-items:center;padding:10px 0}
    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .brand{
      background: red;
    }

    .brand__logo {
      display: flex;
      align-items: center;
    }

    .brand__logo img,
    .custom-logo {
      max-height: 36px !important;
      width: auto !important;
      height: auto !important;
    }

    .brand__name {
      font-weight: 700;
      letter-spacing: .3px;
    }

    .foot-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand__logo--footer img {
      max-height: 24px;
      width: auto;
      opacity: 0.9;
    }

    .footer-newsletter {
      background: #131921;
      color: #fff;
      padding: 50px 20px;
      text-align: center;
    }

    .newsletter-inner h3 {
      font-size: 24px;
      margin-bottom: 10px;
    }

    .newsletter-inner p {
      opacity: 0.8;
      margin-bottom: 20px;
    }

    .newsletter-form {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .newsletter-form input {
      padding: 12px;
      min-width: 250px;
      border-radius: 4px;
      border: none;
    }

    .newsletter-form button {
      background: #ff9900;
      border: none;
      padding: 12px 20px;
      font-weight: 700;
      cursor: pointer;
      border-radius: 4px;
      transition: 0.3s ease;
    }

    .newsletter-form button:hover {
      background: #e68a00;
    }

    .hero__categories {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .hero__categories a {
      padding: 8px;
      background: #f3f3f3;
      border-radius: 6px;
      text-align: center;
      text-decoration: none;
    }

    .page-container {
      max-width: 900px;
      margin: 40px auto;
      padding: 20px;
    }

    .page-title {
      font-size: 28px;
      margin-bottom: 20px;
    }

    .page-content p {
      margin-bottom: 16px;
      line-height: 1.6;
    }

    .contact-container {
      max-width: 1100px;
      margin: 60px auto;
      padding: 20px;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
    }

    .contact-info h1 {
      font-size: 32px;
      margin-bottom: 20px;
    }

    .contact-form-wrapper {
      background: #f9f9f9;
      padding: 30px;
      border-radius: 8px;
    }

    .wpcf7-form {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .wpcf7 input,
    .wpcf7 textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
    }

    .wpcf7 input[type="submit"] {
      background: #000;
      color: #fff;
      border: none;
      padding: 12px 24px;
      cursor: pointer;
    }

    .wpcf7 input[type="submit"]:hover {
      background: #333;
    }

    .legal-container {
      max-width: 850px;
      margin: 60px auto;
      padding: 20px;
    }

    .legal-title {
      font-size: 30px;
      margin-bottom: 30px;
    }

    .legal-text h2 {
      margin-top: 30px;
      font-size: 20px;
    }

    .legal-text p {
      line-height: 1.7;
      margin-bottom: 16px;
    }

    .legal-text ul {
      padding-left: 20px;
      margin-bottom: 16px;
    }

    .menu-toggle {
      display: none;
    }

    .amazon-auth-wrapper {
      max-width: 360px;
      margin: auto;
      font-family: Arial, sans-serif;
    }

    .amazon-auth-card {
      border: 1px solid #ddd;
      padding: 20px;
      margin-bottom: 20px;
      background: #fff;
      border-radius: 4px;
    }

    .amazon-title {
      font-size: 22px;
      margin-bottom: 15px;
    }

    .form-row {
      margin-bottom: 14px;
    }

    .form-row label {
      font-size: 13px;
      font-weight: bold;
      display: block;
      margin-bottom: 4px;
    }

    .input-text {
      width: 100%;
      padding: 8px;
      border: 1px solid #a6a6a6;
      border-radius: 3px;
    }

    .input-text:focus {
      border-color: #e77600;
      box-shadow: 0 0 3px #e77600;
      outline: none;
    }

    .amazon-btn {
      width: 100%;
      padding: 8px;
      background: linear-gradient(#f7dfa5,#f0c14b);
      border: 1px solid #a88734;
      font-weight: 600;
      cursor: pointer;
      border-radius: 3px;
    }

    .amazon-btn:hover {
      background: linear-gradient(#f5d78e,#eeb933);
    }

    .lost_password {
      font-size: 13px;
      margin-top: 10px;
    }

    .info-text {
      font-size: 13px;
      color: #555;
    }

    .amazon-divider {
      text-align: center;
      margin: 15px 0;
      position: relative;
      font-size: 13px;
      color: #555;
    }

    .amazon-divider:before,
    .amazon-divider:after {
      content: "";
      position: absolute;
      top: 50%;
      width: 40%;
      height: 1px;
      background: #ddd;
    }

    .amazon-divider:before {
      left: 0;
    }

    .amazon-divider:after {
      right: 0;
    }

    .amazon-divider span {
      background: #fff;
      padding: 0 10px;
      position: relative;
      z-index: 2;
    }

    .amazon-social-login .nsl-container {
      margin-top: 10px;
    }
    .loc{display:flex;align-items:center;gap:8px;font-size:.9rem}
    .loc svg{width:18px;height:18px}

    .search{display:flex;align-items:stretch;gap:0;width:100%;min-width:0}
    .search select{background:#f3f3f3;border:1px solid #cdcdcd;border-right:none;border-radius:6px 0 0 6px;padding:10px 10px;font-size:.95rem}
    .search input{flex:1;border:1px solid #cdcdcd;border-left:none;border-right:none;padding:12px 12px;font-size:1rem;width:100%;min-width:0}
    .search button{border:1px solid #cdcdcd;border-left:none;background:var(--accent);padding:0 16px;border-radius:0 6px 6px 0;cursor:pointer}
    .search button:hover{filter:brightness(.95)}

    .mini{display:flex;gap:18px;align-items:center}
    .mini a{color:var(--text-inv);text-decoration:none}
    .mini small{display:block;opacity:.8}
    .mini b{display:block}
    .cart{display:flex;align-items:center;gap:6px}
    .cart__count{background:var(--accent);color:#111;padding:2px 6px;border-radius:999px;font-weight:700}

    /* Nav */
    /* Drawer Layout */
    .mobile-drawer {
      position: fixed;
      inset: 0;
      display: none;
      z-index: 99999;
    }

    .drawer-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.4);
    }

    .drawer-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 85%;
      max-width: 320px;
      height: 100%;
      background: #fff;
      overflow-y: auto;
      padding: 20px;
      transform: translateX(-100%);
      transition: transform 0.3s ease;
    }

    /* Active state */
    .mobile-drawer.active {
      display: block;
    }

    .mobile-drawer.active .drawer-content {
      transform: translateX(0);
    }

    /* User section */
    .drawer-user {
      display: flex;
      gap: 15px;
      align-items: center;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
    }

    .drawer-user img {
      border-radius: 50%;
    }

    .drawer-user a {
      display: block;
      font-size: 14px;
      color: #ff9900;
      margin-top: 5px;
    }

    /* Sections */
    .drawer-section {
      margin-top: 20px;
    }

    .drawer-section a {
      display: block;
      padding: 10px 0;
      text-decoration: none;
      color: #111;
      border-bottom: 1px solid #f2f2f2;
    }

    /* Toggle submenu */
    .drawer-toggle {
      background: none;
      border: none;
      font-weight: bold;
      padding: 10px 0;
      width: 100%;
      text-align: left;
      cursor: pointer;
    }

    .drawer-submenu {
      display: none;
      padding-left: 10px;
    }

    .drawer-submenu a {
      font-size: 14px;
    }

    .search {
      position: relative;
    }

    .predictive-search {
      position: absolute;
      width: 100%;
      background: #fff;
      border: 1px solid #ddd;
      max-height: 400px;
      overflow-y: auto;
      display: none;
      z-index: 9999;
    }

    .search-group-title {
      font-weight: bold;
      font-size: 13px;
      padding: 8px 12px;
      background: #f7f7f7;
      border-bottom: 1px solid #eee;
    }

    .search-item {
      display: flex;
      gap: 10px;
      padding: 8px 12px;
      text-decoration: none;
      color: #111;
      font-size: 14px;
    }

    .search-item img {
      width: 40px;
      height: 40px;
      object-fit: cover;
    }

    .search-item:hover,
    .search-item.active {
      background: #f3f3f3;
    }

    .search-price {
      font-size: 13px;
      color: #B12704;
    }

    .view-all {
      display: block;
      padding: 10px;
      text-align: center;
      font-weight: bold;
      border-top: 1px solid #eee;
    }
    

    /* Hero */
    .hero{background:linear-gradient(180deg,#1b2838 0%, #232f3e 45%, #eaeded 45%);}
    .hero .container{position:relative}
    .hero__wrap{display:grid;grid-template-columns:1.6fr .8fr;gap:18px;align-items:stretch;padding:16px 0 28px}
    .hero__banner{background:#111 url('https://images.unsplash.com/photo-1515165562835-c3b8c2c5a9a5?q=80&w=1640&auto=format&fit=crop') center/cover;border-radius:var(--radius);min-height:300px;box-shadow:var(--shadow);position:relative}
    .hero__banner .promo{position:absolute;bottom:14px;left:14px;background:rgba(255,255,255,.9);padding:12px 14px;border-radius:12px;max-width:75%}
    .hero__side{display:grid;gap:18px}
    .hero__tile{background:#fff;border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
    .hero__tile h3{margin:0 0 10px;font-size:1.1rem}

    /* Deal grid */
    .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:24px 0}
    .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:12px}
    .card h3{margin:0 0 6px}
    .badge{display:inline-block;background:var(--accent);color:#111;font-weight:700;font-size:.85rem;border-radius:8px;padding:4px 8px;margin-right:6px}
    .strike{color:#555;text-decoration:line-through;margin-left:6px}

    /* Carousel */
    .carousel{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;margin:26px 0}
    .carousel__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
    .carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc(20% - 12px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
    .carousel__item{scroll-snap-align:start;background:#fff;border:1px solid #eee;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}
    .carousel__controls{display:flex;gap:8px}
    .carousel button.icon{background:#fff;border:1px solid #d5d9d9;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;cursor:pointer}

    /* Footer */
    footer{background:#232f3e;color:#ddd;margin-top:36px}
    .footer-top{background:#37475a}
    .backtotop{display:block;text-align:center;color:#fff;padding:12px 0}
    .footer-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: 30px;}
    footer h4{color:#fff;margin:0 0 10px}
    .footer-col a{display:block;color:#ddd;margin:6px 0}
    .foot-bottom{border-top:1px solid #3e4f63;padding:18px 0;display:flex;align-items:center;gap:12px;justify-content:center;color:#bbb}

    /* ===============================
       Responsive
    ================================= */
    
    /* ---------- Tablet ---------- */
    @media (max-width:1100px){
    
      .grid{
        grid-template-columns:repeat(3,1fr);
      }
    
      .hero__wrap{
        grid-template-columns:1fr;
      }
    
      .header .row{
        grid-template-columns:auto 1fr auto auto;
      }
    
      .loc{
        display:none;
      }
    
      .carousel__track{
        grid-auto-columns:calc(25% - 12px);
      }
    
    }
    
    
    /* ---------- Mobile ---------- */
    @media (max-width:768px){
    
      /* Header Layout */
      .header .row{
        display:grid;
        grid-template-columns:1fr auto;
        grid-template-areas:
          "brand mini"
          "search search";
        gap:10px;
        align-items:center;
      }
    
      .brand{
        grid-area:brand;
      }
    
      .mini{
        grid-area:mini;
        justify-self:end;
      }
    
      .search{
        grid-area:search;
        display:flex;
        width:100%;
        min-width:0;
      }
    
      .search input{
        width:100%;
        min-width:0;
      }
    
      /* Hide desktop-only elements */
      .mini .hide-sm{
        display:none;
      }
    
      .nav .row{
        display:none;
      }
    
      .menu-toggle{
        display:inline-block;
        margin:8px 16px;
      }
    
      /* Layout Adjustments */
      .grid{
        grid-template-columns:repeat(2,1fr);
      }
    
      .carousel__track{
        grid-auto-columns:calc(40% - 12px);
      }
    
      .contact-grid{
        grid-template-columns:1fr;
      }
    
    }
    
    
    /* ---------- Small Mobile ---------- */
    @media (max-width:520px){
    
      .grid{
        grid-template-columns:1fr;
      }
    
      .search select{
        display:none;
      }
    
      .carousel__track{
        grid-auto-columns:80%;
      }
    
    }
    
  


    /* Utility sections to aid WordPress theming later */
    /* Split these blocks into header.php, footer.php, and front-page.php when converting */