/*
Theme Name: Salon Ekaterina Theme
Theme URI:
Author: Sho Omagari
Author URI:
Description: Child Theme for Arte Theme
Version: 9
Template: arte

*/

/* =====================================================================
   Single product gallery
   ---------------------------------------------------------------------
   The parent disables WooCommerce's frontend stylesheet entirely
   (class.woo.php: woocommerce_enqueue_styles -> __return_false), so
   FlexSlider has no default styling. The rules below cover the minimum
   needed to render the slider correctly plus a small visual polish to
   make the featured image clearly primary and gallery thumbnails clearly
   secondary.
   ===================================================================== */

/* Neutralize the parent's "stack every image with 2rem gap" rule so
   inactive FlexSlider slides don't push the layout when they briefly
   render before the slider initializes. */
.woocommerce.single-product div.product[id]
  .woocommerce-product-gallery__image
  + .woocommerce-product-gallery__image {
  margin-top: 0;
}

.woocommerce-product-gallery {
  position: relative;
}

.woocommerce-product-gallery .flex-viewport {
  overflow: hidden;
  margin-bottom: 0.75rem;
  background: #f7f5f1;
}

.woocommerce-product-gallery__wrapper {
  margin: 0;
  padding: 0;
}

.woocommerce-product-gallery__image {
  margin: 0;
}

.woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Thumbnail strip rendered by FlexSlider. */
.woocommerce-product-gallery .flex-control-thumbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.woocommerce-product-gallery[data-columns="3"] .flex-control-thumbs li {
  flex: 0 0 calc(33.3333% - 0.3334rem);
}
.woocommerce-product-gallery[data-columns="4"] .flex-control-thumbs li,
.woocommerce-product-gallery .flex-control-thumbs li {
  flex: 0 0 calc(25% - 0.375rem);
}
.woocommerce-product-gallery[data-columns="5"] .flex-control-thumbs li {
  flex: 0 0 calc(20% - 0.4rem);
}

.woocommerce-product-gallery .flex-control-thumbs li {
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
  opacity: 1;
}

/* The first thumbnail is always the featured image (kept in sync with
   variation selection by assets/js/product-gallery.js). Treat it like a
   matted gallery print: outer dark frame, white mat, faint inner hairline,
   then the image. The frame is rendered on the LI rather than the IMG so:
     - it isn't faded by the IMG's opacity dimming on non-active thumbs;
     - everything is *inside* the LI's box (no outset shadow getting clipped
       on the strip's left edge);
     - with box-sizing: border-box on all thumbs above, the framed first
       thumb stays exactly the same outer size as its peers — only its
       image sits a few pixels smaller inside, which sells the "matted"
       reading. */
.woocommerce-product-gallery .flex-control-thumbs li:first-child {
  padding: 5px;
  background: #fff;
  border: 3px solid rgb(184,157,79);
  box-shadow:
    inset 0 0 0 1px rgba(58, 52, 44, 0.25),
    0 1px 3px rgba(58, 52, 44, 0.18);
}

.woocommerce-product-gallery .flex-control-thumbs li:first-child img {
  opacity: 0.85;
}

.woocommerce-product-gallery .flex-control-thumbs li:first-child img:hover,
.woocommerce-product-gallery .flex-control-thumbs li:first-child img.flex-active {
  opacity: 1;
}

/* =====================================================================
   Single product layout polish
   ---------------------------------------------------------------------
   Subtle refinements over the parent's existing rules to give the single
   product page a more curated, gallery-print feel that matches the matted
   thumbnail above. Palette stays in family with the gallery's frame:
     - #3a342c        dark warm brown — structure, body
     - rgb(184,157,79) antique gold   — accents, hover, active state
     - #f7f5f1        warm cream      — surfaces
   ===================================================================== */

/* Title — a touch more letter-spacing so it reads like a museum label
   rather than a generic product title. */
.woocommerce.single-product div.product[id] .product_title {
  letter-spacing: 0.015em;
}

/* Short description — bracket it with hairline rules so it reads as a
   distinct "about this piece" block rather than blending into the
   surrounding summary copy. */
.woocommerce.single-product div.product[id]
  .summary .woocommerce-product-details__short-description {
  margin: 1.5rem 0;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(58, 52, 44, 0.12);
  border-bottom: 1px solid rgba(58, 52, 44, 0.12);
  line-height: 1.75;
  color: rgba(58, 52, 44, 0.85);
}
.woocommerce.single-product div.product[id]
  .summary .woocommerce-product-details__short-description p {
  margin: 0 0 0.75rem;
}
.woocommerce.single-product div.product[id]
  .summary .woocommerce-product-details__short-description p:last-child {
  margin-bottom: 0;
}

/* Add-to-cart button — squared corners, dark base, antique-gold on
   hover. Anti-"modern e-commerce" rounded pill, pro "curated object". */
.woocommerce.single-product div.product[id] .summary .single_add_to_cart_button {
  display: inline-block;
  padding: 0.85rem 2.25rem;
  background: #3a342c;
  color: #fff;
  border: 1px solid #3a342c;
  border-radius: 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.woocommerce.single-product div.product[id]
  .summary .single_add_to_cart_button:hover,
.woocommerce.single-product div.product[id]
  .summary .single_add_to_cart_button:focus {
  background: rgb(184, 157, 79);
  border-color: rgb(184, 157, 79);
  color: #fff;
}

/* Tabs nav — replace any pill/box rendering with an editorial underline.
   Parent applies max-width: 50% on .woocommerce-tabs which cramps the
   WPBakery-built description; release that so layout decisions belong to
   the description block itself. */
.woocommerce .woocommerce-tabs {
  max-width: none;
}

.woocommerce .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid rgba(58, 52, 44, 0.15);
  padding: 0;
  margin: 0 0 2rem;
}

.woocommerce .woocommerce-tabs ul.tabs li {
  margin: 0 1.75rem 0 0;
  padding: 0;
  list-style: none;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* Some WC themes drop ::before/::after pill arrows on tabs — neutralize. */
.woocommerce .woocommerce-tabs ul.tabs li::before,
.woocommerce .woocommerce-tabs ul.tabs li::after {
  display: none;
}

.woocommerce .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0.65rem 0;
  color: rgba(58, 52, 44, 0.55);
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.woocommerce .woocommerce-tabs ul.tabs li.active a,
.woocommerce .woocommerce-tabs ul.tabs li a:hover,
.woocommerce .woocommerce-tabs ul.tabs li a:focus {
  color: rgb(184, 157, 79);
  border-bottom-color: rgb(184, 157, 79);
}

/* Tab content — modest top padding so the active underline doesn't sit
   right against the description. */
.woocommerce .woocommerce-tabs .panel {
  padding: 1.5rem 0 0;
  line-height: 1.75;
}

/* Related products — give it a hairline divider so it doesn't bleed
   into the description block above, and a quieter, label-like heading. */
.woocommerce.single-product section.related.products {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(58, 52, 44, 0.1);
}

.woocommerce.single-product section.related.products > h2 {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(58, 52, 44, 0.7);
  margin-bottom: 2rem;
}

/* =====================================================================
   Cart — buttons
   ---------------------------------------------------------------------
   The "Proceed to checkout" CTA needs to read like a real button (it was
   rendering as plain text). Match the single-product add-to-cart treatment
   so the entire purchase flow shares one visual button language.
   The "Update cart" action is secondary — outlined variant.
   ===================================================================== */

.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-cart a.checkout-button.button,
.woocommerce-cart .checkout-button.button.alt {
  display: inline-block;
  width: 100%;
  padding: 1rem 2rem;
  background: #3a342c;
  color: #fff;
  border: 1px solid #3a342c;
  border-radius: 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-cart a.checkout-button.button:hover,
.woocommerce-cart .checkout-button.button.alt:hover,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:focus {
  background: rgb(184, 157, 79);
  border-color: rgb(184, 157, 79);
  color: #fff;
}

.woocommerce-cart .actions .button[name="update_cart"],
.woocommerce-cart .actions .button[name="apply_coupon"] {
  background: transparent;
  color: #3a342c;
  border: 1px solid #3a342c;
  border-radius: 0;
  padding: 0.65rem 1.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.woocommerce-cart .actions .button[name="update_cart"]:hover,
.woocommerce-cart .actions .button[name="apply_coupon"]:hover {
  background: #3a342c;
  color: #fff;
}

/* =====================================================================
   Shop archive — product cards
   ---------------------------------------------------------------------
   Strip the commerce-y feel; lean into the gallery aesthetic. Generous
   image, restrained title and price hierarchy, subtle hover that hints
   at "view this piece" without shouting.
   ===================================================================== */

.woocommerce ul.products li.product {
  text-align: center;
  margin-bottom: 2.5rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Image slot — slightly muted background for products with transparent
   PNGs / off-center compositions, plus a subtle scale on hover. */
.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.woocommerce ul.products li.product img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: #f7f5f1;
  transition: transform 0.5s ease, opacity 0.3s ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.02);
}

/* Title — quiet, label-like, good letter-spacing. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #3a342c;
  margin: 1rem 0 0.4rem;
  padding: 0;
  line-height: 1.4;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
  color: rgb(184, 157, 79);
}

/* Price — quieter than the parent's price treatment, paired in tone
   with the title. */
.woocommerce ul.products li.product .price {
  display: block;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(58, 52, 44, 0.85);
  margin: 0;
}

.woocommerce ul.products li.product .price del {
  opacity: 0.45;
  margin-right: 0.4rem;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: rgb(184, 157, 79);
}

/* Sale flash — small antique-gold ribbon instead of WC's default red. */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  background: rgb(184, 157, 79);
  color: #fff;
  border-radius: 0;
  padding: 0.25rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  min-height: 0;
  min-width: 0;
}

/* =====================================================================
   Shop / category archive header
   ---------------------------------------------------------------------
   The default category title is huge and plain. Restrain it into a
   curated section header, with the term description sitting below as
   a refined intro paragraph. Same hairline divider beneath as the
   single-product Related section, so the page rhythm is consistent.
   ===================================================================== */

.woocommerce-products-header,
.woocommerce.archive .page-header,
.woocommerce.archive header.entry-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(58, 52, 44, 0.1);
  text-align: center;
}

.woocommerce-products-header__title,
.woocommerce.archive .page-title,
.woocommerce.archive .entry-title,
.woocommerce-page .page-title {
  font-size: 1.75rem;
  letter-spacing: 0.05em;
  font-weight: 400;
  color: #3a342c;
  margin: 0 0 0.5rem;
  text-transform: none;
}

/* Category description (term description) — restrained intro paragraph. */
.term-description,
.woocommerce-products-header .term-description,
.taxonomy-description {
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(58, 52, 44, 0.8);
  max-width: 50rem;
  margin: 0.75rem auto 0;
}

.term-description p:last-child,
.taxonomy-description p:last-child {
  margin-bottom: 0;
}

/* Result count + sort dropdown row above the loop. */
.woocommerce .woocommerce-result-count {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(58, 52, 44, 0.6);
  margin: 0 0 1.5rem;
}

.woocommerce .woocommerce-ordering select {
  border: 1px solid rgba(58, 52, 44, 0.2);
  background: #fff;
  padding: 0.45rem 2rem 0.45rem 0.8rem;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: #3a342c;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #3a342c 50%),
                    linear-gradient(135deg, #3a342c 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* Pagination — quiet pill numbers, antique-gold on current page. */
.woocommerce nav.woocommerce-pagination {
  margin: 3rem 0 1rem;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  gap: 0.35rem;
  border: 0;
  padding: 0;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li {
  border: 0;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li a,
.woocommerce nav.woocommerce-pagination ul.page-numbers li span {
  display: inline-block;
  min-width: 2.25rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(58, 52, 44, 0.15);
  color: rgba(58, 52, 44, 0.75);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  border-radius: 0;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li a:hover {
  background: #3a342c;
  border-color: #3a342c;
  color: #fff;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li span.current {
  background: rgb(184, 157, 79);
  border-color: rgb(184, 157, 79);
  color: #fff;
}

/* =====================================================================
   Category cards (shop archive — product category tiles)
   ---------------------------------------------------------------------
   The default <mark class="count"> renders with the browser's stock
   yellow highlight (that's where the "(1)" yellow box came from). And
   WC's loop_category_link_open uses an h2/h3 in the parent typography
   scale, which here was reading way too large for a tile label. Quiet
   both down so the categories read as a curated index, not a directory
   listing.
   ===================================================================== */

.woocommerce ul.products li.product-category h2,
.woocommerce ul.products li.product-category h3,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #3a342c;
  margin: 1rem 0 0;
  line-height: 1.4;
}

.woocommerce ul.products li.product-category:hover h2,
.woocommerce ul.products li.product-category:hover h3,
.woocommerce ul.products li.product-category:hover .woocommerce-loop-category__title {
  color: rgb(184, 157, 79);
}

/* Reset <mark> defaults inside WC contexts so the count badge isn't a
   yellow text-highlight, then style the count as quiet metadata. */
.woocommerce mark,
.woocommerce-page mark {
  background: transparent;
  color: inherit;
}

.woocommerce mark.count,
.woocommerce ul.products li.product-category mark.count {
  display: inline;
  background: transparent;
  color: rgba(58, 52, 44, 0.5);
  font-size: 0.8em;
  font-weight: 400;
  letter-spacing: 0;
  padding: 0 0 0 0.35rem;
}

/* =====================================================================
   Cart Block (Gutenberg) — checkout button
   ---------------------------------------------------------------------
   Modern WC cart pages render via the Cart Block, not the classic
   shortcode. The "Proceed to Checkout" CTA is <a class="wc-block-cart__
   submit-button"> inside .wp-block-woocommerce-proceed-to-checkout-block
   and ships with almost no styling here (parent disables WC's frontend
   stylesheet). Match the single-product add-to-cart treatment so the
   button is unmistakable.
   ===================================================================== */

a.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wc-block-cart__submit-container > a,
.wc-block-cart__submit > a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 2rem;
  background: #3a342c;
  color: #fff;
  border: 1px solid #3a342c;
  border-radius: 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

a.wc-block-cart__submit-button:hover,
a.wc-block-cart__submit-button:focus,
.wp-block-woocommerce-proceed-to-checkout-block a:hover,
.wc-block-cart__submit-container > a:hover {
  background: rgb(184, 157, 79);
  border-color: rgb(184, 157, 79);
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* The block button often wraps its label in a <span>; make sure the
   inner text inherits cleanly without its own decoration / color. */
a.wc-block-cart__submit-button span,
a.wc-block-cart__submit-button .wc-block-components-button__text,
.wp-block-woocommerce-proceed-to-checkout-block a span {
  color: inherit;
  text-decoration: none;
  letter-spacing: inherit;
}

/* =====================================================================
   Checkout Block (Gutenberg) — place order button
   ---------------------------------------------------------------------
   Same treatment for the block-based checkout's "Place Order" CTA so
   the entire purchase flow shares one visual button language.
   ===================================================================== */

.wc-block-components-checkout-place-order-button,
button.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout-actions-block button {
  display: inline-block;
  width: 100%;
  padding: 1rem 2rem;
  background: #3a342c;
  color: #fff;
  border: 1px solid #3a342c;
  border-radius: 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus,
.wp-block-woocommerce-checkout-actions-block button:hover {
  background: rgb(184, 157, 79);
  border-color: rgb(184, 157, 79);
  color: #fff;
}

/* =====================================================================
   404 — page not found
   ---------------------------------------------------------------------
   No sidebar; centered editorial layout; same palette as the rest of
   the WC work. The big "404" sits as a quiet eyebrow rather than a
   shout, so the page reads as part of the gallery rather than an
   error screen.
   ===================================================================== */

.arte-404 {
  padding: 4rem 1rem 5rem;
  text-align: center;
}

.arte-404__inner {
  max-width: 38rem;
  margin: 0 auto;
}

.arte-404__eyebrow {
  font-size: 5.5rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: rgba(58, 52, 44, 0.18);
  margin: 0 0 0.5rem;
  font-family: Georgia, "Times New Roman", serif;
}

.arte-404__title {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #3a342c;
  margin: 0 0 1rem;
  line-height: 1.4;
}

.arte-404__message {
  font-size: 0.95rem;
  line-height: 1.85;
  color: rgba(58, 52, 44, 0.75);
  margin: 0 auto 2.5rem;
  max-width: 32rem;
}

.arte-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 3rem;
}

.arte-404__button {
  display: inline-block;
  min-width: 12rem;
  padding: 0.85rem 1.75rem;
  border-radius: 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.arte-404__button--primary {
  background: #3a342c;
  color: #fff;
  border: 1px solid #3a342c;
}

.arte-404__button--primary:hover,
.arte-404__button--primary:focus {
  background: rgb(184, 157, 79);
  border-color: rgb(184, 157, 79);
  color: #fff;
  text-decoration: none;
}

.arte-404__button--secondary {
  background: transparent;
  color: #3a342c;
  border: 1px solid #3a342c;
}

.arte-404__button--secondary:hover,
.arte-404__button--secondary:focus {
  background: #3a342c;
  color: #fff;
  text-decoration: none;
}

/* Search affordance — divider above, hairline-restrained label, the
   parent's existing search-form styling carries the input itself. */
.arte-404__search {
  padding-top: 2.5rem;
  border-top: 1px solid rgba(58, 52, 44, 0.1);
}

.arte-404__search-label {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(58, 52, 44, 0.55);
  margin: 0 0 1rem;
}

.arte-404__search form,
.arte-404__search .search-form {
  max-width: 24rem;
  margin: 0 auto;
}

/* =====================================================================
   Order tracking block (customer-facing, on My Account / Thank-you)
   ---------------------------------------------------------------------
   Rendered by arte_child_render_tracking_block() via
   woocommerce_order_details_after_order_table when order status is
   "completed" and a tracking number is set. Sits as a soft cream panel
   with the antique-gold accent stripe so it reads as a notable but
   non-shouty bit of customer info.
   ===================================================================== */

.arte-tracking {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: #f7f5f1;
  border-left: 3px solid rgb(184, 157, 79);
}

.arte-tracking__title {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: #3a342c;
}

.arte-tracking__body {
  margin: 0;
  color: #3a342c;
  line-height: 1.6;
}

.arte-tracking__body strong {
  font-weight: 500;
  margin-right: 0.4rem;
}

.arte-tracking__body a {
  color: rgb(184, 157, 79);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 157, 79, 0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.arte-tracking__body a:hover,
.arte-tracking__body a:focus {
  color: #3a342c;
  border-bottom-color: #3a342c;
}