/* =====================================================
   wantto.shop — Modern Design Override
   Based on unishop2 theme. Safe to deploy — won't
   be overwritten by theme updates.
   ===================================================== */

/* --- CSS Custom Properties (brand palette) --- */
:root {
  --brand:        #f07000;
  --brand-hover:  #d86200;
  --brand-light:  #fff4eb;
  --teal:         #00a9c8;
  --text-dark:    #2d2d2d;
  --text-muted:   #777;
  --bg-body:      #f4f6f8;
  --bg-card:      #fff;
  --border-light: rgba(0,0,0,.07);
  --shadow-sm:    0 2px 8px rgba(0,0,0,.06);
  --shadow-md:    0 6px 20px rgba(0,0,0,.10);
  --radius:       8px;
  --radius-btn:   6px;
  --transition:   0.2s ease;
}

/* --- Remove dated brickwall texture --- */
body {
  background-image: none !important;
  background-color: var(--bg-body) !important;
  color: var(--text-dark);
}

/* --- Header: clean white with shadow --- */
header {
  background-color: #fff !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.07) !important;
}

.top-menu {
  background: #fafafa !important;
  border-bottom: 1px solid var(--border-light);
}

.menu-wrapper {
  background: #fff !important;
}

/* --- Search bar refinement --- */
.header-search__input {
  border-radius: var(--radius-btn) 0 0 var(--radius-btn) !important;
  background: #f5f7fa !important;
  border: 1.5px solid #e5e8ee !important;
  transition: border-color var(--transition);
}
.header-search__input:focus {
  border-color: var(--brand) !important;
  background: #fff !important;
}
.header-search__btn {
  border-radius: 0 var(--radius-btn) var(--radius-btn) 0 !important;
  background: var(--brand) !important;
  color: #fff !important;
  transition: background var(--transition);
}
.header-search__btn:hover {
  background: var(--brand-hover) !important;
}

/* --- Buttons: rounded, smooth --- */
.btn {
  border-radius: var(--radius-btn) !important;
  transition: all var(--transition) !important;
  font-weight: 500 !important;
}

.btn-primary,
.add_to_cart:not(.qty-0):not(.disabled) {
  background: var(--brand) !important;
  border-radius: var(--radius-btn) !important;
  box-shadow: none;
  transition: all var(--transition) !important;
}
.btn-primary:hover,
.add_to_cart:not(.qty-0):not(.disabled):hover {
  background: var(--brand-hover) !important;
  box-shadow: 0 4px 14px rgba(240,112,0,.30) !important;
  transform: translateY(-1px);
}

.btn-default {
  border: 1.5px solid var(--border-light) !important;
  background: #fff !important;
  color: #555 !important;
}
.btn-default:hover {
  background: #f7f7f7 !important;
  border-color: #ccc !important;
}

/* --- Product cards: modern card style --- */
.product-thumb {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--bg-card) !important;
  transition: box-shadow var(--transition), transform var(--transition) !important;
  overflow: hidden;
}
.product-thumb:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px);
  border-color: transparent !important;
}

.product-thumb__name {
  font-size: .92em !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}
.product-thumb__name:hover {
  color: var(--brand) !important;
}

.price .price-new {
  color: var(--brand) !important;
  font-weight: 600 !important;
  font-size: 1.05em;
}
.price .price-old {
  font-size: .85em;
  opacity: .65;
}

/* --- Category page wrapper --- */
.uni-wrapper {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border-light) !important;
}

/* --- Navigation menu refinements --- */
.menu1 .menu__header {
  border-radius: var(--radius) var(--radius) 0 0 !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
}
.menu1 .menu__level-2 {
  border-radius: 0 0 var(--radius) var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--border-light) !important;
}

/* --- Section headings: cleaner underline --- */
div.heading {
  font-weight: 600 !important;
  letter-spacing: -.01em;
}
.heading:after {
  border-bottom: solid 2px rgba(0,0,0,.06) !important;
}

/* --- Pagination: pill style --- */
.pagination li a {
  border-radius: 50% !important;
  width: 34px;
  height: 34px;
  line-height: 34px !important;
  padding: 0 !important;
  text-align: center;
  font-size: .9em;
  margin: 0 2px;
}
.pagination li.active span {
  border-radius: 50% !important;
  width: 34px;
  height: 34px;
  line-height: 34px !important;
  padding: 0 !important;
}

/* --- Footer: darker, cleaner --- */
footer {
  background: #232323 !important;
}
.footer__column-heading {
  font-weight: 600 !important;
  letter-spacing: .03em;
  font-size: .85em;
  text-transform: uppercase;
}

/* --- Alert messages --- */
.alert {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
}
.alert-success {
  background: #e8f7e1 !important;
  color: #2d6a2d !important;
}
.alert-danger {
  background: #fde8e8 !important;
  color: #b02020 !important;
}

/* --- Sticker badges: rounded --- */
.sticker__item {
  border-radius: 4px !important;
  font-weight: 600 !important;
  font-size: .75em;
  letter-spacing: .02em;
}

/* --- Wishlist / compare buttons: subtle --- */
.wishlist, .compare {
  transition: color var(--transition), border-color var(--transition) !important;
}

/* --- Form inputs: cleaner --- */
.form-control {
  border-radius: var(--radius-btn) !important;
  border: 1.5px solid #e3e3e3 !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
}
.form-control:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(240,112,0,.12) !important;
}

/* --- Fly menu (mobile) refinements --- */
.fly-menu {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
}

/* --- Smooth global transitions --- */
a { transition: color var(--transition) !important; }

/* --- Topstripe (promo bar): modernize --- */
.topstripe {
  font-size: .88em !important;
  font-weight: 500 !important;
}

/* --- Breadcrumb: lighter --- */
.breadcrumb {
  background: transparent !important;
  font-size: .88em;
}
.breadcrumb > li + li:before {
  color: #bbb;
}