/**
 * Above-the-fold shop styles + minimal layout utilities.
 * Full theme: shop.css (deferred). Grid/forms: bootstrap.min.css (deferred).
 */

body.skin-shop {
  --mh-primary: #1c64f2;
  --mh-primary-dark: #1a56db;
  --mh-primary-deep: #1848c7;
  --mh-indigo: #4f46e5;
  --mh-indigo-dark: #4338ca;
  --mh-accent: #ff6a00;
  --mh-accent-dark: #e85d00;
  --mh-navy: #0f172a;
  --mh-navy-2: #1e293b;
  --mh-ink: #1f2933;
  --mh-muted: #6b7280;
  --mh-line: #e5e7eb;
  --mh-bg: #f4f6fb;
  --mh-card: #ffffff;
  --mh-on-dark: #cbd5e1;
  --mh-tld-light: #bfdbfe;
  --mh-radius: 14px;
  --mh-radius-sm: 10px;
  --mh-shadow: 0 10px 30px rgba(15, 23, 42, .08);
  --mh-shadow-sm: 0 4px 14px rgba(15, 23, 42, .06);
  --mh-gradient-brand: linear-gradient(135deg, var(--mh-primary), var(--mh-indigo));
  --mh-gradient-brand-hover: linear-gradient(135deg, var(--mh-primary-dark), var(--mh-indigo-dark));
  --mh-gradient-brand-active: linear-gradient(135deg, var(--mh-primary-deep), #3730a3);
  --mh-gradient-accent-bar: linear-gradient(90deg, var(--mh-primary), var(--mh-indigo), var(--mh-accent));
  --mh-shadow-brand: 0 6px 16px rgba(28, 100, 242, .35);
  --mh-shadow-brand-sm: 0 4px 12px rgba(28, 100, 242, .3);

  margin: 0;
  background-color: var(--mh-bg);
  color: var(--mh-ink);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

body.skin-shop a {
  text-decoration: none;
}

/* minimal layout (bootstrap subset for shell + hero) */
.container {
  width: 100%;
  max-width: 1320px;
  margin-right: auto;
  margin-left: auto;
  padding-right: calc(1.5rem * .5);
  padding-left: calc(1.5rem * .5);
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(-.5 * 1.5rem);
  margin-left: calc(-.5 * 1.5rem);
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(1.5rem * .5);
  padding-left: calc(1.5rem * .5);
}

.g-4 {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
  margin-right: calc(-.5 * var(--bs-gutter-x));
  margin-left: calc(-.5 * var(--bs-gutter-x));
  margin-top: calc(-1 * var(--bs-gutter-y));
}

.g-4 > * {
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}

.col-lg-5,
.col-lg-7,
.col-lg-8 {
  flex: 0 0 auto;
  width: 100%;
}

@media (min-width: 992px) {
  .col-lg-5 { width: 41.66666667%; }
  .col-lg-7 { width: 58.33333333%; }
  .col-lg-8 { width: 66.66666667%; }
  .text-lg-end { text-align: right !important; }
  .d-lg-inline { display: inline !important; }
  .d-lg-block { display: block !important; }
}

.d-flex { display: flex !important; }
.d-none { display: none !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.min-vh-100 { min-height: 100vh !important; }
.align-items-center { align-items: center !important; }
.gap-2 { gap: .5rem !important; }
.text-center { text-align: center !important; }
.ms-1 { margin-left: .25rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-auto { margin-top: auto !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.img-fluid { max-width: 100%; height: auto; }
.rounded { border-radius: var(--mh-radius-sm); }

.btn {
  display: inline-block;
  padding: .65rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: .375rem;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

body.skin-shop .btn-primary {
  color: #fff;
  background: var(--mh-gradient-brand);
  border: 0;
  box-shadow: var(--mh-shadow-brand-sm);
  font-weight: 600;
}

body.skin-shop .btn-primary:hover,
body.skin-shop .btn-primary:focus-visible {
  color: #fff;
  background: var(--mh-gradient-brand-hover);
  box-shadow: var(--mh-shadow-brand);
}

body.skin-shop .btn-accent {
  background: var(--mh-accent);
  border: 0;
  color: #fff;
  font-weight: 700;
  padding: .65rem 1.5rem;
  border-radius: 999px;
}

body.skin-shop .btn-accent:hover {
  background: var(--mh-accent-dark);
  color: #fff;
}

body.skin-shop .btn-outline-light {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .55);
  background: transparent;
  font-weight: 700;
  padding: .65rem 1.5rem;
  border-radius: 999px;
}

body.skin-shop .btn-outline-light:hover {
  color: var(--mh-navy);
  background: #fff;
  border-color: #fff;
}

body.skin-shop .btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: #25d366;
  border: 0;
  color: #fff;
  font-weight: 700;
  padding: .65rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
}

body.skin-shop .btn-whatsapp svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

.shop-topbar__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.shop-header {
  background: linear-gradient(180deg, #f8fafc 0%, #fff 55%);
  border-bottom: 1px solid var(--mh-line);
  position: relative;
}

.shop-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--mh-gradient-accent-bar);
}

.shop-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
}

.shop-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
}

.shop-brand__mark {
  width: 46px;
  height: 46px;
  border-radius: var(--mh-radius-sm);
  background: var(--mh-gradient-brand);
  color: #fff;
  font-weight: 800;
  font-size: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--mh-shadow-brand);
}

.shop-brand__mark-accent {
  color: var(--mh-accent);
}

.shop-brand__text {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--mh-navy);
  letter-spacing: -.02em;
  line-height: 46px;
}

.shop-brand__care {
  color: var(--mh-accent);
}

.shop-brand__tld {
  color: var(--mh-primary);
}

.shop-brand__text--pill {
  display: inline-flex;
  align-items: baseline;
  padding: .35rem .85rem;
  line-height: 1.2;
  border-radius: var(--mh-radius-sm);
  background: var(--mh-gradient-brand);
  box-shadow: var(--mh-shadow-brand);
  color: #fff;
}

.shop-brand__text--pill .shop-brand__tecno {
  color: #fff;
}

.shop-brand__text--pill .shop-brand__care {
  color: var(--mh-accent);
}

.shop-brand__text--pill .shop-brand__tld {
  color: var(--mh-tld-light);
}

.shop-search {
  flex: 1 1 auto;
  display: flex;
  border: 2px solid var(--mh-primary);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}

.shop-search__input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  padding: .65rem 1.1rem;
  font-size: .95rem;
  background: transparent;
}

.shop-search__btn {
  border: 0;
  background: var(--mh-gradient-brand);
  color: #fff;
  padding: 0 1.25rem;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}

.shop-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
  margin-left: auto;
}

.shop-action {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--mh-ink);
  font-weight: 600;
  font-size: .9rem;
}

.shop-action__icon-wrap {
  position: relative;
  display: inline-flex;
}

.shop-cart-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--mh-accent);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.shop-nav {
  background: var(--mh-navy-2);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.shop-nav__inner {
  padding: .75rem 0;
}

.shop-nav__menu {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
}

.shop-nav__btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  padding: .65rem .35rem;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.shop-nav__icon {
  width: 2rem;
  height: 2rem;
  display: block;
  flex-shrink: 0;
}

.shop-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}

.shop-page-head h1 {
  font-weight: 800;
  font-size: 1.6rem;
  margin: 0;
  color: var(--mh-navy);
}

.shop-breadcrumb {
  font-size: .85rem;
  color: var(--mh-muted);
  margin-bottom: 1rem;
}

.shop-breadcrumb a {
  color: var(--mh-muted);
}

.shop-hero {
  border-radius: var(--mh-radius);
  background: linear-gradient(120deg, var(--mh-navy) 0%, #1d4ed8 60%, #4f46e5 100%);
  color: #fff;
  padding: 2.5rem;
  margin-bottom: 1.75rem;
  overflow: hidden;
  position: relative;
}

.shop-hero h2 {
  font-weight: 800;
  font-size: 2rem;
  margin-bottom: .5rem;
}

.shop-hero p {
  opacity: .9;
  margin-bottom: 1.25rem;
  max-width: 32rem;
}

.shop-hero--split p {
  max-width: none;
}

.shop-hero__image {
  max-width: 420px;
  width: 100%;
  box-shadow: var(--mh-shadow);
}