/*
 * TJL Mobile Layout -- 1.1.0
 *
 * Everything below is inside @media (max-width: 767px), which is Elementor's
 * own mobile breakpoint for this site. Desktop and tablet render exactly as
 * before.
 *
 * This file carries only the things that have NO Elementor control. The page's
 * mobile shape-divider heights and widths, its section padding and the footer's
 * padding are all native responsive controls and are set in Elementor itself
 * (see docs/mobile-header/scripts/mobile-spacing-and-dividers.php for what was
 * set and why) -- deliberately not duplicated here, so there is one source of
 * truth per thing.
 *
 * Targets, for reference:
 *   post 18  home
 *     #tjl-pattern-cards  the world-designs grid (container 8a4766f)
 *     3496d4e             The Plus social feed
 *   post 471 Primary Footer
 *     63f3767             image gallery
 *     6675abed / 1bcdc1f8 / 34f45c5e / 6e1ca1b6  icon lists
 *
 * Each feature is gated on a body class from tjl_ml_body_class(), so Settings
 * -> TJL Mobile Layout can switch any of them off without touching this file.
 */

@media (max-width: 767px) {

/* ==========================================================================
   1. World-designs grid -> two-row carousel
   Six cards in a 2x3 grid run 719px down the page and push "View All Products"
   below the fold. As a two-row carousel they occupy one screen and read the
   same way as the product showcase in the section above, which is already a
   two-row mobile slider (widget 57ccb03, `mobile_slider_rows: 2`).

   Grid rather than flex: `grid-auto-flow: column` with two explicit rows is
   the only declaration that fills DOWN then ACROSS, which is what keeps the
   original pairing (Arabic/Turkish, Kuwaiti/Malaysian, Dubai/Kolkatta) intact
   as columns. A flex row with wrapping cannot express that.
   ========================================================================== */

body.tjl-ml-cards #tjl-pattern-cards > .e-con-inner {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, auto);
	grid-auto-columns: var(--tjl-ml-card-w, 46%);
	align-content: start;
	/* Elementor sets `--justify-content: center` on this container, and on a
	   GRID that centres the tracks rather than the items -- so an overflowing
	   track hangs equally off both ends and its left half can never be scrolled
	   to (scrollLeft is already 0 there). Pinning the tracks to the start is
	   what makes the whole row reachable. */
	justify-content: start !important;
	gap: 16px 14px;
	overflow-x: auto;
	overflow-y: hidden;
	/* `proximity`, not `mandatory`, once the cards are this wide: mandatory
	   fights a slow drag and snaps back the moment the finger lifts short of
	   half a card, which is what made the motion feel grabby. */
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scroll-padding-left: 16px;
	padding-left: 16px;
	padding-right: 16px;
	/* The track is wider than the viewport by design; without this the page
	   itself would gain a horizontal scrollbar. */
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

body.tjl-ml-cards #tjl-pattern-cards > .e-con-inner::-webkit-scrollbar {
	display: none;
}

/* The cards carry `width_mobile: 50%` from Elementor, which fights the grid's
   own track sizing -- the grid decides the column width now. */
body.tjl-ml-cards #tjl-pattern-cards > .e-con-inner > .e-con {
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}

/* Only the first card of each column is a snap point, so a swipe lands on a
   pair rather than halfway between the two rows. */
body.tjl-ml-cards #tjl-pattern-cards > .e-con-inner > .e-con:nth-child(even) {
	scroll-snap-align: none;
}

/* A fixed image box keeps the six title baselines on one line whether a name
   wraps or not -- "Malaysian Designs" wraps at this width and the others do
   not. */
/* 4:5 rather than square: the cards are portrait on a phone and the jewellery
   in these shots is vertical, so a square crop was cutting the necklaces. */
body.tjl-ml-cards #tjl-pattern-cards .elementor-widget-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 10px 26px -14px rgba(27, 14, 40, 0.75);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* A small press response. The card is a link, so it needs to acknowledge the
   tap -- on a scroll track with no hover there is otherwise no feedback at all
   between touching a card and the next page loading. */
body.tjl-ml-cards #tjl-pattern-cards > .e-con-inner > .e-con:active .elementor-widget-image img {
	transform: scale(0.97);
}

body.tjl-ml-cards #tjl-pattern-cards .elementor-heading-title {
	display: block;
	min-height: 2.6em;
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: 0.2px;
}

/* ---- Dots ----------------------------------------------------------------
   Styled to match the product showcase above, whose mobile dots are
   `style-2`: #E4097F active against #FFAFDA. Built by the script from the
   track's own geometry, so the count is always right however many cards the
   client adds. */
body.tjl-ml-cards .tjl-ml-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

body.tjl-ml-cards .tjl-ml-dots button {
	display: block;
	box-sizing: border-box;
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ffafda;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: width 0.25s ease, background 0.25s ease;
}

body.tjl-ml-cards .tjl-ml-dots button[aria-current="true"] {
	width: 24px;
	border-radius: 5px;
	background: #e4097f;
}

/* ==========================================================================
   2. Footer gallery -- back to three columns
   Elementor's own frontend stylesheet carries a hard-coded
   `@media (max-width:479px)` block that sets EVERY gallery column count to
   `max-width:100%`, and `.elementor-image-gallery .gallery-item{width:100%}`
   above it. Neither is a control: `gallery_columns_mobile` is set to 3 on the
   widget and Elementor emits no CSS for it at all. So three portrait images
   stack full-width and run 930px down the phone.

   Grid replaces the inline-block flow entirely, which is also what lets the
   three line up on one row without relying on WordPress's own width maths.
   ========================================================================== */

body.tjl-ml-gallery .elementor-471 .elementor-element-63f3767 .gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 0;
}

body.tjl-ml-gallery .elementor-471 .elementor-element-63f3767 .gallery-item {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	display: block !important;
}

body.tjl-ml-gallery .elementor-471 .elementor-element-63f3767 .gallery-icon,
body.tjl-ml-gallery .elementor-471 .elementor-element-63f3767 .gallery-icon a {
	display: block;
	margin: 0;
}

/* Square crops: the three source images are portrait, landscape and square,
   so without this the row has three different heights. */
body.tjl-ml-gallery .elementor-471 .elementor-element-63f3767 .gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 14px;
}

/* ==========================================================================
   3. Social feed -- arrows that fit the screen
   The prev/next arrows are 60px discs anchored outside the track, so on a
   390px screen they sit over the cards and collide with the floating cart
   bubble in the corner. Same decision as the mega menu carousel in
   tjl-mobile-header: swipe is the control on a phone.
   ========================================================================== */

body.tjl-ml-feed .elementor-18 .elementor-element-3496d4e .slick-nav {
	display: none !important;
}

body.tjl-ml-feed .elementor-18 .elementor-element-3496d4e .slick-list {
	padding: 0 !important;
	overflow: hidden;
}

/* The track is centred on a slide that is narrower than the viewport, so the
   neighbours bleed off both edges with no margin. A little inset turns that
   bleed into a deliberate peek. */
body.tjl-ml-feed .elementor-18 .elementor-element-3496d4e .slick-slide {
	opacity: 1;
}

body.tjl-ml-feed .elementor-18 .elementor-element-3496d4e .slick-slide > div {
	padding: 0 5px;
}

/* ==========================================================================
   4. Footer link lists -- one left edge
   The lists are centre-aligned, so every row centres independently and the
   chevrons form a ragged column: "Cancellations, Returns and Refunds" starts
   36px left of "Payment methods". Centring the BLOCK and left-aligning the
   rows inside it keeps the centred look the design wants and gives the icons
   one edge.
   ========================================================================== */

/* The two column lists (Store Info, Company). Centring the BLOCK and
   left-aligning the rows inside it keeps the centred look the design wants and
   gives the chevrons one edge. */
body.tjl-ml-flist .elementor-471 .elementor-element-6675abed .elementor-icon-list-items,
body.tjl-ml-flist .elementor-471 .elementor-element-1bcdc1f8 .elementor-icon-list-items {
	display: inline-block;
	text-align: left;
}

/* The row <a> is itself `display:flex; justify-content:center`, so without
   this the icon and the label centre as a PAIR inside a fixed-width row and
   the chevrons stay ragged even once the rows are aligned -- "Our Vision and
   Mission" starts 49px left of "About Us". */
body.tjl-ml-flist .elementor-471 .elementor-element-6675abed .elementor-icon-list-item > a,
body.tjl-ml-flist .elementor-471 .elementor-element-1bcdc1f8 .elementor-icon-list-item > a {
	justify-content: flex-start;
}

/* The two bottom-bar lists are a different shape entirely: short link labels
   and the five payment marks, both of which belong on one centred row and
   neither of which has a long item to align to. They are flex rows that wrap,
   NOT left-aligned columns -- the rule above is deliberately not applied to
   them. Without this the payment marks stack one per line, five rows deep. */
body.tjl-ml-flist .elementor-471 .elementor-element-34f45c5e .elementor-icon-list-items,
body.tjl-ml-flist .elementor-471 .elementor-element-6e1ca1b6 .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
}

body.tjl-ml-flist .elementor-471 .elementor-element-34f45c5e .elementor-icon-list-item,
body.tjl-ml-flist .elementor-471 .elementor-element-6e1ca1b6 .elementor-icon-list-item {
	width: auto;
	margin: 0;
}

/* The copyright line runs under the floating cart bubble in the corner. */
body.tjl-ml-flist .elementor-471 .elementor-element-afa8c1e {
	padding-right: 74px;
}

/* The logo column is pulled up 60px to overlap the section above it, which is
   a desktop composition -- on a phone the footer starts at the top of its own
   section, so the pull puts the logo 3px outside the container and the top of
   the wordmark is cut off. */
body.tjl-ml-flist .elementor-471 .elementor-element-21527648 {
	margin-top: 0;
}

/* ==========================================================================
   5. Empty gaps
   ========================================================================== */

/* A tp-shape-divider widget that renders nothing: it measures 0x0, but it is
   still a flex child of a container with a 60px gap, so it collects that gap
   on BOTH sides and costs 120px of blank page between "Fair Price Policy" and
   "Timeless Beauty" for no mark on screen. `display:none` takes it out of the
   flex flow entirely, which removes one of the two. */
body.tjl-ml-gaps .elementor-18 .elementor-element-4cc6886 {
	display: none;
}

}