/* Store Page CSS - Solace RSPS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');

:root {
  /* Main Colors */
  --bg-900: #0c0808;
  --bg-800: #150f0f;
  --bg-700: #1e1515;
  --bg-cobble: #160d0d;
  --stone-shadow: 0 2px 16px 0 rgba(0,0,0,0.7);
  /* Accent Colors */
  --cyan-glow: #e63946;
  --turquoise: #c1121f;
  --cyan-dark: #9d0208;
  --cyan-light: #ff6b6b;
  --silver: #c9bfbf;
  --steel: #997a7a;
  --white: #f8fafc;
  /* Gradients */
  --glow-gradient: linear-gradient(90deg, #e63946 0%, #c1121f 100%);
  --stone-gradient: linear-gradient(135deg, rgba(12,8,8,0.80) 0%, rgba(30,21,21,0.80) 100%);
  /* Typography */
  --font-primary: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-display: 'Poppins', 'Segoe UI', Arial, sans-serif;
  /* Spacing */
  --space-xs: 0.15rem;
  --space-sm: 0.3rem;
  --space-md: 0.6rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2.2rem;
  --space-3xl: 3rem;
  /* Border Radius */
  --radius-sm: 0.2rem;
  --radius-md: 0.3rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.8rem;
  --radius-2xl: 1.2rem;
  /* Shadows */
  --glow-shadow: 0 0 16px 2px #e63946, 0 2px 16px 0 rgba(0,0,0,0.7);
  --card-shadow: 0 2px 16px 0 rgba(0,0,0,0.7);
  --silver-shadow: 0 0 8px 0 #c9bfbf;
  /* Semantic Colors */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  /* Layout */
  --header-height: 60px;
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
}

/* Reset and Base Styles */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;}
body{font-family:var(--font-primary);font-size:0.95rem;line-height:1.5;color:var(--silver);background:var(--stone-gradient),url('/img/background.png')center/cover no-repeat fixed;background-blend-mode:overlay;min-height:100vh;overflow-x:hidden;}

/* Typography */
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:1.15;color:var(--turquoise);margin-bottom:var(--space-sm);}
h1{font-size:2.1rem;font-weight:900;background:var(--glow-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 8px #e63946;margin-bottom:var(--space-md);}
h2{font-size:clamp(1.1rem,3vw,1.7rem);font-weight:700;}
h3{font-size:clamp(1rem,2vw,1.2rem);font-weight:600;}
h4{font-size:1rem;font-weight:600;}
p{margin-bottom:var(--space-sm);color:var(--cyan-light);line-height:1.5;}

/* Layout Components */
.container,.container-xl{max-width:var(--container-max-width);margin:0 auto;padding:0 clamp(1rem,4vw,2rem);}
.main{margin-top:var(--header-height);padding:2rem 0;}

/* Store Layout */
.store-layout{display:flex;gap:2rem;}
.store-sidebar{width:260px;background:var(--bg-800);border-radius:var(--radius-lg);padding:0 1rem;box-shadow:var(--card-shadow);height:fit-content;}
.store-categories{display:flex;flex-direction:column;gap:1rem;}
.store-category{display:flex;align-items:center;gap:1rem;padding:0.7em 1em;border-radius:var(--radius-lg);cursor:pointer;transition:var(--transition-fast);background:var(--bg-700);color:var(--turquoise);font-weight:600;}
.store-category.active,.store-category:hover{background:var(--turquoise);color:var(--bg-900);}
.store-category img{height:32px;width:32px;}

/* Store Main */
.store-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: var(--bg-800);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  padding: 2rem 1.5rem;
}
.products-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;}
.products-header h3{font-size:1.3rem;color:var(--turquoise);}
.products-count{color:var(--cyan-light);font-size:1rem;}

/* Store Products Grid */
.store-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(180px,21%),1fr));gap:2rem;}
.store-product{position:relative;background:var(--bg-800);border-radius:var(--radius-lg);box-shadow:var(--card-shadow);padding:1.5rem;transition:var(--transition-normal);display:flex;flex-direction:column;overflow:visible;border:1.5px solid var(--steel);}
.store-product::before{display:none;}
.store-product:hover{box-shadow:0 4px 24px 0 rgba(0,0,0,0.8), 0 0 20px rgba(230,57,70,0.12);border-color:var(--turquoise);}

/* Product Top Bar */
.product-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;position:relative;}
.product-topbar span{font-size:1.1rem;font-weight:700;color:var(--turquoise);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}

/* Info Icon and Tooltip */
.info-icon{position:absolute;top:0.6rem;right:0.6rem;z-index:10;cursor:default;font-size:1.1rem;color:var(--cyan-light);transition:var(--transition-fast);padding:0.2rem;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--bg-800);box-shadow:0 2px 8px 0 rgba(0,0,0,0.25);overflow:visible;}
.info-icon:hover{color:var(--turquoise);background:var(--bg-700);transform:scale(1.1);}
.info-tooltip{position:absolute;top:110%;right:0;width:220px;background:var(--bg-900);color:var(--cyan-light);padding:0.8rem;border-radius:var(--radius-md);box-shadow:var(--card-shadow);font-size:0.85rem;line-height:1.4;z-index:9999;opacity:0;visibility:hidden;transition:var(--transition-normal);border:1px solid var(--steel);pointer-events:none;transform:translateY(-10px);}
.info-icon:hover .info-tooltip{opacity:1;visibility:visible;transform:translateY(0);}
.info-tooltip::before{content:'';position:absolute;top:-5px;right:10px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid var(--bg-900);}
.info-icon:focus{outline:none;}

/* Product Main Content */
.product-main{display:flex;flex-direction:column;align-items:center;flex:1;margin-bottom:1rem;}
.product-image-box{width:72px;height:72px;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem auto;background:var(--bg-700);border-radius:var(--radius-md);overflow:hidden;}
.product-image-box img{width:72px;height:72px;object-fit:contain;display:block;margin:0 auto;}
.product-price{font-size:1.2rem;color:var(--turquoise);font-weight:700;text-align:center;}

/* Product Actions */
.product-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.5rem;
  gap: 0.7rem;
}
.quantity-pyramid-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 30px;
  margin-bottom: 0;
}
.quantity-pyramid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 50px;
  position: absolute;
  left: auto;
  top: auto;
  transform: none;
}
.quantity-pyramid-buttons {
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  gap: 0.3em;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
.quantity-pyramid-wrap:hover .quantity-pyramid-buttons,
.quantity-pyramid-wrap:focus-within .quantity-pyramid-buttons {
  opacity: 1;
  pointer-events: auto;
}
.quantity-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--bg-700);
  color: var(--turquoise);
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.10);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.12s;
  z-index: 2;
  opacity: 1;
  transform: none;
  position: static;
}
.quantity-btn:hover, .quantity-btn:focus {
  background: var(--turquoise);
  color: var(--bg-900);
  transform: scale(1.08);
  outline: none;
}
.quantity-pyramid .quantity-input {
  margin: 0;
  width: 40px;
  height: 40px;
  text-align: center;
  z-index: 1;
  position: relative;
  background: var(--bg-900);
  border: 1.5px solid var(--steel);
  border-radius: 999px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0;
}
.quantity-label{font-size:0.9rem;color:var(--cyan-light);margin-right:0.3rem;}
.quantity-input{width:48px;height:38px;padding:0.3em 1.2em;text-align:center;border-radius:999px;border:1.5px solid var(--steel);background:var(--bg-700);color:var(--white);font-size:1.1rem;font-weight:700;box-shadow:0 2px 8px 0 rgba(0,0,0,0.10);transition:border-color 0.2s, box-shadow 0.2s, transform 0.15s;outline:none;margin:0 0.2em;}
.quantity-input:focus, .quantity-input:hover{border-color:var(--turquoise);box-shadow:0 0 0 2px rgba(230,57,70,0.12);background:var(--bg-800);transform:scale(1.06);}
.quantity-input::-webkit-inner-spin-button,
.quantity-input::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
  display:none;
}
.quantity-input[type=number]{
  -moz-appearance:textfield;
}
.add-to-cart{height:38px;min-width:0;background:var(--glow-gradient);color:var(--bg-900);border:none;padding:0.5em 1em;border-radius:var(--radius-lg);font-weight:700;cursor:pointer;transition:all 0.2s ease;font-size:0.88rem;display:flex;align-items:center;gap:0.3rem;flex:1;justify-content:center;white-space:nowrap;overflow:hidden;}
.add-to-cart:hover{background:linear-gradient(90deg, var(--turquoise) 0%, var(--turquoise) 100%);transform:translateY(-1px);}

/* Product Badges */
.product-badge{position:absolute;top:0.5rem;right:0.5rem;padding:0.2em 0.7em;border-radius:var(--radius-md);font-size:0.8rem;font-weight:700;color:var(--bg-900);}
.product-badge.popular{background:var(--turquoise);}
.product-badge.new{background:var(--cyan-glow);}
.product-badge.sale{background:var(--warning);}

/* Product Price */
.product-price{font-size:1.2rem;color:var(--turquoise);margin-bottom:1rem;text-align:center;}
.price-current{font-weight:700;}
.price-original{text-decoration:line-through;color:var(--steel);margin-left:0.5rem;}
.price-discount{background:var(--error);color:var(--white);padding:0.1em 0.4em;border-radius:var(--radius-sm);font-size:0.8rem;margin-left:0.5rem;}

/* Store Basket */
.store-basket {
  background: var(--bg-800);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  padding: 1.5rem;
  width: 340px;
  position: sticky;
  top: var(--header-height);
  max-height: calc(100vh - var(--header-height) - 2rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 1rem;
  flex-shrink: 0;
}
.basket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--steel);
}
.basket-title {
  font-size: 1.1rem;
  color: var(--turquoise);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.basket-count {
  color: var(--cyan-light);
  font-size: 1.05rem;
  font-weight: 700;
  background: var(--bg-700);
  border-radius: 0.7em;
  padding: 0.2em 0.8em;
  margin-left: 0.5em;
}
.basket-items {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--steel) var(--bg-900);
}
.basket-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-900);
  border-radius: 0.7em;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
  padding: 0.5em 0.7em;
  gap: 0.4em;
  border: 1px solid var(--steel);
  transition: var(--transition-fast);
}
.basket-item:hover {
  border-color: var(--turquoise);
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.2);
}
.basket-item-controls {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.basket-item-qty {
  min-width: 30px;
  text-align: center;
  color: var(--cyan-light);
  font-weight: 700;
  font-size: 1.1rem;
}
.basket-item-text {
  flex: 1;
  color: var(--cyan-light);
  font-size: 1.05rem;
  font-weight: 600;
  margin-left: 0.5em;
}
.basket-price-text {
  color: var(--turquoise);
  font-size: 1.05rem;
  font-weight: 700;
  margin-left: 0.5em;
}
.basket-remove-btn {
  background: none;
  border: none;
  color: var(--error);
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--transition-fast);
  margin-left: 0.5em;
}
.basket-remove-btn:hover {
  color: var(--white);
  transform: scale(1.1);
}
.basket-remove-icon{width:16px;height:16px;}
.basket-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--silver);
  width: 100%;
  background: var(--bg-900);
  border-radius: 0.7em;
  padding: 0.6em 0.8em;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
  border: 1px solid var(--steel);
  transition: var(--transition-fast);
}
.basket-total:hover {
  border-color: var(--turquoise);
  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.2);
}
.total-amount, .basket-total-amount {
  font-size: 1.2rem;
  color: var(--turquoise);
  font-weight: 900;
}
.basket-actions{display:flex;gap:1rem;}
.btn-icon{display:inline-flex;align-items:center;gap:0.5rem;}
.basket-security{padding:0.7rem 0.8rem;background:var(--bg-700);border-radius:var(--radius-md);border:1px solid var(--steel);}
.security-badge{display:flex;align-items:center;gap:0.5rem;color:var(--silver);font-size:0.85rem;font-weight:600;}
.security-icon{font-size:1rem;line-height:1;flex-shrink:0;}

/* Featured Section */
.featured-section{margin-top:3rem;}
.featured-products{position:relative;overflow:hidden;width:calc(3 * 240px + 2 * 24px);max-width:100%;margin:0 auto;flex-shrink:0;-webkit-mask-image:linear-gradient(to right,transparent 0%,black 10%,black 90%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,black 10%,black 90%,transparent 100%);}
.featured-products-track{display:flex;transition:transform 0.5s cubic-bezier(0.4,0.2,0.2,1);will-change:transform;gap:24px;padding:0;}
.featured-products .store-product{flex:0 0 240px;max-width:240px;margin:0;box-sizing:border-box;box-shadow:none;border:1.5px solid var(--steel);}
.featured-products .store-product *{box-sizing:border-box;}
.featured-carousel-row{display:flex;align-items:center;justify-content:center;gap:0;}
.carousel-arrow{position:static;top:auto;left:auto;right:auto;margin:0 12px;z-index:10;}

/* Trust Indicators */
.trust-indicators{display:flex;flex-direction:column;gap:0.5rem;margin:0.75rem 0;}
.trust-item{display:flex;align-items:center;padding:0.6rem 0.8rem;background:var(--bg-700);border-radius:var(--radius-lg);border:1px solid var(--steel);transition:var(--transition-normal);}
.trust-item:hover{border-color:var(--turquoise);box-shadow:0 2px 12px 0 rgba(230,57,70,0.15);}
.trust-text{text-align:left;}
.trust-text strong{display:block;color:var(--turquoise);font-weight:700;font-size:0.9rem;}
.trust-text span{color:var(--cyan-light);font-size:0.82rem;}

/* Buttons */
.btn{display:inline-block;padding:0.7em 2em;border-radius:var(--radius-lg);font-weight:700;font-family:var(--font-display);font-size:1rem;text-decoration:none;transition:var(--transition-fast);cursor:pointer;border:none;}
.btn-primary{background:var(--glow-gradient);color:var(--bg-900);box-shadow:0 0 16px 2px #e63946;transition:background 200ms ease,box-shadow 200ms ease,transform 200ms ease;}
.btn-secondary{background:var(--bg-800);color:var(--turquoise);border:1px solid var(--turquoise);}
.btn-primary:hover{background:#0c0808;color:var(--white);transform:translateY(-1px);box-shadow:0 2px 16px 2px rgba(230,57,70,0.25);}
.btn-secondary:hover{background:var(--turquoise);color:var(--bg-900);}

/* Grid Layout */
.grid{display:grid;gap:2rem;}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}

/* Responsive Design */
@media (max-width:1200px){
  .store-layout{flex-direction:column;}
}
@media (max-width:1024px){
  .store-layout{flex-direction:column;}
  .store-main{width:100%;order:1;}
  .store-basket{width:100%;order:2;position:static;max-height:none;}
  .store-sidebar{width:100%;order:3;}
  /* Carousel: show 1 card on tablet */
  .featured-products{width:calc(1 * 240px);-webkit-mask-image:none;mask-image:none;}
}
@media (max-width:768px){
  .store-hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .products-header{flex-direction:column;align-items:flex-start;gap:1rem;}
  .store-sidebar,.store-basket{width:100%;}
  .product-actions{flex-direction:column;gap:0.5rem;}
  .quantity-input{width:100%;}
  .product-topbar span{font-size:1rem;}
  .info-tooltip{width:200px;right:-50px;}
  .featured-products{width:calc(1 * 240px);-webkit-mask-image:none;mask-image:none;}
  .featured-box{padding:2rem 1.2rem;}
  .store-main{padding:1.5rem 1rem;}
}
@media (max-width:480px){
  .store-sidebar,.store-basket{width:100%;}
  .product-image-box{height:60px;}
  .info-tooltip{width:180px;right:-30px;font-size:0.8rem;}
  .product-topbar span{font-size:0.9rem;}
  .featured-box{padding:1.5rem 1rem;}
  .basket-actions{flex-direction:column;gap:0.5rem;}
  .basket-actions .btn{width:100%;justify-content:center;}
}

/* Touch devices: always show quantity +/- buttons (hover doesn't work on mobile) */
@media (hover: none) and (pointer: coarse) {
  .quantity-pyramid-buttons {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Featured Section */
.featured-products-track{gap:24px;} /* 3 * 240 + 2 * 24 = 768px viewport */
.featured-products .store-product{min-height:0;max-width:240px;padding:1.1rem;box-shadow:none;}

/* Store Products Grid */
.store-products{gap:1.2rem;}
.store-product{padding:1.1rem;}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}

.featured-box{position:relative;background:var(--bg-800);border-radius:var(--radius-xl);padding:3rem 2rem;margin:0 auto;max-width:1100px;min-height:auto;display:flex;flex-direction:column;align-items:center;box-shadow:none;overflow:visible;}
.carousel-arrow{background:var(--bg-900);color:var(--turquoise);border:none;border-radius:50%;width:38px;height:38px;font-size:1.5rem;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px 0 rgba(0,0,0,0.25);cursor:pointer;transition:background 0.2s, color 0.2s, transform 0.2s;margin:0 0.5rem;z-index:20;}
.carousel-arrow:hover{background:var(--turquoise);color:var(--bg-900);transform:scale(1.1);box-shadow:0 0 20px 4px rgba(230,57,70,0.3);}
/* arrows are position:static inside flex row — left/right offsets unused */

/* On hover, change border color */
.featured-products .store-product:hover{border-color:var(--turquoise);}

.checkout-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.7rem;
}
.form-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  margin-bottom: 0.3rem;
}
.form-group label {
  color: var(--cyan-light);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.form-control {
  width: 100%;
  padding: 0.7em 1em;
  border-radius: 0.5rem;
  border: 1.5px solid var(--steel);
  background: var(--bg-700);
  color: var(--white);
  font-size: 1rem;
  font-weight: 500;
  transition: border-color 0.18s, box-shadow 0.18s;
  margin-bottom: 0.2rem;
}
.form-control:focus {
  border-color: var(--turquoise);
  box-shadow: 0 0 0 2px rgba(230,57,70,0.12);
  outline: none;
}
.form-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.form-checkbox input[type="checkbox"] {
  accent-color: var(--turquoise);
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.5em;
}
.form-checkbox label {
  color: var(--cyan-light);
  font-size: 0.98rem;
  font-weight: 500;
  margin-bottom: 0;
}
.form-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.btn.w-full {
  width: 100%;
  justify-content: center;
}
.mt-sm {
  margin-top: 0.5rem;
}
#basket-checkout {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.basket-qty-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--bg-700);
  color: var(--turquoise);
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.10);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.12s;
  margin: 0 0.02em;
}
.basket-qty-btn:hover, .basket-qty-btn:focus {
  background: var(--turquoise);
  color: var(--bg-900);
  transform: scale(1.08);
  outline: none;
}

.featured-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  max-width: 260px;
  margin: 0 auto;
  height: 220px;
  background: var(--bg-800);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  border: 2px solid var(--turquoise);
  padding: 0;
}
.featured-product .product-topbar {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
.featured-product .product-topbar span {
  font-size: 1.2rem;
  font-weight: 800;
  text-align: center;
  width: 100%;
  display: block;
  color: var(--turquoise);
  margin: 0;
  padding: 0;
}
.featured-product .product-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.5em 0 0.2em 0;
}
.featured-product .product-price {
  font-size: 1.3rem;
  font-weight: 900;
  text-align: center;
  margin: 0;
  color: var(--turquoise);
}
.featured-product .product-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
.featured-product .add-to-cart {
  font-size: 1.05rem;
  padding: 0.9em 2em;
  min-width: 140px;
  border-radius: var(--radius-lg);
  background: var(--glow-gradient);
  color: var(--bg-900);
  font-weight: 800;
  transition: all 0.2s ease;
}
.featured-product .add-to-cart:hover {
  background: linear-gradient(90deg, var(--turquoise) 0%, var(--turquoise) 100%);
  color: var(--bg-900);
  transform: scale(1.04);
}

.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  width: 100%;
}
.section-header h2 {
  font-size: 2rem;
  font-weight: 900;
  color: var(--turquoise);
  text-align: center;
  margin: 0 0 0.2em 0;
  position: relative;
}
.section-header .section-subtitle {
  color: var(--cyan-light);
  font-size: 1.08rem;
  text-align: center;
  margin: 0;
  text-shadow: 0 0 8px rgba(127,252,255,0.3);
} 

.sidebar-section {margin-top: 1.5rem;}

/* Payment Modal Styles */
.payment-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.payment-modal-content {
  background: var(--bg-800);
  border-radius: var(--radius-xl);
  box-shadow: var(--glow-shadow);
  border: 1px solid var(--turquoise);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}

.payment-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--steel);
}

.payment-modal-header h3 {
  color: var(--turquoise);
  font-size: 1.3rem;
  margin: 0;
}

.payment-modal-close {
  background: none;
  border: none;
  color: var(--steel);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.payment-modal-close:hover {
  color: var(--turquoise);
  background: var(--bg-700);
}

.payment-modal-body {
  padding: 2rem;
}

.payment-summary {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--bg-700);
  border-radius: var(--radius-lg);
  border: 1px solid var(--steel);
}

.payment-summary h4 {
  color: var(--turquoise);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.order-items {
  margin-bottom: 1rem;
}

.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--bg-600);
  color: var(--cyan-light);
}

.order-item:last-child {
  border-bottom: none;
}

.order-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 2px solid var(--turquoise);
  color: var(--turquoise);
  font-size: 1.1rem;
}

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.payment-method-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
  background: var(--bg-700);
  border: 2px solid var(--steel);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--cyan-light);
  text-align: left;
  width: 100%;
}

.payment-method-btn:hover {
  border-color: var(--turquoise);
  background: var(--bg-600);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(193, 18, 31, 0.2);
}

.payment-method-btn.stripe-btn:hover {
  border-color: #6772e5;
  box-shadow: 0 4px 16px rgba(103, 114, 229, 0.2);
}

.payment-method-btn.paypal-btn:hover {
  border-color: #0070ba;
  box-shadow: 0 4px 16px rgba(0, 112, 186, 0.2);
}

.payment-method-btn.crypto-btn:hover {
  border-color: #f7931a;
  box-shadow: 0 4px 16px rgba(247, 147, 26, 0.2);
}

.payment-method-icon {
  font-size: 2rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-600);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.payment-method-info {
  flex: 1;
}

.payment-method-info strong {
  display: block;
  color: var(--turquoise);
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

.payment-method-info span {
  color: var(--steel);
  font-size: 0.9rem;
}

.payment-loading {
  text-align: center;
  padding: 3rem 2rem;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid var(--steel);
  border-top: 3px solid var(--turquoise);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1.5rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.payment-loading h3 {
  color: var(--turquoise);
  margin-bottom: 1rem;
}

.payment-loading p {
  color: var(--cyan-light);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .payment-modal-content {
    width: 95%;
    margin: 1rem;
  }
  
  .payment-modal-header {
    padding: 1rem 1.5rem;
  }
  
  .payment-modal-body {
    padding: 1.5rem;
  }
  
  .payment-method-btn {
    padding: 1rem;
  }
  
  .payment-method-icon {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }
}
/* === FLUID HEADINGS & 4K === */
h1 { font-size: clamp(1.6rem, 4vw, 2.8rem) !important; }
@media (max-width: 560px) {
  .store-products { gap: 1rem; }
  .store-product { padding: 1rem; }
}
@media (min-width: 1920px) {
  :root { --container-max-width: 1600px; }
  html { font-size: 18px; }
  .store-sidebar { width: 300px; }
  .store-basket { width: 400px; }
}
@media (min-width: 2560px) {
  :root { --container-max-width: 2100px; }
  html { font-size: 20px; }
}