/* ═══════════════════════════════════════════════════════════════
   DÉRMATOS COSMETICA — Custom CSS per OpenCart 4
   ═══════════════════════════════════════════════════════════════ */

:root {
  --drm-bg:           #faf9f7;
  --drm-white:        #ffffff;
  --drm-text:         #2a2a2a;
  --drm-text-light:   #6b6b6b;
  --drm-rose:         #c4687a;
  --drm-rose-dark:    #a8485a;
  --drm-rose-pale:    #f5e6ea;
  --drm-border:       #e8e0dc;
  --drm-font-head:    'Cormorant Garamond', Georgia, serif;
  --drm-font-body:    'Jost', 'Helvetica Neue', sans-serif;
  --drm-transition:   0.22s ease;
  --drm-radius:       3px;
}

body {
  font-family: var(--drm-font-body) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  color: var(--drm-text) !important;
  background-color: var(--drm-bg) !important;
  -webkit-font-smoothing: antialiased;
}
a { transition: color var(--drm-transition); }

/* ══ NASCONDE ELEMENTI OC DEFAULT ══ */
nav#top             { display: none !important; }
header > .container { display: none !important; }

/* ══ HEADER ══ */
#dermatos-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--drm-white);
  border-bottom: 1px solid var(--drm-border);
  transition: transform var(--drm-transition), box-shadow var(--drm-transition);
}
#dermatos-header.is-sticky { box-shadow: 0 2px 20px rgba(0,0,0,0.06); }
#dermatos-header.is-hidden { transform: translateY(-100%); }

#dermatos-header-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px clamp(16px, 4vw, 60px);
  max-width: 1280px;
  margin: 0 auto;
}
.drm-col-left  { display: flex; align-items: center; justify-content: flex-start; gap: 4px; }
.drm-col-center { display: flex; justify-content: center; }
.drm-col-right { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 0; }

/* Logo */
#drm-logo img { width: 180px; max-width: 180px; height: auto; display: block; }
.drm-logo-text {
  font-family: var(--drm-font-head);
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--drm-text);
}

/* Icon buttons */
.drm-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer;
  color: var(--drm-text);
  transition: color var(--drm-transition);
  padding: 0; position: relative; text-decoration: none;
}
.drm-icon-btn:hover,
.drm-icon-btn:focus { color: var(--drm-rose); outline: none; }

/* Account dropdown */
.drm-account-dropdown {
  border: 1px solid var(--drm-border) !important;
  border-top: 2px solid var(--drm-rose) !important;
  border-radius: 0 0 var(--drm-radius) var(--drm-radius) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
  padding: 6px 0 !important;
  font-family: var(--drm-font-body) !important;
}
.drm-account-dropdown .dropdown-item {
  font-size: 13px !important; font-weight: 300 !important;
  padding: 9px 18px !important; color: var(--drm-text) !important;
}
.drm-account-dropdown .dropdown-item:hover {
  background: var(--drm-rose-pale) !important; color: var(--drm-rose) !important;
}

/* Cart */
#drm-cart-wrapper { display: flex; align-items: center; }
#drm-cart-wrapper .dropdown.d-grid { display: flex !important; width: auto !important; }
#drm-cart-wrapper button.btn-inverse {
  background: none !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; width: 40px !important; height: 40px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: var(--drm-text) !important; font-size: 0 !important;
}
#drm-cart-wrapper button.btn-inverse i { font-size: 18px !important; }
#drm-cart-wrapper button.btn-inverse:hover { color: var(--drm-rose) !important; }

/* Nav desktop */
#dermatos-nav-desktop { border-top: 1px solid var(--drm-border); }
#drm-menu {
  display: flex; align-items: center; justify-content: center;
  list-style: none; margin: 0;
  padding: 0 clamp(16px, 4vw, 60px);
}
#drm-menu li a {
  display: block; padding: 14px 18px;
  font-family: var(--drm-font-body); font-size: 13px; font-weight: 400;
  letter-spacing: 0.04em; color: var(--drm-text);
  white-space: nowrap; transition: color var(--drm-transition); text-decoration: none;
}
#drm-menu li a:hover { color: var(--drm-rose); }
#drm-menu li.active > a {
  color: var(--drm-rose); text-decoration: underline; text-underline-offset: 4px;
}

/* ══ SEARCH BAR ══ */
#drm-search-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1100;
  background: var(--drm-white);
  padding: 16px clamp(16px, 4vw, 60px);
  border-bottom: 1px solid var(--drm-border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transform: translateY(-100%); transition: transform 0.3s ease;
  display: flex; align-items: center;
}
#drm-search-bar.is-open { transform: translateY(0); }
#drm-search-inner {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 1280px; margin: 0 auto;
}
#drm-search-inner #search { flex: 1; margin: 0 !important; }
#drm-search-inner #search .input-group {
  border: none !important; border-bottom: 1px solid var(--drm-border) !important; border-radius: 0 !important;
}
#drm-search-inner #search input {
  border: none !important; background: transparent !important;
  font-family: var(--drm-font-body) !important; font-size: 15px !important;
  font-weight: 300 !important; box-shadow: none !important; outline: none !important; padding: 8px 4px !important;
}
#drm-search-inner #search .btn { background: none !important; border: none !important; color: var(--drm-text) !important; }
#drm-search-inner #search .btn:hover { color: var(--drm-rose) !important; }
#drm-search-close {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--drm-text); padding: 8px; transition: color var(--drm-transition);
}
#drm-search-close:hover { color: var(--drm-rose); }

/* ══ MOBILE DRAWER ══ */
#drm-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  z-index: 1199; opacity: 0; visibility: hidden;
  transition: opacity var(--drm-transition), visibility var(--drm-transition);
}
#drm-overlay.is-visible { opacity: 1; visibility: visible; }

#drm-mobile-nav {
  position: fixed; top: 0; left: 0;
  width: min(300px, 82vw); height: 100%;
  background: var(--drm-white); z-index: 1200;
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column; overflow-y: auto;
}
#drm-mobile-nav.is-open { transform: translateX(0); }

#drm-mobile-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--drm-border); flex-shrink: 0;
}
#drm-mobile-header img { width: 160px; height: auto; }
#drm-menu-close { background: none; border: none; cursor: pointer; color: var(--drm-text); padding: 4px; }
#drm-mobile-menu-content { flex: 1; overflow-y: auto; }

#drm-mobile-menu { list-style: none; margin: 0; padding: 0; }
#drm-mobile-menu li a {
  display: block; padding: 15px 24px;
  font-family: var(--drm-font-body); font-size: 15px; font-weight: 400;
  color: var(--drm-text); border-bottom: 1px solid var(--drm-border);
  transition: color var(--drm-transition), background var(--drm-transition); text-decoration: none;
}
#drm-mobile-menu li a:hover { color: var(--drm-rose); background: var(--drm-rose-pale); }

#drm-mobile-footer {
  padding: 18px 20px; border-top: 1px solid var(--drm-border);
  font-size: 13px; color: var(--drm-text-light);
  display: flex; gap: 8px; align-items: center; flex-shrink: 0;
}
#drm-mobile-footer a { color: var(--drm-text-light); }
#drm-mobile-footer a:hover { color: var(--drm-rose); }

/* ══ RESPONSIVE HEADER ══ */
.drm-desktop-only { display: flex !important; }
.drm-mobile-only  { display: none !important; }

@media (max-width: 767px) {
  .drm-desktop-only     { display: none !important; }
  .drm-mobile-only      { display: flex !important; }
  #dermatos-nav-desktop { display: none !important; }
  #dermatos-header-top  { padding: 12px 16px; }
  #drm-logo img         { width: 130px; max-width: 130px; }
}

/* ══ MAIN + TIPOGRAFIA ══ */
main { background: var(--drm-bg) !important; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--drm-font-head) !important;
  font-weight: 400 !important; color: var(--drm-text) !important;
}
.drm-title-rose {
  font-family: var(--drm-font-head) !important;
  color: var(--drm-rose) !important; font-weight: 400 !important; line-height: 1.25 !important;
}

/* ══ BOTTONI ══ */
.btn-primary {
  background-color: var(--drm-rose) !important; border-color: var(--drm-rose) !important;
  color: #fff !important; font-family: var(--drm-font-body) !important;
  font-size: 12px !important; font-weight: 400 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important;
  border-radius: var(--drm-radius) !important;
  transition: background-color var(--drm-transition), border-color var(--drm-transition) !important;
}
.btn-primary:hover {
  background-color: var(--drm-rose-dark) !important; border-color: var(--drm-rose-dark) !important;
}
.btn-secondary, .btn-light {
  border-color: var(--drm-border) !important; color: var(--drm-text) !important;
  font-family: var(--drm-font-body) !important; font-weight: 300 !important;
}

/* ══ PRODUCT GRID ══ */
.product-thumb {
  border: none !important; border-bottom: 1px solid var(--drm-border) !important;
  border-radius: 0 !important; padding: 0 0 20px 0 !important;
  background: transparent !important; box-shadow: none !important;
}
.product-thumb .image {
  overflow: hidden !important; border-radius: var(--drm-radius) !important;
  background: var(--drm-rose-pale) !important;
}
.product-thumb .image img { transition: transform 0.5s ease !important; }
.product-thumb:hover .image img { transform: scale(1.04) !important; }
.product-thumb .caption { padding: 12px 0 0 !important; }
.product-thumb h4 a {
  font-family: var(--drm-font-body) !important; font-size: 14px !important;
  font-weight: 400 !important; color: var(--drm-text) !important;
}
.product-thumb h4 a:hover { color: var(--drm-rose) !important; }
.product-thumb .price,
.product-thumb .price-new { color: var(--drm-rose) !important; font-weight: 300 !important; font-size: 15px !important; }
.product-thumb .price-old { color: var(--drm-text-light) !important; text-decoration: line-through !important; }

/* ══ BREADCRUMB ══ */
.breadcrumb { background: transparent !important; padding: 12px 0 !important; font-size: 12px !important; font-weight: 300 !important; }
.breadcrumb-item a { color: var(--drm-text-light) !important; }
.breadcrumb-item.active { color: var(--drm-rose) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--drm-border) !important; }

/* ══ ALERT ══ */
.alert-success { background: var(--drm-rose-pale) !important; border-color: var(--drm-rose) !important; color: var(--drm-rose-dark) !important; }
.alert-danger  { border-left: 3px solid var(--drm-rose) !important; }

/* ══ FOOTER ══ */
footer {
  background: var(--drm-white) !important; border-top: 1px solid var(--drm-border) !important;
  font-family: var(--drm-font-body) !important; font-weight: 300 !important;
  font-size: 13px !important; color: var(--drm-text-light) !important;
  padding: 40px clamp(16px, 4vw, 60px) 24px !important;
}
footer a { color: var(--drm-text-light) !important; transition: color var(--drm-transition) !important; }
footer a:hover { color: var(--drm-rose) !important; }
footer h5 {
  font-family: var(--drm-font-head) !important; font-size: 1rem !important;
  font-weight: 400 !important; color: var(--drm-text) !important; margin-bottom: 12px !important;
}

/* ══ UNIVERSO DÉRMATOS: margini laterali ══ */
#universo-dermatos .drm-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(40px, 10vw, 180px);
}

/* ══ UNIVERSO DÉRMATOS: margini laterali ══ */
#universo-dermatos .drm-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(40px, 10vw, 180px);
}

/* ══ UNIVERSO DÉRMATOS: margini 90% ══ */
#universo-dermatos .drm-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 100px) !important;
}

/* ══ OVER 50: larghezza contenuto ══ */
#over50-page .drm-container {
  max-width: 960px !important;
}

/* ══ FONT SIZE testi pagine ══ */
.drm-brand-body p,
.drm-split-text p,
.drm-method-item p,
.drm-quote p,
.over50-body,
.over50-body p,
.drm-ucat-label { font-size: 16px !important; }

/* ══ PAGINE INFORMATIVE: margini desktop ══ */
#information-information.drm-container {
  max-width: 860px !important;
}

/* ══ PAGINE INFORMATIVE: margini laterali ══ */
#information-information {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 5vw, 60px) !important;
  padding-right: clamp(20px, 5vw, 60px) !important;
}