/* =========================================================================
   RepaRose components: card rhythm, carousels, mobile layout
   Every product/category card in a carousel shares one height and one
   gutter, so rows read as a grid rather than a strip of loose tiles.
   ========================================================================= */

/* ---------- carousel gutters ---------------------------------------------
   Slick sets slide widths inline; with border-box the padding becomes the
   gutter and the negative margin on the list keeps the row flush with the
   container edges. */
.tbay-addon-products .slick-list,
.tbay-addon-categories .slick-list,
.tbay-addon-posts .slick-list { margin-inline: -10px; }

.tbay-addon-products .slick-slide,
.tbay-addon-categories .slick-slide,
.tbay-addon-posts .slick-slide {
  padding-inline: 10px;
  box-sizing: border-box;
  height: auto;             /* let the track set a single height */
}

/* ---------- equal-height cards ------------------------------------------ */
.tbay-addon-products .slick-track,
.tbay-addon-categories .slick-track,
.tbay-addon-posts .slick-track {
  display: flex;
  align-items: stretch;
}
.tbay-addon-products .slick-slide > div,
.tbay-addon-categories .slick-slide > div,
.tbay-addon-posts .slick-slide > div { display: flex; width: 100%; }

.tbay-addon-products .slick-slide .item,
.tbay-addon-categories .slick-slide .item,
.tbay-addon-posts .slick-slide .item { display: flex; width: 100%; }

.tbay-addon-products .products-grid.product,
.tbay-addon-products .product-block,
.tbay-addon-products .product-content { display: flex; flex-direction: column; width: 100%; }
.tbay-addon-products .product-block > .product-content { flex: 1 1 auto; }

/* ---------- card frame ---------------------------------------------------
   The beauty skin renders product listings as a table-style grid: each cell
   gets a white background, a 1px #e5e5e5 border and a pair of absolutely
   positioned 1px ::before/::after bars offset to -1px, so neighbouring cells
   share hairlines. It also reserves 10px under every .product-block.

   This site uses a bordered, rounded card instead (border and radius in
   style.css), so all of that shows as a stray hairline beside and beneath
   each product, a 10px strip of white below the card's own outline, and white
   showing through the rounded corners. The bars are drawn by generated
   selectors — around a hundred of them, one per column count — so they are
   switched off at the source rather than out-specified.  */
.products-grid.product::before,
.products-grid.product::after,
.products-grid .product::before,
.products-grid .product::after { content: none !important; }

.products .products-grid.product,
.tbay-addon-products .products-grid.product,
.tbay-addon-product-tabs .products-grid.product,
.owl-carousel.products .products-grid.product,
.rows-1.slick-initialized.products .products-grid.product {
  border: 0 !important;
  background: transparent !important;
}
/* .product-block carries a square 1px #e5e5e5 box of its own, from two rules
   at opposite breakpoints — template.css `@media(max-width:767px)` and the
   skin's `@media(min-width:768px)` — plus a third for `.row.grid` layouts
   below 1200px. It sits just outside the rounded card, so its corners show as
   short straight lines around every curve. That is the "line behind the
   rounded corner". The card's frame is .product-content; the block never
   needs one, at any width. */
.products .product-block,
.tbay-addon-products .product-block,
.tbay-addon-product-tabs .product-block,
.display-products .product-block,
.recently-grid .product-block {
  border: 0 !important;
  background: transparent !important;
}
.products .product-block.v8,
.tbay-addon-products .product-block.v8,
.tbay-addon-product-tabs .product-block.v8 {
  padding-bottom: 0;
}

/* The skin also rules a hairline above and below the whole carousel, on
   .slick-list — that is the line running under the row and across the gutters.
   Its own selector carries an id and six classes, so this needs !important
   rather than a specificity contest. */
.tbay-addon-products .slick-list,
.tbay-addon-product-tabs .slick-list,
.tbay-addon-products .owl-carousel > .slick-list,
.tbay-addon-product-tabs .owl-carousel > .slick-list { border: 0 !important; }

/* the caption grows, the price pins to the bottom, so prices align across a row */
.products .product .caption,
.tbay-addon-products .product .caption {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.products .product .caption .price,
.tbay-addon-products .product .caption .price { margin-top: auto; padding-top: 6px; }

/* Product names always occupy two lines so the price below never shifts.
   The reserved height is two whole line-heights in px, not 2.9em: at 14.5px
   the em value came out at 42.05px while a real two-line name measured 43.5,
   so one-line names sat 2px short and the card bottoms staggered. */
.products .product .product-name,
.products .product .caption h2,
.products .product .caption h3,
.products .product .caption .name,
.tbay-addon-products .product-name,
.tbay-addon-products .caption .name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 21px;
  min-height: 42px;
  margin: 0 0 6px;
}
.products .product .caption .name a,
.tbay-addon-products .caption .name a { line-height: 21px; }

/* category tiles: same treatment, gutter comes from the slide */
.rr-categories .item-cat { margin: 0 0 4px; width: 100%; }
.tbay-addon-categories .slick-slide .item-cat { display: flex; flex-direction: column; }
.tbay-addon-categories .slick-slide .content-img { flex: 1 1 auto; }

/* journal cards in a carousel */
.tbay-addon-posts .post-grid,
.tbay-addon-posts article { display: flex; flex-direction: column; width: 100%; height: 100%; }

/* ---------- section rhythm ---------------------------------------------- */
.rr-featured .tbay-addon-content,
.rr-tabs .tbay-addon-content { padding-top: 4px; }
.rr-tabs .tbay-addon-tabs .nav-tabs { justify-content: center; gap: 26px; border: 0; margin-bottom: 26px; }
.rr-tabs .tbay-addon-tabs .nav-tabs > li > a {
  font-family: var(--rr-serif);
  font-size: 18px;
  padding: 6px 2px;
  border: 0;
  color: var(--rr-muted);
}
.rr-tabs .tbay-addon-tabs .nav-tabs > li.active > a,
.rr-tabs .tbay-addon-tabs .nav-tabs > li > a:hover { color: var(--rr-rose); border-bottom: 1px solid var(--rr-rose); }

/* ---------- breadcrumbs -------------------------------------------------
   The theme pairs section padding with a 20px margin on the inner element,
   which doubles the space above the trail and leaves none below it. Own both
   numbers here so the trail sits clear of the heading that follows. */
.tbay-breadscrumb .breadscrumb-inner:empty { display: none; }
#tbay-breadscrumb:has(.breadscrumb-inner:empty) { padding: 0; min-height: 0; }
.tbay-breadscrumb,
#tbay-breadscrumb {
  padding: 18px 0 0 !important;
  min-height: 0 !important;
  /* The theme reserves 90px under the bar (.show-title) for a large in-bar
     page title that it then hides, and #main-container's own top padding runs
     0 / 30 / 38 / 50 depending on the template — five different gaps under the
     same trail, from 26px on the Journal to 146px on a page. Zero both and
     set the gap once, below. */
  margin-bottom: 0 !important;
}
.tbay-breadscrumb .breadscrumb-inner,
#tbay-breadscrumb .breadscrumb-inner {
  /* padding rather than margin so nothing collapses into the section */
  margin: 0 !important;
  padding: 0 0 14px !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* the theme centres the WooCommerce trail and left-aligns its own; both
     should line up with the content beneath them */
  justify-content: flex-start;
  text-align: start;
  gap: 10px 18px;
}
.tbay-breadscrumb .tbay-woocommerce-breadcrumb.breadcrumb { justify-content: flex-start; }
/* the theme's clearfix pseudo-elements become flex items here and pushed the
   trail 18px in from the content edge */
.tbay-breadscrumb .breadscrumb-inner::before,
.tbay-breadscrumb .breadscrumb-inner::after { display: none; }
.rr-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--rr-muted); }
.rr-crumbs a { color: var(--rr-muted); }
.rr-crumbs a:hover { color: var(--rr-rose); }
.rr-crumbs .sep { opacity: .5; }
.rr-crumbs [aria-current] { color: var(--rr-ink); }

/* On a product page the bar also holds the previous/next arrows, whose
   line-height: 50px made the whole row 50px tall — and on a phone they wrapped
   below the trail and added another 50px. Keep them inline and compact. */
.tbay-breadscrumb .product-nav-icon {
  float: none !important;
  margin-inline-start: auto;
  line-height: 1;
}
.tbay-breadscrumb .product-nav-icon .link-icons {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 20px;
}
.tbay-breadscrumb .product-nav-icon .icon-wrapper {
  position: relative;
  height: 20px;
  margin: 0 !important;
}
.tbay-breadscrumb .product-nav-icon .text {
  height: 20px !important;
  line-height: 20px !important;
}
.tbay-breadscrumb .product-nav-icon .product-btn-icon { line-height: 20px !important; }
/* the hover preview thumbnail must not size the row */
.tbay-breadscrumb .product-nav-icon .image.psnav {
  position: absolute !important;
  top: 100%;
  inset-inline-end: 0;
  z-index: 20;
}
.tbay-breadscrumb .product-nav-icon a { font-size: 13px; color: var(--rr-muted); }
.tbay-breadscrumb .product-nav-icon a:hover { color: var(--rr-rose); }

/* one gap under the trail on every template */
#tbay-breadscrumb + #main-container,
#tbay-breadscrumb + #tbay-breadscrumb-title + #main-container { padding-top: 22px !important; }

/* The policy pages carry no heading of their own — their content starts at h2
   — so this band is their only h1. Keep it, at the site's serif scale. */
#tbay-breadscrumb-title { padding: 22px 0 4px; }
#tbay-breadscrumb-title .page-title {
  margin: 0 !important;
  font-family: var(--rr-serif);
  font-size: 40px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  color: var(--rr-ink);
  text-transform: none !important;
}

/* WooCommerce archives, products, cart and checkout keep WooCommerce's own
   trail (the theme filters woocommerce_breadcrumb_defaults), so match it to
   .rr-crumbs rather than have two breadcrumb styles on one site. */
.tbay-breadscrumb .tbay-woocommerce-breadcrumb.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
  font-size: 13px;
  color: var(--rr-muted);
}
.tbay-breadscrumb .tbay-woocommerce-breadcrumb.breadcrumb > li { padding: 0; }
.tbay-breadscrumb .tbay-woocommerce-breadcrumb.breadcrumb > li + li::before {
  content: "/";
  padding: 0 8px 0 0;
  color: var(--rr-muted);
  opacity: .5;
}
.tbay-breadscrumb .tbay-woocommerce-breadcrumb.breadcrumb a { color: var(--rr-muted); }
.tbay-breadscrumb .tbay-woocommerce-breadcrumb.breadcrumb a:hover { color: var(--rr-rose); }
.tbay-breadscrumb .tbay-woocommerce-breadcrumb.breadcrumb > li:last-child { color: var(--rr-ink); }
/* "Previous page" is a history.back() duplicate of the browser's own back
   button. It wrapped onto its own line and doubled the bar's height; the
   WooCommerce breadcrumb path emits it regardless of the theme option. */
.tbay-breadscrumb .urna-back-btn { display: none; }

/* ---------- product category archives -----------------------------------
   Title, then description, then the grid. No subcategory image band. */
.rr-archive-head { max-width: 760px; margin: 0 0 36px; }
.rr-archive-title {
  font-family: var(--rr-serif);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 600;
  color: var(--rr-ink);
  margin: 0;
}
.rr-archive-title + .rr-archive-desc { margin-top: 14px; }
.rr-archive-desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--rr-muted);
  max-width: 62ch;
}
.rr-archive-desc p:last-child { margin-bottom: 0; }
/* the theme's own archive heading would repeat ours */
.archive-shop .page-title,
.woocommerce-products-header__title { display: none; }
.archive .all-subcategories,
.archive ul.products li.product-category { display: none; }

/* =========================================================================
   Mobile
   ========================================================================= */
/* =========================================================================
   Journal cards on the home page

   The posts grid is a Bootstrap-style row with a -20px horizontal gutter, but
   its items only carry 8px (phone) to 10px (desktop) of padding, so the
   article content sat 10-12px outside the white panel on both sides. On a
   phone that put the headline past the card's edge. Make the row's negative
   margin and the item padding agree, so the content lands exactly on the
   panel's edges.
   ========================================================================= */
/* the theme's own rule is `.layout-blog .row.grid[data-xlgdesktop="3"]`, so
   these carry one class more to win on specificity */
.rr-journal .layout-blog .posts-grid.row.grid { margin-inline: -10px; }
.rr-journal .layout-blog .posts-grid.row.grid > .item { padding-inline: 10px; }

@media (max-width: 767px) {
  .rr-journal .layout-blog .posts-grid.row.grid { margin-inline: -8px; }
  .rr-journal .layout-blog .posts-grid.row.grid > .item { padding-inline: 8px; }
}

/* =========================================================================
   Coupon form

   Two different structures, both with the button flush against the input:
   the cart renders `.coupon > .box` as a flex row with no gap (and its
   295px input plus 90px button overflowed the 370px totals panel by 15px),
   while the checkout floats `.form-row-first` and `.form-row-last` against
   each other with no gutter. Describe both as a flex row with one gap.
   ========================================================================= */
.coupon .box {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
}
.coupon .box input.text,
.coupon .box input[name="coupon_code"] {
  flex: 1 1 auto;
  min-width: 0;   /* let the input shrink instead of pushing the button out */
}
.coupon .box button { flex: 0 0 auto; white-space: nowrap; }

.checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}
.checkout_coupon .form-row-first,
.checkout_coupon .form-row-last {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.checkout_coupon .form-row-first { flex: 1 1 200px; min-width: 0; }
.checkout_coupon .form-row-last { flex: 0 0 auto; }
.checkout_coupon .form-row-last .button { white-space: nowrap; }
.checkout_coupon .clear { display: none; }

/* Narrow columns: the checkout button takes its own line rather than squeezing
   the field. The cart's is left alone — below 576px the theme turns it into a
   round arrow tucked inside the input's end, which is a tidy compact pattern
   and already reads correctly. */
@media (max-width: 575px) {
  .checkout_coupon .form-row-first,
  .checkout_coupon .form-row-last { flex: 1 1 100%; }
  .checkout_coupon .form-row-last .button { width: 100%; }
}

/* =========================================================================
   Mobile top bar

   The theme shows .topbar-device-mobile up to 1199px (.hidden-lg), so every
   rule about it belongs at that breakpoint — at 991px the band from 992 to
   1199 was left unstyled, where the bar rendered 67px tall against a 50px
   page offset and put 17px of every page underneath itself.

   The theme gives each direct child `flex: 1` (and the logo `flex: 2`), so
   widths came from flex-grow rather than from any spacing value: at 390px the
   hamburger's column was 79px wide for a 20px icon. The clamps the theme
   would normally apply are disabled here because always_display_logo is on.
   So the row is described explicitly: one fixed control on the left, a
   centred logo, a fixed group on the right, one shared gap.
   ========================================================================= */
@media (max-width: 1199px) {
  .topbar-device-mobile {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    height: var(--rr-mhead) !important;
    min-height: var(--rr-mhead) !important;
    padding: 0 10px !important;
    background: var(--rr-cream);
    border-bottom: 1px solid var(--rr-hair);
    box-shadow: none;
  }
  /* the page sits below the fixed bar; both numbers come from one value */
  .wrapper-container { padding-top: var(--rr-mhead) !important; }

  /* kill the theme's 1 : 2 : 1 flex-grow split */
  .topbar-device-mobile > div { flex: 0 0 auto !important; height: auto !important; }
  /* the two side zones share a width so the logo is centred on the bar, not
     merely centred between a 40px zone and an 82px one */
  .topbar-device-mobile .active-mobile,
  .topbar-device-mobile .top-right-mobile { min-width: calc(var(--rr-mctl) * 2 + 2px); }
  .topbar-device-mobile .active-mobile {
    flex: 0 0 auto !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .topbar-device-mobile .mobile-logo {
    flex: 1 1 auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  .topbar-device-mobile .top-right-mobile {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
  }
  .topbar-device-mobile .top-right-mobile > * { float: none !important; height: auto !important; }

  /* every control is the same square, so the gaps are the only spacing */
  .topbar-device-mobile .active-mobile > a,
  .topbar-device-mobile .search-device > .search-icon,
  .topbar-device-mobile .cart-dropdown > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: var(--rr-mctl) !important;
    height: var(--rr-mctl) !important;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center;
  }
  /* the theme sets line-height: 50px on every icon in the bar */
  .topbar-device-mobile i { font-size: 19px !important; line-height: 1 !important; display: block; }

  .topbar-device-mobile .mobile-logo a { display: block; line-height: 0; }
  .logo-mobile img,
  .logo-mobile-img { height: 32px !important; width: auto; max-width: 100%; }

  /* The badge hung 12px outside its own 30px anchor and collided with search.
     It also resolved against .cart-icon, which is only as tall as the glyph,
     so it landed across the bag rather than on its corner — pin it to the
     40px control instead. */
  .topbar-device-mobile .cart-dropdown > a { position: relative; }
  .topbar-device-mobile .cart-dropdown .cart-icon { position: static; line-height: 1; }
  .topbar-device-mobile .cart-dropdown .cart-icon .mini-cart-items {
    position: absolute;
    top: 4px !important;
    inset-inline-end: 1px !important;
    inset-inline-start: auto !important;
    left: auto !important;
    right: auto !important;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 20px;
    line-height: 15px !important;
    font-size: 9.5px !important;
    font-weight: 600;
    text-align: center;
    background: var(--rr-rose) !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px var(--rr-cream);
  }

  /* the search overlay assumes a 50px bar in the theme's CSS */
  .topbar-device-mobile .search-device .tbay-search-mobile.tbay-search-form { bottom: var(--rr-mhead) !important; }
  .topbar-device-mobile .search-device.active-search-mobile .tbay-search-mobile.tbay-search-form { bottom: 0 !important; }
  .top-cart .dropdown-content,
  .top-cart .dropdown-menu { top: var(--rr-mhead) !important; }
}

/* =========================================================================
   Language row at the top of the off-canvas menu

   The switcher no longer fits in the top bar, so it is the panel's first item.
   Rendered as plain markup rather than the plugin shortcode, because mmenu
   rewrites this DOM on init.
   ========================================================================= */
.rr-menu-lang {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--rr-hair);
}
/* mmenu gives every li > span the listview treatment — nowrap plus an
   ellipsis and 10px 20px of padding — which truncated both the label and the
   second pill inside the 312px panel. */
.rr-menu-lang > span {
  overflow: visible !important;
  text-overflow: clip !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
}
.rr-menu-lang-label {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 10.5px !important;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rr-muted);
  white-space: nowrap !important;
}
.rr-menu-lang-links { display: flex !important; align-items: center; gap: 6px; flex: 0 0 auto; }
.rr-menu-lang-link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 11px !important;
  border: 1px solid var(--rr-hair);
  border-radius: 40px;
  background: transparent;
  font-size: 11.5px !important;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rr-muted) !important;
  white-space: nowrap;
  overflow: visible !important;
  text-overflow: clip !important;
}
.rr-menu-lang-link.is-current {
  background: var(--rr-rose);
  border-color: var(--rr-rose);
  color: #fff !important;
}
.rr-menu-lang-flag {
  width: 16px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(58, 53, 49, .16);
  flex: 0 0 auto;
}
/* mmenu adds its own chrome to list items; this row is not a navigation link */
.rr-menu-lang::after,
.rr-menu-lang > .mm-btn { display: none !important; }

@media (max-width: 991px) {

  /* the theme hides the trail below 992px; breadcrumbs earn their place on a
     phone, so show it compactly instead */
  .tbay-breadscrumb,
  #tbay-breadscrumb { display: block; padding: 12px 0 0 !important; }
  .tbay-breadscrumb .breadscrumb-inner,
  #tbay-breadscrumb .breadscrumb-inner { padding-bottom: 10px !important; }
  .rr-crumbs,
  .tbay-breadscrumb .tbay-woocommerce-breadcrumb.breadcrumb { font-size: 12px; gap: 6px; }
  .tbay-breadscrumb .tbay-woocommerce-breadcrumb.breadcrumb > li + li::before { padding-right: 6px; }

  /* --- sections: consistent vertical rhythm ---------------------------- */
  /* the hero owns its own responsive layout in hero.css */

  /* features read as a two-column list with their descriptions intact */
  .rr-features .tbay-addon-content .row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  .rr-features .feature-box { padding: 14px 8px; border: 0; text-align: center; }
  .tbay-addon-features .feature-box .description { display: block !important; font-size: 12.5px; line-height: 1.6; }
  .tbay-addon-features .feature-box .title,
  .tbay-addon-features .feature-box h3 { font-size: 15px; margin: 8px 0 4px; }
  .tbay-addon-features .feature-box i { font-size: 26px; }

  /* card grids sit two-up with a real gutter */
  .tbay-addon-products .slick-list,
  .tbay-addon-categories .slick-list,
  .tbay-addon-posts .slick-list { margin-inline: -6px; }
  .tbay-addon-products .slick-slide,
  .tbay-addon-categories .slick-slide,
  .tbay-addon-posts .slick-slide { padding-inline: 6px; }

  .products .product .caption { padding: 12px 10px 14px; }
  .products .product .product-name,
  .products .product .caption .name { font-size: 13px; line-height: 19px; min-height: 38px; }
  .products .product .caption .name a { line-height: 19px; }
  .products .product .price { font-size: 15px; }
  .rr-categories .tbay-addon-categories .cat-name { font-size: 16px; min-height: 2.4em; }

  /* banners: give the copy room to breathe */
  .rr-banners .elementor-inner-section .elementor-column > .elementor-widget-wrap { padding: 26px 20px 28px !important; }

  /* the fixed bottom bar must not cover the last section */
  body.reparose { padding-bottom: 62px; }
}

/* ---------- mobile side gutters ------------------------------------------
   Every top-level Elementor section is stretched: the module writes an inline
   width equal to the viewport and a negative left offset, escaping the only
   wrapper with side padding. Pad the first element the stretch does not move.
   .elementor-top-section (not .elementor-section) so nested inner sections
   do not double the gutter. */
@media (max-width: 767px) {
  #main-content .elementor-top-section > .elementor-container,
  .tbay-customize-footer .elementor-top-section > .elementor-container { padding-inline: 18px; }

  /* full-bleed sections stay edge to edge */
  #main-content .elementor-section.elementor-section-full_width > .elementor-container,
  .rr-hero > .elementor-container,
  .rr-hero .elementor-top-section > .elementor-container { padding-inline: 0; }

  /* non-Elementor templates: shop, product, archives, blog, account */
  .rr-archive-head { margin-bottom: 26px; }
  .rr-archive-title { font-size: 30px; }
  .tbay-breadscrumb,
  #tbay-breadscrumb { padding-top: 12px !important; }
  .tbay-breadscrumb .breadscrumb-inner,
  #tbay-breadscrumb .breadscrumb-inner { padding-bottom: 10px !important; }
  #tbay-breadscrumb + #main-container,
  #tbay-breadscrumb + #tbay-breadscrumb-title + #main-container { padding-top: 14px !important; }
  #tbay-breadscrumb-title { padding-top: 14px; }
  #tbay-breadscrumb-title .page-title { font-size: 30px !important; }
  /* previous/next product arrows: not worth 50px above the product on a phone */
  .tbay-breadscrumb .product-nav-icon { display: none !important; }
}

@media (max-width: 575px) {
  .tbay-addon-title .title { font-size: 24px; }
  .rr-features .tbay-addon-content .row { gap: 2px 8px; }
  .products .product .caption { padding: 10px 8px 12px; }
}

/* =========================================================================
   Wishlist control

   The plugin fills this button in with script after load, so for a moment the
   markup can render as an oversized icon plus its "Add to wishlist" label
   sitting over the product image. The label is decorative here — the heart
   carries the meaning, and the button keeps its aria-label — so keep it
   hidden unconditionally rather than only once the plugin has initialised.
   ========================================================================= */
.yith-wcwl-add-to-wishlist-button__label,
.yith-wcwl-add-to-wishlist .yith-wcwl-add-to-wishlist-button__label,
.woocommerce .yith-wcwl-add-to-wishlist-button__label { display: none !important; }
.yith-add-to-wishlist-button-block,
.yith-wcwl-add-to-wishlist-button {
  max-width: 100%;
  align-items: center;
  justify-content: center;
}

/* =========================================================================
   Arabic footer

   Elementor stores one alignment per widget, so anything set to `left` when
   the footer was authored stays left in Arabic too. Two widgets are affected:
   the trust column's heading and the logo. Elementor's RTL build rewrites the
   logo's `left` to the logical `end`, which looks like it mirrors but resolves
   to the left again in an RTL line, so it has to be pinned here as well.
   Everything else in the footer is aligned to `start` and mirrors on its own.
   ========================================================================= */
body.rtl .tbay-customize-footer .tbay-addon-title,
body.rtl .tbay-customize-footer .tbay-addon-title .title,
body.rtl .tbay-customize-footer .tbay-addon-title .description,
[dir="rtl"] .tbay-customize-footer .tbay-addon-title,
[dir="rtl"] .tbay-customize-footer .tbay-addon-title .title { text-align: right !important; }

/* the logo. The image itself is inline-block, so the alignment lives on the
   block around it; !important is needed because Elementor's own per-element
   rule is generated into the page. */
body.rtl .tbay-customize-footer .elementor-widget-image > .elementor-widget-container,
[dir="rtl"] .tbay-customize-footer .elementor-widget-image > .elementor-widget-container { text-align: right !important; }

/* =========================================================================
   Arabic / RTL on mobile
   ========================================================================= */
body.rtl .rr-crumbs { direction: rtl; }
@media (max-width: 991px) {
  body.rtl .tbay-addon-features .feature-box .title { font-size: 14px; }
}

/* -------------------------------------------------------------------------
   Product names must wrap to two lines. The theme sets them on a single
   line with an ellipsis, which hides most of a natural-cosmetics name.
   ------------------------------------------------------------------------- */
.products .product .product-name,
.products .product .product-name a,
.products .product .caption h2,
.products .product .caption h3,
.tbay-addon-products .product-name,
.tbay-addon-products .product-name a {
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: hidden;
}
.products .product .product-name a { display: block; }

/* The theme's carousel cards use <h3 class="name"><a> and put the nowrap +
   ellipsis on the anchor, not the heading, so names were cut mid-word. */
.products .product .name,
.products .product .name a,
.tbay-addon-products .name,
.tbay-addon-products .name a,
.product-block .name,
.product-block .name a {
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: hidden;
}
/* the clamp has to sit on the anchor, since that is what holds the text */
.products .product .name a,
.tbay-addon-products .name a,
.product-block .name a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}