/* Order page (inc/product-order.php + product-order.js), Vistaprint-style:
   white page, large photo left, a calm single options column right.
   Layered on product.css; rules are scoped to body.fp26o (added by PHP) and
   body.fp26o-v (added by the script once the layout is built). */

/* ---------- Page ---------- */
body.fp26o .add_to_cart_bottom,
body.fp26o #content .info-product,
body.fp26o #content .product-images-content .wc_zoom { display: none !important; }
/* An outer wrapper has overflow:hidden, which disables sticky; clip trims the same overflow without that side effect. */
body.fp26o > div:has(#content .product-top) { overflow: clip visible !important; }

@media (min-width: 992px) {
  body.fp26o-v #content .product-top { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: start; gap: 56px; margin: 24px 0 56px; }
  body.fp26o-v #content .product-top::before, body.fp26o-v #content .product-top::after { display: none; }
  body.fp26o-v #content .product-top > .content-product-left { position: sticky; top: 96px; grid-column: 1; grid-row: 1; width: auto !important; max-width: none !important; float: none; padding: 0; }
  body.fp26o-v #content .product-top > .content-product-right { grid-column: 2; grid-row: 1; width: auto !important; max-width: none !important; float: none; padding: 0; }
  body.fp26o-v #content .product-top > .content-product-right > .row { margin: 0; }
  body.fp26o-v #content .product-top > .content-product-right > .row > [class*="col-"] { width: 100%; padding: 0; }
  body.fp26o-v #content .product-top > .content-product-right .pl20 { padding-left: 0; }
}

/* ---------- Gallery ---------- */
.fp26o-gallery__main { overflow: hidden; border-radius: 20px; background: #f4f5f8; }
.fp26o-gallery__main .fp26c-crop { aspect-ratio: 1 / 1 !important; border-radius: 20px; }
.fp26o-gallery__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
body.fp26o #content .fp26o-gallery__thumb { width: 72px; height: 72px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 12px; background: #f4f5f8; cursor: pointer; transition: border-color .15s; }
.fp26o-gallery__thumb .fp26c-crop { width: 100%; height: 100%; aspect-ratio: 1 / 1 !important; }
body.fp26o #content .fp26o-gallery__thumb:hover { border-color: var(--p-line); }
body.fp26o #content .fp26o-gallery__thumb.is-on { border-color: var(--p-ink); }

/* ---------- Title, key points, starting price ---------- */
body.fp26o-v.fp-refreshed.single-product #content .shop-top { margin: 0 0 8px; padding: 0; border: 0; }
body.fp26o-v #content .shop-top .product_title { margin: 0 0 14px; color: var(--p-ink); font-size: clamp(26px, 2.5vw, 34px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
body.fp26o-v #content .shop-top .price { display: none !important; }
.fp26o-from { margin: 0 0 14px !important; color: var(--p-muted); font-size: 15px; }
.fp26o-from b { color: var(--p-ink); font-size: 20px; }
.fp26o-points { display: grid; gap: 8px; margin: 0 0 10px !important; padding: 0 !important; list-style: none; }
.fp26o-points li { position: relative; padding-left: 26px; color: #4a4f63; font-size: 15px; line-height: 1.55; }
.fp26o-points li::before { content: ""; position: absolute; top: .38em; left: 2px; width: 14px; height: 8px; border-left: 2px solid #16a34a; border-bottom: 2px solid #16a34a; transform: rotate(-45deg); }
body.fp26o #content .fp26o-readmore { color: var(--p-ink); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.fp26o-intro { padding-bottom: 24px; border-bottom: 1px solid var(--p-line); }

/* ---------- Option sections ---------- */
body.fp26o-v #content form.variations_form,
body.fp26o-v #content form.variations_form > div,
body.fp26o-v #content .content-product-right .shop-bottom { width: 100% !important; max-width: none !important; }
body.fp26o-v #content form.variations_form table.variations { display: block; width: 100%; margin: 0; padding: 24px 0 0; border: 0; background: none; }
body.fp26o-v #content form.variations_form table.variations tbody { display: block; }
body.fp26o-v #content form.variations_form table.variations tr { display: block; margin: 0 0 22px; }
body.fp26o-v #content form.variations_form table.variations :is(th, td) { display: block; width: auto !important; padding: 0 !important; border: 0; background: none; text-align: left; }
body.fp26o-v #content form.variations_form table.variations td.label { margin-bottom: 10px; }
body.fp26o-v #content form.variations_form table.variations td.label label { margin: 0; color: var(--p-ink); font-size: 16px; font-weight: 700; }
body.fp26o-v #content form.variations_form table.variations .reset_variations { display: none !important; }
body.fp26o-v #content form.variations_form table.variations.is-flagged td.label label { color: var(--p-price); }

/* Main option: a list of rows (radio dot, name, tag, price on the right) */
.fp26o-list { display: grid; overflow: hidden; border: 1px solid var(--p-line); border-radius: 14px; }
body.fp26o #content .fp26o-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; margin: 0; padding: 12px 18px; border: 0; border-top: 1px solid var(--p-line); border-radius: 0; color: var(--p-ink); background: #fff; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
body.fp26o #content .fp26o-card:first-child { border-top: 0; }
body.fp26o #content .fp26o-card:hover { background: #f8f9fb; }
body.fp26o #content .fp26o-card.is-on { background: #f3f6fd; box-shadow: inset 3px 0 0 var(--p-ink); }
body.fp26o #content .fp26o-card.is-off { opacity: .4; cursor: not-allowed; }
.fp26o-card__dot { flex: none; width: 18px; height: 18px; border: 2px solid #b8bfcf; border-radius: 50%; background: #fff; transition: border-color .15s, box-shadow .15s; }
.fp26o-card.is-on .fp26o-card__dot { border-color: var(--p-ink); box-shadow: inset 0 0 0 3px #fff; background: var(--p-ink); }
.fp26o-card__name { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; line-height: 1.4; }
.fp26o-card.is-on .fp26o-card__name { font-weight: 700; }
.fp26o-card__tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; color: #1d4ed8; background: #e8efff; font-size: 11.5px; font-weight: 600; vertical-align: 1px; }
.fp26o-card__price { flex: none; color: var(--p-ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fp26o-card__price small { color: var(--p-muted); font-size: 12.5px; font-weight: 400; }
/* Other options: plain segmented buttons */
body.fp26o-v #content table.variations ul.variable-items-wrapper { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
body.fp26o-v #content table.variations li.variable-item { min-height: 44px; margin: 0 !important; padding: 0 16px !important; border: 1px solid var(--p-line) !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; }
body.fp26o-v #content table.variations li.variable-item .variable-item-span { color: var(--p-ink); font-size: 14px; }
body.fp26o-v #content table.variations li.variable-item:hover { border-color: #9aa3b8 !important; }
body.fp26o-v #content table.variations li.variable-item.selected { border-color: var(--p-ink) !important; box-shadow: 0 0 0 1px var(--p-ink) !important; }
body.fp26o-v #content table.variations li.variable-item.selected .variable-item-span { font-weight: 600; }

/* Extras (inc/product-addons.php) */
body.fp26o #content .fp26a { display: grid; gap: 18px; margin: 0 0 22px; padding: 0; border: 0; }
body.fp26o #content .fp26a[hidden], body.fp26o #content .fp26a__group[hidden] { display: none; }
body.fp26o #content .fp26a__title { display: none; }
body.fp26o #content .fp26a__group { min-width: 0; margin: 0; padding: 0; border: 0; }
body.fp26o #content .fp26a__group legend { margin: 0 0 10px; padding: 0; border: 0; color: var(--p-ink); font-size: 16px; font-weight: 700; }
body.fp26o #content .fp26a__chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.fp26o #content .fp26a__chips label { margin: 0; cursor: pointer; }
body.fp26o #content .fp26a__chips input { position: absolute; opacity: 0; pointer-events: none; }
body.fp26o #content .fp26a__chips span { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 6px 16px; border: 1px solid var(--p-line); border-radius: 10px; color: var(--p-ink); background: #fff; font-size: 14px; line-height: 1.3; transition: border-color .15s, box-shadow .15s; }
body.fp26o #content .fp26a__chips small { color: var(--p-muted); font-size: 12.5px; font-weight: 500; }
body.fp26o #content .fp26a__chips label:hover span { border-color: #9aa3b8; }
body.fp26o #content .fp26a__chips input:checked + span { border-color: var(--p-ink); box-shadow: 0 0 0 1px var(--p-ink); font-weight: 600; }
body.fp26o #content .fp26a__chips input:focus-visible + span { outline: 3px solid var(--p-blue); outline-offset: 2px; }

/* Upload */
body.fp26o-v #content form.variations_form .fp26f-upload { margin: 0 0 22px; padding: 0; border: 0; background: none; }
body.fp26o-v #content form.variations_form .fp26f-upload::before { content: attr(data-title); display: block; margin-bottom: 10px; color: var(--p-ink); font-size: 16px; font-weight: 700; }
body.fp26o-v #content form.variations_form .fp26f-upload .fp26f-upload__title { display: none; }
body.fp26o-v #content form.variations_form .fp26f-upload .drop_uploader.drop_zone { min-height: 0; padding: 22px; border-radius: 14px; background: #fafbfc; }

/* Job details: folded when optional and long */
.fp26o-details { margin: 0 0 22px; border: 1px solid var(--p-line); border-radius: 14px; }
.fp26o-details > summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; color: var(--p-ink); font-size: 16px; font-weight: 700; cursor: pointer; list-style: none; }
.fp26o-details > summary::-webkit-details-marker { display: none; }
.fp26o-details > summary::after { content: "+"; color: var(--p-muted); font-size: 22px; font-weight: 400; line-height: 1; }
.fp26o-details[open] > summary::after { content: "\2212"; }
body.fp26o-v #content .fp26o-details .wcpa_form_outer { margin: 0 !important; padding: 0 18px 8px !important; border: 0 !important; background: none !important; }
body.fp26o-v #content .fp26o-details .wcpa_section_body { padding: 0 !important; border: 0 !important; background: none !important; }

/* The real quantity / add-to-cart row stays in the form, driven by the buy box. */
body.fp26o-v #content form.variations_form .single_variation_wrap { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; padding: 0 !important; border: 0 !important; }

/* ---------- Buy box ---------- */
.fp26o-buy { display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--p-line); }
.fp26o-buy__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.fp26o-buy__label { color: var(--p-ink); font-size: 16px; font-weight: 700; }
.fp26o-buy__unit { margin-left: auto; color: var(--p-muted); font-size: 14px; }
.fp26o-step { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--p-line); border-radius: 10px; }
body.fp26o #content .fp26o-step button { width: 42px; height: 44px; padding: 0; border: 0; border-radius: 0; color: var(--p-ink); background: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
body.fp26o #content .fp26o-step button:hover { background: #f4f5f8; }
body.fp26o #content .fp26o-step input { width: 72px; height: 44px; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--p-line); border-right: 1px solid var(--p-line); border-radius: 0; color: var(--p-ink); background: #fff; font: inherit; font-size: 15px; font-weight: 600; text-align: center; -moz-appearance: textfield; }
.fp26o-step input::-webkit-inner-spin-button, .fp26o-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fp26o-buy__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--p-ink); font-size: 16px; font-weight: 600; }
.fp26o-buy__total b { color: var(--p-ink); font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fp26o-buy__hint { display: none; margin: 0 !important; color: var(--p-muted); font-size: 14px; }
.fp26o-buy.is-empty .fp26o-buy__hint { display: block; }
body.fp26o #content .fp26o-buy__btn { min-height: 56px; border: 0; border-radius: 12px; color: #fff; background: var(--p-blue); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; transition: background .2s; }
body.fp26o #content .fp26o-buy__btn:hover { background: var(--p-ink); }
body.fp26o #content .fp26o-buy__line { justify-self: center; color: #058f3d; font-size: 14.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body.fp26o #content .fp26o-buy .fp26p-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 0; }
body.fp26o #content .fp26o-buy .fp26p-trust li { padding: 10px; border: 0; border-radius: 12px; background: #f6f7f9; box-shadow: none; }

/* ---------- Details tab below ---------- */
body.fp26o.fp-refreshed.single-product #content .woocommerce-tabs { width: 100%; margin-top: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.fp26o.fp-refreshed.single-product #content .woocommerce-tabs .wc-tabs { margin: 0 0 16px; text-align: left; }
body.fp26o.fp-refreshed.single-product #content .woocommerce-tabs .wc-tabs li a { padding: 0; border: 0; font-size: 24px; }
body.fp26o #content .product-bottom { margin-top: 0 !important; padding-top: 32px !important; border-top: 1px solid var(--p-line); }
body.fp26o .fp26c-detail--single { display: block; margin: 0; }
body.fp26o .fp26c--product { max-width: none !important; padding: 0 !important; }
/* The in-page menu and the fact strip repeat what the order area above shows. */
body.fp26o .fp26c--product :is(.fp26c-nav, .fp26c-facts) { display: none; }
/* Row labels such as "พิมพ์ 1 ด้าน รับซอง" stay on one line. */
body.fp26o .fp26c--product .fp26c-table tbody th[scope="row"] { white-space: nowrap; }

/* ---------- Phones ---------- */
@media (max-width: 991px) {
  body.fp26o-v #content .product-top > .content-product-left { margin-bottom: 20px; }
  body.fp26o #content .fp26o-buy .fp26p-trust { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  body.fp26o #content .fp26o-gallery__thumb { width: 56px; height: 56px; }
  .fp26o-buy__unit { margin-left: 0; flex-basis: 100%; }
}

/* ---------- Compact column: the options column sized to the photo ---------- */
@media (min-width: 992px) {
  body.fp26o-v #content .product-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  /* Main option list in two columns of short rows */
  .fp26o-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.fp26o #content .fp26o-card { min-height: 46px; padding: 9px 14px; border-top: 1px solid var(--p-line); }
  body.fp26o #content .fp26o-card:nth-child(odd) { border-right: 1px solid var(--p-line); }
  body.fp26o #content .fp26o-card:nth-child(-n+2) { border-top: 0; }
  body.fp26o #content .fp26o-list > .fp26o-card:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  .fp26o-card__name { font-size: 14px; }
  .fp26o-card__price { font-size: 14px; }
}
/* Tighter rhythm */
.fp26o-intro { padding-bottom: 18px; }
.fp26o-points { gap: 4px; }
.fp26o-points li { font-size: 14px; }
body.fp26o-v #content .shop-top .product_title { margin-bottom: 8px; font-size: clamp(24px, 2.2vw, 30px); }
.fp26o-from { margin-bottom: 10px !important; }
body.fp26o-v #content form.variations_form table.variations { padding-top: 18px; }
body.fp26o-v #content form.variations_form table.variations tr,
body.fp26o #content .fp26a,
body.fp26o-v #content form.variations_form .fp26f-upload,
.fp26o-details { margin-bottom: 16px; }
body.fp26o-v #content form.variations_form table.variations td.label,
body.fp26o #content .fp26a__group legend,
body.fp26o-v #content form.variations_form .fp26f-upload::before { margin-bottom: 8px; font-size: 15px; }
body.fp26o-v #content table.variations li.variable-item,
body.fp26o #content .fp26a__chips span { min-height: 40px; }
/* Upload on one line */
body.fp26o-v #content form.variations_form .fp26f-upload .drop_uploader.drop_zone { padding: 12px 16px; }
body.fp26o-v #content form.variations_form .fp26f-upload .drop_uploader .text_wrapper { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; }
body.fp26o-v #content form.variations_form .fp26f-upload .drop_uploader .text_wrapper i { font-size: 22px; }
.fp26o-details > summary { padding: 11px 16px; font-size: 15px; }
/* Quantity and total on one row */
.fp26o-buy { grid-template-columns: auto 1fr; align-items: center; gap: 12px 16px; padding-top: 16px; }
.fp26o-buy__row { grid-column: 1; }
.fp26o-buy__unit { display: none; }
.fp26o-buy__total { grid-column: 2; flex-direction: column; align-items: flex-end; gap: 0; font-size: 13px; color: var(--p-muted); font-weight: 500; }
.fp26o-buy__total b { font-size: 28px; }
.fp26o-buy__hint, body.fp26o #content .fp26o-buy__btn, body.fp26o #content .fp26o-buy__line, body.fp26o #content .fp26o-buy .fp26p-trust { grid-column: 1 / -1; }
body.fp26o #content .fp26o-buy__btn { min-height: 52px; }
body.fp26o #content .fp26o-buy .fp26p-trust { display: none; }

/* Secondary options and extras: label on the left, buttons on the right */
@media (min-width: 768px) {
  body.fp26o-v #content form.variations_form table.variations tr:not(:first-child) { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; }
  body.fp26o-v #content form.variations_form table.variations tr:not(:first-child) td.label { margin: 0; }
  body.fp26o #content .fp26a__group { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; }
  body.fp26o #content .fp26a__group legend { float: left; margin: 0; font-size: 14px; }
}
body.fp26o-v #content form.variations_form table.variations tr:not(:first-child) td.label label { font-size: 14px; }
/* Extras folded */
.fp26o-extras[hidden] { display: none; }
.fp26o-extras > summary span { flex: 1; }
.fp26o-extras__sum { margin-right: 12px; color: var(--p-ink); font-size: 14px; }
body.fp26o #content .fp26o-extras .fp26a { margin: 0; padding: 4px 16px 16px; gap: 12px; }
body.fp26o #content .fp26o-extras .fp26a__group { grid-template-columns: 100px minmax(0, 1fr); }
/* Thumbnails stay on one row */
.fp26o-gallery__thumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body.fp26o #content .fp26o-gallery__thumb { flex: 0 0 64px; width: 64px; height: 64px; }
/* Upload as one slim line */
body.fp26o-v #content form.variations_form .fp26f-upload .drop_uploader.drop_zone { min-height: 0 !important; height: auto !important; padding: 10px 16px !important; }
body.fp26o-v #content form.variations_form .fp26f-upload .drop_uploader .text_wrapper { flex-direction: row; min-height: 0; padding: 0; }
body.fp26o-v #content form.variations_form .fp26f-upload .drop_uploader .text_wrapper br { display: none; }
body.fp26o-v #content form.variations_form .fp26f-upload > form { display: flex; flex-direction: column; justify-content: center; min-height: 0 !important; }
body.fp26o-v #content form.variations_form .fp26f-upload .drop_uploader ul.files:empty { display: none; }
.fp26o-details { margin-bottom: 0; }
body.fp26o-v #content form.variations_form .fp26o-details + * { margin-top: 0; }
.fp26o-buy { margin-top: 16px; }
body.fp26o-v #content form.variations_form table.variations tr:not(:first-child) td.label label { line-height: 40px; }
body.fp26o-v #content form.variations_form .fp26o-extras { margin-bottom: 16px; }
body.fp26o-v #content form.variations_form table.variations tr:not(:first-child) td.label label { line-height: 1.3; }
body.fp26o-v #content form.variations_form table.variations tr:not(:first-child) td.value { min-width: 0; }

/* Photo fits the options column (height set by product-order.js) */
.fp26o-gallery__main { position: relative; aspect-ratio: auto; }
.fp26o-gallery__main .fp26o-focal { position: absolute; max-width: none !important; margin: 0 !important; border-radius: 0 !important; }
@media (min-width: 992px) {
  body.fp26o-v #content .product-top > .content-product-left { position: static; }
}

/* Simple products do not run the variation layout script: style the LINE link
   and newly uploaded gallery images directly, without JavaScript. */
body.single-product #content a.fp26o-line {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  max-width:100%; min-height:44px; padding:10px 18px; margin:14px 0 0;
  border:1px solid #c9dfd6; border-radius:10px; background:#eff7f3;
  color:#34775e; font-size:14px; font-weight:600; line-height:1.5;
  text-decoration:none;
}
body.single-product #content a.fp26o-line:hover { background:#e5f2eb; }
body.single-product #content .fp26o-line svg {
  display:block; width:21px; height:21px; max-width:21px; max-height:21px;
  flex:0 0 21px; margin:0; color:currentColor;
}
body.single-product #content .fp26o-uploaded-image {
  display:block; width:100%; max-width:100%; height:auto; object-fit:contain;
}

/* Share the same ordering layout for simple and variable products. */
body.fp26o-simple #content form.cart { width:100%; max-width:none; }
body.fp26o-simple #content form.cart .zadora-quantity-wrap {
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); margin:0; padding:0; border:0;
}
body.fp26o-simple #content .content-product-right .theiaStickySidebar { text-align:left; }
body.fp26o-simple #content .content-product-right .pl30 { padding-left:0; }
body.fp26o-simple #content form.cart .fp26f-upload { margin:20px 0; }
body.fp26o-simple #content .fp26o-gallery__thumb img { display:block; width:100%; height:100%; object-fit:contain; }
body.fp26o-simple #content .fp26o-gallery__main img { object-fit:contain; }
body.fp26o-simple #content .fp26o-gallery__thumbs:has(>button:only-child) { display:none; }

/* Uploaded product covers retain their own aspect ratio and never depend on
   a load event to create the gallery height. */
body.fp26o #content .fp26o-gallery__main.is-native { height:auto!important; min-height:80px; }
body.fp26o #content .fp26o-gallery__main.is-native .fp26o-focal {
  position:static!important; display:block; width:100%!important;
  max-width:100%!important; height:auto!important; object-fit:contain;
}