/* Scoped product-description design for the classic 3D butt mousepad template. */
.c3-butt-page { --ink:#2A2A2A; --muted:#666666; --line:#EEEEEE; --paper:#FFFFFF; --wash:#FBF8F1; --lav:#FFAA18; --lav-dark:#2A2A2A; --peach:#FFF6E1; --gold-pale:#FFE788; --gold-deep:#D2861A; --shadow:0 18px 45px rgba(75,53,12,.10); }
.c3-butt-page * { box-sizing:border-box; }
.c3-butt-page { scroll-behavior:smooth; }
.c3-butt-page { margin:0; color:var(--ink); background:var(--wash); font:16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
.c3-butt-page img, .c3-butt-page video { display:block; max-width:100%; }
.c3-butt-page a { color:inherit; }
.c3-butt-page .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.c3-butt-page .shell { width:min(1180px,calc(100% - 40px)); margin:auto; }
.c3-butt-page .eyebrow { display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; color:var(--lav-dark); font-size:.75rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.c3-butt-page .eyebrow::before { content:""; width:26px; height:2px; background:currentColor; }
.c3-butt-page .hero { padding:28px 0 46px; background:linear-gradient(135deg,#FFF6E1 0%,#FFFFFF 48%,#F1EADD 100%); border-bottom:1px solid var(--line); }
.c3-butt-page .crumbs { display:flex; gap:9px; margin:0 0 26px; color:var(--muted); font-size:.84rem; }
.c3-butt-page .crumbs span:last-child { color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c3-butt-page .product-grid { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(330px,.96fr); gap:clamp(34px,6vw,78px); align-items:start; }
.c3-butt-page .image-frame { position:relative; overflow:hidden; border-radius:24px; background:#ebe8ed; box-shadow:var(--shadow); aspect-ratio:1001 / 1287; }
.c3-butt-page .image-frame img { width:100%; height:100%; object-fit:cover; }
.c3-butt-page .badge { position:absolute; top:17px; left:17px; padding:7px 10px; border-radius:999px; color:#fff; background:rgba(29,29,35,.83); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.c3-butt-page h1, .c3-butt-page h2, .c3-butt-page h3 { line-height:1.15; letter-spacing:-.035em; }
.c3-butt-page h1 { margin:0 0 16px; max-width:14ch; font-size:clamp(2.2rem,4.5vw,4.5rem); }
.c3-butt-page h2 { margin:0; font-size:clamp(1.75rem,3.2vw,3rem); }
.c3-butt-page h3 { margin:0 0 9px; font-size:1.13rem; }
.c3-butt-page .lede { max-width:54ch; margin:0; color:var(--muted); font-size:1.05rem; }
.c3-butt-page .price { display:flex; align-items:baseline; gap:11px; margin:26px 0 22px; }
.c3-butt-page .price strong { font-size:1.75rem; letter-spacing:-.04em; }
.c3-butt-page .price span { color:var(--muted); font-size:.88rem; }
.c3-butt-page .quick-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0 0 22px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:rgba(255,255,255,.7); }
.c3-butt-page .quick-facts div { min-height:78px; padding:13px 14px; border-right:1px solid var(--line); }
.c3-butt-page .quick-facts div:last-child { border:0; }
.c3-butt-page .quick-facts b { display:block; margin-bottom:3px; font-size:.82rem; }
.c3-butt-page .quick-facts span { color:var(--muted); font-size:.78rem; line-height:1.35; }
.c3-butt-page .notice { margin:0 0 18px; padding:13px 15px; border-left:3px solid var(--lav); border-radius:0 10px 10px 0; background:#FFF6E1; color:#5B430E; font-size:.86rem; }
.c3-butt-page .actions { display:flex; gap:12px; flex-wrap:wrap; }
.c3-butt-page .button { display:inline-flex; min-height:52px; align-items:center; justify-content:center; padding:0 23px; border:1px solid transparent; border-radius:12px; text-decoration:none; font-weight:800; transition:transform .2s,background .2s; }
.c3-butt-page .button:hover { transform:translateY(-2px); }
.c3-butt-page .button--primary { color:#fff; background:var(--lav-dark); }
.c3-butt-page .button--secondary { border-color:var(--line); background:#fff; }
.c3-butt-page section { padding:78px 0; }
.c3-butt-page .intro { background:#fff; }
.c3-butt-page .section-head { margin-bottom:35px; }
.c3-butt-page .section-head p { margin:0; color:var(--muted); }
.c3-butt-page .story { display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(25px,5vw,65px); align-items:center; }
.c3-butt-page .video-wrap { overflow:hidden; border-radius:22px; background:#201d26; box-shadow:var(--shadow); }
.c3-butt-page .video-wrap video { width:100%; aspect-ratio:1/1; object-fit:cover; }
.c3-butt-page .copy p { margin:0 0 18px; color:var(--muted); }
.c3-butt-page .copy p:last-child { margin:0; }
.c3-butt-page .source-copy { margin-top:22px; padding:18px 20px; border-left:3px solid var(--lav); border-radius:0 12px 12px 0; background:#FFF8E9; }
.c3-butt-page .source-copy strong { display:block; margin-bottom:5px; color:var(--ink); }
.c3-butt-page .source-copy p { margin:0; font-size:.92rem; }
.c3-butt-page .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.c3-butt-page .feature { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; }
.c3-butt-page .feature img { width:100%; aspect-ratio:1.34/1; object-fit:cover; }
.c3-butt-page .feature div { padding:21px; }
.c3-butt-page .feature p { margin:0; color:var(--muted); font-size:.93rem; }
.c3-butt-page .specs { background:var(--peach); }
.c3-butt-page .spec-card { overflow:hidden; border:1px solid #ecdcd7; border-radius:22px; background:#fff; box-shadow:0 12px 34px rgba(72,45,42,.07); }
.c3-butt-page .materials { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); }
.c3-butt-page .materials div { padding:21px; border-right:1px solid var(--line); }
.c3-butt-page .materials div:last-child { border:0; }
.c3-butt-page .materials b { display:block; margin-bottom:4px; font-size:.92rem; }
.c3-butt-page .materials span { color:var(--muted); font-size:.86rem; }
.c3-butt-page .size-reference { margin:0; overflow:hidden; border-bottom:1px solid var(--line); background:#F8FAFE; }
.c3-butt-page .size-reference__head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:17px; }
.c3-butt-page .size-reference h3 { margin:0; font-size:1.25rem; }
.c3-butt-page .size-reference p { max-width:56ch; margin:0; color:var(--muted); font-size:.86rem; }
.c3-butt-page .size-reference figure { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:#F8FAFE; }
.c3-butt-page .size-reference img { display:block; width:100%; height:auto; }
.c3-butt-page .size-cards { padding:26px 28px 30px; background:linear-gradient(180deg,#FFFDF8 0%,#FFF8E8 100%); }
.c3-butt-page .size-cards__title { margin:0 0 15px; color:var(--ink); font-size:1.05rem; font-weight:800; }
.c3-butt-page .size-cards__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.c3-butt-page .size-card { min-width:0; padding:15px; border:1px solid #F0DFC0; border-radius:14px; background:rgba(255,255,255,.9); box-shadow:0 7px 16px rgba(105,73,19,.05); }
.c3-butt-page .size-card__top { display:flex; align-items:center; gap:9px; min-width:0; margin-bottom:14px; }
.c3-butt-page .size-card__top span { display:grid; width:25px; height:25px; flex:0 0 25px; place-items:center; border-radius:50%; color:var(--ink); background:var(--gold-pale); font-size:.68rem; font-weight:800; }
.c3-butt-page .size-card__top strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:.91rem; }
.c3-butt-page .size-card dl { display:grid; gap:10px; margin:0; }
.c3-butt-page .size-card dl div { min-width:0; padding-top:10px; border-top:1px solid var(--line); }
.c3-butt-page .size-card dt { margin:0 0 3px; color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.c3-butt-page .size-card dd { margin:0; color:var(--ink); font-size:.92rem; font-weight:800; line-height:1.35; overflow-wrap:anywhere; }
.c3-butt-page .size-card small { color:var(--muted); font-size:.76em; font-weight:700; }
.c3-butt-page .gallery { background:#fff; }
.c3-butt-page .gallery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.c3-butt-page .gallery-grid a { display:block; overflow:hidden; border-radius:16px; background:#eee; aspect-ratio:3/2; }
.c3-butt-page .gallery-grid img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.c3-butt-page .gallery-grid a:hover img { transform:scale(1.05); }
.c3-butt-page .trust { background:var(--paper); }
.c3-butt-page .trust-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,.9fr); overflow:hidden; border:1px solid var(--line); border-radius:24px; background:linear-gradient(135deg,#FFFFFF 0%,#FFF9EA 100%); box-shadow:var(--shadow); }
.c3-butt-page .trust-copy { padding:clamp(30px,5vw,66px); }
.c3-butt-page .trust-copy > p:not(.eyebrow) { max-width:55ch; margin:17px 0 0; color:var(--muted); }
.c3-butt-page .trust-points { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:31px; }
.c3-butt-page .trust-point { padding:17px; border:1px solid #F1E3C5; border-radius:14px; background:rgba(255,255,255,.78); }
.c3-butt-page .trust-point b { display:flex; align-items:center; gap:9px; margin-bottom:7px; font-size:.95rem; }
.c3-butt-page .trust-point b::before { display:grid; width:24px; height:24px; place-items:center; flex:0 0 24px; border-radius:50%; color:var(--ink); background:var(--gold-pale); font-size:.72rem; }
.c3-butt-page .trust-point:nth-child(1) b::before { content:"01"; }
.c3-butt-page .trust-point:nth-child(2) b::before { content:"02"; }
.c3-butt-page .trust-point:nth-child(3) b::before { content:"03"; }
.c3-butt-page .trust-point:nth-child(4) b::before { content:"04"; }
.c3-butt-page .trust-point span { display:block; color:var(--muted); font-size:.84rem; line-height:1.48; }
.c3-butt-page .trust-visual { display:flex; align-items:stretch; min-height:100%; background:linear-gradient(145deg,#FFF6E1,#DDEEFF); }
.c3-butt-page .trust-visual img { width:100%; height:100%; object-fit:cover; object-position:center; }
.c3-butt-page .reviews { background:var(--wash); }
.c3-butt-page .reviews-head { display:flex; align-items:end; justify-content:space-between; gap:28px; margin-bottom:31px; }
.c3-butt-page .reviews-head > div:last-child { max-width:42ch; color:var(--muted); font-size:.9rem; }
.c3-butt-page .review-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; }
.c3-butt-page .review-controls { display:flex; gap:8px; flex:0 0 auto; }
.c3-butt-page .review-control { display:grid; width:42px; height:42px; place-items:center; border:1px solid #E6D9BD; border-radius:50%; color:var(--ink); background:var(--paper); cursor:pointer; font-size:1.2rem; transition:background .2s,transform .2s; }
.c3-butt-page .review-control:hover { background:var(--gold-pale); transform:translateY(-2px); }
.c3-butt-page .review-carousel { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 36px) / 3); gap:18px; overflow-x:auto; padding:0 1px 12px; scroll-behavior:smooth; scroll-snap-type:x mandatory; scrollbar-color:#D9C8A4 transparent; scrollbar-width:thin; }
.c3-butt-page .review-card { display:flex; min-height:250px; flex-direction:column; overflow:hidden; padding:0; border:1px solid var(--line); border-radius:18px; background:var(--paper); }
.c3-butt-page .review-card { scroll-snap-align:start; }
.c3-butt-page .review-photo { display:grid; height:245px; place-items:center; overflow:hidden; padding:10px; background:#F1EADD; }
.c3-butt-page .review-photo img { width:100%; height:100%; object-fit:contain; }
.c3-butt-page .review-card h3 { margin:16px 25px 0; font-size:.88rem; letter-spacing:0; }
.c3-butt-page .review-card::before { content:"“"; height:32px; margin:23px 25px 0; color:var(--lav); font-family:Georgia,serif; font-size:4rem; line-height:.9; }
.c3-butt-page .review-card blockquote { margin:13px 0 24px; color:var(--ink); font-size:.98rem; line-height:1.58; }
.c3-butt-page .review-card blockquote, .c3-butt-page .review-card footer { margin-left:25px; margin-right:25px; }
.c3-butt-page .review-card footer { display:flex; align-items:center; gap:10px; margin-top:auto; margin-bottom:25px; color:var(--muted); font-size:.82rem; }
.c3-butt-page .review-card footer::before { display:grid; width:31px; height:31px; place-items:center; border-radius:50%; color:var(--ink); background:var(--gold-pale); font-weight:800; content:"Y"; }
.c3-butt-page .review-card strong { display:block; color:var(--ink); font-size:.84rem; }
.c3-butt-page .review-gallery { margin-top:30px; overflow:hidden; }
.c3-butt-page .review-gallery__label { margin:0 0 11px; color:var(--muted); font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.c3-butt-page .review-gallery__track { display:flex; width:max-content; gap:10px; animation:community-gallery 52s linear infinite; }
.c3-butt-page .review-gallery:hover .review-gallery__track { animation-play-state:paused; }
.c3-butt-page .review-gallery__image { width:138px; height:184px; flex:0 0 auto; overflow:hidden; border-radius:11px; background:#EEE9E0; }
.c3-butt-page .review-gallery__image img { width:100%; height:100%; object-fit:cover; }
@keyframes community-gallery { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) {
.c3-butt-page .review-gallery__track { animation:none; width:auto; overflow-x:auto; } }
.c3-butt-page .review-note { margin:17px 0 0; color:var(--muted); font-size:.78rem; text-align:center; }
.c3-butt-page .faq { background:var(--wash); }
.c3-butt-page .faq-wrap { width:min(880px,100%); margin:auto; }
.c3-butt-page .faq-head { margin-bottom:28px; text-align:center; }
.c3-butt-page .faq-head p:last-child { max-width:62ch; margin:13px auto 0; color:var(--muted); }
.c3-butt-page .faq-list { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--paper); }
.c3-butt-page .faq-list details + details { border-top:1px solid var(--line); }
.c3-butt-page .faq-list summary { position:relative; padding:20px 58px 20px 22px; cursor:pointer; font-weight:800; list-style:none; }
.c3-butt-page .faq-list summary::-webkit-details-marker { display:none; }
.c3-butt-page .faq-list summary::after { content:"+"; position:absolute; top:50%; right:22px; color:var(--gold-deep); font-size:1.55rem; font-weight:400; line-height:1; transform:translateY(-50%); }
.c3-butt-page .faq-list details[open] summary::after { content:"−"; }
.c3-butt-page .faq-answer { padding:0 22px 22px; color:var(--muted); }
.c3-butt-page .faq-answer p { margin:0; }
@media (max-width:820px) {
.c3-butt-page .product-grid, .c3-butt-page .story, .c3-butt-page .section-head, .c3-butt-page .trust-panel { grid-template-columns:1fr; }
.c3-butt-page .section-head { gap:14px; }
.c3-butt-page .feature-grid { grid-template-columns:1fr; }
.c3-butt-page .feature { display:grid; grid-template-columns:150px 1fr; }
.c3-butt-page .feature img { height:100%; aspect-ratio:auto; }
.c3-butt-page .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.c3-butt-page .trust-visual { min-height:330px; grid-row:1; }
.c3-butt-page .reviews-head { display:block; }
.c3-butt-page .reviews-head > div:last-child { margin-top:11px; }
.c3-butt-page .review-carousel { grid-auto-columns:calc((100% - 18px) / 2); } }
@media (max-width:520px) {
.c3-butt-page .shell { width:100%; }
.c3-butt-page .hero { padding-top:19px; }
.c3-butt-page section { padding:54px 0; }
.c3-butt-page .quick-facts { grid-template-columns:1fr; }
.c3-butt-page .quick-facts div { min-height:0; border-right:0; border-bottom:1px solid var(--line); }
.c3-butt-page .materials { grid-template-columns:1fr; }
.c3-butt-page .materials div { border-right:0; border-bottom:1px solid var(--line); }
.c3-butt-page .materials div:last-child { border-bottom:0; }
.c3-butt-page .feature { grid-template-columns:1fr; }
.c3-butt-page .feature img { aspect-ratio:1.35/1; }
.c3-butt-page .size-reference { padding:0; }
.c3-butt-page .size-reference__head { display:block; }
.c3-butt-page .size-reference p { margin-top:8px; }
.c3-butt-page .size-cards { padding:18px 12px 22px; }
.c3-butt-page .size-cards__title { margin-bottom:11px; font-size:1rem; }
.c3-butt-page .size-cards__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.c3-butt-page .size-card { padding:12px 10px; border-radius:12px; }
.c3-butt-page .size-card__top { gap:7px; margin-bottom:10px; }
.c3-butt-page .size-card__top span { width:22px; height:22px; flex-basis:22px; font-size:.61rem; }
.c3-butt-page .size-card__top strong { font-size:.8rem; }
.c3-butt-page .size-card dl { gap:8px; }
.c3-butt-page .size-card dl div { padding-top:8px; }
.c3-butt-page .size-card dt { font-size:.58rem; letter-spacing:.025em; }
.c3-butt-page .size-card dd { font-size:.76rem; line-height:1.3; }
.c3-butt-page .size-card small { display:inline; font-size:.85em; }
.c3-butt-page .trust-copy { padding:28px 20px; }
.c3-butt-page .trust-points { grid-template-columns:1fr; }
.c3-butt-page .trust-visual { min-height:245px; }
.c3-butt-page .review-heading { align-items:center; }
.c3-butt-page .review-carousel { grid-auto-columns:86%; }
.c3-butt-page .review-photo { height:270px; }
.c3-butt-page .review-card { min-height:0; }
.c3-butt-page .review-card::before { margin:20px 20px 0; }
.c3-butt-page .review-card h3 { margin-left:20px; margin-right:20px; }
.c3-butt-page .review-card blockquote, .c3-butt-page .review-card footer { margin-left:20px; margin-right:20px; }
.c3-butt-page .review-card footer { margin-bottom:20px; }
.c3-butt-page .review-gallery__image { width:112px; height:150px; }
.c3-butt-page .faq-list summary { padding:17px 48px 17px 17px; font-size:.92rem; }
.c3-butt-page .faq-list summary::after { right:17px; }
.c3-butt-page .faq-answer { padding:0 17px 18px; font-size:.9rem; } }

/* Local preview refinement: balanced review heading controls. */
.c3-butt-page .reviews-head { display:block; margin-bottom:31px; }
.c3-butt-page .reviews-head > .review-heading { width:100% !important; max-width:none !important; margin-top:0; color:inherit; font-size:inherit; }
.c3-butt-page .review-heading { display:flex; width:100%; align-items:flex-end; justify-content:space-between; gap:24px; }
.c3-butt-page .review-heading > div:first-child { min-width:0; flex:1 1 auto; max-width:40rem; }
.c3-butt-page .review-heading h2 { color:var(--ink); }
.c3-butt-page .review-controls { justify-content:flex-end; }
@media (max-width:520px) { .c3-butt-page .review-heading { gap:12px; align-items:flex-end; } .c3-butt-page .review-heading > div:first-child { max-width:none; } }

/* Match the full-width canvas of the approved local HTML inside the theme tab container. */
.c3-butt-page {
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.c3-butt-page .review-photo {
  width:calc(100% - 80px);
  margin:16px 40px;
}


/* Codex unified mobile feature-card and link treatment */
.c3-butt-page a{text-decoration:none!important}
@media (max-width:820px){
  .c3-butt-page .feature{display:flex!important;flex-direction:column!important;grid-template-columns:none!important;overflow:hidden!important}
  .c3-butt-page .feature>img{display:block!important;order:0!important;width:100%!important;height:auto!important;aspect-ratio:1.35/1!important;object-fit:cover!important;position:static!important}
  .c3-butt-page .feature>div{display:block!important;order:1!important;width:100%!important;padding:20px 16px!important;position:static!important;background:#fff!important}
  .c3-butt-page .feature>div h3{margin:0 0 8px!important;color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important}
  .c3-butt-page .feature>div p{margin:0!important;color:var(--muted)!important;-webkit-text-fill-color:var(--muted)!important}
}