/* LongHorn Print: brand colors on top of the shared shop theme (loaded after theme.css).
   Gold #c8860a, dark gold #a36d08, espresso #1c1008, cream #faf7f2 (longhornprint.com). */
:root{--navy:#1c1008;--navy-2:#2b1a0e;--paper:#faf7f2;--orange:#c8860a;--orange-2:#a36d08;--orange-soft:#fbf1dc;--ink:#1c1008;--red:#c8860a}
.design-invite h1 span{color:#f5c842}
.shop-header .logo{width:auto;height:44px;max-width:none;object-fit:contain}
.footer-brand .logo{width:auto;height:38px;max-width:none;object-fit:contain}
.lh-pickup{margin-top:10px;color:var(--slate);font-size:14px}
/* Shared shop styles hard-code Custombull navy in a few places. */
.design-invite{background:radial-gradient(ellipse at 95% 100%,#c8860a2e,transparent 64%),linear-gradient(115deg,#1c1008 0%,#2b1a0e 46%,#3d2614 100%)!important;border-color:#3d2614!important}
.size-choice[aria-pressed=true],#placement-edit[aria-pressed=true],#area-options button[aria-pressed=true],.creative-actions button[aria-pressed=true]{background:#1c1008!important;border-color:#1c1008!important;color:#fff!important}
.color-choice[aria-pressed=true]{border-color:#c8860a!important;background:#fbf1dc!important;box-shadow:0 0 0 1px #c8860a33!important}
.invite-steps li>span{background:#f5c842!important;color:#1c1008!important}
.design-invite h1 span{white-space:normal}
@media(max-width:760px){.design-invite h1{font-size:34px;overflow-wrap:anywhere}}
/* Product cards (no lifestyle scenes on this shop): photo, name, price and a full-width order button.
   The shared .buy-cta is absolutely positioned, so the card must be its containing block. */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.product-grid .product-card{position:relative;margin:0;padding:10px 10px 62px;background:#fff;border:1px solid #eadfcc;border-radius:18px;box-shadow:0 6px 18px #1c100810;transition:transform .15s,box-shadow .15s}
.product-grid .product-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px #1c10081f}
.product-grid .product-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.product-grid .product-card figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:12px 4px 0;font-size:16px;font-weight:700;color:var(--ink)}
.product-grid .product-card figcaption>span:not(.card-price){order:-1;width:100%;font-size:10px;letter-spacing:1.4px;color:var(--orange-2);font-weight:700}
.product-grid .product-card .card-price{font-size:13px;font-weight:600;color:var(--slate)}
.product-grid .product-open{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:18px;background:transparent;cursor:pointer}
.product-grid .product-open:hover{background:transparent}
.product-grid .product-open:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.product-grid .buy-cta{position:absolute;left:10px;right:10px;bottom:10px;max-width:none;justify-content:space-between;padding:11px 14px;border:0;border-radius:12px;background:var(--orange);color:#fff;box-shadow:none}
.product-grid .product-card:hover .buy-cta{background:var(--orange-2)}
.product-grid .buy-cta>span:first-child{font-size:13px;font-weight:700}
.product-grid .product-card{align-self:stretch;height:auto}
.product-grid .product-card figcaption{flex-direction:column;align-items:flex-start}
.product-grid .product-card .card-price{display:block;width:100%;margin-top:2px}
/* After an upload the card shows the design preview canvas; the stock photo must not stack under it. */
.product-grid .product-card.has-preview>img{display:none}
.product-grid .product-card>canvas.custom-preview{display:block;width:100%;aspect-ratio:4/3;height:auto;object-fit:contain;border-radius:12px;background:#fff}
/* A4 printing previews your PDF inside its own page, so the home card never shows a preview error. */
.product-grid .product-card[data-product=a4-print] .preview-error{display:none}
/* Shown after a hero upload: one clear next step. */
.choose-product-cta{display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:12px;padding:12px 18px;border-radius:12px;background:#f5c842;color:#1c1008;font-size:17px;font-weight:800;text-decoration:none;box-shadow:0 6px 16px #0003}
.choose-product-cta[hidden]{display:none}
.choose-product-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
#products{scroll-margin-top:12px}
/* Phone number in the header: one tap to call. */
.shop-call{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid #eadfcc;border-radius:999px;background:#fff;color:var(--ink);font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap}
.shop-call:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.shop-header{flex-wrap:wrap}
@media(max-width:600px){.shop-header .shop-call{order:4;margin-left:auto}}
/* Readable minimums for this shop: 14px text, 12px labels, 15px prices, 44px tall links. */
body[data-order-ui=simple] .eyebrow,body[data-order-ui=simple] .showcase-heading>span,body[data-order-ui=simple] .design-invite .eyebrow{font-size:12px!important}
body[data-order-ui=simple] .trust-row li,body[data-order-ui=simple] .design-invite .dropzone-hint,body[data-order-ui=simple] #studio-file-help,body[data-order-ui=simple] .design-invite #studio-status,body[data-order-ui=simple] .shop-footer,body[data-order-ui=simple] .shop-footer p{font-size:14px!important;line-height:1.5}
body[data-order-ui=simple] .trust-row strong{font-size:15px!important}
body[data-order-ui=simple] .design-invite .upload-button{font-size:16px!important}
body[data-order-ui=simple] .product-grid .product-card figcaption>span:not(.card-price){font-size:12px}
body[data-order-ui=simple] .product-grid .product-card .card-price{font-size:15px}
body[data-order-ui=simple] .product-grid .buy-cta>span:first-child{font-size:15px}
body[data-order-ui=simple] .product-grid .preview-error{font-size:14px}
body[data-order-ui=simple] .shop-footer a{display:inline-flex;align-items:center;min-height:44px}
body[data-order-ui=simple] .store-policy-links button{font-size:14px!important;min-height:44px}
body[data-order-ui=simple] .page>header .customer-account-launch{font-size:15px!important;min-height:44px}
body[data-order-ui=simple] .faq-list summary{min-height:44px}
@media(max-width:600px){.shop-header{row-gap:8px}}
@media(max-width:480px){body[data-order-ui=simple] .trust-row{grid-template-columns:1fr;gap:6px}body[data-order-ui=simple] .trust-row li{padding:8px 12px}body[data-order-ui=simple] .trust-row strong{display:inline;margin-right:6px}}
/* compact hero: keep the trust chips on a few short rows, not three full-width boxes */
body[data-order-ui=simple] .compact-hero .trust-row{display:flex}
body[data-order-ui=simple] .compact-hero .trust-row li{font-size:13px!important;padding:6px 11px}
body[data-order-ui=simple] .compact-hero .trust-row strong{font-size:14px!important;display:inline;margin:0}
@media(max-width:760px){body[data-order-ui=simple] #products>.collection-heading>p{display:none}body[data-order-ui=simple] #collection-title{font-size:26px}}
/* Phones: two products per row, so the first screen shows what we make */
@media(max-width:560px){
 .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .product-grid .product-card{padding:6px 6px 52px;border-radius:14px}
 .product-grid .product-card img,.product-grid .product-card>canvas.custom-preview{border-radius:9px}
 .product-grid .product-card figcaption{padding:8px 2px 0;font-size:14px!important;line-height:1.25}
 body[data-order-ui=simple] .product-grid .product-card figcaption>span:not(.card-price){font-size:10.5px;letter-spacing:.8px}
 body[data-order-ui=simple] .product-grid .product-card .card-price{font-size:13.5px}
 .product-grid .buy-cta{left:6px;right:6px;bottom:6px;justify-content:center;padding:10px 6px;border-radius:10px}
 body[data-order-ui=simple] .product-grid .buy-cta>span:first-child{font-size:13.5px}
 .product-grid .buy-cta>span:not(:first-child){display:none}
 .product-grid .product-open{border-radius:14px}
}

/* Transparent logo: no white box; a little smaller on phones so the header buttons fit beside it */
.shop-header .brand{background:transparent;width:auto;max-width:none;flex:none}
@media(max-width:480px){.shop-header .logo{height:34px}}
.page>.shop-header .logo{width:auto}
