@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600;700&display=swap');

/* ================================
   TOKENS / PALETTE
================================== */
:root{
  --sky:#00b9ce;
  --ocean:#2e6c90;
  --gold:#e6a955;
  --midnight:#142536;
  --ivory:#f1edd8;
  --ash:#c3d3dd;
  --ink:#142536;
  --panel:#ffffff;
  --panelSoft:#f6f8fb;
  --radius-card:12px;
  --radius-button:10px;
  --shadow-1:0 6px 18px rgba(20,37,54,.08);
}

/* ================================
   GLOBAL
================================== */
html,body{
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--midnight);
  background:#f0f4f7;
  margin:0;
  padding:0;
}
a{ color:var(--sky); }
a:hover, a:focus{ color:var(--gold); text-decoration:none; }

/* ================================
   HEADER
================================== */
.shop-header{
  background:linear-gradient(135deg,var(--midnight),var(--ocean));
  color:#fff;
  padding:18px 32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  position:sticky;
  top:0;
  z-index:10;
}
.shop-header h1{
  color:#fff;
  font-weight:700;
  font-size:22px;
  letter-spacing:.5px;
  margin:0;
}

#cart-button{
  background:var(--sky);
  color:#fff;
  border:none;
  border-radius:9999px;
  padding:10px 20px;
  cursor:pointer;
  font-weight:600;
  transition:all .3s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
#cart-button:hover{
  background:var(--gold);
  color:var(--midnight);
  transform:translateY(-1px);
}

/* ================================
   SHIPPING BANNER (shrunk)
   (keep this block LOW in file so it wins)
================================== */
.shipping-banner{
  background:linear-gradient(180deg,#e9faff,#f7fdff);
  color:var(--midnight);
  border:1px solid var(--ash);
  border-left:6px solid var(--sky);
  border-radius:12px;
  padding:12px 18px;     /* smaller */
  max-width:800px;       /* smaller */
  margin:16px auto 8px;  /* centered */
  text-align:center;
  box-shadow:var(--shadow-1);
  line-height:1.4;
}
.shipping-banner h2{
  margin:0 0 4px;
  font-size:1.1rem;      /* smaller */
  color:var(--ocean);
  font-weight:700;
}
.shipping-banner a{ color:var(--sky); font-weight:700; }
.shipping-banner a:hover{ color:var(--gold); }

/* ================================
   PRODUCT GRID
================================== */
#product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:32px;
  max-width:1300px;
  margin:48px auto;
  padding:0 20px 100px;
  align-items:stretch;
}

/* ================================
   PRODUCT CARD
================================== */
.product-card{
  background:var(--panel);
  border:1px solid var(--ash);
  border-radius:16px;
  box-shadow:var(--shadow-1);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:24px 20px;
  transition:transform .3s ease, box-shadow .3s ease;
  min-height:580px;
  overflow:hidden;
}
.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(20,37,54,.15);
}

/* ----- Top (image) ----- */
.product-top{
  height:200px;
  display:flex; align-items:center; justify-content:center;
  background:#f8fafc;
  border-radius:8px;
  overflow:hidden;
  width:100%;
  margin-bottom:12px;
}
.product-top img{
  max-height:100%;
  width:auto;
  object-fit:contain;
  display:block;
}

/* ----- Middle (title + copy) ----- */
.product-content,
.product-middle{
  flex-grow:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  height:140px;
  margin-bottom:8px;
}
.product-content h3,
.product-middle h3{
  color:var(--ocean);
  font-size:18px;
  font-weight:700;
  margin:0 0 8px 0;
}
.product-content p,
.product-middle p{
  font-size:15px;
  line-height:1.45;
  color:#4f5b68;
  margin:0;
  max-width:95%;
}

/* ----- Bottom (center EVERYTHING) ----- */
.product-bottom{
  margin-top:auto;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;     /* << center */
  justify-content:center; /* << center */
  gap:10px;
  padding-top:8px;
}

/* Dropdown group */
.product-options{
  display:flex;
  flex-direction:column;  /* << stack vertically */
  align-items:center;     /* << center */
  justify-content:center; /* << center */
  width:100%;
  gap:6px;
  margin-bottom:6px;
}
.product-options label{
  font-size:14px;
  color:#4f5b68;
}

/* Select */
.color-select,
select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  width:80%;
  max-width:260px;
  height:36px;
  padding:0 12px;
  border-radius:8px;
  border:1px solid var(--ash);
  background:#fff;
  font-family:inherit;
  font-size:15px;
  cursor:pointer;
  transition:border .2s ease;
  background-image:
    linear-gradient(45deg,transparent 50%,#64748b 50%),
    linear-gradient(135deg,#64748b 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size:6px 6px;
  background-repeat:no-repeat;
}
.color-select:hover{ border-color:var(--sky); }
select:focus, .color-select:focus{
  border-color:var(--sky);
  outline:none;
  box-shadow:0 0 0 3px rgba(0,185,206,.18);
}

/* Price + item number */
.product-bottom .price{
  font-weight:600;
  color:var(--midnight);
  font-size:16px;
  margin:0;
}
.product-bottom small{
  display:block;
  font-size:13px;
  color:#6b7280;
  margin:0;
}

/* Add to Cart */
.add-cart{
  background:var(--sky);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:12px 0;
  cursor:pointer;
  font-weight:600;
  width:80%;             /* unified width, centered by parent */
  max-width:260px;
  text-align:center;
  letter-spacing:.3px;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
  transition:background .3s ease, transform .2s ease;
}
.add-cart:hover{
  background:var(--gold);
  color:var(--midnight);
  transform:translateY(-2px);
}

/* ================================
   CART MODAL
================================== */
.modal{
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,.6);
  display:flex; justify-content:center; align-items:flex-start;
  padding-top:60px;                 /* show near top on mobile/desktop */
  z-index:9999; backdrop-filter:blur(4px);
}
.modal.hidden{ display:none; }

.modal-content{
  background:var(--panel);
  border-radius:16px;
  padding:32px;
  width:90%;
  max-width:540px;
  box-shadow:0 6px 20px rgba(0,0,0,.2);
  position:relative;
  animation:fadeIn .3s ease;
  border:1px solid var(--ash);
}
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(-10px); }
  to{ opacity:1; transform:translateY(0); }
}
.modal-content .close{
  position:absolute; right:16px; top:12px;
  font-size:22px; cursor:pointer; color:var(--sky); font-weight:bold;
}
.modal-content .close:hover{ color:var(--gold); }

/* Cart items */
.cart-item{
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--ash);
  padding:8px 0; font-size:15px;
}
.cart-item strong{ color:var(--ocean); }
.remove-item{
  background:transparent; border:none; color:var(--sky);
  font-weight:bold; cursor:pointer; font-size:18px; transition:color .3s ease;
}
.remove-item:hover{ color:var(--gold); }

/* Summary */
#cart-summary{
  border-top:1px solid var(--ash);
  margin-top:16px; padding-top:12px; text-align:right;
}
#cart-summary p{
  font-weight:600; margin:8px 0; color:var(--midnight);
}
#promo-code{
  padding:6px 8px; border-radius:6px; border:1px solid var(--ash);
  font-size:14px; margin-bottom:8px;
}
#apply-promo{
  background:var(--gold); color:var(--midnight);
  border:none; border-radius:6px; padding:6px 12px;
  font-weight:600; cursor:pointer; transition:background .3s ease;
}
#apply-promo:hover{ background:var(--sky); color:#fff; }
#checkout{
  background:var(--ocean); color:#fff; border:none; border-radius:8px;
  padding:12px 24px; font-weight:700; cursor:pointer; margin-top:12px;
  transition:background .3s ease;
}
#checkout:hover{ background:var(--gold); color:var(--midnight); }

/* ================================
   FRESHDESK THEME TOUCH-UPS
   (safe to keep; non-shop pages)
================================== */
header.site-header, .navbar, .navbar-inverse, .header, .topbar{
  background:linear-gradient(135deg,var(--midnight),var(--ocean));
  border:0; box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.navbar-brand img, .site-logo img{ max-height:44px; }
.hero, .home-hero, .banner, .search-container{
  background:var(--midnight); color:var(--ivory);
  padding:32px 24px; border-radius:12px;
}
.hero input[type="search"], .search-container .form-control{
  background:#fff; border:1px solid var(--ash); border-radius:10px;
}
.btn, .btn-primary, .btn-success, .btn-info{
  background:var(--sky); border-color:var(--sky); color:#fff;
  border-radius:10px; font-weight:700;
}
.btn:hover, .btn:focus{
  background:var(--gold); border-color:var(--gold); color:var(--midnight);
}
input[type], select, textarea, .form-control{
  border:1px solid var(--ash); border-radius:8px; box-shadow:none;
}
input:focus, select:focus, textarea:focus, .form-control:focus{
  border-color:var(--sky); outline:none; box-shadow:0 0 0 3px rgba(0,185,206,.18);
}
.category-box, .solution-category, .forum_category, .card, .tile{
  background:#fff; border:1px solid var(--ash);
  border-radius:12px; box-shadow:var(--shadow-1);
}
.category-box a, .solution-category a, .card-title a{
  color:var(--ocean); font-weight:700;
}
.article h1, .article h2, .article h3{ color:var(--ocean); font-weight:700; }
.article blockquote{ border-left:4px solid var(--gold); padding-left:12px; color:#4f5b68; }
.breadcrumb{ background:transparent; }
.breadcrumb a{ color:var(--sky); }

/* Footer (global) */
footer{
  background:var(--ocean);
  color:var(--ivory);
  text-align:center;
  padding:30px 0;
  font-size:14px;
  margin-top:60px;
  letter-spacing:.3px;
}

/* ================================
   RESPONSIVE
================================== */
@media (max-width:640px){
  .shop-header{ flex-direction:column; gap:8px; text-align:center; padding:20px 12px; }
  #product-grid{ grid-template-columns:1fr; gap:16px; padding:0 12px 60px; }
  .product-card{ padding:16px 12px; }
  .color-select{ width:90%; }
  .modal-content{ width:95%; padding:24px; }
  .shipping-banner{ max-width:95%; padding:10px 12px; }
}
/* ===== Shipping banner: compact & centered ===== */
.shipping-banner{
  /* smaller frame */
  max-width: 700px;                 /* was 800 */
  padding: 10px 14px;               /* was 12px 18px */
  margin: 8px auto 6px;             /* tighter spacing */
  line-height: 1.35;                /* was 1.4 */
  border-radius: 10px;              /* a touch smaller corner */
}

.shipping-banner h2{
  font-size: 1rem;                  /* was 1.1rem */
  margin: 0 0 2px;                  /* tighter title spacing */
}

.shipping-banner p{
  margin: 6px 0;                    /* reduce vertical whitespace */
  font-size: 0.95rem;               /* slightly smaller body */
}

/* Never let the cart button wrap */
#cart-button{
  white-space: nowrap;
}

/* Extra tightening on tablet/phone */
@media (max-width: 1024px){
  .shipping-banner{
    max-width: 640px;
    padding: 10px 12px;
  }
}

@media (max-width: 640px){
  .shipping-banner{
    max-width: 92vw;
    padding: 8px 10px;
  }
  .shipping-banner h2{ font-size: 0.95rem; }
  .shipping-banner p{ font-size: 0.9rem; }
}