Here it is. So i can only edit it in wordpress edit? i am confused
I zoomed out to 33%. Id like to move the Bark or Woof Pack and three options on the left column, dog picture below left column Bark or Woof Pack title, and then move the right column leftover up. Does that make sense
Pasted text.txt
Document
Is it in the functions.php?



Pasted text.txt
Document
storefront.css


Pasted text.txt
Document
here is premium.css 


bark-or-woof-pack-builder.zip
Zip Archive
Compile images together to form the entire pages, give me your thoughts. 


Worked for 2m 50s
Analyzed
from PIL import Image
import os

paths = [
    "/mnt/data/84878fc7-749c-466d-8dfe-1deba14b47b6.png",
    "/mnt/data/f6c863fd-2de2-441a-82f1-bef2a6bbb055.png",
    "/mnt/data/69627f54-b5cc-4841-9acc-fed509cb17b3.png",
    "/mnt/data/4faa49f3-0a65-4982-bf6d-98619674d30d.png",
    "/mnt/data/76ec2638-8fa3-4f12-b3b7-188524673cdd.png",
    "/mnt/data/30e3ed9f-ff2d-4093-b81e-8b06bce8b877.png",
    "/mnt/data/6e658e31-29c6-43dc-82eb-6373dbe483a4.png",
    "/mnt/data/66de01bf-2665-4a95-a00e-3990675bfe2b.png",
    "/mnt/data/77bf0c83-3e58-4a69-9dfa-b21ed67f5cdf.png",
]

# Crops remove repeated sticky headers and overlapping portions between screenshots.
segments = [
    (paths[0], 0, 912),
    (paths[1], 318, 916),
    (paths[2], 193, 800),
    (paths[3], 100, 800),
    (paths[4], 100, 780),
    (paths[5], 100, 833),
    (paths[6], 100, 664),
    (paths[7], 100, 750),
    (paths[8], 150, 914),
]

target_width = 1890
pieces = []

for path, top, bottom in segments:
    src = Image.open(path).convert("RGB")
    # Remove browser edge/scrollbar while preserving the page itself.
    left = 4
    right = max(left + 1, src.width - 20)
    piece = src.crop((left, top, right, bottom))
    if piece.width != target_width:
        new_height = round(piece.height * target_width / piece.width)
        piece = piece.resize((target_width, new_height), Image.Resampling.LANCZOS)
    pieces.append(piece)

full_height = sum(piece.height for piece in pieces)
stitched = Image.new("RGB", (target_width, full_height), "white")

y = 0
for piece in pieces:
    stitched.paste(piece, (0, y))
    y += piece.height

png_path = "/mnt/data/bark-or-woof-pack-full-page.png"
jpg_path = "/mnt/data/bark-or-woof-pack-full-page.jpg"

stitched.save(png_path, optimize=True)
stitched.save(jpg_path, quality=90, optimize=True, progressive=True)

print(f"Created full-page composite: {stitched.size[0]} × {stitched.size[1]} px")
print(f"PNG: {png_path}")
print(f"JPG: {jpg_path}")

STDOUT/STDERR
Created full-page composite: 1890 × 6204 px
PNG: /mnt/data/bark-or-woof-pack-full-page.png
JPG: /mnt/data/bark-or-woof-pack-full-page.jpg


I compiled the screenshots into one continuous full-page view:

Full-page PNG
Full-page JPG

Seeing the whole page at once, the new top layout is substantially better. The product title/pricing information now reads as one left-hand merchandising column, while the Pack Builder has a clear job on the right. The dog photo underneath anchors the left side and the two columns finish at roughly comparable heights. I would keep this layout.

The main issue now is no longer the top. It is repetition farther down the page. The page explains the same pricing/value propositions several times. My priority changes would be:

Consider removing the yellow “From: $11.95/month” pill at the top. Immediately below it, the first quick-fact card already says $11.95 — First dog/month. Both are accurate, but visually it reads twice in about six inches of space.
The first navy section is the biggest redundancy. Right after the builder, visitors see $11.95, 20% off, and another price calculation again. Those facts were just shown above. The section itself looks excellent, but I would change what it communicates rather than necessarily delete it. For example, this could become a more emotional/value-driven section:
“One Pack. Every Dog.”
Then three cards about surprise print, individually sized for each dog, and one household delivery. That would move the page forward instead of restating price.
Keep the Membership Term section. This is useful information and materially different from the top. The four cards are clear, and the 12-month option has the appropriate visual emphasis.
Keep “Build your Pack in three simple steps.” It works well as reassurance for someone who scrolled past the builder without interacting. It is also concise enough that it doesn't slow the page down much.
Merge “Care before the first wear” into “Fit made friendly.” Right now, “Care before the first wear” occupies an entire large white section for one sentence. It creates unnecessary vertical length. I would put a small care note directly beneath the Medium/Large guidance instead.
“The fun is in the reveal” is strong. This is where the page finally shifts from mechanics back toward the experience. I would keep it. However, its “Free U.S. shipping” card is another repetition. That third card could instead explain something unique, such as a different curated surprise each cycle or whatever promise accurately reflects the rotation system.
The FAQ is appropriately positioned. By that point, users who are still reading are likely looking for objections/details. I would retain it.
The final navy CTA works, but there is too much whitespace between that block and the site footer. The product template's bottom padding could be reduced. That would make the page feel more deliberately finished.

The overall hierarchy I would aim for is:

Buy → Understand → Choose commitment → See how it works → Confirm fit → Get excited → Resolve objections → Buy

Right now it's closer to:

Buy → Hear pricing again → Choose commitment → How it works → Fit → Care → Experience → FAQ → Buy

That is why the page feels somewhat longer than the actual amount of information warrants.

Visually, though, the design is strong. The typography, navy/cream/light-blue alternation, cards, spacing, and restrained yellow/red accents are coherent. The page looks much more like a purpose-built subscription product now than a generic WooCommerce product page.

The next thing I would change is the first navy “ONE PACK. EVERY DOG.” section, not the new top. That will give you the largest improvement without touching the Pack Builder functionality. 

bark-or-woof-pack-full-page.png
Image
I changed Cart ID, i decided to check the Checkout Page and noticed it too has a different ID? 
How do we announce that better in this image? The fact there are multiple ways to save. Not just adding more dogs, but also subscribing for a longer term. 
Do these four bullets make sense?
Should we try to keep them on onje or two line? keep it horizonitally aligned
done. next we need to fix the Cart page. 
How does that look? 

Yes. For #2, I would make the labels quieter and let the customer's actual selections carry more visual weight.

Add this at the very bottom of storefront.css:

/* Cart Pack metadata: soften labels and emphasize customer selections. */
.woocommerce-cart .woocommerce-cart-form table.cart dl.variation dt {
	color: #667487 !important;
	font-size: 13px;
	font-weight: 600 !important;
	line-height: 1.45;
}

.woocommerce-cart .woocommerce-cart-form table.cart dl.variation dd {
	color: var(--bow-deep-navy) !important;
	font-size: 14px;
	font-weight: 700 !important;
	line-height: 1.45;
}

That should change this:

Size: Medium
Subscription Length: 3 Months
Dog: Jamie

into more of this visual hierarchy:

Size: Medium
Subscription Length: 3 Months
Dog: Jamie

The labels remain easy to scan, but Medium, 3 Months, Jamie, and First dog rate become the information your eye lands on.

Make only that change first and refresh the cart.

Pasted text.txt
Document
Please take a look at our full storefront.css before i save it and it goes live... .. 





Worked for 19s

I checked the full storefront.css carefully. The file is syntactically intact, with balanced braces and comments, and the existing WooCommerce, checkout, account, and Pack Builder rules are not broken.

Do not save this exact version yet. There is one issue at the very bottom.

The new cart layout rules were added after your mobile rules, and these selectors apply at all screen sizes:

.woocommerce-cart .woocommerce-cart-form table.cart .product-name {
	min-width: 280px !important;
	...
}

.woocommerce-cart .woocommerce-cart-form table.cart dl.variation {
	grid-template-columns: max-content minmax(140px, 1fr) !important;
	...
}

.woocommerce-cart .woocommerce-cart-form table.cart dl.variation dd {
	min-width: 140px !important;
}

On desktop they are doing exactly what we want. On phones, though, those minimum widths can override the earlier mobile layout and potentially create horizontal overflow or squeezed cart content.

I would replace everything from this comment to the end of the file:

/* Bark or Woof Cart: keep Pack metadata readable inside Elementor Cart widget. */

with this corrected version:

/* Bark or Woof Cart: keep Pack metadata readable inside Elementor Cart widget. */
@media (min-width: 901px) {
	.woocommerce-cart .woocommerce-cart-form table.cart {
		table-layout: auto !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart .product-name {
		min-width: 280px !important;
		width: 48% !important;
		overflow: visible !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart dl.variation {
		display: grid !important;
		grid-template-columns: max-content minmax(140px, 1fr) !important;
		gap: 6px 12px !important;
		width: 100% !important;
		margin-top: 12px !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart dl.variation dt,
	.woocommerce-cart .woocommerce-cart-form table.cart dl.variation dd {
		float: none !important;
		width: auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
		white-space: normal !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart dl.variation dd {
		min-width: 140px !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart .product-price {
		width: 16% !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart .product-quantity {
		width: 14% !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart .product-subtotal {
		width: 16% !important;
	}
}

/* Cart Pack metadata: soften labels and emphasize customer selections. */
.woocommerce-cart .woocommerce-cart-form table.cart dl.variation dt {
	color: #667487 !important;
	font-size: 13px;
	font-weight: 600 !important;
	line-height: 1.45;
}

.woocommerce-cart .woocommerce-cart-form table.cart dl.variation dd {
	color: var(--bow-deep-navy) !important;
	font-size: 14px;
	font-weight: 700 !important;
	line-height: 1.45;
}

This preserves the desktop cart you just showed me, while keeping the width forcing away from mobile.

One other point I checked: you already have earlier desktop cart width rules using table-layout: fixed, 15% price, 116px quantity, and 18% subtotal. The new block intentionally overrides those values later in the stylesheet. That is not an error. Since the new layout is the one producing the good screenshot, I would leave the earlier rules alone for now rather than rewriting older working CSS.

So the verdict is:

Everything above the new cart section can stay exactly as it is. Replace only the two new bottom blocks with the version above, then save.

please instead edit the entire thing and send back to me please. 

Yes. I edited the entire storefront.css file and kept everything else unchanged. The only adjustment is the corrected cart section at the bottom so the desktop fix does not interfere with mobile.

I also verified the CSS braces are balanced.

Download the full corrected storefront.css

This is the complete file, ready to replace the current storefront.css.

storefront.css
Code

storefront.css
/**
 * Durable storefront layer for the Bark or Woof Elementor build.
 *
 * Elementor Site Settings owns global fonts, colors, layout widths, buttons,
 * and form design. These scoped rules prevent known WooCommerce/Subscriptions
 * layout failures and give the native pack builder a consistent foundation.
 */

:root {
	--bow-content-width: 1180px;
	--bow-reading-width: 720px;
	--bow-navy: #303f56;
	--bow-deep-navy: #0b355d;
	--bow-yellow: #ffcf2f;
	--bow-ink: #162235;
	--bow-pale-blue: #eef5fa;
	--bow-cream: #fbfaf6;
	--bow-white: #ffffff;
	--bow-line: #d8e2ea;
	--bow-danger: #b42318;
	--bow-radius: 16px;
	--bow-shadow: 0 12px 30px rgba(11, 53, 93, 0.08);
}

/* Optional Elementor container classes. Add these to an inner container, not
 * to the page body, so the Elementor Site Settings stay authoritative. */
.bow-contained {
	width: min(calc(100% - 40px), var(--bow-content-width));
	margin-inline: auto;
}

.bow-reading-width {
	max-width: var(--bow-reading-width);
	margin-inline: auto;
}

/* Keyboard focus is visible without changing Elementor's normal component look. */
:where(.elementor, .woocommerce) :focus-visible {
	outline: 3px solid var(--bow-yellow);
	outline-offset: 3px;
}

/* WooCommerce form controls need enough room for touch, browser autofill, and
 * the 16px mobile font threshold. Elementor's font choices still cascade in. */
.woocommerce :is(input.input-text, input[type='email'], input[type='tel'], input[type='password'], input[type='number'], select, textarea),
.woocommerce-page :is(input.input-text, input[type='email'], input[type='tel'], input[type='password'], input[type='number'], select, textarea) {
	min-height: 48px;
	border: 1px solid var(--bow-line);
	border-radius: 10px;
	color: var(--bow-ink);
	font-size: max(16px, 1em);
	line-height: 1.35;
}

.woocommerce textarea,
.woocommerce-page textarea {
	min-height: 120px;
}

.woocommerce :is(input.input-text, input[type='email'], input[type='tel'], input[type='password'], input[type='number'], select, textarea):focus,
.woocommerce-page :is(input.input-text, input[type='email'], input[type='tel'], input[type='password'], input[type='number'], select, textarea):focus {
	border-color: var(--bow-deep-navy);
	box-shadow: 0 0 0 3px rgba(255, 207, 47, 0.42);
	outline: 0;
}

.woocommerce :is(a.button, button.button, input.button, #respond input#submit) {
	min-height: 48px;
	border-radius: 999px;
	font-weight: 800;
	line-height: 1.2;
	transition: box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.woocommerce :is(a.button, button.button, input.button, #respond input#submit):hover:not(:disabled) {
	box-shadow: 0 8px 18px rgba(11, 53, 93, 0.16);
	transform: translateY(-1px);
}

.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	margin: 0 0 24px;
	border-top: 0;
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(11, 53, 93, 0.06);
}

/* The custom multi-dog builder remains plugin-owned. These rules only make it
 * sit cleanly inside either a native or Elementor single-product template. */
.single-product .bow-pack-builder {
	margin: 24px 0 0;
	padding: clamp(22px, 3vw, 34px);
	border: 1px solid rgba(11, 53, 93, 0.16);
	border-radius: var(--bow-radius);
	background: linear-gradient(135deg, #fffdf5 0%, var(--bow-pale-blue) 100%);
	box-shadow: var(--bow-shadow);
	color: var(--bow-ink);
}

.bow-pack-builder__heading {
	max-width: 680px;
}

.bow-pack-builder__heading h2 {
	margin: 4px 0 10px;
	color: var(--bow-deep-navy);
	font-family: var(--e-global-typography-primary-font-family, Georgia, serif);
	font-size: clamp(30px, 3vw, 42px);
	font-weight: var(--e-global-typography-primary-font-weight, 700);
	line-height: 1.12;
}

.bow-pack-builder__heading > p:not(.bow-pack-builder__eyebrow) {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
}

.bow-pack-builder__eyebrow {
	margin: 0;
	color: #8a5b00;
	font-size: 13px !important;
	font-weight: 800 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bow-pack-builder__field > span {
	color: var(--bow-deep-navy);
	font-size: 15px;
	font-weight: 800;
}

.bow-pack-builder :is(input, select) {
	min-height: 50px;
	border-color: #aec0d0;
	border-radius: 10px;
	color: var(--bow-ink);
	font: inherit;
}

.bow-pack-builder__dog {
	padding: 18px;
	border-color: rgba(11, 53, 93, 0.16);
	border-radius: 12px;
	background: var(--bow-white);
}

.bow-pack-builder__dog legend {
	color: var(--bow-deep-navy);
	font-weight: 800;
}

.bow-pack-builder__remove {
	min-height: 44px;
	color: var(--bow-danger);
}

.woocommerce .bow-pack-builder__actions {
	gap: 12px;
}

.woocommerce .bow-pack-builder__actions .button {
	min-height: 50px;
	padding-inline: 22px;
	border-radius: 999px;
	font-weight: 800;
}

.woocommerce .bow-pack-builder__actions .bow-pack-builder__add {
	border: 1px solid var(--bow-deep-navy) !important;
	background: var(--bow-white) !important;
	color: var(--bow-deep-navy) !important;
}

.woocommerce .bow-pack-builder__actions .bow-pack-builder__add:hover:not(:disabled) {
	background: var(--bow-pale-blue) !important;
}

.woocommerce .bow-pack-builder__actions .bow-pack-builder__submit {
	background: var(--bow-yellow) !important;
	color: var(--bow-ink) !important;
}

.woocommerce .bow-pack-builder__actions .bow-pack-builder__submit:hover:not(:disabled) {
	background: #f4be12 !important;
}

.bow-pack-builder :is(.bow-pack-builder__note, .bow-pack-builder__help) {
	font-size: 14px;
	line-height: 1.5;
}

.bow-pack-builder__help a {
	color: var(--bow-deep-navy);
	text-decoration-color: var(--bow-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Cart: keep the product/details column deliberately generous so long plan
 * names, dog names, size, and subscription metadata do not get cut off. */
.woocommerce-cart-form {
	border: 1px solid var(--bow-line);
	border-radius: var(--bow-radius);
	background: var(--bow-white);
	box-shadow: var(--bow-shadow);
	overflow: hidden;
}

.woocommerce table.shop_table {
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce table.shop_table :is(th, td) {
	border-color: var(--bow-line);
}

.woocommerce table.shop_table thead th {
	padding: 17px 16px;
	border-width: 0 0 1px;
	background: #f4f8fb;
	color: var(--bow-deep-navy);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.woocommerce table.shop_table td {
	padding: 20px 16px;
	border-width: 0 0 1px;
	vertical-align: top;
}

.woocommerce table.cart .product-remove a.remove {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff0ed !important;
	color: var(--bow-danger) !important;
	font-size: 23px;
	line-height: 1;
	text-decoration: none;
}

.woocommerce table.cart .product-remove a.remove:hover {
	background: var(--bow-danger) !important;
	color: var(--bow-white) !important;
}

.woocommerce table.cart .product-thumbnail img {
	width: 76px;
	height: 76px;
	border-radius: 10px;
	object-fit: cover;
}

.woocommerce table.cart .product-name {
	color: var(--bow-deep-navy);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.35;
	/* Subscription labels must remain readable words, never vertical glyphs. */
	overflow-wrap: normal;
	word-break: normal;
}

.woocommerce table.cart .product-name a {
	color: inherit;
	text-decoration: none;
}

.woocommerce table.cart .product-name a:hover {
	text-decoration: underline;
	text-decoration-color: var(--bow-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.woocommerce table.cart dl.variation {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 4px 10px;
	margin: 12px 0 0;
	color: #526274;
	font-size: 14px;
	font-weight: 600;
}

.woocommerce table.cart dl.variation :is(dt, dd) {
	float: none;
	margin: 0;
}

.woocommerce table.cart dl.variation dt {
	color: var(--bow-deep-navy);
	font-weight: 800;
}

.woocommerce table.cart :is(.product-price, .product-subtotal) {
	color: var(--bow-deep-navy);
	font-weight: 800;
	white-space: normal;
}

.woocommerce table.cart .quantity .qty {
	min-height: 42px;
	min-width: 68px;
	border: 1px solid var(--bow-line);
	border-radius: 8px;
}

.woocommerce table.cart td.actions {
	padding: 18px 20px;
	border-bottom: 0;
	background: #f9fbfc;
}

.woocommerce table.cart td.actions .coupon {
	display: flex;
	align-items: center;
	gap: 10px;
}

.woocommerce table.cart td.actions .coupon .input-text {
	width: min(100%, 210px);
}

.woocommerce .cart-collaterals {
	display: grid;
	justify-items: end;
	margin-top: 28px;
}

.woocommerce .cart-collaterals .cart_totals {
	float: none;
	width: min(100%, 520px);
	padding: 26px;
	border: 1px solid var(--bow-line);
	border-radius: var(--bow-radius);
	background: var(--bow-white);
	box-shadow: var(--bow-shadow);
}

.woocommerce .cart-collaterals .cart_totals > h2 {
	margin-bottom: 18px;
	color: var(--bow-deep-navy);
}

.woocommerce .cart-collaterals .wc-proceed-to-checkout a {
	width: 100%;
	min-height: 54px;
	text-align: center;
}

@media (min-width: 901px) {
	.woocommerce-cart-form table.cart {
		width: 100% !important;
		table-layout: fixed;
	}

	.woocommerce-cart-form table.cart .product-remove {
		width: 54px !important;
	}

	.woocommerce-cart-form table.cart .product-thumbnail {
		width: 96px !important;
	}

	.woocommerce-cart-form table.cart .product-name {
		min-width: 0 !important;
		width: auto !important;
	}

	.woocommerce-cart-form table.cart .product-price {
		width: 15% !important;
	}

	.woocommerce-cart-form table.cart .product-quantity {
		width: 116px !important;
	}

	.woocommerce-cart-form table.cart .product-subtotal {
		width: 18% !important;
	}
}

/* Classic WooCommerce checkout needs explicit grid placement. The customer
 * details column remains wider; billing and shipping panels are full-width
 * inside it, preventing the narrow, clipped two-column legacy layout. */
@media (min-width: 1025px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.65fr) minmax(360px, 0.9fr);
		gap: 0 34px;
		align-items: start;
	}

	.woocommerce-checkout form.checkout > .col2-set {
		grid-column: 1;
		grid-row: 1 / span 3;
		width: auto;
	}

	.woocommerce-checkout form.checkout > #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		margin: 0 0 12px;
		color: var(--bow-deep-navy);
	}

	.woocommerce-checkout form.checkout > #order_review {
		grid-column: 2;
		grid-row: 2;
		clear: none;
	}
}

.woocommerce-checkout .col2-set :is(.col-1, .col-2) {
	float: none;
	width: 100%;
}

.woocommerce-checkout #order_review {
	padding: 24px;
	border: 1px solid var(--bow-line);
	border-radius: var(--bow-radius);
	background: var(--bow-white);
	box-shadow: var(--bow-shadow);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table {
	margin-bottom: 20px;
}

.woocommerce-checkout #payment {
	margin-top: 18px;
	padding: 18px;
	border-radius: 12px;
	background: var(--bow-pale-blue);
}

.woocommerce-checkout #place_order {
	width: 100%;
	min-height: 54px;
	margin-top: 16px;
}

/* My Account remains native for subscriptions, payment methods, and address
 * management, while links gain clearer hit targets and focus treatment. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	border: 1px solid var(--bow-line);
	border-radius: 12px;
	list-style: none;
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	min-height: 44px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--bow-line);
	color: var(--bow-deep-navy);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation :is(.is-active a, a:hover) {
	background: var(--bow-pale-blue);
}

@media (max-width: 900px) {
	.woocommerce .cart-collaterals {
		justify-items: stretch;
	}

	.woocommerce .cart-collaterals .cart_totals {
		width: 100%;
	}

	.woocommerce-checkout form.checkout {
		display: block;
	}

	.woocommerce-checkout :is(#order_review_heading, #order_review) {
		margin-top: 28px;
	}
}

@media (max-width: 767px) {
	.bow-contained {
		width: min(calc(100% - 28px), var(--bow-content-width));
	}

	.single-product .bow-pack-builder {
		padding: 22px;
	}

	.woocommerce .bow-pack-builder__actions .button {
		width: 100%;
	}

	.woocommerce-cart-form {
		border-radius: 14px;
	}

	.woocommerce table.shop_table thead {
		display: none;
	}

	.woocommerce table.cart,
	.woocommerce table.cart tbody,
	.woocommerce table.cart tr,
	.woocommerce table.cart td {
		display: block;
		width: 100%;
	}

	.woocommerce table.cart tr.woocommerce-cart-form__cart-item {
		position: relative;
		padding: 18px 18px 14px;
	}

	.woocommerce table.cart tr.woocommerce-cart-form__cart-item td {
		padding: 5px 0;
		border: 0;
	}

	.woocommerce table.cart .product-remove {
		position: absolute;
		top: 11px;
		right: 12px;
		width: auto;
	}

	.woocommerce table.cart .product-thumbnail {
		display: none;
	}

	.woocommerce table.cart .product-name {
		padding-right: 42px !important;
	}

	.woocommerce table.cart :is(.product-price, .product-quantity, .product-subtotal) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 18px;
		padding-top: 10px !important;
	}

	.woocommerce table.cart :is(.product-price, .product-quantity, .product-subtotal)::before {
		color: #526274;
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		content: attr(data-title);
	}

	.woocommerce table.cart td.actions {
		padding: 18px;
	}

	.woocommerce table.cart td.actions .coupon {
		align-items: stretch;
		flex-direction: column;
	}

	.woocommerce table.cart td.actions .coupon .input-text {
		width: 100%;
	}

	.woocommerce .cart-collaterals .cart_totals,
	.woocommerce-checkout #order_review {
		padding: 22px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Bark or Woof Cart: keep Pack metadata readable inside Elementor Cart widget. */
@media (min-width: 901px) {
	.woocommerce-cart .woocommerce-cart-form table.cart {
		table-layout: auto !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart .product-name {
		min-width: 280px !important;
		width: 48% !important;
		overflow: visible !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart dl.variation {
		display: grid !important;
		grid-template-columns: max-content minmax(140px, 1fr) !important;
		gap: 6px 12px !important;
		width: 100% !important;
		margin-top: 12px !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart dl.variation dt,
	.woocommerce-cart .woocommerce-cart-form table.cart dl.variation dd {
		float: none !important;
		width: auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
		white-space: normal !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart dl.variation dd {
		min-width: 140px !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart .product-price {
		width: 16% !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart .product-quantity {
		width: 14% !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart .product-subtotal {
		width: 16% !important;
	}
}

/* Cart Pack metadata: soften labels and emphasize customer selections. */
.woocommerce-cart .woocommerce-cart-form table.cart dl.variation dt {
	color: #667487 !important;
	font-size: 13px;
	font-weight: 600 !important;
	line-height: 1.45;
}

.woocommerce-cart .woocommerce-cart-form table.cart dl.variation dd {
	color: var(--bow-deep-navy) !important;
	font-size: 14px;
	font-weight: 700 !important;
	line-height: 1.45;
}

storefront.css
/**
 * Durable storefront layer for the Bark or Woof Elementor build.
 *
 * Elementor Site Settings owns global fonts, colors, layout widths, buttons,
 * and form design. These scoped rules prevent known WooCommerce/Subscriptions
 * layout failures and give the native pack builder a consistent foundation.
 */

:root {
	--bow-content-width: 1180px;
	--bow-reading-width: 720px;
	--bow-navy: #303f56;
	--bow-deep-navy: #0b355d;
	--bow-yellow: #ffcf2f;
	--bow-ink: #162235;
	--bow-pale-blue: #eef5fa;
	--bow-cream: #fbfaf6;
	--bow-white: #ffffff;
	--bow-line: #d8e2ea;
	--bow-danger: #b42318;
	--bow-radius: 16px;
	--bow-shadow: 0 12px 30px rgba(11, 53, 93, 0.08);
}

/* Optional Elementor container classes. Add these to an inner container, not
 * to the page body, so the Elementor Site Settings stay authoritative. */
.bow-contained {
	width: min(calc(100% - 40px), var(--bow-content-width));
	margin-inline: auto;
}

.bow-reading-width {
	max-width: var(--bow-reading-width);
	margin-inline: auto;
}

/* Keyboard focus is visible without changing Elementor's normal component look. */
:where(.elementor, .woocommerce) :focus-visible {
	outline: 3px solid var(--bow-yellow);
	outline-offset: 3px;
}

/* WooCommerce form controls need enough room for touch, browser autofill, and
 * the 16px mobile font threshold. Elementor's font choices still cascade in. */
.woocommerce :is(input.input-text, input[type='email'], input[type='tel'], input[type='password'], input[type='number'], select, textarea),
.woocommerce-page :is(input.input-text, input[type='email'], input[type='tel'], input[type='password'], input[type='number'], select, textarea) {
	min-height: 48px;
	border: 1px solid var(--bow-line);
	border-radius: 10px;
	color: var(--bow-ink);
	font-size: max(16px, 1em);
	line-height: 1.35;
}

.woocommerce textarea,
.woocommerce-page textarea {
	min-height: 120px;
}

.woocommerce :is(input.input-text, input[type='email'], input[type='tel'], input[type='password'], input[type='number'], select, textarea):focus,
.woocommerce-page :is(input.input-text, input[type='email'], input[type='tel'], input[type='password'], input[type='number'], select, textarea):focus {
	border-color: var(--bow-deep-navy);
	box-shadow: 0 0 0 3px rgba(255, 207, 47, 0.42);
	outline: 0;
}

.woocommerce :is(a.button, button.button, input.button, #respond input#submit) {
	min-height: 48px;
	border-radius: 999px;
	font-weight: 800;
	line-height: 1.2;
	transition: box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.woocommerce :is(a.button, button.button, input.button, #respond input#submit):hover:not(:disabled) {
	box-shadow: 0 8px 18px rgba(11, 53, 93, 0.16);
	transform: translateY(-1px);
}

.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	margin: 0 0 24px;
	border-top: 0;
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(11, 53, 93, 0.06);
}

/* The custom multi-dog builder remains plugin-owned. These rules only make it
 * sit cleanly inside either a native or Elementor single-product template. */
.single-product .bow-pack-builder {
	margin: 24px 0 0;
	padding: clamp(22px, 3vw, 34px);
	border: 1px solid rgba(11, 53, 93, 0.16);
	border-radius: var(--bow-radius);
	background: linear-gradient(135deg, #fffdf5 0%, var(--bow-pale-blue) 100%);
	box-shadow: var(--bow-shadow);
	color: var(--bow-ink);
}

.bow-pack-builder__heading {
	max-width: 680px;
}

.bow-pack-builder__heading h2 {
	margin: 4px 0 10px;
	color: var(--bow-deep-navy);
	font-family: var(--e-global-typography-primary-font-family, Georgia, serif);
	font-size: clamp(30px, 3vw, 42px);
	font-weight: var(--e-global-typography-primary-font-weight, 700);
	line-height: 1.12;
}

.bow-pack-builder__heading > p:not(.bow-pack-builder__eyebrow) {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
}

.bow-pack-builder__eyebrow {
	margin: 0;
	color: #8a5b00;
	font-size: 13px !important;
	font-weight: 800 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bow-pack-builder__field > span {
	color: var(--bow-deep-navy);
	font-size: 15px;
	font-weight: 800;
}

.bow-pack-builder :is(input, select) {
	min-height: 50px;
	border-color: #aec0d0;
	border-radius: 10px;
	color: var(--bow-ink);
	font: inherit;
}

.bow-pack-builder__dog {
	padding: 18px;
	border-color: rgba(11, 53, 93, 0.16);
	border-radius: 12px;
	background: var(--bow-white);
}

.bow-pack-builder__dog legend {
	color: var(--bow-deep-navy);
	font-weight: 800;
}

.bow-pack-builder__remove {
	min-height: 44px;
	color: var(--bow-danger);
}

.woocommerce .bow-pack-builder__actions {
	gap: 12px;
}

.woocommerce .bow-pack-builder__actions .button {
	min-height: 50px;
	padding-inline: 22px;
	border-radius: 999px;
	font-weight: 800;
}

.woocommerce .bow-pack-builder__actions .bow-pack-builder__add {
	border: 1px solid var(--bow-deep-navy) !important;
	background: var(--bow-white) !important;
	color: var(--bow-deep-navy) !important;
}

.woocommerce .bow-pack-builder__actions .bow-pack-builder__add:hover:not(:disabled) {
	background: var(--bow-pale-blue) !important;
}

.woocommerce .bow-pack-builder__actions .bow-pack-builder__submit {
	background: var(--bow-yellow) !important;
	color: var(--bow-ink) !important;
}

.woocommerce .bow-pack-builder__actions .bow-pack-builder__submit:hover:not(:disabled) {
	background: #f4be12 !important;
}

.bow-pack-builder :is(.bow-pack-builder__note, .bow-pack-builder__help) {
	font-size: 14px;
	line-height: 1.5;
}

.bow-pack-builder__help a {
	color: var(--bow-deep-navy);
	text-decoration-color: var(--bow-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Cart: keep the product/details column deliberately generous so long plan
 * names, dog names, size, and subscription metadata do not get cut off. */
.woocommerce-cart-form {
	border: 1px solid var(--bow-line);
	border-radius: var(--bow-radius);
	background: var(--bow-white);
	box-shadow: var(--bow-shadow);
	overflow: hidden;
}

.woocommerce table.shop_table {
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce table.shop_table :is(th, td) {
	border-color: var(--bow-line);
}

.woocommerce table.shop_table thead th {
	padding: 17px 16px;
	border-width: 0 0 1px;
	background: #f4f8fb;
	color: var(--bow-deep-navy);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.woocommerce table.shop_table td {
	padding: 20px 16px;
	border-width: 0 0 1px;
	vertical-align: top;
}

.woocommerce table.cart .product-remove a.remove {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff0ed !important;
	color: var(--bow-danger) !important;
	font-size: 23px;
	line-height: 1;
	text-decoration: none;
}

.woocommerce table.cart .product-remove a.remove:hover {
	background: var(--bow-danger) !important;
	color: var(--bow-white) !important;
}

.woocommerce table.cart .product-thumbnail img {
	width: 76px;
	height: 76px;
	border-radius: 10px;
	object-fit: cover;
}

.woocommerce table.cart .product-name {
	color: var(--bow-deep-navy);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.35;
	/* Subscription labels must remain readable words, never vertical glyphs. */
	overflow-wrap: normal;
	word-break: normal;
}

.woocommerce table.cart .product-name a {
	color: inherit;
	text-decoration: none;
}

.woocommerce table.cart .product-name a:hover {
	text-decoration: underline;
	text-decoration-color: var(--bow-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.woocommerce table.cart dl.variation {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 4px 10px;
	margin: 12px 0 0;
	color: #526274;
	font-size: 14px;
	font-weight: 600;
}

.woocommerce table.cart dl.variation :is(dt, dd) {
	float: none;
	margin: 0;
}

.woocommerce table.cart dl.variation dt {
	color: var(--bow-deep-navy);
	font-weight: 800;
}

.woocommerce table.cart :is(.product-price, .product-subtotal) {
	color: var(--bow-deep-navy);
	font-weight: 800;
	white-space: normal;
}

.woocommerce table.cart .quantity .qty {
	min-height: 42px;
	min-width: 68px;
	border: 1px solid var(--bow-line);
	border-radius: 8px;
}

.woocommerce table.cart td.actions {
	padding: 18px 20px;
	border-bottom: 0;
	background: #f9fbfc;
}

.woocommerce table.cart td.actions .coupon {
	display: flex;
	align-items: center;
	gap: 10px;
}

.woocommerce table.cart td.actions .coupon .input-text {
	width: min(100%, 210px);
}

.woocommerce .cart-collaterals {
	display: grid;
	justify-items: end;
	margin-top: 28px;
}

.woocommerce .cart-collaterals .cart_totals {
	float: none;
	width: min(100%, 520px);
	padding: 26px;
	border: 1px solid var(--bow-line);
	border-radius: var(--bow-radius);
	background: var(--bow-white);
	box-shadow: var(--bow-shadow);
}

.woocommerce .cart-collaterals .cart_totals > h2 {
	margin-bottom: 18px;
	color: var(--bow-deep-navy);
}

.woocommerce .cart-collaterals .wc-proceed-to-checkout a {
	width: 100%;
	min-height: 54px;
	text-align: center;
}

@media (min-width: 901px) {
	.woocommerce-cart-form table.cart {
		width: 100% !important;
		table-layout: fixed;
	}

	.woocommerce-cart-form table.cart .product-remove {
		width: 54px !important;
	}

	.woocommerce-cart-form table.cart .product-thumbnail {
		width: 96px !important;
	}

	.woocommerce-cart-form table.cart .product-name {
		min-width: 0 !important;
		width: auto !important;
	}

	.woocommerce-cart-form table.cart .product-price {
		width: 15% !important;
	}

	.woocommerce-cart-form table.cart .product-quantity {
		width: 116px !important;
	}

	.woocommerce-cart-form table.cart .product-subtotal {
		width: 18% !important;
	}
}

/* Classic WooCommerce checkout needs explicit grid placement. The customer
 * details column remains wider; billing and shipping panels are full-width
 * inside it, preventing the narrow, clipped two-column legacy layout. */
@media (min-width: 1025px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.65fr) minmax(360px, 0.9fr);
		gap: 0 34px;
		align-items: start;
	}

	.woocommerce-checkout form.checkout > .col2-set {
		grid-column: 1;
		grid-row: 1 / span 3;
		width: auto;
	}

	.woocommerce-checkout form.checkout > #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		margin: 0 0 12px;
		color: var(--bow-deep-navy);
	}

	.woocommerce-checkout form.checkout > #order_review {
		grid-column: 2;
		grid-row: 2;
		clear: none;
	}
}

.woocommerce-checkout .col2-set :is(.col-1, .col-2) {
	float: none;
	width: 100%;
}

.woocommerce-checkout #order_review {
	padding: 24px;
	border: 1px solid var(--bow-line);
	border-radius: var(--bow-radius);
	background: var(--bow-white);
	box-shadow: var(--bow-shadow);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table {
	margin-bottom: 20px;
}

.woocommerce-checkout #payment {
	margin-top: 18px;
	padding: 18px;
	border-radius: 12px;
	background: var(--bow-pale-blue);
}

.woocommerce-checkout #place_order {
	width: 100%;
	min-height: 54px;
	margin-top: 16px;
}

/* My Account remains native for subscriptions, payment methods, and address
 * management, while links gain clearer hit targets and focus treatment. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	border: 1px solid var(--bow-line);
	border-radius: 12px;
	list-style: none;
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	min-height: 44px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--bow-line);
	color: var(--bow-deep-navy);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation :is(.is-active a, a:hover) {
	background: var(--bow-pale-blue);
}

@media (max-width: 900px) {
	.woocommerce .cart-collaterals {
		justify-items: stretch;
	}

	.woocommerce .cart-collaterals .cart_totals {
		width: 100%;
	}

	.woocommerce-checkout form.checkout {
		display: block;
	}

	.woocommerce-checkout :is(#order_review_heading, #order_review) {
		margin-top: 28px;
	}
}

@media (max-width: 767px) {
	.bow-contained {
		width: min(calc(100% - 28px), var(--bow-content-width));
	}

	.single-product .bow-pack-builder {
		padding: 22px;
	}

	.woocommerce .bow-pack-builder__actions .button {
		width: 100%;
	}

	.woocommerce-cart-form {
		border-radius: 14px;
	}

	.woocommerce table.shop_table thead {
		display: none;
	}

	.woocommerce table.cart,
	.woocommerce table.cart tbody,
	.woocommerce table.cart tr,
	.woocommerce table.cart td {
		display: block;
		width: 100%;
	}

	.woocommerce table.cart tr.woocommerce-cart-form__cart-item {
		position: relative;
		padding: 18px 18px 14px;
	}

	.woocommerce table.cart tr.woocommerce-cart-form__cart-item td {
		padding: 5px 0;
		border: 0;
	}

	.woocommerce table.cart .product-remove {
		position: absolute;
		top: 11px;
		right: 12px;
		width: auto;
	}

	.woocommerce table.cart .product-thumbnail {
		display: none;
	}

	.woocommerce table.cart .product-name {
		padding-right: 42px !important;
	}

	.woocommerce table.cart :is(.product-price, .product-quantity, .product-subtotal) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 18px;
		padding-top: 10px !important;
	}

	.woocommerce table.cart :is(.product-price, .product-quantity, .product-subtotal)::before {
		color: #526274;
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		content: attr(data-title);
	}

	.woocommerce table.cart td.actions {
		padding: 18px;
	}

	.woocommerce table.cart td.actions .coupon {
		align-items: stretch;
		flex-direction: column;
	}

	.woocommerce table.cart td.actions .coupon .input-text {
		width: 100%;
	}

	.woocommerce .cart-collaterals .cart_totals,
	.woocommerce-checkout #order_review {
		padding: 22px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Bark or Woof Cart: keep Pack metadata readable inside Elementor Cart widget. */
@media (min-width: 901px) {
	.woocommerce-cart .woocommerce-cart-form table.cart {
		table-layout: auto !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart .product-name {
		min-width: 280px !important;
		width: 48% !important;
		overflow: visible !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart dl.variation {
		display: grid !important;
		grid-template-columns: max-content minmax(140px, 1fr) !important;
		gap: 6px 12px !important;
		width: 100% !important;
		margin-top: 12px !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart dl.variation dt,
	.woocommerce-cart .woocommerce-cart-form table.cart dl.variation dd {
		float: none !important;
		width: auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
		white-space: normal !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart dl.variation dd {
		min-width: 140px !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart .product-price {
		width: 16% !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart .product-quantity {
		width: 14% !important;
	}

	.woocommerce-cart .woocommerce-cart-form table.cart .product-subtotal {
		width: 16% !important;
	}
}

/* Cart Pack metadata: soften labels and emphasize customer selections. */
.woocommerce-cart .woocommerce-cart-form table.cart dl.variation dt {
	color: #667487 !important;
	font-size: 13px;
	font-weight: 600 !important;
	line-height: 1.45;
}

.woocommerce-cart .woocommerce-cart-form table.cart dl.variation dd {
	color: var(--bow-deep-navy) !important;
	font-size: 14px;
	font-weight: 700 !important;
	line-height: 1.45;
}