/* =========================================================================
   UASK.UK — store layout layer (header, menu, product cards, home, footer)
   Styled to echo stonerefurb.co.uk in a Material Design 3 idiom.
   Targets stock OpenCart 3 / Bootstrap 3 markup.
   ========================================================================= */

/* ===== top utility bar (slim, light — like stonerefurb) ================== */
nav#top {
  background: #fafbfb;
  border-bottom: 1px solid var(--md-outline);
  color: var(--md-on-surface-med);
  padding: 0;
  margin: 0;               /* kill stock 20px margin-bottom (grey gap) */
  min-height: 34px;
  font-size: 12.5px;
}
nav#top .container { display: flex; align-items: center; flex-wrap: wrap; min-height: 34px; }
nav#top a, nav#top .dropdown-toggle, nav#top .btn-link { color: var(--md-on-surface-med) !important; }
nav#top a:hover, nav#top .btn-link:hover { color: var(--md-primary) !important; }
nav#top .btn-link { padding: 6px 8px; box-shadow:none; text-transform: none; }
nav#top #top-phone { padding: 8px 0; }
nav#top #top-phone .fa { color: var(--md-primary); margin-right: 5px; }
nav#top .pull-right { margin-left: auto; display: flex; align-items: center; }

/* ===== main header (white) ============================================== */
header {
  background: #ffffff;
  box-shadow: 0 1px 0 var(--md-outline);
  padding: 18px 0;
  position: relative;
  z-index: 30;
}
header .container > .row { display: flex; align-items: center; flex-wrap: wrap; }
#logo { margin: 0; }
#logo a { color: var(--md-primary-dark); font-weight: 800; font-size: 28px; letter-spacing: .3px; display:inline-block; }
#logo img { max-height: 56px; width: auto; }

/* search: rounded field on the left + solid green button on the right,
   both exactly 54px tall, no clipping/overhang */
#search {
  display: flex; align-items: stretch; margin-bottom: 0;
  background: transparent; border: none; border-radius: 0; overflow: visible; box-shadow: none;
}
#search .form-control {
  flex: 1 1 auto; height: 54px; padding: 0 18px; font-size: 15px;
  border: 1px solid var(--md-outline); border-right: none;
  border-radius: var(--md-radius-sm) 0 0 var(--md-radius-sm);
  box-shadow: none; background: #fff;
}
#search .form-control:focus { border-color: var(--md-primary-light); box-shadow: none; }
#search .btn {
  flex: 0 0 auto; height: 54px; margin: 0 0 0 -1px; padding: 0 26px;
  border: none; box-shadow: none; background: var(--search-btn); color: #fff; font-size: 18px;
  border-radius: 0 var(--md-radius-sm) var(--md-radius-sm) 0;
  display: inline-flex; align-items: center; justify-content: center;
}
#search .btn:hover, #search .btn:focus, #search .btn:active { background: var(--search-btn-dark); color:#fff; }

/* right-side actions: account / wishlist / basket (dark) */
#uask-actions { display: flex; align-items: center; justify-content: flex-end; gap: 30px; }
#uask-actions > .dropdown > a, #uask-actions > a {
  display: flex; align-items: center; gap: 8px;
  color: var(--md-on-surface); font-weight: 600; font-size: 13.5px; white-space: nowrap;
}
#uask-actions > .dropdown > a:hover, #uask-actions > a:hover { color: var(--md-primary); }
#uask-actions .fa { font-size: 22px; color: var(--md-on-surface-med); transition: color .15s ease; }
#uask-actions > .dropdown > a:hover .fa, #uask-actions > a:hover .fa { color: var(--md-primary); }
#uask-actions .dropdown-menu {
  border: none; border-radius: var(--md-radius); box-shadow: var(--md-elev-3); margin-top: 12px; padding: 6px 0;
}
#uask-actions .dropdown-menu > li > a { padding: 8px 18px; }

/* basket = OpenCart cart module, flattened into the actions row.
   OC outputs <div id="cart" class="btn-group btn-block"> with a btn-block btn-lg
   button — neutralise the full-width stretch & stray margins. */
#uask-actions #cart,
#uask-actions #cart.btn-group,
#uask-actions #cart.btn-block { display: inline-flex; width: auto; margin: 0; float: none; }
#uask-actions #cart > .btn,
#uask-actions #cart > .btn.btn-block {
  background: transparent; color: var(--md-on-surface); box-shadow: none;
  padding: 0; width: auto; margin: 0; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 13.5px; border-radius: 0; line-height: 1.2;
}
#uask-actions #cart > .btn:hover, #uask-actions #cart.open > .btn { color: var(--md-primary); background: transparent; }
#uask-actions #cart .fa-shopping-cart { font-size: 22px; color: var(--md-on-surface-med); }
#uask-actions #cart > .btn:hover .fa-shopping-cart { color: var(--md-primary); }
#uask-actions #cart .dropdown-menu {
  min-width: 340px; padding: 12px; margin-top: 12px;
  border: none; border-radius: var(--md-radius); box-shadow: var(--md-elev-3);
}
#uask-actions #cart .dropdown-menu td { vertical-align: middle; }
#uask-actions #cart .uask-cart-label { font-weight: 600; }
#uask-actions #cart .uask-cart-total { display: none; }   /* hide OC "0 item(s) - £0.00" */

/* ===== category menu bar (light grey, bold links, carets) =============== */
nav#menu.navbar {
  background: #f4f6f6;
  border: none; border-radius: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  margin-bottom: 0; min-height: 50px;
}
#menu .container { padding: 0; }
#menu .nav > li > a {
  color: var(--md-on-surface); font-weight: 700; font-size: 14px;
  padding: 15px 18px; border-radius: 0; transition: background .15s ease, color .15s ease;
}
#menu .nav > li > a:hover, #menu .nav > li.open > a, #menu .nav > li > a:focus {
  background: rgba(0,0,0,.045); color: var(--md-primary);
}
#menu .nav > li.dropdown > a:after {
  content: "\f107"; font-family: FontAwesome; font-weight: normal;
  margin-left: 7px; font-size: 12px; color: var(--md-on-surface-med);
}
#menu .nav > li.dropdown > a:hover:after, #menu .nav > li.dropdown.open > a:after { color: var(--md-primary); }
#menu .dropdown-menu {
  border: none; border-radius: 0 0 var(--md-radius) var(--md-radius);
  box-shadow: var(--md-elev-3); padding: 18px 22px; margin-top: 0;
}
#menu .dropdown-inner { display: flex; gap: 32px; flex-wrap: wrap; }
#menu .dropdown-menu a { color: var(--md-on-surface-med); padding: 6px 0; }
#menu .dropdown-menu a:hover { color: var(--md-primary); background: transparent; }
#menu .see-all { display:inline-block; margin-top:10px; font-weight:600; color: var(--md-primary); }
#menu .btn-navbar { background: var(--md-primary); color:#fff; border:none; box-shadow:none; margin: 9px 0; }
#menu #category { color: var(--md-on-surface); font-weight: 600; padding: 15px; }

/* ===== generic page frame ================================================ */
#common-home.container, #product-category.container, #product-product.container,
#product-special.container, #product-search.container, #product-manufacturer.container,
#information-information.container, #account-account.container, #checkout-cart.container {
  background: transparent; padding-top: var(--sp-3); padding-bottom: var(--sp-6);
}
#content h1, #content h2 { margin-top: 0; margin-bottom: var(--sp-2); }

/* ===== product cards (category / special / search / module) ============== */
.product-thumb {
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--md-radius);
  box-shadow: var(--md-elev-1);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
  margin-bottom: var(--sp-3);
  display: flex; flex-direction: column; height: calc(100% - var(--sp-3));
}
.product-thumb:hover { box-shadow: var(--md-elev-3); transform: translateY(-3px); }
.product-thumb .image { position: relative; background:#fff; }
.product-thumb .image a { display:block; padding: 18px; text-align:center; }
.product-thumb .image img { display:inline-block; max-height: 190px; width:auto; object-fit: contain; mix-blend-mode: multiply; }
.product-thumb .caption { padding: 4px 18px 12px; min-height: auto; flex: 1 1 auto; }
.product-thumb .caption h4 { font-size: 15px; line-height:1.4; margin: 0 0 8px; }
.product-thumb .caption h4 a { color: var(--md-on-surface); }
.product-thumb .caption h4 a:hover { color: var(--md-primary); }
.product-thumb .caption p { color: var(--md-on-surface-med); font-size: 13px; }
.product-thumb .price { color: var(--md-on-surface); font-size: 20px; font-weight: 700; margin-top: 6px; }
.product-thumb .price-new { color: var(--md-primary-dark); }
.product-thumb .price-old { color: var(--md-on-surface-med); text-decoration: line-through; font-size: 15px; font-weight:400; margin-left:6px; }
.product-thumb .price-tax { display:block; font-size: 11px; color: var(--md-on-surface-med); font-weight: 400; }
.product-thumb .button-group { display: flex; border-top: 1px solid var(--md-outline); background: var(--md-surface); }
.product-thumb .button-group button {
  border: none; background: var(--md-surface); color: var(--md-on-surface-med);
  padding: 13px 10px; font-weight:500; transition: background .15s ease, color .15s ease;
}
.product-thumb .button-group button:first-child { flex: 1 1 auto; color: var(--md-primary); font-weight:600; }
.product-thumb .button-group button:hover { background: var(--md-surface-2); color: var(--md-primary-dark); }

/* condition grade badge (added via product name convention or manual markup) */
.grade-badge { position:absolute; top:12px; left:12px; z-index:2; color:#fff;
  font-size:11px; font-weight:700; padding:4px 10px; border-radius: var(--md-radius-pill);
  box-shadow: var(--md-elev-1); letter-spacing:.3px; }
.grade-badge.g-aplus { background: var(--grade-aplus); }
.grade-badge.g-a { background: var(--grade-a); }
.grade-badge.g-b { background: var(--grade-b); }
.grade-badge.g-c { background: var(--grade-c); }

/* list view */
.product-list .product-thumb { flex-direction: row; }
.product-list .product-thumb .image { flex: 0 0 220px; }
.product-list .product-thumb > div:last-child { display:flex; flex-direction:column; flex:1 1 auto; }

/* refine categories row on category page */
#product-category .refine-search ul,
#product-category #content > .row ul { list-style: none; padding-left: 0; }

/* toolbar (sort / limit / view) */
#product-category .btn-group .btn, #product-search .btn-group .btn { box-shadow: var(--md-elev-1); }

/* ===== home page building blocks (utility classes for future modules) ==== */
.uask-hero {
  background: linear-gradient(120deg, var(--md-primary) 0%, var(--md-primary-dark) 100%);
  color:#fff; border-radius: var(--md-radius-lg); padding: 48px 40px; margin-bottom: var(--sp-4);
  box-shadow: var(--md-elev-2); position: relative; overflow: hidden;
}
.uask-hero h1 { color:#fff; font-size: 2.2rem; margin-bottom: 12px; }
.uask-hero p { color: rgba(255,255,255,.9); font-size: 1.1rem; max-width: 620px; }
.uask-hero .btn { margin-top: 20px; background:#fff; color: var(--md-primary-dark); }

.uask-trust { display:flex; flex-wrap:wrap; gap: var(--sp-2); margin: var(--sp-4) 0; }
.uask-trust .item { flex:1 1 200px; background: var(--md-surface); border-radius: var(--md-radius);
  box-shadow: var(--md-elev-1); padding: 20px; text-align:center; }
.uask-trust .item .fa { font-size: 28px; color: var(--md-primary); margin-bottom: 10px; }
.uask-trust .item h5 { margin: 0 0 4px; font-weight:600; }
.uask-trust .item small { color: var(--md-on-surface-med); }

.uask-section-title { display:flex; align-items:center; justify-content:space-between; margin: var(--sp-4) 0 var(--sp-2); }
.uask-section-title h2 { margin:0; }
.uask-section-title a { font-weight:600; }

/* ===== footer =========================================================== */
footer {
  background: #10201f;
  color: rgba(255,255,255,.7);
  margin-top: var(--sp-6);
  padding: var(--sp-6) 0 var(--sp-3);
}
footer h5 { color:#fff; font-weight:600; margin-bottom: 16px; text-transform:none; font-size: 15px; }
footer a { color: rgba(255,255,255,.7); }
footer a:hover { color:#fff; }
footer ul > li { padding: 4px 0; }
footer hr { border-top-color: rgba(255,255,255,.12); margin: var(--sp-3) 0 var(--sp-2); }
footer p { color: rgba(255,255,255,.5); font-size: 13px; }

/* ===== back-to-top FAB =================================================== */
#uask-top {
  position: fixed; right: 22px; bottom: 22px; width: 52px; height: 52px;
  border-radius: 50%; background: var(--md-accent); color:#fff; border:none;
  box-shadow: var(--md-elev-3); font-size: 20px; z-index: 999;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease, transform .15s ease;
}
#uask-top.show { opacity: 1; visibility: visible; }
#uask-top:active { transform: scale(.94); }

/* ===== snackbar ========================================================= */
#uask-snackbar {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(120%);
  background: #2c3a39; color:#fff; padding: 14px 22px; border-radius: var(--md-radius);
  box-shadow: var(--md-elev-3); z-index: 1200; font-size: 14px; max-width: 90vw;
  transition: transform .25s cubic-bezier(.2,.8,.2,1); opacity: 0;
}
#uask-snackbar.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ===== responsive ======================================================= */
@media (max-width: 767px) {
  header .container > .row { flex-direction: column; align-items: stretch; gap: 12px; }
  #logo { text-align:center; }
  #menu .nav > li > a { padding: 12px 16px; }
  .uask-hero { padding: 32px 22px; }
  .uask-hero h1 { font-size: 1.6rem; }
  .product-list .product-thumb { flex-direction: column; }
  .product-list .product-thumb .image { flex: none; }
}