/** Shopify CDN: Minification failed

Line 5635:0 Unexpected "<"
Line 5678:0 Unexpected "<"

**/
:root {
  --alpha-button-background: 1;
  --alpha-button-border: 1;
  --alpha-link: 0.85;
  --alpha-badge-border: 0.1;
  --focused-base-outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  --focused-base-outline-offset: 0.3rem;
  --focused-base-box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.product-card-wrapper .card,
.contains-card--product {
  --border-radius: var(--product-card-corner-radius);
  --border-width: var(--product-card-border-width);
  --border-opacity: var(--product-card-border-opacity);
  --shadow-horizontal-offset: var(--product-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--product-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--product-card-shadow-blur-radius);
  --shadow-opacity: var(--product-card-shadow-opacity);
  --shadow-visible: var(--product-card-shadow-visible);
  --image-padding: var(--product-card-image-padding);
  --text-alignment: var(--product-card-text-alignment);
}

.collection-card-wrapper .card,
.contains-card--collection {
  --border-radius: var(--collection-card-corner-radius);
  --border-width: var(--collection-card-border-width);
  --border-opacity: var(--collection-card-border-opacity);
  --shadow-horizontal-offset: var(--collection-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--collection-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--collection-card-shadow-blur-radius);
  --shadow-opacity: var(--collection-card-shadow-opacity);
  --shadow-visible: var(--collection-card-shadow-visible);
  --image-padding: var(--collection-card-image-padding);
  --text-alignment: var(--collection-card-text-alignment);
}

.article-card-wrapper .card,
.contains-card--article {
  --border-radius: var(--blog-card-corner-radius);
  --border-width: var(--blog-card-border-width);
  --border-opacity: var(--blog-card-border-opacity);
  --shadow-horizontal-offset: var(--blog-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--blog-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--blog-card-shadow-blur-radius);
  --shadow-opacity: var(--blog-card-shadow-opacity);
  --shadow-visible: var(--blog-card-shadow-visible);
  --image-padding: var(--blog-card-image-padding);
  --text-alignment: var(--blog-card-text-alignment);
}

.contains-content-container,
.content-container {
  --border-radius: var(--text-boxes-radius);
  --border-width: var(--text-boxes-border-width);
  --border-opacity: var(--text-boxes-border-opacity);
  --shadow-horizontal-offset: var(--text-boxes-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--text-boxes-shadow-vertical-offset);
  --shadow-blur-radius: var(--text-boxes-shadow-blur-radius);
  --shadow-opacity: var(--text-boxes-shadow-opacity);
  --shadow-visible: var(--text-boxes-shadow-visible);
}

.contains-media,
.global-media-settings {
  --border-radius: var(--media-radius);
  --border-width: var(--media-border-width);
  --border-opacity: var(--media-border-opacity);
  --shadow-horizontal-offset: var(--media-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--media-shadow-vertical-offset);
  --shadow-blur-radius: var(--media-shadow-blur-radius);
  --shadow-opacity: var(--media-shadow-opacity);
  --shadow-visible: var(--media-shadow-visible);
}

/* base */

.page-width {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

body:has(.section-header .drawer-menu) .announcement-bar-section .page-width {
  max-width: 100%;
}

.page-width.drawer-menu {
  max-width: 100%;
}

.page-width-desktop {
  padding: 0;
  margin: 0 auto;
}

.utility-bar__grid.page-width {
  padding-left: 3rem;
  padding-right: 3rem;
}

@media screen and (min-width: 750px) {
  .page-width {
    padding: 0 5rem;
  }

  .header.page-width,
  .utility-bar__grid.page-width {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }

  .page-width--narrow {
    padding: 0 9rem;
  }

  .page-width-desktop {
    padding: 0;
  }

  .page-width-tablet {
    padding: 0 5rem;
  }
}

@media screen and (min-width: 990px) {
  .header:not(.drawer-menu).page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .page-width--narrow {
    max-width: 72.6rem;
    padding: 0;
  }

  .page-width-desktop {
    max-width: var(--page-width);
    padding: 0 5rem;
  }
}

.isolate {
  position: relative;
  z-index: 0;
}

.section + .section {
  margin-top: var(--spacing-sections-mobile);
}

@media screen and (min-width: 750px) {
  .section + .section {
    margin-top: var(--spacing-sections-desktop);
  }
}

.element-margin-top {
  margin-top: 5rem;
}

@media screen and (min-width: 750px) {
  .element-margin {
    margin-top: calc(5rem + var(--page-width-margin));
  }
}

.background-secondary {
  background-color: rgba(var(--color-foreground), 0.04);
}

.grid-auto-flow {
  display: grid;
  grid-auto-flow: column;
}

.page-margin,
.shopify-challenge__container {
  margin: 7rem auto;
}

.rte-width {
  max-width: 82rem;
  margin: 0 auto 2rem;
}

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

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
}

.visually-hidden--inline {
  margin: 0;
  height: 1em;
}

.overflow-hidden {
  overflow: hidden;
}

.skip-to-content-link:focus {
  z-index: 9999;
  position: inherit;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

.full-width-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

::selection {
  background-color: rgba(var(--color-foreground), 0.2);
}

.text-body {
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
  color: rgb(var(--color-foreground));
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
  word-break: break-word;
}

.hxxl {
  font-size: clamp(calc(var(--font-heading-scale) * 5.6rem), 14vw, calc(var(--font-heading-scale) * 7.2rem));
  line-height: 1.1;
}

.hxl {
  font-size: calc(var(--font-heading-scale) * 5rem);
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
}

@media only screen and (min-width: 750px) {
  .hxl {
    font-size: calc(var(--font-heading-scale) * 6.2rem);
  }
}

.h0 {
  font-size: calc(var(--font-heading-scale) * 4rem);
}

@media only screen and (min-width: 750px) {
  .h0 {
    font-size: calc(var(--font-heading-scale) * 5.2rem);
  }
}

h1,
.h1 {
  font-size: calc(var(--font-heading-scale) * 3rem);
}

@media only screen and (min-width: 750px) {
  h1,
  .h1 {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
}

h2,
.h2 {
  font-size: calc(var(--font-heading-scale) * 2rem);
}

@media only screen and (min-width: 750px) {
  h2,
  .h2 {
    font-size: calc(var(--font-heading-scale) * 2.4rem);
  }
}

h3,
.h3 {
  font-size: calc(var(--font-heading-scale) * 1.7rem);
}

@media only screen and (min-width: 750px) {
  h3,
  .h3 {
    font-size: calc(var(--font-heading-scale) * 1.8rem);
  }
}

h4,
.h4 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-size: calc(var(--font-heading-scale) * 1.5rem);
}

h5,
.h5 {
  font-size: calc(var(--font-heading-scale) * 1.2rem);
}

@media only screen and (min-width: 750px) {
  h5,
  .h5 {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
  }
}

h6,
.h6 {
  color: rgba(var(--color-foreground), 0.75);
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

blockquote {
  font-style: italic;
  color: rgba(var(--color-foreground), 0.75);
  border-left: 0.2rem solid rgba(var(--color-foreground), 0.2);
  padding-left: 1rem;
}

@media screen and (min-width: 750px) {
  blockquote {
    padding-left: 1.5rem;
  }
}

.caption {
  font-size: 1rem;
  letter-spacing: 0.07rem;
  line-height: calc(1 + 0.7 / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .caption {
    font-size: 1.2rem;
  }
}

.caption-with-letter-spacing {
  font-size: 1rem;
  letter-spacing: 0.13rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  text-transform: uppercase;
}

.caption-with-letter-spacing--medium {
  font-size: 1.2rem;
  letter-spacing: 0.16rem;
}

.caption-with-letter-spacing--large {
  font-size: 1.4rem;
  letter-spacing: 0.18rem;
}

.caption-large,
.customer .field input,
.customer select,
.field__input,
.form__label,
.select__select {
  font-size: 1.3rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  letter-spacing: 0.04rem;
}

.color-foreground {
  color: rgb(var(--color-foreground));
}

table:not([class]) {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 1.4rem;
  border-style: hidden;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2);
  /* draws the table border  */
}

table:not([class]) td,
table:not([class]) th {
  padding: 1em;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
}

@media screen and (max-width: 749px) {
  .small-hide {
    display: none !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .medium-hide {
    display: none !important;
  }
}

@media screen and (min-width: 990px) {
  .large-up-hide {
    display: none !important;
  }
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.light {
  opacity: 0.7;
}

a:empty,
ul:empty,
dl:empty,
div:empty,
section:empty,
article:empty,
p:empty,
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty {
  display: none;
}

.link,
.customer a {
  cursor: pointer;
  display: inline-block;
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  color: rgb(var(--color-link));
  background-color: transparent;
  font-size: 1.4rem;
  font-family: inherit;
}

.link--text {
  color: rgb(var(--color-foreground));
}

.link--text:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.link-with-icon {
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-decoration: none;
  margin-bottom: 4.5rem;
  white-space: nowrap;
}

.link-with-icon .icon {
  width: 1.5rem;
  margin-left: 1rem;
}

a:not([href]) {
  cursor: not-allowed;
}

.circle-divider::after {
  content: '\2022';
  margin: 0 1.3rem 0 1.5rem;
}

.circle-divider:last-of-type::after {
  display: none;
}

hr {
  border: none;
  height: 0.1rem;
  background-color: rgba(var(--color-foreground), 0.2);
  display: block;
  margin: 5rem 0;
}

@media screen and (min-width: 750px) {
  hr {
    margin: 7rem 0;
  }
}

.full-unstyled-link {
  text-decoration: none;
  color: currentColor;
  display: block;
}

.placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  color: rgba(var(--color-foreground), 0.55);
  fill: rgba(var(--color-foreground), 0.55);
}

details > * {
  box-sizing: border-box;
}

.break {
  word-break: break-word;
}

.visibility-hidden {
  visibility: hidden;
}

@media (prefers-reduced-motion) {
  .motion-reduce {
    transition: none !important;
    animation: none !important;
  }
}

:root {
  --duration-short: 100ms;
  --duration-default: 200ms;
  --duration-announcement-bar: 250ms;
  --duration-medium: 300ms;
  --duration-long: 500ms;
  --duration-extra-long: 600ms;
  --duration-extra-longer: 750ms;
  --duration-extended: 3s;
  --ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
  --animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards;
  --animation-fade-in: fadeIn var(--duration-extra-long) var(--ease-out-slow);
}

.underlined-link,
.customer a,
.inline-richtext a {
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness ease 100ms;
}

.underlined-link,
.customer a {
  color: rgba(var(--color-link), var(--alpha-link));
}

.inline-richtext a,
.rte.inline-richtext a {
  color: currentColor;
}

.underlined-link:hover,
.customer a:hover,
.inline-richtext a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.icon-arrow {
  width: 1.5rem;
}

h3 .icon-arrow,
.h3 .icon-arrow {
  width: calc(var(--font-heading-scale) * 1.5rem);
}

/* arrow animation */
.animate-arrow .icon-arrow path {
  transform: translateX(-0.25rem);
  transition: transform var(--duration-short) ease;
}

.animate-arrow:hover .icon-arrow path {
  transform: translateX(-0.05rem);
}

.svg-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}

.svg-wrapper > svg {
  height: 100%;
  width: 100%;
}

/* base-details-summary */
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary .icon-caret {
  position: absolute;
  height: 0.6rem;
  right: 1.5rem;
  top: calc(50% - 0.2rem);
}

summary::-webkit-details-marker {
  display: none;
}

.disclosure-has-popup {
  position: relative;
}

.disclosure-has-popup[open] > summary::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
  cursor: default;
  content: ' ';
  background: transparent;
}

.disclosure-has-popup > summary::before {
  display: none;
}

.disclosure-has-popup[open] > summary + * {
  z-index: 100;
}

@media screen and (min-width: 750px) {
  .disclosure-has-popup[open] > summary + * {
    z-index: 4;
  }

  .facets .disclosure-has-popup[open] > summary + * {
    z-index: 2;
  }
}

.placeholder-svg {
  height: 100%;
  width: 100%;
}

/* base-focus */
/*
  Focus ring - default (with offset)
*/

*:focus {
  outline: 0;
  box-shadow: none;
}

*:focus-visible {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

/* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */
.focused {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

/*
  Focus ring - inset
*/

.focus-inset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

.focused.focus-inset {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

/*
  Focus ring - none
*/

/* Dangerous for a11y - Use with care */
.focus-none {
  box-shadow: none !important;
  outline: 0 !important;
}

.focus-offset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.focus-offset.focused {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

/* component-title */
.title,
.title-wrapper-with-link {
  margin: 3rem 0 2rem;
}

.title-wrapper-with-link .title {
  margin: 0;
}

.title .link {
  font-size: inherit;
}

.title-wrapper {
  margin-bottom: 3rem;
}

.title-wrapper-with-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.title--primary {
  margin: 4rem 0;
}

.title-wrapper--self-padded-tablet-down,
.title-wrapper--self-padded-mobile {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media screen and (min-width: 750px) {
  .title-wrapper--self-padded-mobile {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 990px) {
  .title,
  .title-wrapper-with-link {
    margin: 5rem 0 3rem;
  }

  .title--primary {
    margin: 2rem 0;
  }

  .title-wrapper-with-link {
    align-items: center;
  }

  .title-wrapper-with-link .title {
    margin-bottom: 0;
  }

  .title-wrapper--self-padded-tablet-down {
    padding-left: 0;
    padding-right: 0;
  }
}

.title-wrapper-with-link .link-with-icon {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.title-wrapper-with-link .link-with-icon .svg-wrapper {
  width: 1.5rem;
}

.title-wrapper-with-link a {
  margin-top: 0;
  flex-shrink: 0;
}

.title-wrapper--no-top-margin {
  margin-top: 0;
}

.title-wrapper--no-top-margin > .title {
  margin-top: 0;
}

.subtitle {
  font-size: 1.8rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  letter-spacing: 0.06rem;
  color: rgba(var(--color-foreground), 0.7);
}

.subtitle--small {
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
}

.subtitle--medium {
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
}

/* component-grid */
.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  column-gap: var(--grid-mobile-horizontal-spacing);
  row-gap: var(--grid-mobile-vertical-spacing);
}

@media screen and (min-width: 750px) {
  .grid {
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }
}

.grid:last-child {
  margin-bottom: 0;
}

.grid__item {
  width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4);
  max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  flex-grow: 1;
  flex-shrink: 0;
}

@media screen and (min-width: 750px) {
  .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

.grid--gapless.grid {
  column-gap: 0;
  row-gap: 0;
}

@media screen and (max-width: 749px) {
  .grid__item.slider__slide--full-width {
    width: 100%;
    max-width: none;
  }
}

.grid--1-col .grid__item {
  max-width: 100%;
  width: 100%;
}

.grid--3-col .grid__item {
  width: calc(33.33% - var(--grid-mobile-horizontal-spacing) * 2 / 3);
}

@media screen and (min-width: 750px) {
  .grid--3-col .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }
}

.grid--2-col .grid__item {
  width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}

@media screen and (min-width: 750px) {
  .grid--2-col .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--4-col-tablet .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-tablet .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

@media screen and (max-width: 989px) {
  .grid--1-col-tablet-down .grid__item {
    width: 100%;
    max-width: 100%;
  }

  .slider--tablet.grid--peek {
    margin: 0;
    width: 100%;
  }

  .slider--tablet.grid--peek .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .slider.slider--tablet .scroll-trigger.animate--slide-in,
  .slider.slider--mobile .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--tablet {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .grid--6-col-desktop .grid__item {
    width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
    max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
  }

  .grid--5-col-desktop .grid__item {
    width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
    max-width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
  }

  .grid--4-col-desktop .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-desktop .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
    max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-desktop .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .slider.slider--desktop .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--desktop {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .grid--1-col-desktop {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .grid--1-col-desktop .grid__item {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 749px) {
  .grid--peek.slider--mobile {
    margin: 0;
    width: 100%;
  }

  .grid--peek.slider--mobile .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .grid--peek .grid__item {
    min-width: 35%;
  }

  .grid--peek.slider .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .grid--peek.slider:after {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item,
  .grid--peek .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item,
  .slider--mobile.grid--peek.grid--1-col-tablet-down .grid__item {
    width: calc(100% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider--tablet.grid--peek .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet .grid__item,
  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--1-col-tablet-down.grid--peek .grid__item {
    width: calc(100% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }
}

/* component-media */
.media {
  display: block;
  background-color: rgba(var(--color-foreground), 0.1);
  position: relative;
  overflow: hidden;
}

.media--transparent {
  background-color: transparent;
}

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.media--square {
  padding-bottom: 100%;
}

.media--portrait {
  padding-bottom: 125%;
}

.media--landscape {
  padding-bottom: 66.6%;
}

.media--cropped {
  padding-bottom: 56%;
}

.media--16-9 {
  padding-bottom: 56.25%;
}

.media--circle {
  padding-bottom: 100%;
  border-radius: 50%;
}

.media.media--hover-effect > img + img {
  opacity: 0;
}

@media screen and (min-width: 990px) {
  .media--cropped {
    padding-bottom: 63%;
  }
}

deferred-media {
  display: block;
}

/* component-button */
/* Button - default */

.button--secondary,
.button--tertiary {
  --color-button: var(--color-secondary-button);
  --color-button-text: var(--color-secondary-button-text);
}

.button--tertiary {
  --alpha-button-background: 0;
  --alpha-button-border: 0.2;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  --shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--buttons-shadow-vertical-offset);
  --shadow-blur-radius: var(--buttons-shadow-blur-radius);
  --shadow-opacity: var(--buttons-shadow-opacity);
  --shadow-visible: var(--buttons-shadow-visible);
  --border-offset: var(--buttons-border-offset);
  /* reduce radius edge artifacts */
  --border-opacity: calc(1 - var(--buttons-border-opacity));
  border-radius: var(--buttons-radius-outset);
  position: relative;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  min-width: calc(12rem + var(--buttons-border-width) * 2);
  min-height: calc(4.5rem + var(--buttons-border-width) * 2);
}

.button,
.shopify-challenge__button,
.customer button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  padding: 0 3rem;
  cursor: pointer;
  font: inherit;
  font-size: 1.5rem;
  text-decoration: none;
  color: rgb(var(--color-button-text));
  transition: box-shadow var(--duration-short) ease;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(var(--color-button), var(--alpha-button-background));
}

.button:before,
.shopify-challenge__button:before,
.customer button:before,
.shopify-payment-button__button--unbranded:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--buttons-radius-outset);
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
    rgba(var(--color-shadow), var(--shadow-opacity));
}

.button:after,
.shopify-challenge__button:after,
.customer button:after,
.shopify-payment-button__button--unbranded:after {
  content: '';
  position: absolute;
  top: var(--buttons-border-width);
  right: var(--buttons-border-width);
  bottom: var(--buttons-border-width);
  left: var(--buttons-border-width);
  z-index: 1;
  border-radius: var(--buttons-radius);
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  transition: box-shadow var(--duration-short) ease;
}

.button:not([disabled]):hover::after,
.shopify-challenge__button:hover::after,
.customer button:hover::after,
.shopify-payment-button__button--unbranded:hover::after {
  --border-offset: 1.3px;
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button), var(--alpha-button-background));
}

.button--secondary:after {
  --border-opacity: var(--buttons-border-opacity);
}

.button:focus-visible,
.button:focus,
.button.focused,
.shopify-payment-button__button--unbranded:focus-visible,
.shopify-payment-button__button--unbranded:focus {
  outline: 0;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.5),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.button:focus:not(:focus-visible):not(.focused),
.shopify-payment-button__button--unbranded:focus:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
}

.button::selection,
.shopify-challenge__button::selection,
.customer button::selection {
  background-color: rgba(var(--color-button-text), 0.3);
}

.button,
.button-label,
.shopify-challenge__button,
.customer button {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
}

.button--tertiary {
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
  min-width: calc(9rem + var(--buttons-border-width) * 2);
  min-height: calc(3.5rem + var(--buttons-border-width) * 2);
}

.button--small {
  padding: 1.2rem 2.6rem;
}

/* Shopify Accelerated Checkout */

shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}


/* Button - other */

.button:disabled,
.button[aria-disabled='true'],
.button.disabled,
.customer button:disabled,
.customer button[aria-disabled='true'],
.customer button.disabled,
.quantity__button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.button--full-width {
  display: flex;
  width: 100%;
}

.button.loading {
  color: transparent;
  position: relative;
}

@media screen and (forced-colors: active) {
  .button.loading {
    color: rgb(var(--color-foreground));
  }
}

.button.loading > .loading__spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
}

.button.loading > .loading__spinner .spinner {
  width: fit-content;
}

.button.loading > .loading__spinner .path {
  stroke: rgb(var(--color-button-text));
}

/* Button - social share */

.share-button {
  display: block;
  position: relative;
}

.share-button details {
  width: fit-content;
}

.share-button__button {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  color: rgb(var(--color-link));
  margin-left: 0;
  padding-left: 0;
  min-height: 4.4rem;
}

details[open] > .share-button__fallback {
  animation: animateMenuOpen var(--duration-default) ease;
}

.share-button__button:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.share-button__button,
.share-button__fallback button {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.share-button__button .icon-share {
  height: 1.2rem;
  margin-right: 1rem;
  min-width: 1.3rem;
}

.share-button__fallback {
  display: flex;
  align-items: center;
  position: absolute;
  top: 3rem;
  left: 0.1rem;
  z-index: 3;
  width: 100%;
  min-width: max-content;
  border-radius: var(--inputs-radius);
  border: 0;
}

.share-button__fallback:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.share-button__fallback:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.share-button__fallback button {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  right: var(--inputs-border-width);
}

.share-button__fallback button:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.share-button__fallback button:hover .svg-wrapper {
  transform: scale(1.07);
}

.share-button__close:not(.hidden) + .share-button__copy {
  display: none;
}

.share-button__close,
.share-button__copy {
  background-color: transparent;
  color: rgb(var(--color-foreground));
}

.share-button__copy:focus-visible,
.share-button__close:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.share-button__copy:focus,
.share-button__close:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.field:not(:focus-visible):not(.focused) + .share-button__copy:not(:focus-visible):not(.focused),
.field:not(:focus-visible):not(.focused) + .share-button__close:not(:focus-visible):not(.focused) {
  background-color: inherit;
}

.share-button__fallback .field:after,
.share-button__fallback .field:before {
  content: none;
}

.share-button__fallback .field {
  border-radius: 0;
  min-width: auto;
  min-height: auto;
  transition: none;
}

.share-button__fallback .field__input:focus,
.share-button__fallback .field__input:-webkit-autofill {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.1rem;
  box-shadow: 0 0 0 0.1rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.share-button__fallback .field__input {
  box-shadow: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  filter: none;
  min-width: auto;
  min-height: auto;
}

.share-button__fallback .field__input:hover {
  box-shadow: none;
}

.share-button__fallback .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.share-button__message:not(:empty) {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 0.8rem 0 0.8rem 1.5rem;
  margin: var(--inputs-border-width);
}

.share-button__message:not(:empty):not(.hidden) ~ * {
  display: none;
}

/* component-form */
.field__input,
.select__select,
.customer .field input,
.customer select {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow var(--duration-short) ease;
  border-radius: var(--inputs-radius);
  height: 4.5rem;
  min-height: calc(var(--inputs-border-width) * 2);
  min-width: calc(7rem + (var(--inputs-border-width) * 2));
  position: relative;
  border: 0;
}

.field:before,
.select:before,
.customer .field:before,
.customer select:before,
.localization-form__select:before {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.field:after,
.select:after,
.customer .field:after,
.customer select:after,
.localization-form__select:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.select__select {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.75);
}

.field:hover.field:after,
.select:hover.select:after,
.select__select:hover.select__select:after,
.customer .field:hover.field:after,
.customer select:hover.select:after,
.localization-form__select:hover.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width))
    rgba(var(--color-foreground), var(--inputs-border-opacity));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus-visible,
.select__select:focus-visible,
.customer .field input:focus-visible,
.customer select:focus-visible,
.localization-form__select:focus-visible.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.localization-form__select:focus {
  outline: 0;
  box-shadow: none;
}

.text-area,
.select {
  display: flex;
  position: relative;
  width: 100%;
}

/* Select */

.select .svg-wrapper,
.customer select + .svg-wrapper {
  height: 0.6rem;
  width: 1rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.2rem);
  right: 0;
}

.select__select,
.customer select {
  cursor: pointer;
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  padding: 0 calc(var(--inputs-border-width) + 3rem) 0 2rem;
  margin: var(--inputs-border-width);
  min-height: calc(var(--inputs-border-width) * 2);
}

/* Field */

.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--duration-short) ease;
}

.customer .field {
  display: flex;
}

.field--with-error {
  flex-wrap: wrap;
}

.field__input,
.customer .field input {
  flex-grow: 1;
  text-align: left;
  padding: 1.5rem;
  margin: var(--inputs-border-width);
  transition: box-shadow var(--duration-short) ease;
}

.field__label,
.customer .field label {
  font-size: 1.6rem;
  left: calc(var(--inputs-border-width) + 2rem);
  top: calc(1rem + var(--inputs-border-width));
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--duration-short) ease, font-size var(--duration-short) ease;
  color: rgba(var(--color-foreground), 0.75);
  letter-spacing: 0.1rem;
  line-height: 1.5;
}

.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:focus ~ label,
.customer .field input:not(:placeholder-shown) ~ label,
.customer .field input:-webkit-autofill ~ label {
  font-size: 1rem;
  top: calc(var(--inputs-border-width) + 0.5rem);
  left: calc(var(--inputs-border-width) + 2rem);
  letter-spacing: 0.04rem;
}

.field__input:focus,
.field__input:not(:placeholder-shown),
.field__input:-webkit-autofill,
.customer .field input:focus,
.customer .field input:not(:placeholder-shown),
.customer .field input:-webkit-autofill {
  padding: 2.2rem 1.5rem 0.8rem 2rem;
  margin: var(--inputs-border-width);
}

.field__input::-webkit-search-cancel-button,
.customer .field input::-webkit-search-cancel-button {
  display: none;
}

.field__input::placeholder,
.customer .field input::placeholder {
  opacity: 0;
}

.field__button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  display: flex;
  height: 4.4rem;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 4.4rem;
}

.field__button > .svg-wrapper {
  height: 2.5rem;
  width: 2.5rem;
}

.field__input:-webkit-autofill ~ .field__button,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:-webkit-autofill ~ label {
  color: rgb(0, 0, 0);
}

/* Text area */

.text-area {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  min-height: 10rem;
  resize: none;
}

input[type='checkbox'] {
  display: inline-block;
  width: auto;
  margin-right: 0.5rem;
}

/* Form global */

.form__label {
  display: block;
  margin-bottom: 0.6rem;
}

.form__message {
  align-items: center;
  display: flex;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 1rem;
}

.form__message--large {
  font-size: 1.6rem;
}

.customer .field .form__message {
  font-size: 1.4rem;
  text-align: left;
}

.form__message .icon,
.customer .form__message .svg-wrapper {
  flex-shrink: 0;
  height: 1.3rem;
  margin-right: 0.5rem;
  width: 1.3rem;
}

.form__message--large .icon,
.customer .form__message .svg-wrapper {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
}

.customer .field .form__message .svg-wrapper {
  align-self: start;
}

.form-status {
  margin: 0;
  font-size: 1.6rem;
}

.form-status-list {
  padding: 0;
  margin: 2rem 0 4rem;
}

.form-status-list li {
  list-style-position: inside;
}

.form-status-list .link::first-letter {
  text-transform: capitalize;
}

/* component-quantity */
.quantity {
  color: rgba(var(--color-foreground));
  position: relative;
  width: calc(14rem / var(--font-body-scale) + var(--inputs-border-width) * 2);
  display: flex;
  border-radius: var(--inputs-radius);
  min-height: calc((var(--inputs-border-width) * 2) + 4.5rem);
}

.quantity:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.quantity:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.quantity__input {
  color: currentColor;
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  font-weight: 500;
  opacity: 0.85;
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 0 0.5rem;
  width: 100%;
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
}

.quantity__button {
  width: calc(4.5rem / var(--font-body-scale));
  flex-shrink: 0;
  font-size: 1.8rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-foreground));
  padding: 0;
}

.quantity__button:first-child {
  margin-left: calc(var(--inputs-border-width));
}

.quantity__button:last-child {
  margin-right: calc(var(--inputs-border-width));
}

.quantity__button .svg-wrapper {
  width: 1rem;
  pointer-events: none;
}

.quantity__button:focus-visible,
.quantity__input:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:focus,
.quantity__input:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:not(:focus-visible):not(.focused),
.quantity__input:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
  background-color: inherit;
}

.quantity__input:-webkit-autofill,
.quantity__input:-webkit-autofill:hover,
.quantity__input:-webkit-autofill:active {
  box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
  -webkit-box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
}

.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity__input[type='number'] {
  -moz-appearance: textfield;
}

.quantity__rules {
  margin-top: 0.5rem;
  position: relative;
  font-size: 1.2rem;
}

.quantity__rules .caption {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}

.quantity__rules .divider + .divider::before {
  content: '\2022';
  margin: 0 0.5rem;
}

.quantity__rules-cart {
  position: relative;
}

.product__info-container .loading__spinner:not(.hidden) ~ *,
.quantity__rules-cart .loading__spinner:not(.hidden) ~ * {
  visibility: hidden;
}

/* component-modal */
.modal__toggle {
  list-style-type: none;
}

.modal__toggle-close {
  display: none;
}

.modal__toggle-open {
  display: flex;
}

.modal__close-button.link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0rem;
  height: 4.4rem;
  width: 4.4rem;
  background-color: transparent;
}

.modal__close-button .icon {
  width: 1.7rem;
  height: 1.7rem;
}

.modal__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(var(--color-background));
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-modal {
  cursor: zoom-out;
}

.media-modal .deferred-media {
  cursor: initial;
}

/* component-cart-count-bubble */
.cart-count-bubble:empty {
  display: none;
}

.cart-count-bubble {
  position: absolute;
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  height: 1.7rem;
  width: 1.7rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  bottom: 0.8rem;
  left: 2.2rem;
  line-height: calc(1 + 0.1 / var(--font-body-scale));
}

/* utility-bar */
.utility-bar {
  height: 100%;
}

.utility-bar--bottom-border {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

@media screen and (min-width: 990px) {
  .utility-bar--bottom-border-social-only {
    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }
}

.utility-bar__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'announcements';
}

.utility-bar__grid .list-social {
  justify-content: flex-start;
  align-content: center;
  margin-left: -1.2rem;
  grid-area: social-icons;
}

@media screen and (max-width: 989px) {
  .utility-bar .utility-bar__grid .list-social {
    display: none;
  }
}

.utility-bar .list-social__item .icon {
  scale: 0.9;
}

@media screen and (min-width: 990px) {
  .utility-bar__grid--3-col {
    grid-template-columns: 3fr 4fr 3fr;
    grid-template-areas: 'social-icons announcements language-currency';
  }

  .utility-bar__grid--2-col {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'social-icons language-currency';
  }

  .announcement-bar.announcement-bar--one-announcement,
  .announcement-bar--one-announcement .announcement-bar__link {
    width: fit-content;
    margin: auto;
  }
}

.announcement-bar,
.announcement-bar__announcement {
  color: rgb(var(--color-foreground));
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  grid-area: announcements;
}

.announcement-bar .slider--everywhere {
  margin-bottom: 0;
  scroll-behavior: auto;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.announcement-bar-slider,
.announcement-bar-slider .slider {
  width: 100%;
}

.announcement-bar .slider-button--next {
  margin-right: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--prev {
  margin-left: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--next:focus-visible,
.announcement-bar .slider-button--prev:focus-visible,
.utility-bar .list-social__link:focus-visible {
  outline-offset: -0.3rem;
  box-shadow: 0 0 0 -0.2rem rgb(var(--color-foreground));
}

.localization-wrapper {
  grid-area: language-currency;
  align-self: center;
  display: flex;
  justify-content: flex-end;
}

.localization-wrapper .localization-selector + .disclosure__list-wrapper {
  animation: animateMenuOpen var(--duration-default) ease;
}

.utility-bar .localization-wrapper .disclosure .localization-form__select,
.utility-bar .localization-wrapper .disclosure__link {
  font-size: calc(var(--font-heading-scale) * 1.3rem);
}

@media screen and (min-width: 990px) {
  body:has(.section-header .header:not(.drawer-menu)) .utility-bar .page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .announcement-bar-slider {
    width: 60%;
  }

  .announcement-bar .slider-button {
    height: 3.8rem;
  }
}

.announcement-bar__link {
  display: flex;
  width: 100%;
  text-decoration: none;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.announcement-bar__link:hover {
  text-decoration: underline;
}

.announcement-bar__link .icon-arrow {
  display: inline-block;
  pointer-events: none;
  margin-left: 0.8rem;
  vertical-align: middle;
  margin-bottom: 0.2rem;
}

.announcement-bar__message {
  text-align: center;
  padding: 1rem 0;
  margin: 0;
  letter-spacing: 0.1rem;
  min-height: 3.8rem;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message,
.announcement-bar-slider--fade-in-previous .announcement-bar__message,
.announcement-bar-slider--fade-out-next .announcement-bar__message,
.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  animation-duration: var(--duration-announcement-bar);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message {
  --announcement-translate-from: -1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-in-previous .announcement-bar__message {
  --announcement-translate-from: 1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-out-next .announcement-bar__message {
  --announcement-translate-to: 1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  --announcement-translate-to: -1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

@keyframes translateAnnouncementSlideIn {
  0% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-from));
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes translateAnnouncementSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-to));
  }
}

/* section-header */
.section-header.shopify-section-group-header-group {
  z-index: 3;
}

.shopify-section-header-sticky {
  position: sticky;
  top: 0;
}

.shopify-section-header-hidden {
  top: calc(-1 * var(--header-height));
}

.shopify-section-header-hidden.menu-open {
  top: 0;
}

.section-header.animate {
  transition: top 0.15s ease-out;
}

.shopify-section-group-header-group {
  z-index: 4;
}

.section-header ~ .shopify-section-group-header-group {
  z-index: initial;
}

/* Main Header Layout */
.header-wrapper {
  display: block;
  position: relative;
  background-color: rgb(var(--color-background));
}

.header-wrapper--border-bottom {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.header {
  display: grid;
  grid-template-areas: 'left-icons heading icons';
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}

@media screen and (max-width: 749px) {
  .header--has-app {
    grid-template-columns: auto 1fr auto;
  }
}

@media screen and (min-width: 990px) {
  .header {
    grid-template-columns: 1fr auto 1fr;
  }

  .header--top-left,
  .header--middle-left:not(.header--has-menu) {
    grid-template-areas:
      'heading icons'
      'navigation navigation';
    grid-template-columns: 1fr auto;
  }

  .header--top-left.drawer-menu,
  .header--middle-left.drawer-menu {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: auto 1fr auto;
    column-gap: 1rem;
  }

  .header--middle-left {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: auto auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center:not(.drawer-menu) {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: 1fr auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center a.header__heading-link {
    text-align: center;
  }

  .header--top-center {
    grid-template-areas:
      'left-icons heading icons'
      'navigation navigation navigation';
  }

  .header--top-center.drawer-menu {
    grid-template-areas: 'left-icons heading icons';
    grid-template-columns: 1fr auto 1fr;
  }

  .header:not(.header--middle-left, .header--middle-center) .header__inline-menu {
    margin-top: 1.05rem;
  }
}

.header *[tabindex='-1']:focus {
  outline: none;
}

.header__heading {
  margin: 0;
  line-height: 0;
}

.header > .header__heading-link {
  line-height: 0;
}

.header__heading,
.header__heading-link {
  grid-area: heading;
  justify-self: center;
}

.header__heading-link {
  display: inline-block;
  padding: 0.75rem;
  text-decoration: none;
  word-break: break-word;
}

.header__heading-link:hover .h2 {
  color: rgb(var(--color-foreground));
}

.header__heading-link .h2 {
  line-height: 1;
  color: rgba(var(--color-foreground), 0.75);
}

.header__heading-logo {
  height: auto;
  max-width: 100%;
}

.header__heading-logo-wrapper {
  width: 100%;
  display: inline-block;
  transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99);
}

@media screen and (max-width: 989px) {
  .header__heading,
  .header__heading-link {
    text-align: center;
  }

  .header--mobile-left .header__heading,
  .header--mobile-left .header__heading-link {
    text-align: left;
    justify-self: start;
  }

  .header--mobile-left {
    grid-template-columns: auto 2fr 1fr;
  }
}

@media screen and (min-width: 990px) {
  .header--middle-left .header__heading-link,
  .header--top-left .header__heading-link {
    margin-left: -0.75rem;
  }

  .header__heading,
  .header__heading-link {
    justify-self: start;
  }

  .header--middle-center .header__heading-link,
  .header--middle-center .header__heading {
    justify-self: center;
    text-align: center;
  }

  .header--top-center .header__heading-link,
  .header--top-center .header__heading {
    justify-self: center;
    text-align: center;
  }
}

/* Header icons */
.header__icons {
  display: flex;
  grid-area: icons;
  justify-self: end;
  padding-right: 0.8rem;
}

.header__icons .shopify-app-block {
  max-width: 4.4rem;
  max-height: 4.4rem;
  overflow: hidden;
}

.header__icon:not(.header__icon--summary),
.header__icon span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__icon {
  color: rgb(var(--color-foreground));
}

.header__icon span {
  height: 100%;
}

.header__icon .svg-wrapper {
  width: 44px;
  height: 44px;
}

.header__icon::after {
  content: none;
}

.header__icon:hover .icon,
.modal__close-button:hover .icon {
  transform: scale(1.07);
}

.header__icon .icon {
  height: 2rem;
  width: 2rem;
  fill: none;
  vertical-align: middle;
}

.header__icon,
.header__icon--cart .icon {
  height: 4.4rem;
  width: 4.4rem;
  padding: 0;
}

.header__icon--cart {
  position: relative;
  margin-right: -1.2rem;
}

.header__icon--menu[aria-expanded='true']::before {
  content: '';
  top: 100%;
  left: 0;
  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
  width: 100%;
  display: block;
  position: absolute;
  background: rgba(var(--color-foreground), 0.5);
}

.header__icon--account shop-user-avatar {
  --shop-avatar-size: 2.8rem;
}

details .header__icon-close {
  display: none;
}

details[open] .header__icon-close {
  display: inline-block;
}

account-icon {
  display: flex;
}

/* Search */
menu-drawer + .header__search {
  display: none;
}

.header > .header__search {
  grid-area: left-icons;
  justify-self: start;
}

.header--top-center.drawer-menu > .header__search {
  margin-left: 3.2rem;
}

.header--top-center header-drawer {
  grid-area: left-icons;
}

.header:not(.header--has-menu) * > .header__search {
  display: none;
}

.header__search {
  display: inline-flex;
  line-height: 0;
}

.header--top-center > .header__search {
  display: none;
}

.header--top-center * > .header__search {
  display: inline-flex;
}

@media screen and (min-width: 990px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: inline-flex;
  }

  .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__search {
    display: none;
  }
}

details[open] > .search-modal {
  opacity: 1;
  animation: animateMenuOpen var(--duration-default) ease;
}

details[open] .modal-overlay {
  display: block;
}

details[open] .modal-overlay::after {
  position: absolute;
  content: '';
  background-color: rgb(var(--color-foreground), 0.5);
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
}

.search-modal {
  opacity: 0;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  min-height: calc(100% + var(--inputs-margin-offset) + (2 * var(--inputs-border-width)));
  height: 100%;
}

.search-modal__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 5rem 0 1rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  position: relative;
}

.search-modal__content-bottom {
  bottom: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__content-top {
  top: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__form {
  width: 100%;
}

.search-modal__close-button {
  position: absolute;
  right: 0.3rem;
}

@media screen and (min-width: 750px) {
  .search-modal__close-button {
    right: 1rem;
  }

  .search-modal__content {
    padding: 0 6rem;
  }
}

@media screen and (min-width: 990px) {
  .search-modal__form {
    max-width: 74.2rem;
  }

  .search-modal__close-button {
    position: initial;
    margin-left: 0.5rem;
  }
}

/* Header menu drawer */
.header__icon--menu .icon {
  display: block;
  position: absolute;
  opacity: 1;
  transform: scale(1);
  transition: transform 150ms ease, opacity 150ms ease;
}

details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
  visibility: hidden;
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
  visibility: visible;
  opacity: 1;
  transform: scale(1.07);
}

.js details > .header__submenu {
  opacity: 0;
  transform: translateY(-1.5rem);
}

details[open] > .header__submenu {
  animation: animateMenuOpen var(--duration-default) ease;
  animation-fill-mode: forwards;
  z-index: 1;
}

@media (prefers-reduced-motion) {
  details[open] > .header__submenu {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header menu */
.header__inline-menu {
  margin-left: -1.2rem;
  grid-area: navigation;
  display: none;
}

.header--top-center .header__inline-menu,
.header--top-center .header__heading-link {
  margin-left: 0;
}

@media screen and (min-width: 990px) {
  .header__inline-menu {
    display: block;
  }

  .header--top-center .header__inline-menu {
    justify-self: center;
  }

  .header--top-center .header__inline-menu > .list-menu--inline {
    justify-content: center;
  }

  .header--middle-left .header__inline-menu {
    margin-left: 0;
  }
}

.header__menu {
  padding: 0 1rem;
}

.header__menu-item {
  padding: 1.2rem;
  text-decoration: none;
  color: rgba(var(--color-foreground), 0.75);
}

.header__menu-item:hover {
  color: rgb(var(--color-foreground));
}

.header__menu-item span {
  transition: text-decoration var(--duration-short) ease;
}

.header__menu-item:hover span {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

details[open] > .header__menu-item {
  text-decoration: underline;
}

details[open]:hover > .header__menu-item {
  text-decoration-thickness: 0.2rem;
}

details[open] > .header__menu-item .icon-caret {
  transform: rotate(180deg);
}

.header__active-menu-item {
  transition: text-decoration-thickness var(--duration-short) ease;
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.header__menu-item:hover .header__active-menu-item {
  text-decoration-thickness: 0.2rem;
}

.header__submenu {
  transition: opacity var(--duration-default) ease, transform var(--duration-default) ease;
}

.global-settings-popup,
.header__submenu.global-settings-popup {
  border-radius: var(--popup-corner-radius);
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  border-style: solid;
  border-width: var(--popup-border-width);
  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
    rgba(var(--color-shadow), var(--popup-shadow-opacity));
  z-index: -1;
}

.header__submenu.list-menu {
  padding: 1rem 0;
}

.header__submenu .header__submenu {
  background-color: rgba(var(--color-foreground), 0.03);
  padding: 1rem 0;
  margin: 1rem 0;
}

.header__submenu .header__menu-item:after {
  right: 2rem;
}

.header__submenu .header__menu-item {
  justify-content: space-between;
  padding: 0.8rem 2rem;
}

.header__submenu .header__menu-item:hover {
  text-decoration-line: underline;
}

.header__menu-item .icon-caret {
  right: 0.8rem;
}

.header__submenu .icon-caret {
  flex-shrink: 0;
  margin-left: 1rem;
  position: static;
}

header-menu > details,
details-disclosure > details {
  position: relative;
}

@keyframes animateMenuOpen {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.overflow-hidden-mobile,
.overflow-hidden-tablet,
.overflow-hidden-desktop {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .overflow-hidden-mobile {
    overflow: auto;
  }
}

@media screen and (min-width: 990px) {
  .overflow-hidden-tablet {
    overflow: auto;
  }
}

.badge {
  border: 1px solid transparent;
  border-radius: var(--badge-corner-radius);
  display: inline-block;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  padding: 0.5rem 1.3rem 0.6rem 1.3rem;
  text-align: center;
  background-color: rgb(var(--color-badge-background));
  border-color: rgba(var(--color-badge-border), var(--alpha-badge-border));
  color: rgb(var(--color-badge-foreground));
  word-break: break-word;
}

.gradient {
  background: rgb(var(--color-background));
  background: var(--gradient-background);
  background-attachment: fixed;
}

@media screen and (forced-colors: active) {
  .icon {
    color: CanvasText;
    fill: CanvasText !important;
  }

  .icon-close-small path {
    stroke: CanvasText;
  }
}

.ratio {
  display: flex;
  position: relative;
  align-items: stretch;
}

.ratio::before {
  content: '';
  width: 0;
  height: 0;
  padding-bottom: var(--ratio-percent);
}

.content-container {
  border-radius: var(--text-boxes-radius);
  border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
  position: relative;
}

.content-container:after {
  content: '';
  position: absolute;
  top: calc(var(--text-boxes-border-width) * -1);
  right: calc(var(--text-boxes-border-width) * -1);
  bottom: calc(var(--text-boxes-border-width) * -1);
  left: calc(var(--text-boxes-border-width) * -1);
  border-radius: var(--text-boxes-radius);
  box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
    var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
  z-index: -1;
}

.content-container--full-width:after {
  left: 0;
  right: 0;
  border-radius: 0;
}

@media screen and (max-width: 749px) {
  .content-container--full-width-mobile {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }

  .content-container--full-width-mobile:after {
    display: none;
  }
}

.global-media-settings {
  position: relative;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  overflow: visible !important;
  background-color: rgb(var(--color-background));
}

.global-media-settings:after {
  content: '';
  position: absolute;
  top: calc(var(--media-border-width) * -1);
  right: calc(var(--media-border-width) * -1);
  bottom: calc(var(--media-border-width) * -1);
  left: calc(var(--media-border-width) * -1);
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  z-index: -1;
  pointer-events: none;
}

.global-media-settings--no-shadow {
  overflow: hidden !important;
}

.global-media-settings--no-shadow:after {
  content: none;
}

.global-media-settings img,
.global-media-settings iframe,
.global-media-settings model-viewer,
.global-media-settings video,
.global-media-settings .placeholder-svg {
  border-radius: calc(var(--media-radius) - var(--media-border-width));
}

.content-container--full-width,
.global-media-settings--full-width,
.global-media-settings--full-width img,
.global-media-settings--full-width video,
.global-media-settings--full-width iframe,
.global-media-settings--full-width .placeholder-svg {
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* check for flexbox gap in older Safari versions */
@supports not (inset: 10px) {
  .grid {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid__item {
    padding-left: var(--grid-mobile-horizontal-spacing);
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .grid {
      margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
    }

    .grid__item {
      padding-left: var(--grid-desktop-horizontal-spacing);
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }

  .grid--gapless .grid__item {
    padding-left: 0;
    padding-bottom: 0;
  }

  @media screen and (min-width: 749px) {
    .grid--peek .grid__item {
      padding-left: var(--grid-mobile-horizontal-spacing);
    }
  }

  .product-grid .grid__item {
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .product-grid .grid__item {
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }
}

.font-body-bold {
  font-weight: var(--font-body-weight-bold);
}

/* outline and border styling for Windows High Contrast Mode */
@media (forced-colors: active) {
  .button,
  .shopify-challenge__button,
  .customer button {
    border: transparent solid 1px;
  }

  .button:focus-visible,
  .button:focus,
  .button.focused,
  .shopify-payment-button__button--unbranded:focus-visible,
  .shopify-payment-button [role='button']:focus-visible,
  .shopify-payment-button__button--unbranded:focus,
  .shopify-payment-button [role='button']:focus {
    outline: solid transparent 1px;
  }

  .field__input:focus,
  .select__select:focus,
  .customer .field input:focus,
  .customer select:focus,
  .localization-form__select:focus.localization-form__select:after {
    outline: transparent solid 1px;
  }

  .localization-form__select:focus {
    outline: transparent solid 1px;
  }
}

.rte:after {
  clear: both;
  content: '';
  display: block;
}

.rte > *:first-child {
  margin-top: 0;
}

.rte > *:last-child {
  margin-bottom: 0;
}

.rte table {
  table-layout: fixed;
}

@media screen and (min-width: 750px) {
  .rte table td {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}

.rte img {
  height: auto;
  max-width: 100%;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  margin-bottom: var(--media-shadow-vertical-offset);
}

.rte ul,
.rte ol {
  list-style-position: inside;
  padding-left: 2rem;
}

.rte li {
  list-style: inherit;
}

.rte li:last-child {
  margin-bottom: 0;
}

.rte a {
  color: rgba(var(--color-link), var(--alpha-link));
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness var(--duration-short) ease;
}

.rte a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.rte blockquote {
  display: inline-flex;
}

.rte blockquote > * {
  margin: -0.5rem 0 -0.5rem 0;
}

/* Image mask global styles */

.shape--mask {
  display: block;
  height: 0;
  width: 0;
}

.shape--arch {
  clip-path: url('#Shape-Arch');
}

.shape--blob {
  clip-path: polygon(var(--shape--blob-1));
}

.shape--chevronleft {
  clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 15% 100%, 0% 50%, 15% 0%);
}

.shape--chevronright {
  clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%, 0% 0%);
}

.shape--circle {
  clip-path: circle(closest-side);
}

.shape--diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.shape--parallelogram {
  clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
}

.shape--round {
  clip-path: ellipse(45% 45% at 50% 50%);
}

/* Fixed background */
.animate--fixed {
  clip-path: inset(0);
}

.animate--fixed > img:not(.zoom):not(.deferred-media__poster-button),
.animate--fixed > svg:not(.zoom):not(.deferred-media__poster-button) {
  position: fixed;
  height: 100vh;
}

/* Zoom in image on scroll */
.animate--zoom-in {
  --zoom-in-ratio: 1;
}

.animate--zoom-in > img,
.animate--zoom-in > .svg-wrapper {
  transition: scale var(--duration-short) linear;
  scale: var(--zoom-in-ratio);
}

/* Animations */

@media (prefers-reduced-motion: no-preference) {
  .animate--ambient > img,
  .animate--ambient > .svg-wrapper {
    animation: animateAmbient 30s linear infinite;
  }

  @keyframes animateAmbient {
    0% {
      transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2);
    }

    100% {
      transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2);
    }
  }

  .scroll-trigger.animate--fade-in,
  .scroll-trigger.animate--slide-in {
    opacity: 0.01;
  }

  .scroll-trigger.animate--slide-in {
    transform: translateY(2rem);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in {
    opacity: 1;
    animation: var(--animation-fade-in);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
    animation: var(--animation-slide-in);
    animation-delay: calc(var(--animation-order) * 75ms);
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--fade-in,
  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in,
  .scroll-trigger.scroll-trigger--design-mode .slider,
  .scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel {
    opacity: 1;
    animation: none;
    transition: none;
    transform: none;
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in {
    transform: translateY(0);
  }

  @keyframes slideIn {
    from {
      transform: translateY(2rem);
      opacity: 0.01;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0.01;
    }

    to {
      opacity: 1;
    }
  }
}

/* Element Hovers: Vertical Lift, 3d Lift */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .animate--hover-3d-lift .card-wrapper .card--card,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary),
  .animate--hover-3d-lift .shopify-challenge__button,
  .animate--hover-3d-lift .customer button,
  .animate--hover-3d-lift .shopify-payment-button__button,
  .animate--hover-3d-lift .deferred-media .deferred-media__poster-button {
    transition: transform var(--duration-long) ease, box-shadow var(--duration-long) ease;
    transform-origin: center;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-3d-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-3d-lift .customer button:not([disabled]):hover,
  .animate--hover-3d-lift .shopify-payment-button__button:hover,
  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transition: transform var(--duration-extended) ease, box-shadow var(--duration-long) ease;
    /* Slow the card transition speed while hover is active. */
    transform: rotate(1deg);
    box-shadow: -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05), 1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05),
      0 0 0.5rem 0 rgba(255, 255, 255, 0), 0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5);
  }

  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transform: translate(-50%, -50%) scale(1.05);
    /* Apply a specialized transform to the video play button. */
  }

  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--standard .card__inner {
    transform: rotate(0.5deg);
    /* Less intense rotation for collage items. */
  }

  .animate--hover-3d-lift .product-grid .grid__item:hover,
  .animate--hover-3d-lift .collection-list .grid__item:hover,
  .animate--hover-3d-lift .collage__item:hover,
  .animate--hover-3d-lift .blog-articles .article:hover,
  .animate--hover-3d-lift .complementary-slide li:hover {
    z-index: 2;
    /* Make sure the hovered card is the topmost card. */
  }

  .animate--hover-3d-lift .product-grid {
    isolation: isolate;
    /* Ensure z-index changes here don't negatively effect other UI stacking. */
  }

  .animate--hover-3d-lift .card-wrapper .card--shape.card--standard:not(.card--text) .card__inner {
    box-shadow: none;
    transition: transform var(--duration-long) ease, filter var(--duration-long) ease;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner {
    transition: transform calc(2 * var(--duration-extended)) ease, filter var(--duration-long) ease;
    /* Slow the card transition speed while hover is active. */
    filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15)) drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15));
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:after,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner:after,
  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    background-image: var(--easter-egg);
    background-size: 250px 250px;
    mix-blend-mode: color-dodge;
    pointer-events: none;
    z-index: 2;
  }

  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .animate--hover-3d-lift .card-wrapper .card--card:before,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__media:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: background-position calc(2 * var(--duration-extended)) ease, opacity var(--duration-default) ease;
    mix-blend-mode: overlay;
    background-size: 400% 100%;
    background-position: 90% 0;
    background-repeat: no-repeat;
    background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0) 55%
    );
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:before,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__media:after {
    opacity: 0.2;
    transition: background-position 6s ease, opacity var(--duration-long) ease;
    background-position: left;
    z-index: 2;
  }

  :root {
    --easter-egg: none;
    --sparkle: url('./sparkle.gif');
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary),
  .animate--hover-vertical-lift .shopify-challenge__button,
  .animate--hover-vertical-lift .customer button,
  .animate--hover-vertical-lift .shopify-payment-button__button {
    transition: transform var(--duration-default) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper .card--card,
  .animate--hover-vertical-lift .card-wrapper .card--standard .card__inner {
    transition: transform var(--duration-medium) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper:hover .card--card,
  .animate--hover-vertical-lift .card-wrapper:hover .card--standard .card__inner {
    transform: translateY(-0.75rem);
  }

  .animate--hover-vertical-lift .card-wrapper:active .card--card,
  .animate--hover-vertical-lift .card-wrapper:active .card--standard .card__inner {
    transform: translateY(-0.5rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-payment-button__button:hover {
    transform: translateY(-0.25rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):active,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):active,
  .animate--hover-vertical-lift .customer button:not([disabled]):active,
  .animate--hover-vertical-lift .shopify-payment-button__button:active {
    transform: translateY(0);
  }

  .animate--hover-vertical-lift .button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .shopify-payment-button__button:not([disabled]):hover:after {
    --border-offset: 0.3px;
    /* Default is 1.3px as defined above in this file. This removes 1px to prevent the border from growing on buttons when this effect is on.  */
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
        rgba(var(--color-button-text), var(--border-opacity)),
      0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  }

  .animate--hover-vertical-lift .button:not([disabled]).button--secondary:hover:after {
    --border-offset: 0px;
    /* Prevent the border from growing on buttons when this effect is on. */
  }
}

/* Loading spinner */
.loading__spinner {
  position: absolute;
  z-index: 1;
  width: 1.8rem;
}

.loading__spinner {
  width: 1.8rem;
  display: inline-block;
}

.spinner {
  animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

.path {
  stroke-dasharray: 280;
  stroke-dashoffset: 0;
  transform-origin: center;
  stroke: rgb(var(--color-foreground));
  animation: dash 1.4s ease-in-out infinite;
}

@media screen and (forced-colors: active) {
  .path {
    stroke: CanvasText;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 280;
  }
  50% {
    stroke-dashoffset: 75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(450deg);
  }
}

.loading__spinner:not(.hidden) + .cart-item__price-wrapper,
.loading__spinner:not(.hidden) ~ cart-remove-button {
  opacity: 50%;
}

.loading__spinner:not(.hidden) ~ cart-remove-button {
  pointer-events: none;
  cursor: default;
}

/* Progress bar */
.progress-bar-container {
  width: 100%;
  margin: auto;
}

.progress-bar {
  height: 0.13rem;
  width: 100%;
}

.progress-bar-value {
  width: 100%;
  height: 100%;
  background-color: rgb(var(--color-foreground));
  animation: indeterminateAnimation var(--duration-extra-longer) infinite ease-in-out;
  transform-origin: 0;
}

.progress-bar .progress-bar-value {
  display: block;
}

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(-20%) scaleX(0);
  }
  40% {
    transform: translateX(30%) scaleX(0.7);
  }
  100% {
    transform: translateX(100%) scaleX(0);
  }
}
/* ============================================================================
   THE-PERUVIAN · Sección newsletter "Conecta con nosotros"
   ========================================================================= */

/* ============================================================================
   THE-PERUVIAN · Sección newsletter "Conecta con nosotros"
   Fondo dorado de marca con texto claro. Solo CSS, sin tocar el HTML.

   Dónde pegarlo:
   - Opción A (recomendada): Personalizar tema > sección Newsletter >
     campo "CSS personalizado".
   - Opción B: al final de assets/base.css.

   Alcance: todo cuelga de .newsletter, así que el formulario del pie de
   página (.footer-block__newsletter) no se ve afectado.
   ========================================================================= */

.newsletter {
  --tp-gold: #ae8622;
  --tp-gold-top: #a87f1f;
  --tp-gold-mid: #8d6b14;
  --tp-gold-deep: #6f530e;
  --tp-gold-light: #d8ac45;
  --tp-ink: #0e0e11;
  --tp-cream: #fdfaf2;
  --tp-cream-dim: rgba(253, 250, 242, 0.88);
  --tp-shade: rgba(14, 14, 17, 0.28);
}

/* ---------- Contenedor ---------- */

.newsletter .newsletter__wrapper {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--tp-gold-mid) !important;
  background-image:
    radial-gradient(120% 90% at 50% -10%, rgba(255, 236, 190, 0.22), transparent 62%),
    linear-gradient(168deg, var(--tp-gold-top) 0%, var(--tp-gold-mid) 52%, var(--tp-gold-deep) 100%) !important;
  border-top: 1px solid rgba(14, 14, 17, 0.18);
  border-bottom: 1px solid rgba(14, 14, 17, 0.18);
  padding: clamp(48px, 6vw, 88px) clamp(20px, 5vw, 48px) !important;
}

/* Filete claro superior */
.newsletter .newsletter__wrapper::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 224, 0.6), transparent);
  z-index: 1;
}

/* ---------- Titular ---------- */

.newsletter .newsletter__wrapper > h2 {
  position: relative;
  color: var(--tp-cream) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.005em;
  margin: 0 auto 0.55em !important;
  padding-bottom: 0.42em;
  max-width: 18ch;
  text-shadow: 0 1px 2px var(--tp-shade);
}

.newsletter .newsletter__wrapper > h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 84px;
  height: 3px;
  border-radius: 3px;
  background: var(--tp-cream);
  box-shadow: 0 1px 0 rgba(14, 14, 17, 0.3);
}

/* ---------- Subtítulo ---------- */

.newsletter .newsletter__subheading {
  margin: 0 auto !important;
}

.newsletter .newsletter__subheading p {
  color: var(--tp-cream-dim) !important;
  line-height: 1.6 !important;
  max-width: 48ch;
  margin: 0 auto 2.1em !important;
  text-shadow: 0 1px 2px rgba(14, 14, 17, 0.22);
}

/* ---------- Formulario ---------- */

.newsletter .newsletter-form {
  width: 100%;
}

.newsletter .newsletter-form__field-wrapper {
  max-width: 520px;
  margin: 0 auto !important;
}

.newsletter .newsletter-form .field {
  position: relative;
  border: 1px solid rgba(14, 14, 17, 0.28);
  border-radius: 999px;
  background: var(--tp-cream);
  box-shadow: 0 8px 22px rgba(14, 14, 17, 0.22);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Anula el borde y el halo propios del tema */
.newsletter .newsletter-form .field::before,
.newsletter .newsletter-form .field::after {
  content: none !important;
  display: none !important;
}

.newsletter .newsletter-form .field:hover {
  border-color: rgba(14, 14, 17, 0.45);
}

.newsletter .newsletter-form .field:focus-within {
  border-color: var(--tp-ink);
  box-shadow: 0 0 0 4px rgba(253, 250, 242, 0.28), 0 8px 22px rgba(14, 14, 17, 0.24);
}

/* ---------- Campo de email ---------- */

.newsletter .newsletter-form .field__input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--tp-ink) !important;
  padding: 1.4rem 4.2rem 1.4rem 1.6rem !important;
}

.newsletter .newsletter-form .field__input:focus {
  box-shadow: none !important;
  outline: 0 !important;
}

.newsletter .newsletter-form .field__label {
  left: 1.6rem !important;
  color: rgba(14, 14, 17, 0.62) !important;
}

.newsletter .newsletter-form .field__input:focus ~ .field__label,
.newsletter .newsletter-form .field__input:not(:placeholder-shown) ~ .field__label {
  color: var(--tp-gold-deep) !important;
  letter-spacing: 0.04em;
}

/* Autorrelleno de Chrome */
.newsletter .newsletter-form .field__input:-webkit-autofill,
.newsletter .newsletter-form .field__input:-webkit-autofill:hover,
.newsletter .newsletter-form .field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tp-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--tp-cream) inset;
  caret-color: var(--tp-ink);
  border-radius: 999px;
  transition: background-color 9999s ease-in-out 0s;
}

/* ---------- Botón de envío ---------- */

.newsletter .newsletter-form__button.field__button {
  position: absolute !important;
  top: 50% !important;
  right: 7px !important;
  left: auto !important;
  transform: translateY(-50%);
  width: 46px !important;
  height: 46px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tp-ink) !important;
  color: var(--tp-gold-light) !important;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.newsletter .newsletter-form__button.field__button:hover {
  background: #1d1d23 !important;
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 6px 18px rgba(14, 14, 17, 0.35);
}

.newsletter .newsletter-form__button.field__button:active {
  transform: translateY(-50%) scale(0.96);
}

.newsletter .newsletter-form__button.field__button:focus-visible {
  outline: 2px solid var(--tp-cream);
  outline-offset: 3px;
}

.newsletter .newsletter-form__button .svg-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.newsletter .newsletter-form__button .icon-arrow {
  width: 17px;
  height: 12px;
  transition: transform 0.25s ease;
}

.newsletter .newsletter-form__button:hover .icon-arrow {
  transform: translateX(3px);
}

/* ---------- Mensajes de error y de éxito ---------- */

.newsletter .newsletter-form__message {
  justify-content: center;
  margin-top: 1.1rem !important;
  color: var(--tp-cream) !important;
  text-shadow: 0 1px 2px rgba(14, 14, 17, 0.28);
}

.newsletter .newsletter-form__message--success {
  color: var(--tp-cream) !important;
  font-weight: 600;
}

.newsletter .newsletter-form__message .icon {
  color: currentColor;
}

/* ---------- Móvil ---------- */

@media screen and (max-width: 600px) {
  .newsletter .newsletter__wrapper {
    padding: 44px 20px !important;
    border-radius: 0;
    background-image:
      radial-gradient(140% 70% at 50% -5%, rgba(255, 236, 190, 0.18), transparent 60%),
      linear-gradient(172deg, var(--tp-gold-top) 0%, var(--tp-gold-mid) 45%, var(--tp-gold-deep) 100%) !important;
  }

  .newsletter .newsletter__wrapper > h2 {
    max-width: 15ch;
  }

  .newsletter .newsletter__subheading p {
    margin-bottom: 1.7em !important;
  }

  .newsletter .newsletter-form .field__input {
    padding: 1.25rem 3.8rem 1.25rem 1.3rem !important;
  }

  .newsletter .newsletter-form .field__label {
    left: 1.3rem !important;
  }

  .newsletter .newsletter-form__button.field__button {
    width: 42px !important;
    height: 42px !important;
    right: 6px !important;
  }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  .newsletter .newsletter-form .field,
  .newsletter .newsletter-form__button.field__button,
  .newsletter .newsletter-form__button .icon-arrow {
    transition: none !important;
  }

  .newsletter .newsletter-form__button.field__button:hover,
  .newsletter .newsletter-form__button.field__button:active {
    transform: translateY(-50%) !important;
  }

  .newsletter .newsletter-form__button:hover .icon-arrow {
    transform: none !important;
  }
}
/* ============================================================================
   THE-PERUVIAN · Pie de página
   ========================================================================= */

.footer {
  --tp-gold: #ae8622;
  --tp-gold-light: #d8ac45;
  --tp-gold-soft: rgba(174, 134, 34, 0.38);
  --tp-gold-faint: rgba(174, 134, 34, 0.10);
  --tp-dark: #0e0e11;
  --tp-text: #f2efe9;
  --tp-text-dim: rgba(242, 239, 233, 0.7);
  --tp-text-faint: rgba(242, 239, 233, 0.45);
}

/* ---------- Contenedor ---------- */

.footer {
  position: relative;
  background-color: var(--tp-dark) !important;
  background-image:
    radial-gradient(95% 60% at 50% 0%, rgba(174, 134, 34, 0.12), transparent 62%) !important;
  border-top: 0 !important;
  color: var(--tp-text-dim) !important;
}

/* Filete dorado superior */
.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tp-gold), transparent);
  z-index: 1;
}

.footer .footer__content-top {
  padding-top: clamp(44px, 5vw, 72px) !important;
  padding-bottom: clamp(28px, 3.5vw, 48px) !important;
}

.footer .footer__blocks-wrapper {
  row-gap: clamp(32px, 4vw, 48px);
  column-gap: clamp(24px, 3vw, 48px);
}

/* ---------- Logo ---------- */

.footer .footer-block__brand-info {
  margin: 0 !important;
}

.footer .footer-block__image-wrapper {
  max-width: 390px !important;
  margin: 0 !important;
}

.footer .footer-block__image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Encabezados de bloque ---------- */

.footer .footer-block__heading {
  position: relative;
  color: var(--tp-gold-light) !important;
  line-height: 1.3 !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700 !important;
  margin: 0 0 1.1em !important;
  padding-bottom: 0.7em;
}

.footer .footer-block__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--tp-gold);
}

/* ---------- Texto de los bloques ---------- */

.footer .footer-block__details-content {
  margin: 0 !important;
}

.footer .footer-block__details-content p {
  color: var(--tp-text-dim) !important;
  line-height: 1.65 !important;
  margin: 0 0 0.85em !important;
}

.footer .footer-block__details-content p:last-child {
  margin-bottom: 0 !important;
}

/* Párrafo vacío del editor, no ocupa espacio */
.footer .footer-block__details-content p:empty {
  display: none;
}

.footer .footer-block__details-content a {
  color: var(--tp-gold-light) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--tp-gold-soft);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer .footer-block__details-content a:hover {
  color: var(--tp-text) !important;
  border-bottom-color: var(--tp-gold-light);
}

/* ---------- Redes sociales ---------- */

.footer .footer-block--newsletter {
  margin-top: clamp(28px, 3.5vw, 44px) !important;
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid rgba(174, 134, 34, 0.22);
}

.footer .footer__list-social {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 0 !important;
  padding: 0 !important;
}

.footer .footer__list-social .list-social__item {
  margin: 0 !important;
}

.footer .footer__list-social .list-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0 !important;
  border: 1px solid var(--tp-gold-soft);
  border-radius: 50%;
  background: var(--tp-gold-faint);
  color: var(--tp-gold-light) !important;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.footer .footer__list-social .list-social__link:hover {
  background: var(--tp-gold);
  border-color: var(--tp-gold);
  color: var(--tp-dark) !important;
  transform: translateY(-2px);
}

.footer .footer__list-social .list-social__link:focus-visible {
  outline: 2px solid var(--tp-gold-light);
  outline-offset: 3px;
}

.footer .footer__list-social .list-social__link .svg-wrapper,
.footer .footer__list-social .list-social__link .icon {
  width: 21px;
  height: 21px;
}

/* ---------- Franja inferior ---------- */

.footer .footer__content-bottom {
  border-top: 1px solid rgba(174, 134, 34, 0.22) !important;
  padding-top: clamp(18px, 2.5vw, 26px) !important;
  padding-bottom: clamp(24px, 3vw, 36px) !important;
}

.footer .footer__content-bottom-wrapper {
  border: 0 !important;
}

/* Bloques de idioma y pago vacíos, se recuperan solos si se activan */
.footer .footer__column--info:empty,
.footer .footer__localization:empty,
.footer .footer__payment .list-payment:empty {
  display: none;
}

.footer .footer__copyright {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 18px;
  margin: 0 !important;
}

.footer .footer__copyright .copyright__content,
.footer .footer__copyright small {
  color: var(--tp-text-faint) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.footer .footer__copyright a {
  color: var(--tp-text-faint) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer .footer__copyright a:hover {
  color: var(--tp-gold-light) !important;
}

/* Enlaces legales, con separador propio */
.footer .footer__copyright .policies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 16px;
  margin: 0 !important;
  padding: 0 !important;
}

.footer .footer__copyright .policies li {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
}

.footer .footer__copyright .policies li + li::before {
  content: "·";
  position: absolute;
  left: -9px;
  color: var(--tp-gold-soft);
}

/* ---------- Móvil ---------- */

@media screen and (max-width: 600px) {
  .footer .footer__content-top {
    padding-top: 40px !important;
    padding-bottom: 24px !important;
  }

  .footer .footer-block {
    text-align: left;
  }

  .footer .footer-block__image-wrapper {
    max-width: 460px !important;
    margin: 0 auto !important;
  }

  .footer .footer-block__heading {
    margin-bottom: 0.9em !important;
  }

  .footer .footer__list-social {
    gap: 12px;
  }

  .footer .footer__list-social .list-social__link {
    width: 42px;
    height: 42px;
  }

  .footer .footer__copyright {
    gap: 6px 14px;
  }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  .footer .footer__list-social .list-social__link,
  .footer .footer-block__details-content a,
  .footer .footer__copyright a {
    transition: none !important;
  }

  .footer .footer__list-social .list-social__link:hover {
    transform: none !important;
  }
}
/* ============================================================================
   THE-PERUVIAN · Sección rich text "Descubre el Perú"
   Fondo #0e0e11 con acento dorado. Solo CSS, sin tocar el HTML.

   Dónde pegarlo:
   - Opción A (recomendada): Personalizar tema > esta sección Texto
     enriquecido > campo "CSS personalizado". Shopify limita el alcance a
     esta sección, así que ninguna otra de texto enriquecido se ve afectada.
   - Opción B: assets/base.css. En ese caso antepón el id de la sección a
     cada selector, porque .rich-text existe en otras plantillas.
   ========================================================================= */

.rich-text {
  --tp-gold: #ae8622;
  --tp-gold-light: #d8ac45;
  --tp-gold-soft: rgba(174, 134, 34, 0.38);
  --tp-dark: #0e0e11;
  --tp-cream: #fdfaf2;
  --tp-cream-dim: rgba(253, 250, 242, 0.78);
}

/* ---------- Contenedor ---------- */

.rich-text.rich-text--full-width {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--tp-dark) !important;
  background-image:
    radial-gradient(80% 120% at 0% 50%, rgba(174, 134, 34, 0.16), transparent 60%) !important;
  border-top: 1px solid rgba(174, 134, 34, 0.22);
  border-bottom: 1px solid rgba(174, 134, 34, 0.22);
}

/* El ajuste de la sección deja 9px arriba y abajo, muy justo para un
   bloque de introducción. El aire se recupera desde el wrapper. */
.rich-text .rich-text__wrapper {
  padding-top: clamp(40px, 5vw, 68px);
  padding-bottom: clamp(40px, 5vw, 68px);
}

/* ---------- Bloque de texto ---------- */

.rich-text .rich-text__blocks {
  position: relative;
  max-width: 68ch;
  margin: 0;
  padding-left: clamp(18px, 2.2vw, 28px);
}

/* Filete dorado vertical a la izquierda */
.rich-text .rich-text__blocks::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--tp-gold-light), var(--tp-gold) 45%, rgba(174, 134, 34, 0.15));
}

/* ---------- Titular ---------- */

.rich-text .rich-text__heading {
  color: var(--tp-gold-light) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em;
  margin: 0 0 0.6em !important;
}

/* La cursiva del editor entorpece la lectura en pantalla, se neutraliza */
.rich-text .rich-text__heading em,
.rich-text .rich-text__text em {
  font-style: normal;
}

.rich-text .rich-text__heading strong {
  font-weight: 700;
}

/* ---------- Párrafos ---------- */

.rich-text .rich-text__text {
  margin: 0 !important;
}

.rich-text .rich-text__text p {
  color: var(--tp-cream-dim) !important;
  line-height: 1.7 !important;
  margin: 0 0 0.85em !important;
}

.rich-text .rich-text__text p:last-child {
  margin-bottom: 0 !important;
}

.rich-text .rich-text__text p:empty {
  display: none;
}

/* Primer párrafo con algo más de presencia, hace de entradilla */
.rich-text .rich-text__text p:first-child {
  color: var(--tp-cream) !important;
}

.rich-text .rich-text__text a {
  color: var(--tp-gold-light) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--tp-gold-soft);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.rich-text .rich-text__text a:hover {
  color: var(--tp-cream) !important;
  border-bottom-color: var(--tp-gold-light);
}

/* ---------- Móvil ---------- */

@media screen and (max-width: 989px) {
  /* La regla del tema pone margin:0 en .page-width por debajo de 989px,
     así que el texto necesita su propio margen lateral. */
  .rich-text .rich-text__wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media screen and (max-width: 600px) {
  .rich-text .rich-text__wrapper {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .rich-text .rich-text__blocks {
    padding-left: 16px;
  }

  .rich-text .rich-text__blocks::before {
    width: 2px;
  }

  .rich-text.rich-text--full-width {
    background-image:
      radial-gradient(120% 80% at 0% 0%, rgba(174, 134, 34, 0.16), transparent 62%) !important;
  }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  .rich-text .rich-text__text a {
    transition: none !important;
  }
}


/* ============================================================================
   THE-PERUVIAN · Tarjetas de artículo (blog post grid / featured blog)
   Tarjeta clara con acentos dorados. Solo CSS, sin tocar el HTML.

   Dónde pegarlo:
   - Opción A (recomendada): Personalizar tema > sección Publicaciones del
     blog > campo "CSS personalizado".
   - Opción B: assets/base.css o assets/component-card.css.

   Alcance: todo cuelga de .blog__post.

   NOTAS DE ESTRUCTURA (por si se amplía este archivo):
   - .card__inner::before es el espaciador de proporción del tema. Si se
     sobrescribe, la tarjeta pierde altura y la imagen desaparece.
   - Dawn imprime .card__content dos veces, una dentro de .card__inner
     (sobre la imagen) y otra como hija directa de .card. El fondo se aplica
     solo a la exterior; si se pinta la interior, tapa la foto.
   ========================================================================= */

.blog__post {
  --tp-gold: #ae8622;
  --tp-gold-tint: rgba(174, 134, 34, 0.10);
  --tp-gold-tint-hover: rgba(174, 134, 34, 0.20);
  --tp-gold-deep: #7a5c11;
  --tp-gold-light: #d8ac45;
  --tp-gold-line: rgba(174, 134, 34, 0.45);
  --tp-gold-faint: rgba(174, 134, 34, 0.12);
  --tp-ink: #0e0e11;
  --tp-ink-soft: rgba(14, 14, 17, 0.74);
  --tp-ink-faint: rgba(14, 14, 17, 0.12);
  --tp-paper: #fdfaf2;
  --tp-ring: rgba(253, 250, 242, 0.85);
}

/* ---------- Tarjeta ---------- */

.blog__post .card.article-card {
  position: relative;
  background: var(--tp-paper) !important;
  color: var(--tp-ink) !important;
  border: none;
  border-radius: 14px !important;
  
  box-shadow: 0 6px 20px rgba(14, 14, 17, 0.10);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.blog__post .card-wrapper:hover .card.article-card,
.blog__post .card-wrapper:focus-within .card.article-card {
  transform: translateY(-4px);
  border-color: var(--tp-gold-line) !important;
  box-shadow: 0 16px 34px rgba(14, 14, 17, 0.18);
}

.blog__post .card.article-card .card__inner {
  border-radius: 14px 14px 0 0;
  
}

/* ---------- Imagen ---------- */
/* La cadena wrapper > media > img se fuerza a rellenar el marco de
   proporción, sin depender de las reglas del tema. */

.blog__post .card__inner .article-card__image-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.blog__post .card__inner .article-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  
}

.blog__post .card__inner .article-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.blog__post .card-wrapper:hover .card__inner .article-card__image img {
  transform: scale(1.06);
}

/* El bloque de texto duplicado que va sobre la imagen queda sin fondo */
.blog__post .card__inner .card__content {
  background: transparent !important;
}

/* ---------- Contenido ---------- */

.blog__post .card.article-card > .card__content {
  padding: clamp(16px, 2vw, 24px) !important;
  background: var(--tp-paper);
}

.blog__post .card__information {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

/* Fecha y autor por encima del titular.
   Para volver al orden del tema, borra este bloque de cuatro reglas. */
.blog__post .card__information .article-card__info { order: 1; }
.blog__post .card__information .card__heading { order: 2; }
.blog__post .card__information .article-card__excerpt { order: 3; }
.blog__post .card__information .article-card__footer { order: 4; }

/* ---------- Cápsulas (fecha, autor, comentarios) ---------- */
/* Fondo claro, borde dorado exterior y anillo crema interior. */

.blog__post .article-card__info > span,
.blog__post .article-card__footer span {
  display: inline-flex;
  align-items: center;
  padding: 0.4em 0.85em;
  border: 1px solid var(--tp-gold);
  border-radius: 999px;
  background: var(--tp-gold-tint);
  color: var(--tp-gold-deep) !important;
  line-height: 1.2;
  box-shadow: inset 0 0 0 2px var(--tp-ring);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.blog__post .card-wrapper:hover .article-card__info > span,
.blog__post .card-wrapper:hover .article-card__footer span {
  background: var(--tp-gold-tint-hover);
  border-color: var(--tp-gold-deep);
}

/* ---------- Fecha y autor ---------- */

.blog__post .article-card__info {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 0.8em !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}

.blog__post .article-card__info > span:first-child {
  white-space: nowrap;
}

/* Fuera el punto divisor del tema */
.blog__post .article-card__info .circle-divider::after {
  content: none !important;
  display: none !important;
}

/* ---------- Titular ---------- */

.blog__post .card__heading {
  margin: 0 0 0.45em !important;
  line-height: 1.25 !important;
}

.blog__post .card__heading a {
  color: var(--tp-ink) !important;
  text-decoration: none;
  transition: color 0.25s ease;
}

.blog__post .card-wrapper:hover .card__heading a {
  color: var(--tp-gold-deep) !important;
}

.blog__post .card__heading a:focus-visible {
  outline: 2px solid var(--tp-gold);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---------- Extracto ---------- */

.blog__post .article-card__excerpt {
  color: var(--tp-ink-soft) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  
  -webkit-box-orient: vertical;
  
}

/* ---------- Comentarios ---------- */

.blog__post .article-card__footer {
  margin-top: 1em !important;
  padding-top: 0.9em;
  border-top: 1px solid var(--tp-gold-faint);
  display: flex;
  align-items: center;
}

.blog__post .article-card__footer span {
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Globo de diálogo delante del contador */
.blog__post .article-card__footer span::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 11px;
  margin-right: 8px;
  flex: none;
  background: currentColor;
  -webkit-mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 2h20v13H8l-6 5V2z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 2h20v13H8l-6 5V2z'/%3E%3C/svg%3E");
}

.blog__post .card-wrapper:hover .article-card__footer span {
  transform: translateY(-1px);
}

/* ---------- Móvil ---------- */

@media screen and (max-width: 600px) {
  .blog__post .card.article-card {
    border-radius: 12px !important;
  }

  .blog__post .card.article-card .card__inner {
    border-radius: 12px 12px 0 0;
  }

  .blog__post .card.article-card > .card__content {
    padding: 16px !important;
  }

  .blog__post .article-card__info {
    gap: 8px;
  }

  .blog__post .article-card__info > span,
  .blog__post .article-card__footer span {
    padding: 0.35em 0.7em;
  }

  .blog__post .article-card__excerpt {
    -webkit-line-clamp: 2;
  }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  .blog__post .card.article-card,
  .blog__post .card__inner .article-card__image img,
  .blog__post .card__heading a,
  .blog__post .article-card__info > span,
  .blog__post .article-card__footer span {
    transition: none !important;
  }

  .blog__post .card-wrapper:hover .card.article-card,
  .blog__post .card-wrapper:focus-within .card.article-card,
  .blog__post .card-wrapper:hover .card__inner .article-card__image img,
  .blog__post .card-wrapper:hover .article-card__footer span {
    transform: none;
  }
}

/* ============================================================================
   THE-PERUVIAN · Tarjetas de artículo
   Sirve para los dos marcados que usa el tema:
   - .blog__post (cuadrícula de la home / featured blog)
   - .blog-articles__article (listado de la página de blog)
   Ambos contienen .article-card-wrapper, que es donde se ancla todo.

   Dónde pegarlo:
   - Opción A (recomendada): Personalizar tema > sección correspondiente >
     campo "CSS personalizado".
   - Opción B: assets/base.css o assets/component-card.css.
     Con esta opción se aplica a las dos secciones de una sola vez.

   NOTAS DE ESTRUCTURA (por si se amplía este archivo):
   - .card__inner::before es el espaciador de proporción del tema. Si se
     sobrescribe, la tarjeta pierde altura y la imagen desaparece.
   - Dawn imprime .card__content dos veces, una dentro de .card__inner
     (sobre la imagen) y otra como hija directa de .card. El fondo se aplica
     solo a la exterior; si se pinta la interior, tapa la foto.
   - Los estados de hover cuelgan de .article-card-wrapper, que es el mismo
     elemento que .card-wrapper. No usar selector de descendencia entre
     ambos, porque no hay anidamiento.
   ========================================================================= */

.article-card-wrapper {
  --tp-gold: #ae8622;
  --tp-gold-tint: rgba(174, 134, 34, 0.10);
  --tp-gold-tint-hover: rgba(174, 134, 34, 0.20);
  --tp-gold-deep: #7a5c11;
  --tp-gold-light: #d8ac45;
  --tp-gold-line: rgba(174, 134, 34, 0.45);
  --tp-gold-faint: rgba(174, 134, 34, 0.12);
  --tp-ink: #0e0e11;
  --tp-ink-soft: rgba(14, 14, 17, 0.74);
  --tp-ink-faint: rgba(14, 14, 17, 0.12);
  --tp-paper: #fdfaf2;
  --tp-ring: rgba(253, 250, 242, 0.85);
}

/* ---------- Tarjeta ---------- */

.article-card-wrapper .card.article-card {
  position: relative;
  background: var(--tp-paper) !important;
  color: var(--tp-ink) !important;
  border: none;
  border-radius: 14px !important;
  
  box-shadow: 0 6px 20px rgba(14, 14, 17, 0.10);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.article-card-wrapper:hover .card.article-card,
.article-card-wrapper:focus-within .card.article-card {
  transform: translateY(-4px);
  border-color: var(--tp-gold-line) !important;
  box-shadow: 0 16px 34px rgba(14, 14, 17, 0.18);
}

.article-card-wrapper .card.article-card .card__inner {
  border-radius: 5px 5px 0 0;
  
}

/* ---------- Imagen ---------- */
/* La cadena wrapper > media > img se fuerza a rellenar el marco de
   proporción, sin depender de las reglas del tema. */

.article-card-wrapper .card__inner .article-card__image-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.article-card-wrapper .card__inner .article-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  
}

.article-card-wrapper .card__inner .article-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.article-card-wrapper:hover .card__inner .article-card__image img {
  transform: scale(1.06);
}

/* El bloque de texto duplicado que va sobre la imagen queda sin fondo */
.article-card-wrapper .card__inner .card__content {
  background: transparent !important;
}

/* ---------- Contenido ---------- */

.article-card-wrapper .card.article-card > .card__content {
  padding: clamp(16px, 2vw, 24px) !important;
  background: var(--tp-paper);
}

.article-card-wrapper .card__information {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

/* Fecha y autor por encima del titular.
   Para volver al orden del tema, borra este bloque de cuatro reglas. */
.article-card-wrapper .card__information .article-card__info { order: 1; }
.article-card-wrapper .card__information .card__heading { order: 2; }
.article-card-wrapper .card__information .article-card__excerpt { order: 3; }
.article-card-wrapper .card__information .article-card__footer { order: 4; }

/* ---------- Cápsulas (fecha, autor, comentarios) ---------- */
/* Fondo claro, borde dorado exterior y anillo crema interior. */

.article-card-wrapper .article-card__info > span,
.article-card-wrapper .article-card__footer span {
  display: inline-flex;
  align-items: center;
  padding: 0.4em 0.85em;
  border: 1px solid var(--tp-gold);
  border-radius: 999px;
  background: var(--tp-gold-tint);
  color: var(--tp-gold-deep) !important;
  line-height: 1.2;
  box-shadow: inset 0 0 0 2px var(--tp-ring);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.article-card-wrapper:hover .article-card__info > span,
.article-card-wrapper:hover .article-card__footer span {
  background: var(--tp-gold-tint-hover);
  border-color: var(--tp-gold-deep);
}

/* ---------- Fecha y autor ---------- */

.article-card-wrapper .article-card__info {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 0.8em !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}

.article-card-wrapper .article-card__info > span:first-child {
  white-space: nowrap;
}

/* Fuera el punto divisor del tema */
.article-card-wrapper .article-card__info .circle-divider::after {
  content: none !important;
  display: none !important;
}

/* ---------- Titular ---------- */

.article-card-wrapper .card__heading {
  margin: 0 0 0.45em !important;
  line-height: 1.25 !important;
}

.article-card-wrapper .card__heading a {
  color: var(--tp-ink) !important;
  text-decoration: none;
  transition: color 0.25s ease;
}

.article-card-wrapper:hover .card__heading a {
  color: var(--tp-gold-deep) !important;
}

.article-card-wrapper .card__heading a:focus-visible {
  outline: 2px solid var(--tp-gold);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---------- Extracto ---------- */

.article-card-wrapper .article-card__excerpt {
  color: var(--tp-ink-soft) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  
}

/* ---------- Comentarios ---------- */

.article-card-wrapper .article-card__footer {
  margin-top: 1em !important;
  padding-top: 0.9em;
  border-top: 1px solid var(--tp-gold-faint);
  display: flex;
  align-items: center;
}

.article-card-wrapper .article-card__footer span {
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Globo de diálogo delante del contador */
.article-card-wrapper .article-card__footer span::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 11px;
  margin-right: 8px;
  flex: none;
  background: currentColor;
  -webkit-mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 2h20v13H8l-6 5V2z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 2h20v13H8l-6 5V2z'/%3E%3C/svg%3E");
}

.article-card-wrapper:hover .article-card__footer span {
  transform: translateY(-1px);
}

/* ---------- Móvil ---------- */

@media screen and (max-width: 600px) {
  .article-card-wrapper .card.article-card {
    border-radius: 12px !important;
  }

  .article-card-wrapper .card.article-card .card__inner {
    border-radius: 12px 12px 0 0;
  }

  .article-card-wrapper .card.article-card > .card__content {
    padding: 16px !important;
  }

  .article-card-wrapper .article-card__info {
    gap: 8px;
  }

  .article-card-wrapper .article-card__info > span,
  .article-card-wrapper .article-card__footer span {
    padding: 0.35em 0.7em;
  }

  .article-card-wrapper .article-card__excerpt {
    -webkit-line-clamp: 2;
  }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  .article-card-wrapper .card.article-card,
  .article-card-wrapper .card__inner .article-card__image img,
  .article-card-wrapper .card__heading a,
  .article-card-wrapper .article-card__info > span,
  .article-card-wrapper .article-card__footer span {
    transition: none !important;
  }

  .article-card-wrapper:hover .card.article-card,
  .article-card-wrapper:focus-within .card.article-card,
  .article-card-wrapper:hover .card__inner .article-card__image img,
  .article-card-wrapper:hover .article-card__footer span {
    transform: none;
  }
}
@media screen and (min-width: 750px) {
  .blog-articles {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

.share-button__button {
  font-family: var(--font-body-family);   /* corrige el Arial heredado */
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;

  display: inline-flex;
  align-items: center;
  gap: .8rem;                              /* sustituye al margin-right del icono */
  padding: .9rem 1.8rem;
  min-height: 0;                           /* el 4.4rem deja un área muerta enorme */

  color: rgb(var(--color-foreground));
  background-color: transparent;
  border: 1px solid rgba(var(--color-foreground), .18);
  border-radius: 100px;                    /* o var(--buttons-radius) si prefieres coherencia total */

  transition: background-color var(--duration-default) ease,
              border-color var(--duration-default) ease,
              color var(--duration-default) ease;
}

.share-button__button .icon-share { margin-right: 0; transition: transform var(--duration-default) ease; }

.share-button__button:hover {
  text-decoration: none;                   /* anula el underline del tema */
  background-color: rgba(var(--color-foreground), .04);
  border-color: rgba(var(--color-foreground), .45);
}
.share-button__button:hover .icon-share { transform: translateY(-1px); }

.share-button__button:focus-visible {
  outline: 2px solid rgba(var(--color-foreground), .6);
  outline-offset: 3px;
}


/* ============================================================================
   THE-PERUVIAN · Vídeos incrustados
   Hace responsivo cualquier iframe de YouTube pegado en un artículo o
   página, sin envoltorio ni CSS por pieza.

   Dónde pegarlo: al final de assets/base.css.
   A partir de ahí basta con pegar el código que da YouTube en Compartir >
   Insertar, tal cual, dentro del editor.
   ========================================================================= */

.rte iframe[src*="youtube.com"],
.rte iframe[src*="youtube-nocookie.com"],
.rte iframe[src*="youtu.be"],
.rte iframe[src*="player.vimeo.com"] {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 auto 1.5rem;
  border: 0;
  border-radius: 12px;
  background: #0e0e11;
}

/* Vídeos verticales (shorts y reels incrustados) */
.rte iframe[src*="/shorts/"] {
  max-width: 340px;
  aspect-ratio: 9 / 16;
}

/* ---------- Compatibilidad con los artículos ya publicados ----------
   Las piezas antiguas llevan un div .video-responsive con su propio
   <style>. Estas dos reglas lo neutralizan para que no reserve altura
   por duplicado. Se pueden borrar cuando no quede ninguna en el blog. */

.rte .video-responsive {
  position: static;
  aspect-ratio: auto;
  max-width: 560px;
  margin: 0 auto 1.5rem;
}

.rte .video-responsive iframe {
  position: static;
}

/* ==========================================================================
   THE-PERUVIAN · Bloque FAQ de artículo
   Componente transversal. El HTML solo necesita las clases tp-faq,
   tp-faq-q y tp-faq-a. Sin font-family, la tipografía se hereda del tema.
   ========================================================================== */

:root{
  --tp-gold:#ae8622;
  --tp-gold-soft:rgba(174,134,34,0.35);
  --tp-gold-faint:rgba(174,134,34,0.08);
  --tp-gold-hover:rgba(174,134,34,0.14);
  --tp-dark:#0e0e11;
  --tp-faq-radius:12px;
  --tp-faq-pad-x:18px;
  --tp-faq-pad-y:14px;
  --tp-faq-icon:1.15em;
  --tp-chakana:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill-rule='evenodd' d='M4 0h4v2h2v2h2v4h-2v2h-2v2H4v-2H2v-2H0V4h2V2h2zM5 5h2v2H5z'/%3E%3C/svg%3E");
}

/* Tarjeta */
.tp-faq{
  border:1px solid var(--tp-gold-soft);
  background:var(--tp-gold-faint);
  border-radius:var(--tp-faq-radius);
  margin:0 0 0.7em !important;
  overflow:hidden;
}
.tp-faq:last-of-type{margin-bottom:1.6em !important;}

/* Fila de la pregunta */
.tp-faq > summary{
  display:block;
  cursor:pointer;
  padding:var(--tp-faq-pad-y) calc(var(--tp-faq-pad-x) + 30px) var(--tp-faq-pad-y) var(--tp-faq-pad-x);
  list-style:none;
  position:relative;
  background:transparent;
  transition:background-color .18s ease;
}
.tp-faq > summary::-webkit-details-marker{display:none;}
.tp-faq > summary::marker{content:"";}
.tp-faq > summary:hover{background:var(--tp-gold-hover);}
.tp-faq > summary:focus-visible{
  outline:2px solid var(--tp-gold);
  outline-offset:-2px;
}

/* Indicador de apertura: chakana con hueco central.
   Fallback a + y − si el navegador no soporta mask-image. */
.tp-faq > summary::after{
  content:"+";
  position:absolute;
  right:var(--tp-faq-pad-x);
  top:50%;
  transform:translateY(-50%);
  color:var(--tp-gold);
  font-weight:800;
  line-height:1;
}
.tp-faq[open] > summary::after{content:"\2212";}

@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .tp-faq > summary::after{
    content:"";
    display:block;
    width:var(--tp-faq-icon);
    height:var(--tp-faq-icon);
    background-color:var(--tp-gold);
    -webkit-mask-image:var(--tp-chakana);
    mask-image:var(--tp-chakana);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;
    transform-origin:center;
    transition:transform .22s ease;
  }
  .tp-faq[open] > summary::after{
    content:"";
    transform:translateY(-50%) rotate(45deg);
  }
}

/* Respuesta */
.tp-faq .tp-faq-a{
  padding:0 var(--tp-faq-pad-x) 16px;
}
.tp-faq .tp-faq-a p{
  margin:0 !important;
  line-height:1.6 !important;
}
.tp-faq .tp-faq-a p + p{margin-top:0.7em !important;}

/* Móvil */
@media (max-width:600px){
  :root{--tp-faq-pad-x:15px;--tp-faq-pad-y:13px;}
}

/* Sin animación si el usuario la ha desactivado */
@media (prefers-reduced-motion:reduce){
  .tp-faq > summary{transition:none;}
  .tp-faq > summary::after{transition:none;}
}

/* Impresión: el contenido plegado no se imprime, así que se despliega todo */
@media print{
  .tp-faq{break-inside:avoid;}
  .tp-faq > summary::after{display:none;}
}

h3 {
  font-size: calc(var(--font-heading-scale) * 1.7rem); /* ~20px, entre el h2 y el texto */
  line-height: 1.35;
  margin: 2em 0 0.6em;
  padding-left: 0.6em;
  border-left: 3px solid #ae8622;
}
/* THE-PERUVIAN. Componente de tabla de datos. Va en la hoja global del tema,
   no en el editor del artículo. Se entrega una sola vez. */

:root {
  --tp-gold: #ae8622;
  --tp-gold-soft: rgba(174, 134, 34, 0.35);
  --tp-gold-faint: rgba(174, 134, 34, 0.06);
  --tp-table-bg: #fdfaf2;
  --tp-table-radius: 12px;
}

.tp-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--tp-gold-soft);
  border-radius: var(--tp-table-radius);
  margin: 1.75rem 0 0.75rem;
  -webkit-overflow-scrolling: touch;
}

.tp-table-wrap:focus-visible {
  outline: 2px solid var(--tp-gold);
  outline-offset: 2px;
}

.tp-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.tp-table td {
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.05rem);
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: top;
  word-break: normal;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--tp-gold-soft);
}

.tp-table thead th {
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: bottom;
  color: var(--tp-gold);
  background: var(--tp-table-bg);
  border-bottom: 2px solid var(--tp-gold-soft);
  white-space: nowrap;
}

.tp-table tbody th {
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: top;
  background: var(--tp-table-bg);
  border-bottom: 1px solid var(--tp-gold-soft);
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 11rem;
}

.tp-table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}

.tp-table tbody tr:nth-child(even) td {
  background: var(--tp-gold-faint);
}

.tp-table tbody tr:last-child td,
.tp-table tbody tr:last-child th {
  border-bottom: 0;
}

.tp-caption {
  text-align: left;
  padding: 0.9rem 0.9rem 0.4rem;
  font-size: clamp(0.9rem, 0.86rem + 0.18vw, 0.95rem);
  color: var(--tp-gold);
}

.tp-source {
  font-size: clamp(0.9rem, 0.86rem + 0.18vw, 0.95rem);
  opacity: 0.75;
  margin-top: 0;
}

@media (max-width: 600px) {
  .tp-table td,
  .tp-table thead th,
  .tp-table tbody th {
    padding: 0.6rem 0.7rem;
  }

  .tp-table tbody th {
    min-width: 9.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tp-table-wrap {
    scroll-behavior: auto;
  }
}
/* ================ COMENTARIOS PUBLICADOS ================ */
.article-template__comments{ margin-bottom:34px !important; }

/* título "N comentarios" */
h2[id^="Comments-"]{
  font-family:"Nunito Sans", Raleway, sans-serif !important;
  font-size:clamp(21px, 5vw, 27px) !important;
  font-weight:800 !important;
  color:var(--tp-ink) !important;
  letter-spacing:-0.2px !important;
  border:0 !important;
  margin:0 0 22px !important;
  padding:0 0 12px !important;
  position:relative !important;
}
h2[id^="Comments-"]::after{
  content:""; position:absolute; left:0; bottom:0;
  width:52px; height:3px; border-radius:99px;
  background:linear-gradient(90deg, var(--tp-gold) 0%, #E0C063 100%);
}

/* tarjeta de comentario */
.article-template__comments-comment{
  position:relative !important;
  background:#fff !important;
  border:1px solid rgba(174,134,34,.16) !important;
  border-left:3px solid var(--tp-gold) !important;
  border-radius:14px !important;
  padding:clamp(18px, 4.5vw, 26px) clamp(18px, 4.5vw, 30px) !important;
  margin:0 0 14px !important;
  box-shadow:0 4px 16px rgba(18,18,18,.045) !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  transition:box-shadow .25s ease, transform .2s ease, border-color .25s ease !important;
}
@media (hover:hover){
  .article-template__comments-comment:hover{
    box-shadow:0 8px 24px rgba(174,134,34,.13) !important;
    border-color:rgba(174,134,34,.3) !important;
    transform:translateY(-2px) !important;
  }
}

/* comilla decorativa */
.article-template__comments-comment::before{
  content:"\201C";
  position:absolute;
  top:6px; right:16px;
  font-family:Georgia, "Times New Roman", serif;
  font-size:64px;
  line-height:1;
  color:var(--tp-gold);
  opacity:.13;
  pointer-events:none;
}

/* texto del comentario */
.article-template__comments-comment p{
  font-family:Raleway, sans-serif !important;
  font-size:clamp(15.5px, 4vw, 17px) !important;
  line-height:1.68 !important;
  color:rgba(18,18,18,.82) !important;
  margin:0 0 16px !important;
  position:relative;
  z-index:1;
}

/* pie: autor + fecha (apilado en móvil, en línea desde tablet) */
.article-template__comments-comment footer{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:4px !important;
  text-align:left !important;
  margin:0 !important;
  padding-top:12px !important;
  border-top:1px solid rgba(18,18,18,.07) !important;
}
.article-template__comments-comment footer span:first-child{
  font-family:Raleway, sans-serif !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.9px !important;
  text-transform:uppercase !important;
  color:var(--tp-gold-dark) !important;
}
.article-template__comments-comment footer span:first-child::after{ display:none !important; }
.article-template__comments-comment footer time,
.article-template__comments-comment footer span:last-child{
  font-family:Raleway, sans-serif !important;
  font-size:11.5px !important;
  letter-spacing:.5px !important;
  color:rgba(18,18,18,.45) !important;
  text-transform:none !important;
}
.article-template__comments-comment footer span:first-child + span::before{
  content:"·";
  margin-right:10px;
  color:rgba(174,134,34,.6);
  font-weight:700;
  display:none;
}
@media (min-width:750px){
  .article-template__comments-comment footer{
    flex-direction:row !important;
    align-items:center !important;
    gap:6px 10px !important;
  }
  .article-template__comments-comment footer span:first-child + span::before{ display:inline !important; }
}

@media (prefers-reduced-motion:reduce){
  .article-template__comments-comment{ transition:none !important; }
}
/* ============================================================
   THE-PERUVIAN · Estilos artículo (H1, compartir, comentarios)
   ============================================================ */
:root{
  --tp-gold:#AE8622;
  --tp-gold-dark:#8F6D16;
  --tp-ink:#121212;
  --tp-cream:#FCFAF6;
}

/* ============================ H1 ============================ */
article h1, main h1{
  font-family:"Nunito Sans", Raleway, sans-serif !important;
  font-size:clamp(30px, 7.2vw, 52px) !important;
  font-weight:800 !important;
  color:var(--tp-ink) !important;
  line-height:1.15 !important;
  letter-spacing:-0.4px !important;
  text-align:center !important;
  /*text-wrap:balance;
  hyphens:auto;
  overflow-wrap:break-word;*/
  max-width:20ch !important;
  margin:40px auto !important;
  padding:0 4vw 0.42em !important;
  position:relative !important;
  box-sizing:border-box !important;
}
article h1 .tp-hl, main h1 .tp-hl{ color:var(--tp-gold); white-space:nowrap; }
/*article h1::after, main h1::after{
  content:""; position:absolute; left:50%; bottom:0;
  transform:translateX(-50%);
  width:clamp(56px, 14vw, 88px); height:4px; border-radius:99px;
  background:linear-gradient(90deg, var(--tp-gold) 0%, #E0C063 100%);
}*/
@media (min-width:750px){
  article h1, main h1{
    max-width:26ch !important;
    padding-bottom:0.38em !important;
    letter-spacing:-0.6px !important;
  }
}

/* ===================== BOTÓN COMPARTIR ====================== */
.share-button{ display:flex !important; justify-content:center !important; }

.share-button__button{
  font-family:Raleway, sans-serif !important;
  font-size:clamp(12px, 3.2vw, 13.5px) !important;
  font-weight:700 !important;
  letter-spacing:1.1px !important;
  text-transform:uppercase !important;
  color:#fff !important;
  background:linear-gradient(135deg, var(--tp-gold) 0%, var(--tp-gold-dark) 100%) !important;
  border:1.5px solid transparent !important;
  border-radius:99px !important;
  min-height:46px !important;
  padding:12px 26px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  cursor:pointer !important;
  box-shadow:0 4px 12px rgba(174,134,34,.22) !important;
  transition:background .25s ease, color .25s ease, border-color .25s ease,
             box-shadow .25s ease, transform .15s ease !important;
  -webkit-tap-highlight-color:transparent;
}
.share-button__button .icon-share{ width:15px; height:15px; transition:transform .25s ease; }

@media (hover:hover){
  .share-button__button:hover{
    background:#fff !important;
    background-image:none !important;
    border-color:var(--tp-gold) !important;
    color:var(--tp-gold-dark) !important;
    box-shadow:0 6px 16px rgba(174,134,34,.20) !important;
    transform:translateY(-1px) !important;
  }
  .share-button__button:hover .icon-share{ transform:translateY(-2px); }
}
.share-button__button:active{
  transform:translateY(0) scale(.98) !important;
  box-shadow:0 2px 6px rgba(174,134,34,.20) !important;
}
.share-button__button:focus-visible{
  outline:2px solid var(--tp-gold) !important;
  outline-offset:3px !important;
}

/* ================ FORMULARIO DE COMENTARIOS ================= */
.comment-form{
  background:var(--tp-cream) !important;
  border:1px solid rgba(174,134,34,.18) !important;
  border-radius:18px !important;
  padding:clamp(20px, 5vw, 40px) !important;
  box-shadow:0 8px 28px rgba(18,18,18,.05) !important;
  box-sizing:border-box !important;
}

.comment-form h2{
  font-family:"Nunito Sans", Raleway, sans-serif !important;
  font-size:clamp(21px, 5vw, 27px) !important;
  font-weight:800 !important;
  color:var(--tp-ink) !important;
  letter-spacing:-0.2px !important;
  margin:0 0 22px !important;
  padding:0 0 12px !important;
  border:0 !important;
  position:relative !important;
}
.comment-form h2::after{
  content:""; position:absolute; left:0; bottom:0;
  width:52px; height:3px; border-radius:99px;
  background:linear-gradient(90deg, var(--tp-gold) 0%, #E0C063 100%);
}

/* rejilla: 1 columna en móvil, 2 desde tablet */
.comment-form .article-template__comment-fields{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
  margin-bottom:14px !important;
}
@media (min-width:750px){
  .comment-form .article-template__comment-fields{
    grid-template-columns:1fr 1fr !important;
    gap:18px !important;
  }
}
.comment-form .field{ margin:0 !important; }

/* campos */
.comment-form .field__input{
  font-family:Raleway, sans-serif !important;
  font-size:16px !important;          /* evita el zoom automático en iOS */
  color:var(--tp-ink) !important;
  background:#fff !important;
  border:1.5px solid rgba(18,18,18,.12) !important;
  border-radius:12px !important;
  padding:24px 16px 10px !important;
  width:100% !important;
  min-height:58px !important;
  box-shadow:none !important;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
  box-sizing:border-box !important;
  -webkit-appearance:none;
}
.comment-form textarea.field__input{
  min-height:140px !important;
  resize:vertical !important;
  line-height:1.6 !important;
}
.comment-form .field__input:hover{ border-color:rgba(174,134,34,.45) !important; }
.comment-form .field__input:focus{
  border-color:var(--tp-gold) !important;
  box-shadow:0 0 0 3px rgba(174,134,34,.15) !important;
  outline:none !important;
}
.comment-form .field:after,
.comment-form .field__input:after{ display:none !important; }

/* etiquetas flotantes */
.comment-form .field__label{
  font-family:Raleway, sans-serif !important;
  font-size:16px !important;
  color:rgba(18,18,18,.55) !important;
  top:17px !important;
  left:17px !important;
  letter-spacing:.2px !important;
  transition:top .18s ease, font-size .18s ease, color .18s ease !important;
  pointer-events:none;
}
.comment-form .field__input:focus ~ .field__label,
.comment-form .field__input:not(:placeholder-shown) ~ .field__label{
  top:7px !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  letter-spacing:.6px !important;
  text-transform:uppercase !important;
  color:var(--tp-gold-dark) !important;
}

/* botón enviar */
.comment-form .button,
.comment-form input[type="submit"]{
  font-family:Raleway, sans-serif !important;
  font-size:clamp(12px, 3.2vw, 13.5px) !important;
  font-weight:700 !important;
  letter-spacing:1.1px !important;
  text-transform:uppercase !important;
  color:#fff !important;
  background:linear-gradient(135deg, var(--tp-gold) 0%, var(--tp-gold-dark) 100%) !important;
  border:1.5px solid transparent !important;
  border-radius:99px !important;
  min-height:52px !important;
  padding:14px 34px !important;
  width:100% !important;               /* ancho completo en móvil */
  margin-top:22px !important;
  cursor:pointer !important;
  box-shadow:0 4px 12px rgba(174,134,34,.22) !important;
  transition:background .25s ease, color .25s ease, border-color .25s ease,
             box-shadow .25s ease, transform .15s ease !important;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
}
@media (min-width:750px){
  .comment-form .button,
  .comment-form input[type="submit"]{ width:auto !important; min-width:240px !important; }
}
@media (hover:hover){
  .comment-form .button:hover,
  .comment-form input[type="submit"]:hover{
    background:#fff !important;
    background-image:none !important;
    border-color:var(--tp-gold) !important;
    color:var(--tp-gold-dark) !important;
    box-shadow:0 6px 16px rgba(174,134,34,.20) !important;
    transform:translateY(-1px) !important;
  }
}
.comment-form .button:active,
.comment-form input[type="submit"]:active{ transform:translateY(0) scale(.99) !important; }
.comment-form .button:focus-visible,
.comment-form input[type="submit"]:focus-visible{
  outline:2px solid var(--tp-gold) !important;
  outline-offset:3px !important;
}

/* accesibilidad: menos movimiento */
@media (prefers-reduced-motion:reduce){
  .share-button__button, .share-button__button .icon-share,
  .comment-form .field__input, .comment-form .field__label,
  .comment-form .button{ transition:none !important; }
}
.tp-article{
  --tp-gold:#ae8622;
  --tp-gold-soft:rgba(174,134,34,0.35);
  --tp-gold-faint:rgba(174,134,34,0.08);
  --tp-gold-hover:rgba(174,134,34,0.18);
  --tp-ink:#0e0e11;
}

.tp-article .tp-indice{display:flex;flex-wrap:wrap;gap:6px;margin:1.2em 0 1.6em;padding:0;list-style:none;}
.tp-article .tp-letra-link{display:inline-block;min-width:2em;padding:5px 9px;text-align:center;text-decoration:none;font-weight:700;color:var(--tp-gold) !important;border:1px solid var(--tp-gold-soft);border-radius:8px;background:var(--tp-gold-faint);transition:background 0.2s ease,color 0.2s ease;}
.tp-article .tp-letra-link:hover{background:var(--tp-gold);color:#fff !important;}

.tp-article .tp-tabla-wrap{border:1px solid var(--tp-gold-soft);border-radius:14px;margin:0 0 1.6em;}
.tp-article .tp-tabla{width:100%;border-collapse:separate;border-spacing:0;margin:0;}
.tp-article .tp-tabla caption{caption-side:top;text-align:left;background:var(--tp-ink);color:#fff !important;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;padding:14px 18px;border-radius:13px 13px 0 0;}
.tp-article .tp-tabla .tp-col{position:sticky;top:0;z-index:2;background:var(--tp-gold);color:#fff !important;text-align:left;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:11px 18px;}
.tp-article .tp-tabla .tp-col:nth-child(1){width:26%;}
.tp-article .tp-tabla .tp-col:nth-child(2){width:26%;}
.tp-article .tp-tabla tbody td{padding:12px 18px;border-top:1px solid var(--tp-gold-soft);vertical-align:top;text-align:left;}
.tp-article .tp-tabla tbody tr:nth-child(odd){background:var(--tp-gold-faint);}
.tp-article .tp-tabla tbody tr:hover{background:var(--tp-gold-hover);}
.tp-article .tp-tabla .tp-term{font-weight:700;color:var(--tp-gold) !important;}
.tp-article .tp-tabla tbody td:last-child{font-style:italic;opacity:0.85;}

.tp-article .tp-fila-letra td{background:var(--tp-ink);color:var(--tp-gold) !important;font-weight:800;letter-spacing:0.14em;padding:7px 18px;border-top:none;}
.tp-article .tp-fila-letra:hover td{background:var(--tp-ink);}
.tp-article .tp-tabla tbody tr.tp-fila-letra{background:var(--tp-ink);}
.tp-article .tp-tabla tbody tr:last-child td{border-bottom:none;}

.tp-article .tp-nota{border-left:4px solid var(--tp-gold);background:var(--tp-gold-faint);padding:14px 18px;border-radius:0 10px 10px 0;margin:1.6em 0;}
.tp-article .tp-nota p{margin:0;}

@media (max-width:600px){
  .tp-article .tp-tabla-wrap{border:none;}
  .tp-article .tp-tabla caption{border-radius:12px;margin-bottom:14px;}
  .tp-article .tp-tabla thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  .tp-article .tp-tabla tbody tr{display:block;border:1px solid var(--tp-gold-soft);border-radius:12px;background:var(--tp-gold-faint);padding:12px 14px;margin:0 0 12px;}
  .tp-article .tp-tabla tbody tr:nth-child(odd){background:var(--tp-gold-faint);}
  .tp-article .tp-tabla tbody tr:hover{background:var(--tp-gold-faint);}
  .tp-article .tp-tabla tbody td{display:block;border:none;padding:3px 0;}
  .tp-article .tp-tabla .tp-term{padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid var(--tp-gold-soft);}
  .tp-article .tp-tabla tbody td:not(.tp-term)::before{content:attr(data-label);display:block;color:var(--tp-gold) !important;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;opacity:0.8;}
  .tp-article .tp-tabla tbody tr.tp-fila-letra{border:none;background:var(--tp-ink);padding:0;border-radius:8px;}
  .tp-article .tp-fila-letra td{padding:6px 14px;}
  .tp-article .tp-fila-letra td::before{content:none;}
  .tp-article .tp-indice{gap:5px;}
}

@media (prefers-reduced-motion:reduce){
  .tp-article .tp-letra-link{transition:none;}
}
<style>
.tp-article{
  --tp-gold:#ae8622;
  --tp-gold-soft:rgba(174,134,34,0.35);
  --tp-gold-faint:rgba(174,134,34,0.08);
  --tp-ink:#0e0e11;
}
.tp-article .tp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:1.4em 0 0.6em;}
.tp-article .tp-card{border:1px solid var(--tp-gold-soft);background:var(--tp-gold-faint);border-radius:14px;padding:20px 20px 18px;transition:transform 0.25s ease,box-shadow 0.25s ease;}
.tp-article .tp-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(14,14,17,0.10);}
.tp-article .tp-card:last-child:nth-child(odd){grid-column:1 / -1;}
.tp-article .tp-zona{display:inline-block;background:var(--tp-gold);color:#fff !important;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:10px;}
.tp-article .tp-rasgos{list-style:none;margin:0 0 1em;padding:0;}
.tp-article .tp-rasgos li{position:relative;padding-left:18px;margin:0 0 0.45em;}
.tp-article .tp-rasgos li::before{content:"";position:absolute;left:0;top:0.55em;width:7px;height:7px;background:var(--tp-gold);border-radius:50%;}
.tp-article .tp-rasgos li b{font-weight:700;}
.tp-article .tp-ir{display:inline-block;font-weight:700;color:var(--tp-gold) !important;text-decoration:none;}
.tp-article .tp-ir::after{content:" \203A";font-weight:800;}
.tp-article .tp-ir:hover{text-decoration:underline;}

.tp-article .tp-dato{border-left:4px solid var(--tp-gold);background:var(--tp-gold-faint);padding:14px 18px;border-radius:0 10px 10px 0;margin:1.4em 0;}
.tp-article .tp-dato p{margin:0;}

.tp-article .tp-faq{border:1px solid var(--tp-gold-soft);background:var(--tp-gold-faint);border-radius:12px;margin:0 0 0.7em;}
.tp-article .tp-faq summary{cursor:pointer;padding:14px 44px 14px 18px;list-style:none;position:relative;}
.tp-article .tp-faq summary::-webkit-details-marker{display:none;}
.tp-article .tp-faq summary::marker{content:"";}
.tp-article .tp-faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--tp-gold);font-weight:800;}
.tp-article .tp-faq[open] summary::after{content:"\2212";}
.tp-article .tp-faq-a{padding:0 18px 16px;}
.tp-article .tp-faq-a p{margin:0;}

.tp-article .tp-fuentes{margin-top:2em;padding-top:1em;border-top:1px solid var(--tp-gold-soft);opacity:0.85;}
.tp-article .tp-fuentes b{color:var(--tp-gold) !important;}

@media (max-width:600px){
  .tp-article .tp-grid{grid-template-columns:1fr;gap:14px;}
  .tp-article .tp-card{padding:16px 16px 14px;}
}
@media (prefers-reduced-motion:reduce){
  .tp-article .tp-card{transition:none;}
  .tp-article .tp-card:hover{transform:none;}
}
</style>
/* Palabra del diccionario resaltada dentro de la narrativa */
.tp-ej {
  color: var(--tp-gold) !important;
  font-weight: 700;
}

/* Cierre de serie de los diccionarios de peruanismos */
.tp-serie {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tp-gold-soft);
}
.tp-article{
  --tp-gold:#ae8622;
  --tp-dark:#0e0e11;
  --tp-cream:#f4efe4;
  --tp-gold-soft:rgba(174,134,34,0.35);
  --tp-gold-faint:rgba(174,134,34,0.08);
  --tp-gold-line:rgba(174,134,34,0.25);
}
.tp-article .tp-h1{line-height:1.15;margin:0 0 0.6em;}
.tp-article .tp-lead{line-height:1.6;}
.tp-article .tp-h2{line-height:1.25;margin:1.8em 0 0.6em;padding-bottom:0.35em;border-bottom:2px solid var(--tp-gold);}
.tp-article .tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.4em 0;}
.tp-article .tp-card{border:1px solid var(--tp-gold-soft);background:var(--tp-gold-faint);border-radius:12px;padding:18px 20px;transition:border-color 0.2s ease;}
.tp-article .tp-card:hover{border-color:var(--tp-gold);}
.tp-article .tp-card-star{grid-column:1 / -1;border-color:var(--tp-gold);}
.tp-article .tp-card-tag{display:block;letter-spacing:0.08em;text-transform:uppercase;font-weight:700;color:var(--tp-gold) !important;margin:0 0 0.4em;}
.tp-article .tp-card-title{margin:0 0 0.35em;}
.tp-article .tp-card p{margin:0;line-height:1.55;}
.tp-article .tp-dark{background:var(--tp-dark);color:var(--tp-cream);border-radius:14px;padding:24px 26px;margin:1.6em 0;}
.tp-article .tp-dark-title{color:var(--tp-gold) !important;margin:0 0 0.6em;}
.tp-article .tp-stat{display:flex;gap:16px;align-items:baseline;padding:0.6em 0;border-top:1px solid var(--tp-gold-line);}
.tp-article .tp-stat:first-of-type{border-top:none;}
.tp-article .tp-stat-num{color:var(--tp-gold) !important;font-weight:800;line-height:1.1;min-width:3.4em;}
.tp-article .tp-stat p{margin:0;color:var(--tp-cream) !important;line-height:1.5;}
.tp-article .tp-dispute{border-left:4px solid var(--tp-gold);background:var(--tp-gold-faint);border-radius:0 12px 12px 0;padding:16px 20px;margin:1.4em 0;}
.tp-article .tp-dispute-title{color:var(--tp-gold) !important;letter-spacing:0.06em;text-transform:uppercase;margin:0 0 0.5em;}
.tp-article .tp-dispute p{margin:0 0 0.7em;}
.tp-article .tp-dispute p:last-child{margin-bottom:0;}
.tp-article .tp-faq{border:1px solid var(--tp-gold-soft);background:var(--tp-gold-faint);border-radius:12px;margin:0 0 0.7em;}
.tp-article .tp-faq summary{cursor:pointer;font-weight:700;padding:14px 44px 14px 18px;list-style:none;position:relative;}
.tp-article .tp-faq summary::-webkit-details-marker{display:none;}
.tp-article .tp-faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--tp-gold);font-weight:800;}
.tp-article .tp-faq[open] summary::after{content:"\2212";}
.tp-article .tp-faq-a{padding:0 18px 16px;}
.tp-article .tp-faq-a p{margin:0;}
.tp-article .tp-sources{border-top:1px solid var(--tp-gold-soft);margin-top:2.2em;padding-top:1.1em;}
.tp-article .tp-sources-title{color:var(--tp-gold) !important;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;margin:0 0 0.4em;}
.tp-article .tp-sources ul{margin:0;padding-left:1.1em;}
.tp-article .tp-sources li{margin:0 0 0.35em;}
@media (max-width:600px){
  .tp-article .tp-grid{grid-template-columns:1fr;}
  .tp-article .tp-dark{padding:20px 18px;}
  .tp-article .tp-stat{flex-direction:column;gap:2px;}
}
@media (prefers-reduced-motion:reduce){
  .tp-article *,.tp-article *::before,.tp-article *::after{animation:none !important;transition:none !important;}
}
/* ============================================================
   THE-PERUVIAN — Breadcrumbs (tp-migas), formato pill
   Parche de estilo. El componente tp-migas no tenía reglas propias
   en el tema (los enlaces salían con el azul y el subrayado por
   defecto del navegador), así que este CSS se entrega una sola vez,
   aparte del HTML, tal y como marca el criterio del proyecto para
   la primera puesta en marcha de un componente.

   Funciona directamente sobre el marcado que ya genera el snippet,
   sin tocar el HTML ni añadir JavaScript:
     <nav class="tp-migas"><a href="/">Inicio</a> / <span>Actual</span></nav>

   El truco es "font-size: 0" en el contenedor: el "/" suelto entre
   los enlaces hereda ese tamaño y desaparece visualmente, mientras
   que cada enlace y el span recuperan su propio font-size y quedan
   como píldoras independientes.
   ============================================================ */

.tp-migas {
  margin: 0 0 2.8rem;
  font-size: 0;
  line-height: 0;
}

.tp-migas a,
.tp-migas span {
  display: inline-flex;
  align-items: center;
  font-family: 'Raleway', sans-serif;
  font-size: 1.3rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0.2em 0.4em 0.2em 0;
  padding: 0.55em 1.3em;
  border-radius: 999px;
  white-space: nowrap;
}

/* Tramos intermedios: pill suave en el color de resalte */
.tp-migas a {
  background-color: rgba(174, 134, 34, 0.12);
  color: #ae8622;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.tp-migas a:hover,
.tp-migas a:focus-visible {
  background-color: #ae8622;
  color: #fff;
}

/* Página actual: pill sólida en el color de resalte */
.tp-migas span {
  background-color: #ae8622;
  color: #fff;
  font-weight: 700;
  margin-right: 0;
}

@media (max-width: 749px) {
  .tp-migas a,
  .tp-migas span {
    font-size: 1.2rem;
    padding: 0.5em 1.1em;
  }
}
/* ============================================================
   Tabla de datos de artículo, THE-PERUVIAN
   Componente nuevo. Nada del tema apunta hoy a .tp-table
   ni a .tp-table-wrap, así que estas reglas no pisan nada.
   Pegar al final de base.css.
   ============================================================ */

.tp-table-wrap {
  margin: 1.5rem 0;
  max-width: 100%;
  overflow-x: auto;
}

.tp-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.tp-table .tp-caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 0.6rem;
}

.tp-table .tp-col {
  text-align: left;
  vertical-align: bottom;
  padding: 0.7rem 0.8rem;
  background: #0e0e11;
  color: #fdfaf2 !important;
}

.tp-table .tp-fila {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 0.8rem;
  color: #ae8622 !important;
  border-bottom: 1px solid rgba(174, 134, 34, 0.18);
}

.tp-table td {
  vertical-align: top;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid rgba(174, 134, 34, 0.18);
}

.tp-table tbody tr:nth-child(even) {
  background: rgba(174, 134, 34, 0.06);
}

/* Móvil, cada fila pasa a tarjeta y la cabecera de columna
   se imprime delante de cada valor desde data-label */
@media screen and (max-width: 600px) {

  .tp-table-wrap {
    overflow-x: visible;
  }

  .tp-table,
  .tp-table tbody,
  .tp-table tr,
  .tp-table td,
  .tp-table .tp-fila {
    display: block;
    width: 100%;
  }

  .tp-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tp-table tr {
    margin: 0 0 0.9rem;
    padding: 0.2rem 0;
    border: 1px solid rgba(174, 134, 34, 0.35);
    border-radius: 12px;
    background: rgba(174, 134, 34, 0.04);
  }

  .tp-table tbody tr:nth-child(even) {
    background: rgba(174, 134, 34, 0.04);
  }

  .tp-table .tp-fila {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid rgba(174, 134, 34, 0.35);
  }

  .tp-table td {
    padding: 0.5rem 0.9rem;
    border: 0;
  }

  .tp-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    color: #ae8622;
    font-weight: 600;
  }
}
/* ==========================================================================
   THE-PERUVIAN · Componente de tablas de datos
   Parche para base.css. Se pega una sola vez, al final del archivo.
   Todos los selectores van scopeados bajo .tp-tabla para que no toquen
   ninguna otra tabla del tema.
   ========================================================================== */

:root {
  --tp-tabla-radius: 12px;
  --tp-tabla-pad-x: 0.85rem;
  --tp-tabla-pad-y: 0.7rem;
  --tp-tabla-borde: rgba(174, 134, 34, 0.26);
  --tp-tabla-borde-suave: rgba(174, 134, 34, 0.14);
  --tp-tabla-cabecera: rgba(174, 134, 34, 0.12);
  --tp-tabla-zebra: rgba(174, 134, 34, 0.05);
  --tp-tabla-fondo: #fdfaf2;
  --tp-tabla-etiqueta: #7a5c11;
}

/* --------------------------------------------------------------------------
   1. Contenedores
   -------------------------------------------------------------------------- */

.tp-tabla-wrap,
.tp-tabla-scroll {
  margin: 2rem 0;
  max-width: 100%;
}

.tp-tabla-scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--tp-tabla-borde);
  border-radius: var(--tp-tabla-radius);
  scrollbar-width: thin;
  scrollbar-color: var(--tp-tabla-borde) transparent;
}

.tp-tabla-scroll::-webkit-scrollbar {
  height: 8px;
}

.tp-tabla-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.tp-tabla-scroll::-webkit-scrollbar-thumb {
  background: var(--tp-tabla-borde);
  border-radius: 4px;
}

.tp-tabla-scroll:focus-visible {
  outline: 2px solid var(--tp-gold, #ae8622);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   2. Tabla base (escritorio y tablet)
   -------------------------------------------------------------------------- */

.tp-tabla {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  line-height: 1.5;
}

.tp-tabla-wrap .tp-tabla {
  border: 1px solid var(--tp-tabla-borde);
  border-radius: var(--tp-tabla-radius);
  overflow: hidden;
}

/* Fuerza el scroll en lugar de comprimir las columnas hasta lo ilegible.
   En rem, no en px, para que acompañe al tamaño de fuente del usuario. */
.tp-tabla-scroll .tp-tabla {
  min-width: 36rem;
}

.tp-tabla caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 0.65rem;
  font-size: clamp(0.9rem, 0.88rem + 0.1vw, 0.98rem);
  font-weight: 600;
  color: var(--tp-tabla-etiqueta);
  letter-spacing: 0.01em;
}

.tp-tabla thead th {
  background: var(--tp-tabla-cabecera);
  color: var(--tp-tabla-etiqueta);
  text-align: left;
  font-weight: 700;
  padding: var(--tp-tabla-pad-y) var(--tp-tabla-pad-x);
  border-bottom: 1px solid var(--tp-tabla-borde);
  vertical-align: bottom;
}

.tp-tabla tbody th[scope="row"] {
  text-align: left;
  font-weight: 600;
  padding: var(--tp-tabla-pad-y) var(--tp-tabla-pad-x);
  border-bottom: 1px solid var(--tp-tabla-borde-suave);
  vertical-align: top;
}

.tp-tabla td {
  padding: var(--tp-tabla-pad-y) var(--tp-tabla-pad-x);
  border-bottom: 1px solid var(--tp-tabla-borde-suave);
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.tp-tabla tbody tr:last-child th[scope="row"],
.tp-tabla tbody tr:last-child td {
  border-bottom: 0;
}

.tp-tabla tbody tr:nth-child(even) td {
  background: var(--tp-tabla-zebra);
}

.tp-tabla tfoot td,
.tp-tabla tfoot th {
  padding: var(--tp-tabla-pad-y) var(--tp-tabla-pad-x);
  border-top: 1px solid var(--tp-tabla-borde);
  font-size: 0.92rem;
}

/* Primera columna fija cuando hay scroll horizontal.
   Fondo opaco para que el contenido no se transparente por debajo. */
.tp-tabla-scroll .tp-tabla thead th:first-child,
.tp-tabla-scroll .tp-tabla tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 1px 0 0 var(--tp-tabla-borde);
}

.tp-tabla-scroll .tp-tabla tbody th[scope="row"] {
  background: var(--tp-tabla-fondo);
}

/* Utilidad para columnas numéricas. Se añade la clase a th y td. */
.tp-tabla .tp-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Fuente del dato debajo de la tabla. */
.tp-tabla-fuente {
  margin: -1.2rem 0 2rem;
  font-size: clamp(0.9rem, 0.88rem + 0.1vw, 0.95rem);
  color: var(--tp-tabla-etiqueta);
}

/* Cabecera fija. Opcional, solo para tablas largas.
   No usar si la plantilla tiene barra superior fija que se solape. */
.tp-tabla--cabecera-fija thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}

/* --------------------------------------------------------------------------
   3. Móvil, por debajo de 600px
   -------------------------------------------------------------------------- */

@media screen and (max-width: 600px) {

  /* 3.1 Reflow a tarjeta. Hasta tres columnas.
     Cada fila se convierte en un bloque y la cabecera de columna aparece
     delante de cada valor mediante data-label. */

  .tp-tabla-wrap .tp-tabla,
  .tp-tabla-wrap .tp-tabla tbody,
  .tp-tabla-wrap .tp-tabla tr,
  .tp-tabla-wrap .tp-tabla th,
  .tp-tabla-wrap .tp-tabla td {
    display: block;
    width: 100%;
  }

  .tp-tabla-wrap .tp-tabla {
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .tp-tabla-wrap .tp-tabla thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tp-tabla-wrap .tp-tabla tbody tr {
    border: 1px solid var(--tp-tabla-borde);
    border-radius: var(--tp-tabla-radius);
    overflow: hidden;
    margin-bottom: 0.9rem;
  }

  .tp-tabla-wrap .tp-tabla tbody tr:last-child {
    margin-bottom: 0;
  }

  .tp-tabla-wrap .tp-tabla tbody th[scope="row"] {
    background: var(--tp-tabla-cabecera);
    color: var(--tp-tabla-etiqueta);
    font-weight: 700;
    border-bottom: 1px solid var(--tp-tabla-borde);
    padding: var(--tp-tabla-pad-y) var(--tp-tabla-pad-x);
  }

  .tp-tabla-wrap .tp-tabla tbody td {
    background: transparent;
    border-bottom: 1px solid var(--tp-tabla-borde-suave);
    padding: 0.6rem var(--tp-tabla-pad-x) 0.7rem;
  }

  .tp-tabla-wrap .tp-tabla tbody tr:nth-child(even) td {
    background: transparent;
  }

  .tp-tabla-wrap .tp-tabla tbody tr td:last-child {
    border-bottom: 0;
  }

  .tp-tabla-wrap .tp-tabla tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--tp-tabla-etiqueta);
  }

  .tp-tabla-wrap .tp-tabla tbody td:empty::after {
    content: "\2013";
  }

  /* 3.2 Scroll horizontal. Cuatro columnas o más. */

  .tp-tabla-scroll .tp-tabla {
    min-width: 34rem;
    font-size: clamp(0.9rem, 0.88rem + 0.3vw, 1rem);
  }

  .tp-tabla-scroll .tp-tabla thead th,
  .tp-tabla-scroll .tp-tabla tbody th[scope="row"],
  .tp-tabla-scroll .tp-tabla td {
    padding: 0.6rem 0.7rem;
  }
}

/* --------------------------------------------------------------------------
   4. Accesibilidad y movimiento
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tp-tabla-scroll {
    scroll-behavior: auto;
  }
}
/* THE-PERUVIAN, artículo feriados */
.tp-article{
  --tp-gold:#ae8622;
  --tp-gold-soft:rgba(174,134,34,0.35);
  --tp-gold-faint:rgba(174,134,34,0.08);
  --tp-dark:#0e0e11;
  --tp-dark-line:rgba(255,255,255,0.14);
  --tp-dark-text:rgba(255,255,255,0.82);
  --tp-muted:rgba(0,0,0,0.55);
}
.tp-article .tp-h1{
  line-height:1.2 !important;
  font-weight:800 !important;
  margin:0 0 0.5em !important;
  color:inherit !important;
}
.tp-article .tp-lead{
  line-height:1.65 !important;
  margin:0 0 1.4em !important;
}
.tp-article .tp-h2{
  line-height:1.3 !important;
  font-weight:800 !important;
  margin:2em 0 0.2em !important;
  color:inherit !important;
  border-bottom:2px solid var(--tp-gold-soft);
  padding-bottom:0.25em !important;
}
.tp-article .tp-month-note{
  color:var(--tp-muted);
  margin:0.6em 0 1em !important;
  line-height:1.5 !important;
}
.tp-article .tp-panel{
  background:var(--tp-dark);
  border-radius:16px;
  padding:26px 22px;
  margin:0 0 1.6em;
  color:var(--tp-dark-text);
}
.tp-article .tp-panel-kicker{
  display:block;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--tp-gold) !important;
  font-weight:700;
  margin:0 0 0.6em !important;
}
.tp-article .tp-panel-title{
  line-height:1.3 !important;
  font-weight:800 !important;
  color:#fff !important;
  margin:0 0 0.7em !important;
}
.tp-article .tp-panel p{
  margin:0 0 0.8em !important;
  line-height:1.6 !important;
  color:var(--tp-dark-text) !important;
}
.tp-article .tp-panel p:last-child{margin-bottom:0 !important;}
.tp-article .tp-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:1.2em 0 0;
  padding:1.2em 0 0;
  border-top:1px solid var(--tp-dark-line);
}
.tp-article .tp-stat-n{
  display:block;
  font-weight:800;
  color:var(--tp-gold);
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.tp-article .tp-stat-l{
  display:block;
  line-height:1.35;
  margin-top:6px;
  color:var(--tp-dark-text);
}
.tp-article .tp-faq{
  border:1px solid var(--tp-gold-soft);
  background:var(--tp-gold-faint);
  border-radius:12px;
  margin:0 0 0.7em;
}
.tp-article .tp-faq summary{
  cursor:pointer;
  padding:14px 44px 14px 18px;
  list-style:none;
  position:relative;
}
.tp-article .tp-faq summary::-webkit-details-marker{display:none;}
.tp-article .tp-faq summary::after{
  content:"+";
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  color:var(--tp-gold);
  font-weight:800;
}
.tp-article .tp-faq[open] summary::after{content:"\2212";}
.tp-article .tp-faq summary .tp-faq-q{
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  line-height:1.4 !important;
  font-weight:700 !important;
  color:inherit !important;
}
.tp-article .tp-faq-a{padding:0 18px 16px;}
.tp-article .tp-faq-a p{
  margin:0;
  line-height:1.6 !important;
}
.tp-article .tp-fer summary .tp-faq-q .tp-day{
  color:var(--tp-gold) !important;
  font-weight:800;
}
.tp-article .tp-tag{
  display:inline-block;
  margin-top:7px;
  line-height:1;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:700;
  padding:5px 9px;
  border-radius:999px;
}
.tp-article .tp-tag-nac{
  background:var(--tp-gold);
  color:#0e0e11;
}
.tp-article .tp-tag-nolab{
  background:transparent;
  color:var(--tp-gold);
  border:1px solid var(--tp-gold-soft);
}
.tp-article .tp-faq[open] .tp-faq-a{animation:tp-fade 0.22s ease-out;}
@keyframes tp-fade{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .tp-article .tp-faq[open] .tp-faq-a{animation:none;}
}
.tp-article .tp-sources{
  margin:2.4em 0 0;
  padding:18px;
  border-top:2px solid var(--tp-gold-soft);
}
.tp-article .tp-sources h2{
  font-weight:800 !important;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--tp-gold) !important;
  margin:0 0 0.7em !important;
  border:none !important;
  padding:0 !important;
}
.tp-article .tp-sources ul{margin:0;padding-left:1.1em;}
.tp-article .tp-sources li{
  line-height:1.55 !important;
  margin:0 0 0.4em !important;
  color:var(--tp-muted);
}
@media (max-width:600px){
  .tp-article .tp-panel{padding:20px 16px;border-radius:14px;}
  .tp-article .tp-stats{grid-template-columns:1fr;gap:12px;text-align:left;}
  .tp-article .tp-faq summary{padding:13px 40px 13px 14px;}
  .tp-article .tp-faq-a{padding:0 14px 14px;}
  .tp-article .tp-sources{padding:16px 0 0;}
}

/* THE-PERUVIAN, calendario visual */
.tp-cal{
  --tp-gold:#ae8622;
  --tp-gold-soft:rgba(174,134,34,0.38);
  --tp-dark:#0e0e11;
  --tp-line:rgba(255,255,255,0.10);
  --tp-txt:rgba(255,255,255,0.88);
  --tp-dim:rgba(255,255,255,0.45);
  background:var(--tp-dark);
  color:var(--tp-txt);
  border-radius:16px;
  padding:clamp(18px,1rem + 2vw,34px);
  margin:0 0 1.6em;
  line-height:1.4;
}
.tp-cal *{box-sizing:border-box;}
.tp-cal-head{border-bottom:1px solid var(--tp-line);padding-bottom:1.1em;margin-bottom:1.4em;}
.tp-cal-kick{
  display:block;color:var(--tp-gold) !important;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;
  font-size:clamp(0.9rem,0.85rem + 0.15vw,0.95rem);margin-bottom:0.5em;
}
.tp-cal-h2{
  color:#fff !important;font-weight:800 !important;margin:0 0 0.35em !important;
  font-size:clamp(1.5rem,1.2rem + 1.6vw,2.4rem) !important;line-height:1.15 !important;
  letter-spacing:-0.01em;
}
.tp-cal-sub{
  color:var(--tp-dim) !important;margin:0 !important;
  font-size:clamp(1rem,0.95rem + 0.3vw,1.08rem) !important;line-height:1.55 !important;
}
.tp-cal-legend{display:flex;flex-wrap:wrap;gap:10px 20px;margin:1.2em 0 0;}
.tp-cal-lg{display:flex;align-items:center;gap:8px;font-size:clamp(0.9rem,0.88rem + 0.15vw,0.95rem);color:var(--tp-dim);}
.tp-cal-sw{width:19px;height:19px;border-radius:50%;flex:0 0 auto;}
.tp-cal-sw-fer{background:var(--tp-gold);}
.tp-cal-sw-nol{border:2px solid var(--tp-gold);}
.tp-cal-sw-dom{background:rgba(255,255,255,0.14);}
.tp-cal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,0.8rem + 1vw,24px);}
.tp-cal-m{border:1px solid var(--tp-line);border-radius:12px;padding:14px 12px 12px;}
.tp-cal-mt{
  color:var(--tp-gold) !important;font-weight:800 !important;
  margin:0 0 0.6em !important;padding:0 !important;border:none !important;
  font-size:clamp(1.05rem,1rem + 0.35vw,1.2rem) !important;line-height:1.2 !important;
  letter-spacing:0.02em;
}
.tp-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.tp-cal-wd{
  text-align:center;color:var(--tp-gold) !important;font-weight:700;
  font-size:clamp(0.9rem,0.88rem + 0.1vw,0.95rem);padding-bottom:4px;
  text-transform:uppercase;letter-spacing:0.03em;
}
.tp-cal-d{
  display:flex;align-items:center;justify-content:center;aspect-ratio:1;
  border-radius:50%;font-size:clamp(0.9rem,0.85rem + 0.2vw,1rem);
  font-variant-numeric:tabular-nums;color:var(--tp-txt);
}
.tp-cal-dom{color:var(--tp-dim);}
.tp-cal-empty{visibility:hidden;}
.tp-cal-fer{background:var(--tp-gold);color:#0e0e11 !important;font-weight:800;}
.tp-cal-nol{box-shadow:inset 0 0 0 2px var(--tp-gold);color:var(--tp-gold) !important;font-weight:700;}
.tp-cal-list{list-style:none;margin:0.9em 0 0 !important;padding:0 !important;}
.tp-cal-list li{
  margin:0 0 0.25em !important;padding:0 !important;
  font-size:clamp(0.9rem,0.85rem + 0.12vw,0.95rem);line-height:1.35;color:var(--tp-txt);
}
.tp-cal-list li b{color:var(--tp-gold);font-weight:800;margin-right:5px;font-variant-numeric:tabular-nums;}
.tp-cal-list li.tp-nol{color:var(--tp-dim);}
.tp-cal-none{
  margin:0.9em 0 0 !important;color:var(--tp-dim) !important;
  font-size:clamp(0.9rem,0.85rem + 0.12vw,0.95rem) !important;line-height:1.35 !important;
}
.tp-cal-foot{border-top:1px solid var(--tp-line);margin-top:1.6em;padding-top:1.2em;}
.tp-cal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 1.2em;}
.tp-cal-n{display:block;color:var(--tp-gold);font-weight:800;line-height:1.05;
  font-size:clamp(1.6rem,1.3rem + 1.2vw,2.2rem);font-variant-numeric:tabular-nums;}
.tp-cal-nl{display:block;color:var(--tp-dim);margin-top:5px;
  font-size:clamp(0.9rem,0.85rem + 0.12vw,0.95rem);line-height:1.35;}
.tp-cal-src{color:var(--tp-dim) !important;margin:0 !important;
  font-size:clamp(0.9rem,0.85rem + 0.1vw,0.92rem) !important;line-height:1.5 !important;}
.tp-cal-brand{color:var(--tp-gold);font-weight:700;}
@media (max-width:900px){
  .tp-cal-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .tp-cal{padding:16px 12px;border-radius:14px;}
  .tp-cal-grid{grid-template-columns:1fr;gap:16px;}
  .tp-cal-stats{grid-template-columns:1fr;gap:10px;}
  .tp-cal-m{padding:14px 14px 12px;}
  .tp-cal-legend{gap:8px 16px;}
}
.tp-cal-m{animation:tp-cal-in 0.4s ease-out both;}
@keyframes tp-cal-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .tp-cal-m{animation:none;}
}