/* =====================================================================
   Helloprint configurator (plugin form.wphp-product-cart) in the house style.
   Presentation only: no element is moved, renamed or removed; the plugin's
   own show/hide classes (wphp-display-none, selected) keep working.
   ===================================================================== */

.wphp-product-template{font-size:15px;color:var(--ink)}
.wphp-product-template hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.wphp-product-template legend{display:block;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--accent);margin:4px 0 12px;padding:0}
.wphp-product-template label{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);display:block;margin:0 0 7px}

/* size / colour / print-position image tiles */
.wphp-product-template .wphp-img-selector{margin-bottom:16px}
.wphp-product-template .wphp-grids{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px}
.wphp-product-template a.wphp-size,
.wphp-product-template a.wphp-color,
.wphp-product-template a.wphp-print-position,
.wphp-product-template .wphp-grids>a{display:grid;position:relative;justify-items:center;align-content:start;gap:4px;border:1.5px solid var(--line)!important;border-radius:12px!important;padding:10px 8px 10px!important;background:var(--paper);cursor:pointer;text-align:center;width:auto!important;height:auto!important;margin:0!important;transition:border-color .15s,background .15s,box-shadow .15s}
.wphp-product-template .wphp-grids>a:hover{border-color:var(--ink)!important}
.wphp-product-template .wphp-grids>a img{width:58px!important;height:58px!important;object-fit:contain;margin:0!important}
.wphp-product-template .wphp-grids>a p:empty{display:none}
.wphp-product-template .wphp-grids>a small{font-size:12px;line-height:1.3;color:var(--ink-2);font-weight:600}
/* The plugin stretches an invisible radio over each tile — that radio IS the click target. Leave it alone. */
.wphp-product-template .wphp-grids>a.selected{border-color:var(--accent)!important;background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.wphp-product-template .wphp-grids>a.selected small{color:var(--ink)}

/* option selects */
.wphp-product-template .wphp-grid-opt{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin:4px 0}
.wphp-product-template .wphp-grid-opt>div{min-width:0}
.wphp-product-template select{appearance:none;-webkit-appearance:none;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235E6677' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;padding-right:38px;border:1.5px solid var(--line);border-radius:10px;min-height:46px;font-weight:600;width:100%;cursor:pointer}
.wphp-product-template select:hover{border-color:var(--ink-2)}
.wphp-product-template select:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}

/* loaders */
.wphp-product-template .wphp-loader{text-align:center}
.wphp-product-template .wphp-loader img,.wphp-product-template .wphp-pricing-table-loader img{width:34px;height:34px;margin:6px auto}
.wphp-product-template .wphp-combination-not-found-message{background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:10px 12px;font-weight:600}

/* quantity: price list as tappable rows */
#wphp-product-quantity-wrapper>p{color:var(--muted);font-size:13.5px;margin:0 0 10px;text-transform:none;letter-spacing:0;font-weight:500}
.wphp-product-template .wphp-quantity-grp{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px}
.wphp-product-template .wphp-quantity-grp>div{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:center;border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer;background:var(--paper);transition:border-color .15s,background .15s}
.wphp-product-template .wphp-quantity-grp>div:hover{border-color:var(--ink-2)}
.wphp-product-template .wphp-quantity-grp>div:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.wphp-product-template .wphp-quantity-grp input{accent-color:var(--accent);margin:0;width:16px;height:16px;cursor:pointer}
.wphp-product-template .wphp-quantity-grp label{margin:0;font-size:15px;font-weight:700;text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.wphp-product-template .wphp-quantity-grp .pricee{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
/* our rows are taller than the plugin expects, so its fixed collapsed height cut a row in half:
   show every quantity of the loaded page; "Show more" still loads the next page from Helloprint */
.wphp-product-template .wphp-quantity-wrp .wphp-quantity-grp{max-height:none!important;overflow:visible!important}
.wphp-product-template .wphp-showless{display:none!important}
.wphp-product-template .wphp-showmore,.wphp-product-template .wphp-showless{display:inline-flex;margin:10px 4px 0;font-weight:700;color:var(--accent);cursor:pointer;font-size:14px}

/* design service + delivery */
.wphp-product-template .wphp-add-design>div{display:flex;gap:10px;align-items:center;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:6px;cursor:pointer;background:var(--paper)}
.wphp-product-template .wphp-add-design>div:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.wphp-product-template .wphp-add-design>div input{accent-color:var(--accent);margin:0;width:16px;height:16px;cursor:pointer}
.wphp-product-template .wphp-add-design>div label{margin:0;font-size:14.5px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer}
.wphp-product-template .wphp-add-design>label{text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink)}
.wphp-product-template .wphp-delivery-time{margin-top:6px}

/* artwork upload (FilePond) */
.wphp-product-template .wphp-product-file-upload legend{display:flex;gap:8px;align-items:center}
.wphp-product-template .filepond--root{font-family:var(--body);margin-bottom:0}
.wphp-product-template .filepond--panel-root{background:var(--surface);border:2px dashed var(--line);border-radius:14px}
.wphp-product-template .filepond--drop-label{color:var(--ink-2);font-weight:600;min-height:84px}
.wphp-product-template .filepond--drop-label label{text-transform:none;letter-spacing:0;font-size:14.5px;color:var(--ink-2)}
.wphp-product-template .filepond--label-action{color:var(--accent);text-decoration-color:var(--accent)}
.wphp-product-template .wphp-info-icon,.wphp-product-template .wphp-cta-head{cursor:pointer}

/* templates modal */
.wphp-modal-container .wphp-modal{border-radius:18px!important;font-family:var(--body)}
.wphp-modal-container table{width:100%;border-collapse:collapse;font-size:14px}
.wphp-modal-container th,.wphp-modal-container td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left}
.wphp-modal-container .wphp-cta-pdf,.wphp-modal-container .wphp-cta-indesign{color:var(--accent);font-weight:700}

/* price + add to basket */
.wphp-product-template .wphp-grid:has(.wphp_product_price){display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:var(--surface);border-radius:14px;padding:14px 16px;margin:4px 0 12px}
.wphp-product-template .wphp-grid:has(.wphp_product_price) label{margin:0}
.wphp-product-template .wphp_product_price{font-family:var(--display);font-size:28px;letter-spacing:-.02em;color:var(--ink)}
.wphp-product-cart:has(#wphp-add-to-cart-button:disabled) .wphp_product_price:empty::before{content:"Choose your options";font-family:var(--body);font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}
.wphp-product-cart:has(#wphp-add-to-cart-button:not(:disabled)) .wphp_product_price:empty::before{content:"Updating live price…";font-family:var(--body);font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}
#wphp-add-to-cart-button{width:100%;padding:16px 22px!important;font-size:17px!important;border-radius:12px!important;margin-top:4px}
#wphp-add-to-cart-button:disabled{opacity:.4;cursor:not-allowed}
.wphp-product-template .wphp-not-available,.wphp-step-not-available{background:var(--warn-soft);color:var(--warn);border-radius:12px;padding:14px 16px;font-weight:600}

@media (max-width:700px){
  .wphp-product-template .wphp-grids{grid-template-columns:repeat(3,1fr)}
  .wphp-product-template .wphp-grids>a img{width:46px!important;height:46px!important}
  .wphp-product-template .wphp-grid-opt{grid-template-columns:1fr}
  .wphp-product-template .wphp-quantity-grp{grid-template-columns:1fr}
  .wphp-product-template .wphp_product_price{font-size:24px}
  /* keep the basket button reachable while scrolling the options */
  #wphp-add-to-cart-button{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:6;box-shadow:0 12px 26px -12px rgba(207,31,104,.7)}
}


/* The plugin hides invalid tiles/sections with .wphp-display-none (and jQuery .hide()): it must always win over our layout rules. */
.wphp-product-template .wphp-display-none,
.wphp-product-template .wphp-grids>a.wphp-display-none,
.wphp-product-template .wphp-grids.wphp-display-none,
.wphp-product-template .wphp-grid-opt.wphp-display-none,
.wphp-product-template .wphp-quantity-sec.wphp-display-none{display:none!important}

/* incl./excl. VAT — display only; the plugin's values stay in the DOM untouched */
.wphp-product-template form.wphp-product-cart{margin-bottom:0!important}
/* not VAT registered: quiet note under the basket button (v0.2.2) */
.tps-vat-note{margin:4px 0 8px!important;text-align:center;font-size:12px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--muted)!important;line-height:1.45}