/* Anrosea v3.7 - accessible color swatches in product listings.
   The font family is configured directly in Shoptet. */

:root {
  --anrosea-text-body: #252a2c;
  --anrosea-text-interactive: #08415c;
  --anrosea-action-hover: #062f43;
  --anrosea-text-muted: #5f706e;
  --anrosea-surface-white: #fff;
  --anrosea-surface-soft: #eff4f3;
  --anrosea-surface-brand: #8fbfba;
  --anrosea-border-subtle: #d6e1df;
  --anrosea-radius-control: 8px;
  --anrosea-radius-panel: 8px;

  --anrosea-space-1: 4px;
  --anrosea-space-2: 8px;
  --anrosea-space-3: 12px;
  --anrosea-space-4: 16px;
  --anrosea-space-5: 24px;
  --anrosea-space-6: 32px;
  --anrosea-space-7: 48px;
  --anrosea-space-8: 64px;
}

/* Long-form reading text stays neutral while headings and links keep brand colors. */
.type-page #content p,
.type-page #content li,
.type-post #content p,
.type-post #content li,
.type-detail .p-short-description p,
.type-detail .p-short-description li,
.type-detail .description-inner p,
.type-detail .description-inner li,
.category-perex p,
.category-perex li,
.welcome p,
.welcome li {
  color: var(--anrosea-text-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

/* Main page headings. Product titles remain one level smaller because they are often long. */
.category-title,
.type-page #content h1:not(.sr-only),
.type-post #content h1:not(.sr-only),
.ordering-process .cart-heading {
  font-size: 40px;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: var(--anrosea-space-6);
}

.p-detail-inner-header h1 {
  font-size: 32px;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: var(--anrosea-space-5);
}

/* Headings inside articles, standard pages and product descriptions. */
.type-page .pageArticleDetail h2,
.type-post .news-item-detail .text h2,
.type-detail .description-inner h2 {
  font-size: 32px;
  line-height: 1.25;
  margin-top: var(--anrosea-space-7);
  margin-bottom: var(--anrosea-space-4);
}

.type-page .pageArticleDetail h3,
.type-post .news-item-detail .text h3,
.type-detail .description-inner h3 {
  font-size: 24px;
  line-height: 1.25;
  margin-top: var(--anrosea-space-6);
  margin-bottom: var(--anrosea-space-3);
}

.type-page .pageArticleDetail h4,
.type-post .news-item-detail .text h4,
.type-detail .description-inner h4 {
  font-size: 20px;
  line-height: 1.25;
  margin-top: var(--anrosea-space-5);
  margin-bottom: var(--anrosea-space-2);
}

/* Repeated product-section headings and product names use a calmer hierarchy. */
.products-top-header {
  font-size: 32px;
  line-height: 1.2;
  margin-top: var(--anrosea-space-7);
  margin-bottom: var(--anrosea-space-5);
}

.products .product .name,
.products .product .name span {
  font-weight: 600;
  line-height: 1.4;
}

/* Vertical rhythm for long-form content. */
.type-page .pageArticleDetail p,
.type-post .news-item-detail .text p,
.type-detail .p-short-description p,
.type-detail .description-inner p,
.category-perex p,
.welcome p {
  margin-top: 0;
  margin-bottom: var(--anrosea-space-4);
}

.type-page .pageArticleDetail ul,
.type-page .pageArticleDetail ol,
.type-post .news-item-detail .text ul,
.type-post .news-item-detail .text ol,
.type-detail .p-short-description ul,
.type-detail .p-short-description ol,
.type-detail .description-inner ul,
.type-detail .description-inner ol,
.category-perex ul,
.category-perex ol,
.welcome ul,
.welcome ol {
  margin-top: 0;
  margin-bottom: var(--anrosea-space-5);
  padding-left: var(--anrosea-space-5);
}

.type-page .pageArticleDetail li,
.type-post .news-item-detail .text li,
.type-detail .p-short-description li,
.type-detail .description-inner li,
.category-perex li,
.welcome li {
  margin-bottom: var(--anrosea-space-2);
}

.type-page .pageArticleDetail li:last-child,
.type-post .news-item-detail .text li:last-child,
.type-detail .p-short-description li:last-child,
.type-detail .description-inner li:last-child,
.category-perex li:last-child,
.welcome li:last-child {
  margin-bottom: 0;
}

/* Keep first-level navigation legible on the light turquoise hover state. */
#navigation .navigation-in > ul > li > a:hover,
#navigation .navigation-in > ul > li > a:hover b,
#navigation .navigation-in > ul > li > a:focus-visible,
#navigation .navigation-in > ul > li > a:focus-visible b,
#navigation .navigation-in > ul > li > a.active,
#navigation .navigation-in > ul > li > a.active b {
  color: var(--anrosea-text-interactive);
}

/* Secondary information uses one calm, readable muted color. */
.breadcrumbs,
.breadcrumbs a,
.breadcrumbs span,
.p-code,
.p-code span,
.price-additional,
.detail-parameter-product-code,
.detail-parameter-product-code .row-header-label,
.benefitBanner__data,
.footer-bottom .copyright,
.footer-bottom .copyright a,
.footer-bottom .copyright strong,
.footer-bottom .cookies-settings,
.footer-bottom .title {
  color: var(--anrosea-text-muted);
}

/* Availability and other system states retain Shoptet's status colors. */

/* Buttons share one shape and calm transitions. Header icons and compact controls stay intact. */
.btn:not(.btn-icon) {
  border-radius: var(--anrosea-radius-control);
  box-shadow: none;
  font-weight: 600;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.btn:not(.btn-icon):not(.btn-sm) {
  min-height: 44px;
}

/* Secondary buttons: product detail links, search and other supporting actions. */
.btn.btn-primary:not(.btn-conversion):not(.btn-cart):not(.add-to-cart-button) {
  background-color: #fff;
  border: 1px solid var(--anrosea-text-interactive);
  color: var(--anrosea-text-interactive);
}

.btn.btn-primary:not(.btn-conversion):not(.btn-cart):not(.add-to-cart-button):hover,
.btn.btn-primary:not(.btn-conversion):not(.btn-cart):not(.add-to-cart-button):focus {
  background-color: var(--anrosea-surface-soft);
  border-color: var(--anrosea-text-interactive);
  color: var(--anrosea-text-interactive);
}

/* Primary actions: cart, checkout, contact-form and newsletter submissions. */
.btn.btn-conversion,
.btn.btn-cart,
.btn.add-to-cart-button,
#formContact .btn.btn-primary,
.submit-wrapper .btn.btn-primary,
.footer-newsletter .btn.btn-primary {
  background-color: var(--anrosea-text-interactive);
  border: 1px solid var(--anrosea-text-interactive);
  color: #fff;
}

.btn.btn-conversion:hover,
.btn.btn-conversion:focus,
.btn.btn-cart:hover,
.btn.btn-cart:focus,
.btn.add-to-cart-button:hover,
.btn.add-to-cart-button:focus,
#formContact .btn.btn-primary:hover,
#formContact .btn.btn-primary:focus,
.submit-wrapper .btn.btn-primary:hover,
.submit-wrapper .btn.btn-primary:focus,
.footer-newsletter .btn.btn-primary:hover,
.footer-newsletter .btn.btn-primary:focus {
  background-color: var(--anrosea-action-hover);
  border-color: var(--anrosea-action-hover);
  color: #fff;
}

.btn[disabled],
.btn.disabled,
button[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Links in reading content are recognizable without changing navigation and product cards. */
.type-page .pageArticleDetail a:not(.btn),
.type-post .news-item-detail .text a:not(.btn),
.type-detail .p-short-description a:not(.btn),
.type-detail .description-inner a:not(.btn),
.category-perex a:not(.btn),
.welcome a:not(.btn) {
  color: var(--anrosea-text-interactive);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.type-page .pageArticleDetail a:not(.btn):hover,
.type-post .news-item-detail .text a:not(.btn):hover,
.type-detail .p-short-description a:not(.btn):hover,
.type-detail .description-inner a:not(.btn):hover,
.category-perex a:not(.btn):hover,
.welcome a:not(.btn):hover {
  color: var(--anrosea-action-hover);
  text-decoration-thickness: 2px;
}

/* A clear keyboard focus applies to interactive elements without changing mouse interaction. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--anrosea-text-interactive);
  outline-offset: 2px;
}

/* Eight-pixel rounding matches Samba and the approved 5-8 px brand range. */
.sidebar .topic > a,
.form-control {
  border-radius: var(--anrosea-radius-panel);
}

/* The engraving note field follows the same flat treatment as other form controls. */
.dkLabNote.noteShadow {
  box-shadow: none;
}

/*
 * The engraving note visually follows the engraving surcharge.
 * This is intentionally presentation-only: the textarea remains editable and
 * Shoptet continues to handle the surcharge and product price itself.
 */
#product-detail-form:has(
    .surcharge-parameter[data-parameter-name="Rytina na zadní stranu"]
      option:checked[value=""]
  )
  #dkLabNoteMainWrapper
  .dkLabNoteHeader {
  color: var(--anrosea-text-muted);
}

#product-detail-form:has(
    .surcharge-parameter[data-parameter-name="Rytina na zadní stranu"]
      option:checked[value=""]
  )
  #dkLabNoteMainWrapper
  .dkLabNoteHeader::after {
  content: "Nejprve vyberte příplatek za rytí.";
  display: block;
  margin-top: var(--anrosea-space-1);
  color: var(--anrosea-text-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

#product-detail-form:has(
    .surcharge-parameter[data-parameter-name="Rytina na zadní stranu"]
      option:checked[value=""]
  )
  #dkLabNoteMainWrapper
  .dkLabNoteTextArea {
  background-color: #f6f8f7;
  border-color: var(--anrosea-border-subtle);
  color: var(--anrosea-text-muted);
}

#product-detail-form:has(
    .surcharge-parameter[data-parameter-name="Rytina na zadní stranu"]
      option:checked:not([value=""])
  )
  #dkLabNoteMainWrapper
  .dkLabNoteHeader {
  color: var(--anrosea-text-interactive);
}

#product-detail-form:has(
    .surcharge-parameter[data-parameter-name="Rytina na zadní stranu"]
      option:checked:not([value=""])
  )
  #dkLabNoteMainWrapper
  .dkLabNoteHeader::after {
  content: "Rytí je aktivní.";
  display: block;
  margin-top: var(--anrosea-space-1);
  color: var(--anrosea-text-interactive);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

#product-detail-form:has(
    .surcharge-parameter[data-parameter-name="Rytina na zadní stranu"]
      option:checked:not([value=""])
  )
  #dkLabNoteMainWrapper
  .dkLabNoteTextArea {
  background-color: var(--anrosea-surface-soft);
  border-color: var(--anrosea-surface-brand);
  color: var(--anrosea-text-body);
}

#dkLabNoteMainWrapper .dkLabNoteHeader,
#dkLabNoteMainWrapper .dkLabNoteTextArea {
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.subcategories li > a:hover,
.subcategories li > a:focus-visible {
  background-color: var(--anrosea-surface-soft);
  border-color: var(--anrosea-surface-brand);
  color: var(--anrosea-text-interactive);
}

/* The active sorting tab keeps its shape but drops Samba's decorative shadow. */
.listSorting__control--current {
  box-shadow: none;
}

/* Existing Samba surfaces follow one quiet border-and-radius system. */
.sidebar-inner {
  background-color: var(--anrosea-surface-soft);
  border: 1px solid var(--anrosea-border-subtle);
  border-radius: var(--anrosea-radius-panel);
  box-shadow: none;
}

.subcategories li > a {
  background-color: var(--anrosea-surface-white);
  border: 1px solid var(--anrosea-border-subtle);
  border-radius: var(--anrosea-radius-control);
  box-shadow: none;
}

/* Product description is a content panel, not a floating card. */
.type-detail .tab-content {
  background-color: var(--anrosea-surface-white);
  border: 1px solid var(--anrosea-border-subtle);
  border-radius: var(--anrosea-radius-panel);
  box-shadow: none;
  padding: var(--anrosea-space-5);
}

/* Reusable classes for content entered through Shoptet's HTML editor. */
.anrosea-card,
.anrosea-info-box {
  box-sizing: border-box;
  border: 1px solid var(--anrosea-border-subtle);
  border-radius: var(--anrosea-radius-panel);
  box-shadow: none;
  margin: var(--anrosea-space-5) 0;
  padding: var(--anrosea-space-5);
}

.anrosea-card {
  background-color: var(--anrosea-surface-white);
}

.anrosea-info-box {
  background-color: var(--anrosea-surface-soft);
  color: var(--anrosea-text-body);
}

.anrosea-info-box--accent {
  border-left: 4px solid var(--anrosea-surface-brand);
  padding-left: 20px;
}

.anrosea-card > :first-child,
.anrosea-info-box > :first-child {
  margin-top: 0;
}

.anrosea-card > :last-child,
.anrosea-info-box > :last-child {
  margin-bottom: 0;
}

.anrosea-info-box a:not(.btn) {
  color: var(--anrosea-text-interactive);
}

/* System messages keep their semantic colors; only geometry and shadows are unified. */
.msg,
.alert,
.notice-message {
  border-radius: var(--anrosea-radius-panel);
  box-shadow: none;
  padding: var(--anrosea-space-4) var(--anrosea-space-5);
}

.msg-info,
.alert-info {
  background-color: var(--anrosea-surface-soft);
  border: 1px solid var(--anrosea-border-subtle);
  color: var(--anrosea-text-body);
}

@media (max-width: 767px) {
  .category-title,
  .type-page #content h1:not(.sr-only),
  .type-post #content h1:not(.sr-only),
  .ordering-process .cart-heading {
    font-size: 32px;
    margin-bottom: var(--anrosea-space-5);
  }

  .p-detail-inner-header h1 {
    font-size: 28px;
  }

  .type-page .pageArticleDetail h2,
  .type-post .news-item-detail .text h2,
  .type-detail .description-inner h2,
  .products-top-header {
    font-size: 28px;
  }

  .type-page .pageArticleDetail h3,
  .type-post .news-item-detail .text h3,
  .type-detail .description-inner h3 {
    font-size: 22px;
  }

  .type-page .pageArticleDetail h4,
  .type-post .news-item-detail .text h4,
  .type-detail .description-inner h4 {
    font-size: 18px;
  }

  .products-top-header {
    margin-top: var(--anrosea-space-6);
  }

  .type-detail .tab-content,
  .anrosea-card,
  .anrosea-info-box {
    padding: var(--anrosea-space-4);
  }

  .anrosea-info-box--accent {
    padding-left: 12px;
  }
}

/* Keep the homepage segment banners side by side below the hero on mobile. */
@media (max-width: 991px) {
  .type-index .next-to-carousel-banners {
    flex-flow: row nowrap;
    align-items: stretch;
    gap: 0;
  }

  .type-index .next-to-carousel-banners > .banner-wrapper {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Listing color swatches: original links and text are retained by anrosea-swatches_v1.js.
   Do not change li display or .no-display: Shoptet owns the "+ další" behavior. */
body:not(.type-detail) #content .products .product .widget-parameter-wrapper[data-parameter-name="Barva"]:has(a[data-anrosea-swatch]),
body:not(.type-detail) #content .products .product .widget-parameter-wrapper[data-parameter-name="Barva"] .widget-parameter-list:has(a[data-anrosea-swatch]) {
  align-items: center;
}

body:not(.type-detail) #content .products .product .widget-parameter-wrapper[data-parameter-name="Barva"] a[data-anrosea-swatch] {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--anrosea-radius-control);
  background: transparent;
  box-shadow: none;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  vertical-align: middle;
  transition: none;
}

body:not(.type-detail) #content .products .product .widget-parameter-wrapper[data-parameter-name="Barva"] a[data-anrosea-swatch]::before {
  content: "";
  display: block;
  box-sizing: border-box;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 1px solid #9ca8a6;
  border-radius: 50%;
  background-color: var(--anrosea-swatch-color);
  pointer-events: none;
}

body:not(.type-detail) #content .products .product a[data-anrosea-swatch="silver"] {
  --anrosea-swatch-color: #c7c7c7;
}

body:not(.type-detail) #content .products .product a[data-anrosea-swatch="gold"] {
  --anrosea-swatch-color: #cfaf6f;
}

body:not(.type-detail) #content .products .product a[data-anrosea-swatch="rose-gold"] {
  --anrosea-swatch-color: #c99585;
}

@media (hover: hover) {
  body:not(.type-detail) #content .products .product .widget-parameter-wrapper[data-parameter-name="Barva"] a[data-anrosea-swatch]:hover::before {
    outline: 2px solid var(--anrosea-surface-brand);
    outline-offset: 2px;
  }
}

body:not(.type-detail) #content .products .product .widget-parameter-wrapper[data-parameter-name="Barva"] a[data-anrosea-swatch]:focus-visible {
  outline: 2px solid var(--anrosea-text-interactive);
  outline-offset: -2px;
}

/* In Windows high-contrast mode use the original readable text instead of color alone. */
@media (forced-colors: active) {
  body:not(.type-detail) #content .products .product .widget-parameter-wrapper[data-parameter-name="Barva"] a[data-anrosea-swatch] {
    width: auto;
    height: auto;
    padding: 0 8px;
    font-size: 16px;
    line-height: 1.4;
  }

  body:not(.type-detail) #content .products .product .widget-parameter-wrapper[data-parameter-name="Barva"] a[data-anrosea-swatch]::before {
    display: none;
  }
}