/*
 * SeanKidz Bookshelf V2 landing page. Light only.
 * Every selector is scoped under .bks (the template root) and every class is
 * prefixed bks-, so theme or page-builder CSS cannot restyle this page and this
 * page cannot leak into the theme. CSS variables live on .bks, not :root.
 */
/* Bangla body text: Noto Serif Bengali (theme font), downloaded only when Bangla letters are on the page. */
@font-face { font-family: 'Noto Serif Bengali'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../../../../assets/fonts/noto-serif-bengali.woff2) format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0980-09F2, U+09F4-09FE, U+200C-200D, U+25CC; }
@font-face { font-family: 'SEAN Baloo Da 2'; font-style: normal; font-weight: 600 800; font-display: swap; src: url(../fonts/baloo-da-2-600-800-bengali.woff2) format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1, U+11DF0-11DF1; }
@font-face { font-family: 'SEAN Baloo Da 2'; font-style: normal; font-weight: 600 800; font-display: swap; src: url(../fonts/baloo-da-2-600-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.bks {
  --mist: #f2f6fb;
  --ink: #14264b;
  --ink-2: #4a5a7a;
  --sun: #ffc533;
  --sun-deep: #d69a0b;
  --sun-tint: #fff3cf;
  --sky: #dce8fa;
  --mint: #ddf3ea;
  --coral: #d8402a;
  --coral-tint: #ffe4dd;
  --leaf: #178a69;
  --line: #d5deec;
  --r-lg: 28px;
  --r-md: 16px;
  --r-sm: 10px;
  --font-head: "SEAN Baloo Da 2", "Noto Serif Bengali", "Noto Sans Bengali", system-ui, sans-serif;
  --font-body: "Noto Serif Bengali", "Noto Sans Bengali", "Kalpurush", "SolaimanLipi", system-ui, sans-serif;
}

.bks {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.bks img, .bks svg {
  display: block;
  max-width: 100%;
}

.bks h1, .bks h2, .bks h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.bks h1 { font-size: clamp(2.1rem, 5.4vw, 3.7rem); font-weight: 800; }
.bks h2 { font-size: clamp(1.65rem, 3.6vw, 2.6rem); }
.bks h3 { font-size: 1.25rem; }
.bks p, .bks dl, .bks dd, .bks figure { margin: 0; }
.bks ul { margin: 0; padding: 0; list-style: none; }
/* Allow embedded plugins, including TukiFlow, to control their own link colors. */
/* .page-template-bookshelf a { color: inherit; } */
.bks [id] { scroll-margin-top: 84px; }
.bks :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.bks .on-dark :focus-visible { outline-color: var(--sun); }

.bks .bks-wrap { width: min(1160px, calc(100% - 2.5rem)); margin-inline: auto; }
.bks .bks-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .bks-html { scroll-behavior: auto; }
  .bks * { animation: none !important; transition: none !important; }
}

.bks .bks-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 54px;
  padding-block: calc(0.5rem + 0.18em) calc(0.5rem - 0.18em);
  padding-inline: 1.7rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 700 1.15rem/1.3 var(--font-head);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s, color 0.15s;
}

.bks .bks-btn--sun { background: var(--sun); color: var(--ink); box-shadow: 0 4px 0 var(--sun-deep); }
.bks .bks-btn--sun:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--sun-deep); }
.bks .bks-btn--sun:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sun-deep); }
.bks .bks-btn--ink { background: var(--ink); color: #fff; box-shadow: 0 4px 0 #050d20; }
.bks .bks-btn--ink:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #050d20; }
.bks .bks-btn--ink:active { transform: translateY(3px); box-shadow: 0 1px 0 #050d20; }
.bks .bks-btn--ghost { border-color: var(--ink); background: transparent; color: var(--ink); }
.bks .bks-btn--ghost:hover { background: var(--ink); color: #fff; }

.bks .bks-top {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(242, 246, 251, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bks .bks-top__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.bks .bks-brand { display: flex; align-items: center; font: 800 1.4rem/1 var(--font-head); text-decoration: none; }
.bks .bks-logo { display: block; height: 36px; width: auto; }
.bks .bks-foot .bks-logo { height: 40px; }
@media (max-width: 640px) { .bks .bks-logo { height: 30px; } }
.bks .bks-nav { display: none; gap: 1.9rem; font-weight: 500; }
.bks .bks-nav a { text-decoration: none; }
.bks .bks-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.bks .bks-top .bks-btn { min-height: 46px; padding-inline: 1.3rem; font-size: 1.02rem; }
@media (min-width: 900px) { .bks .bks-nav { display: flex; } }

.bks .bks-hero { padding-block: clamp(2rem, 5vw, 4.5rem) clamp(2.5rem, 6vw, 5rem); }
.bks .bks-hero__grid { display: grid; align-items: center; gap: 2.5rem; }
@media (min-width: 960px) { .bks .bks-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 4.5rem; } }
.bks .bks-lead { max-width: 34rem; margin-top: 1.1rem; margin-bottom: 1.2rem; color: var(--ink-2); font-size: 1.2rem; }
.bks .bks-price { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.9rem; margin-bottom: 1.3rem; }
.bks .bks-price__now { font: 800 clamp(2.5rem, 6vw, 3.3rem)/1.1 var(--font-head); }
.bks .bks-price__was { color: var(--ink-2); font-family: var(--font-head); font-size: 1.3rem; font-weight: 600; }
.bks .bks-cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.bks .bks-coupon { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.6rem !important; padding: 0.75rem 1rem; border: 1.5px dashed #d9a81f; border-radius: var(--r-md); background: var(--sun-tint); font-weight: 500; }
.bks .bks-coupon svg { flex: none; }
.bks .bks-coupon a { font-weight: 700; white-space: nowrap; }
.bks .bks-hero__media { display: grid; gap: 1rem; }
.bks .bks-photo { position: relative; padding: 0.6rem; border: 1px solid var(--line); border-radius: 32px; background: #fff; }
.bks .bks-photo img { width: 100%; height: auto; border-radius: 24px; }
.bks .bks-stamp { position: absolute; top: -0.9rem; left: -0.4rem; padding: 0.3rem 1.1rem; transform: rotate(-5deg); border-radius: 12px; background: var(--coral); color: #fff; font: 700 1.05rem/1.4 var(--font-head); }

@keyframes bks-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.bks .bks-hero__copy > * { animation: bks-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.bks .bks-hero__copy > :nth-child(2) { animation-delay: 0.07s; }
.bks .bks-hero__copy > :nth-child(3) { animation-delay: 0.14s; }
.bks .bks-hero__copy > :nth-child(4) { animation-delay: 0.21s; }
.bks .bks-hero__copy > :nth-child(5) { animation-delay: 0.28s; }
.bks .bks-hero__media { animation: bks-rise 0.7s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

.bks .bks-section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.bks .bks-section--white { background: #fff; }
.bks .bks-section--sky { background: var(--sky); }
.bks .bks-section--ink { background: var(--ink); color: #fff; }
.bks .bks-section--sun { background: var(--sun); }
.bks .bks-section__head { max-width: 40rem; margin-bottom: 2.5rem; }
.bks .bks-section__head p { margin-top: 0.8rem; color: var(--ink-2); }

.bks .bks-about { display: grid; gap: 2rem; }
@media (min-width: 900px) { .bks .bks-about { grid-template-columns: 5fr 6fr; align-items: start; gap: 4.5rem; } }
.bks .bks-about__text { display: grid; gap: 1.15rem; max-width: 38rem; }
.bks .bks-about__aside { padding: 1.1rem 1.35rem; border-inline-start: 6px solid var(--sun); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--sun-tint); font-weight: 600; }
.bks .bks-about__aside a { white-space: nowrap; }

.bks .bks-shelf { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; padding: 10px; border-radius: 26px; background: var(--ink); }
.bks .bks-cubby { position: relative; display: flex; grid-column: 1 / -1; flex-direction: column; gap: 0.5rem; overflow: hidden; padding: 1.5rem; border-radius: 12px; background: #fff; box-shadow: inset 0 10px 12px -8px rgba(20, 38, 75, 0.22); }
.bks .bks-cubby p { color: var(--ink-2); }
.bks .bks-cubby--books { padding-bottom: 0; background: var(--sun-tint); }
.bks .bks-cubby--kid { background: var(--sky); }
.bks .bks-cubby--acc { background: var(--mint); }
.bks .bks-cubby--solid { background: var(--coral-tint); }
.bks .bks-cubby--style { background: #fff; }
.bks .bks-cubby--habit { background: var(--sky); }
.bks .bks-ico { display: grid; width: 46px; height: 46px; margin-bottom: 0.4rem; place-items: center; border-radius: 14px; background: var(--ink); color: #fff; }
.bks .bks-spines { display: flex; align-items: flex-end; gap: 5px; height: 190px; margin-top: auto; padding-top: 1.5rem; }
.bks .bks-spines span { flex: none; width: var(--w); height: var(--h); border-radius: 4px 4px 0 0; background: var(--c); }
@media (min-width: 640px) {
  .bks .bks-cubby { grid-column: span 6; }
  .bks .bks-cubby--books, .bks .bks-cubby--habit { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .bks .bks-cubby--books { grid-row: 1 / 3; grid-column: 1 / 6; }
  .bks .bks-cubby--kid { grid-column: 6 / 10; }
  .bks .bks-cubby--acc { grid-column: 10 / 13; }
  .bks .bks-cubby--solid { grid-column: 6 / 9; }
  .bks .bks-cubby--style { grid-column: 9 / 13; }
  .bks .bks-cubby--habit { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 1.25rem; }
  .bks .bks-cubby--habit .bks-ico { flex: none; margin: 0; }
}

.bks .bks-split { display: grid; gap: 2rem; }
@media (min-width: 900px) { .bks .bks-split { grid-template-columns: 5fr 7fr; align-items: start; gap: 3rem; } }
.bks .bks-stack { display: grid; gap: 1.25rem; }
.bks .bks-problem { padding: 2rem; border-radius: var(--r-lg); background: var(--ink); color: #fff; }
.bks .bks-problem h3 { margin-bottom: 0.7rem; font-size: 1.6rem; }
.bks .bks-problem p { color: #d5deee; }
.bks .bks-problem p + p { margin-top: 0.7rem; color: #fff; font-weight: 600; }
.bks .bks-audience { padding: 1.6rem 2rem; border-radius: var(--r-lg); background: var(--sky); }
.bks .bks-audience h3 { margin-bottom: 0.5rem; }
.bks .bks-audience p + p { margin-top: 0.6rem; }
.bks .bks-benefit-list { display: grid; gap: 1rem; }
.bks .bks-benefit { display: flex; gap: 1rem; padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--mist); font-weight: 500; }
.bks .bks-benefit::before { content: "✓"; flex: none; display: grid; width: 1.65rem; height: 1.65rem; margin-top: 0.25rem; place-items: center; border-radius: 50%; background: var(--leaf); color: #fff; font-weight: 800; line-height: 1; }

.bks .bks-offer { display: grid; align-items: center; gap: 2.5rem; }
@media (min-width: 860px) { .bks .bks-offer { grid-template-columns: 1.2fr 0.8fr; gap: 4rem; } }
.bks .bks-offer p { max-width: 36rem; margin-top: 1rem; color: #d5deee; }
.bks .bks-offer .bks-btn { margin-top: 1.6rem; }
.bks .bks-coin { display: grid; width: min(280px, 72vw); aspect-ratio: 1; place-content: center; justify-self: center; transform: rotate(-6deg); outline: 3px dashed rgba(20, 38, 75, 0.35); outline-offset: -16px; border-radius: 50%; background: var(--sun); color: var(--ink); text-align: center; }
.bks .bks-coin strong { font: 800 clamp(4rem, 10vw, 5.4rem)/1 var(--font-head); }
.bks .bks-coin span { font: 700 1.1rem/1.3 var(--font-head); }

.bks .bks-spec { border-top: 1px solid var(--line); }
.bks .bks-spec div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.bks .bks-spec dt { color: var(--ink-2); }
.bks .bks-spec dd { font-weight: 600; }
.bks .bks-todo { padding: 0 0.4rem; outline: 1.5px dashed #b98900; border-radius: 4px; background: #fff3b0; }
.bks .bks-size { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.bks .bks-size svg { width: 100%; height: auto; max-height: 380px; }
.bks .bks-size figcaption { margin-top: 0.5rem; color: var(--ink-2); font-size: 0.9rem; text-align: center; }
.bks .bks-sz-body { fill: var(--sky); stroke: var(--ink); stroke-width: 6; }
.bks .bks-sz-line { fill: none; stroke: var(--ink); stroke-width: 2; }
.bks .bks-sz-text { fill: var(--ink); font: 700 17px var(--font-head); }
.bks .bks-sz-name { fill: var(--ink-2); font: 600 16px var(--font-body); }

.bks .bks-order { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.bks .bks-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 0.42fr); align-items: center; gap: 1rem 2rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.bks .bks-summary__item { display: flex; min-width: 0; align-items: center; gap: 1rem; }
.bks .bks-summary__item img { flex: none; width: 88px; height: 88px; object-fit: cover; border-radius: var(--r-sm); background: var(--sky); }
.bks .bks-summary__item h3 { font-size: 1.1rem; }
.bks .bks-summary__item p { margin: 0; color: var(--ink-2); font-size: 0.92rem; line-height: 1.5; }
.bks .bks-summary dl { display: grid; gap: 0.35rem; margin: 0; }
.bks .bks-summary dl div { display: flex; justify-content: space-between; gap: 1rem; }
.bks .bks-summary dt { color: var(--ink-2); }
.bks .bks-summary dl s { font-family: var(--font-head); font-weight: 600; }
.bks .bks-summary .bks-total { padding-top: 0.35rem; border-top: 1px solid var(--line); font: 800 1.3rem/1.4 var(--font-head); }
.bks .bks-summary .bks-total dt { color: var(--ink); }
.bks .bks-summary small { display: block; grid-column: 1 / -1; padding-top: 0.75rem; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 0.9rem; line-height: 1.55; }
.bks .bks-form-slot { min-height: 260px; }
.bks .bks-form-placeholder { display: grid; min-height: 260px; padding: clamp(1.4rem, 3vw, 2.25rem); place-content: center; border: 2px dashed var(--ink); border-radius: var(--r-lg); background: #fff; text-align: center; }
.bks .bks-form-placeholder code { display: block; margin-top: 0.75rem; font-size: 0.9rem; }

@media (max-width: 720px) {
  .bks .bks-summary { grid-template-columns: 1fr; }
  .bks .bks-summary small { grid-column: 1; }
}

.bks .bks-faq { display: grid; gap: 0.75rem; max-width: 52rem; }
.bks .bks-faq details { border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--mist); }
.bks .bks-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.35rem; list-style: none; font: 700 1.15rem/1.5 var(--font-head); cursor: pointer; }
.bks .bks-faq summary::-webkit-details-marker { display: none; }
.bks .bks-faq summary::after { content: "+"; flex: none; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font: 600 1.4rem/1 var(--font-body); }
.bks .bks-faq details[open] { border-color: var(--ink); background: #fff; }
.bks .bks-faq details[open] summary::after { content: "−"; background: var(--sun); color: var(--ink); }
.bks .bks-faq details p { padding: 0 1.35rem 1.25rem; color: var(--ink-2); }

.bks .bks-final { display: grid; justify-items: start; gap: 1.75rem; }
@media (min-width: 860px) { .bks .bks-final { grid-template-columns: 1fr auto; align-items: center; gap: 3rem; } }
.bks .bks-final p { margin-top: 0.6rem; font-size: 1.2rem; font-weight: 500; }
.bks .bks-final s { opacity: 0.7; }
.bks .bks-final strong { font: 800 1.6em/1 var(--font-head); }
.bks .bks-foot { padding-block: 3rem 2rem; background: var(--ink); color: #c9d4ea; font-size: 0.98rem; }
.bks .bks-foot__grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .bks .bks-foot__grid { grid-template-columns: 1.2fr 1fr; gap: 4rem; } }
.bks .bks-foot .bks-brand { margin-bottom: 0.8rem; color: #fff; }
.bks .bks-foot h3 { margin-bottom: 0.4rem; color: #fff; font-size: 1.15rem; }
.bks .bks-foot ul { display: grid; gap: 0.3rem; }
.bks .bks-foot a { text-underline-offset: 4px; }
.bks .bks-foot__legal { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.9rem; }
@media (min-width: 760px) { .bks .bks-foot__legal { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; } }
.bks .bks-foot .bks-foot__legal a { color: inherit; text-decoration: none; }
.bks .bks-foot .bks-foot__legal a:hover { color: #fff; text-decoration: underline; }
.bks .bks-foot .bks-foot__legal .bks-foot__dev { color: #fff; }

.bks .bks-top__actions, .bks .bks-dock__actions { display: flex; align-items: center; gap: 0.75rem; }
.bks .bks-call { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; text-decoration: none; }
.bks .bks-call__icon { display: grid; flex: none; width: 46px; height: 46px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; transition: background-color 0.15s, color 0.15s; }
.bks .bks-call:hover .bks-call__icon { background: var(--ink); color: #fff; }
.bks .bks-call__num { display: none; }
@media (min-width: 1040px) { .bks .bks-call__num { display: inline; } }
.bks .bks-dock { position: fixed; z-index: 60; inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; box-shadow: 0 -8px 24px rgba(20, 38, 75, 0.08); }
.bks .bks-dock__price { display: grid; line-height: 1.2; }
.bks .bks-dock__price s { color: var(--ink-2); font-family: var(--font-head); font-size: 0.85rem; font-weight: 600; }
.bks .bks-dock__price strong { font: 800 1.5rem/1.2 var(--font-head); }
.bks .bks-dock .bks-btn { min-height: 48px; padding-inline: 1.5rem; }
.bks .bks-foot { padding-bottom: calc(2rem + 76px); }
@media (min-width: 768px) {
  .bks .bks-dock { display: none; }
  .bks .bks-foot { padding-bottom: 2rem; }
}

/*
 * Bookshelf v2 — layered on top of bookshelf.css.
 * Only re-scopes the base rules to the v2 body class and rebalances the
 * layout for the v2 structure (no hero lead/coupon, no about section,
 * single-column benefits).
 */

/* Base rules from bookshelf.css, scoped to the v2 template body class. */
.bks {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.bks img, .bks svg {
  display: block;
  max-width: 100%;
}

.bks h1, .bks h2, .bks h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.bks h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; }
.bks h2 { font-size: clamp(1.65rem, 3.6vw, 2.6rem); }
.bks h3 { font-size: 1.25rem; }
.bks p, .bks dl, .bks dd, .bks figure { margin: 0; }
.bks ul { margin: 0; padding: 0; list-style: none; }
.bks [id] { scroll-margin-top: 84px; }
.bks :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.bks .on-dark :focus-visible { outline-color: var(--sun); }

@media (prefers-reduced-motion: reduce) {
  .bks * { animation: none !important; transition: none !important; }
}

/* Hero: copy on the left, product gallery on the right; spacing comes from CSS instead of the <br>. */
.bks .bks-hero { padding-block: clamp(2rem, 5vw, 4rem); }
.bks .bks-hero__copy > br { display: none; }
.bks .bks-hero__copy h1 { max-width: 32rem; margin-bottom: 1.5rem; }
.bks .bks-price { margin-bottom: 1.6rem; }
.bks .bks-hero__media { min-width: 0; }
@media (min-width: 960px) {
  .bks .bks-hero__grid { grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; }
}

/* Hero gallery: one large image, thumbnails underneath (like the single product page). */
.bks .bks-pgallery { display: grid; gap: 0.75rem; }
.bks .bks-pgallery__main { display: block; overflow: hidden; border-radius: 24px; cursor: zoom-in; }
.bks .bks-pgallery__main img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px; transition: transform 0.35s ease, opacity 0.2s ease; }
.bks .bks-pgallery__main:hover img { transform: scale(1.03); }
.bks .bks-pgallery__main:focus-visible { outline-offset: -3px; }
.bks .bks-pgallery__main[hidden], .bks .bks-pgallery__video[hidden] { display: none; }
.bks .bks-pgallery__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px; background: var(--sky); }
.bks .bks-pgallery__thumbs button { position: relative; }
.bks .bks-pgallery__thumb--video::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 26px; height: 26px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 7v10l8-5z'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.bks .bks-pgallery__thumbs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.5rem; }
.bks .bks-pgallery__thumbs button { display: block; width: 100%; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: var(--r-sm); background: var(--sky); cursor: pointer; opacity: 0.65; transition: opacity 0.15s, border-color 0.15s; }
.bks .bks-pgallery__thumbs button:hover { opacity: 1; }
.bks .bks-pgallery__thumbs button[aria-pressed="true"] { border-color: var(--ink); opacity: 1; }
.bks .bks-pgallery__thumbs img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 520px) {
  .bks .bks-pgallery__thumbs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .bks .bks-pgallery__thumbs li { flex: 0 0 64px; scroll-snap-align: start; }
}

.bks .bks-lightbox { width: min(1200px, 100%); max-width: none; max-height: 100vh; margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; }
.bks .bks-lightbox::backdrop { background: rgba(10, 19, 38, 0.88); }
.bks .bks-lightbox__img { width: 100%; height: auto; max-height: 86vh; object-fit: contain; border-radius: var(--r-md); }
.bks .bks-lightbox__btn { position: absolute; display: grid; width: 48px; height: 48px; place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--ink); font: 700 1.9rem/1 var(--font-body); cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.bks .bks-lightbox__btn:hover { background: var(--sun); }
.bks .bks-lightbox__close { top: 0.75rem; right: 0.75rem; }
.bks .bks-lightbox__prev, .bks .bks-lightbox__next { top: 50%; transform: translateY(-50%); }
.bks .bks-lightbox__prev { left: 0.75rem; }
.bks .bks-lightbox__next { right: 0.75rem; }

/* Benefits: the split has a single child, so use the full width in a 2-up grid. */
.bks #benefits .bks-split { grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .bks .bks-benefit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .bks .bks-benefit { align-items: flex-start; height: 100%; box-sizing: border-box; }
}

/* Specs: keep the table and the 3D image level with each other. */
@media (min-width: 900px) {
  .bks #specs .bks-split { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* Specs: 3D views of the shelf beside the table. */
.bks .bks-3d { padding: 0.6rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.bks .bks-3d img { width: 100%; height: auto; border-radius: calc(var(--r-lg) - 0.6rem); }

/* Mobile zoom guards. */
/* Nothing (including plugin markup) may push the page wider than the screen. */
.bks { overflow-x: clip; }
.bks .bks-order > *, .bks .bks-hero__grid > * { min-width: 0; }
.bks .bks-form-slot { max-width: 100%; overflow-wrap: anywhere; }
.bks .bks-form-slot img, .bks .bks-form-slot table, .bks .bks-form-slot iframe { max-width: 100%; }
/* Stop double-tap zoom on buttons, links and the gallery thumbnails. */
.bks a, .bks button, .bks summary, .bks input, .bks select, .bks textarea, .bks label { touch-action: manipulation; }
/* iOS zooms into any form field under 16px when it is focused. */
@media (max-width: 767px) {
  .bks input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), .bks select, .bks textarea { font-size: 16px !important; }
}

/* Checkout form: ported from the seankidz theme (checkout.css), scoped to this template. */
.bks .bks-form-slot {
  --checkout-canvas: #f2f6fb; --checkout-surface: #ffffff; --checkout-soft: #e9f0fb;
  --checkout-ink: #14264b; --checkout-muted: #52617e; --checkout-line: #cbd7e8;
  --checkout-accent: #ffc533; --checkout-accent-strong: #d69a0b; --checkout-danger: #b42318;
  --checkout-radius: 16px; --checkout-control-radius: 10px;
}


.bks .bks-form-slot,
.bks .bks-form-slot form,
.bks .bks-form-slot table,
.bks .bks-form-slot input,
.bks .bks-form-slot select,
.bks .bks-form-slot textarea,
.bks .bks-form-slot button {
  font-family: "Noto Serif Bengali", system-ui, sans-serif;
}

.bks .bks-form-slot {
  min-width: 0;
  color: var(--checkout-ink);
  font-size: 1rem;
}

.bks .bks-form-slot form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, 0.88fr);
  gap: 0 1.5rem;
  align-items: start;
  min-width: 0;
}

.bks .bks-form-slot #customer_details {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 0;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid var(--checkout-line);
  border-radius: var(--checkout-radius);
  background: var(--checkout-surface);
}

.bks .bks-form-slot #order_review_heading {
  min-width: 0;
  font-family: "Baloo Da 2", "Noto Serif Bengali", sans-serif;
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
}

.bks .bks-form-slot #order_review {
  position: relative;
  top: 0;
  min-width: 0;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--checkout-line);
  border-radius: var(--checkout-radius);
  background: var(--checkout-surface);
  box-shadow: 0 20px 50px rgba(20, 38, 75, 0.08);
}

.bks .bks-form-slot .col2-set,
.bks .bks-form-slot .col2-set .col-1,
.bks .bks-form-slot .col2-set .col-2 {
  float: none;
  width: 100%;
  min-width: 0;
}

.bks .bks-form-slot .woocommerce-billing-fields,
.bks .bks-form-slot .woocommerce-additional-fields {
  padding: 0;
  border: 0;
  background: transparent;
}

.bks .bks-form-slot .woocommerce-additional-fields {
  padding-top: 1.5rem;
  margin-top: 1.6rem;
  border-top: 1px solid var(--checkout-line);
}

.bks .bks-form-slot .woocommerce-billing-fields > h3,
.bks .bks-form-slot .woocommerce-additional-fields > h3 {
  margin: 0 0 1.2rem;
  font-family: "Baloo Da 2", "Noto Serif Bengali", sans-serif;
  font-size: clamp(1.55rem, 2.4vw, 1.9rem);
  font-weight: 800;
  line-height: 1.2;
}

.bks .bks-form-slot .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.bks .bks-form-slot form .form-row,
.bks .bks-form-slot form .form-row-first,
.bks .bks-form-slot form .form-row-last,
.bks .bks-form-slot form .form-row-wide {
  float: none !important;
  width: 100% !important;
  min-width: 0;
  padding: 0;
  margin: 0;
}

.bks .bks-form-slot #billing_first_name_field,
.bks .bks-form-slot #billing_address_1_field,
.bks .bks-form-slot #billing_country_field {
  grid-column: 1 / -1;
}

.bks .bks-form-slot #billing_country_field,
.bks .bks-form-slot .woocommerce-shipping-fields,
.bks .bks-form-slot .create-account {
  display: none !important;
}

.bks .bks-form-slot form .form-row label {
  display: block;
  margin: 0 0 0.42rem;
  color: var(--checkout-ink);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
}

.bks .bks-form-slot .optional {
  color: var(--checkout-muted);
  font-size: 0.86em;
  font-weight: 500;
}

.bks .bks-form-slot .required {
  color: var(--checkout-danger);
  text-decoration: none;
}

.bks .bks-form-slot form .form-row input.input-text,
.bks .bks-form-slot form .form-row textarea,
.bks .bks-form-slot form .form-row select,
.bks .bks-form-slot .select2-container .select2-selection--single {
  display: block;
  width: 100% !important;
  min-width: 0;
  min-height: 50px;
  padding: 0.72rem 0.85rem;
  border: 1px solid #aebed4;
  border-radius: var(--checkout-control-radius);
  outline: 0;
  background: #fbfdff;
  color: var(--checkout-ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

/* Keep Select2's hidden native <select> hidden; the full-width rule above would otherwise push the page wider than the screen on mobile. */
.bks .bks-form-slot form .form-row select.select2-hidden-accessible {
  width: 1px !important;
  min-width: 0;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
}

.bks .bks-form-slot form .form-row textarea {
  min-height: 108px;
  resize: vertical;
}

.bks .bks-form-slot #billing_phone_field .description,
.bks .bks-form-slot #billing_phone_description {
  position: static !important;
  display: block !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
  margin: 0.5rem 0 0 !important;
  overflow: visible !important;
  clip: auto !important;
  color: #405274 !important;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.5;
  opacity: 1 !important;
}

.bks .bks-form-slot form .form-row input.input-text::placeholder,
.bks .bks-form-slot form .form-row textarea::placeholder {
  color: #64728d;
  opacity: 1;
}

.bks .bks-form-slot form .form-row input.input-text:focus,
.bks .bks-form-slot form .form-row textarea:focus,
.bks .bks-form-slot form .form-row select:focus,
.bks .bks-form-slot .select2-container--focus .select2-selection--single,
.bks .bks-form-slot .select2-container--open .select2-selection--single {
  border-color: var(--checkout-accent-strong);
  background: var(--checkout-surface);
  box-shadow: 0 0 0 3px rgba(255, 197, 51, 0.28);
}

.bks .bks-form-slot .select2-container {
  display: block;
  width: 100% !important;
  min-width: 0;
}

.bks .bks-form-slot .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
}

.bks .bks-form-slot .select2-container .select2-selection__rendered {
  padding: 0;
  color: var(--checkout-ink);
  line-height: 1.45;
}

.bks .bks-form-slot .select2-container .select2-selection__arrow {
  top: 50%;
  right: 0.7rem;
  transform: translateY(-50%);
}

.select2-dropdown {
  overflow: hidden;
  border-color: var(--checkout-line);
  border-radius: var(--checkout-control-radius);
  font-family: "Noto Serif Bengali", system-ui, sans-serif;
}

.select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted[data-selected] {
  background: var(--checkout-ink) !important;
  color: #f8fbff !important;
}

.bks .bks-form-slot table.shop_table.woocommerce-checkout-review-order-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  background: transparent;
}

.bks .bks-form-slot table.shop_table.woocommerce-checkout-review-order-table th,
.bks .bks-form-slot table.shop_table.woocommerce-checkout-review-order-table td {
  padding: 0.78rem 0;
  border: 0;
  border-bottom: 1px solid var(--checkout-line);
  background: transparent;
  color: var(--checkout-ink);
  text-align: left;
  vertical-align: top;
}

.bks .bks-form-slot table.shop_table.woocommerce-checkout-review-order-table th:last-child,
.bks .bks-form-slot table.shop_table.woocommerce-checkout-review-order-table td:last-child {
  padding-left: 1rem;
  text-align: right;
}

.bks .bks-form-slot table.shop_table .order-total th,
.bks .bks-form-slot table.shop_table .order-total td {
  padding-top: 1rem;
  border-bottom: 0;
  font-size: 1.12rem;
  font-weight: 800;
}

/* Coupon and delivery-note rows span both columns, so beat the right-aligned last-column rule above. */
.bks .bks-form-slot table.shop_table.woocommerce-checkout-review-order-table .seankidz-coupon-row td,
.bks .bks-form-slot table.shop_table.woocommerce-checkout-review-order-table .seankidz-delivery-note-row td {
  padding: 1rem 0 0;
  border-bottom: 0;
  text-align: left;
}

.bks .bks-form-slot .seankidz-delivery-note {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0.7rem 0.9rem;
  border: 1.5px dashed #d9a81f;
  border-radius: var(--checkout-control-radius);
  background: #fff3cf;
  color: var(--checkout-ink);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.5;
}

.bks .bks-form-slot .seankidz-delivery-note svg {
  flex: none;
}

.bks .bks-form-slot .seankidz-coupon {
  padding-top: 1rem;
  border-top: 1px solid var(--checkout-line);
}

.bks .bks-form-slot .seankidz-coupon > label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--checkout-ink);
  font-size: 0.92rem;
  font-weight: 700;
}

.bks .bks-form-slot .seankidz-coupon__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
}

.bks .bks-form-slot .seankidz-coupon__controls input.input-text {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0.65rem 0.75rem;
  border: 1px solid #aebed4;
  border-radius: var(--checkout-control-radius);
  outline: 0;
  background: #fbfdff;
  color: var(--checkout-ink);
  font-size: 0.95rem;
  text-align: left;
}

.bks .bks-form-slot .seankidz-coupon__controls input.input-text:focus {
  border-color: var(--checkout-accent-strong);
  background: var(--checkout-surface);
  box-shadow: 0 0 0 3px rgba(255, 197, 51, 0.28);
}

.bks .bks-form-slot button.seankidz-coupon__button {
  min-height: 46px;
  padding: 0.65rem 0.9rem;
  box-shadow: none;
  font-size: 0.92rem;
}

.bks .bks-form-slot button.seankidz-coupon__button:hover,
.bks .bks-form-slot button.seankidz-coupon__button:active {
  box-shadow: none;
}

.bks .bks-form-slot button.seankidz-coupon__button:disabled {
  opacity: 0.62;
  cursor: wait;
  transform: none;
}

.bks .bks-form-slot .seankidz-coupon__status {
  min-height: 1.25em;
  margin: 0.45rem 0 0;
  color: var(--checkout-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.bks .bks-form-slot .seankidz-coupon__status.is-error {
  color: var(--checkout-danger);
}

.bks .bks-form-slot .seankidz-coupon__status.is-success {
  color: #08783e;
}

.bks .bks-form-slot ul#shipping_method {
  margin: 0;
}

.bks .bks-form-slot ul#shipping_method li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
  margin: 0 0 0.5rem;
  line-height: 1.4;
}

.bks .bks-form-slot ul#shipping_method li:last-child {
  margin-bottom: 0;
}

.bks .bks-form-slot input[type="radio"] {
  accent-color: var(--checkout-ink);
}

.bks .bks-form-slot #payment {
  margin-top: 1rem;
  border-radius: 12px;
  background: var(--checkout-soft);
}

.bks .bks-form-slot #payment ul.payment_methods {
  padding: 0;
  border: 0;
  background: transparent;
}

.bks .bks-form-slot #payment ul.payment_methods li {
  padding: 0.9rem 1rem;
  border: 0;
}

.bks .bks-form-slot #payment div.payment_box {
  margin: 0.75rem 0 0;
  padding: 0.8rem 0.9rem;
  border-radius: var(--checkout-control-radius);
  background: var(--checkout-surface);
  color: var(--checkout-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.bks .bks-form-slot #payment div.payment_box::before {
  border-bottom-color: var(--checkout-surface);
}

.bks .bks-form-slot #payment .place-order {
  padding: 1rem;
  margin: 0;
}

.bks .bks-form-slot #place_order,
.bks .bks-form-slot button.button,
.bks .bks-form-slot a.button,
.bks .bks-form-slot input.button {
  min-height: 50px;
  padding: 0.78rem 1.15rem;
  border: 1px solid var(--checkout-accent-strong);
  border-radius: var(--checkout-control-radius);
  background: var(--checkout-accent);
  box-shadow: 0 4px 0 #bd850c;
  color: var(--checkout-ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.bks .bks-form-slot #place_order {
  float: none;
  width: 100%;
  font-size: 1.08rem;
}

.bks .bks-form-slot #place_order:hover,
.bks .bks-form-slot button.button:hover,
.bks .bks-form-slot a.button:hover,
.bks .bks-form-slot input.button:hover {
  background: #ffd45f;
  color: var(--checkout-ink);
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #bd850c;
}

.bks .bks-form-slot #place_order:active,
.bks .bks-form-slot button.button:active,
.bks .bks-form-slot a.button:active,
.bks .bks-form-slot input.button:active {
  transform: translateY(3px) scale(0.99);
  box-shadow: 0 1px 0 #bd850c;
}

.bks .bks-form-slot .woocommerce-error,
.bks .bks-form-slot .woocommerce-info,
.bks .bks-form-slot .woocommerce-message {
  padding: 0.9rem 1rem;
  margin: 0 0 1rem;
  border: 1px solid var(--checkout-line);
  border-left: 4px solid var(--checkout-accent);
  border-radius: 12px;
  background: var(--checkout-surface);
  color: var(--checkout-ink);
  line-height: 1.55;
}

.bks .bks-form-slot .woocommerce-error {
  border-left-color: var(--checkout-danger);
}

.bks .bks-form-slot .woocommerce-error::before,
.bks .bks-form-slot .woocommerce-info::before,
.bks .bks-form-slot .woocommerce-message::before {
  display: none;
}

.bks .bks-form-slot form.checkout_coupon,
.bks .bks-form-slot form.login {
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid var(--checkout-line);
  border-radius: 12px;
  background: var(--checkout-surface);
}

.bks .bks-form-slot .woocommerce-privacy-policy-text,
.bks .bks-form-slot .woocommerce-terms-and-conditions-wrapper {
  color: var(--checkout-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* Privacy text + terms checkbox above "Place order" */
.bks .bks-form-slot .woocommerce-terms-and-conditions-wrapper { display: grid; gap: 0.75rem; margin-bottom: 1rem; }
.bks .bks-form-slot .woocommerce-privacy-policy-text p { margin: 0; }
.bks .bks-form-slot .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0; padding: 0; }
.bks .bks-form-slot form .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox {
  position: relative;
  display: block;
  margin: 0;
  padding: 0.85rem 1rem 0.85rem 2.9rem;
  border: 1px solid var(--checkout-line);
  border-radius: 12px;
  background: var(--checkout-surface);
  color: var(--checkout-ink);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.bks .bks-form-slot form .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox:hover { border-color: var(--checkout-accent-strong); }
.bks .bks-form-slot .woocommerce-terms-and-conditions-wrapper input#terms {
  flex-shrink: 0;
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--checkout-accent-strong);
  cursor: pointer;
}
.bks .bks-form-slot .woocommerce-terms-and-conditions-wrapper .required { color: var(--coral); text-decoration: none; border: 0; }
.bks .bks-form-slot .woocommerce-invalid .woocommerce-form__label-for-checkbox { border-color: var(--coral); background: var(--coral-tint); }

.bks .bks-form-slot a {
  color: var(--checkout-ink);
  text-decoration-color: var(--checkout-accent-strong);
  text-underline-offset: 0.18em;
}
@media (max-width: 940px) {
  .bks .bks-form-slot form.checkout {
    display: block;
  }

  .bks .bks-form-slot #order_review_heading {
    margin-top: 1.75rem;
  }

  .bks .bks-form-slot #order_review {
    position: static;
  }
}

@media (max-width: 620px) {
  .bks .bks-form-slot .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: 1fr;
  }

  .bks .bks-form-slot #billing_first_name_field,
  .bks .bks-form-slot #billing_phone_field,
  .bks .bks-form-slot #billing_email_field,
  .bks .bks-form-slot #billing_address_1_field,
  .bks .bks-form-slot #billing_city_field,
  .bks .bks-form-slot #billing_state_field {
    grid-column: 1;
  }

  .bks .bks-form-slot #customer_details,
  .bks .bks-form-slot #order_review {
    padding: 1.1rem;
    border-radius: 14px;
  }

  .bks .bks-form-slot table.shop_table.woocommerce-checkout-review-order-table th,
  .bks .bks-form-slot table.shop_table.woocommerce-checkout-review-order-table td {
    font-size: 0.92rem;
  }
}

@media (max-width: 390px) {
  .bks .bks-form-slot .seankidz-coupon__controls {
    grid-template-columns: 1fr;
  }
}


/* Product picker (tukiflow) */
.bks .bks-form-slot .tfdc-landing-selector { margin: 0 0 28px; }
.bks .bks-form-slot .tfdc-landing-selector__notice { padding: 12px 16px; border: 1px solid var(--coral); border-radius: 12px; background: #fff; color: var(--coral); margin-bottom: 14px; }
.bks .bks-form-slot .tfdc-landing-selector__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.bks .bks-form-slot .tfdc-landing-option { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 14px 16px; background: #fff; border: 1px solid transparent; border-radius: var(--r-md); transition: border-color .2s, box-shadow .2s; }
.bks .bks-form-slot .tfdc-landing-option.is-selected { border-color: var(--sun-deep); box-shadow: 0 0 0 3px rgb(255 197 51 / .45); }
.bks .bks-form-slot .tfdc-landing-option__main { display: flex; flex: 1 1 220px; align-items: center; gap: 12px; min-width: 0; cursor: pointer; }
.bks .bks-form-slot .tfdc-landing-option__toggle { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 24px; height: 24px; border: 1.5px solid var(--ink-2); border-radius: 7px; background: #fff; cursor: pointer; display: grid; place-items: center; }
.bks .bks-form-slot .tfdc-landing-option__toggle:checked { background: var(--sun); }
.bks .bks-form-slot .tfdc-landing-option__toggle:checked::after { content: ""; width: 6px; height: 11px; border: solid var(--ink); border-width: 0 3px 3px 0; transform: translateY(-1px) rotate(45deg); }
.bks .bks-form-slot .tfdc-landing-option__image img { width: 52px; height: 72px; object-fit: contain; border-radius: 6px; background: var(--mist); }
.bks .bks-form-slot .tfdc-landing-option__details { display: flex; flex-direction: column; min-width: 0; line-height: 1.45; }
.bks .bks-form-slot .tfdc-landing-option__name { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; }
.bks .bks-form-slot .tfdc-landing-option__price { font-family: var(--font-head); font-weight: 600; color: var(--ink-2); }
.bks .bks-form-slot .tfdc-landing-option__price del { color: var(--ink-2); opacity: .8; margin-right: 6px; }
.bks .bks-form-slot .tfdc-landing-option__price ins { text-decoration: none; color: var(--ink); font-weight: 800; }
.bks .bks-form-slot .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bks .bks-form-slot .tfdc-landing-option__quantity { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--mist); }
.bks .bks-form-slot .tfdc-landing-option__step { min-width: 38px; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; line-height: 1; background: transparent; }
.bks .bks-form-slot .tfdc-landing-option__step:hover { background: var(--sun); }
.bks .bks-form-slot .tfdc-landing-option__step:disabled { opacity: .35; cursor: not-allowed; background: transparent; }
.bks .bks-form-slot .tfdc-landing-selector .tfdc-landing-option__qty { width: 44px; padding: 6px 0; text-align: center; font-family: var(--font-head); font-weight: 700; -moz-appearance: textfield; appearance: textfield; background: transparent; }
.bks .bks-form-slot .tfdc-landing-option__qty::-webkit-outer-spin-button,
.bks .bks-form-slot .tfdc-landing-option__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bks .bks-form-slot .tfdc-landing-option__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.bks .bks-form-slot .tfdc-landing-option__price .saved-price { display: none !important; }
.bks .bks-form-slot .tfdc-landing-option__price .saved-price--unused { flex-basis: 100%; width: fit-content; margin: 4px 0 0; padding: 2px 10px; background: var(--sun); color: var(--ink); border-radius: 12px; font-family: var(--font-head); font-weight: 600; font-size: .85rem; line-height: 1.5; }
  .bks .bks-form-slot .tfdc-landing-selector__list { grid-template-columns: 1fr; }
.bks .bks-foot a { color: #fff; text-decoration: underline; }
.bks .bks-foot a:hover { color: var(--sun); }
.bks .wd-skip-links { display: none !important; }
.bks .bks-form-slot, .bks .bks-form-slot *, .bks .bks-form-slot *::before, .bks .bks-form-slot *::after { box-sizing: border-box; }

/* Theme globals the canvas does not load: link colour and body margin. */
body.bks-body { margin: 0; background: var(--mist, #f2f6fb); }
.bks a { color: inherit; }
.bks .bks-form-slot a { text-underline-offset: 3px; }

/* One product on this page: hide the picker and WooCommerce's coupon link (the coupon box lives in the order review). */
.bks .bks-form-slot .tfdc-landing-selector,
.bks .bks-form-slot .woocommerce-form-coupon-toggle,
.bks .bks-form-slot .checkout_coupon { display: none !important; }

/* Theme global the canvas does not load: min-height/width must include padding and border. */
.bks, .bks *, .bks *::before, .bks *::after { box-sizing: border-box; }

/* "Your order" heading is not needed: the product summary sits above the form. */
.bks .bks-form-slot #order_review_heading { display: none; }

/* WooCommerce loading overlay: no white box over the rounded cards. The overlay stays (it blocks clicks
   during an update) but is invisible; the content fades only if the update takes longer than 0.2s. */
.bks .blockUI.blockOverlay { background: transparent !important; opacity: 1 !important; }
.bks .woocommerce-checkout-review-order-table, .bks #payment { transition: opacity .2s ease; }
.bks .woocommerce-checkout-review-order-table.processing, .bks #payment.processing { opacity: .55; transition-delay: .2s; }

/* Delivery note under a product in the order table (mixed carts) */
.bks dl.variation { margin: 4px 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--sun-deep); }
.bks dl.variation dt, .bks dl.variation dd, .bks dl.variation dd p { display: inline; margin: 0; }

/* Delivery charge stays on one line in the order table */
.bks .woocommerce-shipping-totals td, .bks .woocommerce-shipping-totals td label { white-space: nowrap; }