/* Little Page Shop — theme bridge: the Hostinger AI theme and WooCommerce, dressed in the design
   system. Colours, fonts and widths already come from theme.json (render-core §3); this file holds
   only what theme.json can't say. Everything reads the tokens in tokens.css, so dark mode follows.
   Scoped to body.little-page-shop. Source: hostinger/plugin/theme.css. */

/* ── Base ─────────────────────────────────────────────────────────────────────────────────────── */
body.little-page-shop { background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
/* Footer at the bottom of short pages: header, main, footer as a column; main takes the slack. */
body.little-page-shop .wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.little-page-shop .wp-site-blocks > main { flex: 1 0 auto; }
/* WooCommerce's coming-soon template wraps the whole page — header, content, footer — in one block,
   so the column continues inside it, and the footer is pushed down wherever it sits (1.0.5). */
body.little-page-shop .wp-site-blocks > .wp-block-woocommerce-coming-soon { flex: 1 0 auto; display: flex; flex-direction: column; }
body.little-page-shop :is(.wp-site-blocks, .wp-block-woocommerce-coming-soon) > footer { margin-top: auto; }
body.little-page-shop.admin-bar .wp-site-blocks { min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px)); }
body.little-page-shop h1, body.little-page-shop h2, body.little-page-shop h3 { text-wrap: balance; }
/* theme.json's heading font is emitted inside :where() (zero specificity), so any plain h1 rule from
   the theme or WooCommerce beat it — the account page's "Orders" title came out in the body face. */
body.little-page-shop :is(h1, h2, h3, h4, .wp-block-post-title) { font-family: var(--font-display); font-weight: 400; }
body.little-page-shop :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* Links in running content: graphite, with the gold star as a thick underline. Never in the header
   or footer — WooCommerce's coming-soon template wraps the WHOLE page, header and footer included,
   in .wp-block-woocommerce-coming-soon, which underlined the site name (1.0.1, /shop/). */
body.little-page-shop :where(.wp-block-post-content, .entry-content, .woocommerce-info, .wp-block-woocommerce-coming-soon)
  a:not(.wp-element-button):not(.wp-block-button__link):not(.lps-btn):not(.button):not(:is(.lps-header, .lps-footer-wrap, nav) a) {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--star);
  text-decoration-thickness: 3px; text-underline-offset: 4px; }
body.little-page-shop .wp-block-post-content a:not(.wp-element-button):hover { text-decoration-thickness: 5px; }

/* ── Header: the mark + the name, then nav, account and cart ──────────────────────────────────── */
body.little-page-shop .lps-header { border-bottom: 1px solid var(--rule); background: var(--paper);
  padding-block: var(--space-4); }
body.little-page-shop .lps-header__row { align-items: center; gap: var(--space-4); }
body.little-page-shop .lps-brand { align-items: center; gap: 10px; }
/* The theme sizes the site-logo block at 80px; the mark is 36px, so the wrapper hugs the mark
   (otherwise a 44px gap opens between the mark and the name). */
/* The theme's style.min.css adds `min-width: 80px` to .wp-block-site-logo below 768px — why the gap
   showed on narrow screens only, and why width fixes alone (1.0.1, 1.0.5) didn't close it. */
body.little-page-shop .lps-brand .wp-block-site-logo { width: auto !important; min-width: 0 !important; flex: none; }
/* …and the link inside it is forced to 80px elsewhere, so size the link to the mark too (1.0.5). */
body.little-page-shop .lps-mark a { display: block; line-height: 0; width: 36px !important; height: 36px; }
body.little-page-shop .lps-mark svg { width: 36px; height: 36px; display: block; }
/* The theme hides the title once a logo exists; ours is a bare mark, so both show. */
body.little-page-shop .wp-block-site-title { display: block !important; margin: 0; }
body.little-page-shop .wp-block-site-title a { font: 400 23px/1.1 var(--font-display); color: var(--ink);
  text-decoration: none; white-space: nowrap; letter-spacing: -.005em; }
body.little-page-shop .lps-header__actions { align-items: center; gap: var(--space-4); }
body.little-page-shop .lps-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; }
body.little-page-shop .lps-nav a { font: 700 15px/20px var(--font-sans); color: var(--ink); text-decoration: none;
  padding-block: 4px; border-bottom: 3px solid transparent; }
body.little-page-shop .lps-nav a:hover, body.little-page-shop .lps-nav a[aria-current="page"] { border-bottom-color: var(--star); }
body.little-page-shop .lps-header :is(.wc-block-mini-cart__button, .wc-block-customer-account a) { color: var(--ink); }
body.little-page-shop .wc-block-mini-cart__badge { background: var(--star); color: var(--on-star); }
@media (max-width: 640px) {
  body.little-page-shop .lps-mark svg { width: 30px; height: 30px; }
  body.little-page-shop .lps-mark a { width: 30px !important; height: 30px; }
  body.little-page-shop .wp-block-site-title a { font-size: 19px; }
  body.little-page-shop .lps-header__row { row-gap: var(--space-3); }
}

/* ── Footer: a tray band ──────────────────────────────────────────────────────────────────────── */
body.little-page-shop .lps-footer-wrap { background: var(--tray); margin-top: var(--space-8); padding-block: var(--space-7) var(--space-6); }
body.little-page-shop .lps-footer { display: grid; grid-template-columns: minmax(220px, 1.1fr) 3fr; gap: var(--space-6) var(--space-7);
  max-width: var(--container); margin-inline: auto; }
body.little-page-shop .lps-footer__mark svg { width: 40px; height: 40px; display: block; }
body.little-page-shop .lps-footer__name { font: 400 23px/1.2 var(--font-display); margin: var(--space-3) 0 var(--space-2); }
body.little-page-shop .lps-footer__blurb { font: 400 15px/22px var(--font-sans); color: var(--pencil); margin: 0; max-width: 34ch; }
body.little-page-shop .lps-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-5); }
body.little-page-shop .lps-footer__title { font: 700 13px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 var(--space-3); }
body.little-page-shop .lps-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
body.little-page-shop .lps-footer__col a { font: 400 15px/22px var(--font-sans); color: var(--ink); text-decoration: none; }
body.little-page-shop .lps-footer__col a:hover { text-decoration: underline; text-decoration-color: var(--star); text-decoration-thickness: 3px; text-underline-offset: 4px; }
body.little-page-shop .lps-footer__fine { grid-column: 1 / -1; font: 400 14px/20px var(--font-sans); color: var(--pencil);
  border-top: 1px solid var(--rule); padding-top: var(--space-4); margin: 0; }
@media (max-width: 720px) { body.little-page-shop .lps-footer { grid-template-columns: 1fr; } }

/* ── Buttons: every WordPress and WooCommerce button is a sticker ─────────────────────────────── */
/* No #place_order in these lists: :is() takes its MOST specific argument, so one ID lifted every rule
   here to ID specificity and silently beat class-level rules (the notice links lost their underline,
   1.0.3). Place order carries .button anyway. */
body.little-page-shop :is(.wp-element-button, .wp-block-button__link, .woocommerce .button, .woocommerce button.button) {
  background: var(--star); color: var(--on-star); border: 1.5px solid var(--edge); border-radius: var(--radius-md);
  font: 700 16px/20px var(--font-sans); padding: 12px 20px; box-shadow: var(--shadow-sticker);
  transition: transform .12s ease, box-shadow .12s ease; text-decoration: none; }
body.little-page-shop :is(.wp-element-button, .wp-block-button__link, .woocommerce .button):hover {
  transform: translateY(-1px); box-shadow: 0 3px 0 var(--edge); background: var(--star); color: var(--on-star); }
body.little-page-shop :is(.wp-element-button, .wp-block-button__link, .woocommerce .button):active {
  transform: translateY(1px); box-shadow: 0 1px 0 var(--edge); }
body.little-page-shop .is-style-outline .wp-block-button__link { background: var(--card); color: var(--ink); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  body.little-page-shop :is(.wp-element-button, .wp-block-button__link, .woocommerce .button) { transition: none; transform: none !important; } }

/* ── Product images: sheets with the corner turned down ───────────────────────────────────────── */
body.little-page-shop :is(.wc-block-components-product-image, .wp-block-woocommerce-product-image, .woocommerce-product-gallery__image) {
  position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-page);
  box-shadow: var(--shadow-paper); overflow: hidden; }
body.little-page-shop :is(.wc-block-components-product-image, .wp-block-woocommerce-product-image, .woocommerce-product-gallery__image)::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: var(--dog-ear); height: var(--dog-ear); pointer-events: none;
  background: linear-gradient(to top left, var(--paper) calc(50% - .5px), var(--rule) calc(50% - .5px) calc(50% + .5px), var(--tray) calc(50% + .5px)); }
body.little-page-shop :is(.wc-block-components-product-image, .wp-block-woocommerce-product-image) img { border-radius: 0; }
body.little-page-shop :is(.wc-block-components-product-name, .wp-block-post-title a) { font-family: var(--font-display); font-weight: 400; color: var(--ink); text-decoration: none; }
body.little-page-shop :is(.wc-block-components-product-price, .wp-block-woocommerce-product-price, .price, .woocommerce-Price-amount) {
  font-family: var(--font-sans); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
body.little-page-shop :is(.wc-block-components-product-badge, .onsale) {
  background: var(--star); color: var(--on-star); border: 1.5px solid var(--edge); border-radius: var(--radius-pill);
  font: 800 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; }

/* ── Classic checkout and account forms ───────────────────────────────────────────────────────── */
body.little-page-shop .woocommerce :is(input.input-text, select, textarea, .select2-selection) {
  font: 400 16px/20px var(--font-sans); color: var(--ink); background: var(--card);
  border: 1.5px solid var(--pencil); border-radius: var(--radius-md); padding: 11px 14px; }
body.little-page-shop .woocommerce form .form-row label { font: 700 15px/20px var(--font-sans); }
body.little-page-shop :is(.woocommerce-info, .woocommerce-message, .woocommerce-error, .wc-block-components-notice-banner) {
  background: var(--tray); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius-md); }
body.little-page-shop .woocommerce-error { border-color: var(--red-pencil); }
body.little-page-shop :is(.woocommerce-info, .woocommerce-message)::before { color: var(--ink); }

/* ── WooCommerce's coming-soon page ───────────────────────────────────────────────────────────── */
body.little-page-shop .wp-block-woocommerce-coming-soon :is(h1, h2, .wp-block-heading) { font-family: var(--font-display) !important; font-weight: 400; color: var(--ink); }
body.little-page-shop .wp-block-woocommerce-coming-soon { background: var(--paper); color: var(--ink); }

/* ── The inline mark (assets/mark-inline.svg): token colours, so it follows dark mode ─────────── */
.lps-m { color: var(--ink); }
.lps-m-page { fill: var(--card); }
.lps-m-flap { fill: var(--tray); }
.lps-m-star { fill: var(--star); }

/* ── My account: the menu ─────────────────────────────────────────────────────────────────────── */
/* The theme paints the active and hovered item from presets this site doesn't define, falling back
   to color3 — gold text — plus a 3px left bar. Here: graphite links; the active one in the gold wash
   with a graphite edge, like a selected AudienceChip. No left-border accent. */
body.little-page-shop .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
body.little-page-shop .woocommerce-MyAccount-navigation li { background: none !important; padding: 0; margin: 0; }
body.little-page-shop .woocommerce-MyAccount-navigation li a {
  display: block; padding: 10px 14px; border: 1.5px solid transparent; border-radius: var(--radius-md);
  font: 700 16px/22px var(--font-sans); color: var(--ink) !important; background: transparent !important;
  box-shadow: none !important; text-decoration: none !important; }
body.little-page-shop .woocommerce-MyAccount-navigation li a:hover { background: var(--tray) !important; }
body.little-page-shop .woocommerce-MyAccount-navigation :is(li.is-active a, a[aria-current="page"]) {
  background: var(--star-tint) !important; border-color: var(--edge); }

/* ── Notice banners (WooCommerce blocks) ──────────────────────────────────────────────────────── */
/* WooCommerce forces the banner's action link to `background: transparent; color: #2f2f2f` with
   !important — dark text that vanished on a dark card once the sticker-button rule added a border.
   It's meant to be a text link, so it becomes one: graphite with the gold underline. */
body.little-page-shop .wc-block-components-notice-banner {
  background: var(--tray) !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; border-radius: var(--radius-md) !important; }
body.little-page-shop .wc-block-components-notice-banner.is-error { border-color: var(--red-pencil) !important; }
body.little-page-shop .wc-block-components-notice-banner > svg { background-color: var(--star) !important; fill: var(--on-star) !important; }
body.little-page-shop .wc-block-components-notice-banner.is-success > svg { background-color: var(--leaf) !important; fill: var(--paper) !important; }
body.little-page-shop .wc-block-components-notice-banner.is-error > svg { background-color: var(--red-pencil) !important; fill: var(--paper) !important; }
body.little-page-shop .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward {
  color: var(--ink) !important; background: transparent !important; border: 0 !important; border-radius: 0; box-shadow: none !important;
  transform: none !important; padding: 0 !important; opacity: 1; font: 700 15px/22px var(--font-sans);
  text-decoration: underline; text-decoration-color: var(--star); text-decoration-thickness: 3px; text-underline-offset: 4px; }
body.little-page-shop .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward:hover { text-decoration-thickness: 5px; }
body.little-page-shop .wc-block-components-notice-banner > .wc-block-components-button { color: var(--ink) !important; opacity: .8; }