/* ==========================================================================
   Nairomart single-product landing page (/offer/{slug})
   Markup: resources/views/landing/show.blade.php. All classes start with "lp-".
   ========================================================================== */

:root {
  --or: #f7931e; /* the store's theme orange (modern.css --or), so buttons match the rest of the site */
  --or-d: #e07b00;
  --or-l: #fff4ea;
  --or-b: #ffd9b8;
  --ink: #16181d;
  --mut: #6b7280;
  --line: #e8eaee;
  --bg: #fff;
  --soft: #f7f8fa;
  --r: 16px;
  --font: "Hind Siliguri", "Poppins", system-ui, sans-serif;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  font-size: 15px;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[hidden] {
  display: none !important;
}
.lp-w {
  width: min(1240px, 100% - 32px);
  margin-inline: auto;
}

/* ===== top bar ===== */
.lp-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fffffff2;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.lp-bar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 66px;
}
.lp-logo img {
  height: 46px;
  width: auto;
}
.lp-trust {
  display: flex;
  gap: 34px;
  align-items: center;
}
.lp-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
  font-family: "Poppins", var(--font);
}
.lp-trust svg {
  width: 24px;
  height: 24px;
  color: var(--or);
}
.lp-call {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--or);
  color: #fff;
  border-radius: 14px;
  padding: 8px 18px 8px 14px;
  box-shadow: 0 10px 20px -10px #f26b0f99;
}
.lp-call svg {
  width: 22px;
  height: 22px;
}
.lp-call span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.lp-call b {
  font: 700 13.5px Poppins, sans-serif;
}
.lp-call small {
  font-size: 12px;
  opacity: 0.92;
}

/* ===== layout ===== */
.lp-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 28px;
  align-items: start;
  padding-top: 24px;
  padding-bottom: 48px;
}
.lp-left {
  min-width: 0;
}
.lp-order {
  border: 1.5px solid var(--or-b);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--or-l), #fff 180px);
  padding: 18px 18px 20px;
}

/* ===== hero ===== */
.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 26px;
}
.lp-gal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 10px;
  align-content: start;
}
.lp-stage {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #eceff3;
  aspect-ratio: 4 / 5;
}
.lp-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-off {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  background: var(--or);
  color: #fff;
  font: 700 12.5px Poppins, sans-serif;
  padding: 5px 11px;
  border-radius: 8px;
}
.lp-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  box-shadow: 0 6px 16px -4px #0004;
  display: grid;
  place-items: center;
}
.lp-nav.l {
  left: 10px;
}
.lp-nav.r {
  right: 10px;
}
.lp-nav svg {
  width: 20px;
  height: 20px;
}
.lp-nav.l svg {
  transform: rotate(90deg);
}
.lp-nav.r svg {
  transform: rotate(-90deg);
}
.lp-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-thumbs button {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #eceff3;
  opacity: 0.8;
}
.lp-thumbs button.on {
  border-color: var(--or);
  opacity: 1;
}
.lp-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-tag {
  display: inline-block;
  background: var(--or);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 6px;
}
.lp-info h1 {
  margin: 8px 0 2px;
  font: 700 28px/1.2 Poppins, var(--font);
  letter-spacing: -0.2px;
}
.lp-sub {
  margin: 0;
  color: var(--mut);
  font-size: 14px;
}
.lp-rate {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 6px;
  font-size: 13px;
}
.lp-stars {
  color: #f59e0b;
  letter-spacing: 1px;
}
.lp-price {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}
.lp-price b {
  font: 800 36px/1 Poppins, sans-serif;
  color: var(--or);
}
.lp-price s {
  color: #9ca3af;
  font: 500 16px Poppins, sans-serif;
}
.lp-price em {
  font: 700 13px Poppins, sans-serif;
  font-style: normal;
  background: var(--or);
  color: #fff;
  padding: 4px 10px;
  border-radius: 8px;
}
.lp-intro {
  margin: 0 0 16px;
  color: #4b5563;
  font-size: 14.5px;
}
.lp-feats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.lp-feats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font: 500 11.5px/1.25 Poppins, sans-serif;
  color: #374151;
}
.lp-feats span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--or-b);
  background: var(--or-l);
  color: var(--or);
}
.lp-feats svg {
  width: 22px;
  height: 22px;
}
.lp-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}
.lp-opt > b {
  font: 600 13.5px Poppins, sans-serif;
  min-width: 46px;
}
.lp-sw {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px #d1d5db;
}
.lp-sw.on {
  box-shadow: 0 0 0 2px var(--or);
}
.lp-sizes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lp-sizes button {
  min-width: 44px;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1.5px solid #dcdfe6;
  background: #fff;
  font: 600 13px Poppins, sans-serif;
}
.lp-sizes button.on {
  border-color: var(--or);
  background: var(--or-l);
  color: var(--or-d);
}
.lp-sizes button.out {
  color: #b6bbc4;
  text-decoration: line-through;
  cursor: not-allowed;
  background: var(--soft);
}
.lp-sizes.wide button {
  flex: 1;
  height: 40px;
}
.lp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f7791f, var(--or));
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 14px 24px -12px #f26b0faa;
  transition: transform 0.15s;
}
.lp-cta:hover {
  transform: translateY(-1px);
}
.lp-cta svg {
  width: 22px;
  height: 22px;
}
.lp-stock {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 0;
  font-size: 13px;
  color: #4b5563;
}
.lp-stock .ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #16a34a;
  font-weight: 600;
}
.lp-stock .ok svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
}
.lp-stock i {
  width: 1px;
  height: 14px;
  background: #cfd3da;
}

/* ===== trust strip ===== */
.lp-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 26px 0 8px;
  background: var(--or-l);
  border: 1px solid var(--or-b);
  border-radius: var(--r);
}
.lp-strip > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
  border-left: 1px solid var(--or-b);
}
.lp-strip > div:first-child {
  border-left: 0;
}
.lp-strip svg {
  flex: none;
  width: 36px;
  height: 36px;
  color: var(--or);
}
.lp-strip p {
  margin: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.lp-strip b {
  font-size: 14px;
}
.lp-strip span {
  font-size: 12px;
  color: var(--mut);
}

/* ===== sections ===== */
.lp-sec {
  margin-top: 34px;
}
.lp-sec h2 {
  margin: 0;
  font-size: 23px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-sec-sub {
  margin: 4px 0 14px 14px;
  color: var(--mut);
  font-size: 13.5px;
}
.lp-sec > h2 {
  margin-bottom: 14px;
}
.lp-sec-sub + * {
  margin-top: 0;
}
.lp-sec > h2:has(+ .lp-sec-sub) {
  margin-bottom: 0;
}
.lp-det {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.lp-box {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px;
  background: #fff;
}
.lp-box p {
  margin: 0 0 12px;
  color: #374151;
}
.lp-box h3 {
  margin: 0 0 10px;
  font-size: 16px;
}
.lp-ticks li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
  font-weight: 500;
}
.lp-ticks svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--or);
  stroke-width: 2.6;
}
.lp-spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.lp-spec th,
.lp-spec td {
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--line);
}
.lp-spec th {
  width: 42%;
  font-weight: 500;
  background: var(--soft);
}
.lp-revs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.lp-revs figure {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.lp-revs figcaption {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-bottom: 6px;
}
.lp-av {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--or-l);
  color: var(--or-d);
  font: 700 15px Poppins, sans-serif;
}
.lp-revs figcaption b {
  font: 600 13.5px Poppins, sans-serif;
}
.lp-revs figcaption small {
  flex-basis: 100%;
  margin-left: 48px;
  margin-top: -18px;
  color: var(--mut);
  font-size: 12px;
}
.lp-revs blockquote {
  margin: 6px 0 0;
  color: #4b5563;
  font-size: 13.5px;
}
.lp-faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  align-items: start;
}
.lp-faq details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.lp-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  font-weight: 600;
  font-size: 14.5px;
}
.lp-faq summary::-webkit-details-marker {
  display: none;
}
.lp-faq summary i {
  flex: none;
  width: 18px;
  height: 18px;
  position: relative;
}
.lp-faq summary i::before,
.lp-faq summary i::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--or);
  transition: transform 0.2s;
}
.lp-faq summary i::after {
  transform: rotate(90deg);
}
.lp-faq details[open] summary i::after {
  transform: rotate(0);
}
.lp-faq details p {
  margin: 0;
  padding: 0 16px 14px;
  color: #4b5563;
  font-size: 14px;
}

/* ===== order form ===== */
.lp-oh {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.lp-oh svg.big {
  width: 34px;
  height: 34px;
  color: var(--or);
  grid-row: span 2;
}
.lp-oh h2 {
  margin: 0;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
}
.lp-oh p {
  margin: 0;
  color: var(--mut);
  font-size: 13px;
}
.lp-mini {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: var(--or-l);
}
.lp-mini img {
  width: 56px;
  height: 70px;
  object-fit: cover;
  border-radius: 10px;
}
.lp-mini div {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.lp-mini b {
  font: 600 13.5px Poppins, sans-serif;
}
.lp-mini small {
  color: var(--mut);
  font-size: 12px;
}
.lp-mini span {
  color: var(--or-d);
  font: 700 15px Poppins, sans-serif;
}
.lp-mini s {
  color: #9ca3af;
  font-weight: 500;
  font-size: 12px;
}
.lp-f {
  display: block;
  margin-bottom: 12px;
}
.lp-f > span {
  display: block;
  margin-bottom: 5px;
  font-size: 13.5px;
  font-weight: 600;
}
.lp-f > span i {
  color: #e11d48;
  font-style: normal;
}
.lp-f > div:not(.lp-sizes):not(.lp-qty):not(.lp-pays) {
  position: relative;
}
.lp-f > div > svg:first-child {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 19px;
  height: 19px;
  transform: translateY(-50%);
  color: #6b7280;
  pointer-events: none;
}
.lp-f input:not([type="radio"]),
.lp-f select {
  width: 100%;
  height: 46px;
  border: 1.5px solid #e1e4ea;
  border-radius: 12px;
  background: #fff;
  padding: 0 12px 0 40px;
  font-size: 14px;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.lp-two .lp-f:last-child select {
  padding-left: 12px;
}
.lp-f select {
  padding-right: 30px;
  text-overflow: ellipsis;
}
.lp-f select:disabled {
  background: var(--soft);
  color: #9ca3af;
}
.lp-f svg.dd {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: #6b7280;
  pointer-events: none;
}
.lp-f input:focus,
.lp-f select:focus {
  border-color: var(--or);
  box-shadow: 0 0 0 3px #f26b0f22;
}
.lp-f.bad input,
.lp-f.bad select {
  border-color: #e11d48;
}
.lp-f em {
  display: block;
  min-height: 0;
  margin-top: 4px;
  font-size: 12.5px;
  font-style: normal;
  color: #e11d48;
}
.lp-f em:empty {
  display: none;
}
.lp-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.lp-qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #e1e4ea;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.lp-qty button {
  width: 42px;
  height: 40px;
  border: 0;
  background: transparent;
  font-size: 20px;
}
.lp-qty b {
  min-width: 36px;
  text-align: center;
  font-family: Poppins, sans-serif;
}
.lp-pays {
  display: grid;
  gap: 8px;
}
.lp-pays label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.lp-pays label.on {
  border-color: var(--or);
  background: var(--or-l);
}
.lp-pays input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.lp-pays .pi {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--or);
}
.lp-pays .pi svg {
  width: 26px;
  height: 26px;
}
.lp-pays .pi.bk svg,
.lp-pays .pi.ng svg {
  fill: none;
  stroke: none;
}
.lp-pays .pi.ng svg circle:first-child {
  stroke: #ee4023;
}
.lp-pays p {
  margin: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.lp-pays b {
  font: 600 13.5px Poppins, sans-serif;
}
.lp-pays small {
  color: var(--mut);
  font-size: 12px;
}
.lp-payhint {
  margin: 8px 0 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  font-size: 12.5px;
  color: #92400e;
}
.lp-sum {
  margin: 16px 0 12px;
}
.lp-sum h3 {
  margin: 0 0 8px;
  font-size: 17px;
}
.lp-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  color: #4b5563;
  font-size: 14px;
}
.lp-row b {
  font-family: Poppins, sans-serif;
  font-weight: 600;
  color: var(--ink);
}
.lp-shipnote {
  margin: 0 0 4px;
  font-size: 11.5px;
  color: var(--mut);
}
.lp-row.tot {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1.5px dashed var(--or-b);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.lp-row.tot b {
  font-size: 22px;
  font-weight: 800;
  color: var(--or);
}
.lp-secure {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  margin-bottom: 12px;
}
.lp-secure svg {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--or);
}
.lp-secure p {
  margin: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.lp-secure b {
  font: 600 12.5px Poppins, sans-serif;
}
.lp-secure small {
  color: var(--mut);
  font-size: 12px;
}
.lp-submit {
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #f7791f, var(--or));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 14px 24px -12px #f26b0faa;
}
.lp-submit svg {
  width: 20px;
  height: 20px;
}
.lp-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}
.lp-form-err {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff1f2;
  color: #be123c;
  font-size: 13px;
}
.lp-fine {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--mut);
}
.lp-fine a {
  color: var(--or-d);
  text-decoration: underline;
}
.lp-done {
  text-align: center;
  padding: 18px 6px 8px;
}
.lp-done .tick {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #16a34a;
  color: #fff;
}
.lp-done .tick svg {
  width: 34px;
  height: 34px;
  stroke-width: 3;
}
.lp-done h2 {
  margin: 0 0 6px;
  font-size: 22px;
}
.lp-done p {
  margin: 6px 0;
  color: #4b5563;
  font-size: 14px;
}
.lp-done b {
  color: var(--ink);
  font-family: Poppins, sans-serif;
}
.lp-done-sum {
  font-weight: 600;
}
.lp-wa,
.lp-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  margin-top: 12px;
  border-radius: 12px;
  font-weight: 700;
}
.lp-wa {
  background: #25d366;
  color: #fff;
}
.lp-wa svg {
  width: 22px;
  height: 22px;
}
.lp-back {
  border: 1.5px solid var(--or);
  color: var(--or-d);
}

/* ===== footer ===== */
.lp-foot {
  border-top: 1px solid var(--line);
  background: #fff;
}
.lp-foot-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 30px;
  padding: 22px 0 18px;
}
.lp-copy {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
  color: #9ca3af;
  font-size: 12px;
}
.lp-sticky {
  display: none;
}

/* ===== tablet ===== */
@media (max-width: 1080px) {
  .lp-main {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
  }
  .lp-hero {
    grid-template-columns: 1fr;
  }
  .lp-gal {
    max-width: 520px;
  }
  .lp-trust {
    gap: 18px;
  }
  .lp-revs {
    grid-template-columns: 1fr;
  }
}

/* ===== phones: one column, form right after the product ===== */
@media (max-width: 860px) {
  body {
    padding-bottom: 84px;
  }
  .lp-trust {
    display: none;
  }
  .lp-foot .lp-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
  }
  .lp-bar-in {
    height: 58px;
  }
  .lp-logo img {
    height: 40px;
  }
  .lp-call {
    padding: 7px 14px 7px 11px;
  }
  .lp-main {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 14px;
  }
  .lp-left {
    display: contents;
  }
  .lp-hero {
    order: 1;
    gap: 16px;
  }
  .lp-strip {
    order: 2;
    grid-template-columns: 1fr 1fr;
    margin-top: 18px;
  }
  .lp-strip > div:nth-child(3) {
    border-left: 0;
  }
  .lp-strip > div:nth-child(n + 3) {
    border-top: 1px solid var(--or-b);
  }
  .lp-order {
    order: 3;
    margin-top: 22px;
    scroll-margin-top: 70px;
  }
  .lp-sec {
    order: 4;
  }
  .lp-gal {
    max-width: none;
    grid-template-columns: 1fr;
  }
  .lp-info h1 {
    font-size: 23px;
  }
  .lp-price b {
    font-size: 30px;
  }
  .lp-det,
  .lp-faq,
  .lp-pic,
  .lp-why {
    grid-template-columns: 1fr;
  }
  .lp-sec h2 {
    font-size: 20px;
  }
  .lp-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 24px -14px #0003;
    transition: transform 0.25s;
  }
  .lp-sticky.off {
    transform: translateY(110%);
  }
  .lp-sticky div {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }
  .lp-sticky small {
    color: var(--mut);
    font-size: 11.5px;
  }
  .lp-sticky b {
    font: 800 21px Poppins, sans-serif;
    color: var(--or);
  }
  .lp-sticky a {
    flex: 1;
    max-width: 230px;
    height: 48px;
    border-radius: 13px;
    background: var(--or);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .lp-sticky svg {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 420px) {
  .lp-w {
    width: calc(100% - 24px);
  }
  .lp-call b {
    font-size: 12px;
  }
  .lp-feats {
    gap: 4px;
  }
  .lp-feats li {
    font-size: 10.5px;
  }
  .lp-strip > div {
    padding: 12px 10px;
    gap: 8px;
  }
  .lp-strip svg {
    width: 28px;
    height: 28px;
  }
  .lp-strip b {
    font-size: 12.5px;
  }
  .lp-strip span {
    font-size: 11px;
  }
}

/* ==========================================================================
   v2 design: news ticker, landscape hero photo, photo gallery, "why" cards, dark footer
   ========================================================================== */
:root {
  --ink: #15233f;
  --mut: #5d6b86;
  --soft: #f3f6fb;
}
body {
  background: linear-gradient(180deg, #fff 0, #f6f8fc 420px, #f6f8fc 100%);
}

/* news-style ticker */
.lp-news {
  display: flex;
  align-items: stretch;
  height: 36px;
  background: #0d1a33;
  color: #fff;
  font-size: 13.5px;
  overflow: hidden;
}
.lp-news-l,
.lp-news-c {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #d90429;
  font-weight: 700;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
.lp-news-l {
  padding: 0 26px 0 16px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.lp-news-l svg {
  width: 19px;
  height: 19px;
}
.lp-news-c {
  padding: 0 18px 0 26px;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%);
  font-family: Poppins, sans-serif;
  font-size: 13px;
}
.lp-news-t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.lp-news-m {
  display: flex;
  width: max-content;
  animation: lp-news 46s linear infinite;
}
.lp-news-t:hover .lp-news-m {
  animation-play-state: paused;
}
.lp-news-m p {
  display: flex;
  margin: 0;
  white-space: nowrap;
}
.lp-news-m span {
  padding: 0 22px;
  position: relative;
}
.lp-news-m span::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: #ffffff55;
}
@keyframes lp-news {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-news-m {
    animation: none;
  }
}

/* header */
.lp-bar {
  background: #fff;
  backdrop-filter: none;
  border-bottom: 1px solid #eef0f5;
}
.lp-trust li {
  font-family: var(--font);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.lp-call small {
  letter-spacing: 0.2px;
}

/* hero photo: landscape with a thumbnail row underneath */
.lp-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
}
.lp-gal {
  display: block;
}
.lp-stage {
  aspect-ratio: 5 / 4;
  border-radius: 16px;
}
.lp-stage img {
  object-position: 50% 22%;
}
.lp-thumbs {
  flex-direction: row;
  gap: 10px;
  margin-top: 10px;
}
.lp-thumbs button {
  flex: 1;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 10px;
}
.lp-info h1 {
  font-size: 26px;
}
.lp-price b {
  font-size: 34px;
}
.lp-feats span {
  border: 0;
  background: transparent;
  width: 34px;
  height: 34px;
}
.lp-feats svg {
  width: 28px;
  height: 28px;
}
.lp-strip {
  background: #fff;
  border: 1px solid #ffe3cc;
  box-shadow: 0 10px 24px -20px #f26b0f66;
}
.lp-strip svg {
  width: 40px;
  height: 40px;
}

/* section headings */
.lp-sec h2 {
  font-size: 22px;
  color: var(--ink);
}
.lp-sec-sub {
  margin-left: 0;
}
.lp-sec-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.lp-sec-h h2 {
  margin: 0;
}
.lp-sec-h a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--or-d);
  font-size: 13.5px;
  font-weight: 600;
}
.lp-sec-h a svg {
  width: 16px;
  height: 16px;
}

/* gallery: one big photo + six small ones */
.lp-pic {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 14px;
}
.lp-pic figure {
  margin: 0;
  overflow: hidden;
  background: #e8ecf3;
}
.lp-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.lp-pic figure:hover img {
  transform: scale(1.04);
}
.lp-pic-big {
  border-radius: 16px;
  min-height: 220px;
}
.lp-pic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.lp-pic-grid figure {
  border-radius: 12px;
  aspect-ratio: 1 / 1.08;
}

/* "why this product": banner card + six feature cards */
.lp-why {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.lp-why-b {
  position: relative;
  min-height: 260px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 24px 28px;
  color: #fff;
  background:
    linear-gradient(180deg, #2b000a22 10%, #12000ad9 88%),
    var(--bg) center / cover no-repeat;
}
.lp-why-b::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background: var(--or);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
}
.lp-why-b h3 {
  margin: 0 0 6px;
  font-size: 23px;
  line-height: 1.3;
}
.lp-why-b p {
  margin: 0;
  font-size: 14px;
  opacity: 0.92;
}
.lp-why-g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.lp-why-g > div {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px -14px #1b2a4a55;
}
.lp-why-g img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #e8ecf3;
}
.lp-why-g p {
  margin: 0;
  padding: 9px 10px 11px;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.lp-why-g b {
  font-size: 13.5px;
  color: var(--ink);
}
.lp-why-g small {
  color: var(--mut);
  font-size: 11.5px;
}

/* details, reviews, faq */
.lp-box {
  border-color: #e6eaf2;
}
.lp-revs figure {
  border-color: #e6eaf2;
  background: #fff;
  box-shadow: 0 8px 20px -18px #1b2a4a66;
}
.lp-stars em {
  font-style: normal;
  color: var(--mut);
  font-size: 12px;
  margin-left: 4px;
  letter-spacing: 0;
}
.lp-faq details {
  border-color: #e6eaf2;
}
.lp-faq summary {
  justify-content: flex-start;
  gap: 10px;
}
.lp-faq summary .q {
  flex: none;
  width: 17px;
  height: 17px;
  color: #6b7a99;
}
.lp-faq details[open] summary .q {
  transform: rotate(180deg);
}
.lp-faq summary span {
  flex: 1;
}

/* dark footer with an orange edge */
.lp-foot {
  position: relative;
  margin-top: 28px;
  background: #0b0f19;
  color: #e5e7eb;
  border-top: 0;
}
.lp-foot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
  background: linear-gradient(100deg, var(--or) 0 9%, transparent 9% 91%, var(--or) 91%);
  clip-path: polygon(0 100%, 0 0, 9% 100%, 91% 100%, 100% 0, 100% 100%);
}
.lp-foot-in {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px 44px;
  padding: 26px 0 18px;
}
.lp-foot-brand p {
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #cbd2e0;
}
.lp-foot-brand i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--or);
}
.lp-foot .lp-trust {
  justify-content: center;
}
.lp-foot .lp-trust li {
  color: #e5e7eb;
  font-size: 12.5px;
}
.lp-follow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.lp-follow a {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #fff;
}
.lp-follow svg {
  width: 24px;
  height: 24px;
}
.lp-foot-b {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 14px;
  border-top: 1px solid #ffffff1f;
  font-size: 12px;
  color: #9aa3b5;
}
.lp-foot-b p {
  margin: 0;
}
.lp-foot-b a + a {
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid #ffffff33;
}

@media (max-width: 860px) {
  .lp-news {
    height: 32px;
    font-size: 12.5px;
  }
  .lp-news-l {
    padding: 0 20px 0 12px;
  }
  .lp-news-c {
    display: none;
  }
  .lp-gal {
    max-width: none;
  }
  .lp-stage {
    aspect-ratio: 1 / 1;
  }
  .lp-pic-big {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .lp-foot-in {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .lp-foot .lp-trust {
    justify-content: flex-start;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
@media (max-width: 520px) {
  .lp-why-g {
    grid-template-columns: repeat(2, 1fr);
  }
  .lp-pic-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
}

@media (max-width: 1080px) {
  .lp-hero {
    grid-template-columns: 1fr;
  }
  .lp-stage {
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 860px) {
  .lp-stage {
    aspect-ratio: 1 / 1;
  }
}

/* ==========================================================================
   v3: taller hero photo, auto-changing gallery, banner arrows, overlapping feature cards, order form last on phones
   ========================================================================== */
.lp-stage {
  aspect-ratio: 1 / 1.1;
}
.lp-pic-big {
  position: relative;
}
.lp-pic-big img.fx {
  animation: lp-fade 0.6s ease;
}
@keyframes lp-fade {
  from {
    opacity: 0.15;
    transform: scale(1.03);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.lp-pic-grid button {
  padding: 0;
  border: 2.5px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  background: #e8ecf3;
  aspect-ratio: 1 / 1.08;
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.lp-pic-grid button:hover {
  transform: translateY(-2px);
}
.lp-pic-grid button.on {
  border-color: var(--or);
  box-shadow: 0 0 0 2px #f26b0f33;
}
.lp-pic-grid button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-why-b {
  transition: background-image 0.3s;
}
.lp-ar {
  position: absolute;
  top: 38%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  z-index: 2;
  box-shadow: 0 4px 10px -2px #0006;
}
.lp-ar.l {
  left: 12px;
}
.lp-ar.r {
  right: 12px;
}
.lp-ar svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}
.lp-ar.l svg {
  transform: rotate(90deg);
}
.lp-ar.r svg {
  transform: rotate(-90deg);
}
.lp-why-g > div {
  position: relative;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.lp-why-g img {
  aspect-ratio: 1 / 0.92;
  border-radius: 12px;
}
.lp-why-g p {
  position: relative;
  margin: -34px 7px 0;
  padding: 9px 11px 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 22px -12px #1b2a4a77;
}
@media (max-width: 1080px) {
  .lp-stage {
    aspect-ratio: 1 / 1;
  }
}
@media (max-width: 860px) {
  .lp-stage {
    aspect-ratio: 4 / 5;
  }
  .lp-sec {
    order: 4;
  }
  .lp-order {
    order: 5;
    margin-top: 34px;
  }
}

/* v3 fixes: taller gallery (small photos stretch to the big one), small overlap on feature cards */
.lp-pic {
  align-items: stretch;
}
.lp-pic-big {
  min-height: 0;
  aspect-ratio: 1 / 1;
}
.lp-pic-grid {
  grid-template-rows: 1fr 1fr;
}
.lp-pic-grid button {
  aspect-ratio: auto;
  height: 100%;
}
.lp-why {
  align-items: stretch;
}
.lp-why-g {
  align-content: start;
}
.lp-why-g img {
  aspect-ratio: 1 / 0.95;
}
.lp-why-g p {
  margin-top: -26px;
}
/* desktop: the order panel follows the page (top is set by landing.js) */
.lp-order {
  position: sticky;
  top: 82px;
}
@media (max-width: 860px) {
  .lp-order {
    position: static;
  }
  .lp-pic-big {
    aspect-ratio: 1 / 1;
  }
  .lp-pic-grid button {
    aspect-ratio: 1 / 1.08;
    height: auto;
  }
}
.lp-why {
  margin-top: 22px;
}

/* "why" banner: photo cut on a slant, so an orange wedge (thick on the left, thin on the right) shows underneath */
.lp-why-b {
  background: var(--or);
  isolation: isolate;
}
.lp-why-b::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, #2b000a22 10%, #12000ad9 88%),
    var(--bg) center / cover no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4px), 0 calc(100% - 20px));
  transition: background-image 0.3s;
}
.lp-why-b::after {
  display: none;
}
.lp-why-b {
  padding-bottom: 38px;
}

/* "why" banner photo is a real <img> (a CSS url() inside a variable breaks on some hosts) */
.lp-why-b {
  background: var(--or);
}
.lp-why-b::before {
  background: linear-gradient(180deg, #2b000a22 10%, #12000ad9 88%);
  z-index: 1;
}
.lp-why-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4px), 0 calc(100% - 20px));
}
.lp-why-b h3,
.lp-why-b p {
  position: relative;
  z-index: 2;
}
.lp-ar {
  z-index: 3;
}

/* phones and small tablets: every section is one column (must stay the last block) */
@media (max-width: 860px) {
  .lp-pic,
  .lp-why,
  .lp-det,
  .lp-faq,
  .lp-revs {
    grid-template-columns: 1fr;
  }
  .lp-pic-big {
    aspect-ratio: 1 / 1;
  }
  .lp-pic-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    gap: 8px;
  }
  .lp-pic-grid button {
    aspect-ratio: 1 / 1.08;
    height: auto;
  }
  .lp-why-b {
    min-height: 250px;
  }
  .lp-why-b h3 {
    font-size: 21px;
  }
  .lp-why-g {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 10px;
  }
  .lp-why-g p b {
    font-size: 13px;
  }
}


/* "why" banner: photo cut in a V shape (centre lowest) with a thin orange edge, like the design */
.lp-why-b{background:none;overflow:visible;border-radius:0;padding:22px 24px 56px;isolation:isolate}
.lp-why-b::after{display:block;content:"";position:absolute;inset:0;height:auto;z-index:0;background:var(--or);border-radius:16px 16px 0 0;clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),50% calc(100% - 8px),0 calc(100% - 30px))}
.lp-why-img{z-index:1;border-radius:16px 16px 0 0;clip-path:polygon(0 0,100% 0,100% calc(100% - 35px),50% calc(100% - 13px),0 calc(100% - 35px))}
.lp-why-b::before{z-index:2;border-radius:16px 16px 0 0;background:linear-gradient(180deg,#0a000500 0%,#0a000538 38%,#0a0005e8 80%);clip-path:polygon(0 0,100% 0,100% calc(100% - 35px),50% calc(100% - 13px),0 calc(100% - 35px))}
.lp-why-b h3,.lp-why-b p{z-index:3}
.lp-ar{z-index:4}
/* v4: order form at the bottom on desktop, hero zoom + autoplay, size chart, Bangla reviews */
.lp-main{display:flex;flex-direction:column;gap:0}
.lp-left{display:contents}
.lp-hero{order:1}.lp-strip{order:2}.lp-sec{order:4}
.lp-order{order:5;position:static;align-self:center;width:min(760px,100%);margin-top:34px}
@media(min-width:861px){
body{padding-bottom:84px}
.lp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:22px;padding:10px 16px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -10px 24px -14px #0003;transition:transform .25s}
.lp-sticky.off{transform:translateY(110%)}
.lp-sticky div{display:flex;flex-direction:column;line-height:1.15}
.lp-sticky small{color:var(--mut);font-size:11.5px}
.lp-sticky b{font:800 21px Poppins,sans-serif;color:var(--or)}
.lp-sticky a{height:46px;padding:0 34px;border-radius:13px;background:var(--or);color:#fff;font-weight:700;display:flex;align-items:center;gap:8px}
.lp-sticky svg{width:20px;height:20px}
}
/* hero zoom + autoplay */
.lp-stage{cursor:zoom-in;touch-action:pan-y}
.lp-stage img{transition:transform .25s ease-out}
.lp-stage.zm img{transform:scale(2.3);transition:none}
.lp-zb,.lp-pp{position:absolute;z-index:3;width:38px;height:38px;border:0;border-radius:50%;background:#fff;box-shadow:0 6px 16px -4px #0004;display:grid;place-items:center;color:var(--ink)}
.lp-zb{right:12px;top:12px}.lp-pp{right:58px;top:12px}
.lp-zb svg,.lp-pp svg{width:19px;height:19px}
.lp-pp .pl{display:none}.lp-pp.off .pl{display:block}.lp-pp.off .ps{display:none}
.lp-prog{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--or);transform-origin:left;transform:scaleX(0);z-index:3}
.lp-prog.run{animation:lpProg var(--t,3.5s) linear forwards}
@keyframes lpProg{to{transform:scaleX(1)}}
.lp-lb{position:fixed;inset:0;z-index:200;background:#080d18f2;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
.lp-lb[hidden]{display:none!important}
.lp-lb img{max-width:92vw;max-height:84vh;object-fit:contain;cursor:zoom-in;user-select:none;-webkit-user-drag:none;transition:transform .2s}
.lp-lb.z img{cursor:grab;transition:none}
.lp-lb button{position:absolute;width:44px;height:44px;border:0;border-radius:50%;background:#ffffff26;color:#fff;display:grid;place-items:center;font-size:22px;backdrop-filter:blur(6px)}
.lp-lb button svg{width:22px;height:22px}
.lp-lb .x{top:14px;right:14px}.lp-lb .zi{top:14px;right:68px}.lp-lb .zo{top:14px;right:122px}
.lp-lb .pv{left:14px;top:50%}.lp-lb .nx{right:14px;top:50%}
.lp-lb .pv svg{transform:rotate(90deg)}.lp-lb .nx svg{transform:rotate(-90deg)}
.lp-lb .ct{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#fff;font:500 13px Poppins,sans-serif;opacity:.8}
/* size chart */
.lp-unit{display:inline-flex;padding:3px;border-radius:10px;background:#e8ecf3}
.lp-unit button{border:0;background:transparent;padding:5px 14px;border-radius:8px;font-weight:600;font-size:13px;color:var(--mut)}
.lp-unit button.on{background:#fff;color:var(--or-d);box-shadow:0 2px 6px #0002}
.lp-sz{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
.lp-szt{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;text-align:center}
.lp-szt th{background:#0d1a33;color:#fff;font-weight:600;padding:11px 8px;font-size:13px}
.lp-szt th:first-child{border-radius:10px 0 0 0}.lp-szt th:last-child{border-radius:0 10px 0 0}
.lp-szt td{padding:12px 8px;border-bottom:1px solid var(--line);font-family:Poppins,sans-serif;font-weight:500;transition:background .2s}
.lp-szt td:first-child{font-weight:700;color:var(--ink)}
.lp-szt tbody tr{cursor:pointer}
.lp-szt tbody tr:hover td{background:var(--soft)}
.lp-szt tbody tr.on td{background:var(--or-l);color:var(--or-d);font-weight:700}
.lp-szn{margin:12px 0 0;font-size:12.5px;color:var(--mut)}
.lp-how{display:flex;flex-direction:column;gap:10px}
.lp-how svg{width:100%;max-width:230px;margin:0 auto;display:block;fill:none}
.lp-how h3{margin:0}
.lp-how li{display:flex;gap:10px;align-items:flex-start;padding:5px 0;font-size:13.5px;color:#374151}
.lp-how li i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--or);color:#fff;font:700 12px/22px Poppins,sans-serif;text-align:center;font-style:normal}
.lp-how a{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:11px;background:#25d366;color:#fff;font-weight:700;font-size:14px;margin-top:4px}
/* reviews */
.lp-rv{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.lp-rv-sum{position:sticky;top:90px;padding:22px;border-radius:18px;color:#fff;background:linear-gradient(160deg,#0d1a33,#1c2f57);overflow:hidden}
.lp-rv-sum::after{content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;background:var(--or);opacity:.28}
.lp-rv-big{display:flex;align-items:flex-end;gap:10px;position:relative;z-index:1}
.lp-rv-big b{font:800 54px/1 Poppins,sans-serif}
.lp-rv-big span{padding-bottom:6px;font-size:13px;opacity:.8}
.lp-rv-sum .lp-stars{font-size:18px;display:block;margin:6px 0 14px;position:relative;z-index:1}
.lp-bar5{display:grid;grid-template-columns:34px 1fr 20px;gap:8px;align-items:center;font-size:12.5px;margin:6px 0;position:relative;z-index:1}
.lp-bar5 i{height:7px;border-radius:7px;background:#ffffff26;overflow:hidden;font-style:normal}
.lp-bar5 i u{display:block;height:100%;background:#f59e0b;border-radius:7px}
.lp-rv-sum a{display:flex;align-items:center;justify-content:center;height:44px;margin-top:16px;border-radius:12px;background:var(--or);font-weight:700;position:relative;z-index:1}
.lp-rv-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lp-rc{position:relative;padding:20px 20px 16px;border-radius:16px;background:#fff;border:1px solid #e6eaf2;box-shadow:0 10px 24px -20px #1b2a4a88;display:flex;flex-direction:column;gap:10px}
.lp-rc::before{content:"\201C";position:absolute;right:16px;top:-4px;font:800 70px/1 Georgia,serif;color:var(--or-b)}
.lp-rc-h{display:flex;align-items:center;gap:11px}
.lp-rc .lp-av{width:42px;height:42px;font:700 17px var(--font);color:#fff;background:var(--g)}
.lp-rc-h b{display:block;font-size:14.5px;line-height:1.25}
.lp-rc-h small{color:var(--mut);font-size:12px}
.lp-rc .lp-stars{font-size:15px}
.lp-rc p{margin:0;color:#374151;font-size:14.5px;line-height:1.65}
.lp-rc-f{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.lp-rc-f span{padding:3px 10px;border-radius:20px;background:var(--or-l);color:var(--or-d);font-size:12px;font-weight:600}
.lp-rc-f span+span{background:var(--soft);color:var(--mut)}
@media(max-width:1080px){.lp-sz,.lp-rv{grid-template-columns:1fr}.lp-rv-sum{position:static}}
@media(max-width:860px){
.lp-rv-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
.lp-rv-list::-webkit-scrollbar{display:none}
.lp-rc{flex:0 0 84%;scroll-snap-align:center}
.lp-lb .pv{left:6px}.lp-lb .nx{right:6px}
}
@media(prefers-reduced-motion:reduce){.lp-prog.run{animation:none}}
/* v5: tighter spacing rhythm, fuller desktop layout */
:root{--sec:28px}
.lp-main{padding-top:18px;padding-bottom:28px}
.lp-sec{margin-top:var(--sec)}
.lp-sec>h2,.lp-sec-h{margin-bottom:12px}
.lp-sec-sub{margin:2px 0 12px}
.lp-strip{margin:20px 0 0}
.lp-foot{margin-top:24px}
.lp-box{padding:16px 18px}
.lp-det{align-items:stretch}
.lp-det .lp-box:first-child{display:flex;flex-direction:column;justify-content:center;gap:4px}
.lp-ticks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lp-ticks li{padding:9px 12px;border-radius:10px;background:var(--or-l);font-size:13.5px}
@media(min-width:1081px){
.lp-stage{aspect-ratio:1/1}
.lp-info{align-self:center}
.lp-order{width:100%;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:30px;padding:26px;align-items:start;margin-top:var(--sec)}
}
.lp-ordside{position:sticky;top:90px;display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:16px;color:#fff;background:linear-gradient(160deg,#0d1a33,#1c2f57);overflow:hidden}
.lp-ordside img{width:100%;max-height:340px;object-fit:cover;object-position:50% 25%;border-radius:12px}
.lp-ordside h3{margin:0;font:700 19px/1.3 Poppins,var(--font)}
.lp-ordside .pr{font:800 28px Poppins,sans-serif;color:#ffb26b}
.lp-ordside .pr s{font:500 14px Poppins;color:#9fb0d0;margin-left:8px}
.lp-ordside ul{display:grid;gap:8px}
.lp-ordside li{display:flex;gap:10px;align-items:center;font-size:13.5px;color:#dbe4f5}
.lp-ordside li svg{flex:none;width:18px;height:18px;color:#ffb26b;stroke-width:2.6}
.lp-ordside a{display:flex;align-items:center;justify-content:center;height:44px;border-radius:12px;background:#25d366;color:#fff;font-weight:700;font-size:14px}
@media(max-width:1080px){.lp-order{width:min(760px,100%);display:block}.lp-ordside{display:none}}
@media(max-width:860px){
:root{--sec:22px}
.lp-main{padding-top:10px;padding-bottom:20px}
.lp-order{width:100%;margin-top:var(--sec);padding:16px 14px 18px}
.lp-stage{aspect-ratio:1/1}
.lp-strip{margin-top:14px}
.lp-box{padding:14px}
.lp-ticks{grid-template-columns:1fr}
.lp-why-b{min-height:200px;padding-bottom:34px}
.lp-sec h2{font-size:19px}
.lp-foot-in{padding:18px 0 14px;gap:12px}
.lp-rv-sum{padding:18px}
.lp-rv-big b{font-size:44px}
}
.lp-feats{display:grid!important;grid-template-columns:repeat(4,1fr);gap:0;margin:14px 0}
.lp-feats li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:4px 6px;border-left:1px solid var(--line);font-size:12.5px;line-height:1.3}
.lp-feats li:first-child{border-left:0}.lp-feats li small{color:var(--mut);font-size:11.5px}.lp-feats li b{font-weight:600}
.lp-box h3{margin:0 0 10px;font-size:17px}
.lp-ticks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;padding:0;list-style:none}
.lp-ticks li{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;background:var(--or-l);font-size:13.5px}
.lp-ticks li svg{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:var(--or);color:#fff;stroke-width:3.2}
.lp-spec{width:100%;border-collapse:collapse;border:1px solid var(--line)}
.lp-spec th,.lp-spec td{padding:10px 14px;border-bottom:1px solid var(--line);font-size:14px;text-align:left}
.lp-spec th{width:42%;background:#f6f8fc;font-weight:600}
.lp-how-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.lp-unit button.on{background:var(--or);color:#fff;box-shadow:none}
.lp-how li span b{color:var(--ink)}
.lp-faq summary .q{display:none}
.lp-faq summary{justify-content:space-between!important}
.lp-faq summary i{width:9px!important;height:9px!important;background:none!important;border:solid var(--or);border-width:0 2px 2px 0;transform:rotate(45deg);margin:0 4px 3px;flex:none}
.lp-faq summary i::before,.lp-faq summary i::after{display:none!important}
.lp-faq details[open] summary i{transform:rotate(-135deg);margin-bottom:-3px}
.lp-rv-sum .lp-stars{display:inline-block;margin:8px 8px 14px 0}.lp-rv-cnt{font-size:13px;opacity:.85}
.lp-rc{gap:8px;padding:16px 18px}.lp-rc::before{color:#f3d9c4;font-size:56px}
.lp-rc .lp-av{box-shadow:none}.lp-rc p{font-size:14px}
.lp-rc-f span{display:inline-flex;align-items:center;gap:6px;border-radius:8px}
.lp-rc-f svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
@media(max-width:860px){.lp-feats li{padding:4px 2px;font-size:11.5px}.lp-ticks{grid-template-columns:1fr}.lp-how-h{flex-wrap:wrap}}
@media(min-width:861px){.lp-sticky{display:none!important}body{padding-bottom:0!important}}
.lp-main>*{align-self:stretch!important;width:100%;max-width:none;margin-left:0;margin-right:0;box-sizing:border-box}
.lp-main>.lp-sec{margin-top:var(--sec)}
.lp-main>.lp-order{margin-top:var(--sec)}
@media(min-width:1081px){
.lp-hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;align-items:start!important}
.lp-info{align-self:start!important;padding-top:0}
.lp-info>.lp-tag{margin-top:0}
}
.lp-sz{align-items:stretch}
.lp-sz>.lp-box:first-child{display:flex;flex-direction:column}
.lp-szt{flex:1}
.lp-szt td{font-size:15.5px;padding:14px 8px}
.lp-szn{margin-top:12px}
.lp-main{align-items:stretch!important}
.lp-main .lp-left>*,.lp-main>.lp-order{align-self:stretch!important;width:100%;max-width:none;margin-left:0;margin-right:0;box-sizing:border-box}
/* brighter, higher-contrast photos in the gallery and "why" sections */
.lp-pic img,.lp-why-g img,.lp-why-img{filter:brightness(1.15) contrast(1.08) saturate(1.1)}
.lp-pic figure,.lp-pic-grid button,.lp-why-g img{background:#fff}
.lp-pic-big,.lp-pic-grid button,.lp-why-g img{box-shadow:0 0 0 1px #dfe5f0}
.lp-why-b::before{background:linear-gradient(180deg,#0a000500 0%,#0a000500 50%,#0a0005a6 100%)!important}
.lp-why-b h3,.lp-why-b p{text-shadow:0 1px 3px #000d,0 0 16px #000a}
.lp-why-b p{opacity:1!important}
/* banner height now follows the photo's shape, so it is barely cropped; original full-photo design kept */
.lp-why-b{min-height:0!important;aspect-ratio:3/2}
@media(max-width:860px){.lp-why-b{aspect-ratio:4/3}}
#lpBig,.lp-why-g img,.lp-why-b{cursor:zoom-in}
.lp-pic-big.zm img{transform:scale(2.2)!important;transition:none!important}
.lp-zl{z-index:300}

/* header logo = same as the shop header: butterfly + "Nairo" + orange "mart" */
.lp-brand { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; }
.lp-brand img { height: 44px; width: auto; display: block; }
.lp-brand span { font: 800 28px/1 Poppins, sans-serif; letter-spacing: -0.03em; color: #1a1a1a; }
.lp-brand b { color: #f7931e; font-weight: 800; }
@media (max-width: 760px) {
  .lp-brand { gap: 8px; min-width: 0; }
  .lp-brand img, .lp-logo.lp-brand img { height: 34px; }
  .lp-brand span { font-size: 22px; }
}
@media (max-width: 380px) {
  .lp-brand { gap: 6px; }
  .lp-brand img, .lp-logo.lp-brand img { height: 28px; }
  .lp-brand span { font-size: 19px; }
}

/* mobile: the review summary's decorative circle must stay clipped (position:static let it widen the page),
   and the review carousel bleeds by the real page gutter (12px on small phones) */
@media (max-width: 1080px) { .lp-rv-sum { position: relative; top: auto; } }
@media (max-width: 420px) { .lp-rv-list { margin-inline: -12px; padding-inline: 12px; } }

/* very small phones (320px): header = logo + call button must fit in one row */
@media (max-width: 345px) {
  .lp-call { gap: 6px; padding: 6px 9px 6px 8px; }
  .lp-call b { font-size: 12px; }
  .lp-call svg { width: 16px; height: 16px; }
  .lp-call small { display: none; }
  .lp-brand img, .lp-logo.lp-brand img { height: 26px; }
  .lp-brand span { font-size: 17px; }
}

/* ==========================================================================
   Landing page: "Explore Your Style in 360" section (.s3-*, wrapper .lp-360)
   Same design as the home page showcase (copied from nairomart.css), so the landing page
   does not need the storefront stylesheet. Script: public/js/landing/showcase360.js
   ========================================================================== */
.lp-360 {
  --ink: #15233f;
  --mut: #6b7280;
  --line: #e6e9f0;
  margin: var(--sec, 28px) 0 0;
  font-family: inherit;
  order: 1; /* 2nd section: .lp-main is a flex column ordered by .lp-hero 1 (first in the page), then this, .lp-strip 2, .lp-sec 4, .lp-order 5 */
}
:where(.lp-360) button { font: inherit; border: 0; background: none; color: inherit; padding: 0; margin: 0; cursor: pointer; border-radius: 0; }
:where(.lp-360) a { color: inherit; }
:where(.lp-360) h2, :where(.lp-360) h3, :where(.lp-360) p, :where(.lp-360) ul { margin: 0; padding: 0; }
:where(.lp-360) ul { list-style: none; }
.lp-360 a.s3-go { text-decoration: none; }
/* simple full-screen photo viewer used by the zoom button */
.s3-lb { position: fixed; inset: 0; z-index: 2147483000; background: #000d; display: grid; place-items: center; padding: 16px; }
.s3-lb[hidden] { display: none; }
.s3-lb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.s3-lb button { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: #15233f; font-size: 26px; line-height: 1; cursor: pointer; }

.s3-h {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.s3-ey {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f26b0f;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.06em;
}
.s3-ey:before,
.s3-ey:after {
  content: "";
  width: 22px;
  height: 2px;
  background: #f26b0f;
}
.s3-h h2 {
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.1;
  font-weight: 800;
  margin: 6px 0;
}
.s3-h h2 b {
  color: #f26b0f;
}
.s3-h p {
  color: var(--mut);
  font-size: 14px;
}
.s3-ft {
  display: flex;
  list-style: none;
  gap: 0;
}
.s3-ft li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-left: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 500;
}
.s3-ft li:first-child {
  border-left: 0;
}
.s3-ft svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.s3-wrap {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}
.s3-stage {
  position: relative;
  height: clamp(380px, 38vw, 540px);
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 38%, #2b2420 0, #14110f 55%, #0a0908 100%);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  outline: 0;
  cursor: grab;
}
.s3-c,
.s3-c * {
  touch-action: pan-y;
}
.s3-stage:before,
.s3-stage:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(#f26b0f00, #ff8a2a, #f26b0f00);
  box-shadow: 0 0 26px 6px #f26b0f66;
  opacity: 0.9;
}
.s3-stage:before {
  left: 9%;
}
.s3-stage:after {
  right: 9%;
}
.s3-row {
  position: absolute;
  left: 0;
  right: 0;
  top: 14%;
  bottom: 12%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 4.5%;
  perspective: 900px;
}
.s3-c {
  position: relative;
  height: 84%;
  aspect-ratio: 4/5;
  transition:
    transform 0.35s,
    opacity 0.35s,
    filter 0.35s;
  animation: s3in 0.4s both;
}
.s3-c img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  border: 1px solid #ffffff26;
  box-shadow: 0 18px 40px #000a;
  pointer-events: none;
}
.s3-c.l,
.s3-c.r {
  height: 66%;
  margin-top: 9%;
  opacity: 0.7;
  filter: brightness(0.7);
  cursor: pointer;
}
.s3-c.m {
  height: 92%;
  z-index: 2;
  transition: transform 0.35s;
}
.s3-c.m img {
  box-shadow:
    0 0 0 2px #f26b0f66,
    0 22px 50px #000c,
    0 0 60px #f26b0f40;
}
@keyframes s3in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.s3-hint {
  position: absolute;
  left: 5%;
  top: 36%;
  color: #fff;
  text-align: center;
  font-size: 14px;
  transition: opacity 0.4s;
}
.s3-hint svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  display: block;
  margin: 0 auto 6px;
}
.s3-hint b {
  display: block;
  font-weight: 600;
}
.s3-hint small {
  color: #bbb;
  font-size: 11.5px;
}
.s3-hint.off {
  opacity: 0;
}
.s3-ar {
  position: absolute;
  top: 50%;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border-radius: 50%;
  border: 1.5px solid #ffffff88;
  background: #0006;
  display: grid;
  place-items: center;
  z-index: 5;
}
.s3-ar:hover {
  background: #f26b0f;
  border-color: #f26b0f;
}
.s3-ar.l {
  left: 20px;
}
.s3-ar.r {
  right: 20px;
}
.s3-ar svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.s3-dt {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.s3-dt i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ffffff55;
  cursor: pointer;
}
.s3-dt i.on {
  background: #f26b0f;
  box-shadow: 0 0 10px #f26b0f;
}
.s3-chip {
  position: absolute;
  right: 22px;
  bottom: 22px;
  display: flex;
  border: 1px solid #ffffff30;
  border-radius: 999px;
  background: #000a;
  color: #fff;
  font-size: 12px;
  overflow: hidden;
}
.s3-chip span {
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.s3-chip span:first-child {
  border-right: 1px solid #ffffff30;
  font-weight: 600;
}
.s3-chip svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #f26b0f;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.s3-bar {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr auto;
  gap: 26px;
  align-items: center;
  padding: 20px 28px;
}
.s3-in h3 {
  font-size: 19px;
  font-weight: 700;
  border-left: 4px solid #f26b0f;
  padding-left: 9px;
  line-height: 1.2;
}
.s3-in div {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.s3-in b {
  font-size: 30px;
  color: #f26b0f;
  font-weight: 800;
}
.s3-in span {
  color: #f58a14;
  letter-spacing: 2px;
  font-size: 14px;
}
.s3-in small {
  color: var(--mut);
  font-size: 12.5px;
}
.s3-cs {
  border-inline: 1px solid var(--line);
  padding: 0 24px;
}
.s3-cs > small {
  display: block;
  color: var(--mut);
  font-size: 12.5px;
  margin-bottom: 8px;
}
.s3-cs {
  min-width: 0;
}
.s3-cs > div {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: 92px;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 9px 9px 4px 4px;
  margin: -9px -9px 0 -4px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #f26b0f55 transparent;
  overscroll-behavior-x: contain;
}
.s3-cs > div::-webkit-scrollbar {
  height: 5px;
}
.s3-cs > div::-webkit-scrollbar-thumb {
  background: #f26b0f55;
  border-radius: 5px;
}
.s3-sw {
  scroll-snap-align: start;
}
.s3-sw {
  width: 92px;
  text-align: center;
  font-size: 12px;
  color: var(--ink);
}
.s3-sw span {
  position: relative;
  display: block;
  border: 2px solid #e4e4e4;
  border-radius: 12px;
  padding: 4px;
  background: #fafafa;
}
.s3-sw img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.s3-sw small {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.s3-sw.on span {
  border-color: #f26b0f;
}
.s3-sw.on span:after {
  content: "✓";
  position: absolute;
  right: -7px;
  top: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f26b0f;
  color: #fff;
  font-size: 12px;
  display: grid;
  place-items: center;
}
.s3-sw.on small {
  color: #f26b0f;
  font-weight: 600;
}
.s3-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #f26b0f;
  color: #fff;
  font-weight: 700;
  padding: 16px 34px;
  border-radius: 999px;
  box-shadow: 0 8px 20px #f26b0f55;
  white-space: nowrap;
}
.s3-go:hover {
  background: #d95a08;
}
.s3-go svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 900px){
.s3-ft {
    display: none;
  }
.s3-bar {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px;
  }
.s3-cs {
    border: 0;
    padding: 0;
  }
.s3-go {
    width: 100%;
  }
.s3-ar {
    width: 42px;
    height: 42px;
    margin-top: -21px;
  }
.s3-ar.l {
    left: 8px;
  }
.s3-ar.r {
    right: 8px;
  }
.s3-dt {
    right: 10px;
  }
.s3-chip {
    right: 12px;
    bottom: 12px;
  }
.s3-chip span {
    padding: 8px 12px;
  }
.s3-c.l,
  .s3-c.r {
    display: none;
  }
.s3-c.m {
    height: 94%;
  }
.s3-hint {
    left: 4%;
    top: auto;
    bottom: 6%;
    text-align: left;
  }
.s3-hint svg {
    display: none;
  }
.s3-stage {
    height: 430px;
  }
.s3-stage:before {
    left: 4%;
  }
.s3-stage:after {
    right: 4%;
  }
}
.s3-row {
  display: block;
  perspective: 1100px;
  gap: 0;
}
.s3-c {
  position: absolute;
  left: 50%;
  top: 0;
  height: 90%;
  width: auto;
  aspect-ratio: 4/5;
  margin: 0;
  transition: none;
  animation: none;
  will-change: transform, opacity;
  cursor: pointer;
  transform-origin: 50% 50%;
}
.s3-c.c {
  cursor: grab;
}
.s3-in3 {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.s3-f,
.s3-b {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.s3-b {
  transform: rotateY(180deg);
}
.s3-b img {
  filter: brightness(0.8);
}
.s3-b.dm:after {
  content: "Back view (demo photo)";
}
.s3-b:after {
  content: "Back view";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  text-align: center;
  font-size: 11px;
  color: #fff;
  background: #000a;
  border-radius: 999px;
  padding: 4px;
}
.s3-c img {
  box-shadow: 0 18px 40px #000a;
}
.s3-c.c img {
  box-shadow:
    0 0 0 2px #f26b0f88,
    0 22px 50px #000c,
    0 0 calc(70px * var(--g, 0)) #f26b0f55;
}
.s3-c.pop {
  animation: s3pop 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes s3pop {
  0% {
    filter: brightness(1);
  }
  35% {
    filter: brightness(1.25) drop-shadow(0 0 28px #f26b0f);
  }
  100% {
    filter: brightness(1);
  }
}
.s3-chip {
  padding: 0;
}
.s3-chip button {
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ddd;
  font-size: 12px;
  transition: 0.2s;
}
.s3-chip button + button {
  border-left: 1px solid #ffffff30;
}
.s3-chip button.on {
  background: #f26b0f;
  color: #fff;
  font-weight: 700;
}
.s3-chip button.on svg {
  stroke: #fff;
}
.s3-chip button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: #f26b0f;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.s3-chip.spin button[data-s3m="360"] svg {
  animation: s3sp 1.2s linear infinite;
}
@keyframes s3sp {
  to {
    transform: rotate(360deg);
  }
}
.s3-in.f {
  animation: s3fd 0.45s both;
}
@keyframes s3fd {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.s3-stage.m3 {
  cursor: ew-resize;
}
.s3-go {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}
@media (max-width: 900px){
.s3-row {
    top: 12%;
    bottom: 9%;
  }
.s3-c {
    height: 92%;
  }
}
.s3-stage:before,
.s3-stage:after {
  display: none;
}
.s3-hint {
  left: 24px;
  right: auto;
  top: auto;
  bottom: 22px;
  text-align: left;
  max-width: 46%;
  pointer-events: none;
}
.s3-hint svg {
  display: none;
}
.s3-hint b {
  font-size: 14px;
}
.s3-hint small {
  display: block;
}
.s3-ar {
  left: auto;
  right: auto;
}
.s3-ar.l {
  left: 18px;
}
.s3-ar.r {
  right: 18px;
}
.s3-dt {
  top: auto;
  right: auto;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  flex-direction: row;
  gap: 10px;
  z-index: 6;
  padding: 7px 12px;
  border-radius: 999px;
  background: #0007;
}
.s3-dt i {
  width: 9px;
  height: 9px;
}
@media (max-width: 900px){
.s3-hint {
    left: 14px;
    bottom: 16px;
    max-width: 38%;
  }
.s3-hint small {
    display: none;
  }
.s3-dt {
    bottom: 62px;
  }
.s3-chip {
    bottom: 12px;
  }
}
.s3-stage {
  height: clamp(440px, 46vw, 640px);
  background: #0a0908 url("../images/banners/hero-bg.webp") 50% 100% / cover no-repeat;
}
.s3-row {
  top: 4%;
  bottom: 32%;
}
.s3-c {
  height: 100%;
  transform-origin: 50% 100%;
  translate: 0 calc((1 - var(--g, 0)) * -14px);
}
.s3-c img {
  box-shadow: 0 8px 26px #000b;
}
.s3-c:before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -13px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #000d 0, #0000 70%);
  filter: blur(3px);
  z-index: -1;
  pointer-events: none;
}
.s3-c:after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -20px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #f26b0f99 0, #f26b0f00 70%);
  opacity: var(--g, 0);
  z-index: -1;
  pointer-events: none;
}
.s3-cnt {
  display: none;
  font-style: normal;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0 4px;
}
.s3-chip {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 900px){
.s3-stage {
    height: clamp(400px, 115vw, 520px);
  }
.s3-row {
    top: 5%;
    bottom: 32%;
  }
.s3-dt {
    bottom: 64px;
    gap: 0;
    padding: 6px 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
.s3-dt i {
    display: none;
  }
.s3-cnt {
    display: block;
  }
.s3-hint {
    bottom: 18px;
    max-width: 34%;
  }
.s3-hint b {
    font-size: 13px;
  }
}
.s3-h {
  position: relative;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.s3-h:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 84px;
  height: 3px;
  border-radius: 3px;
  background: #f26b0f;
}
.s3-wrap {
  margin-top: 20px;
  border: 1px solid #e6d9c8;
  box-shadow: 0 14px 34px -22px #0005;
}
@media (min-width: 901px){
.s3-stage {
    height: auto;
    aspect-ratio: 2.2/1;
    background-position: 50% 46%;
  }
.s3-row {
    top: 4%;
    bottom: 26%;
  }
}
.s3-bar {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
  gap: 0;
  padding: 22px 28px;
  border-top: 3px solid #f26b0f;
}
.s3-in {
  padding-right: 22px;
}
.s3-in p.d {
  margin-top: 10px;
  color: var(--mut);
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.s3-cs {
  position: relative;
}
.s3-cs > div {
  grid-template-rows: auto;
  grid-auto-columns: 86px;
  scrollbar-width: none;
  padding: 9px 30px 4px 30px;
  margin: -9px 0 0 0;
}
.s3-cs > div::-webkit-scrollbar {
  display: none;
}
.s3-sw {
  width: 86px;
}
.s3-sa {
  position: absolute;
  top: calc(50% + 4px);
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: 50%;
  border: 1px solid #e4d6c6;
  background: #fff;
  box-shadow: 0 3px 10px #0002;
  display: grid;
  place-items: center;
  z-index: 2;
  cursor: pointer;
}
.s3-sa.l {
  left: 20px;
}
.s3-sa.r {
  right: 20px;
}
.s3-sa svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.s3-sa:hover {
  background: #f26b0f;
  border-color: #f26b0f;
}
.s3-sa:hover svg {
  stroke: #fff;
}
.s3-ac {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 210px;
  padding-left: 24px;
}
.s3-go {
  padding: 15px 28px;
}
.s3-wl {
  position: static;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1.5px solid #e4d6c6;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  box-shadow: none;
  cursor: pointer;
  white-space: nowrap;
}
.s3-wl svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}
.s3-wl:hover {
  border-color: #f26b0f;
  color: #f26b0f;
}
.s3-wl.on {
  color: #e0364f;
  border-color: #e0364f;
}
.s3-wl.on svg {
  fill: currentColor;
}
.s3-wl .b {
  display: none;
}
.s3-wl.on .a {
  display: none;
}
.s3-wl.on .b {
  display: inline;
}
@media (max-width: 900px){
.s3-bar {
    padding: 18px;
    gap: 16px;
    grid-template-columns: 1fr;
  }
.s3-in {
    padding-right: 0;
  }
.s3-in p.d {
    display: none;
  }
.s3-cs > div {
    padding: 9px 4px 4px 4px;
    margin: -9px 0 0 0;
  }
.s3-sa {
    display: none;
  }
.s3-ac {
    flex-direction: row;
    padding-left: 0;
    min-width: 0;
  }
.s3-ac > * {
    flex: 1;
    width: auto;
    padding-left: 12px;
    padding-right: 12px;
  }
.s3-wl .a,
  .s3-wl .b {
    font-size: 13px;
  }
}
.s3-b:after,
.s3-b.dm:after {
  content: none !important;
  display: none !important;
}
.s3-zm {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  box-shadow: 0 4px 14px #0007;
  display: grid;
  place-items: center;
  z-index: 30;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: 0.2s;
}
.s3-zm svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #14110f;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.s3-c.c:hover .s3-zm,
.s3-c.c .s3-zm:focus-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.s3-zm:hover {
  background: #f26b0f;
}
.s3-zm:hover svg {
  stroke: #fff;
}
@media (hover: none), (pointer: coarse){
.s3-c.c .s3-zm {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* ==========================================================================
   Landing page footer + floating buttons
   .lp-mfoot = the shop footer (rules copied from nairomart.css, re-scoped), .lp-fab = WhatsApp + scroll to top
   ========================================================================== */
.lp-mfoot {
  --or: #f7931e;
  font-family: Poppins, "Hind Siliguri", system-ui, sans-serif;
  line-height: 1.5;
  clear: both;
}
.lp-mfoot a { color: inherit; text-decoration: none; }
.lp-mfoot h4, .lp-mfoot ul, .lp-mfoot p { margin-top: 0; }
.lp-mfoot li a { display: inline-block; }
.lp-mfoot li:hover a { color: var(--or); }
.lp-mfoot .so button { display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; }
.lp-mfoot .so button svg { width: 17px; height: 17px; }
.lp-mfoot .fb { padding-bottom: 18px; }
/* phones: the fixed order bar covers the bottom of the page, so the dark footer itself gets that room (no white strip under it) */
@media (max-width: 860px) {
  body { padding-bottom: 0; }
  .lp-mfoot { padding-bottom: 84px; }
  .lp-360 .s3-ac { display: none; } /* the order bar / hero button is already on screen */
}

.lp-mfoot {
  background: #161616;
  color: #d6d6d6;
  margin-top: 30px;
  padding-top: 36px;
  font-size: 13px;
}
.lp-mfoot .fg {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr;
  gap: 30px;
}
.lp-mfoot .fg > * {
  min-width: 0;
}
.lp-mfoot h4 {
  color: #fff;
  font-size: 14px;
  margin-bottom: 14px;
  font-weight: 600;
}
.lp-mfoot ul {
  padding: 0;
}
.lp-mfoot li {
  list-style: none;
  margin-bottom: 9px;
  cursor: pointer;
}
.lp-mfoot li:hover,
.lp-mfoot .fl2:hover {
  color: var(--or);
}
.lp-mfoot .fbr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.lp-mfoot .fbr img {
  height: 38px;
}
.lp-mfoot .fbr span {
  font:
    800 24px/1 Poppins,
    sans-serif;
  color: #fff;
  letter-spacing: -0.03em;
}
.lp-mfoot .fbr b {
  color: var(--or);
}
.lp-mfoot .fl2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: #d6d6d6;
  overflow-wrap: anywhere;
}
.lp-mfoot .fl2 svg {
  color: var(--or);
  width: 18px;
  height: 18px;
}
.lp-mfoot .so {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.lp-mfoot .so button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2a2a2a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.lp-mfoot .so button:hover {
  background: var(--or);
}
.lp-mfoot .fb {
  border-top: 1px solid #2a2a2a;
  margin-top: 26px;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #aaa;
}
.lp-mfoot .pay {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.lp-mfoot .pay span {
  background: #fff;
  border-radius: 5px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
  color: #1a3a8f;
}
.lp-mfoot .pay span:nth-child(1) {
  color: #1a8f4c;
}
.lp-mfoot .pay span:nth-child(2) {
  color: #1a3a8f;
}
.lp-mfoot .pay span:nth-child(3) {
  color: #e2136e;
}
.lp-mfoot .pay span:nth-child(4) {
  color: #f26b0f;
}
.lp-mfoot .pay span:nth-child(5) {
  color: #8c3494;
}
@media (max-width: 1000px) {
.lp-mfoot .fg {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
.lp-mfoot .fg > :first-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 600px) {
.lp-mfoot .fg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.lp-mfoot .so button {
  display: grid;
  place-items: center;
  transition: 0.2s;
}
.lp-mfoot .so button svg {
  width: 17px;
  height: 17px;
}
.lp-mfoot .so button:hover {
  transform: translateY(-2px);
}

/* floating buttons: WhatsApp (same pill as the shop) + scroll to top */
.lp-fab {
  position: fixed;
  right: 16px;
  bottom: calc(var(--fab-b, 20px) + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  transition: bottom 0.25s;
}
.lp-wafab {
  position: relative;
  height: 48px;
  padding: 0 18px 0 12px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 13px/1 Poppins, "Hind Siliguri", sans-serif;
  text-decoration: none;
  box-shadow: 0 4px 14px #0004;
}
.lp-wafab svg { width: 26px; height: 26px; }
.lp-wafab svg { fill: currentColor; stroke: none; } /* filled logo, as the shop's: the global svg rule above draws outlines */
.lp-wafab:hover { color: #fff; } /* the store's style.css colours every a:hover orange */
.lp-wafab:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #25d366;
  opacity: 0.5;
  animation: lpfab-pr 2.4s infinite;
  z-index: -1;
}
@keyframes lpfab-pr { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.5); opacity: 0; } } /* = the shop's .wa pulse */
.lp-top {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #f7931e; /* same orange round button as the shop's "back to top" */
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px #0004;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  margin-right: 2px;
}
.lp-top.on { opacity: 1; transform: none; pointer-events: auto; }
.lp-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-90deg); }
@media (max-width: 600px) {
  .lp-wafab { width: 48px; padding: 0; justify-content: center; } /* round icon, like the shop */
  .lp-wafab span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lp-wafab:before { animation: none; } .lp-top, .lp-fab { transition: none; } }

/* small note shown by the footer social / policy items (they are "coming soon", like in the shop) */
.lp-toast {
  position: fixed;
  left: 50%;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 12px);
  z-index: 2147483000;
  background: #15233f;
  color: #fff;
  padding: 11px 18px;
  border-radius: 999px;
  font: 600 14px/1.3 "Hind Siliguri", Poppins, sans-serif;
  box-shadow: 0 8px 24px #0005;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  max-width: calc(100% - 32px);
  text-align: center;
}
.lp-toast.on { opacity: 1; transform: translate(-50%, 0); }


/* ==========================================================================
   Laravel: the landing page sits inside the classic layout (Bootstrap + the store styles).
   Everything below makes Bootstrap / the store widgets step aside. (body class: lp-page)
   ========================================================================== */
body.lp-page { background: #f7f8fb; font-family: var(--font); color: #15233f; }
.lp-page :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, dl, dd, blockquote) { margin: 0; }
.lp-page .lp-stock { margin-top: 12px; } /* the design's gap under the order button (the reset above would zero it) */
.lp-page :where(ul, ol) { padding: 0; list-style: none; }
.lp-page :where(a) { text-decoration: none; }
.lp-page :where(table) { margin: 0; }
.lp-page :where(button) { font-family: inherit; }
/* the store's own floating buttons and chat are replaced by the Nairomart ones (.lp-fab) */
.lp-page .sf-float-up, .lp-page .sf-fab, .lp-page [class*="sf-live"], .lp-page .sf-help { display: none !important; }

/* order form: the address block of the store (Bootstrap) in the look of the other fields */
.lp-addr { margin-bottom: 12px; }
.lp-addr .row { --bs-gutter-x: 10px; --bs-gutter-y: 0; }
.lp-addr .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; margin-bottom: 12px; }
.lp-addr [data-loc-block] .row > [class*="col-md-"] { flex: 0 0 50%; max-width: 50%; }
.lp-addr [data-loc-block="list"] .row > .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.lp-addr .form-label { display: block; margin-bottom: 5px; font-size: 13.5px; font-weight: 600; color: inherit; }
.lp-addr .form-control, .lp-addr .form-select { height: 46px; border: 1.5px solid #e1e4ea; border-radius: 12px; background-color: #fff; padding: 0 12px; font-size: 14px; box-shadow: none; }
.lp-addr .form-select { padding-right: 30px; }
.lp-addr .form-control:focus, .lp-addr .form-select:focus { border-color: #f26b0f; box-shadow: 0 0 0 3px #f26b0f22; }
.lp-addr .is-invalid { border-color: #e11d48; }
.lp-addr .invalid-feedback, .lp-addr .text-danger { font-size: 12.5px; }
.lp-addr .select2-container { width: 100% !important; }
.lp-addr .select2-container--default .select2-selection--single { height: 46px; border: 1.5px solid #e1e4ea; border-radius: 12px; display: flex; align-items: center; }
.lp-addr .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px; padding-left: 12px; font-size: 14px; }
.lp-addr .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }
@media (max-width: 420px) { .lp-addr [data-loc-block] .row > [class*="col-md-"] { flex: 0 0 100%; max-width: 100%; } }
.lp-note { width: 100%; min-height: 70px; border: 1.5px solid #e1e4ea; border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; outline: 0; }
.lp-note:focus { border-color: #f26b0f; box-shadow: 0 0 0 3px #f26b0f22; }
.lp-otp[hidden] { display: none; }
.lp-otp input { width: 100%; height: 46px; border: 1.5px solid #e1e4ea; border-radius: 12px; padding: 0 12px; font-size: 16px; letter-spacing: 4px; outline: 0; }
.lp-cod { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid #f26b0f; border-radius: 14px; background: #fff6ee; }
.lp-cod b { display: block; font-size: 14.5px; }
.lp-cod small { color: #6b7280; font-size: 12.5px; }
.lp-sw { cursor: pointer; }
.lp-sizes button.off, .lp-sizes button:disabled { opacity: 0.45; text-decoration: line-through; cursor: not-allowed; }

/* social links of the store footer are <a> (the Nairomart footer had <button>) */


/* social links of the store footer are <a> (the Nairomart footer had <button>) */
.lp-mfoot .so a { width: 34px; height: 34px; border-radius: 50%; background: #2a2a2a; color: #fff; display: grid; place-items: center; font-size: 15px; transition: 0.2s; text-decoration: none; }
.lp-mfoot .so a:hover { background: var(--or); transform: translateY(-2px); }

/* Buttons like the rest of the store (modern.css .btn / .ad / .go): flat theme orange, 8px corners, no glow,
   darker on hover with the same light sweep */
.lp-cta, .lp-submit, .lp-call { background: var(--or); box-shadow: none; border-radius: 8px; position: relative; overflow: hidden; transition: background 0.2s; }
.lp-cta:hover, .lp-submit:hover, .lp-call:hover { background: var(--or-d); }
.lp-cta:hover, .lp-call:hover { color: #fff; } /* the store's style.css colours every a:hover orange */
.lp-cta:after, .lp-submit:after, .lp-call:after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, #ffffff66, transparent); transform: skewX(-20deg); transition: left 0.7s; pointer-events: none; }
.lp-cta:hover:after, .lp-submit:hover:after, .lp-call:hover:after { left: 140%; }

/* The colour circles sit in a wrapper (landing.js fills it): a flex row keeps them 26px circles, as the design */
.lp-colors { display: flex; gap: 8px; align-items: center; }

/* Order form = the store's address fields: the design's white name on the dark card and the icons in the boxes */
.lp-ordside h3 { color: #fff; }
.lp-addr #shipping_name, .lp-addr #shipping_phone, .lp-addr #shipping_address { padding-left: 40px; background: #fff no-repeat 12px 50% / 19px 19px; }
.lp-addr #shipping_name { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); }
.lp-addr #shipping_phone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.lp-addr #shipping_address { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6-7-11a7 7 0 0 1 14 0c0 5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }

/* Offer banner and custom content sections (admin → Sections) */
.lp-offer { display: flex; align-items: center; gap: 20px; padding: 22px; border-radius: 16px; background: var(--or-l, #fff4ea); border: 1px solid #f7931e33; }
.lp-offer img { width: 120px; height: 120px; object-fit: cover; border-radius: 12px; flex: none; }
.lp-offer h2 { margin: 0 0 6px; font-size: 22px; }
.lp-offer p { margin: 0 0 12px; }
.lp-offer .lp-cta, .lp-custom .lp-cta { display: inline-flex; padding: 0 22px; margin-top: 8px; }
.lp-custom .lp-box img { max-width: 100%; height: auto; border-radius: 12px; margin-bottom: 12px; }
@media (max-width: 640px) { .lp-offer { flex-direction: column; text-align: center; } }

/* The sections follow the order of the page (admin → Sections): every item of the left column has the same order, the hero first, the order form last.
   Before this, 360° / trust / other sections had fixed CSS orders, so moving them in the admin did nothing and an offer banner came before the hero. */
.lp-main .lp-left > * { order: 1; }
.lp-main .lp-left > .lp-hero { order: 0; }

/* A section with its own colours (admin → Sections → Style) */
.lp-styled { background: var(--s-bg, transparent); color: var(--s-text, inherit); border-radius: 16px; padding: 18px; order: 1; }
.lp-styled :is(h2, h3, p, li, small, td, th, summary) { color: inherit; }