:root{--r:#d9232e;--jade:#123f3a;--jade2:#1d5b52;--d:#2c1a17;--g:#d5a24c;--c:#f8f1e5;--c2:#efe1cb;--m:#6f6259;--line:rgba(18,63,58,.16)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--c);color:var(--d);font-family:"Anuphan",system-ui,-apple-system,"Noto Sans Thai",Tahoma,sans-serif;line-height:1.7}a{text-decoration:none;color:inherit}.wrap{width:min(1120px,calc(100% - 32px));margin:auto}header{position:sticky;top:0;z-index:20;background:rgba(18,63,58,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(213,162,76,.24);color:#fff}nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px;position:relative}.brand{display:flex;align-items:center;gap:10px;font-weight:950;font-size:1.12rem}.brand:before{content:"";display:block;width:42px;height:54px;flex:0 0 42px;background:url('/images/logo-paepongs-header.webp') center/contain no-repeat}.brand small{display:block;color:rgba(248,241,229,.7);font-size:.69rem;font-weight:650}.nav{display:flex;gap:18px;font-size:.88rem;font-weight:750;color:rgba(248,241,229,.88)}.mobile-menu{display:none;margin-left:auto;background:transparent;border:0;padding:0}.mobile-menu summary{list-style:none;width:44px;height:44px;border:2px solid #f2c66d;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#d5a24c;box-shadow:0 4px 12px rgba(0,0,0,.22);padding:0}.mobile-menu summary::-webkit-details-marker{display:none}.menu-icon{width:22px;height:22px;display:block}.menu-icon line{stroke:#123f3a;stroke-width:2.6;stroke-linecap:round}.mobile-menu-panel{position:absolute;top:62px;right:0;width:min(290px,calc(100vw - 28px));background:#0f332f;border:1px solid rgba(213,162,76,.28);border-radius:18px;padding:10px;box-shadow:0 18px 45px rgba(0,0,0,.28);display:grid;gap:2px}.mobile-menu-panel a{padding:12px 13px;border-radius:12px;font-weight:780;color:#f8f1e5}.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border-radius:999px;font-weight:900;border:1px solid var(--line);background:#fff;color:var(--d)}.btn.line{background:#15b85a;color:#fff;border:0}.btn.red{background:var(--r);color:#fff;border:0}.hero{padding:70px 0 54px;border-bottom:1px solid rgba(213,162,76,.2);background:radial-gradient(circle at 86% 12%,rgba(213,162,76,.18),transparent 34%),linear-gradient(135deg,#123f3a 0%,#0d302d 72%);color:#fff}.crumb{font-size:.84rem;color:rgba(248,241,229,.66);margin-bottom:24px}.tag{display:inline-block;border:1px solid rgba(213,162,76,.5);background:rgba(213,162,76,.1);color:#f1c77e;border-radius:999px;padding:7px 12px;font-size:.78rem;font-weight:900}h1,h2,h3{line-height:1.17;letter-spacing:-.02em}h1{font-size:clamp(2.5rem,5vw,4.6rem);margin:17px 0}h2{font-size:clamp(1.8rem,3vw,2.7rem);margin:8px 0 18px}.lead{font-size:1.15rem;color:var(--m);max-width:780px}.hero .lead{color:rgba(248,241,229,.78)}.chips,.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}.chip{background:rgba(248,241,229,.08);border:1px solid rgba(213,162,76,.34);padding:9px 13px;border-radius:999px;color:#f7d99b;font-weight:950}section{padding:68px 0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:23px}.card p,.muted{color:var(--m)}.split{display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:start}.aside{position:sticky;top:98px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px}.notice{border-left:4px solid var(--jade2);background:rgba(18,63,58,.07);padding:15px 17px;border-radius:0 13px 13px 0}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:s}.step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}.step:before{counter-increment:s;content:"0" counter(s);display:block;color:var(--jade2);font-weight:950;margin-bottom:18px}.models{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.model{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;font-weight:850}.contact{background:linear-gradient(145deg,#efe1cb,#f8f1e5);border:1px solid rgba(18,63,58,.14);border-radius:28px;padding:34px;display:flex;justify-content:space-between;gap:28px;align-items:center}footer{background:#0c2d2a;color:#fff;padding:45px 0 80px;border-top:1px solid rgba(213,162,76,.22)}footer p,footer a{color:rgba(255,255,255,.72)}.footer-grid{display:grid;grid-template-columns:1.25fr .75fr .8fr;gap:40px}.footer-col{display:grid;align-content:start;gap:7px}.footer-note{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.48);font-size:.8rem}.footerlinks{display:flex;flex-wrap:wrap;gap:16px;font-size:.88rem}.mobile{display:none}@media(max-width:850px){.nav,header nav>.line{display:none}.mobile-menu{display:block}.grid,.split,.steps,.models{grid-template-columns:1fr 1fr}.aside{position:static}.contact{display:block}}@media(max-width:560px){
  .wrap{width:min(100% - 28px,1120px)}
  nav{min-height:64px;gap:8px}
  .brand{font-size:.96rem;white-space:nowrap;gap:8px}
  .brand:before{width:34px;height:44px;flex-basis:34px}
  .brand small{display:none}
  header nav>.line{display:none}
  section{padding:52px 0}
  .grid,.split,.steps,.models{grid-template-columns:1fr}
  .hero{padding:44px 0 40px}
  h1{font-size:clamp(2rem,10vw,2.5rem);line-height:1.22}
  h2{font-size:clamp(1.6rem,7vw,2.1rem);line-height:1.25}
  .lead{font-size:1rem;line-height:1.75}
  .chip{font-size:.82rem;padding:8px 10px}
  .contact{padding:24px 19px;border-radius:24px}
  .card{padding:20px}
  .mobile{display:grid;grid-template-columns:1fr 1.45fr;gap:7px;position:fixed;left:8px;right:8px;bottom:8px;z-index:30;background:rgba(43,25,22,.94);padding:7px;border-radius:16px}
  .mobile .btn{padding:10px 12px;font-size:.9rem}
  footer{padding-bottom:105px}.footer-grid{grid-template-columns:1fr;gap:22px}.mobile-menu-panel{top:56px}
}
/* Paepongs service visual identity */
.service-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:46px;align-items:center}
.service-hero-copy{min-width:0}
.service-visual{
  position:relative;min-height:330px;overflow:hidden;border-radius:32px;
  border:1px solid rgba(213,162,76,.44);
  background:
    radial-gradient(circle at 82% 18%,rgba(213,162,76,.30),transparent 30%),
    linear-gradient(145deg,#f8f1e5 0%,#efe1cb 100%);
  box-shadow:0 24px 58px rgba(0,0,0,.20);padding:30px;color:var(--jade);
  display:flex;flex-direction:column;justify-content:space-between
}
.service-visual::after{
  content:"";position:absolute;right:-24px;bottom:-28px;width:170px;height:210px;
  background:url('/images/logo-paepongs-hero.webp') center/contain no-repeat;
  opacity:.10;pointer-events:none
}
.service-visual-top{display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;z-index:1}
.service-symbol{
  width:74px;height:74px;border-radius:22px;background:var(--jade);color:#f4cf83;
  display:grid;place-items:center;box-shadow:0 12px 28px rgba(18,63,58,.20)
}
.service-symbol svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.service-visual-kicker{font-size:.78rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#7a5a27}
.service-visual-name{font-size:clamp(1.9rem,4vw,3rem);line-height:1.05;font-weight:950;margin:10px 0 0;letter-spacing:-.03em}
.service-terms{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;z-index:1}
.service-term{padding:14px 15px;border:1px solid rgba(18,63,58,.16);border-radius:16px;background:rgba(255,255,255,.65)}
.service-term b{display:block;color:var(--jade2);font-size:1.18rem}
.service-term span{display:block;color:var(--m);font-size:.78rem;margin-top:2px}
@media(max-width:850px){.service-hero-grid{grid-template-columns:1fr}.service-visual{min-height:260px}}
@media(max-width:560px){.service-visual{min-height:230px;padding:22px;border-radius:24px}.service-symbol{width:62px;height:62px;border-radius:18px}.service-symbol svg{width:32px;height:32px}.service-visual-name{font-size:1.8rem}.service-term{padding:11px 12px}.service-term b{font-size:1.05rem}}
.line-mini{display:inline-flex;align-items:center;justify-content:center;width:max-content;padding:8px 13px;border-radius:999px;background:#15b85a;color:#fff!important;font-weight:900;line-height:1.2}.line-mini:hover{filter:brightness(.96)}

.line-qr-card{display:flex;align-items:center;gap:18px;margin-top:18px;padding:18px;border:1px solid rgba(18,63,58,.14);border-radius:18px;background:#fff}
.line-qr-card img{width:152px;height:152px;display:block;padding:8px;background:#fff;border:1px solid var(--line);border-radius:14px}
.line-qr-copy{display:grid;gap:8px;align-content:center}
.line-qr-copy strong{font-size:1.05rem;color:var(--jade)}
.line-qr-copy span{font-size:.9rem;color:var(--m)}
.line-qr-copy .btn{width:max-content}
@media(max-width:700px){.line-qr-card{display:none}}


/* Paepongs Image System V2 — frameless product media */
/*
  Product imagery follows the source aspect ratio. No decorative frame, forced
  media height, padded showcase box, or inherited service-visual treatment.
  Text cards remain cards; product media itself stays frameless.
*/
.service-visual:has(img){
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.service-visual:has(img)::after{display:none!important}
.service-visual:has(img)>img{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Category/product links: image is free-standing; only copy remains structured. */
.official-product-card,
.sg-product-card,
.mac-product-card,
.nb-product-card,
.ipad-product-card,
.and-image-card{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.official-product-card>img,
.sg-product-card>img,
.mac-product-card>img,
.nb-product-card>img,
.ipad-product-card>img,
.and-image-card>img,
.and-image-media>img{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.and-image-media{
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
.mac-card-caption,
.nb-card-caption,
.ipad-card-caption,
.sg-card-caption,
.and-image-card figcaption{
  border:0!important;
  background:transparent!important;
  padding:12px 0 0!important;
}

/* About/store photos also use the photograph itself, not a decorative frame. */
.about-photo-grid,
.about-photo-side{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.about-photo-grid img,
.about-photo-side img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

/* Never reintroduce fixed product-media boxes on small screens. */
@media(max-width:560px){
  .service-visual:has(img)>img,
  .official-product-card>img,
  .sg-product-card>img,
  .mac-product-card>img,
  .nb-product-card>img,
  .and-image-card>img,
  .and-image-media>img{
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    padding:0!important;
  }
}


/* Image System V2 hardening — all direct-image figures are frameless */
figure:has(>img){
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
figure:has(>img)>img{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
figure:has(>img)>figcaption,
.official-product-card figcaption{
  margin:0!important;
  padding:10px 0 0!important;
  border:0!important;
  background:transparent!important;
  color:var(--m);
}

/* Old named product-shot wrappers are explicitly neutralized. */
.i18-product-shot,
.duo-product-shot{
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.i18-product-shot>img,
.duo-product-shot>img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}


/* Paepongs Image System V3 — equal visual ratios with controlled crop */
/*
  V3 keeps product imagery frameless but restores visual rhythm:
  - hero media: 16:9
  - category/model cards: 4:3
  - key visuals crop with cover
  - clean product renders contain inside the same 4:3 slot
*/

/* HERO: same 16:9 footprint everywhere, no decorative frame. */
.service-visual:has(>img){
  width:100%!important;
  aspect-ratio:16/9!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.service-visual:has(>img)>img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  object-position:center!important;
  padding:0!important;
  margin:0!important;
}

/* Clean cut-out/product renders: same hero ratio but preserve the whole device. */
.mac-hero-image>img,
.neo-hero-image>img,
.airm-hero-image>img,
.prom-hero-image>img,
.sg-hero-image>img,
.sgs-hero-image>img,
.sgz-hero-image>img,
.and-hero-visual>img,
.nb-hero-image>img,
.bnb-hero-image>img,
.cnb-hero-image>img{
  object-fit:contain!important;
  object-position:center!important;
}

/* Key visuals / photographic hero art may crop to fill. */
.gnb-hero-image>img,
.i16-product-photo>img,
.i17-product-photo>img,
.air-product-photo>img,
.duo-showcase>img,
.i18-hero .service-visual>img{
  object-fit:cover!important;
  object-position:center!important;
}

/* MODEL/CATEGORY CARDS: equal 4:3 media area. */
.official-product-card,
.sg-product-card,
.mac-product-card,
.nb-product-card,
.ipad-product-card,
.and-image-card{
  display:flex!important;
  flex-direction:column!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.official-product-card>img,
.sg-product-card>img,
.mac-product-card>img,
.nb-product-card>img,
.ipad-product-card>img,
.and-image-card>img,
.and-image-media>img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:cover!important;
  object-position:center!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
}

/* Product renders stay complete while sharing the exact same 4:3 slot. */
.sg-product-card>img,
.mac-product-card>img,
.nb-product-card:not(.gaming-card)>img,
.and-image-card>img,
.and-image-media>img{
  object-fit:contain!important;
  object-position:center!important;
}

/* Gaming uses a photographic/key-visual crop. */
.nb-product-card.gaming-card>img{
  aspect-ratio:4/3!important;
  object-fit:cover!important;
  object-position:center 48%!important;
}

/* iPhone official cards are photographic/key-visual assets. */
.official-product-card>img{
  object-fit:cover!important;
  object-position:center!important;
}

/* Captions line up beneath equal media slots. */
.mac-card-caption,
.nb-card-caption,
.ipad-card-caption,
.sg-card-caption,
.and-image-card figcaption,
.official-product-card figcaption{
  min-height:64px!important;
  padding:12px 0 0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
}

/* Secondary standalone figures keep natural ratio; only hero/card media is standardized. */
.i18-product-shot,
.duo-product-shot{
  aspect-ratio:auto!important;
  overflow:visible!important;
}
.i18-product-shot>img,
.duo-product-shot>img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
}

/* Store photos: equal 4:3 tiles, cropped as photographs. */
.about-photo-grid figure,
.about-photo-side figure{
  overflow:hidden!important;
}
.about-photo-grid figure>img,
.about-photo-side figure>img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:cover!important;
  object-position:center!important;
}

@media(max-width:560px){
  .service-visual:has(>img){
    width:100%!important;
    aspect-ratio:16/9!important;
    overflow:hidden!important;
  }
  .service-visual:has(>img)>img{
    width:100%!important;
    height:100%!important;
  }
  .official-product-card>img,
  .sg-product-card>img,
  .mac-product-card>img,
  .nb-product-card>img,
  .and-image-card>img,
  .and-image-media>img{
    width:100%!important;
    height:auto!important;
    aspect-ratio:4/3!important;
  }
}


/* Paepongs Image System V3 — equal viewports, intelligent crop */
/*
  V3 separates image roles:
  - Hero/product-detail media preserves the subject and has no decorative frame.
  - Sibling category cards share one visual viewport for equal rhythm.
  - Promotional/photo/key-visual cards crop with cover.
  - Clean product renders use contain inside the same viewport.
*/

/* HERO / DETAIL: no decorative frame, large natural media */
.service-visual:has(img),
figure.service-visual:has(>img){
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.service-visual:has(img)>img,
figure.service-visual:has(>img)>img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* CATEGORY GRIDS: equal 4:3 visual viewport, flat treatment */
.official-product-card,
.sg-product-card,
.mac-product-card,
.nb-product-card,
.ipad-product-card,
.and-image-card{
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.58)!important;
}

/* Default category media = clean product render */
.official-product-card>img,
.sg-product-card>img,
.mac-product-card>img,
.nb-product-card>img,
.ipad-product-card>img,
.and-image-card>img,
.and-image-media{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  overflow:hidden!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
}
.official-product-card>img,
.sg-product-card>img,
.mac-product-card>img,
.nb-product-card>img,
.ipad-product-card>img,
.and-image-card>img,
.and-image-media>img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
}

/* Key visuals / photographic cards should fill and crop, not letterbox */
.nb-product-card.gaming-card>img{
  object-fit:cover!important;
  object-position:center 50%!important;
}
.official-product-card.cover-media>img,
.sg-product-card.cover-media>img,
.mac-product-card.cover-media>img,
.nb-product-card.cover-media>img{
  object-fit:cover!important;
}

/* Copy aligns independently below equal media viewport */
.mac-card-caption,
.nb-card-caption,
.ipad-card-caption,
.sg-card-caption,
.and-image-card figcaption{
  min-height:64px!important;
  padding:12px 10px 10px!important;
  border:0!important;
  background:transparent!important;
}

/* Grid rhythm */
.mac-product-grid,
.nb-product-grid,
.ipad-product-grid,
.sg-product-grid,
.and-image-grid{
  align-items:stretch!important;
}

/* Mobile keeps the same card ratio; hero remains independent */
@media(max-width:560px){
  .official-product-card>img,
  .sg-product-card>img,
  .mac-product-card>img,
  .nb-product-card>img,
  .and-image-card>img,
  .and-image-media{
    aspect-ratio:4/3!important;
  }
  .mac-card-caption,
  .nb-card-caption,
  .sg-card-caption,
  .and-image-card figcaption{
    min-height:0!important;
  }
}


/* V3 direct-image correction: direct card images own the 4:3 viewport. */
.official-product-card>img,
.sg-product-card>img,
.mac-product-card>img,
.nb-product-card>img,
.and-image-card>img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
}
.nb-product-card.gaming-card>img{
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:cover!important;
  object-position:center!important;
}
.and-image-media{
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  overflow:hidden!important;
  background:#fff!important;
}
.and-image-media>img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}


/* Image System V3 — iPad/Tablet final override */
.ipad-product-card>img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
}
.ipad-product-card.cover-media>img{
  object-fit:cover!important;
  object-position:center!important;
}
@media(max-width:560px){
  .ipad-product-card>img{
    width:100%!important;
    height:auto!important;
    aspect-ratio:4/3!important;
  }
  .ipad-card-caption{min-height:0!important;}
}


/* Image System V3 — Smart Watch */
.watch-accent{color:#f1c77e}
.watch-product-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
  margin-top:24px!important;
  align-items:stretch!important;
}
.watch-product-card{
  display:flex!important;
  flex-direction:column!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.58)!important;
}
.watch-product-card>img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
  padding:0!important;
  margin:0!important;
}
.watch-card-caption{
  display:flex!important;
  justify-content:space-between!important;
  gap:12px!important;
  min-height:64px!important;
  padding:12px 10px 10px!important;
  background:transparent!important;
}
.watch-card-caption strong{color:var(--jade)}
.watch-card-caption span{color:var(--m);font-size:.8rem;text-align:right}
.watch-faq{display:grid;gap:10px;max-width:900px}
@media(max-width:560px){
  .watch-product-grid{grid-template-columns:1fr!important}
  .watch-product-card>img{aspect-ratio:4/3!important}
  .watch-card-caption{min-height:0!important}
}


/* Image System V3 — Camera */
.camera-accent{color:#f1c77e}
.camera-hero{overflow:hidden}
.camera-hero-grid{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:42px;
  align-items:center;
}
.camera-hero-stage{
  position:relative;
  min-height:430px;
  isolation:isolate;
}
.camera-ring{
  position:absolute;
  inset:9% 8% 8% 8%;
  border:1px solid rgba(213,162,76,.42);
  border-radius:50%;
  box-shadow:0 0 0 28px rgba(213,162,76,.04),0 0 0 70px rgba(213,162,76,.025);
  z-index:-1;
}
.camera-hero-main{
  position:absolute;
  width:62%;
  height:70%;
  left:18%;
  top:11%;
  object-fit:contain;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.28));
}
.camera-hero-float{
  position:absolute;
  width:29%;
  height:29%;
  object-fit:contain;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(213,162,76,.22);
  border-radius:22px;
  padding:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.20);
}
.camera-hero-float.one{right:0;top:2%}
.camera-hero-float.two{left:0;bottom:1%}
.camera-hero-float.three{right:4%;bottom:2%}
.camera-product-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
  margin-top:24px!important;
  align-items:stretch!important;
}
.camera-product-card{
  display:flex!important;
  flex-direction:column!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.58)!important;
}
.camera-product-card>img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
  padding:0!important;
  margin:0!important;
}
.camera-card-caption{
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
  min-height:74px!important;
  padding:12px 10px 10px!important;
  background:transparent!important;
}
.camera-card-caption strong{color:var(--jade)}
.camera-card-caption span{color:var(--m);font-size:.78rem}
.camera-child-visual{
  background:#fff!important;
}
.camera-child-visual>img{
  aspect-ratio:4/3!important;
  object-fit:contain!important;
  background:#fff!important;
}
.camera-faq{display:grid;gap:10px;max-width:900px}
@media(max-width:850px){
  .camera-hero-grid{grid-template-columns:1fr}
  .camera-hero-stage{min-height:360px}
  .camera-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
  .camera-hero-stage{min-height:310px}
  .camera-hero-main{width:64%;height:64%;left:18%;top:12%}
  .camera-hero-float{width:31%;height:27%;border-radius:16px;padding:7px}
  .camera-product-grid{grid-template-columns:1fr!important}
  .camera-product-card>img{aspect-ratio:4/3!important}
  .camera-card-caption{min-height:0!important}
}


/* Image System V3 — Brandname */
.brandname-accent{color:#f1c77e}
.brandname-hero{overflow:hidden}
.brandname-hero-grid{
  display:grid;
  grid-template-columns:1.03fr .97fr;
  gap:42px;
  align-items:center;
}
.brandname-hero-stage{
  position:relative;
  min-height:430px;
  isolation:isolate;
}
.brandname-hero-stage::before{
  content:"";
  position:absolute;
  inset:8% 7%;
  border:1px solid rgba(213,162,76,.35);
  border-radius:44% 56% 54% 46% / 48% 45% 55% 52%;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.08),transparent 68%);
  z-index:-1;
}
.brandname-hero-main{
  position:absolute;
  width:57%;
  height:69%;
  left:21%;
  top:12%;
  object-fit:contain;
  filter:drop-shadow(0 22px 24px rgba(0,0,0,.26));
}
.brandname-hero-float{
  position:absolute;
  width:28%;
  height:29%;
  object-fit:contain;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(213,162,76,.22);
  border-radius:20px;
  padding:8px;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.brandname-hero-float.one{right:0;top:3%}
.brandname-hero-float.two{left:1%;bottom:3%}
.brandname-hero-float.three{right:4%;bottom:1%}
.brandname-product-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
  margin-top:24px!important;
  align-items:stretch!important;
}
.brandname-product-card{
  display:flex!important;
  flex-direction:column!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.58)!important;
}
.brandname-product-card>img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
  padding:0!important;
  margin:0!important;
}
.brandname-product-card.cover-media>img{
  object-fit:cover!important;
  object-position:center 37%!important;
}
.brandname-card-caption{
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
  min-height:74px!important;
  padding:12px 10px 10px!important;
  background:transparent!important;
}
.brandname-card-caption strong{color:var(--jade)}
.brandname-card-caption span{color:var(--m);font-size:.78rem}
.brandname-child-visual{background:#fff!important}
.brandname-child-visual>img{
  aspect-ratio:4/3!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
}
.brandname-faq{display:grid;gap:10px;max-width:900px}
@media(max-width:850px){
  .brandname-hero-grid{grid-template-columns:1fr}
  .brandname-hero-stage{min-height:360px}
  .brandname-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
  .brandname-hero-stage{min-height:310px}
  .brandname-hero-main{width:62%;height:64%;left:19%;top:14%}
  .brandname-hero-float{width:31%;height:27%;border-radius:15px;padding:6px}
  .brandname-product-grid{grid-template-columns:1fr!important}
  .brandname-product-card>img{aspect-ratio:4/3!important}
  .brandname-card-caption{min-height:0!important}
}


/* Brandname V2 refinement */
.brandname-hero-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)!important;
  gap:46px!important;
  align-items:center!important;
}
.brandname-hero-visual{
  margin:0!important;
  overflow:hidden!important;
  border-radius:26px!important;
  border:1px solid rgba(213,162,76,.28)!important;
  background:#0f342f!important;
  box-shadow:0 18px 46px rgba(25,20,15,.16)!important;
}
.brandname-hero-visual>img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  object-fit:cover!important;
  object-position:center 64%!important;
  background:#0f342f!important;
}
.brandname-product-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:28px 24px!important;
  margin-top:28px!important;
}
.brandname-product-card{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  text-decoration:none!important;
}
.brandname-product-card>img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:20px!important;
  border:1px solid rgba(18,63,58,.10)!important;
  background:#f3eee5!important;
  box-shadow:0 14px 30px rgba(44,26,23,.08)!important;
}
.brandname-card-caption{
  min-height:0!important;
  padding:14px 2px 0!important;
  gap:2px!important;
}
.brandname-card-caption strong{
  font-size:1.02rem!important;
  letter-spacing:.01em!important;
}
.brandname-card-caption span{
  font-size:.82rem!important;
  color:var(--m)!important;
}
.brandname-child-visual{
  background:transparent!important;
  overflow:hidden!important;
  border-radius:24px!important;
}
.brandname-child-visual>img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:24px!important;
  background:#f3eee5!important;
  box-shadow:0 16px 34px rgba(44,26,23,.10)!important;
}
@media(max-width:850px){
  .brandname-hero-grid{grid-template-columns:1fr!important;gap:26px!important}
  .brandname-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px 16px!important}
}
@media(max-width:560px){
  .brandname-hero-visual{border-radius:18px!important}
  .brandname-hero-visual>img{aspect-ratio:4/3!important;object-position:center!important}
  .brandname-product-grid{grid-template-columns:1fr!important;gap:24px!important}
  .brandname-product-card>img{border-radius:16px!important}
  .brandname-child-visual,.brandname-child-visual>img{border-radius:18px!important}
}


/* Brandname Full-width Hero Template — approved direction */
.brandname-hero-stack{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
}
.brandname-hero-head{
  max-width:980px!important;
}
.brandname-hero-head h1{
  margin-bottom:28px!important;
}
.brandname-hero-visual.hero-full-visual{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
  background:transparent!important;
}
.brandname-hero-visual.hero-full-visual>img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
.brandname-hero-after{
  display:grid!important;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr)!important;
  gap:34px!important;
  align-items:end!important;
  padding-top:26px!important;
}
.brandname-hero-after>.lead{
  margin:0!important;
  max-width:780px!important;
}
.brandname-hero-cta{
  display:grid!important;
  gap:14px!important;
  justify-items:start!important;
}
.brandname-hero-cta .chips,
.brandname-hero-cta .actions{
  margin:0!important;
}
@media(max-width:850px){
  .brandname-hero-after{
    grid-template-columns:1fr!important;
    gap:20px!important;
    align-items:start!important;
  }
}
@media(max-width:560px){
  .brandname-hero-head h1{margin-bottom:20px!important}
  .brandname-hero-after{padding-top:20px!important}
  .brandname-hero-cta{width:100%!important}
}


/* Full-width Hero Template — shared */
.full-hero-stack{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
}
.full-hero-head{
  max-width:980px!important;
}
.full-hero-head h1{
  margin-bottom:28px!important;
}
.full-hero-visual{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
  background:transparent!important;
}
.full-hero-visual>img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
.full-hero-after{
  display:grid!important;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr)!important;
  gap:34px!important;
  align-items:end!important;
  padding-top:26px!important;
}
.full-hero-after>.lead{
  margin:0!important;
  max-width:780px!important;
}
.full-hero-cta{
  display:grid!important;
  gap:14px!important;
  justify-items:start!important;
}
.full-hero-cta .chips,
.full-hero-cta .actions{
  margin:0!important;
}
@media(max-width:850px){
  .full-hero-after{
    grid-template-columns:1fr!important;
    gap:20px!important;
    align-items:start!important;
  }
}
@media(max-width:560px){
  .full-hero-head h1{margin-bottom:20px!important}
  .full-hero-after{padding-top:20px!important}
  .full-hero-cta{width:100%!important}
}


/* Bicycle page polish */
.bicycle-accent{color:#f1c77e}
.bicycle-notice{margin-top:26px}
.bicycle-faq{display:grid;gap:10px;max-width:900px}


/* Graded Cards full-width hero */
.graded-accent{color:#f1c77e}
.graded-hero-collage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  margin:0;
  padding:clamp(20px,3vw,44px) clamp(18px,3vw,42px);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,1.8vw,26px);
  background:
    radial-gradient(circle at 50% 46%,rgba(241,199,126,.18),transparent 38%),
    linear-gradient(145deg,#123d35 0%,#0b2c27 52%,#08231f 100%);
  border:0;
  box-shadow:none;
}
.graded-hero-collage::before{
  content:"";
  position:absolute;
  inset:8% 7%;
  border:1px solid rgba(241,199,126,.18);
  border-radius:999px;
  pointer-events:none;
}
.graded-slab{
  position:relative;
  z-index:1;
  display:block;
  width:auto;
  height:88%;
  max-width:23%;
  object-fit:contain;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.24));
}
.graded-slab.slab-one{transform:rotate(-4deg) translateY(1%)}
.graded-slab.slab-two{transform:rotate(-1deg) translateY(-2%)}
.graded-slab.slab-three{transform:rotate(2deg) translateY(-1%)}
.graded-slab.slab-four{transform:rotate(4deg) translateY(1%)}
.graded-notice{margin-top:26px}
.graded-faq{display:grid;gap:10px;max-width:900px}
@media(max-width:700px){
  .graded-hero-collage{
    aspect-ratio:4/5;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    gap:10px;
    padding:18px;
  }
  .graded-slab{
    width:100%;
    height:100%;
    max-width:none;
    max-height:100%;
  }
  .graded-slab.slab-one,
  .graded-slab.slab-two,
  .graded-slab.slab-three,
  .graded-slab.slab-four{transform:none}
  .graded-hero-collage::before{inset:6%}
}


/* Mobile Phone full-width hero */
.mobile-phone-accent{color:#f1c77e}
.mobile-phone-notice{margin-top:26px}
.mobile-phone-faq{display:grid;gap:10px;max-width:900px}

/* Homepage Typography/Layout Master — shared across all static pages */
body{
  line-height:1.65!important;
}
.wrap{
  width:min(1160px,calc(100% - 32px))!important;
}
header{
  backdrop-filter:blur(15px)!important;
}
nav{
  min-height:76px!important;
  gap:20px!important;
}
.brand{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  font-weight:950!important;
  font-size:1.18rem!important;
  line-height:1.12!important;
  white-space:normal!important;
}
.brand:before{
  width:44px!important;
  height:56px!important;
  flex:0 0 44px!important;
}
.brandtext{
  display:grid!important;
  line-height:1.12!important;
}
.brandtext strong{
  font-size:1.02rem!important;
  font-weight:950!important;
}
.brandtext small{
  display:block!important;
  color:rgba(248,241,229,.72)!important;
  font-size:.72rem!important;
  font-weight:700!important;
  line-height:1.12!important;
  margin-top:3px!important;
}
.nav{
  gap:22px!important;
  font-size:.9rem!important;
  font-weight:750!important;
}
.btn{
  padding:12px 20px!important;
}
.hero{
  padding:86px 0 72px!important;
}
.crumb{
  font-size:.84rem!important;
  margin-bottom:18px!important;
}
.tag{
  padding:7px 12px!important;
  font-size:.8rem!important;
  font-weight:900!important;
}
h1,h2,h3{
  line-height:1.15!important;
  letter-spacing:-.025em!important;
}
h1{
  font-size:clamp(2.8rem,6vw,5.4rem)!important;
  margin:18px 0!important;
}
h2{
  font-size:clamp(2rem,4vw,3.2rem)!important;
  margin:10px 0 18px!important;
}
.lead{
  font-size:1.18rem!important;
  line-height:1.65!important;
  max-width:720px!important;
}
.chips{
  gap:10px!important;
  margin-top:27px!important;
}
.actions{
  gap:10px!important;
  margin-top:27px!important;
}
.chip{
  padding:10px 14px!important;
  font-weight:950!important;
}
section{
  padding:82px 0!important;
}
.full-hero-head,
.brandname-hero-head{
  max-width:980px!important;
}
.full-hero-head h1,
.brandname-hero-head h1{
  margin:18px 0!important;
}
.full-hero-after,
.brandname-hero-after{
  padding-top:26px!important;
}
.full-hero-cta .chips,
.full-hero-cta .actions,
.brandname-hero-cta .chips,
.brandname-hero-cta .actions{
  margin-top:0!important;
}
.contact{
  padding:42px!important;
  border-radius:32px!important;
}
footer{
  padding:55px 0 95px!important;
}
.footer-grid{
  gap:42px!important;
}
.footer-note{
  margin-top:34px!important;
  padding-top:20px!important;
}

@media(max-width:560px){
  .wrap{
    width:min(100% - 28px,1160px)!important;
  }
  nav{
    min-height:64px!important;
    gap:8px!important;
  }
  .brand{
    gap:8px!important;
    font-size:.96rem!important;
    min-width:0!important;
  }
  .brand:before{
    width:34px!important;
    height:44px!important;
    flex:0 0 34px!important;
  }
  .brandtext strong{
    font-size:.96rem!important;
    white-space:nowrap!important;
  }
  .brandtext small{
    display:block!important;
    font-size:.66rem!important;
    white-space:nowrap!important;
  }
  .hero{
    padding:28px 0 40px!important;
  }
  .crumb{
    margin-bottom:16px!important;
  }
  h1{
    font-size:clamp(2rem,9.5vw,2.45rem)!important;
    line-height:1.18!important;
    letter-spacing:-.018em!important;
    margin:12px 0 16px!important;
  }
  h2{
    font-size:clamp(1.65rem,7vw,2.15rem)!important;
    line-height:1.25!important;
  }
  .lead{
    font-size:1rem!important;
    line-height:1.75!important;
  }
  .tag{
    font-size:.73rem!important;
    padding:6px 10px!important;
  }
  .chip{
    font-size:.82rem!important;
    line-height:1.35!important;
    padding:9px!important;
  }
  section{
    padding:56px 0!important;
  }
  .full-hero-head h1,
  .brandname-hero-head h1{
    margin:12px 0 16px!important;
  }
  .full-hero-after,
  .brandname-hero-after{
    padding-top:20px!important;
  }
  .contact{
    padding:26px 20px!important;
    border-radius:24px!important;
  }
  footer{
    padding-bottom:calc(105px + env(safe-area-inset-bottom))!important;
  }
}

/* Paepongs CTA System — standardized */
.btn{
  min-height:48px!important;
  min-width:170px;
  padding:0 20px!important;
  border-radius:14px!important;
  font-family:"Anuphan",system-ui,-apple-system,"Noto Sans Thai",Tahoma,sans-serif!important;
  font-size:.95rem!important;
  font-weight:700!important;
  line-height:1.2!important;
  box-shadow:none!important;
  transition:filter .16s ease,transform .16s ease,border-color .16s ease!important;
}
.btn:hover{filter:brightness(.97)}
.btn:active{transform:translateY(1px)}
.btn.line{
  background:#16b85b!important;
  color:#fff!important;
  border:1px solid #16b85b!important;
}
.btn.red{
  background:var(--jade)!important;
  color:#fff!important;
  border:1px solid var(--jade)!important;
}
.btn:not(.line):not(.red){
  background:#fff!important;
  color:var(--jade)!important;
  border:1px solid rgba(18,63,58,.28)!important;
}
.actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  align-items:stretch!important;
}
.actions .btn{
  flex:1 1 180px;
  max-width:220px;
}
header nav>.btn{
  min-width:168px!important;
}
.contact-list a,
.contact-channel{
  min-height:64px;
  border-radius:14px!important;
  background:#fff!important;
  border:1px solid rgba(18,63,58,.14)!important;
  box-shadow:none!important;
}
footer .line-mini{
  display:inline!important;
  width:auto!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:rgba(255,255,255,.72)!important;
  font-weight:400!important;
}
.mobile{
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
}
.mobile .btn{
  min-width:0!important;
  width:100%!important;
  max-width:none!important;
}
@media(max-width:560px){
  .contact .actions,
  .aside .btn.line{
    display:none!important;
  }
  .mobile{
    grid-template-columns:1fr 1fr!important;
  }
}

/* Contact channel cards */
.contact-channel-grid{
  align-items:stretch!important;
}
.contact-channel{
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  min-height:180px!important;
  color:inherit!important;
  text-decoration:none!important;
  transition:border-color .16s ease,transform .16s ease!important;
}
.contact-channel:hover{
  border-color:rgba(18,63,58,.34)!important;
  transform:translateY(-1px);
}
.contact-channel h3{
  margin-top:0!important;
}
.contact-channel-action{
  color:var(--jade2)!important;
  font-weight:700!important;
  margin-top:auto!important;
}
@media(max-width:560px){
  .contact-channel{
    min-height:0!important;
  }
}

/* SEO context links */
.seo-context-wrap{
  padding-top:22px!important;
  padding-bottom:0!important;
}
.seo-context-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  align-items:center;
  font-size:.9rem;
  color:var(--m);
}
.seo-context-links a{
  color:var(--jade2);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
.mobile-hub-grid{
  margin-top:22px;
}
@media(max-width:560px){
  .seo-context-wrap{
    padding-top:18px!important;
  }
  .seo-context-links{
    display:grid;
    gap:8px;
    font-size:.86rem;
  }
}

/* Mobile menu master — matches homepage */
.mobile-menu{
  display:none!important;
  margin-left:auto!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
}
.mobile-menu summary{
  list-style:none!important;
  width:44px!important;
  height:44px!important;
  border:2px solid #f2c66d!important;
  border-radius:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  background:#d5a24c!important;
  box-shadow:0 4px 12px rgba(0,0,0,.22)!important;
  padding:0!important;
}
.mobile-menu summary::-webkit-details-marker{display:none!important}
.menu-icon{
  width:22px!important;
  height:22px!important;
  display:block!important;
}
.menu-icon line{
  stroke:#123f3a!important;
  stroke-width:2.6!important;
  stroke-linecap:round!important;
}
.mobile-menu-panel{
  position:absolute!important;
  top:64px!important;
  right:0!important;
  width:min(290px,calc(100vw - 28px))!important;
  background:#0f332f!important;
  border:1px solid rgba(213,162,76,.28)!important;
  border-radius:18px!important;
  padding:10px!important;
  box-shadow:0 18px 45px rgba(0,0,0,.28)!important;
  display:grid!important;
  gap:2px!important;
}
.mobile-menu-panel a{
  padding:12px 13px!important;
  border-radius:12px!important;
  font-weight:780!important;
  color:#f8f1e5!important;
}
.mobile-menu-panel a:hover{
  background:rgba(248,241,229,.08)!important;
}
@media(max-width:900px){
  .mobile-menu{display:block!important}
}
@media(max-width:560px){
  .mobile-menu-panel{top:56px!important}
}

/* Category card product images */
.category-card{
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}
.category-card-image{
  display:block!important;
  width:100%!important;
  height:150px!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
  border-radius:14px!important;
  margin:0 0 18px!important;
}
.category-card h3,
.category-card b{
  margin-top:0!important;
}
.category-card strong,
.category-card .card-link{
  margin-top:auto!important;
}
@media(max-width:560px){
  .category-card-image{height:170px!important}
}

/* Utility classes — no inline styles */
.accent-text{color:#f1c77e!important}
.card-action{color:var(--jade2)!important}
.notice-mb-28{margin-bottom:28px!important}
.notice-mt-24{margin-top:24px!important}

/* Accessibility + clickable cards */
a:focus-visible,
summary:focus-visible,
.btn:focus-visible{
  outline:3px solid var(--g)!important;
  outline-offset:3px!important;
}
.category-card{
  color:inherit!important;
  text-decoration:none!important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
.category-card:hover{
  transform:translateY(-2px);
  border-color:rgba(213,162,76,.55)!important;
  box-shadow:0 14px 30px rgba(18,63,58,.08)!important;
}

/* Footer master */
.footer-links{
  display:grid!important;
  gap:8px!important;
}
.footer-grid>div{
  align-content:start;
}
.footer-grid h3{
  margin-top:0;
}