:root{
      --bg:#f7f7f7;
      --card:#fff;
      --text:#111;
      --muted:#777;
      --line:#e9e9e9;
      --accent:#111;
      --danger:#e11d48;
      --drawerW:310px;
      --drawerSpeed:520ms;
      --drawerEasing:cubic-bezier(.2,.9,.2,1);
      --backdrop:rgba(0,0,0,.35);
    }

    *{
      box-sizing:border-box;
      -webkit-tap-highlight-color:transparent;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
      font-weight:400;
      line-height:1.5;
    }

    button,
    a,
    input,
    select,
    textarea{
      outline:none !important;
      -webkit-tap-highlight-color:transparent !important;
    }

    button:focus,
    button:focus-visible,
    a:focus,
    a:focus-visible{
      outline:none !important;
      box-shadow:none !important;
    }

    button{
      font-family:inherit;
    }


    /* ==========================================
       OVERLAY
    ========================================== */

    .overlay{
      position:fixed;
      inset:0;
      background:var(--backdrop);
      opacity:0;
      pointer-events:none;
      transition:opacity 220ms ease;
      z-index:80;
    }

    .overlay.show{
      opacity:1;
      pointer-events:auto;
    }


    /* ==========================================
       DRAWERS
    ========================================== */

    .drawer{
      position:fixed;
      top:0;
      height:100dvh;
      width:var(--drawerW);
      max-width:88vw;

      background:#fff;
      border:1px solid var(--line);
      box-shadow:0 20px 60px rgba(0,0,0,.18);

      z-index:90;

      display:flex;
      flex-direction:column;

      will-change:transform;
    }

    .drawer.left{
      left:0;
      border-left:none;

      transform:translateX(-110%);
      opacity:0;

      transition:
        transform var(--drawerSpeed) var(--drawerEasing),
        opacity var(--drawerSpeed) var(--drawerEasing);
    }

    .drawer.left.open{
      transform:translateX(0);
      opacity:1;
    }

    .drawer.right{
      right:0;
      border-right:none;

      transform:translateX(110%);
      opacity:0;

      transition:
        transform var(--drawerSpeed) var(--drawerEasing),
        opacity var(--drawerSpeed) var(--drawerEasing);
    }

    .drawer.right.open{
      transform:translateX(0);
      opacity:1;
    }

    .drawerHeader{
      height:72px;

      display:flex;
      align-items:center;
      justify-content:space-between;

      padding:0 14px;

      border-bottom:1px solid var(--line);
      background:#fff;

      flex-shrink:0;
    }

    .drawerTitle{
      font-size:16px;
      font-weight:600;
    }

    .drawerClose{
      width:40px;
      height:40px;

      border-radius:14px;
      border:1px solid var(--line);

      background:#fff;
      color:#111;

      cursor:pointer;

      display:grid;
      place-items:center;
    }

    .drawerClose:hover{
      background:#fafafa;
    }

    .drawerBody{
      padding:12px 12px 16px;
      overflow:auto;
    }

    .drawerSectionTitle{
      margin:14px 6px 8px;

      font-size:13px;
      font-weight:500;

      text-transform:uppercase;
    }

    .drawerList{
      display:flex;
      flex-direction:column;
      gap:3px;
    }

    .drawerItem{
      width:100%;

      display:flex;
      align-items:center;
      justify-content:space-between;

      gap:10px;

      padding:9px 10px;

      border-radius:12px;
      border:1px solid transparent;

      background:transparent;

      cursor:pointer;

      color:#111;

      text-align:left;
    }

    .drawerItem:hover{
      border-color:var(--line);
      background:#fafafa;
    }

    .drawerItem .leftSide{
      display:flex;
      align-items:center;
      gap:10px;

      min-width:0;
    }

    .miniIcon{
      width:36px;
      height:36px;

      border-radius:11px;
      border:1px solid var(--line);

      display:grid;
      place-items:center;

      background:#fff;

      flex:0 0 auto;
    }

    .miniIcon i{
      font-size:15px;
    }

    .drawerItem .label{
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .drawerItem .chev{
      opacity:.55;
      font-size:20px;
    }


    /* ==========================================
       TOP HEADER
    ========================================== */

    .topbar{
      position:sticky;
      top:0;
      z-index:30;

      background:#fff;
      border-bottom:1px solid var(--line);
    }

    .promo{
      background:#111;
      color:#fff;

      height:44px;

      display:flex;
      align-items:center;
      justify-content:center;

      padding:0 12px;

      position:relative;
      overflow:hidden;
    }

    .promoText{
      font-size:14px;
      letter-spacing:.2px;
      text-align:center;
      white-space:nowrap;
    }

    .closeX{
      position:absolute;

      right:12px;
      top:50%;

      transform:translateY(-50%);

      width:28px;
      height:28px;

      border-radius:10px;

      border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.08);

      color:#fff;

      cursor:pointer;

      display:grid;
      place-items:center;
    }

    .brandRow{
      height:72px;

      display:grid;
      grid-template-columns:64px 1fr 64px;

      align-items:center;

      padding:0 10px;
      gap:8px;
    }

    .iconBtn{
      width:44px;
      height:44px;

      border-radius:14px;
      border:1px solid transparent;

      display:grid;
      place-items:center;

      background:transparent;
      color:#111;

      cursor:pointer;
    }

    .iconBtn:hover{
      border-color:var(--line);
      background:#fafafa;
    }

    .logo{
      display:flex;
      align-items:center;
      justify-content:center;

      user-select:none;
    }

    .logoMark{
      width:160px;
      height:26px;

      display:flex;
      align-items:center;
      justify-content:center;

      font-size:24px;
      letter-spacing:.8px;
    }

    .logoMark span{
      font-family:
        ui-serif,
        Georgia,
        "Times New Roman",
        Times,
        serif;
    }


    /* ==========================================
       HERO
    ========================================== */

  
.hero{

    width:100%;

    height:150px;

    background:
        url('https://auztynosportshub.store/images/bg/index-bg.png')
        center/cover
        no-repeat;

}
    /* ==========================================
       PRODUCT PAGE
    ========================================== */

    .page{
      max-width:980px;

      margin:0 auto;

      padding:16px 12px 110px;
    }

    .backRow{
      display:flex;
      align-items:center;

      gap:8px;

      margin-bottom:14px;
    }

    .backBtn{
      display:inline-flex;
      align-items:center;

      gap:8px;

      padding:9px 12px;

      border:1px solid var(--line);
      border-radius:12px;

      background:#fff;
      color:#111;

      text-decoration:none;

      font-size:13px;

      cursor:pointer;
    }

    .backBtn:hover{
      background:#fafafa;
    }


    /* ==========================================
       PRODUCT CARD
    ========================================== */

    .productDetails{
      background:#fff;

      border:1px solid var(--line);
      border-radius:18px;

      overflow:hidden;

      box-shadow:0 3px 12px rgba(0,0,0,.035);
    }

    .productGallery{
      background:#f2f2f2;
      position:relative;
    }

    .mainProductImage{
      width:100%;

      aspect-ratio:4 / 5;

      display:flex;
      align-items:center;
      justify-content:center;

      background:
        linear-gradient(
          180deg,
          #ffffff 0%,
          #f1f1f1 100%
        );

      overflow:hidden;
    }

    .mainProductImage img{
      width:100%;
      height:100%;

      object-fit:cover;

      display:block;
    }

    .imagePlaceholder{
      width:82%;
      height:82%;

      display:flex;
      align-items:center;
      justify-content:center;

      border-radius:16px;
      border:1px solid rgba(0,0,0,.06);

      color:#aaa;

      font-size:13px;
      text-transform:uppercase;
    }

    .discountBadge{
      position:absolute;

      top:12px;
      left:12px;

      background:#111;
      color:#fff;

      padding:7px 11px;

      border-radius:12px;

      font-size:13px;
      font-weight:600;
    }

    .wishlistBtn{
      position:absolute;

      top:12px;
      right:12px;

      width:46px;
      height:46px;

      border-radius:16px;
      border:1px solid var(--line);

      background:#fff;

      display:grid;
      place-items:center;

      cursor:pointer;

      box-shadow:0 8px 25px rgba(0,0,0,.08);
    }

    .wishlistBtn:hover{
      background:#fafafa;
    }

    .wishlistBtn.active{
      color:var(--danger);
    }


    /* ==========================================
       THUMBNAILS
    ========================================== */

    .thumbnailRow{
      display:flex;
      gap:10px;

      padding:12px;

      overflow-x:auto;

      background:#fff;

      border-top:1px solid var(--line);
    }

    .thumbnail{
      width:62px;
      height:72px;

      flex:0 0 auto;

      border-radius:12px;

      border:2px solid transparent;

      background:#f3f3f3;

      overflow:hidden;

      cursor:pointer;
    }

    .thumbnail.active{
      border-color:#111;
    }

    .thumbnail img{
      width:100%;
      height:100%;

      object-fit:cover;

      display:block;
    }


    /* ==========================================
       PRODUCT INFO
    ========================================== */

    .productInfo{
      padding:18px 16px 20px;
    }

    .productCategory{
      color:#777;

      font-size:12px;

      text-transform:uppercase;
      letter-spacing:.5px;
    }

    .productTitle{
      margin-top:6px;

      font-size:23px;
      line-height:1.2;

      font-weight:700;

      letter-spacing:.1px;
    }

    .ratingRow{
      margin-top:10px;

      display:flex;
      align-items:center;

      gap:8px;

      font-size:13px;
    }

    .stars{
      letter-spacing:2px;
      color:#111;
    }

    .reviewCount{
      color:#777;
    }

    .priceRow{
      margin-top:16px;

      display:flex;
      align-items:baseline;

      flex-wrap:wrap;

      gap:10px;
    }

    .price{
      font-size:25px;
      font-weight:700;
    }

    .oldPrice{
      color:#999;

      text-decoration:line-through;

      font-size:15px;
    }

    .salePrice{
      color:var(--danger);

      font-size:18px;
      font-weight:700;
    }

    .stock{
      margin-top:10px;

      display:inline-flex;
      align-items:center;

      gap:6px;

      padding:6px 10px;

      border-radius:999px;

      background:#f3f3f3;

      font-size:12px;
    }

    .stockDot{
      width:7px;
      height:7px;

      border-radius:50%;

      background:#111;
    }

    .description{
      margin-top:18px;

      padding-top:18px;

      border-top:1px solid var(--line);
    }

    .sectionTitle{
      font-size:14px;

      font-weight:600;

      text-transform:uppercase;

      letter-spacing:.3px;
    }

    .descriptionText{
      margin-top:8px;

      color:#666;

      font-size:14px;

      line-height:1.7;
    }


    /* ==========================================
       OPTIONS
    ========================================== */

    .optionBlock{
      margin-top:20px;
    }

    .optionHeader{
      display:flex;
      align-items:center;
      justify-content:space-between;

      margin-bottom:10px;
    }

    .optionLabel{
      font-size:14px;
      font-weight:600;
    }

    .optionValue{
      color:#777;
      font-size:13px;
    }

    .sizeOptions{
      display:flex;

      gap:8px;

      flex-wrap:wrap;
    }

    .sizeBtn{
      min-width:48px;
      height:42px;

      padding:0 14px;

      border-radius:12px;

      border:1px solid var(--line);

      background:#fff;

      color:#111;

      font-size:13px;

      cursor:pointer;
    }

    .sizeBtn:hover{
      background:#fafafa;
    }

    .sizeBtn.active{
      background:#111;

      border-color:#111;

      color:#fff;
    }

    .colorOptions{
      display:flex;
      gap:10px;
    }

    .colorBtn{
      width:34px;
      height:34px;

      border-radius:50%;

      border:3px solid #fff;

      outline:1px solid #ddd !important;

      cursor:pointer;
    }

    .colorBtn.active{
      outline:2px solid #111 !important;
    }


    /* ==========================================
       QUANTITY
    ========================================== */

    .quantityRow{
      margin-top:20px;

      display:flex;
      align-items:center;
      justify-content:space-between;

      gap:12px;
    }

    .quantityBox{
      display:flex;
      align-items:center;

      border:1px solid var(--line);

      border-radius:13px;

      overflow:hidden;

      background:#fff;
    }

    .qtyBtn{
      width:42px;
      height:42px;

      border:0;

      background:#fff;

      font-size:20px;

      cursor:pointer;
    }

    .qtyBtn:hover{
      background:#f7f7f7;
    }

    .qtyValue{
      width:42px;

      text-align:center;

      font-size:14px;
      font-weight:600;
    }


    /* ==========================================
       ACTION BUTTONS
    ========================================== */

    .actionButtons{
      margin-top:18px;

      display:grid;

      grid-template-columns:1fr 1fr;

      gap:10px;
    }

    .addCartBtn,
    .buyNowBtn{
      min-height:50px;

      border-radius:14px;

      font-size:14px;

      cursor:pointer;
    }

    .addCartBtn{
      border:1px solid #111;

      background:#fff;

      color:#111;
    }

    .addCartBtn:hover{
      background:#f7f7f7;
    }

    .buyNowBtn{
      border:1px solid #111;

      background:#111;

      color:#fff;

      font-weight:600;
    }

    .buyNowBtn:hover{
      background:#222;
    }


    /* ==========================================
       INFO BOXES
    ========================================== */

    .infoBoxes{
      margin-top:20px;

      display:grid;

      grid-template-columns:repeat(3,1fr);

      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
    }

    .infoBox{
      padding:15px 8px;

      text-align:center;

      border-right:1px solid var(--line);
    }

    .infoBox:last-child{
      border-right:0;
    }

    .infoIcon{
      width:28px;
      height:28px;

      margin:0 auto 7px;

      display:grid;
      place-items:center;
    }

    .infoTitle{
      font-size:11px;
      font-weight:600;
    }

    .infoText{
      margin-top:3px;

      color:#777;

      font-size:10px;
    }


    /* ==========================================
       CART DRAWER CONTENT
    ========================================== */

    .cartTopBar{
      display:flex;
      flex-direction:column;

      gap:6px;

      padding-bottom:8px;

      border-bottom:1px solid var(--line);

      margin-bottom:10px;
    }

    .cartSummaryTitle{
      font-size:14px;
      font-weight:600;
    }

    .cartSummarySub{
      color:#777;
      font-size:12px;
    }

    .cartList{
      display:flex;
      flex-direction:column;

      gap:2px;
    }

    .cartEmpty{
      padding:18px 4px;

      color:#777;

      font-size:13px;

      text-align:center;

      display:none;
    }

    .cartItem{
      display:flex;

      gap:10px;

      padding:10px 0;

      border-bottom:1px solid var(--line);
    }

    .cartItemImage{
      width:62px;
      height:70px;

      border-radius:10px;

      background:#f2f2f2;

      overflow:hidden;

      flex-shrink:0;
    }

    .cartItemImage img{
      width:100%;
      height:100%;

      object-fit:cover;

      display:block;
    }

    .cartItemInfo{
      min-width:0;
      flex:1;
    }

    .cartItemName{
      font-size:12px;

      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .cartItemPrice{
      margin-top:5px;

      font-size:12px;

      font-weight:600;
    }

    .cartItemQty{
      margin-top:5px;

      color:#777;

      font-size:11px;

      display:flex;
      align-items:center;

      gap:8px;
    }

    .cartQtyControls{
      display:flex;
      align-items:center;

      gap:6px;

      margin-left:auto;
    }

    .cartQtyBtn{
      width:32px;
      height:32px;

      border-radius:12px;

      border:1px solid var(--line);

      background:#fff;

      cursor:pointer;
    }

    .cartQtyBtn:hover{
      background:#fafafa;
    }

    .cartQtyVal{
      min-width:22px;

      text-align:center;

      color:#111;

      font-size:12px;
    }

    .cartRemove{
      margin-left:auto;

      border:1px solid rgba(225,29,72,.25);

      background:rgba(225,29,72,.08);

      color:#b91c1c;

      padding:7px 10px;

      border-radius:12px;

      cursor:pointer;

      font-size:12px;

      height:fit-content;
    }

    .cartRemove:hover{
      background:rgba(225,29,72,.14);
    }

    .cartTotal{
      display:flex;

      align-items:center;

      justify-content:space-between;

      padding:16px 8px;

      font-size:15px;

      font-weight:600;
    }

    .checkoutBtn{
      width:100%;

      padding:13px 14px;

      border-radius:14px;

      border:1px solid #111;

      background:#111;

      color:#fff;

      font-weight:600;

      cursor:pointer;
    }


    /* ==========================================
       BOTTOM NAV
    ========================================== */

    .bottomNav{
      position:fixed;

      left:0;
      right:0;
      bottom:0;

      height:78px;

      background:#fff;

      border-top:1px solid var(--line);

      z-index:40;

      display:flex;
      align-items:center;
      justify-content:center;

      padding:6px 10px;
    }

    .navInner{
      width:100%;

      max-width:980px;

      display:grid;

      grid-template-columns:repeat(5,1fr);

      gap:6px;

      padding:4px 6px;
    }

    .navItem{
      border:0;

      background:transparent;

      padding:8px 4px;

      display:flex;

      flex-direction:column;

      align-items:center;
      justify-content:center;

      gap:6px;

      color:#111;

      font-size:12px;

      cursor:pointer;
    }

    .navItem:hover{
      opacity:.7;
    }

    .navItem .label{
      color:#222;
    }


    /* ==========================================
       ICONS
    ========================================== */

    .ico{
      width:22px;
      height:22px;
    }

    .icoSm{
      width:18px;
      height:18px;
    }


    /* ==========================================
       RESPONSIVE
    ========================================== */

    @media(max-width:600px){

      .page{
        padding-left:10px;
        padding-right:10px;
      }

      .productDetails{
        border-radius:16px;
      }

      .productTitle{
        font-size:21px;
      }

      .actionButtons{
        grid-template-columns:1fr;
      }

      .infoBoxes{
        grid-template-columns:1fr;
      }

      .infoBox{
        border-right:0;
        border-bottom:1px solid var(--line);
      }

      .infoBox:last-child{
        border-bottom:0;
      }
    }


    @media(min-width:800px){

      .productDetails{
        display:grid;
        grid-template-columns:1fr 1fr;
      }

      .productGallery{
        min-width:0;
      }

      .productInfo{
        padding:28px;
      }

      .mainProductImage{
        min-height:620px;
      }

      .thumbnailRow{
        padding:14px;
      }
    }


    @media(max-width:420px){

      .brandRow{
        height:66px;
      }

      .logoMark{
        width:140px;
        font-size:22px;
      }

      .hero{
        height:80px;
      }

      .mainProductImage{
        aspect-ratio:4 / 5;
      }

      .price{
        font-size:23px;
      }
    }