/* ============================================================
   Clay theme for TravelTejas (Aimeos 2025.10.1 overlay)
   Buildless, vendor-safe. Loaded last after default theme CSS.
   ============================================================ */

:root {
  /* Surfaces (warm neutral) */
  --clay-bg: #f1ede6;
  --clay-surface: #ffffff;
  --clay-surface-2: #f4f2ee;
  --clay-border: #e7e3dd;
  --clay-text: #1f1d1b;
  --clay-muted: #6b6358;

  /* Single accent (clay / terracotta) */
  --clay-accent: #c2622d;
  --clay-accent-hover: #a8511f;
  --clay-accent-tint: #f3e7dd;
  --clay-accent-contrast: #ffffff;

  /* Shape + elevation */
  --clay-radius: 14px;
  --clay-radius-sm: 10px;
  --clay-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(31,29,27,.06);

  --clay-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Remap Bootstrap 5.3 runtime vars that take effect live */
  --bs-body-bg: var(--clay-bg);
  --bs-body-color: var(--clay-text);
  --bs-border-color: var(--clay-border);
  --bs-border-radius: var(--clay-radius-sm);
  --bs-link-color: var(--clay-accent);
  --bs-link-hover-color: var(--clay-accent-hover);
  --bs-link-color-rgb: 194, 98, 45;
}

/* Base typography (tight scale) */
body {
  background: var(--clay-bg);
  color: var(--clay-text);
  font-family: var(--clay-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, .h1 { font-size: 1.9rem; }
h2, .h2 { font-size: 1.45rem; }
h3, .h3 { font-size: 1.15rem; }
h1, h2, h3, .h1, .h2, .h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--clay-text);
}

/* Accent: links, buttons, focus (BS 5.3 compiles .btn-primary statically) */
a { color: var(--clay-accent); }
a:hover { color: var(--clay-accent-hover); }

.btn-primary {
  --bs-btn-bg: var(--clay-accent);
  --bs-btn-border-color: var(--clay-accent);
  --bs-btn-hover-bg: var(--clay-accent-hover);
  --bs-btn-hover-border-color: var(--clay-accent-hover);
  --bs-btn-active-bg: var(--clay-accent-hover);
  --bs-btn-active-border-color: var(--clay-accent-hover);
  --bs-btn-disabled-bg: var(--clay-accent);
  --bs-btn-disabled-border-color: var(--clay-accent);
  border-radius: var(--clay-radius-sm);
}
.btn-outline-primary {
  --bs-btn-color: var(--clay-accent);
  --bs-btn-border-color: var(--clay-accent);
  --bs-btn-hover-bg: var(--clay-accent);
  --bs-btn-hover-border-color: var(--clay-accent);
  --bs-btn-active-bg: var(--clay-accent-hover);
}

/* Accent focus ring everywhere */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
a:focus-visible {
  outline: none;
  border-color: var(--clay-accent);
  box-shadow: 0 0 0 .2rem rgba(194,98,45,.25);
}

/* Soft form controls */
.form-control, .form-select {
  border-color: var(--clay-border);
  border-radius: var(--clay-radius-sm);
  background: var(--clay-surface);
}

/* ===================== Product cards ===================== */
.catalog-list-items.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 22px;
}
.catalog-list-items .product {
  display: flex;
  flex-direction: column;
  background: var(--clay-surface);
  border: 1px solid var(--clay-border);
  border-radius: var(--clay-radius);
  box-shadow: var(--clay-shadow);
  overflow: hidden;
  margin: 0;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.catalog-list-items .product:hover {
  transform: translateY(-2px);
  border-color: #d9d2c7;
  box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 14px 32px rgba(31,29,27,.10);
}
.catalog-list-items .product .list-column { padding: 0; width: 100%; }
/* Image area: fixed aspect, cover */
.catalog-list-items .product .media-list {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--clay-surface-2);
  overflow: hidden;
}
.catalog-list-items .product .media-list .media-item,
.catalog-list-items .product .media-list img {
  width: 100%; height: 100%;
}
.catalog-list-items .product .media-list img {
  object-fit: cover;
  transition: transform .35s ease;
}
.catalog-list-items .product:hover .media-list img { transform: scale(1.04); }
/* Info block */
.catalog-list-items .product .list-column:last-child { padding: 14px 16px 16px; }
.catalog-list-items .product .product-info {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .8rem; color: var(--clay-muted); margin-bottom: 4px;
}
.catalog-list-items .product .product-info .stars { color: var(--clay-accent); letter-spacing: 1px; }
.catalog-list-items .product h2.name {
  font-size: .98rem; font-weight: 600; line-height: 1.3;
  margin: 0 0 8px; color: var(--clay-text);
}
.catalog-list-items .product .text-list .text-item {
  font-size: .82rem; color: var(--clay-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.catalog-list-items .product .price-list .price {
  font-weight: 700; font-size: 1.05rem; color: var(--clay-accent);
}
.catalog-list-items .product .offer { margin-top: 10px; }
.catalog-list-items .product .addbasket { margin-top: 10px; }
.catalog-list-items .product .addbasket .input-group { border-radius: var(--clay-radius-sm); overflow: hidden; }
.catalog-list-items .product .btn-action { border-radius: 0 var(--clay-radius-sm) var(--clay-radius-sm) 0; }

/* ===================== Sticky header ===================== */
/* Aimeos' default navbar is a transparent overlay, min-height 10rem on desktop,
   with white (--ai-bg) nav text that turns dark (.scroll) on scroll. The Clay
   header is a compact solid-light bar, so: force light bg always, kill the tall
   min-height, and recolor the nav links dark so they're visible. */
.navbar-top {
  position: sticky; top: 0; z-index: 1030;
  min-height: 0;
  padding: .45rem 1rem;
  background-color: var(--clay-text) !important;   /* dark header */
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  transition: padding .18s ease, box-shadow .18s ease;
}
.navbar-top.scroll { background-color: var(--clay-text) !important; }
.navbar-top.is-scrolled { box-shadow: 0 6px 22px rgba(0,0,0,.28); }
.navbar-top .navbar-brand { font-weight: 700; letter-spacing: -0.02em; color: #fff; }
/* Account/login nav links: light on the dark bar */
.navbar-top .nav-link { color: rgba(255,255,255,.9); }
.navbar-top .nav-link:hover,
.navbar-top .nav-link:focus { color: var(--clay-accent); }

/* Catalog-tree top-level menu: light links on the dark header.
   Submenus keep their dark dropdown styling untouched. */
.navbar-top .catalog-filter-tree .level-1 > .cat-item > .item-links > .cat-link,
.navbar-top .catalog-filter-tree .level-1 > .cat-item > .item-links > .cat-link:link,
.navbar-top .catalog-filter-tree .level-1 > .cat-item > .item-links > .cat-link:visited {
  color: rgba(255,255,255,.92);
}
.navbar-top .catalog-filter-tree .level-1 > .cat-item > .item-links > .cat-link:hover {
  color: var(--clay-accent);
}
/* Static "Home" link in the nav, matched to the category links */
.navbar-top .clay-home-link {
  align-self: center;
  padding: 1rem; letter-spacing: 1.5px;
  color: rgba(255,255,255,.92); text-decoration: none; white-space: nowrap;
}
.navbar-top .clay-home-link:hover,
.navbar-top .clay-home-link:focus { color: var(--clay-accent); }

/* ===================== Breadcrumb ===================== */
/* Styled here so it also works on CMS pages (catalog-stage.css isn't loaded
   there). Mirrors the catalog breadcrumb with Clay accent links. */
.catalog-stage-breadcrumb { color: var(--clay-muted); font-size: .9rem; padding: .75rem .5rem; }
.catalog-stage-breadcrumb .breadcrumb { background-color: inherit; font-weight: normal; padding: 0; margin: 0; }
.catalog-stage-breadcrumb ol { display: inline; list-style: none; padding-inline-start: 1rem; margin: 0; }
.catalog-stage-breadcrumb li { display: inline; white-space: nowrap; color: var(--clay-text); }
.catalog-stage-breadcrumb .title { color: var(--clay-muted); text-decoration: none; display: inline-block; padding: .5rem; }
.catalog-stage-breadcrumb a { color: var(--clay-accent); text-decoration: none; display: inline-block; padding: .5rem; }
.catalog-stage-breadcrumb a:hover { text-decoration: underline; }
.catalog-stage-breadcrumb li:after { content: ' / '; color: var(--clay-muted); }
.catalog-stage-breadcrumb li:last-child:after { content: ''; }

/* ===================== Catalog list layout ===================== */
/* NOTE: Aimeos' default Bootstrap build omits the offcanvas component and the
   d-*-none display utilities, so the mobile filter drawer is self-contained
   (custom CSS + clay.js), depending on nothing from Bootstrap. */
.clay-list { padding-top: 1rem; }
.clay-list-toolbar { margin-bottom: 1rem; display: block; }
.clay-hide-lg { display: block; }
.clay-filter-backdrop { display: none; }

/* Self-contained close button (no dependency on Bootstrap .btn-close SVG) */
.clay-filter-close {
  appearance: none; border: 0; background: transparent;
  font-size: 1.6rem; line-height: 1; color: var(--clay-muted);
  cursor: pointer; padding: 0 6px;
}
.clay-filter-close:hover { color: var(--clay-accent); }
.clay-filter .clay-filter-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--clay-border);
}
.clay-filter .clay-filter-body { padding: 16px; }

@media (min-width: 992px) {
  /* Desktop: sticky in-flow sidebar */
  .clay-list-toolbar { display: none; }
  .clay-hide-lg { display: none; }
  .clay-filter {
    position: sticky;
    top: 84px;                 /* clears the sticky header */
    align-self: flex-start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    background: transparent;
  }
  .clay-filter .clay-filter-header { display: none; }
  .clay-filter .clay-filter-body { padding: 0; }
}

@media (max-width: 991.98px) {
  /* Mobile: off-canvas drawer */
  .clay-filter {
    position: fixed; top: 0; left: 0;
    height: 100dvh; width: min(86vw, 360px);
    background: var(--clay-surface);
    border-right: 1px solid var(--clay-border);
    box-shadow: 16px 0 40px rgba(31,29,27,.14);
    transform: translateX(-100%);
    transition: transform .28s ease;
    z-index: 1045; overflow-y: auto; padding: 0;
  }
  .clay-filter.is-open { transform: none; }
  .clay-filter-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(31,29,27,.42);
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
    z-index: 1044;
  }
  .clay-filter-backdrop.is-open { opacity: 1; visibility: visible; }
  body.clay-filter-open { overflow: hidden; }
}

/* ===================== Mini-cart ===================== */
/* Cart trigger on the dark header: transparent so the white cart glyph
   (.basket-mini .menu:after, colored --ai-bg=#fff) is visible; matches the
   account/search icons. */
.basket-mini-main.menu {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 999px;
  background: transparent; color: #fff;
  text-decoration: none; font-weight: 600;
}
.basket-mini-main.menu:hover { background: rgba(255,255,255,.12); }
.basket-mini-main .quantity {
  background: var(--clay-accent); color: var(--clay-accent-contrast);
  min-width: 20px; height: 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; padding: 0 6px;
}
.basket-mini-main .value { color: var(--clay-accent); }

.basket-mini-product.zeynep {
  background: var(--clay-surface);
  border-left: 1px solid var(--clay-border);
  box-shadow: -16px 0 40px rgba(31,29,27,.12);
}
.basket-mini .zeynep .header {
  padding: 8px 16px; border-bottom: 1px solid var(--clay-border);
  font-weight: 600; align-items: center;
  background-color: var(--clay-surface); color: var(--clay-text);
}
.basket-mini .zeynep .header .name,
.basket-mini .zeynep .header .close { color: var(--clay-text); }
.basket-mini .zeynep .header .close:hover { color: var(--clay-accent); }
.basket-mini-product .basket-header {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--clay-muted); padding: 10px 16px;
}
.basket-mini-product .basket-body .product-item {
  padding: 12px 16px; border-bottom: 1px solid var(--clay-border);
  align-items: center;
}
.basket-mini-product .basket-body .product-item .name { font-weight: 600; color: var(--clay-text); }
.basket-mini-product .basket-body .product-item .price { color: var(--clay-text); font-weight: 600; }
.basket-mini-product .product-item .delete { color: var(--clay-muted); }
.basket-mini-product .product-item .delete:hover { color: var(--clay-accent); }
.basket-mini-product .basket-footer { padding: 12px 16px; background: var(--clay-surface-2); }
.basket-mini-product .basket-footer .total {
  font-size: 1.05rem; font-weight: 700; margin-top: 4px;
}
.basket-mini-product .basket-footer .total .price { color: var(--clay-accent); }
.basket-mini-product .to-basket { padding: 16px; margin: 0; }
.basket-mini-product .to-basket .btn-primary {
  display: block; width: 100%; max-width: none; margin: 0; padding: 12px; font-weight: 600;
  background-color: var(--clay-accent);
  border-color: var(--clay-accent);
  color: var(--clay-accent-contrast);
}
.basket-mini-product .to-basket .btn-primary:hover,
.basket-mini-product .to-basket .btn-primary:focus {
  background-color: var(--clay-accent-hover);
  border-color: var(--clay-accent-hover);
  color: var(--clay-accent-contrast);
}
/* Hide the prototype row used for JS cloning */
.basket-mini-product .product-item.prototype { display: none; }

/* ===================== Product detail (PDP) ===================== */
/* Verified structure: .aimeos.catalog-detail > .container-xxl > article.product.row
   > .col-sm-6 (gallery) + .col-sm-6 (.catalog-detail-basic + .catalog-detail-basket). */
.clay-detail .catalog-detail article.product.row { row-gap: 28px; }

/* Rounded gallery */
.clay-detail .catalog-detail .media-list,
.clay-detail .catalog-detail .image,
.clay-detail .catalog-detail .media-item img {
  border-radius: var(--clay-radius);
  overflow: hidden;
}

/* Title + meta */
.clay-detail .catalog-detail h1.name {
  font-size: 1.7rem; letter-spacing: -0.01em; margin-bottom: .35rem;
}
.clay-detail .catalog-detail .catalog-detail-basic .code { color: var(--clay-muted); font-size: .85rem; }
.clay-detail .catalog-detail .catalog-detail-basic .rating .stars { color: var(--clay-accent); }
.clay-detail .catalog-detail .catalog-detail-basic .short { color: var(--clay-muted); margin: .75rem 0; }

/* Buy-box card around the offer/basket block */
.clay-detail .catalog-detail .catalog-detail-basket {
  background: var(--clay-surface);
  border: 1px solid var(--clay-border);
  border-radius: var(--clay-radius);
  box-shadow: var(--clay-shadow);
  padding: 20px;
  margin-top: 16px;
}
.clay-detail .catalog-detail .catalog-detail-basket .price-list .price,
.clay-detail .catalog-detail .catalog-detail-basket .price .value {
  color: var(--clay-accent); font-weight: 700; font-size: 1.5rem;
}

/* Add-to-basket button: accent, comfortable, not capped at 50% */
.clay-detail .catalog-detail form.basket .btn-action.btn-primary,
.clay-detail .catalog-detail form.basket button.btn-primary {
  background-color: var(--clay-accent);
  border-color: var(--clay-accent);
  color: var(--clay-accent-contrast);
  max-width: none;
  padding: 12px 22px; font-weight: 600;
}
.clay-detail .catalog-detail form.basket .btn-action.btn-primary:hover {
  background-color: var(--clay-accent-hover); border-color: var(--clay-accent-hover);
}

/* Declutter long content below the fold */
.clay-detail .catalog-detail .tab-content,
.clay-detail .catalog-detail .attribute-list { margin-top: 28px; }

/* Mobile: keep the add-to-basket within reach */
@media (max-width: 767.98px) {
  .clay-detail .catalog-detail form.basket .addbasket {
    position: sticky; bottom: 0; z-index: 1020;
    background: var(--clay-surface);
    border-top: 1px solid var(--clay-border);
    padding: 10px 12px; margin: 0 -12px;
  }
}

/* ===================== Hero / stage ===================== */
/* Theme default forces .stage-image { min-height: 600px } which made the hero
   oversized. Cap it to a sensible, responsive height. */
.catalog-home .stage-image {
  min-height: 0;
  height: clamp(300px, 44vh, 440px);
  width: 100%;
  object-fit: cover;
  object-position: center top;
}