/* ---------------------------------------------------------------------------
   The landing page (2026-10-20 design), views/pages/home.php.
   ---------------------------------------------------------------------------
   Drawn right-to-left first, the way the design is: an arrow or a gradient that
   has a direction carries .lp-flip or a [dir=ltr] rule. Every class starts with
   lp- so nothing in styles.css reaches in. The dark copy is generated by
   bin/storefront-dark.php; the surfaces dark by design are kept as they are.
   --------------------------------------------------------------------------- */

:root {
  --lp-navy: #06172E;
  --lp-blue: #0F4C81;
  --lp-gold: #C2975C;
  --lp-cream: #E9C88F;
  --lp-ink: #06172E;
  --lp-text: #4A5F78;
  --lp-muted: #6B7F99;
  --lp-line: #E6EAF0;
  --lp-page: #F3F5F9;
}

body:has(.lp-hero), body:has(.lp-section) { background: var(--lp-page); }

[dir="ltr"] .lp-flip { transform: scaleX(-1); }

.lp-hero, .lp-quick, .lp-section, .lp-benefits { width: min(1200px, calc(100% - 32px)); margin-inline: auto; font-family: var(--sf-font); }
.lp-hero *, .lp-quick *, .lp-section *, .lp-band *, .lp-benefits * { box-sizing: border-box; }
.lp-hero svg, .lp-quick svg, .lp-section svg, .lp-band svg, .lp-benefits svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- shared pieces -------------------------------------------------------- */
.lp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.lp-head__text h2 { margin: 0; display: flex; align-items: center; gap: 12px; color: var(--lp-ink); font: 800 30px/44px var(--sf-font); }
.lp-head__text h2 > i { flex: none; width: 6px; height: 30px; border-radius: 3px; background: linear-gradient(180deg, var(--lp-blue), var(--lp-gold)); }
.lp-head__text p { margin: 6px 0 0; color: var(--lp-muted); font: 400 15px/24px var(--sf-font); }
.lp-head__end { display: flex; align-items: center; gap: 22px; padding-bottom: 4px; }
.lp-more { display: inline-flex; align-items: center; gap: 8px; color: var(--lp-blue); font: 700 15px/24px var(--sf-font); white-space: nowrap; }
.lp-more svg { width: 18px; height: 18px; }
.lp-more:hover span { text-decoration: underline; text-underline-offset: 4px; }
.lp-pager { display: flex; gap: 10px; }
.lp-pager[hidden] { display: none; }
.lp-pager button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid #DDE3EC; border-radius: 50%; background: #fff; color: var(--lp-ink); cursor: pointer; transition: border-color .15s, color .15s; }
.lp-pager button svg { width: 18px; height: 18px; }
.lp-pager button:hover:not(:disabled) { border-color: var(--lp-blue); color: var(--lp-blue); }
.lp-pager button:disabled { opacity: .45; cursor: default; }

.lp-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 26px; border: 0; border-radius: 14px; background: var(--lp-blue); color: #fff; font: 700 15px/1 var(--sf-font); white-space: nowrap; box-shadow: 0 10px 24px rgba(15, 76, 129, .22); transition: background .15s; }
.lp-button svg { width: 18px; height: 18px; }
.lp-button:hover { background: #0B3D69; }
.lp-button.is-ghost { height: 52px; border: 1.5px solid var(--lp-ink); background: #fff; color: var(--lp-ink); box-shadow: none; }
.lp-button.is-ghost:hover { background: #F4F6FA; }

/* Horizontal rows of cards: four across, the rest a scroll away. */
.lp-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px) / 4); gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lp-track::-webkit-scrollbar { display: none; }
.lp-track > * { scroll-snap-align: start; }

/* ---- the banner ------------------------------------------------------------- */
.lp-hero { margin-top: 32px; }
.lp-hero__card { position: relative; min-height: 480px; display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 40px; padding: 42px 64px 40px 28px; border-radius: 40px; overflow: hidden; color: #fff; background: radial-gradient(ellipse 60% 55% at 22% 108%, rgba(160, 170, 182, .42), transparent 70%), linear-gradient(100deg, #06172E 0%, #082144 40%, #0E3260 72%, #194B80 100%); isolation: isolate; }
[dir="ltr"] .lp-hero__card { padding: 42px 28px 40px 64px; background: radial-gradient(ellipse 60% 55% at 78% 108%, rgba(160, 170, 182, .42), transparent 70%), linear-gradient(260deg, #06172E 0%, #082144 40%, #0E3260 72%, #194B80 100%); }
.lp-hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.lp-hero__badge { margin: 0 0 22px; display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 15px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 17px; background: #1C3455; color: #DCE6F3; font: 600 13px/1 var(--sf-font); }
.lp-hero__badge i { width: 8px; height: 8px; border-radius: 50%; background: #4FD1A1; box-shadow: 0 0 0 4px rgba(79, 209, 161, .18); }
.lp-hero h1 { margin: 0; color: #fff; font: 800 46px/66px var(--sf-display); letter-spacing: -.01em; }
.lp-hero h1 em { color: var(--lp-cream); font-style: normal; }
.lp-hero__lead { margin: 18px 0 0; max-width: 520px; color: #C5D0E0; font: 400 16px/29px var(--sf-font); }
.lp-hero__search { margin-top: 21px; width: 100%; height: 60px; display: flex; align-items: center; gap: 10px; padding: 6px; padding-inline-start: 18px; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .18); }
.lp-hero__search > svg { flex: none; width: 20px; height: 20px; color: #6B7F99; }
.lp-hero__search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--lp-ink); font: 400 15px/1 var(--sf-font); }
.lp-hero__search input::placeholder { color: #8A97AB; }
.lp-hero__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.lp-hero__search button { flex: none; height: 48px; padding: 0 26px; border: 0; border-radius: 12px; background: var(--lp-blue); color: #fff; font: 700 15px/1 var(--sf-font); cursor: pointer; }
.lp-hero__search button:hover { background: #0B3D69; }
.lp-hero__quick { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 7px; }
.lp-hero__quick > span { margin-inline-end: 2px; color: #AFC0D6; font: 500 14px/1 var(--sf-font); }
.lp-hero__quick button { height: 30px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; background: #1A2A3E; color: #E6EDF6; font: 600 13px/1 var(--sf-font); cursor: pointer; transition: background .15s, border-color .15s; }
.lp-hero__quick button:hover { border-color: rgba(255, 255, 255, .4); background: #22364F; }

.lp-hero__art { position: relative; min-height: 398px; }
.lp-hero__art[hidden] { display: none; }
.lp-hero__rings { position: absolute; left: 50%; top: 50%; width: 470px; height: 470px; translate: -50% -50%; border: 1px solid rgba(255, 255, 255, .07); border-radius: 50%; pointer-events: none; }
.lp-hero__rings::after { content: ""; position: absolute; inset: -95px; border: 1px solid rgba(255, 255, 255, .05); border-radius: 50%; }
.lp-hero__chip { position: absolute; z-index: 5; top: -7px; left: calc(50% + 99px); margin: 0; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 9px; padding-inline-end: 16px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: rgba(9, 24, 46, .82); backdrop-filter: blur(8px); color: #fff; font: 600 13px/1 var(--sf-font); white-space: nowrap; }
.lp-hero__chip i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #303743; color: var(--lp-cream); }
.lp-hero__chip svg { width: 16px; height: 16px; }
.lp-hero__stack { position: absolute; left: 50%; top: 28px; width: 241px; height: 337px; translate: -50% 0; }

.lp-hcard { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .32); border-radius: 22px; overflow: hidden; color: #fff; background: radial-gradient(circle at 62% 46%, rgba(140, 150, 205, .5), transparent 58%), linear-gradient(170deg, #2442B8 0%, #1A2C86 55%, #0A1240 100%); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .4s, filter .4s; }
.lp-hcard.is-sky { background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, .18), transparent 60%), linear-gradient(160deg, #4A8FDB 0%, #2E68C2 60%, #1F4C9E 100%); }
.lp-hcard.is-black { background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .08), transparent 60%), linear-gradient(165deg, #2A2A2E 0%, #141416 70%, #0B0B0C 100%); }
.lp-hcard[data-place="front"] { z-index: 3; transform: none; }
.lp-hcard[data-place="left"] { z-index: 1; transform: translate(-128px, 46px) rotate(-14deg); filter: saturate(.95); }
.lp-hcard[data-place="right"] { z-index: 2; transform: translate(112px, 18px) rotate(9deg); }
.lp-hcard[data-place="hidden"] { z-index: 0; opacity: 0; transform: scale(.9); }
.lp-hcard__art { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 18px 70px; text-align: center; }
.lp-hcard__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-hcard__art b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 800 24px/1.2 var(--sf-latin); letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
.lp-hcard__art small { color: rgba(225, 230, 245, .78); font: 600 11px/1.4 var(--sf-latin); letter-spacing: .16em; text-transform: uppercase; }
.lp-hcard__tag { position: absolute; z-index: 2; top: 13px; inset-inline-end: 13px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 11px; border-radius: 12px; background: #fff; color: var(--lp-ink); font: 700 11px/1 var(--sf-font); white-space: nowrap; }
.lp-hcard__tag.is-dark { background: rgba(10, 18, 40, .82); color: #fff; }
.lp-hcard__tag svg { width: 12px; height: 12px; color: var(--lp-cream); fill: var(--lp-cream); stroke: none; }
.lp-hcard__foot { position: absolute; z-index: 2; inset: auto 10px 10px; height: 58px; display: flex; align-items: center; gap: 10px; padding: 0 8px; padding-inline-start: 14px; border-radius: 16px; background: #fff; color: var(--lp-ink); }
.lp-hcard__foot span { flex: 1; min-width: 0; display: grid; gap: 3px; }
.lp-hcard__foot b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 13px/1.3 var(--sf-font); }
.lp-hcard__foot em { color: var(--lp-blue); font: 700 13px/1.2 var(--sf-font); font-style: normal; }
.lp-hcard__foot a { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--lp-blue); color: #fff; box-shadow: 0 8px 18px rgba(15, 76, 129, .35); }
.lp-hcard__foot a svg { width: 18px; height: 18px; }
.lp-hcard__link { position: absolute; inset: 0; z-index: 1; }
.lp-hcard:not([data-place="front"]) .lp-hcard__link, .lp-hcard:not([data-place="front"]) .lp-hcard__foot a { pointer-events: none; }

.lp-dots { margin: 14px auto 0; display: flex; justify-content: center; gap: 6px; }
.lp-dots[hidden] { display: none; }
.lp-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: #C7CFDC; cursor: pointer; transition: width .25s, background .25s; }
.lp-dots button[aria-selected="true"] { width: 26px; background: var(--lp-blue); }

/* ---- the three quick cards ------------------------------------------------------ */
.lp-quick { margin-top: 29px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 14px; border-radius: 24px; background: #fff; box-shadow: 0 10px 30px rgba(6, 23, 46, .04); }
.lp-quick__card { min-height: 73px; display: flex; align-items: center; gap: 14px; padding: 0 14px; padding-inline-end: 20px; border-radius: 16px; color: #fff; background: linear-gradient(to left, #06172E 0%, #0B2D55 55%, #0F4C81 100%); transition: transform .15s, box-shadow .15s; }
[dir="ltr"] .lp-quick__card { background: linear-gradient(to right, #06172E 0%, #0B2D55 55%, #0F4C81 100%); }
.lp-quick__card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(6, 23, 46, .18); }
.lp-quick__icon { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: #1F324A; color: var(--lp-cream); }
.lp-quick__icon svg { width: 22px; height: 22px; }
/* An icon chosen in CMS -> Home Page fills the tile (2026-10-23). */
.lp-quick__icon:has(img) { display: block; overflow: hidden; }
.lp-quick__icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-quick__text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.lp-quick__text b { font: 700 16px/1.4 var(--sf-font); }
.lp-quick__text small { overflow: hidden; color: #9FB0C8; font: 400 13px/1.4 var(--sf-font); white-space: nowrap; text-overflow: ellipsis; }
.lp-quick__card > svg { flex: none; width: 20px; height: 20px; color: #8EA2BE; }

/* ---- sections ------------------------------------------------------------------- */
.lp-section { margin-top: 66px; }

/* Categories: three across, a gold-to-blue rule under each, the last card dark. */
.lp-cats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 26px; }
.lp-cat { position: relative; min-height: 106px; display: flex; align-items: center; gap: 16px; padding: 0 22px; border: 1px solid var(--lp-line); border-radius: 20px; background: #fff; color: var(--lp-ink); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.lp-cat[hidden] { display: none; }
.lp-cat::before { content: ""; position: absolute; top: 0; right: 0; width: 34px; height: 34px; background: var(--lp-tint, #DDE6FF); clip-path: polygon(0 0, 100% 0, 100% 100%); }
[dir="ltr"] .lp-cat::before { right: auto; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.lp-cat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(to left, var(--lp-blue), var(--lp-gold)); }
.lp-cat:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(6, 23, 46, .08); }
.lp-tint-0 { --lp-tint: #E4DEFF; }
.lp-tint-1 { --lp-tint: #DDE6FF; }
.lp-tint-2 { --lp-tint: #D9F2E3; }
.lp-tint-3 { --lp-tint: #FFDDE6; }
.lp-tint-4 { --lp-tint: #F7E7C9; }
.lp-cat__icon { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; background: #E8EEFB; color: var(--lp-blue); overflow: hidden; }
.lp-cat__icon img { width: 100%; height: 100%; object-fit: cover; }
.lp-cat__icon img.is-logo { width: 34px; height: 34px; object-fit: contain; }
.lp-cat__icon svg { width: 26px; height: 26px; }
.lp-cat__text { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 10px; }
.lp-cat__text b { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 18px/1.4 var(--sf-font); }
.lp-chip { max-width: 100%; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 12px; overflow: hidden; font: 700 12px/1 var(--sf-font); white-space: nowrap; text-overflow: ellipsis; }
.lp-chip svg { flex: none; width: 13px; height: 13px; }
.lp-chip.is-blue { background: #EEF2FC; color: var(--lp-blue); }
.lp-chip.is-gold { background: #FBF4E8; color: #A0763A; }
.lp-cat__dots { flex: none; display: grid; grid-template-columns: repeat(2, 14px); gap: 6px; }
.lp-cat__dots i { width: 14px; height: 14px; border-radius: 4px; background: #EEF0F5; }
.lp-cat--all { border-color: transparent; color: #fff; background: linear-gradient(to left, #06172E 0%, #0B2357 45%, #1E48C8 100%); }
[dir="ltr"] .lp-cat--all { background: linear-gradient(to right, #06172E 0%, #0B2357 45%, #1E48C8 100%); }
.lp-cat--all::before, .lp-cat--all::after { display: none; }
.lp-cat--all .lp-cat__icon { background: rgba(255, 255, 255, .1); color: var(--lp-cream); }
.lp-cat--all .lp-cat__text { gap: 6px; }
.lp-cat--all .lp-cat__text small { color: #AFC0D6; font: 400 13px/1.4 var(--sf-font); }
.lp-cat__go { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.lp-cat__go svg { width: 18px; height: 18px; }

/* Newest products: a centred heading, the kinds as tabs, a row of cards. */
.lp-new[hidden], .lp-band[hidden] { display: none; }
.lp-new { margin-top: 94px; }
.lp-new__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lp-new__chip { height: 36px; display: inline-flex; align-items: center; padding: 0 18px; border: 1px solid #E1E6EE; border-radius: 18px; background: #fff; color: #5A6B85; font: 500 14px/1 var(--sf-font); }
.lp-new__head h2 { margin: 18px 0 0; color: var(--lp-ink); font: 800 36px/52px var(--sf-font); }
.lp-new__head p { margin: 10px 0 0; color: var(--lp-muted); font: 400 16px/26px var(--sf-font); }
.lp-tabs { width: fit-content; max-width: 100%; margin: 26px auto 30px; display: flex; gap: 4px; padding: 6px; border: 1px solid #E6EAF0; border-radius: 26px; background: #fff; overflow-x: auto; scrollbar-width: none; }
.lp-tabs:empty { display: none; }
.lp-tabs button { flex: none; height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border: 0; border-radius: 20px; background: transparent; color: var(--lp-ink); font: 700 15px/1 var(--sf-font); cursor: pointer; transition: background .15s, color .15s; }
.lp-tabs button svg { width: 18px; height: 18px; }
.lp-tabs button i { min-width: 26px; height: 22px; display: inline-grid; place-items: center; padding: 0 7px; border-radius: 11px; background: #F1F4F9; color: #5A6B85; font: 700 12px/1 var(--sf-font); font-style: normal; }
.lp-tabs button:hover:not([aria-selected="true"]) { background: #F4F6FA; }
.lp-tabs button[aria-selected="true"] { background: var(--lp-blue); color: #fff; }
.lp-tabs button[aria-selected="true"] i { background: rgba(255, 255, 255, .2); color: #fff; }

/* A product card: the picture fills it, the tags on top, the white strip below. */
.lp-pcard { --brand: #6366F1; position: relative; min-height: 378px; border: 1px solid #1A2E52; border-radius: 24px; overflow: hidden; color: #fff; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--brand) 42%, transparent), transparent 62%), linear-gradient(180deg, #0B1F3F 0%, #06142B 100%); isolation: isolate; transition: transform .2s, box-shadow .2s; }
.lp-pcard:hover { transform: translateY(-3px); box-shadow: 0 22px 40px rgba(6, 23, 46, .22); }
.lp-pcard__art { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; padding-bottom: 70px; }
.lp-pcard__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-pcard__glyph { width: 132px; height: 132px; display: grid; place-items: center; border: 2px solid color-mix(in srgb, var(--brand) 70%, #fff); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 45%, transparent), transparent 70%); box-shadow: 0 0 40px color-mix(in srgb, var(--brand) 55%, transparent), inset 0 0 26px color-mix(in srgb, var(--brand) 35%, transparent); color: #fff; }
.lp-pcard__glyph svg { width: 54px; height: 54px; stroke-width: 1.6; }
.lp-pcard__tags { position: absolute; z-index: 2; top: 16px; inset-inline: 14px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.lp-tag { max-width: 60%; display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 12px; border-radius: 14px; overflow: hidden; background: #fff; color: var(--lp-ink); font: 700 12px/1 var(--sf-font); white-space: nowrap; text-overflow: ellipsis; }
.lp-tag.is-dark { margin-inline-start: auto; background: rgba(6, 16, 34, .82); color: #fff; }
.lp-tag svg { flex: none; width: 13px; height: 13px; fill: var(--lp-cream); stroke: none; }
.lp-pcard__term { position: absolute; z-index: 2; top: 56px; inset-inline-end: 14px; width: 48px; height: 57px; display: grid; place-content: center; justify-items: center; gap: 2px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px; background: rgba(255, 255, 255, .08); backdrop-filter: blur(4px); pointer-events: none; }
.lp-pcard__term b { color: var(--lp-cream); font: 800 18px/1 var(--sf-font); }
.lp-pcard__term small { color: #fff; font: 700 9px/1 var(--sf-latin); letter-spacing: .1em; }
.lp-pcard__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.lp-pcard__foot { position: absolute; z-index: 2; inset: auto 12px 12px; min-height: 66px; display: flex; align-items: center; gap: 10px; padding: 9px; padding-inline-start: 16px; border-radius: 18px; background: #fff; color: var(--lp-ink); pointer-events: none; }
.lp-pcard__foot span { flex: 1; min-width: 0; display: grid; gap: 4px; }
.lp-pcard__foot b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 15px/1.35 var(--sf-font); }
.lp-pcard__foot em { color: var(--lp-blue); font: 700 14px/1.2 var(--sf-font); font-style: normal; white-space: nowrap; }
.lp-cart { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--lp-blue); color: #fff; box-shadow: 0 8px 18px rgba(15, 76, 129, .32); pointer-events: auto; transition: background .15s; }
.lp-cart:hover { background: #0B3D69; }
.lp-cart svg { width: 20px; height: 20px; }

/* Gift cards and accounts: a coloured tile, the name, the lowest price. */
.lp-gift { display: flex; flex-direction: column; padding: 12px 12px 18px; border: 1px solid #E8ECF2; border-radius: 24px; background: #fff; color: var(--lp-ink); transition: transform .15s, box-shadow .15s; }
.lp-gift:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(6, 23, 46, .08); }
.lp-gift__tile { position: relative; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 16px; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .14), transparent 55%), var(--lp-tile, #12358E); color: #fff; text-align: center; }
.lp-gift__tile::before { content: ""; position: absolute; left: 12%; top: 22%; width: 34%; height: 46%; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(255, 255, 255, .05); transform: rotate(-14deg); }
.lp-gift__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-gift__tile b { position: relative; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 800 30px/1.15 var(--sf-latin); }
.lp-gift__tile small { position: relative; color: rgba(255, 255, 255, .86); font: 600 13px/1.3 var(--sf-font); }
.lp-gift__name { margin: 18px 4px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 16px/1.4 var(--sf-font); }
.lp-gift__price { margin: 16px 4px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lp-gift__price[hidden] { display: none; }
.lp-gift__price small { color: #8A97AB; font: 400 14px/1 var(--sf-font); }
.lp-gift__price b { font: 800 18px/1 var(--sf-font); white-space: nowrap; }

/* The special offer: the words and the plans beside one large picture. */
.lp-offer__card { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 44px; padding: 28px; padding-inline-start: 40px; border-radius: 32px; background: #fff; box-shadow: 0 20px 50px rgba(6, 23, 46, .05); }
.lp-offer__copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding-top: 10px; }
.lp-offer__badge { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; border-radius: 15px; background: #FBF1E1; color: #A0763A; font: 700 13px/1 var(--sf-font); }
.lp-offer__badge svg { width: 15px; height: 15px; }
.lp-offer__copy h2 { margin: 20px 0 0; color: var(--lp-ink); font: 800 32px/1.5 var(--sf-font); }
.lp-offer__sub { margin: 12px 0 0; color: var(--lp-blue); font: 700 17px/1.6 var(--sf-font); }
.lp-offer__body { margin: 14px 0 0; color: var(--lp-text); font: 400 15px/28px var(--sf-font); }
.lp-plans { width: 100%; margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-plans[hidden] { display: none; }
.lp-plan { position: relative; min-height: 158px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 14px 10px; border: 1px solid var(--lp-line); border-radius: 18px; background: #fff; color: var(--lp-ink); font-family: var(--sf-font); cursor: pointer; transition: border-color .15s, background .15s; }
.lp-plan:hover { border-color: #B9C6EC; }
.lp-plan > i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #EEF2FC; color: var(--lp-blue); }
.lp-plan > i svg { width: 20px; height: 20px; }
.lp-plan > b { max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 700 16px/1.35 var(--sf-font); text-align: center; }
.lp-plan > span { height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 1px solid var(--lp-line); border-radius: 17px; background: #fff; font: 800 15px/1 var(--sf-font); white-space: nowrap; }
.lp-plan > span small { color: #8A97AB; font: 500 11px/1 var(--sf-font); }
.lp-plan > em { position: absolute; top: 9px; inset-inline-end: 9px; height: 20px; display: none; align-items: center; padding: 0 9px; border-radius: 10px; background: var(--lp-blue); color: #fff; font: 700 11px/1 var(--sf-font); font-style: normal; }
.lp-plan[aria-checked="true"] { border: 2px solid var(--lp-blue); background: #EEF3FF; }
.lp-plan[aria-checked="true"] > i { background: var(--lp-blue); color: #fff; }
.lp-plan[aria-checked="true"] > em { display: inline-flex; }
.lp-offer__foot { width: 100%; margin-top: auto; padding-top: 26px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; }
.lp-offer__from { margin: 0; display: grid; gap: 8px; }
.lp-offer__from[hidden] { display: none; }
.lp-offer__from small { color: #8A97AB; font: 400 13px/1 var(--sf-font); }
.lp-offer__from b { color: var(--lp-blue); font: 800 28px/1.1 var(--sf-font); white-space: nowrap; }
.lp-offer__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.lp-offer__art { position: relative; min-height: 440px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; border-radius: 28px; overflow: hidden; color: #fff; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .16), transparent 55%), linear-gradient(160deg, #2C6BD0 0%, #1D50B8 50%, #12399A 100%); }
.lp-offer__art.has-picture { background: #0B1F3F; }
.lp-offer__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-offer__art .lp-offer__star { position: absolute; left: 50%; top: 52%; width: 118%; height: 118%; translate: -50% -50%; fill: none; stroke: rgba(255, 255, 255, .34); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.lp-offer__art .lp-offer__star path { vector-effect: non-scaling-stroke; }
.lp-offer__mark { position: relative; max-width: 86%; display: flex; align-items: center; gap: 18px; direction: ltr; }
.lp-offer__mark i { flex: none; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #1D50B8; }
.lp-offer__mark i svg { width: 30px; height: 30px; }
.lp-offer__mark b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 800 34px/1.2 var(--sf-latin); }
.lp-offer__kind { position: relative; height: 30px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 15px; background: linear-gradient(90deg, #A78BFA, #818CF8); color: #fff; font: 700 13px/1 var(--sf-font); font-style: normal; }

/* The dark band across the page. */
.lp-band { margin-top: 64px; padding: 86px 0 84px; background: linear-gradient(180deg, #0A2A52 0%, #072041 45%, #051730 100%); color: #fff; font-family: var(--sf-font); }
.lp-band__inner { width: min(1200px, calc(100% - 32px)); margin: 0 auto; }
.lp-band .lp-head__text h2 { color: #fff; }
.lp-band .lp-head__text h2 > i { background: linear-gradient(180deg, var(--lp-cream), #3F6FD8); }
.lp-band .lp-head__text p { color: #AFC0D6; }
.lp-band .lp-more { color: var(--lp-cream); }
.lp-band .lp-pager button { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04); color: #fff; }
.lp-band .lp-pager button:hover:not(:disabled) { border-color: var(--lp-cream); color: var(--lp-cream); }
.lp-band .lp-pcard { min-height: 368px; border-color: rgba(232, 236, 242, .72); background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(110, 160, 230, .45), transparent 70%), radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 60%), linear-gradient(180deg, #15284F 0%, #0E1E40 100%); }

/* Hourly rental: the words beside a wall of the tools. */
.lp-rent { margin-top: 88px; }
.lp-rent__card { display: grid; grid-template-columns: minmax(0, 1fr) 614px; align-items: center; gap: 48px; padding: 22px 50px; padding-inline-end: 34px; border: 1px solid #D7E2F7; border-radius: 40px; background: linear-gradient(to left, #F6F9FE 0%, #E7EFFE 100%); }
[dir="ltr"] .lp-rent__card { background: linear-gradient(to right, #F6F9FE 0%, #E7EFFE 100%); }
.lp-rent__copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.lp-rent__badge { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; border-radius: 15px; background: #DEE7FA; color: var(--lp-blue); font: 700 13px/1 var(--sf-font); }
.lp-rent__badge svg { width: 15px; height: 15px; }
.lp-rent__copy h2 { margin: 14px 0 0; color: var(--lp-ink); font: 800 30px/1.9 var(--sf-font); }
.lp-rent__copy h2 em { color: var(--lp-blue); font-style: normal; }
.lp-rent__copy > p { margin: 10px 0 0; color: var(--lp-text); font: 400 15px/30px var(--sf-font); }
.lp-rent__points { margin: 20px 0 0; padding: 0; display: grid; gap: 14px; list-style: none; }
.lp-rent__points li { display: flex; align-items: center; gap: 12px; color: var(--lp-ink); font: 700 15px/1.5 var(--sf-font); }
.lp-rent__points i { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #E3F4EA; color: #2E9E5B; }
.lp-rent__points svg { width: 13px; height: 13px; stroke-width: 3; }
.lp-rent__actions { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.lp-rent__link { color: var(--lp-ink); font: 700 15px/1 var(--sf-font); }
.lp-rent__link:hover { color: var(--lp-blue); }
.lp-rent__tools { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 110px); gap: 16px; list-style: none; }
.lp-rent__tools a { height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px 6px; border-radius: 18px; background: #fff; color: var(--lp-ink); box-shadow: 0 6px 18px rgba(6, 23, 46, .05); text-align: center; transition: transform .15s, box-shadow .15s; }
.lp-rent__tools a:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(6, 23, 46, .1); }
.lp-rent__tools i { width: 72px; height: 64px; display: grid; place-items: center; color: var(--lp-blue); }
.lp-rent__tools img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lp-rent__tools svg { width: 34px; height: 34px; }
.lp-rent__tools b { max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 800 11px/1.3 var(--sf-latin); text-transform: uppercase; }

/* The latest articles. */
.lp-mag { margin-top: 90px; }
.lp-article { min-width: 0; display: flex; flex-direction: column; }
.lp-article__cover { position: relative; height: 198px; display: block; border-radius: 24px; overflow: hidden; background: radial-gradient(circle at 70% 30%, rgba(80, 120, 200, .35), transparent 60%), linear-gradient(160deg, #0E1B33 0%, #050C17 100%); }
.lp-article__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.lp-article:hover .lp-article__cover img { transform: scale(1.04); }
.lp-article__cover > span { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 20px 24px; color: #fff; }
.lp-article__cover small { align-self: flex-end; color: var(--lp-cream); font: 700 11px/1 var(--sf-latin); letter-spacing: .14em; text-transform: uppercase; }
[dir="ltr"] .lp-article__cover small { align-self: flex-start; }
.lp-article__cover b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 800 22px/1.35 var(--sf-font); }
.lp-article h3 { margin: 16px 8px 0; text-align: center; font: 700 15px/1.6 var(--sf-font); }
.lp-article h3 a { color: var(--lp-blue); }
.lp-article h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* The four promises, numbered, with a fading rule under them. */
.lp-benefits { margin-top: 96px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-bottom: 46px; position: relative; }
.lp-benefits::after { content: ""; position: absolute; left: 50%; bottom: 0; width: min(800px, 80%); height: 1px; translate: -50% 0; background: linear-gradient(90deg, transparent, #ACBBE9, transparent); }
.lp-benefit { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lp-benefit__icon { width: 76px; height: 76px; display: grid; place-items: center; border: 1px solid #DCE3F0; border-radius: 50%; background: #fff; color: var(--lp-blue); }
.lp-benefit__icon svg { width: 26px; height: 26px; }
.lp-benefit__icon:has(img) { display: block; overflow: hidden; }
.lp-benefit__icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-benefit h3 { margin: 16px 0 0; color: var(--lp-ink); font: 700 17px/1.5 var(--sf-font); }
.lp-benefit p { margin: 12px 0 0; max-width: 230px; color: var(--lp-muted); font: 400 14px/24px var(--sf-font); }
.lp-benefit small { margin-top: 14px; color: var(--lp-gold); font: 700 13px/1 var(--sf-font); }

/* ---- narrower screens -------------------------------------------------------------- */
@media (max-width: 1240px) {
  .lp-hero, .lp-quick, .lp-section, .lp-benefits, .lp-band__inner { width: calc(100% - 48px); }
  .lp-hero__card { grid-template-columns: minmax(0, 470px) minmax(0, 1fr); padding-inline-start: 48px; }
  .lp-rent__card { grid-template-columns: minmax(0, 1fr) auto; }
  .lp-rent__tools { grid-template-columns: repeat(4, 104px); }
}

@media (max-width: 1100px) {
  .lp-hero__card { grid-template-columns: minmax(0, 1fr); padding: 40px 40px 36px; }
  .lp-hero__art { min-height: 400px; }
  .lp-hero__chip { top: 0; left: calc(50% + 60px); }
  .lp-quick { grid-template-columns: minmax(0, 1fr); }
  .lp-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-track { grid-auto-columns: calc((100% - 48px) / 3); }
  .lp-offer__card { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .lp-offer__art { order: -1; min-height: 320px; }
  .lp-rent__card { grid-template-columns: minmax(0, 1fr); padding: 36px 32px; }
  .lp-rent__tools { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .lp-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}

@media (max-width: 760px) {
  .lp-hero, .lp-quick, .lp-section, .lp-benefits, .lp-band__inner { width: calc(100% - 32px); }
  .lp-hero { margin-top: 20px; }
  .lp-hero__card { padding: 30px 20px 26px; border-radius: 28px; }
  .lp-hero h1 { font-size: 32px; line-height: 48px; }
  .lp-hero__lead { font-size: 15px; line-height: 27px; }
  .lp-hero__search { height: 54px; padding-inline-start: 14px; }
  .lp-hero__search button { height: 42px; padding: 0 18px; }
  .lp-hero__art { min-height: 360px; }
  .lp-hero__stack { scale: .86; transform-origin: 50% 0; }
  .lp-hero__chip { top: 0; left: auto; right: 8px; }
  .lp-section { margin-top: 48px; }
  .lp-head { flex-wrap: wrap; align-items: center; }
  .lp-head__text h2 { font-size: 24px; line-height: 36px; }
  .lp-cats__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lp-cat { min-height: 92px; }
  .lp-new__head h2 { font-size: 28px; line-height: 42px; }
  .lp-tabs { justify-content: flex-start; }
  .lp-track { grid-auto-columns: 78%; gap: 16px; }
  .lp-offer__copy h2 { font-size: 26px; }
  .lp-plans { gap: 10px; }
  .lp-plan { min-height: 140px; }
  .lp-band { padding: 56px 0 60px; }
  .lp-rent__copy h2 { font-size: 26px; }
  .lp-rent__tools { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .lp-rent__tools a { height: 104px; }
  .lp-mag { margin-top: 56px; }
  .lp-benefits { margin-top: 60px; }
}

@media (max-width: 480px) {
  .lp-plans { grid-template-columns: minmax(0, 1fr); }
  .lp-plan { min-height: 0; flex-direction: row; justify-content: flex-start; padding: 12px 14px; }
  .lp-plan > span { margin-inline-start: auto; }
  .lp-offer__actions, .lp-offer__actions .lp-button { width: 100%; }
  .lp-benefits { grid-template-columns: minmax(0, 1fr); }
  .lp-quick__text small { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-hcard, .lp-dots button, .lp-pcard, .lp-cat, .lp-gift, .lp-article__cover img { transition: none; }
}

/* "≈ ۳۵۹٬۰۰۰ تومان" (TomanRate) under a product card's price. */
.lp-pcard__foot .sf-toman { margin-top: 0; color: #6B7280; font: 400 11px/1.3 var(--sf-font); }

/* ---- A product card's picture, whole; its term in the row of labels (1.4.6) ------------------
   The owner: the picture must fill the card and show whole, and "6 HOUR" must sit between the kind
   and the delivery, readable. Cut to the card's tall shape (object-fit: cover), a 1200x600 picture
   showed a slice, and the term's white letters lay on it. The picture now shows whole in the room
   between the labels and the strip below; the labels wrap to a second line rather than cut a word
   off. */
.lp-pcard__tags { inset-inline: 10px; flex-wrap: wrap; align-items: center; gap: 5px; }
.lp-pcard__tags .lp-tag { max-width: 100%; height: 26px; gap: 4px; padding: 0 9px; font-size: 11px; }
.lp-pcard__tags .lp-tag svg { width: 11px; height: 11px; }
.lp-pcard__tags .lp-pcard__term { position: static; flex: none; width: auto; height: 26px; display: inline-flex; flex-direction: row; align-items: baseline; place-content: center; gap: 3px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 13px; background: rgba(6, 16, 34, .82); backdrop-filter: none; line-height: 26px; }
.lp-pcard__tags .lp-pcard__term b { font-size: 13px; line-height: 26px; }
.lp-pcard__tags .lp-pcard__term small { font-size: 8.5px; letter-spacing: .06em; }
/* The picture in a frame of its own, on the card's own colours like its neighbours' icons (the owner:
   "rectangular like the others, with a margin, easier to see - it was too plain"): inset from every
   edge, rounded, a light ring and a shadow; always 2:1, so its place is drawn before it arrives. */
.lp-pcard.has-picture .lp-pcard__art { padding: 62px 18px 96px; }
.lp-pcard.has-picture .lp-pcard__art img { position: static; width: 100%; height: auto; max-height: 100%; aspect-ratio: 2 / 1; object-fit: contain; border-radius: 16px; background-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .16), 0 16px 34px rgba(3, 10, 24, .5); }
.lp-pcard.has-picture .lp-pcard__art img.sf-img-loading { background-color: rgba(255, 255, 255, .1); }
.lp-pcard__tags .lp-tag.is-dark:not(:first-child) { margin-inline-start: 0; }