/* Site-wide tablet-viewport (768–1024px) layout fixes. Elementor gives every
   breakpoint its own settings, and most of the site's tablet behavior is
   fine as-is (inherits sane values) — these are the specific spots found to
   be actually broken at that width, not a wholesale redesign. */

/* Single Product template (applies to every product page): the tablet
   breakpoint had --flex-direction: column-reverse on the image+details
   container, while desktop uses row and mobile correctly uses column. That
   reversal put the price and Add to Cart button above the product photo —
   a shopper saw text and a buy button before ever seeing what the product
   looks like. Forcing the real `flex-direction` property (not just the
   custom property Elementor reads it from) is the most robust override. */
@media (min-width: 768px) and (max-width: 1024px) {
  /* The 3 stacked children (title / gallery / price+cart) live in the
     .e-con-inner wrapper, which is what actually reads the broken
     --flex-direction custom property — not the outer .elementor-element
     itself, which only ever has that one child. */
  .elementor-element-e1bdd73 > .e-con-inner {
    flex-direction: column !important;
  }
}

/* Homepage hero banner (page 15): the hero product image's width is set
   directly per-breakpoint in Elementor (not a percentage that scales) —
   desktop 700px, mobile a fluid 103.157% (fills its column), but tablet
   was left at a flat 375px with no centering margin. That's SMALLER than
   the fluid mobile version and tiny against the 640px-wide column it sits
   in, so it renders small and shoved into the left edge with a big dead
   gap of empty banner to its right instead of looking intentional. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-15 .elementor-element.elementor-element-6641dde {
    width: 75% !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Homepage hero banner CTA row (shipping box / "also available at" logo /
   store locator button, page 15, element ce15c65): Elementor keeps this row
   as flex-direction:row at BOTH desktop and tablet, and only switches to a
   stacked column at the mobile (max-width:767px) breakpoint. On tablet the
   three items are squeezed into the same 640px-wide column that desktop has
   over 1000px+ to work with, so it reads cramped and misaligned. Matching
   mobile's already-correct stacked layout (per the user's explicit ask) here
   too, with mobile's own row-gap since a column layout needs vertical gap
   instead of the row layout's horizontal 30px gap. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-15 .elementor-element.elementor-element-ce15c65 {
    flex-direction: column !important;
    row-gap: 20px !important;
    column-gap: 0 !important;
  }
}