/* ============================================================
   PetShop Theme — custom.css  (PrestaShop 8.1 child of classic)
   ============================================================ */

/* --- Design tokens --------------------------------------- */
:root {
  --ps-accent:       #2abef7;
  --ps-accent-dark:  #1da8dd;
  --ps-accent-light: rgba(42,190,247,.10);
  --ps-ink:          #232323;
  --ps-ink-light:    #7a7a7a;
  --ps-ink-muted:    #949494;
  --ps-surface:      #ffffff;
  --ps-surface-alt:  #f6f6f6;
  --ps-border:       #e5e5e5;
  --ps-sale:         #ff4c4c;
  --ps-success:      #4cbb6c;
  --ps-warning:      #ff9a52;
  --ps-star:         #ffc400;
  --ps-font:         'Open Sans', system-ui, sans-serif;
  --ps-tr:           200ms ease;
}

/* --- Base ------------------------------------------------ */
body { font-family:var(--ps-font); color:var(--ps-ink); -webkit-font-smoothing:antialiased; }
a { color:var(--ps-ink); transition:color var(--ps-tr); }
a:hover { color:var(--ps-accent); text-decoration:none; }

/* Force white background — override classic's #f1f1f1 */
body,
#main,
#wrapper,
#content-wrapper,
.page-home,
#content.page-home,
.ps-home { background:#fff !important; }

/* Remove classic's container padding on homepage */
body#index #content-wrapper { padding:0 !important; }
body#index #wrapper > .container { padding:0 !important; max-width:100% !important; }
body#index section#wrapper { padding:0 !important; }

/* ============================================================
   ADVANTAGES STRIP
   ============================================================ */
.petshop-advantages {
  background:var(--ps-ink); color:#fff; font-size:12px;
  padding:6px 0; letter-spacing:.02em;
}
.petshop-advantages .container {
  display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:8px;
}
.petshop-advantages__item { display:flex; align-items:center; gap:6px; }
.petshop-advantages__item svg { color:var(--ps-accent); }
.petshop-advantages__link { color:var(--ps-accent); font-weight:600; text-decoration:none; }
.petshop-advantages__link:hover { color:#fff; }

/* ============================================================
   HEADER
   ============================================================ */
#header { background:#fff; border-bottom:1px solid var(--ps-border); box-shadow:none; }
#header.is-sticky { position:sticky; top:0; z-index:900; box-shadow:0 2px 12px rgba(0,0,0,.08); }
.header-nav { background:#fff !important; border:none !important; padding:0 !important; margin:0 !important; }
.header-top { padding:12px 0; }
.header-logo img { max-height:44px; }

/* Search */
.petshop-search { flex:1; max-width:500px; margin:0 16px; position:relative; }
.petshop-search__input {
  width:100%; height:40px; padding:0 48px 0 14px;
  border:1px solid var(--ps-border); background:var(--ps-surface-alt);
  font-size:13px; font-family:var(--ps-font); color:var(--ps-ink);
  transition:border-color var(--ps-tr), box-shadow var(--ps-tr);
}
.petshop-search__input:focus {
  outline:none; border-color:var(--ps-accent);
  box-shadow:0 0 0 3px var(--ps-accent-light); background:#fff;
}
.petshop-search__input::placeholder { color:var(--ps-ink-muted); }
.petshop-search__btn {
  position:absolute; right:0; top:0; width:40px; height:40px;
  border:none; background:var(--ps-accent); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--ps-tr);
}
.petshop-search__btn:hover { background:var(--ps-accent-dark); }

/* Header icons */
.petshop-header-icons { display:flex; align-items:center; gap:16px; }
.petshop-header-icon {
  position:relative; display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--ps-ink); text-decoration:none; padding:6px;
  transition:color var(--ps-tr);
}
.petshop-header-icon:hover { color:var(--ps-accent); }
.petshop-header-icon svg { width:22px; height:22px; stroke-width:1.6; }
.petshop-header-icon__badge {
  position:absolute; top:-2px; right:-6px;
  background:var(--ps-sale); color:#fff; font-size:10px; font-weight:700;
  width:18px; height:18px; display:flex; align-items:center;
  justify-content:center; border-radius:50%; line-height:1;
  transition:transform var(--ps-tr);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.ps-btn-primary {
  display:inline-flex; align-items:center; gap:6px;
  padding:11px 24px; background:var(--ps-ink); color:#fff;
  font-size:13px; font-weight:700; font-family:var(--ps-font);
  text-decoration:none; border:none; cursor:pointer;
  transition:background var(--ps-tr);
}
.ps-btn-primary:hover { background:#000; color:#fff; }
.ps-btn-dark {
  display:inline-flex; align-items:center; gap:6px;
  padding:11px 26px; background:var(--ps-ink); color:#fff;
  font-size:13px; font-weight:700; font-family:var(--ps-font);
  text-decoration:none; border:none; cursor:pointer; white-space:nowrap;
  transition:background var(--ps-tr);
}
.ps-btn-dark:hover { background:#000; color:#fff; }

/* ============================================================
   HERO SLIDER
   ============================================================ */
.petshop-hero { padding:24px 0; background:#fff; }
.petshop-hero .container {
  display:grid; grid-template-columns:1fr 220px; gap:16px;
  max-width:1200px; margin:0 auto; padding:0 15px;
}
.petshop-hero__main {
  position:relative; overflow:hidden;
  background:var(--ps-accent-light); min-height:320px;
}

/* ALL slides hidden by default — JS adds .active to first */
.petshop-hero__slide { display:none; align-items:center; padding:40px; min-height:320px; }
.petshop-hero__slide.active { display:flex; }

.petshop-hero__eyebrow {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ps-accent); margin-bottom:8px;
}
.petshop-hero__title {
  font-size:32px; font-weight:800; line-height:1.15;
  color:var(--ps-ink); margin:0 0 14px;
}
.petshop-hero__subtitle {
  font-size:14px; color:var(--ps-ink-light);
  margin-bottom:24px; line-height:1.6;
}
.petshop-hero__dots {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px;
}
.petshop-hero__dot {
  width:28px; height:4px; background:rgba(0,0,0,.18);
  border:none; cursor:pointer; transition:background var(--ps-tr);
  padding:0;
}
.petshop-hero__dot.active { background:var(--ps-accent); }

/* Side promo cards */
.petshop-hero__side { display:flex; flex-direction:column; gap:16px; }
.petshop-promo-card {
  flex:1; padding:22px 18px;
  display:flex !important; flex-direction:column;
  justify-content:space-between; text-decoration:none;
  transition:transform var(--ps-tr);
}
.petshop-promo-card:hover { transform:translateY(-2px); }
.petshop-promo-card--warm { background:rgba(255,154,82,.16); }
.petshop-promo-card--cool { background:rgba(76,187,108,.14); }
.petshop-promo-card__title { font-size:13px; font-weight:700; color:var(--ps-ink); margin-bottom:6px; }
.petshop-promo-card__highlight { font-size:24px; font-weight:800; color:var(--ps-sale); margin-bottom:auto; padding-bottom:16px; }
.petshop-promo-card__highlight--green { color:var(--ps-success) !important; }
.petshop-promo-card__link { font-size:12px; font-weight:700; color:var(--ps-ink); }
.petshop-promo-card:hover .petshop-promo-card__link { color:var(--ps-accent); }

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.petshop-section { padding:40px 0; background:#fff; }
.petshop-section:nth-child(even) { background:var(--ps-surface-alt); }
.petshop-section__header {
  display:flex; align-items:center;
  justify-content:space-between; margin-bottom:24px;
}
.petshop-section__title {
  font-size:20px; font-weight:700; color:var(--ps-ink);
  position:relative; padding-bottom:10px; margin:0;
}
.petshop-section__title::after {
  content:''; position:absolute; bottom:0; left:0;
  width:40px; height:3px; background:var(--ps-accent);
}
.petshop-section__viewall {
  font-size:13px; font-weight:600; color:var(--ps-accent);
  text-decoration:none; transition:gap var(--ps-tr);
}
.petshop-section__viewall:hover { color:var(--ps-accent-dark); }

/* ============================================================
   HOME PRODUCTS — override classic's horizontal list layout
   ============================================================ */
.ps-home-products { width:100%; }

/* Classic renders home products as horizontal article cards — force grid */
.ps-home-products .products,
.ps-home-products ul.products {
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:16px !important;
  list-style:none !important;
  padding:0 !important; margin:0 !important;
}
.ps-home-products .product-miniature,
.ps-home-products .js-product-miniature {
  width:100% !important; max-width:100% !important;
  margin:0 !important; float:none !important;
}
/* Classic's horizontal product article layout — reset to vertical */
.ps-home-products article.product-miniature {
  flex-direction:column !important;
}
.ps-home-products .thumbnail-container,
.ps-home-products .product-thumbnail {
  width:100% !important;
}

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.product-miniature {
  background:#fff; border:1px solid var(--ps-border);
  overflow:hidden; position:relative;
  transition:border-color var(--ps-tr), box-shadow var(--ps-tr);
}
.product-miniature:hover { border-color:var(--ps-accent); box-shadow:0 4px 16px rgba(0,0,0,.06); }

.product-flags { position:absolute; top:8px; left:8px; z-index:3; display:flex; flex-direction:column; gap:4px; }
.product-flag { display:inline-block; padding:3px 10px; font-size:10px; font-weight:700; text-transform:uppercase; color:#fff; }
.product-flag.discount,.product-flag.on-sale { background:var(--ps-sale); }
.product-flag.new { background:var(--ps-success); }

.thumbnail-container,.product-thumbnail {
  background:var(--ps-surface-alt); text-align:center; padding:16px;
  overflow:hidden;
}
.thumbnail-container img,.product-thumbnail img {
  max-width:100%; height:auto; aspect-ratio:1; object-fit:contain;
  mix-blend-mode:multiply; transition:transform 300ms ease;
}
.product-miniature:hover .thumbnail-container img,
.product-miniature:hover .product-thumbnail img { transform:scale(1.05); }

.product-description,.product-description-short { padding:12px 14px 14px; }
.product-title { margin:0 0 6px; }
.product-title a {
  font-size:13px; font-weight:600; color:var(--ps-ink); text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-title a:hover { color:var(--ps-accent); }

.product-price-and-shipping { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.product-price-and-shipping .price { font-size:16px; font-weight:700; color:var(--ps-ink); }
.product-price-and-shipping .regular-price { font-size:12px; color:var(--ps-ink-muted); text-decoration:line-through; }
.product-price-and-shipping .discount-percentage { font-size:11px; font-weight:700; color:var(--ps-sale); }

.add-to-cart-btn,.btn-primary,button[data-button-action="add-to-cart"] {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 14px; width:100%;
  font-size:12px; font-weight:700; font-family:var(--ps-font);
  color:#fff; background:var(--ps-accent);
  border:none; cursor:pointer;
  transition:background var(--ps-tr);
}
.add-to-cart-btn:hover,.btn-primary:hover,
button[data-button-action="add-to-cart"]:hover { background:var(--ps-accent-dark); }

/* ============================================================
   CTA BANNER
   ============================================================ */
.petshop-cta-banner { background:var(--ps-accent); padding:40px 0; }
.petshop-cta-banner .container {
  display:flex; align-items:center;
  justify-content:space-between; gap:24px;
}
.petshop-cta-banner__title { font-size:22px; font-weight:700; color:#fff; margin:0 0 6px; }
.petshop-cta-banner__subtitle { font-size:13px; color:rgba(255,255,255,.88); margin:0; }

/* ============================================================
   TRUST BADGES
   ============================================================ */
.petshop-trust { padding:40px 0; border-top:1px solid var(--ps-border); background:#fff; }
.petshop-trust .container {
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.petshop-trust__item { display:flex; align-items:flex-start; gap:12px; }
.petshop-trust__icon {
  flex-shrink:0; width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  background:var(--ps-accent-light); color:var(--ps-accent); font-size:20px;
}
.petshop-trust__title { font-size:13px; font-weight:700; color:var(--ps-ink); margin-bottom:2px; }
.petshop-trust__desc { font-size:12px; color:var(--ps-ink-light); line-height:1.5; }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.petshop-newsletter { background:var(--ps-surface-alt); padding:40px 0; }
.petshop-newsletter .container {
  display:flex; align-items:center;
  justify-content:space-between; gap:24px;
}
.petshop-newsletter__title { font-size:18px; font-weight:700; color:var(--ps-ink); margin:0 0 4px; }
.petshop-newsletter__subtitle { font-size:13px; color:var(--ps-ink-light); margin:0; }
.petshop-newsletter__form { display:flex; }
.petshop-newsletter__input {
  width:260px; height:42px; padding:0 14px;
  border:1px solid var(--ps-border); border-right:none;
  font-size:13px; font-family:var(--ps-font); background:#fff;
}
.petshop-newsletter__input:focus { outline:none; border-color:var(--ps-accent); }
.petshop-newsletter__submit {
  padding:0 22px; height:42px; background:var(--ps-accent); color:#fff;
  border:none; font-size:13px; font-weight:700; font-family:var(--ps-font);
  cursor:pointer; transition:background var(--ps-tr); white-space:nowrap;
}
.petshop-newsletter__submit:hover { background:var(--ps-accent-dark); }

/* ============================================================
   FOOTER
   ============================================================ */
#footer { background:var(--ps-ink); color:#fff; padding:48px 0 0; }
.footer-container {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px; padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand__logo { font-size:22px; font-weight:800; color:#fff; margin-bottom:12px; }
.footer-brand__logo span { color:var(--ps-accent); }
.footer-brand__desc { font-size:13px; color:var(--ps-ink-muted); line-height:1.7; max-width:280px; }
.footer-col__title {
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; margin-bottom:16px; color:#fff;
}
.footer-col__links { list-style:none; padding:0; margin:0; }
.footer-col__links li { margin-bottom:8px; }
.footer-col__links a { font-size:13px; color:var(--ps-ink-muted); text-decoration:none; transition:color var(--ps-tr); }
.footer-col__links a:hover { color:var(--ps-accent); }
.footer-social { display:flex; gap:8px; margin-top:16px; }
.footer-social__link {
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); color:#fff; font-size:16px;
  text-decoration:none; transition:background var(--ps-tr);
}
.footer-social__link:hover { background:var(--ps-accent); color:#fff; }
.footer-bottom { padding:16px 0; text-align:center; font-size:12px; color:var(--ps-ink-muted); }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb { font-size:12px; padding:8px 0; background:var(--ps-surface-alt); border-bottom:1px solid var(--ps-border); }

/* ============================================================
   CATEGORY / LISTING PAGE
   ============================================================ */
#products .products {
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:16px !important;
  list-style:none !important; padding:0 !important; margin:0 !important;
}

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.product-information .product-title h1 { font-size:24px; font-weight:700; }
.product-information .current-price .price { font-size:28px; font-weight:700; }
.product-information .add-to-cart {
  background:var(--ps-accent); border-color:var(--ps-accent);
  font-weight:700; padding:12px 32px; transition:background var(--ps-tr);
}
.product-information .add-to-cart:hover { background:var(--ps-accent-dark); }
.tabs .nav-tabs .nav-link { font-weight:600; border:none; border-bottom:3px solid transparent; padding:12px 20px; }
.tabs .nav-tabs .nav-link.active { color:var(--ps-ink); border-bottom-color:var(--ps-accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:991px){
  .petshop-hero .container { grid-template-columns:1fr; }
  .petshop-hero__side { flex-direction:row; }
  .ps-home-products .products { grid-template-columns:repeat(2,1fr) !important; }
  #products .products { grid-template-columns:repeat(2,1fr) !important; }
  .footer-container { grid-template-columns:1fr 1fr; gap:24px; }
  .petshop-trust .container { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:767px){
  .petshop-hero__title { font-size:24px; }
  .petshop-hero__side { flex-direction:column; }
  .petshop-cta-banner .container { flex-direction:column; text-align:center; }
  .petshop-newsletter .container { flex-direction:column; text-align:center; }
  .footer-container { grid-template-columns:1fr; }
  .petshop-trust .container { grid-template-columns:1fr; }
}
@media(max-width:575px){
  .ps-home-products .products { grid-template-columns:1fr !important; }
  #products .products { grid-template-columns:1fr !important; }
  .petshop-newsletter__input { width:180px; }
}