/*
Theme Name: Outback Shipping Containers
Theme URI: https://outbackshippingcontainersllc.com/
Author: Outback Shipping Containers LLC
Description: WooCommerce storefront for Outback Shipping Containers, reproducing the original site design from its own compiled stylesheet.
Version: 2.0.0
License: GNU General Public License v2 or later
Text Domain: outback
*/

/* ---------------------------------------------------------------------------
 * Supplements to the original compiled stylesheet.
 * The site's Tailwind build only contains the utilities its own source used,
 * so the few this theme adds are defined here rather than rebuilding Tailwind.
 * ------------------------------------------------------------------------ */

.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* WooCommerce pagination, styled like the original shop pager. */
.osc-pagination ul.page-numbers,
.osc-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .375rem; list-style: none; margin: 0; padding: 0; justify-content: center; }
.osc-pagination ul.page-numbers li { list-style: none; }
.osc-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.5rem; height: 2.5rem; padding: 0 .75rem;
	border: 2px solid rgb(26 26 26 / .15); background: #fff; color: #1a1a1a;
	font-family: "Inter Tight", Inter, system-ui, sans-serif;
	font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	text-decoration: none; transition: border-color .15s, background-color .15s, color .15s;
}
.osc-pagination .page-numbers:hover { border-color: rgb(26 26 26 / .4); }
.osc-pagination .page-numbers.current { background: #c8102e; border-color: #c8102e; color: #fff; }
.osc-pagination .page-numbers.dots { border: 0; min-width: 1rem; }

/* Long-form product/post copy imported as plain paragraphs. */
.prose > p { margin-bottom: 1rem; }
.prose > p:last-child { margin-bottom: 0; }
.prose a { color: #c8102e; text-decoration: underline; }
.prose ul, .prose ol { margin: 0 0 1rem 1.25rem; list-style: revert; }
.prose li { margin-bottom: .35rem; }

/* ---------------------------------------------------------------------------
 * WooCommerce controls, restyled to the Outback design.
 * ------------------------------------------------------------------------ */

.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce button.button.alt,
.woocommerce #respond input#submit,
button.single_add_to_cart_button {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	height: 3rem; padding: 0 1.75rem;
	background: #c8102e; color: #fff; border: 0; border-radius: 0;
	font-family: "Inter Tight", Inter, system-ui, sans-serif;
	font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	transition: background-color .15s; cursor: pointer;
}
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button.alt:hover,
button.single_add_to_cart_button:hover { background: #a60d26; color: #fff; }

.woocommerce div.product form.cart { display: flex; align-items: stretch; gap: .625rem; margin: 1.25rem 0 0; }
.woocommerce div.product form.cart .quantity input.qty {
	width: 4.5rem; height: 3rem; text-align: center;
	border: 2px solid rgb(26 26 26 / .15); border-radius: 0; background: #fff;
	font-weight: 700; color: #1a1a1a;
}
.woocommerce div.product form.cart .button { flex: 1 1 auto; }

.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	height: 2.75rem; padding: 0 2rem 0 .875rem;
	border: 2px solid rgb(26 26 26 / .15); border-radius: 0; background: #fff;
	font-size: .8125rem; font-weight: 600; color: #1a1a1a;
}

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top: 3px solid #c8102e; background: #fff;
	font-size: .875rem; padding: 1rem 1.25rem; list-style: none;
}
.woocommerce-message { border-top-color: #1a7f37; }

/* Cart / checkout tables */
.woocommerce table.shop_table { border: 2px solid rgb(26 26 26 / .12); border-radius: 0; border-collapse: collapse; width: 100%; }
.woocommerce table.shop_table th { font-family: "Inter Tight", Inter, sans-serif; text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { padding: .875rem; border-bottom: 1px solid rgb(26 26 26 / .08); }

/* Gallery thumbnail active state */
.osc-thumb.is-active { border-color: #c8102e; }

/* Checkout call-to-action and cart layout. */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce a.checkout-button.button.alt {
	background: #c8102e; color: #fff; width: 100%; font-size: .9375rem;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: #a60d26; }
.woocommerce .cart-collaterals { margin-top: 2rem; }
.woocommerce .cart-collaterals .cart_totals { float: none; width: 100%; max-width: 26rem; margin-left: auto; }
.woocommerce table.cart img { width: 72px; height: auto; }
.woocommerce .coupon .input-text { height: 3rem; padding: 0 .875rem; border: 2px solid rgb(26 26 26 / .15); border-radius: 0; }
.woocommerce form.woocommerce-checkout .input-text,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border: 2px solid rgb(26 26 26 / .15); border-radius: 0; padding: .75rem .875rem; background: #fff;
}
.woocommerce h2, .woocommerce h3 {
	font-family: "Inter Tight", Inter, sans-serif; font-weight: 800;
	text-transform: uppercase; letter-spacing: -.01em; margin-bottom: .75rem;
}

/* ---------------------------------------------------------------------------
 * Imported product detail
 * ------------------------------------------------------------------------ */

/* Native <details> disclosure, styled as the site's accordion. */
.osc-faq summary::-webkit-details-marker { display: none; }
.osc-faq summary::marker { content: ''; }
.osc-faq details[open] .osc-faq-mark { transform: rotate(45deg); }
.osc-faq .osc-faq-mark { display: inline-block; transition: transform .15s ease; }
.osc-faq details[open] > summary { border-bottom: 1px solid rgb(26 26 26 / .08); }

/* Specification rows: hairline separators that stay tidy on the last row. */
.border-outback-charcoal\/8 { border-color: rgb(26 26 26 / .08); }
dl.grid > div:last-child { border-bottom: 0; }
@media (min-width: 768px) {
	dl.grid > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* ---------------------------------------------------------------------------
 * Imported product copy
 *
 * The product descriptions arrive as plain semantic HTML — <table>, <dl>, <ul>,
 * headings — with no utility classes. Tailwind's preflight strips list markers,
 * table borders and heading sizes, so those sections need styling back.
 * Scoped to .prose so nothing else on the site is affected.
 * ------------------------------------------------------------------------ */

.prose { color: rgb(26 26 26 / .85); }

.prose h2 {
	font-family: "Inter Tight", Inter, system-ui, sans-serif;
	font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
	font-size: 1.25rem; line-height: 1.2; color: #1a1a1a;
	margin: 2rem 0 .875rem; padding-bottom: .5rem;
	border-bottom: 2px solid rgb(26 26 26 / .1);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
	font-family: "Inter Tight", Inter, system-ui, sans-serif;
	font-weight: 700; font-size: 1rem; color: #1a1a1a; margin: 1.5rem 0 .5rem;
}
.prose p { margin-bottom: .875rem; }
.prose strong { font-weight: 700; color: #1a1a1a; }

/* Bulleted lists — Key Features, Documents, etc. */
.prose ul { list-style: disc; margin: 0 0 1rem 1.25rem; }
.prose ol { list-style: decimal; margin: 0 0 1rem 1.25rem; }
.prose li { margin-bottom: .375rem; padding-left: .125rem; }
.prose li::marker { color: #c8102e; }

/* Specification tables */
.prose table,
.prose table.outback-specs {
	width: 100%; border-collapse: collapse; margin: 0 0 1.25rem;
	border: 2px solid rgb(26 26 26 / .1); background: #fff;
}
.prose table th,
.prose table td { padding: .625rem .875rem; border-bottom: 1px solid rgb(26 26 26 / .08); vertical-align: top; }
.prose table tr:last-child th,
.prose table tr:last-child td { border-bottom: 0; }
.prose table th[scope="row"] {
	width: 40%; text-align: left; background: rgb(26 26 26 / .03);
	font-family: "Inter Tight", Inter, sans-serif; font-weight: 700;
	font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
	color: rgb(26 26 26 / .6); border-right: 1px solid rgb(26 26 26 / .08);
}
.prose table tbody tr:nth-child(even) td { background: rgb(26 26 26 / .015); }

/* FAQ rendered as a definition list */
.prose dl { margin: 0 0 1rem; }
.prose dt {
	margin-top: .875rem; padding-top: .875rem;
	border-top: 1px solid rgb(26 26 26 / .08);
	font-family: "Inter Tight", Inter, sans-serif; color: #1a1a1a;
}
.prose dl > dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose dt strong { font-weight: 700; }
.prose dd { margin: .375rem 0 0; color: rgb(26 26 26 / .8); }

/* Delivery / warranty blocks.
   These arrive as unclassed nested <div>s in several different shapes, so the
   styling stays conservative: readable stacked rows rather than an assumed
   grid, which mangled the "Delivery Methods" cards. */
.prose h3 + div > div,
.prose > div > div > div:has(> div:first-child + div:last-child) {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem;
	padding: .5rem 0; border-bottom: 1px solid rgb(26 26 26 / .08);
}
.prose > div > div > div:has(> div:first-child + div:last-child) > div:first-child {
	font-family: "Inter Tight", Inter, sans-serif; font-weight: 700; font-size: .75rem;
	text-transform: uppercase; letter-spacing: .04em; color: rgb(26 26 26 / .6);
}

/* Delivery-method cards: a bold heading line followed by a paragraph. */
.prose h3 + div > div {
	display: block; background: #fff; border: 1px solid rgb(26 26 26 / .1);
	padding: .875rem 1rem; margin-bottom: .5rem;
}
.prose h3 + div > div > div > span,
.prose h3 + div > div > div:first-child {
	font-family: "Inter Tight", Inter, sans-serif; font-weight: 700; color: #1a1a1a;
}
.prose h3 + div > div p { margin: .375rem 0 0; }

/* Document links inside the copy */
.prose a[href$=".pdf"] {
	display: inline-flex; align-items: center; gap: .4rem;
	font-weight: 600; text-decoration: none; color: #c8102e;
}
.prose a[href$=".pdf"]::before {
	content: "PDF"; font-family: "Inter Tight", Inter, sans-serif; font-size: .625rem; font-weight: 700;
	background: rgb(200 16 46 / .1); padding: .125rem .3rem; letter-spacing: .04em;
}
.prose a[href$=".pdf"]:hover { text-decoration: underline; }
.prose a[href="#osc-missing-document"] { color: rgb(26 26 26 / .4); pointer-events: none; }
.prose a[href="#osc-missing-document"]::before { content: "PDF"; background: rgb(26 26 26 / .08); }

/* ---------------------------------------------------------------------------
 * Captured product layout
 * ------------------------------------------------------------------------ */
.osc-product [role="tabpanel"][hidden] { display: none; }
.osc-product .osc-tab-active { color: #c8102e; border-bottom-color: #c8102e; }
.osc-product .osc-thumb-active { outline: 2px solid #c8102e; outline-offset: -2px; }
.osc-product button[disabled] { opacity: .4; cursor: not-allowed; }

/* Product image lightbox */
.osc-lightbox {
	position: fixed; inset: 0; z-index: 10000;
	background: rgb(10 10 10 / .94);
	display: flex; align-items: center; justify-content: center; padding: 3rem 1rem;
}
.osc-lightbox[hidden] { display: none; }
.osc-lb-img { max-width: min(1200px, 92vw); max-height: 86vh; object-fit: contain; cursor: zoom-out; }
.osc-lightbox button {
	position: absolute; background: rgb(255 255 255 / .12); color: #fff; border: 0;
	width: 3rem; height: 3rem; font-size: 1.75rem; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center; transition: background-color .15s;
}
.osc-lightbox button:hover { background: #c8102e; }
.osc-lb-close { top: 1rem; right: 1rem; font-size: 2rem; }
.osc-lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.osc-lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.osc-lb-count {
	position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
	color: rgb(255 255 255 / .75); font-family: "Inter Tight", Inter, sans-serif;
	font-size: .8125rem; letter-spacing: .06em;
}
@media (max-width: 640px) {
	.osc-lightbox { padding: 1rem .5rem; }
	.osc-lightbox button { width: 2.5rem; height: 2.5rem; font-size: 1.4rem; }
	.osc-lb-prev { left: .35rem; } .osc-lb-next { right: .35rem; }
}

/* Blueprint full-screen viewer */
.osc-dwg { position: fixed; inset: 0; z-index: 10001; background: rgb(8 12 22 / .97); }
.osc-dwg[hidden] { display: none; }
.osc-dwg-scroll { position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding: 3.5rem 1rem 3rem; }
.osc-dwg-inner { min-width: min-content; display: flex; justify-content: center; }
.osc-dwg-close {
	position: absolute; top: .75rem; right: .75rem; z-index: 2;
	width: 2.75rem; height: 2.75rem; font-size: 1.9rem; line-height: 1;
	background: rgb(255 255 255 / .12); color: #fff; border: 0; cursor: pointer;
}
.osc-dwg-close:hover { background: #c8102e; }
.osc-dwg-hint {
	position: absolute; bottom: .6rem; left: 50%; transform: translateX(-50%);
	color: rgb(255 255 255 / .6); font-size: .75rem; letter-spacing: .04em; pointer-events: none;
}