/* Oct 29: Cormorant Garamond removed, product page uses the house serif (Fraunces) from stylesheet_zz_vb.css */
/* Village Bears product page: "Collector's Dossier" (approved Oct 26 2026) */
.vb-pp{--pp-serif:var(--vb-serif,Fraunces,Georgia,serif);--pp-navy:#12355F;--pp-ink:#0F1E33;--pp-text:#2D3748;--pp-sub:#3A475A;--pp-label:#4A5568;--pp-plate:#F1F2F4;--pp-hair:#BFC6D0;--pp-hair2:#CDD2DA;max-width:1080px;margin:0 auto;padding:22px 0 40px;color:#1B2533;font-family:var(--vb-sans)}
.vb-pp__top{display:grid;grid-template-columns:500px minmax(0,1fr);gap:64px;align-items:start}

/* Photo */
.vb-pp__photo{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.vb-pp__plate{background:var(--pp-plate);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--pp-hair2),inset 0 0 0 10px var(--pp-plate),inset 0 0 0 11px #D9DDE3}
.vb-pp__plate img{width:80%;height:80%;object-fit:contain;mix-blend-mode:multiply}
.vb-pp__plate .vb-noimg{color:var(--pp-label);font-size:13px}
.vb-pp__thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.vb-pp__thumb{height:88px;padding:0;background:var(--pp-plate);border:1px solid var(--pp-hair2);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:0}
.vb-pp__thumb img{width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply}
.vb-pp__thumb.is-on,.vb-pp__thumb:hover{border-color:var(--pp-navy)}
.vb-pp__thumb:focus-visible{outline:2px solid var(--pp-navy);outline-offset:2px}
.vb-pp__notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vb-pp__notes--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vb-pp__note{min-height:88px;border-top:1px solid var(--pp-hair);border-bottom:1px solid var(--pp-hair);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:8px 4px;box-sizing:border-box}
.vb-pp__note b{font-size:11px;letter-spacing:.16em;font-weight:600;color:var(--pp-navy);text-transform:uppercase}
.vb-pp__note span{font-size:12px;color:var(--pp-sub)}
.vb-pp__note small{font-size:11px;color:var(--pp-label)}

/* Info column */
.vb-pp__info{display:flex;flex-direction:column;gap:14px;padding-top:18px;min-width:0}
.vb-pp__maker{font-size:11px;letter-spacing:.22em;font-weight:600;color:var(--pp-navy);text-transform:uppercase}
body .vb-pp h1.vb-pp__title{margin:0;font-family:var(--pp-serif);font-weight:400;font-size:46px;line-height:1.08;color:var(--pp-ink);letter-spacing:-.02em;text-transform:none}
.vb-pp__coll{font-family:var(--pp-serif);font-style:italic;font-size:19px;color:var(--pp-sub)}
.vb-pp__pricebar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:8px}
body .vb-pp h2.vb-pp__price{margin:0;font-family:var(--pp-serif);font-size:30px;font-weight:400;color:var(--pp-ink);line-height:1.1;font-variant-numeric:lining-nums}
.vb-pp__price .normalprice{font-size:22px;color:var(--pp-label);margin-right:8px}
.vb-pp__price .productSpecialPrice,.vb-pp__price .productSalePrice{color:var(--pp-ink)}
.vb-pp__pricebar .vb-cap{margin:0;padding:4px 10px;border:1px solid currentColor;border-radius:12px;font-size:11px;letter-spacing:.16em;gap:6px;line-height:1.3}
.vb-pp__pricebar .vb-cap--two{color:var(--pp-navy)}
.vb-pp__pricebar .vb-cap--two .vb-dot{background:var(--pp-navy)}
.vb-pp__pricebar .vb-prenote{flex-basis:100%;margin:0;font-size:14px;color:var(--pp-sub)}

/* Buy */
.vb-pp__buy{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.vb-pp__buy .wrapperAttribsOptions{margin:0}
.vb-pp__cart{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.vb-pp__cart .max-qty{flex-basis:100%;order:3;font-size:12px;color:var(--pp-label)}
.vb-pp__qty{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pp-label)}
.vb-pp__qty input{width:56px;height:46px;box-sizing:border-box;border:1px solid var(--pp-hair);text-align:center;font:inherit;font-size:15px;letter-spacing:0;color:var(--pp-ink);background:#fff}
.vb-pp__incart{flex-basis:100%;margin:0;font-size:13px;color:var(--pp-sub)}
.vb-btn{height:48px;padding:0 34px;border-radius:2px;font:600 12px var(--vb-sans);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;box-sizing:border-box}
.vb-btn--solid{border:0;background:var(--pp-navy);color:#F1F3F6}
.vb-btn--solid:hover{background:#0A2242}
.vb-btn--line{border:1px solid var(--pp-navy);background:transparent;color:var(--pp-navy);padding:0 22px}
.vb-btn--line:hover{background:rgba(18,53,95,.06)}
.vb-btn:focus-visible{outline:2px solid var(--pp-navy);outline-offset:2px}
.vb-pp__ask{font-size:13px;margin-top:2px}
.vb-pp__ask a{color:var(--pp-navy)}
.vb-pp__ask a:hover{color:#0A2242}
.vb-pp__noteline{margin:4px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:10px;letter-spacing:.14em;font-weight:600;color:var(--pp-navy);text-transform:uppercase}
.vb-pp__noteline .vb-sep{color:#8E9BB0}

/* Spec table */
.vb-pp__specs{margin:18px 0 0;display:grid;grid-template-columns:130px minmax(0,1fr);font-size:13px;border-top:1px solid var(--pp-hair)}
.vb-pp__specs dt{padding:10px 12px 10px 0;border-bottom:1px solid var(--pp-hair2);letter-spacing:.12em;font-size:11px;font-weight:600;color:var(--pp-label);text-transform:uppercase}
.vb-pp__specs dd{margin:0;padding:10px 0;border-bottom:1px solid var(--pp-hair2);color:#1B2533}

/* About */
.vb-pp__about{display:grid;grid-template-columns:500px minmax(0,1fr);gap:64px;margin-top:48px;padding-top:32px;border-top:1px solid var(--pp-hair)}
body .vb-pp__about h2{margin:0;font-family:var(--pp-serif);font-weight:400;font-size:28px;color:var(--pp-ink)}
.vb-pp__desc{font-size:15px;line-height:1.7;color:var(--pp-text)}
.vb-pp__desc *{font-family:inherit!important;font-size:inherit!important;color:inherit!important;line-height:inherit!important;background:none!important}
.vb-pp__desc p{margin:0 0 12px}
.vb-pp__desc img{max-width:100%;height:auto}
.vb-pp__desc .vb-dc{float:left;font-family:var(--pp-serif)!important;font-size:58px!important;line-height:.85!important;padding:6px 8px 0 0;color:var(--pp-navy)!important;font-style:normal!important;font-weight:500!important}
.vb-pp__desc .vb-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vb-pp__desc .vb-unused{float:left;font-family:var(--pp-serif)!important;font-size:58px!important;line-height:.85!important;padding:6px 8px 0 0;color:var(--pp-navy)!important;font-style:normal;font-weight:500}

/* Cabinet */
.vb-pp__cabinet{margin-top:40px}
body .vb-pp__cabinet h2{margin:0;font-family:var(--pp-serif);font-weight:500;font-size:26px;color:var(--pp-ink);text-align:center}
.vb-pp__cabrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:18px}
.vb-pp__cab{display:flex;flex-direction:column;gap:6px;text-align:center;text-decoration:none;color:inherit}
.vb-pp__cabpic{height:170px;background:#EDEEF1;box-shadow:inset 0 0 0 1px var(--pp-hair2);display:flex;align-items:center;justify-content:center}
.vb-pp__cabpic img{max-width:80%;max-height:80%;object-fit:contain;mix-blend-mode:multiply}
.vb-pp__cabname{font-family:var(--pp-serif);font-size:18px;color:var(--pp-ink)}
.vb-pp__cab:hover .vb-pp__cabname{text-decoration:underline}
.vb-pp__cabmeta{font-size:12px;color:var(--pp-label)}
.vb-pp__cabmeta .normalprice{margin-right:4px}

/* Tablet and phone */
@media (max-width:1100px){
  .vb-pp{padding-left:16px;padding-right:16px}
  .vb-pp__top,.vb-pp__about{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
}
@media (max-width:760px){
  .vb-pp__top,.vb-pp__about{grid-template-columns:minmax(0,1fr);gap:24px}
  .vb-pp__info{padding-top:0}
  body .vb-pp h1.vb-pp__title{font-size:38px}
  .vb-pp__thumbs{gap:6px}
  .vb-pp__thumb{height:auto;aspect-ratio:1/1}
  .vb-pp__note b{font-size:10px;letter-spacing:.12em}
  .vb-pp__specs{grid-template-columns:104px minmax(0,1fr)}
  .vb-pp__cabrow{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .vb-pp__cabpic{height:140px}
  .vb-btn{flex:1 1 auto;justify-content:center;padding:0 18px}
}

/* Win over the older product-page rules in stylesheet.css / stylesheet_zz_vb.css */
html body #productGeneral.vb-pp h1#productName{margin:0;font-family:var(--pp-serif);font-weight:500;font-size:52px;line-height:1.02;color:var(--pp-ink);letter-spacing:0;text-align:left}
html body #productGeneral.vb-pp h2#productPrices{margin:0;font-family:var(--pp-serif);font-size:34px;font-weight:600;color:var(--pp-ink);line-height:1.1;text-align:left}
html body #productGeneral.vb-pp #cart-box{float:none;width:auto;margin:8px 0 0;padding:0;background:none;border:0;box-shadow:none;border-radius:0}
html body #productGeneral.vb-pp #cartAdd{background:none;border:0;border-radius:0;padding:0;text-align:left;margin:0}
html body #productGeneral.vb-pp .vb-btn{height:48px!important;padding:0 34px!important;border-radius:2px!important;font:600 12px var(--vb-sans)!important;letter-spacing:.18em!important;text-transform:uppercase!important;box-shadow:none!important}
html body #productGeneral.vb-pp .vb-btn--line{padding:0 22px!important}
html body #productGeneral.vb-pp .vb-pp__qty{padding:0;line-height:1}
html body #productGeneral.vb-pp #productDescription{font-size:15px;line-height:1.7;color:var(--pp-text)}
html body #productGeneral.vb-pp .vb-pp__about h2,html body #productGeneral.vb-pp .vb-pp__cabinet h2{font-family:var(--pp-serif);font-weight:500;letter-spacing:0}
@media (max-width:760px){
  html body #productGeneral.vb-pp h1#productName{font-size:38px}
  html body #productGeneral.vb-pp .vb-btn{padding:0 18px!important}
}

/* Oct 27 2026 review fixes */
/* (1) fixed photo frame: tall or wide photos fit inside, the plate never stretches */
html body #productGeneral.vb-pp .vb-pp__plate{height:500px;aspect-ratio:auto}
html body #productGeneral.vb-pp .vb-pp__plate img{width:auto;height:auto;max-width:80%;max-height:80%;object-fit:contain}
html body #productGeneral.vb-pp .vb-pp__thumb img{width:auto;height:auto;max-width:84%;max-height:84%;object-fit:contain}
/* (2)(3) no review button, no previous/next block on the product page */
html body #productGeneral.vb-pp #productReviewLink,html body #productGeneral.vb-pp .reviewCount,html body #productGeneral.vb-pp .navNextPrevWrapper{display:none}
/* (4) About this piece: one column, heading on top */
html body #productGeneral.vb-pp .vb-pp__about{display:block;max-width:none;margin-top:48px;padding-top:32px}
html body #productGeneral.vb-pp .vb-pp__about h2{margin:0 0 16px}
html body #productGeneral.vb-pp .vb-pp__desc{max-width:720px}
/* (6) no quantity label */
html body #productGeneral.vb-pp .vb-pp__qty{gap:0}
@media (max-width:1100px){
  html body #productGeneral.vb-pp .vb-pp__plate{height:420px}
}
@media (max-width:760px){
  html body #productGeneral.vb-pp .vb-pp__plate{height:calc(100vw - 32px);max-height:500px}
  html body #productGeneral.vb-pp .vb-pp__thumb{height:auto;aspect-ratio:1/1}
}
/* Oct 27 2026: the old Write Review row ended with a float-clearing <br>; without it floats inside the
   description could pull the footer up beside the page. Contain them in the page and start the footer clean. */
html body #productGeneral.vb-pp::after{content:"";display:table;clear:both}
html body #productGeneral.vb-pp .vb-pp__desc{display:flow-root}
html body .vb-footer{clear:both}
/* drop cap: sits snug against the rest of its word */
html body #productGeneral.vb-pp .vb-pp__desc .vb-dc{padding:4px 4px 0 0!important;margin-right:2px}
/* Paul, Oct 27: About text runs the full width of the hairline above it */
html body #productGeneral.vb-pp .vb-pp__desc{max-width:none}
/* Oct 27 ~9 am fixes */
/* quantity box: old stylesheet.css '#cartAdd input[type="text"]{width:11%;padding:7px!important}' squashed it */
html body #productGeneral.vb-pp #cartAdd input[type="text"]{width:56px!important;height:48px!important;padding:0!important;margin:0;text-align:center;border:1px solid var(--pp-navy);border-radius:2px;box-sizing:border-box;font:500 15px var(--vb-sans);color:var(--pp-ink);background:#fff}
/* description paragraphs line up with the heading (old 'p{padding:0.5em}') */
html body #productGeneral.vb-pp .vb-pp__desc p,html body #productGeneral.vb-pp .vb-pp__desc div{padding:0!important}
/* drop cap: classic wrap-under style, exactly three lines tall (15px text x 1.7 line height = 25.5px lines) */
html body #productGeneral.vb-pp .vb-pp__desc .vb-dc{float:left;font-family:var(--pp-serif)!important;font-weight:500!important;font-style:normal!important;color:var(--pp-navy)!important;font-size:100px!important;line-height:76px!important;height:76px;margin:4px 10px 0 0;padding:0!important}
/* breadcrumb to photo: ~24px as in option B */
html body #productGeneral.vb-pp{padding-top:24px}
html body #productGeneral.vb-pp #productDescription.vb-pp__desc{padding:0!important;margin:0}